/* ==========================================================================
   Design tokens + base components
   Shared by the storefront (ThemeAsset), admin (AdminLteAsset) and
   auth/empty pages (EmptyAsset). Loaded LAST so it wins over legacy CSS.
   Reference: "Dropship UI Redesign" design canvas.
   ========================================================================== */

:root {
    /* Brand */
    --ds-primary: #dc143c;          /* CTA buttons only */
    --ds-primary-hover: #b8102f;
    --ds-primary-text: #b01030;     /* links / text on white (AA) */
    --ds-primary-soft: #fdecef;

    /* Neutrals */
    --ds-ink: #141414;
    --ds-text: #141414;
    --ds-text-2: #45454d;
    --ds-muted: #5b5b66;            /* min. color for helper text (AA) */
    --ds-line: #ebe8e6;
    --ds-line-strong: #dcd8d5;
    --ds-surface: #ffffff;
    --ds-bg: #fafaf9;
    --ds-bg-soft: #f7f6f5;

    /* Semantic (bg / fg pairs all pass 4.5:1) */
    --ds-success-bg: #e8f6ed;  --ds-success: #136c34;
    --ds-warning-bg: #fff4e5;  --ds-warning: #7a4204;
    --ds-info-bg:    #e8effd;  --ds-info:    #1e3a8a;
    --ds-danger-bg:  #fdecef;  --ds-danger:  #8a0c26;
    --ds-neutral-bg: #f3f1ef;  --ds-neutral: #141414;

    /* Type */
    --ds-font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --ds-fs-caption: 13px;
    --ds-fs-body: 16px;
    --ds-lh-body: 1.8;

    /* Shape & spacing */
    --ds-radius-sm: 8px;
    --ds-radius: 10px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 20px;
    --ds-touch: 44px;
    --ds-control-h: 48px;
    --ds-shadow: 0 24px 48px -24px rgba(20, 20, 20, .25);
    --ds-focus: 0 0 0 3px rgba(220, 20, 60, .35);

    /* Map onto Bootstrap 5 + legacy site.css variables */
    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: 220, 20, 60;
    --bs-link-color: var(--ds-primary-text);
    --bs-link-color-rgb: 176, 16, 48;
    --bs-link-hover-color: #8a0c26;
    --bs-body-font-family: var(--ds-font);
    --bs-body-color: var(--ds-text);
    --bs-border-color: var(--ds-line);
    --bs-border-radius: var(--ds-radius);
    --bs-success: var(--ds-success);
    --bs-success-rgb: 19, 108, 52;
    --bs-dark: var(--ds-ink);
    --bs-dark-rgb: 20, 20, 20;
    --primary-color: var(--ds-primary);
    --primary-hover: var(--ds-primary-hover);
    --text-primary: var(--ds-text);
    --text-secondary: var(--ds-text-2);
    --text-light: var(--ds-muted);
    --accent-success: var(--ds-success);
}

/* ---------- Typography: one family everywhere (was Poppins / Source Sans / Noto) */
html, body,
.main-sidebar, .content-wrapper, .main-header, .main-footer,
button, input, select, textarea, .btn, .form-control, .form-select,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ds-font);
}
body {
    color: var(--ds-text);
    font-size: var(--ds-fs-body);
}
p { line-height: var(--ds-lh-body); }
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: 0; }
.text-muted, .text-secondary { color: var(--ds-muted) !important; }
small, .small { font-size: max(.8125rem, 13px); }

/* Arabic script must never be letter-spaced */
[dir="rtl"] * { letter-spacing: 0 !important; }

/* ---------- Focus (keyboard users) */
:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus) !important;
}

