/* assets/parent.css */
/* Szülői dashboard – csak finomhangolás az app.css fölött */

.parent-scope .page-title h1{
  font-size: 20px;
}

/* Státusz badge-ek – szülői szemnek érthetőbb */
.parent-scope .badge-ok{
  background: rgba(53,194,178,0.18);
  border: 1px solid rgba(53,194,178,0.45);
  color: #0f3b36;
}

.parent-scope .badge-danger{
  background: #ffe9e9;
  border: 1px solid #ffb3b3;
  color: #7a1f1f;
}

/* Kiemelt KPI számok */
.parent-scope .kpi{
  font-size: 22px;
  font-weight: 800;
  color: var(--brand2);
}

/* Segédszöveg szülőknek */
.parent-scope .hint{
  font-size: 13px;
  color: var(--muted);
}

/* Email-riport előnézethez (később) */
.parent-scope .email-preview{
  background: #fbfdff;
  border: 1px dashed var(--border);
  padding: 14px;
  border-radius: var(--radius);
}


/* assets/parent.css */





/* iOS/Chrome: görgetéskor ne "rángasson" */
.parent-scope .table-wrap::-webkit-scrollbar{
  height: 10px;
}
.parent-scope .table-wrap::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
}



/* Az idő/dátum oszlop törhet (különben kilóg) */
.parent-scope td.time-col,
.parent-scope th.time-col{
  white-space: normal;
  word-break: break-word;
}

/* Mobilon a nagy címek legyenek visszafogottabbak */
@media (max-width: 600px){
  .parent-scope h1{ font-size: 22px; }
  .parent-scope h2{ font-size: 18px; }
}


/* ---- parent.css: anti-overflow patch ---- */

/* 1) Globális: ne tudjon az oldal vízszintesen túlnyúlni */
.parent-scope { overflow-x: hidden; }
.parent-scope .crm { overflow-x: hidden; }
.parent-scope .main { overflow-x: hidden; }


/* 2) A topbar elemek tudjanak törni mobilon */
.parent-scope .topbar {
  flex-wrap: wrap;
}

.parent-scope .top-right {
  flex-wrap: wrap;
  gap: 8px;
}

.parent-scope .pill {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* 3) Táblák: a wrap valóban fogja meg a szélességet */
.parent-scope .table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktopon ne erőltessünk min-width-et a táblára */
.parent-scope .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

/* Mobilon viszont legyen “riport scroll” élmény */
@media (max-width: 640px) {
  .parent-scope .table-wrap table {
    min-width: 680px; /* itt oké, mert a wrap-en belül fog scrollozni */
  }
}

/* 4) Dátum/idő oszlop törhető legyen */
.parent-scope td.time-col,
.parent-scope th.time-col {
  white-space: normal;
  word-break: break-word;
}


/* ---- Parent: táblák / overflow (egységes, desktop+mobil) ---- */

/* Card ne engedjen vízszintes kilógást */
.parent-scope .card { overflow: hidden; }

/* Table wrapper: mindig 100% széles */
.parent-scope .table-wrap{
  width: 100%;
  max-width: 100%;
}

/* Desktop: normál tábla, nincs kényszerített scroll */
@media (min-width: 641px){
  .parent-scope .table-wrap{
    overflow-x: visible;
  }

  .parent-scope .table-wrap table.table{
    width: 100%;
    min-width: 0;
    table-layout: auto;        /* fontos: ne fixed legyen */
  }
}

/* Mobil: legyen vízszintes görgetés, és legyen min-width a táblának */
@media (max-width: 640px){
  .parent-scope .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .parent-scope .table-wrap table.table{
    width: 100%;
    min-width: 680px;
    table-layout: auto;
  }
}

/* Dátum/idő oszlop: törhető */
.parent-scope td.time-col,
.parent-scope th.time-col{
  white-space: normal;
  word-break: break-word;
}

/* Topbar pill-ek: mobilon törjenek, desktopon maradhat egy sorban */
@media (max-width: 640px){
  .parent-scope .topbar { flex-wrap: wrap; }
  .parent-scope .top-right { flex-wrap: wrap; gap: 8px; }
  .parent-scope .pill { max-width: 100%; white-space: normal; word-break: break-word; }
}


/* ---- Parent: table vizuális finomítás (ne legyen "vastag doboz") ---- */

/* A card már elég: a tábláról vegyük le a saját keretet */
.parent-scope table.table{
  border: 0;
  border-radius: 0;
}

/* Fejléc háttér maradhat, de legyen finomabb */
.parent-scope table.table th{
  background: #fbfdff;
}

/* Hover legyen kevésbé “foltos” nagy üres táblánál */
.parent-scope table.table tr:hover td{
  background: rgba(53,194,178,0.04);
}

/* Ha még így is dominál: a sor elválasztókat is lehet halványítani */
.parent-scope table.table th,
.parent-scope table.table td{
  border-bottom-color: rgba(0,0,0,0.04);
}


@media (min-width: 641px){
  .parent-scope .table-wrap{
    max-height: 420px;
    overflow-y: auto;
  }
}


/* ---- Parent: Idő oszlop fixálása, hogy ne törjön karakterenként ---- */

/* A time-col kapjon fix/min szélességet, és ne törjön soron belül */
.parent-scope th.time-col,
.parent-scope td.time-col{
  min-width: 160px;        /* állítsd 140–180 között ízlésre */
  width: 160px;
  white-space: nowrap;     /* 2026-01-10 22:53 egy sor */
  word-break: normal;      /* NE törje karakterenként */
  overflow-wrap: normal;
}

/* Mobilon is ugyanez: ott úgyis table-wrap scrollt ad */
@media (max-width: 640px){
  .parent-scope th.time-col,
  .parent-scope td.time-col{
    min-width: 160px;
    width: 160px;
  }
}


/* =========================
   Parent - Student details UI
   ========================= */

.parent-scope .hero-card{
  background: linear-gradient(120deg, rgba(53,194,178,0.16), rgba(92,110,255,0.10));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.parent-scope .hero-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.parent-scope .hero-title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.parent-scope .hero-sub{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.parent-scope .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.70);
  color: rgba(0,0,0,0.78);
  font-size: 13px;
  white-space: nowrap;
}

.parent-scope .stack{
  display:grid;
  gap: 14px;
  margin-top: 14px;
}

.parent-scope .kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .parent-scope .kpi-grid{ grid-template-columns: 1fr; }
}

.parent-scope .kpi-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.parent-scope .kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}

.parent-scope .kpi-title{
  margin:0;
  font-size: 14px;
  font-weight: 800;
}

.parent-scope .kpi-value{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

.parent-scope .kpi-meta{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
}

/* Progress bar (szebb, vastagabb) */
.parent-scope .pbar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  margin-top: 10px;
}
.parent-scope .pbar > div{
  height: 100%;
  width: var(--p, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(53,194,178,1), rgba(92,110,255,1));
}

/* Donut chart (CSS conic-gradient) */
.parent-scope .donut{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    conic-gradient(
      rgba(53,194,178,1) calc(var(--p, 0) * 1%),
      rgba(0,0,0,0.08) 0
    );
  display:grid;
  place-items:center;
}
.parent-scope .donut::after{
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
}

.parent-scope .row-slim{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.parent-scope .muted-sm{
  color: var(--muted);
  font-size: 12px;
}

/* Modul lista "sávos" kártyákkal */
.parent-scope .module-list{
  display:grid;
  gap: 10px;
}

.parent-scope .module-item{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
}

.parent-scope .module-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}

.parent-scope .badge-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.70);
  font-size: 12px;
}

/* Quiz status pill */
.parent-scope .pill-pass{
  background: rgba(53,194,178,0.14);
  border: 1px solid rgba(53,194,178,0.35);
  color: #0f3b36;
}
.parent-scope .pill-fail{
  background: rgba(255,80,80,0.12);
  border: 1px solid rgba(255,80,80,0.30);
  color: #7a1f1f;
}

