/*
 * Pixla Studio — visual refinement layer
 * Design-only overrides. Controller structure, state and interactions stay untouched.
 */

body.controller-v2 {
    --v2-bg: #05080e;
    --v2-panel: #0b111c;
    --v2-panel-2: #080d15;
    --v2-panel-3: #101927;
    --v2-line: rgba(161, 185, 216, 0.14);
    --v2-line-strong: rgba(161, 185, 216, 0.24);
    --v2-text: #f4f7fb;
    --v2-muted: #8996a9;
    --v2-green: #4ee0a1;
    --v2-yellow: #ffb454;
    --v2-blue: #57b8ff;
    --v2-red: #ff626d;
    background:
        radial-gradient(circle at 18% 0%, rgba(43, 119, 255, 0.10), transparent 30%),
        radial-gradient(circle at 95% 88%, rgba(255, 138, 31, 0.05), transparent 25%),
        #05080e !important;
    color: var(--v2-text);
}

body.controller-v2 .container {
    gap: 8px;
    padding: 8px 12px 12px;
}

body.controller-v2 #broadcast-status-bar {
    position: relative;
    border-color: var(--v2-line);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(11, 17, 28, 0.98), rgba(5, 8, 14, 0.98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

body.controller-v2 #broadcast-status-bar::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, #ff8a1f, #57b8ff 34%, rgba(87, 184, 255, 0));
    opacity: 0.65;
    pointer-events: none;
}

body.controller-v2 .status-brand {
    position: relative;
    gap: 12px;
    padding: 0 16px;
    font-size: 23px;
    letter-spacing: -0.025em;
}

body.controller-v2 .status-brand img {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
    filter: none;
    transform: perspective(180px) rotateX(2deg) rotateY(-3deg);
}

body.controller-v2 .status-brand span {
    background: none;
    color: #f4f7fb;
    -webkit-text-fill-color: currentColor;
}

body.controller-v2 .status-brand::before {
    content: none;
    display: none;
}

body.controller-v2 .status-brand::after {
    content: none;
    display: none;
}

body.controller-v2 #templateContainer,
body.controller-v2 #right-preview-stack {
    gap: 8px;
}

body.controller-v2 #contentRail,
body.controller-v2 .template-nav,
body.controller-v2 #rundown-titlebar,
body.controller-v2 .playlist-header,
body.controller-v2 #playlist-toolbar,
body.controller-v2 #playlist-container,
body.controller-v2 #nav-controls,
body.controller-v2 #render-preview,
body.controller-v2 #render2-preview,
body.controller-v2 #info-notes-panel,
body.controller-v2 #live-input-preview,
body.controller-v2 #broadcast-timeline {
    border-color: var(--v2-line);
    border-radius: 3px;
    background: rgba(11, 17, 28, 0.96);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}

body.controller-v2 #contentRail {
    background: linear-gradient(180deg, #080d15, #05080e);
}

body.controller-v2 .content-rail-btn {
    border-radius: 3px;
    color: #8290a4;
}

body.controller-v2 .content-rail-btn:hover {
    background: rgba(87, 184, 255, 0.08);
    color: #d8eeff;
}

body.controller-v2 .content-rail-btn.is-active,
body.controller-v2 .content-rail-btn.active,
body.controller-v2 .content-rail-btn[aria-pressed='true'] {
    background: rgba(87, 184, 255, 0.13);
    color: #57b8ff;
    box-shadow: inset 2px 0 #57b8ff;
}

body.controller-v2 .template-nav {
    background: linear-gradient(180deg, rgba(16, 25, 39, 0.98), rgba(8, 13, 21, 0.98)) !important;
}

body.controller-v2 .template-nav h2,
body.controller-v2 .panel-heading,
body.controller-v2 .timeline-topline,
body.controller-v2 .preview-header,
body.controller-v2 .playlist-header {
    color: #a9b6c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.controller-v2 .template-bucket-title,
body.controller-v2 .template-category-title {
    color: #c9d4e2;
}

body.controller-v2 .template-btn {
    border-radius: 3px;
    border-color: transparent;
    background: transparent;
    color: #bdc7d4;
}

body.controller-v2 .template-btn:hover {
    border-color: rgba(87, 184, 255, 0.18);
    background: rgba(87, 184, 255, 0.065);
    color: #f4f7fb;
    box-shadow: inset 2px 0 #57b8ff;
}

body.controller-v2 .template-count,
body.controller-v2 .bucket-template-count,
body.controller-v2 .template-badge {
    border-radius: 2px;
    background: rgba(161, 185, 216, 0.10);
    color: #8996a9;
}

body.controller-v2 #rundown-titlebar {
    border-bottom-color: var(--v2-line);
    background: linear-gradient(180deg, rgba(11, 17, 28, 0.99), rgba(7, 11, 18, 0.99));
}

body.controller-v2 #rundownNameInput {
    color: #f4f7fb;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.015em;
}

body.controller-v2 #rundownNameInput:hover,
body.controller-v2 #rundownNameInput:focus {
    border-color: rgba(87, 184, 255, 0.35);
    background: rgba(87, 184, 255, 0.05);
}

body.controller-v2 .rundown-schedule-summary > *,
body.controller-v2 .schedule-summary-pill {
    border-color: rgba(87, 184, 255, 0.16);
    border-radius: 3px;
    background: rgba(87, 184, 255, 0.06);
    color: #c5d5e6;
}

body.controller-v2 #rundownActions button {
    border-color: transparent;
    border-radius: 3px;
    background: transparent;
    color: #8d9aad;
    box-shadow: none;
}

body.controller-v2 #rundownActions button:hover {
    border-color: rgba(87, 184, 255, 0.20);
    background: rgba(87, 184, 255, 0.08);
    color: #e3f2ff;
}

/* Compact producer menu: preserve the click area while visually reducing the icons. */
html body.controller-v2 #rundownActions {
    gap: 5px !important;
}

html body.controller-v2 #rundownActions button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: #8e9bad !important;
    box-shadow: none !important;
    flex-direction: column !important;
    gap: 1px !important;
}

html body.controller-v2 #rundownActions button > svg,
html body.controller-v2 #rundownActions button > svg[data-heroicon] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
    opacity: 0.82;
}

html body.controller-v2 #rundownActions button svg [stroke] {
    stroke-width: 1.25 !important;
}

html body.controller-v2 #rundownActions button .nav-label {
    display: block !important;
    width: 42px !important;
    max-width: 42px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 7.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    opacity: 0.82 !important;
    text-align: center;
    text-overflow: ellipsis !important;
    text-transform: uppercase;
    white-space: nowrap !important;
}

html body.controller-v2 #rundownActions button:hover,
html body.controller-v2 #rundownActions button:focus-visible {
    border-color: rgba(87, 184, 255, 0.16) !important;
    background: rgba(87, 184, 255, 0.07) !important;
    color: #d9edff !important;
    transform: none !important;
}

html body.controller-v2 #rundownActions #navClearBtn {
    color: #d78b91 !important;
}

html body.controller-v2 #rundownActions #navTricasterArmBtn {
    color: #cba765 !important;
}

html body.controller-v2 #rundownActions #navGoLiveBtn {
    color: #76c99d !important;
}

html body.controller-v2 #rundownActions button:hover > svg,
html body.controller-v2 #rundownActions button:focus-visible > svg {
    opacity: 1;
}

html body.controller-v2 #rundownActions button:hover .nav-label,
html body.controller-v2 #rundownActions button:focus-visible .nav-label {
    opacity: 1 !important;
}

body.controller-v2 .playlist-header {
    border-top: 0;
    border-bottom-color: var(--v2-line);
    background: #080d15;
    color: #738196;
}

