* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    /* Cortex Theme (from Theme.qml) */
    --surface: #000000;
    --surface-low: #0a0a0e;
    --surface-container: #111116;
    --surface-high: #1a1a22;
    --surface-highest: #242430;
    --primary: #3c4ffd;
    --on-primary: #fff;
    --primary-container: #1a24b9;
    --secondary: #a1b8ff;
    --tertiary: #ffab40;
    --error: #ff3b57;
    --success: #A8DAB5;
    --on-surface: #efefef;
    --on-surface-variant: #999999;
    --outline: #49454F;
    --outline-variant: #333340;
    --frosted-bg: rgba(0,0,0,0.7);
    --frosted-bg-light: rgba(18,18,23,0.92);
    --frosted-border: rgba(255,255,255,0.06);
    --shape-xs: 4px; --shape-s: 8px; --shape-m: 12px; --shape-l: 16px;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--surface); color: var(--on-surface); min-height: 100vh; }
a { color: var(--secondary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Frosted card */
.frosted {
    background: var(--frosted-bg-light);
    border: 1px solid var(--frosted-border);
    border-radius: var(--shape-l);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Buttons */
.btn-tonal { padding: 8px 20px; border-radius: var(--shape-s); border: none; background: rgba(60,79,253,0.15); color: var(--secondary); font-size: 13px; font-weight: 500; transition: background 0.15s; }
.btn-tonal:hover { background: rgba(60,79,253,0.25); }
.btn-tonal:disabled { opacity: 0.4; cursor: default; }
.btn-filled { padding: 10px 28px; border-radius: var(--shape-s); border: none; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 500; transition: opacity 0.15s; }
.btn-filled:hover { opacity: 0.85; }
.btn-text { padding: 6px 12px; border-radius: var(--shape-s); border: none; background: transparent; color: var(--on-surface-variant); font-size: 12px; transition: background 0.15s; }
.btn-text:hover { background: var(--surface-high); }

/* Icons */
.icon { font-size: 16px; vertical-align: middle; }
.icon-sm { font-size: 14px; }

/* Login */
#login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-card { width: 340px; padding: 32px; text-align: center; }
.login-card h1 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.login-card .subtitle { font-size: 12px; color: var(--on-surface-variant); margin-bottom: 28px; }
/* logo handled via img tag now */
.login-field { width: 100%; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--shape-s); border: 1px solid var(--outline-variant); background: var(--surface-container); color: var(--on-surface); font-size: 13px; outline: none; }
.login-field:focus { border-color: var(--primary); }
.login-error { font-size: 11px; color: var(--error); margin-bottom: 8px; min-height: 16px; }
.login-card .btn-filled { width: 100%; margin-top: 4px; }

/* App shell */
#app { display: none; }
header { display: flex; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container); }
header .brand { display: flex; align-items: center; gap: 8px; }
header .brand .mdi { font-size: 20px; color: var(--primary); }
header .brand span { font-size: 14px; font-weight: 500; }
header .user-info { font-size: 11px; color: var(--on-surface-variant); margin-right: 12px; }
.nav-link.active { background: rgba(60,79,253,0.12); color: var(--secondary); }

/* Case list */
.filters { display: flex; gap: 12px; padding: 16px 24px; align-items: center; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--shape-s); border: 1px solid var(--outline-variant); background: var(--surface-container); flex: 1; max-width: 400px; }
.search-box .mdi { color: var(--on-surface-variant); font-size: 16px; }
.search-box input { border: none; background: transparent; color: var(--on-surface); font-size: 13px; outline: none; flex: 1; }
.case-count { font-size: 11px; color: var(--on-surface-variant); margin-left: auto; }

