/* =================================================================
   RANDEVUPS · UI PRIMITIVES  (shared)
   Reset + base type + buton/badge/field/avatar/status + theme toggle
   + reveal utility + skeleton. theme.css'ten SONRA yüklenir.
   ================================================================= */

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
::selection{background:var(--accent-200); color:var(--text);}

h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-0.02em; color:var(--text);}
.num,.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}

/* focus visibility */
:focus-visible{outline:none; box-shadow:var(--ring);}

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border-radius:11px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  cursor:pointer; border:1px solid var(--hairline); background:var(--surface); color:var(--text); white-space:nowrap;
  transition: transform var(--dur-xs) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out),
              background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm);
}
.btn-primary{ background:var(--btn-bg); color:var(--btn-ink); box-shadow:var(--shadow-2); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-3); background:var(--accent-700); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--hairline-2); }
.btn-ghost:hover{ border-color:var(--accent-400); color:var(--accent-600); }
.btn-dark{ background:var(--text); color:var(--bg); }
.btn-dark:hover{ opacity:.9; }
.btn-lg{ padding:13px 26px; font-size:15.5px; border-radius:var(--r-md); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ============================== ICON BTN ============================== */
.icon-btn{
  width:38px; height:38px; border-radius:var(--r-sm);
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--hairline); color:var(--text-2);
  transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm);
}
.icon-btn:hover{ border-color:var(--accent-400); color:var(--accent-600); background:var(--accent-50); }

/* ============================== THEME TOGGLE ============================== */
.theme-toggle{
  width:40px; height:40px; border-radius:var(--r-sm);
  display:inline-grid; place-items:center; cursor:pointer; flex:none;
  background:var(--surface); border:1px solid var(--hairline); color:var(--text-2);
  transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm);
}
.theme-toggle:hover{ border-color:var(--accent-400); color:var(--accent-600); }
.theme-toggle svg{ width:18px; height:18px; transition: transform var(--dur-md) var(--ease-out), opacity var(--dur-sm); }
.theme-toggle .ic-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .ic-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .ic-moon{ display:block; }

/* ============================== BADGE ============================== */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--accent-50); color:var(--accent-600);
  border:1px solid var(--accent-100);
  font-size:12px; font-weight:600; font-family:var(--font-body);
  letter-spacing:.01em;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-500);}
.badge.dark{ background:var(--surface-2); color:var(--text); border-color:var(--hairline); }

/* ============================== STATUS PILLS ============================== */
.st{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:600; font-family:var(--font-body);}
.st .dot{width:5px;height:5px;border-radius:50%;}
.st-ok{background:var(--success-bg); color:var(--success);} .st-ok .dot{background:var(--success);}
.st-wait{background:var(--warning-bg); color:var(--warning);} .st-wait .dot{background:var(--warning);}
.st-done{background:var(--info-bg); color:var(--info);} .st-done .dot{background:var(--info);}
.st-cancel{background:var(--danger-bg); color:var(--danger);} .st-cancel .dot{background:var(--danger);}

/* ============================== AVATAR TINTS ============================== */
.av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:12.5px; flex:none; font-family:var(--font-body);}
.av-1{background:var(--tint-1); color:var(--tint-1-ink);}
.av-2{background:var(--tint-5); color:var(--tint-5-ink);}
.av-3{background:var(--tint-3); color:var(--tint-3-ink);}
.av-4{background:var(--tint-2); color:var(--tint-2-ink);}
.av-5{background:var(--tint-4); color:var(--tint-4-ink);}
.av-6{background:var(--tint-6); color:var(--tint-6-ink);}

/* ============================== FORM FIELDS ============================== */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:6px;}
.field label .opt{color:var(--text-3); font-weight:500;}
.input{
  width:100%; padding:12px 14px;
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r-sm);
  font:inherit; font-size:14.5px; color:var(--text);
  transition: border-color var(--dur-sm), box-shadow var(--dur-sm);
}
.input::placeholder{color:var(--text-3);}
.input:focus{outline:none; border-color:var(--accent-500); box-shadow:var(--ring);}
textarea.input{resize:vertical; min-height:84px;}
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7780' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}
.check{
  appearance:none; width:18px; height:18px; border:1.5px solid var(--hairline-2); border-radius:5px;
  background:var(--surface); cursor:pointer; flex:none; position:relative; transition:all var(--dur-sm);
}
.check:checked{background:var(--accent-600); border-color:var(--accent-600);}
.check:checked::after{content:""; position:absolute; left:5px; top:1px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* ============================== SKELETON ============================== */
.skeleton{
  position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-sm);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%); animation:shimmer 1.4s linear infinite;
}
html[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);}
@keyframes shimmer{to{transform:translateX(100%);}}
@media (prefers-reduced-motion: reduce){ .skeleton::after{display:none;} }

