/*
 * TADBIR design system — layered on top of Bootstrap 5.3 (CDN), not a
 * replacement for it. Every rule here uses CSS logical properties
 * (margin-inline-*, padding-inline-*, text-align: start/end, border-inline-*)
 * so the entire theme mirrors automatically between the French/LTR and
 * Arabic/RTL layouts driven by <html dir="ltr|rtl">, with zero [dir="rtl"]
 * overrides needed except where noted.
 */

:root {
    --sidebar-bg-start: #0c0824;
    --sidebar-bg-end: #1b1046;
    --sidebar-text: #a8a2c9;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(135deg, #8b5cf6, #d946ef);
    --sidebar-active-glass: linear-gradient(135deg, rgba(139, 92, 246, .24), rgba(217, 70, 239, .13));
    --sidebar-active-accent: linear-gradient(180deg, #c084fc, #f472b6);
    --sidebar-active-icon: #e0b3ff;
    --sidebar-hover-bg: rgba(255, 255, 255, .05);
    --sidebar-border: rgba(255, 255, 255, .08);
    --sidebar-glow: rgba(139, 92, 246, .38);

    --accent: #7c3aed;
    --accent-dark: #6d28d9;
    --accent-light: #f1ecfe;

    /* Hyperlink colour, distinct from --accent (which drives buttons and
       active states). Applied on the bare `a` element selector below, so
       any link that already carries a colour class — .btn, .text-muted,
       .sidebar-nav-link, .text-white… — keeps its own colour untouched. */
    --link: #0c8497;
    --link-hover: #0a6b7a;

    --success: #10b981;
    --success-light: #e3faf1;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fde8e8;
    --info: #3b82f6;
    --info-light: #e3edfe;
    --purple: #8b5cf6;
    --purple-light: #f1ecfe;

    --body-bg: #f4f5fb;
    --card-bg: #ffffff;
    --card-radius: 16px;
    --card-radius-sm: 12px;
    --card-shadow: 0 2px 16px rgba(30, 21, 82, .06);
    --card-border: #edecf5;

    --text-heading: #1e1b3a;
    --text-body: #4b4a68;
    --text-muted: #8b899e;

    --topbar-h: 76px;
    --sidebar-w: 272px;
    --sidebar-w-mini: 84px;
}

/* Dark mode — toggled via the topbar button (public/js/app.js), persisted
   in localStorage, applied via Bootstrap's own [data-bs-theme] attribute
   so its native components (forms, dropdowns, modals, tables) restyle
   themselves for free; these overrides only need to cover TADBIR's own
   custom surface/text variables, since every rule in this file already
   reads colors through var(...) rather than hardcoding them. The sidebar
   is deliberately NOT touched — it's already dark in both modes. The
   `-light` accent variants (--success-light etc.) are also left as-is:
   badges/soft backgrounds pair them with hardcoded dark text (see
   .badge-soft-*), so keeping them light preserves that contrast rather
   than requiring every such rule to grow a dark-mode override too. */
[data-bs-theme="dark"] {
    --body-bg: #13111f;
    --card-bg: #1c1930;
    --card-shadow: 0 2px 16px rgba(0, 0, 0, .35);
    --card-border: rgba(255, 255, 255, .08);

    --text-heading: #f5f4fb;
    --text-body: #c7c4dc;
    --text-muted: #948fb0;

    /* The light-mode link teal is too dark to read on the near-black dark
       surface (roughly 4.2:1, under the 4.5:1 minimum) — lightened here so
       links stay legible in both modes. */
    --link: #2bb3c9;
    --link-hover: #56c9db;
}

html, body {
    height: 100%;
}

body {
    background: var(--body-bg);
    color: var(--text-body);
    font-family: 'Segoe UI', 'Cairo', Tahoma, Arial, sans-serif;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

/* Alpine's x-cloak attribute is only a marker — Alpine itself never hides
   the element, this rule does. Without it, anything server-rendered
   visible and later hidden via x-show/x-cloak (searchable-select's
   dropdown/clear button, the POS totals-breakdown toggle) flashes
   visible for a moment before Alpine boots and hides it. */
[x-cloak] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6, .fw-heading {
    color: var(--text-heading);
    font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* App shell                                                         */
/* ---------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 1 auto;
    padding: 1.75rem;
}

@media (max-width: 991.98px) {
    .app-content {
        padding: 1.25rem;
        /* Room for the fixed .mobile-bottom-nav so page content never
           renders underneath it — see that rule's own height further
           down for the base value this mirrors. */
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------- */
/* Sidebar                                                            */
/* ---------------------------------------------------------------- */

.sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1030;
    transition: flex-basis .2s ease, width .2s ease;
    box-shadow: 3px 0 24px rgba(8, 5, 28, .18);
}

/* Two soft radial glows for depth — purely decorative, sits behind
   everything else in the sidebar via negative z-index, never intercepts
   clicks (pointer-events: none) or affects JS's DOM queries. */
.sidebar::before,
.sidebar::after {
    content: '';
    position: absolute;
    inset-inline-start: -10%;
    width: 70%;
    height: 40%;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.sidebar::before {
    top: -8%;
    background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 70%);
}

.sidebar::after {
    bottom: -6%;
    inset-inline-start: 20%;
    background: radial-gradient(circle, rgba(217, 70, 239, .16), transparent 70%);
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .9rem 0 1.25rem;
    min-height: var(--topbar-h);
    box-sizing: border-box;
    color: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}

/* Moved into the topbar (reuses .icon-btn's own box styling — see
   theme.css's .icon-btn rule). The icon itself swaps glyph (full panel vs.
   inset panel — see app.js's applyMini()) to depict expanded/collapsed,
   so unlike the old chevron this needs no rotate transform at all; only a
   tiny scale pulse on change for tactile feedback. */
#sidebar-toggle-btn i {
    display: inline-block;
    transition: transform .15s ease;
}

#sidebar-toggle-btn:active i {
    transform: scale(.85);
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--sidebar-active-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--sidebar-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* An uploaded platform logo (layouts/bo.blade.php, layouts/app.blade.php)
   replaces the icon+glow box above with a plain image — no background/
   shadow of its own, sized to match the same 42px slot. */
.sidebar-brand-icon-logo {
    background: none;
    box-shadow: none;
}

.sidebar-brand-icon-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #fff;
    border-radius: 6px;
}

