/* ============================================================
   COSS DESIGN LAYER — tables, cards, badges, buttons, dropdowns
   Inspired by coss.com/ui (Cal.com design system, Base UI).
   Core recipe: neutral ink, hairline alpha borders (8%), soft
   4% hover fills, 10px radius, semantic soft badges.
   Loaded AFTER orders.css + buld-theme.css → wins the cascade.
   ============================================================ */

:root {
    --coss-radius: 10px;
    --coss-border: rgba(0, 0, 0, 0.08);
    --coss-input: rgba(0, 0, 0, 0.10);
    --coss-hover: rgba(0, 0, 0, 0.04);
    --coss-bg: #ffffff;
    --coss-muted-bg: rgba(0, 0, 0, 0.04);
    --coss-fg: #262626;             /* neutral-800 */
    --coss-fg-muted: #737373;       /* neutral-500 */
    --coss-success: #10b981;        /* emerald-500 */
    --coss-success-fg: #047857;     /* emerald-700 */
    --coss-warning: #f59e0b;        /* amber-500 */
    --coss-warning-fg: #b45309;     /* amber-700 */
    --coss-danger: #ef4444;         /* red-500 */
    --coss-danger-fg: #b91c1c;      /* red-700 */
    --coss-info: #3b82f6;           /* blue-500 */
    --coss-info-fg: #1d4ed8;        /* blue-700 */
    --coss-violet-fg: #6d28d9;
    --coss-shadow: 0 1px 2px rgba(0,0,0,.05);
    --coss-shadow-pop: 0 12px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
}
body.dark {
    --coss-border: rgba(255, 255, 255, 0.07);
    --coss-input: rgba(255, 255, 255, 0.09);
    --coss-hover: rgba(255, 255, 255, 0.05);
    --coss-bg: var(--buld-elevated, #4f4a54);   /* one dark surface for KPI strip, toolbar and table */
    --coss-muted-bg: rgba(255, 255, 255, 0.05);
    --coss-fg: #f4f4f5;
    --coss-fg-muted: #a3a3ab;
    --coss-success-fg: #34d399;
    --coss-warning-fg: #fbbf24;
    --coss-danger-fg: #f87171;
    --coss-info-fg: #60a5fa;
    --coss-violet-fg: #a78bfa;
    --coss-shadow: 0 1px 2px rgba(0,0,0,.3);
    --coss-shadow-pop: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}

/* ============ TABLE CONTAINER ============ */
.yaya-scope .orders-table {
    background: var(--coss-bg);
    border: 1px solid var(--coss-border);
    border-radius: var(--coss-radius);
    box-shadow: var(--coss-shadow);
    overflow: auto;
    max-height: calc(100vh - 240px);
}
body.dark .yaya-scope .orders-table {
    background: var(--coss-bg);
    border-color: var(--coss-border);
}

/* ============ HEADER — sticky while scrolling ============ */
.yaya-scope .table-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--buld-page, #fafafa);
    border-bottom: 1px solid var(--coss-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--coss-fg-muted);
    padding: 10px 16px;
}
body.dark .yaya-scope .table-head {
    background: var(--buld-page, #2f2b33);
    border-bottom-color: var(--coss-border);
    color: var(--coss-fg-muted);
}

/* ============ GRID — 11 cols: location+address merged into one ============ */
#panel-all-orders .yaya-scope .table-head,
#panel-all-orders .yaya-scope .table-row {
    grid-template-columns: 34px 92px 1.75fr 1.3fr 100px 40px 1.6fr 128px 142px 100px 205px;
    gap: 12px;
}

/* ============ ROWS ============ */
.yaya-scope .table-row {
    border-bottom: 1px solid var(--coss-border);
    padding: 11px 16px;
    transition: background .1s ease;
}
.yaya-scope .table-row:hover { background: var(--coss-hover); }
.yaya-scope .table-row.selected { background: rgba(59,130,246,.06); }
body.dark .yaya-scope .table-row { border-bottom-color: var(--coss-border); }
body.dark .yaya-scope .table-row:hover { background: var(--coss-hover); }
body.dark .yaya-scope .table-row.selected { background: rgba(96,165,250,.09); }

