/* Dashboard dark theme — scoped to html[data-theme="dark"] (see theme-manager.js).
   Palette from GhostoverDarkMode (Figma CreativesList 58:66): chrome #212830, sidebar #262c36,
   active nav #2b3745, cards/rows #181f2b / #212830, accent #5799f0 / CTA #478be6. */

.dashboard-theme-toggle {
    padding: 4px 8px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto !important;
    height: auto;
    border-radius: 4px;
}

/* Header logos: light vs dark assets (header.php) */
.dashboard-logo-dark {
    display: none !important;
}

html[data-theme="dark"] .dashboard-logo-light {
    display: none !important;
}

html[data-theme="dark"] .dashboard-logo-dark {
    display: inline !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --go-sticky-filter-bg: #181f2b;
    --go-creatives-row-child-bg: #181f2b;
    --go-dark-bg: #212830;
    --go-dark-header: #212830;
    --go-dark-sidebar: #262c36;
    --go-dark-sidebar-active: #2b3745;
    --go-dark-surface: #181f2b;
    --go-dark-surface-raised: #212830;
    --go-dark-surface-hover: #2b3745;
    --go-dark-media-placeholder: #354042;
    --go-dark-border: #43505f;
    --go-dark-border-subtle: #3a4654;
    --go-dark-text: #d1d7e0;
    --go-dark-text-strong: #f5f5f5;
    --go-dark-text-muted: #9198a1;
    --go-dark-accent: #5799f0;
    --go-dark-accent-bright: #6aa8f5;
    --go-dark-accent-primary: #478be6;
    --go-dark-hamburger-menu-bars-color: #999;
    /* Materialize / list dropdowns: option hover & keyboard highlight */
    --go-dark-dropdown-option-hover-bg: rgba(87, 153, 240, 0.28);
    --go-dark-row-stripe: rgba(255, 255, 255, 0.04);
    --go-dark-row-hover: rgba(255, 255, 255, 0.07);
    --go-color-progress-background: #2b3745;
    /* Figma: yes #17ad5c; warnings / no / mov #f39c13 */
    --go-dark-status-yes: #17ad5c;
    --go-dark-status-no: #f39c13;
    --go-dark-status-error: #f34713;
}

html[data-theme="dark"] body.skin-black-light {
    background-color: var(--go-dark-bg);
    color: var(--go-dark-text);
}

/* ——— AdminLTE shell ——— */
html[data-theme="dark"] .content-wrapper {
    background-color: var(--go-dark-bg) !important;
    color: var(--go-dark-text);
}

/* AdminLTE: .content is nested inside .content-wrapper > section, not a direct child.
   Use `background` shorthand — AdminLTE often sets `background: #fff` which overrides background-color alone. */
html[data-theme="dark"] .content-wrapper .content,
html[data-theme="dark"] .content-wrapper #content.content,
html[data-theme="dark"] .content-wrapper section:not(.sidebar),
html[data-theme="dark"] section.content,
html[data-theme="dark"] #content.content {
    background: transparent !important;
    color: var(--go-dark-text);
}

html[data-theme="dark"] .body-content,
html[data-theme="dark"] .site-index {
    background-color: transparent;
    color: var(--go-dark-text);
}

html[data-theme="dark"] .main-footer {
    background-color: var(--go-dark-surface) !important;
    border-top-color: var(--go-dark-border) !important;
    color: var(--go-dark-text-muted);
}

