:root{
  --brand:#4f46e5; --brand-dark:#3730a3; --brand-light:#eef2ff;
  --ok:#059669; --ok-bg:#d1fae5; --warn:#d97706; --warn-bg:#fef3c7;
  --err:#dc2626; --err-bg:#fee2e2; --gray:#6b7280; --gray-bg:#f3f4f6;
  --bg:#f8fafc; --card:#fff; --border:#e5e7eb; --text:#1f2937;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:#1e1b4b;color:#c7d2fe;padding:20px 0;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.logo{padding:0 20px 20px;border-bottom:1px solid #312e81;margin-bottom:14px}
.logo h1{font-size:18px;color:#fff}
.logo span{font-size:11px;color:#818cf8}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;font-size:13.5px;border-left:3px solid transparent;color:inherit;text-decoration:none}
.nav-item:hover{background:#312e81;color:#fff}
.nav-item.active{background:#4338ca;color:#fff;font-weight:700;border-left:4px solid #a5b4fc;padding-left:19px;box-shadow:inset 0 0 0 100px rgba(129,140,248,.12)}
.sidebar .user-box{margin-top:auto;padding:14px 20px;border-top:1px solid #312e81;font-size:12px}
.sidebar .user-box .user-meta{display:block;margin-bottom:2px}
.sidebar .user-box b{color:#fff;display:block;margin-bottom:2px}
.sidebar .user-box form{margin-top:8px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.topbar h2{font-size:17px}
.role-switch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray)}
.content{padding:24px;max-width:1200px;width:100%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}
.card .label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.4px}
.card .value{font-size:24px;font-weight:700;margin-top:6px}
.card .sub{font-size:12px;color:var(--gray);margin-top:4px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}
.panel h3{font-size:15px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 10px;background:var(--gray-bg);color:var(--gray);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
td{padding:9px 10px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-err{background:var(--err-bg);color:var(--err)}
.b-gray{background:var(--gray-bg);color:var(--gray)}
.b-brand{background:var(--brand-light);color:var(--brand)}
.btn{display:inline-block;padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;background:var(--brand);color:#fff;text-decoration:none}
.btn:hover{background:var(--brand-dark)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-outline{background:var(--card);color:var(--brand);border:1px solid var(--brand)}
.btn-outline:hover{background:var(--brand-light)}
.btn-ok{background:var(--ok)}.btn-ok:hover{background:#047857}
.btn-err{background:var(--err)}.btn-err:hover{background:#b91c1c}
.btn-ghost{background:var(--gray-bg);color:var(--text)}.btn-ghost:hover{background:var(--border)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar select,.toolbar input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--card);color:var(--text)}
.link{color:var(--brand);cursor:pointer;font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.link-btn{background:none;border:none;padding:0;font:inherit;color:var(--brand);cursor:pointer;font-weight:600}
.link-btn:hover{text-decoration:underline}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg[hidden]{display:none}
.modal{background:var(--card);border-radius:14px;padding:24px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto}
.modal h3{margin-bottom:14px}
.modal .field{margin-bottom:12px}
.modal label{display:block;font-size:12px;color:var(--gray);margin-bottom:4px;font-weight:600}
.modal input,.modal select,.modal textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--text)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.toast{position:fixed;bottom:24px;right:24px;background:#1f2937;color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:up .25s}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.post{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;background:var(--card)}
.post .meta{font-size:12px;color:var(--gray);margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.post h4{font-size:14.5px;margin-bottom:5px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.photo{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:transform .12s}
.photo:hover{transform:scale(1.02)}
.photo .img{height:110px;display:flex;align-items:center;justify-content:center;font-size:38px}
.photo .cap{padding:8px 10px;font-size:11.5px;color:var(--gray)}
.photo .img img{width:100%;height:100%;object-fit:cover;display:block}
.att-btn{padding:5px 12px;border-radius:7px;border:1.5px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:12px;font-weight:600;margin-right:5px}
.att-btn.p{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.att-btn.a{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.netopia{text-align:center;padding:8px 0}
.netopia .nlogo{font-size:20px;font-weight:800;color:#e11d48;margin-bottom:4px}
.demo-note{background:var(--warn-bg);color:#92400e;padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--gray);margin-bottom:4px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--text)}
/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1e1b4b;padding:28px 16px}
.login-col{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:380px}
.login-powered{width:100%;text-align:center;font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#fbbf24}
.login-logo{background:#fff;border-radius:16px;padding:18px 26px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-logo img{display:block;width:100%;height:auto}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:42px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;line-height:0;padding:4px 6px;color:var(--gray);opacity:.8}
.pw-toggle:hover{opacity:1;color:var(--brand)}
.pw-toggle svg{display:block}
.login-forgot{text-align:right;margin:-4px 0 10px}
.login-forgot a{font-size:12px;color:var(--brand);text-decoration:none;font-weight:600}
.login-forgot a:hover{text-decoration:underline}
.login-footer{width:100%;text-align:center;font-size:15px;font-weight:600;color:#fbbf24}
.login-owner{min-height:20px;margin-top:4px}
.login-card{background:#fff;border-radius:16px;padding:34px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card h1{font-size:20px;margin-bottom:2px}
.login-card .sub{font-size:12px;color:var(--gray);margin-bottom:20px}
.login-card .btn{width:100%;padding:11px;margin-top:6px}
.login-hint{margin-top:18px;font-size:11.5px;color:var(--gray);background:var(--gray-bg);border-radius:8px;padding:10px 12px;line-height:1.7}
.errorlist{color:var(--err);font-size:12px;list-style:none;margin-bottom:10px}
/* ==================== MOBIL (iOS + Android) ==================== */
html{-webkit-text-size-adjust:100%}          /* iOS: nu umfla textul in landscape */
img{max-width:100%;height:auto}

@media(max-width:900px){
  .two-col{grid-template-columns:1fr}
  .sidebar{width:64px}
  .sidebar .nav-item span,.sidebar .logo{display:none}
  .sidebar .nav-item{justify-content:center;padding:12px 0;font-size:18px}

  /* Deconectarea trebuie sa ramana accesibila si pe telefon */
  .sidebar .user-box{display:block;padding:12px 6px;text-align:center}
  .sidebar .user-box .user-meta{display:none}
  .sidebar .user-box .lbl{display:none}
  .sidebar .user-box form{margin:0}
  .sidebar .user-box .btn{padding:8px 10px;font-size:15px}

  /* Tabelele late devin derulabile pe orizontala, in loc sa rupa pagina */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .content table,.modal table{white-space:nowrap}

  /* Implicit, elementele din grid/flex nu se micsoreaza sub latimea continutului
     (min-width:auto) — de aceea tabelele late impingeau panourile in afara ecranului. */
  .two-col>*,.cards>*,.modal,.main{min-width:0}

  /* Modalele ocupa ecranul, iar formularele pe mai multe coloane trec pe una singura */
  .modal-bg{padding:10px}
  .modal{max-width:100%;width:100%;padding:18px;max-height:92vh}
  .modal [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* iOS: sub 16px, Safari mareste automat pagina la focus pe camp */
  input,select,textarea{font-size:16px}
  .toolbar input,.toolbar select,.field input,.field select,.field textarea,
  .modal input,.modal select,.modal textarea{font-size:16px}

  /* Tinte de atingere mai generoase pentru deget */
  .content table .link-btn{padding:6px 2px}
  .btn{padding:10px 16px}
  .btn-sm{padding:8px 13px}
  .att-btn{padding:9px 14px;margin-bottom:4px}
}

@media(max-width:640px){
  .content{padding:16px 12px}
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .topbar h2{font-size:15px}
  .panel{padding:14px}
  .cards{gap:10px}
  .pol-wrap table{display:block;overflow-x:auto;white-space:normal}
}

/* Subsol aplicație — politicile trebuie să fie permanent accesibile */
.app-footer{margin-top:32px;padding-top:14px;border-top:1px solid var(--border);
  font-size:12px;color:var(--gray)}
.app-footer a{color:var(--gray);text-decoration:none}
.app-footer a:hover{color:var(--brand);text-decoration:underline}

/* ==================== BARĂ COOKIE-URI ==================== */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;max-width:1100px;margin:0 auto;
  background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;box-shadow:0 10px 40px rgba(0,0,0,.28);font-size:13px;line-height:1.6}
.cookie-bar[hidden]{display:none}
.cookie-bar-text{flex:1;min-width:260px}
.cookie-bar-text a{color:var(--brand);font-weight:600;text-decoration:underline}
.cookie-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-bar-optiuni{display:flex;flex-direction:column;gap:6px;flex-basis:100%}
.cookie-bar-optiuni:empty{display:none}
.cookie-cat{font-size:12.5px;color:var(--gray)}
.cookie-cat input{width:auto;margin-right:6px}
@media(max-width:640px){.cookie-bar{left:8px;right:8px;bottom:8px;padding:12px 14px}}

/* ==================== NIGHT MODE ====================
   Se activează prin clasa .dark pe <body>, setată din Contul meu → Câmpuri personalizate */
body.dark{
  --bg:#0f172a; --card:#1e293b; --border:#334155; --text:#e2e8f0;
  --gray:#94a3b8; --gray-bg:#28364a;
  --brand:#818cf8; --brand-dark:#6366f1; --brand-light:#312e81;
  --ok:#34d399; --ok-bg:#064e3b;
  --warn:#fbbf24; --warn-bg:#78350f;
  --err:#f87171; --err-bg:#7f1d1d;
}
body.dark .btn{background:#6366f1;color:#fff}
body.dark .btn:hover{background:#4f46e5}
body.dark .btn-ok{background:#059669}body.dark .btn-ok:hover{background:#047857}
body.dark .btn-ghost{background:var(--gray-bg);color:var(--text)}
body.dark .demo-note{background:#78350f;color:#fde68a}
body.dark .toast{background:#e2e8f0;color:#0f172a}
body.dark .modal-bg{background:rgba(0,0,0,.65)}

/* Banner restanțe (portal părinte) */
.alert-restanta{background:#fef2f2;border:2px solid var(--err);border-radius:14px;padding:18px 20px;margin-bottom:20px;box-shadow:0 4px 14px rgba(220,38,38,.12)}
.alert-restanta h3{color:var(--err);font-size:16px;margin-bottom:8px}
.alert-restanta table{margin-top:10px;background:var(--card);border-radius:8px}
body.dark .alert-restanta{background:#450a0a}
/* Card clickabil (dashboard admin — evidența lunară) */
.card.click{cursor:pointer;transition:box-shadow .12s,border-color .12s}
.card.click:hover{box-shadow:0 4px 14px rgba(79,70,229,.18);border-color:var(--brand)}

/* ============================================================
   Poza profesorului, în cadru rotund
   ------------------------------------------------------------
   Dimensiunea se dă prin --dim, ca un singur bloc de reguli să
   servească toate locurile: tabel, antet de pagină, profil.
   Când profesorul nu are încă poză, în același cerc apar
   inițialele — spațiul rezervat rămâne identic, deci nu „sare"
   nimic în pagină după încărcarea pozei.
   ============================================================ */
.avatar{
  --dim:40px;
  width:var(--dim);height:var(--dim);
  flex:0 0 var(--dim);
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-light);
  color:var(--brand);
  font-weight:700;
  font-size:calc(var(--dim) * .36);
  letter-spacing:.5px;
  text-transform:uppercase;
  user-select:none;
  border:2px solid var(--card);
  box-shadow:0 0 0 1.5px var(--border);
  vertical-align:middle;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-sm{--dim:32px}
.avatar-lg{--dim:64px}
.avatar-xl{--dim:104px}

/* Poză + nume pe aceeași linie, aliniate pe verticală */
.avatar-linie{display:flex;align-items:center;gap:10px;min-width:0}
.avatar-linie .nume{min-width:0;overflow-wrap:anywhere}
.avatar-linie .rol{font-size:12px;color:var(--gray);display:block;font-weight:400}

/* Cardul „profesorul copilului", pe contul de părinte */
.profesor-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;margin-top:12px}
.profesor-card .eticheta{font-size:11px;color:var(--gray);
  text-transform:uppercase;letter-spacing:.4px;display:block}
.profesor-card .nume{font-weight:700;font-size:14.5px}

/* Zona de încărcare a pozei proprii */
.avatar-editor{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.avatar-editor .actiuni{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.avatar-editor input[type=file]{max-width:100%}

body.dark .avatar{background:#312e81;color:#c7d2fe}

/* Pe telefon, cercurile rămân lizibile dar nu ocupă tot ecranul */
@media(max-width:640px){
  .avatar-lg{--dim:52px}
  .avatar-xl{--dim:84px}
  .profesor-card{gap:10px}
  .avatar-editor{gap:12px}
}