body.controller-v2 #playlist-toolbar {
    border-top: 0;
    border-bottom-color: var(--v2-line) !important;
    background: rgba(8, 13, 21, 0.94) !important;
}

body.controller-v2 #playlist-toolbar button {
    border-color: var(--v2-line-strong) !important;
    border-radius: 3px !important;
    background: rgba(161, 185, 216, 0.045) !important;
    color: #97a5b8 !important;
}

body.controller-v2 #playlist-toolbar button:hover {
    border-color: rgba(87, 184, 255, 0.32) !important;
    background: rgba(87, 184, 255, 0.08) !important;
    color: #d8eeff !important;
}

body.controller-v2 #playlist-container {
    background:
        linear-gradient(rgba(87, 184, 255, 0.018) 1px, transparent 1px),
        #070b12;
    background-size: 100% 44px;
}

body.controller-v2 .playlist-item {
    border: 1px solid rgba(161, 185, 216, 0.14);
    border-left: 2px solid rgba(87, 184, 255, 0.46);
    border-radius: 3px;
    background: #101927;
    box-shadow: none;
}

body.controller-v2 .playlist-item:hover {
    border-color: rgba(87, 184, 255, 0.32);
    border-left-color: #57b8ff;
    background: #132033;
}

body.controller-v2 .playlist-item.keyboard-selected,
body.controller-v2 .playlist-item.streamdeck-selected {
    border-color: rgba(87, 184, 255, 0.62);
    background: rgba(87, 184, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(87, 184, 255, 0.14);
}

body.controller-v2 .playlist-item.playing {
    border-color: rgba(78, 224, 161, 0.58);
    border-left-color: #4ee0a1;
    background: linear-gradient(90deg, rgba(78, 224, 161, 0.13), #101927 28%);
}

body.controller-v2 .playlist-item input[type='text'],
body.controller-v2 .playlist-item input[type='number']:not(.info-prompter-speed-input),
body.controller-v2 .playlist-item textarea,
body.controller-v2 .playlist-item select {
    border-color: rgba(161, 185, 216, 0.17);
    border-radius: 3px;
    background: rgba(5, 8, 14, 0.44);
    color: #e8edf4;
}

body.controller-v2 .playlist-item input:focus,
body.controller-v2 .playlist-item textarea:focus,
body.controller-v2 .playlist-item select:focus {
    border-color: #57b8ff;
    box-shadow: 0 0 0 2px rgba(87, 184, 255, 0.12);
}

body.controller-v2 .template-label {
    border-radius: 2px;
    font-weight: 750;
}

body.controller-v2 .toggle-switch,
body.controller-v2 .render-target-btn,
body.controller-v2 .settings-icon,
body.controller-v2 .delete-row-btn {
    border-radius: 3px;
}

/* Matching squircle geometry for both toggle track and thumb. */
html body.controller-v2 .toggle-switch {
    border-radius: 8px !important;
}

html body.controller-v2 .toggle-switch .toggle-knob,
html body.controller-v2 .toggle-switch:not(:has(.toggle-knob))::after {
    border-radius: 6px !important;
}

html body.controller-v2 .toggle-switch.toggle-input .toggle-slider {
    border-radius: 7px !important;
}

html body.controller-v2 .toggle-switch.toggle-input .toggle-slider::before {
    border-radius: 5px !important;
}

body.controller-v2 #nav-controls {
    border-color: var(--v2-line);
    background: #0b111c;
}

body.controller-v2 #navPlayBtn {
    border-color: rgba(87, 184, 255, 0.46);
    border-radius: 3px;
    background: rgba(87, 184, 255, 0.12);
    color: #9ed7ff;
}

body.controller-v2 #navPlayBtn:hover {
    border-color: #57b8ff;
    background: #57b8ff;
    color: #03101b;
}

