/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');*/
/* Dark theme overrides */
:root{
  --sidebar-w:260px;
  --content-pad:22px;
  --topbar-h:80px;

  --bg:#1a2d53; --card:#0f172a !important; --muted:#c9d0db; --text:#e5e7eb; --brand:#76aafd; --brand-2:#54b8fa; --pismo:#0f0f0f;
  --ring: 0 0 0 2px rgba(59,130,246,.35);
  --bg-grad1:#0d1522; --bg-grad2:#22252c;
  --join:rgba(76, 196, 243, 0.952);
  --sec:rgba(218, 14, 14, 0.911);
  --brand-3:#ec7f9a; --brand-4:#d84559;
  --footer:#99b6e9; 
}
/* Light theme overrides */
:root[data-theme='light']{
  --bg:#f6f8fb; --card:#ffffff !important; --muted:#323335; --text:#0f172a; --brand:#2563eb; --brand-2:#002f5a; --pismo:#e6eff1;
  --ring: 0 0 0 2px rgba(37,99,235,.35);
  --bg-grad1:#f8fafc; --bg-grad2:#eef2f7;
  --join:rgba(29, 112, 206, 0.911);
  --sec:rgba(161, 9, 9, 0.945);
  --brand-3:#c2244bea; --brand-4:#7a101eef;
  --footer:#344769; 
}

*{box-sizing:border-box}

html,body{
  height:100%;
  min-height:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:linear-gradient(180deg,var(--bg-grad1) 0%,var(--bg-grad1) 40%,var(--bg-grad2) 100%);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit}

img,
video,
iframe,
svg,
canvas{
  max-width:100%;
  height:auto;
}

header{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  padding:14px 18px;
  box-shadow:0 6px 24px rgba(0,0,0,.25)
}
header .container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between
}
header .logo{font-weight:700;letter-spacing:.3px}
.container{max-width:1200px;margin:0 auto;padding:18px}

body.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  height:100dvh;
  min-height:100dvh;
  overflow:hidden
}

.sidebar{
  position:sticky;
  top:0;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  border-right:1px solid rgba(148,163,184,.15);
  padding:14px
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  margin:6px 0;
  transition:.2s background
}
.nav a:hover{background:rgba(148,163,184,.12)}
.nav a.active{
  background:linear-gradient(90deg,rgba(59,130,246,.25),rgba(34,211,238,.25));
}

.content{
  min-width:0;
  width:100%;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 var(--content-pad) var(--content-pad)
}

.content > *{
  min-width:0;
}

h1{font-size:28px;margin:0 0 16px}
h2{font-size:22px;margin:4px 0 8px}

.card{
  background:var(--card);
  border:1px solid rgba(57, 80, 112, 0.267);
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  min-width:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px !important;
  border-radius:10px;
  border:1px solid #24272c;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.02);
  transition:box-shadow .15s, transform .05s;
  cursor:pointer;
  font-size:14px;
  letter-spacing:normal;
  line-height:1;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn:hover{box-shadow:0 6px 20px rgba(59,130,246,.25)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:none;
  color:var(--pismo);
  font-weight:600;
  font-size:16px;
}

.btn.secundary:hover{box-shadow:0 6px 20px rgba(246, 59, 100, 0.35)}
.btn.secundary{
  background:linear-gradient(90deg,var(--brand-3),var(--brand-4));
  border:none;
  color:var(--pismo);
  font-weight:600;
  font-size:16px;
}

.input, select, textarea{
  padding:7px 12px;
  border:1px solid rgba(148,163,184,.25);
  border-radius:10px;
  width:100%;
  max-width:100%;
  background:var(--bg);
  color:var(--text);
  outline:none
}
.input:focus, select:focus, textarea:focus{
  box-shadow:var(--ring);
  border-color:transparent
}

/* =========================
   TABUĽKY + HORIZONTÁLNY SCROLL
   ========================= */

.table-wrap,
.table-responsive{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
  padding-bottom:2px;
}

.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar{
  height:10px;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.35);
}

