/* ==========================================================================
   FIN-FLO ENTERPRISE THEME  —  Red · Black · White
   --------------------------------------------------------------------------
   Loaded AFTER style.css / custom.css. Purely visual overrides: no layout or
   markup dependencies, so removing the <link> restores the previous look.

   Type:  Plus Jakarta Sans (UI, headings, numerals in KPIs)  +  Inter (data)
   Color: Ink black chrome, white surfaces, one disciplined crimson accent.
   ========================================================================== */

:root {
    /* Brand */
    --ff-red-50:  #FFF1F1;
    --ff-red-100: #FFE0E1;
    --ff-red-200: #FDB9BC;
    --ff-red-500: #E0242E;
    --ff-red-600: #C8141F;   /* primary */
    --ff-red-700: #A60F19;
    --ff-red-800: #7F0B13;

    /* Ink & surfaces */
    --ff-ink-950: #08080A;
    --ff-ink-900: #0E0E11;
    --ff-ink-850: #131317;
    --ff-ink-800: #1A1A1F;
    --ff-ink-700: #26262C;
    --ff-ink-500: #5B5B66;
    --ff-ink-400: #7C7C88;
    --ff-ink-300: #A3A3AD;
    --ff-line:    #E7E7EB;
    --ff-line-soft:#F0F0F3;
    --ff-canvas:  #F5F5F7;
    --ff-surface: #FFFFFF;

    /* Effects */
    --ff-radius-sm: 8px;
    --ff-radius:    12px;
    --ff-radius-lg: 16px;
    --ff-shadow-xs: 0 1px 2px rgba(8, 8, 10, .05);
    --ff-shadow-sm: 0 1px 2px rgba(8, 8, 10, .04), 0 6px 18px -8px rgba(8, 8, 10, .10);
    --ff-shadow-md: 0 2px 4px rgba(8, 8, 10, .04), 0 18px 40px -16px rgba(8, 8, 10, .18);
    --ff-ring: 0 0 0 3px rgba(200, 20, 31, .16);

    --ff-font-ui:   "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ff-font-data: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Re-point the legacy variables so every existing var(--clr-*) follows the brand */
    --clr-primary: var(--ff-red-600);
    --clr-black:   var(--ff-ink-950);
    --clr-black2:  var(--ff-ink-900);
    --clr-black3:  var(--ff-ink-500);
    --clr-white2:  var(--ff-canvas);
    --clr-white3:  var(--ff-red-50);
    --clr-gray4:   var(--ff-canvas);
    --clr-red:     var(--ff-red-600);
    --ff:          var(--ff-font-data);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html:not([dir="rtl"]) body,
html:not([dir="rtl"]) .erp-table-section,
html:not([dir="rtl"]) .form-control,
html:not([dir="rtl"]) .form-select,
html:not([dir="rtl"]) .table td,
html:not([dir="rtl"]) .dropdown-menu {
    font-family: var(--ff-font-data) !important;
}

html:not([dir="rtl"]) h1, html:not([dir="rtl"]) h2, html:not([dir="rtl"]) h3,
html:not([dir="rtl"]) h4, html:not([dir="rtl"]) h5, html:not([dir="rtl"]) h6,
html:not([dir="rtl"]) .table-header h4,
html:not([dir="rtl"]) .table th,
html:not([dir="rtl"]) .btn,
html:not([dir="rtl"]) .nav-name,
html:not([dir="rtl"]) .side-bar,
html:not([dir="rtl"]) .side-bar-manu li a,
html:not([dir="rtl"]) label,
html:not([dir="rtl"]) .modal-title {
    font-family: var(--ff-font-ui) !important;
}

body {
    background: var(--ff-canvas) !important;
    color: var(--ff-ink-900);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--ff-red-600); color: #fff; }

a { transition: color .15s ease; }

/* Tabular numbers everywhere money and quantities live */
.table td, .table th, .state-overview-box, .dashboard-card, .business-stat,
.form-control[type="number"], input[type="number"], .total, [id*="amount"], [id*="total"] {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus that's visible but refined */
:focus-visible { outline: 2px solid var(--ff-red-600); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible { outline: none; }

/* Slim, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #C9C9D1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9C9D1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A3A3AD; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Sidebar — obsidian rail with a crimson active signal
   -------------------------------------------------------------------------- */
.side-bar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(200, 20, 31, .10) 0%, rgba(200, 20, 31, 0) 55%),
        var(--ff-ink-950) !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none !important;
    font-size: 14px !important;
}

.side-bar-logo {
    padding: 20px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: transparent !important;
}
.side-bar-logo img { height: 36px !important; }

.side-bar::-webkit-scrollbar { width: 4px; }
.side-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border: 0; }
.side-bar::-webkit-scrollbar-track { background: transparent; }

