/* ==========================================================================
   Khulood ERP — Inventory & Custody design layer
   Scope: "عهدتي" (my-custody) + إدارة المخزون (inventory-management).

   Extends the existing kh-* component kit (khulood-base.css) in the same
   idiom. Written as plain CSS with its own namespace so it loads in every
   panel — including MainPanel, which ships no compiled Vite theme — without
   restyling anything outside these two areas.

   Brand: Khulood orange (#e55326). Tokens fall back to literals so the sheet
   renders correctly even where khulood-base.css is absent.
   ========================================================================== */

.kh-inv {
    --khi-surface: var(--khulood-color-surface-raised, #ffffff);
    --khi-sunken: var(--khulood-color-surface, #f6f7fb);
    --khi-ink: var(--khulood-color-text-primary, #0f172a);
    --khi-muted: var(--khulood-color-text-secondary, #64748b);
    --khi-border: var(--khulood-color-border, #e6e9f0);
    --khi-border-strong: var(--khulood-color-border-strong, #d3d9e4);
    --khi-brand: var(--khulood-color-primary, #e55326);
    --khi-radius: var(--khulood-radius-lg, 0.875rem);
    --khi-radius-sm: var(--khulood-radius-sm, 0.375rem);
    --khi-radius-md: var(--khulood-radius-md, 0.625rem);
    --khi-mono: var(--khulood-font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    --khi-motion: var(--khulood-motion, 150ms cubic-bezier(0.4, 0, 0.2, 1));
    --khi-shadow: var(--khulood-shadow-md, 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05));

    /* Default tone = neutral; every toned element re-declares these. */
    --khi-tone: #64748b;
    --khi-tone-ink: #475569;
    --khi-tone-soft: rgb(100 116 139 / 0.10);

    color: var(--khi-ink);
}

/* Dark fallbacks, for panels that don't load khulood-base.css (MainPanel).
   Where khulood-base is present its own dark values win, as they do above. */
.dark .kh-inv,
:root.dark .kh-inv {
    --khi-surface: var(--khulood-color-surface-raised, #1e293b);
    --khi-sunken: var(--khulood-color-surface, #0f172a);
    --khi-ink: var(--khulood-color-text-primary, #e2e8f0);
    --khi-muted: var(--khulood-color-text-secondary, #94a3b8);
    --khi-border: var(--khulood-color-border, #334155);
    --khi-border-strong: var(--khulood-color-border-strong, #475569);
    --khi-brand: var(--khulood-color-primary, #fb923c);
}

/* --------------------------------------------------------------------------
   Tones — one semantic scale shared by chips, rails, tiles, dots and buttons.
   -------------------------------------------------------------------------- */

.kh-tone-brand   { --khi-tone: #e55326; --khi-tone-ink: #b8431e; --khi-tone-soft: rgb(229 83 38 / 0.11); }
.kh-tone-success { --khi-tone: #15803d; --khi-tone-ink: #14532d; --khi-tone-soft: rgb(21 128 61 / 0.11); }
.kh-tone-warning { --khi-tone: #b45309; --khi-tone-ink: #8a3f07; --khi-tone-soft: rgb(180 83 9 / 0.12); }
.kh-tone-danger  { --khi-tone: #b91c1c; --khi-tone-ink: #911616; --khi-tone-soft: rgb(185 28 28 / 0.10); }
.kh-tone-info    { --khi-tone: #0369a1; --khi-tone-ink: #075985; --khi-tone-soft: rgb(3 105 161 / 0.10); }
.kh-tone-neutral { --khi-tone: #64748b; --khi-tone-ink: #475569; --khi-tone-soft: rgb(100 116 139 / 0.10); }

.dark .kh-tone-brand,
:root.dark .kh-tone-brand     { --khi-tone: #fb923c; --khi-tone-ink: #fdba74; --khi-tone-soft: rgb(251 146 60 / 0.16); }
.dark .kh-tone-success,
:root.dark .kh-tone-success   { --khi-tone: #4ade80; --khi-tone-ink: #86efac; --khi-tone-soft: rgb(74 222 128 / 0.14); }
.dark .kh-tone-warning,
:root.dark .kh-tone-warning   { --khi-tone: #fbbf24; --khi-tone-ink: #fcd34d; --khi-tone-soft: rgb(251 191 36 / 0.16); }
.dark .kh-tone-danger,
:root.dark .kh-tone-danger    { --khi-tone: #f87171; --khi-tone-ink: #fca5a5; --khi-tone-soft: rgb(248 113 113 / 0.16); }
.dark .kh-tone-info,
:root.dark .kh-tone-info      { --khi-tone: #60a5fa; --khi-tone-ink: #93c5fd; --khi-tone-soft: rgb(96 165 250 / 0.16); }
.dark .kh-tone-neutral,
:root.dark .kh-tone-neutral   { --khi-tone: #94a3b8; --khi-tone-ink: #cbd5e1; --khi-tone-soft: rgb(148 163 184 / 0.14); }

.kh-inv .kh-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.kh-inv .kh-min-0 { min-width: 0; }

/* Responsive switches owned by this sheet, so the cards/table swap works in
   every panel — including ones without the compiled Tailwind theme. */
.kh-inv .kh-md-only { display: none; }
.kh-inv .kh-sm-only { display: flex; }

@media (min-width: 48rem) {
    .kh-inv .kh-md-only { display: block; }
    .kh-inv .kh-sm-only { display: none; }
}

/* --------------------------------------------------------------------------
   Latin codes inside Arabic text — isolated so RTL never reorders them.
   -------------------------------------------------------------------------- */

.kh-code {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--khi-mono);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--khi-sunken) 70%, transparent);
    border: 1px solid var(--khi-border);
    color: var(--khi-ink);
    white-space: nowrap;
}

.kh-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Stat tiles — the KPI row. Flat surface, hairline tone accent on top.
   -------------------------------------------------------------------------- */

.kh-inv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
}

.kh-inv-stat {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--khi-border);
    border-radius: var(--khi-radius-md);
    background: var(--khi-surface);
    box-shadow: var(--khi-shadow);
    text-decoration: none;
    transition: border-color var(--khi-motion), transform var(--khi-motion), box-shadow var(--khi-motion);
}

.kh-inv-stat::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--khi-tone);
}

a.kh-inv-stat:hover {
    border-color: color-mix(in srgb, var(--khi-tone) 45%, var(--khi-border));
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--khi-tone) 55%, transparent);
}

a.kh-inv-stat:focus-visible {
    outline: 2px solid var(--khi-tone);
    outline-offset: 2px;
}

.kh-inv-stat__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kh-inv-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: var(--khi-tone-soft);
    color: var(--khi-tone-ink);
}

.kh-inv-stat__icon svg { width: 1rem; height: 1rem; }

.kh-inv-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--khi-muted);
    line-height: 1.3;
}

.kh-inv-stat__value {
    display: block;
    margin-block-start: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--khi-tone-ink);
}

.kh-inv-stat__value--muted { color: var(--khi-ink); }

.kh-inv-stat__hint {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.6875rem;
    color: var(--khi-muted);
}

/* --------------------------------------------------------------------------
   Chips — one badge shape for every status across custody and inventory.
   -------------------------------------------------------------------------- */

.kh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--khi-tone-soft);
    color: var(--khi-tone-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--khi-tone) 30%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.kh-chip svg { width: 0.875rem; height: 0.875rem; flex: none; }

.kh-chip--sm { min-height: 1.25rem; font-size: 0.6875rem; padding: 0.0625rem 0.4375rem; }

/* --------------------------------------------------------------------------
   Ledger tables — dense, scannable, sticky headers, urgency rails.
   -------------------------------------------------------------------------- */

.kh-ledger {
    border: 1px solid var(--khi-border);
    border-radius: var(--khi-radius-md);
    background: var(--khi-surface);
    overflow: auto;
    overscroll-behavior-x: contain;
}

.kh-ledger--tall { max-height: min(70vh, 40rem); }
.kh-ledger--wide table { min-width: 62rem; }
.kh-ledger--xwide table { min-width: 70rem; }
.kh-ledger--md table { min-width: 48rem; }

.kh-ledger:focus-visible { outline: 2px solid var(--khi-brand); outline-offset: 2px; }

.kh-ledger table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.kh-ledger thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--khi-sunken) 82%, var(--khi-surface));
    color: var(--khi-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
    padding: 0.625rem 0.75rem;
    border-block-end: 1px solid var(--khi-border-strong);
}

.kh-ledger tbody td {
    padding: 0.5625rem 0.75rem;
    border-block-end: 1px solid var(--khi-border);
    vertical-align: middle;
}

.kh-ledger tbody tr:last-child td { border-block-end: 0; }

.kh-ledger tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--khi-sunken) 45%, transparent);
}

.kh-ledger tbody tr:hover {
    background: color-mix(in srgb, var(--khi-brand) 6%, transparent);
}

.kh-ledger tbody tr.kh-row-flag {
    box-shadow: inset 3px 0 0 0 var(--khi-tone);
    background: var(--khi-tone-soft);
}

.kh-ledger tbody tr.kh-row-flag:hover {
    background: color-mix(in srgb, var(--khi-tone) 18%, transparent);
}

.kh-ledger__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--khi-muted);
}

.kh-cell-title {
    font-weight: 600;
    color: var(--khi-ink);
}

.kh-cell-sub {
    margin-block-start: 0.125rem;
    font-size: 0.6875rem;
    color: var(--khi-muted);
}

.kh-link {
    font-weight: 600;
    color: var(--khi-brand);
    text-decoration: none;
}

.kh-link:hover { text-decoration: underline; }
.kh-link:focus-visible { outline: 2px solid var(--khi-brand); outline-offset: 2px; border-radius: 0.25rem; }

.kh-scroll-hint {
    margin-block-end: 0.5rem;
    font-size: 0.6875rem;
    color: var(--khi-muted);
}

@media (min-width: 48rem) {
    .kh-scroll-hint { display: none; }
}

.kh-inv section[id] { scroll-margin-block-start: 1.5rem; }

.kh-filter { max-width: 32rem; margin-block-end: 1rem; }

.kh-filter__label {
    display: block;
    margin-block-end: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--khi-ink);
}

.kh-filter__control { width: 100%; }

/* --------------------------------------------------------------------------
   Due meter — the signature element. A custody is an obligation with a
   deadline; the track shows how much of the loan period is already spent.
   -------------------------------------------------------------------------- */

.kh-due {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 7.5rem;
}

.kh-due__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.kh-due__date {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--khi-muted);
}

.kh-due__verdict {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--khi-tone-ink);
}

.kh-due__track {
    display: block;
    height: 4px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--khi-border-strong) 70%, transparent);
    overflow: hidden;
}