.sidebar-brand-text {
    line-height: 1.15;
}

.sidebar-brand-name {
    font-family: 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: .015em;
    color: #fff;
    background: linear-gradient(135deg, #ffffff, #d9cbff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-brand-tagline {
    font-size: .71rem;
    letter-spacing: .03em;
    color: var(--sidebar-text);
    opacity: .75;
}

.sidebar-nav {
    flex: 1 1 auto;
    padding: .5rem .9rem 1rem;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

.sidebar-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    border-radius: 11px;
    color: var(--sidebar-text);
    font-family: 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: .2rem;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sidebar-nav-link.active {
    font-weight: 600;
}

.sidebar-nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    transition: color .18s ease;
}

.sidebar-nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: #fff;
    transform: translateX(2px);
}

[dir="rtl"] .sidebar-nav-link:hover {
    transform: translateX(-2px);
}

.sidebar-nav-link.active {
    background: var(--sidebar-active-glass);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 20px -8px var(--sidebar-glow);
}

.sidebar-nav-link.active i {
    color: var(--sidebar-active-icon);
}

.sidebar-nav-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: var(--sidebar-active-accent);
}

.sidebar-nav-group > .sidebar-nav-link::after {
    content: '\F282';
    font-family: bootstrap-icons;
    margin-inline-start: auto;
    font-size: .68rem;
    opacity: .6;
    transition: transform .18s ease, opacity .18s ease;
}

.sidebar-nav-group.open > .sidebar-nav-link::after,
.sidebar-nav-group > .sidebar-nav-link:hover::after {
    opacity: 1;
}

.sidebar-nav-group.open > .sidebar-nav-link::after {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    padding-inline-start: 1.6rem;
    margin-block: .1rem .35rem;
    margin-inline-start: 1.15rem;
    margin-inline-end: 0;
    display: none;
    border-inline-start: 1px solid var(--sidebar-border);
}

.sidebar-nav-group.open .sidebar-submenu {
    display: block;
}

.sidebar-submenu .sidebar-nav-link {
    padding-top: .42rem;
    padding-bottom: .42rem;
    font-size: .855rem;
}

/* Sidebar items with no page behind them yet — visible (per the target
   navigation structure) but inert, so the menu shows the full intended
   shape without offering dead links. */
.sidebar-nav-link.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.sidebar-nav-link.is-disabled:hover {
    background: transparent;
    color: var(--sidebar-text);
    transform: none;
}

.sidebar-soon-badge {
    margin-inline-start: auto;
    padding: .12em .5em;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: var(--sidebar-text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* A group whose every child is disabled still opens (so the structure is
   browsable) but never shows an "active" state of its own. */
.sidebar-nav-group.is-empty > .sidebar-nav-link {
    opacity: .7;
}

/* Expired trial/subscription — every feature link is visually muted (not
   disabled: links keep working, so a company is never actually locked out
   of its own data) except the "Abonnement" settings entries
   (.sidebar-nav-link-renew), which stay at full contrast so the way to
   renew is never itself greyed out. Dimming each .sidebar-nav-link
   individually (rather than the whole .sidebar-nav-group container) is
   what lets that one exception actually restore full opacity — opacity
   on an ancestor can never be undone by a descendant. */
.sidebar-subscription-expired .sidebar-nav-group .sidebar-nav-link {
    opacity: .55;
    filter: grayscale(.4);
}
.sidebar-subscription-expired .sidebar-nav-group .sidebar-nav-link:hover {
    opacity: .85;
}
.sidebar-subscription-expired .sidebar-nav-link-renew {
    opacity: 1 !important;
    filter: none !important;
    font-weight: 600;
}

.sidebar-support {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .4rem .9rem .8rem;
    padding: .55rem .65rem;
    border-radius: var(--card-radius-sm);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid var(--sidebar-border);
    backdrop-filter: blur(6px);
    transition: background-color .15s ease, border-color .15s ease;
}

.sidebar-support:hover {
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .16);
}

.sidebar-support-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--sidebar-active-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
    color: #fff;
    box-shadow: 0 4px 12px -3px var(--sidebar-glow);
}

.sidebar-support-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.sidebar-support h6 {
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-support p {
    font-size: .68rem;
    color: var(--sidebar-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-support-arrow {
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--sidebar-text);
    opacity: .6;
    transition: opacity .15s ease, transform .15s ease;
}

.sidebar-support:hover .sidebar-support-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

[dir="rtl"] .sidebar-support:hover .sidebar-support-arrow {
    transform: translate(-2px, -2px);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 10, 40, .45);
        z-index: 1020;
        display: none;
    }

    .sidebar-backdrop.open {
        display: block;
    }
}

/* ---------------------------------------------------------------- */
/* Mobile bottom tab bar (layouts/app.blade.php only)                */
/* ---------------------------------------------------------------- */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;
        height: 4.25rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--card-bg);
        border-top: 1px solid var(--card-border);
    }
}

.mobile-bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: .7rem;
    text-decoration: none;
    padding: .25rem .5rem;
}

.mobile-bottom-nav-link i {
    font-size: 1.15rem;
}

.mobile-bottom-nav-link.active {
    color: var(--accent);
}

.mobile-bottom-nav-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 .25rem .75rem rgba(124, 58, 237, .35);
}

/* ---------------------------------------------------------------- */
/* Sidebar — collapsed ("mini") desktop mode                         */
/* ---------------------------------------------------------------- */

.sidebar.sidebar-mini {
    flex-basis: var(--sidebar-w-mini);
    width: var(--sidebar-w-mini);
}

.sidebar.sidebar-mini .sidebar-brand {
    padding-inline: .75rem;
    justify-content: center;
}

.sidebar.sidebar-mini .sidebar-brand-text,
.sidebar.sidebar-mini .sidebar-support {
    display: none;
}

.sidebar.sidebar-mini .sidebar-brand-link {
    flex: 0 0 auto;
}

.sidebar.sidebar-mini .sidebar-nav-link {
    justify-content: center;
    font-size: 0;
    padding-inline: .6rem;
}

.sidebar.sidebar-mini .sidebar-nav-link i {
    font-size: 1.05rem;
}

.sidebar.sidebar-mini .sidebar-nav-link.active::before {
    inset-inline-start: 50%;
    top: auto;
    bottom: 6px;
    transform: translateX(-50%);
    width: 5px;
    height: 3px;
}

[dir="rtl"] .sidebar.sidebar-mini .sidebar-nav-link.active::before {
    transform: translateX(50%);
}

.sidebar.sidebar-mini .sidebar-nav-group > .sidebar-nav-link::after {
    display: none;
}

.sidebar.sidebar-mini .sidebar-submenu {
    display: none !important;
}

/* Hover fly-out panel, shown only while the sidebar is in mini mode  */

#sb-flyout {
    position: fixed;
    z-index: 1060;
    background: linear-gradient(165deg, #17103e, #241653);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--card-radius-sm);
    box-shadow: 10px 14px 36px rgba(8, 5, 28, .5), 0 0 0 1px rgba(255, 255, 255, .03);
    padding: 6px;
    min-width: 200px;
    max-height: 75vh;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
    animation: sbFlyoutIn .14s ease;
}

@keyframes sbFlyoutIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[dir="rtl"] #sb-flyout {
    box-shadow: -6px 8px 28px rgba(15, 10, 40, .45);
}

.sb-flyout-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    opacity: .7;
    padding: .5rem .75rem .4rem;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: .25rem;
}

#sb-flyout .sidebar-nav-link,
#sb-flyout .sb-flyout-single {
    display: flex !important;
    font-size: .87rem !important;
    padding: .5rem .75rem !important;
}

#sb-flyout .sidebar-nav-link::after {
    display: none;
}

/* ---------------------------------------------------------------- */
/* Topbar                                                             */
/* ---------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    padding: .85rem 1.75rem;
    min-height: var(--topbar-h);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1010;
}

@media (max-width: 991.98px) {
    .topbar {
        padding: .85rem 1.25rem;
    }
}

.topbar-search {
    flex: 1 1 auto;
    position: relative;
    max-width: 480px;
}

.topbar-search input {
    width: 100%;
    background: var(--body-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: .55rem 1rem .55rem 2.5rem;
}

[dir="rtl"] .topbar-search input {
    padding: .55rem 2.5rem .55rem 1rem;
}

.topbar-search i {
    position: absolute;
    inset-inline-start: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
}

.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg);
    color: var(--text-body);
    border: none;
    font-size: 1.05rem;
}

.icon-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.icon-btn .badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    font-size: .62rem;
    padding: .2em .4em;
}

/* ---------------------------------------------------------------- */
/* Table row actions — icon-only buttons, CSS tooltips, kebab menu   */
/* ---------------------------------------------------------------- */

.row-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.table-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: .92rem;
    line-height: 1;
}

.table-icon-btn.btn-outline-secondary {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--card-border);
    --bs-btn-hover-bg: var(--accent-light);
    --bs-btn-hover-border-color: var(--accent-light);
    --bs-btn-hover-color: var(--accent-dark);
}

.table-icon-btn.btn-outline-danger:hover {
    color: #fff;
}

.table-icon-btn.btn-outline-success:hover,
.table-icon-btn.btn-outline-warning:hover {
    color: #fff;
}

/* Pure-CSS tooltip (no JS needed, so it never desyncs from Livewire's */
/* DOM morphing the way a Bootstrap-JS tooltip instance would).       */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    inset-inline-start: 50%;
    transform: translate(-50%, 4px);
    background: var(--text-heading);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .35rem .6rem;
    border-radius: 7px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}

[dir="rtl"] [data-tooltip]::after {
    transform: translate(50%, 4px);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

[dir="rtl"] [data-tooltip]:hover::after,
[dir="rtl"] [data-tooltip]:focus-visible::after {
    transform: translate(50%, 0);
}

/* Kebab "more actions" dropdown, used once a row has 3+ actions      */

.row-actions-menu .table-icon-btn {
    border-color: var(--card-border);
    color: var(--text-muted);
}

.row-actions-menu .dropdown-menu {
    min-width: 190px;
}

.row-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.row-actions-menu .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.row-actions-menu .dropdown-item.text-danger:hover {
    background: var(--danger-light);
    color: #b91c1c;
}

/* <x-row-actions> variant — teleported to <body> + position:fixed so the
   menu escapes any clipping ancestor (e.g. .table-modern-wrap's
   overflow:hidden), the same fix applied to <x-searchable-select>.        */

.row-actions-dropdown {
    /* Alpine's x-show only clears its own inline "display" override on
       show — it never forces display:block — so Bootstrap's own
       `.dropdown-menu { display: none; }` base rule would otherwise win
       the cascade and keep this permanently hidden once teleported out
       from under any `.show`-class-based toggling. */
    display: block;
    position: fixed;
    z-index: 1075;
    min-width: 190px;
    margin: 0;
}

.row-actions-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.row-actions-dropdown .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.row-actions-dropdown .dropdown-item.text-danger:hover {
    background: var(--danger-light);
    color: #b91c1c;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    object-fit: cover;
}

.user-name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text-heading);
    line-height: 1.2;
}

.user-role {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- */
/* Cards, KPIs                                                        */
/* ---------------------------------------------------------------- */

.page-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1.25rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h4 {
    margin-bottom: .15rem;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: .88rem;
}

.kpi-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    color: #fff;
}

