/* Mono SaaS — monochromatický kit, jedna akcentová farba.
   Prepínanie témy: <html data-theme="light|dark"> */
:root{
  --ms-accent:#ff5a1f; --ms-accent-fg:#ffffff;
  --ms-bg:#ffffff; --ms-surface:#ffffff; --ms-raised:#fafafa;
  --ms-fg:#111113; --ms-mut:#6f7076; --ms-faint:#9b9ca2;
  --ms-line:#e5e5e8; --ms-line-strong:#d0d0d5;
  --ms-radius:8px; --ms-radius-lg:12px;
  --ms-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px -12px rgba(0,0,0,.14);
  --ms-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,sans-serif;
  --ms-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-theme="dark"]{
  --ms-bg:#09090b; --ms-surface:#121214; --ms-raised:#17171a;
  --ms-fg:#f1f1f2; --ms-mut:#8e9096; --ms-faint:#6b6d73;
  --ms-line:#26262b; --ms-line-strong:#35353c;
  --ms-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.8);
}
/* Bez toho sa sirka 100 % pocita bez paddingu a ramu, takze vstupy
   pretecu z karty von. */
*,*::before,*::after{box-sizing:border-box}
body{background:var(--ms-bg);color:var(--ms-fg);font-family:var(--ms-font);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ms-stack{display:flex;flex-direction:column;gap:14px}
.ms-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* --- typografia --- */
.ms-h1{font-size:26px;font-weight:680;letter-spacing:-.022em;margin:0}
.ms-h2{font-size:18px;font-weight:640;letter-spacing:-.014em;margin:0}
.ms-eyebrow{font:600 10px/1 var(--ms-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ms-faint)}
.ms-muted{color:var(--ms-mut)}

/* --- tlačidlá --- */
.ms-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border-radius:var(--ms-radius);border:1px solid transparent;background:var(--ms-fg);
  color:var(--ms-bg);font:600 13.5px/1 var(--ms-font);cursor:pointer;
  transition:.14s ease;white-space:nowrap}
.ms-btn:hover{opacity:.86}
.ms-btn:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}
.ms-btn--accent{background:var(--ms-accent);color:var(--ms-accent-fg)}
.ms-btn--outline{background:transparent;color:var(--ms-fg);border-color:var(--ms-line-strong)}
.ms-btn--outline:hover{background:var(--ms-raised);opacity:1}
.ms-btn--ghost{background:transparent;color:var(--ms-mut)}
.ms-btn--ghost:hover{background:var(--ms-raised);color:var(--ms-fg);opacity:1}
.ms-btn--sm{height:29px;padding:0 11px;font-size:12.5px}
.ms-btn--lg{height:44px;padding:0 22px;font-size:15px}
.ms-btn[disabled]{opacity:.4;cursor:not-allowed}

/* --- formuláre --- */
.ms-field{display:flex;flex-direction:column;gap:6px}
.ms-label{font-size:12.5px;font-weight:600;color:var(--ms-fg)}
.ms-hint{font-size:12px;color:var(--ms-mut)}
.ms-input,.ms-select,.ms-textarea{width:100%;background:var(--ms-surface);
  border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius);
  color:var(--ms-fg);font:14px/1.5 var(--ms-font);padding:9px 11px;transition:.14s}
.ms-textarea{min-height:84px;resize:vertical}
.ms-input::placeholder,.ms-textarea::placeholder{color:var(--ms-faint)}
.ms-input:focus,.ms-select:focus,.ms-textarea:focus{outline:none;
  border-color:var(--ms-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ms-accent) 18%,transparent)}
