/*
 * Admin / auth styles on top of Bootstrap 5.3 (local).
 * Brand tokens (colors, font, logo helper) come from brand.css — load it before this file.
 * No brand HEX is declared here: only var(--brand-*) / var(--go3m-*).
 */

:root {
    --bs-primary: #237575;              /* = --go3m-teal-strong (Bootstrap needs literal rgb pair) */
    --bs-primary-rgb: 35, 117, 117;
    --bs-link-color: var(--brand-primary-strong);
    --bs-link-color-rgb: 35, 117, 117;
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-link-hover-color-rgb: 27, 92, 92;
    --bs-body-font-family: var(--brand-font);
    --bs-body-color: var(--brand-text);
    --bs-emphasis-color: var(--brand-text);
    --bs-heading-color: var(--brand-text);
    --bs-focus-ring-color: rgba(43, 140, 140, .28);
}

body {
    font-family: var(--brand-font);
}

.btn-primary {
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-bg: var(--brand-primary-strong);
    --bs-btn-border-color: var(--brand-primary-strong);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 43, 140, 140;
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: #7FB3B3;
    --bs-btn-disabled-border-color: #7FB3B3;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary-strong);
    --bs-btn-border-color: var(--brand-primary-strong);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-strong);
    --bs-btn-hover-border-color: var(--brand-primary-strong);
    --bs-btn-focus-shadow-rgb: 43, 140, 140;
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
}

/* Bootstrap compiles these colors (not variables): re-point them to the brand */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(43, 140, 140, .22);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(43, 140, 140, .22);
}

.form-check-input:checked {
    background-color: var(--brand-primary-strong);
    border-color: var(--brand-primary-strong);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-primary-strong);
    --bs-dropdown-link-active-color: var(--brand-on-primary);
}

.pagination {
    --bs-pagination-color: var(--brand-primary-strong);
    --bs-pagination-hover-color: var(--brand-primary-dark);
    --bs-pagination-focus-color: var(--brand-primary-dark);
    --bs-pagination-active-bg: var(--brand-primary-strong);
    --bs-pagination-active-border-color: var(--brand-primary-strong);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(43, 140, 140, .22);
}

.card {
    --bs-card-border-color: #E4E6E6;
    --bs-card-border-radius: 10px;
}

.table {
    --bs-table-color: var(--brand-text);
}

.brand-mark {
    display: inline-block;
    width: 10px;
    height: 28px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
    flex: 0 0 auto;
}

/* Auth pages — official logo is light-on-dark, so it sits on the deep teal ground */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(43, 140, 140, .35) 0%, transparent 55%),
        linear-gradient(160deg, var(--brand-surface-dark) 0%, var(--brand-surface-night) 70%, var(--go3m-black) 100%);
}

.auth-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.5rem;
    padding: 24px 16px;
}

.auth-logo {
    height: 44px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border-top: 4px solid var(--brand-primary) !important;
}

.auth-system-name {
    font-weight: 600;
    color: var(--brand-text-soft);
    letter-spacing: .01em;
}

/* Admin shell */
.admin-body {
    min-height: 100vh;
    background: var(--brand-surface);
    color: var(--brand-text);
}

.bg-brand {
    background-color: var(--brand-surface-dark);
}

/* Navbar — deep teal bar, official logo + system name, teal active indicator */
.admin-navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: rgba(255, 255, 255, .74);
    --bs-navbar-hover-color: #FFFFFF;
    --bs-navbar-active-color: #FFFFFF;
    min-height: 60px;
    border-bottom: 3px solid var(--brand-primary);
}

.admin-navbar .navbar-brand {
    gap: .85rem;
    padding-block: .5rem;
    margin-right: 1.75rem;
}

.navbar-logo {
    height: 30px;
}

.navbar-system-name {
    padding-left: .85rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
}

.admin-navbar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 57px;
    padding-inline: .85rem !important;
    font-weight: 500;
}

.admin-navbar .nav-link.active {
    font-weight: 600;
}

.admin-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: -3px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-primary-on-dark);
}

.admin-navbar .nav-link:focus-visible {
    outline: 2px solid var(--brand-primary-on-dark);
    outline-offset: -2px;
    border-radius: 6px;
}

.navbar-role-badge {
    background: rgba(140, 202, 202, .18);
    color: var(--brand-primary-on-dark);
    border: 1px solid rgba(140, 202, 202, .35);
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .navbar-system-name { display: none; }
}

@media (max-width: 991.98px) {
    .admin-navbar .nav-link { min-height: 44px; }
    .admin-navbar .nav-link.active::after { display: none; }
    .admin-navbar .navbar-collapse { padding-bottom: .75rem; }
}

.page-header h1,
.admin-body main h1.h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.shortcut-card {
    border-color: #E4E6E6;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.shortcut-card .bi {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-primary-tint);
    color: var(--brand-primary-strong) !important;
}

.shortcut-card:hover,
.shortcut-card:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 6px 18px rgba(11, 39, 39, .10);
}

.temp-password {
    font-size: 1.25rem;
    letter-spacing: .08em;
}

/* ==========================================================================
   TV preview (slide_preview.php) — simulation of the reception screen.
   Independent from Bootstrap: dark neutral room so the canvas colors read true.
   ========================================================================== */
.tvp-body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: radial-gradient(ellipse at 50% 40%, #142424 0%, #070D0D 70%);
    color: #E6ECEC;
    font-family: var(--brand-font, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

.tvp-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tvp-heading {
    text-align: center;
    min-width: 0;
}

.tvp-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-primary-on-dark, #8CCACA);
}

.tvp-title {
    margin: 2px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48vw;
}

.tvp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* .tvp-btn is used on both <a> (Voltar, Editar) and native <button> (player controls).
   Anchors have a transparent background by default, so this class always looked correct
   on them; <button> elements do NOT — the browser's own UA stylesheet paints a native
   face/border/appearance on top, which is what made "Tela cheia"/"Próximo" read as a
   pale, low-contrast button instead of the intended light-text-on-dark-room "ghost" look.
   Resetting that native chrome here (background/appearance/font/line-height/cursor) fixes
   every current and future button that uses this class, with no visual change for <a>. */
.tvp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    color: #e6eaf2;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    justify-self: start;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.tvp-btn:hover,
.tvp-btn:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .32);
}

.tvp-btn:focus-visible {
    outline: 2px solid var(--brand-primary-on-dark, #8CCACA);
    outline-offset: 2px;
}

.tvp-btn:disabled {
    color: rgba(230, 234, 242, .38);
    border-color: rgba(255, 255, 255, .08);
    background-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

.tvp-btn-primary {
    background: var(--brand-primary-strong, #237575);
    border-color: var(--brand-primary-strong, #237575);
    color: #ffffff;
}

.tvp-btn-primary:hover,
.tvp-btn-primary:focus-visible {
    background: var(--brand-primary, #2B8C8C);
    border-color: var(--brand-primary-on-dark, #8CCACA);
}

.tvp-stage {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 20px 24px 8px;
    container-type: size;
}

.tvp-tv {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* bezel 12px each side (24px) + stand 22px + breathing room */
    width: min(100cqw, calc((100cqh - 64px) * 16 / 9 + 24px));
}

.tvp-bezel {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #20252e 0%, #111419 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.tvp-screen {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 3px;
    background: #000000;
}

.tvp-stand {
    width: 22%;
    height: 10px;
    margin-top: 12px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #1a1e25 0%, #0d1014 100%);
}

.tvp-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 16px;
}

.tvp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #b9c2d3;
    font-size: .8rem;
    font-weight: 600;
}

.tvp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: #b9c2d3;
}

.tvp-empty .bi {
    font-size: 3rem;
    color: #6f7a8c;
}

.tvp-empty-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
}

.tvp-empty-text {
    margin: 0 0 8px;
}

.tvp-raw-message {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
}

.tvp-chip-ok { color: #7be0a6; }
.tvp-chip-warn { color: #ffd27a; }

.tvp-hint {
    font-size: .75rem;
    color: #6f7a8c;
}

@media (max-width: 640px) {
    .tvp-bar { grid-template-columns: auto 1fr auto; }
    .tvp-btn span { display: none; }
    .tvp-title { max-width: 100%; }
}

.table > :not(caption) > * > * {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* ==========================================================================
   Shared admin components (used by slides index/form/order).
   These classes were referenced by the views but never defined.
   ========================================================================== */
:root {
    --ui-ink: var(--brand-text);
    --ui-ink-soft: var(--brand-text-soft);
    --ui-muted: #666B6B;                /* 5.4:1 on white */
    --ui-line: #E4E6E6;
    --ui-line-strong: #D3D8D8;
    --ui-surface: #ffffff;
    --ui-surface-alt: #F8F9F9;
    --ui-radius: 10px;
    --ui-control-h: 38px;
    --ui-focus: 0 0 0 3px rgba(43, 140, 140, .28);
}

.card-custom {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgba(16, 30, 54, .04), 0 1px 3px rgba(16, 30, 54, .04);
}

.form-label-custom {
    margin-bottom: .35rem;
    font-weight: 600;
    color: var(--ui-ink-soft);
}

/* Primary CTA — brand blue */
.btn-brand {
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-bg: var(--brand-primary-strong);
    --bs-btn-border-color: var(--brand-primary-strong);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 43, 140, 140;
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-secondary);
    --bs-btn-active-border-color: var(--brand-secondary);
    --bs-btn-disabled-color: var(--brand-on-primary);
    --bs-btn-disabled-bg: #7FB3B3;
    --bs-btn-disabled-border-color: #7FB3B3;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11, 39, 39, .25);
}

.btn-brand:focus-visible {
    box-shadow: var(--ui-focus);
}

/* ==========================================================================
   Slides listing (slides.php).
   Presentation only: the original upload is untouched and still used by the TV.
   The CSP (style-src 'self') blocks inline style attributes, so every size
   and color must live here.
   ========================================================================== */
.slides-page {
    color: var(--ui-ink);
    font-variant-numeric: tabular-nums;
}

.slides-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.slides-page-title {
    margin: 0 0 .25rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ui-ink);
}

.slides-page-lead {
    margin: 0;
    color: var(--ui-muted);
}

.slides-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.slides-page-actions .btn,
.slides-filters .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--ui-control-h);
    padding-inline: 1rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* Secondary action — quiet, never louder than the CTA */
.btn-quiet {
    --bs-btn-color: var(--ui-ink-soft);
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: var(--ui-line-strong);
    --bs-btn-hover-color: var(--ui-ink);
    --bs-btn-hover-bg: var(--ui-surface-alt);
    --bs-btn-hover-border-color: #B8C0C0;
    --bs-btn-active-color: var(--ui-ink);
    --bs-btn-active-bg: #EEF1F1;
    --bs-btn-active-border-color: #B8C0C0;
    font-weight: 500;
}

.btn-quiet:focus-visible { box-shadow: var(--ui-focus); }

/* Filters */
.slides-filters {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.slides-filters-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(170px, 1.2fr) minmax(150px, 1fr) auto;
    align-items: end;
    gap: .875rem 1rem;
}

.slides-filters .form-control,
.slides-filters .form-select,
.slides-filters .input-group-text {
    min-height: var(--ui-control-h);
    border-color: var(--ui-line-strong);
}

.slides-filters .input-group-text {
    background: var(--ui-surface-alt);
    color: var(--ui-muted);
}

.slides-filters .form-control:focus,
.slides-filters .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--ui-focus);
}

.slides-filters .form-label-custom {
    font-size: .8125rem;
}

.slides-filters-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.btn-filter {
    --bs-btn-color: var(--brand-primary-strong);
    --bs-btn-bg: var(--brand-primary-tint);
    --bs-btn-border-color: var(--brand-primary-tint-line);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-strong);
    --bs-btn-hover-border-color: var(--brand-primary-strong);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    font-weight: 600;
}

.btn-filter:focus-visible { box-shadow: var(--ui-focus); }

.btn-clear {
    --bs-btn-color: var(--ui-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ui-ink);
    --bs-btn-hover-bg: #EEF1F1;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ui-ink);
    --bs-btn-active-bg: #E4E6E6;
    font-weight: 500;
}

.btn-clear:focus-visible { box-shadow: var(--ui-focus); }

@media (max-width: 991.98px) {
    .slides-filters-grid { grid-template-columns: 1fr 1fr; }
    .slides-filters-actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .slides-filters-grid { grid-template-columns: 1fr; }
    .slides-filters-actions .btn-filter { flex: 1 1 auto; }
}

/* Listing card header */
.slides-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-line);
}

.slides-list-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ui-ink);
}

.slides-count {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--brand-primary-tint);
    color: var(--brand-primary-strong);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.slides-sort-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface-alt);
    color: var(--ui-muted);
    font-size: .8125rem;
}

