/* ============================================================================
   Design tokens. Light values on bare :root; dark values redefine ONLY the
   colour tokens, once under prefers-color-scheme (system default) and again
   under [data-theme="dark"] (explicit toggle). A no-flash <script> in each
   page's <head> stamps data-theme from localStorage / the cms_theme cookie
   before first paint; the toggle lives in the account menu (see bootstrap.php).
   Non-colour tokens (space / radius / type) do not change between themes.
   ========================================================================= */
:root {
    /* neutrals / surfaces */
    --page: #eaf2fb;                 /* the canvas the app floats on */
    --app-bg: #ffffff;               /* .app-shell */
    --main-bg: #f6f9fc;              /* scrolling content area */
    --surface: #ffffff;              /* cards, panels, menus */
    --surface-soft: #f8fafc;         /* inset areas, hover fills */
    --surface-sunken: #eef3f9;       /* table stripes, wells */
    --line: #dbe3ed;                 /* hairline borders */
    --border: #dbe3ed;              /* alias of --line (was undeclared) */
    --border-strong: #cbd5e1;
    --tab-idle: #e6ecf4;             /* unselected folder tabs */

    /* text */
    --text: #263241;
    --text-muted: #7c8898;
    --muted: #7c8898;                /* legacy alias */
    --text-subtle: #9aa6b5;
    --on-accent: #ffffff;            /* text/icons on an accent fill */

    /* brand / accent */
    --accent: #2f80ed;
    --accent-dark: #1764c8;
    --accent-hover: #1764c8;         /* legacy alias */
    --accent-soft: #e8f1fe;          /* pale accent pill background */

    /* nav (dark navy in light mode; themes in dark mode) */
    --nav: #0d255f;
    --nav-deep: #0a1d4c;
    --nav-active: #0e4795;
    --nav-text: #b8c8e2;
    --nav-text-hover: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.08);
    --nav-border: rgba(255, 255, 255, 0.08);

    /* semantic */
    --danger: #a91f2b;
    --danger-strong: #b73535;
    --danger-bg: #fff1f0;
    --danger-border: #ffccc7;
    --danger-text: #a8071a;
    --success: #16734e;
    --success-bg: #e2f7ed;
    --warning: #805300;
    --warning-bg: #fff5dc;

    /* form controls */
    --input-bg: #ffffff;
    --input-border: #b8c2cc;
    --field-bg: #edf5ff;             /* inline-edit row tint */

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(24, 46, 82, 0.06), 0 1px 3px rgba(24, 46, 82, 0.08);
    --shadow-md: 0 6px 20px rgba(24, 46, 82, 0.10);
    --shadow-lg: 0 24px 70px rgba(24, 62, 109, 0.20);
    --shadow: 0 24px 70px rgba(24, 62, 109, 0.20);   /* legacy alias */
    --overlay: rgba(11, 19, 33, 0.55);

    /* radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* typography */
    --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-display: 28px;
    --fs-h1: 20px;
    --fs-h2: 16px;
    --fs-h3: 14px;
    --fs-body: 14px;
    --fs-label: 13px;
    --fs-small: 12px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page: #0f141b;
        --app-bg: #161c24;
        --main-bg: #12171e;
        --surface: #1b2129;
        --surface-soft: #212832;
        --surface-sunken: #232b36;
        --line: #2c343f;
        --border: #2c343f;
        --border-strong: #3a434f;
        --tab-idle: #12171e;

        --text: #e4e8ee;
        --text-muted: #9aa6b4;
        --muted: #9aa6b4;
        --text-subtle: #79838f;
        --on-accent: #ffffff;

        --accent: #4f9dff;
        --accent-dark: #3b83e0;
        --accent-hover: #3b83e0;
        --accent-soft: #1f3550;

        --nav: #12171f;
        --nav-deep: #0d1219;
        --nav-active: #234a86;
        --nav-text: #9fb0c6;
        --nav-text-hover: #ffffff;
        --nav-hover-bg: rgba(255, 255, 255, 0.06);
        --nav-border: rgba(255, 255, 255, 0.07);

        --danger: #d1454f;
        --danger-strong: #d1454f;
        --danger-bg: #3a1e21;
        --danger-border: #5a2b2f;
        --danger-text: #f0a9ad;
        --success: #57c99a;
        --success-bg: #16321f;
        --warning: #e0b878;
        --warning-bg: #322a15;

        --input-bg: #212832;
        --input-border: #3a434f;
        --field-bg: #1e2733;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
        --overlay: rgba(0, 0, 0, 0.62);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --page: #0f141b;
    --app-bg: #161c24;
    --main-bg: #12171e;
    --surface: #1b2129;
    --surface-soft: #212832;
    --surface-sunken: #232b36;
    --line: #2c343f;
    --border: #2c343f;
    --border-strong: #3a434f;
    --tab-idle: #12171e;

    --text: #e4e8ee;
    --text-muted: #9aa6b4;
    --muted: #9aa6b4;
    --text-subtle: #79838f;
    --on-accent: #ffffff;

    --accent: #4f9dff;
    --accent-dark: #3b83e0;
    --accent-hover: #3b83e0;
    --accent-soft: #1f3550;

    --nav: #12171f;
    --nav-deep: #0d1219;
    --nav-active: #234a86;
    --nav-text: #9fb0c6;
    --nav-text-hover: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
    --nav-border: rgba(255, 255, 255, 0.07);

    --danger: #d1454f;
    --danger-strong: #d1454f;
    --danger-bg: #3a1e21;
    --danger-border: #5a2b2f;
    --danger-text: #f0a9ad;
    --success: #57c99a;
    --success-bg: #16321f;
    --warning: #e0b878;
    --warning-bg: #322a15;

    --input-bg: #212832;
    --input-border: #3a434f;
    --field-bg: #1e2733;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    --overlay: rgba(0, 0, 0, 0.62);

    color-scheme: dark;
}

.layout-canvas.is-drawing{cursor:crosshair}.layout-zone-preview{z-index:999!important;border-style:dashed;background: rgba(72,183,255,.28)!important;pointer-events:none}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    background: var(--page);
    color: var(--text);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5 {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

button,
input,
input[type="file"],
select {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--app-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--nav);
    color: var(--nav-text);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nav-border);
    overflow: hidden;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #e75f5f;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--surface);
    padding: 3px;
}

.customer-logo-preview {
    display: block;
    width: 100%;
    max-width: 180px;
    max-height: 90px;
    margin: 8px 0;
    object-fit: contain;
    object-position: left center;
}

.branding-color-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.branding-color-grid input[type="color"] {
    width: 100%;
    min-height: 42px;
    padding: 3px;
}

.brand-text {
    min-width: 0;
    font-size: 15px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav {
    display: grid;
    gap: 4px;
    padding: 12px 8px;
}

.nav-spacer {
    flex: 1;
}

.sidebar-footer {
    margin-top: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 38px;
    padding: 0 11px;
    border-radius: 7px;
    color: var(--nav-text);
    font-weight: var(--fw-medium);
    font-size: 13.5px;
    position: relative;
}

.nav-link.active {
    font-weight: var(--fw-semibold);
}

.nav-link:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
    text-decoration: none;
}

.nav-link.active {
    background: var(--nav-active);
    color: var(--nav-text-hover);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: inherit;
}
.nav-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 30px;
    padding: 0 15px;
    border: 0;
    border-bottom: 1px solid var(--nav-border);
    background: transparent;
    color: var(--nav-text);
    cursor: pointer;
}
.nav-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
}
.nav-toggle:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
}
.app-shell {
    transition: grid-template-columns .16s ease;
}
:root[data-nav="collapsed"] .app-shell {
    grid-template-columns: 62px minmax(0, 1fr);
}
:root[data-nav="collapsed"] .brand {
    justify-content: center;
    gap: 0;
    padding: 12px 0;
}
:root[data-nav="collapsed"] .brand-text {
    display: none;
}
:root[data-nav="collapsed"] .nav-toggle {
    justify-content: center;
    padding: 0;
}
:root[data-nav="collapsed"] .nav-toggle svg {
    transform: rotate(180deg);
}
:root[data-nav="collapsed"] .nav-link {
    justify-content: center;
    gap: 0;
    padding: 0;
}
:root[data-nav="collapsed"] .nav-label {
    display: none;
}
:root[data-nav="collapsed"] .nav-link[data-badge]::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--nav);
}
@media (max-width: 900px) {
    :root[data-nav="collapsed"] .nav-link { justify-content: flex-start; gap: 11px; padding: 0 11px; }
    :root[data-nav="collapsed"] .nav-label { display: block; }
    :root[data-nav="collapsed"] .brand-text { display: block; }
    .nav-toggle { display: none; }
}

.main-area {
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--main-bg);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 14px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.topbar-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.topbar-stat:hover {
    background: var(--surface-soft);
}

.topbar-stat strong {
    font-size: 16px;
}

.topbar-stat span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.search {
    width: min(280px, 42vw);
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    padding: 11px 14px;
}