body.controller-v2 #clearAllBtn,
body.controller-v2 .nav-clear-channels-btn {
    border-color: rgba(255, 98, 109, 0.34);
    border-radius: 3px;
    background: rgba(255, 98, 109, 0.07);
    color: #ff9aa2;
}

body.controller-v2 #nav-arrows button {
    border-color: var(--v2-line);
    border-radius: 3px;
    background: rgba(161, 185, 216, 0.035);
    color: #aab5c4;
}

body.controller-v2 #render-preview,
body.controller-v2 #render2-preview,
body.controller-v2 #live-input-preview {
    background: #020406;
}

body.controller-v2 #render-preview .preview-header,
body.controller-v2 #render2-preview .preview-header,
body.controller-v2 #live-input-preview .preview-header,
body.controller-v2 #info-notes-panel .preview-header {
    min-height: 34px;
    border-bottom: 1px solid var(--v2-line);
    background: #101927;
    color: #b9c6d6;
}

body.controller-v2 #render-preview .preview-header::before,
body.controller-v2 #render2-preview .preview-header::before {
    content: '';
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
    background: #4ee0a1;
    box-shadow: 0 0 8px #4ee0a1;
}

body.controller-v2 #render-preview .preview-header::before,
body.controller-v2 #render2-preview .preview-header::before {
    content: none !important;
    display: none !important;
}

/* The legacy navigation shell is empty after its actions move into the rundown header. */
html body.controller-v2 .left-nav {
    display: none !important;
}

body.controller-v2 #infoNotesTextarea {
    border-color: var(--v2-line);
    border-radius: 3px;
    background: #080d15;
    color: #d8e0ea;
}

body.controller-v2 #broadcast-timeline {
    border-top-color: rgba(87, 184, 255, 0.22);
    background: linear-gradient(180deg, #0b111c, #070b12);
}

body.controller-v2 #broadcast-timeline.is-collapsed {
    color: #9ba8b9;
}

body.controller-v2 ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.controller-v2 ::-webkit-scrollbar-track {
    background: transparent;
}

body.controller-v2 ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 8px;
    background: rgba(161, 185, 216, 0.24);
    background-clip: padding-box;
}

body.controller-v2 ::-webkit-scrollbar-thumb:hover {
    background: rgba(87, 184, 255, 0.42);
    background-clip: padding-box;
}

body.controller-v2 button:focus-visible,
body.controller-v2 input:focus-visible,
body.controller-v2 textarea:focus-visible,
body.controller-v2 select:focus-visible,
body.controller-v2 [tabindex]:focus-visible {
    outline: 2px solid #57b8ff !important;
    outline-offset: 2px;
}

body.controller-v2.light-mode {
    --v2-line: rgba(15, 23, 42, 0.12);
    --v2-line-strong: rgba(15, 23, 42, 0.20);
}

/*
 * Light mode hierarchy
 * 1. Canvas: #dbe3ec
 * 2. Primary panels: #f3f6f9
 * 3. Secondary surfaces: #e7edf3
 * 4. Selected / interactive: blue tint
 */
html body.controller-v2.light-mode {
    --background: #dbe3ec;
    --container-bg: #f3f6f9;
    --inner-bg: #e7edf3;
    --foreground: #0f172a;
    --muted: #64748b;
    --border: rgba(51, 65, 85, 0.15);
    --v2-bg: #dbe3ec;
    --v2-panel: #f3f6f9;
    --v2-panel-2: #e7edf3;
    --v2-panel-3: #dde5ee;
    --v2-line: rgba(51, 65, 85, 0.14);
    --v2-line-strong: rgba(51, 65, 85, 0.24);
    --v2-text: #0f172a;
    --v2-muted: #64748b;
    background:
        radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.18) 0%, rgba(59, 130, 246, 0.09) 22%, transparent 48%),
        radial-gradient(circle at 88% 88%, rgba(87, 184, 255, 0.10) 0%, transparent 34%),
        #dbe3ec !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}

