/**
 * Workzuite Unified Design System v1.1
 * /assets/css/wz-design-system.css
 * 
 * Source of truth: design-review.html (signed off 20 Feb 2026)
 * Sections: Tokens · Buttons · Cards · Forms · Tables · Badges ·
 *           Alerts · Tabs · Avatars · Toggles · Modals · Empty States ·
 *           Typography · Financial Docs · Backwards Compat Aliases
 */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --wz-primary:        #017AE4;
  --wz-primary-dark:   #0165CC;
  --wz-secondary:      #67B247;
  --wz-secondary-dark: #4F9433;
  --wz-alt:            #0E2340;
  --wz-error:          #EF4444;
  --wz-success:        #16A34A;
  --wz-warning:        #D97706;
  --wz-info:           #0284C7;

  --text-primary:    #0F172A;
  --text-secondary:  #334155;
  --text-muted:      #64748B;
  --text-faint:      #94A3B8;

  --surface:         #FFFFFF;
  --bg-page:         #F5F7FA;
  --bg-subtle:       #F8FAFC;
  --border:          #E8ECF1;
  --border-subtle:   #F1F5F9;
  --border-input:    #E2E8F0;

  --card-radius:  16px;
  --btn-radius:   5px;
  --input-radius: 8px;
  --modal-radius: 0px;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }

/* Custom scrollbar */
.wz-scrollbar::-webkit-scrollbar { width: 4px; }
.wz-scrollbar::-webkit-scrollbar-track { background: transparent; }
.wz-scrollbar::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 4px; }
.wz-scrollbar:hover::-webkit-scrollbar-thumb { background: #CBD5E1; }

/* =========================================================
   COMPONENTS — exact approved spec from design-review.html
   ========================================================= */
.wz-btn-primary, .wz-btn-success, .wz-btn-secondary,
.wz-btn-ghost, .wz-btn-danger, .wz-btn-warning, .wz-btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 40px; padding: 0 18px;
  border-radius: var(--btn-radius); font-size: 13.5px; font-weight: 600;
  font-family: inherit; letter-spacing: 0.01em; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap; text-decoration: none; outline: none;
}
.wz-btn-primary { background: var(--wz-primary); color: #fff; border-color: var(--wz-primary); }
.wz-btn-primary:hover { background: #0165CC; border-color: #0165CC; }
.wz-btn-success { background: var(--wz-secondary); color: #fff; border-color: var(--wz-secondary); }
.wz-btn-success:hover { background: #4F9433; border-color: #4F9433; }
.wz-btn-secondary { background: #fff; color: var(--text-secondary); border-color: #CBD5E1; }
.wz-btn-secondary:hover { background: #F1F5F9; color: var(--text-primary); border-color: #94A3B8; }
.wz-btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.wz-btn-ghost:hover { background: #EDF0F5; color: var(--text-secondary); }
.wz-btn-danger { background: var(--wz-error); color: #fff; border-color: var(--wz-error); }
.wz-btn-danger:hover { background: #C81E1E; border-color: #C81E1E; }
.wz-btn-warning { background: #F59E0B; color: #fff; border-color: #F59E0B; }
.wz-btn-warning:hover { background: #D97706; }
.wz-btn-dark { background: var(--wz-alt); color: #fff; border-color: var(--wz-alt); }
.wz-btn-dark:hover { background: #07152A; }
.wz-btn-primary-outline {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--btn-radius);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--wz-primary); border: 1.5px solid var(--wz-primary);
  transition: background 0.12s, color 0.12s;
}
.wz-btn-primary-outline:hover { background: var(--wz-primary); color: #fff; }
.wz-btn-danger-outline {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--btn-radius);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--wz-error); border: 1.5px solid var(--wz-error);
  transition: background 0.12s, color 0.12s;
}
.wz-btn-danger-outline:hover { background: var(--wz-error); color: #fff; }

.wz-btn-lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: 6px; }
.wz-btn-sm { height: 33px; padding: 0 14px; font-size: 12.5px; border-radius: 5px; }
.wz-btn-xs { height: 27px; padding: 0 10px; font-size: 12px; font-weight: 500; border-radius: 4px; }

.wz-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: var(--btn-radius);
  background: #fff; border: 1.5px solid #CBD5E1; color: var(--text-muted);
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-size: 14px;
}
.wz-btn-icon:hover { background: #F1F5F9; color: var(--text-primary); border-color: #94A3B8; }

.wz-btn-group { display: inline-flex; border-radius: var(--btn-radius); overflow: hidden; border: 1.5px solid #CBD5E1; }
.wz-btn-group > * { border-radius: 0; border: none; border-right: 1.5px solid #CBD5E1; background: #fff; color: var(--text-secondary); height: 38px; padding: 0 14px; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.12s, color 0.12s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; box-sizing: border-box; }
.wz-btn-group > *:last-child { border-right: none; }
.wz-btn-group > *:hover { background: #F1F5F9; color: var(--text-primary); }
.wz-btn-group > *.active { background: var(--wz-primary); color: #fff; }

.wz-btn-split { display: inline-flex; border-radius: var(--btn-radius); overflow: hidden; }
.wz-btn-split-main { background: var(--wz-primary); color: #fff; border: none; border-radius: 0; padding: 0 18px; height: 40px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.12s; }
.wz-btn-split-main:hover { background: #0165CC; }
.wz-btn-split-arrow { background: #0165CC; color: #fff; border: none; border-left: 1.5px solid rgba(255,255,255,0.2); width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; }

/* disabled */
button:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* =========================================================
   CARDS
   ========================================================= */
.wz-card { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 24px 28px; position: relative; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; }
.wz-card-metric { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 22px 24px; position: relative; overflow: hidden; }
.wz-card-metric-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
.wz-card-metric-value { font-size: 30px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.wz-card-metric-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 10px; }
.trend-up { color: #16A34A; } .trend-down { color: var(--wz-error); }
.wz-card-metric-accent { position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 50%; opacity: 0.06; }
.wz-card-compact { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.wz-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); border-color: #D4D9E4; }
.wz-card-clickable { cursor: pointer; }
.wz-card-selected { border-color: var(--wz-primary) !important; box-shadow: 0 0 0 3px rgba(1,122,228,0.12) !important; }

/* =========================================================
   FORMS
   ========================================================= */
.wz-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.wz-label-required::after { content: ' *'; color: var(--wz-error); }
.wz-input, .wz-select, .wz-textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--border-input); border-radius: var(--input-radius);
  background: #F8FAFC; font-size: 13.5px; font-weight: 400;
  color: var(--text-primary); font-family: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.wz-textarea { height: auto; padding: 10px 12px; resize: vertical; }
.wz-input:focus, .wz-select:focus, .wz-textarea:focus { border-color: var(--wz-primary); background: #fff; box-shadow: 0 0 0 3px rgba(1,122,228,0.1); }
.wz-input::placeholder { color: var(--text-faint); }
.wz-input.error { border-color: var(--wz-error); background: #FEF2F2; }
.wz-input.success { border-color: var(--wz-success); }
.wz-input:disabled { opacity: 0.5; cursor: not-allowed; }
.wz-field { margin-bottom: 16px; }
.wz-field-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.wz-field-error { font-size: 12px; color: var(--wz-error); margin-top: 5px; font-weight: 500; }
.wz-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.wz-input-wrap { position: relative; }
.wz-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; }
.wz-input-wrap .wz-input { padding-left: 36px; }
.wz-input-wrap .wz-input-icon-right { left: auto; right: 12px; }
.wz-input-wrap .wz-input.has-right-icon { padding-right: 36px; }

/* =========================================================
   TABLE
   ========================================================= */
.wz-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.wz-table { width: 100%; text-align: left; border-collapse: collapse; }
.wz-table thead tr { background: #EBEEF4; border-bottom: 2px solid #D4D9E4; }
.wz-table thead th { padding: 11px 16px; font-size: 11px; font-weight: 700; color: #5A6478; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.wz-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #F4F6FA; border-bottom: 1px solid var(--border); }
.wz-table tbody tr { background: #fff; border-bottom: 1px solid var(--border-subtle); transition: background 0.1s; }
.wz-table tbody tr:last-child { border-bottom: none; }
.wz-table tbody tr:hover { background: #F8FAFD; }
.wz-table tbody td { padding: 14px 16px; font-size: 13.5px; color: var(--text-secondary); }
.wz-pagination { display: flex; align-items: center; gap: 4px; padding: 14px 4px; font-size: 13px; }
.wz-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background 0.12s, color 0.12s; }
.wz-page-btn:hover { background: #E8ECF2; color: var(--text-primary); }
.wz-page-btn.active { background: var(--wz-primary); color: #fff; }

/* =========================================================
   BADGES & PILLS
   ========================================================= */
.wz-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.wz-badge-success  { background: #DCFCE7; color: #15803D; }
.wz-badge-error    { background: #FEE2E2; color: #DC2626; }
.wz-badge-warning  { background: #FEF3C7; color: #92400E; }
.wz-badge-info     { background: #DBEAFE; color: #1D4ED8; }
.wz-badge-neutral  { background: #F1F5F9; color: #475569; }
.wz-badge-primary  { background: #EFF6FF; color: #1D4ED8; }
.wz-badge-purple   { background: #F3E8FF; color: #7E22CE; }
.wz-badge-orange   { background: #FFF7ED; color: #C2410C; }
.wz-badge-pink     { background: #FDF2F8; color: #9D174D; }
.wz-badge-teal     { background: #F0FDFA; color: #0D9488; }
.wz-badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.wz-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #F1F5F9; color: var(--text-muted); }
.wz-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--wz-error); color: #fff; }

/* =========================================================
   ALERTS
   ========================================================= */
.wz-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; border: 1px solid; margin-bottom: 12px; }
.wz-alert-icon { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.wz-alert-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.wz-alert-body  { font-size: 13px; font-weight: 400; }
.wz-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.wz-alert-error   { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }
.wz-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.wz-alert-info    { background: #F0F9FF; border-color: #BAE6FD; color: #0369A1; }

/* =========================================================
   TABS
   ========================================================= */
.wz-tabs-pill { display: flex; align-items: center; gap: 4px; background: #F1F5F9; border-radius: 8px; padding: 4px; }
.wz-tab-pill { height: 32px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); border: none; background: transparent; cursor: pointer; transition: all 0.15s; font-family: inherit; white-space: nowrap; }
.wz-tab-pill.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.wz-tab-pill:hover:not(.active) { color: var(--text-secondary); }
.wz-tabs-underline { display: flex; align-items: center; gap: 0; border-bottom: 2px solid var(--border); }
.wz-tab-underline { height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; font-family: inherit; white-space: nowrap; }
.wz-tab-underline.active { color: var(--wz-primary); border-bottom-color: var(--wz-primary); }
.wz-tab-underline:hover:not(.active) { color: var(--text-secondary); }

/* =========================================================
   AVATARS
   ========================================================= */
.wz-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: inherit; color: #fff; flex-shrink: 0; }
.wz-avatar-xs  { width: 24px; height: 24px; font-size: 10px; }
.wz-avatar-sm  { width: 32px; height: 32px; font-size: 12px; }
.wz-avatar-md  { width: 40px; height: 40px; font-size: 14px; }
.wz-avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.wz-avatar-xl  { width: 64px; height: 64px; font-size: 20px; }
.wz-avatar-blue   { background: #3B82F6; }
.wz-avatar-green  { background: #16A34A; }
.wz-avatar-purple { background: #7C3AED; }
.wz-avatar-indigo { background: #6366F1; }
.wz-avatar-orange { background: #EA580C; }
.wz-avatar-red    { background: #DC2626; }
.wz-avatar-teal   { background: #0D9488; }
.wz-avatar-pink   { background: #DB2777; }
.wz-avatar-square { border-radius: 8px; }
.wz-avatar-group { display: flex; }
.wz-avatar-group .wz-avatar { border: 2px solid #fff; margin-left: -8px; }
.wz-avatar-group .wz-avatar:first-child { margin-left: 0; }

/* =========================================================
   TOGGLE
   ========================================================= */
.wz-toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wz-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.wz-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.wz-toggle-track { position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px; transition: background 0.2s; }
.wz-toggle input:checked + .wz-toggle-track { background: var(--wz-primary); }
.wz-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.wz-toggle input:checked ~ .wz-toggle-thumb { transform: translateX(20px); }
.wz-toggle-label { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }

/* =========================================================
   SECTION TITLE
   ========================================================= */
.wz-section-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; }
.wz-section-title::before { content: ''; width: 3px; height: 14px; background: var(--wz-primary); border-radius: 2px; flex-shrink: 0; }

/* =========================================================
   MODAL
   ========================================================= */
.wz-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; }
.wz-modal { background: #fff; border-radius: 0; width: 540px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.wz-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.wz-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.wz-modal-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background 0.12s; }
.wz-modal-close:hover { background: #F1F5F9; color: var(--text-primary); }
.wz-modal-body { padding: 24px; }
.wz-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* =========================================================
   FINANCIAL DOCUMENT ELEMENTS
   ========================================================= */
.wz-doc { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); max-width: 760px; overflow: hidden; }
.wz-doc-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 32px 36px 24px; border-bottom: 1px solid var(--border); background: #FAFBFD; }
.wz-doc-body { padding: 28px 36px; }
.wz-doc-title { font-size: 24px; font-weight: 800; color: var(--wz-alt); letter-spacing: -0.02em; text-transform: uppercase; }
.wz-doc-number { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 5px; }
.wz-doc-company-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.wz-doc-company-detail { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-top: 4px; }
.wz-doc-meta-row { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.wz-doc-meta-cell { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); }
.wz-doc-meta-cell:last-child { border-right: none; }
.wz-doc-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 5px; }
.wz-doc-meta-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wz-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 0; }
.wz-doc-table thead tr { background: var(--wz-alt); color: #fff; }
.wz-doc-table thead th { padding: 10px 14px; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wz-doc-table thead th:first-child { padding-left: 18px; }
.wz-doc-table thead th.right, .wz-doc-table tbody td.right { text-align: right; }
.wz-doc-table tbody tr { border-bottom: 1px solid #EEF0F4; }
.wz-doc-table tbody tr:nth-child(even) { background: #FAFBFD; }
.wz-doc-table tbody td { padding: 12px 14px; color: var(--text-secondary); vertical-align: top; }
.wz-doc-table tbody td:first-child { padding-left: 18px; }
.item-name { font-weight: 600; color: var(--text-primary); }
.item-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.item-amount { font-weight: 600; color: var(--text-primary); }
.wz-doc-totals { margin-left: auto; width: 300px; margin-top: 0; }
.wz-doc-totals-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; font-size: 13px; border-bottom: 1px solid #EEF0F4; }
.wz-doc-totals-row:last-of-type:not(.grand-total) { border-bottom: none; }
.wz-doc-totals-row.discount { color: var(--wz-error); }
.wz-doc-totals-row.grand-total { background: var(--wz-alt); color: #fff; font-size: 14px; font-weight: 700; border-radius: 0 0 8px 8px; padding: 13px 14px; border-bottom: none; }
.wz-doc-totals-label { font-weight: 500; }
.wz-doc-totals-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.wz-doc-amount-due { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #011E4A, #0E2340); border-radius: 12px; padding: 20px 26px; margin-bottom: 24px; }
.wz-doc-amount-due-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 5px; }
.wz-doc-amount-due-value { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wz-doc-amount-due-currency { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.5); margin-right: 4px; vertical-align: super; }
.wz-doc-amount-due-meta { font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 5px; }
.wz-doc-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.wz-doc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.wz-doc-status.draft    { background: #F1F5F9; color: #64748B; }
.wz-doc-status.sent     { background: #EFF6FF; color: #1D4ED8; }
.wz-doc-status.partial  { background: #FFFBEB; color: #B45309; }
.wz-doc-status.paid     { background: #F0FDF4; color: #15803D; }
.wz-doc-status.overdue  { background: #FEF2F2; color: #DC2626; }
.wz-doc-status.void     { background: #F8FAFC; color: #94A3B8; }
.wz-aging-strip { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wz-aging-cell { padding: 14px 16px; border-right: 1px solid var(--border); text-align: center; }
.wz-aging-cell:last-child { border-right: none; }
.wz-aging-cell-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 7px; }
.wz-aging-cell-value { font-size: 20px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wz-aging-cell.overdue-30 .wz-aging-cell-value { color: #D97706; }
.wz-aging-cell.overdue-60 .wz-aging-cell-value { color: #DC2626; }
.wz-aging-cell.overdue-90 .wz-aging-cell-value { color: #991B1B; }
.wz-aging-cell-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.wz-fin-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px 22px; position: relative; overflow: hidden; }
.wz-fin-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.wz-fin-kpi.receivable::before { background: var(--wz-primary); }
.wz-fin-kpi.payable::before    { background: var(--wz-error); }
.wz-fin-kpi.overdue::before    { background: #F59E0B; }
.wz-fin-kpi.income::before     { background: var(--wz-success); }
.wz-fin-kpi-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.wz-fin-kpi-value { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wz-fin-kpi-currency { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 3px; vertical-align: super; }
.wz-fin-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.wz-fin-kpi-trend.up { color: var(--wz-success); }
.wz-fin-kpi-trend.down { color: var(--wz-error); }
.wz-currency-pair { display: flex; flex-direction: column; gap: 2px; }
.wz-currency-primary { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wz-currency-secondary { font-size: 11px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wz-currency-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-right: 3px; letter-spacing: 0.04em; }
.wz-currency-tag.usd { background: #EFF6FF; color: #1D4ED8; }
.wz-currency-tag.zig { background: #FEF9C3; color: #854D0E; }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.wz-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; }
.wz-empty-icon { width: 64px; height: 64px; border-radius: 16px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-faint); margin-bottom: 18px; }
.wz-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.wz-empty-sub { font-size: 13.5px; color: var(--text-muted); max-width: 300px; line-height: 1.6; margin-bottom: 20px; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.wz-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); }
.wz-h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.wz-h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.wz-body { font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; }
.wz-small { font-size: 12.5px; color: var(--text-muted); }
.wz-caption { font-size: 11px; color: var(--text-faint); }

/* =========================================================
   COLORS SWATCHES (preview only)
   ========================================================= */
.swatch { width: 100%; height: 56px; border-radius: 8px; display: flex; align-items: flex-end; padding: 6px 10px; }
.swatch-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.85); }
.swatch-dark .swatch-label { color: rgba(0,0,0,0.5); }
.swatch-token { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 1px; }

/* =========================================================
   UTILITY
   ========================================================= */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-box { background: var(--bg-subtle); border: 1px dashed var(--border); border-radius: 10px; padding: 24px; display: flex; align-items: center; justify-content: center; }
.divider { height: 1px; background: var(--border-subtle); margin: 24px 0; }
hr.wz-hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ── Additional badge aliases for CRM/Books statuses ── */
.wz-badge-paid      { background: #DCFCE7; color: #15803D; }
.wz-badge-won       { background: #DCFCE7; color: #15803D; }
.wz-badge-active    { background: #DCFCE7; color: #15803D; }
.wz-badge-lost      { background: #FEE2E2; color: #DC2626; }
.wz-badge-overdue   { background: #FEE2E2; color: #DC2626; }
.wz-badge-danger    { background: #FEE2E2; color: #DC2626; }
.wz-badge-draft     { background: #FEF3C7; color: #92400E; }
.wz-badge-pending   { background: #FEF3C7; color: #92400E; }
.wz-badge-sent      { background: #DBEAFE; color: #1D4ED8; }
.wz-badge-open      { background: #DBEAFE; color: #1D4ED8; }
.wz-badge-qualified { background: #EFF6FF; color: #1D4ED8; }
.wz-badge-contacted { background: #EFF6FF; color: #1D4ED8; }
.wz-badge-new       { background: #EFF6FF; color: #1D4ED8; }
.wz-badge-void      { background: #F1F5F9; color: #475569; }
.wz-badge-cancelled { background: #F1F5F9; color: #475569; }
.wz-badge-archived  { background: #F1F5F9; color: #475569; }
.wz-badge-converted { background: #DCFCE7; color: #15803D; }
.wz-badge-enterprise{ background: #F3E8FF; color: #7E22CE; }
.wz-badge-beta      { background: #FFF7ED; color: #C2410C; }


/* =========================================================
   FINANCIAL KPI CARDS (Books dashboard)
   ========================================================= */
.wz-fin-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 22px 24px; position: relative; overflow: hidden; }
.wz-fin-kpi-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
.wz-fin-kpi-value { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.wz-fin-kpi-currency { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-right: 4px; vertical-align: super; }
.wz-fin-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 10px; }
.wz-fin-kpi-trend.up   { color: var(--wz-success); }
.wz-fin-kpi-trend.down { color: var(--wz-error); }
.wz-fin-kpi.receivable::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wz-primary); }
.wz-fin-kpi.payable::before    { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wz-error); }
.wz-fin-kpi.overdue::before    { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #F59E0B; }
.wz-fin-kpi.income::before     { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wz-success); }

/* Dual currency */
.wz-currency-pair { display: flex; flex-direction: column; gap: 2px; }
.wz-currency-primary { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wz-currency-secondary { font-size: 11px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wz-currency-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-right: 3px; letter-spacing: 0.04em; }
.wz-currency-tag.usd { background: #EFF6FF; color: #1D4ED8; }
.wz-currency-tag.zig { background: #FEF9C3; color: #854D0E; }

/* Aging strip */
.wz-aging-strip { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wz-aging-cell { padding: 16px 18px; border-right: 1px solid var(--border); text-align: center; }
.wz-aging-cell:last-child { border-right: none; }
.wz-aging-cell-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.wz-aging-cell-value { font-size: 20px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wz-aging-cell.overdue-30 .wz-aging-cell-value { color: #D97706; }
.wz-aging-cell.overdue-60 .wz-aging-cell-value { color: #DC2626; }
.wz-aging-cell.overdue-90 .wz-aging-cell-value { color: #991B1B; }
.wz-aging-cell-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Doc paid stamp */
.wz-doc-paid-stamp { position: absolute; top: 32px; right: 40px; border: 3px solid var(--wz-success); border-radius: 6px; padding: 6px 16px; color: var(--wz-success); font-size: 22px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-12deg); opacity: 0.4; pointer-events: none; }

/* =========================================================
   BACKWARDS COMPATIBILITY ALIASES
   Remove page-by-page as migration completes
   ========================================================= */

/* Old card class */
.dc, .card-s1, .card-s2, .card-s3 {
  background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 24px 28px; position: relative; overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dc:hover, .card-s1:hover, .card-s2:hover, .card-s3:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); border-color: #D4D9E4; }

/* Old button classes */
.btn-primary, .btn-p { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--btn-radius); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid var(--wz-primary); background: var(--wz-primary); color: #fff; text-decoration: none; transition: background 0.12s; }
.btn-primary:hover, .btn-p:hover { background: #0165CC; border-color: #0165CC; }
.btn-success, .btn-s { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--btn-radius); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid var(--wz-secondary); background: var(--wz-secondary); color: #fff; text-decoration: none; transition: background 0.12s; }
.btn-success:hover, .btn-s:hover { background: #4F9433; border-color: #4F9433; }

/* Old form input */
.fi { display: block; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: var(--input-radius); font-size: 13.5px; font-weight: 500; font-family: inherit; color: var(--text-primary); background: #fff; outline: none; transition: border 0.15s, box-shadow 0.15s; }
.fi:focus { border-color: var(--wz-primary); box-shadow: 0 0 0 3px rgba(1,122,228,0.08); }
.fi::placeholder { color: #a0aec0; font-weight: 400; }
textarea.fi { height: auto; min-height: 56px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
select.fi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%238792a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 10px center; background-repeat: no-repeat; padding-right: 30px; cursor: pointer; }

/* Old label */
.fl { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.fl .req { color: var(--wz-error); }

/* Old section label */
.sec-label, .sidebar-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sec-label::before, .sidebar-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--wz-primary); flex-shrink: 0; }

/* Old progress bar */
.progress-bar-track { height: 6px; border-radius: 6px; background: #F1F5F9; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.progress-fill-blue  { background: var(--wz-primary); }
.progress-fill-green { background: var(--wz-secondary); }
.progress-fill-amber { background: #F59E0B; }
.progress-fill-red   { background: var(--wz-error); }

/* Old animation helpers */
.stagger-in { animation: wz-stagger-in 0.4s cubic-bezier(.22,1,.36,1) both; }
@keyframes wz-stagger-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.count-in { animation: wz-count-up 0.5s cubic-bezier(.22,1,.36,1) both; }
.count-in:nth-child(2) { animation-delay: 0.05s; }
.count-in:nth-child(3) { animation-delay: 0.10s; }
.count-in:nth-child(4) { animation-delay: 0.15s; }
@keyframes wz-count-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }