/* =========================================================
   EDUHUNT PRINCIPAL PORTAL V2.1.14
   PRINCIPAL-ONLY APP UI + FOCUSED SCHOOL WORKFLOW
   Desktop remains a clean ERP layout. Mobile/tablet becomes a fixed-nav app.
   No selectors below apply to another portal role.
========================================================= */

body[data-portal-role="PRINCIPAL"]{
  --pr-navy:#06162b;
  --pr-navy-2:#09233d;
  --pr-navy-3:#0d3151;
  --pr-cyan:#3ee7dd;
  --pr-blue:#1a8cff;
  --pr-line:#2f5b78;
  --pr-soft:#eef5fc;
}

/* ---------- Desktop: focused Principal presentation ---------- */
@media (min-width:1025px){
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{display:none!important}
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub{display:none!important}

  body[data-portal-role="PRINCIPAL"] .principal-strength-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:11px;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button{
    min-height:84px;
    padding:13px 14px;
    border:1px solid #c9d8ea;
    border-radius:12px;
    background:#f7fbff;
    color:#0b355e;
    text-align:center;
    cursor:pointer;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button span{
    display:block;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button b{
    display:block;
    margin-top:6px;
    color:#071b34;
    font-size:29px;
    line-height:1;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button.active{
    border-color:#167ee7;
    color:#fff;
    background:linear-gradient(135deg,#116bda,#25c8d9);
    box-shadow:0 9px 24px rgba(25,118,210,.18);
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button.active b{color:#fff}

  body[data-portal-role="PRINCIPAL"] .principal-result-groups{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-group{
    border:1px solid #cedaea;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 5px 14px rgba(21,48,82,.05);
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-group>button{
    width:100%;
    min-height:106px;
    padding:17px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
    border:0;
    background:#fff;
    color:#10233f;
    text-align:left;
    cursor:pointer;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-group>button:hover{background:#f5f9ff}
  body[data-portal-role="PRINCIPAL"] .principal-result-group strong{display:block;font-size:18px;color:#0b4d86}
  body[data-portal-role="PRINCIPAL"] .principal-result-group small{display:block;margin-top:5px;color:#5b6f85;font-size:12px}
  body[data-portal-role="PRINCIPAL"] .principal-result-group .principal-result-group-meta{text-align:right}

  body[data-portal-role="PRINCIPAL"] .principal-class-filter{
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:15px;
  }
  body[data-portal-role="PRINCIPAL"] .principal-filter-label{font-size:12px;font-weight:900;color:#496078;text-transform:uppercase}
  body[data-portal-role="PRINCIPAL"] .principal-class-chips{display:flex;flex-wrap:wrap;gap:8px}
  body[data-portal-role="PRINCIPAL"] .principal-class-chips button,
  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs button{
    min-height:42px;
    padding:9px 14px;
    border:1px solid #bdd0e3;
    border-radius:9px;
    background:#f4f8fd;
    color:#0b4d86;
    font-weight:900;
    cursor:pointer;
  }
  body[data-portal-role="PRINCIPAL"] .principal-class-chips button.active,
  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs button.active{
    border-color:#0b68bd;
    background:#0b5b99;
    color:#fff;
  }

  body[data-portal-role="PRINCIPAL"] .principal-result-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:14px 0;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button{
    min-height:82px;
    padding:12px;
    border:1px solid #c8d7e6;
    border-radius:12px;
    background:#f5f9fd;
    color:#123452;
    cursor:pointer;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button b{display:block;font-size:13px}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button small{display:block;margin-top:6px;color:#8a4e00;font-size:10px;font-weight:900}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.ready small{color:#08752a}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.active{
    border-color:#1e8fe4;
    background:linear-gradient(135deg,#0f63b5,#10b8cc);
    color:#fff;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.active small{color:#eaffff}

  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
  }

  body[data-portal-role="PRINCIPAL"] .principal-download-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}

/* ---------- Shared Principal-only components ---------- */
body[data-portal-role="PRINCIPAL"] .principal-result-hero{grid-template-columns:1fr!important}
body[data-portal-role="PRINCIPAL"] .principal-result-note{margin:12px 0}
body[data-portal-role="PRINCIPAL"] .principal-result-groups{margin-top:12px}

/* Result group cards: actual catalogue markup (details + metrics + action). */
body[data-portal-role="PRINCIPAL"] .principal-result-group{padding:16px}
body[data-portal-role="PRINCIPAL"] .principal-result-group>div:first-child h3{margin:5px 0 3px;color:#0b4d86;font-size:18px}
body[data-portal-role="PRINCIPAL"] .principal-result-group>div:first-child p{margin:0;color:#61758a;font-size:11px}
body[data-portal-role="PRINCIPAL"] .principal-test-label{display:inline-block;padding:4px 8px;border-radius:15px;background:#e9f3ff;color:#0b5c9c;font-size:11px;font-weight:900}
body[data-portal-role="PRINCIPAL"] .principal-result-group-metrics{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;margin:13px 0}
body[data-portal-role="PRINCIPAL"] .principal-result-group-metrics>span{color:#536a80;font-size:10px;font-weight:800}
body[data-portal-role="PRINCIPAL"] .principal-result-group-metrics>span b{margin-right:3px;color:#102b48;font-size:15px}
body[data-portal-role="PRINCIPAL"] .principal-result-group>.button{width:100%}
body[data-portal-role="PRINCIPAL"] .principal-result-group{position:relative}
body[data-portal-role="PRINCIPAL"] .principal-result-group-meta b{font-size:20px;color:#0b4d86}
body[data-portal-role="PRINCIPAL"] .principal-result-group-meta span{display:block;margin-top:3px;color:#5e7186;font-size:10px;font-weight:800}

body[data-portal-role="PRINCIPAL"] .principal-student-profile{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px;
}
body[data-portal-role="PRINCIPAL"] .principal-student-profile>div{
  padding:11px;
  border:1px solid #cbd9e8;
  border-radius:10px;
  background:#f7fbff;
}
body[data-portal-role="PRINCIPAL"] .principal-student-profile span{display:block;color:#60758a;font-size:11px;font-weight:900;text-transform:uppercase}
body[data-portal-role="PRINCIPAL"] .principal-student-profile b{display:block;margin-top:5px;color:#0d2d4d;font-size:14px}

body[data-portal-role="PRINCIPAL"] .principal-student-test{
  margin:11px 0;
  overflow:hidden;
  border:1px solid #c9d8e8;
  border-radius:13px;
  background:#fff;
}
body[data-portal-role="PRINCIPAL"] .principal-student-test>summary{
  padding:13px 15px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  align-items:center;
  cursor:pointer;
  background:#f8fbff;
  list-style:none;
}
body[data-portal-role="PRINCIPAL"] .principal-student-test>summary::-webkit-details-marker{display:none}
body[data-portal-role="PRINCIPAL"] .principal-student-test>summary span:last-child{text-align:right}
body[data-portal-role="PRINCIPAL"] .principal-student-test>summary b{display:block;color:#0b4d86;font-size:14px}
body[data-portal-role="PRINCIPAL"] .principal-student-test>summary small{display:block;margin-top:3px;color:#64778b;font-size:10px;font-weight:800}
body[data-portal-role="PRINCIPAL"] .principal-student-test-body{padding:14px}
body[data-portal-role="PRINCIPAL"] .principal-wrong-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body[data-portal-role="PRINCIPAL"] .principal-wrong-grid>div{padding:10px;border:1px solid #f1b7bc;border-radius:9px;background:#fff5f6}
body[data-portal-role="PRINCIPAL"] .principal-wrong-grid b{display:block;color:#b4232d}
body[data-portal-role="PRINCIPAL"] .principal-wrong-grid span{display:block;margin-top:4px;color:#4d5d70;font-size:11px}

body[data-portal-role="PRINCIPAL"] .principal-file-list{display:grid;gap:9px;margin:10px 0}
body[data-portal-role="PRINCIPAL"] .principal-file-row{
  padding:11px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:1px solid #cbd9e8;
  border-radius:10px;
  background:#f8fbff;
}
body[data-portal-role="PRINCIPAL"] .principal-file-row span b{display:block;color:#0b4d86;font-size:11px}
body[data-portal-role="PRINCIPAL"] .principal-file-row span small{display:block;margin-top:3px;color:#5d7186;font-size:10px;overflow-wrap:anywhere}
body[data-portal-role="PRINCIPAL"] .principal-not-uploaded{
  margin:10px 0;
  padding:14px;
  border:1px dashed #d0a044;
  border-radius:10px;
  background:#fff8e9;
  color:#865900;
  font-weight:900;
  text-align:center;
}

body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs{display:grid;gap:9px}
body[data-portal-role="PRINCIPAL"] .principal-pattern-detail{margin-top:12px}
body[data-portal-role="PRINCIPAL"] .principal-video{
  position:relative;
  width:100%;
  margin:14px 0;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:12px;
  background:#000;
}
body[data-portal-role="PRINCIPAL"] .principal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body[data-portal-role="PRINCIPAL"] .principal-pattern-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-portal-role="PRINCIPAL"] .principal-pattern-table>div{padding:11px;border:1px solid #d3deea;border-radius:9px;background:#f8fbff}
body[data-portal-role="PRINCIPAL"] .principal-pattern-table b{display:block;color:#0b4d86;font-size:11px}
body[data-portal-role="PRINCIPAL"] .principal-pattern-table span{display:block;margin-top:4px;color:#40566c;font-size:11px;line-height:1.45}
body[data-portal-role="PRINCIPAL"] .principal-readable-list{margin:10px 0;padding-left:23px;line-height:1.65}
body[data-portal-role="PRINCIPAL"] .principal-address{margin-top:9px;padding:14px;border:2px solid #0b4d86;border-radius:10px;background:#f7fbff;text-align:center;line-height:1.6}
body[data-portal-role="PRINCIPAL"] .principal-omr-links{margin-bottom:12px}

body[data-portal-role="PRINCIPAL"] .principal-download-grid{display:grid;gap:12px}
body[data-portal-role="PRINCIPAL"] .principal-download-card{
  min-height:145px;
  padding:17px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid #ccd9e8;
  border-radius:13px;
  background:#fff;
}
body[data-portal-role="PRINCIPAL"] .principal-download-card h3{margin:0;color:#0b4d86;font-size:17px}
body[data-portal-role="PRINCIPAL"] .principal-download-card p{margin:6px 0 12px;color:#64768a;font-size:11px;line-height:1.5}
body[data-portal-role="PRINCIPAL"] .principal-download-card .actions{margin-top:auto}

/* =========================================================
   MOBILE / TABLET PRINCIPAL APP — 1024px AND BELOW
========================================================= */
@media (max-width:1024px){
  body[data-portal-role="PRINCIPAL"]{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    background:#020a16!important;
  }

  body[data-portal-role="PRINCIPAL"] .portal-view{
    position:fixed!important;
    inset:0!important;
    z-index:50!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    display:block!important;
    overflow:hidden!important;
    background:radial-gradient(circle at 92% 2%,rgba(18,210,205,.14),transparent 27%),linear-gradient(180deg,#031428 0%,#020914 100%)!important;
  }
  body[data-portal-role="PRINCIPAL"] .sidebar,
  body[data-portal-role="PRINCIPAL"] .drawer-backdrop{display:none!important}
  body[data-portal-role="PRINCIPAL"] .portal-main{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:block!important;
    background:transparent!important;
  }

  body[data-portal-role="PRINCIPAL"] .topbar{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    height:76px!important;
    padding:12px 16px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid #244860!important;
    background:rgba(3,18,34,.97)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px)!important;
  }
  body[data-portal-role="PRINCIPAL"] .menu-toggle{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #315873!important;
    border-radius:15px!important;
    background:#09243c!important;
    color:#fff!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-back-glyph{font-size:30px;font-weight:900;line-height:1}
  body[data-portal-role="PRINCIPAL"] .topbar-title>span{display:none!important}
  body[data-portal-role="PRINCIPAL"] .topbar-title h1{
    margin:0!important;
    max-width:calc(100vw - 92px)!important;
    overflow:hidden!important;
    color:#fff!important;
    font-size:24px!important;
    font-weight:900!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body[data-portal-role="PRINCIPAL"] .topbar-actions{display:none!important}

  body[data-portal-role="PRINCIPAL"] .content{
    position:absolute!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    bottom:calc(80px + env(safe-area-inset-bottom))!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 18px 34px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:transparent!important;
    color:#f4f9ff!important;
  }
  body[data-portal-role="PRINCIPAL"] .portal-footer{display:none!important}

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1000!important;
    height:calc(80px + env(safe-area-inset-bottom))!important;
    min-height:80px!important;
    padding:7px 5px max(8px,env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:1px!important;
    border-top:1px solid #173b55!important;
    background:rgba(2,16,31,.995)!important;
    box-shadow:0 -10px 35px rgba(0,0,0,.34)!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button{
    position:relative!important;
    min-width:0!important;
    padding:4px 2px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    border:0!important;
    background:transparent!important;
    color:#829ab3!important;
    font-weight:900!important;
    cursor:pointer!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button i{font-style:normal!important;font-size:22px!important;line-height:1!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{
    max-width:100%!important;
    overflow:hidden!important;
    font-size:10px!important;
    line-height:1.08!important;
    text-align:center!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button.active{color:var(--pr-cyan)!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button.active::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:0!important;
    width:34px!important;
    height:4px!important;
    transform:translateX(-50%)!important;
    border-radius:6px!important;
    background:var(--pr-cyan)!important;
    box-shadow:0 0 12px rgba(62,231,221,.42)!important;
  }

  /* Dark app surfaces */
  body[data-portal-role="PRINCIPAL"] .page-head{margin:0 0 18px!important;display:block!important}
  body[data-portal-role="PRINCIPAL"] .page-head h2{color:#fff!important;font-size:28px!important;line-height:1.12!important}
  body[data-portal-role="PRINCIPAL"] .page-head p{margin-top:6px!important;color:#9bb0c6!important;font-size:13px!important;line-height:1.45!important}
  body[data-portal-role="PRINCIPAL"] .page-actions{margin-top:12px!important}

  body[data-portal-role="PRINCIPAL"] .card,
  body[data-portal-role="PRINCIPAL"] .table-card,
  body[data-portal-role="PRINCIPAL"] .programme-card,
  body[data-portal-role="PRINCIPAL"] .kpi-card,
  body[data-portal-role="PRINCIPAL"] .subject-card,
  body[data-portal-role="PRINCIPAL"] .schedule-card{
    border-color:#294e68!important;
    background:linear-gradient(145deg,rgba(12,42,69,.96),rgba(5,25,45,.98))!important;
    color:#eef7ff!important;
    box-shadow:0 13px 30px rgba(0,0,0,.22)!important;
  }
  body[data-portal-role="PRINCIPAL"] .card-head h3,
  body[data-portal-role="PRINCIPAL"] .section-title,
  body[data-portal-role="PRINCIPAL"] .programme-card strong{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .card-head p,
  body[data-portal-role="PRINCIPAL"] .programme-card span,
  body[data-portal-role="PRINCIPAL"] .cell-secondary{color:#91a8bf!important}
  body[data-portal-role="PRINCIPAL"] .cell-primary,
  body[data-portal-role="PRINCIPAL"] .programme-card b{color:#f6fbff!important}

  body[data-portal-role="PRINCIPAL"] .button{min-height:44px!important;border-radius:11px!important;font-weight:900!important}
  body[data-portal-role="PRINCIPAL"] .button--primary{border-color:#1b9cdc!important;background:linear-gradient(100deg,#087cff,#0fd0ce)!important;color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .button--secondary{border-color:#315b78!important;background:#092844!important;color:#eaf7ff!important}

  body[data-portal-role="PRINCIPAL"] input,
  body[data-portal-role="PRINCIPAL"] select,
  body[data-portal-role="PRINCIPAL"] textarea{
    border-color:#315b78!important;
    background:#020e1b!important;
    color:#f4f9ff!important;
  }
  body[data-portal-role="PRINCIPAL"] input::placeholder,
  body[data-portal-role="PRINCIPAL"] textarea::placeholder{color:#728ba5!important}
  body[data-portal-role="PRINCIPAL"] .form-field>label,
  body[data-portal-role="PRINCIPAL"] .form-field>.label{color:#dbeaff!important}

  body[data-portal-role="PRINCIPAL"] .table-card{overflow:hidden!important}
  body[data-portal-role="PRINCIPAL"] .table-wrap{background:#06192c!important;border-radius:11px!important}
  body[data-portal-role="PRINCIPAL"] table{background:#06192c!important;color:#e9f4ff!important}
  body[data-portal-role="PRINCIPAL"] th{border-color:#2f5873!important;background:#0d3b5f!important;color:#fff!important}
  body[data-portal-role="PRINCIPAL"] td{border-color:#23445d!important;background:#071b2f!important;color:#d7e5f2!important}
  body[data-portal-role="PRINCIPAL"] tbody tr:nth-child(even) td{background:#061728!important}

  body[data-portal-role="PRINCIPAL"] .notice--info{border-color:#28617d!important;background:#08253d!important;color:#c9e6fa!important}
  body[data-portal-role="PRINCIPAL"] .notice--warning{border-color:#77612f!important;background:#28210f!important;color:#f0d28c!important}
  body[data-portal-role="PRINCIPAL"] .empty-state{border-color:#294e68!important;background:#071b2e!important;color:#adc0d2!important}

  /* Dashboard */
  body[data-portal-role="PRINCIPAL"] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-portal-role="PRINCIPAL"] .kpi-card{min-height:104px!important;padding:13px!important;text-align:left!important}
  body[data-portal-role="PRINCIPAL"] .kpi-card b{color:#fff!important;font-size:28px!important}
  body[data-portal-role="PRINCIPAL"] .kpi-card>span{color:#a8bdd1!important}
  body[data-portal-role="PRINCIPAL"] .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body[data-portal-role="PRINCIPAL"] .quick-card{
    min-height:106px!important;
    padding:13px 9px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    border-color:#2a526e!important;
    background:linear-gradient(145deg,#0c2d4b,#071b31)!important;
    color:#fff!important;
    text-align:center!important;
  }
  body[data-portal-role="PRINCIPAL"] .quick-card>span:last-child{display:block!important}
  body[data-portal-role="PRINCIPAL"] .quick-card strong{display:block!important;color:#fff!important;font-size:14px!important}
  body[data-portal-role="PRINCIPAL"] .quick-card small{display:block!important;margin-top:4px!important;color:#91a8bf!important;font-size:10px!important}
  body[data-portal-role="PRINCIPAL"] .quick-card .kpi-icon{margin:0 auto 8px!important;background:#0d3b5f!important;color:#4ce5dd!important}

  /* Students: horizontal strength selector + app table */
  body[data-portal-role="PRINCIPAL"] .principal-strength-card{padding:12px!important}
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 0 4px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid::-webkit-scrollbar{display:none!important}
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button{
    flex:0 0 95px!important;
    min-height:66px!important;
    padding:8px 7px!important;
    border:1px solid #315b78!important;
    border-radius:12px!important;
    background:#092844!important;
    color:#d8eaff!important;
    text-align:center!important;
    cursor:pointer!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button span{display:block!important;font-size:10px!important;font-weight:900!important;text-transform:uppercase!important}
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button b{display:block!important;margin-top:4px!important;color:#fff!important;font-size:23px!important}
  body[data-portal-role="PRINCIPAL"] .principal-strength-grid button.active{border-color:#46eadb!important;background:linear-gradient(135deg,#087cff,#0bc9cb)!important;color:#fff!important;box-shadow:0 8px 18px rgba(11,201,203,.22)!important}

  /* Result catalog / test cards */
  body[data-portal-role="PRINCIPAL"] .principal-class-filter{
    padding:12px!important;
    display:block!important;
    border-color:#294e68!important;
    background:#071b2e!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-filter-label{margin-bottom:8px!important;color:#b9d0e3!important;font-size:11px!important;font-weight:900!important;text-transform:uppercase!important}
  body[data-portal-role="PRINCIPAL"] .principal-class-chips{display:flex!important;gap:7px!important;overflow-x:auto!important;scrollbar-width:none!important}
  body[data-portal-role="PRINCIPAL"] .principal-class-chips::-webkit-scrollbar{display:none!important}
  body[data-portal-role="PRINCIPAL"] .principal-class-chips button{
    flex:0 0 auto!important;
    min-height:42px!important;
    padding:8px 13px!important;
    border:1px solid #315b78!important;
    border-radius:10px!important;
    background:#092844!important;
    color:#cfe4f5!important;
    font-weight:900!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-class-chips button.active{border-color:#42e7d8!important;background:linear-gradient(90deg,#087cff,#0bc9cb)!important;color:#fff!important}

  body[data-portal-role="PRINCIPAL"] .principal-result-groups{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}

  body[data-portal-role="PRINCIPAL"] .principal-result-group{padding:15px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group>div:first-child h3{color:#45eadb!important;font-size:19px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group>div:first-child p{color:#9eb4c8!important}
  body[data-portal-role="PRINCIPAL"] .principal-test-label{background:#0a4462!important;color:#74f3e8!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group-metrics>span{color:#a8bfd2!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group-metrics>span b{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group{
    border:1px solid #2e5570!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,#0c2b49,#061b31)!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-group>button{
    width:100%!important;
    min-height:94px!important;
    padding:15px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:12px!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    text-align:left!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-group strong{display:block!important;color:#45eadb!important;font-size:18px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group small{display:block!important;margin-top:5px!important;color:#9eb4c8!important;font-size:11px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group-meta{text-align:right!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group-meta b{color:#fff!important;font-size:24px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-group-meta span{color:#9eb4c8!important}

  body[data-portal-role="PRINCIPAL"] .principal-result-hero{
    padding:16px!important;
    border:1px solid #2d5774!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,#0a3154,#095875)!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin:13px 0!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button{
    min-height:82px!important;
    padding:10px 6px!important;
    border:1px solid #315b78!important;
    border-radius:13px!important;
    background:#0a2b48!important;
    color:#fff!important;
    text-align:center!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button b{display:block!important;font-size:12px!important;line-height:1.25!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button small{display:block!important;margin-top:5px!important;color:#e6aa5d!important;font-size:11px!important;font-weight:900!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.ready{border-color:#2f7e79!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.ready small{color:#55e7b0!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.active{border-color:#42e7d8!important;background:linear-gradient(135deg,#087cff,#0bc9cb)!important;box-shadow:0 8px 20px rgba(10,198,202,.2)!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button.active small{color:#fff!important}

  /* Pattern / OMR / download pages */
  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs button{
    min-height:47px!important;
    padding:8px!important;
    border:1px solid #315b78!important;
    border-radius:11px!important;
    background:#092844!important;
    color:#cfe5f6!important;
    font-weight:900!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-pattern-tabs button.active{border-color:#42e7d8!important;background:linear-gradient(90deg,#087cff,#0bc9cb)!important;color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .principal-pattern-table{grid-template-columns:1fr!important}
  body[data-portal-role="PRINCIPAL"] .principal-pattern-table>div,
  body[data-portal-role="PRINCIPAL"] .principal-address{
    border-color:#315873!important;
    background:#071b2e!important;
    color:#d7e7f4!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-pattern-table b{color:#45eadb!important}
  body[data-portal-role="PRINCIPAL"] .principal-pattern-table span{color:#b7cadc!important}
  body[data-portal-role="PRINCIPAL"] .principal-download-grid{grid-template-columns:1fr!important}
  body[data-portal-role="PRINCIPAL"] .principal-download-card{border-color:#2e5570!important;background:linear-gradient(145deg,#0c2b49,#061b31)!important}
  body[data-portal-role="PRINCIPAL"] .principal-download-card h3{color:#45eadb!important}
  body[data-portal-role="PRINCIPAL"] .principal-download-card p{color:#9db3c8!important}

  /* Mobile hubs */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub{padding-bottom:14px!important}
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head{display:flex!important;align-items:center!important;gap:13px!important;margin:0 0 20px!important}
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head>button{
    width:48px!important;height:48px!important;flex:0 0 48px!important;
    border:1px solid #315873!important;border-radius:15px!important;background:#09243c!important;color:#fff!important;font-size:27px!important;font-weight:900!important
  }
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head h2{margin:0!important;color:#fff!important;font-size:27px!important}
  body[data-portal-role="PRINCIPAL"] .principal-app-page-head p{margin:4px 0 0!important;color:#90a8bf!important;font-size:12px!important}
  body[data-portal-role="PRINCIPAL"] .principal-hub-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
  body[data-portal-role="PRINCIPAL"] .principal-hub-grid button{
    min-height:120px!important;
    padding:14px 9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:11px!important;
    border:1px solid #2e5570!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,#0d2f4f,#071c33)!important;
    color:#fff!important;
    text-align:center!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-hub-grid button>span{
    width:48px!important;height:48px!important;display:grid!important;place-items:center!important;border-radius:14px!important;background:#0a4663!important;color:#51eee1!important
  }
  body[data-portal-role="PRINCIPAL"] .principal-hub-grid button svg{width:24px!important;height:24px!important}
  body[data-portal-role="PRINCIPAL"] .principal-hub-grid button b{font-size:14px!important;line-height:1.25!important}

  /* Student full history dialog: full app screen on mobile */
  body[data-portal-role="PRINCIPAL"] .app-dialog{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    border:0!important;
    background:#031326!important;
    color:#eef7ff!important;
  }
  body[data-portal-role="PRINCIPAL"] .app-dialog::backdrop{background:#020914!important}
  body[data-portal-role="PRINCIPAL"] .dialog-shell{height:100%!important;max-height:100%!important;background:#031326!important}
  body[data-portal-role="PRINCIPAL"] .dialog-shell>header{border-color:#264b66!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .dialog-shell h2{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .dialog-shell .eyebrow{color:#52eadd!important}
  body[data-portal-role="PRINCIPAL"] .dialog-body{background:#031326!important;color:#eef7ff!important}
  body[data-portal-role="PRINCIPAL"] .dialog-footer{border-color:#264b66!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-profile{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-profile>div{border-color:#315873!important;background:#08213a!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-profile span{color:#92aac0!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-profile b{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-test{border-color:#315873!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-test>summary{background:#0a2b48!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-test>summary b{color:#49eadc!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-test>summary small{color:#9db3c8!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-test-body{background:#061a2d!important}
  body[data-portal-role="PRINCIPAL"] .metric-strip{border-color:#315873!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .metric{border-color:#315873!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .metric b{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .metric span{color:#9ab0c5!important}
  body[data-portal-role="PRINCIPAL"] .principal-wrong-grid{grid-template-columns:1fr!important}
  body[data-portal-role="PRINCIPAL"] .principal-wrong-grid>div{border-color:#7c3d46!important;background:#32171d!important}
  body[data-portal-role="PRINCIPAL"] .principal-wrong-grid b{color:#ff9ba6!important}
  body[data-portal-role="PRINCIPAL"] .principal-wrong-grid span{color:#f2c7cd!important}

  body[data-portal-role="PRINCIPAL"] .principal-file-row{grid-template-columns:1fr!important;border-color:#315873!important;background:#071b31!important}
  body[data-portal-role="PRINCIPAL"] .principal-file-row span b{color:#49eadc!important}
  body[data-portal-role="PRINCIPAL"] .principal-file-row span small{color:#9db3c8!important}
  body[data-portal-role="PRINCIPAL"] .principal-file-row .actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  body[data-portal-role="PRINCIPAL"] .principal-file-row .button{width:100%!important}
  body[data-portal-role="PRINCIPAL"] .principal-not-uploaded{border-color:#775d2d!important;background:#28210f!important;color:#f0cf87!important}
}

@media (max-width:520px){
  body[data-portal-role="PRINCIPAL"] .content{padding:16px 13px 30px!important}
  body[data-portal-role="PRINCIPAL"] .topbar{padding:11px 13px!important}
  body[data-portal-role="PRINCIPAL"] .topbar-title h1{font-size:22px!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{font-size:11px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav{gap:8px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-nav button{min-height:78px!important}
  body[data-portal-role="PRINCIPAL"] .principal-student-profile{grid-template-columns:1fr 1fr!important}
}

@media print{
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{display:none!important}
}

/* V2.1.61: compact Principal Result Analysis — points 2 to 5 only. */
body[data-portal-role="PRINCIPAL"] .principal-class-filter--compact{padding:10px 13px!important;margin-bottom:9px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-catalog{margin-top:9px}
body[data-portal-role="PRINCIPAL"] .principal-result-catalog .table-card{box-shadow:0 4px 14px rgba(9,45,84,.06)!important}
body[data-portal-role="PRINCIPAL"] .principal-result-catalog th,
body[data-portal-role="PRINCIPAL"] .principal-result-catalog td{padding-top:8px!important;padding-bottom:8px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-catalog .row-actions{gap:6px!important;flex-wrap:nowrap!important}
body[data-portal-role="PRINCIPAL"] .principal-result-catalog .button{min-height:34px!important;padding:6px 9px!important;font-size:10px!important;white-space:nowrap!important}
body[data-portal-role="PRINCIPAL"] .principal-class-analysis-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;padding:8px 14px;border:1px solid #1674cc;border-radius:10px;background:linear-gradient(135deg,#0b66bd,#2f7df0);box-shadow:0 5px 13px rgba(25,105,196,.2);color:#fff;font-family:inherit;font-size:14px;font-weight:800;line-height:1.15;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
body[data-portal-role="PRINCIPAL"] .principal-class-analysis-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(25,105,196,.28)}
body[data-portal-role="PRINCIPAL"] .principal-class-analysis-button:focus-visible{outline:3px solid rgba(54,160,255,.35);outline-offset:2px}
body[data-portal-role="PRINCIPAL"] .principal-result-report{margin-top:14px}
body[data-portal-role="PRINCIPAL"] .principal-result-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #bed1e6;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(9,45,84,.06)}
body[data-portal-role="PRINCIPAL"] .principal-result-toolbar h2{margin:3px 0 2px;color:#0b3f72;font-size:19px}
body[data-portal-role="PRINCIPAL"] .principal-result-toolbar p{margin:0;color:#657a91;font-size:11px;font-weight:700}
body[data-portal-role="PRINCIPAL"] .principal-result-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
body[data-portal-role="PRINCIPAL"] .principal-result-toolbar-actions .button{min-height:38px!important;padding:7px 11px!important}
body[data-portal-role="PRINCIPAL"] .principal-abbreviation-legend{display:flex;align-items:flex-start;gap:12px;margin:9px 0;padding:10px 13px;border:1px solid #c7d8e9;border-radius:9px;background:#f5f9fe;color:#294967;font-size:15px!important;line-height:1.6;font-weight:700}
body[data-portal-role="PRINCIPAL"] .principal-abbreviation-legend b{flex:0 0 auto;color:#075793;font-size:15px!important;line-height:1.6;letter-spacing:.045em}
body[data-portal-role="PRINCIPAL"] .principal-result-summary--compact{gap:7px!important;margin:8px 0!important}
body[data-portal-role="PRINCIPAL"] .principal-result-summary--compact>div{min-height:60px!important;padding:8px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-summary--compact span{font-size:11px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-summary--compact b{font-size:19px!important;margin-top:3px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-tabs{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;width:100%!important;gap:8px!important;margin:10px 0 13px!important;overflow:visible!important;padding:0!important}
body[data-portal-role="PRINCIPAL"] .principal-result-tabs button{width:100%!important;min-width:0!important;min-height:58px!important;padding:9px 7px!important;border-radius:10px!important}
body[data-portal-role="PRINCIPAL"] .principal-result-tabs button b{font-size:13px!important;line-height:1.2!important;white-space:normal!important}
body[data-portal-role="PRINCIPAL"] .principal-result-tabs button small{margin-top:4px!important;font-size:11px!important;line-height:1.15!important;white-space:normal!important}
body[data-portal-role="PRINCIPAL"] .principal-marks-table{overflow-x:auto!important}
body[data-portal-role="PRINCIPAL"] .principal-marks-table table{min-width:1080px!important}
body[data-portal-role="PRINCIPAL"] .principal-marks-table .principal-result-student-name{font-size:14px!important;line-height:1.35!important;font-weight:800!important;letter-spacing:.01em!important}

@media(max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-result-toolbar{align-items:flex-start;flex-direction:column;background:#071f37!important;border-color:#2e5875!important;color:#d7e8f5!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-toolbar h2{color:#fff!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-toolbar p{color:#a9bfd1!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-toolbar-actions{width:100%;justify-content:flex-start}
  body[data-portal-role="PRINCIPAL"] .principal-abbreviation-legend{background:#071f37!important;border-color:#2e5875!important;color:#d7e8f5!important}
  body[data-portal-role="PRINCIPAL"] .principal-abbreviation-legend b{color:#51e9dc!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs button{min-height:64px!important;padding:10px 8px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs button b{font-size:13.5px!important}
}

@media(max-width:620px){
  body[data-portal-role="PRINCIPAL"] .principal-result-summary--compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-portal-role="PRINCIPAL"] .principal-abbreviation-legend{display:grid}
  body[data-portal-role="PRINCIPAL"] .principal-result-catalog .row-actions{flex-wrap:wrap!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs button{min-height:68px!important;padding:10px 8px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs button b{font-size:13.5px!important}
  body[data-portal-role="PRINCIPAL"] .principal-result-tabs button:last-child:nth-child(odd){grid-column:1/-1}
  body[data-portal-role="PRINCIPAL"] .principal-class-analysis-button{min-height:44px;font-size:14px}
}

/* Compact Student Bubbling totals: always one line. */
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis{display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:8px!important;margin:8px 0 12px!important;overflow-x:auto!important;padding:0 0 2px!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card{flex:1 1 0!important;min-width:0!important;min-height:78px!important;padding:9px 11px!important;border-radius:10px!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card .kpi-top{min-height:27px!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card .kpi-icon{width:29px!important;height:29px!important;border-radius:8px!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card .kpi-icon svg{width:16px!important;height:16px!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card b{margin-top:5px!important;font-size:21px!important;line-height:1!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card>span{margin-top:3px!important;font-size:10px!important;line-height:1.1!important}
body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card::after{width:48px!important;height:48px!important;right:-14px!important;bottom:-17px!important}

@media(max-width:700px){
  body[data-portal-role="PRINCIPAL"] .principal-bubbling-kpis .kpi-card{flex:0 0 112px!important;min-width:112px!important;min-height:76px!important}
}

/* =========================================================
   EDUHUNT V2.1.89 · PRINCIPAL MOBILE BOTTOM NAV VISIBILITY
   Scope: Principal only, <= 1024px. No navigation logic change.
========================================================= */
@media screen and (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
    background:#03182c!important;
    border-top:1px solid #2b5877!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button{
    color:#eaf6ff!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button i{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    color:inherit!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button i svg{
    width:23px!important;
    height:23px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2.15!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{
    color:inherit!important;
    opacity:1!important;
    visibility:visible!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1.1!important;
    text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button.active{
    color:#55eee1!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button.active::after{
    background:#55eee1!important;
    box-shadow:0 0 12px rgba(85,238,225,.55)!important;
  }
}

@media screen and (max-width:520px){
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{
    font-size:11px!important;
  }
}


/* ================================================================
   V2.2.12 — PRINCIPAL PAGE GUIDANCE TYPOGRAPHY / BUTTON ONLY
   Same guide content and empty/data behavior. Visible toggle is now a
   compact button labelled CLICK HERE TO KNOW MORE. Typography is
   increased by approximately 3pt (4 CSS px).
   ================================================================ */
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide{
  margin:14px 0 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
  width:auto;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  padding:12px 17px;
  border:1px solid #1264d2;
  border-radius:12px;
  background:linear-gradient(135deg,#1972e8,#4e5cf3);
  color:#fff;
  font:inherit;
  font-size:19px;
  font-weight:900;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(25,114,232,.20);
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle:hover{
  filter:brightness(.97);
  box-shadow:0 10px 24px rgba(25,114,232,.25);
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle:focus-visible{
  outline:3px solid rgba(25,114,232,.30);
  outline-offset:3px;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.18);
  color:#fff;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-icon svg{width:20px;height:20px}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-chevron{
  flex:0 0 auto;
  margin-left:3px;
  font-size:23px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .22s ease;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide.is-open .ehp-principal-guide-chevron{transform:rotate(180deg)}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-body{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin-top:0;
  border:0 solid transparent;
  border-radius:14px;
  background:#f8fbff;
  box-shadow:0 6px 18px rgba(16,52,92,.05);
  overflow:hidden;
  transition:grid-template-rows .24s ease,opacity .2s ease,margin-top .2s ease,border-width .2s ease;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide.is-open .ehp-principal-guide-body{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:10px;
  border-width:1px;
  border-color:#c9dcf3;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-body-inner{
  min-height:0;
  overflow:hidden;
  padding:0 18px;
  color:#203b5a;
  font-size:18px;
  line-height:1.6;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide.is-open .ehp-principal-guide-body-inner{padding:17px 18px 19px}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-greeting{
  margin:0 0 12px;
  color:#0a315f;
  font-size:19px;
  font-weight:900;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-note{margin:10px 0 12px;font-weight:650}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-list+.ehp-principal-guide-note{margin-top:15px}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-list li{margin:0;overflow-wrap:anywhere}

@media (min-width:1025px){
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-toggle{
    border-color:#4a7fe8;
    background:linear-gradient(135deg,#1767cb,#6556db);
    color:#fff;
  }
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-body{
    background:#071a2d;
    box-shadow:none;
  }
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide.is-open .ehp-principal-guide-body{border-color:#244968}
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-body-inner{color:#d4e3f1}
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-greeting{color:#ffffff}
}

@media (max-width:768px){
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide{margin:10px 0 13px}
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
    min-height:50px;padding:11px 14px;font-size:18px;border-radius:11px;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-icon{width:32px;height:32px;flex-basis:32px}
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-body-inner{font-size:17.5px}
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-greeting{font-size:18px}
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide.is-open .ehp-principal-guide-body-inner{padding:15px 15px 17px}
}

@media print{
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide{display:none!important}
}

/* ================================================================
   V2.2.13 — PRINCIPAL GUIDE TITLE + RIGHT-SIDE ACTION BUTTON
   Keeps each page-specific guide title visible (for example,
   How to Manage Teachers) and adds a distinct CLICK TO KNOW MORE
   action pill on the right. No guide content/logic is changed.
   ================================================================ */
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:9px 12px 9px 14px;
  border:1px solid #bcd5f3;
  border-radius:12px;
  background:#edf6ff;
  color:#082d59;
  box-shadow:0 4px 14px rgba(16,52,92,.06);
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle:hover{
  filter:none;
  background:#e7f2ff;
  box-shadow:0 6px 18px rgba(16,52,92,.09);
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-title{
  min-width:0;
  color:#082d59;
  font-size:19px;
  font-weight:900;
  line-height:1.25;
  overflow-wrap:anywhere;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:9px;
  background:#1b74e8;
  color:#fff;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-action{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:40px;
  padding:8px 14px;
  border-radius:10px;
  background:linear-gradient(135deg,#1972e8,#4e5cf3);
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 5px 13px rgba(25,114,232,.18);
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-chevron{
  margin-left:0;
  color:#fff;
  font-size:21px;
}

@media (min-width:1025px){
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-toggle{
    border-color:#244968;
    background:#0b2238;
    color:#fff;
  }
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-toggle:hover{background:#0d2944}
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-title{color:#fff}
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-icon{background:#287ee9;color:#fff}
  body[data-portal-role="PRINCIPAL"][data-desktop-theme="dark"] .ehp-principal-guide-action{background:linear-gradient(135deg,#287ee9,#6b5ee7)}
}

@media (max-width:768px){
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
    min-height:54px;
    padding:9px 10px 9px 12px;
    gap:10px;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-title{font-size:17px}
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-action{
    min-height:36px;
    padding:7px 10px;
    font-size:13px;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-chevron{font-size:18px}
}

@media (max-width:480px){
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
    align-items:stretch;
    flex-direction:column;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-action{
    align-self:flex-end;
  }
}


/* ================================================================
   V2.2.15 — PRINCIPAL GUIDE ACTION POSITION ONLY
   Keep the page-specific guide title and move CLICK TO KNOW MORE
   immediately beside it instead of pushing the action to the far right.
   No guide content or expand/collapse logic is changed.
   ================================================================ */
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
  justify-content:flex-start;
  flex-wrap:wrap;
  column-gap:14px;
  row-gap:8px;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle-main{
  flex:0 1 auto;
  width:auto;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-action{
  margin-left:0;
  align-self:center;
}

@media (max-width:480px){
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-toggle-main{
    flex:0 1 auto;
  }
  body[data-portal-role="PRINCIPAL"] .ehp-principal-guide-action{
    align-self:center;
  }
}

/* ================================================================
   V2.2.16 — PRINCIPAL EDUHUNT STAFF: ACADEMICS SINGLE-COLUMN ONLY
   The second staff-directory section is ACADEMICS. Keep the existing
   Operations section unchanged and stack Coordinator/subject contacts
   one below another at full width.
   ================================================================ */
body[data-portal-role="PRINCIPAL"] .staff-directory-section + .staff-directory-section .staff-directory-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
}
body[data-portal-role="PRINCIPAL"] .staff-directory-section + .staff-directory-section .staff-directory-grid > *{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* =========================================================
   V2.2.17 — PRINCIPAL EDUHUNT STAFF SIMPLE CONTACT FLOW
   Principal only. One contact per row, WhatsApp-first guidance.
   ========================================================= */
body[data-portal-role="PRINCIPAL"] .staff-directory-contact-guidance{
  margin-top:14px;
  font-size:15px;
  line-height:1.55;
}
body[data-portal-role="PRINCIPAL"] .staff-directory-section .staff-directory-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
}
body[data-portal-role="PRINCIPAL"] .staff-directory-card--simple{
  width:100%;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}
body[data-portal-role="PRINCIPAL"] .staff-directory-card--simple .staff-directory-card-copy h3{
  margin:3px 0 2px;
}
body[data-portal-role="PRINCIPAL"] .staff-directory-guidance{
  margin-top:8px;
  font-size:14px;
  line-height:1.45;
  color:var(--muted, #60708a);
}
body[data-portal-role="PRINCIPAL"] .staff-directory-card--simple .staff-directory-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width:760px){
  body[data-portal-role="PRINCIPAL"] .staff-directory-card--simple{
    grid-template-columns:42px minmax(0,1fr);
  }
  body[data-portal-role="PRINCIPAL"] .staff-directory-card--simple .staff-directory-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    padding-left:56px;
  }
}
@media print{
  body[data-portal-role="PRINCIPAL"] .staff-directory-contact-guidance{display:none !important;}
}

/* ================================================================
   EDUHUNT V2.2.236 — PRINCIPAL MOBILE NAV + FULL-SCREEN INSTRUCTIONS
   Principal only. Five equal bottom buttons. Legacy inline guide cards
   remain hidden; every user-initiated page navigation uses the full-screen
   instruction layer created by the active frontend bundle.
   ================================================================ */
body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  box-sizing:border-box!important;
  column-gap:0!important;
  padding-left:max(5px,env(safe-area-inset-left))!important;
  padding-right:max(5px,env(safe-area-inset-right))!important;
}
body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button i,
body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{
  pointer-events:none!important;
}
body[data-portal-role="PRINCIPAL"] .ehp-principal-guide,
body[data-portal-role="PRINCIPAL"] #ehPrincipalResultGuide2285{
  display:none!important;
}
body.principal-instruction-open[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
  visibility:hidden!important;
  pointer-events:none!important;
}
.principal-instruction-overlay[hidden]{display:none!important}
.principal-instruction-overlay{
  position:fixed;
  inset:0;
  z-index:4600;
  display:block;
  width:100%;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  background:#03101f;
  color:#f5f9ff;
  isolation:isolate;
}
.principal-instruction-screen{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:
    radial-gradient(circle at 88% 5%,rgba(72,103,255,.22),transparent 31%),
    radial-gradient(circle at 10% 92%,rgba(35,220,198,.15),transparent 34%),
    linear-gradient(160deg,#041428 0%,#061b31 54%,#03111f 100%);
}
.principal-instruction-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 15px max(18px,env(safe-area-inset-left));
  border-bottom:1px solid rgba(117,181,224,.24);
  background:rgba(3,16,31,.88);
  backdrop-filter:blur(16px);
}
.principal-instruction-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
}
.principal-instruction-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(105,231,239,.46);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(19,118,191,.65),rgba(37,207,193,.28));
  color:#75f2e8;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.principal-instruction-icon svg{width:25px;height:25px}
.principal-instruction-heading small{
  display:block;
  margin:0 0 4px;
  color:#68e5ed;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
}
.principal-instruction-heading h2{
  margin:0;
  color:#fff;
  font-size:clamp(22px,4.8vw,34px);
  line-height:1.08;
  font-weight:950;
}
.principal-instruction-heading p{
  margin:5px 0 0;
  color:#a8bdd0;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.principal-instruction-skip{
  border:1px solid rgba(116,235,226,.72);
  border-radius:12px;
  background:rgba(7,49,72,.94);
  color:#78f1e7;
  font-family:inherit;
  font-weight:950;
  letter-spacing:.055em;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.principal-instruction-skip:focus-visible{
  outline:3px solid rgba(116,235,226,.34);
  outline-offset:3px;
}
.principal-instruction-skip--top{
  flex:0 0 auto;
  min-width:76px;
  min-height:44px;
  padding:0 14px;
  font-size:12px;
}
.principal-instruction-content{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:22px max(18px,env(safe-area-inset-right)) 24px max(18px,env(safe-area-inset-left));
}
.principal-instruction-content>*{max-width:860px;margin-left:auto;margin-right:auto}
.principal-instruction-greeting{
  margin-top:0!important;
  margin-bottom:14px!important;
  color:#fff;
  font-size:18px;
  font-weight:950;
}
.principal-instruction-note{
  margin:0 0 14px!important;
  padding:14px 15px;
  border:1px solid rgba(100,158,202,.32);
  border-radius:14px;
  background:rgba(7,34,58,.72);
  color:#dceaf6;
  font-size:14px;
  line-height:1.58;
  font-weight:750;
}
.principal-instruction-list{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  display:grid;
  gap:10px;
}
.principal-instruction-list li{
  position:relative;
  margin:0!important;
  padding:13px 14px 13px 16px;
  border:1px solid rgba(83,142,187,.28);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(10,41,68,.92),rgba(5,27,48,.94));
  color:#e7f2fb;
  font-size:14px;
  line-height:1.48;
  font-weight:780;
  overflow-wrap:anywhere;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.principal-instruction-list li::after{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:4px;
  background:linear-gradient(#4cb9ff,#54edda);
}
.principal-instruction-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  border-top:1px solid rgba(117,181,224,.24);
  background:rgba(3,16,31,.94);
  backdrop-filter:blur(16px);
}
.principal-instruction-footer p{
  margin:0;
  color:#91aac0;
  font-size:11px;
  line-height:1.35;
  font-weight:700;
}
.principal-instruction-skip--bottom{
  min-height:48px;
  padding:0 20px;
  background:linear-gradient(120deg,#0a7bd0,#19a89e);
  border-color:#61e9df;
  color:#fff;
  font-size:13px;
}
@media(max-width:620px){
  .principal-instruction-header{align-items:center;padding-top:max(14px,env(safe-area-inset-top));gap:10px}
  .principal-instruction-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px}
  .principal-instruction-icon svg{width:22px;height:22px}
  .principal-instruction-heading p{display:none}
  .principal-instruction-heading h2{font-size:22px}
  .principal-instruction-skip--top{min-width:68px;min-height:40px;padding:0 10px;font-size:11px}
  .principal-instruction-content{padding-top:18px;padding-bottom:18px}
  .principal-instruction-greeting{font-size:16px}
  .principal-instruction-note,.principal-instruction-list li{font-size:13px}
  .principal-instruction-footer{display:block}
  .principal-instruction-footer p{display:none}
  .principal-instruction-skip--bottom{width:100%;min-height:50px}
}
@media(min-width:900px){
  .principal-instruction-screen{padding:24px}
  .principal-instruction-header,.principal-instruction-footer,.principal-instruction-content{width:min(980px,100%);margin-left:auto;margin-right:auto;box-sizing:border-box}
  .principal-instruction-header{border:1px solid rgba(117,181,224,.24);border-bottom:0;border-radius:24px 24px 0 0}
  .principal-instruction-content{background:rgba(3,17,32,.72);border-left:1px solid rgba(117,181,224,.24);border-right:1px solid rgba(117,181,224,.24)}
  .principal-instruction-footer{border:1px solid rgba(117,181,224,.24);border-top:0;border-radius:0 0 24px 24px}
}
@media print{
  .principal-instruction-overlay{display:none!important}
}