/* ===========================================================================
   TOP1 — Termin Online Plan · Salon Management Platform
   Shared design system (bound from active DESIGN.md). Light-first, dark-ready.
   Paste-once tokens; every screen file links this stylesheet.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* brand scale (azure-cyan, sampled from logo) */
  --brand-50:#e6f6fd; --brand-100:#c2eafa; --brand-200:#8fd8f4; --brand-300:#5bc6ee;
  --brand-400:#29b4e9; --brand-500:#00a8e4; --brand-600:#0089bc; --brand-700:#0379a8;
  --brand-800:#015b7f; --brand-900:#033247;

  /* action / accent */
  --primary:#0379a8; --primary-hover:#02638a; --primary-active:#02516f; --primary-fg:#ffffff;
  --primary-soft:#e6f6fd; --primary-soft-fg:#015b7f;
  --accent:#00a8e4;
  --ring: color-mix(in srgb, #00a8e4 55%, transparent);

  /* surfaces & text */
  --canvas:#f5f7fa; --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f9fb; --surface-3:#eef2f7;
  --fg:#0f172a; --fg-strong:#020617; --muted:#64748b; --subtle:#94a3b8;
  --border:#e3e8ef; --border-strong:#cbd5e1;

  /* status */
  --success:#16a34a; --success-bg:#dcfce7; --success-fg:#14532d;
  --warning:#d97706; --warning-bg:#fef3c7; --warning-fg:#7c2d12;
  --danger:#dc2626;  --danger-bg:#fee2e2;  --danger-fg:#7f1d1d;
  --info:#0089bc;    --info-bg:#e6f6fd;    --info-fg:#015b7f;

  /* type */
  --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --text-xs:12px; --text-sm:14px; --text-base:15px; --text-md:16px; --text-lg:18px;
  --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* radius */
  --radius-sm:6px; --radius-md:8px; --radius-btn:12px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;

  /* shadow (hairline-first) */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.07);
  --shadow-md:0 6px 20px rgba(15,23,42,.10);
  --shadow-lg:0 18px 48px rgba(15,23,42,.18);
  --shadow-focus:0 0 0 3px var(--ring);
  --overlay: color-mix(in srgb, #020617 48%, transparent);

  /* layout */
  --sidebar-w:248px; --topbar-h:60px; --rail-w:336px; --container:1280px;

  /* motion */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1.2);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms;
}

[data-theme="dark"] {
  --primary:#29b4e9; --primary-hover:#5bc6ee; --primary-active:#8fd8f4; --primary-fg:#03253a;
  --primary-soft:#0f2a3c; --primary-soft-fg:#8fd8f4; --accent:#29b4e9;
  --canvas:#0b1220; --bg:#0b1220; --surface:#111a2b; --surface-2:#0f192a; --surface-3:#16223a;
  --fg:#e6edf5; --fg-strong:#f3f7fc; --muted:#93a4bc; --subtle:#64748b;
  --border:#1e2a3d; --border-strong:#2a3a52;
  --success-bg:#0e2a1a; --success-fg:#86efac; --warning-bg:#2a1f08; --warning-fg:#fcd34d;
  --danger-bg:#2a1113; --danger-fg:#fca5a5; --info-bg:#0f2a3c; --info-fg:#8fd8f4;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px rgba(0,0,0,.55); --shadow-lg:0 18px 48px rgba(0,0,0,.6);
  --overlay: color-mix(in srgb, #000 62%, transparent);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--canvas); color:var(--fg);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; color:inherit;}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); color:var(--fg-strong); letter-spacing:-0.02em; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.muted{color:var(--muted);}
::selection{background:var(--brand-100); color:var(--brand-900);}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;}
.app.has-rail .work{display:grid; grid-template-columns:1fr var(--rail-w);}

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:40;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; height:var(--topbar-h); padding:0 var(--space-5); border-bottom:1px solid var(--border);}
.brand-mark{width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:13px; flex:none;}
.brand-word{display:flex; flex-direction:column; line-height:1.05;}
.brand-word b{font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-0.03em; color:var(--fg-strong);}
.brand-word span{font-size:10px; color:var(--muted); letter-spacing:.04em;}

.nav{padding:var(--space-4) var(--space-3); overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:2px;}
.nav-label{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--subtle); padding:var(--space-4) var(--space-3) var(--space-2);}
.nav-item{display:flex; align-items:center; gap:11px; height:40px; padding:0 var(--space-3); border-radius:var(--radius-md);
  color:var(--muted); font-weight:500; font-size:var(--text-sm); position:relative; transition:background var(--dur-fast), color var(--dur-fast);}
