/*
  Global UI fixes for AdminLTE pages:
  - Better RTL alignment (Kurdish/Arabic)
  - Better mobile action button layout
*/

/* Mobile/table action buttons */



/* RTL support (AdminLTE master already sets dir="rtl" for ku/ar) */
html[dir="rtl"],
body[dir="rtl"],
[dir="rtl"] {
    direction: rtl;
}

/* Global card header flexbox fix for RTL/LTR compatibility */
.card-header,
html[dir="rtl"] .card-header,
html[dir="ltr"] .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
}

html[dir="rtl"] .card,
html[dir="rtl"] .card-header {
    text-align: right;
}

html[dir="ltr"] .card,
html[dir="ltr"] .card-header {
    text-align: left;
}

html[dir="rtl"] .card-header .card-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

html[dir="ltr"] .card-header .card-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

/* Logical margin properties for RTL/LTR (auto-mirroring) */
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 1rem; }

html[dir="ltr"] .mr-1 { margin-inline-end: 0.25rem; }
html[dir="ltr"] .mr-2 { margin-inline-end: 0.5rem; }
html[dir="ltr"] .mr-3 { margin-inline-end: 1rem; }

/* Make action buttons order feel natural in RTL */

/* Global small-box consistency for all modules (expenses/sales/purchase/cash drawer/...) */
/* Exclude dashboard KPI cards (they already have custom layout). */
.small-box:not(.dashboard-kpi-box) {
    min-height: 130px;
}

.small-box:not(.dashboard-kpi-box) .inner {
    position: relative;
    z-index: 10;
}

/* Keep long KPI numbers inside summary boxes */
.small-box:not(.dashboard-kpi-box) .inner h3,
.small-box:not(.dashboard-kpi-box) .inner h4 {
    font-size: clamp(1.5rem, 2.1vw, 2.45rem) !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    margin-bottom: 0.35rem;
    padding-right: 70px;
    letter-spacing: -0.2px;
}

html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .inner h3,
html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .inner h4 {
    padding-right: 0;
    padding-left: 70px;
}

.small-box:not(.dashboard-kpi-box) .icon {
    position: absolute;
    top: 20px;
    right: 10px;
    left: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-width: 40px;
    min-height: 40px;
    font-size: 2.5rem;
    opacity: 1 !important;
    transition: none;
}

.small-box:not(.dashboard-kpi-box) .icon > i,
.small-box:not(.dashboard-kpi-box) .icon > svg {
    right: 15px;
    left: auto;
}

html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .icon {
    left: 10px !important;
    right: auto !important;
}

html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .icon > i,
html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .icon > svg {
    left: 15px !important;
    right: auto !important;
}


   /* گوهۆڕینا ڕەنگێ پاشبنەما و نڤیسینا Tooltip */
    .tooltip-inner {
        background-color: #ffffff !important; /* ڕەنگێ سپی */
        color: #333 !important;             /* ڕەنگێ نڤیسینێ (تۆخ) */
        border: 1px solid #ddd;              /* چوارچۆڤەکێ تەنک */
        box-shadow: 0px 4px 8px rgba(0,0,0,0.1); /* سێبەرەکا جان وەک یێ وێنەی */
        padding: 10px;                       /* بۆشایی د ناڤ دا */
        font-size: 14px;                     /* قەبارێ نڤیسینێ */
        border-radius: 5px;                  /* خڕکرنا گۆشەیان */
    }

    /* گوهۆڕینا ڕەنگێ ئەو تیرۆکا (Arrow) دچیتە سەر ئای کۆنی */
    .bs-tooltip-top .arrow::before,
    .bs-tooltip-auto[x-placement^="top"] .arrow::before {
        border-top-color: #ffffff !important;
    }


@media (max-width: 575.98px) {
    .small-box:not(.dashboard-kpi-box) {
        min-height: 112px;
    }

    .small-box:not(.dashboard-kpi-box) .inner h3,
    .small-box:not(.dashboard-kpi-box) .inner h4 {
        font-size: clamp(1.20rem, 4.8vw, 1.4rem) !important;
        padding-right: 0;
        padding-left: 0;
        letter-spacing: -0.1px;
    }

    .small-box:not(.dashboard-kpi-box) .icon {
        font-size: 2rem;
        width: 40px;
        min-width: 32px;
        min-height: 32px;
        position: static !important;
        float: none !important;
        margin: 0 auto !important;
    }

    /* Hide ONLY cash drawer icons on mobile */
    .cashdraw-icon {
        display: none !important;
    }
}

/* Keep fallback float behavior predictable */
html[dir="rtl"] .small-box:not(.dashboard-kpi-box) .icon { float: left !important; }
html[dir="ltr"] .small-box:not(.dashboard-kpi-box) .icon { float: right !important; }

/* ───────────────────────────────────────────────────────────────
   CHART RTL/LTR FIXES
   Fixes Chart.js rendering in RTL mode by enforcing LTR context
   ─────────────────────────────────────────────────────────────── */
/* Force LTR direction on all chart containers */
#salesChart,
#topProductsChart,
#salesByHourChart {
    direction: ltr !important;
    unicode-bidi: isolate;
}

