/*
 * Novel ERP Pro Theme V7.4 — cache-proof accent headers
 * Presentation-only UI layer. No routes, permissions, controllers, models,
 * queries, balances, invoices, stock or business behavior are changed.
 */

:root {
    --novel-accent: #c92f3d;
    --novel-accent-strong: #9f1f2b;
    --novel-accent-soft: rgba(201, 47, 61, .11);
    --novel-accent-soft-2: #fff1f3;
    --novel-accent-ring: rgba(201, 47, 61, .24);
    --novel-accent-glow: rgba(201, 47, 61, .35);
    --novel-page-soft: #fff7f8;
    --novel-page-soft-dark: #130e11;

    --novel-ink: #1d2735;
    --novel-muted: #697586;
    --novel-bg: #f4f6f9;
    --novel-card: #ffffff;
    --novel-card-alt: #f8fafc;
    --novel-border: #dfe5ec;
    --novel-nav: #0d1118;
    --novel-nav-2: #171d27;
    --novel-sidebar: #ffffff;
    --novel-sidebar-text: #263142;
    --novel-heading: #252b35;
    --novel-table-head: #343a46;
    --novel-control: #252d39;
    --novel-control-hover: #313b49;
    --novel-danger: #c92f3d;
    --novel-danger-strong: #a51f2b;
    --novel-warning: #c77b12;
    --novel-success: #16845f;
    --novel-radius: 9px;
    --novel-shadow: 0 7px 22px rgba(17, 24, 39, .07);
}

html[data-novel-accent="blue"] {
    --novel-accent: #2563eb;
    --novel-accent-strong: #1d4ed8;
    --novel-accent-soft: rgba(37, 99, 235, .11);
    --novel-accent-soft-2: #eff5ff;
    --novel-accent-ring: rgba(37, 99, 235, .24);
    --novel-accent-glow: rgba(37, 99, 235, .34);
    --novel-page-soft: #f4f8ff;
    --novel-page-soft-dark: #0b101a;
}

html[data-novel-accent="green"] {
    --novel-accent: #12855e;
    --novel-accent-strong: #0b6949;
    --novel-accent-soft: rgba(18, 133, 94, .11);
    --novel-accent-soft-2: #effaf6;
    --novel-accent-ring: rgba(18, 133, 94, .24);
    --novel-accent-glow: rgba(18, 133, 94, .34);
    --novel-page-soft: #f3fbf7;
    --novel-page-soft-dark: #0b1410;
}

html[data-novel-accent="purple"] {
    --novel-accent: #6b21a8;
    --novel-accent-strong: #4c1d95;
    --novel-accent-soft: rgba(107, 33, 168, .11);
    --novel-accent-soft-2: #f7f0ff;
    --novel-accent-ring: rgba(107, 33, 168, .24);
    --novel-accent-glow: rgba(107, 33, 168, .34);
    --novel-page-soft: #faf7ff;
    --novel-page-soft-dark: #120c18;
}

