/* ============================================================
   SALONIQA — Design System v1.0 · COMPONENTS
   Reusable, prefixed `.sq-`. Built on tokens.css.
   ============================================================ */

/* ── Icon helper ── */
.sq-ico{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.sq-ico.sm{ width:16px; height:16px; stroke-width:1.7; }
.sq-ico.lg{ width:24px; height:24px; }

/* ── Buttons ── */
.sq-btn{
  --_bg:var(--sq-emerald); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sq-2);
  height:44px; padding-inline:var(--sq-5); border-radius:var(--sq-r-sm);
  font-size:var(--sq-fs-body); font-weight:var(--sq-fw-semi); white-space:nowrap;
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
  cursor:pointer; transition:transform var(--sq-dur-1) var(--sq-ease), box-shadow var(--sq-dur-2) var(--sq-ease), background var(--sq-dur-2) var(--sq-ease);
}
.sq-btn:hover{ box-shadow:var(--sq-sh-emerald); }
.sq-btn:active{ transform:translateY(1px) scale(.99); }
.sq-btn--primary{ --_bg:var(--sq-emerald); }
.sq-btn--primary:hover{ --_bg:var(--sq-emerald-600); }
.sq-btn--rose{ --_bg:var(--sq-rose); } .sq-btn--rose:hover{ --_bg:var(--sq-rose-600); box-shadow:var(--sq-sh-rose); }
.sq-btn--gold{ --_bg:var(--sq-gold); --_fg:#3A2E0B; } .sq-btn--gold:hover{ --_bg:var(--sq-gold-600); --_fg:#fff; }
.sq-btn--ghost{ --_bg:transparent; --_fg:var(--sq-ink); --_bd:var(--sq-line-strong); }
.sq-btn--ghost:hover{ --_bg:var(--sq-surface-inset); box-shadow:none; }
.sq-btn--subtle{ --_bg:var(--sq-emerald-50); --_fg:var(--sq-emerald); } .sq-btn--subtle:hover{ --_bg:var(--sq-emerald-100); box-shadow:none; }
.sq-btn--danger{ --_bg:var(--sq-danger); }
.sq-btn--sm{ height:36px; padding-inline:var(--sq-4); font-size:var(--sq-fs-sm); border-radius:var(--sq-r-xs); }
.sq-btn--lg{ height:52px; padding-inline:var(--sq-6); border-radius:var(--sq-r); }
.sq-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.sq-iconbtn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--sq-r-xs);
  background:var(--sq-surface); color:var(--sq-ink-2); border:1px solid var(--sq-line); cursor:pointer;
  transition:background var(--sq-dur-2) var(--sq-ease), color var(--sq-dur-2) var(--sq-ease);
}
.sq-iconbtn:hover{ background:var(--sq-surface-inset); color:var(--sq-ink); }

/* ── Fields ── */
.sq-field{ display:flex; flex-direction:column; gap:var(--sq-2); }
.sq-label{ font-size:var(--sq-fs-sm); font-weight:var(--sq-fw-medium); color:var(--sq-ink-2); }
.sq-input, .sq-select, .sq-textarea{
  width:100%; height:44px; padding-inline:var(--sq-4); border-radius:var(--sq-r-sm);
  background:var(--sq-surface); border:1px solid var(--sq-line-strong); color:var(--sq-ink);
  transition:border-color var(--sq-dur-2) var(--sq-ease), box-shadow var(--sq-dur-2) var(--sq-ease);
}
.sq-textarea{ height:auto; padding:var(--sq-3) var(--sq-4); resize:vertical; min-height:88px; }
.sq-input::placeholder,.sq-textarea::placeholder{ color:var(--sq-ink-3); }
.sq-input:focus,.sq-select:focus,.sq-textarea:focus{ outline:none; border-color:var(--sq-emerald); box-shadow:var(--sq-ring); }
.sq-inputgroup{ position:relative; }
.sq-inputgroup .sq-ico{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--sq-ink-3); }
.sq-inputgroup .sq-input{ padding-inline-start:42px; }
.sq-hint{ font-size:var(--sq-fs-xs); color:var(--sq-ink-3); }

/* Toggle */
.sq-toggle{ position:relative; display:inline-flex; align-items:center; width:44px; height:26px; cursor:pointer; }
.sq-toggle input{ position:absolute; opacity:0; }
.sq-toggle .track{ width:44px; height:26px; border-radius:99px; background:var(--sq-line-strong); transition:background var(--sq-dur-2) var(--sq-ease); }
.sq-toggle .thumb{ position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sq-sh-1); transition:transform var(--sq-dur-2) var(--sq-ease); }
.sq-toggle input:checked ~ .track{ background:var(--sq-emerald); }
.sq-toggle input:checked ~ .thumb{ transform:translateX(18px); }
[dir="rtl"] .sq-toggle input:checked ~ .thumb{ transform:translateX(-18px); }

