/* ═══════════════════════════════════════════════════════════════
   RagamPOS — Modern Design System
   Glass · Soft Shadows · Refined Surfaces · Clean Forms
   ═══════════════════════════════════════════════════════════════ */

/* ── Color Tokens ── */
:root {
    /* Primary (Indigo) */
    --md-primary: #4F46E5;
    --md-primary-rgb: 79,70,229;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #E0E7FF;
    --md-on-primary-container: #312E81;

    /* Secondary (Slate) */
    --md-secondary: #475569;
    --md-secondary-rgb: 71,85,105;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #E2E8F0;
    --md-on-secondary-container: #1E293B;

    /* Tertiary (Teal) */
    --md-tertiary: #0D9488;
    --md-tertiary-rgb: 13,148,136;
    --md-tertiary-container: #CCFBF1;

    /* Error */
    --md-error: #DC2626;
    --md-error-rgb: 220,38,38;
    --md-on-error: #FFFFFF;
    --md-error-container: #FEE2E2;
    --md-on-error-container: #7F1D1D;

    /* Success */
    --md-success: #16A34A;
    --md-success-rgb: 22,163,74;
    --md-success-container: #DCFCE7;

    /* Warning */
    --md-warning: #EA580C;
    --md-warning-rgb: 234,88,12;
    --md-warning-container: #FFF7ED;

    /* Info */
    --md-info: #2563EB;
    --md-info-rgb: 37,99,235;
    --md-info-container: #DBEAFE;

    /* Surface / Background (warm neutral) */
    --md-surface: #F8FAFC;
    --md-surface-dim: #E2E8F0;
    --md-surface-bright: #F8FAFC;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F1F5F9;
    --md-surface-container: #E2E8F0;
    --md-surface-container-high: #CBD5E1;
    --md-surface-container-highest: #F1F5F9;
    --md-on-surface: #0F172A;
    --md-on-surface-variant: #64748B;
    --md-inverse-surface: #1E293B;
    --md-inverse-on-surface: #F1F5F9;

    /* Outline */
    --md-outline: #94A3B8;
    --md-outline-variant: #E2E8F0;

    /* Elevation (soft diffused shadows) */
    --md-elev-1: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --md-elev-2: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
    --md-elev-3: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
    --md-elev-4: 0 20px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);
    --md-elev-5: 0 25px 50px -12px rgba(15,23,42,.15);

    /* Shape */
    --md-shape-xs: 2px;
    --md-shape-sm: 4px;
    --md-shape-md: 6px;
    --md-shape-lg: 8px;
    --md-shape-xl: 12px;
    --md-shape-full: 9999px;

    /* Motion */
    --md-motion-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --md-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-duration-short: 150ms;
    --md-motion-duration-medium: 250ms;
    --md-motion-duration-long: 400ms;

    /* Layout */
    --sidebar-w: 272px;
    --header-h: 64px;

    /* Glass */
    --glass-bg: rgba(255,255,255,.72);
    --glass-border: rgba(255,255,255,.2);
    --glass-blur: 16px;
}


/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Inter', 'Rubik', system-ui, -apple-system, sans-serif;
    background: var(--md-surface);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
    letter-spacing: -.01em;
}
a { text-decoration: none; color: inherit; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }


/* ═══ UTILITIES ═══ */
.f-s-10{font-size:10px!important}.f-s-12{font-size:12px!important}.f-s-13{font-size:13px!important}
.f-s-14{font-size:14px!important}.f-s-15{font-size:15px!important}.f-s-16{font-size:16px!important}
.f-s-18{font-size:18px!important}.f-s-20{font-size:20px!important}.f-s-30{font-size:30px!important}
.f-s-40{font-size:40px!important}
.f-w-500{font-weight:500!important}.f-w-600{font-weight:600!important}.f-w-700{font-weight:700!important}
.b-r-5{border-radius:var(--md-shape-sm)!important}.b-r-10{border-radius:var(--md-shape-md)!important}
.b-r-15{border-radius:var(--md-shape-lg)!important}.b-r-50{border-radius:50%!important}
.h-35{height:35px!important}.w-35{width:35px!important}
.h-40{height:40px!important}.w-40{width:40px!important}
.h-45{height:45px!important}.w-45{width:45px!important}
.h-80{height:80px!important}.w-80{width:80px!important}
.icon-box-50{height:50px!important;width:50px!important;min-width:50px!important;border-radius:10px!important}
.min-w-0{min-width:0!important}
@media(max-width:576px){.icon-box-50{height:40px!important;width:40px!important;min-width:40px!important}.icon-box-50 i{font-size:18px!important}}
.h-100{height:100%!important}
.w-100{width:100%!important}
.d-flex-center{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}

/* Fix Tabler icon centering inside flex wrappers */
    .d-flex-center > .ti,
    .qty-btn > .ti,
    .btn > .ti {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        margin: 0;
        padding: 0;
        width: auto; /* مهم جداً */
        height: auto; /* مهم جداً */
    }
/* Soft Tonal Badges */
.bg-light-primary{background:var(--md-primary-container)!important;color:var(--md-on-primary-container)!important}
.bg-light-success{background:var(--md-success-container)!important;color:var(--md-success)!important}
.bg-light-danger{background:var(--md-error-container)!important;color:var(--md-on-error-container)!important}
.bg-light-warning{background:var(--md-warning-container)!important;color:#9A3412!important}
.bg-light-info{background:var(--md-info-container)!important;color:#1E40AF!important}
.bg-light-secondary{background:var(--md-secondary-container)!important;color:var(--md-on-secondary-container)!important}
.text-primary{color:var(--md-primary)!important}
.text-success{color:var(--md-success)!important}
.text-danger{color:var(--md-error)!important}
.text-muted{color:var(--md-on-surface-variant)!important}


/* ═══════════════════════════════════════════════════════
   RIPPLE EFFECT
   ═══════════════════════════════════════════════════════ */
.md-ripple {
    position: relative;
    overflow: hidden;
}
.md-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(var(--md-primary-rgb),.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
    pointer-events: none;
}
.md-ripple:hover::after { opacity: 1; }
.md-ripple:active::after { opacity: 0; transition-duration: 0ms; }


/* ═══════════════════════════════════════════════════════
   NAVIGATION DRAWER (Sidebar)
   ═══════════════════════════════════════════════════════ */
.admin-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--md-surface-container-lowest);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform var(--md-motion-duration-long) var(--md-motion-emphasized);
    border-right: 1px solid var(--md-outline-variant);
    box-shadow: var(--md-elev-1);
}

