/* ============================================================
   Warehouze 2026 design system (Claude Design handoff)
   Loaded AFTER warehouze-redesign.css to re-tokenize the app:
   ink + warm paper, single orange accent, Bricolage / Inter /
   Space Mono. Depth from 1px borders + subtle warm shadows.
   ============================================================ */

/* ---- Tokens: remap the existing --wz-* vars to the new palette
   so every component built on them shifts at once. New semantic
   tokens are added alongside. --------------------------------- */
:root {
    /* new canonical tokens */
    --ink: #0D0D0B;
    --accent: #FF5436;
    --accent-700: #E03A1C;
    --accent-pressed: #C0330F;
    --accent-50: #FEF4EF;
    --surface: #FFFFFF;
    --paper: #F4F2EC;
    --border: #E7E4DC;
    --divider: #EFEDE7;
    --page-bg: #EFEDE6;
    --nav-bg: #14130F;

    --text-strong: #0D0D0B;
    --text-body: #2A2A26;
    --text-muted: #6E6E68;
    --text-faint: #8A8780;
    --zero: #C2BEB4;

    --ok-fg: #1F7A4D;  --ok-bg: #E6F4EC;
    --warn-fg: #9A7B12; --warn-bg: #FBF6E9;
    --danger-fg: #C13520; --danger-bg: #FBEAE6;
    --info-fg: #2A5B9E; --info-bg: #EAF0FB;

    --font-display: 'Bricolage Grotesque', 'DM Serif Display', Georgia, serif;
    --font-body: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --shadow-rest: 0 1px 2px rgba(13,13,11,.04);
    --shadow-hover: 0 6px 20px -6px rgba(13,13,11,.10);
    --shadow-lift: 0 12px 28px -12px rgba(13,13,11,.16);
    --shadow-overlay: 0 24px 60px -28px rgba(13,13,11,.32);

    /* --- override legacy --wz-* so existing rules recolor --- */
    --wz-bg: #EFEDE6;
    --wz-white: #FFFFFF;
    --wz-dark: #0D0D0B;
    --wz-ink: #0D0D0B;
    --wz-gray-600: #2A2A26;
    --wz-gray-500: #6E6E68;
    --wz-gray-400: #8A8780;
    --wz-gray-300: #C2BEB4;
    --wz-gray-200: #E7E4DC;
    --wz-gray-100: #F4F2EC;
    --wz-teal: #14130F;
    --wz-teal-dark: #000000;
    --wz-teal-light: #EFEDE7;
    --wz-coral: #FF5436;
    --wz-coral-deep: #E03A1C;
    --wz-coral-soft: #FEF4EF;
    --wz-cream: #F4F2EC;
    --wz-yellow: #FF5436;
    --wz-red: #C13520;
    --wz-red-light: #FBEAE6;
    --wz-orange: #FF5436;
    --wz-orange-light: #FEF4EF;
    --wz-green: #1F7A4D;
    --wz-green-light: #E6F4EC;
    --wz-blue: #2A5B9E;
    --wz-blue-light: #EAF0FB;
    --wz-radius: 16px;
    --wz-radius-sm: 14px;
    --wz-radius-xs: 10px;
    --wz-shadow: 0 1px 2px rgba(13,13,11,.04);
    --wz-active: #C2BEB4;
}

/* ---- Typography ------------------------------------------- */
body {
    font-family: var(--font-body) !important;
    background-color: var(--page-bg) !important;
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .hero-story h1, .section > h1, .section > h2,
.page-header h1, .modal-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.hero-story h1 { letter-spacing: -0.03em; line-height: .96; }

/* Numbers use the display face */
.cell-val, .w-val, .ops-stat, .metric-num, .wz-num,
.stat-cell .cell-val, .widget-info .w-val {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Eyebrows / labels / table headers: Inter, black, larger for readability
   (readability pass 2026-08-09; was Space Mono + faint grey) */
.section-label, .ops-label, .widget-info .w-label, .cell-label,
.eyebrow, .wz-mono, thead th, .table thead th {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    color: #0D0D0B !important;
    font-weight: 700;
    font-size: 12.5px;
}
.cell-label { letter-spacing: 0.04em !important; font-size: 12px !important; }

/* ---- Nav bar ---------------------------------------------- */
.nav {
    background: var(--nav-bg) !important;
    border-bottom: none !important;
}
.logo span {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: lowercase !important;
    letter-spacing: -0.01em !important;
    color: #F4F2EC !important;
}
.nav-links a {
    color: rgba(255,255,255,.66) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    border-radius: 999px;
    transition: background .12s ease, color .12s ease;
}
.nav-links a:hover,
.nav-links .dropdown-toggle:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}
.nav-links a.active {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
}
/* notification count badge -> accent with ring */
#notificationBadge, .noti-icon-badge, .badge-primary {
    background: var(--accent) !important;
    color: #fff !important;
    border: 2px solid var(--nav-bg);
}
/* account avatar well */
.nav-icon svg { stroke-width: 1.9px; }

/* nav dropdown menus -> light surface per spec */
.nav-links .dropdown .dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-overlay) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.nav-links .dropdown .dropdown-menu .dropdown-item {
    color: var(--text-body) !important;
    border-radius: 9px;
}
.nav-links .dropdown .dropdown-menu .dropdown-item:hover,
.nav-links .dropdown .dropdown-menu .dropdown-item:focus {
    background: var(--paper) !important;
    color: var(--ink) !important;
}

/* ---- Buttons: pills --------------------------------------- */
.btn {
    border-radius: 999px !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-700) !important;
    border-color: var(--accent-700) !important;
}
.btn-primary:active { background: var(--accent-pressed) !important; }
/* secondary-strong (ink) — map the app's success button so we keep
   one orange primary per region */
.btn-success, .btn-dark, .btn-ink {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-dark:hover { background: #000 !important; }
.btn-outline-secondary, .btn-secondary {
    background: var(--surface) !important;
    border: 1.5px solid var(--ink) !important;
    color: var(--ink) !important;
}
.btn-outline-secondary:hover, .btn-secondary:hover { background: var(--paper) !important; }
.btn-danger {
    background: var(--surface) !important;
    border: 1.5px solid #E7C7BF !important;
    color: var(--danger-fg) !important;
}
.btn-danger:hover { background: var(--danger-bg) !important; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,84,54,.35); }

/* ---- Cards ------------------------------------------------- */
.card, .widget-card, .ops-card, .stat-grid, .table-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--wz-radius) !important;
    box-shadow: var(--shadow-rest) !important;
}
.widget-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ops-card.clickable:hover, .widget-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift) !important;
    border-color: #D8D4CB !important;
}
/* icon wells */
.ops-icon, .widget-icon {
    background: var(--paper) !important;
    border-radius: 11px !important;
    color: var(--ink) !important;
}
.ops-icon svg, .widget-icon svg { stroke-width: 1.9px; }
.ops-stat, .w-val, .cell-val { color: var(--ink) !important; }
.ops-sub, .cell-label, .w-label { color: var(--text-muted) !important; }

/* directional CTA */
.ops-cta {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
}
.ops-cta:hover { color: var(--accent) !important; }

/* attention / needs-action state */
.ops-card.orange, .stat-cell.tint-yellow, .tint-yellow, .stat-cell.attention {
    background: var(--accent-50) !important;
    border-color: #F3D6CB !important;
}
.stat-cell.tint-yellow:hover { background: #FBEAE1 !important; }
.cell-val.orange, .cell-val.red, .ops-stat.orange { color: var(--accent) !important; }
/* zero / empty numbers recede */
.cell-val.zero, .w-val.zero, .cell-val.is-zero { color: var(--zero) !important; }

/* segmented stat strip: divider lines not gaps */
.stat-cell { border-right: 1px solid var(--divider) !important; }

/* ---- Tables ----------------------------------------------- */
.table { background: var(--surface); }
.table thead th {
    background: #FAF8F3 !important;
    font-size: 10.5px !important;
    color: var(--text-faint) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
}
.table td, .table th { border-color: var(--divider) !important; }
.table tbody tr:hover { background: #FAF8F3 !important; }
.dataTables_wrapper .card, .table-responsive { border-radius: 18px; }
/* IDs / quantities / currency -> mono tabular */
.table td.mono, .table .qty, .table .id, td.text-right { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Inputs ----------------------------------------------- */
.form-control, .form-select, select.form-control, textarea.form-control {
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    min-height: 44px;
    color: var(--text-body);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(255,84,54,.14) !important;
}
.form-control.is-invalid, .form-control.error {
    border-color: var(--danger-fg) !important;
    background: #FDF6F4 !important;
}
label, .control-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12.5px;
    color: #0D0D0B;
    font-weight: 700;
}

/* ---- Status pills / badges -------------------------------- */
.wz-pill, .status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.wz-pill::before, .status-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8;
}
.wz-pill.draft { background: var(--paper); color: #54524D; }
.wz-pill.open, .badge-info { background: var(--info-bg); color: var(--info-fg); }
.wz-pill.packing, .badge-warning { background: var(--warn-bg); color: var(--warn-fg); }
.wz-pill.shipped, .badge-success { background: var(--ok-bg) !important; color: var(--ok-fg) !important; }
.wz-pill.danger, .badge-danger { background: var(--danger-bg) !important; color: var(--danger-fg) !important; }
.wz-pill.attention { background: var(--accent-50); color: #B23A1C; }

/* ---- Modals / overlays ------------------------------------ */
.modal-content {
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-overlay) !important;
}
.modal-backdrop.show { background: rgba(13,13,11,.42); }
.modal-title { font-family: var(--font-display) !important; }

/* ---- Section eyebrow spacing ------------------------------ */
.section-label { color: var(--text-faint) !important; }

/* count pill next to table titles */
.count-pill, .badge-pill.neutral { background: var(--paper); color: #54524D; border-radius: 999px; font-family: var(--font-mono); }