/* ════════════════════════════════════════════════════════════════
   VALA AGENCY — UNIFIED DESIGN SYSTEM  (v3 / Phase 3)
   One identity across admin · client portal · public site.
   Builds on the design tokens already defined in style.css (:root).
   RTL-first. Load AFTER style.css.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Semantic surface scale (additive — complements style.css tokens) */
  --ds-surface-1: var(--bg-card, #1a1a2e);
  --ds-surface-2: #20203a;
  --ds-surface-3: #262647;
  --ds-line: var(--border, #2a2a3e);
  --ds-line-soft: rgba(255,255,255,.06);
  --ds-ring: rgba(124,58,237,.45);

  /* Status palette (CRM / billing / tickets share these) */
  --ds-new: #3b82f6;     --ds-new-bg: rgba(59,130,246,.12);
  --ds-progress: #8b5cf6;--ds-progress-bg: rgba(139,92,246,.12);
  --ds-warn: #f59e0b;    --ds-warn-bg: rgba(245,158,11,.12);
  --ds-ok: #10b981;      --ds-ok-bg: rgba(16,185,129,.12);
  --ds-bad: #ef4444;     --ds-bad-bg: rgba(239,68,68,.12);
  --ds-muted: #64748b;   --ds-muted-bg: rgba(100,116,139,.14);

  --ds-space: 24px;
  --ds-radius: var(--radius, 12px);
  --ds-radius-lg: var(--radius-lg, 20px);
  --ds-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.4));
  --ds-ease: var(--transition, all .25s cubic-bezier(.4,0,.2,1));
}