/* Brand header */
.sidebar-brand {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 20px;
    flex-shrink: 0;
}
.sidebar-brand-icon {
    width: 38px; height: 38px;
    border-radius: var(--md-shape-md);
    background: linear-gradient(135deg, var(--md-primary), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--md-primary-rgb),.3);
}
.sidebar-brand-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -.03em;
}

/* Nav sections */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

/* Navigation item */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    height: 42px;
    margin-bottom: 2px;
    border-radius: var(--md-shape-sm);
    color: var(--md-on-surface-variant);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    position: relative;
    overflow: hidden;
}
.sidebar-link i {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: .7;
    line-height: 1;
    margin: 0;
    padding: 0;
}
.sidebar-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
}
.sidebar-link:hover { color: var(--md-on-surface); }
.sidebar-link:hover::before { opacity: .06; }
.sidebar-link:hover i { opacity: 1; }
.sidebar-link:active::before { opacity: .1; }
.sidebar-link.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--md-primary); opacity: 1; }
.sidebar-link.active::before { display: none; }

/* Sidebar collapsible group */
.sidebar-group {}
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--md-on-surface-variant);
    padding: 18px 12px 6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s;
}
.sidebar-group:first-child .sidebar-group-toggle { padding-top: 4px; }
.sidebar-group-toggle:hover { color: var(--md-on-surface); }
.sidebar-group-toggle .bi-chevron-down {
    font-size: 10px;
    margin-inline-start: auto;
    transition: transform .2s ease;
    opacity: .5;
}
.sidebar-group-toggle:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
.sidebar-group-body { padding: 0; }

.sidebar-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--md-shape-full);
    background: var(--md-error);
    color: var(--md-on-error);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--md-outline-variant);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--md-shape-sm);
    transition: background var(--md-motion-duration-short) var(--md-motion-standard);
}
.sidebar-user:hover { background: rgba(var(--md-primary-rgb),.05); }
.sidebar-user-avatar {
    width: 36px; height: 36px;
    border-radius: var(--md-shape-full);
    background: linear-gradient(135deg, var(--md-primary), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 11px;
    color: var(--md-on-surface-variant);
}

/* Mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.4);
    z-index: 999;
    backdrop-filter: blur(4px);
}


/* ═══════════════════════════════════════════════════════
   TOP APP BAR (Header)
   ═══════════════════════════════════════════════════════ */
.admin-header {
    height: var(--header-h);
    background: var(--md-surface-container-lowest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--md-outline-variant);
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-shape-sm);
    border: none;
    background: transparent;
    color: var(--md-on-surface);
    cursor: pointer;
    font-size: 20px;
    transition: background var(--md-motion-duration-short) var(--md-motion-standard);
}
.header-toggle:hover { background: rgba(var(--md-primary-rgb),.06); }
.header-right { display: flex; align-items: center; gap: 6px; }

/* Icon button */
.header-icon-btn {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-shape-sm);
    color: var(--md-on-surface-variant);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    position: relative;
}
.header-icon-btn:hover { background: rgba(var(--md-primary-rgb),.06); color: var(--md-primary); }

/* Language button */
.header-lang-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--md-shape-sm);
    font-size: 13px;
    font-weight: 600;
    background: var(--md-surface-container-low);
    color: var(--md-on-surface-variant);
    border: 1px solid var(--md-outline-variant);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.header-lang-btn:hover {
    background: var(--md-primary-container);
    color: var(--md-primary);
    border-color: var(--md-primary-container);
}

/* User menu trigger */
.header-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    cursor: pointer;
    color: var(--md-on-surface);
}
.header-user-btn:hover { border-color: var(--md-primary); background: var(--md-primary-container); }
.header-user-btn .avatar {
    width: 32px; height: 32px;
    border-radius: var(--md-shape-full);
    background: linear-gradient(135deg, var(--md-primary), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary);
    font-size: 12px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════
   LAYOUT WRAPPER
   ═══════════════════════════════════════════════════════ */
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    transition: margin var(--md-motion-duration-long) var(--md-motion-emphasized);
}
.admin-content { flex: 1; padding: 28px 32px; min-width: 0; }
.admin-footer {
    padding: 16px 32px;
    text-align: center;
    font-size: 12px;
    color: var(--md-on-surface-variant);
}


/* ═══════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.page-header h5 {
    font-size: 22px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -.025em;
    margin: 0;
    line-height: 1.3;
}
.page-header .subtitle {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════ */
.card {
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    position: relative;
    overflow: visible;
    transition: box-shadow var(--md-motion-duration-medium) var(--md-motion-standard),
                border-color var(--md-motion-duration-medium) var(--md-motion-standard);
}
.card:hover { box-shadow: var(--md-elev-2); border-color: transparent; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 16px 24px;
    font-weight: 600;
    font-size: 15px;
    color: var(--md-on-surface);
    letter-spacing: -.01em;
    border-radius: var(--md-shape-lg) var(--md-shape-lg) 0 0;
}
.card-body { padding: 24px; }
.card-body.p-0 { padding: 0 !important; }
.card-body.text-center:not(.d-flex) { padding: 16px 12px; min-height: 80px; }
.card-body.text-center:not(.d-flex) h5 { word-break: break-word; font-size: clamp(13px, 2.5vw, 20px); }
.card .table-responsive { overflow-x: auto; }
.card .card-body canvas { display: block; width: 100% !important; }
.card + .card { margin-top: 20px; }
form .card { margin-bottom: 20px; }
form > .d-flex:last-child { margin-top: 24px; }

/* Filled card variant */
.card-filled {
    border: none;
    background: var(--md-surface-container-low);
}


/* ═══════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════ */
.table { margin-bottom: 0; }
.table > :not(caption) > * > * {
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--md-on-surface);
}
.table thead th {
    font-weight: 600;
    font-size: 11.5px;
    color: var(--md-on-surface-variant);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--md-surface-container-low);
    border-bottom: 2px solid var(--md-outline-variant) !important;
    padding: 10px 16px;
    white-space: nowrap;
}
.table tbody tr {
    transition: background var(--md-motion-duration-short) var(--md-motion-standard);
}
.table-hover tbody tr:hover {
    background: rgba(var(--md-primary-rgb),.04) !important;
}


/* ═══════════════════════════════════════════════════════
   BADGES (Pill chips)
   ═══════════════════════════════════════════════════════ */
.badge {
    font-weight: 600;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--md-shape-full);
    letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
    border-radius: var(--md-shape-sm);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    padding: 9px 20px;
    letter-spacing: -.005em;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
    pointer-events: none;
}
.btn:hover::before { opacity: .06; }
.btn:active::before { opacity: .1; }
.btn:active { transform: scale(.98); }

/* Filled */
.btn-primary {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: 0 1px 3px rgba(var(--md-primary-rgb),.3);
}
.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(var(--md-primary-rgb),.35);
    background: var(--md-primary);
    border-color: var(--md-primary);
}
.btn-success {
    background: var(--md-success);
    border-color: var(--md-success);
    color: #fff;
    box-shadow: 0 1px 3px rgba(var(--md-success-rgb),.3);
}
.btn-success:hover { box-shadow: 0 4px 12px rgba(var(--md-success-rgb),.35); }
.btn-danger {
    background: var(--md-error);
    border-color: var(--md-error);
    color: var(--md-on-error);
    box-shadow: 0 1px 3px rgba(var(--md-error-rgb),.3);
}
.btn-danger:hover { box-shadow: 0 4px 12px rgba(var(--md-error-rgb),.35); }

/* Outlined */
.btn-outline-primary {
    color: var(--md-primary);
    border: 1px solid var(--md-outline-variant);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--md-primary-container);
    border-color: var(--md-primary-container);
    color: var(--md-primary);
}
.btn-outline-danger {
    color: var(--md-error);
    border: 1px solid var(--md-outline-variant);
}
.btn-outline-danger:hover {
    background: var(--md-error-container);
    border-color: var(--md-error-container);
    color: var(--md-error);
}
.btn-outline-secondary {
    color: var(--md-on-surface-variant);
    border: 1px solid var(--md-outline-variant);
}
.btn-outline-secondary:hover {
    background: var(--md-secondary-container);
    color: var(--md-on-surface);
    border-color: var(--md-secondary-container);
}
.btn-outline-info {
    color: var(--md-info);
    border: 1px solid var(--md-outline-variant);
}
.btn-outline-info:hover {
    background: var(--md-info-container);
    border-color: var(--md-info-container);
}
.btn-outline-warning {
    color: var(--md-warning);
    border: 1px solid var(--md-outline-variant);
}
.btn-outline-warning:hover {
    background: var(--md-warning-container);
    border-color: var(--md-warning-container);
}

/* Tonal */
.btn-tonal {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border: none;
}

/* Icon button */
.btn-action {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-shape-sm) !important;
    font-size: 16px;
}

/* FAB */
.btn-fab {
    height: 48px;
    padding: 0 20px;
    border-radius: var(--md-shape-md) !important;
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    box-shadow: 0 4px 14px rgba(var(--md-primary-rgb),.35);
    font-weight: 600;
    font-size: 13.5px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
}
.btn-fab:hover { box-shadow: 0 8px 24px rgba(var(--md-primary-rgb),.4); }
.btn-fab i { font-size: 20px; }


/* ═══════════════════════════════════════════════════════
   FORM CONTROLS (Modern Outlined)
   ═══════════════════════════════════════════════════════ */
.form-control, .form-select {
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--md-on-surface);
    background: var(--md-surface-container-lowest);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    height: auto;
    min-height: 42px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    letter-spacing: -.005em;
}
.form-control:hover, .form-select:hover {
    border-color: var(--md-outline);
}
.form-control:focus, .form-select:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1);
    background: var(--md-surface-container-lowest);
    outline: none;
}
.form-control::placeholder {
    color: var(--md-on-surface-variant);
    font-weight: 400;
    opacity: .6;
}
.form-control-sm, .form-select-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
}
textarea.form-control { min-height: 80px; }
input[type="number"].form-control { -moz-appearance: textfield; }
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ──────────────────────────────────────
   Select2 — Material Design theme
   ────────────────────────────────────── */
.select2-container { width: 100% !important; }

/* Single selection */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background: var(--md-surface-container-lowest);
    min-height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--md-on-surface);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 14px;
    letter-spacing: -.005em;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--md-on-surface-variant);
    opacity: .6;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 32px;
    top: 0;
    right: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--md-on-surface-variant) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-top: -2px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--md-primary) transparent;
    border-width: 0 4px 5px 4px;
}
.select2-container--default .select2-selection--single:hover {
    border-color: var(--md-outline);
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1);
}

/* Multiple selection */
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background: var(--md-surface-container-lowest);
    min-height: 42px;
    padding: 4px 8px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--md-outline);
}
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    border-radius: var(--md-shape-full);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    margin: 2px 4px 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--md-on-primary-container);
    margin-right: 4px;
    font-weight: 700;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--md-error);
}

