/* Premium Glassmorphic Theme for KMS Corporate */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Color Palette */
    --bg-dark: #090d16;
    --primary: #6366f1;
    --primary-glow: rgba(99, 102, 241, 0.3);
    --accent: #a855f7;
    --accent-glow: rgba(168, 85, 247, 0.3);
    
    --card-bg: rgba(13, 20, 38, 0.45);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(99, 102, 241, 0.35);
    
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-error: #f43f5e;
    --color-error-bg: rgba(244, 63, 94, 0.1);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
    background: radial-gradient(circle at 30% 20%, #171738 0%, #090d16 100%);
}

/* Dynamic Radial Glows in Background */
body::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(80px);
}

body::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(80px);
}

/* Glassmorphic Container */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid var(--card-border);
    border-radius: 1.25rem;
    padding: 2.5rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7),
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
    animation: fadeIn 0.8s ease-out;
}

.glass-card:hover {
    border-color: var(--card-border-hover);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8),
                0 0 20px rgba(99, 102, 241, 0.15);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Inputs & Labels */
label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow),
                inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Buttons */
button, .btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-body);
    box-shadow: 0 4px 12px var(--primary-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4),
                0 0 10px rgba(168, 85, 247, 0.25);
}

button:active, .btn:active {
    transform: translateY(0);
}

/* Dashboard UI Layout */
body.dashboard-body {
    align-items: flex-start;
    padding: 3rem 1.5rem;
}

.dashboard-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    animation: fadeIn 0.6s ease-out;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1.5rem;
}

.header h1 {
    font-size: 2.25rem;
    background: linear-gradient(135deg, #ffffff 40%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stats Grid */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    padding: 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.stat-card.stat-active::before {
    background: var(--color-success);
}

.stat-card.stat-warning::before {
    background: var(--color-warning);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-title {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--font-heading);
    margin-top: 0.25rem;
    background: linear-gradient(135deg, #ffffff 60%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-card.stat-active .stat-icon {
    color: var(--color-success);
}

.stat-card.stat-warning .stat-icon {
    color: var(--color-warning);
}

/* Charts Grid */
.charts-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 1.5rem; 
    margin-bottom: 2.5rem; 
}

.chart-container { 
    padding: 1.75rem; 
}

.chart-wrapper {
    position: relative;
    height: 320px;
    width: 100%;
}

@media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
}

/* Two Column Grid for Bottom Area */
.dashboard-grid-two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .dashboard-grid-two-col {
        grid-template-columns: 1fr;
    }
}

/* Tables */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 1.5rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1.15rem 1.25rem;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}

