/* =====================================================================
   CloudBiz UI — layered global polish (light theme only)
   ---------------------------------------------------------------------
   Loads AFTER app.css. ADDITIVE ONLY: no markup, JS, or bundle changes.
   Restyles the AdminLTE / Bootstrap 3 shell into a calm, high-trust
   fintech ERP surface — refined typography, tabular numerals for money,
   soft elevation, consistent radius/spacing, clear focus + hover
   affordances. Everything is driven by the tokens in :root so the whole
   look retunes from one place. No dark mode by design.
   Business "Additional CSS" still loads after this and always wins.
   ===================================================================== */

:root {
    /* Brand / accent — one confident blue used for primary actions,
       active state, links and focus. */
    --cb-primary:        #2f6fed;
    --cb-primary-600:    #245fd6;
    --cb-primary-700:    #1e4fb8;
    --cb-primary-050:    #eef4ff;
    --cb-primary-100:    #dbe7ff;

    /* Neutrals (cool gray ramp) */
    --cb-ink:            #1f2733;   /* primary text */
    --cb-ink-soft:       #4b5563;   /* secondary text */
    --cb-muted:          #8a94a6;   /* tertiary / hints */
    --cb-line:           #e6e9ef;   /* hairline borders */
    --cb-line-strong:    #d7dbe3;
    --cb-surface:        #ffffff;   /* cards */
    --cb-canvas:         #f5f7fa;   /* app background */
    --cb-canvas-2:       #eef1f6;

    /* Semantic (muted for a calm ledger feel) */
    --cb-success:        #1f9d57;
    --cb-success-bg:     #e8f7ee;
    --cb-warning:        #c67c05;
    --cb-warning-bg:     #fdf3e2;
    --cb-danger:         #d64545;
    --cb-danger-bg:      #fdecec;
    --cb-info:           #2b8fbf;
    --cb-info-bg:        #e7f4fb;

    /* Shape & elevation */
    --cb-radius:         8px;
    --cb-radius-sm:      6px;
    --cb-radius-pill:    999px;
    --cb-shadow-sm:      0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .05);
    --cb-shadow-md:      0 2px 6px rgba(17, 24, 39, .07), 0 4px 14px rgba(17, 24, 39, .06);
    --cb-shadow-lg:      0 10px 30px rgba(17, 24, 39, .12);
    --cb-focus-ring:     0 0 0 3px rgba(47, 111, 237, .22);

    --cb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --cb-transition:     .15s ease;
}

/* ------------------------------- Base ------------------------------- */
body,
.content-wrapper,
.main-footer,
.wrapper {
    font-family: var(--cb-font);
    color: var(--cb-ink);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .1px;
}
.content-wrapper { background: var(--cb-canvas); }

a { color: var(--cb-primary); transition: color var(--cb-transition); }
a:hover, a:focus { color: var(--cb-primary-700); }

/* Tabular figures everywhere money/quantities live — digits line up. */
.table td, .table th,
.display_currency, .display_currency *,
.info-box-number, .small-box h3, td .label, .direct-chat-timestamp,
input.form-control[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection { background: var(--cb-primary-100); color: var(--cb-ink); }

/* Page header title */
.content-header > h1 {
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--cb-ink);
}
.content-header > h1 > small { color: var(--cb-muted); font-weight: 400; }
.content-header > .breadcrumb { background: transparent; }
.content-header > .breadcrumb > li > a { color: var(--cb-ink-soft); }

/* --------------------------- Cards / boxes -------------------------- */
.box {
    border: 1px solid var(--cb-line);
    border-top: 1px solid var(--cb-line);   /* neutralize AdminLTE's 3px colored top */
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow-sm);
    background: var(--cb-surface);
}
.box.box-solid { box-shadow: var(--cb-shadow-sm); }
.box > .box-header { padding: 14px 18px; border-bottom: 1px solid var(--cb-line); }
.box > .box-header.with-border { border-bottom: 1px solid var(--cb-line); }
.box-header > .box-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cb-ink);
    letter-spacing: -.1px;
}
.box-body { padding: 16px 18px; }

/* Accent rail on the left of colored boxes — subtler than AdminLTE's slab */
.box.box-primary { border-top-color: var(--cb-primary); box-shadow: var(--cb-shadow-sm); }
.box.box-primary  { border-top: 3px solid var(--cb-primary); }
.box.box-info     { border-top: 3px solid var(--cb-info); }
.box.box-success  { border-top: 3px solid var(--cb-success); }
.box.box-warning  { border-top: 3px solid var(--cb-warning); }
.box.box-danger   { border-top: 3px solid var(--cb-danger); }

/* Filters widget (used across reports) reads as a calm toolbar */
.box.box-primary.box-solid > .box-header,
.filters .box-header { background: transparent; color: var(--cb-ink); }

/* ------------------------------ Buttons ----------------------------- */
.btn {
    border-radius: var(--cb-radius-sm);
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid transparent;
    transition: background var(--cb-transition), border-color var(--cb-transition),
                box-shadow var(--cb-transition), color var(--cb-transition), transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: var(--cb-focus-ring); }
.btn-lg { padding: 10px 18px; border-radius: var(--cb-radius); }
.btn-xs { padding: 2px 8px; }

.btn-primary {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.open > .dropdown-toggle.btn-primary {
    background: var(--cb-primary-600);
    border-color: var(--cb-primary-600);
}
.btn-success { background: var(--cb-success); border-color: var(--cb-success); }
.btn-success:hover, .btn-success:focus { background: #1a8449; border-color: #1a8449; }
.btn-danger  { background: var(--cb-danger); border-color: var(--cb-danger); }
.btn-danger:hover, .btn-danger:focus { background: #c23a3a; border-color: #c23a3a; }
.btn-warning { background: var(--cb-warning); border-color: var(--cb-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #ad6c04; border-color: #ad6c04; color: #fff; }
.btn-info    { background: var(--cb-info); border-color: var(--cb-info); }
.btn-info:hover, .btn-info:focus { background: #24789f; border-color: #24789f; }

.btn-default {
    background: #fff;
    border-color: var(--cb-line-strong);
    color: var(--cb-ink-soft);
}
.btn-default:hover, .btn-default:focus {
    background: var(--cb-canvas);
    border-color: var(--cb-line-strong);
    color: var(--cb-ink);
}
.btn-link { color: var(--cb-primary); }

/* ------------------------------- Forms ------------------------------ */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--cb-radius-sm);
    border-color: var(--cb-line-strong);
    color: var(--cb-ink);
    transition: border-color var(--cb-transition), box-shadow var(--cb-transition);
    box-shadow: none;
}
.form-control::placeholder { color: var(--cb-muted); }
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cb-primary);
    box-shadow: var(--cb-focus-ring);
}
.input-group-addon {
    background: var(--cb-canvas);
    border-color: var(--cb-line-strong);
    color: var(--cb-ink-soft);
    border-radius: var(--cb-radius-sm);
}
label { color: var(--cb-ink-soft); font-weight: 600; font-size: 13px; }
.help-block { color: var(--cb-muted); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--cb-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cb-primary); }

/* --------------------------- Tables / DT ---------------------------- */
.table { color: var(--cb-ink); }
.table > thead > tr > th {
    border-bottom: 2px solid var(--cb-line-strong);
    color: var(--cb-ink-soft);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .2px;
    background: #fafbfc;
    vertical-align: middle;
}
.table > tbody > tr > td { border-top: 1px solid var(--cb-line); vertical-align: middle; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th, .table-bordered > tfoot > tr > td {
    border-color: var(--cb-line);
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover { background: var(--cb-primary-050) !important; }
.table tfoot, .table tfoot td, .table tfoot th {
    background: var(--cb-canvas-2);
    font-weight: 600;
    color: var(--cb-ink);
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--cb-line-strong);
    border-radius: var(--cb-radius-sm);
    padding: 4px 10px;
    transition: border-color var(--cb-transition), box-shadow var(--cb-transition);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--cb-primary);
    box-shadow: var(--cb-focus-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--cb-ink-soft); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--cb-radius-sm) !important;
    border: 1px solid transparent !important;
    color: var(--cb-ink-soft) !important;
    padding: 5px 11px !important;
    margin-left: 2px;
    transition: background var(--cb-transition), color var(--cb-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cb-canvas-2) !important;
    border-color: var(--cb-line) !important;
    color: var(--cb-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cb-primary) !important;
    border-color: var(--cb-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--cb-muted) !important; }