html body.controller-v2.light-mode #broadcast-status-bar {
    border: 1px solid #cbd5e1 !important;
    background: #f6f8fb !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
}

html body.controller-v2.light-mode .status-brand,
html body.controller-v2.light-mode .status-brand span {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html body.controller-v2.light-mode .status-brand::after {
    color: #2563eb !important;
}

html body.controller-v2.light-mode .status-brand::before {
    content: none;
    display: none;
}

html body.controller-v2.light-mode .status-brand img {
    border: 0;
    background: transparent;
    box-shadow: 0 5px 10px rgba(51, 65, 85, 0.16);
}

html body.controller-v2.light-mode #contentRail,
html body.controller-v2.light-mode .content-rail {
    border: 1px solid #cbd5e1 !important;
    background: #eaf0f5 !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode .content-rail-btn,
html body.controller-v2.light-mode #contentRail #navSettingsBtn {
    border-color: transparent !important;
    background: transparent !important;
    color: #64748b !important;
}

html body.controller-v2.light-mode .content-rail-btn:hover,
html body.controller-v2.light-mode .content-rail-btn[aria-pressed='true'],
html body.controller-v2.light-mode #contentRail #navSettingsBtn:hover {
    border-color: #bfdbfe !important;
    background: #eaf4ff !important;
    color: #1d4ed8 !important;
}

html body.controller-v2.light-mode .template-nav {
    border: 1px solid #cbd5e1 !important;
    background: #f3f6f9 !important;
    color: #334155 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important;
}

html body.controller-v2.light-mode .template-nav h2,
html body.controller-v2.light-mode .template-bucket-title,
html body.controller-v2.light-mode .template-category-title {
    color: #0f172a !important;
}

html body.controller-v2.light-mode .asset-folder-row,
html body.controller-v2.light-mode .template-btn {
    border-color: transparent !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode .asset-folder-row:hover,
html body.controller-v2.light-mode .template-btn:hover {
    border-color: #dbeafe !important;
    background: #f1f7ff !important;
    color: #0f172a !important;
    box-shadow: inset 2px 0 #60a5fa !important;
}

html body.controller-v2.light-mode .asset-folder-row.active {
    border-color: #bfdbfe !important;
    background: #eaf4ff !important;
    color: #1e3a8a !important;
    box-shadow: inset 2px 0 #2563eb !important;
}

html body.controller-v2.light-mode .asset-folder-row strong,
html body.controller-v2.light-mode .template-btn strong {
    color: inherit !important;
}

html body.controller-v2.light-mode .asset-folder-count,
html body.controller-v2.light-mode .template-bucket-count,
html body.controller-v2.light-mode .bucket-count {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

html body.controller-v2.light-mode #rundown-titlebar {
    border: 1px solid #cbd5e1 !important;
    background: #f3f6f9 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
}

html body.controller-v2.light-mode #rundownNameInput {
    border-color: transparent !important;
    background: transparent !important;
    color: #0f172a !important;
}

html body.controller-v2.light-mode #rundownNameInput:hover,
html body.controller-v2.light-mode #rundownNameInput:focus {
    border-color: #bfdbfe !important;
    background: #f8fbff !important;
}

html body.controller-v2.light-mode #rundownScheduleSummary .schedule-pill,
html body.controller-v2.light-mode .schedule-summary-pill {
    border: 1px solid #d6dee8 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode #rundownScheduleSummary .schedule-label {
    color: #64748b !important;
}

html body.controller-v2.light-mode #rundownScheduleSummary .schedule-value {
    color: #0f172a !important;
}

html body.controller-v2.light-mode #rundownActions button {
    border-color: transparent !important;
    background: transparent !important;
    color: #64748b !important;
}

html body.controller-v2.light-mode #rundownActions button:hover,
html body.controller-v2.light-mode #rundownActions button:focus-visible {
    border-color: #bfdbfe !important;
    background: #eaf4ff !important;
    color: #1d4ed8 !important;
}