/* ---------- Buttons */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--ds-radius-md);
    min-height: var(--ds-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-sm { min-height: 36px; --bs-btn-border-radius: var(--ds-radius); }
.btn-lg { min-height: 54px; --bs-btn-font-weight: 800; }
.btn-primary, .btn-danger {
    --bs-btn-bg: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary-hover);
    --bs-btn-hover-border-color: var(--ds-primary-hover);
    --bs-btn-active-bg: #8a0c26;
    --bs-btn-active-border-color: #8a0c26;
    --bs-btn-disabled-bg: #e7e5e4;
    --bs-btn-disabled-border-color: #e7e5e4;
    --bs-btn-disabled-color: var(--ds-muted);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-dark, .btn-secondary {
    --bs-btn-bg: var(--ds-ink);
    --bs-btn-border-color: var(--ds-ink);
    --bs-btn-hover-bg: #2b2b30;
    --bs-btn-hover-border-color: #2b2b30;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-outline-secondary, .btn-light, .btn-outline-dark {
    --bs-btn-color: var(--ds-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ds-line-strong);
    --bs-btn-hover-color: var(--ds-ink);
    --bs-btn-hover-bg: var(--ds-bg-soft);
    --bs-btn-hover-border-color: var(--ds-line-strong);
}
.btn-success {
    --bs-btn-bg: var(--ds-success);
    --bs-btn-border-color: var(--ds-success);
    --bs-btn-hover-bg: #0f5a2b;
    --bs-btn-hover-border-color: #0f5a2b;
}

/* ---------- Form controls */
.form-control, .form-select {
    min-height: var(--ds-control-h);
    border-radius: var(--ds-radius);
    border-color: var(--ds-line-strong);
    color: var(--ds-text);
}
.form-control-sm, .form-select-sm { min-height: 36px; }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus {
    border-color: var(--ds-primary);
    box-shadow: var(--ds-focus);
}
.form-label, .control-label { font-weight: 700; margin-bottom: .375rem; }
.form-check-input { width: 1.125rem; height: 1.125rem; }
.form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }
.invalid-feedback, .help-block-error { color: var(--ds-danger); font-weight: 600; }
input[type="tel"], input[type="email"], input[type="url"] { direction: ltr; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: right; }

/* ---------- Cards */
.ds-card, .card {
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
}
.card { box-shadow: none; }
.card-header { background: transparent; border-bottom: 1px solid var(--ds-line); font-weight: 800; }

/* ---------- KPI tile */
.ds-kpi { padding: 1.125rem 1.25rem; }
.ds-kpi__label { font-size: 14px; color: var(--ds-muted); font-weight: 600; }
.ds-kpi__value { font-size: 30px; font-weight: 800; line-height: 1.3; margin-top: .25rem; }
.ds-kpi__meta { font-size: var(--ds-fs-caption); color: var(--ds-muted); font-weight: 600; margin-top: .25rem; }
.ds-kpi--dark { background: var(--ds-ink); color: #fff; border-color: var(--ds-ink); }
.ds-kpi--dark .ds-kpi__label, .ds-kpi--dark .ds-kpi__meta { color: #d6d3d1; }
.ds-kpi--alert { background: var(--ds-danger-bg); border-color: #f5c6cf; color: var(--ds-danger); }

/* ---------- Status pills (orders, withdrawals, stock) */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: var(--ds-fs-caption);
    font-weight: 800;
    white-space: nowrap;
    background: var(--ds-neutral-bg);
    color: var(--ds-neutral);
}
.ds-pill--info    { background: var(--ds-info-bg);    color: var(--ds-info); }
.ds-pill--success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-pill--warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-pill--danger  { background: var(--ds-danger-bg);  color: var(--ds-danger); }

/* Profit figure */
.ds-profit { color: var(--ds-success); font-weight: 800; }
.ds-profit-box {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    background: var(--ds-success-bg); color: var(--ds-success);
    border-radius: var(--ds-radius-md); padding: .5rem .75rem; font-weight: 700;
}

/* ---------- Tables */
.table { --bs-table-border-color: #f0eeec; }
.table > thead > tr > th {
    background: var(--ds-bg);
    color: var(--ds-muted);
    font-weight: 700;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .75rem .875rem; vertical-align: middle; }
.ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Pagination */
.pagination { --bs-pagination-active-bg: var(--ds-ink); --bs-pagination-active-border-color: var(--ds-ink); --bs-pagination-color: var(--ds-ink); gap: .375rem; }
.pagination .page-link { min-width: var(--ds-touch); min-height: var(--ds-touch); display: flex; align-items: center; justify-content: center; border-radius: var(--ds-radius) !important; font-weight: 700; }

/* ---------- Chips / filter toggles */
.ds-chip {
    min-height: var(--ds-touch); padding: 0 1.125rem; border-radius: 999px;
    border: 1px solid var(--ds-line-strong); background: #fff; color: var(--ds-ink);
    font-weight: 600; display: inline-flex; align-items: center; cursor: pointer;
}
.ds-chip.is-active, .ds-chip[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: #fff; font-weight: 700; }

/* ---------- Image placeholder (missing product image) */
.ds-img-placeholder { background: #efedeb; color: #8a8a93; display: flex; align-items: center; justify-content: center; }

/* ---------- Utilities */
.ds-touch { min-width: var(--ds-touch); min-height: var(--ds-touch); }
.ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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