/* =========================================================
   EDUHUNT V2.1.17 — COMPACT APP NAV / PROFILE / FILTER REPAIR
   UI-only companion layer plus the JS recursion repair in app.js.
   - Five bottom buttons only; Profile/Logout moved to top-right Profile.
   - Principal repeated school banner/greeting removed.
   - Compact non-duplicated module headings.
   - Select-only Assignment filters.
   - Colourful app icons and compact video filters.
========================================================= */

/* Top-right account is the single Profile entry point on all six portals. */
#accountButton{
  border-color:#bfd3e7!important;
  background:#f6faff!important;
  box-shadow:0 3px 10px rgba(7,61,112,.07);
}
#accountButton:hover{background:#eef6ff!important;border-color:#77a9d5!important}
#topbarAvatar{font-size:18px!important;line-height:1!important;background:linear-gradient(135deg,#0b7dea,#6c63ff)!important;color:#fff!important}
#sidebarLogout{display:none!important}

/* The topbar already names the module. Do not repeat the same title below it. */
.page-head--mirrors-topbar h2{display:none!important}
.page-head--mirrors-topbar{margin-bottom:13px!important;align-items:center!important}
.page-head--mirrors-topbar p{margin:0!important}
@media print{
  .page-head--mirrors-topbar h2{display:block!important}
}

/* Select-only assignment workflow. */
.assignment-filter-card{padding:13px!important;margin-bottom:12px!important}
.assignment-select-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.assignment-select-grid .form-field{min-width:0}
.assignment-select-grid select{width:100%}

