/* ==========================================================================
   RTT Content Production System — "Studio" theme
   Loaded AFTER bootstrap.min.css so it overrides Bootstrap's defaults.

   Colour system
   -------------
   Red is the brand. To keep it meaningful it is used for exactly two things:
   the primary action on a screen, and the active item in the sidebar.

   Destructive actions are deliberately NOT filled red — if Delete looked like
   Save, people would click it by accident. Destructive is an outlined, darker
   red that reads as "careful", and it never competes with the primary button.

   Status colours stay semantic and distinct from the brand so a list of
   badges is still readable at a glance.
   ========================================================================== */

:root {
    /* Brand */
    --brand-red: #cc0000;
    --brand-red-hover: #a80000;
    --brand-red-active: #8f0000;
    --brand-red-soft: #fdeaea;
    --brand-red-border: #f5c2c2;

    /* Chrome */
    --studio-black: #0f0f0f;
    --studio-black-soft: #1c1c1c;
    --studio-border: #2b2b2b;
    --studio-muted: #aaaaaa;

    /* Surfaces */
    --surface-page: #f9f9f9;
    --surface-card: #ffffff;
    --surface-border: #e5e5e5;
    --ink: #0f0f0f;
    --ink-muted: #606060;

    /* Destructive — distinct from the brand red */
    --danger-ink: #8b1a1a;
    --danger-border: #d9a2a2;
    --danger-soft: #fbf0f0;

    /* Bootstrap bridge */
    --bs-primary: #cc0000;
    --bs-primary-rgb: 204, 0, 0;
    --bs-link-color: #cc0000;
    --bs-link-color-rgb: 204, 0, 0;
    --bs-link-hover-color: #a80000;
}

