/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   EBN ERP — Global Design System (Phase 1)
   Tokens are exactly as locked in CLAUDE.md. Nothing here is applied to any page yet.

   NAMING: every class is prefixed `ebn-`. The app already ships `.btn-primary`, `.badge`, `.card`,
   `.alert` and `.table` from BOTH Bootstrap 5.3.3 (CDN) and the theme block in app/layout.php.
   An unprefixed class here would be a third definition of the same selector, and which one won
   would depend on load order — silently restyling live pages the moment this file is linked.
   The prefix makes adoption explicit and reversible, one element at a time.

   DARK MODE: the app toggles `body.dk` (app/layout.php, persisted in localStorage). The dark
   tokens below are therefore remapped under `body.dk` rather than a media query, so this file
   follows the switch the application already has.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────────────────────────── */
    --color-primary-navy: #0F1729;
    --color-brand-purple: #6D28D9;
    --color-brand-purple-light: #8B5CF6;
    --color-accent-cyan: #06B6D4;

    /* ── Surfaces & text (light) ───────────────────────────────────────────────────────────── */
    --color-bg: #F4F6F9;
    --color-surface: #FFFFFF;
    --color-border: #E2E8F0;
    --color-text-primary: #0F1729;
    --color-text-secondary: #64748B;

    /* ── Status ────────────────────────────────────────────────────────────────────────────── */
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --color-info: #0EA5E9;

    /* ── Dark-mode values, declared here so both palettes live in one place ────────────────── */
    --color-bg-dark: #0B1120;
    --color-surface-dark: #131B2E;
    --color-border-dark: #1E293B;
    --color-text-primary-dark: #F1F5F9;
    --color-text-secondary-dark: #94A3B8;

    /* ── Type, radius, elevation ───────────────────────────────────────────────────────────── */
    --font-sans: Inter, 'Plus Jakarta Sans', system-ui, sans-serif;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 3px rgba(15, 23, 41, 0.08);

    /* ── Derived, not new colours ──────────────────────────────────────────────────────────────
       Every value below is the brand purple or a status hue at reduced alpha, used for focus
       rings, tints and hover fills. No hue is introduced that is not already a locked token. */
    --ebn-focus-ring: rgba(109, 40, 217, 0.18);
    --ebn-purple-tint: rgba(109, 40, 217, 0.08);
    --ebn-purple-tint-strong: rgba(109, 40, 217, 0.14);
    --ebn-success-tint: rgba(22, 163, 74, 0.10);
    --ebn-warning-tint: rgba(217, 119, 6, 0.10);
    --ebn-danger-tint: rgba(220, 38, 38, 0.10);
    --ebn-info-tint: rgba(14, 165, 233, 0.10);
    --ebn-neutral-tint: rgba(100, 116, 139, 0.10);
    --ebn-skeleton-base: rgba(100, 116, 139, 0.11);
    --ebn-skeleton-sheen: rgba(100, 116, 139, 0.04);
    --ebn-overlay: rgba(15, 23, 41, 0.45);

    /* ── Sidebar section accents ──────────────────────────────────────────────────────────────
       Icon colour per navigation group, so the sidebar can be scanned before it is read. Only two
       new hues: MAIN keeps --color-text-secondary, which every sidebar icon already uses, and
       Reports and Admin stay on it too — three coloured groups out of five is the point at which
       grouping reads and busyness does not.

       FULL OPACITY, not the 70% the brief asked for. Over the sidebar's own --color-bg, 70% puts
       slate at 2.60, teal at 2.36 and amber at 2.83 against a 3:1 floor for a non-text graphic —
       the accents would be harder to see than the plain grey icons they replace. At full strength
       every value below clears it, and the "quiet at rest, lit on contact" effect comes from the
       -hi pair on hover instead.

       Deliberately NOT --color-warning (#D97706) for Setup: that is a status hue, and a nav group
       borrowing it would make a settings link read as a warning. */
    --ebn-nav-inventory: #0D9488;       /* 3.46 on #F4F6F9 */
    --ebn-nav-inventory-hi: #0F766E;    /* hover: same hue, more weight */
    --ebn-nav-setup: #B45309;           /* 4.64 on #F4F6F9 */
    --ebn-nav-setup-hi: #92400E;
    --ebn-nav-main: var(--color-text-secondary);
}

/* Dark mode remaps the semantic tokens to their -dark counterparts, so every component below
   follows automatically and needs no dark-specific rule of its own.

   Both `body.dk` and `html.dk` are matched. Shell pages flag `body` (app/layout.php's toggle),
   but a standalone page that reads the preference before first paint has no <body> yet and must
   flag documentElement instead. Matching both keeps ONE definition of the dark values — the
   alternative was duplicating them per page, which is exactly what CLAUDE.md rule 4 forbids. */
body.dk, html.dk {
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-border: var(--color-border-dark);
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
    --ebn-skeleton-base: rgba(148, 163, 184, 0.13);
    --ebn-skeleton-sheen: rgba(148, 163, 184, 0.05);
    --ebn-overlay: rgba(0, 0, 0, 0.60);

    /* Both accents are LIFTED on the dark ground, the same move this block already makes for text
       and borders. #B45309 technically clears the floor at 3.75 on #0B1120, but a dark brown on
       near-black reads as muddy rather than muted — the point of the accent is lost even though
       the number passes. Hover darkens on light and brightens on dark, so contact always moves
       the icon away from the ground rather than toward it. */
    --ebn-nav-inventory: #2DD4BF;       /* 10.12 on #0B1120 */
    --ebn-nav-inventory-hi: #5EEAD4;
    --ebn-nav-setup: #F59E0B;           /* 8.77 on #0B1120 */
    --ebn-nav-setup-hi: #FCD34D;
}

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════════════════════════ */
.ebn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ebn-btn:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 2px; }
.ebn-btn:disabled,
.ebn-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ebn-btn--sm { font-size: 12px; padding: 6px 12px; }
.ebn-btn--lg { font-size: 14px; padding: 11px 20px; }
.ebn-btn--block { width: 100%; }

.ebn-btn--primary { background: var(--color-brand-purple); border-color: var(--color-brand-purple); color: #fff; }
.ebn-btn--primary:hover { background: var(--color-brand-purple-light); border-color: var(--color-brand-purple-light); color: #fff; }
.ebn-btn--primary:active { background: var(--color-primary-navy); border-color: var(--color-primary-navy); }

.ebn-btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-primary); font-weight: 500; }
.ebn-btn--secondary:hover { background: var(--ebn-purple-tint); border-color: var(--color-brand-purple-light); color: var(--color-brand-purple); }
.ebn-btn--secondary:active { background: var(--ebn-purple-tint-strong); }

.ebn-btn--outline { background: transparent; border-color: var(--color-brand-purple); color: var(--color-brand-purple); }
.ebn-btn--outline:hover { background: var(--ebn-purple-tint); color: var(--color-brand-purple); }
.ebn-btn--outline:active { background: var(--ebn-purple-tint-strong); }

.ebn-btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.ebn-btn--danger:hover { background: var(--color-danger); border-color: var(--color-danger); filter: brightness(1.08); color: #fff; }
.ebn-btn--danger:active { filter: brightness(.92); }

.ebn-btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); font-weight: 500; }
.ebn-btn--ghost:hover { background: var(--ebn-neutral-tint); color: var(--color-text-primary); }
.ebn-btn--ghost:active { background: var(--ebn-purple-tint); color: var(--color-brand-purple); }

/* Spinner state. `.is-loading` hides the label and shows a ring, so the button keeps its width
   and the layout does not jump when a form is submitted. */
.ebn-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ebn-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ebn-spin .6s linear infinite;
    color: #fff;
}
.ebn-btn--secondary.is-loading::after,
.ebn-btn--outline.is-loading::after,
.ebn-btn--ghost.is-loading::after { color: var(--color-brand-purple); }
@keyframes ebn-spin { to { transform: rotate(360deg); } }