.side-bar-manu { padding: 14px 12px 28px !important; }
.side-bar-manu li { margin: 2px 0 !important; }

.side-bar-manu li a {
    color: var(--ff-ink-300) !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: .005em;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.side-bar-manu li a .sidebar-icon { opacity: .72; transition: opacity .16s ease; }
.side-bar-manu li a .sidebar-icon img { filter: brightness(1.15); }

.side-bar-manu li:hover > a {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.side-bar-manu li:hover > a .sidebar-icon { opacity: 1; }

/* Active item: soft crimson wash + bright left rail */
.side-bar-manu li.active > a,
.side-bar-manu li > a.active {
    background: linear-gradient(90deg, rgba(200, 20, 31, .30) 0%, rgba(200, 20, 31, .08) 100%) !important;
    color: #fff !important;
}
.side-bar-manu li.active > a .sidebar-icon { opacity: 1; }
/* Edge rail: a short crimson bar hugging the sidebar edge (no boxed border) */
.side-bar-manu li.active > a::before {
    content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 22px;
    transform: translateY(-50%); border-radius: 0 4px 4px 0;
    background: var(--ff-red-500); box-shadow: 0 0 12px rgba(224, 36, 46, .7);
}

/* Sub-menu */
.side-bar-manu li .dropdown-menu li a,
.side-bar-manu li ul li a {
    color: var(--ff-ink-400) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
}
.side-bar-manu li ul li a:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
.side-bar-manu li ul li a.active,
.side-bar-manu li .dropdown-menu li a.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: none;
}
.side-bar-manu li ul li a.active::before { display: none; }
.side-bar-manu li .dropdown-menu li li:hover > a,
.side-bar-manu li .dropdown-menu li li.active > a { background-color: rgba(200, 20, 31, .28) !important; }

.side-bar-manu li.dropdown > a::after { opacity: .5; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.main-header-section {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ff-line);
    box-shadow: none !important;
    padding: 12px 24px !important;
}
.main-header-section .btn-light,
.main-header-section .language-change .btn {
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-line) !important;
    border-radius: 10px !important;
    font-weight: 600;
    font-size: 13px;
    color: var(--ff-ink-800);
}
.main-header-section .view-website { font-weight: 600; font-size: 13px; color: var(--ff-red-600) !important; }

.nav-greeting { color: var(--ff-ink-400) !important; font-size: 12px !important; }
.nav-name { color: var(--ff-ink-950) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: -.005em; }
.main-header-section .profile-info img { border: 2px solid var(--ff-surface); box-shadow: 0 0 0 1.5px var(--ff-line); }