html body.controller-v2.light-mode #rundownActions #navClearBtn {
    color: #b4535a !important;
}

html body.controller-v2.light-mode #rundownActions #navTricasterArmBtn {
    color: #9a6a16 !important;
}

html body.controller-v2.light-mode #rundownActions #navGoLiveBtn {
    color: #16834b !important;
}

html body.controller-v2.light-mode .playlist-header {
    border: 1px solid #d5dde7 !important;
    border-top: 0 !important;
    background: #dde5ee !important;
    color: #64748b !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode #playlist-toolbar {
    border-color: #d5dde7 !important;
    background: #e9eef4 !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode #playlist-toolbar button {
    border-color: #cbd5e1 !important;
    background: #f6f8fb !important;
    color: #475569 !important;
}

html body.controller-v2.light-mode #playlist-container {
    border: 1px solid #cbd5e1 !important;
    background:
        linear-gradient(rgba(100, 116, 139, 0.045) 1px, transparent 1px),
        #e2e8f0 !important;
    background-size: 100% 44px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body.controller-v2.light-mode .playlist-item {
    border: 1px solid #d6dee8 !important;
    border-left: 2px solid #60a5fa !important;
    background: #f7f9fb !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

html body.controller-v2.light-mode .playlist-item:hover {
    border-color: #93c5fd !important;
    border-left-color: #2563eb !important;
    background: #f8fbff !important;
}

html body.controller-v2.light-mode .playlist-item.keyboard-selected,
html body.controller-v2.light-mode .playlist-item.streamdeck-selected {
    border-color: #60a5fa !important;
    border-left-color: #2563eb !important;
    background: #eaf4ff !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

html body.controller-v2.light-mode .playlist-item.playing {
    border-color: #6ee7b7 !important;
    border-left-color: #059669 !important;
    background: linear-gradient(90deg, #dff7eb, #f7f9fb 34%) !important;
}

html body.controller-v2.light-mode .playlist-bucket {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

html body.controller-v2.light-mode .playlist-bucket .bucket-header {
    border-color: #93c5fd !important;
    background: #dbeafe !important;
    color: #1e3a8a !important;
}

html body.controller-v2.light-mode .playlist-bucket .bucket-items {
    background: #e2ebf5 !important;
}

html body.controller-v2.light-mode .playlist-bucket .playlist-item {
    background: #f7f9fb !important;
}

html body.controller-v2.light-mode .playlist-item input[type='text'],
html body.controller-v2.light-mode .playlist-item input[type='number']:not(.info-prompter-speed-input),
html body.controller-v2.light-mode .playlist-item textarea,
html body.controller-v2.light-mode .playlist-item select {
    border-color: #cbd5e1 !important;
    background: #e9eef4 !important;
    color: #0f172a !important;
}

html body.controller-v2.light-mode .playlist-item input:focus,
html body.controller-v2.light-mode .playlist-item textarea:focus,
html body.controller-v2.light-mode .playlist-item select:focus {
    border-color: #3b82f6 !important;
    background: #f8fafc !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12) !important;
}

html body.controller-v2.light-mode #nav-controls,
html body.controller-v2.light-mode #info-notes-panel {
    border: 1px solid #cbd5e1 !important;
    background: #f3f6f9 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045) !important;
}

html body.controller-v2.light-mode #nav-controls button {
    border-color: #d6dee8 !important;
    background: #e7edf3 !important;
    color: #475569 !important;
}

html body.controller-v2.light-mode #navPlayBtn {
    border-color: #93c5fd !important;
    background: #eaf4ff !important;
    color: #1d4ed8 !important;
}

html body.controller-v2.light-mode #clearAllBtn,
html body.controller-v2.light-mode .nav-clear-channels-btn {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

html body.controller-v2.light-mode #render-preview,
html body.controller-v2.light-mode #render2-preview,
html body.controller-v2.light-mode #live-input-preview {
    border: 1px solid #cbd5e1 !important;
    background: #05070a !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

html body.controller-v2.light-mode #render-preview .preview-header,
html body.controller-v2.light-mode #render2-preview .preview-header,
html body.controller-v2.light-mode #live-input-preview .preview-header,
html body.controller-v2.light-mode #info-notes-panel .preview-header {
    border-bottom: 1px solid #d6dee8 !important;
    background: #e7edf3 !important;
    color: #334155 !important;
}

html body.controller-v2.light-mode #infoNotesTextarea {
    border-color: #cbd5e1 !important;
    background: #e5ebf2 !important;
    color: #1e293b !important;
}