.customer-context {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.customer-context label,
.customer-context span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-context select {
    min-width: 210px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    padding: 10px 34px 10px 12px;
}

.customer-context.locked {
    display: grid;
    gap: 2px;
}

.account-menu {
    position: relative;
    margin-left: auto;
}

.account-menu summary {
    cursor: pointer;
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu[open] .avatar {
    box-shadow: 0 0 0 3px rgba(19, 47, 103, 0.16);
}

.account-menu-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    right: 0;
    width: 290px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.account-menu-user {
    display: grid;
    gap: 3px;
    padding: 5px 7px 11px;
}

.account-menu-user span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.86rem;
    text-overflow: ellipsis;
}

.account-menu-link {
    display: block;
    padding: 10px 8px;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
}

.account-menu-link:hover,
.account-menu-link:focus-visible {
    background: var(--surface-soft);
}

button.account-menu-link {
    width: 100%;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-menu-divider {
    height: 1px;
    margin: 7px 0;
    background: var(--line);
}

.account-menu .customer-context {
    display: grid;
    gap: 6px;
    margin: 0;
}

.account-menu .customer-context select {
    width: 100%;
    min-width: 0;
}

.workspace-grid.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.player-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.player-detail-h3 {
    margin: 22px 0 8px;
    font-size: var(--fs-h3);
    color: var(--text);
}
.player-metrics-table th, .player-power-table th { font-weight: var(--fw-semibold); }
.player-metrics-table td, .player-power-table td { padding: 8px 10px; }

.danger-zone {
    border-color: color-mix(in srgb,var(--danger) 40%,transparent);
    background: var(--danger-bg);
}

.button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--on-accent);
}

.avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #132f67;
    color: #fff;
    font-weight: 700;
}

.avatar-impersonating {
    box-shadow: 0 0 0 3px var(--warning);
}

.account-menu-impersonating {
    margin: 0 7px 11px;
    padding: 8px 10px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
}