.kh-due__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--khi-tone);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.kh-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--khi-tone) 35%, var(--khi-border));
    border-inline-start: 4px solid var(--khi-tone);
    border-radius: var(--khi-radius-md);
    background: var(--khi-tone-soft);
    color: var(--khi-ink);
}

.kh-alert__icon {
    flex: none;
    color: var(--khi-tone-ink);
}

.kh-alert__icon svg { width: 1.25rem; height: 1.25rem; }

.kh-alert__title { font-weight: 700; color: var(--khi-tone-ink); }

.kh-alert__body { margin-block-start: 0.25rem; font-size: 0.8125rem; }

.kh-alert__list {
    margin-block-start: 0.375rem;
    padding-inline-start: 1.125rem;
    list-style: disc;
    font-size: 0.8125rem;
}

.kh-alert__list li + li { margin-block-start: 0.125rem; }

.kh-alert__note { margin-block-start: 0.5rem; font-size: 0.8125rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Custody cards (mobile view of the open-custody ledger)
   -------------------------------------------------------------------------- */

.kh-cards { display: flex; flex-direction: column; gap: 0.75rem; }

.kh-card {
    overflow: hidden;
    border: 1px solid var(--khi-border);
    border-inline-start: 4px solid var(--khi-tone);
    border-radius: var(--khi-radius-md);
    background: var(--khi-surface);
    box-shadow: var(--khi-shadow);
}

.kh-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: color-mix(in srgb, var(--khi-sunken) 60%, var(--khi-surface));
    border-block-end: 1px solid var(--khi-border);
}

