/* ═══════════════════════════════════════════════════════════════
   NZK DASH — Design System
   Loaded BEFORE styles.css. Provides tokens, utilities, and
   component patterns for consistent agentic development.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ DESIGN TOKENS ═══════════════
   All values live in :root in styles.css. This section documents
   the semantic intent so agents pick the right token.

   COLOUR ROLES:
   --primary (#1EDF32)      → Success, positive values, paid, CTA buttons
   --accent (#A654FF)       → Info, outstanding, sent status, secondary CTA
   --secondary (#69DAD4)    → Teal highlights, tertiary info
   --pink (#ED4AED)         → Partial payments, special badges
   --danger (#ff5252)       → Errors, overdue, destructive actions
   --warning (#ffab40)      → Expenses, caution, aging mid-range

   SURFACE HIERARCHY:
   --bg (#0a0a0a)           → Page background, input backgrounds
   --surface (#111111)      → Cards, modals, sidebar, chat bubbles
   --surface-hover (#1a1a1a)→ Hover states on surface elements
   --border (#222222)       → Default borders
   --border-focus (#1EDF32) → Focus rings (same as primary)

   TEXT HIERARCHY:
   --text (#f5f5f5)         → Primary text, headings, values
   --text-secondary (#999)  → Body text, descriptions, table cells
   --text-muted (#666)      → Labels, hints, disabled text

   GLOW (for badges/highlights — 12% opacity of parent colour):
   --primary-glow, --accent-glow, --secondary-glow, --pink-glow

   TYPOGRAPHY:
   --font-display (Space Mono) → Headings, tab titles, logo
   --font-body (DM Sans)       → Everything else

   SPACING SCALE: 4 · 8 · 10 · 12 · 16 · 20 · 24 · 28 · 32 · 40 · 48 · 60
   RADIUS SCALE:  4 · 6 · 8 · 10 · 12 · 14 · 16 · 20
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════ SPACING UTILITIES ═══════════════ */
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.p-0   { padding: 0; }
.p-8   { padding: 8px; }
.p-12  { padding: 12px; }
.p-16  { padding: 16px; }
.p-20  { padding: 20px; }