/* Segmented / tabs */
.sq-seg{ display:inline-flex; background:var(--sq-surface-inset); border-radius:var(--sq-r-sm); padding:4px; gap:2px; }
.sq-seg button{ border:0; background:transparent; height:34px; padding-inline:var(--sq-4); border-radius:var(--sq-r-xs); font-weight:var(--sq-fw-medium); color:var(--sq-ink-2); cursor:pointer; transition:all var(--sq-dur-2) var(--sq-ease); }
.sq-seg button.is-active{ background:var(--sq-surface); color:var(--sq-ink); box-shadow:var(--sq-sh-1); }
.sq-tabs{ display:flex; gap:var(--sq-6); border-bottom:1px solid var(--sq-line); }
.sq-tabs button{ border:0; background:none; padding:0 0 var(--sq-3); font-weight:var(--sq-fw-medium); color:var(--sq-ink-3); cursor:pointer; position:relative; }
.sq-tabs button.is-active{ color:var(--sq-ink); font-weight:var(--sq-fw-semi); }
.sq-tabs button.is-active::after{ content:""; position:absolute; inset-inline:0; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--sq-gold),var(--sq-gold-600)); }

/* ── Badges / status pills ── */
.sq-badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding-inline:10px; border-radius:var(--sq-r-pill); font-size:var(--sq-fs-xs); font-weight:var(--sq-fw-semi); background:var(--sq-surface-inset); color:var(--sq-ink-2); }
.sq-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sq-badge--success{ background:var(--sq-success-bg); color:var(--sq-success); }
.sq-badge--warning{ background:var(--sq-warning-bg); color:var(--sq-warning); }
.sq-badge--danger{ background:var(--sq-danger-bg); color:var(--sq-danger); }
.sq-badge--info{ background:var(--sq-info-bg); color:var(--sq-info); }
.sq-badge--rose{ background:var(--sq-rose-50); color:var(--sq-rose-600); }
.sq-badge--gold{ background:var(--sq-gold-50); color:var(--sq-gold-600); }
.sq-chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding-inline:14px; border-radius:var(--sq-r-pill); background:var(--sq-surface); border:1px solid var(--sq-line-strong); font-size:var(--sq-fs-sm); font-weight:var(--sq-fw-medium); color:var(--sq-ink-2); cursor:pointer; transition:all var(--sq-dur-2) var(--sq-ease); }
.sq-chip.is-active{ background:var(--sq-emerald); border-color:var(--sq-emerald); color:#fff; }

/* ── Avatar ── */
.sq-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--sq-emerald-100); display:inline-grid; place-items:center; color:var(--sq-emerald); font-weight:var(--sq-fw-semi); border:2px solid var(--sq-surface); box-shadow:0 0 0 1px var(--sq-line); overflow:hidden; }
.sq-avatar.sm{ width:32px; height:32px; font-size:var(--sq-fs-xs); }
.sq-avatar.lg{ width:56px; height:56px; }
.sq-avatars{ display:flex; }
.sq-avatars .sq-avatar + .sq-avatar{ margin-inline-start:-10px; }

/* ── Card ── */
.sq-card{ background:var(--sq-surface); border:1px solid var(--sq-line); border-radius:var(--sq-r-lg); box-shadow:var(--sq-sh-1); }
.sq-card--pad{ padding:var(--sq-6); }
.sq-card--hover{ transition:transform var(--sq-dur-2) var(--sq-ease), box-shadow var(--sq-dur-2) var(--sq-ease); }
.sq-card--hover:hover{ transform:translateY(-2px); box-shadow:var(--sq-sh-2); }
.sq-card--glass{ background:var(--sq-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--sq-glass-brd); }
.sq-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sq-3); padding:var(--sq-5) var(--sq-6); border-bottom:1px solid var(--sq-line); }
.sq-card__title{ font-size:var(--sq-fs-h3); font-weight:var(--sq-fw-semi); }
.sq-card__body{ padding:var(--sq-6); }
.sq-divider{ height:1px; background:var(--sq-line); border:0; margin:0; }

/* ── KPI / stat card ── */
.sq-kpi{ position:relative; background:var(--sq-surface); border:1px solid var(--sq-line); border-radius:var(--sq-r-lg); padding:var(--sq-5); box-shadow:var(--sq-sh-1); overflow:hidden; }
.sq-kpi__ico{ width:40px; height:40px; border-radius:var(--sq-r-sm); display:grid; place-items:center; background:var(--sq-emerald-50); color:var(--sq-emerald); margin-bottom:var(--sq-3); }
.sq-kpi__ico--rose{ background:var(--sq-rose-50); color:var(--sq-rose-600); }
.sq-kpi__ico--gold{ background:var(--sq-gold-50); color:var(--sq-gold-600); }
.sq-kpi__label{ font-size:var(--sq-fs-sm); color:var(--sq-ink-3); }
.sq-kpi__value{ font-family:var(--sq-font-display); font-size:28px; font-weight:var(--sq-fw-semi); letter-spacing:-.01em; margin-top:2px; }
.sq-kpi__delta{ display:inline-flex; align-items:center; gap:4px; margin-top:var(--sq-2); font-size:var(--sq-fs-xs); font-weight:var(--sq-fw-semi); }
.sq-kpi__delta.up{ color:var(--sq-success); } .sq-kpi__delta.down{ color:var(--sq-danger); }