.slides-sort-hint strong {
    color: var(--ui-ink-soft);
    font-weight: 600;
}

/* Table */
.slides-table {
    --bs-table-hover-bg: #F3F8F8;
    margin: 0;
    color: var(--ui-ink);
}

.slides-table > thead > tr > th {
    padding-top: .6rem;
    padding-bottom: .6rem;
    background: var(--ui-surface-alt);
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.slides-table > tbody > tr > td {
    padding-top: .875rem;
    padding-bottom: .875rem;
    border-bottom-color: var(--ui-line);
    vertical-align: middle;
}

.slides-table > tbody > tr:last-child > td { border-bottom: 0; }

.slides-table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
.slides-table > :not(caption) > * > :last-child { padding-right: 1.25rem; }

.slides-col-media { width: 232px; }
.slides-col-status { width: 164px; }
.slides-col-window { width: 176px; }
.slides-col-narrow { width: 84px; }
.slides-col-active { width: 104px; }
.slides-col-actions { width: 136px; }

.slides-title {
    max-width: 320px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.slides-title-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin-top: .4rem;
}

.slides-window {
    display: grid;
    gap: .25rem;
    color: var(--ui-ink-soft);
    font-size: .8125rem;
    line-height: 1.35;
}

.slides-window .bi {
    margin-right: .35rem;
    color: var(--ui-muted);
}

.slides-metric {
    color: var(--ui-ink-soft);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.slides-position {
    display: inline-block;
    min-width: 2.5rem;
    padding: .15rem .45rem;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: var(--ui-surface-alt);
    color: var(--ui-ink-soft);
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

/* Type badges — one class per real slide_types.code (underscores → hyphens).
   GO3M scale: low-saturation tints anchored on the official teal and graphite, each
   with dark text of the same hue (contrast ≥ 7:1). "comunicado" carries the brand teal. */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .2rem .55rem;
    border: 1px solid #d6dbe4;
    border-radius: 6px;
    background: #eef0f4;
    color: #3b4557;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.type-badge .bi { font-size: .8rem; }

.type-badge--comunicado            { background: var(--brand-primary-tint); border-color: var(--brand-primary-tint-line); color: var(--brand-primary-dark); }
.type-badge--comunicado-importante { background: #F8E9E6; border-color: #EBC7C0; color: #8A2D1E; }
.type-badge--aniversariantes       { background: #F7F0DC; border-color: #E6D6A6; color: #6B4E0A; }
.type-badge--evento                { background: #E4EEF2; border-color: #BED4DE; color: #1F5268; }
.type-badge--treinamento           { background: #E3F0EA; border-color: #BBD9CB; color: #1E5A43; }
.type-badge--reconhecimento        { background: #EEF1E0; border-color: #D3DBB0; color: #4A5419; }
.type-badge--dica                  { background: #F1EEE8; border-color: #DAD3C4; color: #584D38; }
.type-badge--data-comemorativa     { background: #F2E8EE; border-color: #DDC5D2; color: #6E2F53; }
.type-badge--arte                  { background: #ECEEEE; border-color: #D3D8D8; color: #3E4444; }

/* Calculated status (SlideScheduler) — semantic colors only */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.status-badge .bi { font-size: .8rem; }

.status-badge--success { background: #e4f4ea; border-color: #bfe2cb; color: #17613a; }
.status-badge--warning { background: #fdf2d8; border-color: #efd699; color: #6e4800; }
.status-badge--info    { background: #E6ECF3; border-color: #C5D2E2; color: #2D4F73; }
.status-badge--danger  { background: #fce8e6; border-color: #f2c2bc; color: #9b2616; }
.status-badge--neutral { background: #EEF0F0; border-color: #D8DDDD; color: #4A5050; }

.status-badge--success .bi { color: #1f8a4c; }

/* Active toggle */
.active-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ui-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.active-toggle .bi { font-size: 1.35rem; line-height: 1; }

.active-toggle.is-on { color: #17613a; }
.active-toggle.is-on .bi { color: #1f8a4c; }
.active-toggle.is-off .bi { color: #A0A7A7; }

button.active-toggle { cursor: pointer; transition: background-color .15s ease; }
button.active-toggle:hover { background: #EEF1F1; }
button.active-toggle:focus-visible { outline: 0; box-shadow: var(--ui-focus); }

/* Row actions */
.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
}

.row-actions form { display: inline-flex; margin: 0; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ui-line-strong);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-ink-soft);
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-icon:hover { background: #EEF1F1; border-color: #B8C0C0; color: var(--ui-ink); }
.btn-icon:focus-visible { outline: 0; box-shadow: var(--ui-focus); }

.btn-icon--view { border-color: var(--brand-primary-tint-line); background: var(--brand-primary-tint); color: var(--brand-primary-strong); }
.btn-icon--view:hover { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); color: var(--brand-on-primary); }

.btn-icon--danger { color: #b42318; }
.btn-icon--danger:hover { background: #fce8e6; border-color: #f2c2bc; color: #912018; }
.btn-icon--danger:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, .22); }

/* Empty state */
.slides-empty {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
}

.slides-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: .75rem;
    border-radius: 14px;
    background: var(--brand-primary-tint);
    color: var(--brand-primary-strong);
    font-size: 1.5rem;
}

.slides-empty-title {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.slide-thumb {
    width: 208px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #EAEDED;
}

.slide-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* corporate art must never be cropped */
}

.slide-thumb-empty {
    flex-direction: column;
    gap: 4px;
    background: var(--bs-light);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.slide-thumb-empty .bi { font-size: 1.5rem; opacity: .6; }

/* Slide form (slide_form.php) — current image as a controlled thumbnail.
   Specialization of .slide-thumb (16:9, contain, overflow hidden): 360×203, shrinks with the column. */
.slide-form-media {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
    padding: 1rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-alt);
}

/* Double class: must win over the listing's @media .slide-thumb width steps.
   Sized larger than the listing's thumbnail: this is the form's visual centerpiece,
   meant to read like a real TV screen preview, not an incidental attachment icon. */
.slide-thumb.slide-form-thumb {
    width: 480px;
    height: auto;          /* aspect-ratio 16:9 from .slide-thumb → 270 px */
    flex: 0 1 480px;
    border-width: 2px;
    box-shadow: 0 1px 2px rgba(16, 30, 54, .05), 0 6px 16px rgba(11, 39, 39, .08);
}

.slide-form-media-info {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.slide-form-media-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.slide-form-media-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    margin: 0;
    font-size: .8125rem;
}

.slide-form-media-meta dt {
    font-weight: 500;
    color: var(--ui-muted);
}

.slide-form-media-meta dd {
    margin: 0;
    color: var(--ui-ink-soft);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .slide-thumb.slide-form-thumb { flex-basis: 100%; }
}

/* Image-first form (D62): the Canva art is the slide — the "Arte do comunicado" section
   is the visual hero of the form (stronger elevation than the other cards). */
.art-hero-card {
    border-color: var(--brand-primary-tint-line);
    box-shadow: 0 2px 4px rgba(16, 30, 54, .05), 0 8px 24px rgba(11, 39, 39, .06);
}

.art-hero-card > .card-header {
    padding-bottom: .1rem !important;
}

.art-hero-subtitle {
    margin: .2rem 0 0;
    padding-left: 1.6rem; /* aligns under the heading text, past the icon */
    color: var(--ui-muted);
    font-size: .8125rem;
}

.art-guidelines {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    border: 1px solid var(--ui-line);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--ui-radius);
    background: var(--brand-primary-tint);
    color: var(--ui-ink-soft);
    font-size: .875rem;
}

.art-guidelines .bi {
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--brand-primary-strong);
}

.art-guidelines p { color: var(--ui-ink); }

/* Spec highlights — short, scannable, no walls of text */
.art-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}

.art-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid var(--brand-primary-tint-line);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--brand-primary-dark);
    font-size: .78125rem;
    font-weight: 600;
    white-space: nowrap;
}

.art-spec-chip .bi { font-size: .85rem; color: var(--brand-primary-strong); }

/* Empty state before any art is chosen — elegant placeholder, not just a bare file input */
.art-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 2.25rem 1.5rem;
    margin-bottom: 1rem;
    border: 2px dashed var(--ui-line-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-alt);
    text-align: center;
}

.art-empty-state .bi {
    margin-bottom: .35rem;
    font-size: 2.25rem;
    color: var(--brand-primary);
}

.art-empty-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.art-empty-text {
    color: var(--ui-muted);
    font-size: .8125rem;
}

.art-ratio {
    font-weight: 500;
}

.art-ratio.is-ok { color: #1E6B3A; }
.art-ratio.is-warn { color: #8A5A00; }

.slide-form-order {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    font-size: .875rem;
    color: var(--ui-ink-soft);
}

/* Save action — its own visually distinct block at the end of the right column,
   so it never reads as "just another field" and is never mistaken for hidden/cut off. */
.slide-form-save-card {
    padding: 1.25rem;
    border: 1px solid var(--brand-primary-tint-line);
    border-top: 3px solid var(--brand-primary);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 2px 4px rgba(16, 30, 54, .05), 0 8px 24px rgba(11, 39, 39, .06);
    text-align: center;
}

.slide-form-save-card .btn {
    font-weight: 700;
}

.slide-form-save-hint {
    margin-top: .6rem;
    color: var(--ui-muted);
    font-size: .8125rem;
}

.slide-form-save-hint .bi {
    margin-right: .3rem;
    color: var(--brand-primary-strong);
}

/* Playlist order (slide_order.php) — the art is a thumbnail, never the subject.
   Specialization of .slide-thumb: fixed 160×90 (16:9), contain, no inline styles (CSP). */
.order-col-position { width: 88px; }
.order-col-media { width: 184px; }
.order-col-status { width: 110px; }
.order-col-actions { width: 104px; }

.slide-order-thumb {
    width: 160px;
    height: 90px;
}

.order-position {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2rem;
    padding: 0 .4rem;
    border: 1px solid var(--brand-primary-tint-line);
    border-radius: 8px;
    background: var(--brand-primary-tint);
    color: var(--brand-primary-strong);
    font-family: var(--bs-font-monospace);
    font-size: .875rem;
    font-weight: 700;
}

.order-hint {
    margin: .2rem 0 0;
    color: var(--ui-muted);
    font-size: .8125rem;
}

.order-footer {
    display: flex;
    justify-content: flex-end;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--ui-line);
}

.order-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--ui-control-h);
    border-radius: 8px;
}

@media (max-width: 1199.98px) {
    .order-col-media { width: 152px; }
    .slide-order-thumb { width: 128px; height: 72px; }
}

@media (max-width: 1440px) {
    .slides-col-media { width: 184px; }
    .slide-thumb { width: 160px; }
    .slides-title { max-width: 240px; }
    .slides-col-window { width: 160px; }
    .slides-col-narrow { width: 72px; }
}

@media (max-width: 1199.98px) {
    .slides-col-media { width: 148px; }
    .slide-thumb { width: 128px; }
    .slides-title { max-width: 200px; }
}

/* ==========================================================================
   Slide form (slide_form.php) — pré-visualização em duas etapas (Preview block).
   Step A (form fields) and Step B (confirmation) live in the same <form>;
   only visibility toggles via JS ([hidden] attribute, no inline style/script).
   ========================================================================== */
.slide-preview-heading {
    margin-bottom: 1.25rem;
}

.slide-preview-stage-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--ui-radius);
    background: radial-gradient(ellipse at 50% 30%, #142424 0%, #070D0D 80%);
}

.slide-preview-stage {
    width: min(100%, 960px);
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.slide-preview-stage-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* exactly what the TV will show: never cropped, never distorted */
    background: #000000;
}

.slide-preview-admin-info {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.slide-preview-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
}

.slide-preview-meta dt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.slide-preview-meta dd {
    margin: .15rem 0 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.slide-preview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

.slide-preview-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

@media (max-width: 575.98px) {
    .slide-preview-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* ==========================================================================
   TV playlist simulation (slide_play.php) — administrative tool, not the
   Smart TV player. Reuses the .tvp-* chrome from slide_preview.php verbatim;
   only what is specific to autoplay/controls/idle-fade is defined here.
   ========================================================================== */
.playctl-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* image-first: exactly the art, never cropped or distorted */
    background: #000000;
}

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

.playctl-controls .tvp-btn {
    padding: 8px 12px;
}

/* Idle auto-hide: only the chrome (header/footer bars) fades — the image itself never
   moves or changes, so the art stays perfectly readable while "controls" are away. */
.playctl-idle .playctl-chrome {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.playctl-chrome {
    transition: opacity .2s ease;
}

@media (max-width: 640px) {
    .playctl-controls .tvp-btn span { display: none; }
}