html[data-theme="dark"] .main-footer a {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .main-footer a:hover {
    color: var(--go-dark-accent-bright);
}

html[data-theme="dark"] .footer-company-text {
    cursor: default;
    color: var(--go-dark-accent-primary);
}

/* html[data-theme="dark"] .footer-company-text:hover {
    color: var(--go-dark-accent-bright);
} */

html[data-theme="dark"] .main-header {
    background-color: var(--go-dark-header) !important;
    border-bottom: 1px solid var(--go-dark-border);
}

html[data-theme="dark"] .main-header .navbar {
    background-color: var(--go-dark-header) !important;
}

html[data-theme="dark"] .main-sidebar {
    background-color: var(--go-dark-sidebar) !important;
    border-right: 1px solid var(--go-dark-border);
}

html[data-theme="dark"] .sidebar-menu > li.header {
    color: var(--go-dark-text-muted) !important;
    background-color: var(--go-dark-sidebar) !important;
}

html[data-theme="dark"] .user-panel {
    border-bottom-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .user-panel .go-text-regular,
html[data-theme="dark"] .user-panel .info {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .go-navbar-logo-container {
    background-color: var(--go-dark-header) !important;
    border-right-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .skin-black-light .main-header .logo:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .skin-black-light .main-header .logo {
    border-right: none;
}

/* Hamburger: markup nests .sidebar-toggle under .navbar > div, not .navbar > .sidebar-toggle */
html[data-theme="dark"] .skin-black-light .main-header .navbar .sidebar-toggle {
    background-color: var(--go-dark-header) !important;
    background-image: none !important;
    color: var(--go-dark-hamburger-menu-bars-color) !important;
    border-right: none !important;
}

html[data-theme="dark"] .skin-black-light .main-header .navbar .sidebar-toggle:hover,
html[data-theme="dark"] .skin-black-light .main-header .navbar .sidebar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--go-dark-text-strong) !important;
}

html[data-theme="dark"] .skin-black-light .main-header .navbar .sidebar-toggle:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .skin-black-light .main-header .navbar .sidebar-toggle .icon-bar {
    background-color: var(--go-dark-text-strong) !important;
}

html[data-theme="dark"] #delivery-charts .section-subtitle {
    color: var(--go-dark-text-muted) !important;
}

/* Sidebar menu */
html[data-theme="dark"] .skin-black-light .sidebar-menu > li > a {
    color: var(--go-dark-text);
}

html[data-theme="dark"] .skin-black-light .sidebar-menu > li.active > .treeview-menu,
html[data-theme="dark"] .skin-black-light .sidebar-menu > li.active .treeview-menu > li.menu-open {
    background-color: var(--go-dark-sidebar-active);
}

html[data-theme="dark"] .skin-black-light .sidebar-menu .treeview-menu > li.active.menu-open > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu .treeview-menu > li.menu-open > ul > li.active > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu .treeview-menu > li.active.menu-open > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu .treeview-menu > li.active > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu > li.active > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu > li.active > a > ul > li.active > a {
    color: var(--go-dark-accent-bright);
}

html[data-theme="dark"] .skin-black-light .sidebar-menu > li:hover > a,
html[data-theme="dark"] .skin-black-light .sidebar-menu > li.active > a {
    background: var(--go-dark-sidebar-active);
}

html[data-theme="dark"] .treeview-menu {
    background-color: var(--go-dark-sidebar);
}

html[data-theme="dark"] #left-running-tasks {
    border-bottom-color: var(--go-dark-border) !important;
}

/* Header theme toggle */
html[data-theme="dark"] .dashboard-theme-toggle {
    color: var(--go-dark-text);
}

html[data-theme="dark"] .dashboard-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .dashboard-theme-toggle {
    color: #444;
}

html[data-theme="light"] .dashboard-theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* ——— Boxes (AdminLTE) ——— */
html[data-theme="dark"] .box {
    background-color: var(--go-dark-surface) !important;
    border-top-color: var(--go-dark-border) !important;
    box-shadow: 0 1px 0 var(--go-dark-border-subtle);
}

html[data-theme="dark"] .box-header {
    background-color: var(--go-dark-surface-raised) !important;
    border-bottom-color: var(--go-dark-border) !important;
    color: var(--go-dark-text);
}