.nav-item svg{width:18px; height:18px; flex:none;}
.nav-item:hover{background:var(--surface-3); color:var(--fg);}
.nav-item.active{background:var(--primary-soft); color:var(--primary-soft-fg); font-weight:600;}
.nav-item.active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--accent);}
.nav-item .badge-count{margin-left:auto; background:var(--surface-3); color:var(--muted); font-size:11px; padding:1px 7px; border-radius:var(--radius-full); font-family:var(--font-mono);}
.nav-item.active .badge-count{background:var(--accent); color:#fff;}
.sidebar-foot{border-top:1px solid var(--border); padding:var(--space-3); display:flex; align-items:center; gap:10px;}
.avatar{width:32px; height:32px; border-radius:var(--radius-full); display:grid; place-items:center; font-weight:600; font-size:13px; color:#fff; flex:none;}
.avatar.sm{width:26px; height:26px; font-size:11px;}
.avatar.lg{width:44px; height:44px; font-size:16px;}

.main{display:flex; flex-direction:column; min-width:0;}
.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--space-4); padding:0 var(--space-6);
  background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.menu-btn{display:none; width:38px; height:38px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); place-items:center;}
.page-title{font-size:var(--text-xl); font-weight:700; letter-spacing:-0.02em;}
.topbar-spacer{flex:1;}

/* tenant / location switcher */
.tenant{display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast);}
.tenant:hover{border-color:var(--accent);}
.tenant .dot{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; flex:none;}
.tenant .t-meta{display:flex; flex-direction:column; line-height:1.1; text-align:left;}
.tenant .t-meta b{font-size:13px; font-weight:600;}
.tenant .t-meta span{font-size:11px; color:var(--muted);}
.tenant .chev{color:var(--muted);}

.search{display:flex; align-items:center; gap:8px; height:38px; width:280px; max-width:32vw; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); color:var(--muted);}
.search input{border:0; background:transparent; outline:none; flex:1; font:inherit; font-size:var(--text-sm); color:var(--fg);}
.search kbd{font-family:var(--font-mono); font-size:11px; border:1px solid var(--border); border-radius:5px; padding:1px 5px; color:var(--subtle);}

.icon-btn{width:38px; height:38px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); display:grid; place-items:center; color:var(--muted); position:relative; transition:border-color var(--dur-fast), color var(--dur-fast);}
.icon-btn:hover{border-color:var(--border-strong); color:var(--fg);}
.icon-btn .ping{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--surface);}

.content{padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-6); flex:1;}
.content.pad-lg{padding:var(--space-8);}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;}
.page-head .sub{color:var(--muted); font-size:var(--text-sm); margin-top:4px;}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
  border-radius:var(--radius-btn); border:1px solid transparent; font-family:var(--font-body); font-weight:600;
  font-size:var(--text-sm); white-space:nowrap; transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);}
.btn svg{width:16px; height:16px;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none; box-shadow:var(--shadow-focus);}
.btn-primary{background:var(--primary); color:var(--primary-fg);}
.btn-primary:hover{background:var(--primary-hover);}
.btn-secondary{background:var(--surface); color:var(--fg); border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--fg); }
.btn-ghost{background:transparent; color:var(--muted);}
.btn-ghost:hover{background:var(--surface-3); color:var(--fg);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{filter:brightness(.94);}
.btn-sm{height:30px; padding:0 12px; font-size:var(--text-xs);}
.btn-lg{height:44px; padding:0 22px; font-size:var(--text-md);}
.btn-icon{width:38px; padding:0;}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px;}
.label{font-size:var(--text-sm); font-weight:500; color:var(--fg);}
.hint{font-size:var(--text-xs); color:var(--muted);}
.input,.select,.textarea{width:100%; height:38px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--fg); font:inherit; font-size:var(--text-sm); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
.textarea{height:auto; min-height:88px; padding:10px 12px; resize:vertical; line-height:1.5;}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--shadow-focus);}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:34px;}
.switch{position:relative; width:40px; height:23px; border-radius:999px; background:var(--border-strong); border:0; transition:background var(--dur-base); flex:none;}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-base);}
.switch[aria-checked="true"]{background:var(--primary);}
.switch[aria-checked="true"]::after{transform:translateX(17px);}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);}
.card-pad{padding:var(--space-5);}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border);}
.card-head h3{font-size:var(--text-lg); font-weight:600;}
.card-head .card-sub{font-size:var(--text-xs); color:var(--muted); margin-top:2px;}

.grid{display:grid; gap:var(--space-5);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
.g-2-1{grid-template-columns:2fr 1fr;}
.g-1-2{grid-template-columns:1fr 2fr;}

/* ── KPI tiles ─────────────────────────────────────────────────────────── */
.kpi{padding:var(--space-5); display:flex; flex-direction:column; gap:10px;}
.kpi-top{display:flex; align-items:center; justify-content:space-between;}
.kpi-ico{width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-soft-fg);}
.kpi-ico svg{width:18px; height:18px;}
.kpi-label{font-size:var(--text-sm); color:var(--muted); font-weight:500;}
.kpi-value{font-family:var(--font-display); font-weight:700; font-size:var(--text-3xl); letter-spacing:-0.03em; line-height:1;}
.kpi-value .u{font-size:var(--text-lg); color:var(--muted); font-weight:600; margin-left:4px;}
.trend{display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-weight:600; font-family:var(--font-mono);}
.trend.up{color:var(--success);} .trend.down{color:var(--danger);} .trend.flat{color:var(--muted);}