:root[data-theme='light'] .table-wrap::-webkit-scrollbar-thumb,
:root[data-theme='light'] .table-responsive::-webkit-scrollbar-thumb{
  border-color:rgba(255,255,255,.65);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px
}

/* Desktop/tablet: ak je tabuľka v scroll wrape, môže byť širšia */
.table-wrap > .table,
.table-responsive > .table{
  width:max-content;
  min-width:100%;
}

.table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  padding:6px 10px;
  text-align:center;
  white-space:nowrap;
}
.table td{
  padding:12px 10px;
  background:var(--card);
  border-top:1px solid rgba(148,163,184,.15);
  border-bottom:1px solid rgba(148,163,184,.15);
  text-align:center;
  white-space:nowrap;
}
.table tr td:first-child{
  border-left:1px solid rgba(148,163,184,.15);
  border-top-left-radius:10px;
  border-bottom-left-radius:10px
}
.table tr td:last-child{
  border-right:1px solid rgba(148,163,184,.15);
  border-top-right-radius:10px;
  border-bottom-right-radius:10px
}

.badge{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(59, 246, 68, 0.2);
  border:1px solid rgba(27, 182, 86, 0.555);
  color:#20a959;
  font-size:12px;
  white-space:nowrap;
  display:inline-block;
}
.err{
  background:rgba(239,68,68,.15);
  color:#7f1d1d;
  border:1px solid rgba(239,68,68,.4);
  padding:10px;
  border-radius:10px;
  margin:8px 0
}
.ok{
  background:rgba(16,185,129,.15);
  border:1px solid rgba(16,185,129,.4);
  padding:10px;
  border-radius:10px;
  margin:8px 0
}
form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:10px
}
label{display:block;font-size:14px;}
label span{display:block;color:var(--muted);margin-bottom:5px; font-size:12px; font-weight:600;}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  background:rgba(255,255,255,.04);
  padding:10px;
  border-radius:8px
}
footer{
  padding:28px;
  font-size:12px;
  text-align:center;
  color: var(--footer);
}

.eye{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:9999px;
  font-size:14px;
  line-height:1;
}
.eye--seen{background:#16a34a;color:#fff;}
.eye--unseen{background:#dc2626;color:#fff;}

.table th,
.table td{
  vertical-align:middle;
}

/* ========== Prepínač témy (light/dark) – slider ========== */
.theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px 0 10px;
  border-radius:9999px;
  background:rgba(10, 12, 17, 0.89);
  font-size:13px;
}

:root[data-theme='light'] .theme-toggle {
  background:rgba(192, 199, 209, 0.151);
}

.theme-toggle-text {
  font-size:12px;
  opacity:0.8;
}

.theme-toggle-input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.theme-toggle-switch {
  position:relative;
  width:42px;
  height:22px;
  border-radius:9999px;
  background:rgba(148, 163, 184, 0.85);
  box-shadow:0 0 0 1px rgba(15, 23, 42, 0.3) inset;
  transition:background 0.2s ease;
}

.theme-toggle-switch::before {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:9999px;
  background:#ffffff;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
  transition:transform 0.2s ease;
}

.theme-toggle-input:checked + .theme-toggle-switch {
  background:rgba(59, 130, 246, 0.95);
}

.theme-toggle-input:checked + .theme-toggle-switch::before {
  transform:translateX(20px);
}

/* ===== Topbar vedľa sidebaru ===== */
.topbar {
  position:sticky;
  top:0;
  z-index:30;
  min-height:var(--topbar-h);
  height:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  background:rgba(15, 23, 42, 0.96);
  border-bottom:1px solid rgba(148,163,184,0.25);
  box-shadow:0 10px 24px rgba(15,23,42,0.6);
  margin:0 calc(-1 * var(--content-pad)) 16px
}

:root[data-theme='light'] .topbar {
  background:#f9fafb;
  border-bottom-color:rgba(148,163,184,0.35);
  box-shadow:0 8px 20px rgba(148,163,184,0.35);
}

.topbar-left {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:14px;
  min-width:0;
  flex-wrap:wrap;
  order:1;
}

.topbar-role {
  font-size:12px;
  opacity:.8;
  font-weight:600;
  color:var(--brand-2);
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  min-width:0;
  flex-wrap:wrap;
  order:4;
}
.topbar-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  order:2;
}

.topbar-toggle-slot{
  display:flex;
  align-items:center;
}

.topbar-theme-row{
  display:flex;
  align-items:center;
  margin-left:auto;
  order:3;
}

.topbar-mobile-email,
.topbar-mobile-nav-slot{
  display:none;
}

.topbar-mobile-email{
  order:4;
}

.topbar-mobile-nav-slot{
  order:6;
}

.ma-org-switch{
  position:relative;
  display:inline-block;
  margin:0 10px;
  min-width:240px;
  max-width:420px;
  width:min(100%, 420px);
  vertical-align:middle;
}

.ma-org-search{
  height:28px;
  padding:4px 10px;
  font-size:12px;
}

.ma-org-dropdown{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:999;
  max-height:320px;
  overflow:auto;
  display:none;
  padding:8px;
}


.topbar-org{
  font-size:11px;
  font-weight:600;
  opacity:.9;
}

.topbar-user {
  opacity:.9;
}

.content > .card + .card{
  margin-top:16px;
}

.qbtn{border:1px solid rgba(148,163,184,.4); padding:6px 10px;border-radius:10px;cursor:pointer; color:#06b6d4;}
.qbtn:hover{filter:brightness(1.05)}
.qbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}

.small {
  font-size:12px;
  font-weight:500;
}

/* =======================================================================
   COLLAPSIBLE CARDS (minimalizácia kariet) + ANIMÁCIA
   ======================================================================= */

.card.is-collapsible{
  padding:0;
  position:relative;
}

/* Header = jeden riadok, tlačidlo vpravo vždy */
.card.is-collapsible .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  padding:16px;
}

/* Nadpis sa môže skrátiť, ale tlačidlo ostane vpravo */
.card.is-collapsible .card-header h1,
.card.is-collapsible .card-header h2,
.card.is-collapsible .card-header h3{
  margin:0;
  flex:1 1 auto;
  min-width:0;
}

.card.is-collapsible .card-header h2{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Body: animujeme height/opacity/padding (height riadi JS) */
.card.is-collapsible .card-body{
  padding:0 16px 16px;
  overflow-x:auto;
  overflow-y:hidden;
  opacity:1;
  transition:height .22s ease, opacity .22s ease, padding .22s ease;
  will-change:height;
}

/* Zbalené: bez zvislého paddingu (aby karta mala výšku len headeru) */
.card.is-collapsed .card-body{
  padding:0 16px;
  opacity:0;
}

.card-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  transition:box-shadow .15s, transform .05s, filter .15s;
}

.card-toggle:hover{
  box-shadow:0 6px 20px rgba(59,130,246,.20);
  filter:brightness(1.05);
}

.card-toggle:active{transform:translateY(1px)}

.card-toggle::before{
  content:"▴";
  font-size:14px;
  line-height:1;
}

.card.is-collapsed .card-toggle::before{
  content:"▾";
}

.card.is-collapsed .card-header h2{
  font-size:16px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .card.is-collapsible .card-body{ transition:none; }
  .card-toggle{ transition:none; }
}

.topbar-userinfo{
  color:#7a7e85;
  font-size:11px;
}

/* ===== Two-column layout: Školenie + Knižnica (admin) ===== */
.kb-two-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

/* Knižnica nech je stále viditeľná (sticky) + vlastný scroll keď je vysoká */
.kb-two-col .kb-col-lib{
  position:sticky;
  top:calc(var(--topbar-h) + 18px);
  align-self:start;
}

/* Podpora pre rôzne markupy z kniznica.php (niekde je .kb-lib, niekde len .card) */
.kb-two-col .kb-col-lib .kb-lib,
.kb-two-col .kb-col-lib > .card{
  margin-top:0 !important;
  max-height:calc(100dvh - var(--topbar-h) - 36px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.45) transparent;
}

/* Moderný scrollbar (webkit) */
.kb-two-col .kb-col-lib .kb-lib::-webkit-scrollbar,
.kb-two-col .kb-col-lib > .card::-webkit-scrollbar{
  width:10px;
}
.kb-two-col .kb-col-lib .kb-lib::-webkit-scrollbar-thumb,
.kb-two-col .kb-col-lib > .card::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.35);
}
:root[data-theme='light'] .kb-two-col .kb-col-lib .kb-lib::-webkit-scrollbar-thumb,
:root[data-theme='light'] .kb-two-col .kb-col-lib > .card::-webkit-scrollbar-thumb{
  border-color:rgba(255,255,255,.65);
}

/* ====== 2 stĺpce + sticky karta "Obrázky k otázkam" ====== */
.kb-test-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:16px;
  align-items:start;
}

/* Sticky + moderný vnútorný scroll keď je karta vyššia ako viewport */
.kb-test-sticky{
  position:sticky;
  top:calc(var(--topbar-h) + 18px);
  align-self:start;
  max-height:calc(100dvh - var(--topbar-h) - 36px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.45) transparent;
}

/* Moderný scrollbar (webkit) */
.kb-test-sticky::-webkit-scrollbar{ width:10px; }
.kb-test-sticky::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.35);
}
:root[data-theme='light'] .kb-test-sticky::-webkit-scrollbar-thumb{
  border-color:rgba(255,255,255,.65);
}

/* =====================================================================
   Test detail (admin/test_detail.php):
   Split layout "Otázky" (vľavo) + "Obrázky k otázkam" (vpravo) so STICKY.
   ===================================================================== */

/* 2 stĺpce v karte "Otázky testu" */
.kb-split{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-top:8px;
}

.kb-split .kb-main{flex:1 1 62%;min-width:0}

/* Sticky držíme na pravom stĺpci */
.kb-split .kb-side{
  flex:0 0 380px;
  min-width:320px;
  align-self:start;
  position:sticky !important;
  top:calc(var(--topbar-h) + 18px) !important;
}

/* Ak máš priamo kartu s triedou .kb-sticky, nech funguje aj ona */
.kb-split .kb-side .kb-sticky{
  position:sticky !important;
  top:calc(var(--topbar-h) + 18px) !important;
}

/* Vnútorný scroll, keď je karta vyššia ako viewport */
.kb-split .kb-side > .card,
.kb-split .kb-side .kb-sticky{
  margin-top:0 !important;
  max-height:calc(100dvh - var(--topbar-h) - 36px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.45) transparent;
}

/* Moderný scrollbar (webkit) */
.kb-split .kb-side > .card::-webkit-scrollbar,
.kb-split .kb-side .kb-sticky::-webkit-scrollbar{width:10px}

.kb-split .kb-side > .card::-webkit-scrollbar-thumb,
.kb-split .kb-side .kb-sticky::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.35);
}

:root[data-theme='light'] .kb-split .kb-side > .card::-webkit-scrollbar-thumb,
:root[data-theme='light'] .kb-split .kb-side .kb-sticky::-webkit-scrollbar-thumb{
  border-color:rgba(255,255,255,.65);
}

a.btn{ text-decoration:none; }

/* ===== Šablóny školení: zvýraznené aj keď nie je active ===== */
.sidebar .nav a.nav-templates{
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, padding-left .15s ease;
  background-image:linear-gradient(90deg, rgba(33, 117, 58, 0.144), rgba(105, 168, 129, 0.171));
  background-color:transparent;
  box-shadow:inset 3px 0 0 rgba(33, 73, 39, 0.226);
  border-radius:10px;
  padding-left:12px;
  position:relative;
  border-left:3px solid transparent;
  display:block;
}