.ms-input--err{border-color:#d93a3a}
.ms-err{font-size:12px;color:#d93a3a}
.ms-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px}
.ms-check input{accent-color:var(--ms-accent);width:15px;height:15px}
.ms-switch{position:relative;width:38px;height:22px;flex:0 0 auto}
.ms-switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ms-switch span{position:absolute;inset:0;border-radius:999px;background:var(--ms-line-strong);
  pointer-events:none;transition:.16s}
.ms-switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:.16s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ms-switch input:checked+span{background:var(--ms-accent)}
.ms-switch input:checked+span::after{transform:translateX(16px)}

/* --- karty --- */
.ms-card{background:var(--ms-surface);border:1px solid var(--ms-line);
  border-radius:var(--ms-radius-lg);padding:18px}
.ms-card--raised{box-shadow:var(--ms-shadow)}
.ms-card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ms-card__title{font-size:15px;font-weight:640;margin:0}
.ms-stat{font-size:30px;font-weight:660;letter-spacing:-.03em;line-height:1.1}
.ms-delta{font:600 12px/1 var(--ms-mono);color:var(--ms-accent)}

/* --- badge --- */
.ms-badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;
  border-radius:999px;border:1px solid var(--ms-line-strong);background:var(--ms-raised);
  font:600 11px/1 var(--ms-font);color:var(--ms-mut)}
.ms-badge--solid{background:var(--ms-fg);color:var(--ms-bg);border-color:transparent}
.ms-badge--accent{background:var(--ms-accent);color:var(--ms-accent-fg);border-color:transparent}
.ms-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* --- tabuľka --- */
.ms-table-wrap{border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
  overflow-x:auto;background:var(--ms-surface)}
.ms-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.ms-table th{text-align:left;padding:10px 14px;font:600 10.5px/1 var(--ms-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ms-faint);
  border-bottom:1px solid var(--ms-line);white-space:nowrap}
.ms-table td{padding:11px 14px;border-bottom:1px solid var(--ms-line)}
.ms-table tr:last-child td{border-bottom:0}
.ms-table tbody tr:hover{background:var(--ms-raised)}
.ms-table__num{text-align:right;font-variant-numeric:tabular-nums}

/* --- navigácia --- */
.ms-topbar{display:flex;align-items:center;gap:16px;height:54px;padding:0 18px;
  border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);background:var(--ms-surface)}
.ms-logo{display:flex;align-items:center;gap:8px;font-weight:680;letter-spacing:-.02em}
.ms-logo__mark{width:9px;height:9px;border-radius:2px;background:var(--ms-accent)}
.ms-nav{display:flex;gap:2px;margin-left:10px}
.ms-nav a{padding:7px 11px;border-radius:var(--ms-radius);color:var(--ms-mut);
  text-decoration:none;font-size:13.5px;font-weight:500}
.ms-nav a:hover{background:var(--ms-raised);color:var(--ms-fg)}
.ms-nav a[aria-current]{color:var(--ms-fg);background:var(--ms-raised)}
.ms-sidenav{width:210px;border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);
  padding:10px;background:var(--ms-surface);display:flex;flex-direction:column;gap:1px}
.ms-sidenav a{padding:8px 10px;border-radius:var(--ms-radius);color:var(--ms-mut);
  text-decoration:none;font-size:13.5px;font-weight:500}
.ms-sidenav a:hover{background:var(--ms-raised);color:var(--ms-fg)}
.ms-sidenav a[aria-current]{color:var(--ms-fg);background:var(--ms-raised);
  box-shadow:inset 2px 0 0 var(--ms-accent)}
.ms-tabs{display:flex;gap:20px;border-bottom:1px solid var(--ms-line)}
.ms-tabs a{padding:10px 1px;color:var(--ms-mut);text-decoration:none;font-size:13.5px;
  font-weight:550;border-bottom:2px solid transparent;margin-bottom:-1px}
.ms-tabs a[aria-current]{color:var(--ms-fg);border-bottom-color:var(--ms-accent)}

/* --- modál (statický náhľad) --- */
.ms-modal{background:var(--ms-surface);border:1px solid var(--ms-line);
  border-radius:var(--ms-radius-lg);box-shadow:var(--ms-shadow);max-width:440px;overflow:hidden}