/* Táblák helyett “mini rows” */
.parent-scope .mini-table{
  display:grid;
  gap: 10px;
}
.parent-scope .mini-row{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
}
.parent-scope .mini-row .top{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.parent-scope .mini-row .title{
  font-weight: 900;
}
.parent-scope .mini-row .sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}


/* Parent layout: sticky sidebar + main scroll */
.parent-scope .crm{
  height: 100vh;
  overflow: hidden; /* a main fog scrollozni */
}

/* Bal oldali menü végig látszódjon */
.parent-scope .sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto; /* ha sok menüpont van, a sidebar belül görgethető */
}

/* A tartalom görgetése */
.parent-scope .main{
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}





/* --- Parent: Donut (pure CSS) --- */
.parent-scope .kpi-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
}

.parent-scope .donut{
  --p: 0;                 /* 0..100 */
  --size: 104px;
  --thickness: 12px;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--brand2) calc(var(--p) * 1%), rgba(0,0,0,0.08) 0);
  position: relative;
  display: grid;
  place-items: center;
}

.parent-scope .donut::before{
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.parent-scope .donut .donut-text{
  position: relative;
  text-align: center;
  line-height: 1.05;
}

.parent-scope .donut .donut-text b{
  display: block;
  font-size: 20px;
}

.parent-scope .donut .donut-text span{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Parent: mini KPI bars --- */
.parent-scope .mini-kpis{
  display: grid;
  gap: 10px;
}

.parent-scope .mini{
  display: grid;
  gap: 6px;
}

.parent-scope .mini .mini-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.parent-scope .mini .mini-val{
  font-weight: 800;
  color: #111;
}

.parent-scope .mini .mini-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
}

.parent-scope .mini .mini-bar > div{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(53,194,178,0.75); /* brand2-hoz hasonló */
}

/* Mobilon egymás alá */
@media (max-width: 720px){
  .parent-scope .kpi-row{
    grid-template-columns: 1fr;
  }
  .parent-scope .donut{
    margin: 0 auto;
  }
}


    @media (max-width: 900px){
      .parent-scope .sidebar{ transform: translateX(-110%); transition: transform .2s ease; position: fixed; left:0; top:0; bottom:0; z-index: 50; }
      .parent-scope .sidebar.is-open{ transform: translateX(0); }
      .parent-scope .main{ margin-left: 0 !important; }
    }


    /* ===== Parent: mobile sidebar scrim ===== */
.parent-scope .parent-scrim{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 40;
}
.parent-scope.body.sidebar-open .parent-scrim{ display:block; } /* ha body-n van class */
body.sidebar-open .parent-scrim{ display:block; }              /* biztos ami biztos */

/* ===== Parent: stack layout (diák kártyák egymás alatt) ===== */
.parent-scope .parent-stack{
  display: grid;
  gap: 14px;
}

.parent-scope .parent-student-name{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.parent-scope .parent-student-head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:flex-start;
  flex-wrap: wrap;
}

.parent-scope .parent-student-cta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Rows ===== */
.parent-scope .parent-row{
  margin-top: 10px;
}
.parent-scope .parent-row-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.parent-scope .parent-row-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .parent-scope .parent-row-3{ grid-template-columns: 1fr; }
  .parent-scope .parent-row-2{ grid-template-columns: 1fr; }
}

/* ===== KPI ===== */
.parent-scope .parent-kpi-top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.parent-scope .parent-kpi-val{
  font-size: 22px;
  font-weight: 900;
  color: var(--brand2);
}

/* ===== Mini bars ===== */
.parent-scope .parent-mini{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.parent-scope .parent-mini-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.parent-scope .parent-mini-top b{
  font-weight: 900;
}

.parent-scope .parent-mini-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
}
.parent-scope .parent-mini-bar > div{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(53,194,178,0.90), rgba(92,110,255,0.80));
}