/* =============================================================
   custom.css — HavBun POS
   All inline <style> blocks extracted from Blade views and
   enhanced for a modern, premium, fully responsive UI.
   Compatible with AdminLTE 3 + Bootstrap 4.
   =============================================================*/


/* -------------------------------------------------------------
   1. GLOBAL UTILITIES & RESETS
/* =============================================================
   OFFLINE FONT SETUP — Source Sans 3
   =============================================================*/

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans/SourceSans3-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans/SourceSans3-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* 🚀 جێبەجێکرن ل سەر هەمی سیستەمی */
body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #212529;
    background-color: #f4f6f8;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400 !important;
}
:root {
    --pos-blue:    #3c8dbc;
    --pos-blue-dk: #367fa9;
    --pos-green:   #00a65a;
    --pos-orange:  #f39c12;
    --pos-red:     #dd4b39;
    --pos-pink:    #d81b60;
    --pos-amber:   #fd7e14;
    --pos-radius:  10px;
    --pos-shadow:  0 2px 12px rgba(0,0,0,.08);
    --pos-shadow-lg: 0 4px 24px rgba(0,0,0,.13);
    --transition:  .18s ease;
}

/* Required-field asterisk helper */
.required-field { position: relative; }
.required-field::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Prevent stray horizontal scrollbars */
html, body, .content-wrapper, .main-footer, .main-header {
    overflow-x: hidden;
}

/* Restore vertical scroll (OverlayScrollbars override) */
html, body, .wrapper, .content-wrapper { overflow-y: auto; }
html.os-html, html.os-html > .os-host,
.os-host, .os-host .os-viewport {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
}


/* -------------------------------------------------------------
   2. RTL SUPPORT (Arabic & Badini Kurdish)
   ------------------------------------------------------------- */

html[lang="ku"], html[lang="ar"] {
    direction: rtl;
    text-align: right;
}

html[lang="ku"] .card,
html[lang="ar"] .card,
html[lang="ku"] .card-header,
html[lang="ar"] .card-header { text-align: right; direction: rtl; }

html[lang="ku"] .card-title,
html[lang="ar"] .card-title  { text-align: right; }

/* Swap Bootstrap LTR margins for RTL */
html[lang="ku"] .mr-1, html[lang="ar"] .mr-1 { margin-right: 0; margin-left: .25rem; }
html[lang="ku"] .mr-2, html[lang="ar"] .mr-2 { margin-right: 0; margin-left: .5rem;  }
html[lang="ku"] .mr-3, html[lang="ar"] .mr-3 { margin-right: 0; margin-left: 1rem;   }
html[lang="ku"] .ml-2, html[lang="ar"] .ml-2 { margin-left:  0; margin-right: .5rem; }

/* Flip action-button order for RTL */
.action-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.action-buttons .btn { white-space: nowrap; }
html[lang="ku"] .action-buttons,
html[lang="ar"] .action-buttons { flex-direction: row-reverse; }

/* Box responsive RTL row */
.box-responsive-rtl { direction: inherit; }


/* -------------------------------------------------------------
   3. TABLES — modern header + responsive polish
   ------------------------------------------------------------- */

.table-custom-header thead th {
    background-color: var(--pos-blue) !important;
    color: #fff !important;
    border: 1px solid var(--pos-blue-dk);
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .65rem .75rem;
    white-space: nowrap;
}