/* ── Table ── */
.sq-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--sq-fs-sm); }
.sq-table thead th{ text-align:start; font-weight:var(--sq-fw-semi); color:var(--sq-ink-3); font-size:var(--sq-fs-xs); text-transform:uppercase; letter-spacing:.04em; padding:0 var(--sq-4) var(--sq-3); }
.sq-table tbody td{ padding:var(--sq-3) var(--sq-4); border-top:1px solid var(--sq-line); }
.sq-table tbody tr{ transition:background var(--sq-dur-2) var(--sq-ease); }
.sq-table tbody tr:hover{ background:var(--sq-surface-2); }

/* ── List row ── */
.sq-lrow{ display:flex; align-items:center; gap:var(--sq-3); padding:var(--sq-3); border-radius:var(--sq-r-sm); transition:background var(--sq-dur-2) var(--sq-ease); }
.sq-lrow:hover{ background:var(--sq-surface-2); }
.sq-lrow + .sq-lrow{ box-shadow:0 -1px 0 var(--sq-line); }

/* ── Progress / meter ── */
.sq-meter{ height:8px; border-radius:99px; background:var(--sq-surface-inset); overflow:hidden; }
.sq-meter > span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--sq-emerald),var(--sq-emerald-300)); }
.sq-meter--gold > span{ background:linear-gradient(90deg,var(--sq-gold),var(--sq-gold-100)); }

/* ── App shell: sidebar + topbar ── */
.sq-shell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; background:var(--sq-bg); }
.sq-side{ background:var(--sq-surface); border-inline-end:1px solid var(--sq-line); padding:var(--sq-5) var(--sq-4); display:flex; flex-direction:column; gap:var(--sq-2); position:sticky; top:0; height:100vh; }
.sq-side__brand{ display:flex; align-items:center; gap:var(--sq-3); padding:var(--sq-2) var(--sq-2) var(--sq-5); }
.sq-side__brand b{ font-family:var(--sq-font-display); font-size:19px; letter-spacing:.06em; }
.sq-nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.sq-nav a{ display:flex; align-items:center; gap:var(--sq-3); padding:10px 12px; border-radius:var(--sq-r-sm); color:var(--sq-ink-2); font-weight:var(--sq-fw-medium); transition:background var(--sq-dur-2) var(--sq-ease), color var(--sq-dur-2) var(--sq-ease); }
.sq-nav a .sq-ico{ color:var(--sq-ink-3); }
.sq-nav a:hover{ background:var(--sq-surface-inset); color:var(--sq-ink); }
.sq-nav a.is-active{ background:var(--sq-emerald-50); color:var(--sq-emerald); font-weight:var(--sq-fw-semi); }
.sq-nav a.is-active .sq-ico{ color:var(--sq-emerald); }
.sq-topbar{ position:sticky; top:0; z-index:var(--sq-z-sticky); display:flex; align-items:center; justify-content:space-between; gap:var(--sq-4); padding:var(--sq-4) var(--sq-7); background:var(--sq-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--sq-line); }

/* ── Toast ── */
.sq-toast{ position:fixed; inset-block-end:24px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; z-index:var(--sq-z-toast); display:flex; align-items:center; gap:var(--sq-3); padding:12px 18px; border-radius:var(--sq-r-sm); background:var(--sq-ink); color:#fff; box-shadow:var(--sq-sh-3); opacity:0; transform:translateY(12px); transition:opacity var(--sq-dur-2) var(--sq-ease), transform var(--sq-dur-2) var(--sq-ease); }
.sq-toast.is-show{ opacity:1; transform:none; }

/* ── Responsive ── */
@media (max-width:1100px){
  .sq-shell{ grid-template-columns:1fr; }
  .sq-side{ position:fixed; inset-inline-start:0; top:0; width:264px; transform:translateX(-100%); z-index:var(--sq-z-modal); transition:transform var(--sq-dur-2) var(--sq-ease); }
  [dir="rtl"] .sq-side{ transform:translateX(100%); }
  .sq-side.is-open{ transform:none; }
}
@media (max-width:640px){
  .sq-container{ padding-inline:var(--sq-4); }
  .sq-topbar{ padding-inline:var(--sq-4); }
}