/* Dark mode overrides — scoped to body[data-theme="dark"] */
/* Bootstrap 3.3.7 component overrides */

body[data-theme="dark"] {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

/* Navbar */
body[data-theme="dark"] .navbar-inverse {
    background-color: #16213e;
    border-color: #0f3460;
}

body[data-theme="dark"] .navbar-inverse .navbar-brand,
body[data-theme="dark"] .navbar-inverse .navbar-nav > li > a {
    color: #c8c8d4;
}

body[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:hover,
body[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #0f3460;
}

body[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a,
body[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a:hover,
body[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #0f3460;
    color: #ffffff;
}

/* Dropdown menus */
body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .dropdown-menu-inverse {
    background-color: #16213e;
    border-color: #0f3460;
}

body[data-theme="dark"] .dropdown-menu > li > a,
body[data-theme="dark"] .dropdown-menu-inverse > li > a {
    color: #c8c8d4;
}

body[data-theme="dark"] .dropdown-menu > li > a:hover,
body[data-theme="dark"] .dropdown-menu > li > a:focus,
body[data-theme="dark"] .dropdown-menu-inverse > li > a:hover,
body[data-theme="dark"] .dropdown-menu-inverse > li > a:focus {
    background-color: #0f3460;
    color: #ffffff;
}

body[data-theme="dark"] .dropdown-menu > .dropdown-header,
body[data-theme="dark"] .dropdown-menu-inverse > .dropdown-header {
    color: #7a8ba8;
}

/* Panels (Bootstrap 3 legacy) */
body[data-theme="dark"] .panel {
    background-color: #16213e;
    border-color: #0f3460;
}

body[data-theme="dark"] .panel-default > .panel-heading {
    background-color: #0f3460;
    border-color: #0f3460;
    color: #e0e0e0;
}

body[data-theme="dark"] .panel-body {
    color: #e0e0e0;
}

/* Cards (Bootstrap 5 — replaces .panel). Used across most GSPs since
   the BS5 migration, so this rule has to mirror the .panel treatment.
   Without it, .card keeps its default white background and looks broken
   in dark mode (e.g. featureFlag/index, customerAccount, dashboard). */
body[data-theme="dark"] .card {
    background-color: #16213e;
    border-color: #2d4470;
    color: #e0e0e0;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .card-header,
body[data-theme="dark"] .card-footer {
    background-color: #1e2d50;
    border-color: #2d4470;
    color: #e0e0e0;
}

body[data-theme="dark"] .card-body,
body[data-theme="dark"] .card-text,
body[data-theme="dark"] .card-title {
    color: #e0e0e0;
}

body[data-theme="dark"] .card-subtitle {
    color: #c8c8d4;
}

/* <section> (application.css ships a global `section { background:white }`
   rule, used by customerAccount, textCampaignCreation, credit, etc.).
   In dark mode that turns the form into a white plate behind light text
   and headings — illegible. Mirror the .card treatment. */
body[data-theme="dark"] section {
    background-color: #16213e;
    border-color: #2d4470;
    color: #e0e0e0;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] section h1,
body[data-theme="dark"] section h2,
body[data-theme="dark"] section h3,
body[data-theme="dark"] section h4,
body[data-theme="dark"] section h5,
body[data-theme="dark"] section h6,
body[data-theme="dark"] .card h1,
body[data-theme="dark"] .card h2,
body[data-theme="dark"] .card h3,
body[data-theme="dark"] .card h4,
body[data-theme="dark"] .card h5,
body[data-theme="dark"] .card h6 {
    color: #e8e8ec;
}

/* Hero-style heading colors used across module index pages. Most GSPs
   leave <h1> uncolored, but main.css forces h1 { color: #48802c } (legacy
   green). Override in dark mode to a light tone instead. */
body[data-theme="dark"] h1 {
    color: #e8e8ec;
}

/* Bootstrap "alert-default" (e.g. /administrationTextCampaign banner) ships
   light gray bg + dark text; invisible in dark mode. */
body[data-theme="dark"] .alert-default {
    background-color: #1e2d50;
    border-color: #2d4470;
    color: #e0e0e0;
}

/* Inline code blocks (apiKey/index.gsp uses style="background:#f6f8fa") —
   normalize via CSS variable trick: `code` inside dark mode gets a dark
   background regardless of inline style, but inline style wins on
   background-color, so we have to attribute-target. Best effort: target
   the apiKey-style code chips. */
body[data-theme="dark"] code[style*="#f6f8fa"],
body[data-theme="dark"] [style*="background:#f6f8fa"] {
    background: #1e2d50 !important;
    color: #d4d4ff !important;
}
body[data-theme="dark"] [style*="color:#57606a"] {
    color: #b8c0d0 !important;
}

/* apiKey/index.gsp ships its own GitHub-style design with hardcoded
   .card-api class (white bg, #e1e4e8 border, #24292f title text). */
body[data-theme="dark"] .card-api {
    background: #16213e !important;
    border-color: #2d4470 !important;
    color: #e0e0e0;
}
body[data-theme="dark"] .card-api h3 {
    color: #e8e8ec !important;
}
body[data-theme="dark"] .key-input {
    background: #1e2d50 !important;
    border-color: #2d4470 !important;
    color: #d4d4ff !important;
}
body[data-theme="dark"] .btn-icon {
    background: #1e2d50 !important;
    border-color: #2d4470 !important;
    color: #b8c0d0 !important;
}
body[data-theme="dark"] .btn-icon:hover {
    background: #243460 !important;
    color: #ffffff !important;
}
body[data-theme="dark"] .link-card {
    background: #1e2d50 !important;
    border-color: #2d4470 !important;
    color: #c8c8d4 !important;
}
body[data-theme="dark"] .link-card .link-label {
    color: #b8c0d0 !important;
}
body[data-theme="dark"] .snippets-card {
    background: #0d1424 !important;
}

/* creditManager/index.gsp ships per-page <style> with .insight-card
   (light-gray bg). Override here to keep the financial dashboard
   readable in dark mode. */
body[data-theme="dark"] .insight-card {
    background: #16213e !important;
    border-color: #2d4470 !important;
}
body[data-theme="dark"] .insight-label {
    color: #b8c0d0 !important;
}

/* dashboard.css ships .stat-box with `background-color:#fff`. */
body[data-theme="dark"] .stat-box {
    background-color: #16213e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .stat-box h4 {
    color: #c8c8d4;
}
body[data-theme="dark"] .table th {
    background-color: #1e2d50;
    border-bottom-color: #2d4470;
}

/* Tables */
body[data-theme="dark"] .table {
    color: #e0e0e0;
}

body[data-theme="dark"] .table > thead > tr > th,
body[data-theme="dark"] .table > tbody > tr > td,
body[data-theme="dark"] .table > tbody > tr > th {
    border-color: #2d3a5a;
}

body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1e2d50;
}

body[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: #243460;
}

/* Forms */
body[data-theme="dark"] .form-control {
    background-color: #1e2d50;
    border-color: #2d3a5a;
    color: #e0e0e0;
}

body[data-theme="dark"] .form-control:focus {
    background-color: #243460;
    border-color: #4a90d9;
    color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3), 0 0 8px rgba(74,144,217,.4);
}

body[data-theme="dark"] .form-control::placeholder {
    color: #7a8ba8;
}

body[data-theme="dark"] label {
    color: #c8c8d4;
}

/* Buttons */
body[data-theme="dark"] .btn-default {
    background-color: #1e2d50;
    border-color: #2d3a5a;
    color: #e0e0e0;
}

body[data-theme="dark"] .btn-default:hover,
body[data-theme="dark"] .btn-default:focus {
    background-color: #243460;
    border-color: #4a90d9;
    color: #ffffff;
}

body[data-theme="dark"] .btn-link {
    color: #7ab8f5;
}

body[data-theme="dark"] .btn-link:hover {
    color: #a8d4ff;
}

/* Modals */
body[data-theme="dark"] .modal-content {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

body[data-theme="dark"] .modal-header {
    border-bottom-color: #0f3460;
}

body[data-theme="dark"] .modal-footer {
    border-top-color: #0f3460;
}

body[data-theme="dark"] .close {
    color: #e0e0e0;
    opacity: 0.6;
}

body[data-theme="dark"] .close:hover {
    color: #ffffff;
    opacity: 1;
}

/* Well */
body[data-theme="dark"] .well {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

/* List groups */
body[data-theme="dark"] .list-group-item {
    background-color: #16213e;
    border-color: #0f3460;
    color: #e0e0e0;
}

body[data-theme="dark"] a.list-group-item:hover,
body[data-theme="dark"] a.list-group-item:focus {
    background-color: #1e2d50;
    color: #ffffff;
}

/* Badges */
body[data-theme="dark"] .badge {
    background-color: #0f3460;
    color: #e0e0e0;
}

/* Alerts */
body[data-theme="dark"] .alert-info {
    background-color: #1a3a5c;
    border-color: #1e6090;
    color: #b8d4f0;
}

body[data-theme="dark"] .alert-success {
    background-color: #1a3a2a;
    border-color: #1e6040;
    color: #b8e4c8;
}

body[data-theme="dark"] .alert-warning {
    background-color: #3a2a00;
    border-color: #806000;
    color: #f0d880;
}

body[data-theme="dark"] .alert-danger {
    background-color: #3a1a1a;
    border-color: #802020;
    color: #f0b0b0;
}

/* Breadcrumb */
body[data-theme="dark"] .breadcrumb {
    background-color: #16213e;
    color: #7a8ba8;
}

body[data-theme="dark"] .breadcrumb > li + li::before {
    color: #7a8ba8;
}

/* Pagination */
body[data-theme="dark"] .pagination > li > a,
body[data-theme="dark"] .pagination > li > span {
    background-color: #16213e;
    border-color: #0f3460;
    color: #7ab8f5;
}

body[data-theme="dark"] .pagination > li > a:hover,
body[data-theme="dark"] .pagination > li > span:hover {
    background-color: #0f3460;
    color: #ffffff;
}

body[data-theme="dark"] .pagination > .active > a,
body[data-theme="dark"] .pagination > .active > span {
    background-color: #0f3460;
    border-color: #0f3460;
    color: #ffffff;
}

/* Input groups */
body[data-theme="dark"] .input-group-addon {
    background-color: #1e2d50;
    border-color: #2d3a5a;
    color: #c8c8d4;
}

/* Theme toggle button in navbar */
#themeToggle {
    padding: 10px 12px;
    color: #9d9dbd;
}

#themeToggle:hover {
    color: #ffffff;
}

body[data-theme="dark"] #themeToggle {
    color: #ffd700;
}

body[data-theme="dark"] #themeToggle:hover {
    color: #ffe866;
}