/* ============================== EMPTY STATE ============================== */
.empty{ text-align:center; padding:48px 24px; color:var(--text-3); }
.empty .empty-ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-2); color:var(--accent-500); }
.empty h4{ font-size:18px; color:var(--text); margin-bottom:6px; }
.empty p{ font-size:14px; max-width:340px; margin:0 auto; }

/* =====================================================================
   ADMIN SHELL  (.app / .sidebar / .main / .topbar / .content)
   Class adları admin-mobile.css + JS enjektörleriyle uyumlu kalır.
   ===================================================================== */
:root{ --sidebar-w:260px; --topbar-h:68px; }

.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; overflow:hidden; }

/* ---------- Sidebar (açık zemin, gruplu) ---------- */
.sidebar{
  background:var(--sb-bg); border-right:1px solid var(--sb-hairline);
  display:flex; flex-direction:column; padding:18px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--hairline-2) transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:3px; }
.sb-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 4px; margin-bottom:14px; }
.sb-mark{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--text); color:var(--bg); flex:none; }
html[data-theme="dark"] .sb-mark{ background:var(--surface-3); color:var(--accent-300); }
.sb-brand-name{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.03em; color:var(--text); }
.sb-label{ font-family:var(--font-body); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); padding:14px 12px 6px; }
.sb-link{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:var(--sb-ink); font-family:var(--font-body); font-size:13.5px; font-weight:500; transition:background var(--dur-sm), color var(--dur-sm); position:relative; }
.sb-link:hover{ background:var(--surface-2); color:var(--text); }
.sb-link .ic{ width:18px; height:18px; flex:none; color:var(--text-3); transition:color var(--dur-sm); }
.sb-link:hover .ic{ color:var(--accent-600); }
.sb-link.active{ background:var(--sb-active-bg); color:var(--sb-active-ink); font-weight:600; }
.sb-link.active::before{ content:""; position:absolute; left:-14px; top:7px; bottom:7px; width:3px; background:var(--accent-500); border-radius:0 3px 3px 0; }
.sb-link.active .ic{ color:var(--sb-active-ink); }
.sb-link .count{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:700; background:var(--surface-2); color:var(--text-2); padding:2px 7px; border-radius:99px; }
.sb-link.active .count{ background:var(--accent-100); color:var(--accent-700); }
.sb-foot{ margin-top:auto; padding:12px 6px 4px; border-top:1px solid var(--sb-hairline); }
.sb-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; transition:background var(--dur-sm); }
.sb-user:hover{ background:var(--surface-2); }
.sb-user .av{ width:34px; height:34px; border-radius:50%; background:var(--accent-600); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12.5px; }
.sb-user-name{ font-size:13px; font-weight:600; color:var(--text); line-height:1.2; }
.sb-user-role{ font-size:11.5px; color:var(--text-3); }
.sb-user-chev{ margin-left:auto; color:var(--text-3); }

/* ---------- Main + Topbar ---------- */
.main{ display:flex; flex-direction:column; min-width:0; overflow-y:auto; background:var(--bg); }
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--hairline); height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 26px;
}
.breadcrumbs{ font-family:var(--font-body); font-size:13px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.breadcrumbs strong{ color:var(--text); font-weight:600; }
.breadcrumbs .sep{ color:var(--hairline-2); }
.topbar-search{ flex:1; max-width:380px; margin-left:4px; position:relative; }
.topbar-search input{ width:100%; padding:9px 14px 9px 36px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-pill); font:inherit; font-size:13.5px; color:var(--text); transition:border-color var(--dur-sm), box-shadow var(--dur-sm); }
.topbar-search input::placeholder{ color:var(--text-3); }
.topbar-search input:focus{ outline:none; border-color:var(--accent-500); box-shadow:var(--ring); }
.topbar-search .ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.topbar-search kbd{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:10px; color:var(--text-3); background:var(--surface-2); border:1px solid var(--hairline); border-radius:6px; padding:2px 6px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.page-title{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.page-title h1{ font-size:22px; font-weight:700; color:var(--text); font-family:var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
.page-title h1 .tag{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; background:var(--info-bg); color:var(--info); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-ui); flex:none; }
#superadmin-link{ display:none; padding:7px 12px; background:var(--info-bg); color:var(--info); border:1px solid color-mix(in srgb,var(--info) 25%,transparent); border-radius:var(--r-sm); font-weight:600; font-size:12.5px; text-decoration:none; white-space:nowrap; }
#superadmin-link:hover{ background:var(--info); color:#fff; }
.topbar-actions .icon-btn{ width:38px; height:38px; border-radius:var(--r-sm); position:relative; }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--accent-500); border:2px solid var(--surface); display:none; }
.icon-btn .dot.show{ display:block; }