/* ── Reusable layout helpers ─────────────────────────────────── */
.ds-stack    { display: flex; flex-direction: column; }
.ds-row      { display: flex; align-items: center; }
.ds-between  { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ds-wrap     { flex-wrap: wrap; }
.ds-gap-1    { gap: 8px; }  .ds-gap-2 { gap: 16px; } .ds-gap-3 { gap: 24px; }
.ds-grow     { flex: 1 1 auto; }
.ds-mt-1{margin-top:8px}.ds-mt-2{margin-top:16px}.ds-mt-3{margin-top:24px}
.ds-mb-1{margin-bottom:8px}.ds-mb-2{margin-bottom:16px}.ds-mb-3{margin-bottom:24px}
.ds-grid { display: grid; gap: var(--ds-space); }
.ds-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid.cols-12 { grid-template-columns: repeat(12, 1fr); }
.ds-col-4 { grid-column: span 4; } .ds-col-6 { grid-column: span 6; }
.ds-col-8 { grid-column: span 8; } .ds-col-12 { grid-column: span 12; }
@media (max-width: 1100px){
  .ds-grid.cols-3,.ds-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .ds-col-4,.ds-col-6,.ds-col-8{grid-column:span 12}
}
@media (max-width: 640px){
  .ds-grid.cols-2,.ds-grid.cols-3,.ds-grid.cols-4{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════
   CARD
   ──────────────────────────────────────────────────────────────── */
.ds-card{
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
  transition: var(--ds-ease);
}
.ds-card.pad   { padding: 22px; }
.ds-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding: 18px 22px; border-bottom: 1px solid var(--ds-line-soft);
}
.ds-card-head h3{ font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin:0; }
.ds-card-head .sub{ font-size:.8rem; color: var(--text-muted); }
.ds-card-body{ padding: 22px; }
.ds-card-body.flush{ padding: 0; }
.ds-card.hover:hover{ border-color: var(--accent-primary); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════════
   KPI / STAT TILE
   ──────────────────────────────────────────────────────────────── */
.ds-kpi{
  position: relative;
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 20px 22px;
  overflow: hidden;
  transition: var(--ds-ease);
}
.ds-kpi::after{
  content:""; position:absolute; inset-inline-end:-40px; top:-40px;
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity:.5; pointer-events:none;
}
.ds-kpi:hover{ transform: translateY(-3px); border-color: rgba(124,58,237,.5); box-shadow: var(--shadow-glow); }
.ds-kpi .ico{
  width: 46px; height: 46px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem; color:#fff; margin-bottom: 14px;
}
.ds-kpi .ico.blue   { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.ds-kpi .ico.purple { background: var(--accent-gradient); }
.ds-kpi .ico.green  { background: linear-gradient(135deg,#10b981,#059669); }
.ds-kpi .ico.amber  { background: linear-gradient(135deg,#f59e0b,#d97706); }
.ds-kpi .ico.cyan   { background: linear-gradient(135deg,#06b6d4,#0891b2); }
.ds-kpi .ico.pink   { background: linear-gradient(135deg,#ec4899,#db2777); }
.ds-kpi .ico.red    { background: linear-gradient(135deg,#ef4444,#dc2626); }
.ds-kpi .val{ font-size: 1.9rem; font-weight: 800; color: var(--text-primary); line-height:1.1; letter-spacing:-.5px; }
.ds-kpi .lbl{ font-size: .85rem; color: var(--text-secondary); margin-top: 4px; }
.ds-kpi .delta{ display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:600; margin-top:10px; padding:3px 9px; border-radius:999px; }
.ds-kpi .delta.up  { color: var(--ds-ok);  background: var(--ds-ok-bg); }
.ds-kpi .delta.down{ color: var(--ds-bad); background: var(--ds-bad-bg); }
.ds-kpi .delta.flat{ color: var(--text-muted); background: var(--ds-muted-bg); }

/* ════════════════════════════════════════════════════════════════
   BUTTONS  (extends style.css .btn — adds new variants/utilities)
   ──────────────────────────────────────────────────────────────── */
.btn.btn-soft{
  background: rgba(124,58,237,.12); color: var(--accent-secondary);
  border: 1px solid rgba(124,58,237,.25);
}
.btn.btn-soft:hover{ background: rgba(124,58,237,.2); }
.btn.btn-soft-success{ background: var(--ds-ok-bg); color: var(--ds-ok); border:1px solid rgba(16,185,129,.3); }
.btn.btn-soft-danger { background: var(--ds-bad-bg); color: var(--ds-bad); border:1px solid rgba(239,68,68,.3); }
.btn.btn-soft-warning{ background: var(--ds-warn-bg); color: var(--ds-warn); border:1px solid rgba(245,158,11,.3); }
.btn-group{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.btn .spin{ width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:ds-spin .7s linear infinite; }
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════
   BADGES / CHIPS / PILLS
   ──────────────────────────────────────────────────────────────── */
.ds-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:700; line-height:1;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.ds-badge i{ font-size:.85em; }
.ds-badge.new     { color:var(--ds-new);     background:var(--ds-new-bg); }
.ds-badge.progress{ color:var(--ds-progress);background:var(--ds-progress-bg); }
.ds-badge.warn    { color:var(--ds-warn);    background:var(--ds-warn-bg); }
.ds-badge.ok      { color:var(--ds-ok);      background:var(--ds-ok-bg); }
.ds-badge.bad     { color:var(--ds-bad);     background:var(--ds-bad-bg); }
.ds-badge.muted   { color:var(--ds-muted);   background:var(--ds-muted-bg); }
.ds-badge.dot::before{ content:""; width:6px;height:6px;border-radius:50%;background:currentColor; }

/* ════════════════════════════════════════════════════════════════
   TABLE
   ──────────────────────────────────────────────────────────────── */
.ds-table-wrap{ width:100%; overflow-x:auto; border-radius: var(--ds-radius-lg); }
table.ds-table{ width:100%; border-collapse: collapse; font-size:.9rem; }
table.ds-table thead th{
  text-align: start; font-weight:700; color: var(--text-muted);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.5px;
  padding: 13px 16px; background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--ds-line); white-space:nowrap;
}
table.ds-table tbody td{
  padding: 14px 16px; color: var(--text-secondary);
  border-bottom: 1px solid var(--ds-line-soft); vertical-align: middle;
}
table.ds-table tbody tr{ transition: background .15s; }
table.ds-table tbody tr:hover{ background: rgba(255,255,255,.025); }
table.ds-table tbody tr:last-child td{ border-bottom: none; }
table.ds-table .strong{ color: var(--text-primary); font-weight:600; }
.ds-table-actions{ display:flex; gap:6px; }

/* ════════════════════════════════════════════════════════════════
   FORMS  (harmonized with style.css .form-control)
   ──────────────────────────────────────────────────────────────── */
.ds-field{ margin-bottom: 16px; }
.ds-field label{ display:block; font-size:.82rem; font-weight:600; color: var(--text-secondary); margin-bottom: 7px; }
.ds-field label .req{ color: var(--ds-bad); }
.ds-input, .ds-select, .ds-textarea{
  width:100%; padding: 11px 14px; font-family: inherit; font-size:.92rem;
  color: var(--text-primary); background: var(--bg-input, #1a1a2e);
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  transition: var(--ds-ease); outline: none;
}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{
  border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--ds-ring);
}
.ds-textarea{ min-height: 110px; resize: vertical; }
.ds-input::placeholder,.ds-textarea::placeholder{ color: var(--text-muted); }
.ds-input-icon{ position:relative; }
.ds-input-icon i{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color: var(--text-muted); }
.ds-input-icon .ds-input{ padding-inline-start: 40px; }
.ds-hint{ font-size:.78rem; color: var(--text-muted); margin-top:5px; }
.ds-err{ font-size:.78rem; color: var(--ds-bad); margin-top:5px; }
.ds-search{ max-width: 360px; }

/* Switch */
.ds-switch{ position:relative; display:inline-block; width:44px; height:24px; }
.ds-switch input{ opacity:0; width:0; height:0; }
.ds-switch .track{ position:absolute; inset:0; background: var(--ds-line); border-radius:999px; transition:.25s; }
.ds-switch .track::before{ content:""; position:absolute; height:18px; width:18px; inset-inline-start:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; }
.ds-switch input:checked + .track{ background: var(--accent-primary); }
.ds-switch input:checked + .track::before{ transform: translateX(-20px); }
html[dir="rtl"] .ds-switch input:checked + .track::before{ transform: translateX(-20px); }
html:not([dir="rtl"]) .ds-switch input:checked + .track::before{ transform: translateX(20px); }

/* ════════════════════════════════════════════════════════════════
   ALERTS / TOASTS
   ──────────────────────────────────────────────────────────────── */
.ds-alert{
  display:flex; align-items:flex-start; gap:12px;
  padding: 14px 16px; border-radius: var(--ds-radius);
  border:1px solid var(--ds-line); background: var(--ds-surface-1);
  font-size:.9rem; color: var(--text-secondary);
}
.ds-alert i{ font-size:1.1rem; margin-top:1px; }
.ds-alert .t{ font-weight:700; color: var(--text-primary); display:block; margin-bottom:2px; }
.ds-alert.ok  { border-color: rgba(16,185,129,.35); background: var(--ds-ok-bg); }
.ds-alert.ok i{ color: var(--ds-ok); }
.ds-alert.bad { border-color: rgba(239,68,68,.35); background: var(--ds-bad-bg); }
.ds-alert.bad i{ color: var(--ds-bad); }
.ds-alert.warn{ border-color: rgba(245,158,11,.35); background: var(--ds-warn-bg); }
.ds-alert.warn i{ color: var(--ds-warn); }
.ds-alert.info{ border-color: rgba(59,130,246,.35); background: var(--ds-new-bg); }
.ds-alert.info i{ color: var(--ds-new); }

.ds-toast-wrap{ position: fixed; inset-block-start: 20px; inset-inline-end: 20px; z-index: 9999; display:flex; flex-direction:column; gap:10px; max-width: 360px; }
.ds-toast{ display:flex; gap:10px; align-items:center; padding:13px 16px; border-radius: var(--ds-radius); background: var(--ds-surface-2); border:1px solid var(--ds-line); box-shadow: var(--shadow-lg); color: var(--text-primary); font-size:.9rem; animation: ds-toast-in .3s ease; }
.ds-toast.ok{ border-inline-start: 3px solid var(--ds-ok); }
.ds-toast.bad{ border-inline-start: 3px solid var(--ds-bad); }
.ds-toast.info{ border-inline-start: 3px solid var(--ds-new); }
@keyframes ds-toast-in{ from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform:none; } }

/* ════════════════════════════════════════════════════════════════
   MODAL
   ──────────────────────────────────────────────────────────────── */
.ds-modal-overlay{
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,5,12,.72); backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center; padding: 20px;
}
.ds-modal-overlay.open{ display:flex; animation: ds-fade .2s ease; }
@keyframes ds-fade{ from{opacity:0} to{opacity:1} }
.ds-modal{
  width:100%; max-width: 540px; max-height: 90vh; overflow:auto;
  background: var(--ds-surface-1); border:1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg); box-shadow: var(--shadow-lg);
  animation: ds-pop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes ds-pop{ from{ opacity:0; transform: scale(.96) translateY(8px);} to{opacity:1;transform:none;} }
.ds-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--ds-line-soft); }
.ds-modal-head h3{ margin:0; font-size:1.05rem; font-weight:700; color: var(--text-primary); }
.ds-modal-close{ background:none; border:none; color: var(--text-muted); font-size:1.4rem; cursor:pointer; line-height:1; transition: color .2s; }
.ds-modal-close:hover{ color: var(--text-primary); }
.ds-modal-body{ padding: 22px; }
.ds-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding: 16px 22px; border-top:1px solid var(--ds-line-soft); }

/* ════════════════════════════════════════════════════════════════
   ACTIVITY FEED
   ──────────────────────────────────────────────────────────────── */
.ds-feed{ list-style:none; margin:0; padding:0; }
.ds-feed li{ position:relative; display:flex; gap:13px; padding: 12px 0; border-bottom:1px solid var(--ds-line-soft); }
.ds-feed li:last-child{ border-bottom:none; }
.ds-feed .fi{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; background: var(--ds-surface-3); color: var(--accent-secondary); }
.ds-feed .ft{ font-size:.88rem; color: var(--text-primary); }
.ds-feed .fm{ font-size:.78rem; color: var(--text-muted); margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   AVATARS / PROGRESS / MISC
   ──────────────────────────────────────────────────────────────── */
.ds-avatar{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#fff; background: var(--accent-gradient); flex:0 0 auto; overflow:hidden; }
.ds-avatar img{ width:100%; height:100%; object-fit:cover; }
.ds-avatar.sm{ width:30px;height:30px;font-size:.72rem; }
.ds-avatar.lg{ width:52px;height:52px;font-size:1.05rem; }

.ds-progress{ width:100%; height:8px; border-radius:999px; background: var(--ds-line); overflow:hidden; }
.ds-progress > span{ display:block; height:100%; border-radius:999px; background: var(--accent-gradient); transition: width .6s ease; }
.ds-progress.ok > span{ background: linear-gradient(90deg,#10b981,#34d399); }
.ds-progress.warn > span{ background: linear-gradient(90deg,#f59e0b,#fbbf24); }

.ds-meta{ font-size:.8rem; color: var(--text-muted); }
.ds-sep{ height:1px; background: var(--ds-line-soft); margin: 16px 0; border:none; }

/* Section title */
.ds-page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 22px; }
.ds-page-head h1{ font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin:0; letter-spacing:-.5px; }
.ds-page-head .crumb{ font-size:.82rem; color: var(--text-muted); margin-top:3px; }

/* Empty state */
.ds-empty{ text-align:center; padding: 44px 20px; color: var(--text-muted); }
.ds-empty i{ font-size: 2.4rem; opacity:.5; display:block; margin-bottom: 12px; }
.ds-empty .t{ color: var(--text-secondary); font-weight:600; }

/* Tabs */
.ds-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--ds-line); margin-bottom: 20px; flex-wrap:wrap; }
.ds-tab{ padding: 10px 16px; font-size:.88rem; font-weight:600; color: var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; transition: var(--ds-ease); }
.ds-tab:hover{ color: var(--text-secondary); }
.ds-tab.active{ color: var(--accent-secondary); border-bottom-color: var(--accent-primary); }

/* Chart container keeps Chart.js responsive height sane */
.ds-chart{ position: relative; width: 100%; }
.ds-chart canvas{ max-height: 300px; }

/* Skeleton shimmer */
.ds-skel{ background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-surface-3) 37%, var(--ds-surface-2) 63%); background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes ds-shimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }

/* ════════════════════════════════════════════════════════════════
   CLIENTS — premium logo marquee (Phase 3 UI/UX) · two opposite rows
   ──────────────────────────────────────────────────────────────── */
.clients-section{ padding: 56px 0; overflow: hidden; }
.clients-section .section-subtitle{ max-width: 620px; margin-inline: auto; }
.clients-marquee{
  position: relative; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{ display: flex; width: max-content; gap: 16px; padding-inline: 8px; will-change: transform; }
.clients-track.dir-rtl{ animation: vala-marq-a 48s linear infinite; }
.clients-track.dir-ltr{ animation: vala-marq-b 48s linear infinite; }
.clients-marquee:hover .clients-track{ animation-play-state: paused; }
.client-chip{
  display: flex; align-items: center; gap: 13px; flex-shrink: 0;
  padding: 13px 20px 13px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid var(--border, #2a2a3e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.22);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.client-chip:hover{ transform: translateY(-3px); border-color: rgba(124,58,237,.45); box-shadow: 0 12px 28px rgba(124,58,237,.18); }
.client-chip .cc-mark{
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 1.1rem; color: #fff; flex-shrink: 0;
  background: var(--c, #7c3aed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.30);
}
.client-chip .cc-info{ display: flex; flex-direction: column; gap: 2px; }
.client-chip .cc-name{ font-weight: 700; font-size: 1rem; color: var(--text-primary, #e8e8f0); white-space: nowrap; line-height: 1.15; }
.client-chip .cc-sub{ font-size: .72rem; color: var(--text-muted, #606078); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.client-chip .cc-sub i{ font-size: .82em; color: var(--accent-secondary, #a78bfa); }
@keyframes vala-marq-a{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes vala-marq-b{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }
@media (max-width: 640px){
  .client-chip{ padding: 10px 16px 10px 13px; gap: 10px; }
  .client-chip .cc-mark{ width: 36px; height: 36px; font-size: .98rem; border-radius: 10px; }
  .client-chip .cc-name{ font-size: .92rem; }
  .client-chip .cc-sub{ font-size: .68rem; }
  .clients-track.dir-rtl, .clients-track.dir-ltr{ animation-duration: 34s; }
}
/* clients marquee keeps a gentle scroll for showcase (intentional) */

/* ════════════════════════════════════════════════════════════
   Admin top bar + notification bell/panel (RTL dashboard)
   ════════════════════════════════════════════════════════════ */
.dash-topbar{
  position: fixed; top: 0; inset-inline: 0; z-index: 1050;
  height: var(--nav-height, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(13,13,21,.98), rgba(18,18,34,.96));
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.dash-topbar-brand{
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: #eef2fb; text-decoration: none; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-topbar-logo{ width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.dash-topbar-actions{ display: flex; align-items: center; gap: 14px; }
.dash-topbar-link{
  display: inline-flex; align-items: center; gap: 6px;
  color: #b9c0d6; text-decoration: none; font-size: .85rem; font-weight: 600;
  padding: 8px 10px; border-radius: 10px; transition: background .2s, color .2s;
}
.dash-topbar-link:hover{ background: rgba(255,255,255,.05); color: #fff; }
.dash-topbar-link-text{ display: inline; }
@media (max-width: 640px){ .dash-topbar-link-text{ display: none; } }

/* Notification bell + badge */
.dash-topbar-notif{ position: relative; }
.dash-topbar-bell{
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  color: #e3b341; font-size: 1.15rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.dash-topbar-bell:hover{ background: rgba(255,255,255,.08); }
.dash-topbar-bell.ring{ animation: vala-bell-ring 1s ease; }
@keyframes vala-bell-ring{
  0%,100%{ transform: rotate(0); } 20%{ transform: rotate(-12deg); }
  40%{ transform: rotate(10deg); } 60%{ transform: rotate(-7deg); } 80%{ transform: rotate(5deg); }
}
.dash-notif-badge{
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 19px; text-align: center;
  border: 2px solid #12121f; box-shadow: 0 2px 8px rgba(239,68,68,.5);
}
.dash-notif-badge.pulse{ animation: vala-notif-pulse 1.6s ease-out; }
@keyframes vala-notif-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.7), 0 2px 8px rgba(239,68,68,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(239,68,68,0), 0 2px 8px rgba(239,68,68,.5); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 2px 8px rgba(239,68,68,.5); }
}

/* Notification dropdown panel (anchored by JS under the bell) */
.dash-notif-panel{
  position: fixed; z-index: 1200; width: min(380px, calc(100vw - 24px));
  background: #161a2b; border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5); overflow: hidden;
  display: none; flex-direction: column; max-height: 70vh;
}
.dash-notif-panel.open{ display: flex; }
.dash-notif-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #eef2fb;
}
.dash-notif-markall{ color: var(--accent-secondary, #a78bfa); font-size: .8rem; text-decoration: none; font-weight: 600; }
.dash-notif-list{ overflow-y: auto; padding: 6px; }
.dash-notif-list .notif-empty{
  text-align: center; color: #7e89a6; padding: 36px 12px; font-size: .9rem;
}
.dash-notif-list .notif-empty i{ display: block; font-size: 1.8rem; margin-bottom: 8px; opacity: .6; }
.notif-item{
  display: flex; gap: 12px; padding: 11px 12px; border-radius: 10px;
  text-decoration: none; color: #d6dbeb; transition: background .15s;
  border-inline-start: 3px solid transparent;
}
.notif-item:hover{ background: rgba(255,255,255,.05); }
.notif-item.unread{ background: rgba(124,58,237,.10); border-inline-start-color: var(--accent-secondary, #a78bfa); }
.notif-ico{
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); color: #e3b341; font-size: 1rem;
}
.notif-body{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title{ font-size: .86rem; font-weight: 700; color: #eef2fb; line-height: 1.3; }
.notif-sub{ font-size: .76rem; color: #9aa3bd; display: flex; flex-direction: column; gap: 2px; }
.notif-time{ font-size: .7rem; color: #6b7390; }

/* Top-bar user chip */
.dash-topbar-user{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.dash-topbar-user-name{ font-size: .82rem; font-weight: 700; color: #eef2fb; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-topbar-user-avatar{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1e2a4a,#0f1830); border: 1px solid rgba(227,179,65,.35);
  color: #e3b341; font-size: .95rem;
}
@media (max-width: 640px){ .dash-topbar-user-name{ display: none; } }

/* ════════════════════════════════════════════════════════════
   Auth pages polish (login / OTP verify / forgot / reset)
   Consistent RTL look, responsive, no overlap.
   ════════════════════════════════════════════════════════════ */
.auth-page{
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(227,179,65,.10), transparent 30rem),
    radial-gradient(circle at 0 100%, rgba(124,58,237,.10), transparent 30rem),
    var(--bg-primary, #0d0d14);
}
.auth-box{
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(22,22,40,.98), rgba(13,13,21,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 36px 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.auth-box h2{ text-align: center; margin: 0 0 8px; font-size: 1.5rem; color: #eef2fb; }
.auth-box .auth-subtitle{ text-align: center; color: #9aa3bd; margin-bottom: 24px; font-size: .9rem; line-height: 1.7; }
.auth-box .auth-logo{ font-weight: 800; color: #eef2fb; font-size: 1.1rem; text-decoration: none; }
.auth-box .form-group{ margin-bottom: 18px; }
.auth-box label{ display: block; margin-bottom: 7px; font-weight: 600; font-size: .86rem; color: #c9cfe2; }
.auth-box .form-control{
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: #eef2fb; font-size: .95rem; transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.auth-box .form-control:focus{
  outline: none; border-color: var(--accent-secondary, #a78bfa);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
.auth-box .btn-block{ width: 100%; padding: 13px; font-size: 1rem; font-weight: 700; border-radius: 10px; }
.auth-box .auth-link{ text-align: center; margin-top: 18px; font-size: .88rem; color: #9aa3bd; }
.auth-box .auth-link a{ color: var(--accent-secondary, #a78bfa); font-weight: 700; text-decoration: none; }
.auth-box .auth-divider{
  display: flex; align-items: center; gap: 12px; margin: 20px 0 6px;
  color: #5b6280; font-size: .76rem;
}
.auth-box .auth-divider::before, .auth-box .auth-divider::after{
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08);
}
.auth-box .auth-success{
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25);
  color: #bbf7d0; padding: 14px 16px; border-radius: 12px; margin-bottom: 20px; font-size: .9rem; line-height: 1.7;
}
.auth-box .auth-success i{ color: #4ade80; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.auth-box .auth-security-note{
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  color: #8b93ab; font-size: .76rem; line-height: 1.7; display: flex; gap: 8px; align-items: flex-start;
}
.auth-box .auth-security-note i{ color: #e3b341; flex-shrink: 0; margin-top: 2px; }
.auth-box .auth-inline-btn{
  background: none; border: none; color: var(--accent-secondary, #a78bfa);
  font-weight: 700; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline;
}
.auth-otp-icon{
  width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1e2a4a,#0f1830); border: 1px solid rgba(227,179,65,.35);
  color: #e3b341; font-size: 1.8rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.auth-box .otp-input{ letter-spacing: 8px; font-size: 1.4rem; }
@media (max-width: 480px){
  .auth-box{ padding: 28px 20px; }
  .auth-box h2{ font-size: 1.35rem; }
}

/* ═══ Roles & permissions cards ═══ */
.roles-role-card{ margin-bottom:18px; border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:14px; padding:18px; }
.roles-role-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.roles-role-title{ display:flex; align-items:center; gap:12px; flex:1; min-width:200px; }
.roles-role-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1e2a4a,#0f1830); border:1px solid rgba(227,179,65,.30); color:#e3b341; font-size:1.2rem;
}
.roles-role-title strong{ font-size:1.08rem; display:block; }
.roles-role-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.roles-role-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.roles-stat{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-secondary,#9aa3bd); background:rgba(255,255,255,.04); padding:6px 12px; border-radius:999px; }
.roles-stat i{ color:#e3b341; }
.roles-super-note{ margin:0; }
.roles-perms-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.roles-perm-group{
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px;
}
.roles-perm-group-title{ font-weight:700; font-size:.86rem; margin-bottom:10px; color:#e3b341; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.06); }
.roles-perm-item{ display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:.85rem; cursor:pointer; color:var(--text-secondary,#c9cfe2); }
.roles-perm-item:hover{ color:var(--text-primary,#fff); }
.roles-perm-item input{ width:16px; height:16px; accent-color:#7c3aed; }
.roles-save-row{ margin-top:14px; }

/* ═══ Modal hint (invite/employee) ═══ */
.modal-hint{
  display:flex; gap:8px; align-items:flex-start; margin:14px 0; padding:12px 14px; border-radius:10px;
  background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.20); color:#cdb6ff; font-size:.82rem; line-height:1.7;
}
.modal-hint i{ color:#a78bfa; flex-shrink:0; margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   CRM PIPELINE BOARD (kanban) — admin.vala.agency
   RTL-first. Columns scroll horizontally; cards stack vertically.
   ════════════════════════════════════════════════════════════════ */
.crm-main{ min-width:0; }
.crm-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.crm-search{ flex:1 1 280px; min-width:200px; }
.crm-hint{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-muted,#8a93a8); margin-inline-start:auto; }

.crm-board{
  display:flex; gap:14px; align-items:flex-start; overflow-x:auto; overflow-y:hidden;
  padding:4px 4px 18px; min-height:420px;
  scrollbar-width:thin; scrollbar-color:var(--ds-line) transparent;
}
.crm-board::-webkit-scrollbar{ height:8px; }
.crm-board::-webkit-scrollbar-thumb{ background:var(--ds-line); border-radius:8px; }

.crm-col{
  flex:0 0 308px; display:flex; flex-direction:column; gap:10px;
  background:var(--ds-surface-1); border:1px solid var(--ds-line);
  border-radius:var(--ds-radius); padding:12px; min-height:120px;
}
.crm-col-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--ds-line-soft);
}
.crm-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,.04); }
.crm-col-name{ font-weight:700; font-size:.92rem; color:var(--text-primary,#fff); }
.crm-col-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:rgba(255,255,255,.08); font-size:.74rem; font-weight:700; color:var(--text-secondary,#cfd5e6);
}
.crm-col-closed{ color:var(--ds-ok); font-size:.85rem; }
.crm-col-sum{
  margin-inline-start:auto; font-size:.72rem; color:var(--text-muted,#8a93a8); font-weight:600;
  background:var(--ds-line-soft); padding:2px 8px; border-radius:8px;
}

.crm-cards{
  display:flex; flex-direction:column; gap:10px; min-height:60px; padding:2px;
  max-height:calc(100vh - 340px); overflow-y:auto; scrollbar-width:thin;
}
.crm-cards::-webkit-scrollbar{ width:6px; }
.crm-cards::-webkit-scrollbar-thumb{ background:var(--ds-line); border-radius:6px; }

.crm-empty{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 10px;
  color:var(--text-muted,#6b7488); font-size:.8rem; text-align:center; border:1px dashed var(--ds-line); border-radius:10px;
}
.crm-empty i{ font-size:1.4rem; opacity:.6; }

.crm-card{
  background:var(--ds-surface-2); border:1px solid var(--ds-line); border-radius:10px; padding:11px 12px;
  cursor:pointer; transition:var(--ds-ease); user-select:none;
  display:flex; flex-direction:column; gap:7px;
}
.crm-card:hover{ border-color:var(--ds-ring); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.crm-card[data-hidden="1"]{ display:none; }
.crm-card.dragging,
.crm-card.crm-dragging{ opacity:.55; box-shadow:0 10px 26px rgba(124,58,237,.35); }
.crm-card.crm-ghost{ opacity:.3; border-style:dashed; }
.crm-card.crm-chosen{ cursor:grabbing; }

.crm-card-top{ display:flex; align-items:center; justify-content:space-between; }
.crm-tn{ font-size:.74rem; font-weight:700; color:var(--accent-secondary,#a78bfa); direction:ltr; letter-spacing:.3px; }
.crm-wa{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px;
  color:#25d366; background:rgba(37,211,102,.1); transition:var(--ds-ease);
}
.crm-wa:hover{ background:rgba(37,211,102,.2); transform:scale(1.06); }
.crm-card-name{ font-weight:700; font-size:.92rem; color:var(--text-primary,#fff); line-height:1.4; }
.crm-card-sub{ display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--text-muted,#9aa3b6); }
.crm-card-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.crm-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:.7rem; padding:2px 8px; border-radius:7px;
  background:rgba(124,58,237,.1); color:#cdb6ff; border:1px solid rgba(124,58,237,.18);
}
.crm-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; border-top:1px solid var(--ds-line-soft); }
.crm-budget{ font-weight:700; font-size:.82rem; color:var(--ds-ok,#10b981); }
.crm-budget.muted{ color:var(--text-muted,#6b7488); font-weight:400; }
.crm-date{ font-size:.7rem; color:var(--text-muted,#8a93a8); }

/* ── Card detail drawer ── */
.crm-drawer{
  position:fixed; inset-block:0; inset-inline-end:0; width:min(380px,92vw); transform:translateX(110%);
  background:var(--ds-surface-1); border-inline-start:1px solid var(--ds-line); box-shadow:-10px 0 40px rgba(0,0,0,.4);
  display:flex; flex-direction:column; z-index:1050; transition:transform .28s cubic-bezier(.4,0,.2,1);
}
/* RTL: drawer slides in from the visual left (logical inline-end). */
[dir="rtl"] .crm-drawer{ transform:translateX(-110%); }
.crm-drawer.open{ transform:translateX(0) !important; }
.crm-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--ds-line); }
.crm-drawer-close{ background:none; border:none; color:var(--text-muted); font-size:1.05rem; cursor:pointer; padding:4px; border-radius:6px; }
.crm-drawer-close:hover{ color:var(--text-primary); background:var(--ds-line-soft); }
.crm-drawer-body{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
.crm-d-row{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--ds-line-soft); }
.crm-d-row > i{ color:var(--accent-secondary,#a78bfa); font-size:1rem; margin-top:2px; }
.crm-d-k{ font-size:.72rem; color:var(--text-muted,#8a93a8); margin-bottom:2px; }
.crm-d-v{ font-size:.9rem; color:var(--text-primary,#e8e8f0); word-break:break-word; }
.crm-d-row.crm-d-tn .crm-d-v{ color:var(--accent-secondary,#a78bfa); font-weight:700; direction:ltr; letter-spacing:.4px; }
.crm-drawer-foot{ padding:14px 18px; border-top:1px solid var(--ds-line); }

/* ── Stage manager ── */
.crm-stage-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.crm-stage-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px; border:1px solid var(--ds-line); border-radius:9px; background:var(--ds-surface-2); }
.crm-stage-label{ flex:1 1 120px; min-width:100px; }
.crm-stage-color{ width:90px; }
.crm-stage-order{ width:64px; text-align:center; }
.crm-stage-closed{ display:inline-flex; align-items:center; gap:4px; font-size:.76rem; color:var(--text-muted); }
.crm-stage-add{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding-top:10px; border-top:1px solid var(--ds-line-soft); }
.crm-stage-add .ds-input{ flex:1 1 140px; }
.crm-stage-note{ display:flex; gap:8px; align-items:flex-start; font-size:.76rem; color:var(--text-muted); margin-top:12px; line-height:1.7; }
.crm-stage-note i{ color:var(--accent-secondary,#a78bfa); margin-top:2px; }

/* ── Toast ── */
.crm-toast{
  position:fixed; inset-block-end:24px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--ds-surface-3); color:#fff; padding:12px 22px; border-radius:10px; font-size:.86rem; font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.45); z-index:1100; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  border:1px solid var(--ds-line);
}
.crm-toast.show{ opacity:1; }
.crm-toast.ok{ border-color:var(--ds-ok); color:#6ee7b7; }
.crm-toast.bad{ border-color:var(--ds-bad); color:#fca5a5; }
.crm-toast.warn{ border-color:var(--ds-warn); color:#fcd34d; }

/* ── Mobile: collapse columns to a vertical stack ── */
@media (max-width:720px){
  .crm-col{ flex:1 1 100%; }
  .crm-board{ flex-direction:column; overflow-x:visible; }
  .crm-hint{ display:none; }
}