/* ============ CELLS ============ */
.yaya-scope .order-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--coss-fg);
    background: var(--coss-muted-bg);
    border: 1px solid var(--coss-input);
    border-radius: 7px;
    padding: 5px 9px;
    letter-spacing: .01em;
    white-space: nowrap;
}
body.dark .yaya-scope .order-id { background: var(--coss-muted-bg); color: var(--coss-fg); }

.yaya-scope .product-img {
    width: 44px; height: 44px;
    border-radius: 8px;
    border: 1px solid var(--coss-border);
    background: var(--coss-muted-bg);
}
.yaya-scope .product-name { font-size: 13px; font-weight: 600; color: var(--coss-fg); }
body.dark .yaya-scope .product-name { color: var(--coss-fg); }
.yaya-scope .product-sku { font-size: 11px; color: var(--coss-fg-muted); }

.yaya-scope .customer-avatar {
    width: 34px; height: 34px;
    border: none;
    box-shadow: inset 0 0 0 1px var(--coss-border);
    font-size: 11px !important;
}
.yaya-scope .customer-name { font-size: 13px; font-weight: 600; color: var(--coss-fg); }
body.dark .yaya-scope .customer-name { color: var(--coss-fg); }
.yaya-scope .customer-meta { font-size: 11px; color: var(--coss-fg-muted); margin-top: 2px; }

.yaya-scope .price { font-size: 14.5px; font-weight: 700; color: var(--coss-fg); white-space: nowrap; letter-spacing: -.01em; }
body.dark .yaya-scope .price { color: var(--coss-fg); }
.yaya-scope .price small { color: var(--coss-fg-muted); font-size: 11px; }

.yaya-scope .qty-chip {
    width: 30px; height: 30px;
    background: var(--coss-muted-bg);
    border: 1px solid var(--coss-border);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--coss-fg);
}
body.dark .yaya-scope .qty-chip { background: var(--coss-muted-bg); color: var(--coss-fg); }

.yaya-scope .location-wilaya {
    font-size: 13px; font-weight: 600; color: var(--coss-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark .yaya-scope .location-wilaya { color: var(--coss-fg); }
.yaya-scope .location-commune { font-size: 11px; color: var(--coss-fg-muted); }
.yaya-scope .location .addr-line {
    font-size: 11.5px; color: var(--coss-fg-muted); line-height: 1.4; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;
}
.yaya-scope .address-cell { font-size: 12px; color: var(--coss-fg-muted); }
body.dark .yaya-scope .address-cell { color: var(--coss-fg-muted); }

.yaya-scope .phone-chip {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    background: var(--coss-muted-bg);
    border: 1px solid var(--coss-border);
    border-radius: 7px;
    padding: 5px 9px;
    color: var(--coss-fg);
}
body.dark .yaya-scope .phone-chip { background: var(--coss-muted-bg); color: var(--coss-fg); }

/* ============ STATUS BADGES — coss soft semantic ============ */
.yaya-scope .status-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}
.yaya-scope .status-pill::after {
    content: '▾';
    font-size: 9px;
    opacity: .55;
    margin-left: 2px;
}
.yaya-scope .st-new        { background: rgba(59,130,246,.10);  color: var(--coss-info-fg);    border-color: rgba(59,130,246,.22); }
.yaya-scope .st-confirmed  { background: rgba(16,185,129,.10); color: var(--coss-success-fg); border-color: rgba(16,185,129,.22); }
.yaya-scope .st-noanswer   { background: rgba(245,158,11,.12); color: var(--coss-warning-fg); border-color: rgba(245,158,11,.25); }
.yaya-scope .st-postponed  { background: rgba(139,92,246,.10); color: var(--coss-violet-fg);  border-color: rgba(139,92,246,.22); }
.yaya-scope .st-shipped    { background: rgba(99,102,241,.10); color: var(--coss-info-fg);    border-color: rgba(99,102,241,.22); }
.yaya-scope .st-delivered  { background: rgba(16,185,129,.14); color: var(--coss-success-fg); border-color: rgba(16,185,129,.3); }
.yaya-scope .st-cancelled  { background: rgba(239,68,68,.10);  color: var(--coss-danger-fg);  border-color: rgba(239,68,68,.22); }

/* ============ DELIVERY PILL ============ */
.yaya-scope .delivery-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--coss-border);
    background: var(--coss-muted-bg);
    color: var(--coss-fg);
    white-space: nowrap;
}
.yaya-scope .delivery-pill .dp-dot { width: 6px; height: 6px; border-radius: 50%; }
.yaya-scope .delivery-pill-home .dp-dot { background: var(--coss-info); }
.yaya-scope .delivery-pill-desk .dp-dot { background: var(--coss-warning); }
.yaya-scope .delivery-pill-desk {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.25);
    color: var(--coss-warning-fg);
}