/* Dropdown */
.select2-dropdown {
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    box-shadow: var(--md-elev-3);
    background: var(--md-surface-container-lowest);
    overflow: hidden;
    margin-top: 4px;
}
.select2-container--open .select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Search box */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--md-on-surface);
    background: var(--md-surface-container-low);
    outline: none;
    transition: border-color var(--md-motion-duration-short) var(--md-motion-standard);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px rgba(var(--md-primary-rgb),.08);
}
.select2-search--dropdown {
    padding: 8px;
}

/* Results */
.select2-results__option {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--md-on-surface);
    transition: background var(--md-motion-duration-short) var(--md-motion-standard);
    border-radius: 0;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(var(--md-primary-rgb),.08);
    color: var(--md-primary);
    font-weight: 500;
}
.select2-results__option:first-child {
    border-radius: var(--md-shape-sm) var(--md-shape-sm) 0 0;
}
.select2-results__option:last-child {
    border-radius: 0 0 var(--md-shape-sm) var(--md-shape-sm);
}
.select2-container--default .select2-results__option--disabled {
    color: var(--md-on-surface-variant);
    opacity: .5;
}
.select2-results__message {
    padding: 12px 14px;
    color: var(--md-on-surface-variant);
    font-size: 13px;
}

/* Small variant */
.form-select-sm + .select2-container--default .select2-selection--single,
.select2-sm .select2-selection--single {
    min-height: 36px;
}
.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-sm .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    padding: 6px 12px;
}

/* Clear button */
.select2-container--default .select2-selection__clear {
    color: var(--md-on-surface-variant);
    font-size: 16px;
    margin-right: 6px;
}
.select2-container--default .select2-selection__clear:hover {
    color: var(--md-error);
}

/* RTL adjustments */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 4px;
    right: auto;
}
[dir="rtl"] .select2-container--default .select2-selection__clear {
    margin-left: 6px;
    margin-right: 0;
}
[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 2px 0 2px 4px;
}
[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 4px;
    margin-right: 0;
}

.row { min-width: 0; }
[class*="col-"] { min-width: 0; }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    margin-bottom: 6px;
    letter-spacing: -.01em;
    width: 100%;
}
.input-group-text {
    background: var(--md-surface-container-low);
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    color: var(--md-on-surface-variant);
    font-size: 14px;
    min-height: 42px;
    padding: 0 12px;
    font-weight: 500;
}

/* Switch */
.form-check.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    min-height: auto;
}
.form-check-input {
    width: 36px !important;
    height: 20px !important;
    border: 2px solid var(--md-outline-variant);
    cursor: pointer;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    background-color: var(--md-surface-container-low);
    border-radius: var(--md-shape-full) !important;
    background-size: 14px !important;
    margin: 0 !important;
    flex-shrink: 0;
    float: none !important;
}
.form-switch .form-check-input {
    width: 36px !important;
    height: 20px !important;
    background-size: 14px !important;
}
.form-check-input:checked {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.15);
    border-color: var(--md-primary);
}
.form-check-label {
    font-weight: 500;
    font-size: 13.5px;
    color: var(--md-on-surface);
    margin: 0;
    line-height: 1;
}

/* Validation */
span.text-danger, .field-validation-error {
    font-size: 12px !important;
    color: var(--md-error) !important;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   ALERTS (Banners)
   ═══════════════════════════════════════════════════════ */
.alert {
    border: none;
    border-radius: var(--md-shape-md);
    font-size: 13.5px;
    font-weight: 500;
    padding: 14px 20px;
    border-left: 4px solid;
}
.alert-success {
    background: var(--md-success-container);
    color: var(--md-success);
    border-left-color: var(--md-success);
}
.alert-danger {
    background: var(--md-error-container);
    color: var(--md-on-error-container);
    border-left-color: var(--md-error);
}
.alert-warning {
    background: var(--md-warning-container);
    color: #9A3412;
    border-left-color: var(--md-warning);
}


/* ═══════════════════════════════════════════════════════
   MENUS (Dropdowns)
   ═══════════════════════════════════════════════════════ */
.dropdown-menu {
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    box-shadow: var(--md-elev-3);
    padding: 4px;
    background: var(--md-surface-container-lowest);
    animation: md-menu-open var(--md-motion-duration-medium) var(--md-motion-emphasized);
}
.dropdown-item {
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--md-on-surface);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    border-radius: var(--md-shape-sm);
}
.dropdown-item:hover {
    background: var(--md-primary-container);
    color: var(--md-primary);
}
.dropdown-divider { border-color: var(--md-outline-variant); margin: 4px 0; }


/* ═══════════════════════════════════════════════════════
   DIALOGS (Modals)
   ═══════════════════════════════════════════════════════ */
.modal-content {
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-xl);
    box-shadow: var(--md-elev-5);
    background: var(--md-surface-container-lowest);
}
.modal-header {
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 20px 24px;
}
.modal-header .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -.02em;
}
.modal-body { padding: 24px; }
.modal-footer {
    border-top: 1px solid var(--md-outline-variant);
    padding: 16px 24px;
    gap: 8px;
}
.modal-backdrop.show { backdrop-filter: blur(4px); }

/* Code / Invoice */
code {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    padding: 2px 8px;
    border-radius: var(--md-shape-xs);
    font-size: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}


/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes md-menu-open {
    from { opacity: 0; transform: scaleY(.92) translateY(-4px); transform-origin: top; }
    to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-ring {
    0%   { transform: scale(.9); opacity: 1; }
    80%,100% { transform: scale(1.3); opacity: 0; }
}
@keyframes float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}


/* ═══════════════════════════════════════════════════════
   POS TERMINAL (Full-screen selling view)
   ═══════════════════════════════════════════════════════ */