/* ---------- Business switcher ---------- */
.biz-switch{ display:none; align-items:center; gap:8px; padding:7px 12px 7px 8px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); cursor:pointer; transition:border-color var(--dur-sm); position:relative; }
.biz-switch.show{ display:flex; }
.biz-switch:hover{ border-color:var(--accent-400); }
.biz-switch .bz-av{ width:24px; height:24px; border-radius:7px; background:var(--accent-100); color:var(--accent-700); display:grid; place-items:center; font-weight:700; font-size:11px; }
.biz-switch .bz-name{ font-size:13px; font-weight:600; color:var(--text); }
.biz-switch .bz-chev{ color:var(--text-3); }
.biz-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:240px; max-height:360px; overflow-y:auto; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); box-shadow:var(--shadow-2); padding:6px; z-index:40; display:none; }
.biz-menu.open{ display:block; }
.biz-menu .biz-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background var(--dur-sm); }
.biz-menu .biz-row:hover{ background:var(--surface-2); }
.biz-menu .biz-row.active{ background:var(--accent-50); color:var(--accent-700); }
.biz-menu .biz-row .av{ width:26px; height:26px; border-radius:7px; background:var(--accent-100); color:var(--accent-700); display:grid; place-items:center; font-weight:700; font-size:11px; flex:none; }
.biz-menu .biz-row .nm{ font-size:13px; font-weight:600; color:var(--text); }
.biz-menu .biz-row .sub{ font-size:11px; color:var(--text-3); }
.biz-menu-h{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding:8px 10px 4px; }

/* ---------- Notifications popover ---------- */
.notif-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:380px; max-height:560px; overflow:hidden; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); box-shadow:var(--shadow-3); opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transform-origin:top right; transition:opacity var(--dur-sm), transform var(--dur-md) var(--ease-out); display:flex; flex-direction:column; }
.notif-pop.open{ opacity:1; transform:none; pointer-events:auto; }
.notif-h{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--hairline); }
.notif-h h4{ font-size:14px; font-weight:600; }
.notif-h button{ background:none; border:0; font:inherit; font-size:12px; font-weight:600; color:var(--accent-600); cursor:pointer; }
.notif-list{ overflow-y:auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.notif-item{ display:flex; align-items:flex-start; gap:11px; padding:14px 16px; border-bottom:1px solid var(--hairline); cursor:pointer; transition:background var(--dur-sm); flex:none; }
.notif-item:last-child{ border-bottom:0; }
.notif-item:hover{ background:var(--surface-2); }
.notif-item.unread{ background:var(--accent-50); }
.notif-item .nico{ width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; }
.ni-ok{ background:var(--success-bg); color:var(--success); }
.ni-info{ background:var(--info-bg); color:var(--info); }
.ni-warn{ background:var(--warning-bg); color:var(--warning); }
.ni-rose{ background:var(--accent-50); color:var(--accent-600); }
.notif-item .nbody{ flex:1; min-width:0; }
.notif-item .nt{ font-size:13px; font-weight:600; }
.notif-item .nb{ font-size:12.5px; color:var(--text-2); margin-top:2px; line-height:1.4; }
.notif-item .ntime{ font-size:11px; color:var(--text-3); margin-top:4px; }
.natt-actions{ display:flex; gap:6px; margin-top:8px; }
.natt-btn{ flex:1; padding:6px 10px; border-radius:8px; border:1px solid var(--hairline); background:var(--surface); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all var(--dur-sm); display:flex; align-items:center; justify-content:center; gap:4px; }
.natt-btn.ok{ color:var(--success); border-color:color-mix(in srgb, var(--success) 35%, transparent); }
.natt-btn.ok:hover{ background:var(--success-bg); }
.natt-btn.no{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.natt-btn.no:hover{ background:var(--danger-bg); }

/* ---------- Content + page header ---------- */
.content{ flex:1; padding:28px; display:flex; flex-direction:column; gap:22px; }
.page-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-h h1{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; line-height:1.1; letter-spacing:-0.02em; }
.page-h .meta{ font-family:var(--font-body); font-size:13.5px; color:var(--text-3); margin-top:6px; }
.page-h .meta strong{ color:var(--text); font-weight:600; }
.page-h .actions{ display:flex; gap:10px; align-items:center; }
.range-tabs{ display:flex; gap:3px; padding:3px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); }
.range-tabs button{ padding:7px 14px; font:inherit; font-size:13px; font-weight:600; background:transparent; border:0; border-radius:8px; color:var(--text-3); cursor:pointer; transition:all var(--dur-sm); }
.range-tabs button:hover{ color:var(--text); }
.range-tabs button.active{ background:var(--text); color:var(--bg); }
.chip-soft{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--accent-50); border:1px solid var(--accent-100); border-radius:var(--r-pill); color:var(--accent-700); font-family:var(--font-body); font-size:12px; font-weight:600; }

