@font-face {
    font-family: "Alexandria";
    src: url("/assets/fonts/Alexandria-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-arabic: "Alexandria", system-ui, sans-serif;
    --font-latin: "Inter", system-ui, sans-serif;
    --dc-primary: #00645f;
    --dc-primary-strong: #004b48;
    --dc-primary-soft: #e7f3f1;
    --dc-gold: #bd8a25;
    --dc-gold-strong: #9a6a0d;
    --dc-gold-soft: #fbf4e5;
    --dc-ink: #101817;
    --dc-muted: #64716f;
    --dc-line: #dde5e3;
    --dc-surface: #ffffff;
    --dc-canvas: #f6f8f7;
    --dc-danger: #b42318;
    --dc-success: #10785f;
    --dc-warning: #9c6500;
    --dc-radius-sm: 10px;
    --dc-radius: 14px;
    --dc-radius-lg: 20px;
    --dc-shadow: 0 8px 24px rgba(16, 24, 23, .07);
    --dc-shadow-sm: 0 2px 10px rgba(16, 24, 23, .055);
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.55rem, 2.2vw, 2rem);
    --text-3xl: clamp(2rem, 4vw, 3.5rem);
}

html { font-family: var(--font-arabic); font-size: 16px; color: var(--dc-ink); }
body, body.client-public, body.customer-app, body.erp-body, body.auth-page,
button, input, select, textarea { font-family: var(--font-arabic); }
body { color: var(--dc-ink); background: var(--dc-canvas); text-rendering: optimizeLegibility; }
button, a, input, select, textarea { font-size: max(.875rem, 14px); }
input, select, textarea { min-height: 44px; }
button, .btn, .gold-btn, .dark-outline { min-height: 44px; font-weight: 600; }
h1, h2, h3, h4, b, strong { color: inherit; }
h1 { font-size: var(--text-2xl); line-height: 1.35; font-weight: 700; }
h2 { font-size: var(--text-xl); line-height: 1.45; font-weight: 700; }
h3 { font-size: var(--text-lg); line-height: 1.5; font-weight: 600; }
p, li, label, td, th { line-height: 1.65; }
small { font-size: var(--text-xs); line-height: 1.55; }
[dir="ltr"], .money, time, input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"], .numeric {
    font-family: var(--font-latin), var(--font-arabic);
    font-variant-numeric: tabular-nums;
}

.erp-panel, .customer-form-section, .active-order-card, .empty-state, .login-card,
.garment-tile, .catalog-group-card, .quick-action-card, .kanban-card {
    border-radius: var(--dc-radius);
    border-color: var(--dc-line);
    box-shadow: var(--dc-shadow-sm);
}

.btn, .gold-btn {
    border-radius: var(--dc-radius-sm);
    background: var(--dc-primary);
    color: #fff;
    box-shadow: none;
}
.btn:hover, .gold-btn:hover { background: var(--dc-primary-strong); }
.btn.secondary, .dark-outline { background: var(--dc-surface); color: var(--dc-ink); border: 1px solid var(--dc-line); }
.status-chip { min-height: 28px; display: inline-flex; align-items: center; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; }
.section-kicker, .eyebrow, .gold-kicker { color: var(--dc-gold-strong); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; }

