/* =========================================================
   Tracked — responsive layer (phones → desktop)
   Preserves existing colors/layout; prevents page overflow.
   Loaded after mockup-skin.css.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,
body.app{
  max-width:100%;
  overflow-x:hidden;
}
body.app .shell,
body.app .main,
body.app .page,
body.app .register-page{
  max-width:100%;
  min-width:0;
}
body.app .page img:not(.logo-img):not(.official-dr-sigimg):not(.nod-digital-sigimg):not(.nod-iap-sigimg):not(.official-dr-bg),
body.app .modal img:not(.logo-img){
  max-width:100%;
  height:auto;
}
body.app canvas{
  max-width:100%;
}

/* Mobile nav controls (hidden on desktop) */
body.app .topbar-nav-toggle,
body.app .sidebar-backdrop{
  display:none;
}

/* Touch-friendly defaults where controls are small */
@media (hover:none) and (pointer:coarse){
  body.app .btn,
  body.app .register-primary-btn,
  body.app .register-icon-btn,
  body.app .nav-link,
  body.app .compliance-tab,
  body.app .notice-mgmt-tab,
  body.app .input,
  body.app select.input,
  body.app .shared-drive-filter-select,
  body.app .sy-combo-trigger{
    min-height:44px;
  }
  body.app .register-icon-btn{
    min-width:44px;
  }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1366px){
  body.app{
    --page-padding-x:20px;
    --search-bar-max:360px;
  }
}

/* ---------- Tablet landscape / narrow laptop ---------- */
@media (max-width:1100px){
  body.app{
    --page-padding-x:18px;
    --search-bar-min:160px;
    --search-bar-max:280px;
  }
  body.app .topbar{
    flex-wrap:wrap;
    gap:10px 12px;
    row-gap:10px;
  }
  body.app .topbar-heading{
    flex:1 1 160px;
    min-width:0;
  }
  body.app .topbar-actions{
    flex:1 1 auto;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
    max-width:100%;
  }
  body.app .topbar-period-filters,
  body.app .topbar-search-slot{
    max-width:100%;
  }
  body.app .kpis,
  body.app .stat-boxes,
  body.app .grid.kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.app .dashboard-grid,
  body.app .dashboard-teacher-row,
  body.app .dashboard-teacher-row--req-cal,
  body.app .compliance-split,
  body.app .charts--dashboard,
  body.app .charts--analytics{
    grid-template-columns:1fr !important;
  }
}