/* Chart card body containers - force LTR and prevent RTL interference */
.card-body canvas {
    display: block;
    max-width: 100%;
}



                /* ئەڤە بارێ لۆدینگێ یە کو جهێ ژمارەی دگریت */
    .skeleton-bar {
        display: inline-block;
        width: 120px; /* قەبارەیێ وێ دگەل ژمارەیێن خۆ ڕێک بێخە */
        height: 28px;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 5px;
        /* FIX: Changed position from 'absolute' to 'static' so that skeleton bars
           inside .kpi-number-display (a flex container) participate in normal flow.
           The absolute+left:0 positioning caused the skeleton to escape the flex box
           and overlap other content in both LTR and RTL.
           The .kpi-number-display .skeleton-bar override in custom.css ensures
           the dashboard KPIs use the correct static behaviour. */
        position: static;
        animation: shimmer 1.5s infinite ease-in-out;
    }

    /* Ensure dashboard KPI skeletons stay visible in RTL */
    .kpi-card .skeleton-bar {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    [dir="rtl"] .kpi-card .skeleton-bar {
        margin-inline-start: auto;
    }

    /* Dashboard loading state (forced by Livewire hooks) */
    .home-dashboard.is-loading .skeleton-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .home-dashboard.is-loading [wire\:loading\.remove] {
        display: none !important;
    }

    /* ئەنیمەیشنا دەبریسینێ */
    @keyframes shimmer {
        0% { opacity: 0.4; }
        50% { opacity: 0.8; }
        100% { opacity: 0.4; }
    }

    /* ئەگەر زمانێ تە RTL بیت، بارێ لۆدینگێ ب لایێ ڕاستێ ڤە دانی
       FIX: left/right positioning removed since position is now static.
       RTL alignment for skeleton bars is handled by the flex container's
       align-items/justify-content in each module. */



/* ava claset hnde na ko zman chbit box har hnde xobn */

        .box-responsive-rtl {
            margin-left: -6px;
            margin-right: -6px;
        }

        .box-responsive-rtl > [class*="col-"] {
            padding-left: 6px;
            padding-right: 6px;
            margin-bottom: 12px;
        }

        .box-responsive-rtl .small-box {
            margin-bottom: 0;
        }

/* Cash drawer balance cards: avoid clipping on RTL/mobile */
.cashdraw-balance-box .info-box-content {
    min-width: 0;
}

.cashdraw-balance-value {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
}

.cashdraw-balance-amount {
    font-size: clamp(1.10rem, 3.1vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cashdraw-balance-currency {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 700;
    flex: 0 0 auto;
}

html[dir="ltr"] .cashdraw-balance-content {
    text-align: right;
    padding-right: 1rem !important;
}

html[dir="rtl"] .cashdraw-balance-content {
    text-align: right;
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
}

@media (max-width: 575.98px) {
    .cashdraw-balance-box {
        min-height: 130px !important;
    }

    .cashdraw-balance-box .info-box-icon {
        width: 70px !important;
    }

    .cashdraw-balance-value {
        gap: 0.2rem;
    }

    .cashdraw-balance-amount {
        font-size: clamp(1rem, 5.7vw, 1.45rem);
    }
}
/* Cash drawer 4 KPI boxes: keep big numbers visible in RTL/LTR */
.cashdraw-kpi-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.05;
    font-size: clamp(1rem, 1.55vw, 1.85rem);
}

.cashdraw-kpi-number {
    direction: ltr;
    unicode-bidi: isolate;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cashdraw-kpi-currency {
    direction: ltr;
    unicode-bidi: isolate;
    flex: 0 0 auto;
}

html[dir="rtl"] .cashdraw-kpi-value {
    flex-direction: row-reverse;
}

@media (max-width: 991.98px) {
    .cashdraw-kpi-value {
        font-size: clamp(0.95rem, 3.8vw, 1.35rem);
    }
}


/* =============================================================
   PARITY FIX: AdminLTE Content-Wrapper RTL/LTR Width Parity
   =============================================================
   ROOT CAUSE OF THE "RTL BOXES ARE SMALLER" BUG:
   AdminLTE sets .content-wrapper { margin-left: 250px } for LTR
   to account for the sidebar. In RTL this must become
   margin-right: 250px and margin-left: 0.
   Without this fix, the RTL content area is 250px NARROWER
   than the LTR content area (the sidebar eats into it from the
   wrong side), which makes every card and KPI box physically
   smaller — appearing as if RTL "shrinks" things.

   Note: AdminLTE 3 ships its own RTL stylesheet (adminlte.rtl.min.css).
   If you are loading that file, these rules reinforce it.
   If you are NOT loading adminlte.rtl.min.css, these rules are
   the sole fix for content-wrapper parity.
   ============================================================= */

/* LTR: sidebar is on the left → content pushed right */
html[dir="ltr"] .content-wrapper,
html[dir="ltr"] .main-footer,
html[dir="ltr"] .main-header {
    margin-left: 250px;
    margin-right: 0;
}

/* RTL: sidebar is on the right → content pushed left */
html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .main-footer,
html[dir="rtl"] .main-header {
    margin-right: 250px;
    margin-left: 0 !important; /* override any AdminLTE LTR rule */
}

/* Sidebar open state: AdminLTE toggles body.sidebar-collapse */
html[dir="rtl"] body.sidebar-collapse .content-wrapper,
html[dir="rtl"] body.sidebar-collapse .main-footer,
html[dir="rtl"] body.sidebar-collapse .main-header {
    margin-right: 4.6rem; /* collapsed sidebar width */
    margin-left: 0 !important;
}

html[dir="ltr"] body.sidebar-collapse .content-wrapper,
html[dir="ltr"] body.sidebar-collapse .main-footer,
html[dir="ltr"] body.sidebar-collapse .main-header {
    margin-left: 4.6rem;
    margin-right: 0;
}

/* Sidebar itself: flip position for RTL */
html[dir="rtl"] .main-sidebar {
    right: 0;
    left: auto;
}

/* Mobile: sidebar slides off screen — reset margins */
@media (max-width: 991.98px) {
    html[dir="rtl"] .content-wrapper,
    html[dir="rtl"] .main-footer,
    html[dir="rtl"] .main-header {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html[dir="ltr"] .content-wrapper,
    html[dir="ltr"] .main-footer,
    html[dir="ltr"] .main-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}