/* ===========================================================================
   SRK Sweets ERP — Global design system (additive layer)

   Single source of truth for the shared UI primitives that should look the same
   across the whole project:
     1. Form controls (inputs / selects / textareas)
     2. The calendar / date box  (native popup kept, box tokenised)
     3. The themed dropdown menu  (.global-dropdown, enhanced by dropdown-theme.js)
     4. Data tables

   This file is loaded LAST, so:
     - its :root tokens are available to every stylesheet, and
     - its component styles win on specificity ties (additive, no legacy CSS is
       removed — a screen with its own more-specific rules still wins).

   The token values are derived from the existing themed dropdown so nothing
   regresses. See DESIGN_SYSTEM.md for how to use these.
   =========================================================================== */

:root {
  /* ---- Form controls -------------------------------------------------- */
  --control-h: 42px;
  --control-radius: 8px;
  --control-border-color: #cbd5e1;
  --control-border: 1px solid var(--control-border-color);
  --control-bg: #ffffff;
  --control-color: var(--ink, #172333);
  --control-muted: var(--muted, #667485);
  --control-pad-y: 9px;
  --control-pad-x: 12px;
  --control-font-size: 14px;
  --control-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --control-focus-border: var(--brand, #aa3232);
  --control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand, #aa3232) 16%, transparent);
  --control-disabled-bg: #f1f5f9;

  /* ---- Data tables ---------------------------------------------------- */
  --table-radius: 10px;
  --table-border-color: #e6ebf2;
  --table-header-bg: #f8fafc;
  --table-header-color: #475569;
  --table-row-border: #eef2f7;
  --table-row-hover: #f8fbff;
  --table-cell-pad-y: 10px;
  --table-cell-pad-x: 12px;
  --table-font-size: 13px;
}

/* ---------------------------------------------------------------------------
   1. Opt-in control classes — use these on any new field for the standard look
   --------------------------------------------------------------------------- */
.ui-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
}
.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--control-h);
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--control-color);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-size: var(--control-font-size);
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--control-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ui-textarea { min-height: 84px; resize: vertical; }
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: 0;
  border-color: var(--control-focus-border);
  box-shadow: var(--control-focus-ring);
}
.ui-input[readonly],
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
  background: var(--control-disabled-bg);
  color: var(--control-muted);
}

/* ---------------------------------------------------------------------------
   2. Calendar / date box  — native date & time inputs otherwise render with a
   harsh square browser border that clashes with every themed control. Give them
   the smooth, tokenised box everywhere (the popup itself stays the browser's
   native calendar). Low specificity: any screen with its own field styling wins.
   --------------------------------------------------------------------------- */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  min-height: var(--control-h);
  border: var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--control-color);
  padding: var(--control-pad-y) var(--control-pad-x);
  box-sizing: border-box;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Fill naked text-family inputs that would otherwise fall back to the browser
   default border. Low specificity, so styled inputs keep their own look. */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
input:not([type]) {
  border-radius: var(--control-radius);
}

/* ---------------------------------------------------------------------------
   3. Themed dropdown menu — .global-dropdown (auto-applied to every <select> by
   dropdown-theme.js). It is already the token look; here we only pin its height
   and focus ring to the shared tokens so dropdowns match inputs exactly.
   --------------------------------------------------------------------------- */
.global-dropdown-button {
  min-height: var(--control-h);
  border-radius: var(--control-radius);
  border-color: var(--control-border-color);
}
.global-dropdown.open .global-dropdown-button,
.global-dropdown-button:focus-visible {
  border-color: var(--control-focus-border);
  box-shadow: var(--control-focus-ring);
}

/* ---------------------------------------------------------------------------
   4. Data tables — the shared table() builder already wraps every table in
   .smart-table-shell. Use .ui-table on any hand-written table for the same look.
   --------------------------------------------------------------------------- */
.ui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--table-border-color);
  border-radius: var(--table-radius);
}
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  color: var(--control-color);
}
.ui-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-header-bg);
  color: var(--table-header-color);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--table-border-color);
}
.ui-table tbody td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--table-row-hover); }
.ui-table .right,
.ui-table .num,
.ui-table td.right,
.ui-table th.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}