html body.controller-v2.light-mode #broadcast-timeline {
    border: 1px solid #cbd5e1 !important;
    border-top-color: #93c5fd !important;
    background: #f3f6f9 !important;
    color: #475569 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
}

/* Grid mode needs stronger card separation than the row-based light theme. */
html body.controller-v2.light-mode.grid-mode #playlist-container {
    background: #e2e8f0 !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket > .bucket-header {
    border: 1px solid #b8c5d3 !important;
    background: #f3f6f9 !important;
    color: #1e293b !important;
    box-shadow: 0 3px 10px rgba(51, 65, 85, 0.09) !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket > .bucket-header {
    border-color: #9eb8d3 !important;
    background: #dce8f4 !important;
    color: #1e3a8a !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item:hover,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket > .bucket-header:hover {
    border-color: #60a5fa !important;
    background: #eaf4ff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12) !important;
}

html body.controller-v2.light-mode.grid-mode .playlist-item .field-input:first-of-type,
html body.controller-v2.light-mode.grid-mode .playlist-item .info-name-input,
html body.controller-v2.light-mode.grid-mode .playlist-item .tricaster-name-input,
html body.controller-v2.light-mode.grid-mode .bucket-header .bucket-name-input {
    border: 0 !important;
    background: transparent !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode.grid-mode .bucket-header .bucket-name-input {
    color: #1e3a8a !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container .playlist-item .field-input:first-of-type,
html body.controller-v2.light-mode.grid-mode #playlist-container .playlist-item .info-name-input,
html body.controller-v2.light-mode.grid-mode #playlist-container .bucket-header .bucket-name-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item::before {
    background: #dde5ee !important;
    color: #526277 !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item.grid-name-only-row::after,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item:not(:has(.field-input))::after {
    color: #1e293b !important;
}

html body.controller-v2.light-mode.grid-mode .grid-render-group::before,
html body.controller-v2.light-mode.grid-mode .grid-render-group::after {
    background: #b9c5d3 !important;
}

html body.controller-v2.light-mode.grid-mode .grid-render-group span {
    color: #64748b !important;
}

html body.controller-v2.light-mode.grid-mode .grid-render-group[data-group='video'] span {
    color: #475569 !important;
}

html body.controller-v2.light-mode.grid-mode .grid-render-group.grid-render-group-empty {
    border-color: #c1ccd8 !important;
    background: rgba(248, 250, 252, 0.34) !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item.playing,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket:has(.toggle-switch.out) > .bucket-header {
    border-color: #34d399 !important;
    background: #d1fae5 !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item.playing-countdown,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket > .bucket-header.playing-countdown {
    border-color: #fb7185 !important;
    background: #fda4af !important;
}

html body.controller-v2.light-mode .toggle-switch {
    border-color: #b8c3d1 !important;
    background: #cbd5e1 !important;
}

html body.controller-v2.light-mode .toggle-switch.out {
    border-color: #2563eb !important;
    background: #3b82f6 !important;
}

html body.controller-v2.light-mode .toggle-switch .toggle-knob,
html body.controller-v2.light-mode .toggle-switch:not(:has(.toggle-knob))::after,
html body.controller-v2.light-mode .toggle-switch.toggle-input .toggle-slider::before {
    background: #f3f6f9 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20) !important;
}

html body.controller-v2.light-mode .settings-container,
html body.controller-v2.light-mode .message-container,
html body.controller-v2.light-mode .insertlist-container {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
}

html body.controller-v2.light-mode .settings-header,
html body.controller-v2.light-mode .settings-tabs,
html body.controller-v2.light-mode .message-header,
html body.controller-v2.light-mode .insertlist-header,
html body.controller-v2.light-mode .insertlist-footer {
    border-color: #d6dee8 !important;
    background: #e7edf3 !important;
}

html body.controller-v2.light-mode .settings-content,
html body.controller-v2.light-mode .message-main {
    background: #edf2f7 !important;
}

html body.controller-v2.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.30) !important;
    background-clip: padding-box !important;
}

