:root{
  --bg:#f6f7fb;
  --surface:#fff;
  --text:#1e2430;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --border:#e2e6ee;
  --border-strong:#cbd5e1;
  --primary:#2f6feb;
  --primary-dark:#2454bf;
  --primary-light:#eaf1ff;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --red:#ef4444;
  --red-bg:#fde8e8;
  --yellow:#d97706;
  --yellow-bg:#fef3c7;
  --green:#16a34a;
  --green-bg:#dcfce7;
  --radius:10px;
  --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --shadow-md:0 4px 14px rgba(20,30,50,.08);
  --shadow-lg:0 18px 46px rgba(15,23,42,.28);
}
*{box-sizing:border-box}
/* The `hidden` attribute is the CAPABILITY mechanism (see frontend/app.js):
   an element ships hidden and the session bootstrap removes the attribute only
   for an account that holds the capability. It needs !important because the
   browser's own [hidden]{display:none} is a USER-AGENT rule, and any author
   `display` rule outranks it — `.bar{display:flex}` and `.cards{display:grid}`
   below both do. Without this line, `hidden` silently fails to hide the
   in-class Tantárgyak row and its cards, i.e. it fails OPEN, showing the
   feature to an account that must not see it. */
[hidden]{display:none !important}
body{margin:0;font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--primary-light);color:var(--primary-dark)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

header{background:linear-gradient(180deg,#1f2a3d,#182234);color:#fff;padding:13px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(10,15,30,.25)}
.brand{display:flex;align-items:center;gap:11px;flex:1;text-decoration:none;color:inherit;min-width:0}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7ab0ff,#2f6feb);flex:0 0 auto;box-shadow:0 2px 6px rgba(47,111,235,.5);transition:transform .18s ease}
.brand-logo svg{width:16px;height:16px}
.brand:hover .brand-logo{transform:scale(1.12) rotate(-6deg)}
header h1{font-size:17px;margin:0;font-weight:650;flex:1;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header a{color:#c7d2e3;text-decoration:none;font-size:13.5px;padding:6px 4px;border-radius:6px;transition:color .15s ease}
header a:hover{color:#fff}

button{font:inherit;padding:7px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .05s ease}
button:hover{background:#f1f4f9;border-color:#b8c2d4}
button:active{transform:translateY(1px)}
button.primary,a.primary{background:var(--primary);color:#fff;border-color:var(--primary);display:inline-block;box-shadow:0 1px 2px rgba(47,111,235,.35)}
button.primary:hover,a.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
button.danger{color:var(--danger);border-color:#f6c6c6;background:#fff}
button.danger:hover{background:var(--danger-bg);border-color:#f2a9a9}
header button{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
header button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
header button.primary{background:var(--primary);border-color:var(--primary)}
header button.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}

input[type=text],input[type=password],textarea{font:inherit;padding:7px 11px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}
select{font:inherit;padding:7px 11px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
input[type=text]::placeholder,input[type=password]::placeholder,textarea::placeholder{color:var(--muted-2)}

.wrap{padding:20px 22px 64px;max-width:1200px;margin:0 auto}
.bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.legend{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin-left:auto;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 9px 3px 6px}
.legend i{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid var(--border-strong);vertical-align:-2px;margin-right:5px}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);box-shadow:var(--shadow-sm);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
th{background:#eef1f6;text-align:left;padding:11px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:650;border-bottom:1px solid var(--border-strong)}
td{border-bottom:1px solid var(--border);padding:11px 12px;vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:not(.section):hover td{background:#f8fafc}
tr.section td{background:#1f2a3d;color:#fff;font-weight:650;font-size:13px;text-transform:none;letter-spacing:0}
tr.clickable{cursor:pointer}
td.topic{width:16%;font-weight:650}
td.topic .no{display:inline-block;background:var(--primary-light);border-radius:5px;padding:1px 7px;font-size:11px;color:var(--primary-dark);font-weight:650;margin-bottom:4px}
td.topic .edit{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:12px;padding:0;margin-left:4px;transition:color .15s ease}
td.topic .edit:hover{color:var(--primary)}
td.min,td.plus{width:26%}
td.students{width:32%}

.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--border-strong);border-radius:999px;padding:3px 9px;font-size:12px;background:#f8fafc;color:var(--text)}
.chip .k{font-size:9.5px;color:var(--muted);text-transform:uppercase;margin-right:4px;letter-spacing:.03em}
.chip.plus{background:var(--primary-light);border-color:#c3d9ff}
.chip button{border:none;background:none;padding:0 0 0 5px;color:var(--muted-2);cursor:pointer;font-size:13px}
.chip button:hover{color:var(--danger);background:none}
.more{font-size:12px;color:var(--primary);cursor:pointer;text-decoration:none;background:none;border:none;padding:2px 0;font-weight:600}
.more:hover{text-decoration:underline}

.stu{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-strong);border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;margin:0 5px 5px 0;background:var(--surface);transition:box-shadow .15s ease,transform .05s ease}
.stu:hover{box-shadow:0 0 0 3px rgba(47,111,235,.18);border-color:var(--primary)}
.stu:active{transform:translateY(1px)}
.stu .pct{font-size:10.5px;opacity:.7;font-variant-numeric:tabular-nums}
.s-white{background:#fff}
.s-red{background:var(--red-bg);border-color:#f3a9a9}
.s-yellow{background:var(--yellow-bg);border-color:#f3ce77}
.s-green{background:var(--green-bg);border-color:#8fdba9}

.add{font-size:12.5px;color:var(--primary);background:none;border:1px dashed #a9c4f5;border-radius:999px;padding:4px 11px;font-weight:600;transition:background .15s ease,border-color .15s ease}
.add:hover{background:var(--primary-light);border-color:var(--primary)}

dialog{border:none;border-radius:14px;padding:0;width:min(760px,94vw);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(1px)}
.dh{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.dh h2{margin:0;font-size:16px;flex:1;font-weight:650}
.dh button{border:none;background:none;font-size:19px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px}
.dh button:hover{color:var(--text);background:#eef1f6}
.db{padding:16px 20px;max-height:65vh;overflow:auto}
.df{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:#f8fafc;border-radius:0 0 14px 14px}
.grp{margin-bottom:16px}
.grp h3{font-size:11.5px;text-transform:uppercase;color:var(--muted);margin:0 0 7px;letter-spacing:.05em;font-weight:650}
label.it{display:flex;gap:8px;align-items:flex-start;padding:5px 7px;border-radius:var(--radius-sm);font-size:13.5px;cursor:pointer;transition:background .12s ease}
label.it:hover{background:#f1f5f9}
label.it input{margin-top:3px}
/* One capability checkbox plus its name, in a teacher-table cell. Two of
   these sit side by side, so it is inline and carries its own gap: the
   round-2 fix gave the label a class that matched no rule at all, leaving
   the visible separation resting on one leading space. */
label.capCell{display:inline-flex;gap:5px;align-items:center;margin-right:12px;white-space:nowrap;font-size:13px;cursor:pointer}
label.capCell:last-child{margin-right:0}
.mini{font-size:12px;color:var(--muted)}
.page-error{color:var(--danger);background:var(--danger-bg);border:1px solid #f6c6c6;border-radius:var(--radius-sm);padding:9px 12px;font-size:13.5px;margin:0 0 16px}
.invite-banner{display:flex;align-items:center;gap:10px;color:var(--primary-dark);background:var(--primary-light);border:1px solid #c3d9ff;border-radius:var(--radius-sm);padding:9px 12px;font-size:13.5px;margin:0 0 16px}
.invite-banner span{flex:1}
.invite-banner a.primary{padding:5px 12px;font-size:13px}
.invite-banner button{background:none;border:none;color:var(--primary-dark);font-size:16px;line-height:1;padding:0 2px;cursor:pointer}
.empty{color:var(--muted-2);font-size:12.5px;font-style:italic}

.tabs{display:flex;gap:4px;background:#182234;padding:6px 22px}
.tabs button{background:none;border:none;color:#9aa7bd;padding:8px 16px;border-radius:8px;border-bottom:none;font-size:13.5px;font-weight:550;transition:background .15s ease,color .15s ease}
.tabs button:hover{background:rgba(255,255,255,.06);color:#e5e7eb}
.tabs button.active{color:#fff;background:var(--primary)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 18px;cursor:pointer;border:1px solid var(--border);transition:box-shadow .18s ease,border-color .18s ease,transform .12s ease}
.card:hover{border-color:#b7cdfb;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card h3{margin:0 0 6px;font-size:15px;font-weight:650}
.card .meta{font-size:12.5px;color:var(--muted)}
.card .row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card .icon-btn{background:none;border:none;color:var(--muted-2);padding:2px;font-size:14px;line-height:1;border-radius:5px}
.card .icon-btn:hover{color:var(--danger);background:var(--danger-bg)}

/* Owner/Collaborator badges: on class cards (which class is mine to manage?)
   and next to every name in the Tanárok list. */
.badge{display:inline-block;font-size:10.5px;font-weight:650;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.badge.owner{background:var(--green-bg);color:#166534}
.badge.collab{background:var(--primary-light);color:var(--primary-dark)}
.card .badge{margin-top:8px}

/* Teacher rows reuse .item-row; the name column carries the badge and the
   actions sit at the end, wrapping under the name on narrow screens. */
.teacher-row{flex-wrap:wrap}
.teacher-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.teacher-row .self{color:var(--muted);font-size:12px}
.teacher-row button{font-size:12.5px;padding:5px 10px}

.invite-row{margin-top:10px}
.invite-row input[type=text]{flex:1;min-width:220px;font-size:12.5px;color:var(--muted)}

.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.breadcrumbs a{color:var(--primary);text-decoration:none;font-weight:550}
.breadcrumbs a:hover{text-decoration:underline}
.section-title{font-size:15.5px;font-weight:650;margin:26px 0 11px;color:var(--text)}
.item-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #f1f5f9}
.item-row select{flex:0 0 130px}
.item-row input[type=text]{flex:1}
.item-block{padding:7px 0;border-bottom:1px solid #f1f5f9}
.item-block .item-row{border-bottom:none;padding:0}
.item-question{font-size:12px;color:#0c5c8f;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:6px 9px;margin-top:6px}
.item-question .k{color:var(--muted);text-transform:uppercase;font-size:10px;margin-right:4px;letter-spacing:.03em}

@media (max-width:640px){
  .wrap{padding:16px 14px 48px}
  header{padding:11px 14px}
  .tabs{padding:6px 14px}
  th,td{padding:9px 8px}
}

/* --- Today's attendance strip and the class-view Jelenlét link (ticket 08) ---
   Built from the existing .mini / .item-row vocabulary rather than a new box:
   the strip is one line of secondary text inside the Diákok section, not a
   panel. It carries no styling at all when empty, so the "renders nothing
   until the answer is known" state leaves no gap in the layout. */
.att-strip:empty{display:none}
.att-strip{font-size:12.5px;color:var(--muted);padding:7px 10px;margin:0 0 10px;
  background:var(--primary-light);border:1px solid #c3d9ff;border-radius:var(--radius-sm)}
.att-strip.att-empty{background:var(--surface);border:1px dashed var(--border-strong);color:var(--muted)}
.att-strip.att-failed{color:var(--danger);background:var(--danger-bg);border:1px solid #f6c6c6}
.att-strip a{color:var(--primary-dark);font-weight:650;text-decoration:none;white-space:nowrap}
.att-strip a:hover{text-decoration:underline}

/* An <a> that reads as a control in a .bar. Mirrors the button rule above
   rather than re-deriving it; `header a` does not apply here because this one
   sits in the class bar, not the header. */
.bar-link{font:inherit;font-size:13.5px;padding:7px 13px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);
  text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.bar-link:hover{background:#f1f5f9;border-color:var(--primary)}

/* --- Anyagok tab in the topic editor (ticket 08) ---
   `.dtab` declares NO display rule on purpose: the Anyagok tab button ships `hidden`
   (the capability gate) and any author `display` here would outrank the
   user-agent [hidden] rule — the 2026-09-03 lesson. Panels switch on inline
   style.display (tab state), never on `hidden`. */
.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:0 0 14px}
.dtab{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);padding:8px 14px;font-weight:600}
.dtab:hover{background:#f1f4f9;color:var(--text)}
.dtab.active{color:var(--primary-dark);border-bottom-color:var(--primary)}
.mat-cost{font-size:13px;color:var(--primary-dark);background:var(--primary-light);border:1px solid #c3d9ff;border-radius:var(--radius-sm);padding:9px 12px;margin:0 0 12px}
.mat-notice{font-size:13px;color:#166534;background:var(--green-bg);border:1px solid #8fdba9;border-radius:var(--radius-sm);padding:7px 10px;margin:0 0 12px}
.mat-stale{font-size:13px;color:#7c4a03;background:var(--yellow-bg);border:1px solid #f3ce77;border-radius:var(--radius-sm);padding:9px 12px;margin:0 0 12px}
.mat-stale button{margin-left:8px;font-size:12.5px;padding:4px 10px}
.mat-stale-row{font-size:12.5px;color:#7c4a03;margin:6px 0 0}
.mat-prefilter{margin:8px 0 12px;padding-left:20px;font-size:13.5px}
.mat-prefilter li{margin:3px 0}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mat-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:var(--surface)}
.mat-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mat-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.mat-form label{display:flex;flex-direction:column;gap:2px}
.mat-form input[type=number],.mat-form select{width:100%}
.mat-badge{display:inline-block;font-size:10.5px;font-weight:650;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap;background:#eef1f6;color:var(--muted)}
.mat-badge.mat-available,.mat-badge.mat-approved{background:var(--green-bg);color:#166534}
.mat-badge.mat-unsuitable,.mat-badge.mat-prefiltered{background:var(--red-bg);color:#991b1b}
.mat-badge.mat-unanalysed,.mat-badge.mat-draft{background:var(--yellow-bg);color:#92400e}
.mat-row{border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;background:var(--surface)}
.mat-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mat-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.mat-actions button,.mat-actions .bar-link{font-size:12.5px;padding:5px 10px}
.mat-preview{width:100%;height:520px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);margin-top:10px;background:#fff}
.mat-reanalyse{margin:10px 0 0}
.mat-reanalyse button{font-size:12px;padding:3px 9px;margin-left:6px}