.notifications .bg-red, .bg-red {
    background: var(--ff-red-600) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

/* Dropdown menus (profile, language, notifications, table actions) */
.dropdown-menu {
    border: 1px solid var(--ff-line) !important;
    border-radius: var(--ff-radius) !important;
    box-shadow: var(--ff-shadow-md) !important;
    padding: 6px !important;
    overflow: hidden;
}
.dropdown-item, .main-header-section .profile-info .dropdown-menu li a { border-radius: 8px; font-size: 13px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ff-canvas); color: var(--ff-ink-950); }
.dropdown-item.active, .dropdown-item:active { background: var(--ff-red-600); color: #fff; }
.main-header-section .profile-info .dropdown-menu li { border-bottom: 1px solid var(--ff-line-soft) !important; }
.main-header-section .profile-info .dropdown-menu li:last-child { border-bottom: 0 !important; }
.main-header-section .dropdown-menu { border-radius: var(--ff-radius) !important; }

/* --------------------------------------------------------------------------
   Page structure & headings
   -------------------------------------------------------------------------- */
.container-fluid { padding: 24px 28px !important; }

.table-header { border-bottom: 1px solid var(--ff-line) !important; padding-bottom: 14px; }
.table-header h4, .table-header h3 {
    font-weight: 800 !important;
    font-size: 21px !important;
    letter-spacing: -.02em;
    color: var(--ff-ink-950) !important;
    text-transform: none !important;
}

/* --------------------------------------------------------------------------
   Cards & panels
   -------------------------------------------------------------------------- */
.card, .cards-header, .dashboard-card, .business-stat-container, .cards, .return-card {
    background: var(--ff-surface);
    border: 1px solid var(--ff-line) !important;
    border-radius: var(--ff-radius-lg) !important;
    box-shadow: var(--ff-shadow-sm) !important;
}
.shadow, .shadow-sm { box-shadow: var(--ff-shadow-sm) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--ff-line); font-weight: 700; }

.state-overview-box {
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg) !important;
    box-shadow: var(--ff-shadow-sm) !important;
    padding: 16px !important;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.state-overview-box::after {         /* hairline crimson signal on every KPI */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--ff-red-500), var(--ff-red-700));
    opacity: .9;
}
.state-overview-box:hover { transform: translateY(-2px); box-shadow: var(--ff-shadow-md) !important; }
.state-overview-box h4, .state-overview-box h3, .state-overview-box .amount, .state-overview-box strong {
    font-family: var(--ff-font-ui) !important; font-weight: 800; letter-spacing: -.02em; color: var(--ff-ink-950);
}

.dashboard-card .dashboard-card-header h4, .dashboard-card h4, .dashboard-card h5 {
    font-weight: 800; letter-spacing: -.015em; color: var(--ff-ink-950);
}

/* --------------------------------------------------------------------------
   Dashboard KPI strip (business panel)
   -------------------------------------------------------------------------- */
.business-stat-container { padding: 6px !important; }
.business-stat { gap: 0; }
.business-stat .business-content { position: relative; padding: 18px 16px !important; }
.business-stat .business-content + .business-content { border-left: 1px solid var(--ff-line-soft); }
.bus-stat-title {
    color: var(--ff-ink-400) !important; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .06em; text-transform: uppercase; line-height: 18px !important;
}
.bus-stat-count {
    font-family: var(--ff-font-ui) !important; color: var(--ff-ink-950) !important;
    font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 30px !important;
}
.bus-profit .profit { color: var(--ff-ink-950) !important; font-weight: 700 !important; }
.bus-profit .loss   { color: var(--ff-red-600) !important; font-weight: 700 !important; }
.bus-month-title { color: var(--ff-ink-400) !important; }

