/* Tracked UI skin — primary #008F96 */
/* =========================================================
   01. GLOBAL VARIABLES / DESIGN TOKENS
   Main colors, spacing, borders, shadows, and reusable values.
   ========================================================= */
   :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;
    --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  
  body.app{
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text);
  }
  
  /* —— Sidebar —— */
  body.app /* =========================================================
     03. MAIN APP LAYOUT / SHELL
     ========================================================= */
  .shell{min-height:100vh;gap:0;background:var(--bg)}
  body.app /* ===== SIDEBAR NAVIGATION ===== */
  .sidebar{
    width:248px;
    background:var(--sidebar);
    color:#fff;
    padding:16px 12px 14px;
    gap:12px;
    box-shadow:1px 0 0 rgba(0,143,150,.12);
  }
  body.app .sidebar-brand{
    align-items:center;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    padding:10px 8px 16px;
    text-align:center;
  }
  body.app .logo,
  body.app .logo.logo--brand{
    width:56px;
    height:56px;
    border-radius:12px;
    background:#fff;
    border:1px solid rgba(255,255,255,.45);
    box-shadow:none;
  }
  body.app .logo-img{border-radius:8px}
  body.app .brand-text{
    color:#fff;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:.02em;
  }
  body.app .nav{gap:8px}
  body.app .nav-link{
    background:transparent;
    color:rgba(255,255,255,.92);
    border-radius:10px;
    padding:12px 14px;
    min-height:44px;
    font-size:14.5px;
    font-weight:500;
    border:none;
    gap:12px;
  }
  body.app .nav-link:hover{background:rgba(0,0,0,.12);color:#fff}
  body.app .nav-link.is-active{
    background:rgba(255,255,255,.95);
    color:var(--brand-teal-deep);
    box-shadow:none;
    font-weight:600;
  }
  body.app .nav-link.logout{
    margin-top:auto;
    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    text-align:left;
  }

  /* —— Main + topbar —— */
  body.app /* =========================================================
     05. MAIN CONTENT AREA
     ========================================================= */
  .main{
    background:var(--bg);
    flex:1;
    min-width:0;
  }
  body.app .main::before,
  body.app .main::after{display:none !important}
  body.app /* ===== ADMIN DASHBOARD HEADER ===== */
  .topbar{
    min-height:64px;
    height:auto;
    background:#fff;
    border:none;
    border-bottom:1px solid var(--border);
    padding:12px var(--page-padding-x);
    position:relative;
    z-index:2050;
    overflow:visible;
  }
  body.app .topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    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:38px;
    height:38px;
    border-radius:10px;
    background:#fff;
    color:var(--brand-teal-deep);
    border:1px solid var(--border);
    box-shadow:none;
    display:grid;
    place-items:center;
    cursor:pointer;
    position:relative;
  }
  body.app .topbar-bell:hover{background:#f7fafb;border-color:rgba(0,143,150,.28)}
  body.app .topbar-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    border:2px solid #fff;
    font-size:10px;
    font-weight:700;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.app .topbar-badge[hidden]{display:none !important}
  body.app .topbar-avatar-btn{
    width:38px;
    height:38px;
    padding:0;
    border:none;
    background:transparent;
    border-radius:999px;
    cursor:pointer;
    display:grid;
    place-items:center;
  }
  body.app .avatar.avatar--profile{
    width:38px;
    height:38px;
    border-radius:999px;
    background:var(--brand-mint);
    border:2px solid rgba(0,143,150,.35);
    display:block;
  }
  body.app .topbar-dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:9999;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(17,24,39,.12);
    min-width:260px;
    overflow:hidden;
  }

  body.app .page{
    max-width:none;
    width:100%;
    padding:var(--page-padding-y) var(--page-padding-x) 28px;
    margin:0;
  }
  body.app .page-title h1,
  body.app .topbar-title{
    color:var(--text);
    font-size:1.35rem;
    font-weight:700;
    margin:0;
  }
  body.app .page > section + section{margin-top:var(--space-section)}

  body.app /* =========================================================
     08. CARDS / PANELS
     ========================================================= */
  .card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(15,61,66,.04);
  }
  body.app /* =========================================================
     13. BUTTONS
     ========================================================= */
  .btn{
    border-radius:8px;
    font-weight:600;
  }
  body.app .btn-primary{
    background:var(--brand-teal);
    border:none;
    color:#fff;
    box-shadow:0 2px 8px rgba(0,143,150,.2);
  }
  body.app .btn-primary:hover{background:var(--brand-teal-dark)}
  body.app .btn-secondary{
    background:#fff;
    border:1px solid var(--border);
    color:var(--brand-teal-deep);
    box-shadow:none;
  }
  body.app .search{
    background:#fff;
    border:1.5px solid rgba(0,143,150,.2);
    border-radius:8px;
    padding:9px 12px;
  }
  body.app .register-search .search{
    height:44px;
    min-height:44px;
    padding:0 14px;
    border:1.5px solid rgba(0,143,150,.4);
    border-radius:10px;
  }
  body.app .register-primary-btn{
    height:44px;
    border-radius:10px;
    font-size:14px;
  }
  body.app /* =========================================================
     12. INPUT FIELDS
     ========================================================= */
  .input{
    background:#fff;
    border:1.5px solid rgba(0,143,150,.24);
    border-radius:8px;
  }
  body.app .input:focus{
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(0,143,150,.12);
  }
  body.app .table th{
    background:#f7f9fa;
    color:var(--muted);
    font-weight:700;
  }
  body.app .subtab{
    border-radius:8px;
    border:1px solid var(--border);
    background:#fff;
  }
  body.app .subtab.is-active{
    background:var(--brand-teal);
    color:#fff;
    border-color:transparent;
  }

  /* KPI cards — original solid teal */
  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:12px;
    box-shadow:0 6px 18px rgba(0,143,150,.22);
    padding:22px 18px;
    min-height:108px;
  }
  body.app .kpi.kpi--solid .kpi-label{color:rgba(255,255,255,.92)}
  body.app .kpi.kpi--solid .kpi-value{color:#fff}

  body.app .page-title--row{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:14px;
  }
  body.app .page-title--row h1{margin-bottom:0}
  body.app .page-title--row .quick-actions{margin-bottom:0}
  body.app .dashboard-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px 16px;
    margin-bottom:var(--space-section);
    align-items:stretch;
  }
  body.app .dashboard-submissions{
    grid-column:1 / 5;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  body.app .dashboard-submissions .table-wrap--scroll{
    flex:1 1 auto;
    min-height:280px;
    max-height:min(420px,48vh);
    overflow:auto;
  }
  body.app .dashboard-submissions .table--dashboard{
    width:100%;
    min-width:720px;
  }
  body.app .dashboard-submissions .table--dashboard th,
  body.app .dashboard-submissions .table--dashboard td{
    padding:14px 16px;
    font-size:13.5px;
    white-space:nowrap;
  }
  body.app .dashboard-submissions .table--dashboard td:last-child{
    white-space:normal;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app .dashboard-notifications{
    grid-column:5 / 6;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  body.app .dashboard-notifications .panel-head--row{
    gap:6px;
    align-items:center;
  }
  body.app .dashboard-notifications .panel-head h2{
    font-size:1rem;
    line-height:1.25;
  }
  body.app .dashboard-notifications .panel-head .btn{
    flex-shrink:0;
    padding:0 8px;
    height:30px;
    font-size:12px;
  }
  body.app .dashboard-notifications .scroll-panel--notifications{
    flex:1 1 auto;
    max-height:min(420px,48vh);
    min-height:280px;
    overflow:auto;
  }
  body.app .dashboard-notifications .notif-stack{
    gap:8px;
    padding:10px 10px 12px;
  }
  body.app .dashboard-notifications .notif-card--compact{
    padding:10px 10px;
    gap:5px;
    background:#f4fbfb;
    border-color:rgba(0,143,150,.14);
  }
  body.app .dashboard-notifications .notif-card-title{
    font-size:12.5px;
    font-weight:700;
    margin-bottom:2px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.app .dashboard-notifications .notif-card-body{
    font-size:12px;
    line-height:1.4;
    color:#4b5563;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.app .dashboard-notifications .notif-time{
    display:block;
    margin-top:2px;
    font-size:11px;
    color:#6b7280;
  }
  body.app .dashboard-notifications .notif-empty{
    padding:28px 10px;
    font-size:12.5px;
  }
  body.app .dashboard-notifications .notif-empty .muted{
    margin:0;
    font-size:12.5px;
    line-height:1.4;
  }
  @media (max-width:1200px){
    body.app .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    body.app .dashboard-submissions{grid-column:1 / 3}
    body.app .dashboard-notifications{grid-column:3 / 4}
  }
  @media (max-width:1100px){
    body.app .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.app .dashboard-submissions,
    body.app .dashboard-notifications{grid-column:1 / -1}
  }
  @media (max-width:640px){
    body.app .dashboard-grid{grid-template-columns:1fr}
  }
  body.app .dashboard-panels{
    gap:16px;
    margin-bottom:var(--space-section);
    align-items:stretch;
  }
  body.app .quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  body.app .folder-card{
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:0 2px 8px rgba(15,61,66,.04);
  }
  body.app .stat-box,
  body.app .stat-boxes .card.stat-box{
    border-radius:12px;
    background:#fff;
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:0 2px 8px rgba(15,61,66,.04);
  }
  body.app .stat-box-value{color:var(--text)}
  body.app .stat-box-label{color:var(--muted)}
  
  /* =========================================================
     34. COMPLIANCE SECTION
     Teacher compliance cards, checklist, and status controls.
     ========================================================= */
  body.app .compliance-search-bar{
    margin:0 0 14px;
    width:100%;
  }
  body.app .compliance-search-bar .register-search{
    width:100%;
  }

  /* Add Document — full-width form */
  body.app .add-document-panel{
    margin-bottom:16px;
    overflow:hidden;
  }
  body.app .add-document-panel .panel-head{
    padding:16px 18px 8px;
    text-align:left;
  }
  body.app .add-document-form{
    display:grid;
    gap:8px;
    width:100%;
    max-width:none;
    margin:0;
    padding:8px 18px 22px;
    box-sizing:border-box;
  }
  body.app .add-document-form .field-label{
    margin:0;
    font-weight:600;
    font-size:12.5px;
    color:var(--muted);
  }
  body.app .add-document-form .field-label + .input,
  body.app .add-document-form .field-label + textarea.input{
    margin-bottom:8px;
  }
  body.app .add-document-form .input,
  body.app .add-document-form textarea.input{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    border:1.5px solid rgba(0,143,150,.28);
    border-radius:10px;
    min-height:44px;
  }
  body.app .add-document-form .input:focus,
  body.app .add-document-form textarea.input:focus{
    outline:none;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(0,143,150,.14);
  }
  body.app .add-document-form textarea.input{
    min-height:110px;
    resize:vertical;
    padding-top:12px;
  }
  body.app .add-document-actions{
    margin-top:4px;
  }
  body.app .add-document-submit{
    min-width:160px;
    min-height:44px;
    border-radius:10px;
    font-size:14.5px;
  }
  body.app .add-document-library .panel-head{
    padding:16px 18px 8px;
  }
  body.app .add-document-library .table-wrap{
    padding:0 8px 12px;
  }
  body.app .add-document-library .doc-lib-name{
    font-weight:600;
    color:var(--text);
  }
  body.app .add-document-library .col-action{
    width:170px;
    text-align:right;
    white-space:nowrap;
  }
  body.app .add-document-library .table-action-form{
    justify-content:flex-end;
  }
  body.app .add-document-library .doc-lib-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
  }
  body.app .school-year-panel .panel-head,
  body.app .add-document-panel .panel-head{
    padding:16px 18px 8px;
  }
  body.app .deadline-md-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  body.app .deadline-rule-hint{
    margin:4px 0 8px;
    font-size:12.5px;
  }
  body.app .compliance-doc-rule{
    display:block;
  }
  body.app .calendar-subhead{
    margin:18px 0 4px;
    font-size:15px;
    font-weight:650;
  }
  body.app .calendar-term-row{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:12px;
  }
  body.app .calendar-exam-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  @media (max-width:700px){
    body.app .deadline-md-row{grid-template-columns:1fr}
    body.app .calendar-term-row,
    body.app .calendar-exam-grid{grid-template-columns:1fr}
  }

  /* Compliance rectangular tabs — equal width across the bar */
  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:100%;
    max-width:100%;
    flex-wrap:nowrap;
  }
  body.app .compliance-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:1 1 0;
    min-width:0;
    padding:11px 14px;
    border-radius:10px;
    text-decoration:none;
    color:var(--brand-teal-deep);
    font-weight:700;
    font-size:14px;
    text-align:center;
    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);
  }

  body.app .compliance-doc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:10px;
    margin-top:8px;
  }
  body.app .compliance-doc-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 14px;
    border:1.5px solid rgba(0,143,150,.22);
    border-radius:10px;
    background:#fff;
    cursor:pointer;
  }
  body.app .compliance-doc-option:has(input:checked){
    border-color:var(--brand-teal);
    background:rgba(0,143,150,.06);
  }
  body.app .compliance-doc-option input{
    margin-top:3px;
  }
  body.app .compliance-doc-option-body{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  body.app .compliance-doc-source{
    font-size:12px;
  }
  body.app .compliance-teacher-pick{
    max-height:220px;
    overflow:auto;
    padding:4px 2px;
  }

  /* Assign Task — full-width form */
  body.app .assign-task-panel .panel-head{
    padding:16px 18px 8px;
  }
  body.app .assign-task-form{
    max-width:none;
    width:100%;
    padding:8px 18px 22px;
    box-sizing:border-box;
    gap:14px;
  }
  body.app .assign-task-form fieldset.field-label,
  body.app .assign-task-form .compliance-doc-pick,
  body.app .assign-task-form .compliance-scope-pick{
    width:100%;
    max-width:none;
    margin:0;
    padding:14px 16px 16px;
    border:1.5px solid rgba(0,143,150,.2);
    border-radius:12px;
    background:#fbfcfc;
    box-sizing:border-box;
  }
  body.app .assign-task-form legend{
    padding:0 6px;
    font-weight:700;
    color:var(--brand-teal-deep);
  }
  body.app .assign-task-form > .field-label{
    margin:0;
  }
  body.app .assign-task-form > .input,
  body.app .assign-task-form #assign-deadline{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    min-height:44px;
  }
  body.app .assign-deadline-multi-list{
    display:grid;
    gap:12px;
    margin-top:8px;
  }
  body.app .assign-deadline-row{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(160px,0.8fr);
    gap:12px;
    align-items:end;
  }
  body.app .assign-deadline-row-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  body.app .assign-deadline-row-copy strong{
    font-size:14.5px;
  }
  @media (max-width:700px){
    body.app .assign-deadline-row{grid-template-columns:1fr}
  }
  body.app .assign-task-form .compliance-doc-grid{
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    width:100%;
  }
  body.app .assign-task-form .compliance-scope-options{
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
    margin-top:6px;
  }
  body.app .assign-task-form #teacher-pick{
    width:100%;
    padding:12px 14px;
    border:1.5px solid rgba(0,143,150,.18);
    border-radius:12px;
    background:#fff;
    box-sizing:border-box;
  }
  body.app .assign-task-form .compliance-teacher-pick{
    max-height:260px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:8px 16px;
  }
  body.app .assign-task-actions{
    margin-top:4px;
  }
  body.app .assign-task-actions .btn{
    min-width:140px;
    min-height:44px;
  }
  body.app .teacher-card--compliance .teacher-card-stats{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:8px;
  }
  body.app .teacher-card--compliance .teacher-card-pct{
    font-weight:700;
    color:var(--brand-teal-deep);
    font-size:14px;
  }

  /* Compliance monitor — folder cards match Teacher files */
  body.app .compliance-monitor-head{
    align-items:center;
    padding:16px 18px 8px;
  }
  body.app .compliance-monitor-head h2{
    margin:0;
  }
  body.app .compliance-monitor-head .btn{
    flex-shrink:0;
    white-space:nowrap;
  }

  /* Teacher files — icon-only filter above folders */
  body.app .tf-filter-icons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:14px 18px 0;
  }
  body.app .tf-filter-ico{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--muted);
    text-decoration:none;
    background:transparent;
    border:1px solid transparent;
    transition:background .15s, color .15s, border-color .15s;
  }
  body.app .tf-filter-ico:hover{
    color:var(--brand-teal-deep);
    background:rgba(0,143,150,.08);
  }
  body.app .tf-filter-ico.is-active{
    color:var(--brand-teal);
    background:rgba(0,143,150,.12);
    border-color:rgba(0,143,150,.22);
  }
  body.app .tf-filter-ico svg{
    display:block;
  }

  /* Shared folder cards (Teacher files + Teacher compliance) */
  body.app .teacher-files-panel,
  body.app .compliance-monitor-panel{
    overflow:hidden;
    min-height:calc(100vh - 180px);
    display:flex;
    flex-direction:column;
  }
  body.app .folder-grid--teacher-files{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:16px;
    padding:20px;
    width:100%;
    box-sizing:border-box;
    flex:1 1 auto;
    align-content:start;
  }
  body.app .folder-card--teacher-file{
    min-height:160px;
    padding:18px 16px;
    gap:14px;
    background:linear-gradient(180deg,#fff 0%,#f8fcfb 100%);
    border:1.5px solid rgba(0,143,150,.18);
    border-radius:12px;
    transition:border-color .15s, box-shadow .15s;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    justify-content:flex-start;
    align-items:stretch;
  }
  body.app .folder-card--teacher-file:hover{
    border-color:var(--brand-teal);
    box-shadow:0 8px 22px rgba(0,143,150,.12);
  }
  body.app .folder-card--teacher-file .folder-card-top{
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
    margin:0;
    flex:0 0 auto;
  }
  body.app .folder-card--teacher-file .tf-folder-ico{
    width:40px;
    height:40px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(0,143,150,.1);
    color:var(--brand-teal);
  }
  body.app .folder-card--teacher-file .tf-folder-ico svg{
    display:block;
    width:22px;
    height:22px;
  }
  body.app .folder-card--teacher-file .folder-name{
    font-size:15px;
    font-weight:700;
    line-height:1.35;
    color:var(--text);
    word-break:break-word;
  }

  /* Teacher folder modal — files only (no table) */
  body.app .tf-file-list-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
  }
  body.app .tf-folder-drive-wrap{
    border:none;
    background:transparent;
  }
  body.app .tf-folder-file-grid{
    padding:4px 2px 8px;
  }
  body.app .tf-file-empty{
    margin:0;
    padding:64px 20px;
    text-align:center;
    font-size:14.5px;
  }
  body.app .tf-file-list{
    list-style:none;
    margin:0;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  body.app .tf-file-item{
    margin:0;
  }
  body.app .tf-file-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:10px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    font-size:14px;
  }
  body.app .tf-file-link:hover{
    background:rgba(0,143,150,.08);
    color:var(--brand-teal-deep);
  }
  body.app .tf-file-ico{
    width:36px;
    height:36px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(0,143,150,.1);
    color:var(--brand-teal);
  }
  body.app .tf-file-name{
    min-width:0;
    word-break:break-word;
  }
  body.app .tf-file-list-wrap--page{
    margin:0 16px 16px;
    flex:none;
    min-height:220px;
  }
  body.app .tf-file-meta{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  body.app .tf-file-date{
    font-size:12px;
    font-weight:500;
  }

  /* Individual compliance modal: cover MAIN AREA only (after sidebar), never the sidebar.
     Root cause of overlap: base .modal-overlay uses width:100vw + .modal--wide uses 96vw,
     so a “centered” dialog was still sized to the full viewport and spilled left. */
  body.app{
    --app-sidebar-width:248px;
    --app-topbar-height:64px;
    /* Dialogs cover full main column including topbar (sidebar stays clear). */
    --app-modal-top:0px;
    /* List modals: under search bar so Search stays visible. */
    --app-modal-list-top:calc(var(--app-topbar-height) + var(--page-padding-y) + 58px);
  }
  /* Keep search readable above list-modal dim region. */
  body.app .page > .toolbar.toolbar--between,
  body.app .page > .compliance-search-bar,
  body.app .register-page > .register-toolbar{
    position:relative;
    background:var(--bg);
  }
  body.app .modal-overlay.modal-overlay--main,
  body.app .modal-overlay{
    position:fixed;
    top:var(--app-modal-top);
    right:0;
    bottom:0;
    left:var(--app-sidebar-width);
    inset:var(--app-modal-top) 0 0 var(--app-sidebar-width);
    width:auto !important;
    max-width:none;
    height:auto !important;
    min-height:0 !important;
    margin:0;
    padding:16px 20px 20px;
    box-sizing:border-box;
    display:flex;
    /* Form dialogs: centered in the overlay. */
    align-items:center;
    justify-content:center;
    /* Above topbar (2050), below sidebar (2100) so dim covers header but not nav. */
    z-index:2080;
    /* Shared modal wash — soft gray dim + light blur (all modals). */
    background:rgba(26,43,46,.42);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  body.app .modal-overlay .modal{
    margin:auto;
    max-height:calc(100vh - var(--app-modal-top) - 32px);
    background:#fff;
    border-radius:16px;
    border:1px solid rgba(0,143,150,.16);
    box-shadow:0 24px 56px rgba(26,43,46,.18);
  }
  /* List modals (teacher folder / all compliance / etc.): below search, fill the pane. */
  body.app .modal-overlay--main:has(.individual-compliance-modal){
    top:var(--app-modal-list-top);
    inset:var(--app-modal-list-top) 0 0 var(--app-sidebar-width);
    align-items:stretch;
  }
  body.app .modal-overlay--main .individual-compliance-modal.modal,
  body.app .modal-overlay--main .individual-compliance-modal{
    width:100% !important;
    max-width:none !important;
    height:auto;
    max-height:none;
    margin:0 !important;
    padding:22px 24px 24px;
    flex:1 1 auto;
    align-self:stretch;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
  }
  body.app .individual-compliance-head{
    align-items:flex-start;
    margin-bottom:14px;
    flex-shrink:0;
  }
  body.app .individual-compliance-head h2{
    margin:0;
    font-size:1.15rem;
    color:var(--text);
  }
  body.app .individual-compliance-head .modal-intro{
    margin:6px 0 0;
  }
  body.app .individual-compliance-head .modal-close{
    text-decoration:none;
    display:inline-flex;
    line-height:1;
  }
  body.app .individual-compliance-table-wrap{
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:auto;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
  }
  body.app .individual-compliance-table{
    margin:0;
    width:100%;
  }
  body.app .individual-compliance-table thead th{
    background:#f7f9fa;
    color:var(--muted);
  }
  body.app .individual-compliance-empty{
    text-align:center;
    color:var(--muted);
    padding:48px 16px !important;
    border-bottom:none;
  }
  @media (max-width:640px){
    body.app .modal-overlay.modal-overlay--main,
    body.app .modal-overlay{
      left:0;
      top:var(--app-modal-top);
      inset:var(--app-modal-top) 0 0 0;
      width:auto !important;
      padding:12px;
    }
    body.app .modal-overlay--main:has(.individual-compliance-modal){
      top:var(--app-modal-list-top);
      inset:var(--app-modal-list-top) 0 0 0;
    }
    body.app .modal-overlay--main .individual-compliance-modal.modal,
    body.app .modal-overlay--main .individual-compliance-modal{
      width:100% !important;
      max-width:100% !important;
    }
  }

  body.app textarea.input{
    resize:vertical;
    min-height:84px;
    line-height:1.45;
  }

  @media (max-width:640px){
    body.app .compliance-tabs{
      flex-wrap:wrap;
    }
    body.app .compliance-tab{
      flex:1 1 calc(50% - 4px);
      font-size:13px;
      padding:10px 8px;
    }
  }
  
  /* 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; stay above main-area modals */
  body.app .sidebar{
    position:sticky;
    top:0;
    align-self:flex-start;
    flex-shrink:0;
    width:248px;
    height:100vh;
    max-height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    z-index:2100;
  }
  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,.18);
  }
  body.app .nav-link.logout{margin-top:0}

  body.app .topbar-dropdown{
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(17,24,39,.12);
  }
  body.app .topbar-dropdown--notif{width:min(340px,92vw)}
  body.app .topbar-dropdown-head{
    background:#f8fafb;
    padding:11px 14px;
  }
  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;
  }
  
  /* =========================================================
     35. FOLDER ACTIONS
     ========================================================= */
  /* 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;
  }
  
  body.app .kpi--approved-folder{
    position:relative;
  }
  body.app .disc-forms-ico{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--brand-teal);
    background:rgba(0,143,150,.1);
    border:1px solid rgba(0,143,150,.18);
    text-decoration:none;
    transition:background .15s, border-color .15s, color .15s;
  }
  body.app .disc-forms-ico:hover{
    background:rgba(0,143,150,.16);
    border-color:var(--brand-teal);
    color:var(--brand-teal-deep);
  }
  body.app .disc-forms-ico svg{display:block}
  body.app .kpi--approved-folder .disc-forms-ico.disc-forms-ico--on-kpi{
    position:absolute;
    right:10px;
    bottom:10px;
    width:42px;
    height:42px;
    color:#ffffff !important;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  body.app .kpi--approved-folder .disc-forms-ico.disc-forms-ico--on-kpi:hover{
    background:rgba(255,255,255,.15);
    color:#ffffff !important;
  }
  body.app .kpi--approved-folder .disc-forms-ico.disc-forms-ico--on-kpi svg,
  body.app .kpi--approved-folder .disc-forms-ico.disc-forms-ico--on-kpi svg path{
    width:22px;
    height:22px;
    stroke:#ffffff !important;
    color:#ffffff !important;
  }
  body.app .notice-mgmt-tabs{
    margin:12px 0 var(--space-section);
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  body.app .notice-management-panel{
    margin-top:0;
  }
  body.app .notice-mgmt-table-wrap{
    padding:16px 18px 20px;
  }
  body.app .notice-mgmt-table{
    width:100%;
  }
  body.app .notice-mgmt-table th,
  body.app .notice-mgmt-table td{
    vertical-align:top;
  }
  body.app .notice-mgmt-response{
    max-width:280px;
    white-space:pre-wrap;
    word-break:break-word;
    font-size:13px;
    line-height:1.4;
  }
  body.app .disc-forms-list-wrap{
    padding:0;
  }
  body.app .disc-forms-list{
    list-style:none;
    margin:0;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  body.app .disc-form-item{
    border:1px solid rgba(0,143,150,.16);
    border-radius:14px;
    padding:14px 16px;
    background:linear-gradient(180deg,#fff 0%,#f8fcfc 100%);
  }
  body.app .disc-form-item-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  body.app .disc-form-teacher{
    display:block;
    color:var(--brand-teal-deep);
    font-size:15px;
  }
  body.app .disc-form-title{
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
  }
  body.app .disc-form-body{
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    background:#e8f5f6;
    font-size:14px;
    line-height:1.45;
  }
  body.app .disc-form-body p{margin:0}
  body.app .disc-form-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
  }

  body.app .shared-drive-panel{
    margin-top:4px;
    min-height:320px;
  }
  body.app .shared-top-panel{
    padding:16px 18px 18px;
    margin-bottom:14px;
  }
  body.app .shared-top-head{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:12px;
  }
  body.app .shared-top-head h3{
    margin:0;
    font-size:1rem;
    color:var(--brand-teal-deep);
  }
  body.app .shared-top-head .muted{
    margin:0;
    font-size:13px;
  }
  body.app .shared-top-table td:first-child,
  body.app .shared-top-table th:first-child{
    width:40px;
    font-weight:700;
    color:var(--brand-teal-deep);
  }
  body.app .shared-drive-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:14px 18px 8px;
    border-bottom:1px solid var(--border);
  }
  body.app .shared-drive-filter-form{
    margin:0 0 0 auto;
  }
  body.app .shared-drive-filter{
    display:inline-flex;
    align-items:center;
    margin:0;
  }
  body.app .shared-drive-filter-select{
    min-width:150px;
    height:40px;
    padding:8px 36px 8px 12px;
    border-radius:10px;
    border:1.5px solid rgba(0,143,150,.22);
    background:#fff;
    color:var(--brand-teal-deep);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
  }
  body.app .shared-drive-filter-select:focus{
    outline:none;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(0,143,150,.12);
  }
  body.app .shared-drive-upload-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    border:none;
    background:var(--brand-teal);
    color:#fff;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,143,150,.28);
    transition:background .15s, transform .15s;
  }
  body.app .shared-drive-upload-btn:hover{
    background:var(--brand-teal-deep, #00737a);
  }
  body.app .shared-drive-upload-btn svg{display:block}
  body.app .shared-drive-hint{
    margin:0;
    font-size:13px;
    flex:1 1 220px;
  }
  body.app .shared-drive-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:56px 20px;
    text-align:center;
  }
  body.app .shared-drive-empty-ico{
    width:72px;
    height:72px;
    border-radius:18px;
    display:grid;
    place-items:center;
    color:var(--brand-teal);
    background:rgba(0,143,150,.1);
    margin-bottom:6px;
  }
  body.app .shared-drive-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:14px;
    padding:16px 18px 22px;
  }
  body.app .shared-drive-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px 12px 14px;
    border-radius:14px;
    border:1.5px solid rgba(0,143,150,.16);
    background:linear-gradient(180deg,#fff 0%,#f8fcfb 100%);
    min-height:210px;
    transition:border-color .15s, box-shadow .15s;
    overflow:visible;
  }
  body.app .shared-drive-card:hover{
    border-color:var(--brand-teal);
    box-shadow:0 8px 20px rgba(0,143,150,.1);
  }
  body.app .shared-drive-card-top{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:32px;
  }
  body.app .shared-drive-card-title{
    flex:1 1 auto;
    min-width:0;
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--brand-teal-deep);
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app .shared-drive-card-title:hover{text-decoration:underline}
  body.app .shared-drive-menu{
    position:relative;
    flex:0 0 auto;
  }
  body.app .shared-drive-dots{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:transparent;
    color:#5f6368;
    cursor:pointer;
    padding:0;
  }
  body.app .shared-drive-dots:hover,
  body.app .shared-drive-dots[aria-expanded="true"]{
    background:rgba(0,143,150,.12);
    color:var(--brand-teal-deep);
  }
  body.app .shared-drive-menu-pop{
    position:absolute;
    top:calc(100% + 4px);
    right:0;
    z-index:40;
    min-width:220px;
    padding:8px 0;
    border-radius:10px;
    background:#fff;
    border:1px solid #e3e7ea;
    box-shadow:0 8px 28px rgba(32,33,36,.18);
  }
  body.app .shared-drive-menu-pop[hidden]{display:none !important}
  body.app .shared-drive-menu-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border:none;
    background:transparent;
    color:#202124;
    font:inherit;
    font-size:14px;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
  }
  body.app .shared-drive-menu-item:hover{
    background:#f1f3f4;
  }
  body.app .shared-drive-menu-item--danger{color:#c5221f}
  body.app .shared-drive-menu-item--danger:hover{
    background:rgba(197,34,31,.08);
  }
  body.app .shared-drive-menu-ico{
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#5f6368;
    flex:0 0 auto;
  }
  body.app .shared-drive-menu-item--danger .shared-drive-menu-ico{color:#c5221f}
  body.app .shared-drive-menu-sep{
    height:1px;
    margin:6px 0;
    background:#e8eaed;
  }
  body.app .shared-drive-menu form{margin:0}
  body.app .shared-drive-card-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 auto;
    min-height:110px;
    border-radius:10px;
    background:rgba(0,143,150,.06);
    text-decoration:none;
  }
  body.app .shared-drive-card-ico{
    width:64px;
    height:64px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:var(--brand-teal);
    background:rgba(0,143,150,.12);
  }
  body.app .shared-drive-card-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:12px;
    min-height:24px;
  }
  body.app .shared-drive-card-meta-row .muted{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app .shared-drive-access-pill{
    flex:0 0 auto;
    font-size:11px;
    padding:3px 8px;
  }
  /* Editor copy workspace (teacher shared files) */
  body.app .shared-edit-panel{
    padding:18px 20px 22px;
  }
  body.app .shared-edit-hero{
    display:flex;
    align-items:center;
    gap:14px;
    margin:4px 0 16px;
    padding:14px 16px;
    border-radius:14px;
    border:1.5px solid rgba(0,143,150,.18);
    background:linear-gradient(145deg, #fff 0%, var(--brand-mint) 100%);
  }
  body.app .shared-edit-hero-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  body.app .shared-edit-hero-text strong{
    color:var(--brand-teal-deep);
    font-size:15px;
    word-break:break-word;
  }
  body.app .shared-edit-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:4px;
  }

  body.app .shared-info-modal{
    width:min(440px, 94vw);
    padding:0;
    overflow:hidden;
    border:1.5px solid rgba(0,143,150,.2);
    background:#fff;
    box-shadow:0 18px 40px rgba(0,107,114,.18);
  }
  body.app .shared-info-modal-head{
    padding:16px 18px 12px;
    margin:0;
    border-bottom:1px solid rgba(0,143,150,.12);
    background:#fff;
  }
  body.app .shared-info-modal-head h2{
    margin:0;
    font-size:1.05rem;
    font-weight:700;
    color:var(--brand-teal-deep);
    letter-spacing:.01em;
  }
  body.app .shared-file-info{
    padding:16px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:16px;
    background:transparent;
  }
  body.app .shared-file-info-hero{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:14px;
    border:1.5px solid rgba(0,143,150,.16);
    background:#f7fbfb;
  }
  body.app .shared-file-info-ico{
    width:52px;
    height:52px;
    border-radius:12px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(160deg, var(--brand-teal) 0%, var(--brand-teal-deep) 100%);
    border:1px solid rgba(0,107,114,.35);
    box-shadow:0 6px 14px rgba(0,143,150,.22);
  }
  body.app .shared-file-info-hero-text{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  body.app .shared-file-info-title{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    line-height:1.3;
    word-break:break-word;
  }
  body.app .shared-file-info-sub{
    font-size:12.5px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app .shared-file-info-hero .pill{
    flex:0 0 auto;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,143,150,.18);
    color:var(--brand-teal-deep);
    border:1px solid rgba(0,143,150,.28);
  }
  body.app .shared-file-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  body.app .shared-file-info-tile{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 12px 11px;
    border-radius:12px;
    background:#fff;
    border:1px solid rgba(0,143,150,.14);
    min-width:0;
  }
  body.app .shared-file-info-tile--wide{
    grid-column:1 / -1;
  }
  body.app .shared-file-info-label{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--brand-teal-dark);
    opacity:.8;
  }
  body.app .shared-file-info-tile strong{
    font-size:13.5px;
    font-weight:600;
    color:var(--brand-teal-deep);
    word-break:break-word;
    line-height:1.35;
  }
  /* Legacy row layout fallback */
  body.app .shared-file-info-row{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:10px;
    align-items:start;
    font-size:14px;
  }
  body.app .shared-file-info-row span{color:#5f6368}
  body.app .shared-file-info-row strong{
    font-weight:600;
    color:var(--brand-teal-deep);
    word-break:break-word;
  }
  @media (max-width:480px){
    body.app .shared-file-info-grid{grid-template-columns:1fr}
    body.app .shared-file-info-hero{flex-wrap:wrap}
  }
  body.app .shared-drive-card-meta,
  body.app .shared-drive-card-owner{
    font-size:12px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app .shared-drive-card-foot{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    padding-top:8px;
    border-top:1px solid #eef2f3;
  }
  body.app .shared-drive-access-form{margin:0}
  body.app .shared-drive-access{
    min-width:110px;
    padding:6px 10px;
    font-size:13px;
    height:auto;
  }
  body.app .shared-drive-actions{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  body.app .shared-drive-action-form{margin:0;display:inline-flex}
  body.app .shared-drive-action{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid transparent;
    background:transparent;
    color:var(--brand-teal-deep);
    text-decoration:none;
    cursor:pointer;
    padding:0;
  }
  body.app .shared-drive-action:hover{
    background:rgba(0,143,150,.1);
    border-color:rgba(0,143,150,.18);
  }
  body.app .shared-drive-action--danger:hover{
    background:rgba(220,38,38,.1);
    border-color:rgba(220,38,38,.2);
    color:#b91c1c;
  }
  body.app .shared-upload-form{
    padding:8px 20px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  body.app .shared-upload-modal{
    width:min(480px, 94vw);
  }
  body.app .shared-upload-modal-head{
    padding:18px 20px 8px;
  }
  body.app .shared-upload-modal-head h2{
    margin:0;
    font-size:1.2rem;
  }
  body.app .shared-upload-form .field-label{
    margin-top:10px;
    margin-bottom:6px;
    font-weight:600;
    color:var(--brand-teal-deep);
  }
  body.app .shared-upload-form .input,
  body.app .shared-upload-select,
  body.app .shared-upload-file{
    border-radius:12px;
    border:1px solid rgba(0,143,150,.22);
    padding:11px 12px;
  }
  body.app .shared-upload-form .input:focus,
  body.app .shared-upload-select:focus,
  body.app .shared-upload-file:focus{
    outline:none;
    border-color:var(--brand-teal);
    box-shadow:0 0 0 3px rgba(0,143,150,.14);
  }
  body.app .shared-upload-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
  }
  body.app .shared-drive-access-form{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0;
  }
  body.app .shared-drive-access-label{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    letter-spacing:.02em;
  }
  body.app .shared-drive-access-readonly{
    font-size:13px;
    font-weight:600;
    color:var(--brand-teal-deep);
  }

  /* 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}
  
/* Hide obsolete deco if present on other pages */
.login-page .login-deco{display:none}

@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}
  }

  /* Analytics */
  body.app .analytics-panel{padding:16px 18px 20px}
  body.app .analytics-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  body.app .analytics-intro{
    margin:0;
    flex:1 1 240px;
    font-size:13px;
  }
  body.app .analytics-filter-form{
    margin:0 0 0 auto;
  }
  body.app .analytics-top-shared-head{
    margin-top:18px;
  }
  body.app .analytics-panel .charts{margin:0}
  body.app .analytics-report-table thead th{
    background:rgba(0,143,150,.12);
    color:var(--brand-teal-deep);
    position:sticky;
    top:0;
    z-index:1;
  }
  body.app .analytics-report-table tbody tr:nth-child(even){
    background:#fafcfc;
  }
  body.app .analytics-report-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px;
    flex-shrink:0;
  }
  /* Analytics report modals: pin card to the top of the main pane. */
  body.app .modal-overlay--main:has(.analytics-report-modal){
    top:var(--app-modal-top);
    inset:var(--app-modal-top) 0 0 var(--app-sidebar-width);
    align-items:flex-start;
    justify-content:center;
    padding:16px 20px 20px;
  }
  body.app .modal-overlay--main .analytics-report-modal.modal,
  body.app .modal-overlay--main .analytics-report-modal{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    align-self:stretch;
    height:calc(100vh - var(--app-modal-top) - 36px) !important;
    max-height:calc(100vh - var(--app-modal-top) - 36px) !important;
    flex:none;
  }
  @media (max-width:640px){
    body.app .modal-overlay--main:has(.analytics-report-modal){
      inset:var(--app-modal-top) 0 0 0;
    }
  }
  /* —— Teacher compliance table —— */
  body.app .teacher-compliance-page{
    display:grid;
    gap:16px;
  }
  body.app .teacher-compliance-panel{
    border:1px solid rgba(0,143,150,.16);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  body.app .teacher-compliance-detail-head{
    padding:16px 18px 8px;
    align-items:flex-start;
  }
  body.app .teacher-compliance-detail-head h2{
    margin:0 0 4px;
    font-size:1.05rem;
  }
  body.app .teacher-compliance-detail-head .muted{
    margin:0;
    font-size:13px;
  }
  body.app .teacher-compliance-inline-upload{
    margin:0;
    display:inline-flex;
    align-items:center;
  }
  body.app .teacher-compliance-inline-upload .btn{
    cursor:pointer;
    margin:0;
  }
  body.app .teacher-compliance-table-wrap{
    padding:0;
    overflow:auto;
  }
  body.app .teacher-compliance-table{
    width:100%;
    margin:0;
    table-layout:fixed;
  }
  body.app .teacher-compliance-table thead th{
    background:#f7f9fa;
    color:var(--muted);
    font-weight:700;
    font-size:13px;
    padding:12px 16px;
    white-space:nowrap;
    vertical-align:middle;
  }
  body.app .teacher-compliance-table tbody td{
    padding:13px 16px;
    vertical-align:middle;
    font-size:14px;
  }
  body.app .teacher-compliance-table .th-req,
  body.app .teacher-compliance-table .td-req,
  body.app .teacher-compliance-table .th-file,
  body.app .teacher-compliance-table .td-file{
    width:38%;
  }
  body.app .teacher-compliance-table .th-deadline,
  body.app .teacher-compliance-table .td-deadline,
  body.app .teacher-compliance-table .th-submitted,
  body.app .teacher-compliance-table .td-submitted{
    width:18%;
    white-space:nowrap;
  }
  body.app .teacher-compliance-table .th-upload,
  body.app .teacher-compliance-table .td-upload,
  body.app .teacher-compliance-table .th-status,
  body.app .teacher-compliance-table .td-status,
  body.app .teacher-compliance-table .th-action,
  body.app .teacher-compliance-table .td-action{
    width:26%;
  }
  body.app .teacher-compliance-table .td-upload,
  body.app .teacher-compliance-table .td-action{
    text-align:left;
  }
  body.app .teacher-compliance-file-link{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.app .teacher-compliance-empty{
    text-align:center;
    color:var(--muted);
    padding:36px 16px !important;
    border-bottom:none;
  }
  @media (max-width:720px){
    body.app .teacher-compliance-table{
      table-layout:auto;
      min-width:560px;
    }
  }

  /* —— Profile (admin) —— */
  body.app .profile-page{
    display:grid;
    gap:16px;
    max-width:760px;
  }
  body.app .profile-panel{
    border:1px solid rgba(0,143,150,.16);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    background:#fff;
    overflow:hidden;
  }
  body.app .profile-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px 0;
    border:none;
  }
  body.app .profile-panel-head h2{
    margin:0 0 4px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--text);
  }
  body.app .profile-panel-head .muted{
    margin:0;
    font-size:13px;
  }
  body.app .profile-hero{
    display:flex;
    align-items:center;
    gap:16px;
    margin:16px 20px 0;
    padding:18px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(0,143,150,.12), rgba(0,143,150,.04));
    border:1px solid rgba(0,143,150,.14);
  }
  body.app .profile-avatar{
    width:68px;
    height:68px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0;
    background:var(--brand-mint);
    border:2px solid rgba(0,143,150,.35);
    color:var(--brand-teal-deep);
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:.02em;
  }
  body.app .profile-hero-copy{min-width:0}
  body.app .profile-name{
    margin:0 0 4px;
    font-size:1.2rem;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
    word-break:break-word;
  }
  body.app .profile-email{
    margin:0 0 10px;
    font-size:13px;
    color:var(--muted);
    word-break:break-word;
  }
  body.app .profile-role-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,143,150,.12);
    border:1px solid rgba(0,143,150,.2);
    color:var(--brand-teal-deep);
    font-size:12px;
    font-weight:600;
  }
  body.app .profile-role-badge--inline{
    margin-top:0;
  }
  body.app .profile-meta{
    margin:0;
    padding:6px 20px 0;
  }
  body.app .profile-meta-row{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:12px;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #eef2f3;
  }
  body.app .profile-meta-row:last-child{border-bottom:none}
  body.app .profile-meta-row dt{
    margin:0;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
  }
  body.app .profile-meta-row dd{
    margin:0;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    word-break:break-word;
  }
  body.app .profile-panel-footer{
    display:flex;
    justify-content:flex-end;
    padding:8px 20px 18px;
  }
  body.app .confirm-modal{
    width:min(420px,100%);
    max-width:420px;
    padding:26px 26px 24px;
  }
  body.app .confirm-modal .modal-head{
    margin-bottom:18px;
  }
  body.app .confirm-modal .modal-head h2{
    font-size:1.25rem;
    font-weight:700;
    color:var(--login-ink,#1a2b2e);
  }
  body.app .confirm-modal-text{
    margin:0 0 18px;
    color:var(--muted);
    font-size:14px;
    font-weight:500;
    line-height:1.45;
  }
  body.app .confirm-modal-actions{
    gap:10px;
    margin:0;
  }
  body.app .confirm-modal .btn,
  body.app .modal .btn{
    border-radius:12px;
    border:1.5px solid rgba(0,143,150,.28);
    background:#fff;
    color:var(--login-ink,#1a2b2e);
    font-weight:600;
    box-shadow:none;
  }
  body.app .confirm-modal .btn:hover,
  body.app .modal .btn:hover{
    background:#f4fbfb;
    border-color:rgba(0,143,150,.45);
  }
  body.app .confirm-modal .btn-primary,
  body.app .modal .btn-primary{
    background:var(--brand-teal);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 18px rgba(0,143,150,.22);
  }
  body.app .confirm-modal .btn-primary:hover,
  body.app .modal .btn-primary:hover{
    background:var(--brand-teal-dark);
    color:#fff;
    box-shadow:0 10px 22px rgba(0,120,128,.28);
  }
  body.app .profile-logout-btn{
    color:#dc2626;
    border-color:rgba(220,38,38,.28);
  }
  body.app .profile-logout-btn:hover{
    background:#fef2f2;
    border-color:rgba(220,38,38,.4);
    color:#b91c1c;
  }
  body.app .form--profile{
    display:grid;
    gap:14px;
    padding:14px 20px 20px;
    max-width:none;
  }
  body.app .form--profile .field-label{
    font-weight:600;
    color:var(--muted);
  }
  body.app .profile-password-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  body.app .password-field--profile{
    display:flex;
    align-items:center;
    gap:8px;
    max-width:none;
    width:100%;
  }
  body.app .password-field--profile .input--password{
    flex:1;
    min-width:0;
    height:42px;
    font-family:var(--font-sans);
    font-size:14px;
  }
  body.app .password-field--profile .password-toggle{
    flex-shrink:0;
    min-width:42px;
    height:42px;
    border-radius:8px;
  }
  body.app .profile-password-hint{
    margin:0;
    font-size:12px;
  }
  body.app .profile-security-actions{
    margin-top:4px;
    padding-top:4px;
  }
  @media (max-width:720px){
    body.app .profile-meta-row{
      grid-template-columns:1fr;
      gap:4px;
      padding:12px 0;
    }
    body.app .profile-password-grid{grid-template-columns:1fr}
    body.app .profile-panel-footer{justify-content:stretch}
    body.app .profile-logout-btn{width:100%}
  }
  /* Teacher profile (shared classes) */
  body.app .profile-identity{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px;
    border:1px solid rgba(0,143,150,.16);
    box-shadow:var(--shadow-card);
  }
  body.app .profile-identity-main,
  body.app .profile-identity-copy{min-width:0}
  body.app .profile-identity-main{display:flex;align-items:center;gap:16px}
  body.app .profile-security{
    border:1px solid rgba(0,143,150,.16);
    box-shadow:var(--shadow-card);
  }
  body.app .profile-security-head{align-items:flex-start;padding-bottom:4px}
  body.app .profile-security-head h2{margin:0 0 4px;color:var(--text)}
  body.app .profile-security-intro{margin:0;font-size:13px}
  body.app .profile-identity-actions{flex-shrink:0}
  @media (max-width:720px){
    body.app .profile-identity{flex-direction:column;align-items:flex-start}
    body.app .profile-identity-actions,
    body.app .profile-identity-actions .btn{width:100%}
  }

  @media print{
    body.app .sidebar,
    body.app .topbar,
    body.app .analytics-panel,
    body.app .analytics-report-actions,
    body.app .flash{display:none !important}
    body.app .modal-overlay.modal-overlay--main{
      position:static !important;
      inset:auto !important;
      left:0 !important;
      top:0 !important;
      padding:0 !important;
      background:#fff !important;
      display:block !important;
    }
    body.app .modal-overlay--main .individual-compliance-modal{
      box-shadow:none !important;
      border:none !important;
      max-height:none !important;
      height:auto !important;
    }
  }

  /* Status Reports */
  body.app .status-report-tabs{margin-bottom:14px}
  body.app .status-report-panel{padding:16px 18px 20px}
  body.app .status-report-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  body.app .status-report-filters{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 0 auto;
  }
  body.app .status-report-export{
    display:inline-flex;
    gap:8px;
    align-items:center;
  }
  body.app .status-report-note{margin:0 0 12px;font-size:13px}
  body.app .status-report-subhead{
    margin:18px 0 10px;
    font-size:1rem;
    color:var(--brand-teal-deep);
  }
  body.app .status-report-detail{
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
  }
  body.app .status-report-detail-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  body.app .status-report-detail-head h3{margin:0;font-size:1.05rem}
  body.app .status-report-summary-kpis{
    margin:0 0 14px;
    width:100%;
    display:grid;
    gap:14px;
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
  body.app .status-report-summary-kpis .kpi{
    min-height:118px;
    padding:22px 16px;
    width:100%;
    box-sizing:border-box;
  }
  body.app .status-report-summary-kpis .kpi-label{
    font-size:13px;
    line-height:1.3;
  }
  body.app .status-report-summary-kpis .kpi-value{
    font-size:1.85rem;
    margin-top:8px;
  }
  @media (max-width:1100px){
    body.app .status-report-summary-kpis{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width:640px){
    body.app .status-report-summary-kpis{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }
  body.app .status-report-print-head{display:none}
  body.app .print-only{display:none}

  @media print{
    body.app .sidebar,
    body.app .topbar,
    body.app .status-report-tabs,
    body.app .no-print,
    body.app .flash{display:none !important}
    body.app .shell,
    body.app .page,
    body.app .main{display:block !important;width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;box-shadow:none !important;background:#fff !important}
    body.app .status-report-panel{
      border:none !important;
      box-shadow:none !important;
      padding:0 !important;
    }
    body.app .status-report-print-head,
    body.app .print-only{display:block !important}
    body.app .status-report-print-head h2{margin:0 0 4px;font-size:1.2rem}
    body.app .status-report-print-head p{margin:0 0 14px;font-size:12px;color:#444}
    body.app .table{font-size:11px}
    body.app .kpi{break-inside:avoid}
  }