.pos-terminal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--md-surface);
}

/* Top App Bar */
.pos-topnav {
    height: var(--header-h);
    background: var(--md-surface-container-lowest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 20px;
    flex-shrink: 0;
    z-index: 100;
    border-bottom: 1px solid var(--md-outline-variant);
    box-shadow: var(--md-elev-1);
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-brand-icon {
    width: 34px; height: 34px;
    border-radius: var(--md-shape-sm);
    background: linear-gradient(135deg, var(--md-primary), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary);
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(var(--md-primary-rgb),.3);
}
.nav-brand-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -.02em;
}
.nav-divider {
    width: 1px;
    height: 24px;
    background: var(--md-outline-variant);
    margin: 0 8px;
}
.pos-topnav .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}
.pos-topnav .nav-links a {
    padding: 0 12px;
    height: 36px;
    border-radius: var(--md-shape-sm);
    color: var(--md-on-surface-variant);
    font-size: 13px;
    font-weight: 600;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.005em;
    position: relative;
}
.pos-topnav .nav-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
}
.pos-topnav .nav-links a:hover::before { opacity: .06; }
.pos-topnav .nav-links a:hover { color: var(--md-on-surface); }
.pos-topnav .nav-links a.active {
    background: var(--md-primary-container);
    color: var(--md-primary);
    font-weight: 700;
}
.pos-topnav .nav-links a.active::before { display: none; }

.nav-lang-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--md-shape-sm);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant);
    background: transparent;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.nav-lang-btn:hover { background: var(--md-primary-container); color: var(--md-primary); border-color: var(--md-primary-container); }
.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: var(--md-shape-full);
    color: var(--md-on-surface-variant);
    transition: background var(--md-motion-duration-short) var(--md-motion-standard);
}
.nav-user-btn:hover { background: rgba(var(--md-primary-rgb),.06); }
.nav-user-avatar {
    width: 32px; height: 32px;
    border-radius: var(--md-shape-full);
    background: linear-gradient(135deg, var(--md-primary), #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-primary);
    font-size: 12px;
    font-weight: 600;
}

/* POS body */
.pos-terminal .pos-body { flex: 1; display: flex; overflow: hidden; }
.pos-content { flex: 1; display: flex; overflow: hidden; }
.pos-products { flex: 1; padding: 16px; overflow-y: auto; min-width: 0; }

/* POS search */
.pos-search { position: relative; }
.pos-search input {
    height: 38px;
    width: 260px;
    padding: 0 14px 0 40px;
    border-radius: var(--md-shape-sm);
    background: var(--md-surface-container-low);
    border: 1.5px solid var(--md-outline-variant);
    font-size: 13.5px;
    color: var(--md-on-surface);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    outline: none;
}
.pos-search input::placeholder { color: var(--md-on-surface-variant); opacity: .6; }
.pos-search input:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1);
    background: var(--md-surface-container-lowest);
}
.pos-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-on-surface-variant);
    font-size: 16px;
}

/* Category Chips */
.category-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding: 4px 0;
}
.category-tabs::-webkit-scrollbar { height: 0; }
.category-tab {
    padding: 0 14px;
    height: 32px;
    display: flex;
    align-items: center;
    background: var(--md-surface-container-lowest);
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-full);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    letter-spacing: -.005em;
    position: relative;
    overflow: hidden;
}
.category-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
}
.category-tab:hover { border-color: var(--md-outline); color: var(--md-on-surface); }
.category-tab:hover::before { opacity: .04; }
.category-tab.active {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
}
.category-tab.active::before { display: none; }

/* Product cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 10px;
}
.product-card {
    padding: 14px 12px 12px;
    text-align: center;
    cursor: pointer;
    transition: all var(--md-motion-duration-medium) var(--md-motion-standard);
    border: 1.5px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    border-radius: var(--md-shape-md) !important;
    position: relative;
    overflow: hidden;
    box-shadow: none;
}
.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
    pointer-events: none;
}
.product-card:hover {
    border-color: var(--md-primary);
    box-shadow: 0 4px 16px rgba(var(--md-primary-rgb),.12);
    transform: translateY(-2px);
}
.product-card:hover::after { opacity: .03; }
.product-card:active { transform: translateY(0) scale(.98); }
.product-card:active::after { opacity: .06; }
.product-card img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: var(--md-shape-sm);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.product-card .product-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--md-on-surface);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    letter-spacing: -.01em;
    position: relative;
    z-index: 1;
}
.product-card .product-price {
    color: var(--md-primary);
    font-weight: 700;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

/* Cart */
.pos-cart {
    width: 380px;
    background: var(--md-surface-container-lowest);
    border-left: 1px solid var(--md-outline-variant);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.cart-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.cart-items { flex: 1; overflow-y: auto; padding: 8px 10px; }

/* ── Cart Line Item ── */
.cart-line {
    background: var(--md-surface-container-low);
    border: 1px solid transparent;
    border-radius: var(--md-shape-md);
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    animation: slideRight var(--md-motion-duration-medium) var(--md-motion-emphasized);
    position: relative;
}
.cart-line:hover {
    border-color: var(--md-outline-variant);
    box-shadow: var(--md-elev-1);
}

/* Row 1: Name + Remove */
.cart-line-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cart-line-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--md-on-surface);
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.cart-line-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    border-radius: var(--md-shape-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-line:hover .cart-line-remove { opacity: 1; }
.cart-line-remove:hover {
    background: var(--md-error-container);
    color: var(--md-error);
}

/* Row 2: Price × Qty = Total */
.cart-line-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cart-line-pricing {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
}
.cart-line-price {
    cursor: pointer;
    padding: 1px 5px;
    border-radius: var(--md-shape-xs);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    font-weight: 500;
}
.cart-line-price:hover {
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--md-primary);
}
.cart-line-x {
    color: var(--md-on-surface-variant);
    opacity: .5;
    font-size: 11px;
}
.cart-line-qty-val {
    cursor: pointer;
    padding: 1px 5px;
    border-radius: var(--md-shape-xs);
    font-weight: 500;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-line-qty-val:hover {
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--md-primary);
}
.cart-line-total {
    font-weight: 700;
    font-size: 14px;
    color: var(--md-on-surface);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--md-shape-xs);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-line-total:hover {
    background: rgba(var(--md-primary-rgb), .06);
    color: var(--md-primary);
}

