/* Tracked UI skin — primary #008F96 */
:root{
  --brand-teal:#008F96;
  --brand-teal-dark:#007880;
  --brand-teal-deep:#006b72;
  --brand-mint:#b8e8ea;
  --bg:#eef2f3;
  --sidebar:#008F96;
  --sidebar-deep:#007880;
  --card:#ffffff;
  --text:#1a2b2e;
  --muted:#6b7280;
  --border:rgba(0,143,150,.2);
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:18px;
  --shadow-card:0 6px 20px rgba(0,143,150,.08);
  --space-section:20px;
  --page-padding-x:24px;
  --page-padding-y:20px;
}

body.app{
  font-family:Poppins,Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* —— Sidebar —— */
body.app .shell{min-height:100vh;gap:0;background:var(--bg)}
body.app .sidebar{
  width:248px;
  background:var(--sidebar);
  color:#fff;
  padding:16px 12px;
  gap:10px;
  box-shadow:2px 0 16px rgba(0,143,150,.08);
}
body.app .sidebar-brand{
  align-items:center;
  gap:10px;
  padding:8px 4px 16px;
}
body.app .logo,
body.app .logo.logo--placeholder{
  width:72px;
  height:72px;
  border-radius:999px;
  background:var(--brand-mint);
  border:3px solid rgba(255,255,255,.7);
  box-shadow:none;
}
body.app .brand-text{
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.02em;
}
body.app .nav{gap:8px}
body.app .nav-link{
  background:rgba(0,0,0,.12);
  color:#fff;
  border-radius:var(--radius-md);
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  border:none;
}
body.app .nav-link:hover{background:rgba(0,0,0,.18)}
body.app .nav-link.is-active{
  background:#fff;
  color:var(--brand-teal);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
body.app .nav-link.logout{
  margin-top:auto;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.28);
  text-align:center;
}

/* —— Main + topbar —— */
body.app .main{
  background:var(--bg);
  flex:1;
  min-width:0;
}
body.app .main::before,
body.app .main::after{display:none !important}
body.app .topbar{
  height:56px;
  background:var(--bg);
  border:none;
  border-bottom:1px solid var(--border);
  padding:0 var(--page-padding-x);
  position:relative;
  z-index:200;
  overflow:visible;
}
body.app .topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  position:relative;
  z-index:201;
}
body.app .topbar-menu{
  position:relative;
  z-index:202;
}
body.app .page{
  position:relative;
  z-index:1;
}
body.app .main{
  overflow:visible;
}
body.app .topbar-bell{
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--brand-teal);
  color:#fff;
  border:none;
  box-shadow:0 4px 14px rgba(0,143,150,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
}
body.app .topbar-bell:hover{background:var(--brand-teal-dark)}
body.app .topbar-badge{
  position:absolute;
  top:6px;
  right:7px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ef4444;
  border:2px solid #fff;
}
body.app .topbar-avatar-btn{
  width:44px;
  height:44px;
  padding:0;
  border:none;
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
body.app .avatar.avatar--profile{
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--brand-mint);
  border:2px solid rgba(255,255,255,.85);
  display:block;
}
body.app .topbar-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:9999;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(17,24,39,.16);
  min-width:260px;
  overflow:hidden;
}

body.app .page{
  max-width:none;
  width:100%;
  padding:var(--page-padding-y) var(--page-padding-x) 32px;
  margin:0;
}
body.app .page-title h1{
  color:var(--brand-teal-deep);
  font-size:1.75rem;
  font-weight:700;
  margin:0 0 16px;
}
body.app .page > section + section{margin-top:var(--space-section)}

