:root {
    color-scheme: light;
    --fc-bg: #f4f6f9;
    --fc-surface: #ffffff;
    --fc-surface-2: #f8fafc;
    --fc-border: #dbe3ec;
    --fc-text: #1f2937;
    --fc-muted: #64748b;
    --fc-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --fc-bg: #0b1120;
    --fc-surface: #111827;
    --fc-surface-2: #182235;
    --fc-border: #2b3a52;
    --fc-text: #e5edf7;
    --fc-muted: #9fb0c6;
    --fc-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.freecom-theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10050;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 86px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: #111827;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.freecom-theme-toggle:hover { transform: translateY(-2px); }
.theme-icon { font-size: 18px; line-height: 1; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .freecom-theme-toggle { background: #f8fafc; color: #172033; border-color: #dbe3ec; }
html[data-theme="dark"] .theme-icon-sun { display: inline; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] #scrollable-container,
html[data-theme="dark"] .right-col,
html[data-theme="dark"] .wrapper {
    background-color: var(--fc-bg) !important;
    background-image: none !important;
    color: var(--fc-text) !important;
}

html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tw-bg-white,
html[data-theme="dark"] [class*="tw-dw-bg-base-"],
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .login-form {
    background-color: var(--fc-surface) !important;
    color: var(--fc-text) !important;
    border-color: var(--fc-border) !important;
}

html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > thead > tr > th {
    border-color: var(--fc-border) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .tw-bg-gray-50,
html[data-theme="dark"] .tw-bg-gray-100 {
    background-color: var(--fc-surface-2) !important;
    color: var(--fc-text) !important;
}

/* DataTables moves/clones wide table footers into a separate scroll container. */
html[data-theme="dark"] .dataTables_scrollFoot,
html[data-theme="dark"] .dataTables_scrollFootInner,
html[data-theme="dark"] table.dataTable tfoot,
html[data-theme="dark"] table.dataTable tfoot tr,
html[data-theme="dark"] table.dataTable tfoot th,
html[data-theme="dark"] table.dataTable tfoot td,
html[data-theme="dark"] table.dataTable .footer-total,
html[data-theme="dark"] table.dataTable .footer-total > th,
html[data-theme="dark"] table.dataTable .footer-total > td,
html[data-theme="dark"] tr.footer-total.bg-gray,
html[data-theme="dark"] tr.footer-total.bg-gray > th,
html[data-theme="dark"] tr.footer-total.bg-gray > td {
    background: #182337 !important;
    color: var(--fc-text) !important;
    border-color: var(--fc-border) !important;
}

html[data-theme="dark"] table.dataTable tfoot strong,
html[data-theme="dark"] table.dataTable tfoot span,
html[data-theme="dark"] table.dataTable tfoot div {
    color: var(--fc-text) !important;
}

/* Some DataTables versions strip the original table/row classes from the cloned footer. */
html[data-theme="dark"] div.dataTables_scrollFoot,
html[data-theme="dark"] div.dataTables_scrollFoot > div,
html[data-theme="dark"] div.dataTables_scrollFoot table,
html[data-theme="dark"] div.dataTables_scrollFoot tfoot,
html[data-theme="dark"] div.dataTables_scrollFoot tr,
html[data-theme="dark"] div.dataTables_scrollFoot th,
html[data-theme="dark"] div.dataTables_scrollFoot td,
html[data-theme="dark"] #sell_table tfoot,
html[data-theme="dark"] #sell_table tfoot tr,
html[data-theme="dark"] #sell_table tfoot th,
html[data-theme="dark"] #sell_table tfoot td {
    background-color: #182337 !important;
    background-image: none !important;
    color: #edf2f8 !important;
    border-color: var(--fc-border) !important;
}

html[data-theme="dark"] div.dataTables_scrollFoot * {
    color: #edf2f8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .select2-selection,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .input-group-addon {
    background-color: #0f172a !important;
    color: var(--fc-text) !important;
    border-color: var(--fc-border) !important;
}

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

html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] label, html[data-theme="dark"] p,
html[data-theme="dark"] td, html[data-theme="dark"] th,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .tw-text-black,
html[data-theme="dark"] .tw-text-gray-900,
html[data-theme="dark"] .tw-text-gray-800,
html[data-theme="dark"] .tw-text-gray-700,
html[data-theme="dark"] .tw-text-gray-600 {
    color: var(--fc-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .tw-text-gray-500 { color: var(--fc-muted) !important; }

html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .skin-blue-light .main-sidebar,
html[data-theme="dark"] .sidebar-menu,
html[data-theme="dark"] .sidebar-menu > li > .treeview-menu {
    background: #0d1628 !important;
}

html[data-theme="dark"] .main-sidebar a,
html[data-theme="dark"] .sidebar-menu > li > a,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a { color: #c8d4e5 !important; }
html[data-theme="dark"] .sidebar-menu > li:hover > a,
html[data-theme="dark"] .sidebar-menu > li.active > a { background: #1b2940 !important; color: #fff !important; }

/* Compact DM HUB identity in the sidebar header. */
.freecom-sidebar-brand {
    min-height: 66px !important;
    height: 66px !important;
    gap: 9px !important;
    padding: 7px 10px !important;
    text-decoration: none !important;
    overflow: hidden;
}
.freecom-sidebar-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border: 1px solid rgba(245, 158, 11, .34);
    border-radius: 13px;
    background: rgba(7, 11, 19, .74);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24), inset 0 0 14px rgba(245, 158, 11, .07);
    overflow: hidden;
}
.freecom-sidebar-logo {
    display: block;
    width: 39px !important;
    height: 39px !important;
    max-width: 39px !important;
    max-height: 39px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    transform: scale(1.18) !important;
    transform-origin: center;
}
.freecom-sidebar-brand-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}
.freecom-sidebar-business-name {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.freecom-sidebar-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #aebdd0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.freecom-sidebar-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .12), 0 0 9px rgba(74, 222, 128, .5);
}
html[data-theme="dark"] .freecom-sidebar-brand {
    background: linear-gradient(135deg, #111a29, #080d16) !important;
    border-color: #2a374b !important;
}
html[data-theme="dark"] .freecom-sidebar-brand:hover {
    background: linear-gradient(135deg, #162235, #0b111d) !important;
}

html[data-theme="dark"] .nav-tabs { border-color: var(--fc-border) !important; }
html[data-theme="dark"] .nav-tabs > li > a { color: var(--fc-muted) !important; }
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover { background: var(--fc-surface) !important; color: var(--fc-text) !important; border-color: var(--fc-border) !important; }

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span { background: var(--fc-surface) !important; color: var(--fc-text) !important; border-color: var(--fc-border) !important; }
html[data-theme="dark"] hr { border-color: var(--fc-border) !important; }
html[data-theme="dark"] .close { color: #fff; opacity: .8; }

/* Full dark mode: remove business skin colors and keep every workspace surface neutral. */
html[data-theme="dark"] body > .tw-flex > main,
html[data-theme="dark"] body > .tw-flex > main > div:first-child,
html[data-theme="dark"] main > .tw-transition-all,
html[data-theme="dark"] .content-header-custom,
html[data-theme="dark"] .content-custom,
html[data-theme="dark"] .tw-bg-gradient-to-r,
html[data-theme="dark"] [class*="tw-from-primary-"],
html[data-theme="dark"] [class*="tw-to-primary-"],
html[data-theme="dark"] [class*="tw-from-blue-"],
html[data-theme="dark"] [class*="tw-to-blue-"] {
    background-color: #080d16 !important;
    background-image: none !important;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-header .navbar,
html[data-theme="dark"] .main-header .logo,
html[data-theme="dark"] .pos-header,
html[data-theme="dark"] .pos-header > div {
    background: #080d16 !important;
    border-color: #263247 !important;
}

html[data-theme="dark"] .tw-bg-primary-800,
html[data-theme="dark"] .tw-bg-primary-900,
html[data-theme="dark"] [class*="tw-bg-blue-"],
html[data-theme="dark"] [class*="tw-bg-primary-"] {
    background-color: #182231 !important;
}

html[data-theme="dark"] [class*="hover:tw-bg-primary-"]:hover,
html[data-theme="dark"] [class*="hover:tw-bg-blue-"]:hover {
    background-color: #263247 !important;
}

html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="tw-rounded-xl"],
html[data-theme="dark"] [class*="tw-rounded-2xl"] {
    border-color: #39465b !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .highcharts-container,
html[data-theme="dark"] .highcharts-root,
html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background {
    background: #101722 !important;
    fill: #101722 !important;
}
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle { fill: #d5deeb !important; color: #d5deeb !important; }
html[data-theme="dark"] .highcharts-grid-line { stroke: #263247 !important; }
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick { stroke: #46536a !important; }

html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .dt-button,
html[data-theme="dark"] button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.freecom-theme-toggle) {
    background-color: #182231 !important;
    color: #f1f5f9 !important;
    border-color: #46536a !important;
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .dt-button:hover { background-color: #263247 !important; color: #fff !important; }

html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollBody {
    background: #111827 !important;
    color: #e5edf7 !important;
    border-color: #39465b !important;
}
html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .datepicker table tr td.active { background: #374151 !important; color: #fff !important; }

html[data-theme="dark"] a { color: #cbd5e1; }
html[data-theme="dark"] a:hover { color: #ffffff; }
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] [class*="tw-text-primary-"],
html[data-theme="dark"] [class*="tw-text-blue-"],
html[data-theme="dark"] [class*="tw-text-sky-"],
html[data-theme="dark"] [class*="tw-text-cyan-"] { color: #e2e8f0 !important; }

@media (max-width: 640px) {
    .freecom-theme-toggle { right: 12px; bottom: 12px; min-width: 44px; padding: 0 12px; }
    .freecom-theme-toggle .theme-label { display: none; }
}

/* Centered branded login */
.freecom-login-layout {
    min-height: calc(100vh - 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 !important;
}
.freecom-demo-column, .freecom-login-spacer { display: none; }
.freecom-login-brand,
.freecom-login-form-column {
    width: 390px;
    min-height: 440px;
}
.freecom-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px;
    color: #f8fafc;
    background: linear-gradient(145deg, #171f2d, #0a0f18);
    border: 1px solid #303b4e;
    border-right: 0;
    border-radius: 24px 0 0 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
.freecom-logo-frame {
    width: 210px;
    height: 210px;
    padding: 13px;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.freecom-logo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.28);
    transform-origin: center;
}
.freecom-brand-copy { margin-top: 24px; text-align: center; letter-spacing: .08em; }
.freecom-brand-kicker { color: #f59e0b; font-size: 11px; font-weight: 800; letter-spacing: .28em; }
.freecom-brand-copy h1 { margin: 7px 0 0; color: #fff !important; font-size: 30px; font-weight: 800; }
.freecom-brand-copy p { margin: 3px 0 0; color: #b9c4d5 !important; font-size: 13px; font-weight: 700; }
.freecom-login-form-column {
    display: flex;
    align-items: center;
    padding: 38px !important;
    background: #111827;
    border: 1px solid #303b4e;
    border-radius: 0 24px 24px 0;
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
.freecom-login-form-column > div { width: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Exact legacy and Tailwind surfaces that must remain dark. */
html[data-theme="dark"] .side-bar,
html[data-theme="dark"] #side-bar,
html[data-theme="dark"] #side-bar > div,
html[data-theme="dark"] #side-bar .tw-bg-gray-200,
html[data-theme="dark"] #side-bar .tw-bg-gray-100,
html[data-theme="dark"] #side-bar a.tw-bg-gray-200,
html[data-theme="dark"] #side-bar a:focus {
    background: #141d2c !important;
    color: #f4f7fb !important;
}
html[data-theme="dark"] #side-bar .chiled { background: #0d1420 !important; }
html[data-theme="dark"] #side-bar .chiled a,
html[data-theme="dark"] #side-bar .chiled span { color: #d7e0ec !important; }
html[data-theme="dark"] #side-bar .tw-bg-gray-200.tw-absolute { background: #39465b !important; }

html[data-theme="dark"] .box-body,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .well,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .pos-tab,
html[data-theme="dark"] .pos-tab-content,
html[data-theme="dark"] .pos-tab-container,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper > div,
html[data-theme="dark"] .navbar-default,
html[data-theme="dark"] .navbar-default .navbar-collapse,
html[data-theme="dark"] .navbar-default .navbar-nav,
html[data-theme="dark"] .navbar-default .navbar-header {
    background: #111827 !important;
    color: #eef3fa !important;
    border-color: #39465b !important;
}

html[data-theme="dark"] .navbar-default .navbar-brand,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover {
    background: #111827 !important;
    color: #e7edf6 !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a { background: #202b3d !important; color: #fff !important; }

html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:hover,
html[data-theme="dark"] .list-group-item.active:focus {
    background: #151f2f !important;
    color: #dce5f1 !important;
    border-color: #39465b !important;
}
html[data-theme="dark"] .list-group-item.active { background: #2a3548 !important; color: #fff !important; }
html[data-theme="dark"] div.pos-tab-menu div.list-group > a.active:after { border-left-color: #2a3548 !important; }

html[data-theme="dark"] .product_box,
html[data-theme="dark"] #product_list_body .product_box,
html[data-theme="dark"] .tw-dw-card.tw-bg-white,
html[data-theme="dark"] .tw-dw-card.tw-dw-bg-base-100 {
    background: #182231 !important;
    color: #edf2f8 !important;
    border: 1px solid #3b485d !important;
}
html[data-theme="dark"] .product_box:hover { background: #222e40 !important; border-color: #718096 !important; }
html[data-theme="dark"] .product_box .text,
html[data-theme="dark"] .product_box .text_div { color: #edf2f8 !important; }
html[data-theme="dark"] .product_box .image-container { background: #0d1420 !important; border-radius: 10px; }

html[data-theme="dark"] .tw-bg-gray-200,
html[data-theme="dark"] .tw-bg-gray-300,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-light { background-color: #182231 !important; color: #edf2f8 !important; }
html[data-theme="dark"] .tw-ring-gray-200,
html[data-theme="dark"] .tw-border-gray-200 { border-color: #39465b !important; --tw-ring-color: #39465b !important; }

@media (max-width: 850px) {
    .freecom-login-layout { flex-direction: column; padding: 40px 14px 80px; }
    .freecom-login-brand, .freecom-login-form-column { width: min(100%, 440px); min-height: auto; }
    .freecom-login-brand { padding: 24px; border-right: 1px solid #303b4e; border-bottom: 0; border-radius: 22px 22px 0 0; }
    .freecom-logo-frame { width: 128px; height: 128px; border-radius: 20px; }
    .freecom-brand-copy { margin-top: 14px; }
    .freecom-brand-copy h1 { font-size: 24px; }
    .freecom-login-form-column { padding: 26px !important; border-radius: 0 0 22px 22px; }
}