.ms-modal__head{padding:18px 20px 0}
.ms-modal__body{padding:10px 20px 18px;color:var(--ms-mut);font-size:13.5px}
.ms-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;
  border-top:1px solid var(--ms-line);background:var(--ms-raised)}

/* --- prázdny stav / toast / avatar --- */
.ms-empty{text-align:center;padding:44px 20px;border:1px dashed var(--ms-line-strong);
  border-radius:var(--ms-radius-lg)}
.ms-empty__icon{width:40px;height:40px;margin:0 auto 14px;border-radius:10px;
  border:1px solid var(--ms-line-strong);display:grid;place-items:center;color:var(--ms-faint)}
.ms-toast{display:flex;align-items:center;gap:11px;padding:12px 14px;max-width:380px;
  background:var(--ms-fg);color:var(--ms-bg);border-radius:var(--ms-radius);
  box-shadow:var(--ms-shadow);font-size:13.5px}
.ms-toast__bar{width:3px;align-self:stretch;border-radius:2px;background:var(--ms-accent)}
.ms-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--ms-raised);border:1px solid var(--ms-line-strong);
  font:600 12px/1 var(--ms-font);color:var(--ms-mut)}
.ms-progress{height:6px;border-radius:999px;background:var(--ms-line);overflow:hidden}
.ms-progress>i{display:block;height:100%;background:var(--ms-accent)}

/* --- kruhové prvky ---
   Ikonkové tlačidlá a počítadlá v kruhu. Dátové sú plné, akčné obrysové:
   rovnaký tvar, iná váha. Akcent nesie len to, čo naozaj niečo mení. */
.ms-icon-btn{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  padding:0;border-radius:50%;border:1px solid var(--ms-line-strong);
  background:transparent;color:var(--ms-mut);cursor:pointer;
  transition:background .16s cubic-bezier(.25,.1,.25,1),border-color .16s,
    color .16s,transform .16s}
.ms-icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-icon-btn:hover{color:var(--ms-fg);border-color:var(--ms-fg)}
.ms-icon-btn:active{transform:scale(.94)}
.ms-icon-btn:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}
.ms-icon-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.ms-icon-btn--sm{width:26px;height:26px}
.ms-icon-btn--sm svg{width:13px;height:13px}
.ms-icon-btn--lg{width:40px;height:40px}
.ms-icon-btn--lg svg{width:18px;height:18px}
/* hlavná akcia bez farby — vyníma sa len kontrastom */
.ms-icon-btn--strong{color:var(--ms-fg)}
.ms-icon-btn--strong:hover{color:var(--ms-fg);border-color:var(--ms-fg);
  background:color-mix(in srgb,var(--ms-fg) 8%,transparent)}
/* primárna akcia — vyníma sa farbou, nie výplňou */
.ms-icon-btn--accent{border-color:var(--ms-accent);color:var(--ms-accent)}
.ms-icon-btn--accent:hover{color:var(--ms-accent);border-color:var(--ms-accent);
  background:color-mix(in srgb,var(--ms-accent) 14%,transparent)}
.ms-icon-btn--solid{background:var(--ms-accent);color:var(--ms-accent-fg);
  border-color:transparent}
.ms-icon-btn--solid:hover{color:var(--ms-accent-fg);border-color:transparent;
  filter:brightness(1.08)}