@media screen {
    /* =========================================================
       GLOBAL SURFACE / PAGE BACKGROUND
       ========================================================= */
    html[data-novel-bg="soft"] body[class*="skin-"] .content-wrapper {
        background: var(--novel-page-soft) !important;
    }
    html[data-novel-bg="clean"] body[class*="skin-"] .content-wrapper {
        background: #f4f6f9 !important;
    }

    body[class*="skin-"] .content-wrapper {
        color: var(--novel-ink);
        transition: background-color .2s ease, color .2s ease;
    }

    body[class*="skin-"] .content-header {
        background: transparent !important;
        color: var(--novel-ink) !important;
        border: 0 !important;
    }
    body[class*="skin-"] .content-header h1,
    body[class*="skin-"] .content-header h2,
    body[class*="skin-"] .content-header h3,
    body[class*="skin-"] .content-header small,
    body[class*="skin-"] .content-header a {
        color: var(--novel-ink) !important;
    }

    body[class*="skin-"] .main-footer {
        background: var(--novel-card) !important;
        color: var(--novel-muted) !important;
        border-top: 1px solid var(--novel-border) !important;
    }

    /* =========================================================
       NAVBAR — one accent family, no red/blue/green cocktail
       ========================================================= */
    body[class*="skin-"] .main-header,
    body[class*="skin-"] .main-header .navbar,
    body[class*="skin-"] .main-header .logo,
    body[class*="skin-"] .main-sidebar .logo {
        background: var(--novel-nav) !important;
        color: #fff !important;
    }

    html[data-novel-nav="accent"] body[class*="skin-"] .main-header .navbar,
    html[data-novel-nav="accent"] body[class*="skin-"] .main-header .logo,
    html[data-novel-nav="accent"] body[class*="skin-"] .main-sidebar .logo {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
    }

    body[class*="skin-"] .main-header {
        border-bottom: 2px solid var(--novel-accent) !important;
        box-shadow: 0 2px 12px rgba(17,24,39,.16);
    }

    body[class*="skin-"] .main-header .navbar .sidebar-toggle,
    body[class*="skin-"] .main-header .navbar .nav > li > a,
    body[class*="skin-"] .main-header .logo,
    body[class*="skin-"] .main-sidebar .logo,
    body[class*="skin-"] .main-header .navbar-custom-menu > .m-8.mt-15 {
        color: #f7f9fc !important;
    }

    body[class*="skin-"] .main-header .navbar .sidebar-toggle:hover,
    body[class*="skin-"] .main-header .navbar .nav > li > a:hover,
    body[class*="skin-"] .main-header .navbar .nav > li > a:focus,
    body[class*="skin-"] .main-header .navbar .nav > .open > a {
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
    }

    /* Every operational top-bar button follows the selected accent. */
    body[class*="skin-"] .main-header .navbar-custom-menu .btn,
    body[class*="skin-"] .main-header .navbar-custom-menu [class*="bg-"],
    body[class*="skin-"] .main-header #header_shortcut_dropdown,
    body[class*="skin-"] .main-header #btnCalculator,
    body[class*="skin-"] .main-header #register_details,
    body[class*="skin-"] .main-header #view_todays_profit,
    body[class*="skin-"] .main-header #close_register {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 3px 10px var(--novel-accent-ring) !important;
        transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
    }
    body[class*="skin-"] .main-header .navbar-custom-menu .btn:hover,
    body[class*="skin-"] .main-header .navbar-custom-menu [class*="bg-"]:hover {
        background: var(--novel-accent-strong) !important;
        border-color: var(--novel-accent-strong) !important;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px var(--novel-accent-glow) !important;
    }

    /* User and notifications remain neutral chrome with accent focus. */
    body[class*="skin-"] .main-header .navbar .nav > li.user-menu > a,
    body[class*="skin-"] .main-header .navbar .nav > li.notifications-menu > a {
        border-radius: 8px;
        margin-top: 6px;
        margin-bottom: 6px;
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    body[class*="skin-"] .main-header .notifications-menu .notifications_count {
        background: var(--novel-accent) !important;
        color: #fff !important;
        border-radius: 999px;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        padding: 0 5px;
        font-size: 10px;
        box-shadow: 0 0 0 2px var(--novel-nav);
    }
    body[class*="skin-"] .main-header li.user-header {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
    }
    body[class*="skin-"] .main-header .user-menu > .dropdown-menu,
    body[class*="skin-"] .main-header .notifications-menu > .dropdown-menu {
        border: 1px solid var(--novel-border);
        border-top: 3px solid var(--novel-accent);
        border-radius: 0 0 10px 10px;
        overflow: hidden;
        box-shadow: 0 13px 30px rgba(17,24,39,.18);
    }
    body[class*="skin-"] .main-header .user-menu .user-footer {
        background: var(--novel-card) !important;
        border-top: 1px solid var(--novel-border) !important;
    }
    body[class*="skin-"] .main-header .notifications-menu .menu > li > a,
    body[class*="skin-"] .main-header .notifications-menu .footer > a {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body[class*="skin-"] .main-header .notifications-menu .menu > li > a:hover,
    body[class*="skin-"] .main-header .notifications-menu .footer > a:hover {
        background: var(--novel-accent-soft) !important;
        color: var(--novel-accent-strong) !important;
    }

    /* =========================================================
       SIDEBAR
       ========================================================= */
    body[class*="skin-"] .main-sidebar,
    body[class*="skin-"] .main-sidebar .sidebar {
        background: var(--novel-sidebar) !important;
    }
    body[class*="skin-"] .main-sidebar {
        box-shadow: 0 0 18px rgba(17,24,39,.09);
    }

    body[class*="skin-"] .sidebar-menu > li > a {
        color: var(--novel-sidebar-text) !important;
        margin: 2px 8px;
        border-radius: 8px;
        border-left: 3px solid transparent !important;
        border-right: 3px solid transparent !important;
        transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    body[class*="skin-"] .sidebar-menu > li:hover > a,
    body[class*="skin-"] .sidebar-menu > li.menu-open > a {
        background: var(--novel-accent-soft) !important;
        color: var(--novel-accent-strong) !important;
        transform: translateX(-2px);
    }
    html[dir="ltr"] body[class*="skin-"] .sidebar-menu > li:hover > a,
    html[dir="ltr"] body[class*="skin-"] .sidebar-menu > li.menu-open > a {
        transform: translateX(2px);
    }
    body[class*="skin-"] .sidebar-menu > li.active > a {
        background: linear-gradient(135deg, var(--novel-accent), var(--novel-accent-strong)) !important;
        color: #fff !important;
        border-color: var(--novel-accent-strong) !important;
        box-shadow: 0 5px 14px var(--novel-accent-ring) !important;
    }
    body[class*="skin-"] .sidebar-menu > li.active > a i,
    body[class*="skin-"] .sidebar-menu > li.active > a span {
        color: #fff !important;
    }

    /* الرئيسية / Home centered as requested. */
    body[class*="skin-"] .sidebar-menu > li > a[href*="/home"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
        font-weight: 700;
    }

    body[class*="skin-"] .sidebar-menu > li > .treeview-menu {
        background: var(--novel-card-alt) !important;
        margin: 0 12px 4px;
        border-radius: 8px;
        padding: 4px 0;
        border: 1px solid var(--novel-border);
    }
    body[class*="skin-"] .sidebar-menu .treeview-menu > li > a {
        color: #536071 !important;
        border-radius: 6px;
        margin: 1px 5px;
        transition: background-color .16s ease, color .16s ease, transform .16s ease;
    }
    body[class*="skin-"] .sidebar-menu .treeview-menu > li.active > a,
    body[class*="skin-"] .sidebar-menu .treeview-menu > li > a:hover {
        color: var(--novel-accent-strong) !important;
        background: var(--novel-accent-soft) !important;
        transform: translateX(-2px);
    }

    /* Group labels: centered, larger, colored background, visible tasteful animation. */
    body[class*="skin-"] .sidebar-menu > li.header {
        position: relative;
        overflow: hidden;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 11px 10px 6px;
        padding: 10px 8px !important;
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 10px;
        box-shadow: 0 5px 18px var(--novel-accent-ring);
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
        cursor: default;
        animation: novelGroupPulse 3.2s ease-in-out infinite;
    }
    body[class*="skin-"] .sidebar-menu > li.header::after {
        content: "";
        position: absolute;
        top: -45%;
        left: -45%;
        width: 28%;
        height: 190%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
        transform: rotate(18deg);
        animation: novelGroupShine 4.2s ease-in-out infinite;
        pointer-events: none;
    }
    body[class*="skin-"] .sidebar-menu > li.header:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 8px 22px var(--novel-accent-glow);
    }
    @keyframes novelGroupPulse {
        0%, 100% { box-shadow: 0 4px 13px var(--novel-accent-ring); }
        50% { box-shadow: 0 7px 22px var(--novel-accent-glow); }
    }
    @keyframes novelGroupShine {
        0%, 55% { left: -45%; opacity: 0; }
        65% { opacity: 1; }
        82% { left: 125%; opacity: .9; }
        100% { left: 125%; opacity: 0; }
    }

    /* =========================================================
       CARDS / FILTERS / INTERNAL HEADERS
       Black/white + selected accent only.
       ========================================================= */
    body[class*="skin-"] .box,
    body[class*="skin-"] .panel,
    body[class*="skin-"] .nav-tabs-custom,
    body[class*="skin-"] .modal-content,
    body[class*="skin-"] .info-box,
    body[class*="skin-"] .well,
    body[class*="skin-"] .list-group-item,
    body[class*="skin-"] .tab-content {
        background: var(--novel-card) !important;
        color: var(--novel-ink);
        border-color: var(--novel-border) !important;
        border-radius: var(--novel-radius);
        box-shadow: var(--novel-shadow);
    }

    body[class*="skin-"] .box > .box-header,
    body[class*="skin-"] .panel > .panel-heading {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
        color: #fff !important;
        border-top: 3px solid var(--novel-accent-strong) !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 4px 12px var(--novel-accent-ring) !important;
    }
    body[class*="skin-"] .box > .box-header .box-title,
    body[class*="skin-"] .box > .box-header .box-title a,
    body[class*="skin-"] .box > .box-header a:not(.btn),
    body[class*="skin-"] .panel > .panel-heading,
    body[class*="skin-"] .panel > .panel-heading a {
        color: #fff !important;
    }


    /* Legacy account/ledger titles use .blue-heading with a fixed blue in app.css.
       Keep them synchronized with the selected Novel accent on screen only. */
    body[class*="skin-"] .blue-heading {
        background-color: var(--novel-accent) !important;
        color: #fff !important;
        border-color: var(--novel-accent-strong) !important;
    }
    body[class*="skin-"] .blue-heading,
    body[class*="skin-"] .blue-heading th,
    body[class*="skin-"] .blue-heading td,
    body[class*="skin-"] .blue-heading a,
    body[class*="skin-"] .blue-heading span {
        color: #fff !important;
    }

    body[class*="skin-"] .box-body,
    body[class*="skin-"] .panel-body,
    body[class*="skin-"] .modal-body,
    body[class*="skin-"] .modal-footer,
    body[class*="skin-"] .table-responsive {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }

    /* Business settings vertical tabs. */
    body[class*="skin-"] .pos-tab-menu .list-group-item {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
        box-shadow: none !important;
    }
    body[class*="skin-"] .pos-tab-menu .list-group-item.active,
    body[class*="skin-"] .pos-tab-menu .list-group-item.active:hover,
    body[class*="skin-"] .pos-tab-menu .list-group-item.active:focus {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
        color: #fff !important;
        border-color: var(--novel-accent) !important;
    }
    body[class*="skin-"] .pos-tab-menu .list-group-item:hover {
        background: var(--novel-accent-soft) !important;
        color: var(--novel-accent-strong) !important;
    }

    /* Legacy Chart of Accounts view contains late inline red/blue !important rules.
       Override only its tree nodes; no accounting behavior is touched. */
    body[class*="skin-"] .content-wrapper .node-treeview.active,
    body[class*="skin-"] .content-wrapper .node-treeview:hover,
    body[class*="skin-"] .content-wrapper .node-treeviewx:hover {
        background: var(--novel-accent) !important;
        color: #fff !important;
    }
    body[class*="skin-"] .content-wrapper .node-treeview.active *,
    body[class*="skin-"] .content-wrapper .node-treeview:hover *,
    body[class*="skin-"] .content-wrapper .node-treeviewx:hover * {
        color: #fff !important;
    }

    /* Dashboard custom cards: remove old inline blue/orange/pink cocktail. */
    body[class*="skin-"] .info-box-new-style .info-box-text,
    body[class*="skin-"] .info-box-new-style [style*="color:"] {
        color: var(--novel-accent) !important;
    }

    /* KPI/dashboard icon tiles are decorative chrome, so they follow the selected accent too. */
    body[class*="skin-"] .content-wrapper .info-box .info-box-icon[class*="bg-"],
    body[class*="skin-"] .content-wrapper .info-box-new-style .info-box-icon {
        background: linear-gradient(135deg, var(--novel-accent), var(--novel-accent-strong)) !important;
        color: #fff !important;
        box-shadow: 0 5px 14px var(--novel-accent-ring);
    }
    body[class*="skin-"] .content-wrapper .info-box .info-box-icon[class*="bg-"] i,
    body[class*="skin-"] .content-wrapper .info-box-new-style .info-box-icon i {
        color: #fff !important;
    }

    /* =========================================================
       BUTTONS — selected accent for normal actions.
       Destructive/warning status classes retain meaning where they are labels.
       ========================================================= */
    body[class*="skin-"] .content-wrapper a.btn,
    body[class*="skin-"] .content-wrapper button.btn,
    body[class*="skin-"] .modal a.btn,
    body[class*="skin-"] .modal button.btn,
    .pos-header a.btn,
    .pos-header button.btn {
        border-radius: 7px !important;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    body[class*="skin-"] .content-wrapper .btn-primary,
    body[class*="skin-"] .content-wrapper .btn-info,
    body[class*="skin-"] .content-wrapper .btn-success,
    body[class*="skin-"] .content-wrapper .btn.bg-blue,
    body[class*="skin-"] .content-wrapper .btn.bg-light-blue,
    body[class*="skin-"] .content-wrapper .btn.bg-green,
    body[class*="skin-"] .content-wrapper .btn.bg-purple,
    body[class*="skin-"] .modal .btn-primary,
    body[class*="skin-"] .modal .btn-info,
    body[class*="skin-"] .modal .btn-success,
    body[class*="skin-"] .modal .btn.bg-blue,
    body[class*="skin-"] .modal .btn.bg-light-blue,
    body[class*="skin-"] .modal .btn.bg-green,
    body[class*="skin-"] .modal .btn.bg-purple,
    .pos-header .btn-primary,
    .pos-header .btn-info,
    .pos-header .btn-success,
    .pos-header .btn.bg-blue,
    .pos-header .btn.bg-light-blue,
    .pos-header .btn.bg-green,
    .pos-header .btn.bg-purple {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
        box-shadow: 0 3px 9px var(--novel-accent-ring);
    }
    body[class*="skin-"] .content-wrapper .btn-primary:hover,
    body[class*="skin-"] .content-wrapper .btn-info:hover,
    body[class*="skin-"] .content-wrapper .btn-success:hover,
    body[class*="skin-"] .modal .btn-primary:hover,
    body[class*="skin-"] .modal .btn-info:hover,
    body[class*="skin-"] .modal .btn-success:hover,
    .pos-header .btn-primary:hover,
    .pos-header .btn-info:hover,
    .pos-header .btn-success:hover {
        background: var(--novel-accent-strong) !important;
        border-color: var(--novel-accent-strong) !important;
        transform: translateY(-1px);
        box-shadow: 0 5px 13px var(--novel-accent-glow);
    }
    /* Old dashboard uses btn-danger for non-destructive shortcuts (sale/purchase/report/add).
       Scope the correction to the dashboard only so real delete/cancel buttons remain red. */
    body[class*="skin-"] .content-wrapper .content-custom .btn-danger {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
        box-shadow: 0 3px 9px var(--novel-accent-ring) !important;
    }
    body[class*="skin-"] .content-wrapper .content-custom .btn-danger:hover,
    body[class*="skin-"] .content-wrapper .content-custom .btn-danger:focus {
        background: var(--novel-accent-strong) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    /* Keep true destructive actions visually dangerous. */
    body[class*="skin-"] .content-wrapper .btn-danger,
    body[class*="skin-"] .modal .btn-danger {
        background: var(--novel-danger) !important;
        border-color: var(--novel-danger-strong) !important;
        color: #fff !important;
    }

    /* =========================================================
       TABLES / DATA TABLES
       ========================================================= */
    body[class*="skin-"] table,
    body[class*="skin-"] .table {
        color: var(--novel-ink);
        background: var(--novel-card);
    }
    body[class*="skin-"] .table > thead > tr > th,
    body[class*="skin-"] table.dataTable thead th {
        background: var(--novel-accent-strong) !important;
        color: #fff !important;
        border-color: var(--novel-accent) !important;
        font-weight: 700;
    }
    body[class*="skin-"] .table > tbody > tr > td,
    body[class*="skin-"] .table > tbody > tr > th,
    body[class*="skin-"] .table > tfoot > tr > td,
    body[class*="skin-"] .table > tfoot > tr > th {
        background: var(--novel-card);
        color: var(--novel-ink);
        border-color: var(--novel-border) !important;
    }
    body[class*="skin-"] .table-striped > tbody > tr:nth-of-type(odd) > td {
        background: var(--novel-card-alt);
    }
    body[class*="skin-"] .table-hover > tbody > tr:hover > td {
        background: var(--novel-accent-soft) !important;
    }
    body[class*="skin-"] table a:not(.btn) {
        color: var(--novel-accent-strong) !important;
    }

    /* Table headers stay readable even when legacy views place colored help icons/links inside <th>. */
    body[class*="skin-"] .table > thead > tr > th a:not(.btn),
    body[class*="skin-"] table.dataTable thead th a:not(.btn),
    body[class*="skin-"] .table > thead > tr > th .text-info,
    body[class*="skin-"] table.dataTable thead th .text-info,
    body[class*="skin-"] .table > thead > tr > th .text-primary,
    body[class*="skin-"] table.dataTable thead th .text-primary {
        color: #fff !important;
    }

    /* Status badges remain semantic information, not theme decoration. */
    body[class*="skin-"] .label-success { background-color: #62bf43 !important; }
    body[class*="skin-"] .label-warning { background-color: #f2a33b !important; }
    body[class*="skin-"] .label-danger { background-color: #d9534f !important; }
    body[class*="skin-"] .label-info { background-color: var(--novel-accent) !important; }

    /* =========================================================
       FORMS / TABS / PAGINATION
       ========================================================= */
    body[class*="skin-"] .form-control,
    body[class*="skin-"] .input-group-addon,
    body[class*="skin-"] .select2-container--default .select2-selection--single,
    body[class*="skin-"] .select2-container--default .select2-selection--multiple {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
        border-radius: 6px;
    }
    body[class*="skin-"] .form-control:focus,
    body[class*="skin-"] .select2-container--default.select2-container--focus .select2-selection--multiple,
    body[class*="skin-"] .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--novel-accent) !important;
        box-shadow: 0 0 0 3px var(--novel-accent-ring) !important;
    }
    body[class*="skin-"] .nav-tabs-custom > .nav-tabs > li.active,
    body[class*="skin-"] .nav-tabs > li.active {
        border-top-color: var(--novel-accent) !important;
    }
    body[class*="skin-"] .pagination > .active > a,
    body[class*="skin-"] .pagination > .active > span,
    body[class*="skin-"] .pagination > .active > a:hover,
    body[class*="skin-"] .pagination > .active > span:hover {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent) !important;
        color: #fff !important;
    }

    /* =========================================================
       CALCULATOR — follows selected accent
       ========================================================= */
    .navbar-custom-menu .popover,
    .pos-header .popover {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border: 1px solid var(--novel-border) !important;
        border-radius: 11px;
        box-shadow: 0 14px 34px rgba(17,24,39,.18);
    }
    #calculator .calcBG {
        background: var(--novel-card) !important;
        border-radius: 9px;
        padding: 7px 8px 8px;
    }
    #calculator .screen {
        width: 161px;
        height: 38px;
        margin: 3px 24px 8px;
        border: 1px solid var(--novel-border) !important;
        border-radius: 7px;
        background: var(--novel-card-alt) !important;
        color: var(--novel-ink) !important;
    }
    #calculator button.btn {
        background: var(--novel-accent-soft-2) !important;
        border-color: var(--novel-border) !important;
        color: var(--novel-accent-strong) !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }
    #calculator button.btn:hover,
    #calculator button[id="%"],
    #calculator button[id="/"],
    #calculator button[id="*"],
    #calculator button[id="-"],
    #calculator button[id="+"],
    #calculator #allClear,
    #calculator #clear,
    #calculator #equals {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    /* =========================================================
       POS
       ========================================================= */
    .pos-header {
        background: var(--novel-nav) !important;
        color: #f8fafc !important;
        border-bottom: 2px solid var(--novel-accent) !important;
    }
    html[data-novel-nav="accent"] .pos-header {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
    }
    .pos-header .btn,
    .pos-header [class*="bg-"] {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    /* =========================================================
       THEME CONTROLS
       ========================================================= */
    .novel-theme-controls {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        float: left;
        margin: 9px 7px 0;
        direction: ltr;
    }
    .novel-theme-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        background: var(--novel-accent) !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 3px 9px var(--novel-accent-ring);
        transition: background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .novel-theme-btn:hover,
    .novel-theme-btn:focus {
        background: var(--novel-accent-strong) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
        outline: none;
        transform: translateY(-1px);
        box-shadow: 0 5px 13px var(--novel-accent-glow);
    }
    .novel-palette { position: relative; }
    .novel-palette-menu {
        display: none;
        position: absolute;
        top: 40px;
        left: 0;
        width: 248px;
        padding: 12px;
        border: 1px solid var(--novel-border);
        border-radius: 11px;
        background: var(--novel-card);
        color: var(--novel-ink);
        box-shadow: 0 12px 30px rgba(17,24,39,.18);
        z-index: 1060;
        direction: rtl;
        text-align: right;
    }
    .novel-palette.is-open .novel-palette-menu { display: block; }
    .novel-control-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 0;
        border-bottom: 1px solid var(--novel-border);
    }
    .novel-control-row:last-child { border-bottom: 0; }
    .novel-control-label {
        color: var(--novel-muted);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
    .novel-control-options {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }
    .novel-color-dot {
        width: 27px;
        height: 27px;
        border: 3px solid var(--novel-card);
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(17,24,39,.18);
        cursor: pointer;
        padding: 0;
    }
    .novel-color-dot[data-accent="red"] { background: #c92f3d; }
    .novel-color-dot[data-accent="blue"] { background: #2563eb; }
    .novel-color-dot[data-accent="green"] { background: #12855e; }
    .novel-color-dot[data-accent="purple"] { background: #6b21a8; }
    .novel-color-dot.is-active { box-shadow: 0 0 0 2px var(--novel-accent), 0 0 0 4px var(--novel-card); }
    .novel-choice-btn {
        min-width: 45px;
        height: 29px;
        padding: 4px 8px;
        border: 1px solid var(--novel-border);
        border-radius: 7px;
        background: var(--novel-card-alt);
        color: var(--novel-ink);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }
    .novel-choice-btn.is-active,
    .novel-choice-btn:hover {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent) !important;
        color: #fff !important;
    }

    /* =========================================================
       AUTH / LOGIN / INSTALL
       ========================================================= */
    body:not([class*="skin-"]):not(.lockscreen) {
        background: radial-gradient(circle at 18% 8%, var(--novel-accent-soft-2) 0, #f5f7fa 46%, #e9edf3 100%) !important;
        color: var(--novel-ink);
    }
    body:not([class*="skin-"]):not(.lockscreen) .btn-primary,
    body:not([class*="skin-"]):not(.lockscreen) .button__main {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }
    .novel-auth-controls {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 2000;
        display: inline-flex;
        gap: 6px;
    }
    html[dir="rtl"] .novel-auth-controls { right: auto; left: 14px; }

    /* =========================================================
       DARK MODE — broad coverage for internal screens
       ========================================================= */
    html[data-novel-theme="dark"] {
        color-scheme: dark;
        --novel-ink: #edf2f7;
        --novel-muted: #a7b0bd;
        --novel-card: #151b24;
        --novel-card-alt: #101720;
        --novel-border: #2b3543;
        --novel-nav: #080b10;
        --novel-nav-2: #141a23;
        --novel-sidebar: #10161e;
        --novel-sidebar-text: #dbe3ec;
        --novel-heading: #edf2f7;
        --novel-table-head: #0c121a;
        --novel-control: #202936;
        --novel-control-hover: #2a3544;
        --novel-shadow: 0 8px 26px rgba(0,0,0,.22);
    }
    html[data-novel-theme="dark"][data-novel-bg="soft"] body[class*="skin-"] .content-wrapper {
        background: var(--novel-page-soft-dark) !important;
    }
    html[data-novel-theme="dark"][data-novel-bg="clean"] body[class*="skin-"] .content-wrapper {
        background: #0c1118 !important;
    }
    html[data-novel-theme="dark"] body {
        background: #0c1118 !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper .content-header,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper .content-header.content-header-custom {
        background: transparent !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper .content-header.content-header-custom h1,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper .content-header.content-header-custom a,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper .content-header.content-header-custom small {
        color: var(--novel-ink) !important;
    }

    html[data-novel-theme="dark"] body[class*="skin-"] .content-header h1,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-header h2,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-header h3,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-header small,
    html[data-novel-theme="dark"] body[class*="skin-"] .content-header a,
    html[data-novel-theme="dark"] body[class*="skin-"] label,
    html[data-novel-theme="dark"] body[class*="skin-"] legend,
    html[data-novel-theme="dark"] body[class*="skin-"] h1,
    html[data-novel-theme="dark"] body[class*="skin-"] h2,
    html[data-novel-theme="dark"] body[class*="skin-"] h3,
    html[data-novel-theme="dark"] body[class*="skin-"] h4,
    html[data-novel-theme="dark"] body[class*="skin-"] h5,
    html[data-novel-theme="dark"] body[class*="skin-"] h6 {
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .main-sidebar,
    html[data-novel-theme="dark"] body[class*="skin-"] .main-sidebar .sidebar {
        background: var(--novel-sidebar) !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .sidebar-menu > li > .treeview-menu {
        background: #0c1219 !important;
        border-color: #273140 !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .sidebar-menu .treeview-menu > li > a {
        color: #b7c0cc !important;
    }

    html[data-novel-theme="dark"] body[class*="skin-"] .box,
    html[data-novel-theme="dark"] body[class*="skin-"] .panel,
    html[data-novel-theme="dark"] body[class*="skin-"] .nav-tabs-custom,
    html[data-novel-theme="dark"] body[class*="skin-"] .modal-content,
    html[data-novel-theme="dark"] body[class*="skin-"] .info-box,
    html[data-novel-theme="dark"] body[class*="skin-"] .small-box,
    html[data-novel-theme="dark"] body[class*="skin-"] .well,
    html[data-novel-theme="dark"] body[class*="skin-"] .list-group-item,
    html[data-novel-theme="dark"] body[class*="skin-"] .tab-content,
    html[data-novel-theme="dark"] .dropdown-menu,
    html[data-novel-theme="dark"] .popover,
    html[data-novel-theme="dark"] .datepicker,
    html[data-novel-theme="dark"] .daterangepicker,
    html[data-novel-theme="dark"] .select2-dropdown,
    html[data-novel-theme="dark"] .sweet-alert,
    html[data-novel-theme="dark"] .ui-autocomplete {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }

    html[data-novel-theme="dark"] body[class*="skin-"] .box-body,
    html[data-novel-theme="dark"] body[class*="skin-"] .box-footer,
    html[data-novel-theme="dark"] body[class*="skin-"] .panel-body,
    html[data-novel-theme="dark"] body[class*="skin-"] .modal-header,
    html[data-novel-theme="dark"] body[class*="skin-"] .modal-body,
    html[data-novel-theme="dark"] body[class*="skin-"] .modal-footer,
    html[data-novel-theme="dark"] body[class*="skin-"] .table-responsive,
    html[data-novel-theme="dark"] body[class*="skin-"] .dataTables_wrapper,
    html[data-novel-theme="dark"] body[class*="skin-"] .pos-tab-content {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }

    /* Old screens containing inline white backgrounds. Limited to ERP content area. */
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background-color: white"],
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background-color:white"],
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background-color: #fff"],
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background-color:#fff"],
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background: white"],
    html[data-novel-theme="dark"] body[class*="skin-"] .content-wrapper [style*="background:white"] {
        background-color: var(--novel-card) !important;
        color: var(--novel-ink) !important;
    }

    html[data-novel-theme="dark"] body[class*="skin-"] .form-control,
    html[data-novel-theme="dark"] body[class*="skin-"] .input-group-addon,
    html[data-novel-theme="dark"] .select2-container--default .select2-selection--single,
    html[data-novel-theme="dark"] .select2-container--default .select2-selection--multiple,
    html[data-novel-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
    html[data-novel-theme="dark"] .select2-search__field,
    html[data-novel-theme="dark"] .dataTables_filter input,
    html[data-novel-theme="dark"] .dataTables_length select {
        background: #0e141c !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    html[data-novel-theme="dark"] .select2-results__option,
    html[data-novel-theme="dark"] .dropdown-menu > li > a {
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"] .dropdown-menu > li > a:hover,
    html[data-novel-theme="dark"] .select2-results__option--highlighted[aria-selected] {
        background: var(--novel-accent-soft) !important;
        color: #fff !important;
    }

    html[data-novel-theme="dark"] body[class*="skin-"] .table > tbody > tr > td,
    html[data-novel-theme="dark"] body[class*="skin-"] .table > tbody > tr > th,
    html[data-novel-theme="dark"] body[class*="skin-"] .table > tfoot > tr > td,
    html[data-novel-theme="dark"] body[class*="skin-"] .table > tfoot > tr > th {
        background: var(--novel-card) !important;
        color: #e4eaf1 !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .table-striped > tbody > tr:nth-of-type(odd) > td {
        background: #1a222d !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .table-hover > tbody > tr:hover > td {
        background: var(--novel-accent-soft) !important;
    }
    html[data-novel-theme="dark"] body[class*="skin-"] .bg-gray,
    html[data-novel-theme="dark"] body[class*="skin-"] .bg-gray-light {
        background: #222b37 !important;
        color: #e7edf4 !important;
    }

    html[data-novel-theme="dark"] .nav-tabs > li > a,
    html[data-novel-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
        color: #b7c0cc !important;
    }
    html[data-novel-theme="dark"] .nav-tabs > li.active > a,
    html[data-novel-theme="dark"] .nav-tabs > li.active > a:focus,
    html[data-novel-theme="dark"] .nav-tabs > li.active > a:hover,
    html[data-novel-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
        background: var(--novel-card) !important;
        color: #fff !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] .pagination > li > a,
    html[data-novel-theme="dark"] .pagination > li > span {
        background: var(--novel-card) !important;
        color: #dce3ec !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] .text-muted,
    html[data-novel-theme="dark"] .help-block,
    html[data-novel-theme="dark"] small {
        color: var(--novel-muted) !important;
    }

    html[data-novel-theme="dark"] #calculator button.btn {
        background: #1f2935 !important;
        border-color: #354253 !important;
        color: #e8edf4 !important;
    }
    html[data-novel-theme="dark"] #calculator button.btn:hover,
    html[data-novel-theme="dark"] #calculator button[id="%"],
    html[data-novel-theme="dark"] #calculator button[id="/"],
    html[data-novel-theme="dark"] #calculator button[id="*"],
    html[data-novel-theme="dark"] #calculator button[id="-"],
    html[data-novel-theme="dark"] #calculator button[id="+"],
    html[data-novel-theme="dark"] #calculator #allClear,
    html[data-novel-theme="dark"] #calculator #clear,
    html[data-novel-theme="dark"] #calculator #equals {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) {
        background: radial-gradient(circle at 18% 8%, var(--novel-page-soft-dark) 0, #0d1219 46%, #080b10 100%) !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) form,
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) .card__design,
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) .login-box-body,
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) .register-box-body,
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) div[style*="background-color: white"],
    html[data-novel-theme="dark"] body:not([class*="skin-"]):not(.lockscreen) div[style*="background-color:white"] {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
}

/* Medium screens: controls stay compact and do not crowd ERP actions. */
@media screen and (max-width: 1199px) {
    .novel-theme-controls { gap: 3px; margin-left: 3px; margin-right: 3px; }
    .novel-theme-btn { width: 30px; height: 30px; border-radius: 7px; }
}

/* Mobile: preserve operational navbar space. Palette remains available but compact. */
@media screen and (max-width: 767px) {
    .novel-theme-controls { margin: 9px 2px 0; gap: 3px; }
    .novel-theme-btn { width: 30px; height: 30px; }
    .novel-palette-menu { width: 220px; left: auto; right: 0; }
    html[dir="rtl"] .novel-palette-menu { right: auto; left: 0; }
    body[class*="skin-"] .sidebar-menu > li.header { font-size: 14.5px !important; }
}

/* Preserve AdminLTE collapsed sidebar behavior explicitly. */
@media screen and (min-width: 768px) {
    body.sidebar-mini.sidebar-collapse[class*="skin-"] .sidebar-menu > li.header {
        display: none !important;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Printing remains exactly outside the theme. */
@media print {
    .novel-theme-controls,
    .novel-auth-controls {
        display: none !important;
    }
}

/* =========================================================
   POS / RESTAURANT LOCKSCREEN LAYOUT COMPLETION
   Same presentation layer; no POS/restaurant logic is changed.
   ========================================================= */
@media screen {
    body.lockscreen {
        background: var(--novel-page-soft) !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-bg="clean"] body.lockscreen { background: #f4f6f9 !important; }

    body.lockscreen .box,
    body.lockscreen .panel,
    body.lockscreen .modal-content,
    body.lockscreen .info-box,
    body.lockscreen .well,
    body.lockscreen .list-group-item,
    body.lockscreen .table-responsive {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
        border-radius: var(--novel-radius);
    }
    body.lockscreen .box > .box-header,
    body.lockscreen .panel > .panel-heading {
        background: linear-gradient(135deg, #343a46, #282e38) !important;
        color: #fff !important;
        border-top: 3px solid var(--novel-accent) !important;
        border-bottom-color: rgba(255,255,255,.08) !important;
    }
    body.lockscreen .box > .box-header .box-title,
    body.lockscreen .box > .box-header a:not(.btn) { color: #fff !important; }
    body.lockscreen .box-body,
    body.lockscreen .panel-body,
    body.lockscreen .modal-body,
    body.lockscreen .modal-footer {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }

    body.lockscreen .form-control,
    body.lockscreen .input-group-addon,
    body.lockscreen .select2-container--default .select2-selection--single,
    body.lockscreen .select2-container--default .select2-selection--multiple {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body.lockscreen .form-control:focus,
    body.lockscreen .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--novel-accent) !important;
        box-shadow: 0 0 0 3px var(--novel-accent-ring) !important;
    }

    body.lockscreen .table > thead > tr > th,
    body.lockscreen table.dataTable thead th {
        background: var(--novel-accent-strong) !important;
        color: #fff !important;
        border-color: var(--novel-accent) !important;
    }
    body.lockscreen .table > tbody > tr > td,
    body.lockscreen .table > tbody > tr > th,
    body.lockscreen .table > tfoot > tr > td,
    body.lockscreen .table > tfoot > tr > th {
        background: var(--novel-card);
        color: var(--novel-ink);
        border-color: var(--novel-border) !important;
    }
    body.lockscreen .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--novel-card-alt); }
    body.lockscreen .table-hover > tbody > tr:hover > td { background: var(--novel-accent-soft) !important; }

    body.lockscreen a.btn.btn-primary,
    body.lockscreen a.btn.btn-info,
    body.lockscreen a.btn.btn-success,
    body.lockscreen a.btn.bg-blue,
    body.lockscreen a.btn.bg-green,
    body.lockscreen a.btn.bg-purple,
    body.lockscreen button.btn.btn-primary,
    body.lockscreen button.btn.btn-info,
    body.lockscreen button.btn.btn-success,
    body.lockscreen button.btn.bg-blue,
    body.lockscreen button.btn.bg-green,
    body.lockscreen button.btn.bg-purple,
    body.lockscreen button.btn.bg-yellow,
    body.lockscreen a.btn.bg-yellow {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    /* Restaurant's small top action strip gets the same selected accent. */
    body.lockscreen .container-fluid > .row.no-print:first-child .btn {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }

    html[data-novel-theme="dark"] body.lockscreen {
        background: #0c1118 !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"][data-novel-bg="soft"] body.lockscreen { background: var(--novel-page-soft-dark) !important; }
    html[data-novel-theme="dark"] body.lockscreen .box,
    html[data-novel-theme="dark"] body.lockscreen .panel,
    html[data-novel-theme="dark"] body.lockscreen .modal-content,
    html[data-novel-theme="dark"] body.lockscreen .info-box,
    html[data-novel-theme="dark"] body.lockscreen .table-responsive,
    html[data-novel-theme="dark"] body.lockscreen .box-body,
    html[data-novel-theme="dark"] body.lockscreen .panel-body,
    html[data-novel-theme="dark"] body.lockscreen .modal-body,
    html[data-novel-theme="dark"] body.lockscreen .modal-footer {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] body.lockscreen .form-control,
    html[data-novel-theme="dark"] body.lockscreen .input-group-addon,
    html[data-novel-theme="dark"] body.lockscreen .select2-container--default .select2-selection--single,
    html[data-novel-theme="dark"] body.lockscreen .select2-container--default .select2-selection--multiple {
        background: #0e141c !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] body.lockscreen .table > tbody > tr > td,
    html[data-novel-theme="dark"] body.lockscreen .table > tbody > tr > th,
    html[data-novel-theme="dark"] body.lockscreen .table > tfoot > tr > td,
    html[data-novel-theme="dark"] body.lockscreen .table > tfoot > tr > th {
        background: var(--novel-card) !important;
        color: #e4eaf1 !important;
    }
    html[data-novel-theme="dark"] body.lockscreen .table-striped > tbody > tr:nth-of-type(odd) > td {
        background: #1a222d !important;
    }
}

/* Internal plain layouts used by Repair / Installment modules. */
@media screen {
    body.novel-plain-layout {
        background: var(--novel-page-soft) !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-bg="clean"] body.novel-plain-layout { background: #f4f6f9 !important; }
    body.novel-plain-layout > .wrapper,
    body.novel-plain-layout .wrapper > .container-fluid {
        background: transparent !important;
        color: var(--novel-ink) !important;
    }
    body.novel-plain-layout .box,
    body.novel-plain-layout .panel,
    body.novel-plain-layout .modal-content,
    body.novel-plain-layout .well,
    body.novel-plain-layout .table-responsive {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body.novel-plain-layout .box > .box-header,
    body.novel-plain-layout .panel > .panel-heading {
        background: linear-gradient(135deg, var(--novel-accent-strong), var(--novel-accent)) !important;
        color: #fff !important;
        border-top: 3px solid var(--novel-accent-strong) !important;
    }
    body.novel-plain-layout .box-body,
    body.novel-plain-layout .panel-body,
    body.novel-plain-layout .modal-body,
    body.novel-plain-layout .modal-footer {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body.novel-plain-layout .form-control,
    body.novel-plain-layout .input-group-addon,
    body.novel-plain-layout .select2-container--default .select2-selection--single,
    body.novel-plain-layout .select2-container--default .select2-selection--multiple {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body.novel-plain-layout .table > thead > tr > th,
    body.novel-plain-layout table.dataTable thead th {
        background: var(--novel-table-head) !important;
        color: #fff !important;
    }
    body.novel-plain-layout .table > tbody > tr > td,
    body.novel-plain-layout .table > tfoot > tr > td {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    body.novel-plain-layout .btn-primary,
    body.novel-plain-layout .btn-info,
    body.novel-plain-layout .btn-success,
    body.novel-plain-layout .btn.bg-blue,
    body.novel-plain-layout .btn.bg-green,
    body.novel-plain-layout .btn.bg-purple {
        background: var(--novel-accent) !important;
        border-color: var(--novel-accent-strong) !important;
        color: #fff !important;
    }
    html[data-novel-theme="dark"] body.novel-plain-layout {
        background: #0c1118 !important;
        color: var(--novel-ink) !important;
    }
    html[data-novel-theme="dark"][data-novel-bg="soft"] body.novel-plain-layout { background: var(--novel-page-soft-dark) !important; }
    html[data-novel-theme="dark"] body.novel-plain-layout .box,
    html[data-novel-theme="dark"] body.novel-plain-layout .panel,
    html[data-novel-theme="dark"] body.novel-plain-layout .modal-content,
    html[data-novel-theme="dark"] body.novel-plain-layout .box-body,
    html[data-novel-theme="dark"] body.novel-plain-layout .panel-body,
    html[data-novel-theme="dark"] body.novel-plain-layout .modal-body,
    html[data-novel-theme="dark"] body.novel-plain-layout .modal-footer,
    html[data-novel-theme="dark"] body.novel-plain-layout .table-responsive {
        background: var(--novel-card) !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
    html[data-novel-theme="dark"] body.novel-plain-layout .form-control,
    html[data-novel-theme="dark"] body.novel-plain-layout .input-group-addon,
    html[data-novel-theme="dark"] body.novel-plain-layout .select2-container--default .select2-selection--single,
    html[data-novel-theme="dark"] body.novel-plain-layout .select2-container--default .select2-selection--multiple {
        background: #0e141c !important;
        color: var(--novel-ink) !important;
        border-color: var(--novel-border) !important;
    }
}