/* Row 3: Qty buttons + Tax + Note */
.cart-line-bottom {
    display: flex;
    align-items: center;
}
.cart-line-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Qty stepper */
.cart-line-qty-btns {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    overflow: hidden;
}
.cart-qty-btn {
    width: 30px;
    height: 28px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--md-on-surface);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-qty-minus:hover { background: var(--md-error-container); color: var(--md-error); }
.cart-qty-plus:hover { background: var(--md-primary-container); color: var(--md-primary); }
.cart-qty-num {
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    cursor: pointer;
    border-left: 1px solid var(--md-outline-variant);
    border-right: 1px solid var(--md-outline-variant);
    line-height: 28px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-qty-num:hover {
    background: rgba(var(--md-primary-rgb), .06);
    color: var(--md-primary);
}

/* Tax badge */
.cart-line-tax {
    font-size: 10px !important;
    padding: 3px 7px !important;
    border-radius: var(--md-shape-full) !important;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: .02em;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-line-tax:hover { opacity: .8; transform: scale(1.05); }

/* Note button */
.cart-line-note-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    border-radius: var(--md-shape-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-on-surface-variant);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    margin-left: auto;
}
.cart-line-note-btn:hover {
    border-color: var(--md-primary);
    color: var(--md-primary);
    background: rgba(var(--md-primary-rgb), .04);
}
.cart-line-note-btn.has-note {
    border-color: var(--md-primary);
    color: var(--md-primary);
    background: var(--md-primary-container);
}

/* Note preview */
.cart-line-note-preview {
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(var(--md-primary-rgb), .04);
    border-radius: var(--md-shape-sm);
    font-size: 11px;
    color: var(--md-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 2px solid var(--md-primary);
}

/* ── Legacy compat ── */
.cart-item-info { flex: 1; margin-left: 12px; position: relative; z-index: 1; }
.cart-item-name { font-weight: 600; font-size: 13.5px; color: var(--md-on-surface); letter-spacing: -.01em; }
.cart-item-price { color: var(--md-on-surface-variant); font-size: 12px; margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 4px; position: relative; z-index: 1; }
.cart-price-edit, .cart-qty-edit {
    cursor: pointer;
    border-radius: var(--md-shape-xs);
    padding: 1px 4px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.cart-price-edit:hover, .cart-qty-edit:hover {
    background: rgba(var(--md-primary-rgb), .08);
    color: var(--md-primary) !important;
}

.cart-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
}
.cart-totals { margin-bottom: 14px; }
.cart-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13.5px;
}
.cart-total-row.grand-total {
    font-weight: 700;
    font-size: 20px !important;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 2px solid var(--md-outline-variant);
    letter-spacing: -.02em;
}
.payment-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payment-btn {
    padding: 12px;
    font-weight: 600;
    font-size: 13.5px;
    border: none;
    cursor: pointer;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    border-radius: var(--md-shape-sm);
    color: #fff;
    letter-spacing: -.005em;
    position: relative;
    overflow: hidden;
}
.payment-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
    pointer-events: none;
}
.payment-btn:hover::before { opacity: .1; }
.payment-btn.cash { background: var(--md-success); box-shadow: 0 2px 8px rgba(var(--md-success-rgb),.3); }
.payment-btn.card { background: var(--md-primary); box-shadow: 0 2px 8px rgba(var(--md-primary-rgb),.3); }
.payment-btn:hover { transform: translateY(-1px); }
.payment-btn:active { transform: scale(.98); }


/* ── Search-Only POS Mode ── */
.search-only-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}
.search-only-input-area {
    padding: 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    flex-shrink: 0;
}
.search-only-input {
    min-height: 48px !important;
    font-size: 16px !important;
    padding-left: 44px !important;
    font-weight: 500;
}
.search-only-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--md-on-surface-variant);
    z-index: 2;
}
html[dir="rtl"] .search-only-input { padding-left: 14px !important; padding-right: 44px !important; }
html[dir="rtl"] .search-only-icon { left: auto; right: 14px; }
.search-only-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--md-shape-sm);
    cursor: pointer;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    margin-bottom: 2px;
}
.search-result-item:hover {
    background: rgba(var(--md-primary-rgb),.04);
    border-color: var(--md-outline-variant);
}
.search-result-item:active {
    background: rgba(var(--md-primary-rgb),.08);
    transform: scale(.995);
}
.search-only-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--md-on-surface-variant);
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-on-surface-variant);
}
.empty-cart i { margin-bottom: 12px; opacity: .3; animation: float 3s ease-in-out infinite; }
.no-session-icon { position: relative; display: inline-block; }
.no-session-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(var(--md-warning-rgb),.3);
    animation: pulse-ring 2s ease-out infinite;
}