html[data-theme="dark"] .box-header.with-border {
    border-bottom-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .box-body {
    background-color: var(--go-dark-surface) !important;
    color: var(--go-dark-text);
}

html[data-theme="dark"] .box-footer {
    background-color: var(--go-dark-surface-raised) !important;
    border-top-color: var(--go-dark-border) !important;
}

/* ——— Typography & content helpers ——— */
html[data-theme="dark"] .page-title {
    color: var(--go-dark-text);
}

html[data-theme="dark"] .page-subtitle {
    color: var(--go-dark-text-muted);
}

html[data-theme="dark"] fieldset {
    border-color: var(--go-dark-border-subtle) !important;
    background: transparent;
}

html[data-theme="dark"] legend {
    color: var(--go-dark-text) !important;
    border-bottom: none;
}

html[data-theme="dark"] .section-title {
    color: var(--go-dark-accent-primary) !important;
}

html[data-theme="dark"] .section-title-gray {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .section-subtitle-blue {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .chartbox-title {
    color: var(--go-dark-accent-primary) !important;
}

/* Highcharts — axis & legend text (SVG); series colors set in chart-theme.js */
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-axis-labels tspan {
    fill: var(--go-dark-text) !important;
}

html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-legend-item tspan {
    fill: var(--go-dark-text) !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .highcharts-tick {
    stroke: rgba(255, 255, 255, 0.28) !important;
}

html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-xaxis .highcharts-axis-line {
    stroke: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .label-bold-no-margin,
html[data-theme="dark"] .label-no-margin {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .box-outline {
    border-color: var(--go-dark-border-subtle) !important;
    background-color: var(--go-dark-surface);
}

/* Creative list row detail text (was dark grey on dark grey) */
html[data-theme="dark"] .creatives-list-item-detail-item-name {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .creatives-list-item-detail-item-value {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .creatives-list-available {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .creatives-list-not-available {
    color: var(--go-dark-status-no) !important;
}

/* ——— Creatives list: expanded row & table (creatives.css) ——— */
html[data-theme="dark"] .creatives-table-cell {
    border-color: var(--go-dark-border-subtle) !important;
}

html[data-theme="dark"] table#creatives-list tbody tr.child td {
    background-color: var(--go-dark-surface-raised) !important;
    border-color: var(--go-dark-border-subtle) !important;
}

html[data-theme="dark"] .creatives-row-child {
    border-top: 1px solid var(--go-dark-border);
}

/* Inline #EFEFEF from _list_creative_details.php device previews */
html[data-theme="dark"] [id^="media-files-screens-"] {
    background-color: var(--go-dark-media-placeholder) !important;
}

/* Brighter red/green vs dark row — overrides tspan inline colors from _list_creative_details.php */
html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] tspan[style*="color: red"],
html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] tspan[style*="color:red"] {
    color: var(--go-dark-status-no) !important;
}

html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] tspan[style*="#009865"],
html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] tspan[style*="009865"] {
    color: var(--go-dark-status-yes) !important;
}

html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] p.section-subtitle[style*="color: red"],
html[data-theme="dark"] [id^="media-files-fileinfo-details-container-"] p.section-subtitle[style*="color:red"] {
    color: var(--go-dark-status-error) !important;
}

html[data-theme="dark"] [id^="creative-row-details-container-"] p.section-subtitle[style*="color: red"],
html[data-theme="dark"] [id^="creative-row-details-container-"] p.section-subtitle[style*="color:red"] {
    color: var(--go-dark-status-error) !important;
}

html[data-theme="dark"] .tabbar-menu-top-line {
    border-top-color: var(--go-dark-border-subtle);
}

html[data-theme="dark"] .tabbar-menu-item.active .tabbar-menu-item-title {
    color: var(--go-dark-accent-bright);
}

html[data-theme="dark"] .tabbar-highlight-color-on-hover {
    color: var(--go-dark-text-muted);
}

html[data-theme="dark"] .tabbar-highlight-color-on-hover:hover {
    color: var(--go-dark-text) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .go-text-regular {
    color: inherit;
}

html[data-theme="dark"] .sidebar-close-button > span {
    color: var(--go-dark-accent);
}

/* ——— Modals ——— */
html[data-theme="dark"] .modal-content {
    background-color: var(--go-dark-surface) !important;
    color: var(--go-dark-text);
    border: 1px solid var(--go-dark-border);
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--go-dark-border) !important;
    color: var(--go-dark-text);
}

html[data-theme="dark"] .modal-footer {
    border-top-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .close {
    color: var(--go-dark-text);
    opacity: 0.92;
    text-shadow: none;
}

html[data-theme="dark"] .close:hover {
    opacity: 1;
    color: var(--go-dark-accent-bright);
}

/* ——— Materialize ——— */
html[data-theme="dark"] .dropdown-content {
    background-color: var(--go-dark-surface-raised) !important;
    border: 1px solid var(--go-dark-border);
}

html[data-theme="dark"] .dropdown-content li > a,
html[data-theme="dark"] .dropdown-content li > span {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .materialized .dropdown-content li,
html[data-theme="dark"] .materialized .select-dropdown.dropdown-content li,
html[data-theme="dark"] .materialized .select-dropdown.dropdown-content li > span {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .materialized .select-dropdown.dropdown-content li:hover,
html[data-theme="dark"] .materialized .select-dropdown.dropdown-content li.active,
html[data-theme="dark"] .materialized .select-dropdown.dropdown-content li.selected {
    background-color: var(--go-dark-dropdown-option-hover-bg) !important;
}

html[data-theme="dark"] .select-dropdown.dropdown-content li:hover,
html[data-theme="dark"] .select-dropdown.dropdown-content li.active,
html[data-theme="dark"] .select-dropdown.dropdown-content li.selected {
    background-color: var(--go-dark-dropdown-option-hover-bg) !important;
}

html[data-theme="dark"] .dropdown-content li:not(.disabled):hover,
html[data-theme="dark"] .dropdown-content li.active,
html[data-theme="dark"] .dropdown-content li.selected {
    background-color: var(--go-dark-dropdown-option-hover-bg) !important;
}

html[data-theme="dark"] .autocomplete-content li:hover,
html[data-theme="dark"] .autocomplete-content li.selected {
    background-color: var(--go-dark-dropdown-option-hover-bg) !important;
}

html[data-theme="dark"] .materialize-textarea,
html[data-theme="dark"] input[type=text]:not(.browser-default),
html[data-theme="dark"] input[type=password]:not(.browser-default),
html[data-theme="dark"] input[type=email]:not(.browser-default),
html[data-theme="dark"] input[type=number]:not(.browser-default) {
    color: var(--go-dark-text) !important;
    border-bottom-color: var(--go-dark-border) !important;
}

/* OTP / auth digit cells (content.css .input-auth-number — verify phone, etc.) */
html[data-theme="dark"] .input-auth-number {
    color: var(--go-dark-text-strong);
    background-color: var(--go-dark-surface-raised);
    border-color: var(--go-dark-border);
}

html[data-theme="dark"] .input-auth-number:focus {
    border-color: var(--go-dark-accent);
    outline: none;
}

html[data-theme="dark"] .input-auth-number:disabled {
    color: var(--go-dark-text-muted);
    background-color: var(--go-dark-surface);
    border-color: var(--go-dark-border-subtle);
    opacity: 0.85;
}

html[data-theme="dark"] .input-field > label,
html[data-theme="dark"] .materialized label {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .input-field input:focus + label,
html[data-theme="dark"] .materialized label.active {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .section-search input.autocomplete {
    color: var(--go-dark-text);
}

html[data-theme="dark"] .input-field .prefix.active {
    color: var(--go-dark-accent) !important;
}

/* Materialize switch — track + thumb (materialized-section.css) */
html[data-theme="dark"] .materialized .switch label .lever {
    background-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .materialized .switch label input[type="checkbox"]:checked + .lever {
    background-color: rgba(71, 139, 230, 0.45);
}

html[data-theme="dark"] .materialized .switch label input[type="checkbox"]:checked + .lever:after {
    background-color: var(--go-dark-accent-primary);
}

html[data-theme="dark"] .materialized .switch label .lever:before {
    background-color: rgba(87, 153, 240, 0.18);
}

html[data-theme="dark"] .materialized .switch label .lever:after {
    background-color: var(--go-dark-text-strong);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .materialized input[type="checkbox"]:checked:not(:disabled) ~ .lever:active::before,
html[data-theme="dark"] .materialized input[type="checkbox"]:checked:not(:disabled).tabbed:focus ~ .lever::before {
    background-color: rgba(87, 153, 240, 0.28);
}

html[data-theme="dark"] .materialized input[type="checkbox"]:not(:disabled) ~ .lever:active:before,
html[data-theme="dark"] .materialized input[type="checkbox"]:not(:disabled).tabbed:focus ~ .lever::before {
    background-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .materialized .switch input[type="checkbox"][disabled] + .lever {
    background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .materialized .switch label input[type="checkbox"][disabled] + .lever:after,
html[data-theme="dark"] .materialized .switch label input[type="checkbox"][disabled]:checked + .lever:after {
    background-color: var(--go-dark-text-muted);
}

/* ——— DataTables 2 ——— */
html[data-theme="dark"] table.dataTable {
    color: var(--go-dark-text);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
    background-color: var(--go-dark-surface) !important;
    color: var(--go-dark-accent) !important;
    border-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] table.dataTable tbody td {
    background-color: var(--go-dark-surface) !important;
    color: var(--go-dark-text) !important;
    border-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr:nth-child(odd) > * {
    box-shadow: inset 0 0 0 9999px var(--go-dark-row-stripe);
}

html[data-theme="dark"] table.dataTable tbody tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--go-dark-row-hover) !important;
}

html[data-theme="dark"] .dt-container .dt-paging .dt-paging-button {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current {
    color: var(--go-dark-accent-bright) !important;
    font-weight: 500;
}

html[data-theme="dark"] .dt-container .dt-paging .dt-paging-button.disabled {
    opacity: 0.55;
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .dt-container .dt-info {
    color: var(--go-dark-text-muted);
}

/* ——— FilePond ——— */
html[data-theme="dark"] .filepond--panel-root {
    background-color: var(--go-dark-surface-raised) !important;
    border: 1px solid var(--go-dark-border-subtle);
}

html[data-theme="dark"] .filepond--drop-label {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .filepond--root {
    color: var(--go-dark-text);
}

/* ——— intl-tel-input ——— */
html[data-theme="dark"] .iti__country-list {
    background-color: var(--go-dark-surface-raised) !important;
    border: 1px solid var(--go-dark-border) !important;
}

html[data-theme="dark"] .iti__country-list .iti__country-name,
html[data-theme="dark"] .iti__country-list .iti__dial-code {
    color: var(--go-dark-text);
}

html[data-theme="dark"] .iti__country-list .iti__country.iti__highlight {
    background-color: var(--go-dark-dropdown-option-hover-bg) !important;
}

/* ——— Screens / cards ——— */
html[data-theme="dark"] .mov-settings-box-container,
html[data-theme="dark"] .mov-preview-desktop-box-container {
    border-color: var(--go-dark-border-subtle);
}

/* ——— Misc surfaces ——— */
html[data-theme="dark"] .login-page {
    background-color: var(--go-dark-bg);
}

html[data-theme="dark"] .login-box-text {
    color: var(--go-dark-text);
}   

html[data-theme="dark"] .btn-google {
    color: var(--go-dark-text-strong) !important;
    background-color: var(--go-dark-surface-raised) !important;
    border-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .btn-google:hover {
    color: var(--go-dark-text-strong) !important;
    background-color: var(--go-dark-surface-hover) !important;
    border-color: var(--go-dark-border-subtle) !important;
}

html[data-theme="dark"] .btn-google.disabled,
html[data-theme="dark"] .btn-google:disabled {
    color: var(--go-dark-text-muted) !important;
    background-color: var(--go-dark-surface) !important;
    border-color: var(--go-dark-border-subtle) !important;
    opacity: 0.65;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td {
    border-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--go-dark-surface);
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .table > tbody > tr > td {
    background-color: var(--go-dark-surface);
    color: var(--go-dark-text);
}

html[data-theme="dark"] a {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] a:hover {
    color: var(--go-dark-accent-bright);
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--go-dark-accent-primary);
    color: var(--go-dark-text);
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.hover {
    background-color: var(--go-dark-accent);
    color: var(--go-dark-text-strong);
}

/* Icon circles: keep transparent default; html .btn-primary above would fill them blue */
html[data-theme="dark"] .btn.btn-primary.btn-action,
html[data-theme="dark"] .btn-primary.btn-action {
    background-color: transparent !important;
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-action:hover,
html[data-theme="dark"] .btn.btn-primary.btn-action:focus-visible,
html[data-theme="dark"] .btn-primary.btn-action:hover,
html[data-theme="dark"] .btn-primary.btn-action:focus-visible {
    background-color: rgba(71, 139, 230, 0.22) !important;
    color: var(--go-dark-accent-bright) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-action:active,
html[data-theme="dark"] .btn-primary.btn-action:active {
    background-color: rgba(71, 139, 230, 0.32) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-action:disabled,
html[data-theme="dark"] .btn.btn-primary.btn-action[disabled],
html[data-theme="dark"] .btn-primary.btn-action:disabled,
html[data-theme="dark"] .btn-primary.btn-action[disabled] {
    background-color: transparent !important;
    color: var(--go-dark-accent) !important;
    opacity: 0.45;
}

/* Text primary floats (Set Click Area, TEST, etc.): transparent default; solid fills stay on .btn-floating-gray */
html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2),
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2) {
    background-color: transparent !important;
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):hover,
html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):focus-visible,
html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2).hover,
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):hover,
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):focus-visible,
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2).hover {
    background-color: rgba(71, 139, 230, 0.22) !important;
    color: var(--go-dark-accent-bright) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):active,
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):active {
    background-color: rgba(71, 139, 230, 0.32) !important;
}

html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):disabled,
html[data-theme="dark"] .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2)[disabled],
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):disabled,
html[data-theme="dark"] .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2)[disabled] {
    background-color: transparent !important;
    color: var(--go-dark-accent) !important;
    opacity: 0.45;
}

/* Tooltip label under icon buttons (data-md-action-button-tooltip :before) */
html[data-theme="dark"] .btn-action[data-md-action-button-tooltip]:enabled:before {
    color: var(--go-dark-text) !important;
    background-color: var(--go-dark-surface-raised) !important;
    border-color: var(--go-dark-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .btn-floating,
html[data-theme="dark"] .btn-action:not(.btn-primary) {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .btn-floating:hover,
html[data-theme="dark"] .btn-action:not(.btn-primary):hover {
    color: var(--go-dark-accent-bright) !important;
}

html[data-theme="dark"] .btn-floating-gray {
    background-color: var(--go-dark-surface-hover) !important;
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .datatable-header-text,
html[data-theme="dark"] .hint-block {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .footer {
    background-color: var(--go-dark-surface);
    border-top-color: var(--go-dark-border);
    color: var(--go-dark-text-muted);
}

/* ——— Home & report sticky filter bars (hardcoded white in home.css / report.css) ——— */
html[data-theme="dark"] body.skin-black-light #home-filter-sticked.home-filter-sticked,
html[data-theme="dark"] .home-filter-sticked,
html[data-theme="dark"] #home-filter-sticked {
    background: var(--go-dark-surface) !important;
    background-color: var(--go-dark-surface) !important;
    border-bottom: 1px solid var(--go-dark-border-subtle);
    color: var(--go-dark-text);
}

html[data-theme="dark"] #home-filter-sticked .row,
html[data-theme="dark"] #home-filter-sticked [class^="col-"],
html[data-theme="dark"] #report-filter-sticked .row,
html[data-theme="dark"] #report-filter-sticked [class^="col-"] {
    background: transparent !important;
}

html[data-theme="dark"] .home-filter-sticked p,
html[data-theme="dark"] #home-filter-sticked p {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .home-filter-sticked.stick {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] body.skin-black-light #report-filter-sticked.report-filter-sticked,
html[data-theme="dark"] .report-filter-sticked,
html[data-theme="dark"] #report-filter-sticked {
    background: var(--go-dark-surface) !important;
    background-color: var(--go-dark-surface) !important;
    border-bottom: 1px solid var(--go-dark-border-subtle);
    color: var(--go-dark-text);
}

html[data-theme="dark"] #home-filter-sticked .materialized .select-wrapper input.select-dropdown,
html[data-theme="dark"] #report-filter-sticked .materialized .select-wrapper input.select-dropdown {
    color: var(--go-dark-text) !important;
    -webkit-text-fill-color: var(--go-dark-text) !important;
    border-bottom-color: var(--go-dark-border) !important;
}

html[data-theme="dark"] #home-filter-sticked .materialized .select-wrapper .caret,
html[data-theme="dark"] #report-filter-sticked .materialized .select-wrapper .caret {
    fill: var(--go-dark-text) !important;
}

html[data-theme="dark"] .report-filter-sticked .materialized label,
html[data-theme="dark"] #report-filter-sticked .materialized label {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .report-filter-sticked.stick {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] #report-filter-sticked-title {
    color: var(--go-dark-text-muted) !important;
}

/* ——— Sidebar user panel & running conversions (left-sidebar.css / content.css) ——— */
html[data-theme="dark"] .go-user-panel {
    background-color: var(--go-dark-sidebar) !important;
    border-bottom: 1px solid var(--go-dark-border-subtle);
}

html[data-theme="dark"] .go-left-user-item > #left-user-item-fullname {
    color: var(--go-dark-accent-bright) !important;
}

html[data-theme="dark"] .convert-left-li-container {
    background-color: var(--go-dark-sidebar) !important;
    border-top-color: var(--go-dark-border-subtle) !important;
}

html[data-theme="dark"] .convert-left-li-notasks-label {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .convert-left-task-creative-name {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .convert-left-task-screen-target-key,
html[data-theme="dark"] .convert-left-task-in-progress {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .convert-task-progressbar-fill {
    background-color: rgb(9, 140, 255) !important;
}

/* Last-resort: win any cascade/order issues for sticky filters */
html[data-theme="dark"] .home-filter-sticked,
html[data-theme="dark"] #home-filter-sticked,
html[data-theme="dark"] .report-filter-sticked,
html[data-theme="dark"] #report-filter-sticked {
    background-color: var(--go-sticky-filter-bg) !important;
}

/* ——— Creative details page (Figma CreativeDetails 15:53) ——— */
html[data-theme="dark"] .creative-details-page {
    /* Media box (MOV card) — reference dark UI */
    --go-media-box-surface: #1e252e;
    --go-media-box-footer: #171d25;
    --go-media-box-border: #2d3743;
    --go-media-box-placeholder: #121212;
    --go-media-box-dropzone: #3b444e;
    --go-media-box-label: #94a3b8;
    /* Plain metrics (file size, duration, …): lighter than labels for contrast on #1e252e */
    --go-media-box-value: #cbd5e1;
    --go-media-box-value-emphasis: #3b82f6;
    --go-media-box-heading: #f8fafc;
    --go-media-box-warning: #f59e0b;
    --go-media-box-action: #f8fafc;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-top-bar-sticked {
    background-color: var(--go-dark-bg) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .creative-details-page .creative-details-tabbar-row {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .creative-details-page .tabbar-menu-top-line {
    border-top-color: var(--go-dark-border-subtle);
}

html[data-theme="dark"] .creative-details-page .tabbar-menu-item.active .tabbar-menu-item-title {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .creative-details-page .tabbar-menu-item.active .tabbar-bottom-line {
    border-bottom-color: var(--go-dark-accent);
}

html[data-theme="dark"] .creative-details-page .tabbar-highlight-color-on-hover {
    color: var(--go-dark-text-muted);
}

html[data-theme="dark"] .creative-details-page .tabbar-highlight-color-on-hover:hover {
    color: var(--go-dark-accent) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .creative-details-page .page-title {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .creative-details-page .page-subtitle {
    color: var(--go-dark-text-strong);
}

html[data-theme="dark"] .creative-details-page .page-subtitle strong {
    color: var(--go-dark-text-strong);
}

html[data-theme="dark"] .creative-details-page .section-title {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .creative-details-page .section-title-gray {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .creative-details-page .section-subtitle {
    color: var(--go-dark-text-muted) !important;
}

html[data-theme="dark"] .creative-details-page .section-subtitle-blue {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .creative-details-page #creative-topbar-sticked .section-title {
    color: var(--go-dark-accent-primary);
}

html[data-theme="dark"] .creative-details-page .creative-details-sync-warning-title {
    color: var(--go-dark-status-no) !important;
}

html[data-theme="dark"] .creative-details-page .creative-details-sync-warning-sub {
    color: var(--go-dark-status-no) !important;
    opacity: 0.95;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-text-color-warning {
    color: var(--go-dark-status-no) !important;
}

html[data-theme="dark"] .creative-details-page .mov-settings-box-container .creative-media-settings-text-color-warning {
    color: var(--go-media-box-warning) !important;
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-text-color-error {
    color: #e57373 !important;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-text-color-in-progress {
    color: var(--go-dark-accent) !important;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-text-color-completed {
    color: var(--go-dark-status-yes) !important;
}

html[data-theme="dark"] .creative-details-page .creative-media-settings-text-color-default-settings {
    color: var(--go-dark-text-muted) !important;
}

/* <text>/<tspan> in templates are not HTML <span>; `color` alone often does not paint — pair with fill */
html[data-theme="dark"] .creative-details-page .box-outline text,
html[data-theme="dark"] .creative-details-page .box-outline tspan,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container text,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container tspan,
html[data-theme="dark"] .creative-details-page .mov-box-uploader-container text,
html[data-theme="dark"] .creative-details-page .mov-box-uploader-container tspan {
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .mov-settings-box-container .creative-media-settings-text-color-default-settings {
    color: var(--go-media-box-label) !important;
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .box-outline {
    border-color: var(--go-media-box-border) !important;
    background-color: transparent;
}

html[data-theme="dark"] .creative-details-page .mov-box-info-container {
    border-color: var(--go-media-box-border) !important;
    background-color: var(--go-media-box-surface);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-container-title,
html[data-theme="dark"] .creative-details-page text.mov-box-info-container-title {
    color: var(--go-media-box-heading);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-container-description,
html[data-theme="dark"] .creative-details-page text.mov-box-info-container-description {
    color: var(--go-media-box-label);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-container-description strong,
html[data-theme="dark"] .creative-details-page text.mov-box-info-container-description strong {
    color: var(--go-media-box-heading);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-orientation-label,
html[data-theme="dark"] .creative-details-page .mov-box-info-required-frame-size-label {
    color: var(--go-media-box-heading);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-screen-size-label {
    color: var(--go-media-box-label);
}

html[data-theme="dark"] .creative-details-page .mov-box-info-screen-size-value {
    color: var(--go-media-box-value-emphasis) !important;
}

html[data-theme="dark"] .creative-details-page .mov-box-info-value {
    color: var(--go-media-box-value) !important;
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .mov-box-info-value-emphasis {
    color: var(--go-media-box-value-emphasis) !important;
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .mov-box-info-value-neutral {
    color: var(--go-media-box-label) !important;
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page .mov-box-uploader-container {
    background-color: var(--go-media-box-footer);
    border-color: var(--go-media-box-border);
    border-top: 1px solid var(--go-media-box-border);
}

html[data-theme="dark"] .creative-details-page .mov-box-separator {
    background-color: var(--go-media-box-border);
}

html[data-theme="dark"] .creative-details-page .prefetch-time-value {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .creative-details-page .highlight-color-on-hover {
    color: var(--go-dark-accent);
}

html[data-theme="dark"] .creative-details-page .highlight-color-on-hover:hover {
    color: var(--go-dark-accent-bright);
}

html[data-theme="dark"] .creative-details-page .mov-settings-box-container,
html[data-theme="dark"] .creative-details-page .mov-preview-desktop-box-container {
    border-color: var(--go-media-box-border) !important;
    background-color: var(--go-media-box-surface);
}

html[data-theme="dark"] .creative-details-page .mov-preview-mov-not-provided-label {
    color: var(--go-media-box-label);
    fill: currentColor;
}

html[data-theme="dark"] .creative-details-page [id^="screen-"][id$="-back-container"] {
    background-color: var(--go-media-box-placeholder) !important;
}

html[data-theme="dark"] .creative-details-page .mov-box-uploader-container .filepond--panel-root {
    background-color: var(--go-media-box-dropzone) !important;
}

html[data-theme="dark"] .creative-details-page .mov-box-uploader-container .filepond--drop-label label {
    color: #ffffff !important;
}

html[data-theme="dark"] .creative-details-page .mov-box-uploader-container .filepond--label-action {
    color: #93c5fd !important;
    text-decoration-color: #93c5fd !important;
}

html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2),
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2) {
    color: var(--go-media-box-action) !important;
}

html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):hover,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):focus-visible,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn.btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2).hover,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):hover,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2):focus-visible,
html[data-theme="dark"] .creative-details-page .mov-settings-box-container .btn-primary.btn-floating:not(.btn-floating-gray):not(.btn-floating-gray2).hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .creative-details-page .mov-box-uploader-container img[src^="/images/screens/"] {
    opacity: 0.9;
    filter: brightness(1.15) contrast(0.95);
}

html[data-theme="dark"] .creative-details-page [id^="app-background-preview-"][id$="-container"] {
    background-color: var(--go-dark-media-placeholder) !important;
}

html[data-theme="dark"] .creative-details-page tspan[style*="color: black"],
html[data-theme="dark"] .creative-details-page tspan[style*="color:black"] {
    color: var(--go-dark-text-strong) !important;
}

html[data-theme="dark"] .creative-details-page .tag-settings-url {
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .creative-details-page .tag-settings-info-container-title {
    color: var(--go-dark-text-strong);
}

html[data-theme="dark"] .creative-details-page .tag-settings-info-container-description {
    color: var(--go-dark-text-muted);
}

html[data-theme="dark"] .creative-details-page .tag-settings-table-cell {
    border-color: var(--go-dark-border-subtle) !important;
    background-color: var(--go-dark-surface) !important;
    color: var(--go-dark-text) !important;
}

html[data-theme="dark"] .creative-details-page .pure-material-switch {
    --pure-material-onsurface-rgb: 209, 215, 224;
    --pure-material-primary-rgb: 87, 153, 240;
    --pure-material-onprimary-rgb: 255, 255, 255;
}

html[data-theme="dark"] .creative-details-page .preview-settings-public-url-text {
    color: var(--go-dark-text) !important;
}