td {
    padding: 1.15rem 1.25rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

tr {
    background: transparent;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Status Badges */
.status-badge {
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-active {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Operations dashboard */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.dashboard-body { display: block; padding: 0; background: #080b14; color: #f5f7fb; }
body.dashboard-body::before { position: fixed; width: 70vw; height: 70vw; top: -45vw; left: 10vw; background: radial-gradient(circle, rgba(84, 92, 255, .16), transparent 64%); }
body.dashboard-body::after { position: fixed; width: 60vw; height: 60vw; right: -30vw; bottom: -35vw; background: radial-gradient(circle, rgba(183, 119, 255, .10), transparent 65%); }
.app-shell { width: min(1500px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 42px 28px; }
.topbar { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-block, .header-actions, .action-row { display: flex; align-items: center; gap: 14px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, #858bff, #7650df); box-shadow: 0 10px 28px rgba(88, 80, 225, .32); color: white; font: 800 20px var(--font-heading); }
.brand-block h1 { margin: 1px 0 0; font-size: 1.18rem; letter-spacing: -.01em; }
.eyebrow { margin: 0; color: #7f8ba3; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #aeb8cc; font-size: .76rem; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #42d3a5; box-shadow: 0 0 12px #42d3a5; }
.btn { min-height: 40px; padding: 10px 16px; border-radius: 10px; background: #737aff; box-shadow: none; font-size: .82rem; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(74, 79, 195, .22); }
.btn-secondary { background: rgba(124,131,255,.10); border: 1px solid rgba(124,131,255,.3); color: #cbd0ff; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.09); color: #aeb8cc; }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding: 48px 0 28px; }
.hero-row h2 { max-width: 750px; margin: 8px 0; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.08; letter-spacing: -.045em; }
.section-copy { max-width: 690px; margin: 0; color: #8995ab; font-size: .93rem; line-height: 1.65; }
.system-health { min-width: 290px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(13,18,31,.82); border: 1px solid rgba(66,211,165,.22); border-radius: 14px; }
.system-health div { display: flex; flex-direction: column; gap: 3px; }
.system-health strong { font-size: .84rem; }.system-health span:last-child { color: #7f8ba3; font-size: .72rem; }
.health-indicator { width: 10px; height: 10px; border-radius: 50%; background: #42d3a5; box-shadow: 0 0 16px #42d3a5; }
.health-indicator.loading { background: #7f8ba3; box-shadow: none; animation: pulse 1s infinite; }.health-indicator.degraded { background: #ff6b8b; box-shadow: 0 0 14px #ff6b8b; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel { position: relative; background: linear-gradient(145deg, rgba(17,23,39,.94), rgba(11,15,27,.96)); border: 1px solid rgba(255,255,255,.075); box-shadow: 0 18px 44px rgba(0,0,0,.20); }
.metric-card { min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: 16px; overflow: hidden; }
.metric-card::after { content: ''; position: absolute; inset: auto -28px -48px auto; width: 105px; height: 105px; border-radius: 50%; background: rgba(124,131,255,.10); filter: blur(2px); }
.metric-card.success::after { background: rgba(66,211,165,.10); }.metric-card.warning::after { background: rgba(245,185,76,.11); }.metric-card.accent::after { background: rgba(183,119,255,.11); }
.metric-label { color: #8b97ad; font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.metric-value { margin: 9px 0 6px; font: 750 clamp(1.8rem, 3vw, 2.45rem) var(--font-heading); letter-spacing: -.04em; }
.metric-note, .panel-subtitle { color: #69758c; font-size: .72rem; }
.skeleton-text { color: transparent; width: 45%; border-radius: 7px; background: linear-gradient(90deg, #171e30 25%, #222b40 45%, #171e30 65%); background-size: 300% 100%; animation: shimmer 1.2s infinite; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, .75fr); gap: 14px; margin-bottom: 14px; }
.panel { border-radius: 16px; padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 18px; }
.panel h3 { margin: 6px 0 0; font-size: 1.05rem; }
.chart-wrapper { height: 285px; }
.activations-panel { padding: 0; overflow: hidden; }
.activations-heading { padding: 22px 22px 0; align-items: center; }
.panel-subtitle { margin-top: 7px; }
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px 210px; gap: 10px; padding: 0 22px 18px; }
.filter-bar label { margin: 0; }
.filter-bar input, .filter-bar select { width: 100%; height: 42px; margin: 0; padding: 0 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #0d1220; color: #dfe4ef; font: 500 .8rem var(--font-body); box-shadow: none; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: #737aff; box-shadow: 0 0 0 3px rgba(115,122,255,.13); }
.table-container { margin: 0; overflow-x: auto; }
table { min-width: 940px; }
th { padding: 13px 18px; background: rgba(255,255,255,.018); border-top: 1px solid rgba(255,255,255,.05); font-size: .66rem; }
td { padding: 15px 18px; color: #9ca8bd; font-size: .79rem; }
.machine-cell { color: #edf0f6; font-weight: 650; }
.status-badge { padding: 5px 9px; font-size: .64rem; }.status-active { color: #42d3a5; background: rgba(66,211,165,.09); border-color: rgba(66,211,165,.18); }.status-expiring { color: #f5b94c; background: rgba(245,185,76,.09); border: 1px solid rgba(245,185,76,.18); }.status-expired { color: #ff6b8b; background: rgba(255,107,139,.09); border: 1px solid rgba(255,107,139,.18); }
.loading-row, .empty-state { padding: 25px; text-align: center; color: #69758c; font-size: .76rem; }
.empty-state { display: flex; flex-direction: column; gap: 5px; }.empty-state[hidden] { display: none; }.empty-state strong { color: #d7ddea; }
.remote-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; margin-top: 14px; }
.compact-panel { min-height: 200px; }.service-list { margin: 20px 0 0; }.service-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .78rem; }.service-list dt { color: #7f8ba3; }.service-list dd { margin: 0; color: #dbe0eb; font-weight: 650; }
.action-panel { display: flex; flex-direction: column; align-items: flex-start; }.action-panel p:not(.eyebrow) { max-width: 620px; margin: 16px 0 24px; color: #8995ab; font-size: .85rem; line-height: 1.65; }.action-row { margin-top: auto; flex-wrap: wrap; }
.footer { padding: 24px 0 0; color: #566178; font-size: .7rem; text-align: center; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; transform: translateY(20px); opacity: 0; pointer-events: none; padding: 12px 16px; border-radius: 10px; background: #172337; border: 1px solid rgba(66,211,165,.25); color: #dfe7f3; font-size: .78rem; transition: .2s ease; }.toast.visible { transform: translateY(0); opacity: 1; }.toast.error { border-color: rgba(255,107,139,.35); }
@keyframes shimmer { to { background-position: -300% 0; } } @keyframes pulse { 50% { opacity: .35; } }

@media (max-width: 1000px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }.analytics-grid, .remote-grid { grid-template-columns: 1fr; }.filter-bar { grid-template-columns: 1fr 1fr; }.search-field { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .app-shell { padding: 0 16px 20px; }.topbar { align-items: flex-start; padding: 18px 0; }.header-actions { justify-content: flex-end; flex-wrap: wrap; }.live-pill { display: none; }.hero-row { align-items: stretch; flex-direction: column; padding-top: 34px; }.system-health { min-width: 0; }.metric-grid { grid-template-columns: 1fr; }.filter-bar { grid-template-columns: 1fr; }.search-field { grid-column: auto; }.activations-heading { align-items: flex-start; }.panel { padding: 18px; }.activations-panel { padding: 0; }.chart-wrapper { height: 250px; }
}