body {
    background-color: var(--surface-page);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Dropdown options — app-wide safety net
   --------------------------------------------------------------------------
   A native <option> inherits its colour from the <select> and, on Windows and
   Linux, the popup inherits the select's background too. Any select sitting on
   a dark surface therefore renders black-on-black options that only become
   readable when hovered. Pinning both values here fixes every dropdown in the
   app at once, including ones added later, instead of patching them one at a
   time. Declared before the component rules below so a component can still
   override it deliberately. */
select option,
select optgroup {
    background-color: #ffffff !important;
    color: #0f0f0f !important;
}

/* Highlighted rows in an open list and ticked rows in a multi-select. */
select option:hover,
select option:focus,
select option:active {
    background-color: var(--brand-red-soft) !important;
    color: #0f0f0f !important;
}

select[multiple] option:checked {
    background: var(--brand-red) linear-gradient(0deg, var(--brand-red), var(--brand-red)) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Sidebar — near-black studio chrome
   -------------------------------------------------------------------------- */

.app-sidebar {
    background-color: var(--studio-black) !important;
    border-right: 1px solid var(--studio-border) !important;
    color: var(--studio-muted) !important;
}

.sidebar-brand {
    border-bottom: 1px solid var(--studio-border) !important;
    color: #ffffff !important;
    letter-spacing: -0.01em;
}

/* The brand chip carries the red so the logo reads as the brand mark */
.sidebar-brand .brand-badge,
.sidebar-brand .badge {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
}

.sidebar-heading {
    color: #717171 !important;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    font-weight: 600;
}

.sidebar-nav a,
.app-sidebar .nav-link {
    color: var(--studio-muted) !important;
    border-radius: 8px;
    margin: 1px 8px;
    padding-left: 12px !important;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar-nav a:hover,
.app-sidebar .nav-link:hover {
    color: #ffffff !important;
    background-color: var(--studio-black-soft) !important;
}

/* Active item: red bar + tinted row, not a solid red block.
   A solid red row would shout louder than the page's own primary button. */
.sidebar-nav a.active,
.app-sidebar .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(204, 0, 0, 0.16) !important;
    box-shadow: inset 3px 0 0 0 var(--brand-red);
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.app-topbar {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--surface-border) !important;
}

/* --------------------------------------------------------------------------
   Primary action = brand red
   -------------------------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red-hover);
    --bs-btn-hover-border-color: var(--brand-red-hover);
    --bs-btn-active-bg: var(--brand-red-active);
    --bs-btn-active-border-color: var(--brand-red-active);
    --bs-btn-disabled-bg: #e08e8e;
    --bs-btn-disabled-border-color: #e08e8e;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    font-weight: 500;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-bg: var(--brand-red-active);
    --bs-btn-active-border-color: var(--brand-red-active);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.bg-primary {
    background-color: var(--brand-red) !important;
}

.text-primary {
    color: var(--brand-red) !important;
}

.border-primary {
    border-color: var(--brand-red) !important;
}

a {
    color: var(--brand-red);
}

a:hover {
    color: var(--brand-red-hover);
}

/* Sidebar links must not inherit the red link colour */
.app-sidebar a,
.app-sidebar a:hover {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Destructive actions — outlined, never filled red
   -------------------------------------------------------------------------- */

.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--danger-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-border-color: var(--danger-ink);
    --bs-btn-hover-color: var(--danger-ink);
    --bs-btn-active-bg: var(--danger-ink);
    --bs-btn-active-border-color: var(--danger-ink);
    --bs-btn-active-color: #fff;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Status colours — kept semantic and clearly apart from the brand
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.36em 0.62em;
}

.badge.bg-success  { background-color: #0f7b3f !important; }
.badge.bg-warning  { background-color: #b26a00 !important; color: #fff !important; }
.badge.bg-info     { background-color: #0b6f8c !important; color: #fff !important; }
.badge.bg-secondary{ background-color: #5f6368 !important; }

/* "Rejected"/error badges: dark maroon so they never read as a brand element */
.badge.bg-danger {
    background-color: #7a1212 !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Cards, tables, forms
   -------------------------------------------------------------------------- */

.card {
    border-color: var(--surface-border);
    border-radius: 12px;
}

.card-header {
    border-bottom-color: var(--surface-border);
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.table > thead {
    background-color: #fafafa;
}

.table > thead th {
    color: var(--ink-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom-color: var(--surface-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-red-border);
    box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.12);
}

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

.form-check-input:focus {
    border-color: var(--brand-red-border);
    box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.12);
}

/* Tabs */
.nav-tabs .nav-link {
    color: var(--ink-muted);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--ink);
    border-bottom-color: var(--surface-border);
}

.nav-tabs .nav-link.active {
    color: var(--brand-red);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--brand-red);
}

/* Pagination */
.page-link {
    color: var(--brand-red);
}

.page-item.active .page-link {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

/* Progress / spinners pick up the brand */
.progress-bar {
    background-color: var(--brand-red);
}

.spinner-border.text-primary {
    color: var(--brand-red) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--brand-red-soft);
    border-color: var(--brand-red-border);
    color: #7a0000;
}

/* --------------------------------------------------------------------------
   Bulk selection toolbar
   -------------------------------------------------------------------------- */

.bulk-bar {
    display: none;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--studio-black);
    color: #fff;
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.bulk-bar.is-visible {
    display: flex;
}

.bulk-bar .bulk-count {
    font-weight: 600;
    background: var(--brand-red);
    border-radius: 999px;
    padding: .15rem .7rem;
    font-size: .82rem;
    white-space: nowrap;
}

/* Form controls on the dark bar are LIGHT surfaces.
   A dropdown popup inherits the select's own background on Windows/Linux, so
   a dark select produces dark-on-dark, unreadable options. Keeping the
   controls white sidesteps that entirely and works on every platform. */
.bulk-bar .form-select,
.bulk-bar .form-control {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--ink);
    min-width: 190px;
}

.bulk-bar .form-select:focus,
.bulk-bar .form-control:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.bulk-bar [data-bulk-action] {
    max-width: 260px;
}

.bulk-bar select[multiple] {
    max-width: 320px;
}

.bulk-bar select[multiple] option {
    padding: 2px 6px;
}

/* Destructive action on the dark bar: light chip with dark-red text, so it
   stays legible without becoming the loudest thing on screen. */
.bulk-bar .btn-danger {
    --bs-btn-bg: #ffffff;
    --bs-btn-color: var(--danger-ink);
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-color: var(--danger-ink);
    --bs-btn-hover-border-color: var(--danger-soft);
    --bs-btn-active-bg: var(--danger-ink);
    --bs-btn-active-color: #fff;
}

.bulk-bar .btn-light {
    font-weight: 500;
}

.bulk-bar .bulk-clear {
    color: var(--studio-muted);
    text-decoration: none;
    font-size: .85rem;
    margin-left: auto;
}

.bulk-bar .bulk-clear:hover {
    color: #fff;
}

tr.is-selected > td {
    background-color: var(--brand-red-soft) !important;
}

@media (max-width: 575.98px) {
    .bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-bar .bulk-clear {
        margin-left: 0;
    }
}

/* Assignment chips shown in list rows */
.assign-chip {
    display: inline-block;
    font-size: .72rem;
    font-weight: 500;
    padding: .14rem .5rem;
    border-radius: 999px;
    background: #f1f1f1;
    color: var(--ink-muted);
    margin: 1px 2px 1px 0;
    white-space: nowrap;
}

.assign-chip.is-team   { background: #e8f0fe; color: #12457e; }
.assign-chip.is-person { background: #e9f6ec; color: #11582f; }
.assign-chip.is-none   { background: var(--danger-soft); color: var(--danger-ink); }

/* --------------------------------------------------------------------------
   "Viewing as user" banner
   --------------------------------------------------------------------------
   Deliberately loud and impossible to lose: an admin who forgets they are
   impersonating will misread everything on screen, so this sits above the
   topbar, sticks to the top, and always carries the way back. */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: repeating-linear-gradient(
        45deg,
        var(--danger-ink), var(--danger-ink) 14px,
        #7a1212 14px, #7a1212 28px
    );
    color: #fff;
    padding: .55rem 1.25rem;
    font-size: .85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.impersonation-banner strong { color: #fff; }

/* ---------------------------------------------------------------------------
   Maintenance banner

   Deliberately amber rather than the red used for "you are viewing as someone
   else". Both are states an admin needs to notice and leave, but they are
   different states, and two identical red bars would teach people to stop
   reading either.
   --------------------------------------------------------------------------- */
.maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 1099;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: repeating-linear-gradient(
        45deg,
        #8a5a00, #8a5a00 14px,
        #6b4500 14px, #6b4500 28px
    );
    color: #fff;
    padding: .55rem 1.25rem;
    font-size: .85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.maintenance-banner strong { color: #fff; }