.sidebar .nav a.nav-templates.active{
  background-image:linear-gradient(90deg, rgba(5, 131, 43, 0.315), rgba(53, 146, 89, 0.315));
  box-shadow:inset 3px 0 0 rgba(17, 156, 36, 0.685);
  font-weight:600;
}

.sidebar .nav a.nav-templates:hover,
.sidebar .nav a.nav-templates:focus-visible{
  background-color:rgba(28, 78, 49, 0.253);
  transform:translateX(2px);
}

/* ===== Zvýraznenie položiek menu: Školenia + Testy (class .nav-hi) ===== */

.sidebar .nav a.nav-hi{
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
  border-left:3px solid transparent;
  border-radius:10px;
}

/* NEAKTÍVNY stav */
.sidebar .nav a.nav-hi:not(.active){
  background:rgba(59,130,246,.08) !important;
  color:var(--text) !important;
  box-shadow:inset 3px 0 0 rgba(59,130,246,.25) !important;
}

/* HOVER / FOCUS */
.sidebar .nav a.nav-hi:hover,
.sidebar .nav a.nav-hi:focus-visible{
  background:rgba(59,130,246,.14) !important;
  transform:translateX(2px);
}

/* AKTÍVNY stav */
.sidebar .nav a.nav-hi.active{
  background:rgba(59,130,246,.22) !important;
  box-shadow:inset 3px 0 0 rgba(59,130,246,.85) !important;
  font-weight:600;
}

.joinkod{
  margin-right:10px;
  font-weight:700;
  color:var(--join);
  font-size:15px;
}




/* =========================
   MOBILNÝ SHELL
   ========================= */

.mobile-nav-toggle,
.topbar-mobile-brand,
.sidebar-mobile-close,
.sidebar-mobile-user,
.mobile-nav-backdrop{
  display:none;
}

.topbar-desktop-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}

.topbar-mobile-brand{
  text-decoration:none;
  align-items:center;
}

.topbar-mobile-brand img{
  display:block;
  width:auto;
}

.sidebar-mobile-user{
  margin:14px 0 16px;
  padding:12px;
  border:1px solid rgba(148,163,184,.15);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

:root[data-theme='light'] .sidebar-mobile-user{
  background:rgba(15,23,42,.03);
}

.sidebar-mobile-user strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}

.sidebar-mobile-user div + div{
  margin-top:4px;
}

.sidebar-mobile-role,
.sidebar-mobile-org,
.sidebar-mobile-login{
  font-size:12px;
  color:var(--muted);
}

.sidebar-toggle-slot{
  display:flex;
  margin-top:10px;
}

.sidebar-toggle-slot .theme-toggle{
  width:100%;
  justify-content:center;
  padding:8px 10px;
}


/* =========================
   MOBILNÉ KARTIČKY TABULIEK
   ========================= */
.kb-table-mobile,
.kb-mobile-card-list{
  display:none;
}