.kh-card__title { font-weight: 700; color: var(--khi-ink); line-height: 1.35; }
.kh-card__meta { margin-block-start: 0.3125rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }

.kh-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.875rem;
}

.kh-card__body > .kh-span-2 { grid-column: 1 / -1; }

.kh-def__label { font-size: 0.6875rem; font-weight: 600; color: var(--khi-muted); }
.kh-def__value { margin-block-start: 0.1875rem; font-size: 0.8125rem; color: var(--khi-ink); font-variant-numeric: tabular-nums; }

.kh-card__foot {
    padding: 0.75rem 0.875rem;
    border-block-start: 1px solid var(--khi-border);
    background: color-mix(in srgb, var(--khi-sunken) 35%, var(--khi-surface));
}

/* --------------------------------------------------------------------------
   Actions — buttons sized for touch (44px targets on the primary actions).
   -------------------------------------------------------------------------- */

.kh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.kh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--khi-radius-sm);
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--khi-motion), border-color var(--khi-motion), transform var(--khi-motion);
}

.kh-btn svg { width: 1rem; height: 1rem; flex: none; }
.kh-btn__icon { display: inline-flex; align-items: center; }

.kh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kh-btn:active { transform: translateY(1px); }

.kh-btn:focus-visible { outline: 2px solid var(--khi-tone); outline-offset: 2px; }

.kh-btn[disabled] { cursor: wait; opacity: 0.6; }

.kh-btn--solid { background: var(--khi-tone); color: #fff; }
.kh-btn--solid:hover:not([disabled]) { background: color-mix(in srgb, var(--khi-tone) 85%, #000); }

.dark .kh-btn--solid,
:root.dark .kh-btn--solid { color: #0f172a; }

.kh-btn--outline {
    border-color: color-mix(in srgb, var(--khi-tone) 45%, transparent);
    color: var(--khi-tone-ink);
    background: var(--khi-surface);
}

.kh-btn--outline:hover:not([disabled]) { background: var(--khi-tone-soft); }

.kh-return {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width: 40rem) {
    .kh-return { flex-direction: row; align-items: center; width: auto; }
}

.kh-field {
    min-height: 2.75rem;
    min-width: 12rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--khi-border-strong);
    border-radius: var(--khi-radius-sm);
    background: var(--khi-surface);
    color: var(--khi-ink);
    font-size: 0.8125rem;
}

.kh-field::placeholder { color: var(--khi-muted); }

.kh-field:focus {
    outline: none;
    border-color: var(--khi-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--khi-brand) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Timeline — the custody ledger spine, grouped by day.
   -------------------------------------------------------------------------- */

.kh-timeline { position: relative; }

.kh-timeline__day {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block: 1rem 0.625rem;
}

.kh-timeline__day:first-child { margin-block-start: 0; }

.kh-timeline__day-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--khi-muted);
    font-variant-numeric: tabular-nums;
    background: var(--khi-sunken);
    border: 1px solid var(--khi-border);
    border-radius: 9999px;
    padding: 0.1875rem 0.625rem;
    white-space: nowrap;
}

.kh-timeline__day-rule { flex: 1; height: 1px; background: var(--khi-border); }

.kh-timeline__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding-inline-start: 2.25rem;
    border-inline-start: 1px solid var(--khi-border-strong);
    margin-inline-start: 0.9375rem;
}

.kh-timeline__list > li { position: relative; }
.kh-timeline__list > li + li { margin-block-start: 0.75rem; }

.kh-timeline__dot {
    position: absolute;
    inset-inline-start: -1.0625rem;
    inset-block-start: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--khi-tone);
    color: #fff;
    box-shadow: 0 0 0 4px var(--khi-surface);
}

.dark .kh-timeline__dot,
:root.dark .kh-timeline__dot { color: #0f172a; }

.kh-timeline__dot svg { width: 1rem; height: 1rem; }

.kh-event {
    position: relative;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--khi-border);
    border-radius: var(--khi-radius-md);
    background: var(--khi-surface);
    transition: border-color var(--khi-motion), box-shadow var(--khi-motion);
}

.kh-event:hover {
    border-color: color-mix(in srgb, var(--khi-tone) 40%, var(--khi-border));
    box-shadow: var(--khi-shadow);
}

.kh-event__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kh-event__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--khi-ink); }
.kh-event__time { font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--khi-muted); }
.kh-event__meta { margin-block-start: 0.375rem; font-size: 0.8125rem; color: var(--khi-muted); }
.kh-event__note {
    margin-block-start: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--khi-radius-sm);
    background: color-mix(in srgb, var(--khi-sunken) 70%, transparent);
    font-size: 0.8125rem;
    color: var(--khi-ink);
}
.kh-event__links { margin-block-start: 0.625rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.kh-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--khi-radius-sm);
    background: color-mix(in srgb, var(--khi-sunken) 75%, transparent);
    border: 1px solid var(--khi-border);
    color: var(--khi-ink);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
}

a.kh-tag:hover { border-color: var(--khi-brand); color: var(--khi-brand); }
a.kh-tag:focus-visible { outline: 2px solid var(--khi-brand); outline-offset: 2px; }
.kh-tag svg { width: 0.875rem; height: 0.875rem; }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.kh-blank {
    padding: 2.5rem 1.25rem;
    text-align: center;
    border: 1px dashed var(--khi-border-strong);
    border-radius: var(--khi-radius-md);
}

.kh-blank__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: var(--khi-tone-soft);
    color: var(--khi-tone-ink);
}

.kh-blank__icon svg { width: 1.375rem; height: 1.375rem; }
.kh-blank__title { margin-block-start: 0.75rem; font-weight: 700; color: var(--khi-ink); }
.kh-blank__text { margin-block-start: 0.25rem; font-size: 0.8125rem; color: var(--khi-muted); }

/* --------------------------------------------------------------------------
   Print — a custody page is often printed as a handover record.
   -------------------------------------------------------------------------- */

@media print {
    .kh-inv .kh-actions,
    .kh-inv .kh-scroll-hint { display: none !important; }

    .kh-inv .kh-ledger,
    .kh-inv .kh-ledger--tall { max-height: none; overflow: visible; }

    .kh-inv .kh-event,
    .kh-inv .kh-card { break-inside: avoid; }
}

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

    a.kh-inv-stat:hover { transform: none; }
    .kh-btn:active { transform: none; }
}