/* Zaloona design system — tokens and components (from the Zaloona design files). */

:root, [data-theme="light"] {
  --primary: #874DB8;
  --primary-dark: #6B3A96;
  --primary-light: #A66DD0;
  --primary-soft: #F0E4F8;
  --on-primary: #FFFFFF;
  --background: #FAF9FC;
  --surface: #FFFFFF;
  --warm-accent: #F7E8E8;
  --text-primary: #211A24;
  --text-secondary: #6F6875;
  --border: #E8E2EB;
  --border-strong: #8C8594;
  --success: #22A06B;
  --success-strong: #16774E;
  --success-soft: #E6F5EE;
  --warning: #D99A00;
  --warning-strong: #8A6100;
  --warning-soft: #FDF3DC;
  --error: #D64545;
  --error-strong: #B03434;
  --error-soft: #FBEAEA;
  --info: #3B82C4;
  --info-strong: #2B679F;
  --info-soft: #E8F1FA;
  --link: var(--primary);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px #211a240d;
  --shadow-sm: 0 1px 3px #211a2414, 0 1px 2px #211a240a;
  --shadow-md: 0 4px 12px -2px #211a2414, 0 2px 4px #211a240a;
  --shadow-lg: 0 16px 40px -8px #211a2426, 0 4px 8px #211a240d;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #874db8;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-sans); font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; }
.h4 { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.stat { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.button { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.overline { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }


body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 22px; background: var(--background); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* Button */
.zl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.zl-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.zl-btn:disabled { opacity: .45; cursor: not-allowed; }
.zl-btn-sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; }
.zl-btn-lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: 15px; }
.zl-btn-block { display: flex; width: 100%; }
.zl-btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-xs); }
.zl-btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.zl-btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.zl-btn-secondary:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-dark); }
.zl-btn-ghost { background: transparent; color: var(--text-primary); }
.zl-btn-ghost:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-dark); }
.zl-btn-danger { background: var(--surface); color: var(--error-strong); border-color: var(--error); }
.zl-btn-danger:hover:not(:disabled) { background: var(--error-soft); }

/* Field (Input, Select) */
.zl-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.zl-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.zl-req { color: var(--error-strong); margin-left: 2px; }
.zl-control { box-sizing: border-box; width: 100%; height: var(--control-md); padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; }
.zl-control::placeholder { color: var(--text-secondary); }
.zl-control:hover:not(:disabled) { border-color: var(--primary-light); }
.zl-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.zl-control:disabled { background: var(--background); color: var(--text-secondary); cursor: not-allowed; }
.zl-control[aria-invalid="true"] { border-color: var(--error); }
.zl-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236F6875' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
/* Select (custom listbox) */
.zl-sel { position: relative; min-width: 0; }
.zl-sel-trigger { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); text-align: left; cursor: pointer; }
.zl-sel-sm { height: 36px; padding-left: var(--space-3); font-size: 13px; }
.zl-sel-trigger.is-open { border-color: var(--primary); box-shadow: var(--focus-ring); }
.zl-sel-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.zl-sel-value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-sel-trigger.is-placeholder .zl-sel-value { color: var(--text-secondary); }
.zl-sel-lead { display: inline-flex; color: var(--text-secondary); }
.zl-sel-chev { flex: none; color: var(--text-secondary); transition: transform .2s; }
.zl-sel-trigger.is-open .zl-sel-chev { transform: rotate(180deg); color: var(--primary); }
.zl-sel-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 80; box-sizing: border-box; width: 100%; min-width: 180px; max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); font-family: var(--font-sans); animation: zl-pop .12s ease-out; }
.zl-sel-menu.is-top { top: auto; bottom: calc(100% + 6px); }
.zl-sel-menu.is-right { left: auto; right: 0; }
@keyframes zl-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.zl-sel-opt { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 8px 10px 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--text-primary); cursor: pointer; }
.zl-sel-opt.is-active { background: var(--background); }
.zl-sel-opt.is-selected { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.zl-sel-opt.is-disabled { color: var(--border-strong); cursor: not-allowed; }
.zl-sel-opt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.zl-sel-opt-hint { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary); }
.zl-sel-check { flex: none; color: var(--primary); }
.zl-sel-menu::-webkit-scrollbar { width: 6px; } .zl-sel-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
.zl-hint { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.zl-hint-error { color: var(--error-strong); }

/* Badge */
.zl-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--background); color: var(--text-secondary); border: 1px solid var(--border); }
.zl-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zl-badge-brand { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.zl-badge-success { background: var(--success-soft); color: var(--success-strong); border-color: transparent; }
.zl-badge-warning { background: var(--warning-soft); color: var(--warning-strong); border-color: transparent; }
.zl-badge-error { background: var(--error-soft); color: var(--error-strong); border-color: transparent; }
.zl-badge-info { background: var(--info-soft); color: var(--info-strong); border-color: transparent; }

/* Card */
.zl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.zl-card-hover { transition: box-shadow .2s, transform .2s; }
.zl-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.zl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.zl-card-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.zl-card-sub { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.zl-card-body { padding: var(--space-6); }
.zl-card-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--background); }

/* Alert */
.zl-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid transparent; font-size: 14px; line-height: 22px; }
.zl-alert-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.zl-alert-title { margin: 0; font-weight: 600; }
.zl-alert-text { margin: 0; color: var(--text-primary); }
.zl-alert-info { background: var(--info-soft); border-color: #3b82c433; }
.zl-alert-info .zl-alert-icon { color: var(--info); } .zl-alert-info .zl-alert-title { color: var(--info-strong); }
.zl-alert-success { background: var(--success-soft); border-color: #22a06b33; }
.zl-alert-success .zl-alert-icon { color: var(--success); } .zl-alert-success .zl-alert-title { color: var(--success-strong); }
.zl-alert-warning { background: var(--warning-soft); border-color: #d99a0040; }
.zl-alert-warning .zl-alert-icon { color: var(--warning); } .zl-alert-warning .zl-alert-title { color: var(--warning-strong); }
.zl-alert-error { background: var(--error-soft); border-color: #d6454533; }
.zl-alert-error .zl-alert-icon { color: var(--error); } .zl-alert-error .zl-alert-title { color: var(--error-strong); }

/* Table */
.zl-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
.zl-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.zl-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); background: var(--background); border-bottom: 1px solid var(--border); white-space: nowrap; }
.zl-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-primary); }
.zl-table tr:last-child td { border-bottom: 0; }
.zl-table tbody tr:hover td { background: #f0e4f866; }
.zl-table .zl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabs */
.zl-tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-md); }
.zl-tab { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; height: var(--control-sm); padding: 0 var(--space-4); border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color .15s, color .15s; }
.zl-tab:hover { color: var(--text-primary); }
.zl-tab[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.zl-tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }