@font-face{font-family:Unvr;src:url('/static/fonts/unvr55w.ttf')}@font-face{font-family:Unvr;src:url('/static/fonts/unvr68w.ttf');font-weight:700}
:root{--navy:#004B8D;--yellow:#FFD500;--red:#EF2924;--ink:#263246;--muted:#6e7785;--line:#e4e8ef;--gold:#B69A5D}
*{box-sizing:border-box}body{margin:0;background:#f4f6fa;color:var(--ink);font-family:Unvr,Arial,sans-serif;font-size:16px;position:relative;min-height:100vh}
body:before{content:"";position:fixed;inset:0;background-image:url('/static/logo.png');background-repeat:no-repeat;background-position:center center;background-size:min(82vw,1000px) auto;opacity:.045;pointer-events:none;z-index:0}
header{position:relative;z-index:10;background:#fff;border-bottom:4px solid var(--yellow);padding:12px 4%;display:flex;align-items:center;gap:14px;box-shadow:0 2px 12px #172b4d10}
header img{width:58px;height:58px;object-fit:contain}header strong{color:var(--navy);font-size:19px}header small{display:block;color:var(--muted)}
nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}a{color:var(--navy);text-decoration:none}nav a{font-size:14px;font-weight:bold}
main{position:relative;z-index:1;max-width:1180px;margin:30px auto;padding:0 18px}.panel{position:relative;isolation:isolate;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:0 5px 22px #142b4a08}
.panel>*{position:relative;z-index:1}
h1{font-size:25px;color:var(--navy);margin:0 0 18px}h2{font-size:19px;color:var(--navy);margin:0 0 14px}p.muted,.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.stat{padding:18px;border-radius:12px;background:#f5f8fc;border-left:4px solid var(--navy)}.stat b{font-size:26px;color:var(--navy);display:block}
label{display:block;font-weight:bold;font-size:14px;margin:12px 0 5px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd6e0;border-radius:8px;font:inherit;background:white}textarea{min-height:130px;resize:vertical}
button,.btn{display:inline-block;border:0;border-radius:8px;background:var(--navy);color:white;padding:11px 16px;font:inherit;font-weight:bold;cursor:pointer;margin-top:12px}.btn.yellow{background:var(--yellow);color:#18263c}.btn.red{background:var(--red)}.btn.gray{background:#667085}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f5f7fa;color:var(--navy)}
.flash{padding:12px 15px;border-radius:8px;margin:10px 0;background:#eaf3ff}.flash.error{background:#fff0ef;color:#a21e19}.flash.success{background:#e9f8ef;color:#17663b}
.login{max-width:440px;margin:7vh auto}.login .logo{display:block;width:110px;margin:0 auto 12px}.check{font-size:45px;color:#159653;text-align:center}.badge{display:inline-block;padding:4px 8px;border-radius:20px;background:#eef3fa;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:650px){header{flex-wrap:wrap}nav{margin:0;width:100%;gap:12px}main{margin:16px auto}.panel{padding:16px;overflow-x:auto}table{min-width:600px}}
.brand{display:flex;align-items:center;gap:14px;color:inherit}.brand:hover{text-decoration:none}
.nav-menu{position:relative;align-self:center}.nav-menu summary{list-style:none;cursor:pointer;color:var(--navy);font-size:14px;font-weight:700;padding:7px 4px}.nav-menu summary::-webkit-details-marker{display:none}
.nav-dropdown{position:absolute;right:0;top:calc(100% + 12px);min-width:245px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px #172b4d20;padding:8px;display:grid;gap:2px;z-index:30}
.nav-dropdown a{padding:10px 12px;border-radius:7px;color:var(--ink);font-size:14px}.nav-dropdown a:hover{background:#f1f5fa}
.nav-user{font-size:12px;color:var(--muted);white-space:nowrap}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.page-heading h1{margin-bottom:4px}.eyebrow{font-size:11px;letter-spacing:1.2px;font-weight:bold;color:var(--gold);margin:0 0 7px}
.count-chip{background:#eaf1f8;color:var(--navy);border-radius:30px;padding:8px 13px;font-size:13px;font-weight:bold}
.searchbar{display:grid;grid-template-columns:minmax(220px,1fr) 190px 200px auto auto;gap:9px;align-items:end;margin-bottom:18px}.searchbar input,.searchbar select{margin:0}.searchbar .btn,.searchbar button{margin:0;white-space:nowrap}
.table-wrap{overflow-x:auto}.directory{min-width:760px}.directory tbody tr:hover{background:#f8fbff}.user-link{font-weight:bold;color:var(--navy)}.subline{display:block;color:var(--muted);font-size:11px;margin-top:3px}.text-action{font-size:13px;font-weight:bold;white-space:nowrap}
.status-pill{display:inline-block;padding:5px 10px;border-radius:30px;font-size:12px;font-weight:bold}.status-pill.active{background:#e8f6ed;color:#17663b}.status-pill.inactive{background:#f1f2f4;color:#68707b}
.create-user summary{cursor:pointer;color:var(--navy);font-weight:bold;font-size:17px}.create-user[open] summary{margin-bottom:16px}
.actions form{display:inline-block}.actions form button{margin-top:0}
.panel{background:rgba(255,255,255,.94)}
@media(max-width:900px){.searchbar{grid-template-columns:1fr 1fr}.searchbar input{grid-column:1/-1}nav{gap:9px}.nav-user{display:none}}
@media(max-width:650px){.page-heading{align-items:flex-start;flex-direction:column}.searchbar{grid-template-columns:1fr}.searchbar input{grid-column:auto}.brand{width:100%}.nav-menu{position:static}.nav-dropdown{left:12px;right:12px;top:auto}.nav-user{display:none}}

.test-line{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end;border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.test-line label{grid-column:1/-1}.test-line input{grid-column:1}.test-line button{grid-column:2;grid-row:2;margin:0;white-space:nowrap}.switchline{display:flex;align-items:center;gap:10px;margin:12px 0}.switchline input{width:auto}.hint{font-size:13px;color:var(--muted);background:#f5f8fc;padding:12px;border-radius:8px}
@media(max-width:650px){.test-line{grid-template-columns:1fr}.test-line label,.test-line input,.test-line button{grid-column:1;grid-row:auto}}

/* V6: unified dashboard layout and feedback analytics */
.page-heading{align-items:center;min-height:64px}.panel h3{color:var(--navy);font-size:16px;margin:0 0 10px}.meeting-form{min-width:260px;max-width:390px}.meeting-form textarea{min-height:90px}.meeting-form label{margin-top:8px}.meeting-form button{white-space:nowrap}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.metric-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;text-align:center}.metric-card small{color:var(--muted)}.donut{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--navy) calc(var(--pct)*1%),#e8edf4 0);position:relative}.donut:before{content:"";position:absolute;width:88px;height:88px;background:white;border-radius:50%}.donut span{position:relative;z-index:1;font-size:20px;font-weight:700;color:var(--navy)}.rating-bars{display:grid;gap:7px}.rating-row{display:flex;justify-content:space-between;padding:8px 10px;background:#f5f8fc;border-radius:7px}.rating-summary{max-width:360px;white-space:pre-wrap}.rating-chip{display:inline-block;margin-left:8px;padding:4px 9px;border-radius:20px;background:#edf4ff;color:var(--navy);font-size:12px}.history-entry{padding:14px 0;border-top:1px solid var(--line)}.danger-zone{border-color:#f1c6c3}.danger-zone h2{color:#a21e19}.directory td{min-width:100px}.directory td:last-child{min-width:260px}.table-wrap{width:100%;overflow-x:auto}
@media(max-width:800px){.metric-grid{grid-template-columns:1fr}.metric-card{flex-direction:row;justify-content:flex-start;text-align:left}.metric-card .donut{flex:0 0 100px;width:100px;height:100px}.metric-card .donut:before{width:70px;height:70px}.meeting-form{max-width:none}}

.pie{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto}.pie:before{content:"";position:absolute;width:96px;height:96px;background:#fff;border-radius:50%}.pie span{position:relative;z-index:1;font-size:23px;font-weight:700;color:var(--navy)}.pie-legend{display:grid;gap:5px;text-align:left;font-size:12px}.pie-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.pie-legend .good{background:#00604B}.pie-legend .medium{background:#F0B429}.pie-legend .bad{background:#D64545}

.row-actions{display:flex;align-items:center;gap:10px}.row-actions form{margin:0}.mini-button{padding:6px 10px;font-size:12px;margin:0}


/* V6.1: header, navigation and dashboard alignment refinement */
header{
  min-height:88px;
  padding:10px clamp(16px,2.2vw,38px);
  gap:clamp(12px,1.5vw,26px);
  flex-wrap:nowrap;
}
header .brand{flex:0 0 auto;min-width:300px;gap:14px}
header .brand img{width:64px;height:64px;flex:0 0 64px}
header .brand strong{display:block;line-height:1.15;font-size:clamp(17px,1.25vw,21px);white-space:nowrap}
header .brand small{line-height:1.25;font-size:13px;white-space:nowrap}
header nav{
  flex:1 1 auto;min-width:0;margin-left:auto;display:flex;align-items:center;
  justify-content:flex-end;gap:clamp(8px,1.05vw,18px);flex-wrap:nowrap;
}
header nav>a,header nav .nav-menu summary{white-space:nowrap;line-height:1.25;font-size:clamp(12px,.92vw,15px)}
header nav .nav-user{white-space:nowrap;flex:0 0 auto}
.nav-menu{flex:0 0 auto}
main{width:min(1440px, calc(100% - 40px));max-width:1440px;margin:30px auto 42px;padding:0}
.grid{align-items:stretch;gap:16px;margin-bottom:18px}
.stat{min-width:0;min-height:106px;display:flex;flex-direction:column;justify-content:center;padding:18px 22px;line-height:1.3}
.stat b{line-height:1.05;margin-top:3px}
.panel{margin-top:0;margin-bottom:20px;padding:22px 24px}
.panel h2{line-height:1.25;margin-bottom:16px}
.admin-school-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 18px}
.admin-school-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#f8fafd}
.admin-school-item span{min-width:0;overflow-wrap:anywhere}
.admin-school-item strong{flex:0 0 auto;color:var(--navy);font-size:20px}
.admin-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.admin-shortcuts .btn{margin:0}
@media(max-width:1250px){
  header{flex-wrap:wrap}
  header .brand{min-width:0}
  header nav{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;margin:0;padding:4px 0 2px}
  header nav .nav-user{margin-left:auto}
}
@media(max-width:700px){
  header{padding:10px 16px;gap:8px}
  header .brand{width:100%}
  header .brand img{width:54px;height:54px;flex-basis:54px}
  header .brand strong,header .brand small{white-space:normal}
  header nav{gap:8px 12px}
  header nav .nav-user{display:none}
  main{width:calc(100% - 24px);margin:18px auto 30px;padding:0}
  .grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
  .panel{padding:16px;margin-bottom:14px}
}

/* V6.2 operational screens: compact lists and stable preference forms */
.preference-table{min-width:850px}.preference-form{display:flex;align-items:center;gap:8px;min-width:290px;margin:0}.preference-form select{flex:1;min-width:180px;margin:0}.preference-form button{margin:0;white-space:nowrap}.preference-table td{vertical-align:middle;padding:12px 10px}.slots-list-scroll{max-height:290px;overflow:auto;border:1px solid var(--line);border-radius:10px}.slots-list-scroll table{margin:0}.slots-list-scroll thead th{position:sticky;top:0;background:#f5f8fc;z-index:1}.slots-list-scroll td,.slots-list-scroll th{padding:8px 12px}.slots-list-scroll tr{height:38px}.mini-button{padding:5px 10px;font-size:12px;margin:0}.admin-shortcuts form{display:inline-flex}
@media(max-width:700px){.preference-form{min-width:260px}.slots-list-scroll{max-height:240px}}


/* V6.3 – compact availability forms and searchable management reports */
.availability-panel{
  width:min(100%, 940px);
  max-width:940px;
  margin-left:0;
  padding:22px 24px;
}
.availability-form{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:100%;
}
.availability-field{min-width:0}
.availability-field label{display:block;margin:0 0 6px}
.availability-form input,
.availability-form select{width:100%;max-width:100%;min-width:0}
.availability-form .teacher-field{max-width:620px}
.availability-form .date-field{max-width:360px}
.availability-time-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,300px));
  gap:14px;
  max-width:614px;
}
.availability-form .duration-field{max-width:260px}
.availability-form button{justify-self:start;margin-top:2px}
.availability-list-panel{max-width:940px}
.slots-list-scroll{
  max-height:260px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
}
.slots-list-scroll table{margin:0;width:100%}
.slots-list-scroll thead{position:sticky;top:0;z-index:1;background:#f4f7fb}
.report-plan{max-width:1120px}
.report-plan-form{display:flex;flex-direction:column;gap:10px}
.report-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:14px;
  max-width:100%;
}
.report-filter-grid>div{min-width:0}
.report-filter-grid label{display:block;margin-bottom:6px}
.recipient-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 6px;
}
.recipient-picker{
  border:1px solid var(--line);
  border-radius:10px;
  max-height:260px;
  overflow:auto;
  padding:6px 10px;
  background:#fff;
}
.recipient-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 6px;
  border-bottom:1px solid #edf0f4;
  cursor:pointer;
  margin:0;
}
.recipient-option:last-child{border-bottom:0}
.recipient-option[hidden]{display:none}
.recipient-option input{width:17px;height:17px;flex:0 0 auto}
.recipient-main{display:flex;flex-direction:column;gap:2px;min-width:180px}
.recipient-main small,.recipient-email{font-size:12px;color:#68758a}
.recipient-email{margin-left:auto;overflow-wrap:anywhere}
.preference-saved-row{background:#f0f8f3}
.saved-confirmation{display:block;color:#16845b;font-size:11px;margin-top:3px}
@media(max-width:760px){
  .availability-panel,.availability-list-panel{max-width:100%;padding:16px}
  .availability-time-row{grid-template-columns:1fr;max-width:100%}
  .availability-form .teacher-field,.availability-form .date-field,.availability-form .duration-field{max-width:100%}
  .report-filter-grid{grid-template-columns:1fr}
  .recipient-option{align-items:flex-start;flex-wrap:wrap}
  .recipient-email{margin-left:29px;width:100%}
}


/* V6.4 hard override: compact availability cards in all roles */
main .panel.availability-panel,
main .panel.availability-list-panel{
  box-sizing:border-box !important;
  width:min(100%, 900px) !important;
  max-width:900px !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
main .panel.availability-panel{padding:18px 20px !important}
main .availability-form{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:9px !important;
  max-width:100% !important;
}
main .availability-form .teacher-field{max-width:480px !important}
main .availability-form .date-field{max-width:290px !important}
main .availability-time-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,230px)) !important;
  gap:10px !important;
  max-width:470px !important;
}
main .availability-form .duration-field{max-width:210px !important}
main .availability-form label{margin-bottom:4px !important}
main .availability-form input,
main .availability-form select{min-height:40px !important;padding:8px 12px !important}
main .availability-form button{margin-top:2px !important}
main .slots-list-scroll{max-height:220px !important;overflow:auto !important}
@media(max-width:760px){
  main .panel.availability-panel,
  main .panel.availability-list-panel{width:100% !important;max-width:100% !important;padding:15px !important}
  main .availability-form .teacher-field,
  main .availability-form .date-field,
  main .availability-form .duration-field{max-width:100% !important}
  main .availability-time-row{grid-template-columns:1fr !important;max-width:100% !important}
}

/* V6.5 */
.btn-small{padding:6px 12px;font-size:13px;margin-top:6px;background:#fff;color:#00604B;border:1px solid #00604B;border-radius:8px;cursor:pointer}
.btn-small:hover{background:#00604B;color:#fff}