/* KPI icon tiles: the old rainbow becomes a disciplined black / red set */
.custom-image-bg { border-radius: 12px !important; width: 42px; height: 42px; box-shadow: 0 6px 14px -6px rgba(8,8,10,.45); }
.color-1, .color-5, .color-7 { background: linear-gradient(145deg, #2A2A31 0%, #08080A 100%) !important; }
.color-2, .color-4, .color-8 { background: linear-gradient(145deg, #E0242E 0%, #A60F19 100%) !important; }
.color-3, .color-6          { background: linear-gradient(145deg, #4A4A53 0%, #1A1A1F 100%) !important; }
.custom-image-bg img { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   Tables — dense, quiet, readable
   -------------------------------------------------------------------------- */
.table-responsive { border-radius: var(--ff-radius); }

.table { --bs-table-bg: transparent; margin-bottom: 0; }

.table th {
    background: #FAFAFB !important;
    color: var(--ff-ink-500) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase !important;
    line-height: 18px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--ff-line) !important;
    border-top: 1px solid var(--ff-line);
    text-align: left !important;
}
.table th:first-child { border-top-left-radius: var(--ff-radius-sm); }
.table th:last-child  { border-top-right-radius: var(--ff-radius-sm); }

.table td {
    color: var(--ff-ink-800) !important;
    font-size: 13.5px !important;
    line-height: 20px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--ff-line-soft) !important;
    text-align: left !important;
    vertical-align: middle;
}
.table td.text-end, .table th.text-end { text-align: right !important; }
.table td.text-center, .table th.text-center { text-align: center !important; }

.table tbody tr { transition: background-color .12s ease; }
.table-hover > tbody > tr:hover > *,
.table tbody tr:hover > td { background: #FBFBFC !important; --bs-table-accent-bg: transparent; }
.table tbody tr:last-child td { border-bottom: 0 !important; }

.table-light, .table-light > th, .table-light > td { --bs-table-bg: #FAFAFB; }

.table-product-img, .table-img img, .table-profile .user-img img {
    border-radius: 10px; border: 1px solid var(--ff-line);
}

/* Row action buttons */
.table-action button, .table-action .btn {
    border-radius: 8px; border: 1px solid var(--ff-line); background: var(--ff-surface);
}
.table-action button:hover { border-color: var(--ff-ink-300); background: var(--ff-canvas); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .005em;
    padding: .52rem 1rem;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .34rem .7rem; font-size: 12.5px; border-radius: 8px; }
.btn-lg { padding: .75rem 1.4rem; font-size: 15px; border-radius: 12px; }

/* Primary — crimson */
.btn-primary, .btn-success.add-btn, .add-report-btn, .submit-btn, .btn-custom-primary {
    background: linear-gradient(180deg, var(--ff-red-500) 0%, var(--ff-red-600) 100%) !important;
    border: 1px solid var(--ff-red-700) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 14px -6px rgba(200, 20, 31, .55) !important;
}
.btn-primary:hover, .add-report-btn:hover, .submit-btn:hover, .btn-custom-primary:hover {
    background: linear-gradient(180deg, var(--ff-red-600) 0%, var(--ff-red-700) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 18px -6px rgba(200, 20, 31, .6) !important;
    color: #fff !important;
}

/* Success -> ink black (keeps "go" actions strong without a 4th brand hue) */
.btn-success {
    background: var(--ff-ink-950) !important;
    border: 1px solid var(--ff-ink-950) !important;
    color: #fff !important;
}
.btn-success:hover { background: var(--ff-ink-700) !important; border-color: var(--ff-ink-700) !important; }

.btn-dark { background: var(--ff-ink-950); border-color: var(--ff-ink-950); }
.btn-dark:hover { background: var(--ff-ink-700); border-color: var(--ff-ink-700); }

.btn-danger { background: var(--ff-red-700) !important; border: 1px solid var(--ff-red-800) !important; color: #fff !important; }
.btn-danger:hover { background: var(--ff-red-800) !important; }

.btn-light, .btn-secondary {
    background: var(--ff-surface); border: 1px solid var(--ff-line); color: var(--ff-ink-800);
}
.btn-light:hover, .btn-secondary:hover { background: var(--ff-canvas); border-color: var(--ff-ink-300); color: var(--ff-ink-950); }

.btn-outline-dark, .btn-outline-secondary { border: 1px solid var(--ff-line); color: var(--ff-ink-800); background: var(--ff-surface); }
.btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--ff-ink-950); border-color: var(--ff-ink-950); color: #fff; }

.btn-outline-primary, .btn-outline-danger { border: 1px solid var(--ff-red-200); color: var(--ff-red-600); background: var(--ff-surface); }
.btn-outline-primary:hover, .btn-outline-danger:hover { background: var(--ff-red-600); border-color: var(--ff-red-600); color: #fff; }

.btn-outline-success { border: 1px solid var(--ff-ink-300); color: var(--ff-ink-950); background: var(--ff-surface); }
.btn-outline-success:hover { background: var(--ff-ink-950); border-color: var(--ff-ink-950); color: #fff; }

.btn-outline-warning, .btn-outline-info { border: 1px solid var(--ff-line); color: var(--ff-ink-800); background: var(--ff-surface); }
.btn-outline-warning:hover, .btn-outline-info:hover { background: var(--ff-ink-950); color: #fff; border-color: var(--ff-ink-950); }

.btn-warning, .btn-info, .btn-custom-warning {
    background: var(--ff-ink-800) !important; border: 1px solid var(--ff-ink-800) !important; color: #fff !important;
}

.cancel-btn { border-radius: 10px; border: 1px solid var(--ff-line); background: var(--ff-surface); color: var(--ff-ink-800); font-weight: 600; }
.cancel-btn:hover { background: var(--ff-canvas); }

.btn-link { color: var(--ff-red-600); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--ff-red-800); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label, .form-label { font-weight: 600; font-size: 12.5px; color: var(--ff-ink-700); letter-spacing: .01em; }

.form-control, .form-select, .nice-select, .select2-container--default .select2-selection--single,
.choices__inner {
    border: 1px solid #D9D9E0 !important;
    border-radius: 10px !important;
    background-color: var(--ff-surface);
    color: var(--ff-ink-900);
    font-size: 13.5px;
    min-height: 42px;
    box-shadow: var(--ff-shadow-xs) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--ff-ink-300); }
.form-control:hover, .form-select:hover { border-color: #B9B9C3 !important; }
.form-control:focus, .form-select:focus, .nice-select.open, .nice-select:focus {
    border-color: var(--ff-red-600) !important;
    box-shadow: var(--ff-ring) !important;
    outline: 0 !important;
}
.form-control:disabled, .form-control[readonly] { background: #FAFAFB; color: var(--ff-ink-500); }
.form-control.error, .form-control.is-invalid { border-color: var(--ff-red-600) !important; }

.form-check-input:checked { background-color: var(--ff-red-600); border-color: var(--ff-red-600); }
.form-check-input:focus { border-color: var(--ff-red-600); box-shadow: var(--ff-ring); }
.form-switch .form-check-input:checked { background-color: var(--ff-ink-950); border-color: var(--ff-ink-950); }

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: var(--ff-red-50); }
.nice-select .option.selected { color: var(--ff-red-600); font-weight: 700; }
.nice-select .list { border-radius: 12px; box-shadow: var(--ff-shadow-md); border: 1px solid var(--ff-line); }

.input-group-text { background: #FAFAFB; border: 1px solid #D9D9E0; color: var(--ff-ink-500); border-radius: 10px; }

/* --------------------------------------------------------------------------
   Badges, alerts, tabs, pagination
   -------------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 700; font-size: 11px; padding: .38em .7em; letter-spacing: .02em; }
.badge.bg-success  { background: #EDEDEF !important; color: var(--ff-ink-950) !important; }
.badge.bg-warning  { background: var(--ff-red-50) !important; color: var(--ff-red-700) !important; }
.badge.bg-danger   { background: var(--ff-red-600) !important; color: #fff !important; }
.badge.bg-info     { background: var(--ff-ink-950) !important; color: #fff !important; }
.badge.bg-secondary{ background: #EDEDEF !important; color: var(--ff-ink-500) !important; }
.badge.bg-dark     { background: var(--ff-ink-950) !important; }
.badge.bg-primary  { background: var(--ff-red-600) !important; }

.alert { border-radius: var(--ff-radius); border: 1px solid var(--ff-line); font-size: 13.5px; }
.alert-success { background: #F4F4F5; color: var(--ff-ink-900); border-left: 4px solid var(--ff-ink-950); }
.alert-danger  { background: var(--ff-red-50); color: var(--ff-red-800); border-left: 4px solid var(--ff-red-600); }
.alert-warning { background: #FAFAFB; color: var(--ff-ink-800); border-left: 4px solid var(--ff-red-500); }
.alert-info    { background: #F4F4F5; color: var(--ff-ink-800); border-left: 4px solid var(--ff-ink-500); }
.alert-light   { background: #FAFAFB; border-color: var(--ff-line); color: var(--ff-ink-700); }

.nav-pills .nav-link { color: var(--ff-ink-700); border-radius: 10px; font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ff-ink-950); color: #fff; }
.nav-tabs .nav-link { color: var(--ff-ink-500); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ff-red-600); border-bottom: 2px solid var(--ff-red-600); }

.pagination .page-link { color: var(--ff-ink-500); font-weight: 600; font-size: 13px; border-radius: 8px; }
.pagination .page-item.active .page-link {
    background: var(--ff-ink-950); color: #fff; width: 32px; height: 32px; border-radius: 9px;
}
.pagination .page-link:hover { color: var(--ff-red-600); background: var(--ff-red-50); }

.progress { border-radius: 999px; background: var(--ff-line-soft); }
.progress-bar { background: var(--ff-red-600); }

hr { border-color: var(--ff-line); opacity: 1; }

/* --------------------------------------------------------------------------
   Modals, toasts, confirm dialogs
   -------------------------------------------------------------------------- */
.modal-content { border: 0 !important; border-radius: var(--ff-radius-lg) !important; box-shadow: var(--ff-shadow-md) !important; }
.modal-header { border-bottom: 1px solid var(--ff-line); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--ff-line); }
.modal-title { font-weight: 800; letter-spacing: -.015em; }
.modal-backdrop.show { opacity: .62; background: var(--ff-ink-950); }

#toast-container > div {
    border-radius: 12px !important; box-shadow: var(--ff-shadow-md) !important; opacity: 1 !important;
    font-family: var(--ff-font-ui);
}
.toast-success { background-color: var(--ff-ink-950) !important; }
.toast-error   { background-color: var(--ff-red-600) !important; }
.toast-info    { background-color: var(--ff-ink-800) !important; }
.toast-warning { background-color: var(--ff-red-700) !important; }

.jconfirm .jconfirm-box { border-radius: var(--ff-radius-lg) !important; box-shadow: var(--ff-shadow-md) !important; }
.jconfirm .jconfirm-box .jconfirm-buttons button { border-radius: 10px; font-weight: 600; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red { background: var(--ff-red-600); color: #fff; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background: var(--ff-canvas); color: var(--ff-ink-800); }

/* --------------------------------------------------------------------------
   Utility colour remap (legacy classes used across blades)
   -------------------------------------------------------------------------- */
.text-red, .text-danger, .text-custom-primary, .primary { color: var(--ff-red-600) !important; }
.text-success { color: var(--ff-ink-950) !important; }
.text-muted { color: var(--ff-ink-400) !important; }
.bg-success { background-color: var(--ff-ink-950) !important; }
.bg-danger  { background-color: var(--ff-red-600) !important; }
.bg-primary { background-color: var(--ff-red-600) !important; }

/* --------------------------------------------------------------------------
   POS (sales/create) — dense, touch-friendly
   -------------------------------------------------------------------------- */
#products-list .card, .product-card, .single-product {
    border-radius: 14px !important;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#products-list .card:hover, .product-card:hover, .single-product:hover {
    transform: translateY(-2px); border-color: var(--ff-red-200) !important; box-shadow: var(--ff-shadow-md) !important;
}
#payable_amount, #total_amount, #sub_total { font-family: var(--ff-font-ui); font-weight: 800; letter-spacing: -.02em; }
#payable_amount { color: var(--ff-red-600); font-size: 1.15em; }

/* --------------------------------------------------------------------------
   Auth screens (login / forgot / reset) — obsidian stage, white card
   -------------------------------------------------------------------------- */
body:has(.mybazar-login-section) {
    background:
        radial-gradient(70% 55% at 88% 0%, rgba(200, 20, 31, .34) 0%, rgba(200, 20, 31, 0) 62%),
        radial-gradient(50% 45% at 0% 100%, rgba(200, 20, 31, .16) 0%, rgba(200, 20, 31, 0) 60%),
        var(--ff-ink-950) !important;
    min-height: 100vh;
}
body:has(.mybazar-login-section) .footer { background: transparent !important; }
body:has(.mybazar-login-section) .footer-logo img { filter: brightness(0) invert(1); }
.mybazar-login-section .mybazar-login-avatar img {
    /* shift the stock blue illustration into the brand red */
    filter: hue-rotate(148deg) saturate(1.15) drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}

.mybazar-login-section .login-wrapper {
    background: var(--ff-surface);
    border-radius: 22px !important;
    padding: 38px 40px !important;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(8, 8, 10, .04) !important;
}
.mybazar-login-section .login-wrapper h2 {
    font-family: var(--ff-font-ui); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--ff-ink-950);
}
.mybazar-login-section .login-wrapper h2 span { color: var(--ff-red-600); }
.mybazar-login-section .login-wrapper h6 { font-size: 15px; font-weight: 500; color: var(--ff-ink-400); }

.mybazar-login-section .login-wrapper .input-group {
    border: 1px solid #D9D9E0 !important;
    background: #FAFAFB !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-top: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mybazar-login-section .login-wrapper .input-group:focus-within {
    border-color: var(--ff-red-600) !important; box-shadow: var(--ff-ring); background: #fff !important;
}
.mybazar-login-section .login-wrapper .input-group .form-control {
    height: 50px; font-size: 14.5px; box-shadow: none !important; border: 0 !important; background: transparent !important;
}
.mybazar-login-section .login-wrapper .input-group input { border-left: 1px solid #E4E4EA !important; }
.mybazar-login-section .login-wrapper .input-group .form-control::placeholder { color: var(--ff-ink-300) !important; }
.mybazar-login-wrapper .input-group input:focus-visible { border: 0 !important; border-left: 1px solid #E4E4EA !important; }

.mybazar-login-section .forget-password a,
.mybazar-login-section .back-to-login a,
.forget-password .custom-control-label span { font-size: 13.5px; color: var(--ff-ink-500); font-weight: 500; }
.mybazar-login-section .forget-password a:hover { color: var(--ff-red-600); text-decoration: none; }
.mybazar-login-section .login-wrapper a.text-primary { color: var(--ff-red-600) !important; font-weight: 700; }

.mybazar-login-section .login-btn {
    font-family: var(--ff-font-ui); font-size: 15px !important; font-weight: 700 !important; letter-spacing: .01em;
    height: 50px; border-radius: 12px !important; margin-top: 20px !important;
    background: linear-gradient(180deg, var(--ff-red-500), var(--ff-red-600)) !important;
    border: 1px solid var(--ff-red-700) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 24px -10px rgba(200, 20, 31, .7) !important;
}
.mybazar-login-section .login-btn:hover { background: linear-gradient(180deg, var(--ff-red-600), var(--ff-red-700)) !important; }

.login-social { border-radius: 12px; border: 1px solid var(--ff-line); font-weight: 600; }
.login-social:hover { background: var(--ff-canvas); }

/* --------------------------------------------------------------------------
   Misc polish
   -------------------------------------------------------------------------- */
.table-top-form .form-control, .table-search .form-control { background: var(--ff-surface); }
.table-search svg { color: var(--ff-ink-400); }

.sidebar-opner.menu-opener { cursor: pointer; color: var(--ff-ink-800); }
footer, .main-footer, .footer-section { color: var(--ff-ink-400); font-size: 12.5px; }

@media (max-width: 991px) {
    .container-fluid { padding: 16px !important; }
    .main-header-section { padding: 10px 14px !important; }
}

@media print {
    body { background: #fff !important; }
    .card, .cards-header { box-shadow: none !important; border: 0 !important; }
}