body.app .card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
}
body.app .btn{
  border-radius:var(--radius-md);
  font-weight:700;
}
body.app .btn-primary{
  background:var(--brand-teal);
  border:none;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,143,150,.28);
}
body.app .btn-primary:hover{background:var(--brand-teal-dark)}
body.app .search{
  background:#fff;
  border:1.5px solid rgba(0,143,150,.24);
  border-radius:var(--radius-md);
  padding:9px 12px;
}
body.app .input{
  background:#fff;
  border:1.5px solid rgba(0,143,150,.32);
  border-radius:var(--radius-md);
}
body.app .input:focus{
  border-color:var(--brand-teal);
  box-shadow:0 0 0 3px rgba(0,143,150,.16);
}
body.app .table th{
  background:#e8f5f6;
  color:var(--brand-teal-deep);
  font-weight:700;
}
body.app .subtab{
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
body.app .subtab.is-active{
  background:var(--brand-teal);
  color:#fff;
  border-color:transparent;
}

/* KPI solid bars like screenshot */
body.app .kpis{gap:14px}
body.app .kpi.kpi--solid,
body.app .card.kpi.kpi--solid{
  background:var(--brand-teal);
  color:#fff;
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:0 8px 22px rgba(0,143,150,.28);
  padding:18px 16px;
}
body.app .kpi.kpi--solid .kpi-label,
body.app .kpi.kpi--solid .kpi-value{color:#fff}

body.app .quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--space-section)}
body.app .folder-card{
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,143,150,.14);
  background:#fff;
  box-shadow:var(--shadow-card);
}
body.app .person-card{
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,143,150,.14);
  box-shadow:var(--shadow-card);
}
body.app .stat-box,
body.app .stat-boxes .card.stat-box{
  border-radius:var(--radius-lg);
  background:var(--brand-teal);
  border:none;
  color:#fff;
  box-shadow:0 8px 22px rgba(0,143,150,.28);
}
body.app .stat-box-value{color:#fff}
body.app .stat-box-label{color:rgba(255,255,255,.92)}

/* Compliance rectangular tabs */
body.app .compliance-tabs{
  display:flex;
  gap:0;
  margin:0 0 var(--space-section);
  background:#fff;
  border-radius:var(--radius-md);
  padding:6px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
}
body.app .compliance-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  padding:11px 18px;
  border-radius:10px;
  text-decoration:none;
  color:var(--brand-teal-deep);
  font-weight:700;
  font-size:14px;
  background:transparent;
  border:none;
  transition:background .15s,color .15s;
}
body.app .compliance-tab:hover{
  background:rgba(0,143,150,.1);
}
body.app .compliance-tab.is-active{
  background:var(--brand-teal);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,143,150,.28);
}

