/* SEGaza V3.0.8 — Unified UX Rebuild
   Presentation-only layer. No data, permissions, Firebase, or business logic changes. */
:root{
  --ux8-navy:#123a63;
  --ux8-navy-dark:#0c2b4b;
  --ux8-blue:#2563eb;
  --ux8-teal:#0f9b99;
  --ux8-bg:#f4f7fb;
  --ux8-surface:#ffffff;
  --ux8-line:#dfe6ef;
  --ux8-text:#17263a;
  --ux8-muted:#66768a;
  --ux8-soft:#eef4fa;
  --ux8-success:#087750;
  --ux8-warning:#9a6700;
  --ux8-danger:#b42318;
  --ux8-radius:18px;
  --ux8-shadow:0 10px 28px rgba(22,52,83,.07);
}
html{font-size:16px}
body{font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;background:var(--ux8-bg)!important;color:var(--ux8-text)!important;font-size:15.5px!important;line-height:1.65!important}
button,input,select,textarea{font-family:inherit!important}
button{touch-action:manipulation}
.app{background:var(--ux8-bg)!important}
.main{background:var(--ux8-bg)!important}
.content{max-width:1540px!important;padding-top:26px!important}

/* Desktop navigation */
.sidebar{width:270px!important;background:linear-gradient(180deg,#123b64 0%,#0d3155 58%,#092844 100%)!important;padding:18px 13px!important}
.main{margin-right:270px!important;width:calc(100% - 270px)!important}
.side-brand{padding:4px 8px 15px!important}
.side-brand b{font-size:16px!important}.side-brand small{font-size:12px!important}
.v4-school-context{margin:0 3px 12px!important;padding:12px!important;border-radius:14px!important;background:rgba(255,255,255,.08)!important}
.v4-school-context small{font-size:10px!important}.v4-school-context b{font-size:13px!important}.v4-school-context span{font-size:10px!important}
.sidebar nav{gap:3px!important}
.sidebar nav button,.side-logout{min-height:45px!important;padding:10px 12px!important;border-radius:12px!important;font-size:14px!important;gap:10px!important}
.sidebar nav button.active{background:rgba(255,255,255,.14)!important;box-shadow:inset 3px 0 0 #4dd7d0!important}

/* Header */
.topbar{height:78px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--ux8-line)!important;box-shadow:0 4px 18px rgba(30,57,86,.035)!important}
.topbar h2{font-size:24px!important;color:var(--ux8-text)!important;margin:2px 0 0!important}
.eyebrow{font-size:11px!important;color:var(--ux8-teal)!important}
.top-actions{align-items:center!important;gap:9px!important}
.icon-btn{width:44px!important;height:44px!important;border-radius:14px!important;border-color:var(--ux8-line)!important;background:#fff!important;font-size:18px!important}
.ux-search-wrap{height:46px!important;border-radius:14px!important;border:1px solid var(--ux8-line)!important;background:#fff!important;box-shadow:none!important}
.ux-search{font-size:14px!important;color:var(--ux8-text)!important}
.ux-school-chip{min-height:44px!important;border-radius:14px!important;border:1px solid var(--ux8-line)!important;background:#fff!important}

/* Page headings and action bars */
.section-head{margin-bottom:18px!important;gap:14px!important;align-items:center!important}
.section-head h3{font-size:25px!important;letter-spacing:-.02em!important;color:var(--ux8-text)!important;margin:3px 0!important}
.section-head small{font-size:11px!important}.section-note{font-size:13px!important;line-height:1.75!important;color:var(--ux8-muted)!important;max-width:780px}
.actions{gap:8px!important;align-items:center!important}
.btn{min-height:44px!important;padding:9px 15px!important;border-radius:12px!important;font-size:14px!important;font-weight:800!important;box-shadow:none!important}
.btn.primary,.btn-primary{background:linear-gradient(135deg,#1f5fd1,#2777dd)!important;color:#fff!important}
.btn.soft{background:#fff!important;color:var(--ux8-navy)!important;border:1px solid var(--ux8-line)!important}
.btn.danger,.mini.delete{background:#fff3f2!important;color:var(--ux8-danger)!important;border-color:#ffd3cf!important}
.ghost-btn{background:transparent!important;border:1px dashed #cfd9e5!important;color:var(--ux8-muted)!important}
.mini{min-height:38px!important;padding:7px 11px!important;border-radius:10px!important;font-size:13px!important;font-weight:800!important}

/* Dashboard */
.welcome{border-radius:24px!important;padding:25px 27px!important;background:linear-gradient(135deg,#123e6b,#176b91)!important;box-shadow:0 18px 42px rgba(20,61,97,.14)!important}
.welcome h1{font-size:30px!important;margin:5px 0!important}.welcome p{font-size:14px!important}.online{font-size:12px!important}
.stats{gap:12px!important}.stats article{border-radius:18px!important;border:1px solid var(--ux8-line)!important;background:#fff!important;box-shadow:var(--ux8-shadow)!important;padding:17px!important}.stats span{font-size:13px!important}.stats strong{font-size:29px!important}
.quick-grid{gap:12px!important}.quick-grid button{border-radius:18px!important;border:1px solid var(--ux8-line)!important;background:#fff!important;box-shadow:0 8px 22px rgba(21,52,84,.045)!important;padding:17px!important;min-height:112px!important}.quick-grid b{font-size:15px!important}.quick-grid span{font-size:12.5px!important;line-height:1.65!important;color:var(--ux8-muted)!important}

/* Consistent cards */
.table-card,.setting-card,.message-card,.notification-card,.course-card,.portal-manager-card,.receipt-box,.site-request-card,.student-content-card,.v4-card,.v4-panel{border:1px solid var(--ux8-line)!important;border-radius:var(--ux8-radius)!important;background:#fff!important;box-shadow:var(--ux8-shadow)!important}
.table-card{overflow:hidden!important}
.table-scroll{max-width:100%;overflow:auto!important}
table{width:100%;border-collapse:separate!important;border-spacing:0!important}
th{background:#f7f9fc!important;color:#5e6f84!important;font-size:12px!important;font-weight:900!important;padding:13px 12px!important;border-bottom:1px solid var(--ux8-line)!important;white-space:nowrap}
td{font-size:14px!important;color:var(--ux8-text)!important;padding:13px 12px!important;border-bottom:1px solid #edf1f6!important;vertical-align:middle!important}
tbody tr:last-child td{border-bottom:0!important}tbody tr:hover td{background:#fbfdff}
.row-actions{display:flex!important;gap:7px!important;align-items:center!important;flex-wrap:wrap!important}
.wa-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:7px 11px!important;border-radius:10px!important;background:#eaf8f0!important;color:#087750!important;font-weight:900!important;text-decoration:none!important}
.request-number,.academic-number,.initiative-pill,.portal-badge,.login-mode-chip,.sr-badge{border-radius:999px!important;padding:5px 9px!important;font-size:11.5px!important;font-weight:850!important;line-height:1.35!important}

/* Forms and filters */
.filters{gap:9px!important;margin:14px 0 18px!important;padding:12px!important;border:1px solid var(--ux8-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 6px 20px rgba(21,52,84,.035)!important}
.filters input,.filters select,.form-grid input,.form-grid select,.form-grid textarea,.simple-fields input,.simple-fields select,.simple-fields textarea,.setting-card input,.setting-card select,.setting-card textarea{min-height:46px!important;border-radius:12px!important;border:1px solid #d9e2ec!important;background:#fff!important;color:var(--ux8-text)!important;font-size:14px!important;padding:10px 12px!important}
textarea{min-height:96px!important;resize:vertical}
label{color:#40536a!important;font-size:13px!important;font-weight:700!important}
input:focus,select:focus,textarea:focus{border-color:#5a9be6!important;box-shadow:0 0 0 3px rgba(54,126,209,.11)!important;outline:0!important}

/* Bulk actions: keep the page quiet until selection exists */
.bulk-bar{border-radius:14px!important;border:1px solid #dce5ee!important;background:#f8fbfe!important;padding:10px 12px!important;margin-bottom:12px!important}
#studentBulkBar.ux-no-selection{display:none!important}
#studentBulkBar:not(.ux-no-selection){position:sticky!important;top:88px!important;z-index:16!important;box-shadow:0 10px 30px rgba(22,52,83,.12)!important}

/* Dialogs */
.simple-dialog,dialog,.modal-card{border:0!important;border-radius:22px!important;box-shadow:0 30px 80px rgba(12,38,66,.24)!important}
.simple-dialog::backdrop,dialog::backdrop{background:rgba(8,27,48,.48)!important;backdrop-filter:blur(3px)}
.dialog-head,.dialog-actions,.modal-head{background:#fff!important;padding:16px 18px!important}
.dialog-head{border-bottom:1px solid var(--ux8-line)!important}.dialog-actions{border-top:1px solid var(--ux8-line)!important}
.dialog-body{padding:18px!important}

/* Empty/loading */
.empty{padding:28px 16px!important;text-align:center!important;color:#7d8b9d!important;font-size:14px!important}
.toast{max-width:min(520px,calc(100vw - 24px))!important;padding:12px 16px!important;border-radius:13px!important;font-size:14px!important}

/* The old floating Tawjihi launcher is redundant now that Learning Center is first-class. */
#tawjihiAdminBtn{display:none!important}

/* Mobile */
@media(max-width:760px){
  html{font-size:17px}
  body{font-size:16px!important;line-height:1.65!important;background:#f3f6fa!important}
  .sidebar{display:none!important}
  .main{margin-right:0!important;width:100%!important}
  .topbar{height:68px!important;padding:0 12px!important;gap:8px!important}
  .topbar>div:first-child{min-width:0!important;flex:1!important}
  .topbar h2{font-size:22px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .topbar .eyebrow,.ux-school-chip{display:none!important}
  .top-actions{width:auto!important;gap:7px!important;flex:none!important}
  .icon-btn{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:14px!important}
  .ux-search-wrap{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;padding:0!important;display:grid!important;place-items:center!important;cursor:pointer!important}
  .ux-search-icon{font-size:22px!important;margin:0!important}
  .ux-search,.ux-search-kbd{display:none!important}
  .content{padding:14px 12px calc(96px + env(safe-area-inset-bottom,0px))!important;max-width:none!important}

  .welcome{padding:20px!important;border-radius:20px!important;align-items:flex-start!important}.welcome h1{font-size:25px!important}.welcome p{font-size:13.5px!important}.online{padding:6px 9px!important}
  .ux-dashboard-tools{display:none!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.stats article{padding:14px!important;border-radius:16px!important}.stats span{font-size:12px!important}.stats strong{font-size:24px!important}
  .quick-grid,.quick-grid.compact,.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.quick-grid button{min-height:94px!important;padding:13px!important;border-radius:16px!important}.quick-grid b{font-size:14px!important}.quick-grid span{font-size:11px!important;line-height:1.55!important}

  .section-head{align-items:stretch!important;gap:11px!important;margin-bottom:13px!important}
  .section-head h3{font-size:23px!important}.section-note{font-size:12.5px!important;line-height:1.65!important}
  .section-head>.actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .section-head>.actions .btn{width:100%!important;min-width:0!important;min-height:46px!important;padding-inline:8px!important;font-size:13px!important}
  .section-head>.actions .btn.primary:first-child{grid-column:1/-1!important}

  .filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:10px!important;gap:8px!important;margin:10px 0 13px!important;border-radius:15px!important}
  .filters>input:first-child,.filters .wide{grid-column:1/-1!important}
  .filters input,.filters select{font-size:16px!important;min-height:48px!important;width:100%!important}
  .filters .btn{width:100%!important}

  /* Generic mobile record cards: compact two-column information instead of one giant vertical row. */
  .table-card{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  .table-scroll{overflow:visible!important}
  .ux-responsive-table{min-width:0!important;display:block!important}
  .ux-responsive-table thead{display:none!important}
  .ux-responsive-table tbody{display:grid!important;gap:11px!important;padding:0!important;background:transparent!important}
  .ux-responsive-table tr{position:relative!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 12px!important;padding:14px!important;border:1px solid var(--ux8-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 7px 20px rgba(21,52,84,.055)!important;overflow:hidden!important}
  .ux-responsive-table td{display:block!important;min-width:0!important;min-height:0!important;padding:9px 0!important;border:0!important;border-bottom:1px solid #eef2f6!important;text-align:right!important;font-size:14px!important;line-height:1.55!important;background:transparent!important}
  .ux-responsive-table td:before{content:attr(data-label)!important;display:block!important;margin:0 0 3px!important;color:#8492a3!important;font-size:10.5px!important;font-weight:850!important;line-height:1.3!important}
  .ux-responsive-table td:nth-last-child(-n+2){border-bottom:0!important}
  .ux-responsive-table td.empty{grid-column:1/-1!important;border:0!important;padding:24px!important}.ux-responsive-table td.empty:before{display:none!important}
  .ux-responsive-table .row-actions{gap:7px!important;justify-content:flex-start!important}.ux-responsive-table .mini,.ux-responsive-table .wa-link{min-height:42px!important;font-size:13px!important}

  /* Students: name first, compact metadata, clear actions. */
  #studentsTable tr{padding-top:15px!important}
  #studentsTable tr>td:nth-child(1){position:absolute!important;left:13px!important;top:13px!important;width:auto!important;padding:0!important;border:0!important;z-index:2!important}
  #studentsTable tr>td:nth-child(1):before{display:none!important}
  #studentsTable tr>td:nth-child(1) input{width:24px!important;height:24px!important;accent-color:var(--ux8-blue)!important}
  #studentsTable tr>td:nth-child(4){grid-column:1/-1!important;grid-row:1!important;padding:1px 0 12px 40px!important;border-bottom:1px solid var(--ux8-line)!important}
  #studentsTable tr>td:nth-child(4):before{display:none!important}
  #studentsTable tr>td:nth-child(4) b{display:block!important;font-size:17px!important;line-height:1.5!important;color:#173653!important}
  #studentsTable tr>td:nth-child(4) .small{font-size:11.5px!important;color:#7b899a!important;margin-top:3px!important}
  #studentsTable tr>td:nth-child(2),#studentsTable tr>td:nth-child(3){background:#f7f9fc!important;border-radius:11px!important;padding:8px 9px!important;margin-top:9px!important;border-bottom:0!important}
  #studentsTable tr>td:nth-child(5){grid-column:1/-1!important}
  #studentsTable tr>td:nth-child(8){font-weight:900!important;color:#39536e!important}
  #studentsTable tr>td:nth-child(9),#studentsTable tr>td:nth-child(10){border-bottom:0!important;padding-top:11px!important}
  #studentsTable tr>td:nth-child(9) .wa-link{width:100%!important}
  #studentsTable tr>td:nth-child(10) .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  #studentsTable tr>td:nth-child(10) .mini{width:100%!important}

  #studentBulkBar:not(.ux-no-selection){top:74px!important;display:block!important;padding:10px!important}
  #studentBulkBar .bulk-actions-wrap{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:8px!important}
  #studentBulkBar .bulk-actions-wrap .btn{width:100%!important;font-size:12px!important;padding-inline:6px!important}

  /* Dialogs behave like native mobile sheets. */
  .simple-dialog,dialog{width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100dvh - 12px)!important;margin:auto 6px 6px!important;border-radius:22px 22px 14px 14px!important}
  .dialog-head,.modal-head{position:sticky!important;top:0!important;z-index:3!important;padding:14px 15px!important}.dialog-body{padding:14px!important;max-height:calc(100dvh - 150px)!important;overflow:auto!important}.dialog-actions{position:sticky!important;bottom:0!important;z-index:3!important;padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px))!important;background:#fff!important}
  .form-grid,.simple-fields{grid-template-columns:1fr!important}.form-grid input,.form-grid select,.form-grid textarea,.simple-fields input,.simple-fields select,.simple-fields textarea{font-size:16px!important;min-height:50px!important}

  /* Bottom navigation: readable and never covers content. */
  .bottom-nav{height:auto!important;min-height:72px!important;grid-template-columns:repeat(5,1fr)!important;padding:5px 5px max(7px,env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px)!important;box-shadow:0 -8px 28px rgba(21,52,84,.10)!important}
  .bottom-nav button{min-height:58px!important;border-radius:13px!important;font-size:20px!important;color:#6b7c90!important;padding:6px 2px!important}
  .bottom-nav button span{font-size:11.5px!important;line-height:1.25!important;margin-top:3px!important}.bottom-nav button.active{background:#eef5fb!important;color:#145a83!important;font-weight:900!important}.bottom-nav button.active:before{display:none!important}
  .sheet-card{border-radius:22px 22px 0 0!important;padding:16px 14px calc(86px + env(safe-area-inset-bottom))!important;max-height:82dvh!important;overflow:auto!important}.sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.sheet-grid button{min-height:52px!important;font-size:13.5px!important;border-radius:13px!important}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
}

@media(max-width:430px){
  .quick-grid,.quick-grid.compact,.cards-grid{grid-template-columns:1fr 1fr!important}
  .stats{grid-template-columns:1fr 1fr!important}
  .section-head>.actions{grid-template-columns:1fr 1fr!important}
  .filters{grid-template-columns:1fr 1fr!important}
  .ux-responsive-table tr{gap:0 9px!important;padding:13px!important}
  .ux-responsive-table td{font-size:13.5px!important}
}

@media(max-width:350px){
  .quick-grid,.quick-grid.compact{grid-template-columns:1fr!important}
  .filters{grid-template-columns:1fr!important}.filters>*{grid-column:1!important}
  .ux-responsive-table tr{grid-template-columns:1fr!important}
  #studentsTable tr>td{grid-column:1!important}
  #studentsTable tr>td:nth-child(4),#studentsTable tr>td:nth-child(5){grid-column:1!important}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){
  .ux-responsive-table tr>td:first-child:has(input[type="checkbox"]){position:absolute!important;left:13px!important;top:13px!important;width:auto!important;padding:0!important;border:0!important;z-index:2!important}
  .ux-responsive-table tr>td:first-child:has(input[type="checkbox"]):before{display:none!important}
  .ux-responsive-table tr>td:first-child:has(input[type="checkbox"]) input{width:23px!important;height:23px!important;accent-color:var(--ux8-blue)!important}
}