/* Make navigation/report/quick-access icons cheerful rather than monochrome. */
.quick-grid .quick-card:nth-child(8n+1) .kpi-icon{color:#0094ff!important;background:#e2f3ff!important}
.quick-grid .quick-card:nth-child(8n+2) .kpi-icon{color:#00a879!important;background:#ddf8ef!important}
.quick-grid .quick-card:nth-child(8n+3) .kpi-icon{color:#f08a00!important;background:#fff0d9!important}
.quick-grid .quick-card:nth-child(8n+4) .kpi-icon{color:#7c4dff!important;background:#efe7ff!important}
.quick-grid .quick-card:nth-child(8n+5) .kpi-icon{color:#d93b66!important;background:#ffe5ee!important}
.quick-grid .quick-card:nth-child(8n+6) .kpi-icon{color:#00a9b6!important;background:#def9fb!important}
.quick-grid .quick-card:nth-child(8n+7) .kpi-icon{color:#b36a00!important;background:#fff3d6!important}
.quick-grid .quick-card:nth-child(8n+8) .kpi-icon{color:#405de6!important;background:#e7ebff!important}

.role-report-color-1 .role-report-icon{color:#008cff!important;background:#dff2ff!important}
.role-report-color-2 .role-report-icon{color:#00a96e!important;background:#dff8ee!important}
.role-report-color-3 .role-report-icon{color:#f08a00!important;background:#fff0d8!important}
.role-report-color-4 .role-report-icon{color:#7447e8!important;background:#eee7ff!important}
.role-report-color-5 .role-report-icon{color:#d83a64!important;background:#ffe3ec!important}
.role-report-color-6 .role-report-icon{color:#00aab7!important;background:#def8fa!important}
.role-report-color-7 .role-report-icon{color:#ad6300!important;background:#fff0d2!important}
.role-report-color-8 .role-report-icon{color:#3a61d8!important;background:#e3eaff!important}

/* Principal mobile hubs: emoji icons, ordered cards, compact spacing. */
.principal-hub-item .principal-hub-emoji{
  width:48px!important;height:48px!important;display:grid!important;place-items:center!important;
  border-radius:14px!important;font-size:27px!important;line-height:1!important;
  background:#0a3c59!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.principal-hub-color-1 .principal-hub-emoji{background:#123f76!important}
.principal-hub-color-2 .principal-hub-emoji{background:#5a2b78!important}
.principal-hub-color-3 .principal-hub-emoji{background:#6a3e13!important}
.principal-hub-color-4 .principal-hub-emoji{background:#155f55!important}
.principal-hub-color-5 .principal-hub-emoji{background:#2e4a87!important}
.principal-hub-color-6 .principal-hub-emoji{background:#685710!important}
.principal-hub-color-7 .principal-hub-emoji{background:#0e6170!important}
.principal-hub-color-8 .principal-hub-emoji{background:#6b2b52!important}

/* Desktop: keep the familiar ERP layout but with less wasted vertical space. */
@media screen and (min-width:1025px){
  .page-head--mirrors-topbar{min-height:34px!important}
  .assignment-filter-card{max-width:1050px}
}

@media screen and (max-width:1024px){
  /* Show the school/portal context compactly in the topbar instead of repeating a large banner on every page. */
  .topbar-title>span{display:block!important;max-width:min(54vw,430px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6ddfd8!important;font-size:9px!important;font-weight:900!important;letter-spacing:.045em!important}
  #accountButton{width:43px!important;height:43px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:13px!important;background:#0d2b48!important;border-color:#315a78!important}
  #topbarAvatar{width:31px!important;height:31px!important;display:grid!important;place-items:center!important;background:transparent!important;font-size:21px!important}

  /* Five app buttons only. Logout lives inside Profile. */
  body[data-portal-role]:not([data-portal-role="PRINCIPAL"]) .role-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    height:calc(79px + env(safe-area-inset-bottom))!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    height:calc(79px + env(safe-area-inset-bottom))!important;
    min-height:79px!important;
  }
  body[data-portal-role="PRINCIPAL"] .content{bottom:calc(79px + env(safe-area-inset-bottom))!important}
  body[data-portal-role] .content{padding-bottom:96px!important}

  /* Principal uses the topbar for school context; old large repeated school blocks are removed by JS. */
  body[data-portal-role="PRINCIPAL"] .principal-school-banner{display:none!important}

  /* Compact page intro after duplicated heading is removed. */
  .page-head--mirrors-topbar{margin:0 0 10px!important;min-height:0!important}
  .page-head--mirrors-topbar>div:first-child{min-width:0}
  .page-head--mirrors-topbar p{font-size:13px!important;line-height:1.35!important;color:#9db7cc!important}
  .page-head--mirrors-topbar .page-actions{margin-left:auto!important}

  /* Principal Tests cards compact but clearly tappable. */
  .principal-mobile-hub{padding-bottom:8px!important}
  .principal-app-page-head{margin-bottom:10px!important}
  .principal-app-page-head p{margin-top:2px!important;font-size:11px!important}
  .principal-hub-grid{gap:9px!important}
  .principal-hub-grid>button{min-height:116px!important;padding:12px 7px!important}
  .principal-hub-grid>button b{font-size:13px!important;line-height:1.25!important}

  /* Assignment filters: Class + Category in row 1, uploaded subcategory below. No search field. */
  .assignment-select-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .assignment-select-grid .form-field:nth-child(3){grid-column:1/-1}
  .assignment-filter-card{padding:11px!important;margin:0 0 10px!important}

  /* Class and Subject must remain side by side in all app video views. */
  .edu-video-library .form-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:9px!important}
  .edu-video-library{padding:12px!important}
  .edu-video-library .section-title{margin:13px 0 8px!important}
  .edu-video-topic-list{gap:7px!important}
  .edu-video-topic{min-height:64px!important;padding:9px!important}

  /* Make all app cards slightly denser for faster scanning. */
  .card{margin-bottom:10px!important}
  .quick-grid{gap:8px!important}
  .quick-card{min-height:94px!important;padding:10px!important}
}

@media screen and (max-width:560px){
  .topbar{padding:7px 9px!important}
  .content{padding:10px 8px 94px!important}
  .assignment-select-grid{grid-template-columns:1fr 1fr!important}
  .assignment-select-grid .form-field:nth-child(3){grid-column:1/-1}
  .edu-video-library .form-grid{grid-template-columns:1fr 1fr!important}
  .edu-video-library select{font-size:14px!important;padding-left:9px!important;padding-right:28px!important}
  .principal-hub-grid>button{min-height:110px!important}
  .principal-hub-item .principal-hub-emoji{width:44px!important;height:44px!important;font-size:24px!important}
}