/* ============================================================
   COMPONENTS v3.0 — components.css
   Premium UI components with glassmorphism & animations
   ============================================================ */

/* ══════════════════════════════════════  BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  padding:8px 18px;
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  border-radius:var(--border-radius); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; user-select:none;
  text-decoration:none; line-height:1; font-family:var(--font-sans);
  transition:all var(--t-fast);
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background var(--t-fast);
  border-radius:inherit;
}
.btn:hover::after { background:rgba(255,255,255,0.08); }
.btn:active { transform:scale(0.97); }
.btn svg { flex-shrink:0; }

.btn-primary { background:var(--color-primary); color:white; }
.btn-primary:hover { background:var(--color-primary-dark); box-shadow:var(--shadow-primary); }

.btn-accent { background:var(--color-accent); color:white; }
.btn-accent:hover { background:var(--color-accent-dark); box-shadow:var(--shadow-accent); }

.btn-danger { background:var(--color-danger); color:white; }
.btn-danger:hover { opacity:0.9; box-shadow:0 4px 14px rgba(239,68,68,.40); }

.btn-warning { background:var(--color-warning); color:white; }
.btn-warning:hover { opacity:0.9; box-shadow:0 4px 14px rgba(245,158,11,.40); }

.btn-purple { background:var(--color-purple); color:white; }
.btn-purple:hover { opacity:0.9; box-shadow:0 4px 14px rgba(139,92,246,.40); }

.btn-outline {
  background:transparent; border-color:var(--border-color-strong);
  color:var(--text-primary);
}
.btn-outline:hover { background:var(--bg-surface-2); border-color:var(--color-primary); color:var(--color-primary); }

.btn-ghost { background:transparent; border-color:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-surface-2); color:var(--text-primary); }

.btn-success { background:var(--color-accent); color:white; }
.btn-success:hover { background:var(--color-accent-dark); }

.btn-sm  { padding:5px 13px; font-size:var(--text-xs); }
.btn-lg  { padding:11px 26px; font-size:var(--text-base); }
.btn-xl  { padding:14px 32px; font-size:var(--text-lg); font-weight:var(--fw-semibold); }
.btn-full{ width:100%; }
.btn-icon{ padding:8px; border-radius:var(--border-radius); }
.btn-icon.btn-sm { padding:5px; }

/* ══════════════════════════════════════  CARDS */
.card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.card-body { padding:var(--sp-5); }
.card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border-color);
}
.card-hdr h3 { font-size:var(--text-base); font-weight:var(--fw-semibold); }
.card-ftr { padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--border-color); }

/* Glass card variant */
.card-glass {
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-md);
}
[data-theme="dark"] .card-glass {
  background:rgba(12,26,46,0.7);
  border-color:rgba(255,255,255,0.06);
}

/* ── Stat Cards ── */
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-5);
  position:relative; overflow:hidden;
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.stat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }

.stat-card.c-primary::before { background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light)); }
.stat-card.c-success::before  { background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light)); }
.stat-card.c-warning::before  { background:linear-gradient(90deg,var(--color-warning),var(--color-warning-light)); }
.stat-card.c-danger::before   { background:linear-gradient(90deg,var(--color-danger),var(--color-danger-light)); }
.stat-card.c-purple::before   { background:linear-gradient(90deg,var(--color-purple),var(--color-purple-light)); }
.stat-card.c-info::before     { background:linear-gradient(90deg,var(--color-info),#38bdf8); }

/* Legacy compat */
.stat-card.c-primary { border-top:none; }
.stat-card.c-success  { border-top:none; }
.stat-card.c-warning  { border-top:none; }
.stat-card.c-danger   { border-top:none; }
.stat-card.c-purple   { border-top:none; }
.stat-card.c-info     { border-top:none; }

.stat-card-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--sp-3); }
.stat-ico {
  width:46px; height:46px;
  border-radius:var(--border-radius);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.stat-ico.c-primary { background:var(--color-primary-alpha); }
.stat-ico.c-success  { background:var(--color-accent-alpha); }
.stat-ico.c-warning  { background:var(--color-warning-alpha); }
.stat-ico.c-danger   { background:var(--color-danger-alpha); }
.stat-ico.c-purple   { background:var(--color-purple-alpha); }
.stat-ico.c-info     { background:var(--color-info-alpha); }

.stat-trend {
  display:inline-flex; align-items:center; gap:3px;
  font-size:var(--text-xs); font-weight:var(--fw-semibold);
  padding:3px 9px; border-radius:var(--border-radius-full);
}
.stat-trend.up   { background:var(--color-accent-alpha); color:var(--color-accent); }
.stat-trend.down { background:var(--color-danger-alpha);  color:var(--color-danger); }

.stat-val {
  font-size:var(--text-3xl); font-weight:var(--fw-extrabold);
  color:var(--text-primary); line-height:1; letter-spacing:-0.5px;
}
.stat-lbl { font-size:var(--text-sm); color:var(--text-secondary); margin-top:4px; }
.stat-meta { font-size:var(--text-xs); color:var(--text-muted); margin-top:4px; }

/* ══════════════════════════════════════  FORMS */
.form-group { display:flex; flex-direction:column; gap:var(--sp-2); }
.form-label { font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); }
.form-label .req { color:var(--color-danger); margin-left:2px; }