.ms-icon-btn--danger:hover{color:#d93a3a;border-color:#d93a3a;
  background:color-mix(in srgb,#d93a3a 12%,transparent)}
/* počas akcie: ikonka sa schová a točí sa prstenec */
.ms-icon-btn.is-busy{pointer-events:none;position:relative}
.ms-icon-btn.is-busy svg{opacity:0}
.ms-icon-btn.is-busy::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:ms-spin .6s linear infinite}
@keyframes ms-spin{to{transform:rotate(360deg)}}

/* počítadlo v kruhu — čierne v svetlej téme, svetlé v tmavej */
.ms-pill{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  flex:0 0 auto;border-radius:999px;background:var(--ms-fg);color:var(--ms-bg);
  font:600 11px/1 var(--ms-mono);font-variant-numeric:tabular-nums}
.ms-pill--accent{background:var(--ms-accent);color:var(--ms-accent-fg)}
.ms-pill--quiet{background:var(--ms-raised);color:var(--ms-mut);
  border:1px solid var(--ms-line-strong)}
/* obrysový krúžok s ikonkou — akcia vedľa počítadiel */
.ms-pill-btn{display:grid;place-items:center;width:21px;height:21px;flex:0 0 auto;
  padding:0;border-radius:999px;border:1px solid var(--ms-line-strong);
  background:transparent;color:var(--ms-faint);cursor:pointer;
  transition:opacity .14s,color .14s,border-color .14s,background .14s}
.ms-pill-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-pill-btn:hover{color:var(--ms-fg);border-color:var(--ms-fg)}
.ms-pill-btn--danger:hover{color:#d93a3a;border-color:#d93a3a;
  background:color-mix(in srgb,#d93a3a 12%,transparent)}
.ms-pill-btn:focus-visible{outline:2px solid var(--ms-accent);outline-offset:1px}

/* --- pulz ---
   Znak života. Prstenec pulzuje okolo prvku, nie prvok samotný, takže
   číslica vnútri zostáva ostrá a čitateľná. */
.ms-pulse{animation:ms-pulse-ring 2.1s ease-out infinite}
@keyframes ms-pulse-ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ms-accent) 60%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ms-accent) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ms-accent) 0%,transparent)}}
/* bodka, ktorá bliká sama v sebe — do badge alebo pred text */
.ms-dot{width:6px;height:6px;border-radius:50%;background:currentColor;
  display:inline-block;flex:0 0 auto}
.ms-dot--pulse{animation:ms-dot-pulse 1.6s ease-in-out infinite}
@keyframes ms-dot-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){
  .ms-pulse,.ms-dot--pulse{animation:none}}

/* --- tooltip ---
   Natívny title nabieha až po sekunde a nedá sa naštýlovať. Tento sa
   ukazuje nad prvkom; v hornej lište stránky ho preklop cez .ms-tip--below. */
[data-tip]{position:relative}
[data-tip]::after,[data-tip]::before{position:absolute;bottom:calc(100% + 9px);
  left:50%;opacity:0;pointer-events:none;z-index:70;
  transition:opacity .14s ease,transform .14s cubic-bezier(.25,.1,.25,1)}
[data-tip]::after{content:attr(data-tip);transform:translate(-50%,3px);
  padding:5px 9px;max-width:240px;width:max-content;background:var(--ms-fg);
  color:var(--ms-bg);border-radius:6px;font:500 11.5px/1.35 var(--ms-font);
  text-align:center;text-transform:none;letter-spacing:0;box-shadow:var(--ms-shadow)}
[data-tip]::before{content:"";bottom:calc(100% + 4px);transform:translate(-50%,3px);
  border:5px solid transparent;border-top-color:var(--ms-fg)}
[data-tip]:hover::after,[data-tip]:hover::before,
[data-tip]:focus-visible::after,[data-tip]:focus-visible::before{
  opacity:1;transform:translate(-50%,0)}
/* pod prvkom — keď nad ním nie je miesto */
.ms-tip--below[data-tip]::after,.ms-tip--below[data-tip]::before{
  bottom:auto;top:calc(100% + 9px)}
.ms-tip--below[data-tip]::before{top:calc(100% + 4px);
  border-top-color:transparent;border-bottom-color:var(--ms-fg)}
/* pri pravom okraji — aby tooltip nepretiekol von */
.ms-tip--end[data-tip]::after{left:auto;right:0;transform:translate(0,3px)}
.ms-tip--end[data-tip]:hover::after{transform:translate(0,0)}
.ms-tip--end[data-tip]::before{left:auto;right:5px;transform:translate(50%,3px)}
.ms-tip--end[data-tip]:hover::before{transform:translate(50%,0)}