.kb-mobile-card{
  background:var(--card);
  border:1px solid rgba(148,163,184,.15);
  border-radius:12px;
  padding:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.kb-mobile-card + .kb-mobile-card{
  margin-top:12px;
}

.kb-mobile-card-title{
  font-size:16px;
  font-weight:800;
  margin:0 0 10px;
}

.kb-mobile-card-grid{
  display:grid;
  gap:8px;
}

.kb-mobile-card-row{
  display:grid;
  gap:4px;
}

.kb-mobile-card-row strong{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.kb-mobile-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

/* =========================
   MOBIL / UŽŠIA OBRAZOVKA
   ========================= */

@media (max-width: 1100px){
  .kb-test-split{ grid-template-columns:1fr; }
  .kb-test-sticky{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 980px){
  body{
    overflow-x:hidden;
  }

  body.layout{
    display:block;
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }

  body.mobile-nav-open{
    overflow:hidden;
  }

  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    border:0;
    padding:0;
    margin:0;
    background:rgba(2,6,23,.6);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:1090;
  }

  body.mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(86vw, 320px);
    max-width:320px;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    border-right:1px solid rgba(148,163,184,.15);
    border-bottom:0;
    padding:16px 14px 22px;
    z-index:1100;
    transform:translateX(-104%);
    visibility:hidden;
    box-shadow:0 24px 48px rgba(0,0,0,.35);
    transition:transform .24s ease, visibility .24s ease;
    background:var(--card);
    backdrop-filter:none;
  }

  body.mobile-nav-open .sidebar{
    transform:translateX(0);
    visibility:visible;
  }

  .sidebar-mobile-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    border-radius:9999px;
    border:1px solid rgba(148,163,184,.25);
    background:var(--bg);
    color:var(--text);
    cursor:pointer;
    z-index:2;
  }

  .sidebar-mobile-user{
    display:block;
  }

  .content{
    height:auto;
    min-height:0;
    overflow:visible;
    padding:0 14px 14px;
  }

  .topbar{
    position:sticky;
    top:0;
    margin:0 -14px 16px;
    padding:12px 14px 14px;
    min-height:64px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    align-items:start;
    position:sticky;
  }

  .topbar-left{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    order:1;
  }

  .topbar-desktop-meta{
    display:none;
  }

  .topbar-theme-row,
  .topbar-center,
  .topbar-mobile-email,
  .topbar-right{
    display:flex;
    width:100%;
    min-width:0;
  }

  .topbar-theme-row{ order:2; }
  .topbar-center{ order:3; }
  .topbar-mobile-email{ order:4; }
  .topbar-right{ order:5; }

  .topbar-theme-row{
    justify-content:center;
    margin-left:0;
  }

  .topbar-center{
    align-items:center;
    justify-content:center;
  }

  .topbar-mobile-email{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    color:var(--muted);
    word-break:break-word;
  }

  .topbar-right{
    align-items:center;
    justify-content:center;
  }

  .topbar-mobile-nav-slot{
    display:block;
    position:absolute;
    top:10px;
    right:14px;
    z-index:2;
  }

  .ma-org-switch{
    margin:0;
    min-width:0;
    max-width:none;
    width:100%;
  }

  .ma-org-search{
    width:100%;
    min-width:0;
    height:34px;
    padding:6px 10px;
    font-size:12px;
  }

  .topbar-toggle-slot .theme-toggle{
    padding:5px 8px 0 8px;
  }

  .topbar-logout-btn{
    display:inline-flex !important;
  }

  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.25);
    background:var(--card);
    color:var(--text);
    cursor:pointer;
    flex:0 0 auto;
  }

  .mobile-nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
  }

  .topbar-mobile-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    padding-right:52px;
  }

  form .row{
    grid-template-columns:1fr;
  }

  .container{
    padding:14px;
  }

  .card{
    padding:14px;
  }

  .kb-two-col{
    grid-template-columns:1fr;
  }

  .kb-two-col .kb-col-lib{
    position:static;
    top:auto;
  }

  .kb-two-col .kb-col-lib .kb-lib,
  .kb-two-col .kb-col-lib > .card{
    max-height:none;
    overflow:visible;
  }

  .kb-split{
    flex-direction:column;
  }

  .kb-split .kb-side{
    position:static !important;
    top:auto !important;
    flex:1 1 auto;
    min-width:0;
    width:100%;
  }

  .kb-split .kb-side .kb-sticky{
    position:static !important;
    top:auto !important;
  }

  .kb-split .kb-side > .card,
  .kb-split .kb-side .kb-sticky{
    max-height:none;
    overflow:visible;
  }


  .kb-table-desktop{
    display:none !important;
  }

  .kb-table-mobile,
  .kb-mobile-card-list{
    display:block !important;
  }

  .table-wrap,
  .table-responsive{
    overflow-x:auto;
  }

  .table,
  .table-wrap > .table,
  .table-responsive > .table{
    width:max-content !important;
    min-width:100% !important;
    table-layout:auto !important;
  }

  .table th,
  .table td{
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}