@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* Clone-wide visual system derived from the Technician Monitor interface. */
:root{
  --ink:#17202a;
  --text:#17202a;
  --muted:#667085;
  --green:#1565c0;
  --green2:#0d47a1;
  --mint:#e8f2fc;
  --cream:#f7f9fc;
  --line:#e4e7ec;
  --danger:#b3261e;
  --sidebar:#fff;
  --sidebar-hover:#f1f6fc;
  --sidebar-text:#667085;
  --surface:#fff;
  --shadow-sm:0 3px 10px rgba(23,32,42,.07);
  --shadow-md:0 10px 28px rgba(23,32,42,.10);
}

body.app-page{
  min-height:100vh;
  background:var(--cream)!important;
  color:var(--ink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.app-page :is(h1,h2,h3,.stat-grid strong,.count-badge){font-family:Manrope,"DM Sans",sans-serif}

body.app-page .sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  width:224px;
  padding:18px 12px;
  color:var(--ink);
  background:#fff;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
body.app-page .logo-row{
  gap:10px;
  margin:0 0 16px;
  padding:4px 7px 16px;
  border-bottom:1px solid var(--line);
}
body.app-page .logo-row span,
body.app-page .logo-row img{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
  box-shadow:none;
}
body.app-page .logo-row b{color:var(--ink);font-size:15px;letter-spacing:0}
body.app-page .logo-row b::after{color:var(--muted);font-size:8px;letter-spacing:.9px}
body.app-page .sidebar nav{
  display:block;
  min-height:0;
  padding:2px 2px 10px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#d5dce5 transparent;
}
body.app-page .nav-group{display:grid;gap:2px;margin:0 0 12px}
body.app-page .nav-label{
  padding:7px 11px 5px;
  color:#8490a0;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
}
body.app-page .sidebar nav a{
  display:flex;
  align-items:center;
  min-height:39px;
  padding:8px 11px!important;
  border:1px solid transparent;
  border-radius:10px;
  color:#4b5563;
  font-size:12.5px;
  font-weight:600;
  white-space:normal;
}
body.app-page .sidebar nav a::before{display:none}
body.app-page .sidebar nav a:hover{
  color:var(--green);
  background:#f4f8fd;
  border-color:transparent;
  transform:none;
}
body.app-page .sidebar nav .active{
  color:var(--green);
  background:var(--mint);
  border-color:transparent;
  box-shadow:none;
}
body.app-page .sidebar form{padding-top:12px;border-top:1px solid var(--line)}
body.app-page .logout{
  min-height:40px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
body.app-page .logout:hover{color:var(--green);background:var(--mint);border-color:#c7dcf4}

body.app-page .dashboard{
  width:calc(100% - 224px);
  max-width:1360px;
  margin:0 auto 0 224px;
  padding:22px 30px 44px;
}
body.app-page .dashboard>.topbar{
  position:sticky;
  top:8px;
  z-index:25;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  margin:0 0 16px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 8px rgba(23,32,42,.04);
  backdrop-filter:blur(10px);
}
body.app-page .topbar-search{max-width:520px;min-height:42px;border-radius:10px;background:#f4f6fa}
body.app-page .topbar-search input{min-height:38px;border:0;background:transparent}
body.app-page .topbar-actions{gap:7px}
body.app-page .topbar-icon-btn{width:40px;height:40px;border-radius:10px}
body.app-page .topbar-profile{min-height:40px;border-radius:10px}

body.app-page .dashboard>header{
  align-items:center;
  min-height:78px;
  padding:17px 22px;
  border:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 2px rgba(23,32,42,.04);
}
body.app-page .dashboard h1{margin:4px 0;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.5px;color:var(--ink)}
body.app-page .dashboard h2{font-size:18px;line-height:1.3;color:var(--ink)}
body.app-page .eyebrow{color:var(--green);font-size:10px;letter-spacing:1.4px}
body.app-page .muted{color:var(--muted);font-size:12px}
body.app-page .role-badge{background:var(--mint);color:var(--green);border:1px solid #d4e6f8}

body.app-page .dashboard-home .dashboard-hero{
  position:relative;
  min-height:116px;
  padding:22px 24px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 2px rgba(23,32,42,.04);
}
body.app-page .dashboard-home .dashboard-hero::after{display:none}
body.app-page .dashboard-home .dashboard-hero .eyebrow{color:var(--green)}
body.app-page .dashboard-home .dashboard-hero h1{max-width:none;color:var(--ink);font-size:clamp(24px,2vw,30px);letter-spacing:-.7px}
body.app-page .dashboard-home .dashboard-hero .muted{color:var(--muted);font-size:12px}
body.app-page .dashboard-home .hero-context{min-width:190px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f4f6fa;box-shadow:none;backdrop-filter:none}
body.app-page .dashboard-home .hero-context span,
body.app-page .dashboard-home .hero-context small{color:var(--muted)}
body.app-page .dashboard-home .hero-context strong{color:var(--ink);font-size:13px}

body.app-page .stat-grid{gap:12px;margin:16px 0}
body.app-page .stat-grid article,
body.app-page .module-grid article,
body.app-page .activity,
body.app-page .finance-panel,
body.app-page .ops-panel,
body.app-page .dash-list,
body.app-page .parent-admin-panel,
body.app-page .master-page .master-panel,
body.app-page .master-page .panel{
  min-width:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 1px 2px rgba(23,32,42,.04);
}
body.app-page .stat-grid article{padding:16px 17px;border-left:3px solid #d7e6f7}
body.app-page .stat-grid article.accent-blue{border-left-color:#1d4f91}
body.app-page .stat-grid article.accent-teal{border-left-color:#12805c}
body.app-page .stat-grid article.accent-amber{border-left-color:#f4a261}
body.app-page .stat-grid article.accent-red{border-left-color:#b3261e}
body.app-page .stat-grid span,body.app-page .stat-grid small{font-size:11px}
body.app-page .stat-grid strong{margin:7px 0;font-size:clamp(22px,2vw,29px);color:var(--ink)}
body.app-page .dashboard-home .dashboard-stats article{min-height:100px;padding:15px 17px;background:#fff;box-shadow:0 1px 2px rgba(23,32,42,.04)}
body.app-page .dashboard-home .dashboard-stats article::after{display:none}
body.app-page .dashboard-home .dashboard-stats .accent-blue,
body.app-page .dashboard-home .dashboard-stats .accent-teal,
body.app-page .dashboard-home .dashboard-stats .accent-amber,
body.app-page .dashboard-home .dashboard-stats .accent-red{background:#fff}
body.app-page .dashboard-home .primary-overview{gap:14px;margin-top:16px}
body.app-page .dashboard-home .ops-panel,
body.app-page .dashboard-home .finance-panel{padding:20px;border-top:1px solid var(--line)}
body.app-page .dashboard-home .dashboard-shortcuts a{min-height:104px;padding:16px;border:1px solid var(--line);border-radius:15px;box-shadow:0 1px 2px rgba(23,32,42,.04)}
body.app-page .dashboard-home .dashboard-shortcuts i{background:var(--mint);color:var(--green)}
body.app-page .dashboard-home .section-heading{margin-top:27px}

body.app-page .activity{margin-top:14px;padding:18px}
body.app-page .activity h2{margin:0 0 12px}
body.app-page .dashboard :is(.master-header,.report-heading,.section-heading){color:var(--ink)}
body.app-page .dashboard :is(.master-tabs a,.payment-tabs a,.segment-tabs a){border-radius:10px;color:var(--muted)}
body.app-page .dashboard :is(.master-tabs a.active,.payment-tabs a.active,.segment-tabs a.active){background:var(--green);color:#fff}
body.app-page .dashboard :is(.master-tabs,.payment-tabs){border-color:var(--line)}

body.app-page :is(input,select,textarea){
  min-height:40px;
  border:1px solid #d6dde7;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:500 13px "DM Sans",sans-serif;
}
body.app-page textarea{min-height:84px;padding:10px 12px}
body.app-page :is(input,select,textarea):focus{outline:3px solid rgba(21,101,192,.14);border-color:#7ca9da}
body.app-page .list-search input{min-height:40px;border-radius:10px}
body.app-page .form-grid label,
body.app-page .dashboard label{color:var(--ink)}
body.app-page :is(button,.primary-button,.primary-link){border-radius:10px}
body.app-page .primary-button,
body.app-page .primary-link,
body.app-page .dashboard button[type=submit],
body.app-page .dashboard .primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}
body.app-page :is(.primary-button,.primary-link,.dashboard button[type=submit]):hover{background:var(--green2);border-color:var(--green2)}

body.app-page .dashboard table{border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
body.app-page .dashboard table th{
  padding:11px 12px;
  border-top:0;
  border-bottom:1px solid var(--line);
  background:#f4f6fa;
  color:#526174;
  font-size:10px;
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
  white-space:nowrap;
}
body.app-page .dashboard table td{padding:11px 12px;border-top:0;border-bottom:1px solid #edf0f4;color:var(--ink);font-size:12px}
body.app-page .dashboard table tbody tr:last-child td{border-bottom:0}
body.app-page .dashboard table tbody tr:hover{background:#f7faff}
body.app-page .bill-status,body.app-page .status-badge{border-radius:999px}

body.login-page{font-family:"DM Sans",sans-serif;background:var(--cream)}
body.login-page .login-card{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-md)}
body.login-page .brand-mark{background:var(--green);border-radius:13px}

body:not(.app-page) .parent-portal{font-family:"DM Sans",sans-serif}
body:not(.app-page) .parent-portal header{border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
body:not(.app-page) .parent-portal header p{color:var(--green)}
body:not(.app-page) .parent-portal :is(.header-pay,.pay-link){background:var(--green);color:#fff;border-radius:10px}
body:not(.app-page) .parent-portal :is(section,.parent-admin-panel){border-color:var(--line);border-radius:15px;box-shadow:0 1px 2px rgba(23,32,42,.04)}

/* Standalone admin forms (student/master entry and cash entry) keep the same card language. */
body:has(.intro),body:has(.hero),body:has(.password-card){
  min-height:100vh;
  background:var(--cream)!important;
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
body:has(.intro)>header,body:has(.hero)>header{
  position:static;
  height:auto;
  min-height:54px;
  padding:10px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);
  background:#fff;
  box-shadow:none;
}
body:has(.intro)>header a,body:has(.hero)>header a{color:var(--green);font-weight:700;text-decoration:none}
body:has(.intro)>main,body:has(.hero)>main{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);
  align-items:start;
  gap:16px;
  max-width:1180px;
  margin:22px auto;
  padding:0 20px;
}
body:has(.intro) .intro,body:has(.hero) .hero,
body:has(.form-card) .form-card,body:has(.hero) .card{
  min-width:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(23,32,42,.04);
}
body:has(.intro) .intro h1,body:has(.hero) .hero h1{font:800 24px/1.2 Manrope,"DM Sans",sans-serif;color:var(--ink)}
body:has(.intro) .intro em,body:has(.hero) .hero em{color:var(--green)}
body:has(.intro) :is(input,select,textarea),body:has(.hero) :is(input,select,textarea),body:has(.password-card) :is(input,select,textarea){
  min-height:40px;
  border:1px solid #d6dde7;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:500 13px "DM Sans",sans-serif;
}
body:has(.intro) button,body:has(.hero) button,body:has(.password-card) button{border-radius:10px;background:var(--green);color:#fff;font-family:"DM Sans",sans-serif}
body:has(.password-card) .password-card{border-color:var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
body:has(.password-card) .password-card button{background:var(--green)}
body:has(.hero) .card.success{border-color:#b7e4db;background:#f1faf7}

@media(max-width:1000px){
  body.app-page .dashboard{padding-right:22px;padding-left:22px}
  body.app-page .dashboard-home .primary-overview{grid-template-columns:1fr}
}
@media(max-width:760px){
  body:has(.intro)>main,body:has(.hero)>main{grid-template-columns:1fr;margin:14px auto;padding:0 12px}
  body:has(.intro) .intro,body:has(.hero) .hero{padding:16px}
  body.app-page .sidebar{position:sticky;inset:0 0 auto;width:100%;height:auto;max-height:42vh;padding:10px 12px 8px;overflow:visible;box-shadow:0 3px 10px rgba(23,32,42,.06)}
  body.app-page .logo-row{margin:0 0 7px;padding:0 3px 8px}
  body.app-page .logo-row span,body.app-page .logo-row img{width:34px!important;height:34px!important;border-radius:10px!important}
  body.app-page .sidebar nav{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:0 0 4px}
  body.app-page .nav-group{display:contents}
  body.app-page .nav-label{display:none}
  body.app-page .sidebar nav a{flex:0 0 auto;min-height:36px;padding:7px 10px!important;white-space:nowrap}
  body.app-page .sidebar form{display:none}
  body.app-page .dashboard{width:100%;max-width:none;margin:0;padding:15px 14px 30px}
  body.app-page .dashboard>.topbar{position:relative;top:auto;flex-wrap:wrap}
  body.app-page .dashboard>header{display:block;padding:16px}
  body.app-page .dashboard-home .dashboard-hero{display:block;padding:18px}
  body.app-page .dashboard-home .hero-context{margin-top:12px}
  body.app-page .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  body.app-page .dashboard{padding-right:10px;padding-left:10px}
  body.app-page .stat-grid,body.app-page .dashboard-home .dashboard-stats{grid-template-columns:1fr 1fr;gap:8px}
  body.app-page .stat-grid article{padding:12px}
  body.app-page .stat-grid strong{font-size:21px}
  body.app-page .dashboard .icon-card-grid{grid-template-columns:1fr}
  body.app-page .dashboard table th,body.app-page .dashboard table td{padding:9px 8px}
}
@media(prefers-reduced-motion:reduce){body.app-page *,body.app-page *::before,body.app-page *::after{transition-duration:.01ms!important}}