/* Teacher cards grid — fill width, not stuck left */
body.app .teacher-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  padding:16px 18px 22px;
  width:100%;
}
body.app .teacher-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,143,150,.16);
  box-shadow:0 4px 14px rgba(0,143,150,.06);
  min-width:0;
}
body.app .teacher-card-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1;
}
body.app .teacher-card-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
body.app .teacher-card-name{
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.app .teacher-card-email{
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.app .teacher-card .btn{flex-shrink:0}

/* Sidebar: scroll nav, logout always visible */
body.app .sidebar{
  position:sticky;
  top:0;
  align-self:flex-start;
  flex-shrink:0;
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.app .sidebar-brand{flex-shrink:0}
body.app .nav{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
  padding-right:2px;
  gap:8px;
  scrollbar-width:thin;
}
body.app .sidebar-footer{
  flex-shrink:0;
  padding-top:10px;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,.2);
}
body.app .nav-link.logout{margin-top:0}

/* Aesthetic notifications dropdown */
body.app .topbar-dropdown{
  border:1px solid rgba(0,143,150,.18);
  border-radius:16px;
  box-shadow:0 20px 48px rgba(0,80,90,.16);
}
body.app .topbar-dropdown--notif{width:min(380px,92vw)}
body.app .topbar-dropdown-head{
  background:linear-gradient(135deg,#e8f5f6,#ffffff);
  padding:14px 16px;
}
body.app .topbar-dropdown-head strong{color:var(--brand-teal-deep)}
body.app .topbar-notif-card{
  display:flex;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid #f0f4f5;
  transition:background .12s;
}
body.app .topbar-notif-card:last-child{border-bottom:none}
body.app .topbar-notif-card:hover{background:#f4fbfb}
body.app .topbar-notif-dot{
  width:10px;height:10px;border-radius:999px;margin-top:5px;flex-shrink:0;
  background:var(--brand-teal);
  box-shadow:0 0 0 4px rgba(0,143,150,.18);
}
body.app .topbar-notif-content{min-width:0;flex:1}
body.app .topbar-notif-title{font-weight:700;font-size:13px;margin-bottom:4px;color:#123}
body.app .topbar-notif-body{
  font-size:12px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.app .topbar-notif-time{font-size:11px;color:#9ca3af;margin-top:6px}
body.app .notif-empty-mini{padding:32px 16px;text-align:center}
body.app .notif-empty-ico{
  width:52px;height:52px;margin:0 auto 12px;border-radius:999px;
  background:linear-gradient(145deg,#dff6f7,#b8f0f3);
  position:relative;
}
body.app .notif-empty-ico::before{
  content:"";
  position:absolute;inset:14px 16px 12px;
  border:2.5px solid var(--brand-teal-deep);
  border-radius:10px 10px 12px 12px;
  border-top-width:3px;
}
body.app .notif-empty-ico::after{
  content:"";
  position:absolute;top:10px;left:50%;width:10px;height:8px;
  margin-left:-5px;border:2.5px solid var(--brand-teal-deep);
  border-bottom:none;border-radius:10px 10px 0 0;
}

/* View all + wide modal */
body.app .btn-view-all{
  border-radius:999px !important;
  padding:8px 18px !important;
  font-size:13px !important;
  box-shadow:0 6px 16px rgba(0,143,150,.28);
}
body.app .modal--wide{width:min(920px,96vw)}
body.app .table-wrap--modal{
  max-height:min(55vh,480px);
  overflow:auto;
  border:1px solid rgba(0,143,150,.15);
  border-radius:12px;
}

/* Folder cards */
body.app .folder-icon{
  width:36px;height:28px;display:inline-block;position:relative;flex-shrink:0;
  background:var(--brand-teal);border-radius:4px 4px 6px 6px;
  box-shadow:0 4px 10px rgba(0,143,150,.25);
}
body.app .folder-icon::before{
  content:"";
  position:absolute;left:0;top:-7px;width:14px;height:10px;
  background:var(--brand-teal-dark);border-radius:3px 3px 0 0;
}

/* Discrepancy cards */
body.app .form--disc{max-width:720px;padding:16px 18px 20px}
body.app .form--disc .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){body.app .form--disc .form-row-2{grid-template-columns:1fr}}
body.app .disc-list{display:flex;flex-direction:column;gap:14px;padding:14px 18px 22px}
body.app .disc-card{
  border:1px solid rgba(0,143,150,.16);
  border-radius:16px;
  padding:16px 18px;
  background:linear-gradient(180deg,#fff 0%,#f8fcfc 100%);
  box-shadow:0 4px 14px rgba(0,80,90,.04);
}
body.app .disc-card-top{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;
}
body.app .disc-card-title{margin:0;font-size:1.05rem;color:var(--brand-teal-deep)}
body.app .disc-card-meta{font-size:13px;margin-top:4px}
body.app .disc-card-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.app .disc-card-note{margin:10px 0 0;color:#374151;font-size:14px;line-height:1.45}
body.app .disc-card-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid #eef2f3;
}
body.app .disc-response{
  margin-top:12px;padding:12px;border-radius:var(--radius-md);background:#e8f5f6;
}
body.app .disc-response p{margin:6px 0 0;font-size:14px}
body.app .disc-respond,body.app .disc-resolve{margin-top:12px}
body.app .disc-resolve{display:flex;justify-content:flex-end}
body.app .days-passed{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  background:#fff7e6;color:#b45309;font-size:12px;font-weight:700;
}
body.app .empty-state-mark{
  width:48px;height:48px;margin:0 auto 12px;border-radius:12px;
  background:linear-gradient(145deg,#e8f5f6,var(--brand-mint));
  border:2px dashed rgba(0,143,150,.45);
}

/* Status reports */
body.app .status-list{
  list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;
}
body.app .status-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-radius:10px;background:#f4fbfb;font-size:14px;
}
body.app .status-list strong{color:var(--brand-teal-deep)}

/* Notifications page */
body.app .notif-stack{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
body.app .notif-card{
  padding:16px 18px;border-radius:16px;border:1px solid rgba(0,143,150,.16);
  background:linear-gradient(180deg,#fff,#f8fcfc);
}
body.app .notif-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
body.app .notif-dot{
  width:10px;height:10px;border-radius:999px;background:var(--brand-teal);
  box-shadow:0 0 0 4px rgba(0,143,150,.18);
}
body.app .notif-time{font-size:12px;color:var(--muted)}
body.app .notif-card-title{font-weight:700;font-size:15px;color:var(--brand-teal-deep)}
body.app .notif-card-body{margin-top:6px;font-size:14px;color:#374151;line-height:1.45}
body.app .notif-empty{padding:36px;text-align:center}

/* —— Login (screenshot card) —— */
.login-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:radial-gradient(ellipse 90% 70% at 50% 35%, #d4f4f6 0%, #eaf8fa 40%, #f4fbfc 100%);
  font-family:Poppins,Inter,system-ui,sans-serif;
  color:#1f2937;
}
.login-page .login-deco{display:none !important}

.login-page .login-shell,
.login-page .login-card{
  width:min(420px,100%);
  background:#fff;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,143,150,.16);
  border:1px solid rgba(0,143,150,.15);
  padding:36px 32px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  position:relative;
  z-index:1;
}

.login-page .login-brand{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.login-page .login-logos{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:4px;
}
.login-page .login-logo-blank{
  width:70px;
  height:70px;
  border-radius:999px;
  background:#e8f5f6;
  border:2px dashed rgba(0,143,150,.4);
}
.login-page .login-heading{
  margin:0;
  font-size:1.85rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--brand-teal-deep);
  text-transform:uppercase;
}
.login-page .login-sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}
.login-page .login-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.login-page .login-field{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
}
.login-page .login-label{
  font-size:12px;
  font-weight:700;
  color:#1f2937;
}
.login-page .login-control{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
}
.login-page .login-input{
  width:100%;
  border:1.5px solid rgba(0,143,150,.55);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  font-size:14px;
  background:#fff;
  outline:none;
}
.login-page .login-control--password .login-input{
  padding-right:46px;
}
.login-page .login-input:focus{
  border-color:var(--brand-teal);
  box-shadow:0 0 0 3px rgba(0,143,150,.18);
}
.login-page .login-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23008F96' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
  cursor:pointer;
}

/* Eye INSIDE password field, far right */
.login-page .login-eye{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:var(--brand-teal);
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
  z-index:3;
  border-radius:8px;
}
.login-page .login-eye svg{
  display:block;
  pointer-events:none;
  width:20px;
  height:20px;
}
.login-page .login-eye:hover{
  background:rgba(0,143,150,.1);
}

.login-page .login-submit{
  width:100%;
  margin-top:4px;
  border:none;
  border-radius:12px;
  padding:13px 16px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  color:#fff;
  background:var(--brand-teal);
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,143,150,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.login-page .login-submit:hover{background:var(--brand-teal-dark)}
.login-page .login-hint{margin:0;text-align:center}
.login-page .login-link--btn{
  border:none;
  background:transparent;
  color:var(--brand-teal);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  padding:0;
}
.login-page .login-flash{
  width:100%;
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:#fef2f2;
  color:#991b1b;
  font-size:13px;
  text-align:center;
}

/* Responsive layout */
@media (max-width: 900px){
  body.app .page{
    --page-padding-x:18px;
    --page-padding-y:16px;
  }
  body.app .kpis,
  body.app .stat-boxes{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
@media (max-width: 640px){
  body.app .shell{flex-direction:column}
  body.app .sidebar{
    width:100%;
    height:auto;
    max-height:none;
    position:relative;
    box-shadow:none;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  body.app .nav{
    flex:0 1 auto;
    max-height:240px;
  }
  body.app .page-title h1{font-size:1.45rem}
  body.app .kpis,
  body.app .stat-boxes{grid-template-columns:1fr}
}