/* =====================================================================
 * ESLAN Signage dashboard stylesheet (no framework).
 * v2 — modern sidebar shell. Design tokens first, then components.
 * All legacy class names kept so existing views keep working.
 * ===================================================================== */
:root {
    --teal: #0b3d4f;
    --teal-light: #12586f;
    --accent: #14a3a0;
    --accent-dark: #0e807e;
    --accent-soft: #e6f6f5;
    --bg: #f4f6f9;
    --card: #ffffff;
    --text: #131f29;
    --muted: #6b7a8c;
    --border: #e6ebf1;
    --border-strong: #cfd9e3;
    --ok: #0f8a4c;
    --ok-bg: #e3f6ec;
    --warn: #b26e08;
    --warn-bg: #fcf1dc;
    --off: #8b98a5;
    --off-bg: #eef1f4;
    --danger: #c0392b;
    --danger-bg: #fdecea;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(16, 42, 67, .05), 0 1px 1px rgba(16, 42, 67, .03);
    --shadow-md: 0 8px 24px rgba(16, 42, 67, .10);
    --focus-ring: 0 0 0 3px rgba(20, 163, 160, .22);
    --sidebar-w: 236px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

.brand { font-weight: 750; color: var(--teal); letter-spacing: -.01em; }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.muted { color: var(--muted); }
.error-text { color: var(--danger); }
.hidden { display: none !important; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .93em; }

/* --------------------------------------------------------------------
 * App shell : fixed sidebar + fluid content
 * ------------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 18px 12px 14px;
    overflow-y: auto;
}
.sidebar .brand { font-size: 17px; padding: 2px 10px 14px; display: block; }

.sidenav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-sect {
    margin: 16px 10px 5px; font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .08em; color: #9aa8b6;
}
.sidenav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: #3d4d5c; font-weight: 530;
    transition: background .13s ease, color .13s ease;
}
.sidenav a:hover { background: #f1f5f8; color: var(--text); text-decoration: none; }
.sidenav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 620; }
.sidenav a.active .nav-ico { color: var(--accent-dark); }
.nav-ico { width: 18px; height: 18px; flex: none; color: #8fa0af; transition: color .13s ease; }
.sidenav a:hover .nav-ico { color: #5c6f80; }

/* Small live counter next to "Écrans" (filled by JS: "3/4") */
.nav-live {
    margin-left: auto; font-size: 11px; font-weight: 620;
    color: var(--ok); background: var(--ok-bg);
    padding: 1px 7px; border-radius: 999px;
}

/* Sidebar footer: company + user + logout */
.sidebar-foot { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.company-name { font-size: 12.5px; color: var(--muted); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-switch select {
    width: 100%; padding: 7px 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: #fff; color: var(--text);
    font-family: inherit; font-size: 13px; cursor: pointer;
}
.sidebar-user { display: flex; align-items: center; gap: 6px; }
.sidebar-user .user {
    flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 7px 10px; border-radius: var(--radius-sm);
    color: #3d4d5c; font-weight: 530;
}
.sidebar-user .user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .user:hover { background: #f1f5f8; text-decoration: none; }
.sidebar-user .user.active { background: var(--accent-soft); color: var(--accent-dark); }
.logout-form { margin: 0; }
.logout {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm);
    background: none; border: none; color: #8fa0af; cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.logout:hover { background: var(--danger-bg); color: var(--danger); }
.logout .nav-ico { width: 18px; height: 18px; }

/* Content area */
.container {
    flex: 1; min-width: 0;
    margin-left: var(--sidebar-w);
    padding: 30px 36px 20px;
    max-width: calc(var(--sidebar-w) + 1180px);
}
.footer { text-align: center; color: #a3b0bd; font-size: 12.5px; padding: 26px 0 8px; }

/* Mobile top bar */
.mobilebar {
    display: none; position: sticky; top: 0; z-index: 70;
    align-items: center; gap: 12px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 10px 14px;
}
.mobilebar .brand { font-size: 16px; }
.nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: #f1f5f8; border: none; color: var(--text); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.sidebar-overlay {
    position: fixed; inset: 0; z-index: 75;
    background: rgba(9, 28, 38, .45);
    opacity: 0; transition: opacity .2s ease;
}
.sidebar-overlay.show { opacity: 1; }

@media (max-width: 900px) {
    .app { display: block; }
    .mobilebar { display: flex; }
    .sidebar {
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-md);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    .container { margin-left: 0; padding: 20px 16px 12px; }
}
@media (max-width: 720px) {
    /* Cards keep their rounding; wide tables scroll horizontally inside. */
    .table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------
 * Page headings
 * ------------------------------------------------------------------ */
h1 { font-size: 23px; font-weight: 750; letter-spacing: -.015em; margin: 0 0 6px; }
h1 + .muted, .page-sub { margin: -2px 0 18px; max-width: 760px; }
h2 { font-size: 15px; font-weight: 680; letter-spacing: -.005em; margin: 0 0 14px; }
h2 .muted { font-weight: 450; }

.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.back-link:hover { color: var(--accent-dark); }

/* --------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------ */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; align-items: start; }
.cards .card { margin-bottom: 0; }

/* Stat tiles */
.card.stat { text-align: left; padding: 18px 22px; }
.stat-n { display: block; font-size: 30px; font-weight: 760; color: var(--teal); letter-spacing: -.02em; line-height: 1.15; }
.stat-l { color: var(--muted); font-size: 12.5px; font-weight: 550; text-transform: uppercase; letter-spacing: .05em; }

/* Collapsible help block (setup instructions etc.) */
details.help > summary {
    cursor: pointer; font-weight: 600; color: var(--muted); font-size: 13.5px;
    list-style: none; display: flex; align-items: center; gap: 7px; user-select: none;
}
details.help > summary::before { content: "›"; font-size: 16px; transition: transform .15s ease; display: inline-block; }
details.help[open] > summary::before { transform: rotate(90deg); }
details.help > summary::-webkit-details-marker { display: none; }
details.help[open] { padding-bottom: 2px; }
details.help > *:not(summary) { margin-top: 10px; }

/* --------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.table th {
    color: #8494a5; font-weight: 640; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .06em;
    padding-top: 4px; padding-bottom: 9px;
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: #f7fafc; }
.table tbody tr:last-child td { border-bottom: none; padding-bottom: 4px; }
.table td.actions, .table td:last-child { white-space: nowrap; }
.table .actions, .table td:last-child { text-align: right; }
.table td:first-child a { font-weight: 570; }

/* --------------------------------------------------------------------
 * Badges (status pills with dot)
 * ------------------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2.5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 590; background: var(--off-bg); color: var(--muted);
    white-space: nowrap;
}
.badge-ok, .badge-warn, .badge-off { padding-left: 8px; }
.badge-ok::before, .badge-warn::before, .badge-off::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-ok::before { background: var(--ok); animation: pulse-dot 2.4s ease-in-out infinite; }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-warn::before { background: var(--warn); }
.badge-off { background: var(--off-bg); color: var(--off); }
.badge-off::before { background: var(--off); animation: none; }

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 138, 76, .35); }
    50% { box-shadow: 0 0 0 4px rgba(15, 138, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .badge-ok::before { animation: none; }
}

/* Live "seen X ago" text next to badges */
.js-seen { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 590; color: #3d4d5c; }
label input, label select {
    display: block; width: 100%; max-width: 360px; margin-top: 6px;
    padding: 8.5px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 420; font-family: inherit; background: #fff; color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
label textarea {
    display: block; width: 100%; max-width: 480px; margin-top: 6px;
    padding: 8.5px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 420; font-family: inherit; resize: vertical; color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
label input::placeholder, label textarea::placeholder { color: #a4b1be; }
label input:focus, label select:focus, label textarea:focus,
.dur-input:focus {
    outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
label input[type="color"] { padding: 3px; height: 38px; width: 64px; cursor: pointer; }
label input[type="file"] { padding: 7px 10px; font-size: 13px; }

select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7a8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    padding-right: 30px !important;
}

/* Aligned inline forms: every field on one grid row, button flush with inputs */
.form-inline {
    display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end;
}
.form-inline label { margin-bottom: 0; flex: 1 1 200px; max-width: 300px; }
.form-inline label input, .form-inline label select { max-width: none; width: 100%; }
.form-inline .btn, .form-inline button { flex: 0 0 auto; margin-bottom: 1px; }
.form-inline .checkbox-label { flex: 0 0 auto; padding-bottom: 9px; }
.inline-form { display: inline; }

/* --------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8.5px 15px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: #fff; color: var(--text); cursor: pointer;
    font-size: 13.5px; font-weight: 580; font-family: inherit; line-height: 1.4;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .05s ease;
}
.btn:hover { text-decoration: none; background: #f5f8fa; border-color: #b6c2cf; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 1px 2px rgba(14, 128, 126, .35);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { background: #fff; border-color: #e9c2bb; color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-sm { padding: 4.5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled], button[disabled] { opacity: .55; cursor: default; pointer-events: none; }

/* Busy state applied by the AJAX layer while a form is submitting */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-busy:not(.btn-primary)::after { border-color: rgba(19, 31, 41, .2); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

.url-box { display: inline-block; background: #eef4f7; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; }
.danger-zone { border-color: #f0cdc7; }
.danger-zone h2 { color: var(--danger); }

/* --------------------------------------------------------------------
 * Flash messages + toasts
 * ------------------------------------------------------------------ */
.flash {
    padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13.5px;
    border: 1px solid transparent; font-weight: 530;
    transition: opacity .4s ease, transform .4s ease;
}
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: #bfe7d0; }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: #f3c3bc; }
.flash-hide { opacity: 0; transform: translateY(-4px); }

#toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
    background: #16242e; color: #eef4f8; padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 530; box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    max-width: 340px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #10382a; color: #b9ecd0; }
.toast-error { background: #46160f; color: #ffc9c0; }

/* --------------------------------------------------------------------
 * Sortable playlist
 * ------------------------------------------------------------------ */
.sortable { list-style: none; padding: 0; margin: 0; }
.sortable li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 8px; background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.sortable li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.sortable li .item-name { flex: 1; font-weight: 560; }
.drag-handle { cursor: grab; color: #b3bfcb; font-size: 15px; transition: color .13s ease; }
.sortable li:hover .drag-handle { color: var(--muted); }
.sortable.readonly .drag-handle { display: none; }
.sortable-ghost { opacity: 0.4; }

/* Inline duration editor inside playlist rows */
.dur-label {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; color: var(--muted); font-weight: 420; font-size: 13px; white-space: nowrap;
}
.dur-input {
    width: 64px; padding: 4px 6px; text-align: right;
    border: 1px solid var(--border-strong); border-radius: 7px;
    font-size: 13px; font-family: inherit; color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dur-input:disabled { opacity: .5; }

/* --------------------------------------------------------------------
 * Live preview (16:9 letterboxed frame): image, video or widget iframe
 * ------------------------------------------------------------------ */
.preview-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    background: #0c161d;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-frame img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.preview-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.preview-frame iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.preview-empty { color: #9fb3bd; font-size: 14px; text-align: center; padding: 12px; }

/* Place autocomplete dropdown (weather widget form) */
.geo-wrap { position: relative; }
.geo-list {
    position: absolute; z-index: 60; left: 0; top: 100%; margin: 4px 0 0; padding: 4px;
    list-style: none; width: 100%; max-width: 360px; max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.geo-list li {
    padding: 8px 10px; border-radius: 6px; cursor: pointer; font-weight: 420; font-size: 14px;
}
.geo-list li:hover { background: var(--accent-soft); }

/* Template editor: form + live preview side by side */
.tpl-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.tpl-preview-pane { position: sticky; top: 20px; }
.tpl-preview-pane .preview-frame { max-width: none; }
@media (max-width: 900px) { .tpl-editor { grid-template-columns: 1fr; } .tpl-preview-pane { position: static; } }

/* --------------------------------------------------------------------
 * Free-form template canvas editor (tpl_free)
 * ------------------------------------------------------------------ */
.free-editor { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.free-editor form { min-width: 0; }
.free-main { min-width: 0; }
@media (max-width: 1100px) { .free-editor { grid-template-columns: 1fr; } }

#tpl-canvas {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #0b3d4f; border-radius: var(--radius-sm); overflow: hidden;
    cursor: default; user-select: none; touch-action: none;
    outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}
#tpl-canvas:focus-visible { box-shadow: var(--focus-ring); }

.cblk { position: absolute; cursor: move; }
.cblk:hover { outline: 1px dashed rgba(255, 255, 255, .45); }
.cblk.sel { outline: 2px solid var(--accent); }
.cblk-text { white-space: pre-wrap; word-wrap: break-word; letter-spacing: -.01em; }
.cblk img { width: 100%; height: 100%; display: block; pointer-events: none; }
.cblk-empty {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); color: #cfe6ec; font-size: 13px;
    border: 1px dashed rgba(255, 255, 255, .4); border-radius: 6px;
}
/* Resize handle (bottom-right of the selected block) */
.cblk-rs {
    position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
    background: var(--accent); border: 2px solid #fff; border-radius: 4px;
    cursor: nwse-resize; box-shadow: var(--shadow-sm);
}

.free-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.free-align { display: flex; gap: 6px; margin-bottom: 14px; }
#free-props .form-inline label { flex: 1 1 120px; max-width: none; }
#free-props { border-top: 1px solid var(--border); padding-top: 14px; }

input[type="range"] { accent-color: var(--accent); padding: 0; border: none; max-width: 360px; width: 100%; display: block; margin-top: 8px; }

/* --------------------------------------------------------------------
 * Plain lists (group members, etc.)
 * ------------------------------------------------------------------ */
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 10px 6px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; transition: background .12s ease; }
.plain-list li:hover { background: #f7fafc; }
.plain-list li:last-child { border-bottom: none; }
.plain-list li a { font-weight: 570; }

/* Tight inline form (role selector inside a table cell) */
.form-tight { margin: 0; display: inline-block; }
.form-tight select { margin-top: 0; padding: 5px 9px; font-size: 13px; }

/* Checkbox label stays inline instead of full-width block */
.checkbox-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 460; }
.checkbox-label input { width: auto; margin-top: 0; accent-color: var(--accent); }

/* Day-of-week checkbox row (scheduling) */
.day-row { display: flex; flex-wrap: wrap; gap: 14px; }
.day-row .checkbox-label { margin-bottom: 0; }

/* --------------------------------------------------------------------
 * Weekly schedule calendar
 * ------------------------------------------------------------------ */
.calendar { font-size: 12px; }
.cal-row { display: flex; gap: 3px; }
.cal-head { flex: 1; text-align: center; font-weight: 640; padding: 4px 0; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.cal-gutter-head, .cal-gutter { flex: 0 0 46px; }
.cal-gutter { position: relative; height: 480px; }
.cal-gutter span { position: absolute; right: 8px; transform: translateY(-50%); color: #a3b0bd; font-size: 11px; font-variant-numeric: tabular-nums; }
.cal-col { flex: 1; position: relative; height: 480px; background: #f1f5f8; border-radius: 7px; overflow: hidden; }
.cal-block { position: absolute; left: 2px; right: 2px; border-radius: 5px; color: #fff; font-size: 11px;
    line-height: 1.2; padding: 3px 5px; overflow: hidden; opacity: 0.94; box-sizing: border-box; font-weight: 550; }
.cal-block.punctual { border: 2px dashed rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------
 * Library grid
 * ------------------------------------------------------------------ */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.lib-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.lib-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.lib-thumb { aspect-ratio: 16 / 9; background: #0c1c24; }
.lib-thumb img, .lib-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-thumb .thumb-label { height: 100%; display: flex; align-items: center; justify-content: center; color: #cfe6ec; font-weight: 640; letter-spacing: 1.5px; font-size: 12.5px; }
.lib-name { padding: 11px 13px 2px; font-size: 13.5px; font-weight: 590; }
.lib-meta { padding: 0 13px 8px; font-size: 12px; }
.lib-actions { padding: 0 13px 12px; margin-top: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.lib-card form { display: inline; }
.lib-card > form { padding: 0 13px 12px; margin-top: auto; }

/* Template layout chip (mini preview placeholder) */
.tpl-badge {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--teal-light), var(--teal));
    color: #fff; font-weight: 640; font-size: 15px; text-align: center; padding: 8px;
}

/* --------------------------------------------------------------------
 * Supervision log list
 * ------------------------------------------------------------------ */
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.log-list li:hover { background: #f7fafc; }
.log-list li:last-child { border-bottom: none; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-msg { flex: 1; }
.log-src { font-size: 12px; }
.badge.log-error { background: var(--danger-bg); color: var(--danger); }
.badge.log-warning { background: var(--warn-bg); color: var(--warn); }
.badge.log-info { background: var(--off-bg); color: var(--muted); }

/* --------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------ */
.login-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: radial-gradient(120vh 120vh at 85% -20%, rgba(127, 227, 227, .16), transparent 55%),
        linear-gradient(150deg, var(--teal) 0%, #0e2f3d 60%, #082330 100%);
}
.login-card {
    background: #fff; padding: 36px; border-radius: 18px; width: 350px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
}
.login-card h1 { margin: 0; font-size: 24px; }
.login-card .muted { margin-top: 4px; margin-bottom: 22px; }
.login-card label input { max-width: none; }