/* Export/DOM buttons */
/* DataTables toolbar: "Show N entries" was unclickable on every table.
   The global dom in public/js/common.js:369 lays the toolbar out as
   <col-sm-1 = length><col-sm-8 = buttons><col-sm-3 = search>. col-sm-1 is ~85px
   but "Show [select] entries" needs ~200px, so the length control OVERFLOWED its
   own column; the next floated column (col-sm-8, the export buttons) then painted
   over the overflow. The select's own centre landed inside the buttons column, so
   elementFromPoint returned the button div and every click was swallowed — the
   control looked fine and simply did nothing.

   Fixed here rather than by re-tuning the 12-column split, because the buttons
   column varies in width per table (5 buttons on Products, fewer elsewhere) and
   any fixed split just moves the collision. Making the toolbar a flex row lets
   each region take exactly the width it needs, and removing the floats means the
   regions can no longer paint over one another at any viewport size.
   Scoped to .dataTables_wrapper so no other Bootstrap row is affected. */
.dataTables_wrapper > .row.margin-bottom-20 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}
.dataTables_wrapper > .row.margin-bottom-20 > [class*="col-sm-"] {
	float: none;
	width: auto;
	max-width: 100%;
}
/* Buttons absorb the slack; search stays hard right. */
.dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 { flex: 1 1 auto; }
.dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 { margin-left: auto; }
/* Never let the length label wrap or clip mid-control. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label { white-space: nowrap; margin-bottom: 0; }

.dt-buttons { margin-left: 8px; }
.dt-buttons .btn, .dt-button {
    border-radius: var(--cb-radius-sm) !important;
    border: 1px solid var(--cb-line-strong) !important;
    background: #fff !important;
    color: var(--cb-ink-soft) !important;
    padding: 5px 10px !important;
    margin: 0 4px 4px 0 !important;
    line-height: 1.4 !important;
}
.dt-buttons .btn:hover, .dt-button:hover { background: var(--cb-canvas) !important; color: var(--cb-ink) !important; }

/* --------------------------- Labels / badges ------------------------ */
.label, .badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2px;
    padding: .28em .62em;
    border-radius: var(--cb-radius-pill);
    vertical-align: baseline;
}
.label-success, .badge-success { background: var(--cb-success-bg); color: #147a41; }
.label-danger,  .badge-danger  { background: var(--cb-danger-bg);  color: #b93636; }
.label-warning, .badge-warning { background: var(--cb-warning-bg); color: #9a6104; }
.label-info,    .badge-info    { background: var(--cb-info-bg);    color: #1f6f95; }
.label-primary, .badge-primary { background: var(--cb-primary-050); color: var(--cb-primary-700); }
.label-default, .badge-default { background: var(--cb-canvas-2);   color: var(--cb-ink-soft); }
.badge { background: var(--cb-canvas-2); color: var(--cb-ink-soft); }

/* ------------------------------ KPI tiles --------------------------- */
.small-box {
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow-sm);
    overflow: hidden;
}
.small-box > .inner { padding: 16px 18px; }
.small-box h3 { font-weight: 700; letter-spacing: -.5px; }
.small-box .icon { opacity: .28; }
.small-box:hover { box-shadow: var(--cb-shadow-md); }
.small-box .small-box-footer { transition: background var(--cb-transition); }

.info-box {
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow-sm);
    background: var(--cb-surface);
    min-height: 84px;
}
.info-box:hover { box-shadow: var(--cb-shadow-md); }
.info-box-icon { border-radius: var(--cb-radius) 0 0 var(--cb-radius); }
.info-box-number { font-weight: 700; letter-spacing: -.3px; }
.info-box-text { color: var(--cb-ink-soft); text-transform: none; letter-spacing: 0; }

/* ------------------------------- Tabs ------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--cb-line); }
.nav-tabs > li > a {
    color: var(--cb-ink-soft);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-right: 2px;
    transition: color var(--cb-transition), border-color var(--cb-transition);
}
.nav-tabs > li > a:hover { background: transparent; border-bottom-color: var(--cb-line-strong); color: var(--cb-ink); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--cb-primary-700);
    border: none;
    border-bottom: 2px solid var(--cb-primary);
    background: transparent;
    font-weight: 600;
}
.nav-tabs-custom { border-radius: var(--cb-radius); box-shadow: var(--cb-shadow-sm); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--cb-primary); }

/* ------------------------------ Modals ------------------------------ */
.modal-content {
    border: none;
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--cb-line); padding: 16px 20px; }
.modal-header .modal-title { font-weight: 600; color: var(--cb-ink); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--cb-line); }
.modal-backdrop.in { opacity: .35; }