/* ---------- KPI (LimeCare: ok chip + ilk kart dolgulu) ---------- */
.kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:1500px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-card-inset); position:relative; transition:transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md), border-color var(--dur-md); }
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--accent-300); }
.kpi-label{ font-family:var(--font-body); font-size:11.5px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding-right:36px; }
.kpi-value{ font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.05; margin-top:12px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.kpi-value small{ font-size:17px; color:var(--text-3); margin-left:2px; font-weight:600; }
.kpi-arrow{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:1px solid var(--hairline-2); display:grid; place-items:center; color:var(--text-3); background:transparent; }
.kpi-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.delta{ display:inline-flex; align-items:center; gap:3px; font-family:var(--font-body); font-size:12px; font-weight:700; }
.delta.up{ color:var(--success); } .delta.down{ color:var(--danger); } .delta.flat{ color:var(--text-3); }
.delta .lbl{ color:var(--text-3); font-weight:500; margin-left:4px; }
.kpi.hi{ background:#0E7490; border-color:#0E7490; }
.kpi.hi .kpi-label{ color:rgba(255,255,255,.78); }
.kpi.hi .kpi-value, .kpi.hi .kpi-value small{ color:#fff; }
.kpi.hi .kpi-arrow{ background:#fff; color:#0E7490; border-color:#fff; }
.kpi.hi .delta, .kpi.hi .delta .lbl{ color:rgba(255,255,255,.78); }

/* ---------- Cards / rows / tables ---------- */
.row-3{ display:grid; grid-template-columns:2fr 1fr; gap:18px; }
@media (max-width:1180px){ .row-3{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card-inset); }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--hairline); }
.card-h h3{ font-size:16px; font-weight:600; }
.card-h .sub{ font-family:var(--font-body); font-size:12.5px; color:var(--text-3); margin-top:2px; }
.card-h-r{ display:flex; align-items:center; gap:8px; }
.more{ font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--accent-600); padding:6px 10px; border-radius:8px; cursor:pointer; transition:background var(--dur-sm); }
.more:hover{ background:var(--accent-50); }
.table-wrap{ padding:4px 10px 12px; }
table.staff{ width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:13.5px; }
table.staff th{ text-align:left; padding:12px; font-weight:600; font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--hairline); }
table.staff th.r{ text-align:right; }
table.staff td{ padding:14px 12px; border-bottom:1px solid var(--hairline); vertical-align:middle; }
table.staff tbody tr:last-child td{ border-bottom:0; }
table.staff tbody tr{ transition:background var(--dur-sm); }
table.staff tbody tr:hover{ background:var(--surface-2); }
.staff-name{ display:flex; align-items:center; gap:11px; }
.staff-name .av{ width:34px; height:34px; font-size:12.5px; }
.staff-name .nm{ font-weight:600; color:var(--text); }
.staff-name .rl{ font-size:11.5px; color:var(--text-3); margin-top:1px; }
.progress{ width:100%; height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.progress > span{ display:block; height:100%; border-radius:99px; background:var(--accent-500); }
.progress-row{ display:flex; align-items:center; gap:10px; min-width:220px; }
.progress-row .num{ min-width:48px; text-align:right; font-size:12.5px; }

@media (max-width:1024px){
  :root{ --sidebar-w:0px; }
  .topbar-search{ display:none; }
}

/* ============================== REVEAL UTILITY ============================== */
[data-reveal]{ opacity:0; transform:translateY(14px); transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out); will-change:opacity,transform; }
[data-reveal].reveal-done{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1; transform:none;} }