/* ═══════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════ */
.login-container { display: flex; width: 100%; min-height: 100vh; }
.login-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: linear-gradient(135deg, var(--md-primary) 0%, #7C3AED 100%);
    position: relative;
    overflow: hidden;
}
.login-left::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    top: -100px; right: -100px;
    border-radius: 50%;
}
.login-left::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
    bottom: -80px; left: -80px;
    border-radius: 50%;
}
.login-right {
    flex: 1;
    background: var(--md-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}
.login-form { width: 100%; max-width: 380px; }
.login-form .form-group { margin-bottom: 20px; }
.login-form .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    font-size: 15px;
    color: var(--md-on-surface);
    background: var(--md-surface-container-lowest);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.login-form .form-group input:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1);
}
.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--md-shape-sm);
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    box-shadow: 0 2px 8px rgba(var(--md-primary-rgb),.3);
}
.btn-login:hover { box-shadow: 0 4px 16px rgba(var(--md-primary-rgb),.4); transform: translateY(-1px); }
.pin-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 210px;
    margin: 0 auto;
}
.pin-btn {
    width: 56px; height: 56px;
    border: 1.5px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    cursor: pointer;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    border-radius: var(--md-shape-md);
    font-weight: 600;
    color: var(--md-on-surface);
    font-size: 18px;
    position: relative;
    overflow: hidden;
}
.pin-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity var(--md-motion-duration-short) var(--md-motion-standard);
}
.pin-btn:hover { border-color: var(--md-primary); }
.pin-btn:hover::before { opacity: .06; }
.pin-btn:active::before { opacity: .12; }

@media (max-width: 768px) {
    .login-container { flex-direction: column; }
    .login-left, .login-right { padding: 32px 20px; }
}


/* ═══════════════════════════════════════════════════════
   DATATABLE OVERRIDES
   ═══════════════════════════════════════════════════════ */

/* Toolbar row */
.dataTables_wrapper .row.dt-toolbar { margin-bottom: 16px; align-items: center; }
.dataTables_wrapper .row.dt-toolbar-bottom {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--md-outline-variant);
    align-items: center;
}

/* Search */
.dataTables_wrapper .dataTables_filter { text-align: left !important; }
.dataTables_wrapper .dataTables_filter label {
    font-size: 0; display: flex; align-items: center; margin: 0; width: 100%;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-sm) !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-weight: 400;
    background: var(--md-surface-container-lowest) !important;
    width: 100% !important;
    max-width: 360px;
    height: 40px;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    outline: none !important;
    margin: 0 !important;
    color: var(--md-on-surface);
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--md-on-surface-variant); }
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1) !important;
}

/* Length select */
.dataTables_wrapper .dataTables_length label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    justify-content: flex-end;
}
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-sm) !important;
    padding: 8px 32px 8px 12px !important;
    font-size: 13.5px !important;
    background: var(--md-surface-container-lowest) !important;
    color: var(--md-on-surface);
    height: 40px;
    outline: none;
    cursor: pointer;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb),.1) !important;
}

/* Info */
.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    padding: 0 !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    border-radius: var(--md-shape-sm) !important;
    padding: 0 !important;
    margin: 0 2px !important;
    width: 36px;
    height: 36px;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--md-on-surface) !important;
    background: transparent !important;
    transition: all var(--md-motion-duration-short) var(--md-motion-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--md-primary-container) !important;
    color: var(--md-primary) !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    box-shadow: 0 2px 6px rgba(var(--md-primary-rgb),.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--md-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .38 !important;
}

/* Sort */
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { color: var(--md-primary); opacity: 1; }

/* Empty */
.dataTables_empty {
    text-align: center !important;
    padding: 48px 24px !important;
    color: var(--md-on-surface-variant) !important;
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════
   RTL
   ═══════════════════════════════════════════════════════ */
html[dir="rtl"] .admin-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--md-outline-variant); }
html[dir="rtl"] .admin-main { margin-left: 0; margin-right: var(--sidebar-w); }
html[dir="rtl"] .sidebar-badge { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .pos-content { flex-direction: row-reverse; }
html[dir="rtl"] .pos-cart { border-left: none; border-right: 1px solid var(--md-outline-variant); }
html[dir="rtl"] .cart-line-note-preview { border-left: none; border-right: 2px solid var(--md-primary); }
html[dir="rtl"] .cart-line-note-btn { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .cart-item-info { text-align: right; margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .pos-search input { padding-left: 14px; padding-right: 40px; }
html[dir="rtl"] .pos-search i { left: auto; right: 12px; }
html[dir="rtl"] .header-search input { padding-left: 14px; padding-right: 40px; }
html[dir="rtl"] .header-search i { left: auto; right: 12px; }
html[dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: right !important; }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .admin-sidebar { transform: translateX(-100%); }
    html[dir="rtl"] .admin-sidebar { transform: translateX(100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .admin-main { margin-left: 0 !important; margin-right: 0 !important; }
    .header-toggle { display: flex; }
    .admin-content { padding: 20px; }
}
@media (max-width: 768px) {
    .pos-content { flex-direction: column; }
    .pos-cart { width: 100%; max-height: 50vh; border-left: none; border-top: 1px solid var(--md-outline-variant); }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .pos-topnav { padding: 0 8px; }
    .pos-topnav .nav-links a { padding: 0 8px; font-size: 12px; }
    .nav-brand-text { display: none; }
    .admin-content { padding: 16px; }
}
@media (max-width: 576px) {
    .admin-content { padding: 12px; }
    .card-body { padding: 16px; }
}


/* ═══════════════════════════════════════════════════════
   TOASTR
   ═══════════════════════════════════════════════════════ */
#toast-container > .toast {
    border-radius: var(--md-shape-md) !important;
    box-shadow: var(--md-elev-3) !important;
    padding: 12px 16px 12px 44px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em;
    opacity: 1 !important;
    border: 1px solid !important;
    min-height: auto !important;
    background-size: 18px !important;
    background-position: 14px center !important;
}
#toast-container > .toast-success {
    background-color: var(--md-success-container) !important;
    color: var(--md-success) !important;
    border-color: rgba(var(--md-success-rgb),.2) !important;
}
#toast-container > .toast-error {
    background-color: var(--md-error-container) !important;
    color: var(--md-on-error-container) !important;
    border-color: rgba(var(--md-error-rgb),.2) !important;
}
#toast-container > .toast-warning {
    background-color: var(--md-warning-container) !important;
    color: #9A3412 !important;
    border-color: rgba(var(--md-warning-rgb),.2) !important;
}
#toast-container > .toast-info {
    background-color: var(--md-info-container) !important;
    color: #1E40AF !important;
    border-color: rgba(var(--md-info-rgb),.2) !important;
}
#toast-container > .toast .toast-close-button {
    color: inherit !important;
    opacity: .5;
    font-weight: 400;
    font-size: 18px;
    top: -4px;
}
#toast-container > .toast .toast-close-button:hover { opacity: 1; }
#toast-container > .toast .toast-progress {
    height: 2px !important;
    border-radius: 0 0 var(--md-shape-md) var(--md-shape-md);
    opacity: .3 !important;
}
.toast-top-right { top: 16px !important; right: 16px !important; }