/* ---------- Tablet / drawer sidebar ---------- */
@media (max-width:980px){
  body.app{
    --app-sidebar-width:min(280px, 86vw);
    --page-padding-x:16px;
    --page-padding-y:14px;
  }

  body.app .shell{
    padding-left:0 !important;
  }

  body.app .topbar-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border:1px solid rgba(var(--primary-rgb),.18);
    border-radius:10px;
    background:#fff;
    color:var(--brand-teal-deep, #084a50);
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 1px 2px rgba(27,44,48,.06);
  }
  body.app .topbar-nav-toggle:hover,
  body.app .topbar-nav-toggle:focus-visible{
    background:var(--primary-light, #e7f2f3);
    outline:none;
  }
  body.app .topbar-nav-toggle svg{
    width:22px;
    height:22px;
    display:block;
  }

  body.app .topbar{
    gap:10px;
  }
  body.app .topbar-heading{
    order:2;
    flex:1 1 auto;
  }
  body.app .topbar-nav-toggle{
    order:1;
  }
  body.app .topbar-actions{
    order:3;
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  /* Off-canvas sidebar */
  body.app .sidebar{
    position:fixed !important;
    top:0;
    left:0;
    bottom:0;
    width:var(--app-sidebar-width) !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    z-index:2300;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:none;
    pointer-events:none;
  }
  body.app.nav-open .sidebar{
    transform:translateX(0);
    pointer-events:auto;
    box-shadow:8px 0 28px rgba(15,61,66,.28);
  }
  body.app .sidebar .nav{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    max-height:none;
  }

  body.app .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:2250;
    background:rgba(26,43,46,.45);
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
  }
  body.app.nav-open .sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.app.nav-open{
    overflow:hidden;
  }

  /* Modals cover full viewport when sidebar is a drawer */
  body.app .modal-overlay.modal-overlay--main,
  body.app .modal-overlay{
    left:0 !important;
    inset:var(--app-modal-top, 0px) 0 0 0 !important;
    width:auto !important;
    padding:12px !important;
  }
  body.app .modal-overlay--main:has(.individual-compliance-modal),
  body.app .modal-overlay--main:has(.analytics-report-modal){
    left:0 !important;
    inset:var(--app-modal-list-top, 64px) 0 0 0 !important;
  }
  body.app .modal-overlay .modal,
  body.app .modal{
    width:min(100%, 720px) !important;
    max-width:100% !important;
    max-height:min(92dvh, calc(100vh - 24px)) !important;
  }
  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 .register-toolbar,
  body.app .notice-mgmt-panel-tools,
  body.app .teacher-files-tools,
  body.app .al-toolbar,
  body.app .al-toolbar-right,
  body.app .panel-head--row,
  body.app .compliance-search-bar,
  body.app .toolbar.toolbar--between{
    flex-wrap:wrap;
    gap:10px;
  }
  body.app .register-panel-actions,
  body.app .notice-mgmt-panel-tools,
  body.app .topbar-period-filters{
    width:100%;
    max-width:100%;
  }
  body.app .search-form.register-search,
  body.app .topbar-search-slot .search-form,
  body.app .notice-mgmt-panel-tools .search-form{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  body.app .search-form .search,
  body.app .topbar-search-slot .search{
    width:100%;
    max-width:100%;
  }
  body.app .shared-drive-filter,
  body.app .sy-combo,
  body.app .page-period-filters .shared-drive-filter-select,
  body.app .page-period-filters .sy-combo-trigger{
    min-width:0;
    max-width:100%;
  }

  body.app .teacher-card-grid{
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }

  /* Contained table scroll — never the whole page */
  body.app .table-wrap,
  body.app .table-wrap--register,
  body.app .table-wrap--scroll,
  body.app .notice-mgmt-table-wrap,
  body.app .nod-review-table-wrap,
  body.app .add-document-library .table-wrap,
  body.app .compliance-split-folders .table-wrap,
  body.app .compliance-split-detail .table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* School calendar: fit width instead of forcing 560px inner scroll */
@media (max-width:700px){
  body.app .school-cal-board{
    overflow-x:hidden !important;
    max-width:100%;
  }
  body.app .school-cal-dow,
  body.app .school-cal-grid{
    min-width:0 !important;
    width:100%;
    gap:3px !important;
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  }
  body.app .school-cal-grid{
    grid-auto-rows:minmax(48px, 1fr) !important;
  }
  body.app .school-cal-cell{
    min-width:0 !important;
    padding:3px 2px !important;
    border-radius:8px !important;
  }
  body.app .school-cal-num{
    min-width:18px !important;
    height:18px !important;
    font-size:10px !important;
  }
  body.app .school-cal-chip{
    font-size:8px !important;
    padding:1px 3px !important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.app .school-cal-dow span{
    font-size:9px !important;
    letter-spacing:0 !important;
  }
}

/* ---------- Large phone / small tablet ---------- */
@media (max-width:768px){
  body.app{
    --page-padding-x:14px;
    --control-h:40px;
    --type-title-size:1.25rem;
  }
  body.app .topbar-title{
    font-size:1.2rem;
    line-height:1.25;
  }
  body.app .topbar-subtitle{
    font-size:.8rem;
  }
  body.app .topbar-actions{
    gap:8px;
  }
  body.app .topbar-period-filters{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body.app .topbar-period-filters .shared-drive-filter,
  body.app .topbar-period-filters .sy-combo{
    width:100%;
    min-width:0;
    max-width:none;
  }
  body.app .topbar-period-filters .shared-drive-filter-select,
  body.app .topbar-period-filters .sy-combo-trigger{
    width:100%;
    min-width:0;
    max-width:none;
  }
  body.app .topbar-dropdown,
  body.app .topbar-dropdown--notif{
    width:min(360px, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    right:8px;
    left:auto;
  }
  body.app .kpis,
  body.app .stat-boxes,
  body.app .grid.kpis{
    gap:10px;
  }
  body.app .form-row-2,
  body.app .form--disc .form-row-2,
  body.app .nod-digital-meta,
  body.app .nod-digital-plan{
    grid-template-columns:1fr !important;
  }
  body.app .folder-grid,
  body.app .files-grid,
  body.app .shared-drive-grid{
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)) !important;
  }
  body.app .chart-canvas-wrap,
  body.app .chart-canvas-wrap--vbar,
  body.app .chart-canvas-wrap--trend{
    height:220px;
  }
}

/* ---------- Phone: stack tables into cards ---------- */
@media (max-width:640px){
  body.app{
    --page-padding-x:12px;
    --page-padding-y:12px;
  }

  body.app .kpis,
  body.app .stat-boxes,
  body.app .grid.kpis,
  body.app .grid.kpis.kpis--summary,
  body.app .grid.kpis.kpis--teacher-lite{
    grid-template-columns:1fr !important;
  }
  /* Keep 2-up when there are many compact KPI tiles */
  body.app .kpis:has(> :nth-child(3)),
  body.app .stat-boxes:has(> :nth-child(3)),
  body.app .grid.kpis:has(> :nth-child(3)){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.app .compliance-tabs,
  body.app .notice-mgmt-tabs,
  body.app .notif-tabs{
    flex-wrap:wrap;
    gap:6px;
  }
  body.app .compliance-tab,
  body.app .notice-mgmt-tab{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    text-align:center;
  }

  body.app .btn,
  body.app .register-primary-btn,
  body.app .modal-btn{
    min-height:44px;
  }
  body.app .input,
  body.app select,
  body.app textarea.input,
  body.app .shared-drive-filter-select,
  body.app .sy-combo-trigger,
  body.app .register-sort-select{
    min-height:44px;
    font-size:16px; /* avoid iOS zoom */
  }

  body.app .modal-overlay .modal,
  body.app .modal{
    border-radius:14px !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.app .modal-head,
  body.app .modal-body,
  body.app .modal-actions{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body.app .modal-actions{
    flex-wrap:wrap;
    gap:8px;
  }
  body.app .modal-actions .btn,
  body.app .modal-actions .modal-btn{
    flex:1 1 auto;
    min-width:min(100%, 140px);
  }

  /* Card-style tables on small screens */
  body.app .table.table--stack-cards,
  body.app .table.notice-mgmt-table,
  body.app .table.table--register,
  body.app .table.table--dashboard-overview,
  body.app .table.table--dashboard,
  body.app .table.teacher-compliance-table,
  body.app .table.individual-compliance-table,
  body.app .table.activity-log-table,
  body.app .table.compliance-folder-table,
  body.app table.al-table{
    display:block;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:auto !important;
    border:0;
  }
  body.app .activity-log-table-wrap,
  body.app .notice-mgmt-table-wrap,
  body.app .table-wrap--register,
  body.app .table-wrap--scroll,
  body.app .teacher-compliance-table-wrap{
    overflow-x:visible !important;
    min-width:0 !important;
  }
  body.app .activity-log-table tbody td,
  body.app .activity-log-table--activity tbody td,
  body.app .activity-log-table--audit tbody td{
    width:auto !important;
  }
  body.app .table.table--stack-cards thead,
  body.app .table.notice-mgmt-table thead,
  body.app .table.table--register thead,
  body.app .table.table--dashboard-overview thead,
  body.app .table.table--dashboard thead,
  body.app .table.teacher-compliance-table thead,
  body.app .table.individual-compliance-table thead,
  body.app .table.activity-log-table thead,
  body.app .table.compliance-folder-table thead,
  body.app table.al-table thead{
    display:none;
  }
  body.app .table.table--stack-cards tbody,
  body.app .table.notice-mgmt-table tbody,
  body.app .table.table--register tbody,
  body.app .table.table--dashboard-overview tbody,
  body.app .table.table--dashboard tbody,
  body.app .table.teacher-compliance-table tbody,
  body.app .table.individual-compliance-table tbody,
  body.app .table.activity-log-table tbody,
  body.app .table.compliance-folder-table tbody,
  body.app table.al-table tbody{
    display:block;
    width:100%;
  }
  body.app .table.table--stack-cards tbody tr,
  body.app .table.notice-mgmt-table tbody tr,
  body.app .table.table--register tbody tr,
  body.app .table.table--dashboard-overview tbody tr,
  body.app .table.table--dashboard tbody tr,
  body.app .table.teacher-compliance-table tbody tr,
  body.app .table.individual-compliance-table tbody tr,
  body.app .table.activity-log-table tbody tr,
  body.app .table.compliance-folder-table tbody tr,
  body.app table.al-table tbody tr{
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:10px 12px;
    border:1px solid var(--border, #d4dee0);
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(27,44,48,.05);
  }
  body.app .table.table--stack-cards tbody tr.is-empty-row,
  body.app .table.notice-mgmt-table tbody tr.is-empty-row,
  body.app .table.table--register tbody tr.is-empty-row{
    padding:16px;
  }
  body.app .table.table--stack-cards tbody td,
  body.app .table.notice-mgmt-table tbody td,
  body.app .table.table--register tbody td,
  body.app .table.table--dashboard-overview tbody td,
  body.app .table.table--dashboard tbody td,
  body.app .table.teacher-compliance-table tbody td,
  body.app .table.individual-compliance-table tbody td,
  body.app .table.activity-log-table tbody td,
  body.app .table.compliance-folder-table tbody td,
  body.app table.al-table tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:8px 0 !important;
    border:0 !important;
    border-bottom:1px dashed rgba(var(--primary-rgb),.12) !important;
    white-space:normal !important;
    text-align:right;
    min-width:0;
  }
  body.app .table.table--stack-cards tbody td:last-child,
  body.app .table.notice-mgmt-table tbody td:last-child,
  body.app .table.table--register tbody td:last-child,
  body.app .table.table--dashboard-overview tbody td:last-child,
  body.app .table.table--dashboard tbody td:last-child,
  body.app .table.teacher-compliance-table tbody td:last-child,
  body.app .table.individual-compliance-table tbody td:last-child,
  body.app .table.activity-log-table tbody td:last-child,
  body.app .table.compliance-folder-table tbody td:last-child,
  body.app table.al-table tbody td:last-child{
    border-bottom:0 !important;
  }
  body.app .table.table--stack-cards tbody td::before,
  body.app .table.notice-mgmt-table tbody td::before,
  body.app .table.table--register tbody td::before,
  body.app .table.table--dashboard-overview tbody td::before,
  body.app .table.table--dashboard tbody td::before,
  body.app .table.teacher-compliance-table tbody td::before,
  body.app .table.individual-compliance-table tbody td::before,
  body.app .table.activity-log-table tbody td::before,
  body.app .table.compliance-folder-table tbody td::before,
  body.app table.al-table tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;
    max-width:46%;
    text-align:left;
    font-size:12px;
    font-weight:700;
    color:var(--muted, #5c6c71);
    text-transform:none;
    letter-spacing:0;
  }
  body.app .table.table--stack-cards tbody td:not([data-label])::before,
  body.app .table.notice-mgmt-table tbody td:not([data-label])::before,
  body.app .table.table--register tbody td:not([data-label])::before,
  body.app .table.table--dashboard-overview tbody td:not([data-label])::before,
  body.app .table.table--dashboard tbody td:not([data-label])::before,
  body.app .table.teacher-compliance-table tbody td:not([data-label])::before,
  body.app .table.individual-compliance-table tbody td:not([data-label])::before,
  body.app .table.activity-log-table tbody td:not([data-label])::before,
  body.app .table.compliance-folder-table tbody td:not([data-label])::before,
  body.app table.al-table tbody td:not([data-label])::before{
    display:none;
  }
  body.app .table.table--stack-cards tbody td > *,
  body.app .table.notice-mgmt-table tbody td > *,
  body.app .table.table--register tbody td > *,
  body.app .table.teacher-compliance-table tbody td > *,
  body.app .table.individual-compliance-table tbody td > *{
    min-width:0;
  }
  body.app .table .td-actions,
  body.app .table .col-action,
  body.app .table td.col-action{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  body.app .empty-state{
    width:100%;
    text-align:center;
  }

  body.app .dashboard-submissions .table-wrap--scroll,
  body.app .register-panel .table-wrap--register,
  body.app .notice-mgmt-table-wrap{
    overflow-x:visible;
  }

  body.app .nod-digital-screen,
  body.app .nod-review-page,
  body.app .official-dr-page{
    max-width:100%;
  }
  body.app .official-dr-page{
    overflow-x:auto;
  }
}

/* ---------- Compact phones ---------- */
@media (max-width:430px){
  body.app{
    --page-padding-x:10px;
  }
  body.app .topbar-title{
    font-size:1.1rem;
  }
  body.app .topbar-period-filters{
    grid-template-columns:1fr;
  }
  body.app .kpis:has(> :nth-child(3)),
  body.app .stat-boxes:has(> :nth-child(3)),
  body.app .grid.kpis:has(> :nth-child(3)){
    grid-template-columns:1fr !important;
  }
  body.app .compliance-tab,
  body.app .notice-mgmt-tab{
    flex:1 1 100%;
  }
  body.app .topbar-user-controls{
    margin-left:auto;
  }
  body.app .topbar-search-slot{
    width:100%;
  }
}

@media (max-width:375px){
  body.app .topbar-nav-toggle{
    width:40px;
    height:40px;
  }
  body.app .kpi-value,
  body.app .stat-box .stat-value{
    font-size:1.35rem;
  }
  body.app .register-icon-btn{
    width:40px;
    height:40px;
  }
}

@media (max-width:320px){
  body.app{
    --page-padding-x:8px;
  }
  body.app .topbar-subtitle{display:none}
  body.app .btn,
  body.app .modal-btn{
    font-size:13px;
    padding-left:10px;
    padding-right:10px;
  }
}

/* Desktop restore: ensure drawer styles do not leak */
@media (min-width:981px){
  body.app .topbar-nav-toggle,
  body.app .sidebar-backdrop{
    display:none !important;
  }
  body.app.nav-open{
    overflow:auto;
  }
  body.app .sidebar{
    transform:none !important;
    pointer-events:auto !important;
  }
}

/* ---------- PWA / standalone (minimal; no redesign) ---------- */
/* Install Tracked + Log Out = same solid fill as calendar Edit (active). */
body.app .sidebar-footer button.nav-link.pwa-install-btn,
body.app .sidebar-footer a.nav-link.logout,
body.app .sidebar-footer .nav-link.pwa-install-btn,
body.app .sidebar-footer .nav-link.logout{
  width:100%;
  margin:0 0 6px;
  cursor:pointer;
  font:inherit;
  text-align:left;
  -webkit-appearance:none;
  appearance:none;
  background:#042f33 !important;
  background-color:#042f33 !important;
  border:1.5px solid #042f33 !important;
  color:#fff !important;
  opacity:1 !important;
  box-shadow:none !important;
}
body.app .sidebar-footer button.nav-link.pwa-install-btn:hover,
body.app .sidebar-footer button.nav-link.pwa-install-btn:focus-visible,
body.app .sidebar-footer a.nav-link.logout:hover,
body.app .sidebar-footer a.nav-link.logout:focus-visible,
body.app .sidebar-footer .nav-link.pwa-install-btn:hover,
body.app .sidebar-footer .nav-link.pwa-install-btn:focus-visible,
body.app .sidebar-footer .nav-link.logout:hover,
body.app .sidebar-footer .nav-link.logout:focus-visible{
  background:#031f22 !important;
  background-color:#031f22 !important;
  border-color:#031f22 !important;
  color:#fff !important;
  opacity:1 !important;
}
body.app .nav-link.pwa-install-btn[hidden]{
  display:none !important;
}
body.app .sidebar-footer .nav-link.logout{
  margin-bottom:0;
}

body.login-page .login-pwa-install{
  position:fixed;
  right:max(12px, env(safe-area-inset-right, 0px));
  bottom:max(12px, env(safe-area-inset-bottom, 0px));
  z-index:40;
  border:1px solid rgba(8,74,80,.28);
  background:rgba(255,255,255,.94);
  color:var(--active-color, #084a50);
  font:600 13px/1.2 Poppins, sans-serif;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer;
}
body.login-page .login-pwa-install[hidden]{
  display:none !important;
}
body.login-page .login-pwa-install:hover,
body.login-page .login-pwa-install:focus-visible{
  background:#fff;
  border-color:rgba(8,74,80,.45);
}

@media (display-mode: standalone){
  body.app,
  body.login-page{
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}

/* ===== LOGIN BACKGROUND (restored from previous design) ===== */
/* Source: 10-06-2026\tracked-system assets/css/mockup-skin.css, LOGIN REDESIGN block
   (page background + .login-backdrop + .login-bg-shape--left/--right + their <=860px / <=480px width rules).
   Background ONLY: no .login-frame / card / input / button / padding rules are restyled here.
   NEW login.php has no .login-bg-shape spans, so the two side shapes are drawn with
   .login-backdrop::before (left) and ::after (right). The backdrop stays fixed at z-index 0,
   behind .login-frame (z-index 1), and clips its children (no horizontal scroll). */
body.login-page{
  background:linear-gradient(180deg,#eef7f5 0%,#e7f3f0 100%);
  overflow-x:hidden;
}
body.login-page .login-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,.55), transparent 70%);
}
body.login-page .login-backdrop::before,
body.login-page .login-backdrop::after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  width:min(40vw,560px);
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}
body.login-page .login-backdrop::before{
  left:0;
  background-position:left center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 900' preserveAspectRatio='xMinYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23cfe9e4'/%3E%3Cstop offset='1' stop-color='%23b9ded7'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235faea6'/%3E%3Cstop offset='1' stop-color='%230d6a72'/%3E%3C/linearGradient%3E %3Cpattern id='d' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='1.7' fill='%230d6a72' fill-opacity='.22'/%3E%3C/pattern%3E %3C/defs%3E %3Cpath d='M0 0H318C392 86 352 196 270 268C186 342 214 452 306 522C398 592 372 724 262 806C200 852 116 884 0 900Z' fill='url(%23a)'/%3E %3Cpath d='M0 372C96 352 178 414 186 506C194 598 122 656 142 738C158 804 118 862 0 900Z' fill='url(%23b)' fill-opacity='.30'/%3E %3Cpath d='M-20 150C170 214 130 414 270 468S436 700 310 920' fill='none' stroke='%230d6a72' stroke-opacity='.22' stroke-width='2'/%3E %3Crect x='344' y='84' width='128' height='104' fill='url(%23d)'/%3E %3Crect x='36' y='96' width='96' height='80' fill='url(%23d)'/%3E %3C/svg%3E");
}
body.login-page .login-backdrop::after{
  right:0;
  background-position:right center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 900' preserveAspectRatio='xMaxYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b9ded7'/%3E%3Cstop offset='1' stop-color='%23d3ebe6'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d6a72'/%3E%3Cstop offset='1' stop-color='%235faea6'/%3E%3C/linearGradient%3E %3Cpattern id='d' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='1.7' fill='%230d6a72' fill-opacity='.22'/%3E%3C/pattern%3E %3C/defs%3E %3Cpath d='M560 0V900H226C286 822 356 760 326 660C296 560 196 520 226 410C256 300 366 280 356 170C348 90 296 40 266 0Z' fill='url(%23a)'/%3E %3Cpath d='M560 0V430C478 440 416 390 426 306C436 222 506 192 486 112C476 62 506 22 516 0Z' fill='url(%23b)' fill-opacity='.30'/%3E %3Cpath d='M580 110C410 176 452 362 326 436S136 650 262 920' fill='none' stroke='%230d6a72' stroke-opacity='.22' stroke-width='2'/%3E %3Crect x='92' y='708' width='128' height='104' fill='url(%23d)'/%3E %3Crect x='440' y='720' width='96' height='80' fill='url(%23d)'/%3E %3C/svg%3E");
}
@media (max-width:860px){
  body.login-page .login-backdrop::before,
  body.login-page .login-backdrop::after{width:min(46vw,420px)}
}
@media (max-width:480px){
  body.login-page .login-backdrop::before,
  body.login-page .login-backdrop::after{width:60vw}
}
/* ===== END ===== */

/* ===== DESIGN RESTORE (previous 10-06-2026 visual values) ===== */
/* App pages only (scoped to body.app, so the login page and its modals are untouched).
   Purely visual values (colour / shadow / radius / border) restored from the previous design on the SAME selectors;
   no layout, spacing or markup changes. New components without a previous equivalent keep the NEW styling. */
/* Corner-rounding tokens back to the previous 8 / 10 / 10 px (NEW: 10 / 12 / 12). */
body.app{
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:10px;
}
/* Sidebar: plain deep-teal like the previous design (hide NEW decorative artwork; image files kept). */
body.app .sidebar-art{
  display:none;
}
body.app .register-page-btn.is-active:hover{
  background:#0d6a72;
}
body.app .modal-head h2{
  color:#1a2b2e;
}
body.app .modal-btn--primary{
  background:#084a50;
  box-shadow:0 8px 18px rgba(8,74,80,.22);
}
body.app .modal-btn--primary:hover{
  background:#06383d;
  box-shadow:0 10px 22px rgba(8,74,80,.28);
}
body.app .modal-btn--primary:active{
  background:#052c30;
}
body.app .register-search .search{
  border-radius:8px;
}
body.app .subtab.is-active{
  border-color:transparent;
}
body.app .toolbar .register-search .search{
  border-radius:8px;
}
body.app .compliance-search-bar .register-search .search{
  border-radius:8px;
}
body.app .page-controls .register-search .search{
  border-radius:8px;
}
body.app .register-panel-actions .register-search .search{
  border-radius:8px;
}
body.app .shared-drive-toolbar .register-search .search{
  border-radius:8px;
}
body.app .teacher-disc-panel-tools .register-search .search{
  border-radius:8px;
}
body.app .teacher-pick-pager .register-page-btn.is-active:hover{
  background:#0d6a72;
}
body.app .folder-card--teacher-file .tf-folder-tab{
  background:linear-gradient(180deg,#5aa3aa 0%,#3d8b92 100%);
}
body.app .folder-card--teacher-file .tf-folder-pocket{
  background:linear-gradient(180deg,#8ecdd2 0%,#4ea0a8 55%,#2f7f86 100%);
}
body.app .topbar-notif-count{
  background:#084a50;
}
body.app .topbar-notif-card.notif-kind-overdue .topbar-notif-ico{
  background:#fde8e8;
  color:#c2410c;
}
body.app .btn-view-all{
  box-shadow:0 6px 16px rgba(13,106,114,.28);
}
body.app .shared-drive-card-preview{
  background:rgba(13,106,114,.06);
}
body.app .shared-drive-card-ico{
  border-radius:14px;
}
body.app #nod-response-modal .nod-rx{
  border-radius:16px;
  border:1px solid #d7e4e6;
  box-shadow:0 12px 32px rgba(15,61,66,.12);
}
body.app #nod-response-modal .nod-rx-head{
  border-bottom:1px solid #e6eef0;
  background:#fff;
}
body.app #nod-response-modal .nod-rx-req{
  color:#5c6c71;
}
body.app #nod-response-modal .nod-rx-card{
  border:1px solid #e6eef0;
  border-radius:12px;
}
body.app #nod-response-modal .nod-rx-label{
  color:#1a3a3e;
}
body.app #nod-response-modal .nod-rx-consent{
  color:#1a3a3e;
}
body.app .page .notif-page-list .notif-kind-overdue .notif-card-ico{
  background:#fde8e8;
  color:#c2410c;
}
body.app .dashboard-notifications .notif-card--compact.notif-kind-compliance{
  background:linear-gradient(180deg,#f4fbfb,#e6f4f5);
}
body.app .dashboard-notifications .notif-card--compact.notif-kind-discrepancy{
  background:linear-gradient(180deg,#fffaf3,#f7ead8);
  border-color:rgba(180,110,24,.22);
}
body.app .dashboard-notifications .notif-card--compact.notif-kind-shared{
  background:linear-gradient(180deg,#f4f8ff,#e6eefc);
  border-color:rgba(47,108,168,.22);
}
body.app .activity-log-table thead th{
  background:#f4f7fa;
  color:#7b8b92;
}
body.app .activity-log-table tbody td{
  border-bottom:1px solid #eef2f4;
  background:#fff;
}
body.app.page-teacher-compliance .teacher-compliance-table thead th{
  background:#fff;
  border-bottom:1px solid rgba(13,106,114,.1);
}
body.app.page-teacher-compliance .teacher-compliance-panel{
  border:1px solid rgba(13,106,114,.16);
  box-shadow:none;
}
body.app .teacher-compliance-panel{
  border:1px solid rgba(13,106,114,.16);
  box-shadow:0 1px 2px rgba(27,44,48,.06);
}
body.app .teacher-compliance-table thead th{
  background:#f7f9fa;
}
body.app .profile-panel{
  border-radius:14px;
  box-shadow:0 8px 24px rgba(27,44,48,.06);
}
body.app .btn-danger{
  border:1.5px solid rgba(176,60,54,.35);
}
/* Search bars: NEW's taller search-bar rules carry their own 10px radius; previous design used 8px. */
body.app .search-form.register-search:not(.topbar-search-default) .search,
body.app.page-teachers-record .register-panel-actions .register-search .search{
  border-radius:8px;
}
/* ===== END ===== */