/* =========================================================
   EDUHUNT V2.1.13 — MOBILE + TABLET PREMIUM DARK THEME
   UI ONLY. NO PORTAL LOGIC, API, AUTH, DATABASE OR DESKTOP CHANGE.
   Applies at 1024px and below. Desktop 1025px+ remains unchanged.
========================================================= */
@media (max-width:1024px){
  html{
    color-scheme:dark;
    background:#020813;
  }

  /* Shared mobile palette. Role-specific accent is decorative only. */
  body{
    --ehm-bg:#020813;
    --ehm-bg-2:#03101f;
    --ehm-surface:#07192c;
    --ehm-surface-2:#0a2139;
    --ehm-surface-3:#0d2946;
    --ehm-border:#244560;
    --ehm-border-strong:#315d7d;
    --ehm-text:#f6f9ff;
    --ehm-text-2:#d7e4f2;
    --ehm-muted:#8fa7bf;
    --ehm-accent:#35e0d2;
    --ehm-accent-rgb:53,224,210;
    --ehm-accent-2:#21a6ff;
    --ehm-shadow:0 14px 34px rgba(0,0,0,.26);
    background:var(--ehm-bg);
    color:var(--ehm-text-2);
  }
  body[data-portal-role="SUPER_ADMIN"]{--ehm-accent:#ff4b67;--ehm-accent-rgb:255,75,103;--ehm-accent-2:#ff7a57}
  body[data-portal-role="OPERATOR"]{--ehm-accent:#31d8ff;--ehm-accent-rgb:49,216,255;--ehm-accent-2:#2389ff}
  body[data-portal-role="ACADEMIC_COORDINATOR"]{--ehm-accent:#a78bfa;--ehm-accent-rgb:167,139,250;--ehm-accent-2:#5aa7ff}
  body[data-portal-role="PRINCIPAL"]{--ehm-accent:#35e0d2;--ehm-accent-rgb:53,224,210;--ehm-accent-2:#1c9fff}
  body[data-portal-role="TEACHER"]{--ehm-accent:#ffb454;--ehm-accent-rgb:255,180,84;--ehm-accent-2:#ff7b54}
  body[data-portal-role="STUDENT"]{--ehm-accent:#35e0d2;--ehm-accent-rgb:53,224,210;--ehm-accent-2:#16b7ff}

  /* Login: dark on phone/tablet, while desktop remains exactly as before. */
  .login-view{
    background:
      radial-gradient(circle at 96% 4%,rgba(53,224,210,.13),transparent 34%),
      radial-gradient(circle at 2% 96%,rgba(35,137,255,.12),transparent 36%),
      #020813;
  }
  .login-stage{
    border-color:#1d3953;
    background:#061528;
    box-shadow:0 24px 64px rgba(0,0,0,.42);
  }
  .login-brand-panel{
    background:
      radial-gradient(circle at 85% 15%,rgba(53,224,210,.16),transparent 31%),
      linear-gradient(145deg,#071d34,#020813 72%);
  }
  .login-form-panel{
    background:
      radial-gradient(circle at 100% 0,rgba(53,224,210,.11),transparent 38%),
      #061426;
  }
  .login-mobile-brand img,.brand-lockup img{background:#fff}
  .login-card h2,.field>span:first-child,.field-label,.remember-row{color:var(--ehm-text)}
  .login-help,.login-footer{color:var(--ehm-muted)}
  .login-card input{
    border-color:var(--ehm-border-strong);
    background:#030d1b;
    color:var(--ehm-text);
  }
  .login-card input::placeholder{color:#69829c}
  .login-card input:focus{border-color:#35e0d2;box-shadow:0 0 0 3px rgba(53,224,210,.13)}
  .login-card .input-wrap>svg,.login-card .input-action{color:#91aac3;stroke:#91aac3}
  .login-card .button--primary{background:linear-gradient(100deg,#167cff,#20d7d1);box-shadow:0 10px 25px rgba(22,124,255,.22)}

  /* Whole logged-in canvas */
  body[data-portal-role] .portal-view,
  body[data-portal-role] .portal-main,
  body[data-portal-role] .content{
    background:
      radial-gradient(circle at 100% 0,rgba(var(--ehm-accent-rgb),.09),transparent 27%),
      var(--ehm-bg);
    color:var(--ehm-text-2);
  }
  body[data-portal-role] .portal-main{min-height:100dvh}

  /* Top bar */
  body[data-portal-role] .topbar{
    border-color:#1d3a55;
    background:rgba(3,14,28,.94);
    box-shadow:0 5px 22px rgba(0,0,0,.26);
    backdrop-filter:blur(16px);
  }
  body[data-portal-role] .topbar::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ehm-accent),transparent);
    opacity:.58;
    pointer-events:none;
  }
  body[data-portal-role] .topbar-title h1,
  body[data-portal-role] .menu-toggle,
  body[data-portal-role] .account-button{color:var(--ehm-text)}
  body[data-portal-role] .topbar-title>span{color:var(--ehm-accent)}
  body[data-portal-role] .topbar-button,
  body[data-portal-role] .notification-button{
    border-color:var(--ehm-border);
    background:#081b31;
    color:var(--ehm-text-2);
  }
  body[data-portal-role] .topbar-button:hover,
  body[data-portal-role] .notification-button:hover,
  body[data-portal-role] .account-button:hover{
    border-color:var(--ehm-border-strong);
    background:#0c2641;
  }
  body[data-portal-role] .notification-count{border-color:#030e1c}

  /* Drawer navigation */
  body[data-portal-role] .sidebar{
    border-right:1px solid #19334d;
    background:
      radial-gradient(circle at 22% 0,rgba(var(--ehm-accent-rgb),.12),transparent 29%),
      linear-gradient(180deg,#06182b,#020914 72%);
  }
  body[data-portal-role] .sidebar-brand{border-color:#1b3550}
  body[data-portal-role] .sidebar-identity{
    border-color:#244660;
    background:#091e34;
  }
  body[data-portal-role] .sidebar-identity span,.sidebar-version{color:#839db8}
  body[data-portal-role] .nav-group{color:#6884a2}
  body[data-portal-role] .nav-link,
  body[data-portal-role] .sidebar-link{color:#b7c9dc}
  body[data-portal-role] .nav-link:hover,
  body[data-portal-role] .sidebar-link:hover{background:#0d2943;color:#fff}
  body[data-portal-role] .nav-link.active{
    background:linear-gradient(95deg,rgba(var(--ehm-accent-rgb),.23),rgba(var(--ehm-accent-rgb),.06));
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(var(--ehm-accent-rgb),.18);
  }
  body[data-portal-role] .nav-link.active::before{
    display:block;
    background:var(--ehm-accent);
    box-shadow:0 0 15px rgba(var(--ehm-accent-rgb),.58);
  }
  body[data-portal-role="SUPER_ADMIN"] .nav-link.active::before{display:block}
  body[data-portal-role] .sidebar-bottom{border-color:#1b3550}
  body[data-portal-role] .sidebar-version{background:#020d19;border:1px solid #17314b}

  /* Headings and common text */
  body[data-portal-role] .page-head h2,
  body[data-portal-role] .card-head h3,
  body[data-portal-role] .section-title,
  body[data-portal-role] .kpi-card b,
  body[data-portal-role] .programme-card b,
  body[data-portal-role] .quick-card strong,
  body[data-portal-role] .table-toolbar strong,
  body[data-portal-role] .cell-primary,
  body[data-portal-role] td strong,
  body[data-portal-role] .form-field>label,
  body[data-portal-role] .form-field>.label,
  body[data-portal-role] .empty-state h3,
  body[data-portal-role] .subject-card b,
  body[data-portal-role] .schedule-cell strong,
  body[data-portal-role] .timeline-item strong,
  body[data-portal-role] .doc-card strong,
  body[data-portal-role] .resource-card strong,
  body[data-portal-role] .class-button strong{color:var(--ehm-text)}
  body[data-portal-role] .page-head p,
  body[data-portal-role] .card-head p,
  body[data-portal-role] .kpi-card>span,
  body[data-portal-role] .programme-card span,
  body[data-portal-role] .quick-card small,
  body[data-portal-role] .cell-secondary,
  body[data-portal-role] .form-field .hint,
  body[data-portal-role] .table-toolbar small,
  body[data-portal-role] .empty-state p,
  body[data-portal-role] .subject-card span,
  body[data-portal-role] .subject-card small,
  body[data-portal-role] .schedule-cell span,
  body[data-portal-role] .timeline-item span,
  body[data-portal-role] .doc-card small,
  body[data-portal-role] .resource-card small,
  body[data-portal-role] .class-button span{color:var(--ehm-muted)}
  body[data-portal-role] .eyebrow{color:var(--ehm-accent)}

  /* Cards and dashboards */
  body[data-portal-role] .card,
  body[data-portal-role] .kpi-card,
  body[data-portal-role] .quick-card,
  body[data-portal-role] .programme-card,
  body[data-portal-role] .filter-bar,
  body[data-portal-role] .table-card,
  body[data-portal-role] .metric-strip,
  body[data-portal-role] .check-row,
  body[data-portal-role] .subject-card,
  body[data-portal-role] .schedule-card,
  body[data-portal-role] .doc-card,
  body[data-portal-role] .resource-card,
  body[data-portal-role] .teacher-assignment-row,
  body[data-portal-role] .class-button{
    border-color:var(--ehm-border);
    background:linear-gradient(145deg,var(--ehm-surface),#061526);
    color:var(--ehm-text-2);
    box-shadow:none;
  }
  body[data-portal-role] .card--soft{background:#061629}
  body[data-portal-role] .card--accent{
    border:1px solid #23577a;
    background:linear-gradient(135deg,#082644,#0b4a66);
    box-shadow:var(--ehm-shadow);
  }
  body[data-portal-role] .kpi-card::after{background:rgba(var(--ehm-accent-rgb),.08)}
  body[data-portal-role] .kpi-icon{
    border:1px solid rgba(var(--ehm-accent-rgb),.16);
    background:rgba(var(--ehm-accent-rgb),.10);
    color:var(--ehm-accent);
  }
  body[data-portal-role] .quick-card:hover,
  body[data-portal-role] .class-button:hover,
  body[data-portal-role] .class-button.active{
    border-color:var(--ehm-accent);
    background:#0a2742;
    color:var(--ehm-accent);
    box-shadow:0 0 0 1px rgba(var(--ehm-accent-rgb),.09),0 10px 24px rgba(0,0,0,.18);
  }
  body[data-portal-role] .programme-card strong{color:var(--ehm-accent)}

  /* Forms */
  body[data-portal-role] input,
  body[data-portal-role] select,
  body[data-portal-role] textarea{
    border-color:var(--ehm-border-strong);
    background:#030e1c;
    color:var(--ehm-text);
  }
  body[data-portal-role] input::placeholder,
  body[data-portal-role] textarea::placeholder{color:#6f88a2}
  body[data-portal-role] input:focus,
  body[data-portal-role] select:focus,
  body[data-portal-role] textarea:focus{
    border-color:var(--ehm-accent);
    box-shadow:0 0 0 3px rgba(var(--ehm-accent-rgb),.12);
  }
  body[data-portal-role] input[readonly],
  body[data-portal-role] input:disabled,
  body[data-portal-role] select:disabled,
  body[data-portal-role] textarea:disabled{
    border-color:#263f58;
    background:#0a1e33;
    color:#a3b5c7;
  }
  body[data-portal-role] .search-wrap svg{stroke:#83a0bc}
  body[data-portal-role] .segmented{
    border-color:var(--ehm-border);
    background:#020d1a;
  }
  body[data-portal-role] .segmented button{color:#9fb3c8}
  body[data-portal-role] .segmented button.active{
    background:#0d2a48;
    color:var(--ehm-accent);
    box-shadow:0 0 0 1px rgba(var(--ehm-accent-rgb),.18);
  }
  body[data-portal-role] .form-actions{border-color:var(--ehm-border)}

  /* Buttons. Semantic success/warning/danger colours are intentionally retained. */
  body[data-portal-role] .button--primary{
    background:linear-gradient(100deg,var(--ehm-accent-2),var(--ehm-accent));
    color:#fff;
    box-shadow:0 9px 22px rgba(var(--ehm-accent-rgb),.16);
  }
  body[data-portal-role="TEACHER"] .button--primary{color:#08101a}
  body[data-portal-role] .button--secondary{
    border-color:#33536f;
    background:#0c2743;
    color:var(--ehm-text);
  }
  body[data-portal-role] .button--ghost{color:var(--ehm-accent)}
  body[data-portal-role] .row-action,
  body[data-portal-role] .pagination button{
    border-color:var(--ehm-border);
    background:#071a2e;
    color:#bdd0e2;
  }
  body[data-portal-role] .row-action:hover{
    border-color:var(--ehm-accent);
    background:#0c2946;
    color:var(--ehm-accent);
  }
  body[data-portal-role] .pagination button.active{
    border-color:var(--ehm-accent);
    background:var(--ehm-accent-2);
    color:#fff;
  }

  /* Tables */
  body[data-portal-role] .table-toolbar,
  body[data-portal-role] .pagination{border-color:var(--ehm-border)}
  body[data-portal-role] th{
    border-color:#234661;
    background:#0a3658;
    color:#eff8ff;
  }
  body[data-portal-role] td{
    border-color:#1e3953;
    background:#07192c;
    color:#cbd9e8;
  }
  body[data-portal-role] td.muted{color:#7f99b2}
  body[data-portal-role] tbody tr:hover td{background:#0b2741}

  /* Notices and statuses */
  body[data-portal-role] .notice{
    border-color:#2d5874;
    border-left-color:var(--ehm-accent);
    background:#08223a;
    color:#c8e4f4;
  }
  body[data-portal-role] .notice--warning{border-color:#70562c;border-left-color:#ffb347;background:#2a210f;color:#f2d49a}
  body[data-portal-role] .notice--danger{border-color:#6d3340;border-left-color:#ff6b7c;background:#2b1018;color:#f5b6c0}
  body[data-portal-role] .notice--success{border-color:#275d4b;border-left-color:#34d399;background:#09261e;color:#b6ead7}
  body[data-portal-role] .status{background:#16283b;color:#b6c6d7}
  body[data-portal-role] .status--active,
  body[data-portal-role] .status--success,
  body[data-portal-role] .status--allow,
  body[data-portal-role] .status--completed,
  body[data-portal-role] .status--conducted,
  body[data-portal-role] .status--received,
  body[data-portal-role] .status--announced{background:#0c2a21;color:#54e2a8}
  body[data-portal-role] .status--pending,
  body[data-portal-role] .status--scheduled,
  body[data-portal-role] .status--today,
  body[data-portal-role] .status--in-progress,
  body[data-portal-role] .status--submitted{background:#2b230f;color:#ffc869}
  body[data-portal-role] .status--inactive,
  body[data-portal-role] .status--stop,
  body[data-portal-role] .status--rejected,
  body[data-portal-role] .status--overdue,
  body[data-portal-role] .status--not-sent,
  body[data-portal-role] .status--cancelled{background:#2a1118;color:#ff8090}
  body[data-portal-role] .status--info,
  body[data-portal-role] .status--upcoming,
  body[data-portal-role] .status--draft{background:#0d2944;color:#72c4ff}
  body[data-portal-role] .status--purple{background:#201a3a;color:#ba9cff}

  /* Metrics, progress and result panels */
  body[data-portal-role] .metric{border-color:var(--ehm-border)}
  body[data-portal-role] .metric b{color:var(--ehm-text)}
  body[data-portal-role] .metric span{color:var(--ehm-muted)}
  body[data-portal-role] .progress-copy{color:#c6d5e4}
  body[data-portal-role] .progress-track{background:#172c42}
  body[data-portal-role] .progress-track span{background:linear-gradient(90deg,var(--ehm-accent-2),var(--ehm-accent))}
  body[data-portal-role] .result-hero{
    border:1px solid #24587a;
    background:
      radial-gradient(circle at 100% 0,rgba(var(--ehm-accent-rgb),.18),transparent 38%),
      linear-gradient(135deg,#071d35,#0a3d58);
    box-shadow:var(--ehm-shadow);
  }
  body[data-portal-role] .result-hero p,
  body[data-portal-role] .result-score span{color:#acd1e5}
  body[data-portal-role] .schedule-date{
    border:1px solid rgba(var(--ehm-accent-rgb),.20);
    background:rgba(var(--ehm-accent-rgb),.09);
    color:var(--ehm-accent);
  }
  body[data-portal-role] .timeline::before{background:#24435d}
  body[data-portal-role] .timeline-item::before{
    border-color:#07192c;
    background:var(--ehm-accent);
    box-shadow:0 0 0 1px rgba(var(--ehm-accent-rgb),.55),0 0 13px rgba(var(--ehm-accent-rgb),.22);
  }
  body[data-portal-role] .doc-icon,
  body[data-portal-role] .empty-icon{
    background:#0b2946;
    color:var(--ehm-accent);
  }

  /* File upload / bulk import */
  body[data-portal-role] .file-drop{
    border-color:#37617f;
    background:#061a2e;
  }
  body[data-portal-role] .file-drop.drag{border-color:var(--ehm-accent);background:#0a2943}
  body[data-portal-role] .file-drop svg{stroke:var(--ehm-accent)}
  body[data-portal-role] .file-drop strong{color:var(--ehm-text)}
  body[data-portal-role] .file-drop small{color:var(--ehm-muted)}
  body[data-portal-role] .import-step{color:#7f9ab4}
  body[data-portal-role] .import-step::after,
  body[data-portal-role] .import-step:first-child::before{background:#29445e}
  body[data-portal-role] .import-step.active{color:var(--ehm-accent)}
  body[data-portal-role] .import-step.active::after,
  body[data-portal-role] .import-step.complete::after,
  body[data-portal-role] .import-step.complete::before,
  body[data-portal-role] .import-step.active::before{background:var(--ehm-accent)}

  /* Dialogs including Safe Excel Bulk Import */
  body[data-portal-role] .app-dialog{
    border:1px solid #284b68;
    background:#051425;
    color:var(--ehm-text-2);
    box-shadow:0 26px 80px rgba(0,0,0,.55);
  }
  body[data-portal-role] .dialog-shell>header{
    border-color:#26455f;
    background:#071b2f;
  }
  body[data-portal-role] .dialog-shell h2{color:var(--ehm-text)}
  body[data-portal-role] .dialog-body{background:#051425}
  body[data-portal-role] .dialog-footer{
    border-color:#26455f;
    background:#06172a;
  }
  body[data-portal-role] .app-dialog::backdrop{background:rgba(0,4,12,.78);backdrop-filter:blur(4px)}

  /* Operator result upload cards — same logic, dark presentation only. */
  body[data-portal-role="OPERATOR"] .op-result-class-card{
    border-color:#264a67;
    background:#06172a;
    box-shadow:none;
  }
  body[data-portal-role="OPERATOR"] .op-result-class-head{
    border-bottom:1px solid #2f6688;
    background:linear-gradient(100deg,#0a3355,#075f7f);
  }
  body[data-portal-role="OPERATOR"] .op-result-file-card{
    border-color:#355b76;
    background:#081d32;
  }
  body[data-portal-role="OPERATOR"] .op-result-file-card.required{
    border-color:#31d8ff;
    background:#08243a;
  }
  body[data-portal-role="OPERATOR"] .op-result-file-card.attendance{
    border-color:#75643d;
    background:#211d10;
  }
  body[data-portal-role="OPERATOR"] .op-result-file-card label{color:#f1f8ff}
  body[data-portal-role="OPERATOR"] .op-result-file-card small{color:#91a9c0}
  body[data-portal-role="OPERATOR"] .op-result-file-state{
    background:#0b2941;
    color:#b9ccdf;
  }
  body[data-portal-role="OPERATOR"] .op-result-class-status{
    border-color:#26455f;
    background:#071a2d;
    color:#9eb3c8;
  }
  body[data-portal-role="OPERATOR"] .op-result-preview-kpis span{
    border-color:#2e506b;
    background:#071d31;
    color:#cad8e5;
  }
  body[data-portal-role="OPERATOR"] .op-result-preview-kpis b{color:#31d8ff}

  /* Toasts */
  .toast{
    border-color:#31526e;
    background:#071a2d;
    color:#d8e6f3;
    box-shadow:0 16px 45px rgba(0,0,0,.42);
  }
  .toast button{color:#9cb1c5}

  body[data-portal-role] .portal-footer{color:#607b96}

  /* Better touch presentation without changing content or click behaviour. */
  body[data-portal-role] .card,
  body[data-portal-role] .kpi-card,
  body[data-portal-role] .quick-card,
  body[data-portal-role] .programme-card,
  body[data-portal-role] .table-card,
  body[data-portal-role] .schedule-card,
  body[data-portal-role] .subject-card{border-radius:14px}
}

/* Phones receive the slightly tighter, app-like spacing seen in the reference screens. */
@media (max-width:560px){
  body[data-portal-role] .content{padding:14px 12px 22px}
  body[data-portal-role] .page-head{margin-bottom:17px}
  body[data-portal-role] .page-head h2{font-size:27px;line-height:1.15}
  body[data-portal-role] .card{padding:15px}
  body[data-portal-role] .kpi-card{min-height:112px;padding:14px}
  body[data-portal-role] .kpi-card b{font-size:28px}
  body[data-portal-role] .quick-card{min-height:112px;border-radius:14px}
  body[data-portal-role] .topbar{padding-left:12px;padding-right:12px}
}

/* Super Admin / Coordinator full-screen Edit On Screen overlay is injected later by JS.
   !important is used only here so the mobile/tablet dark theme still wins. */
@media (max-width:1024px){
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-overlay,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-overlay{background:rgba(0,4,12,.88)!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-shell,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-shell{background:#041222!important;color:#eaf3fc!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-head,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-head{border-color:#254660!important;background:#071b2f!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-head h2,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-head h2{color:#fff!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-head p,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-head p{color:#91a9c0!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-tools,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-tools{border-color:#254660!important;background:#06172a!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-tools label,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-tools label,
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-count,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-count{color:#edf6ff!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-tools input,
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-tools select,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-tools input,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-tools select{border-color:#315b78!important;background:#020e1b!important;color:#f4f8ff!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-note,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-note{border-color:#735e2c!important;background:#29210e!important;color:#f0d491!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table-wrap,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table-wrap{background:#041222!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table th,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table th{border-color:#28506e!important;background:#0a3658!important;color:#fff!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table td,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table td{border-color:#203e57!important;background:#07192c!important;color:#d1dfec!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table input,
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table select,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table input,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table select{border-color:#315b78!important;background:#020e1b!important;color:#f4f8ff!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table input[readonly],
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table select:disabled,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table input[readonly],
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table select:disabled{background:#0b2239!important;color:#a9bdd0!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table td.sa-qe-sticky,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table td.sa-qe-sticky{background:#09213a!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-table th.sa-qe-sticky,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-table th.sa-qe-sticky{background:#0a3658!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-actions,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-actions{background:#07192c!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-row.sa-qe-dirty td,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-row.sa-qe-dirty td{background:#28220f!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-row.sa-qe-dirty .sa-qe-sticky,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-row.sa-qe-dirty .sa-qe-sticky{background:#332a0e!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-row.sa-qe-saved td,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-row.sa-qe-saved td{background:#08291d!important}
  body[data-portal-role="SUPER_ADMIN"] .sa-qe-row.sa-qe-error td,
  body[data-portal-role="ACADEMIC_COORDINATOR"] .sa-qe-row.sa-qe-error td{background:#2a1018!important}
}