/* ═══════════════════════════════════════════════════════
   SWEETALERT2
   ═══════════════════════════════════════════════════════ */
.swal2-popup.swal2-md {
    border-radius: var(--md-shape-xl) !important;
    background: var(--md-surface-container-lowest) !important;
    font-family: 'Inter', sans-serif !important;
    padding: 32px 24px 24px !important;
    box-shadow: var(--md-elev-5) !important;
    border: 1px solid var(--md-outline-variant) !important;
}
.swal2-popup .swal2-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--md-on-surface) !important;
    letter-spacing: -.02em !important;
    padding: 0 0 8px !important;
}
.swal2-popup .swal2-html-container {
    font-size: 14px !important;
    color: var(--md-on-surface-variant) !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
}
.swal2-popup .swal2-icon {
    margin: -4px auto 12px !important;
    border-width: 3px !important;
    transform: scale(0.7);
    transform-origin: center center;
}
.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--md-warning) !important;
    color: var(--md-warning) !important;
}
.swal2-popup .swal2-icon.swal2-question {
    border-color: var(--md-primary) !important;
    color: var(--md-primary) !important;
}
.swal2-popup .swal2-icon.swal2-success {
    border-color: var(--md-success) !important;
    color: var(--md-success) !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup .swal2-icon.swal2-success .swal2-success-line-long {
    background-color: var(--md-success) !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(var(--md-success-rgb), .3) !important;
}
.swal2-popup .swal2-actions {
    margin-top: 8px !important;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════
   GUIDED TOUR & HELP
   ═══════════════════════════════════════════════════════ */
.tour-help-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--md-primary, #5B5FEF);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(91,95,239,.35);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
html[dir="rtl"] .tour-help-btn { right: auto; left: 24px; }
.tour-help-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(91,95,239,.45);
    color: #fff;
}

/* Help Center page */
.help-card {
    transition: transform .15s, box-shadow .15s;
    border: 1px solid rgba(0,0,0,.06);
}
.help-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.icon-box-40 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Driver.js popover overrides */
.driver-popover.ragam-tour-popover {
    border-radius: 16px !important;
    font-family: 'Inter', 'Tajawal', sans-serif !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    max-width: 360px;
}
.driver-popover.ragam-tour-popover .driver-popover-title {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.driver-popover.ragam-tour-popover .driver-popover-description {
    font-size: 13.5px !important;
    color: #555 !important;
    line-height: 1.6 !important;
}
.driver-popover.ragam-tour-popover .driver-popover-progress-text {
    font-size: 12px !important;
    color: #999 !important;
}
.driver-popover.ragam-tour-popover .driver-popover-footer button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 18px !important;
    text-shadow: none !important;
}
.driver-popover.ragam-tour-popover .driver-popover-next-btn {
    background: var(--md-primary, #5B5FEF) !important;
    color: #fff !important;
    border: none !important;
}
.driver-popover.ragam-tour-popover .driver-popover-prev-btn {
    background: transparent !important;
    color: var(--md-on-surface-variant, #555) !important;
    border: 1px solid var(--md-outline-variant, #ddd) !important;
}
.swal2-confirm-md {
    border-radius: var(--md-shape-sm) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 24px !important;
    letter-spacing: -.005em !important;
    box-shadow: none !important;
}
.swal2-cancel-md {
    border-radius: var(--md-shape-sm) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 24px !important;
    letter-spacing: -.005em !important;
    background: transparent !important;
    color: var(--md-on-surface-variant) !important;
    border: 1.5px solid var(--md-outline-variant) !important;
}
.swal2-cancel-md:hover {
    background: var(--md-secondary-container) !important;
    border-color: var(--md-secondary-container) !important;
}
.swal2-backdrop-show {
    background: rgba(15,23,42,.4) !important;
    backdrop-filter: blur(4px);
}

/* ── Saudi Riyal Currency Symbol (SAR 2022 Logo) ── */
.sar-icon {
    display: inline-block;
    width: 1em;
    height: 1.12em;
    vertical-align: -0.15em;
    background: currentColor;
    -webkit-mask-image: url("/Saudi_Riyal_Symbol-2.svg");
    mask-image: url("/Saudi_Riyal_Symbol-2.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── Custom number spinner (replaces native type="number" to avoid Arabic digits) ── */
.en-spinner-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.en-spinner-wrap > input {
    -moz-appearance: textfield;
    appearance: textfield;
}
.en-spinner-wrap > input::-webkit-outer-spin-button,
.en-spinner-wrap > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.en-spinner-btns {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    flex-direction: column;
    width: 24px;
    border-left: 1px solid var(--md-outline-variant, #ddd);
    border-radius: 0 var(--bs-border-radius, 6px) var(--bs-border-radius, 6px) 0;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}
.en-spin-up,
.en-spin-down {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--md-on-surface-variant, #555);
    font-size: 8px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.en-spin-up:hover,
.en-spin-down:hover {
    background: var(--md-surface-variant, #f0f0f0);
}
.en-spin-up {
    border-bottom: 1px solid var(--md-outline-variant, #ddd);
}