/* ===== Tokens (same colours as the original design) ===== */
:root{--bg:#f3f6f4;--surface:#fff;--ink:#14282a;--muted:#52666a;--line:#d5dfdc;--brand:#0f5c5c;--brand-ink:#fff;--accent:#e8a21a;--slate:#5b7c99;--focus:#1d6fd6;
  --bs-form-invalid-color:#c0392b;--bs-form-invalid-border-color:#c0392b;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1b1c;--surface:#172829;--ink:#e8f1ef;--muted:#9bb2b0;--line:#27403f;--brand:#5cc2b8;--brand-ink:#08201f;--accent:#f0b43c;--slate:#8fb0cf;--focus:#7db4ff}}
:root[data-theme="dark"]{--bg:#0f1b1c;--surface:#172829;--ink:#e8f1ef;--muted:#9bb2b0;--line:#27403f;--brand:#5cc2b8;--brand-ink:#08201f;--accent:#f0b43c;--slate:#8fb0cf;--focus:#7db4ff}
/* Keep anchors clear of the phone's top bar */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
/* Page base: font and colours; a full-height column keeps the footer at the bottom */
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Poppins','Noto Sans Tamil','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
/* Clear focus outline for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px;box-shadow:none!important}

/* ===== Header, menu drawer, footer ===== */
/* Sticky top bar */
.site-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:1020}
/* ☰ menu button */
.menu{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:22px;cursor:pointer}
/* Portal name and college name in the header */
.brand{font-weight:700;font-size:1.05rem;letter-spacing:.2px;color:var(--ink);text-decoration:none;line-height:1.3}
.brand small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
/* Slide-down menu (opened by the ☰ button) */
.drawer{background:var(--surface);border-bottom:1px solid var(--line)}
.drawer .in{padding:8px 16px}
.drawer a{display:block;padding:12px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer a:last-child{border:0}
/* Bottom links: About | Contact | Privacy */
.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:6px 8px}
.site-footer ul{list-style:none;margin:0 auto;padding:0;max-width:560px;display:flex;justify-content:space-around}
.site-footer a{display:block;padding:14px 12px;min-height:44px;color:var(--muted);text-decoration:none;font-size:.9rem}
.site-footer a:hover{color:var(--brand)}
/* About / Contact / Privacy pop-up window */
.modal-content{background:var(--surface);color:var(--ink);border:0;border-radius:16px}
.modal-header,.modal-footer{border-color:var(--line)}

/* ===== Page, home choices ===== */
/* Centered narrow column used by the home and form pages */
main.page.container{flex:1;width:100%;max-width:560px;padding:32px 20px 24px}
/* Page title with the amber bar on the left */
h1{font-size:clamp(1.8rem,7vw,2.4rem);line-height:1.15;margin:0 0 10px;font-weight:700;border-left:6px solid var(--accent);padding-left:12px}
/* Short intro text under the title */
.lead{color:var(--muted);margin:0 0 28px;max-width:34ch;font-size:1rem}
/* Home page choice cards (Student / Parent / Employer) */
.choices{display:grid;gap:14px}
.choice{display:flex;align-items:center;gap:16px;width:100%;min-height:76px;padding:16px 18px;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;text-decoration:none;font-size:1.05rem;font-weight:600;transition:transform .12s,border-color .12s}
.choice:hover{border-color:var(--brand);color:var(--ink)}
.choice:active{transform:scale(.98)}
.choice .ico{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--brand) 14%,transparent)}
.choice small{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}
.choice .go{margin-left:auto;color:var(--brand);font-size:1.3rem}

