/* Mektep — Rahmen für Babas Ansicht, wie im Shopify-Admin: schwarze Leiste links
   (Marke, Navigation, Fuß), kein Balken oben, der Inhalt liegt als helle,
   abgerundete Fläche darin. Dieselben Werte wie im Leitstand
   (uebersicht/assets/rahmen.css) und in Finance (src/app/globals.css) — die
   Klassennamen bleiben deshalb absichtlich deutsch, damit sich die drei Dateien
   vergleichen lassen. Bei Änderungen dort abgleichen.

   Gilt nur für Baba: uygulama.js setzt html.rahmen, solange diese Ansicht offen
   ist (showView). Musab, Hoca und Giriş haben keine Leiste. */

html.rahmen{
  --rahmen-schwarz:#0B0B0A;--rahmen-text:#E7E8E2;--rahmen-gedimmt:#A3A59E;
  --rahmen-leise:#7A7C76;--rahmen-aktiv:#2A2B28;--rahmen-hover:#1B1C1A;
  --rahmen-limette:#D8F36A;--rahmen-breite:248px;--rahmen-rand:8px;
  height:100%;overflow:hidden;background:var(--rahmen-schwarz)}
html.rahmen body{height:100%;overflow:hidden;background:var(--rahmen-schwarz)}

/* ---------- Leiste ---------- */
.rahmen-leiste{
  position:fixed;top:0;bottom:0;left:0;width:var(--rahmen-breite);z-index:25;box-sizing:border-box;
  background:var(--rahmen-schwarz);color:var(--rahmen-text);
  display:flex;flex-direction:column;
  padding:max(12px,env(safe-area-inset-top,0px)) 10px max(12px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  font:500 13.5px/1.3 var(--schrift)}
.rahmen-leiste :focus-visible{outline:2px solid var(--rahmen-limette);outline-offset:0}
.rahmen-kopf{display:flex;align-items:center;gap:6px}
.rahmen-marke{
  display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:#fff;
  font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.rahmen-marke img{width:30px;height:30px;border-radius:8px;display:block;box-shadow:0 0 0 1px #2A2B28}
.rahmen-marke small{display:block;font-size:11.5px;font-weight:400;color:var(--rahmen-leise);letter-spacing:0}
.rahmen-zu{
  display:none;margin:0 0 8px auto;width:32px;height:32px;border-radius:8px;border:0;
  background:transparent;color:var(--rahmen-gedimmt);cursor:pointer;place-items:center}
.rahmen-zu:hover{background:var(--rahmen-hover);color:#fff}

.rahmen-rollen{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:#2A2B28 transparent}
.rahmen-nav{display:flex;flex-direction:column;gap:1px}
/* Die Navigationsknöpfe heißen weiter .nav — uygulama.js verdrahtet sie darüber */
.rahmen-nav .nav,.rahmen-fuss .nav,.rahmen-fuss .ikonBtn{
  display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;
  background:none;color:var(--rahmen-gedimmt);font:inherit;text-align:left;cursor:pointer}
.rahmen-nav .nav:hover,.rahmen-fuss .nav:hover,.rahmen-fuss .ikonBtn:hover{background:var(--rahmen-hover);color:#fff}
/* Auch Ayarlar im Fuß ist ein Navigationspunkt und zeigt sich als offen */
.rahmen-leiste .nav.on{background:var(--rahmen-aktiv);color:#fff}
.rahmen-leiste .nav.on svg{color:var(--rahmen-limette)}
.rahmen-leiste svg.linie{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rahmen-leiste .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rahmen-fuss{display:flex;flex-direction:column;gap:1px;padding-top:10px;
  border-top:1px solid #1D1E1C;margin-top:8px}
.rahmen-fuss .rahmen-hinweis{padding:6px 10px 0;color:var(--rahmen-leise);font-size:11.5px;font-weight:400}

/* ---------- Inhalt ---------- */
/* Die helle Fläche steht fest im Rahmen und scrollt nur innen — so bleiben die
   runden Ecken beim Scrollen stehen. z-index über der Leiste, damit Dialoge aus
   dem Inhalt auch die Leiste abdecken. */
.rahmen-inhalt{
  position:fixed;z-index:30;
  top:var(--rahmen-rand);right:var(--rahmen-rand);bottom:var(--rahmen-rand);left:var(--rahmen-breite);
  overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;
  background:var(--flaeche);color:var(--tinte);border-radius:14px;
  padding:8px max(28px,env(safe-area-inset-right,0px)) 40px 28px;box-sizing:border-box}
.rahmen-inhalt>.tab{max-width:1200px;margin-inline:auto}
.rahmen-mobil,.rahmen-schleier{display:none}

@media(max-width:860px){
  .rahmen-zu{display:grid}
  .rahmen-leiste{
    transform:translateX(-100%);transition:transform .2s ease;width:min(84vw,300px);
    box-shadow:8px 0 32px rgba(0,0,0,.45);z-index:45;visibility:hidden}
  html.rahmen-offen .rahmen-leiste{transform:none;visibility:visible}
  html.rahmen-offen .rahmen-schleier{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.45)}
  /* Telefon wie Mail (gleiches Muster wie Finance und Leitstand): randlos, dunkle
     Kopfleiste mit Menü und Seitentitel, Ränder für Notch und Home-Leiste. */
  .rahmen-inhalt,html[data-ui][data-app="mektep"] .rahmen-inhalt{
    inset:0;border-radius:0;
    padding:0 max(16px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .rahmen-mobil{
    display:flex;align-items:center;gap:4px;position:sticky;top:0;z-index:20;min-height:56px;margin:0 0 8px;
    margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
    padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));
    background:var(--rahmen-schwarz,#0b0b0a);color:#fcfcfa;border-bottom:1px solid #272923}
  .rahmen-mobil-knopf{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:#fcfcfa;cursor:pointer}
  .rahmen-mobil-knopf:active{background:#20211f}
  .rahmen-mobil-knopf svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .rahmen-mobil-titel{font:600 16px var(--schrift);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Başlık şeritte; ekran okuyucular için kalır. Hub'da görünür kalır. */
  html:not(.hub-embedded) .rahmen-inhalt .pagehead h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rahmen-inhalt :is(input,select,textarea){font-size:16px}
}
@media(prefers-reduced-motion:reduce){.rahmen-leiste{transition:none}}

/* Drucken (Wochenplan als A4-Blatt): der feste Rahmen muss aufgehoben werden,
   sonst schneidet die 100-%-Höhe das Blatt nach einer Seite ab. */
@media print{
  html.rahmen,html.rahmen body{height:auto !important;overflow:visible !important;background:#fff !important}
}