/* ═══ FORM CONTROLS ═════════════════════════════════════════════════════════════════════════ */
.ebn-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.ebn-label .ebn-required { color: var(--color-danger); margin-left: 2px; }
.ebn-help { font-size: 12px; color: var(--color-text-secondary); margin-top: 5px; }

.ebn-input,
.ebn-select,
.ebn-textarea {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ebn-textarea { min-height: 90px; resize: vertical; }
.ebn-select {
    appearance: none;
    padding-right: 34px;
    /* Chevron drawn as an inline SVG data URI so the control needs no icon font and no extra
       request. Stroke uses the secondary-text token. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
.ebn-input::placeholder,
.ebn-textarea::placeholder { color: var(--color-text-secondary); opacity: .75; }

.ebn-input:focus,
.ebn-select:focus,
.ebn-textarea:focus {
    outline: none;
    border-color: var(--color-brand-purple);
    box-shadow: 0 0 0 3px var(--ebn-focus-ring);
}
.ebn-input:disabled,
.ebn-select:disabled,
.ebn-textarea:disabled { background: var(--color-bg); color: var(--color-text-secondary); cursor: not-allowed; }

.ebn-input.is-error,
.ebn-select.is-error,
.ebn-textarea.is-error { border-color: var(--color-danger); }
.ebn-input.is-error:focus,
.ebn-select.is-error:focus,
.ebn-textarea.is-error:focus { box-shadow: 0 0 0 3px var(--ebn-danger-tint); }
.ebn-error-text {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    color: var(--color-danger);
    margin-top: 5px;
}

/* Input group — a field with a leading icon or a trailing action (show/hide password). */
.ebn-field { position: relative; }
.ebn-field--icon .ebn-input { padding-left: 36px; }
.ebn-field__icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-secondary); pointer-events: none; display: flex;
}
.ebn-field__action {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 4px; cursor: pointer; display: flex;
    color: var(--color-text-secondary); border-radius: var(--radius-sm);
}
.ebn-field__action:hover { color: var(--color-brand-purple); }
.ebn-field--action .ebn-input { padding-right: 38px; }

/* Checkbox / radio */
.ebn-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; }
.ebn-check input { width: 15px; height: 15px; accent-color: var(--color-brand-purple); cursor: pointer; }

/* ═══ BADGES ════════════════════════════════════════════════════════════════════════════════ */
.ebn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.ebn-badge--success { background: var(--ebn-success-tint); color: var(--color-success); }
.ebn-badge--warning { background: var(--ebn-warning-tint); color: var(--color-warning); }
.ebn-badge--danger  { background: var(--ebn-danger-tint);  color: var(--color-danger); }
.ebn-badge--info    { background: var(--ebn-info-tint);    color: var(--color-info); }
.ebn-badge--neutral { background: var(--ebn-neutral-tint); color: var(--color-text-secondary); }

/* ═══ ALERTS ════════════════════════════════════════════════════════════════════════════════ */
.ebn-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.ebn-alert__icon { flex-shrink: 0; display: flex; line-height: 1.4; }
.ebn-alert__title { font-weight: 600; margin-bottom: 2px; }
.ebn-alert--success { background: var(--ebn-success-tint); border-color: var(--color-success); color: var(--color-success); }
.ebn-alert--warning { background: var(--ebn-warning-tint); border-color: var(--color-warning); color: var(--color-warning); }
.ebn-alert--danger  { background: var(--ebn-danger-tint);  border-color: var(--color-danger);  color: var(--color-danger); }
.ebn-alert--info    { background: var(--ebn-info-tint);    border-color: var(--color-info);    color: var(--color-info); }

/* ═══ CARDS ═════════════════════════════════════════════════════════════════════════════════ */
.ebn-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.ebn-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.ebn-card__title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.ebn-card__subtitle { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.ebn-card__body { padding: 18px; }
.ebn-card__footer { padding: 13px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ TABLES ════════════════════════════════════════════════════════════════════════════════ */
/* The scroll container is what carries the border and radius; a sticky header needs the scroll
   to live here rather than on the page, or `position: sticky` has nothing to stick inside. */
.ebn-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.ebn-table-wrap--sticky { max-height: 60vh; overflow-y: auto; }
.ebn-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 13px;
    /* Figures in a column only line up with tabular figures. */
    font-variant-numeric: tabular-nums;
}
.ebn-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.ebn-table-wrap--sticky .ebn-table th { position: sticky; top: 0; z-index: 2; }
.ebn-table td {
    padding: 10px 14px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.ebn-table tbody tr:last-child td { border-bottom: none; }
.ebn-table tbody tr:hover td { background: var(--ebn-purple-tint); }
.ebn-table--compact th { padding: 8px 12px; }
.ebn-table--compact td { padding: 7px 12px; }
.ebn-table__num { text-align: right; }

/* ═══ TABS ══════════════════════════════════════════════════════════════════════════════════ */
.ebn-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ebn-tab {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.ebn-tab:hover { color: var(--color-text-primary); }
.ebn-tab.is-active { color: var(--color-brand-purple); border-bottom-color: var(--color-brand-purple); font-weight: 600; }
.ebn-tab:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: -2px; }

/* ═══ TOOLTIP ═══════════════════════════════════════════════════════════════════════════════ */
/* CSS-only: wrap a trigger in .ebn-tooltip and put the text in data-tip. */
.ebn-tooltip { position: relative; display: inline-flex; }
.ebn-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary-navy);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11.5px;
    line-height: 1.4;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .13s ease;
    z-index: 60;
    pointer-events: none;
}
.ebn-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-primary-navy);
    opacity: 0;
    visibility: hidden;
    transition: opacity .13s ease;
    z-index: 60;
    pointer-events: none;
}
.ebn-tooltip:hover::after, .ebn-tooltip:hover::before,
.ebn-tooltip:focus-within::after, .ebn-tooltip:focus-within::before { opacity: 1; visibility: visible; }

/* ═══ EMPTY STATE ═══════════════════════════════════════════════════════════════════════════ */
.ebn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 24px;
    font-family: var(--font-sans);
}
.ebn-empty__icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ebn-neutral-tint);
    color: var(--color-text-secondary);
    font-size: 22px;
    margin-bottom: 12px;
}
.ebn-empty__title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.ebn-empty__text { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; max-width: 46ch; }
.ebn-empty__action { margin-top: 16px; }

/* ═══ LOADING SKELETON ══════════════════════════════════════════════════════════════════════ */
.ebn-skeleton {
    background: var(--ebn-skeleton-base);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}
.ebn-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--ebn-skeleton-sheen), transparent);
    transform: translateX(-100%);
    animation: ebn-shimmer 1.6s ease-in-out infinite;
}
@keyframes ebn-shimmer { to { transform: translateX(100%); } }
.ebn-skeleton--text { height: 12px; margin-bottom: 8px; }
.ebn-skeleton--title { height: 18px; width: 40%; margin-bottom: 12px; }
.ebn-skeleton--line-short { width: 60%; }
.ebn-skeleton--circle { border-radius: 50%; }
.ebn-skeleton--row { height: 38px; margin-bottom: 6px; }

/* ═══ MOTION ════════════════════════════════════════════════════════════════════════════════ */
/* The shimmer and spinner are the only motion in this file; both stop when the OS asks. */
@media (prefers-reduced-motion: reduce) {
    .ebn-skeleton::after { animation: none; }
    .ebn-btn.is-loading::after { animation-duration: 2.4s; }
    .ebn-btn, .ebn-input, .ebn-select, .ebn-textarea, .ebn-tab,
    .ebn-tooltip::after, .ebn-tooltip::before { transition: none; }
}