.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; padding: 0 24px 24px; }
.case-card { padding: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.case-card:hover { border-color: rgba(60,79,253,0.4); }
.case-card .proc { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.case-card .meta { font-size: 11px; color: var(--on-surface-variant); line-height: 1.8; }
.case-card .meta span { margin-right: 10px; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-uploaded { background: rgba(60,79,253,0.15); color: var(--secondary); }
.badge-completed { background: rgba(168,218,181,0.15); color: var(--success); }
.badge-live { background: rgba(255,59,87,0.15); color: var(--error); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.6 } }
.badges { display: flex; gap: 6px; margin-top: 6px; }

/* Dashboard */
#dashboard { display: none; padding: 24px; max-width: 1200px; margin: 0 auto; }
.dash-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--on-surface-variant); cursor: pointer; margin-bottom: 16px; }
.dash-back:hover { color: var(--on-surface); }
.dash-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 20px; }
@media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } }
.info-card { padding: 20px; }
.info-card h2 { font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.info-table { font-size: 12px; line-height: 2.2; }
.info-table .label { color: var(--on-surface-variant); display: inline-block; width: 80px; }
.info-table .val { color: var(--on-surface); }
.info-table .mono { font-family: monospace; font-size: 11px; color: var(--on-surface-variant); }

/* Teleconf */
.teleconf-card { padding: 16px; }
.teleconf-card h3 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); margin-bottom: 12px; }
.teleconf-status { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-live { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot-off { background: var(--on-surface-variant); }
.teleconf-label { font-size: 12px; }
.join-link { display: block; padding: 10px; border-radius: var(--shape-s); background: rgba(168,218,181,0.12); color: var(--success); font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; transition: background 0.15s; }
.join-link:hover { background: rgba(168,218,181,0.2); text-decoration: none; }
.join-link.disabled { background: var(--surface-high); color: var(--on-surface-variant); pointer-events: none; }
.teleconf-url { font-size: 10px; font-family: monospace; color: var(--on-surface-variant); margin-top: 8px; word-break: break-all; }

/* Assets */
.section { margin-bottom: 20px; }
.section-head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.section-head .mdi { font-size: 14px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.asset-card { background: var(--surface-high); border: 1px solid var(--outline-variant); border-radius: var(--shape-s); padding: 10px; cursor: pointer; transition: border-color 0.15s; }
.asset-card:hover { border-color: rgba(60,79,253,0.4); }
.asset-card .name { font-size: 11px; font-family: monospace; color: var(--on-surface-variant); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card .info { font-size: 10px; color: var(--on-surface-variant); }
.asset-thumb { width: 100%; height: 100px; object-fit: cover; border-radius: var(--shape-xs); margin-bottom: 6px; background: var(--surface-low); display: block; }
.asset-thumb-loading { width: 100%; height: 100px; border-radius: var(--shape-xs); margin-bottom: 6px; background: var(--surface-low); display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant); font-size: 11px; }

/* Modals */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { position: relative; max-width: 90vw; max-height: 90vh; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 10; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: rgba(0,0,0,0.8); }
#player-modal .modal-content { width: 90vw; max-width: 1100px; background: var(--surface-container); border-radius: var(--shape-l); overflow: hidden; }
#player-modal video { width: 100%; max-height: 78vh; background: #000; display: block; }
.player-bar { padding: 10px 14px; border-top: 1px solid var(--outline-variant); font-size: 11px; font-family: monospace; color: var(--on-surface-variant); }
#image-modal { cursor: pointer; }
#image-modal img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: var(--shape-s); }

/* Loading / empty */
.loading { text-align: center; padding: 48px; color: var(--on-surface-variant); font-size: 13px; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--outline-variant); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg) } }
.empty { text-align: center; padding: 64px 24px; color: var(--on-surface-variant); }
.empty .mdi { font-size: 36px; color: var(--outline); display: block; margin-bottom: 12px; }

/* ── Tablet (< 900px) ── */
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr !important; }
    .asset-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
}

/* ── Mobile (< 600px) ── */
@media (max-width: 600px) {
    /* Header: stack brand + search on top, nav scrolls below */
    header { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
    header .brand { flex: 0 0 auto; }
    header .brand span { font-size: 12px; }
    header nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; gap: 0 !important; -webkit-overflow-scrolling: touch; }
    header nav button { font-size: 10px; padding: 5px 10px; white-space: nowrap; flex-shrink: 0; }
    header .user-info { font-size: 10px; margin-right: 4px; }

    /* Global search */
    #global-search { width: 80px !important; font-size: 10px !important; }
    #global-search:focus { width: 160px !important; }
    #search-results { width: 90vw !important; right: -40px !important; }

    /* Page containers */
    #list-view, #devices-view, #users-view, #tenants-view, #admin-view, #profile-view, #home-view, #dashboard {
        padding: 12px !important;
    }

    /* Page headers */
    h2 { font-size: 14px !important; }

    /* Search + filter rows */
    .search-box { font-size: 12px; }
    .search-box input { font-size: 12px; }

    /* Filter rows: stack on very small screens */
    .search-box + select, select.login-field { font-size: 10px !important; padding: 5px 6px !important; }

    /* Frosted cards in lists */
    .frosted { border-radius: var(--shape-s) !important; }

    /* Case dashboard */
    .dash-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .info-card { padding: 14px !important; }
    .info-card h2 { font-size: 16px !important; }
    .info-table { font-size: 11px; }
    .info-table .label { width: 65px; }
    .teleconf-card { padding: 12px !important; }

    /* Asset grids */
    .asset-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

    /* Modals */
    .modal-content { max-width: 95vw !important; }
    #player-modal .modal-content { width: 95vw !important; }
    #player-modal video { max-height: 60vh !important; }

    /* Edit overlays */
    #edit-user-overlay > div, #edit-device-overlay > div, #edit-tenant-overlay > div, #edit-case-overlay > div {
        width: 95vw !important; max-height: 90vh !important; padding: 16px !important;
    }

    /* Login card */
    .login-card { width: 90vw !important; max-width: 340px; padding: 24px !important; }
    .login-card img { width: 48px !important; height: 48px !important; }
    .login-card h1 { font-size: 18px !important; }

    /* Stats grid on home */
    #home-stats { grid-template-columns: repeat(2, 1fr) !important; }

    /* News feed */
    #news-feed > div { flex-direction: column !important; gap: 8px !important; }

    /* Buttons */
    .btn-tonal { font-size: 11px; padding: 6px 12px; }
    .btn-filled { font-size: 12px; padding: 8px 16px; }

    /* Toast */
    #toast { left: 12px !important; right: 12px !important; transform: none !important; text-align: center; }

    /* Enrollment screen */
    #enroll-view { padding: 12px !important; }
    #enroll-view > div { padding: 16px !important; }

    /* Profile */
    #profile-info .info-table .label { width: 60px; }

    /* Admin audit log */
    #admin-audit-log > div { font-size: 10px !important; }
    #admin-audit-log > div > div:last-child { display: none; } /* hide actor column on mobile — too cramped */

    /* Hide less important columns on mobile in inline grids */
    .minicard-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Invite form grid */
    #invite-form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}