.kpi-icon.bg-accent { background: linear-gradient(135deg, var(--accent), var(--purple)); }
.kpi-icon.bg-success { background: linear-gradient(135deg, #10b981, #34d399); }
.kpi-icon.bg-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.kpi-icon.bg-info { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.kpi-icon.bg-danger { background: linear-gradient(135deg, #ef4444, #f87171); }

.kpi-label {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.kpi-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.1;
}

.kpi-delta {
    font-size: .76rem;
    font-weight: 700;
    margin-top: .25rem;
}

.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* ---------------------------------------------------------------- */
/* Badges, buttons, tables                                            */
/* ---------------------------------------------------------------- */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35em .75em;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}

/* Compact variant — for a badge that annotates another element rather than
   standing on its own (e.g. the brand under a product name in the catalog
   list), where the default size competes with the label it belongs to. */
/* ---------------------------------------------------------------- */
/* Support threads (client + platform, one shared partial)            */
/* ---------------------------------------------------------------- */

.support-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-message {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    padding: .9rem 1.1rem;
    background: var(--body-bg);
    /* The client's own messages sit slightly indented from the platform's,
       so a long thread reads as a conversation rather than a log. */
    margin-inline-end: 2.5rem;
}

.support-message-staff {
    background: var(--accent-light);
    border-color: transparent;
    margin-inline-end: 0;
    margin-inline-start: 2.5rem;
}

.support-message-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.support-message-body {
    color: var(--text-body);
    font-size: .92rem;
}

.support-message-file {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    font-size: .82rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .support-message,
    .support-message-staff {
        margin-inline: 0;
    }
}

/* Profile identity banner (Bo\Profile) — the avatar is editable in the
   place it is actually displayed, so it needs a larger rendition than the
   42px .user-avatar of the topbar. */
.profile-avatar-slot {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--card-bg);
    box-shadow: 0 6px 20px -6px rgba(30, 21, 82, .35);
}

.profile-avatar-initial {
    background: var(--sidebar-active-bg);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
}

/* Covers the avatar only while a new file is uploading. */
.profile-avatar-loading {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(20, 10, 60, .55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-soft-sm {
    padding: .12em .5em;
    font-size: .66rem;
    font-weight: 600;
}

.badge-soft-success { background: var(--success-light); color: #067a55; }
.badge-soft-warning { background: var(--warning-light); color: #92600a; }
.badge-soft-danger { background: var(--danger-light); color: #b91c1c; }
.badge-soft-info { background: var(--info-light); color: #1d4ed8; }
.badge-soft-purple { background: var(--purple-light); color: var(--accent-dark); }
.badge-soft-muted { background: var(--body-bg); color: var(--text-muted); }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}

.link-primary, a.text-primary {
    color: var(--accent) !important;
}

.table-modern-wrap {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    /* overflow-x: auto (not hidden) so a table wider than its card can be
       panned horizontally on mobile — overflow-y stays hidden to keep the
       wrapper's rounded top/bottom corners clipping the table underneath. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-modern {
    margin-bottom: 0;
}

.table-modern thead th {
    background: var(--body-bg);
    color: var(--text-muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-bottom: none;
    padding: .85rem 1rem;
}

.table-modern tbody td {
    padding: .85rem 1rem;
    vertical-align: middle;
    color: var(--text-body);
    border-bottom: 1px solid var(--card-border);
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

.table-modern tbody tr:hover {
    background: var(--body-bg);
}

/* ---------------------------------------------------------------- */
/* Alerts, chart card, misc                                           */
/* ---------------------------------------------------------------- */

.chart-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1.25rem;
    height: 100%;
}

.donut-legend {
    list-style: none;
    padding: 0;
    margin: 0;
}

.donut-legend li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    font-size: .85rem;
}

.donut-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--card-border);
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: .95rem;
}

.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--card-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-light);
}

.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-heading);
}

.nav-tabs .nav-link.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Settings shell (Paramètres tabs: Général / Société / Succursales) */
/* ---------------------------------------------------------------- */

.settings-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.settings-nav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.settings-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem;
    border-radius: 10px;
    color: var(--text-body);
    font-size: .9rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.settings-nav-link i {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.settings-nav-link:hover {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.settings-nav-link.active {
    background: var(--accent-light);
    color: var(--accent);
}

.settings-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .settings-shell {
        flex-direction: column;
    }

    .settings-nav {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        width: 100%;
    }
}

/* ---------------------------------------------------------------- */
/* Modern dropdowns (langue, notifications, utilisateur)             */
/* ---------------------------------------------------------------- */

.dropdown-menu {
    border: none;
    border-radius: var(--card-radius-sm);
    box-shadow: 0 10px 40px rgba(30, 21, 82, .15);
    padding: .5rem;
    animation: dropdownIn .15s ease;
}

.dropdown-item {
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .88rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.dropdown-header {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 700;
    padding: .5rem .75rem .35rem;
}

.dropdown-divider {
    margin: .4rem 0;
    border-color: var(--card-border);
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- */
/* SweetAlert2 (styled wire:confirm)                                 */
/* ---------------------------------------------------------------- */

.tadbir-swal {
    border-radius: var(--card-radius) !important;
    font-family: 'Segoe UI', 'Cairo', Tahoma, Arial, sans-serif !important;
}

.tadbir-swal .swal2-title {
    color: var(--text-heading) !important;
    font-size: 1.15rem !important;
}

.tadbir-swal .swal2-html-container {
    color: var(--text-body) !important;
}

.tadbir-swal .swal2-confirm,
.tadbir-swal .swal2-cancel {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: .55rem 1.4rem !important;
}

/* ---------------------------------------------------------------- */
/* <x-modal> popup (replaces the old inline show/hide create forms)  */
/* ---------------------------------------------------------------- */

.tadbir-modal-backdrop {
    background: rgba(30, 21, 82, .45);
    animation: modalBackdropIn .15s ease-out;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tadbir-modal-backdrop .modal-content {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 40px rgba(30, 21, 82, .18);
}

.tadbir-modal-backdrop .modal-header,
.tadbir-modal-backdrop .modal-footer {
    border-color: var(--card-border);
}

.tadbir-modal-backdrop .modal-title {
    color: var(--text-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.tadbir-modal-backdrop .modal-body > :last-child {
    margin-bottom: 0;
}

.tadbir-modal-backdrop .modal-footer {
    gap: .5rem;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------- */
/* <x-searchable-select> combo (customer / product pickers)          */
/* ---------------------------------------------------------------- */

.tadbir-combo {
    position: relative;
}

.tadbir-combo-input-wrap {
    position: relative;
}

.tadbir-combo-input-wrap .form-control {
    padding-inline-end: 2rem;
}

.tadbir-combo-clear {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    color: var(--text-muted);
    font-size: .75rem;
}

.tadbir-combo-clear:hover {
    color: var(--danger);
}

.tadbir-combo-results {
    position: fixed;
    z-index: 1075;
    max-height: 260px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    box-shadow: 0 12px 32px rgba(30, 21, 82, .16);
    padding: .25rem;
}

.tadbir-combo-item {
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .875rem;
    color: var(--text-body);
}

.tadbir-combo-item:hover,
.tadbir-combo-item:focus {
    background: var(--accent-light);
    color: var(--text-heading);
}

.tadbir-combo-status {
    padding: .6rem;
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
}

/* ---------------------------------------------------------------- */
/* Product form restyle — section icon badge, image dropzone/gallery  */
/* ---------------------------------------------------------------- */

.section-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .95rem;
    flex-shrink: 0;
}

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 2px dashed var(--card-border);
    border-radius: var(--card-radius-sm);
    background: var(--body-bg);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.image-dropzone:hover,
.image-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.image-dropzone-icon {
    font-size: 1.6rem;
    color: var(--accent);
}

.image-thumb-strip {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.image-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    border: 2px solid var(--card-border);
    background: var(--body-bg);
}

.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-thumb.is-primary {
    border-color: var(--accent);
}

.image-thumb-actions {
    position: absolute;
    inset-inline-end: 2px;
    top: 2px;
    display: flex;
    gap: 2px;
}

/* ------------------------------------------------------------------ */
/* Subscription — step indicator (Overview/Configurator/Payment) and    */
/* the module picker card grid on Configurator.                         */
/* ------------------------------------------------------------------ */

.subscription-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.subscription-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 110px;
    flex: 0 0 auto;
}

.subscription-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    color: var(--text-muted);
}

.subscription-step.is-current .subscription-step-circle {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--accent-light);
}

.subscription-step.is-done .subscription-step-circle {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.subscription-step-label {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.subscription-step.is-current .subscription-step-label {
    color: var(--text-heading);
}

.subscription-step-line {
    flex: 1 1 auto;
    height: 2px;
    max-width: 90px;
    background: var(--card-border);
    margin-top: 19px;
}

.subscription-step-line.is-done {
    background: var(--accent);
}

.subscription-module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1.1rem;
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.subscription-module-card:hover {
    border-color: var(--accent);
}

.subscription-module-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.subscription-module-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.subscription-module-check {
    position: absolute;
    top: .85rem;
    inset-inline-end: .85rem;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--card-border);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .75rem;
    transition: all .15s ease;
}

.subscription-module-checkbox:checked ~ .subscription-module-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.subscription-module-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.subscription-module-name {
    font-weight: 700;
    color: var(--text-heading);
}

.subscription-module-desc {
    font-size: .82rem;
    color: var(--text-muted);
    flex: 1 1 auto;
}

.subscription-module-price {
    font-weight: 700;
    color: var(--text-heading);
    font-size: .9rem;
}

.subscription-summary-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.subscription-summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.text-accent { color: var(--accent) !important; }

.subscription-summary-dot.dot-module { background: var(--accent); }
.subscription-summary-dot.dot-user { background: var(--info); }
.subscription-summary-dot.dot-branch { background: var(--warning); }

.subscription-discount-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--success-light);
    border-radius: var(--card-radius);
    padding: .75rem 1rem;
    margin-top: 1rem;
}

.subscription-discount-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.image-thumb-badge {
    position: absolute;
    inset-block-end: 2px;
    inset-inline-start: 2px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: .65rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------- */
/* POS module (layouts/pos.blade.php, Register/PendingSales/Returns/  */
/* Tickets) — distraction-free chrome, large touch targets, and a     */
/* dedicated visual language layered on the same design tokens as the */
/* rest of the app (page-card, badge-soft, --accent gradient) so it   */
/* reads as one product, not a bolted-on screen.                      */
/* ---------------------------------------------------------------- */

html, body.pos-body { height: 100%; }
body.pos-body { background: var(--body-bg); overscroll-behavior-y: contain; }

.pos-shell { display: flex; flex-direction: column; height: 100vh; }

.pos-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.1rem;
    background: linear-gradient(120deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    border-bottom: 1px solid var(--sidebar-border);
    box-shadow: 0 6px 24px rgba(12, 8, 36, .18);
    color: #fff;
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
}

.pos-topbar a, .pos-topbar .btn-link { color: #fff; }

.pos-brand {
    font-weight: 800;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.02rem;
}

.pos-brand i { color: #e0b3ff; }

.pos-topbar-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, .16);
    margin-block: .15rem;
}

.pos-topbar-label {
    font-weight: 600;
    font-size: .88rem;
    color: #d9d4f2;
}

.pos-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: #e4e0f7 !important;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
    min-height: 40px !important;
}

.pos-nav-link:hover { background: rgba(255, 255, 255, .14); color: #fff !important; }
.pos-nav-link:active { transform: scale(.97); }

.pos-nav-link.pos-nav-link-solid {
    background: #fff;
    color: var(--accent-dark) !important;
    border-color: transparent;
}

.pos-nav-link.pos-nav-link-solid:hover { background: #f4f0ff; }

.pos-main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .9rem; }

.pos-shell button, .pos-shell .btn, .pos-shell .form-control, .pos-shell .form-select {
    min-height: 44px;
}

/* Desktop: product grid (left) and cart (right) sit side by side, each
   independently scrollable within a viewport-height column. Below `lg`,
   Bootstrap stacks these two columns full-width instead — a fixed
   viewport height on both would stack two full screens on top of each
   other with no way to scroll past the first, since .pos-main clips
   overflow. So on mobile this rule simply doesn't apply: both columns
   flow at their natural height and .pos-main's own overflow-y: auto
   (above) scrolls the whole stack normally. */
@media (min-width: 992px) {
    .pos-scroll-col { height: calc(100vh - 108px); overflow-y: auto; }
}

/* Search/scan toolbar ------------------------------------------------ */

.pos-input-icon-wrap { position: relative; }

.pos-input-icon-wrap i {
    position: absolute;
    top: 50%;
    inset-inline-start: 1rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.05rem;
    pointer-events: none;
}

.pos-input-icon-wrap .form-control,
.pos-input-icon-wrap .tadbir-combo-input-wrap .form-control {
    padding-inline-start: 2.6rem;
}

/* Category / favorites chips ------------------------------------------ */

.pos-chip-row {
    display: flex;
    /* flex-shrink: 0 is load-bearing, not cosmetic: this row is itself a
       flex item of the column layout above it (.pos-scroll-col's
       .d-flex.flex-column), and setting overflow-x here makes the UA
       compute overflow-y as non-visible too (they can't be mixed with
       'visible' per the CSS Overflow spec) — which zeroes this item's
       *automatic* minimum height. Without an explicit flex-shrink: 0,
       the flex column shrinks this row toward 0 to make room for its
       flex-grow-1 sibling (the product grid) whenever content doesn't
       fit .pos-scroll-col's fixed height, collapsing the chips to a
       sliver with only their scrollbar visible. */
    flex-shrink: 0;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: .25rem;
    scrollbar-width: thin;
}

.pos-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    background: var(--card-bg);
    color: var(--text-body);
    border: 1px solid var(--card-border);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pos-chip:hover { border-color: var(--accent); color: var(--accent); }

.pos-chip.pos-chip-active {
    background: var(--sidebar-active-bg);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(139, 92, 246, .35);
}

.pos-chip.pos-chip-favorite.pos-chip-active {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 4px 14px rgba(245, 158, 11, .35);
}

/* Product grid --------------------------------------------------------- */

.pos-product-tile {
    min-height: 168px;
    cursor: pointer;
    user-select: none;
    padding: 0;
    overflow: hidden;
    border-radius: var(--card-radius-sm);
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}

.pos-product-tile:hover {
    box-shadow: 0 .75rem 1.5rem rgba(30, 21, 82, .12);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.pos-product-tile:active { transform: scale(.97); }

.pos-tile-img-wrap {
    height: 92px;
    background: var(--body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.pos-tile-img { width: 100%; height: 100%; object-fit: cover; }
.pos-tile-img-fallback { font-size: 1.9rem; color: var(--text-muted); opacity: .6; }

.pos-tile-body { padding: .6rem .65rem .75rem; }

.pos-tile-name {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-heading);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.15em;
}

.pos-tile-price {
    font-weight: 800;
    color: var(--accent-dark);
    font-size: .92rem;
    margin-block-start: .25rem;
}

.pos-tile-stock {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 700;
    margin-block-start: .3rem;
}

.pos-tile-pin {
    position: absolute;
    top: .4rem;
    inset-inline-end: .4rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    min-height: 30px !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    color: #f5a623;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.pos-empty-state i { font-size: 2.2rem; opacity: .4; display: block; margin-block-end: .5rem; }

/* Cart ------------------------------------------------------------------ */

.pos-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: .6rem;
}

.pos-cart-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .65rem;
    border-block-end: 1px solid var(--card-border);
}

.pos-cart-line:last-child { border-block-end: none; }

.pos-cart-line-name {
    font-weight: 700;
    font-size: .86rem;
    color: var(--text-heading);
}

.pos-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--body-bg);
    border-radius: 999px;
    padding: .2rem;
}

.pos-qty-stepper button {
    width: 30px;
    height: 30px;
    min-height: 30px !important;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--card-bg);
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.pos-qty-stepper button:hover { color: var(--accent); }

.pos-qty-stepper .pos-qty-value {
    min-width: 2.1rem;
    text-align: center;
    font-weight: 800;
    font-size: .86rem;
    color: var(--text-heading);
}

.pos-cart-remove {
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-cart-remove:hover { background: var(--danger-light); color: var(--danger); }

/* Totals ------------------------------------------------------------------ */

.pos-totals-card { position: sticky; bottom: 0; z-index: 1; }

.pos-totals-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding-block: .2rem;
    margin-block-end: .3rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    min-height: 0 !important;
}

.pos-totals-toggle:hover { color: var(--accent); }

.pos-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    color: var(--text-muted);
    margin-block-end: .3rem;
}

.pos-totals-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-block: .5rem .9rem;
    padding-block-start: .6rem;
    border-block-start: 1px dashed var(--card-border);
}

.pos-totals-grand .pos-totals-grand-label {
    font-weight: 700;
    color: var(--text-heading);
    font-size: .95rem;
}

.pos-totals-grand .pos-totals-grand-value {
    font-weight: 800;
    font-size: 1.7rem;
    background: var(--sidebar-active-bg);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pos-pay-btn {
    background: var(--sidebar-active-bg) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, .35);
}

/* Checkout modal ------------------------------------------------------------ */

.pos-checkout-total {
    text-align: center;
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--text-heading);
    margin-block-end: .25rem;
}

.pos-cash-tender {
    background: var(--body-bg);
    border-radius: var(--card-radius-sm);
    padding: .85rem;
    border: 1px solid var(--card-border);
}

.pos-change-due {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--success);
}

.pos-tender-chip {
    border-radius: 999px !important;
    font-weight: 700;
    min-height: 36px !important;
    padding-inline: .9rem !important;
}

/* Ticket popup ---------------------------------------------------------- */

.pos-ticket-frame {
    display: block;
    width: 100%;
    height: 65vh;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    background: var(--body-bg);
}

.pos-ticket-email-row {
    padding-top: .75rem;
}

.pos-shortcut-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--text-muted);
}

.pos-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: .1rem .35rem;
    border-radius: 5px;
    background: var(--body-bg);
    border: 1px solid var(--card-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-body);
}

/* Sessions popup (App\Livewire\Pos\SessionsPanel) ---------------------------- */

.pos-session-row {
    padding: .85rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    margin-block-end: .75rem;
}

.pos-session-row:last-child { margin-block-end: 0; }

.pos-session-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.pos-session-row-body {
    margin-block-start: .5rem;
    padding-block-start: .5rem;
    border-block-start: 1px dashed var(--card-border);
}

@media (max-width: 767.98px) {
    .pos-topbar-label { display: none; }
}