/* ------------------------------ Alerts ------------------------------ */
.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--cb-radius-sm);
    box-shadow: var(--cb-shadow-sm);
}
.alert-success { background: var(--cb-success-bg); border-color: var(--cb-success); color: #14663a; }
.alert-danger, .alert-error { background: var(--cb-danger-bg); border-color: var(--cb-danger); color: #a53232; }
.alert-warning { background: var(--cb-warning-bg); border-color: var(--cb-warning); color: #855104; }
.alert-info { background: var(--cb-info-bg); border-color: var(--cb-info); color: #1c6688; }

/* --------------------------- Pagination ----------------------------- */
.pagination > li > a, .pagination > li > span {
    color: var(--cb-ink-soft);
    border-color: var(--cb-line);
    transition: background var(--cb-transition), color var(--cb-transition);
}
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: var(--cb-radius-sm) 0 0 var(--cb-radius-sm); }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
}
.pagination > li > a:hover { background: var(--cb-canvas-2); color: var(--cb-ink); }

/* ------------------------------ Sidebar ----------------------------- */
/* Keep the dark sidebar (this is standard chrome, not "dark mode"),
   but refine spacing, hover and the active affordance. */
.skin-blue .main-sidebar, .skin-blue .left-side { background: #1e252c; }
.skin-blue .sidebar-menu > li > a {
    transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    background: #171d23;
    border-left-color: var(--cb-primary);
    color: #fff;
}
.skin-blue .sidebar-menu > li.active > a { border-left-width: 3px; }
.skin-blue .sidebar-menu .treeview-menu > li > a { transition: color var(--cb-transition); }
.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover { color: #fff; }
.skin-blue .sidebar a { color: #b8c4ce; }
.sidebar-form .form-control { background: #2a323a; border-color: #2a323a; color: #e6ebf0; border-radius: var(--cb-radius-sm); }
.sidebar-form .form-control::placeholder { color: #8a97a3; }

/* ------------------------------ Header ------------------------------ */
.skin-blue .main-header .navbar { background: var(--cb-primary); }
.skin-blue .main-header .logo {
    background: var(--cb-primary-700);
    font-weight: 700;
    letter-spacing: .2px;
    transition: background var(--cb-transition);
}
.skin-blue .main-header .logo:hover { background: var(--cb-primary-700); }
.skin-blue .main-header .navbar .nav > li > a { transition: background var(--cb-transition); }
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > .open > a { background: rgba(255, 255, 255, .12); }
.skin-blue .main-header li.user-header { background: var(--cb-primary); }
.main-header .navbar-custom-menu .btn-success,
.header-quick-actions .btn { border-radius: var(--cb-radius-sm); }

/* ------------------------------ Misc -------------------------------- */
.callout { border-radius: var(--cb-radius-sm); box-shadow: var(--cb-shadow-sm); }
.tooltip-inner { border-radius: var(--cb-radius-sm); padding: 6px 10px; background: #111827; }
.tooltip.top .tooltip-arrow { border-top-color: #111827; }
.progress { border-radius: var(--cb-radius-pill); box-shadow: none; background: var(--cb-canvas-2); }
.progress-bar { border-radius: var(--cb-radius-pill); }
hr { border-top-color: var(--cb-line); }
.text-muted { color: var(--cb-muted) !important; }
.bg-gray { background: var(--cb-canvas-2) !important; }

/* Focus visibility for keyboard users (accessibility) */
a:focus-visible, button:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--cb-primary);
    outline-offset: 2px;
}

/* Slim, modern scrollbars (WebKit) — desktop only nicety */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: #c7ced8; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background: #aab4c1; background-clip: content-box; }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* Print: keep it clean */
@media print {
    .box { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------------- Compact / dense operator layout (opt-in via .cb-dense) ----
   For high-volume data-entry screens. Wrap the section in .cb-dense; use
   .cb-band for section headers, .cb-dense-table on tables, .num / .kpi helpers. */
.cb-dense .box { border-top-width: 2px; }
.cb-dense .form-group { margin-bottom: 8px; }
.cb-dense label { margin-bottom: 2px; font-size: 12px; color: var(--cb-ink-soft); font-weight: 600; }
.cb-dense .form-control { height: 32px; padding: 4px 8px; font-size: 13px; }
.cb-dense textarea.form-control { height: auto; }
.cb-dense .cb-band {
    background: var(--cb-primary); color: #fff; font-weight: 700; letter-spacing: .5px;
    padding: 5px 10px; margin: 0 0 10px; border-radius: var(--cb-radius-sm); font-size: 13px;
}
.cb-dense table.cb-dense-table { font-size: 13px; }
.cb-dense table.cb-dense-table > thead > tr > th { padding: 6px 8px; white-space: nowrap; }
.cb-dense table.cb-dense-table > tbody > tr > td { padding: 4px 8px; }
.cb-dense .num { text-align: right; font-variant-numeric: tabular-nums; }
.cb-dense .kpi { font-size: 15px; margin: 0 0 6px; }

/* ---------------- Report print (opt-in via .cb-report-print) ----------------
   Scoped so it can NEVER affect invoice/receipt prints. Add the class to a
   report's <section class="content"> to make it print compact on one page:
   KPI info-boxes stay side-by-side (they're col-md-* with no col-xs, which was
   stacking them full-width over several sheets), boxes/tables tightened. */
@media print {
    .cb-report-print .no-print { display: none !important; }
    .cb-report-print { padding: 0 !important; }
    .cb-report-print .box { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    .cb-report-print .info-box {
        min-height: auto !important; box-shadow: none !important;
        border: 1px solid #ccc !important; margin-bottom: 8px !important; page-break-inside: avoid;
    }
    .cb-report-print .info-box-icon { display: none !important; }
    .cb-report-print .info-box-content { margin-left: 0 !important; padding: 6px 10px !important; }
    .cb-report-print .info-box-number { font-size: 16px !important; }
    .cb-report-print .info-box-text { font-size: 12px !important; }
    .cb-report-print [class*="col-md-4"] { width: 33.33% !important; float: left !important; }
    .cb-report-print [class*="col-md-3"] { width: 25% !important; float: left !important; }
    .cb-report-print [class*="col-md-6"] { width: 50% !important; float: left !important; }
    .cb-report-print .table > tbody > tr > td,
    .cb-report-print .table > tbody > tr > th { padding: 4px 8px !important; }
    .cb-report-print .print_section h2,
    .cb-report-print .print_section h3 { margin: 0 0 10px !important; }
}