/* ============ ACTION BUTTONS ============ */
.yaya-scope .btn-action {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--coss-border);
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: all .12s ease;
    background: var(--coss-bg);
}
.yaya-scope .btn-action [data-lucide], .yaya-scope .btn-action svg { width: 15px; height: 15px; }
.yaya-scope .btn-confirm {
    background: var(--coss-success);
    border-color: var(--coss-success);
    color: #fff;
}
.yaya-scope .btn-confirm:hover { background: #059669; border-color: #059669; }
.yaya-scope .btn-cancel {
    background: transparent;
    color: var(--coss-danger-fg);
    border-color: rgba(239,68,68,.35);
}
.yaya-scope .btn-cancel:hover { background: rgba(239,68,68,.10); }

.yaya-scope .action-cluster {
    display: inline-flex;
    border: 1px solid var(--coss-border);
    border-radius: 7px;
    overflow: hidden;
    background: var(--coss-bg);
}
.yaya-scope .ac-btn {
    width: 30px; height: 30px;
    border: none;
    border-right: 1px solid var(--coss-border);
    background: transparent;
    color: var(--coss-fg-muted);
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.yaya-scope .ac-btn:last-child { border-right: none; }
.yaya-scope .ac-btn:hover { background: var(--coss-hover); color: var(--coss-fg); }
.yaya-scope .ac-btn [data-lucide], .yaya-scope .ac-btn svg { width: 14px; height: 14px; }
body.dark .yaya-scope .action-cluster,
body.dark .yaya-scope .btn-action { background: transparent; }

/* ============ STATUS DROPDOWN — coss popover ============ */
.status-dropdown {
    background: var(--coss-bg);
    border-radius: var(--coss-radius);
    box-shadow: var(--coss-shadow-pop);
    padding: 5px;
    min-width: 200px;
}
body.dark .status-dropdown { background: #35313a; box-shadow: var(--coss-shadow-pop); }
.sd-item {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--coss-fg);
    border-radius: 7px;
    padding: 7px 10px;
}
body.dark .sd-item { color: var(--coss-fg); }
.sd-item:hover { background: var(--coss-hover); }
.sd-section-label { color: var(--coss-fg-muted); }
.sd-divider { background: var(--coss-border); }
body.dark .sd-divider { background: var(--coss-border); }

/* ============ FILTER PILLS ROW ============ */
.yaya-scope .filter-pill, .yaya-scope [class*="fp-"] {
    border-radius: 999px;
}

/* ============ KPI STRIP ============ */
.yaya-scope .orders-kpis, .yaya-scope .kpi-strip {
    border-radius: var(--coss-radius);
    border: 1px solid var(--coss-border);
    box-shadow: var(--coss-shadow);
}

/* ============ EMPTY STATE ============ */
.yaya-scope .orders-table .table-empty { color: var(--coss-fg-muted); }

/* ============================================================
   GLOBAL COSS COMPONENTS — whole-platform pass
   Buttons, inputs, cards, modals, every secondary table.
   ============================================================ */

/* ---- Buttons: primary keeps Apple/coss blue CTA, outline goes hairline ---- */
.yaya-scope .btn-primary {
    border-radius: 8px;
    font-weight: 600;
    box-shadow: var(--coss-shadow);
}
.yaya-scope .btn-outline, .yaya-scope .toolbar-btn, .yaya-scope .an-filter-btn,
.yaya-scope .bulk-btn, .yaya-scope .apps-btn-secondary {
    border: 1px solid var(--coss-input);
    background: var(--coss-bg);
    color: var(--coss-fg);
    border-radius: 8px;
    font-weight: 500;
    transition: background .12s ease, border-color .12s ease;
}
.yaya-scope .btn-outline:hover, .yaya-scope .toolbar-btn:hover,
.yaya-scope .an-filter-btn:hover, .yaya-scope .bulk-btn:hover {
    background: var(--coss-hover);
    border-color: var(--coss-input);
}
body.dark .yaya-scope .btn-outline, body.dark .yaya-scope .toolbar-btn,
body.dark .yaya-scope .an-filter-btn, body.dark .yaya-scope .bulk-btn {
    background: transparent;
    color: var(--coss-fg);
}

/* ---- Inputs & selects ---- */
.yaya-scope input[type="text"], .yaya-scope input[type="search"],
.yaya-scope input[type="number"], .yaya-scope input[type="tel"],
.yaya-scope input[type="email"], .yaya-scope select, .yaya-scope textarea {
    border: 1px solid var(--coss-input);
    border-radius: 8px;
    background: var(--coss-bg);
    color: var(--coss-fg);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.yaya-scope input:focus, .yaya-scope select:focus, .yaya-scope textarea:focus {
    outline: none;
    border-color: #a3a3a3;
    box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
body.dark .yaya-scope input[type="text"], body.dark .yaya-scope input[type="search"],
body.dark .yaya-scope input[type="number"], body.dark .yaya-scope input[type="tel"],
body.dark .yaya-scope input[type="email"], body.dark .yaya-scope select,
body.dark .yaya-scope textarea {
    background: rgba(255,255,255,.04);
    color: var(--coss-fg);
}
body.dark .yaya-scope input:focus, body.dark .yaya-scope select:focus,
body.dark .yaya-scope textarea:focus {
    border-color: #737373;
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/* ---- Cards: unified hairline + radius + shadow across every panel ---- */
.yaya-scope .an-card, .yaya-scope .orders-kpi-card, .yaya-scope .lp-card,
.yaya-scope .report-card, .yaya-scope .table-card, .yaya-scope .integ-stat-card,
.yaya-scope .carrier-kpi-card, .yaya-scope .switcher-card, .yaya-scope .qa-mini-card,
.yaya-scope .carrier-choice-card, .yaya-scope .coming-soon-card {
    border: 1px solid var(--coss-border);
    border-radius: var(--coss-radius);
    box-shadow: var(--coss-shadow);
}

/* ---- Every secondary table inherits the coss look ---- */
.yaya-scope .ship-table, .yaya-scope .track-table, .yaya-scope .returns-table,
.yaya-scope .scheduled-table, .yaya-scope .team-table, .yaya-scope .sd-table {
    background: var(--coss-bg);
    border: 1px solid var(--coss-border);
    border-radius: var(--coss-radius);
    box-shadow: var(--coss-shadow);
}
body.dark .yaya-scope .ship-table, body.dark .yaya-scope .track-table,
body.dark .yaya-scope .returns-table, body.dark .yaya-scope .scheduled-table,
body.dark .yaya-scope .team-table, body.dark .yaya-scope .sd-table {
    background: var(--coss-bg);
}

/* ---- Modals & drawers ---- */
.yaya-scope .modal-content, .yaya-scope .eo2-modal, .yaya-scope .drawer-panel {
    border: 1px solid var(--coss-border);
    border-radius: 14px;
    box-shadow: var(--coss-shadow-pop);
}

/* ---- Pagination ---- */
.yaya-scope .per-page-select { border-radius: 8px; }
.yaya-scope .pagination button, .yaya-scope .page-btn {
    border: 1px solid var(--coss-input);
    border-radius: 7px;
    background: var(--coss-bg);
    color: var(--coss-fg);
}
.yaya-scope .pagination button:hover, .yaya-scope .page-btn:hover { background: var(--coss-hover); }
.yaya-scope .pagination button.active, .yaya-scope .page-btn.active {
    background: var(--coss-fg);
    color: var(--coss-bg);
    border-color: var(--coss-fg);
}
body.dark .yaya-scope .pagination button, body.dark .yaya-scope .page-btn { background: transparent; }

/* ============ SCROLLBAR (webkit) inside table ============ */
.yaya-scope .orders-table::-webkit-scrollbar { height: 10px; width: 10px; }
.yaya-scope .orders-table::-webkit-scrollbar-thumb {
    background: var(--coss-input);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.yaya-scope .orders-table::-webkit-scrollbar-track { background: transparent; }