/* Project-wide modern UI layer. Loaded after Metronic/Bootstrap so legacy views keep working. */
:root {
    --app-ink: #172033;
    --app-muted: #6e7c90;
    --app-line: #dbe5f0;
    --app-soft-line: #edf2f7;
    --app-surface: #fbfcfe;
    --app-input: #fcfdff;
    --app-soft: #f6f9fc;
    --app-primary: #3f6fb4;
    --app-primary-dark: #2f578f;
    --app-teal: #7ec7d2;
    --app-teal-dark: #2f7f8f;
    --app-purple: #7d4aba;
    --app-orange: #d8902f;
    --app-danger: #c94d5d;
    --app-radius: 8px;
    --app-shadow: 0 14px 34px rgba(31, 45, 61, .10);
    --app-body-bg: #edf2f7;
    --app-content-bg: #edf2f7;
    --app-header-bg: #172033;
    --app-header-soft: rgba(255, 255, 255, .08);
    --app-title-gradient: linear-gradient(135deg, #182136 0%, #2e4566 58%, #86bfcb 100%);
    --app-card-head: linear-gradient(135deg, #263553 0%, #3b5d82 100%);
    --app-table-head: linear-gradient(180deg, #477c8b 0%, #335f72 100%);
    --app-row-hover: #eef8fa;
    --app-default-btn: #f7fafc;
    color-scheme: light;
}

html[data-theme="dark"] {
    --app-ink: #e7edf6;
    --app-muted: #9fb0c7;
    --app-line: #34445d;
    --app-soft-line: #28364d;
    --app-surface: #172234;
    --app-input: #101827;
    --app-soft: #111c2c;
    --app-primary: #6f9ee6;
    --app-primary-dark: #4d7fc3;
    --app-teal: #69c7d3;
    --app-teal-dark: #3d96a5;
    --app-purple: #aa7ee0;
    --app-orange: #e0a24d;
    --app-danger: #e36d7c;
    --app-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    --app-body-bg: #0d1420;
    --app-content-bg: #0f1826;
    --app-header-bg: #0a111d;
    --app-header-soft: rgba(255, 255, 255, .10);
    --app-title-gradient: linear-gradient(135deg, #101a2a 0%, #193149 58%, #256172 100%);
    --app-card-head: linear-gradient(135deg, #172236 0%, #244866 100%);
    --app-table-head: linear-gradient(180deg, #256172 0%, #163c4c 100%);
    --app-row-hover: #1a3442;
    --app-default-btn: #202c3f;
    color-scheme: dark;
}

html,
body {
    background: var(--app-body-bg) !important;
}

body.page-content-white {
    color: var(--app-ink);
}

.page-content {
    color: var(--app-ink);
}

.page-content > .row,
.page-content > .portlet,
.page-content > .panel,
.page-content > form,
.page-content > div:not(.layout-page-title):not(.modal):not(.hidden) {
    max-width: 100%;
}

.layout-page-title {
    border: 0 !important;
    background: var(--app-title-gradient) !important;
    box-shadow: 0 14px 34px rgba(23, 32, 51, .18) !important;
}

.layout-title-icon {
    background: #b7e7ec !important;
    color: #172033 !important;
}

.portlet.light,
.portlet.box,
.panel,
.well,
.service-block,
.tableShadow {
    overflow: hidden;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow) !important;
}

.portlet.light > .portlet-title,
.portlet.box > .portlet-title,
.panel-heading,
.modal-header {
    min-height: 58px;
    padding: 15px 18px !important;
    color: #fff !important;
    background: var(--app-card-head) !important;
    border: 0 !important;
}

.portlet.light > .portlet-title .caption,
.portlet.box > .portlet-title .caption,
.panel-heading,
.modal-title {
    color: #fff !important;
    font-weight: 800 !important;
}

.portlet.light > .portlet-body,
.portlet.box > .portlet-body,
.panel-body {
    padding: 18px !important;
    background: var(--app-surface) !important;
}

.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
.select2-container .select2-choice,
.select2-container--bootstrap .select2-selection {
    min-height: 40px;
    border: 1px solid #cfd9e6 !important;
    border-radius: 7px !important;
    background: var(--app-input) !important;
    color: var(--app-ink) !important;
    box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea.form-control:focus,
.select2-container-active .select2-choice,
.select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: var(--app-teal) !important;
    box-shadow: 0 0 0 3px rgba(126, 199, 210, .22) !important;
}

.form-horizontal .control-label,
label {
    color: var(--app-ink) !important;
    font-weight: 700 !important;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--app-primary);
}

.btn {
    min-height: 38px;
    border-radius: 7px !important;
    border: 0 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(31, 45, 61, .12);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(31, 45, 61, .16);
    filter: saturate(1.04);
}

.btn-primary,
.blue.btn,
.btn.blue {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%) !important;
    color: #fff !important;
}

.btn-success,
.green.btn,
.btn.green {
    background: linear-gradient(135deg, var(--app-teal-dark) 0%, #24687a 100%) !important;
    color: #fff !important;
}

.btn-warning,
.yellow.btn,
.btn.yellow {
    background: linear-gradient(135deg, var(--app-orange) 0%, #b45d31 100%) !important;
    color: #fff !important;
}

.btn-danger,
.red.btn,
.btn.red {
    background: linear-gradient(135deg, var(--app-danger) 0%, #9f3447 100%) !important;
    color: #fff !important;
}

.btn-default,
.btn-secondary,
.default.btn,
.btn.default {
    border: 1px solid var(--app-line) !important;
    background: var(--app-default-btn) !important;
    color: var(--app-ink) !important;
}

.purple.btn,
.btn.purple,
.btn-purple {
    background: linear-gradient(135deg, var(--app-purple) 0%, #65369e 100%) !important;
    color: #fff !important;
}

.table,
table.dataTable {
    overflow: hidden;
    border: 1px solid var(--app-soft-line) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface) !important;
}

.table > thead > tr > th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    height: 48px;
    border-left-color: #3c6879 !important;
    border-right-color: #4f7c8c !important;
    border-top-color: transparent !important;
    border-bottom-color: rgba(18, 54, 70, .35) !important;
    color: #fff !important;
    background: var(--app-table-head) !important;
    font-weight: 800 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.table > thead > tr:first-child > th:first-child,
table.dataTable > thead > tr:first-child > th:first-child {
    border-top-right-radius: 8px !important;
}

.table > thead > tr:first-child > th:last-child,
table.dataTable > thead > tr:first-child > th:last-child {
    border-top-left-radius: 8px !important;
}

.table > thead > tr > th + th,
table.dataTable > thead > tr > th + th {
    box-shadow: inset 1px 0 0 rgba(31, 79, 95, .45);
}

.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    border-color: #e8eef5 !important;
    color: var(--app-muted);
    vertical-align: middle !important;
}

.table > tbody > tr:nth-child(odd) > td,
table.dataTable > tbody > tr:nth-child(odd) > td {
    background: #f8fafc;
}

.table > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td {
    background: var(--app-row-hover) !important;
}

.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 38px;
    border: 1px solid #cfd9e6 !important;
    border-radius: 7px !important;
    background: var(--app-input) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span {
    min-width: 40px;
    min-height: 38px;
    color: var(--app-primary) !important;
    border-color: var(--app-line) !important;
    background: var(--app-input) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination > .active > a,
.pagination > .active > span {
    color: #fff !important;
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.modal-content {
    overflow: hidden;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 60px rgba(17, 24, 39, .24) !important;
}

.modal-body {
    background: var(--app-surface);
}

.modal-footer {
    border-top: 1px solid var(--app-soft-line) !important;
    background: var(--app-soft);
}

.note,
.alert {
    border-radius: 7px !important;
    border-width: 0 4px 0 0 !important;
}

.dropdown-menu {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 42px rgba(17, 24, 39, .22) !important;
}

.select2-drop,
.select2-dropdown {
    border-color: var(--app-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 34px rgba(31, 45, 61, .18) !important;
}

.select2-results .select2-highlighted,
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background: #eef8fa !important;
    color: #172033 !important;
}

.page-footer {
    background: #172033 !important;
}

.theme-mode-item {
    display: flex !important;
    align-items: center;
    min-height: 56px;
    padding: 0 4px;
}

.theme-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    min-height: 38px;
    padding: 8px 12px;
    color: #d9e3f0;
    background: var(--app-header-soft);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    font-weight: 800;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.theme-mode-toggle:hover,
.theme-mode-toggle:focus {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .25);
    outline: 0;
}

.theme-mode-icon {
    font-size: 15px;
}

.theme-mode-icon-light,
html[data-theme="dark"] .theme-mode-icon-dark {
    display: none;
}

html[data-theme="dark"] .theme-mode-icon-light {
    display: inline-block;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .page-content-wrapper {
    color: var(--app-ink) !important;
    background: var(--app-content-bg) !important;
}

html[data-theme="dark"] .page-header.navbar {
    background: #05080f !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .page-header.navbar .page-header-inner,
html[data-theme="dark"] .page-header.navbar .page-logo,
html[data-theme="dark"] .page-header.navbar .top-menu,
html[data-theme="dark"] .page-header.navbar .hor-menu {
    background: #05080f !important;
}

html[data-theme="dark"] .page-header.navbar .page-logo a {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] .page-header.navbar .hor-menu .navbar-nav > li > a,
html[data-theme="dark"] .page-header.navbar .hor-menu .menu-top-item > span > a {
    background: rgba(70, 111, 166, .82) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] .page-header.navbar .hor-menu .dropdown-menu,
html[data-theme="dark"] .dropdown-menu {
    background: #172234 !important;
    border: 1px solid var(--app-line) !important;
}

html[data-theme="dark"] .page-header.navbar .hor-menu .dropdown-menu a {
    color: #dbe7f5 !important;
    background: rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] .page-header.navbar .hor-menu .dropdown-menu a:hover,
html[data-theme="dark"] .page-header.navbar .hor-menu .dropdown-menu a:focus {
    background: #2d5e81 !important;
}

html[data-theme="dark"] .portlet.light,
html[data-theme="dark"] .portlet.box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well,
html[data-theme="dark"] .service-block,
html[data-theme="dark"] .tableShadow,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .form-body,
html[data-theme="dark"] .payment-transfer-card,
html[data-theme="dark"] .item-list-panel,
html[data-theme="dark"] .payment-table-wrap,
html[data-theme="dark"] .item-table-wrap {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .portlet.light > .portlet-body,
html[data-theme="dark"] .portlet.box > .portlet-body,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] table.dataTable > tbody > tr > td {
    border-color: var(--app-soft-line) !important;
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .table > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] table.dataTable > tbody > tr:nth-child(odd) > td {
    background: var(--app-soft) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    border-color: var(--app-line) !important;
    background: var(--app-input) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .select2-drop,
html[data-theme="dark"] .select2-dropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-line) !important;
}

html[data-theme="dark"] .select2-results .select2-highlighted,
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background: #21384f !important;
    color: #fff !important;
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: var(--app-line) !important;
    background: var(--app-input) !important;
    color: var(--app-primary) !important;
}

html[data-theme="dark"] #header_notification_bar .dropdown-menu,
html[data-theme="dark"] #header_notification_bar .notification-scroller {
    background: var(--app-soft) !important;
}

html[data-theme="dark"] #header_notification_bar .notification-panel-head {
    color: var(--app-ink);
    background: var(--app-card-head);
    border-color: var(--app-line);
}

html[data-theme="dark"] #notificationList .notification-item,
html[data-theme="dark"] .customer-setting-card,
html[data-theme="dark"] .customer-setting-option {
    border-color: var(--app-line);
    background: var(--app-surface);
    color: var(--app-ink);
}

html[data-theme="dark"] .page-footer {
    background: #0a111d !important;
}

/* Broad dark-mode coverage for legacy views with inline page styles. */
html[data-theme="dark"] {
    --items-surface: var(--app-surface);
    --items-soft: var(--app-soft);
    --items-line: var(--app-line);
    --items-text: var(--app-ink);
    --items-muted: var(--app-muted);
    --pay-surface: var(--app-surface);
    --pay-soft: var(--app-soft);
    --pay-line: var(--app-line);
    --pay-text: var(--app-ink);
    --pay-muted: var(--app-muted);
}

html[data-theme="dark"] body[style],
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .page-container,
html[data-theme="dark"] .page-content-wrapper,
html[data-theme="dark"] .page-content {
    background-color: var(--app-content-bg) !important;
    background-image: none !important;
}

html[data-theme="dark"] .page-content,
html[data-theme="dark"] .page-content p,
html[data-theme="dark"] .page-content span:not(.label):not(.badge):not(.theme-mode-text),
html[data-theme="dark"] .page-content div:not(.btn):not(.label):not(.badge),
html[data-theme="dark"] .page-content td,
html[data-theme="dark"] .page-content th,
html[data-theme="dark"] .page-content li,
html[data-theme="dark"] .page-content font,
html[data-theme="dark"] .page-content b,
html[data-theme="dark"] .page-content strong {
    color: var(--app-ink);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .small,
html[data-theme="dark"] small,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] a:not(.btn) {
    color: #8fc2ff;
}

html[data-theme="dark"] a:not(.btn):hover,
html[data-theme="dark"] a:not(.btn):focus {
    color: #b9dcff;
}

html[data-theme="dark"] section,
html[data-theme="dark"] .body-content,
html[data-theme="dark"] .content,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .row,
html[data-theme="dark"] .col-md-12[style*="background-color:white"],
html[data-theme="dark"] .col-md-12[style*="background-color: white"],
html[data-theme="dark"] div[style*="background-color:white"],
html[data-theme="dark"] div[style*="background-color: white"],
html[data-theme="dark"] div[style*="background-color:#fff"],
html[data-theme="dark"] div[style*="background-color: #fff"],
html[data-theme="dark"] div[style*="background-color:#ffffff"],
html[data-theme="dark"] div[style*="background-color: #ffffff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] div[style*="background:#ffffff"],
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] .h3[style*="background-color:white"] {
    background: transparent !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .portlet,
html[data-theme="dark"] .portlet-body,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .well,
html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .form-body,
html[data-theme="dark"] .form-actions,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .service-block,
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-narrow,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .vehicle-installment-panel,
html[data-theme="dark"] .vehicle-summary-card,
html[data-theme="dark"] .document-card,
html[data-theme="dark"] .branch-card,
html[data-theme="dark"] .branch-panel,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .item-panel,
html[data-theme="dark"] .item-card,
html[data-theme="dark"] .sale-card,
html[data-theme="dark"] .purchase-card,
html[data-theme="dark"] .cash-card,
html[data-theme="dark"] .expense-card,
html[data-theme="dark"] .stock-card,
html[data-theme="dark"] .warning-card,
html[data-theme="dark"] #PlanSummaryReport {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    background-image: none !important;
    color: var(--app-ink) !important;
    box-shadow: var(--app-shadow) !important;
}

html[data-theme="dark"] .shadow::before,
html[data-theme="dark"] .shadow-narrow::before {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .portlet-title,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] div.portlet-title[style*="background-color"] {
    border-color: var(--app-line) !important;
    background: var(--app-card-head) !important;
    color: #fff !important;
}

html[data-theme="dark"] .portlet-title *,
html[data-theme="dark"] .panel-heading *,
html[data-theme="dark"] .modal-header *,
html[data-theme="dark"] .layout-page-title *,
html[data-theme="dark"] .btn *,
html[data-theme="dark"] .label *,
html[data-theme="dark"] .badge * {
    color: inherit !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] table,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_scroll,
html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollFoot {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] table.dataTable > tbody > tr > td,
html[data-theme="dark"] table.dataTable > tbody > tr > th,
html[data-theme="dark"] table.table-bordered > tbody > tr > td,
html[data-theme="dark"] table.table-bordered > tbody > tr > th {
    border-color: var(--app-soft-line) !important;
    background-color: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd,
html[data-theme="dark"] table.dataTable.display > tbody > tr.odd,
html[data-theme="dark"] table.dataTable > tbody > tr:nth-child(odd) > td {
    background-color: var(--app-soft) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover,
html[data-theme="dark"] table.dataTable.display > tbody > tr:hover,
html[data-theme="dark"] table.dataTable > tbody > tr:hover > td {
    background-color: var(--app-row-hover) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead[style*="background-color:black"],
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > td {
    border-color: #245066 !important;
    background: var(--app-table-head) !important;
    color: #fff !important;
}

html[data-theme="dark"] tr[style*="background-color:#6dc6f8"],
html[data-theme="dark"] tr[style*="background-color: #6dc6f8"] {
    background-color: #244b64 !important;
    color: #e9f4ff !important;
}

html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"] {
    color: var(--app-ink) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection,
html[data-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-theme="dark"] .ms-container .ms-list {
    border-color: var(--app-line) !important;
    background: var(--app-input) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7789a4 !important;
}

html[data-theme="dark"] input[disabled],
html[data-theme="dark"] select[disabled],
html[data-theme="dark"] textarea[disabled],
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control {
    background: #182335 !important;
    color: #8191a8 !important;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-menu-default,
html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .user-menu-section,
html[data-theme="dark"] .user-menu-head {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus,
html[data-theme="dark"] .nav > li > a:hover,
html[data-theme="dark"] .nav > li > a:focus {
    border-color: var(--app-line) !important;
    background: #21384f !important;
    color: #fff !important;
}

html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-title,
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .bootstrap-datetimepicker-widget,
html[data-theme="dark"] .datepicker-dropdown {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused,
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover {
    background: var(--app-primary-dark) !important;
    color: #fff !important;
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .note {
    border-color: var(--app-line) !important;
    background: #1b2b3e !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .note-success {
    background: #17392e !important;
    color: #bdf2d5 !important;
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .note-info {
    background: #17334a !important;
    color: #bde2ff !important;
}

html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .note-warning {
    background: #453419 !important;
    color: #ffe0a3 !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .note-danger {
    background: #44202a !important;
    color: #ffc2ca !important;
}

html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-kicker,
html[data-theme="dark"] .login-alert {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .login-heading h2,
html[data-theme="dark"] .login-heading p,
html[data-theme="dark"] .login-field label,
html[data-theme="dark"] .login-footer-note {
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .login-shell::before,
html[data-theme="dark"] .login-shell::after,
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
    opacity: .28;
}

html[data-theme="dark"] .highcharts-background {
    fill: var(--app-surface) !important;
}

html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-data-label text {
    fill: var(--app-ink) !important;
    color: var(--app-ink) !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: var(--app-soft-line) !important;
}

html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--app-line) !important;
}

@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] .print-area,
    html[data-theme="dark"] .bill-print,
    html[data-theme="dark"] .vehicle-bill-print {
        background: #fff !important;
        color: #000 !important;
    }
}

@media (max-width: 991px) {
    .portlet.light > .portlet-body,
    .portlet.box > .portlet-body,
    .panel-body {
        padding: 14px !important;
    }

    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
    }
}