/* ui.css — shared refinement layer (loaded last). Keeps the brand palette; adds restraint,
   consistent surfaces and reusable components. Light-mode rules are scoped with html:not(.dark). */

:root {
    --ui-bg:            #f5f6f8;
    --ui-surface:       #ffffff;
    --ui-border:        #e7e9ee;
    --ui-border-strong: #d8dce3;
    --ui-text:          #101828;
    --ui-muted:         #667085;
    --ui-faint:         #98a2b3;
    --ui-brand:         #5d8a32;
    --ui-brand-dark:    #4a7027;
    --ui-brand-soft:    #edf4e4;
    --ui-radius:        16px;
    --ui-shadow-xs:     0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow-sm:     0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow-md:     0 12px 32px rgba(16, 24, 40, .10);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
}
html:not(.dark) body { background: var(--ui-bg); }
::selection { background: rgba(93, 138, 50, .22); }
h1, h2, h3 { letter-spacing: -.011em; }

:focus-visible { outline: 2px solid rgba(93, 138, 50, .6); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

button { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
button:active:not(:disabled) { transform: translateY(.5px); }
button:disabled { cursor: not-allowed; }

/* ── Surfaces: hairline borders, softer shadows ───────────────────────────── */
html:not(.dark) .border-gray-100 { border-color: var(--ui-border); }
html:not(.dark) .border-gray-200 { border-color: var(--ui-border-strong); }
html:not(.dark) .shadow-sm       { box-shadow: var(--ui-shadow-xs); }
html:not(.dark) .shadow-xl,
html:not(.dark) .shadow-2xl      { box-shadow: var(--ui-shadow-md); }
.modal-backdrop { backdrop-filter: blur(4px); }

/* Sentence-case section headings instead of shouting uppercase */
html:not(.dark) h2.uppercase.tracking-wide,
html:not(.dark) h3.uppercase.tracking-wide {
    text-transform: none;
    letter-spacing: -.005em;
    font-size: .9375rem;
    font-weight: 650;
}

/* Page titles: one weight/colour across customer pages (size stays per page) */
html:not(.dark) #ds-main h1:not(.text-white) {
    font-weight: 700; color: #101828; letter-spacing: -.015em;
}

/* Legacy near-black green fills (products filters) → brand green */
.bg-\[\#1a3310\] { background-color: var(--ui-brand) !important; }
.text-\[\#1a3310\] { color: var(--ui-brand-dark) !important; }

/* Small uppercase section labels inside customer pages → quiet sentence case */
html:not(.dark) #ds-main span.uppercase.tracking-wide.font-semibold {
    text-transform: none; letter-spacing: 0; font-size: .8125rem; color: #344054;
}

/* ── Admin sidebar (admin.js shell) ────────────────────────────────────────── */
html:not(.dark) .adm-sidebar { box-shadow: none; border-right: 1px solid var(--ui-border); }
.adm-sidebar { overflow-y: hidden; }
.adm-sidebar nav { min-height: 0; scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
.adm-sidebar .nav-group-label { font-size: .6875rem; letter-spacing: .08em; cursor: pointer; }
html:not(.dark) .adm-sidebar .nav-group-label { color: #98a2b3; }
.adm-sidebar .nav-group-label:hover { color: var(--ui-brand-dark); }
.adm-sidebar nav > div { margin-bottom: 1.1rem; }

.adm-sidebar .sidebar-tab { position: relative; padding: .55rem .75rem; border-radius: .625rem; font-size: .8125rem; }
.adm-sidebar .sidebar-tab > svg { color: #98a2b3; transition: color .15s; }
.adm-sidebar .sidebar-tab:hover > svg { color: var(--ui-brand-dark); }
.adm-sidebar .sidebar-tab[data-active="true"] > svg { color: var(--ui-brand); }
.adm-sidebar .sidebar-tab[data-active="true"]::before {
    content: ''; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ui-brand);
}
.adm-sidebar .sidebar-tab .dot { display: none !important; }
.adm-sidebar .adm-user-card { background: transparent; }
html:not(.dark) .adm-sidebar .adm-user-card { border-color: var(--ui-border); }

/* ── Customer sidebar (layout.js shell) ───────────────────────────────────── */
html:not(.dark) .ds-sidebar { box-shadow: none; border-right: 1px solid var(--ui-border); }
@media (min-width: 1024px) {
    html:not(.dark) .ds-sidebar { box-shadow: none !important; }
}
.ds-sidebar .ds-group { font-size: .6875rem; letter-spacing: .08em; padding-left: .75rem; margin-bottom: .35rem; }
html:not(.dark) .ds-sidebar .ds-group { color: #98a2b3; }
.ds-sidebar nav > div { margin-bottom: 1.1rem; }

.ds-sidebar .ds-nav-btn { position: relative; padding: .55rem .75rem; border-radius: .625rem; font-size: .8125rem; }
.ds-sidebar .ds-nav-btn > span:first-child { color: #98a2b3; transition: color .15s; }
.ds-sidebar .ds-nav-btn:hover > span:first-child { color: var(--ui-brand-dark); }
.ds-sidebar .ds-nav-active > span:first-child { color: var(--ui-brand) !important; }
.ds-sidebar .ds-nav-active::before {
    content: ''; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ui-brand);
}
.ds-sidebar .ds-nav-active .ds-dot { display: none !important; }

html:not(.dark) .ds-sidebar .ds-feedback-btn {
    background: transparent; border: 1px dashed var(--ui-border-strong); color: #475467; font-weight: 600;
}
html:not(.dark) .ds-sidebar .ds-feedback-btn:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-dark); }
.ds-sidebar .ds-user-card { background: transparent; }
html:not(.dark) .ds-sidebar .ds-user-card { border-color: var(--ui-border); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
html:not(.dark) table thead th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--ui-muted);
    background: #fafbfc;
}
html:not(.dark) table tbody tr { transition: background-color .12s; }
html:not(.dark) table tbody tr:hover > td { background: #fafbfc; }
html:not(.dark) table tbody td { border-color: #f0f1f4; }

/* ── Reusable components ──────────────────────────────────────────────────── */
/* Keep the actions column visible while the rest of a wide table scrolls horizontally */
.ui-sticky-actions th:last-child,
.ui-sticky-actions td:last-child {
    position: sticky; right: 0; z-index: 1;
    background: #fff;
    box-shadow: -10px 0 10px -10px rgba(16, 24, 40, .14);
}
.ui-sticky-actions thead th:last-child { background: #fafbfc; }
.ui-sticky-actions tbody tr:hover > td:last-child { background: #fafbfc; }
.dark .ui-sticky-actions th:last-child, .dark .ui-sticky-actions td:last-child { background: #1a1a1a; box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .6); }
.dark .ui-sticky-actions thead th:last-child { background: #111; }

.ui-kpi {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--ui-shadow-xs);
    min-width: 0;
}
.ui-kpi-head   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.ui-kpi-label  { font-size: .75rem; font-weight: 600; color: var(--ui-muted); }
.ui-kpi-value  { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: var(--ui-text); line-height: 1.1; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-kpi-sub    { font-size: .75rem; color: var(--ui-faint); margin-top: .4rem; }
.ui-kpi--brand { background: linear-gradient(135deg, #6a9a3c 0%, #4a7027 100%); border-color: transparent; box-shadow: 0 8px 24px rgba(74, 112, 39, .25); }
.ui-kpi--brand .ui-kpi-label { color: rgba(255, 255, 255, .8); }
.ui-kpi--brand .ui-kpi-value { color: #fff; }
.ui-kpi--brand .ui-kpi-sub   { color: rgba(255, 255, 255, .72); }
.ui-kpi--brand .ui-icon      { background: rgba(255, 255, 255, .18); color: #fff; }

.ui-kpi-btn {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .9rem; border-radius: .75rem; border: none; cursor: pointer;
    background: #fff; color: var(--ui-brand-dark);
    font-size: .75rem; font-weight: 700; transition: background .15s, transform .15s;
}
.ui-kpi-btn:hover { background: var(--ui-brand-soft); transform: translateX(2px); }

.ui-icon {
    width: 2.25rem; height: 2.25rem; border-radius: .75rem; flex-shrink: 0;
    background: var(--ui-brand-soft); color: var(--ui-brand-dark);
    display: flex; align-items: center; justify-content: center;
}
.ui-icon svg { width: 1.1rem; height: 1.1rem; }

.ui-dot { width: .5rem; height: .5rem; border-radius: 9999px; display: inline-block; flex-shrink: 0; }

/* Action-required rows: neutral text, the coloured icon + pill carry the meaning */
html:not(.dark) .ui-alerts p.font-bold { color: var(--ui-text) !important; }
html:not(.dark) .ui-alerts p.text-xs   { color: var(--ui-muted) !important; }

/* Neutral stat tile with a coloured dot — replaces rainbow-filled tiles */
.ui-tile { background: #fafbfc; border: 1px solid var(--ui-border); border-radius: .875rem; padding: .7rem .8rem; }
.ui-tile-num   { font-size: 1.25rem; font-weight: 800; color: var(--ui-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-tile-label { display: flex; align-items: center; gap: .4rem; font-size: .6875rem; font-weight: 600; color: var(--ui-muted); margin-top: .3rem; }

/* Filter chips */
.ui-chip {
    padding: .4rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
    border: 1px solid var(--ui-border-strong); background: #fff; color: #475467; cursor: pointer;
}
.ui-chip:hover { border-color: var(--ui-brand); color: var(--ui-brand-dark); }
.ui-chip.is-active { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; }

/* ── Command palette (admin Ctrl/Cmd+K) ───────────────────────────────────── */
.cmdk-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(16, 24, 40, .45); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.cmdk { width: min(100%, 560px); background: #fff; border-radius: 1rem; box-shadow: var(--ui-shadow-md); overflow: hidden; border: 1px solid var(--ui-border); }
.cmdk-input { width: 100%; border: none; border-bottom: 1px solid var(--ui-border); padding: 1rem 1.25rem; font-size: .95rem; outline: none; background: transparent; color: var(--ui-text); }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: .4rem; }
.cmdk-item { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .6rem .75rem; border-radius: .625rem; border: none; background: none; cursor: pointer; font-size: .85rem; color: #344054; }
.cmdk-item svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--ui-faint); }
.cmdk-item small { margin-left: auto; font-size: .68rem; color: var(--ui-faint); }
.cmdk-item.is-active { background: var(--ui-brand-soft); color: var(--ui-brand-dark); }
.cmdk-item.is-active svg { color: var(--ui-brand-dark); }
.cmdk-empty { padding: 1.5rem; text-align: center; font-size: .85rem; color: var(--ui-faint); }
.cmdk-hint { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--ui-border); font-size: .68rem; color: var(--ui-faint); background: #fafbfc; }
kbd.ui-kbd { font-family: inherit; font-size: .65rem; font-weight: 600; padding: .1rem .35rem; border: 1px solid var(--ui-border-strong); border-bottom-width: 2px; border-radius: .35rem; background: #fff; color: var(--ui-muted); }

/* ── Dark-mode counterparts ───────────────────────────────────────────────── */
.dark .ui-kpi, .dark .ui-tile { background: #1a1a1a; border-color: #262626; box-shadow: none; }
.dark .ui-kpi.ui-kpi--brand { background: linear-gradient(135deg, #4f7a2a 0%, #3a5c1a 100%); border-color: transparent; }
.dark .ds-feedback-btn { background: rgba(93, 138, 50, .12); border-color: rgba(93, 138, 50, .3); color: #9fcf5c; }
.dark .ds-feedback-btn:hover { background: rgba(93, 138, 50, .2); }
.dark .ui-kpi-value, .dark .ui-tile-num { color: #f5f5f5; }
.dark .ui-kpi-label, .dark .ui-tile-label { color: #a3a3a3; }
.dark .ui-icon { background: rgba(93, 138, 50, .18); color: #9fcf5c; }
.dark .ui-chip { background: #1a1a1a; border-color: #2a2a2a; color: #d4d4d4; }
.dark .ui-chip.is-active { background: var(--ui-brand); color: #fff; border-color: var(--ui-brand); }
.dark .cmdk { background: #111; border-color: #262626; }
.dark .cmdk-input { color: #f5f5f5; border-bottom-color: #262626; }
.dark .cmdk-item { color: #d4d4d4; }
.dark .cmdk-item.is-active { background: rgba(93, 138, 50, .18); color: #9fcf5c; }
.dark .cmdk-hint { background: #0d0d0d; border-top-color: #262626; }

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