.form-ctrl {
  background:var(--bg-input); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:9px 13px;
  font-size:var(--text-sm); color:var(--text-primary); outline:none;
  width:100%; font-family:var(--font-sans);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-ctrl:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-alpha); }
.form-ctrl::placeholder { color:var(--text-muted); }
.form-ctrl:disabled { opacity:0.55; cursor:not-allowed; }
.form-ctrl.is-err { border-color:var(--color-danger); box-shadow:0 0 0 3px var(--color-danger-alpha); }
textarea.form-ctrl { resize:vertical; min-height:88px; }
select.form-ctrl {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px;
}
.form-err  { font-size:var(--text-xs); color:var(--color-danger); margin-top:2px; }
.form-hint { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
@media(max-width:600px){ .form-row { grid-template-columns:1fr; } }

/* Input group with icon */
.input-group { position:relative; display:flex; align-items:center; }
.input-group .form-ctrl { padding-left:36px; }
.input-group .ig-icon { position:absolute; left:11px; color:var(--text-muted); pointer-events:none; flex-shrink:0; }

/* ══════════════════════════════════════  TABLE */
.tbl-wrap { overflow-x:auto; border-radius:var(--border-radius-lg); border:1px solid var(--border-color); }
.data-tbl { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.data-tbl thead { background:var(--bg-surface-2); }
.data-tbl th {
  padding:11px 14px; font-weight:var(--fw-semibold);
  color:var(--text-secondary); text-align:left; white-space:nowrap;
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.06em;
  border-bottom:1px solid var(--border-color);
}
.data-tbl td { padding:11px 14px; color:var(--text-primary); border-bottom:1px solid var(--border-color); vertical-align:middle; }
.data-tbl tr:last-child td { border-bottom:none; }
.data-tbl tbody tr { transition:background var(--t-fast); }
.data-tbl tbody tr:hover { background:var(--bg-surface-2); }

/* Table toolbar */
.tbl-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-4); gap:var(--sp-3); flex-wrap:wrap;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-color);
  border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.tbl-bar-l { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.tbl-bar-r { display:flex; align-items:center; gap:var(--sp-2); }

.tbl-search { position:relative; display:flex; align-items:center; }
.tbl-search-ico { position:absolute; left:9px; color:var(--text-muted); pointer-events:none; }
.tbl-search input {
  background:var(--bg-surface-2); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:6px 10px 6px 30px;
  font-size:var(--text-sm); color:var(--text-primary); outline:none;
  width:190px; font-family:var(--font-sans);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.tbl-search input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-alpha); }

/* ══════════════════════════════════════  MODAL */
.modal-bd {
  position:fixed; inset:0; background:var(--bg-overlay);
  z-index:600; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); animation:fadeIn 0.18s ease;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal {
  background:var(--bg-surface); border:1px solid var(--border-color);
  border-radius:var(--border-radius-xl); box-shadow:var(--shadow-2xl);
  width:100%; max-width:540px; max-height:92vh;
  display:flex; flex-direction:column; animation:slideUp 0.22s ease;
}
.modal-lg { max-width:720px; }
.modal-sm { max-width:420px; }
.modal-xl { max-width:960px; }

.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-color); flex-shrink:0;
}
.modal-hdr h3 { font-size:var(--text-lg); font-weight:var(--fw-semibold); }
.modal-close {
  width:30px; height:30px; border-radius:var(--border-radius-sm);
  border:none; background:none; cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background:var(--bg-surface-2); color:var(--text-primary); }
.modal-body { padding:var(--sp-5); overflow-y:auto; flex:1; }
.modal-ftr {
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--border-color); flex-shrink:0;
}

/* ══════════════════════════════════════  BADGES */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 9px; font-size:11px; font-weight:var(--fw-semibold);
  border-radius:var(--border-radius-full); white-space:nowrap;
}
.badge-primary { background:var(--color-primary-alpha); color:var(--color-primary); }
.badge-success { background:var(--color-accent-alpha);  color:var(--color-accent); }
.badge-warning { background:var(--color-warning-alpha); color:var(--color-warning); }
.badge-danger  { background:var(--color-danger-alpha);  color:var(--color-danger); }
.badge-info    { background:var(--color-info-alpha);    color:var(--color-info); }
.badge-purple  { background:var(--color-purple-alpha);  color:var(--color-purple); }
.badge-neutral { background:var(--bg-surface-3); color:var(--text-secondary); }

/* ══════════════════════════════════════  TOGGLE */
.toggle { position:relative; display:inline-block; width:44px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0; background:var(--border-color-strong);
  border-radius:22px; cursor:pointer; transition:background var(--t-base);
}
.toggle-track::before {
  content:''; position:absolute;
  height:16px; width:16px; left:3px; top:3px;
  background:white; border-radius:50%;
  transition:transform var(--t-spring); box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-track { background:var(--color-primary); }
.toggle input:checked + .toggle-track::before { transform:translateX(22px); }

/* ══════════════════════════════════════  TABS */
.tabs {
  display:flex; gap:2px; border-bottom:1px solid var(--border-color);
  margin-bottom:var(--sp-5); overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:9px 18px; font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--text-secondary); background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:color var(--t-fast), border-color var(--t-fast);
  margin-bottom:-1px; font-family:var(--font-sans);
}
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }

/* ══════════════════════════════════════  PROGRESS BAR */
.progress { height:7px; background:var(--border-color); border-radius:var(--border-radius-full); overflow:hidden; }
.progress-fill {
  height:100%; border-radius:var(--border-radius-full);
  background:var(--color-primary); transition:width 0.9s cubic-bezier(0.4,0,0.2,1);
  animation:fillBar 0.9s cubic-bezier(0.4,0,0.2,1) both;
}
.progress-fill.c-success { background:var(--color-accent); }
.progress-fill.c-warning { background:var(--color-warning); }
.progress-fill.c-danger  { background:var(--color-danger); }

/* ══════════════════════════════════════  TOAST */
#toast-root {
  position:fixed; bottom:var(--sp-5); right:var(--sp-5);
  z-index:9000; display:flex; flex-direction:column; gap:var(--sp-2);
  max-width:360px; pointer-events:none;
}
.toast {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  background:var(--bg-surface); border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg); padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--shadow-xl); animation:slideInRight 0.3s cubic-bezier(0.34,1.20,0.64,1);
  pointer-events:all; min-width:270px;
}
.toast.out { animation:slideOutRight 0.3s ease forwards; }
.toast-ico { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.toast-txt { flex:1; }
.toast-title { font-size:var(--text-sm); font-weight:var(--fw-semibold); }
.toast-msg   { font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px; }
.toast-x { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:0; }
.toast-x:hover { color:var(--text-primary); }
.toast.t-success { border-left:3px solid var(--color-accent); }
.toast.t-error   { border-left:3px solid var(--color-danger); }
.toast.t-warning { border-left:3px solid var(--color-warning); }
.toast.t-info    { border-left:3px solid var(--color-info); }

/* ══════════════════════════════════════  ACTIVITY FEED */
.activity-feed { display:flex; flex-direction:column; }
.activity-row {
  display:flex; gap:var(--sp-3); padding:var(--sp-3) 0;
  position:relative;
}
.activity-row:not(:last-child)::after {
  content:''; position:absolute;
  left:15px; top:42px; bottom:0; width:1px;
  background:var(--border-color);
}
.a-dot {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px;
}
.a-content { flex:1; }
.a-content p { font-size:var(--text-sm); line-height:1.4; }
.a-content time { font-size:11px; color:var(--text-muted); }

/* ══════════════════════════════════════  EMPLOYEE / PROJECT CARDS */
.emp-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--sp-3);
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.emp-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.emp-avatar {
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),var(--color-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:var(--fw-bold); color:white;
  overflow:hidden; flex-shrink:0;
}
.emp-avatar img { width:100%; height:100%; object-fit:cover; }
.emp-name { font-weight:var(--fw-semibold); font-size:var(--text-base); }
.emp-role { font-size:var(--text-xs); color:var(--text-muted); }

.proj-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.proj-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* ══════════════════════════════════════  SETTINGS */
.settings-sec {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg); padding:var(--sp-6);
  margin-bottom:var(--sp-5);
}
.settings-sec-title {
  font-size:var(--text-base); font-weight:var(--fw-semibold);
  margin-bottom:var(--sp-5); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; gap:var(--sp-2);
}
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--border-color);
  gap:var(--sp-4); flex-wrap:wrap;
}
.settings-row:last-child { border-bottom:none; }
.settings-row-info label { font-size:var(--text-sm); font-weight:var(--fw-medium); display:block; }
.settings-row-info p { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

/* ══════════════════════════════════════  HELPERS */
.divider { border:none; border-top:1px solid var(--border-color); margin:var(--sp-4) 0; }
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--sp-12); text-align:center;
  color:var(--text-muted); gap:var(--sp-3);
}
.empty-state svg { opacity:0.35; }
.empty-state p { font-size:var(--text-sm); }

.color-swatches { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.color-swatch {
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:border-color var(--t-fast), transform var(--t-fast);
}
.color-swatch:hover { transform:scale(1.2); }
.color-swatch.selected { border-color:var(--text-primary); }

.hidden { display:none !important; }
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
.flex{display:flex} .items-center{align-items:center}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.flex-wrap{flex-wrap:wrap} .flex-col{flex-direction:column} .flex-1{flex:1}
.w-full{width:100%} .text-center{text-align:center}
.relative{position:relative} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.p-4{padding:var(--sp-4)} .p-5{padding:var(--sp-5)} .p-6{padding:var(--sp-6)} .p-0{padding:0}
.font-semibold{font-weight:var(--fw-semibold)} .font-bold{font-weight:var(--fw-bold)}
.text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)} .text-lg{font-size:var(--text-lg)}
.text-xl{font-size:var(--text-xl)} .text-2xl{font-size:var(--text-2xl)} .text-3xl{font-size:var(--text-3xl)}
.text-primary{color:var(--text-primary)} .text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)} .text-danger{color:var(--color-danger)}
.text-success{color:var(--color-accent)} .text-warning{color:var(--color-warning)}
.c-primary{color:var(--color-primary)} .c-success{color:var(--color-accent)}
.grid{display:grid} .p-0{padding:0!important}

/* ══════════════════════════════════════  LAYOUT RESET */
html,body { height:100%; margin:0; padding:0; overflow:hidden; background:var(--bg-body); }
#app-shell { height:100vh; display:flex; flex-direction:column; }
#app-root { flex:1; display:flex; overflow:hidden; }

/* ══════════════════════════════════════  SKELETON */
.skeleton {
  background:linear-gradient(90deg,var(--bg-surface-2) 25%,var(--border-color) 50%,var(--bg-surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
  border-radius:var(--border-radius);
}

/* ══════════════════════════════════════  Role badges */
.role-admin {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--color-primary-alpha); color:var(--color-primary);
  font-size:11px; font-weight:var(--fw-semibold); padding:2px 8px;
  border-radius:var(--border-radius-full);
}
.role-agent {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--color-warning-alpha); color:var(--color-warning);
  font-size:11px; font-weight:var(--fw-semibold); padding:2px 8px;
  border-radius:var(--border-radius-full);
}

/* ══════════════════════════════════════  BUSINESS CARDS */
.biz-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--border-radius-lg); padding:var(--sp-5);
  transition:box-shadow var(--t-base), transform var(--t-base);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.biz-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.biz-status-line { position:absolute; top:0; left:0; right:0; height:3.5px; }
.biz-status-line.active    { background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light)); }
.biz-status-line.pending   { background:linear-gradient(90deg,var(--color-warning),var(--color-warning-light)); }
.biz-status-line.inactive,
.biz-status-line.completed { background:var(--text-muted); }

/* ══════════════════════════════════════  EXCEL / LEDGER TABLE */
.excel-wrap { overflow-x:auto; border-radius:var(--border-radius-lg); border:1px solid var(--border-color); }
.excel-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); white-space:nowrap; }
.excel-table th {
  background:var(--bg-surface-2); padding:10px 12px; border:1px solid var(--border-color);
  font-weight:var(--fw-semibold); font-size:var(--text-xs); color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.1em; position:sticky; top:0; z-index:1;
}
.excel-table td { padding:0; border:1px solid var(--border-color); height:42px; vertical-align:middle; }
.excel-table td input, .excel-table td select {
  width:100%; height:100%; padding:8px 12px; border:none; background:transparent;
  font-size:var(--text-sm); color:var(--text-primary); outline:none;
  font-family:var(--font-sans); min-width:120px;
}
.excel-table td input:focus, .excel-table td select:focus {
  background:var(--color-primary-alpha); box-shadow:inset 0 0 0 2px var(--color-primary);
}
.excel-table tr:hover td { background:var(--bg-surface-2); }
.excel-table tfoot td {
  background:var(--bg-surface-2); padding:10px 12px; font-weight:var(--fw-bold);
  font-size:var(--text-xs); border:1px solid var(--border-color); color:var(--text-primary);
}
.excel-table .row-num {
  width:40px; text-align:center; background:var(--bg-surface-2);
  color:var(--text-muted); font-size:10px; font-weight:var(--fw-semibold);
  padding:0 8px; cursor:default;
}