/* ===== Buttons, form, progress, rating ===== */
/* Buttons: rounded and brand-coloured; .big makes a full-width button */
.btn{border-radius:12px;font-weight:600}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-color:var(--brand-ink);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:var(--brand-ink);--bs-btn-active-bg:var(--brand);--bs-btn-active-border-color:var(--brand);--bs-btn-active-color:var(--brand-ink)}
.btn-primary:hover{filter:brightness(.92)}
.btn-primary.big{width:100%;min-height:52px;font-size:1.05rem;font-weight:700;margin-top:6px}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:var(--brand-ink);--bs-btn-active-bg:var(--brand);--bs-btn-active-border-color:var(--brand);--bs-btn-active-color:var(--brand-ink)}
/* '‹ Back' link at the top of the form */
.back{min-height:44px;padding:0 12px 0 0;border:0;background:none;color:var(--brand);font-size:1rem;font-weight:600;text-decoration:none}
.back:hover{color:var(--brand)}
/* 'Step 1 of 2' text */
.stepinfo{color:var(--muted);font-size:.9rem;margin:0 0 8px}
/* Step progress bar */
.progress{--bs-progress-height:6px;--bs-progress-bg:var(--line);--bs-progress-bar-bg:var(--brand);border-radius:3px;margin-bottom:24px}
.progress-bar{transition:width .25s}
/* Form fields: label, input/dropdown and red error text */
.field{margin-bottom:18px}
.form-label{font-weight:600;margin-bottom:6px}
.form-control,.form-select{min-height:48px;padding:10px 12px;font-size:16px;color:var(--ink);background-color:var(--surface);border:1.5px solid var(--line);border-radius:12px}
.form-control:focus,.form-select:focus{background-color:var(--surface);color:var(--ink);border-color:var(--brand)}
.form-control:disabled,.form-select:disabled{opacity:.6;background-color:var(--surface)}
textarea.form-control{min-height:96px}
.invalid-feedback{font-size:.85rem}
/* One rating question */
fieldset.q{border:0;padding:0;margin:0 0 20px}
.q legend{float:none;font-size:1rem;font-weight:600;margin-bottom:6px;padding:0}
/* The 1-5 rating buttons (the radio is hidden, the label is the button) */
.rate{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rate .btn{display:grid;place-items:center;min-height:46px;padding:0;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:600}
.rate .btn-check:checked+.btn{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.rate .btn-check:focus-visible+.btn{outline:3px solid var(--focus);outline-offset:2px}
.scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin-top:4px}
/* Red error message text */
.qerr{color:#c0392b;font-size:.85rem;margin-bottom:8px}
/* Thank-you screen */
.done{text-align:center;padding:40px 0}
.done .tick{font-size:56px}
.done h2{font-size:1.5rem;font-weight:700}
/* Make the hidden attribute always win over Bootstrap */
[hidden]{display:none!important}
/* Turn off animations for people who prefer less motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Extra top space on larger screens */
@media (min-width:700px){main.page.container{padding-top:56px}}

/* ===== Admin dashboard ===== */
.wrap.container{max-width:1000px;padding:20px 16px 32px}
.wrap h1{font-size:clamp(1.3rem,5vw,1.7rem);margin:0;border:0;padding:0}
/* Admin header: logo square and user badge */
.logo{width:40px;height:40px;border-radius:12px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;flex:none}
.hb{font-weight:600;line-height:1.2;color:var(--ink);text-decoration:none}.hb small{display:block;font-weight:400;color:var(--muted);font-size:.75rem}
.me{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
@media (max-width:480px){.me span{display:none}}   /* small phones: hide the word 'Administrator' */
.av{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#14282a;display:grid;place-items:center;font-weight:700;font-size:.8rem}
/* White cards that hold charts, tables and comments */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.panel h2{font-size:1rem;font-weight:600;margin:0 0 12px}
/* Summary number cards (Total, Students, Parents, Employers) */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;border-top:4px solid var(--c);height:100%}
.kpi span{display:block;color:var(--muted);font-size:.85rem}
.kpi b{display:block;font-size:2rem;line-height:1.15;margin-top:2px}
.kpi small{color:var(--muted);font-size:.78rem}
/* Fixed-height box so charts size correctly */
.cb{position:relative;height:260px}
/* Course / batch table: course rows are shaded, batch rows are indented */
.th,.tr{display:grid;grid-template-columns:1fr 78px 46px;gap:2px 8px;align-items:center}
.th{font-size:.75rem;color:var(--muted);padding:0 8px 6px}
.tr{padding:10px 8px;border-top:1px solid var(--line);font-size:.9rem}
.tr.c{font-weight:600;background:color-mix(in srgb,var(--brand) 9%,transparent);border-radius:10px;border-top:0;margin-top:8px}
.tr:not(.c) .tn{padding-left:16px}
.tr span:nth-child(2){color:var(--muted)}.tr b{text-align:right}
.tb{grid-column:1/-1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.tb i{display:block;height:100%;background:var(--brand)}
.tr:not(.c) .tb i{background:var(--slate)}
/* Recent comments list: avatar, stars, text, details */
.cm{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cm:first-of-type{border-top:0}
.ci{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff}
.stars{color:var(--accent);letter-spacing:2px;font-size:.95rem}.stars i{color:var(--line);font-style:normal}
.cm p{margin:2px 0 4px;font-size:.93rem}
.meta{font-size:.76rem;color:var(--muted)}
/* Message shown when there is nothing to display */
.empty{color:var(--muted);text-align:center;padding:24px 0}
/* Centered admin sign-in box */
.gate{width:100%;max-width:420px;margin:10vh auto 0;padding:24px}
.gate h1{text-align:center}

/* ===== Face rating (student form) ===== */
/* Legend with the five faces and their Tamil names; stays visible while scrolling the questions */
.legend{position:sticky;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:5;display:flex;gap:4px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:8px 4px;margin-bottom:20px}
.legend div{flex:1;text-align:center;font-size:.68rem;line-height:1.25;color:var(--muted)}
.legend svg{display:block;margin:0 auto 2px}
/* The five clickable faces under each question */
.faces{display:flex;justify-content:space-between;gap:6px}
.face{flex:1;display:grid;place-items:center;padding:6px 0;border:2px solid transparent;border-radius:14px;cursor:pointer;transition:transform .12s}
.face svg{width:min(46px,100%);height:auto}
.btn-check:checked+.face{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);transform:scale(1.08)}
.btn-check:focus-visible+.face{outline:3px solid var(--focus);outline-offset:2px}

/* ===== Admin: question-wise analysis and opinions ===== */
/* One question: text, average, and a bar split by how many chose each face */
.qa{padding:12px 0;border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qt{font-size:.92rem;margin-bottom:6px;line-height:1.55}
.qm{display:flex;align-items:center;gap:8px;font-size:.85rem;margin-bottom:6px}
.qm span{color:var(--muted);margin-left:auto}
.stack{display:flex;height:22px;border-radius:11px;overflow:hidden;background:var(--line)}
.stack i{display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:600;color:#fff;min-width:0;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5)}
.stack i.dk{color:#14282a;text-shadow:none}
.legend-mini{display:flex;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--muted);margin-bottom:8px}
.legend-mini span{display:inline-flex;align-items:center;gap:4px}
.op h3{font-size:.92rem;font-weight:600;margin:14px 0 6px;line-height:1.55}
.op h3 small{color:var(--muted);font-weight:400}

/* ===== Admin: tabs and the student analytics cards ===== */
.nav-pills .nav-link{color:var(--ink);border-radius:12px;font-weight:600}
.nav-pills .nav-link.active{background:var(--brand);color:var(--brand-ink)}
.table{--bs-table-color:var(--ink);--bs-table-bg:transparent;--bs-table-border-color:var(--line);font-size:.88rem}
/* One question card: title, Tamil question, doughnut, answer table */
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;height:100%}
.qcard h3{font-size:.95rem;font-weight:600;margin:0 0 4px}
.ta{font-size:.82rem;color:var(--muted);line-height:1.55;margin-bottom:8px}
.cb.sm{height:210px}
.cb.lg{height:300px}
/* Answer table under a chart: colour dot, answer, count, percentage */
.arow{display:grid;grid-template-columns:12px 1fr 36px 58px;gap:6px;align-items:center;font-size:.8rem;padding:4px 0;border-top:1px solid var(--line)}
.arow small{color:var(--muted)}
.arow b{text-align:right}
.arow span:last-child{text-align:right;color:var(--muted)}
.arow.tot{font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;display:block}
.legend-mini small{color:var(--muted)}

/* ===== Employer form: part headings and the numbered legend ===== */
.part{font-size:1rem;font-weight:700;margin:22px 0 12px;padding:6px 10px;background:color-mix(in srgb,var(--brand) 10%,transparent);border-left:4px solid var(--brand);border-radius:6px}
.num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;font-weight:700;font-size:.7rem;line-height:1;vertical-align:middle}
.num.dk{color:#14282a}
.legend .num{display:grid;width:28px;height:28px;font-size:.85rem;margin:0 auto 2px}

/* ===== Admin: Courses & batches manager ===== */
.mcard{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;background:var(--surface)}
.mhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 12px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;background:color-mix(in srgb,var(--brand) 9%,transparent)}
.chip button{border:0;background:none;color:var(--muted);min-width:32px;min-height:32px;border-radius:50%;line-height:1;cursor:pointer}
.chip button:hover{color:var(--ink);background:color-mix(in srgb,var(--brand) 18%,transparent)}
.mrow{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.mrow .form-control{flex:1;min-width:0}
.mrow .btn{flex:none}
#mgr.busy{opacity:.6;pointer-events:none}

/* ---- Admin: the "filter suggestions by question" dropdown has long question texts.
   It used to grow as wide as the longest question and pushed the whole page sideways on a phone. ---- */
#cQ { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
  #cQ { width: 100% !important; margin-left: 0 !important; }       /* full width, on its own line under the heading */
}
/* Safety net: no dropdown or text box in the admin panel may be wider than its container */
body[data-page="admin"] .form-select, body[data-page="admin"] .form-control { max-width: 100%; min-width: 0; }
body[data-page="admin"] canvas { max-width: 100%; }

/* ---- Admin, phone view: the written-suggestions table becomes one card per suggestion (no sideways scrolling,
   nothing cut off). Each cell shows its own small heading from the data-label set in admin.js. ---- */
@media (max-width: 767.98px) {
  #cTable, #cTable tbody, #cTable tr, #cTable td { display: block; width: 100%; }
  #cTable thead { display: none; }
  #cTable tr { padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
  #cTable td { border: 0; padding: .15rem 0; white-space: normal !important; overflow-wrap: anywhere; }
  #cTable td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--bs-secondary-color, #6c757d); }
}

/* ---- Admin: "Compare two periods" ---- */
#cmpBox { position: relative; width: 100%; }
#cmpTable th, #cmpTable td { font-size: .9rem; }
#cmpKpis .col { min-width: 0; }
#cmpKpis .kpi { padding: 12px; overflow-wrap: anywhere; }
#cmpKpis .kpi b { font-size: 1.3rem; }
#cmpKpis .kpi small { display: block; }

/* ---- Admin: comparison. A / B colour chips next to the period names ---- */
.pchip { display: inline-block; min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.5rem; }

/* ---- Admin comparison: small pie charts, one pair per question ---- */
.cb.xs { height: 170px; }