/* ── Badges / pills ────────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; line-height:1;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge.plain::before{display:none;}
.badge.success{background:var(--success-bg); color:var(--success-fg);}
.badge.warning{background:var(--warning-bg); color:var(--warning-fg);}
.badge.danger{background:var(--danger-bg); color:var(--danger-fg);}
.badge.info{background:var(--info-bg); color:var(--info-fg);}
.badge.neutral{background:var(--surface-3); color:var(--muted);}
.badge.brand{background:var(--primary-soft); color:var(--primary-soft-fg);}

/* ── Tables ────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;}
.tbl{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
.tbl thead th{background:var(--surface-2); color:var(--muted); font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:11px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1;}
.tbl tbody td{padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background var(--dur-fast);}
.tbl tbody tr:hover{background:var(--surface-2);}
.tbl .right{text-align:right;}
.tbl .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.cust{display:flex; align-items:center; gap:10px;}
.cust .nm{font-weight:600; color:var(--fg-strong);}
.cust .sub{font-size:var(--text-xs); color:var(--muted);}

.toolbar{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px;}
.seg button{height:30px; padding:0 14px; border:0; background:transparent; border-radius:6px; font-size:var(--text-sm); font-weight:500; color:var(--muted);}
.seg button.active{background:var(--surface); color:var(--fg); box-shadow:var(--shadow-xs); font-weight:600;}
.chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--surface); font-size:var(--text-sm); color:var(--muted);}
.chip.active{background:var(--primary-soft); color:var(--primary-soft-fg); border-color:transparent; font-weight:600;}

/* ── Drawer / Modal ────────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:var(--overlay); opacity:0; visibility:hidden; transition:opacity var(--dur-base); z-index:60;}
.scrim.open{opacity:1; visibility:visible;}
.drawer{position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-emphasized); z-index:70; display:flex; flex-direction:column;}
.drawer.open{transform:none;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:var(--space-5); border-bottom:1px solid var(--border);}
.drawer-body{padding:var(--space-5); overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:var(--space-5);}
.drawer-foot{padding:var(--space-4) var(--space-5); border-top:1px solid var(--border); display:flex; gap:var(--space-3); justify-content:flex-end;}
.modal{position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); width:520px; max-width:94vw; max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity var(--dur-base), transform var(--dur-base) var(--ease-emphasized); z-index:70;}
.modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%);}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);}

/* ── Rail ──────────────────────────────────────────────────────────────── */
.rail{border-left:1px solid var(--border); background:var(--surface); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); overflow-y:auto;}

/* ── Misc ──────────────────────────────────────────────────────────────── */
.divider{height:1px; background:var(--border); border:0; margin:0;}
.empty{display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px; color:var(--muted); text-align:center;}
.pagination{display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-5); border-top:1px solid var(--border); font-size:var(--text-sm); color:var(--muted);}
.pagination .pages{display:flex; gap:6px;}
.pagination .pages button{width:30px; height:30px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); font-size:var(--text-sm); color:var(--muted);}
.pagination .pages button.active{background:var(--primary); color:#fff; border-color:transparent;}

/* bar chart (CSS) */
.bars{display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:8px;}
.bars .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bars .bar{width:100%; max-width:34px; border-radius:6px 6px 0 0; background:var(--brand-200); position:relative; transition:background var(--dur-fast);}
.bars .bar.hi{background:linear-gradient(180deg,var(--brand-400),var(--brand-600));}
.bars .bar-col:hover .bar{background:var(--brand-500);}
.bars .bx{font-size:11px; color:var(--muted); font-family:var(--font-mono);}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:sk 1.4s linear infinite; border-radius:6px;}
@keyframes sk{to{background-position:-200% 0;}}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  :root{--sidebar-w:0px;}
  .sidebar{position:fixed; left:0; top:0; width:248px; transform:translateX(-100%); transition:transform var(--dur-slow);}
  .sidebar.open{transform:none;}
  .app{grid-template-columns:1fr;}
  .menu-btn{display:grid;}
  .app.has-rail .work{grid-template-columns:1fr;}
  .rail{border-left:0; border-top:1px solid var(--border);}
}
@media (max-width:1024px){
  .g-2-1,.g-1-2{grid-template-columns:1fr;}
  .cols-4{grid-template-columns:repeat(2,1fr);}
  .cols-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .search{display:none;}
  .content{padding:var(--space-4);}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
  .tenant .t-meta{display:none;}
  .page-title{font-size:var(--text-lg);}
}