.erp-sidebar { background: #071c1b; }
.erp-nav a { min-height: 44px; font-size: var(--text-sm); }
.erp-nav a.active { background: var(--dc-primary); color: #fff; }
.erp-topbar, .customer-topbar, .site-header { border-color: var(--dc-line); }
.erp-content { max-width: 1600px; margin-inline: auto; width: 100%; }
.erp-table th { font-size: var(--text-xs); color: var(--dc-muted); }
.erp-table td { font-size: var(--text-sm); }

.customer-app, .client-public { background: #fff; }
.customer-main { width: min(100%, 840px); margin-inline: auto; }
.customer-primary-actions a { min-height: 96px; }
.mobile-nav a, .mobile-nav button, .public-mobile-nav a { min-height: 58px; font-size: .75rem; }
.mobile-nav .new-order span { background: var(--dc-primary); }

.smart-hero { min-height: auto; }
.smart-hero h1 { font-size: var(--text-3xl); line-height: 1.24; }
.smart-hero h1 em { color: var(--dc-primary); font-style: normal; }
.hero-copy p { font-size: var(--text-base); color: var(--dc-muted); }
.gold-header { background: rgba(255,255,255,.97); }
.quick-actions.smart-carousel,
.method-grid,
.care-grid { scrollbar-width: none; -ms-overflow-style: none; }
.quick-actions.smart-carousel::-webkit-scrollbar,
.method-grid::-webkit-scrollbar,
.care-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }

.garment-tile h3, .pos-product-card h3 { font-size: var(--text-base); }
.garment-tile button, .pos-product-card button, .qty-stepper button, .drawer-stepper button, .category-tabs button { min-width: 44px; min-height: 44px; }
.customer-form label, .pos-shell label { font-size: var(--text-sm); font-weight: 500; }
.delivery-choice input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); }
.customer-form, .customer-form-section, .delivery-choice-grid, .garment-picker { min-width: 0; max-width: 100%; }
.category-tabs { overscroll-behavior-inline: contain; }

/* Cashier/POS uses the same product identity without changing its operating logic. */
.cashier-pos, .pos-titlebar { --pos-black: var(--dc-primary-strong); --pos-black-soft: #073b38; --pos-gold: var(--dc-gold); --pos-gold-light: #e4bd61; --pos-bg: var(--dc-canvas); --pos-border: var(--dc-line); --pos-muted: var(--dc-muted); --pos-green: var(--dc-success); --pos-radius: var(--dc-radius); }
.pos-panel, .pos-cart-panel { box-shadow: var(--dc-shadow-sm); }
.pos-titlebar h1 { font-size: var(--text-2xl); }
.pos-section-head h2, .pos-cart-head h2 { font-size: var(--text-lg); }
.pos-product-card { border-color: var(--dc-line); box-shadow: none; }
.pos-product-card:hover { border-color: var(--dc-gold); box-shadow: var(--dc-shadow-sm); }
.pos-submit { background: var(--dc-primary); color: #fff; border-radius: var(--dc-radius-sm); }
.pos-submit:hover { background: var(--dc-primary-strong); }
.pos-category-tabs button.active, .pos-service-options button.active, .pos-payment-modes button.active { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }
.pos-segments input:checked + span, .pos-payment-methods input:checked + span { background: var(--dc-primary-strong); border-color: var(--dc-primary-strong); }
.pos-product-card b, .pos-cart-panel b, .pos-context b { font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    html { font-size: 16px; max-width: 100%; overflow-x: clip; }
    body { max-width: 100%; overflow-x: clip; padding-bottom: env(safe-area-inset-bottom); }
    .customer-main { padding-inline: 16px; }
    .smart-hero { padding: 34px 16px 24px; }
    .hero-product-preview { display: none; }
    .hero-copy { max-width: none; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-actions a { width: 100%; justify-content: center; }
    .customer-form-section { padding: 16px; }
    .garment-picker { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .garment-tile { min-width: 0; padding: 12px; }
    .garment-tile-head { align-items: flex-start; }
    .garment-tile-head h3 { overflow-wrap: anywhere; }
    .erp-table { min-width: 0; }
    .row-actions a, .row-actions button, .top-actions a, .top-actions button, .category-tabs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 359px) {
    .hero-actions { grid-template-columns: 1fr; }
    .garment-picker { grid-template-columns: 1fr 1fr; }
    .customer-main { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Unified operational workspace: staff act on work queues while backend owns states. */
.erp-nav > a { margin-bottom: 6px; }
.nav-group { border-top: 1px solid rgba(255,255,255,.07); padding-top: 5px; }
.nav-group summary { min-height: 42px; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; color:#bcb7ad; font-size:.8rem; font-weight:700; cursor:pointer; list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary span { transition:transform .2s ease; }
.nav-group[open] summary span { transform:rotate(180deg); }
.nav-group a { margin-inline-start:8px; }
.work-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.work-tabs a { min-height:72px; padding:11px; border:1px solid var(--dc-line); border-radius:var(--dc-radius); background:#fff; color:var(--dc-muted); display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; box-shadow:var(--dc-shadow-sm); }
.work-tabs a b { min-width:27px; height:27px; border-radius:999px; background:var(--dc-canvas); color:var(--dc-ink); display:grid; place-items:center; font-family:var(--font-latin); }
.work-tabs a.active { border-color:var(--dc-primary); background:var(--dc-primary-soft); color:var(--dc-primary-strong); }
.work-tabs a.active b { background:var(--dc-primary); color:#fff; }
.lab-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.branch-context-select select { margin:0; min-width:210px; }
.work-list-panel { padding:20px; }
.work-search { display:flex; align-items:center; gap:8px; max-width:460px; margin-bottom:15px; }
.work-search input { margin:0; }
.work-order-list, .work-card-list, .lab-ready-groups { display:grid; gap:10px; }
.work-order-row { min-height:72px; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; align-items:center; border:1px solid var(--dc-line); border-radius:var(--dc-radius-sm); padding:12px 14px; background:#fff; cursor:pointer; }
.work-order-row:has(input:checked) { border-color:var(--dc-primary); background:var(--dc-primary-soft); }
.work-order-row input { width:22px; height:22px; min-height:0; margin:0; accent-color:var(--dc-primary); }
.work-order-row span { display:flex; flex-direction:column; }
.work-order-row small { color:var(--dc-muted); }
.work-order-row strong { font-style:normal; font-size:.9rem; }
.work-order-row em { font-style:normal; color:var(--dc-warning); font-size:.78rem; }
.bulk-action-bar { position:sticky; bottom:12px; margin-top:16px; padding:12px 14px; border-radius:var(--dc-radius); background:#081d1c; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:var(--dc-shadow); }
.bulk-action-bar button:disabled { opacity:.45; cursor:not-allowed; }
.workspace-empty { padding:34px 18px; text-align:center; color:var(--dc-muted); }
.workspace-empty.compact { padding:15px; }
.transfer-work-card, .external-pickup-card, .ready-work-card, .branch-ready-card { padding:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.transfer-work-card h2, .external-pickup-card h2, .branch-ready-card h2 { margin:3px 0; font-size:1.05rem; }
.transfer-work-card p, .external-pickup-card p, .branch-ready-card p { margin:2px 0; color:var(--dc-muted); }
.transfer-work-card details, .ready-actions details, .branch-ready-card details, .receive-inline { position:relative; }
.transfer-work-card details > summary, .ready-actions details > summary, .branch-ready-card details > summary, .receive-inline > summary { list-style:none; cursor:pointer; }
.transfer-work-card details[open] form, .ready-actions details[open] form, .branch-ready-card details[open] form, .receive-inline[open] form { margin-top:12px; padding:15px; border:1px solid var(--dc-line); border-radius:var(--dc-radius); background:#fff; min-width:min(520px,76vw); box-shadow:var(--dc-shadow); }
.receive-inline form { display:grid; gap:10px; }
.receive-inline form label { display:grid; gap:5px; font-size:.82rem; font-weight:800; }
.receive-inline form input { min-height:44px; padding:8px 10px; border:1px solid var(--dc-line); border-radius:var(--dc-radius-sm); font:inherit; }
.transfer-receipt-total { display:flex; justify-content:space-between; padding:10px; background:var(--dc-canvas); border-radius:var(--dc-radius-sm); margin-bottom:10px; }
.ready-work-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; }
.ready-actions { display:flex; gap:8px; align-items:center; }
.ready-actions .whatsapp { min-height:44px; padding:10px 14px; border-radius:var(--dc-radius-sm); background:#128c4b; color:#fff; display:inline-flex; align-items:center; }
.customer-cell small { display:block; color:var(--dc-muted); }
.branch-ready-card > div { display:flex; align-items:center; gap:12px; }
.branch-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--dc-primary-soft); color:var(--dc-primary); }
.kanban-shell { overflow:visible; padding-bottom:0; }
.lab-kanban.simplified-kanban { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; min-width:0; overflow:visible; }
.lab-branch-filter{display:flex;justify-content:flex-end;margin:0 0 12px}.lab-branch-filter label{display:flex;align-items:center;gap:9px;font-weight:800}.lab-branch-filter select{min-height:44px;min-width:210px;padding:8px 12px;border:1px solid var(--dc-line);border-radius:var(--dc-radius-sm);background:#fff;font:inherit}
.lab-kanban.simplified-kanban .kanban-column { min-width:0; }
.simplified-kanban .kanban-card h3 { display:none; }
.simplified-kanban .kanban-card form { margin-top:12px; }
.simplified-kanban .kanban-card button span { opacity:.75; font-size:.75rem; }
.rework-form { display:grid; gap:7px; }
.rework-form button { background:#fff6e5; color:var(--dc-warning); border:1px solid #ead4a8; border-radius:var(--dc-radius-sm); }
.daily-focus-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.daily-focus-grid article { min-height:128px; padding:18px; border:1px solid var(--dc-line); background:#fff; border-radius:var(--dc-radius); box-shadow:var(--dc-shadow-sm); display:flex; flex-direction:column; justify-content:center; }
.daily-focus-grid article span { color:var(--dc-muted); }
.daily-focus-grid article b { font-family:var(--font-latin),var(--font-arabic); font-size:1.8rem; margin:6px 0; }
.daily-focus-grid article small { color:var(--dc-muted); }
.daily-focus-grid article.ready { background:var(--dc-primary-strong); color:#fff; }
.daily-focus-grid article.ready span, .daily-focus-grid article.ready small, .daily-focus-grid article.ready a { color:#dceeed; }
.operating-snapshot, .intervention-panel { padding:18px; margin-bottom:14px; }
.operating-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.operating-bar a { padding:13px; background:var(--dc-canvas); border-radius:var(--dc-radius-sm); display:flex; align-items:center; justify-content:space-between; color:var(--dc-muted); }
.operating-bar b { color:var(--dc-primary-strong); font-size:1.2rem; }
.intervention-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width: 1050px) {
    .work-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .lab-kanban.simplified-kanban { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .work-tabs { display:flex; overflow-x:auto; padding-bottom:4px; }
    .work-tabs a { flex:0 0 150px; min-height:60px; }
    .daily-focus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .operating-bar, .intervention-grid { grid-template-columns:1fr 1fr; }
    .lab-kanban.simplified-kanban { display:grid; grid-template-columns:1fr; overflow:visible; }
    .lab-kanban.simplified-kanban .kanban-column { min-width:0; min-height:220px; }
    .transfer-work-card, .external-pickup-card, .branch-ready-card { align-items:stretch; flex-direction:column; }
    .ready-work-card { grid-template-columns:1fr auto; }
    .ready-actions { grid-column:1/-1; }
    .transfer-work-card details[open] form, .ready-actions details[open] form, .branch-ready-card details[open] form, .receive-inline[open] form { min-width:0; width:100%; }
    .work-order-row { grid-template-columns:auto minmax(0,1fr) auto; gap:9px; }
    .work-order-row em { grid-column:2; }
}
@media (max-width: 390px) {
    .daily-focus-grid, .operating-bar, .intervention-grid { grid-template-columns:1fr; }
    .daily-focus-grid article { min-height:105px; }
    .work-tabs a { flex-basis:138px; }
    .bulk-action-bar { flex-direction:column; align-items:stretch; }
}