.content {
    min-width: 0;
    padding: 24px;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.title-input {
    width: min(680px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 20px;
    font-weight:700;
    padding: 12px 14px;
}

.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.button:hover {
    text-decoration: none;
}

.button:hover:not(:disabled):not(.primary):not(.danger) {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}

.button.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.button.primary:hover {
    background: var(--accent-dark);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 24px;
}

.panel {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
}

.panel-title {
    margin: 0;
    font-size: 15px;
    color: var(--accent);
}

.panel-body {
    padding: 18px;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.lg-settings-tabs {
    /* Folder tabs: the selected tab shares its panel's background and joins
       it (no line between); the others are outlined on a darker fill. */
    --tab-panel: var(--surface);
    position: relative;
    z-index: 2;
    display: flex;
    gap: 6px;
    margin: 0 0 -1px;
    padding: 0;
    border-bottom: 0;
}

.lg-settings-tabs a {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: var(--tab-idle);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.lg-settings-tabs a:hover {
    color: var(--text);
    text-decoration: none;
}

.lg-settings-tabs a.active,
.lg-settings-tabs a.active:hover {
    border-color: var(--line);
    border-bottom-color: var(--tab-panel);
    background: var(--tab-panel);
    color: var(--text);
}

.lg-settings-tabs + * > .panel:first-child,
.lg-settings-tabs + .panel {
    border-top-left-radius: 0;
}

/* Players: the selected tab continues into the filter bar. */
.players-content .lg-settings-tabs { --tab-panel: var(--surface-soft); }
.players-content .lg-settings-tabs + * .player-list-filters {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0 calc(var(--radius-lg) - 1px) 0 0;
}

.tab {
    min-width: 100px;
    padding: 15px 22px;
    border-right: 1px solid var(--line);
    color: var(--text-muted);
    font-weight: 700;
}

.tab.active {
    color: var(--accent);
    background: var(--surface);
}

.editor-card {
    min-width: 0;
    margin: 14px;
    padding: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.empty-state h2,
.editor-card h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.empty-state p,
.editor-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.muted {
    color: var(--muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.metric {
    display: grid;
    gap: 8px;
    min-height: 96px;
    align-content: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.metric-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.metric strong {
    font-size: 30px;
    line-height: 1;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.status-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.status-pill span {
    color: var(--muted);
    font-weight: 700;
}

.status-backgrounded {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.dashboard-content { background: var(--main-bg); }
.dashboard-hero { display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:18px;padding:26px 30px;border-radius:16px;background:linear-gradient(125deg,#0b285f,#154d9a 56%,#177fa2);color: #fff;box-shadow:0 12px 30px rgba(14,49,105,.18); }
.dashboard-hero h1 { margin:5px 0 6px;font-size:34px; }
.dashboard-hero p { margin:0;color: rgba(255,255,255,.72); }
.dashboard-eyebrow { color: #6990c8;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; }
.dashboard-hero .dashboard-eyebrow { color: #82d8ec; }
.dashboard-health-ring { display:grid;width:112px;height:112px;place-items:center;flex:0 0 auto;border-radius:50%;background:conic-gradient(#6de0a5 var(--health),rgba(255,255,255,.18) 0); }
.dashboard-health-ring:before { content:'';grid-area:1/1;width:86px;height:86px;border-radius:50%;background: #123c7d; }
.dashboard-health-ring div { z-index:1;grid-area:1/1;text-align:center; }
.dashboard-health-ring strong,.dashboard-health-ring span { display:block; }
.dashboard-health-ring strong { font-size:25px; }.dashboard-health-ring span{max-width:70px;color: rgba(255,255,255,.72);font-size:11px;}
.dashboard-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:18px; }
.dashboard-metric { display:flex;align-items:center;gap:14px;padding:17px;border: 1px solid var(--line);border-radius:12px;background: var(--surface);color: var(--text);text-decoration:none;box-shadow:var(--shadow-sm); }
.dashboard-metric:hover { border-color: var(--accent);transform:translateY(-1px); }
.dashboard-metric .dashboard-metric-icon { display:grid;width:46px;height:46px;place-items:center;flex:0 0 auto;border: 1px solid var(--border);border-radius:11px;background:var(--accent-soft);color: var(--accent); }
.dashboard-metric-icon svg { display:block;width:37px;height:37px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round; }
.dashboard-metric:hover .dashboard-metric-icon { border-color: var(--accent);background:var(--accent-soft);color: var(--accent); }
.dashboard-metric strong,.dashboard-metric span { display:block; }.dashboard-metric strong{font-size:25px;}.dashboard-metric div span{margin-top:3px;color: var(--text-muted);font-size:12px;font-weight:700;}
.dashboard-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px; }
.dashboard-card { min-width:0;padding:22px;border: 1px solid var(--line);border-radius:14px;background: var(--surface);color: var(--text);box-shadow:var(--shadow-sm); }
.dashboard-card-header { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px; }
.dashboard-card-header h2 { margin:3px 0 0;font-size:21px; }.dashboard-card-header a{color: var(--accent);font-size:13px;font-weight:700;text-decoration:none;}
.fleet-visual { display:grid;grid-template-columns:180px 1fr;align-items:center;gap:28px; }
.fleet-donut { display:grid;width:164px;height:164px;place-items:center;border-radius:50%;background:conic-gradient(#35bd79 var(--online),#e7edf5 0); }
.fleet-donut:before { content:'';grid-area:1/1;width:118px;height:118px;border-radius:50%;background: var(--surface); }.fleet-donut div{z-index:1;grid-area:1/1;text-align:center;}.fleet-donut strong,.fleet-donut span{display:block}.fleet-donut strong{font-size:35px}.fleet-donut span{color: var(--text-muted);font-size:12px}
.fleet-legend { display:grid;gap:12px; }.fleet-status>div:first-child{display:flex;justify-content:space-between;gap:15px;margin-bottom:5px;font-size:13px}.fleet-status span{color: var(--text-muted);font-weight:700}.status-dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%}.dot-online{background: #35bd79}.dot-offline{background: #ed6b6b}.dot-pending{background: #e7ad36}.dot-inactive{background: var(--text-muted)}
.dashboard-bar { height:7px;overflow:hidden;border-radius:999px;background: var(--surface-sunken); }.dashboard-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f79da,#44b3d8)}
.operations-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.operations-grid div{padding:13px;border-radius:9px;background: var(--surface-soft)}.operations-grid div.wide{grid-column:span 3}.operations-grid span,.operations-grid strong{display:block}.operations-grid span{color: var(--text-muted);font-size:11px;font-weight:700}.operations-grid strong{margin-top:5px;font-size:23px}.operations-grid .attention{background: var(--warning-bg);color: var(--warning)}.operations-grid .danger{background: var(--danger-bg);color: var(--danger-text)}
.storage-card{grid-column:1/-1;background:var(--surface)}.storage-overview{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;padding:20px;border: 1px solid var(--border);border-radius:13px;background: var(--surface-soft)}.storage-total{position:relative}.storage-total small,.storage-total strong,.storage-total p{display:block}.storage-total>small{margin-top:12px;color: var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.storage-total>strong{margin-top:4px;color: var(--text);font-size:38px;line-height:1}.storage-total p{margin:8px 0 0;color: var(--text-muted);font-size:13px}.storage-health{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.storage-health.is-healthy{background: var(--success-bg);color: var(--success)}.storage-health.is-empty{background: var(--surface-sunken);color: var(--text-muted)}.storage-breakdown{display:grid;gap:18px}.storage-breakdown span{display:flex;justify-content:space-between;gap:14px;margin-bottom:7px;color: var(--text-muted);font-size:13px;font-weight:700}.storage-breakdown span strong{color: var(--text-muted);font-size:12px}.storage-bar{height:11px;overflow:hidden;border-radius:999px;background: var(--surface-sunken)}.storage-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f79da,#44b3d8)}.storage-bar.video i{background:linear-gradient(90deg,#735bd8,#a970df)}.storage-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}.storage-stat-grid>div{min-width:0;padding:15px;border: 1px solid var(--border);border-radius:10px;background: var(--surface)}.storage-stat-grid span,.storage-stat-grid strong,.storage-stat-grid small{display:block}.storage-stat-grid span{color: var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.storage-stat-grid strong{margin-top:6px;color: var(--text);font-size:21px}.storage-stat-grid strong.storage-date{font-size:14px;line-height:1.35}.storage-stat-grid small{margin-top:5px;color: var(--text-muted);font-size:11px}
.platform-list { display:grid;gap:15px; }.platform-list>div{display:grid;grid-template-columns:120px 1fr 30px;align-items:center;gap:12px}.platform-list span{color: var(--text-muted);font-size:13px;font-weight:700}.platform-list strong{text-align:right}
.recent-card { grid-column:1/-1; }.dashboard-player-table td{vertical-align:middle}.dashboard-state{display:inline-block;padding:5px 9px;border-radius:999px;background: var(--surface-sunken);color: var(--text-muted);font-size:12px;font-weight:700}.state-online{background: var(--success-bg);color: var(--success)}.state-offline{background: var(--danger-bg);color: var(--danger-text)}.state-pending{background: var(--warning-bg);color: var(--warning)}
/* 7-day online/offline timeline under each dashboard player row - the data
   row and its timeline read as one block, the rule only falls below the bar. */
.dashboard-player-table tbody tr:has(+ .player-timeline-row) td{border-bottom:none}
.player-timeline-row td{padding:0 10px 12px}
.player-timeline{position:relative;width:100%}
.player-timeline-days{position:relative;height:13px}
.player-timeline-days span{position:absolute;top:0;transform:translateX(2px);color: var(--text-muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.player-timeline-bar{position:relative;height:10px;border-radius:4px;overflow:hidden;background: var(--surface-sunken);cursor:crosshair}
.player-timeline-seg{position:absolute;top:0;bottom:0;pointer-events:none}
.player-timeline-seg.is-online{background: var(--success)}
.player-timeline-seg.is-offline{background: var(--danger)}
.player-timeline-seg.is-nodata{background: var(--border-strong)}
.player-timeline-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.85);pointer-events:none}
.player-timeline-empty{font-size:11px;color: var(--text-muted)}

.player-timeline-tooltip{position:absolute;z-index:60;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;background: var(--nav, #0d255f);color:#fff;font-size:11px;line-height:1.35;box-shadow: var(--shadow-md);pointer-events:none;white-space:nowrap}
.player-timeline-tooltip strong{font-size:11.5px;font-weight:700}
.player-timeline-tooltip span{color:rgba(255,255,255,.75)}
.status-badge { display:inline-block;padding:5px 9px;border-radius:999px;background: var(--surface-sunken);color: var(--text-muted);font-size:12px;font-weight:700; }
.security-status-pass { background: var(--success-bg); color: var(--success); }
.security-status-warn { background: var(--warning-bg); color: var(--warning); }
.security-status-fail { background: var(--danger-bg); color: var(--danger-text); }
.security-status-info { background: var(--surface-sunken); color: var(--text-muted); }
.security-status-clickable { border:0; font-family:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.security-status-clickable:hover,.security-status-clickable:focus-visible { filter:brightness(0.94); }
.media-library-table td { vertical-align:middle; }
.media-library-table th:nth-child(4),.media-library-table td:nth-child(4){width:390px;max-width:390px;white-space:normal}
.media-library-table th:nth-child(5),.media-library-table td:nth-child(5){min-width:175px}
.media-library-table th:nth-child(7),.media-library-table td:nth-child(7){min-width:180px;max-width:260px;white-space:normal}
.media-thumbnail-wrap { position:relative;width:150px; }
.media-thumbnail { display:block;width:150px;height:auto;aspect-ratio:var(--media-aspect,auto);border: 1px solid var(--border);border-radius:9px;background: #080b11;object-fit:contain; }
.media-thumbnail-link{display:block;border-radius:9px;text-decoration:none}.media-thumbnail-link:focus-visible{outline: 3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}
.media-thumbnail-wrap.is-video .media-thumbnail { cursor:pointer; }
.media-thumbnail-type { display:block;margin-top:6px;color: var(--text-muted);font-size:10px;font-weight:700;line-height:1.25;text-align:center;text-transform:uppercase; }
.media-name-cell{overflow-wrap:anywhere;font-weight:500}
.media-compat { display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px; }
.media-compat-yes { background: var(--success-bg);color: var(--success); }
.media-compat-warn { background: var(--warning-bg);color: var(--warning); }
.media-compat-no { background: var(--danger-bg);color: var(--danger-text); }
.media-compat-note { margin-top:4px;max-width:260px;color: var(--text-muted);font-size:11px;line-height:1.35; }
.media-compat-disclaimer{display:-webkit-box;max-width:370px;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.media-preview-toggle { position:absolute;top:50%;left:50%;display:grid;width:42px;height:42px;padding:0;place-items:center;border: 1px solid rgba(255,255,255,.75);border-radius:50%;background: rgba(4,10,20,.78);color: #fff;font-size:17px;cursor:pointer;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .15s ease,transform .15s ease; }
.media-thumbnail-wrap.is-video:hover .media-preview-toggle,.media-thumbnail-wrap.is-video:focus-within .media-preview-toggle,.media-thumbnail-wrap.is-playing .media-preview-toggle { opacity:1;transform:translate(-50%,-50%) scale(1); }
.media-thumbnail-wrap.is-playing .media-preview-toggle { opacity:.72; }
.media-icon-actions { display:flex;align-items:center;gap:8px; }
.media-filter-summary{display:flex;align-items:center;gap:12px;color: var(--muted);font-size:12px}.media-filter-summary .text-button{font-size:12px}
.media-filter-row th{padding:7px 6px;background: var(--surface-soft);vertical-align:middle}.media-filter-row input,.media-filter-row select{display:block;width:100%;min-width:0;height:34px;padding:5px 8px;border: 1px solid var(--border-strong);border-radius:7px;background: var(--surface);color: var(--text);font-size:12px}.media-filter-row input:focus,.media-filter-row select:focus{border-color: var(--accent);outline: 2px solid color-mix(in srgb,var(--accent) 16%,transparent)}
/* The edit form only ever lives in the modal (edit-modal.js relocates it out
   of this row). The row itself is just the form's parked home - never shown. */
.media-edit-row{display:none!important}
.media-edit-row td{padding:0!important;background:transparent;white-space:normal!important}
.media-inline-edit{display:grid;grid-template-columns:minmax(200px,2fr) minmax(150px,1.2fr) minmax(90px,.6fr);gap:14px 16px;align-items:start}
.media-inline-edit .form-field{margin:0}
.media-inline-edit label{margin-bottom:4px;font-size:var(--fs-label)}
.media-inline-edit input,.media-inline-edit select{min-height:38px;padding:8px 10px;font-size:var(--fs-body)}
.media-inline-edit .field-help{font-size:var(--fs-small);margin-top:3px}
.media-inline-edit-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.media-status-help{grid-column:1/-1;margin-top:-4px}
/* Available-from/until get their own dedicated row instead of sharing the
   Name/Folder/Status row via an implicit auto-fit wrap - that combination
   let the "until" field's extra help-text line (which "from" doesn't have)
   push things out of alignment and overlap once the row wrapped narrower. */
.media-availability-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:6px 12px;align-items:start;padding-top:3px;border-top: 1px solid var(--border)}
.media-availability-row .field-help{grid-column:1/-1;margin:1px 0 0}
/* Active/Inactive is always computed (in a playlist that's deployed to a
   player), never a stored, manually-set value - see MediaRepository::
   mediaIdsInUsePlaylists(). Same idea as the Playlists list's own Active
   badge. */
.media-status-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.media-status-badge.is-on{background: var(--success-bg);color: var(--success)}
.media-status-badge.is-off{background: var(--surface-sunken);color: var(--text-muted)}
.icon-action { display:grid;width:34px;height:34px;place-items:center;border: 1px solid var(--border-strong);border-radius:8px;background: var(--surface);color: var(--accent);font-size:20px;font-weight:700;text-decoration:none;cursor:pointer; }
.icon-action:hover,.icon-action:focus-visible { border-color: var(--accent);background: var(--accent-soft);color: var(--accent); }
.icon-action svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.icon-actions { display:flex;align-items:center;gap:6px; }
.icon-actions form { margin:0;display:flex; }
.media-inline-delete { margin:0; }
.media-location-list{border-top: 1px solid var(--line)}.media-location-list h2{margin-top:0}.media-move-form{display:flex;align-items:center;gap:8px}.media-move-form select{min-width:190px}.media-move-form .button{min-height:42px}
.media-file-manager{grid-template-columns:240px minmax(0,1fr);gap:0;border: 1px solid var(--line);border-radius:var(--radius-lg);border-top-left-radius:0;background: var(--surface);overflow:hidden}.media-file-manager>section{grid-column:2;grid-row:1;border: 0;border-left: 1px solid var(--border-strong);border-radius:0}.media-file-manager>.side-panel{grid-column:1;grid-row:1;padding:10px;background: var(--surface-soft);align-content:start}.media-file-manager .form-panel{border-radius:4px;box-shadow:none}.media-folder-tree{padding:8px}.media-folder-tree h2{margin:4px 8px 9px;font-size:14px}.media-folder-tree a{display:block;padding:7px 8px 7px calc(8px + (var(--folder-depth,0) * 14px));border-radius:4px;color: var(--text);font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-folder-tree a span{color: var(--warning)}.media-folder-tree a:hover,.media-folder-tree a.active{background: var(--accent-soft);color: var(--accent)}.media-file-manager .media-browser{padding:12px 14px 2px}.media-file-manager .media-drop-zone{min-height:76px;padding:12px;border-radius:5px;background: var(--surface-soft)}.media-file-manager .media-drop-icon{width:38px;height:38px;font-size:22px}.media-file-manager .media-breadcrumbs{min-height:38px;padding:0 10px;border: 1px solid var(--border-strong);border-radius:4px;background: var(--surface)}.media-file-manager [data-folder-drop]{transition:background .12s ease,outline .12s ease}.media-file-manager .is-folder-drop-target{background: var(--accent-soft)!important;outline: 2px solid #2473ce;outline-offset:-2px}.media-explorer-table tbody tr{cursor:grab}.media-explorer-table tbody tr:active{cursor:grabbing}.media-explorer-table tr.is-dragging{opacity:.45}.media-explorer-table td:first-child{min-width:340px}.media-file-icon{display:inline-grid;width:28px;height:28px;margin-right:9px;place-items:center;border-radius:4px;background: var(--accent-soft);color: var(--accent)}.media-drag-help{margin-top:-5px}.media-move-status{min-height:20px;margin-top:10px;color: var(--accent);font-size:13px;font-weight:700}
.media-move-status.is-error{color: var(--danger-text)}

/* Keywords page: category list on the left, one-save value editor on the right */
.kw-grid{grid-template-columns:minmax(220px,320px) minmax(0,1fr)}
.kw-list{list-style:none;margin:14px 0 0;padding:0;border: 1px solid var(--border,var(--border));border-radius:8px;overflow:hidden}
.kw-list-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top: 1px solid var(--border,var(--surface-sunken))}
.kw-list-item:first-child{border-top: 0}
.kw-list-item.is-active{background: var(--accent-soft)}
.kw-list-name{font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw-list-meta{color: var(--muted,var(--text-muted));font-size:12px;flex:0 0 auto}
.kw-list-empty{padding:12px}
.kw-add-row{display:flex;gap:8px;margin-top:12px}
.kw-add-row input{flex:1 1 auto;min-width:0;border: 1px solid var(--border-strong);border-radius:8px;padding:9px 11px;font-size:14px}
.kw-add-row .button{flex:0 0 auto}
.kw-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.kw-editor-head h2{margin:0}
.kw-editor .edit-modal-close{position:static}
.kw-values{display:flex;flex-direction:column;gap:8px}
.kw-value-row{display:flex;align-items:center;gap:8px}
.kw-value-row input{flex:1 1 auto;min-width:0;border: 1px solid var(--border-strong);border-radius:8px;padding:8px 10px;font-size:14px}
.kw-value-row input:disabled{background: var(--surface-sunken);color: var(--text-subtle);text-decoration:line-through}
.kw-value-row.is-removed input{border-style:dashed}
.kw-value-remove{flex:0 0 auto;border: 0;background: none;color: var(--danger-text);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
.kw-value-new input{border-style:dashed;border-color: var(--border-strong)}
.kw-editor-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.kw-editor-actions form{margin:0}
.kw-editor-actions .button.danger{margin-left:auto}
.kw-editor-hint,.kw-editor-hint h2{margin-top:0}
.kw-io{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.kw-io>summary{cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--fs-label);color:var(--text)}
.kw-io code{padding:1px 4px;border-radius:4px;background:var(--surface-sunken);font-size:.9em}
.kw-import-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.kw-io-file{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);font-weight:var(--fw-semibold)}
.kw-io-file input{font-size:var(--fs-small)}
.kw-io-mode{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px;border:1px solid var(--line);border-radius:8px}
.kw-io-mode label{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-small);line-height:1.4}
.kw-io-mode input{margin-top:2px;flex:0 0 auto}
.kw-import-summary{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}
.kw-import-summary li{font-size:var(--fs-body);color:var(--text-muted)}
.kw-import-summary li strong{color:var(--text);min-width:2ch;display:inline-block}
.kw-import-summary li.is-warn strong{color:var(--danger-text)}
.kw-import-impact{padding:10px;border-radius:8px;background:var(--warning-bg);color:var(--text)}
.kw-import-errors{margin:8px 0 14px;padding-left:18px;font-size:var(--fs-small);color:var(--danger-text)}
.kw-import-detail{margin:8px 0}
.kw-import-detail summary{cursor:pointer;font-size:var(--fs-small);color:var(--accent)}
.kw-import-detail ul{max-height:200px;overflow:auto;margin:6px 0 0;padding-left:18px;font-size:var(--fs-small)}

/* Shared centered edit pop-up (Media, Players, Locations, Customers, Users,
   Schedules, ...) - see edit-modal.js. It sizes to its content, but never
   below 40% or above 80% of the window in either direction; past 80% the
   body scrolls inside the pop-up. */
.edit-modal-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;background: var(--overlay)}
body.edit-modal-open{overflow:hidden}
.edit-modal,.edit-modal.edit-modal--lg,.edit-modal.edit-modal--sm{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:min-content;min-width:min(40vw,100%);max-width:min(80vw,100%);min-height:min(40vh,100%);max-height:80vh;margin:auto;background: var(--surface);color: var(--text);border: 1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.edit-modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom: 1px solid var(--line)}
.edit-modal-title{margin:0;font-size:var(--fs-h2)}
.edit-modal-close{border: 0;background: none;font-size:26px;line-height:1;color: var(--text-muted);cursor:pointer;padding:2px 8px;text-decoration:none}
.edit-modal-close:hover,.edit-modal-close:focus-visible{color: var(--text)}
.edit-modal-body{flex:1 1 auto;min-height:0;overflow:auto;padding:24px}
.edit-modal-body .media-inline-edit{border-left: 0;padding:0}
.edit-modal-body form{margin:0}
@media(max-width:620px){.edit-modal-overlay{padding:10px}.edit-modal,.edit-modal.edit-modal--lg,.edit-modal.edit-modal--sm{width:100%;max-width:100%;max-height:92vh}.edit-modal-body{padding:14px}}

/* In-page confirm dialog (replaces window.confirm for mobile reliability) */
.cms-confirm-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;background: var(--overlay)}
.cms-confirm{width:min(420px,100%);padding:22px;border: 1px solid var(--line);border-radius:var(--radius-lg);background: var(--surface);color: var(--text);box-shadow:var(--shadow-lg)}
.cms-confirm p{margin:0 0 18px;font-size:15px;line-height:1.45;color: var(--text)}
.cms-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.cms-confirm-actions .button{min-height:42px;padding:0 18px}
.cms-confirm-actions .button.danger{border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: var(--danger);color: #fff}
.cms-confirm-actions .button.danger:hover{background: var(--danger-text)}
@media(max-width:900px){.media-file-manager{grid-template-columns:1fr}.media-file-manager>.side-panel,.media-file-manager>section{grid-column:1}.media-file-manager>.side-panel{grid-row:1}.media-file-manager>section{grid-row:2;border-left: 0;border-top: 1px solid var(--border-strong)}}
.media-icon-actions>button.icon-action{min-height:36px;padding:0;font-family:inherit;cursor:pointer}
.media-edit-row:not([hidden]) .media-inline-edit{animation:media-edit-open .16s ease-out}
.media-inline-edit-actions{min-width:210px}
.media-inline-edit-message{font-size:12px;color: var(--muted)}
.media-inline-edit-message.is-error{color: var(--danger-text)}
.media-playlist-membership{margin:3px 0 0;color: var(--muted);font-size:11px;line-height:1.35}
.media-availability{margin:3px 0 0;font-size:11px;line-height:1.35;color: var(--muted)}
.media-availability.is-expired{color: var(--danger-text);font-weight:600}
.media-availability.is-scheduled{color: var(--warning);font-weight:600}
/* Grid, not flex: with `.form-field input{width:100%}` (below) giving both
   inputs an equal claim on the row, flex's shrink math could squeeze the
   date input down to nothing and the time input would end up stranded on
   its own line under it. An explicit 2-column grid can't do that - the date
   column always gets the remaining space, the time column stays fixed. */
.media-avail-inputs{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.media-inline-edit .media-avail-inputs input{width:auto}
.media-kw-block{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:2px;padding-top:8px;border-top: 1px solid var(--border)}
.media-kw-heading{font-size:11px;font-weight:700;color: var(--muted);text-transform:uppercase;letter-spacing:.04em}
.media-kw-block>.field-help{margin:0}
.media-kw-rules{display:flex;flex-direction:column;gap:8px}
.media-kw-rule{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.media-kw-rule select{min-height:36px;padding:6px 8px;font-size:var(--fs-small)}
.media-kw-rule select[data-kw-rule-cat],.media-kw-rule select[data-kw-rule-val]{max-width:180px}
.media-kw-is{color: var(--muted);font-size:var(--fs-small)}
.media-kw-rule-remove{margin-left:auto;border: 0;background: none;color: var(--danger-text);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.media-avail-inputs input[type=date]{min-width:115px}
.media-avail-inputs input[type=time]{width:6.5em}
.media-orientation{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.media-orientation-portrait{background: var(--accent-soft);color: var(--accent)}
.media-orientation-landscape{background: var(--accent-soft);color: var(--accent)}
.media-orientation-square{background: var(--success-bg);color: var(--success)}

/* ---- File manager: Windows-style folder tree + files pane ---- */
.media-file-manager{grid-template-columns:264px minmax(0,1fr);min-height:min(72vh,640px)}
.media-file-manager>.mfm-tree-pane{display:flex;flex-direction:column;min-height:0;padding:0!important;gap:0;background: var(--surface-soft)}
.media-file-manager>section{display:flex;flex-direction:column;min-height:0}
.mfm-tree-head{padding:12px 14px 8px;color: var(--text-muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mfm-tree{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:2px 6px 8px}
.mtree-row{display:flex;align-items:center;gap:2px;padding-left:calc(var(--mtree-depth,0) * 15px);border-radius:5px;line-height:1.2}
.mtree-row.is-hidden{display:none}
.mtree-row[draggable="true"]{cursor:grab}
.mtree-row.is-dragging{opacity:.4}
.mtree-row.is-current{background: var(--accent-soft)}
.mtree-row.is-current>.mtree-link{color: var(--accent);font-weight:700}
.mtree-row:hover{background: var(--accent-soft)}
.mtree-toggle{flex:0 0 auto;width:18px;height:22px;padding:0;border: 0;background: none;color: var(--text-muted);cursor:pointer;font-size:11px}
.mtree-toggle::before{content:"\25B8";display:inline-block;transition:transform .12s ease}
.mtree-toggle.is-open::before{transform:rotate(90deg)}
.mtree-toggle-spacer{flex:0 0 auto;width:18px}
.mtree-link{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0;padding:5px 6px 5px 0;color: var(--text);font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtree-link:hover{text-decoration:none}
.mtree-fi{color: var(--warning);font-size:11px;flex:0 0 auto}
.mfm-tree-actions{flex:0 0 auto;padding:10px;border-top: 1px solid var(--border);display:flex;flex-direction:column;gap:7px}
.mfm-inline-form{display:flex;gap:6px}
.mfm-inline-form input{flex:1 1 auto;min-width:0;height:32px;padding:5px 8px;border: 1px solid var(--border-strong);border-radius:7px;background: var(--surface);color: var(--text);font-size:12px}
.mfm-inline-form .button{flex:0 0 auto;min-height:32px;padding:5px 11px}
.button.button-danger{border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: var(--danger-bg);color: var(--danger-text)}
.button.button-danger:hover{border-color: var(--danger);background: var(--danger);color: #fff}
.mfm-storage{flex:0 0 auto;padding:11px 14px;border-top: 1px solid var(--border)}
.mfm-storage-head{margin-bottom:6px;color: var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mfm-storage-bar{height:6px;border-radius:4px;background: var(--border-strong);overflow:hidden}
.mfm-storage-bar>i{display:block;height:100%;border-radius:4px;background: var(--accent)}
.mfm-storage-text{margin-top:5px;color: var(--text-muted);font-size:12px}
.mfm-files-pane{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:14px 16px 16px}
.mfm-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mfm-toolbar .media-breadcrumbs{flex:1 1 auto;margin:0;min-height:32px;border: 0;background: none;padding:0}
.mfm-toolbar-actions{display:flex;gap:8px;flex:0 0 auto}
.mfm-toolbar-actions .button{min-height:32px;padding:6px 12px;font-size:var(--fs-small)}
.mfm-files{position:relative;flex:1 1 auto;min-height:220px;border: 1px solid var(--border-strong);border-radius:9px;background: var(--surface);overflow:auto}
.mfm-files.is-drop-active{border-color: #2473ce;box-shadow:inset 0 0 0 2px #2473ce}
.mfm-list{display:flex;flex-direction:column}
.mfm-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 190px 44px;align-items:center;border-bottom: 1px solid var(--border);text-decoration:none}
/* Media Records' folder list is just name + item count (no type/action
   columns - the table below already carries full per-record detail). */
.mfm-list-records{margin-bottom:14px;border: 1px solid var(--border-strong);border-radius:9px;background: var(--surface);overflow:hidden}
.mfm-list-records .mfm-row{grid-template-columns:minmax(0,1fr) 120px}
.mfm-list-records .mfm-row:last-child{border-bottom:0}
.mfm-row>span{padding:9px 14px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfm-cell-act{padding:4px 8px 4px 0;text-align:right}
.mfm-del{width:26px;height:26px;padding:0;border: 1px solid transparent;border-radius:6px;background: none;color: var(--text-muted);font-size:18px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease}
.mfm-row-file:hover .mfm-del,.mfm-del:focus-visible{opacity:1}
.mfm-del:hover,.mfm-del:focus-visible{border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: var(--danger-bg);color: var(--danger)}
.mfm-del:disabled{opacity:.4;cursor:default}
.mfm-row-head{position:sticky;top:0;z-index:1;background: var(--surface-soft)}
.mfm-row-head>span{color: var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mfm-cell-type,.mfm-cell-dim{color: var(--text-muted)}
.mfm-cell-name .mfm-icon{display:inline-grid;width:24px;height:24px;margin-right:9px;place-items:center;border-radius:4px;background: var(--accent-soft);color: var(--accent);font-size:12px;vertical-align:middle}
.mfm-cell-name strong{font-weight:700}
.mfm-cell-name .muted{margin-left:9px;font-size:12px}
.mfm-row-folder{color: var(--text)}
.mfm-row-folder:hover{background: var(--accent-soft)}
.mfm-row-folder .mfm-icon-folder{background: var(--warning-bg);color: var(--warning)}
.mfm-row-file{cursor:grab}
.mfm-row-file:hover{background: var(--surface-soft)}
.mfm-row-file.is-dragging{opacity:.4}
.mfm-empty{padding:34px 16px;text-align:center}
.mfm-drop-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background: rgba(213,232,255,.82);border-radius:9px;color: var(--accent);font-weight:700;font-size:15px;pointer-events:none}
.mfm-files.is-drop-active .mfm-drop-overlay{display:flex}
.media-file-manager .is-folder-drop-target{background: var(--accent-soft)!important;outline: 2px solid #2473ce;outline-offset:-2px;border-radius:6px}
@media(max-width:900px){.mfm-tree{max-height:220px}}
@keyframes media-edit-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.media-edit-row:not([hidden]) .media-inline-edit{animation:none}}
.icon-action.icon-action-delete { min-height:36px;padding:0;border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: var(--danger-bg);color: var(--danger-text);cursor:pointer;line-height:1; }
.icon-action.icon-action-delete:hover,.icon-action.icon-action-delete:focus-visible { border-color: var(--danger);background: var(--danger);color: #fff; }
.layout-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-bottom:18px}.layout-canvas{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border: 2px solid #19365e;border-radius:10px;background-color: #121b29;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:5% 8.888%;box-shadow:inset 0 0 30px rgba(0,0,0,.35)}.layout-zone{position:absolute;display:flex;min-width:12px;min-height:12px;padding:8px;flex-direction:column;align-items:flex-start;justify-content:center;overflow:hidden;border: 2px solid rgba(255,255,255,.75);border-radius:3px;color: #fff;text-align:left;text-shadow:0 1px 2px #000;cursor:move;touch-action:none}.layout-zone strong,.layout-zone small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-zone.selected{outline: 3px solid #48b7ff;outline-offset:2px}.zone-coordinate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.zone-coordinate-grid .form-field{margin:0}.layout-workspace>.side-panel{align-content:start}@media(max-width:1000px){.layout-workspace{grid-template-columns:1fr}.layout-canvas{min-height:260px}}
.player-row-actions { display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:72px;gap:7px;align-items:stretch;justify-items:stretch;justify-content:start;white-space:nowrap; }
.player-row-actions > form { display:contents; }
.player-action { position:relative;display:flex;min-height:52px;padding:5px 6px;flex-direction:column;align-items:center;justify-content:center;gap:3px;border: 1px solid var(--border-strong);border-radius:9px;background: var(--surface);color: var(--accent);font:var(--fw-semibold) 11px/1.1 var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.player-action svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto; }
.player-action:hover,.player-action:focus-visible { border-color: var(--accent);background: var(--accent-soft);color: var(--accent);text-decoration:none;transform:translateY(-1px); }
.player-action-reboot { color: var(--danger); }
.player-action-reboot:hover,.player-action-reboot:focus-visible { border-color: var(--danger);background: var(--danger-bg);color: var(--danger-text); }
.player-action:disabled { cursor:not-allowed;opacity:.42;transform:none; }
.player-action.is-pending svg { animation:player-refresh-spin .8s linear infinite; }
.player-action.is-queued { border-color: var(--success);background: var(--success-bg);color: var(--success); }
.diagnostics-toggle { position:relative;display:grid;width:38px;height:38px;padding:0;place-items:center;border: 1px solid var(--border-strong);border-radius:9px;background: var(--surface);color: var(--text-muted);font-size:23px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.diagnostics-toggle:hover,.diagnostics-toggle:focus-visible { border-color: var(--accent);background: var(--accent-soft);color: var(--accent); }
.diagnostics-toggle.is-on { border-color: var(--success);background: var(--success-bg);color: var(--success);box-shadow:inset 0 0 0 1px rgba(39,146,103,.12); }
.diagnostics-toggle.is-pending::after { content:'';position:absolute;top:-4px;right:-4px;width:9px;height:9px;border: 2px solid #fff;border-radius:50%;background: #e4a11b;animation:diagnostics-pulse 1s ease-in-out infinite alternate; }
.diagnostics-toggle:disabled { cursor:wait;opacity:.72; }
.player-refresh { position:relative;display:grid;width:38px;height:38px;padding:0;place-items:center;border: 1px solid var(--border-strong);border-radius:9px;background: var(--surface);color: var(--accent);font-size:25px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.player-refresh:hover,.player-refresh:focus-visible { border-color: var(--accent);background: var(--accent-soft);color: var(--accent); }
.player-refresh.is-pending span { animation:player-refresh-spin .8s linear infinite; }
.player-refresh.is-queued { border-color: var(--success);background: var(--success-bg);color: var(--success); }
.player-refresh:disabled { cursor:wait;opacity:.72; }
@keyframes player-refresh-spin { to { transform:rotate(360deg); } }
@keyframes diagnostics-pulse { from{transform:scale(.75);opacity:.55}to{transform:scale(1.15);opacity:1} }
.danger-zone { border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: var(--danger-bg); }.danger-zone h2{color: var(--danger-text)}.danger-zone p{color: var(--text-muted)}.danger-button{border-color: var(--danger)!important;background: var(--danger)!important;color: #fff!important;}
.hidden,[hidden] { display:none!important; }
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border: 0!important; }
.media-browser { padding:18px 20px 2px; }
.media-breadcrumbs { display:flex;align-items:center;gap:8px;min-height:34px;margin:10px 0 0;overflow-x:auto;white-space:nowrap; }.media-breadcrumbs a{color: var(--accent);font-size:13px;font-weight:700;text-decoration:none}.media-breadcrumbs span{color: var(--text-subtle)}
.media-drop-zone { display:flex;align-items:center;gap:16px;min-height:105px;padding:18px;border: 2px dashed #aac0dc;border-radius:12px;background: var(--surface-soft);transition:border-color .15s ease,background .15s ease; }.media-drop-zone.is-dragging{border-color: #2473ce;background: var(--accent-soft)}.media-drop-zone.is-uploading{opacity:.7;pointer-events:none}.media-drop-zone>div:nth-of-type(2){flex:1}.media-drop-zone strong,.media-drop-zone span{display:block}.media-drop-zone span{margin-top:5px;color: var(--text-muted);font-size:12px}.media-drop-icon{display:grid;width:48px;height:48px;place-items:center;flex:0 0 auto;border-radius:50%;background: var(--accent-soft);color: var(--accent);font-size:28px;font-weight:700}.media-drop-actions{display:flex;gap:8px;flex-wrap:wrap}.media-upload-progress{margin-top:10px;padding:12px;border: 1px solid #b8d4f3;border-radius:8px;background: var(--accent-soft);color: var(--text)}.media-upload-progress ul{max-height:180px;overflow:auto;margin:8px 0;padding-left:20px}
.upload-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.upload-progress-bar{position:relative;height:8px;margin-top:8px;border-radius:999px;background: var(--surface);overflow:hidden}
.upload-progress-fill{height:100%;width:0;border-radius:999px;background: var(--accent);transition:width .15s ease}
.upload-progress-sub{margin-top:6px;color: var(--text-muted);font-size:12px}
.media-folder-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:14px; }.media-folder-item{position:relative;min-width:0}.media-folder-card{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;min-height:72px;padding:13px 42px 13px 13px;border: 1px solid var(--border);border-radius:10px;background: var(--surface);color: var(--text);text-decoration:none}.media-folder-card:hover{border-color: var(--accent);background: var(--surface-soft)}.media-folder-icon{grid-row:1/3;align-self:center;color: var(--warning);font-size:32px}.media-folder-card strong{align-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-folder-card small{color: var(--text-muted)}.media-folder-delete{position:absolute;top:9px;right:9px;display:grid;width:29px;height:29px;min-height:0;padding:0;place-items:center;border: 1px solid color-mix(in srgb,var(--danger) 40%,transparent);border-radius:8px;background: var(--danger-bg);color: var(--danger-text);font-size:20px;line-height:1;cursor:pointer}.media-folder-delete:hover,.media-folder-delete:focus-visible{border-color: var(--danger);background: var(--danger);color: #fff}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.data-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.data-table th {
    color: var(--muted);
    font-size: 13px;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

.inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.small-input {
    width: 74px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--text);
    padding: 7px 8px;
}

/* One canonical small button. Used anywhere a full 42px button is too tall
   for a dense row (playlist editor, file manager, inline actions). */
.button.button--sm {
    min-height: 32px;
    padding: 6px 12px;
    font-size: var(--fs-small);
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    padding: 0;
}

.text-button.danger {
    color: var(--danger-text);
}

.side-panel {
    display: grid;
    gap: 18px;
    align-content: start;
}

/* Flatten "card inside a card": a panel/form-panel/editor-card nested inside
   another card reads as a plain section of that card, not a second floating
   window. */
.panel > .editor-card,
.panel > .form-panel,
.panel > .panel,
.panel-body > .editor-card,
.panel-body > .form-panel,
.panel-body > .panel,
.form-panel > .form-panel,
.form-panel > .editor-card,
.editor-card > .editor-card {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.panel > .editor-card,
.panel > .form-panel,
.panel > .panel,
.form-panel > .form-panel,
.form-panel > .editor-card,
.editor-card > .editor-card {
    padding: 0;
}

.panel-body > .editor-card + .editor-card,
.panel-body > .form-panel + .form-panel,
.form-panel > .form-panel + .form-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.field {
    display: grid;
    gap: 7px;
}

.field label {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.field input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 11px 12px;
}

.form-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

.form-panel h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.login-wrap {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(440px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.login-card .brand {
    background: linear-gradient(90deg, #103f87, #0a1d4c);
}

.login-body {
    padding: 26px;
}

.login-body h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.login-body p {
    margin: 0 0 18px;
    color: var(--muted);
}

.form-field {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.form-field label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-label);
    color: var(--text);
}

.form-field input {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 16px;
    padding: 11px 12px;
}

.form-field input[type="file"] {
    background: var(--input-bg);
    cursor: pointer;
}

.form-field select {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 16px;
    padding: 11px 12px;
}

.form-field input:focus,
.form-field select:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.field-help {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    margin: 6px 0 14px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-sunken);
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.form-submit {
    width: 100%;
    margin-top: 22px;
}

.error {
    margin: 16px 0 0;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 8px;
    color: var(--danger-text);
    padding: 10px 12px;
}

.notice {
    margin: 0 0 16px;
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    border-radius: 8px;
    color: var(--success);
    padding: 10px 12px;
}

.weekday-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.weekday-grid label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.help-tip {
    position: relative;
    display: inline-grid;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--text-subtle);
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text);
    font: 700 12px/1 var(--font-sans);
    cursor: help;
    vertical-align: middle;
}

.help-tip::after {
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: calc(100% + 9px);
    width: 270px;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--text);
    box-shadow: 0 8px 24px rgba(18, 31, 47, 0.22);
    color: #fff;
    content: attr(data-tooltip);
    font: 400 13px/1.45 var(--font-sans);
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translate(-50%, 4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.help-section {
    margin-bottom: 22px;
}

.help-section h2 {
    margin-bottom: 8px;
}

.help-section li {
    margin-bottom: 7px;
    line-height: 1.5;
}

.player-screenshot {
    display: block;
    width: 180px;
    max-width: none;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    background: #000;
    object-fit: contain;
    cursor: zoom-in;
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.player-screenshot:hover,
.player-screenshot:focus-visible {
    box-shadow: 0 0 0 3px rgba(55, 119, 229, 0.25);
    outline: none;
    transform: scale(1.02);
}

/* Screen previews are captured BEFORE the LG panel rotates its output
   (Screen rotation / legacy Portrait mode), so the raw capture is always the
   unrotated landscape frame. Turn it by the opposite of the display's
   rotation (players.php adds rot-<degrees> from the player's Settings Group):
   a display rotated 90 is shown turned -90, 270 turned +90 (confirmed on
   player 2 at 270), 180 upside down. Portrait (90/270) previews sit in a
   frame sized to the rotated footprint with the landscape image centered and
   turned inside it, so the row layout gets a real portrait box. */
.rot-90 { --shot-rot: -90deg; }
.rot-180 { --shot-rot: 180deg; }
.rot-270 { --shot-rot: 90deg; }
.shot-frame { display: inline-block; }
.player-shot.is-portrait .shot-frame {
    position: relative;
    width: 101px;
    height: 180px;
    overflow: hidden;
    border-radius: 5px;
    background: #000;
}
.player-shot.is-portrait .shot-frame .player-screenshot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 101px;
    aspect-ratio: auto;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(var(--shot-rot, 0deg));
}
.player-shot.is-portrait .shot-frame .player-screenshot:hover,
.player-shot.is-portrait .shot-frame .player-screenshot:focus-visible {
    transform: translate(-50%, -50%) rotate(var(--shot-rot, 0deg)) scale(1.02);
}
.player-shot.rot-180 .player-screenshot { transform: rotate(180deg); }
.player-shot.rot-180 .player-screenshot:hover,
.player-shot.rot-180 .player-screenshot:focus-visible { transform: rotate(180deg) scale(1.02); }

.screenshot-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(4, 10, 20, 0.88);
    cursor: zoom-out;
}

.screenshot-lightbox[hidden] {
    display: none;
}

.screenshot-lightbox-figure {
    width: min(1500px, 96vw);
    margin: 0;
    text-align: center;
}

.screenshot-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 86vh;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: #000;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    cursor: zoom-out;
    object-fit: contain;
}

/* Portrait (90/270): the figure is the rotated footprint - as tall as the
   viewport allows (86vh) and no wider than 90vw - and the landscape image,
   sized to the figure's height x 9/16, is centered and turned inside it. */
.screenshot-lightbox-figure.is-portrait {
    --lb-h: min(86vh, 160vw);
    position: relative;
    width: calc(var(--lb-h) * 9 / 16);
    height: var(--lb-h);
}
.screenshot-lightbox-figure.is-portrait .screenshot-lightbox-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--lb-h);
    height: calc(var(--lb-h) * 9 / 16);
    max-width: none;
    max-height: none;
    margin: 0;
    transform: translate(-50%, -50%) rotate(var(--shot-rot, 0deg));
}
.screenshot-lightbox-figure.rot-180 .screenshot-lightbox-image { transform: rotate(180deg); }

.screenshot-lightbox-caption {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: 14px;
}

.screenshot-time,
.screenshot-state,
.screenshot-empty {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.screenshot-state {
    color: var(--warning);
    font-weight: 700;
    white-space: normal;
}

.player-shot { display: flex; align-items: center; gap: 8px; }
.player-shot-meta { display: flex; flex-direction: column; gap: 4px; }
.player-shot-meta .screenshot-state { margin-top: 0; max-width: 12ch; }
.player-shot-stamp { display: flex; flex-direction: column; line-height: 1.15; color: var(--muted); font-size: 11px; }
.player-shot-stamp span:last-child { font-weight: 700; letter-spacing: .04em; }

/* keep every cell's content vertically centred so the screen previews line up
   row to row even as the name cell grew (serial + software + last online) */
.players-table td { vertical-align: middle; }
.players-table td[data-player-field="screenshot"] { text-align: left; }

.player-name-cell .player-name { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.3; }
.player-name-cell .player-serial,
.player-name-cell .player-app-version,
.player-name-cell .player-last-online { display: inline-block; margin-top: 2px; font-size: 11px; line-height: 1.5; }
.player-name-cell .player-last-online time { font-weight: 600; }

.player-serial { font-size: 11px; }
.player-canvas-zones { margin: 4px 0 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.35; color: var(--muted); }
.player-canvas-zones .pcz-zone { font-weight: 700; color: var(--text, #1f2733); }
.player-canvas-zones .pcz-ver { color: var(--success); font-weight: 700; }

.landing {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.landing-panel {
    width: min(780px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.landing-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(90deg, #103f87, #0a1d4c);
    color: #fff;
}

.landing-body {
    padding: 28px;
}

.landing-body h1 {
    margin: 0 0 10px;
    font-size: 32px;
}

.landing-body p {
    color: var(--text-muted);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100vh;
        width: 100%;
        margin: 0;
    }

    .sidebar {
        min-height: auto;
        position: static;
        height: auto;
        overflow-y: visible;
    }

    .main-area {
        height: auto;
        min-height: 0;
    }

    .nav {
        grid-auto-flow: column;
        overflow-x: auto;
        padding: 10px;
    }

    .nav-spacer {
        display: none;
    }

    .sidebar-footer {
        margin-top: 0;
    }

    .topbar {
        justify-content: space-between;
        padding: 14px 18px;
    }

    .topbar-stat span {
        display: none;
    }

    .topbar-stat {
        padding: 6px 8px;
    }

    .content {
        padding: 20px;
    }

    .page-actions,
    .workspace-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .metric-grid,
    .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search {
        width: 100%;
    }

    .customer-context,
    .customer-context.locked {
        width: 100%;
    }

    .customer-context select {
        min-width: 0;
        flex: 1;
    }

    .player-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns:1fr; }
    .recent-card { grid-column:auto; }
    .storage-card { grid-column:auto; }
    .storage-overview { grid-template-columns:1fr; }
    .storage-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .fleet-visual { grid-template-columns:1fr;justify-items:center; }
    .media-drop-zone { align-items:flex-start;flex-wrap:wrap; }
    .media-drop-zone>div:nth-of-type(2) { min-width:220px; }
}

@media (max-width: 520px) {
    .metric-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }

    .player-info-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero { align-items:flex-start;padding:22px; }
    .dashboard-health-ring { width:92px;height:92px; }
    .dashboard-health-ring:before { width:70px;height:70px; }
    .dashboard-metrics { grid-template-columns:1fr; }
    .operations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .operations-grid div.wide { grid-column:span 2; }
    .storage-stat-grid { grid-template-columns:1fr; }
    .storage-breakdown span { align-items:flex-start;flex-direction:column;gap:3px; }
}

/* ---- Proof of Play ---------------------------------------------------- */
.pop-filters { display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3);margin-bottom:var(--space-5); }
.pop-filters .pop-field { display:flex;flex-direction:column;gap:4px; }
.pop-filters label { color: var(--text-muted);font-size:var(--fs-small);font-weight:var(--fw-semibold); }
.pop-filters input, .pop-filters select { padding:7px 9px;font-size:var(--fs-small);border:1px solid var(--input-border);border-radius:var(--radius-sm);background: var(--input-bg);color: var(--text); }
.pop-filters select[multiple] { min-width:180px;min-height:74px; }
.pop-filters .pop-actions { display:flex;gap:var(--space-2);margin-left:auto; }
.pop-tz { margin:0 0 var(--space-4);color: var(--text-muted);font-size:var(--fs-small); }

.pop-kpis { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-5); }
.pop-kpi { min-width:0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background: var(--surface);box-shadow: var(--shadow-sm); }
.pop-kpi span { display:block;color: var(--text-muted);font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase; }
.pop-kpi strong { display:block;margin-top:6px;font-size:22px;font-weight:var(--fw-semibold);color: var(--text);line-height:1.1; }
.pop-kpi small { display:block;margin-top:4px;color: var(--text-muted);font-size:var(--fs-small); }

.pop-charts { display:grid;grid-template-columns:2fr 1fr;gap:var(--space-4);margin-bottom:var(--space-5); }
.pop-card { min-width:0;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background: var(--surface);box-shadow: var(--shadow-sm); }
.pop-card h3 { margin:0 0 var(--space-4);font-size:var(--fs-h3);font-weight:var(--fw-semibold);color: var(--text); }
.pop-card.pop-span2 { grid-column:1/-1; }

.pop-spark { display:block;width:100%;height:200px; }
.pop-spark .pop-area { fill: var(--accent);opacity:.14; }
.pop-spark .pop-line { fill:none;stroke: var(--accent);stroke-width:2; }
.pop-spark .pop-line.err { stroke: var(--danger-strong); }
.pop-spark .pop-axis { stroke: var(--line);stroke-width:1; }
.pop-spark text { fill: var(--text-muted);font-size:10px; }

.pop-donut { display:grid;width:150px;height:150px;margin:0 auto;place-items:center;border-radius:50%; }
.pop-donut:before { content:'';grid-area:1/1;width:104px;height:104px;border-radius:50%;background: var(--surface); }
.pop-donut div { z-index:1;grid-area:1/1;text-align:center; }
.pop-donut strong { display:block;font-size:26px;font-weight:var(--fw-semibold);color: var(--text); }
.pop-donut span { display:block;color: var(--text-muted);font-size:var(--fs-small); }
.pop-legend { display:grid;gap:6px;margin-top:var(--space-4); }
.pop-legend div { display:flex;justify-content:space-between;font-size:var(--fs-small);color: var(--text-muted); }
.pop-legend i { display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:2px;vertical-align:middle; }

.pop-bars { display:grid;gap:var(--space-3); }
.pop-bar-row { display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:var(--space-3);font-size:var(--fs-small); }
.pop-bar-row .pop-bar-label { overflow:hidden;color: var(--text);text-overflow:ellipsis;white-space:nowrap; }
.pop-bar-track { height:12px;overflow:hidden;border-radius:var(--radius-pill);background: var(--surface-sunken); }
.pop-bar-track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f79da,#44b3d8); }
.pop-bar-track i.two { background:linear-gradient(90deg,#735bd8,#a970df); }
.pop-bar-row .pop-bar-num { color: var(--text-muted);font-variant-numeric:tabular-nums; }
.pop-bar-multi { display:grid;gap:4px; }

.pop-heatmap { display:grid;grid-template-columns:repeat(24,1fr);gap:3px; }
.pop-heatmap div { height:26px;border-radius:3px;background: var(--surface-sunken); }
.pop-heatmap .hm-scale { display:flex;justify-content:space-between;grid-column:1/-1;margin-top:5px;color: var(--text-muted);font-size:10px; }

.pop-crumbs { margin:0 0 var(--space-4);font-size:var(--fs-small); }
.pop-crumbs a { color: var(--accent);text-decoration:none; }
.pop-num { text-align:right;font-variant-numeric:tabular-nums; }
.pop-chip { display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:var(--fw-semibold); }
.pop-chip.ok { background: var(--success-bg);color: var(--success); }
.pop-chip.warn { background: var(--warning-bg);color: var(--warning); }
.pop-chip.bad { background: var(--danger-bg);color: var(--danger-text); }
.pop-chip.mute { background: var(--surface-sunken);color: var(--text-muted); }

.pop-print-head { display:none; }

@media (max-width: 1100px) {
    .pop-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .pop-charts { grid-template-columns:1fr; }
    .pop-bar-row { grid-template-columns:110px 1fr auto; }
}
@media (max-width: 640px) {
    .pop-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media print {
    .sidebar, .topbar, .nav-toggle, .pop-filters, .pop-actions, .pop-print-btn,
    .session-guard, .confirm-modal, footer { display:none !important; }
    .app-shell, :root[data-nav="collapsed"] .app-shell { grid-template-columns:1fr !important; }
    .main-area { height:auto !important;overflow:visible !important; }
    .content { padding:0 !important; }
    .pop-print-head { display:flex !important;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #333; }
    .pop-print-head img { width:46px;height:46px;object-fit:contain; }
    .pop-print-head h1 { margin:0;font-size:18px; }
    .pop-print-head p { margin:2px 0 0;font-size:12px;color:#555; }
    .pop-card, .pop-kpi { box-shadow:none !important;border:1px solid #ccc !important;break-inside:avoid; }
    .pop-charts { break-inside:avoid; }
    .data-table { font-size:11px; }
    a[href]:after { content:''; }
    body { background:#fff !important; }
}

/* Edit button leads each list row (first column). */
.data-table th.col-edit,.data-table td.col-edit{width:1%;white-space:nowrap;padding-right:4px}

/* Address-style form layout (Locations add panel + edit pop-up): 6-column grid. */
.address-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px}
.address-grid .form-field{min-width:0}
.address-grid .span-1{grid-column:span 1}.address-grid .span-2{grid-column:span 2}.address-grid .span-3{grid-column:span 3}.address-grid .span-4{grid-column:span 4}.address-grid .span-6{grid-column:1/-1}
.address-grid input,.address-grid select{width:100%}
.location-form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.side-panel .address-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.side-panel .address-grid .span-1,.side-panel .address-grid .span-2{grid-column:span 1}
.side-panel .address-grid .span-3,.side-panel .address-grid .span-4,.side-panel .address-grid .span-6{grid-column:1/-1}
.side-panel .address-grid [for="add_state"]{white-space:nowrap}
@media(max-width:560px){.address-grid{grid-template-columns:1fr 1fr}.address-grid .span-3,.address-grid .span-4,.address-grid .span-6{grid-column:1/-1}.address-grid .span-1,.address-grid .span-2{grid-column:span 1}}

/* Topbar metrics: identical rounded boxes (tab-style border, no highlight), well spaced. */
.topbar .topbar-stats{gap:20px}
.topbar .topbar-stat{box-sizing:border-box;width:190px;height:44px;justify-content:center;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.topbar .topbar-stat:hover{background:var(--surface)}
.topbar .topbar-stat .topbar-stat-offline{color:var(--danger,#d84f58);font-size:12px;font-weight:600}
@media(max-width:1400px){.topbar .topbar-stats{gap:12px}.topbar .topbar-stat{width:170px}}
@media(max-width:900px){.topbar .topbar-stats{gap:6px}.topbar .topbar-stat{width:auto;height:36px;padding:0 10px}}

/* Panel header with no title (the tab names the page): just its buttons, right-aligned, slimmer. */
.panel-header.panel-header--actions{justify-content:flex-end;gap:12px;min-height:0;padding-top:8px;padding-bottom:8px}

/* A tab that submits a form (e.g. + New Playlist) looks like the other tabs. */
.lg-settings-tabs form{display:contents}
.lg-settings-tabs button{padding:9px 16px;border:1px solid var(--line);border-radius:8px 8px 0 0;background:var(--tab-idle);color:var(--text-muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lg-settings-tabs button:hover{color:var(--text)}
.lg-settings-tabs button:disabled{opacity:.5;cursor:not-allowed}
.mfm-toolbar-actions{align-items:center}

/* Save / Cancel / × on a just-created record's editor (discard = delete it). */
.new-record-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.new-record-actions .button{min-height:32px;padding:6px 12px}
.panel-header:has(.new-record-actions){justify-content:flex-start;gap:10px}

/* Media explorer (the single Media view): the Media Library tab joins the
   tree pane beneath it; file rows get a thumbnail and a clickable name that
   opens the details/edit pop-up. */
.media-section-tabs{--tab-panel:var(--surface-soft)}
.mfm-thumb{display:inline-grid;flex:0 0 auto;width:44px;height:28px;margin-right:10px;place-items:center;overflow:hidden;border-radius:4px;background:#000;color:var(--text-muted);font-size:12px}
.mfm-thumb img{width:100%;height:100%;object-fit:cover}
.mfm-name-link{padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.mfm-name-link:hover,.mfm-name-link:focus-visible{color:var(--accent);text-decoration:underline}
.mfm-badge-off{margin-left:8px;padding:1px 6px;border-radius:999px;background:var(--surface-sunken);color:var(--text-muted);font-size:11px;font-weight:600}
.mfm-filter{min-height:32px;width:180px;padding:4px 10px}
.mfm-row[hidden]{display:none}
.media-details{display:grid;grid-template-columns:minmax(160px,260px) minmax(0,1fr);gap:18px;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.media-details-preview{display:block;border-radius:6px;overflow:hidden;background:#000}
.media-details-preview img,.media-details-preview video{display:block;width:100%;max-height:220px;object-fit:contain}
.media-details-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:13px}
.media-details-list dt{color:var(--text-muted);font-weight:600}
.media-details-list dd{margin:0;overflow-wrap:anywhere}
@media(max-width:620px){.media-details{grid-template-columns:1fr}}
.mfm-cell-name{display:flex;align-items:center;min-width:0}
.media-inline-edit>.media-details{grid-column:1/-1}
.edit-modal-body .media-inline-edit{min-width:min(760px,74vw)}

/* Status messages as toasts (see assets/js/notices.js). */
.toast-stack{position:fixed;top:98px;right:24px;z-index:1300;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast-stack .toast{position:relative;margin:0;padding:12px 40px 12px 14px;box-shadow:var(--shadow-lg);pointer-events:auto;animation:toast-in .2s ease-out;transition:opacity .25s,transform .25s}
.toast-stack .toast.is-leaving{opacity:0;transform:translateX(12px)}
.toast-close{position:absolute;top:6px;right:8px;padding:2px 6px;border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.7}
.toast-close:hover{opacity:1}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.toast-stack{top:12px;right:16px}}