/* Zebra rows */
.table-custom-header tbody tr:nth-child(even) { background-color: #f8fafc; }
.table-custom-header tbody tr:hover           { background-color: #eef4fb; transition: background var(--transition); }

/* Footer summary row */
.footer-bg {
    background-color: #f0f4f8 !important;
    font-weight: 700;
    font-size: .95rem;
    border-top: 2px solid #dde3ea;
}

/* Remove default border on responsive wrapper */
.table-responsive { border: none; }


/* -------------------------------------------------------------
   4. STATUS BADGES
   ------------------------------------------------------------- */

.status-paid,
.status-due,
.status-partial,
.status-completed,
.status-pending {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.5;
}

.status-paid,
.status-completed { background-color: var(--pos-green)  !important; color: #fff; }
.status-due        { background-color: var(--pos-orange) !important; color: #fff; }
.status-partial    { background-color: var(--pos-blue)   !important; color: #fff; }
.status-pending    { background-color: #6c757d           !important; color: #fff; }


/* -------------------------------------------------------------
   5. DASHBOARD KPI BOXES
   PARITY FIXES APPLIED — see comments per rule.
   All RTL-specific shrinkage has been removed.
   ------------------------------------------------------------- */

/* ── Row wrapper ── */
.dashboard-kpi-row {
    margin-left: -6px;
    margin-right: -6px;
    overflow: visible !important;  /* merged from duplicate block below */
}

.dashboard-kpi-row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
}

.dashboard-kpi-row-second { margin-top: -4px; }

/* ── The box itself ──
   FIX: Removed the old static height:130px (caused overflow on large numbers).
   FIX: Single authoritative definition — the duplicate block that appeared
        at lines 507-518 of the original file has been merged here.
   FIX: container-type:inline-size added so .kpi-number-display can use cqi units. */
.dashboard-kpi-box {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 118px;
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: var(--pos-shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    container-type: inline-size; /* enables cqi scaling on child .kpi-number-display */
}

.dashboard-kpi-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--pos-shadow-lg);
}

/* =============================================================
   NEW: .kpi-card — styles for the redesigned white KPI cards
   Applies to markup added in Livewire `home-dashboard`.
   Ensures RTL parity and prevents number overflow.
   =============================================================*/
.kpi-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 12px;
    box-shadow: var(--pos-shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    min-height: 92px;
    container-type: inline-size;
}

.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--pos-shadow-lg); }

/* Icon circle inside the left column — uses margin-inline-end for RTL parity */
.kpi-card > .mr-3 { margin-inline-end: 12px; flex: 0 0 auto; }
.kpi-card .rounded-circle {
    width: 48px; height: 48px; min-width: 48px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%;
    font-size: 1.25rem; line-height: 1; opacity: 1;
}

/* Ensure the main content column can shrink and not overflow */
.kpi-card .flex-fill {
    min-width: 0; /* critical to prevent overflow in flex layouts */
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
}

.kpi-card .small { font-size: .78rem; color: #6c757d; font-weight:700; text-transform:uppercase; letter-spacing:.45px; }
.kpi-card .h5, .kpi-card .h5.mb-0 { margin:0; font-size:1.05rem; font-weight:800; color: #212529; }
.kpi-card .skeleton-bar { height: 1.2rem; width: 65%; border-radius:6px; background: linear-gradient(90deg, #eee, #ddd); }

/* RTL parity: right-align label + numbers, keep numbers LTR */
[dir="rtl"] .kpi-card .flex-fill { align-items: flex-end; text-align: right; }
[dir="rtl"] .kpi-card .small { text-align: right; }
[dir="rtl"] .kpi-card .h5 { text-align: right; }
[dir="rtl"] .kpi-card .h5, [dir="rtl"] .kpi-card .kpi-number-display { direction: ltr; unicode-bidi: isolate; }

/* Dark mode for kpi cards */
body.dark-mode .kpi-card {
    background: #1f262a; /* deep but not pure black */
    color: #e9eef2;
    box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
body.dark-mode .kpi-card .small { color: #b9c3c9; }
body.dark-mode .kpi-card .h5 { color: #f1f5f8; }
/* Icon circles in dark mode: slightly lighter translucent backgrounds */
body.dark-mode .kpi-card .rounded-circle { background: rgba(255,255,255,.04); }

/* Keep colored left border visible in dark mode by using original accent colors */
body.dark-mode .kpi-card[style*="border-left:6px solid"] { box-shadow: 0 6px 22px rgba(0,0,0,.5); }


/* ── Icon circle ──
   FIX: Removed the [dir="rtl"] override that shrank the icon to 46x46.
        Now IDENTICAL 50x50 in both LTR and RTL.
   FIX: Uses margin-inline-end so it auto-mirrors (right in LTR, left in RTL). */
.dashboard-kpi-box .icon {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    margin-inline-end: 14px; /* auto-mirrors: LTR=margin-right, RTL=margin-left */
    float: none !important;
    opacity: 1 !important;
}

.dashboard-kpi-box .icon > i {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* ── Icon size ── */
.dashboard-icon { font-size: 1.8rem !important; line-height: 1.1; }

/* ── Inner text column ──
   FIX: min-width:0 is the critical overflow-prevention rule.
   FIX: flex-direction column + container-type enables vertical stacking
        of label → number without any RTL/LTR asymmetry. */
.dashboard-kpi-box .inner {
    padding: 0;
    flex: 1 1 0;
    min-width: 0;           /* CRITICAL: allows flex child to compress */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* NOTE: do NOT add align-items here — the RTL rule below handles alignment */
}

/* ── KPI Label (e.g. "Total Sales") ── */
.dashboard-kpi-box .inner > p,
.kpi-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
    opacity: .88;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

/* ──اڤە او بەشئ بژەکرن ۆ مازنکرنا ژمارا داسهبۆردە یا وان هار ٨ بۆکسان── */
.dashboard-kpi-box .inner h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(1.15rem, 1.4vw, 1.25rem);
    font-weight: 1800;
    line-height: 1.08;
    min-height: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* FIX: inline style="min-height:42px" on old blade is overridden here */
}

/* ── Growth pill ── */
.growth-value {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .85rem;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
    background: rgba(0,0,0,.04);
}

.growth-value .text-success { color: #00a65a !important; }
.growth-value .text-danger  { color: #dd4b39 !important; }




/* -------------------------------------------------------------
   7. CARDS — enhanced shadows and borders
   ------------------------------------------------------------- */
   

.card {
    border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow);
    border: none;
   
}

.card-header {
    border-radius: var(--pos-radius) var(--pos-radius) 0 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.07);
    background: #fff;
}

.card-outline.card-primary { border-top: 3px solid var(--pos-blue); }
.card-outline.card-success  { border-top: 3px solid var(--pos-green); }
.card-outline.card-warning  { border-top: 3px solid var(--pos-orange); }
.card-outline.card-danger   { border-top: 3px solid var(--pos-red); }


/* -------------------------------------------------------------
   8. BUTTONS — subtle improvements
   ------------------------------------------------------------- */

.btn { border-radius: 6px; font-weight: 500; transition: all var(--transition); }
.btn-xs { padding: .2rem .5rem; font-size: .75rem; }

/* Icon-only action buttons */
.btn-action {
    width: 30px; height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: .8rem;
}


/* -------------------------------------------------------------
   9. MODALS — polished look
   ------------------------------------------------------------- */

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
}

.modal-header {
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
}

.modal-footer { border-top: 1px solid rgba(0,0,0,.08); }


/* -------------------------------------------------------------
   10. FORMS — cleaner inputs
   ------------------------------------------------------------- */

.form-control {
    border-radius: 6px;
    border-color: #ced4da;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
    border-color: var(--pos-blue);
    box-shadow: 0 0 0 .18rem rgba(60,141,188,.2);
}

.input-group-text {
    border-radius: 6px 0 0 6px;
    background: #f4f6f8;
    border-color: #ced4da;
}


/* -------------------------------------------------------------
   11. SIDEBAR BRAND / NAV — small tweaks
   ------------------------------------------------------------- */




/* -------------------------------------------------------------
   12. ALERTS / FLASH MESSAGES
   ------------------------------------------------------------- */

.alert { border-radius: 8px; border-left-width: 4px; }
.alert-success { border-left-color: var(--pos-green);  }
.alert-danger  { border-left-color: var(--pos-red);    }
.alert-warning { border-left-color: var(--pos-orange); }
.alert-info    { border-left-color: var(--pos-blue);   }


/* -------------------------------------------------------------
   13. PAGINATION
   ------------------------------------------------------------- */

.pagination .page-link {
    border-radius: 6px !important;
    margin: 0 2px;
    border-color: #dee2e6;
    color: var(--pos-blue);
    font-weight: 500;
}

.pagination .page-item.active .page-link {
    background-color: var(--pos-blue);
    border-color: var(--pos-blue);
}


/* -------------------------------------------------------------
   14. PRINT STYLES
   ------------------------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .main-footer,
    .content-header, .btn, .no-print { display: none !important; }
    .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}


/* -------------------------------------------------------------
   15. NAVBAR / DROPDOWN — overflow fix
   ------------------------------------------------------------- */

/* چارەسەرکرنا کێشەیا سکرۆلێ د ناڤ Topbar دا */
.main-header,
.navbar,
.nav-item.dropdown {
    overflow: visible !important;
}

/* پشت ڕاستبە کو فۆرمێ دەروبەرێ درۆپداونان سکرۆل نینە */
.navbar-nav {
    overflow: visible !important;
}


/* =============================================================
   KPI NUMBER DISPLAY SYSTEM
   .kpi-number-display + .kpi-int + .kpi-dec + .kpi-sym
   Uses CSS Container Queries (cqi) for sidebar-aware scaling.
   =============================================================*/

/* ── Fluid number wrapper ──
   container-type on the PARENT (.dashboard-kpi-box) + here together
   form a nested container chain so cqi is relative to this element. */
.kpi-number-display {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    line-height: 1.05;
    container-type: inline-size;
}

/* ── Integer part: e.g. "143,000,038,974" ──
   FIX: font-weight:900 as required.
   cqi formula: 5% of container width.
     ~220px box → ~11px → hits 0.9rem floor
     ~280px box → ~14px → 0.875rem comfortable
     ~340px box → ~17px → 1.06rem good
     ~400px box → ~20px → 1.25rem solid
   Cap at 2rem so numbers never look bloated on large screens. */
.kpi-number-display .kpi-int {
    font-size: clamp(1.15rem, 5cqi, 2rem);
    font-weight: 900;
    color: inherit;
    letter-spacing: -0.5px;
    display: inline;
    direction: ltr;
    unicode-bidi: isolate;
}



/* ── Decimal part: ".00" — smaller + 60% opacity ──
   FIX: opacity:.60 as required (was .60 already but now explicit).
   Size is ~60% of .kpi-int to maintain hierarchy. */
.kpi-number-display .kpi-dec {
    font-size: clamp(0.6rem, 3cqi, 1.2rem);
    font-weight: 600;
    opacity: .60;
    display: inline;
    direction: ltr;
    unicode-bidi: isolate;
    position: relative;
    top: -0.06em;
}

/* ── Currency symbol: "$" ── */
.kpi-number-display .kpi-sym {
    font-size: clamp(0.65rem, 3cqi, 1.1rem);
    font-weight: 700;
    opacity: .78;
    display: inline;
    margin-inline-end: 2px;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── cqi fallback for Safari < 16 ── */
@supports not (font-size: 1cqi) {
    .kpi-number-display .kpi-int {
        font-size: clamp(0.9rem, 1.5vw, 2rem);
    }
    .kpi-number-display .kpi-dec {
        font-size: clamp(0.6rem, 1vw, 1.2rem);
    }
    .kpi-number-display .kpi-sym {
        font-size: clamp(0.65rem, 1vw, 1.1rem);
    }
}

/* ── Skeleton inside number display ──
   Overrides the position:absolute from custom-adminlte.css .skeleton-bar */
.kpi-number-display .skeleton-bar {
    position: static;
    height: 1.4rem;
    width: 80%;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.15) 25%,
        rgba(255,255,255,.40) 50%,
        rgba(255,255,255,.15) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shine 1.4s infinite;
}


/* =============================================================
   CASHDRAW KPI BOXES
   =============================================================*/

/* CSS Grid: 4-col desktop → 2-col tablet/mobile */
.cashdraw-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.cashdraw-kpi-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 14px;
    overflow: hidden;
    padding: .9rem 1rem .8rem;
    min-height: 108px;
    box-shadow: 0 3px 14px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
    color: #fff;
    container-type: inline-size;
}

.cashdraw-kpi-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,.16);
}

.cashdraw-kpi-box .kpi-number-display {
    max-width: calc(100% - 2.2rem);
    container-type: inline-size;
}

.cashdraw-kpi-box .cashdraw-kpi-label {
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .82;
    margin: 5px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cashdraw-kpi-box .cashdraw-kpi-icon {
    position: absolute;
    bottom: .55rem;
    right: .85rem;
    font-size: 2.2rem;
    opacity: .16;
    pointer-events: none;
    line-height: 1;
}

.cashdraw-kpi-box.kpi-in  { background: linear-gradient(135deg, #00a65a 0%, #007a42 100%); }
.cashdraw-kpi-box.kpi-out { background: linear-gradient(135deg, #dd4b39 0%, #b33224 100%); }

/* Amber and pink colour helpers (used on dashboard boxes) */
.kpi-bg-amber { background-color: #fd7e14 !important; color: #fff; }
.kpi-bg-pink  { background-color: #d81b60 !important; color: #fff; }


/* =============================================================
   RTL PARITY — ALL SIZE RULES ARE IDENTICAL TO LTR
   FIX: Removed every rule that made RTL boxes, icons, or fonts
        smaller than their LTR equivalents. Details:
        • Removed [dir="rtl"] .dashboard-kpi-box .icon shrink (46→50)
        • Removed [dir="rtl"] .dashboard-kpi-box compact padding override
        • Removed [dir="rtl"] h3 font clamp with smaller values
        • Removed [dir="rtl"] @media 576px h3 = 1.25rem (was less than LTR)
   =============================================================*/

/* Numbers always read left-to-right regardless of page direction */
[dir="rtl"] .kpi-number-display,
[dir="rtl"] .kpi-number-display .kpi-int,
[dir="rtl"] .kpi-number-display .kpi-dec,
[dir="rtl"] .kpi-number-display .kpi-sym {
    direction: ltr;
    unicode-bidi: isolate;
}

/* In RTL, right-align the label and number within the inner block */
[dir="rtl"] .dashboard-kpi-box .inner {
    align-items: flex-end;
}

[dir="rtl"] .dashboard-kpi-box .inner > p,
[dir="rtl"] .kpi-label {
    text-align: right;
}

/* Cashdraw watermark icon flips to left in RTL */
[dir="rtl"] .cashdraw-kpi-box .cashdraw-kpi-icon {
    right: auto;
    left: .85rem;
}

[dir="rtl"] .cashdraw-kpi-box {
    text-align: right;
}

/* NOTE: .dashboard-kpi-box .icon margin is handled by margin-inline-end
   in the base rule above, so NO RTL override needed for the icon margin. */


/* =============================================================
   RESPONSIVE BREAKPOINTS
   FIX: Removed the [dir="rtl"] h3 font-size reduction at 576px.
        Both LTR and RTL now use the same sizes at every breakpoint.
   =============================================================*/

/* Large desktop */
@media (min-width: 1200px) {
    .dashboard-kpi-box .inner > p,
    .kpi-label { font-size: .76rem; }
}

/* Tablet landscape */
@media (max-width: 1199px) and (min-width: 992px) {
    .dashboard-kpi-box {
        padding: .85rem .9rem;
        min-height: 110px;
    }
    .dashboard-kpi-box .icon {
        width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
    }
    .dashboard-icon { font-size: 1.55rem !important; }
}

/* Tablets */
@media (max-width: 768px) {
    .dashboard-kpi-box { min-height: 108px; padding: .85rem; }
    .dashboard-icon    { font-size: 1.5rem !important; }

    .table-responsive-stack thead { display: none; }
    .table-responsive-stack tr    { display: block; margin-bottom: .75rem; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; }
    .table-responsive-stack td    { display: flex; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid #f0f0f0; }
    .table-responsive-stack td::before { content: attr(data-label); font-weight: 600; color: #555; white-space: nowrap; padding-right: .5rem; }

    .cashdraw-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet portrait */
@media (max-width: 991px) {
    .cashdraw-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-kpi-box {
        min-height: 104px;
        padding: .8rem;
    }
}

/* Mobile phones */
/* xalatea vakrna bashe fltarkrne ya dvere da*/

@media (max-width: 576px) {
    .dashboard-kpi-box {
        min-height: 92px;
        padding: .75rem;
    }

    .dashboard-kpi-box .icon {
        width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px;
    }

    .dashboard-icon { font-size: 1.35rem !important; }

    

   

    /* Cashdraw */
    .cashdraw-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }

    .cashdraw-kpi-box {
        min-height: 90px;
        padding: .75rem .75rem .65rem;
        border-radius: 10px;
    }

    .cashdraw-kpi-box .cashdraw-kpi-icon {
        font-size: 1.8rem;
        opacity: .13;
    }

    .cashdraw-kpi-box .kpi-number-display {
        max-width: 100%;
    }
    
}

/* Very small phones */
@media (max-width: 380px) {
    .dashboard-kpi-row .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 360px) {
    .cashdraw-kpi-grid { gap: .35rem; }
    .cashdraw-kpi-box  { min-height: 82px; }
}



/* =============================================================
   DARK MODE HEADER - PROFESSIONAL SLATE
   ئەڤ کۆدە ڕەنگێ "مۆری" لادەت و دکەتە ڕەنگێ ستانداردێ AdminLTE
   =============================================================*/

body.dark-mode .card-header {
    /* ڕەنگێ خۆلەمێشیێ تاریک یێ وەک وێنەیێ لاپتۆپێ تە */
    background-color: #343a40 !important; 
    background: #343a40 !important;
    border-bottom: 1px solid #4b545c !important;
    color: #ffffff !important;
}

/* سپیکرنا تەمام یا نڤیسین و ئایکۆنان */
body.dark-mode .card-header .card-title,
body.dark-mode .card-header h3,
body.dark-mode .card-header i,
body.dark-mode .card-header label,
body.dark-mode .card-tools .btn-tool {
    color: #ffffff !important;
    text-shadow: none !important; /* لادانا هەر سێبەورەکا ڕەنگێ تێک ددەت */
}

/* بۆ هندێ دوکمەیا زێدە (+) و کێم (-) ڕوون بن */
body.dark-mode .card-tools .btn-tool:hover {
    color: #f8f9fa !important;
}

/* ئەگەر کارت تابلۆ یان فۆرم بیت */
body.dark-mode .card-header + .card-body {
    border-top: none !important;
}

/* =============================================================
   RE-FIX: RTL INPUT GROUPS (Login & Forms)
   چارەسەرکرنا کێشەیا بۆردەرێ لایێ چەپێ یێ بەرزەبووی

   agar arishak habo j 773 ta 818 an 19 dejebay
   =============================================================*/

   
html[lang="ku"] .input-group > .form-control,
html[lang="ar"] .input-group > .form-control {
    /* ١. پشت ڕاستبە کو هەمی بۆردەر یێن هەین */
    border: 1px solid #ced4da !important;
    
    /* ٢. گۆشەیێن لایێ ڕاستێ خڕ بکە (چونکی RTL ـە) */
    border-radius: 6px 6px 6px 6px !important;
    text-align: right;
}

/* -------------------------------------------------------------
   ئەگەر ئایکۆن ل لایێ چەپێ بیت (Append - وەک لاپەرێ Login)
   ------------------------------------------------------------- */
html[lang="ku"] .input-group-append .input-group-text,
html[lang="ar"] .input-group-append .input-group-text {
    border-radius: 6px 0 0 6px !important; /* گۆشەیێن چەپێ خڕ بن */
    border-right: 0 !important;            /* بۆردەرێ ناڤبەرا ئایکۆن و ئینپۆت لادە */
    border-left: 1px solid #ced4da !important; /* بۆردەرێ دەرڤە یێ چەپێ دابنێ */
}

html[lang="ku"] .input-group > .form-control:not(:last-child),
html[lang="ar"] .input-group > .form-control:not(:last-child) {
    /* ئینپۆتا کو ئایکۆن ل دویڤ دهێت، بۆردەرێ وێ یێ چەپێ لادە دا بلکێت */
    border-left: 0 !important;
    border-right: 1px solid #ced4da !important;
    border-radius: 0 6px 6px 0 !important;
}

/* -------------------------------------------------------------
   ئەگەر ئایکۆن ل لایێ ڕاستێ بیت (Prepend)
   ------------------------------------------------------------- */
html[lang="ku"] .input-group-prepend .input-group-text,
html[lang="ar"] .input-group-prepend .input-group-text {
    border-radius: 0 6px 6px 0 !important; /* گۆشەیێن ڕاستێ خڕ بن */
    border-left: 0 !important;             /* بۆردەرێ ناڤبەرێ لادە */
    border-right: 1px solid #ced4da !important;
}



/* =============================================================
   FIX: RTL CUSTOM FILE INPUT (Product Image)
   چارەسەرکرنا کێشەیا دوگمەیا Browse و ناڤێ وێنەی د زمانێ RTL دا
   ava je  j 827 hata  859 bo inputut file da drst darkavn
   =============================================================*/

html[lang="ku"] .custom-file-label, 
html[lang="ar"] .custom-file-label {
    text-align: right;
    padding-right: 0.75rem;
    /* زێدەکرنا بۆشایییەکێ ل لایێ چەپێ دا نڤێسین نەکەڤیتە بن دوگمەیێ */
    padding-left: 80px; 
}

html[lang="ku"] .custom-file-label::after, 
html[lang="ar"] .custom-file-label::after {
    /* برنا دوگمەیێ بۆ لایێ چەپێ */
    left: -1px;
    right: auto;
    border-left: 1px solid #ced4da;
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

/* وەرگێڕانا پەیڤا Browse بۆ کوردی و عەرەبی ب شێوەیەکێ ستاتیک */
html[lang="ku"] .custom-file-label::after {
    content: "گەڕیان" !important;
}

html[lang="ar"] .custom-file-label::after {
    content: "استعراض" !important;
}

/* لادانا ئەو ڕەنگێ تاری یێ کو نڤێسینێ ڤەشێرت */
html[lang="ku"] .custom-file-input:focus ~ .custom-file-label,
html[lang="ar"] .custom-file-input:focus ~ .custom-file-label {
    box-shadow: none;
    border-color: #3c8dbc;
}


/* ١. کێمکرنا قەبارێ فۆنتی ل هەمی سیستەمی */


/* ٢. ڕێکخستنا سەرپەڕێن خشتەیان (Table Headers) */
.table thead th {
    font-size: 1rem !important;
   
}

/* ٣. بچووککرنا نڤێسینێن Sidebar */
.nav-sidebar .nav-link p {
    font-size: 1rem !important;
}



/* جوانکردنا ناڤێ سیستەمی د سایدیارێ دا */


/* نازککردنا نڤێسینێن سایدیارێ */
.nav-sidebar .nav-link p {
    font-weight: 500 !important;
    font-size: 0.99rem !important;
}

/* کێمکرنا کێشێ ئایکۆنان */
.nav-sidebar .nav-icon {
    font-size: 0.9rem !important;
    margin-right: 5px;
}

/* =============================================================
   FIX: SMOOTH RTL SIDEBAR ANIMATION — QeydPOS
   بۆ ئەوەی سایدبار لە زمانی کوردی و عەرەبی بە نەرمی بێت و نەجەقێت
   j 915 ta 943 bo narmkrna navbare b jwane bhet grtn o vakrn haka arisha habo jeba
   =============================================================*/

/* ١. چالاککردنی ئەنیمەیشن بۆ لای ڕاست (Margin-Right) */
html[lang="ku"] .content-wrapper,
html[lang="ar"] .content-wrapper,
html[lang="ku"] .main-header,
html[lang="ar"] .main-header,
html[lang="ku"] .main-footer,
html[lang="ar"] .main-footer {
    transition: margin-right 0.3s ease-in-out !important; /* هەمان خێرایی زمانی ئینگلیزی */
    margin-left: 0 !important; /* دڵنیابوونەوە لەوەی لای چەپ تێکەڵ نابێت */
}

/* ٢. نەرمکردنی جووڵەی سایدبارەکە خۆی لە زمانی RTL */
html[lang="ku"] .main-sidebar,
html[lang="ar"] .main-sidebar {
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

/* ٣. کێشەی "بازدان" (Jumping) چارەسەر دەکات کاتێک سایدبار دەکرێتەوە */
.sidebar-collapse html[lang="ku"] .main-sidebar,
.sidebar-collapse html[lang="ar"] .main-sidebar {
    transform: translate3d(0, 0, 0); /* چالاککردنی GPU بۆ ئەنیمەیشنێکی نەرمتر */
}



/* 
j 947 ta 964ئەڤ کۆدە ڕێگریێ ل "تێکچوونا" نڤیسینێ دکەت دەمێ ئەنیمەیشنێ */
html[lang="ku"] .nav-sidebar .nav-link p,
html[lang="ar"] .nav-sidebar .nav-link p {
    white-space: nowrap !important; /* ڕێگری ل دروستبوونا دوو ڕێزان دکەت */

    display: inline-block;          /* بۆ هندێ وەک بلوک نەبیت و نەپفیت */
    vertical-align: middle;
    transition: opacity 0.3s ease;  /* ئەنیمەیشنەکا نەرم بۆ دیاربوونێ */
}

/* دەمێ سایدبار گرتى بیت، نڤیسینێ بەرزە بکە دا تێکەڵ نەبیت */
.sidebar-collapse html[lang="ku"] .nav-sidebar .nav-link p,
.sidebar-collapse html[lang="ar"] .nav-sidebar .nav-link p {
    opacity: 0;
    width: 0;
}


/* ====== Global dark-mode improvements (page / sidebar / cards) ====== */
body.dark-mode {
    background-color: #0b0f11 !important;
    color: #dbe9ef !important;
}

body.dark-mode .content-wrapper {
    background: linear-gradient(180deg, #0b0f11 0%, #111416 100%);
}

body.dark-mode .main-sidebar {
    background: #12171a !important;
    color: #c9d6dc !important;
    border-right: 1px solid rgba(255,255,255,0.03);
}

body.dark-mode .main-sidebar .nav-link {
    color: #c9d6dc !important;
}

body.dark-mode .main-header,
body.dark-mode .navbar {
    background: #13171a !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Make cards darker and reduce harsh contrast */
body.dark-mode .card,
body.dark-mode .card .card-body,
body.dark-mode .kpi-card,
body.dark-mode  {
    background: #121618 !important;
    color: #dfeff5 !important;
   
}

/* Tables in dark mode */
body.dark-mode table.table-custom-header thead th {
    background-color: rgba(255,255,255,0.03) !important;
    color: #dbe9ef !important;
    border-color: rgba(255,255,255,0.04) !important;
}

body.dark-mode .table-custom-header tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.01); }
body.dark-mode .table-custom-header tbody tr:hover { background-color: rgba(255,255,255,0.02); }

/* KPI card specifics: ensure left border stays visible and icon accents are slightly brighter */

body.dark-mode .kpi-card[style*="border-left:6px solid #28a745"] { border-left-color: #2ecc71 !important; }
body.dark-mode .kpi-card[style*="border-left:6px solid #fd7e14"] { border-left-color: #ff9b3a !important; }
body.dark-mode .kpi-card[style*="border-left:6px solid #007bff"] { border-left-color: #58a6ff !important; }
body.dark-mode .kpi-card[style*="border-left:6px solid #d81b60"] { border-left-color: #ff6fa3 !important; }
body.dark-mode .kpi-card .rounded-circle { background: rgba(255,255,255,0.03) !important; }
body.dark-mode .kpi-card .rounded-circle i { opacity: .95; }

/* Reduce overly bright alerts / badges in dark mode */
body.dark-mode .alert { background: rgba(255,255,255,0.02); color: #dbe9ef; border-left-color: rgba(255,255,255,0.06); }

/* Charts container (if using Chart.js container backgrounds) */
body.dark-mode .card .chart-container,
body.dark-mode .card .chart-wrapper { background: transparent !important; }

/* Links and buttons */
body.dark-mode a, body.dark-mode .nav-link { color: #cfe9f3 !important; }
body.dark-mode .btn { box-shadow: none; }

/* Small tweaks to make skeleton loaders visible in dark mode */
body.dark-mode .kpi-card .skeleton-bar { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10), rgba(255,255,255,0.06)); }

/* ١. هێلانا لێنکا سەرەکی (Parent) ب ڕەنگێ شین */
body.dark-mode .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #007bff !important; /* ڕەنگێ شینێ ستاندارد */
    color: #ffffff !important;
}

/* ٢. سپیکرنا پاشبنەما و ڕەشکرنا نڤیسینا لێنکا بچووک (Child/Sub-menu) */
body.dark-mode .nav-treeview > .nav-item > .nav-link.active {
    background-color: #ffffff !important; /* سپی کردنی باگراوەند */
    color: #1f2d3d !important;           /* ڕەش کردنی نڤیسین */
  
}

/* ٣. ڕەشکرنا ئایکۆنێ د ناڤ لێنکا بچووک یا ئەکتیڤ دا */
body.dark-mode .nav-treeview > .nav-item > .nav-link.active i {
    color: #1f2d3d !important;
}

/* ٤. دەمێ ماوس دچیتە سەر لێنکا بچووک (Hover) */
body.dark-mode .nav-treeview > .nav-item > .nav-link:hover {
    background-color: #ffffff !important;
    color: #1f2d3d !important; 
}

/* ئەگەر تە ڤیا ڕەنگێ نڤیسینێ شین بیت وەک دیزاینا تە */
/* color: #3c8dbc !important; */


/* ئەڤە دێ ئەنیمەیشنا ئاسایی یا براوزەری ڕاوەستینیت دا تنێ ئەنیمەیشنا تە کار بکەت */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* پشت ڕاستبە کو پاشبنەما (Background) د دیار بیت د دەمێ ئەنیمەیشنێ دا */
.dark-mode::view-transition-old(root) {
  z-index: 1;
}
.dark-mode::view-transition-new(root) {
  z-index: 999;
}


/* Minimalist tweaks */
.font-weight-500 { font-weight: 500; }
.border-bottom-sm { border-bottom: 1px solid #f2f2f2; }
.bg-light { background-color: #f8f9fa !important; }

/* Dark Mode fixes for Minimalist Style */
body.dark-mode #profitModal .modal-content {
    background-color: #1a1a1a !important;
    color: #eeeeee !important;
}

body.dark-mode #profitModal .text-dark,
body.dark-mode #profitModal .h4,
body.dark-mode #profitModal h5 {
    color: #ffffff !important;
}

body.dark-mode #profitModal .bg-light {
    background-color: #262626 !important;
}

body.dark-mode #profitModal .border-bottom-sm {
    border-color: #333333 !important;
}

body.dark-mode #profitModal .btn-outline-dark {
    color: #ffffff;
    border-color: #ffffff;
}

/* =============================================================
   POS ACTION DROPDOWN — COMPLETE FIX
   File: paste into public/css/custom.css  (bottom of file)
   Covers: product-list, allsell, all-purchase, supplier,
           customer, Users/all-users
   Strategy: position:fixed portal via JS (see dropdown-portal.js)
             + pure-CSS LTR/RTL alignment guards as fallback.
   Compatible: Bootstrap 4 + AdminLTE 3 + Livewire 3
   =============================================================*/


/* ─────────────────────────────────────────────────────────────
   SECTION 1 – TABLE WRAPPER
   Keep overflow:auto (horizontal scroll) but allow the portal
   menu (position:fixed) to escape clipping. The menu itself
   never lives inside .table-responsive during display — the JS
   portal moves it to <body> — so overflow:auto is safe.
   ───────────────────────────────────────────────────────────── */

.table-responsive {
    overflow-x: auto !important;   /* ✅ keeps horizontal scrollbar */
    overflow-y: visible !important; /* allows fixed-pos children to paint outside */
    -webkit-overflow-scrolling: touch;
    position: relative;            /* local stacking context for non-portal fallback */
}


/* ─────────────────────────────────────────────────────────────
   SECTION 2 – ACTION BUTTON (toggle)
   Modern pill-style button matching Ultimate POS aesthetics.
   ───────────────────────────────────────────────────────────── */

.pos-action-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    padding:         .28rem .75rem;
    font-size:       .8rem;
    font-weight:     600;
    line-height:     1.5;
    border-radius:   6px;
    border:          1px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background .15s ease, box-shadow .15s ease, transform .1s ease;
    background:      linear-gradient(135deg, #3c8dbc 0%, #2a6fa5 100%);
    color:           #fff;
    box-shadow:      0 1px 4px rgba(44, 110, 165, .35);
    user-select:     none;
    -webkit-user-select: none;
}

.pos-action-btn:hover,
.pos-action-btn:focus {
    background:  linear-gradient(135deg, #2a6fa5 0%, #1e5487 100%);
    box-shadow:  0 3px 10px rgba(44, 110, 165, .45);
    transform:   translateY(-1px);
    outline:     none;
    color:       #fff;
    text-decoration: none;
}

.pos-action-btn:active {
    transform:   translateY(0);
    box-shadow:  0 1px 3px rgba(44, 110, 165, .3);
}

/* Caret icon inside button */
.pos-action-btn .pos-caret {
    width:        0;
    height:       0;
    border-left:  4px solid transparent;
    border-right: 4px solid transparent;
    border-top:   5px solid rgba(255,255,255,.85);
    transition:   transform .2s ease;
    flex-shrink:  0;
}

.pos-action-btn[aria-expanded="true"] .pos-caret {
    transform: rotate(180deg);
}

/* Keep Bootstrap's own .btn.dropdown-toggle consistent when NOT
   using the custom class (fallback for files not yet migrated) */
.table .dropdown-toggle.btn-sm {
    border-radius: 6px !important;
    font-size:     .8rem  !important;
    font-weight:   600    !important;
    padding:       .28rem .75rem !important;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 3 – DROPDOWN MENU SHELL
   The portal JS writes position:fixed + top/left at runtime.
   These rules define appearance only.
   ───────────────────────────────────────────────────────────── */

.pos-action-menu {
    display:          none;           /* hidden by default; JS shows it */
    position:         fixed !important; /* ← THE KEY: escapes overflow:hidden */
    z-index:          9999 !important;
    min-width:        160px;
    max-width:        220px;
    padding:          .4rem 0;
    margin:           0 !important;
    background:       #fff;
    border:           1px solid rgba(0,0,0,.10);
    border-radius:    10px;
    box-shadow:       0 8px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
    animation:        posMenuIn .12s ease forwards;
    transform-origin: top left;      /* overridden for RTL below */
    list-style:       none;
    pointer-events:   auto;
}

.pos-action-menu.show {
    display: block;
}

/* RTL: menu opens toward the left — adjust transform-origin */
[dir="rtl"] .pos-action-menu {
    transform-origin: top right;
}

/* Entrance animation */
@keyframes posMenuIn {
    from { opacity: 0; transform: scale(.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}


/* ─────────────────────────────────────────────────────────────
   SECTION 4 – MENU ITEMS
   ───────────────────────────────────────────────────────────── */

.pos-action-menu .pos-action-item {
    display:        flex;
    align-items:    center;
    gap:            .55rem;
    width:          100%;
    padding:        .5rem 1rem;
    font-size:      .84rem;
    font-weight:    500;
    color:          #343a40;
    background:     transparent;
    border:         0;
    text-align:     left;
    text-decoration: none;
    white-space:    nowrap;
    cursor:         pointer;
    transition:     background .13s ease, color .13s ease;
    box-sizing:     border-box;
}

[dir="rtl"] .pos-action-menu .pos-action-item {
    text-align:     right;
    flex-direction: row-reverse; /* icon stays on the outside edge */
}

.pos-action-menu .pos-action-item:hover,
.pos-action-menu .pos-action-item:focus {
    background: #f0f4ff;
    color:      #1a56db;
    outline:    none;
}

/* Danger item (Delete) */
.pos-action-menu .pos-action-item.item-danger {
    color: #dc3545;
}
.pos-action-menu .pos-action-item.item-danger:hover {
    background: #fff0f0;
    color:      #b02a37;
}

/* Divider */
.pos-action-menu .pos-action-divider {
    height:           1px;
    background:       rgba(0,0,0,.07);
    margin:           .35rem 0;
    pointer-events:   none;
}

/* Icon sizing inside items */
.pos-action-menu .pos-action-item i,
.pos-action-menu .pos-action-item .fa,
.pos-action-menu .pos-action-item .fas,
.pos-action-menu .pos-action-item .far {
    width:      16px;
    text-align: center;
    flex-shrink: 0;
    font-size:  .85rem;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 5 – LTR / RTL ALIGNMENT GUARDS
   Pure CSS fallback (no JS needed) for standard Bootstrap menus
   that have NOT been converted to .pos-action-menu yet.
   ───────────────────────────────────────────────────────────── */

/* LTR: align menu to the left edge of the button (default Bootstrap) */
[dir="ltr"] .table .dropdown-menu {
    left:  0   !important;
    right: auto !important;
}

/* RTL: align menu to the RIGHT edge of the button → opens to the LEFT */
[dir="rtl"] .table .dropdown-menu {
    right: 0   !important;
    left:  auto !important;
}

/* Prevent menu from going off-screen right in LTR near viewport edge */
@media (max-width: 576px) {
    [dir="ltr"] .table .dropdown-menu {
        left:  auto  !important;
        right: 0     !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   SECTION 6 – MOBILE OPTIMISATIONS
   On small screens the action column becomes full-width.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    /* Ensure menu never clips off right side of viewport */
    .pos-action-menu {
        max-width:  calc(100vw - 24px);
        min-width:  180px;
    }

    /* Stack any flex action wrappers */
    .pos-action-cell {
        display:    flex;
        justify-content: center;
    }
}


/* ─────────────────────────────────────────────────────────────
   SECTION 7 – DARK MODE (AdminLTE dark-mode class)
   ───────────────────────────────────────────────────────────── */

.dark-mode .pos-action-menu {
    background:   #2d3238;
    border-color: rgba(255,255,255,.1);
    box-shadow:   0 8px 28px rgba(0,0,0,.45);
}

.dark-mode .pos-action-menu .pos-action-item {
    color: #ced4da;
}

.dark-mode .pos-action-menu .pos-action-item:hover {
    background: rgba(255,255,255,.07);
    color:      #74c0fc;
}

.dark-mode .pos-action-menu .pos-action-item.item-danger {
    color: #f87171;
}

.dark-mode .pos-action-menu .pos-action-item.item-danger:hover {
    background: rgba(248,113,113,.12);
    color:      #fca5a5;
}

.dark-mode .pos-action-menu .pos-action-divider {
    background: rgba(255,255,255,.08);
}


/* ─────────────────────────────────────────────────────────────
   SECTION 8 – PREVENT BODY SCROLL LOCK when menu is open
   ───────────────────────────────────────────────────────────── */

body.pos-menu-open {
    /* Do NOT add overflow:hidden — that kills the table scroll */
    /* The backdrop (see JS) handles click-outside instead */
}