/* ==========================================================================
   M-Port — designový systém (app.css)
   Fáze 1. Bez externích fontů, bez CDN. Systémový font stack, originální SVG.
   Zdroj tokenů: docs/UX_UI_SPECIFIKACE.md §2.
   ========================================================================== */

/* 1. Design tokeny ------------------------------------------------------- */
:root {
  /* Primární (trust blue) */
  --color-primary-50:#eff6ff; --color-primary-100:#dbeafe; --color-primary-200:#bfdbfe;
  --color-primary-300:#93c5fd; --color-primary-400:#60a5fa; --color-primary-500:#3b82f6;
  --color-primary-600:#2563eb; --color-primary-700:#1d4ed8; --color-primary-800:#1e40af;
  --color-primary-900:#1e3a8a;

  /* Akcent (zdrženlivé indigo – focus/aktivní stav) */
  --color-accent-400:#818cf8; --color-accent-500:#6366f1; --color-accent-600:#4f46e5;

  /* Neutrální slate */
  --color-slate-50:#f8fafc; --color-slate-100:#f1f5f9; --color-slate-200:#e2e8f0;
  --color-slate-300:#cbd5e1; --color-slate-400:#94a3b8; --color-slate-500:#64748b;
  --color-slate-600:#475569; --color-slate-700:#334155; --color-slate-800:#1e293b;
  --color-slate-900:#0f172a;

  --color-surface:#ffffff;
  --color-bg:var(--color-slate-50);
  --color-border:var(--color-slate-200);
  --color-border-strong:var(--color-slate-300);
  --color-text:var(--color-slate-700);
  --color-text-strong:var(--color-slate-900);
  --color-text-muted:var(--color-slate-500);
  --color-text-inverse:#ffffff;

  /* Sémantické stavy */
  --color-success-600:#16a34a; --color-success-700:#15803d; --color-success-50:#f0fdf4; --color-success-200:#bbf7d0;
  --color-warning-600:#d97706; --color-warning-700:#b45309; --color-warning-50:#fffbeb; --color-warning-200:#fde68a;
  --color-danger-600:#dc2626;  --color-danger-700:#b91c1c;  --color-danger-50:#fef2f2;  --color-danger-200:#fecaca;
  --color-info-600:#0284c7;    --color-info-700:#0369a1;    --color-info-50:#f0f9ff;    --color-info-200:#bae6fd;

  /* Typografie */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;
  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.55; --leading-relaxed:1.7;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-wide:0.04em; --tracking-eyebrow:0.08em;

  /* Spacing (4px) */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* Poloměry */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px; --radius-full:9999px;

  /* Stíny */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 12px 28px rgba(15,23,42,.10);
  --shadow-xl:0 24px 48px -12px rgba(15,23,42,.18);

  --focus-ring:0 0 0 3px rgba(79,70,229,.35);
  --focus-ring-danger:0 0 0 3px rgba(220,38,38,.30);

  --layout-max:1180px;
  --sidebar-w:264px;
  --topbar-h:62px;
  --transition:150ms ease;
  --transition-slow:280ms cubic-bezier(.4,0,.2,1);

  --z-sticky:100; --z-dropdown:200; --z-overlay:900; --z-modal:1000; --z-toast:1100;
}

/* 2. Reset / báze ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;font-size:16px}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,svg,video{display:block;max-width:100%}
svg{flex-shrink:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--color-primary-700);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-primary-800)}
h1,h2,h3,h4{color:var(--color-text-strong);line-height:var(--leading-tight);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug)}
h1{font-size:var(--text-4xl);letter-spacing:var(--tracking-tight)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{line-height:var(--leading-relaxed)}
ul,ol{padding-left:1.25rem}
hr{border:0;border-top:1px solid var(--color-border)}
code,kbd,samp{font-family:var(--font-mono);font-size:.875em}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--color-primary-100);color:var(--color-primary-900)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-text-strong);color:#fff;
  padding:var(--space-2) var(--space-4);border-radius:0 0 var(--radius-md) 0;z-index:var(--z-toast)}
.skip-link:focus{left:0;color:#fff}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 3. Layout primitivy --------------------------------------------------- */
.container{width:100%;max-width:var(--layout-max);margin-inline:auto;padding-inline:var(--space-6)}
.container--narrow{max-width:760px}
.section{padding-block:var(--space-20)}
.stack>*+*{margin-top:var(--space-4)}
.stack-sm>*+*{margin-top:var(--space-2)}
.stack-lg>*+*{margin-top:var(--space-8)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.cluster--between{justify-content:space-between}
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* 4. Typografické pomůcky ---------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--color-primary-700)}
.lead{font-size:var(--text-lg);color:var(--color-slate-600);line-height:var(--leading-relaxed)}
.muted{color:var(--color-text-muted)}
.strong{color:var(--color-text-strong);font-weight:var(--weight-semibold)}
.text-sm{font-size:var(--text-sm)}
.text-xs{font-size:var(--text-xs)}
.tnum{font-variant-numeric:tabular-nums}
.display{font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.05;letter-spacing:var(--tracking-tight);
  font-weight:var(--weight-bold);color:var(--color-text-strong)}

/* 5. Tlačítka ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1;
  padding:.625rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background var(--transition),border-color var(--transition),
  color var(--transition),box-shadow var(--transition),transform var(--transition);
  text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn .icon{width:18px;height:18px}
.btn--primary{background:var(--color-primary-600);color:#fff;box-shadow:var(--shadow-xs)}
.btn--primary:hover{background:var(--color-primary-700);color:#fff}
.btn--secondary{background:var(--color-surface);color:var(--color-text-strong);border-color:var(--color-border-strong)}
.btn--secondary:hover{background:var(--color-slate-50);border-color:var(--color-slate-400)}
.btn--ghost{background:transparent;color:var(--color-slate-600)}
.btn--ghost:hover{background:var(--color-slate-100);color:var(--color-text-strong)}
.btn--danger{background:var(--color-danger-600);color:#fff}
.btn--danger:hover{background:var(--color-danger-700);color:#fff}
.btn--danger:focus-visible{box-shadow:var(--focus-ring-danger)}
.btn--sm{padding:.4rem .7rem;font-size:var(--text-xs)}
.btn--lg{padding:.8rem 1.4rem;font-size:var(--text-base)}
.btn--block{width:100%}
.btn--icon{padding:.5rem;width:38px;height:38px}

/* 6. Formuláře ---------------------------------------------------------- */
.field{display:block}
.field+.field{margin-top:var(--space-5)}
.label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--color-text-strong);margin-bottom:var(--space-2)}
.label .req{color:var(--color-danger-600);margin-left:2px}
.hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.input,.textarea,.select{
  width:100%;background:var(--color-surface);color:var(--color-text-strong);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:.6rem .75rem;font-size:var(--text-sm);transition:border-color var(--transition),box-shadow var(--transition);
}
.input::placeholder,.textarea::placeholder{color:var(--color-slate-400)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--color-slate-400)}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--color-accent-600);box-shadow:var(--focus-ring)}
.textarea{min-height:7rem;resize:vertical;line-height:var(--leading-normal)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.2rem}
.input-group{position:relative;display:flex;align-items:center}
.input-group .input{padding-left:2.4rem}
.input-group .input-icon{position:absolute;left:.75rem;color:var(--color-slate-400);width:18px;height:18px;pointer-events:none}

.field--error .input,.field--error .textarea,.field--error .select{border-color:var(--color-danger-600)}
.field--error .input:focus{box-shadow:var(--focus-ring-danger)}
.error-text{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  color:var(--color-danger-700);margin-top:var(--space-2);font-weight:var(--weight-medium)}
.error-text .icon{width:14px;height:14px;flex-shrink:0}

/* check / radio / switch */
.check{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-sm)}
.check input[type=checkbox],.check input[type=radio]{
  appearance:none;width:18px;height:18px;margin-top:2px;border:1px solid var(--color-border-strong);
  background:var(--color-surface);cursor:pointer;flex-shrink:0;transition:var(--transition)}
.check input[type=checkbox]{border-radius:5px}
.check input[type=radio]{border-radius:var(--radius-full)}
.check input:checked{background:var(--color-primary-600);border-color:var(--color-primary-600)}
.check input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat}
.check input[type=radio]:checked{box-shadow:inset 0 0 0 3px var(--color-surface)}
.check input:focus-visible{box-shadow:var(--focus-ring)}
.switch{position:relative;display:inline-flex;align-items:center}
.switch input{appearance:none;width:40px;height:22px;border-radius:var(--radius-full);
  background:var(--color-slate-300);cursor:pointer;transition:var(--transition)}
.switch input:checked{background:var(--color-primary-600)}
.switch input:focus-visible{box-shadow:var(--focus-ring)}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;
  border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition)}
.switch input:checked::after{transform:translateX(18px)}

/* 7. Karty / panely ----------------------------------------------------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card__body{padding:var(--space-6)}
.card__header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.card__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-strong)}
.card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);
  background:var(--color-slate-50);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}

/* 8. Odznaky / stavové pilulky ----------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);
  font-weight:var(--weight-semibold);padding:.2rem .55rem;border-radius:var(--radius-full);
  border:1px solid transparent;line-height:1.4;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--neutral{background:var(--color-slate-100);color:var(--color-slate-600);border-color:var(--color-slate-200)}
.badge--success{background:var(--color-success-50);color:var(--color-success-700);border-color:var(--color-success-200)}
.badge--warning{background:var(--color-warning-50);color:var(--color-warning-700);border-color:var(--color-warning-200)}
.badge--danger{background:var(--color-danger-50);color:var(--color-danger-700);border-color:var(--color-danger-200)}
.badge--info{background:var(--color-info-50);color:var(--color-info-700);border-color:var(--color-info-200)}
.badge--primary{background:var(--color-primary-50);color:var(--color-primary-700);border-color:var(--color-primary-200)}

/* 9. Alerty / bannery --------------------------------------------------- */
.alert{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}
.alert__icon{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.alert__title{font-weight:var(--weight-semibold);color:var(--color-text-strong);font-size:var(--text-sm)}
.alert__body{font-size:var(--text-sm);line-height:var(--leading-normal)}
.alert__close{margin-left:auto;background:transparent;border:0;cursor:pointer;color:var(--color-slate-400);padding:2px;border-radius:var(--radius-sm)}
.alert__close:hover{color:var(--color-text-strong)}
.alert--info{background:var(--color-info-50);border-color:var(--color-info-200)}
.alert--info .alert__icon{color:var(--color-info-600)}
.alert--success{background:var(--color-success-50);border-color:var(--color-success-200)}
.alert--success .alert__icon{color:var(--color-success-600)}
.alert--warning{background:var(--color-warning-50);border-color:var(--color-warning-200)}
.alert--warning .alert__icon{color:var(--color-warning-700)}
.alert--danger{background:var(--color-danger-50);border-color:var(--color-danger-200)}
.alert--danger .alert__icon{color:var(--color-danger-600)}

/* 10. Tabulky ----------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:var(--color-text-muted);font-weight:var(--weight-semibold);background:var(--color-slate-50);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}
.table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);
  color:var(--color-text);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--transition)}
.table tbody tr:hover{background:var(--color-slate-50)}
.table .cell-strong{color:var(--color-text-strong);font-weight:var(--weight-medium)}
.table--align-right th:last-child,.table--align-right td:last-child{text-align:right}

/* 11. Veřejná navigace -------------------------------------------------- */
.navbar{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(255,255,255,.85);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--color-border)}
.navbar__inner{display:flex;align-items:center;gap:var(--space-6);height:var(--topbar-h)}
.navbar__links{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.navbar__link{padding:.45rem .7rem;border-radius:var(--radius-md);font-size:var(--text-sm);
  font-weight:var(--weight-medium);color:var(--color-slate-600)}
.navbar__link:hover{background:var(--color-slate-100);color:var(--color-text-strong)}
.navbar__link[aria-current="page"]{color:var(--color-primary-700)}
.navbar__actions{display:flex;align-items:center;gap:var(--space-3)}

/* Logo / značka */
.brand{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-bold);
  color:var(--color-text-strong);letter-spacing:var(--tracking-snug)}
.brand__mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--color-primary-600),var(--color-accent-600));box-shadow:var(--shadow-sm)}
.brand__mark svg{width:18px;height:18px;color:#fff}
.brand__name{font-size:var(--text-base)}
.brand__name b{color:var(--color-primary-700)}

.nav-toggle{display:none;background:transparent;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md);padding:.4rem;cursor:pointer;color:var(--color-slate-600)}

/* 12. App shell --------------------------------------------------------- */
.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"sidebar topbar" "sidebar main"}
.app__topbar{grid-area:topbar;position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;gap:var(--space-4);padding-inline:var(--space-5)}
.app__sidebar{grid-area:sidebar;background:var(--color-surface);border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.app__main{grid-area:main;padding:var(--space-8);max-width:1100px;width:100%}
.app__sidebar-head{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}

/* Sidebar navigace */
.side-nav{padding:var(--space-4) var(--space-3);flex:1}
.side-nav__group+.side-nav__group{margin-top:var(--space-6)}
.side-nav__label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--color-slate-400);font-weight:var(--weight-semibold);padding:0 var(--space-3);margin-bottom:var(--space-2)}
.side-link{display:flex;align-items:center;gap:var(--space-3);padding:.55rem var(--space-3);border-radius:var(--radius-md);
  color:var(--color-slate-600);font-size:var(--text-sm);font-weight:var(--weight-medium);position:relative;transition:var(--transition)}
.side-link .icon{width:18px;height:18px;color:var(--color-slate-400);transition:var(--transition)}
.side-link:hover{background:var(--color-slate-100);color:var(--color-text-strong)}
.side-link:hover .icon{color:var(--color-slate-600)}
.side-link[aria-current="page"]{background:var(--color-primary-50);color:var(--color-primary-700)}
.side-link[aria-current="page"] .icon{color:var(--color-primary-600)}
.side-link[aria-current="page"]::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:var(--radius-full);background:var(--color-accent-600)}
.side-link__badge{margin-left:auto;font-size:var(--text-xs)}
.side-link--locked{opacity:.6}
.side-link--locked .icon{color:var(--color-slate-300)}

/* 13. Workspace switcher + dropdown ------------------------------------- */
.dropdown{position:relative}
.dropdown__menu{position:absolute;z-index:var(--z-dropdown);min-width:240px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-2);margin-top:var(--space-2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition)}
.dropdown__menu--right{right:0}
.dropdown.is-open .dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown__item{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  padding:.55rem .7rem;border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text);
  background:transparent;border:0;cursor:pointer;transition:var(--transition)}
.dropdown__item:hover{background:var(--color-slate-100);color:var(--color-text-strong)}
.dropdown__item .icon{width:16px;height:16px;color:var(--color-slate-400)}
.dropdown__sep{height:1px;background:var(--color-border);margin:var(--space-2) 0}
.dropdown__heading{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:var(--color-slate-400);font-weight:var(--weight-semibold);padding:.4rem .7rem}

.ws-switch{display:flex;align-items:center;gap:var(--space-3);padding:.45rem .6rem;border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:100%;transition:var(--transition)}
.ws-switch:hover{border-color:var(--color-slate-400);background:var(--color-slate-50)}
.ws-avatar{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font-size:var(--text-xs);font-weight:var(--weight-bold);background:var(--color-slate-700);flex-shrink:0}
.ws-switch__info{text-align:left;line-height:1.25;min-width:0}
.ws-switch__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-switch__meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.ws-switch__chev{margin-left:auto;color:var(--color-slate-400);width:16px;height:16px}

.avatar-btn{display:flex;align-items:center;gap:var(--space-2);background:transparent;border:0;cursor:pointer;padding:.2rem;border-radius:var(--radius-full)}
.avatar{width:34px;height:34px;border-radius:var(--radius-full);display:grid;place-items:center;
  background:var(--color-primary-100);color:var(--color-primary-700);font-weight:var(--weight-bold);font-size:var(--text-sm)}

/* 14. Taby -------------------------------------------------------------- */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border)}
.tab{padding:.6rem .9rem;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-slate-500);
  border:0;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition)}
.tab:hover{color:var(--color-text-strong)}
.tab[aria-selected="true"]{color:var(--color-primary-700);border-bottom-color:var(--color-primary-600)}

/* 15. Modal ------------------------------------------------------------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:var(--z-overlay);
  display:grid;place-items:center;padding:var(--space-4);opacity:0;visibility:hidden;transition:var(--transition)}
.overlay.is-open{opacity:1;visibility:visible}
.modal{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  width:100%;max-width:460px;transform:translateY(8px) scale(.98);transition:transform var(--transition-slow);overflow:hidden}
.overlay.is-open .modal{transform:none}
.modal__head{padding:var(--space-5) var(--space-6);display:flex;align-items:flex-start;gap:var(--space-3)}
.modal__icon{width:40px;height:40px;border-radius:var(--radius-full);display:grid;place-items:center;flex-shrink:0}
.modal__icon--danger{background:var(--color-danger-50);color:var(--color-danger-600)}
.modal__icon--primary{background:var(--color-primary-50);color:var(--color-primary-600)}
.modal__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-strong)}
.modal__body{padding:0 var(--space-6) var(--space-4);font-size:var(--text-sm);color:var(--color-text)}
.modal__foot{padding:var(--space-4) var(--space-6);background:var(--color-slate-50);border-top:1px solid var(--color-border);
  display:flex;justify-content:flex-end;gap:var(--space-3)}

/* 16. Toast ------------------------------------------------------------- */
.toast-region{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--space-3);max-width:380px}
.toast{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-text-strong);color:#fff;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  animation:toast-in var(--transition-slow)}
.toast .icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.toast--success .icon{color:#4ade80}
.toast--danger .icon{color:#f87171}
.toast__body{font-size:var(--text-sm)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 17. Prázdný stav / stavové stránky ----------------------------------- */
.empty{text-align:center;padding:var(--space-12) var(--space-6);max-width:460px;margin-inline:auto}
.empty__art{width:64px;height:64px;border-radius:var(--radius-xl);display:grid;place-items:center;margin:0 auto var(--space-5);
  background:var(--color-slate-100);color:var(--color-slate-400)}
.empty__art .icon{width:30px;height:30px}
.empty__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-strong);margin-bottom:var(--space-2)}
.empty__text{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-5)}
.state-art--info{background:var(--color-info-50);color:var(--color-info-600)}
.state-art--warning{background:var(--color-warning-50);color:var(--color-warning-700)}
.state-art--danger{background:var(--color-danger-50);color:var(--color-danger-600)}
.state-art--primary{background:var(--color-primary-50);color:var(--color-primary-600)}

/* 18. Skeleton / loading ------------------------------------------------ */
.skeleton{background:linear-gradient(90deg,var(--color-slate-100) 25%,var(--color-slate-200) 37%,var(--color-slate-100) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-sm)}
.skeleton--text{height:.8rem;margin-block:.35rem}
.skeleton--title{height:1.2rem;width:50%}
.skeleton--line-80{width:80%}.skeleton--line-60{width:60%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.spinner{width:20px;height:20px;border:2px solid var(--color-slate-200);border-top-color:var(--color-primary-600);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.spinner--lg{width:32px;height:32px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* 19. Statistiky / KPI -------------------------------------------------- */
.stat{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.stat__label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.stat__value{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-text-strong);
  letter-spacing:var(--tracking-tight);margin-top:var(--space-2);font-variant-numeric:tabular-nums}
.stat__delta{font-size:var(--text-xs);font-weight:var(--weight-semibold);margin-top:var(--space-1)}
.stat__delta--up{color:var(--color-success-700)}
.stat__delta--down{color:var(--color-danger-700)}

/* 20. Modulové karty (dashboard) --------------------------------------- */
.module-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);
  box-shadow:var(--shadow-xs);transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition)}
.module-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);transform:translateY(-2px)}
.module-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.module-icon{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;color:#fff}
.module-icon svg{width:22px;height:22px}
.module-icon--reservations{background:linear-gradient(140deg,var(--color-primary-600),var(--color-accent-600))}
.module-icon--files{background:linear-gradient(140deg,#0ea5e9,#2563eb)}
.module-icon--pdf{background:linear-gradient(140deg,#dc2626,#b45309)}
.module-icon--muted{background:var(--color-slate-200);color:var(--color-slate-400)}
.module-card__title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-strong)}
.module-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);flex:1}
.module-card--locked{background:var(--color-slate-50)}
.module-card--locked .module-card__title{color:var(--color-slate-500)}

/* 21. Pricing ----------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);align-items:stretch}
.plan{display:flex;flex-direction:column;padding:var(--space-6);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);background:var(--color-surface);position:relative}
.plan--featured{border-color:var(--color-primary-600);box-shadow:var(--shadow-lg)}
.plan--featured::before{content:"Nejoblíbenější";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--color-primary-600);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  padding:.2rem .7rem;border-radius:var(--radius-full);white-space:nowrap;letter-spacing:.01em}
.plan__name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-strong)}
.plan__price{margin-block:var(--space-3) var(--space-1);font-size:var(--text-3xl);font-weight:var(--weight-bold);
  color:var(--color-text-strong);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.plan__price small{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted)}
.plan__tagline{font-size:var(--text-sm);color:var(--color-text-muted);min-height:2.6em}
.plan__features{list-style:none;padding:0;margin:var(--space-5) 0;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm)}
.plan__features li{display:flex;gap:var(--space-2);align-items:flex-start}
.plan__features .icon{width:16px;height:16px;color:var(--color-success-600);margin-top:2px;flex-shrink:0}
.plan__features .icon--off{color:var(--color-slate-300)}
.plan__features li.is-off{color:var(--color-slate-400)}
.plan__cta{margin-top:auto}

/* 22. Marketing hero / sekce ------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--space-24) var(--space-20);
  background:
    radial-gradient(60% 50% at 80% -10%,rgba(79,70,229,.10),transparent 70%),
    radial-gradient(50% 50% at 10% 0%,rgba(37,99,235,.10),transparent 70%),
    var(--color-bg)}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--color-slate-200) 1px,transparent 1px),linear-gradient(90deg,var(--color-slate-200) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);opacity:.5;pointer-events:none}
.hero__inner{position:relative;max-width:760px}
.hero h1{margin-block:var(--space-5) var(--space-5)}
.hero .cluster{margin-top:var(--space-7)}
.section--alt{background:var(--color-surface);border-block:1px solid var(--color-border)}
.feature-row{display:flex;gap:var(--space-4);align-items:flex-start}
.feature-row__icon{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0;
  background:var(--color-primary-50);color:var(--color-primary-600)}
.feature-row__icon svg{width:22px;height:22px}
.feature-row__title{font-weight:var(--weight-semibold);color:var(--color-text-strong);margin-bottom:var(--space-1)}
.feature-row__text{font-size:var(--text-sm);color:var(--color-text-muted)}

/* Footer */
.footer{background:var(--color-slate-900);color:var(--color-slate-300);padding-block:var(--space-16) var(--space-8);margin-top:var(--space-24)}
.footer a{color:var(--color-slate-300)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-8)}
.footer__title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--color-slate-400);font-weight:var(--weight-semibold);margin-bottom:var(--space-4)}
.footer__links{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm)}
.footer .brand{color:#fff}
.footer__bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-slate-800);
  font-size:var(--text-xs);color:var(--color-slate-400);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}

/* 23. Auth layout ------------------------------------------------------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth__aside{background:
    radial-gradient(70% 60% at 20% 10%,rgba(99,102,241,.5),transparent 60%),
    linear-gradient(160deg,var(--color-primary-700),var(--color-slate-900));
  color:#fff;padding:var(--space-16) var(--space-12);display:flex;flex-direction:column;justify-content:space-between}
.auth__aside h2{color:#fff;font-size:var(--text-3xl);letter-spacing:var(--tracking-tight)}
.auth__quote{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:rgba(255,255,255,.92)}
.auth__main{display:grid;place-items:center;padding:var(--space-8)}
.auth__card{width:100%;max-width:400px}
.auth__card h1{font-size:var(--text-2xl)}
.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--text-xs);margin-block:var(--space-5)}
.divider::before,.divider::after{content:"";height:1px;background:var(--color-border);flex:1}

/* 24. Page header (app) ------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-7)}
.page-head__title{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--color-text-strong);letter-spacing:var(--tracking-snug)}
.page-head__sub{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}
.breadcrumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.breadcrumbs a{color:var(--color-text-muted)}
.breadcrumbs a:hover{color:var(--color-text-strong)}

/* progress / limit bar */
.meter{height:8px;border-radius:var(--radius-full);background:var(--color-slate-200);overflow:hidden}
.meter__fill{height:100%;border-radius:var(--radius-full);background:var(--color-primary-600)}
.meter__fill--warn{background:var(--color-warning-600)}
.meter__fill--full{background:var(--color-danger-600)}

/* 24b. Mobilní přepínač sidebaru (centralizováno) ---------------------- */
.app__topbar [data-sidebar-toggle]{display:none}
@media (max-width:820px){.app__topbar [data-sidebar-toggle]{display:inline-flex}}

/* 24c. Admin shell „Správa systému" (odlišení superadmin prostředí) ---- */
.app__sidebar.is-admin{background:var(--color-slate-900);border-right-color:var(--color-slate-800)}
.is-admin .app__sidebar-head{border-bottom-color:var(--color-slate-800)}
.is-admin .side-nav__label{color:var(--color-slate-500)}
.is-admin .side-link{color:var(--color-slate-300)}
.is-admin .side-link .icon{color:var(--color-slate-500)}
.is-admin .side-link:hover{background:var(--color-slate-800);color:#fff}
.is-admin .side-link:hover .icon{color:var(--color-slate-300)}
.is-admin .side-link[aria-current="page"]{background:rgba(37,99,235,.18);color:#fff}
.is-admin .side-link[aria-current="page"] .icon{color:var(--color-primary-400)}
.is-admin .side-link[aria-current="page"]::before{background:var(--color-primary-400)}
.admin-tag{display:flex;align-items:center;gap:var(--space-2);color:#fff;font-weight:var(--weight-bold);letter-spacing:var(--tracking-snug)}
.admin-tag__mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--color-slate-800);color:var(--color-primary-400);flex-shrink:0}
.admin-back{display:flex;align-items:center;gap:var(--space-2);color:var(--color-slate-400);font-size:var(--text-sm);padding:.55rem var(--space-3);border-radius:var(--radius-md);transition:var(--transition)}
.admin-back:hover{background:var(--color-slate-800);color:#fff}

/* 24d. Matice oprávnění / feature klíčů (admin) ------------------------ */
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center}
.matrix td:first-child{position:sticky;left:0;background:var(--color-surface)}
.perm-yes{color:var(--color-success-600);font-weight:var(--weight-semibold)}
.perm-no{color:var(--color-slate-300)}

/* 24e. Veřejné komponenty: FAQ akordeon, právní text -------------------- */
.faq{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden}
.faq+.faq{margin-top:var(--space-3)}
.faq>summary{list-style:none;cursor:pointer;padding:var(--space-5) var(--space-6);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-4);font-weight:var(--weight-semibold);color:var(--color-text-strong)}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary:focus-visible{box-shadow:var(--focus-ring)}
.faq>summary .chev{transition:transform var(--transition);color:var(--color-slate-400);flex-shrink:0}
.faq[open]>summary .chev{transform:rotate(180deg)}
.faq__a{padding:0 var(--space-6) var(--space-5);color:var(--color-text-muted);line-height:var(--leading-relaxed)}

.legal{display:grid;grid-template-columns:240px 1fr;gap:var(--space-10);align-items:start}
.legal__toc{position:sticky;top:calc(var(--topbar-h) + var(--space-6))}
.legal__toc a{display:block;padding:.45rem .7rem;border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-slate-600)}
.legal__toc a:hover{background:var(--color-slate-100);color:var(--color-text-strong)}
.legal__toc a[aria-current="page"]{background:var(--color-primary-50);color:var(--color-primary-700);font-weight:var(--weight-medium)}
.prose h2{font-size:var(--text-xl);margin-top:var(--space-8)}
.prose h3{font-size:var(--text-base);margin-top:var(--space-6)}
.prose p,.prose li{color:var(--color-text);line-height:var(--leading-relaxed)}
.prose p{margin-top:var(--space-3)}
.prose ul{margin-top:var(--space-3)}
@media (max-width:820px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}

/* 25. Utility ----------------------------------------------------------- */
.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.wrap{flex-wrap:wrap}.grow{flex:1}.text-center{text-align:center}.text-right{text-align:right}
.full{width:100%}.hidden{display:none}

/* 26. Responsivita ------------------------------------------------------ */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth__aside{display:none}
}
@media (max-width:820px){
  .navbar__links{display:none}
  .navbar__links.is-open{display:flex;position:absolute;top:var(--topbar-h);left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-3);gap:var(--space-1);box-shadow:var(--shadow-md)}
  .nav-toggle{display:inline-flex}
  .app{grid-template-columns:1fr;grid-template-areas:"topbar" "main"}
  .app__sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:var(--z-overlay);
    transform:translateX(-100%);transition:transform var(--transition-slow);box-shadow:var(--shadow-xl)}
  .app.sidebar-open .app__sidebar{transform:none}
  .app__main{padding:var(--space-5)}
  .sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:900}
  .app.sidebar-open .sidebar-scrim{display:block}
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .section{padding-block:var(--space-12)}
  .hero{padding-block:var(--space-16) var(--space-12)}
  .page-head{flex-direction:column;align-items:flex-start}
}

/* 27. Pohyb / přístupnost ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero::before{display:none}
}

/* 28. Stagger pro úvodní reveal (jen kde se použije .reveal) ------------ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);animation:reveal .6s cubic-bezier(.4,0,.2,1) forwards}
  .reveal-1{animation-delay:.05s}.reveal-2{animation-delay:.13s}.reveal-3{animation-delay:.21s}.reveal-4{animation-delay:.29s}
  @keyframes reveal{to{opacity:1;transform:none}}
}