/* Ledger-specific */
.ledger-wrap { height:calc(100vh - 260px); overflow:auto; border-radius:var(--border-radius-lg); border:1px solid var(--border-color); }
.ledger-toolbar {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); background:var(--bg-surface);
  border-bottom:1px solid var(--border-color);
}
.ledger-status {
  margin-left:auto; font-size:var(--text-xs); color:var(--text-muted);
  display:flex; align-items:center; gap:var(--sp-1);
}
.ledger-summary {
  display:flex; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  background:var(--bg-surface-2); border-top:1px solid var(--border-color);
  flex-wrap:wrap;
}
.ledger-sum-item { display:flex; flex-direction:column; }
.ledger-sum-label { font-size:10px; color:var(--text-muted); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:0.06em; }
.ledger-sum-val { font-size:var(--text-sm); font-weight:var(--fw-bold); color:var(--text-primary); }

/* ══════════════════════════════════════  CHART CONTAINERS */
.chart-container { position:relative; min-height:200px; width:100%; }
.chart-container canvas { max-width:100%; }

/* ══════════════════════════════════════  AVATAR */
.avatar-ring {
  width:90px; height:90px; border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),var(--color-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:var(--fw-bold); color:white;
  overflow:hidden; cursor:pointer;
  border:4px solid var(--bg-surface); outline:1px solid var(--border-color);
  transition:transform var(--t-fast);
}
.avatar-ring:hover { transform:scale(1.05); }
.avatar-ring img { width:100%; height:100%; object-fit:cover; }

.avatar-upload { display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.avatar-preview {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),var(--color-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:var(--fw-bold); color:white;
  overflow:hidden; cursor:pointer;
  border:3px solid var(--border-color);
  position:relative; transition:opacity var(--t-fast);
}
.avatar-preview:hover { opacity:0.85; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════════════  SWATCHES */
.swatch-grid { display:flex; flex-wrap:wrap; gap:10px; }
.swatch-color {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:all var(--t-fast);
}
.swatch-color:hover { transform:scale(1.15); }
.swatch-color.active-swatch { border-color:var(--text-primary); box-shadow:0 0 0 2px var(--bg-surface); }

/* Compat */
.swatch { width:32px; height:32px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all var(--t-fast); }
.swatch:hover { transform:scale(1.15); }
.swatch.active-swatch { border-color:var(--text-primary); }

/* ══════════════════════════════════════  ROW ACTIONS */
.row-actions { display:flex; align-items:center; gap:2px; }

/* ══════════════════════════════════════  STATUS INDICATOR */
.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--border-radius-full);
  font-size:11px; font-weight:var(--fw-semibold);
}
.status-badge.active  { background:var(--color-accent-alpha); color:var(--color-accent); }
.status-badge.inactive{ background:var(--bg-surface-3); color:var(--text-muted); }
.status-badge.pending { background:var(--color-warning-alpha); color:var(--color-warning); }
.status-badge.running { background:var(--color-primary-alpha); color:var(--color-primary); }
.status-badge.error   { background:var(--color-danger-alpha); color:var(--color-danger); }

/* ══════════════════════════════════════  LANG TOGGLE */
.lang-btn {
  height:32px; padding:0 12px;
  border-radius:var(--border-radius-full);
  border:1px solid var(--border-color-strong);
  background:var(--bg-surface-2);
  font-size:var(--text-xs); font-weight:var(--fw-semibold);
  cursor:pointer; color:var(--text-secondary);
  transition:all var(--t-fast); font-family:var(--font-sans);
  display:flex; align-items:center; gap:4px;
}
.lang-btn:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-alpha); }

/* ══════════════════════════════════════  RESPONSIVE UTILS */
@media (max-width:768px) {
  .hide-mob { display:none !important; }
  .grid-4, .g4 { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px) {
  .grid-4, .g4, .grid-3, .g3 { grid-template-columns:1fr !important; }
  .hide-xs { display:none !important; }
}

/* ══════════════════════════════════════  Print */
@media print {
  .sidebar, .topbar { display:none !important; }
  .main-wrapper { margin-left:0 !important; }
}