.pt-8  { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pb-12 { padding-bottom: 12px; }


/* ═══════════════ FLEX UTILITIES ═══════════════ */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.self-end      { align-self: flex-end; }
.self-start    { align-self: flex-start; }
.self-center   { align-self: center; }
.shrink-0      { flex-shrink: 0; }


/* ═══════════════ GRID UTILITIES ═══════════════ */
.grid          { display: grid; }
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3        { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.col-span-full { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}


/* ═══════════════ TYPOGRAPHY ═══════════════ */
.text-xs    { font-size: 10px; }
.text-sm    { font-size: 11px; }
.text-base  { font-size: 13px; }
.text-md    { font-size: 14px; }
.text-lg    { font-size: 16px; }
.text-xl    { font-size: 20px; }
.text-2xl   { font-size: 22px; }
.text-3xl   { font-size: 28px; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.uppercase   { text-transform: uppercase; }
.tracking    { letter-spacing: 0.5px; }
.tracking-wide { letter-spacing: 1px; }
.tracking-wider { letter-spacing: 1.5px; }
.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.6; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap      { white-space: nowrap; }


/* ═══════════════ COLOUR UTILITIES ═══════════════ */
.text-primary   { color: var(--primary); }
.text-accent    { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }
.text-pink      { color: var(--pink); }
.text-teal      { color: var(--secondary); }
.text-white     { color: var(--text); }


/* ═══════════════ BORDER UTILITIES ═══════════════ */
.border-b       { border-bottom: 1px solid var(--border); }
.border-t       { border-top: 1px solid var(--border); }


/* ═══════════════ COMPONENT: STAT CARD ═══════════════
   Usage:
   <div class="stat-card">
     <div class="stat-label">Outstanding</div>
     <div class="stat-value text-accent">$1,200.00</div>
   </div>

   Wrap in: <div class="stat-row"> for the flex container.
   ═══════════════════════════════════════════════════ */
.stat-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.stat-card {
  flex: 1; min-width: 150px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px;
}
.stat-label {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 4px;
}
.stat-value {
  font-size: 22px; font-weight: 700; color: var(--text);
}

@media (max-width: 768px) {
  .stat-row { gap: 10px; }
  .stat-card { min-width: calc(50% - 5px); }
}


/* ═══════════════ COMPONENT: PROGRESS BAR ═══════════════
   Usage:
   <div class="progress-item">
     <div class="progress-header">
       <span class="text-secondary">Label</span>
       <span class="text-white font-semibold">$500</span>
     </div>
     <div class="progress-track">
       <div class="progress-fill" style="width:40%;background:var(--primary)"></div>
     </div>
   </div>
   ═══════════════════════════════════════════════════ */
.progress-item { margin-bottom: 12px; }
.progress-header {
  display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px;
}
.progress-track {
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 3px; transition: width 0.5s;
}


/* ═══════════════ COMPONENT: OVERVIEW ROW ═══════════════
   Usage:
   <div class="overview-row">
     <span class="text-secondary">Total Paid</span>
     <span class="font-semibold text-primary">$5,000</span>
   </div>
   ═══════════════════════════════════════════════════ */
.overview-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.overview-row:last-child { border-bottom: none; }


/* ═══════════════ COMPONENT: LINE ITEM ROW ═══════════════
   For invoice/quote item editors in modals.
   Usage:
   <div class="line-item-row">
     <input class="nzk-input" style="flex:3" ...>
     <input class="nzk-input" style="flex:1" ...>
     <button class="nzk-btn btn-danger">✕</button>
   </div>
   ═══════════════════════════════════════════════════ */
.line-item-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
@media (max-width: 768px) {
  .line-item-row { flex-wrap: wrap; }
  .line-item-row .nzk-input { min-width: 60px; }
  .line-item-row .nzk-input[style*="flex:3"] { flex: 1 1 100% !important; }
}


/* ═══════════════ COMPONENT: CATEGORY BAR ═══════════════
   For expense category breakdowns.
   Usage:
   <div class="cat-bar-row">
     <span class="cat-bar-label">Software</span>
     <div class="progress-track flex-1">
       <div class="progress-fill" style="width:60%;background:var(--warning)"></div>
     </div>
     <span class="cat-bar-value">$1,200</span>
   </div>
   ═══════════════════════════════════════════════════ */
.cat-bar-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.cat-bar-label {
  width: 90px; font-size: 11px; color: var(--text-secondary);
  text-align: right; flex-shrink: 0; text-transform: capitalize;
}
.cat-bar-value {
  width: 80px; font-size: 12px; color: var(--text); font-weight: 600;
}


/* ═══════════════ COMPONENT: BULK ACTION BAR ═══════════════
   Usage:
   <div class="bulk-bar">
     <span>3 selected</span>
     <button class="nzk-btn btn-primary">Mark Paid</button>
   </div>
   ═══════════════════════════════════════════════════ */
.bulk-bar {
  display: none; align-items: center; gap: 12px;
  margin-bottom: 12px; padding: 10px 16px;
  background: var(--primary-glow); border: 1px solid rgba(30, 223, 50, 0.2);
  border-radius: 10px; font-size: 13px;
}
.bulk-bar.active { display: flex; }


/* ═══════════════ COMPONENT: PAYMENT ROW ═══════════════
   For payment history in invoice detail.
   Usage:
   <div class="payment-row">
     <div>...</div>
     <div>$500.00</div>
   </div>
   ═══════════════════════════════════════════════════ */
.payment-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.payment-row:last-child { border-bottom: none; }


/* ═══════════════ COMPONENT: MINI TAG ═══════════════
   Small inline tags (recurring icon, auto label, etc.)
   Usage:
   <span class="mini-tag mini-tag-primary">↻</span>
   <span class="mini-tag mini-tag-muted">auto</span>
   ═══════════════════════════════════════════════════ */
.mini-tag {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  vertical-align: middle; display: inline-block;
}
.mini-tag-primary { background: var(--primary); color: #fff; }
.mini-tag-muted   { background: var(--surface-hover); color: var(--text-muted); }
.mini-tag-accent  { background: var(--accent); color: #fff; }
.mini-tag-warning { background: rgba(255,171,64,0.15); color: var(--warning); }
.mini-tag-pink    { background: rgba(237,74,237,0.15); color: var(--pink); }


/* ═══════════════ COMPONENT: CATEGORY PILL ═══════════════
   Usage:
   <span class="cat-pill">Software</span>
   ═══════════════════════════════════════════════════ */
.cat-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 8px;
  background: rgba(255, 171, 64, 0.1); color: var(--warning);
}


/* ═══════════════ COMPONENT: CHAT FILE UPLOAD ═══════════════
   For the agent file attachment button.
   ═══════════════════════════════════════════════════ */
.chat-attach-btn {
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: none; color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.chat-attach-btn:hover { border-color: var(--primary); color: var(--primary); }


/* ═══════════════ ROLE-BASED VISIBILITY ═══════════════ */
.sidebar-nav, .main-content { visibility: hidden; }
.role-ready .sidebar-nav, .role-ready .main-content { visibility: visible; }
.hidden { display: none !important; }
.visible { display: block; }


/* ═══════════════ AGENT RULES FOR THIS FILE ═══════════════

   WHEN BUILDING NEW FEATURES:
   1. Never use inline styles for layout — use flex/grid utilities
   2. Never hardcode colours — use text-* utilities or CSS variables
   3. Never hardcode font-size — use text-* scale
   4. Never hardcode spacing — use gap-*, mb-*, mt-*, p-* utilities
   5. Use stat-card/stat-row for any KPI display
   6. Use progress-item for any bar chart
   7. Use overview-row for any key-value list
   8. Use line-item-row for editable item lists
   9. Use mini-tag for small inline labels
   10. Use cat-pill for category badges
   11. Use bulk-bar for selection action bars
   12. Use payment-row for transaction lists

   WHEN REFACTORING:
   - Replace inline style="display:flex;gap:16px;..." with class="flex gap-16 ..."
   - Replace inline style="font-size:11px;color:var(--text-muted);..." with class="text-sm text-muted uppercase tracking-wide"
   - Replace inline stat card markup with stat-card component
   - Replace inline progress bars with progress-item component

   ═══════════════════════════════════════════════════════════════ */