html body.controller-v2.light-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.42) !important;
    background-clip: padding-box !important;
}

/* Stronger light-mode framing, matching the dark-mode panel structure. */
html body.controller-v2.light-mode #broadcast-status-bar,
html body.controller-v2.light-mode #contentRail,
html body.controller-v2.light-mode .content-rail,
html body.controller-v2.light-mode .template-nav,
html body.controller-v2.light-mode #rundown-titlebar,
html body.controller-v2.light-mode #playlist-container,
html body.controller-v2.light-mode #nav-controls,
html body.controller-v2.light-mode #info-notes-panel,
html body.controller-v2.light-mode #render-preview,
html body.controller-v2.light-mode #render2-preview,
html body.controller-v2.light-mode #live-input-preview,
html body.controller-v2.light-mode #broadcast-timeline {
    border: 1px solid #aebccc !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 7px 20px rgba(51, 65, 85, 0.065) !important;
}

html body.controller-v2.light-mode #broadcast-status-bar,
html body.controller-v2.light-mode #broadcast-timeline {
    border-top-color: #8fb3dc !important;
}

html body.controller-v2.light-mode .playlist-header,
html body.controller-v2.light-mode #playlist-toolbar,
html body.controller-v2.light-mode #render-preview .preview-header,
html body.controller-v2.light-mode #render2-preview .preview-header,
html body.controller-v2.light-mode #live-input-preview .preview-header,
html body.controller-v2.light-mode #info-notes-panel .preview-header {
    border-color: #b8c5d3 !important;
}

html body.controller-v2.light-mode .playlist-item {
    border-color: #c0cbd7 !important;
    border-left-color: #60a5fa !important;
}

html body.controller-v2.light-mode .asset-folder-row,
html body.controller-v2.light-mode .template-bucket-section {
    border-bottom-color: #c8d2dd !important;
}

html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-item,
html body.controller-v2.light-mode.grid-mode #playlist-container > .playlist-bucket > .bucket-header {
    border-color: #aebdcd !important;
}

@media (max-width: 1400px) {
    body.controller-v2 .status-brand::after {
        display: none;
    }

    body.controller-v2 .status-brand {
        font-size: 20px;
    }
}

@media (min-width: 951px) and (max-width: 1600px) {
    body.controller-v2 {
        --browser-panel-width: 240px;
        --template-container-width: 240px;
        --render-panel-width: 300px;
        --rundown-row-grid: 52px 22px 120px 42px 44px minmax(96px, 1fr) 44px 70px 80px 36px 60px;
        --rundown-row-gap: 5px;
    }

    body.controller-v2 .container {
        grid-template-columns: minmax(220px, var(--browser-panel-width)) minmax(720px, 1fr) minmax(280px, var(--render-panel-width));
    }

    body.controller-v2 #rundownNameInput {
        font-size: 14px;
    }

    body.controller-v2 #rundownActions button {
        min-width: 32px;
        padding-inline: 6px;
    }

    body.controller-v2 .playlist-header,
    body.controller-v2 .playlist-item {
        column-gap: var(--rundown-row-gap);
    }
}