:root {
  --navy:#15213b; --navy2:#1d2a49; --gold:#c99a3d; --cream:#f7f5ef; --paper:#fff;
  --ink:#182033; --muted:#6f7788; --line:#e6e8ed; --soft:#f3f5f8; --green:#1f7a55;
  --red:#b33c45; --shadow:0 18px 50px rgba(21,33,59,.09); --radius:18px;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
button,input,select{font:inherit} button{cursor:pointer} .hidden{display:none!important}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:#768096;margin:0 0 8px}.eyebrow.light{color:#d6dceb}.muted{color:var(--muted);line-height:1.55}.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--gold);color:#17213b;display:grid;place-items:center;font-family:Georgia,serif;font-weight:900;letter-spacing:.03em}.brand-mark.large{width:58px;height:58px;border-radius:16px;font-size:20px}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(380px,48%) 1fr;background:#fff}.login-brand-panel{background:linear-gradient(145deg,#15213b,#263657);padding:64px 8vw;color:white;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-brand-panel:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-170px;bottom:-120px;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018)}.login-brand-panel h1{font:700 clamp(38px,5vw,66px)/1.02 Georgia,serif;max-width:570px;margin:12px 0 18px}.login-copy{color:#d8deea;max-width:520px;font-size:17px;line-height:1.65}.login-feature-list{display:flex;gap:10px;flex-wrap:wrap;z-index:1}.login-feature-list span{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);padding:10px 13px;border-radius:999px;font-size:12px}.login-form-panel{display:grid;place-items:center;padding:36px;background:linear-gradient(#fff,#fbfbf9)}.login-card{width:min(430px,100%)}.login-card h2{font:700 34px Georgia,serif;margin:6px 0}.login-card label,.modal-card label{display:grid;gap:8px;font-size:13px;font-weight:750;margin-top:20px}.login-card input,.modal-card input,.modal-card select{width:100%;border:1px solid #dfe2e8;border-radius:12px;padding:14px 15px;outline:none;background:#fff}.login-card input:focus,.modal-card input:focus,.modal-card select:focus{border-color:#8b98ae;box-shadow:0 0 0 3px rgba(21,33,59,.07)}.wide{width:100%;margin-top:22px;justify-content:space-between}.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:28px}.form-error{margin-top:14px;padding:11px 13px;background:#fff0f1;color:#9d3038;border-radius:10px;font-size:13px}
.primary,.secondary{border:0;border-radius:11px;padding:11px 15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary{background:var(--navy);color:#fff;box-shadow:0 7px 18px rgba(21,33,59,.15)}.primary:hover{background:#202f50}.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.compact{padding:9px 12px;font-size:12px}.text-button{border:0;background:none;color:#53627b;font-weight:800;padding:4px}.text-button:hover{color:var(--navy)}.icon-button{border:1px solid var(--line);background:#fff;border-radius:10px;width:38px;height:38px;font-size:20px;display:grid;place-items:center}
.app-shell{min-height:100vh;display:grid;grid-template-columns:246px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:246px;background:var(--navy);color:white;padding:24px 16px;display:flex;flex-direction:column;z-index:20}.sidebar-brand{display:flex;gap:12px;align-items:center;padding:0 8px 26px}.sidebar-brand div:last-child{display:grid;gap:2px}.sidebar-brand strong{font:700 19px Georgia,serif}.sidebar-brand span{font-size:11px;color:#adb7ca}.sidebar nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#cbd2df;padding:12px 13px;border-radius:10px;text-align:left;font-weight:700;display:flex;align-items:center;gap:12px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:white}.nav-item.active:before{content:"";width:3px;height:20px;border-radius:6px;background:var(--gold);margin-left:-13px}.nav-icon{width:20px;text-align:center;color:#d9b466}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding:18px 7px 0;display:flex;gap:9px;align-items:flex-start}.sidebar-foot div{display:grid;gap:3px}.sidebar-foot strong{font-size:11px}.sidebar-foot small{font-size:10px;color:#9da9bd}.security-dot{width:9px;height:9px;background:#63cb96;border-radius:50%;margin-top:3px;box-shadow:0 0 0 3px rgba(99,203,150,.15)}
.main-column{grid-column:2;min-width:0}.topbar{height:76px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.topbar-title{display:grid}.topbar-title .eyebrow{margin:0}.topbar-title strong{font:700 18px Georgia,serif}.top-actions{display:flex;align-items:center;gap:10px;position:relative}.user-chip{border:1px solid var(--line);background:#fff;border-radius:12px;display:flex;align-items:center;gap:9px;padding:6px 10px}.avatar{width:32px;height:32px;border-radius:9px;background:#edf0f5;color:var(--navy);display:grid;place-items:center;font-weight:900}.user-chip-text{display:grid;text-align:left}.user-chip-text strong{font-size:12px}.user-chip-text small{font-size:10px;color:var(--muted)}.user-menu{position:absolute;right:0;top:52px;width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px;z-index:30}.user-menu div{display:grid;gap:3px;padding:4px 4px 10px;border-bottom:1px solid var(--line)}.user-menu small{color:var(--muted);word-break:break-all}.user-menu button{width:100%;margin-top:8px;border:0;background:none;text-align:left;padding:9px;border-radius:8px;font-weight:750}.user-menu button:hover{background:var(--soft)}
.content{padding:32px;max-width:1500px;margin:auto}.page{display:none}.active-page{display:block}.hero-row,.page-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.hero-row h1,.page-heading-row h1{font:700 34px Georgia,serif;margin:4px 0 7px}.hero-row .muted,.page-heading-row .muted{margin:0;max-width:750px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat-card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 25px rgba(21,33,59,.035)}.stat-card{padding:22px;display:grid;gap:7px}.stat-card strong{font:700 34px Georgia,serif}.stat-label{font-size:12px;font-weight:800;color:#4e596d}.stat-card small{font-size:11px;color:#8991a0}.panel{padding:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.panel-heading h3{font:700 20px Georgia,serif;margin:0}.split-panel{margin-top:12px}.recent-list{display:grid}.recent-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px 2px;border-top:1px solid var(--line)}.recent-avatar{width:40px;height:40px;border-radius:12px;background:#f0ede5;color:var(--navy);display:grid;place-items:center;font-weight:900}.recent-copy{display:grid;gap:3px}.recent-copy strong{font-size:13px}.recent-copy small,.recent-item>small{color:var(--muted);font-size:11px}
.table-panel{padding:0;overflow:hidden}.filterbar{padding:16px;display:grid;grid-template-columns:minmax(280px,1fr) repeat(4,auto);gap:9px;border-bottom:1px solid var(--line)}.searchbox{border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;padding:0 11px;gap:8px}.searchbox input{border:0;outline:0;width:100%;padding:10px 0}.filterbar select{border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 11px;color:#414a5c}.table-meta{display:flex;justify-content:space-between;padding:11px 16px;background:#fafbfc;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}.scope-badge{font-weight:800;color:#59657a}.table-wrap{overflow:auto;position:relative}table{width:100%;border-collapse:collapse;min-width:850px}th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#7e8797;font-weight:900;padding:11px 16px;border-bottom:1px solid var(--line);background:#fff}td{padding:13px 16px;border-bottom:1px solid #edf0f3;font-size:12px;vertical-align:middle}tbody tr:hover{background:#fbfbf9}.student-cell{display:grid;gap:3px}.student-cell strong{font-size:13px}.student-cell small{color:var(--muted)}.row-action{border:0;background:#f4f5f7;width:32px;height:32px;border-radius:9px}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;background:#edf0f5;color:#5e687a}.status-pill.new{background:#fff3d9;color:#8a6116}.status-pill.enrolled{background:#e5f5ec;color:#1d704e}.status-pill.reviewed{background:#e9effa;color:#3d5e92}.status-pill.contacted{background:#eee8f8;color:#695092}.status-pill.withdrawn{background:#f5e8e9;color:#963a42}.status-pill.good{background:#e5f5ec;color:#1d704e}.status-pill.warn{background:#fff3d9;color:#8a6116}.empty-state{text-align:center;padding:60px 20px}.empty-icon{font-size:30px}.empty-state h3{font:700 20px Georgia,serif;margin:10px 0 5px}.empty-state p{color:var(--muted);margin:0}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.integration-card{display:flex;gap:16px;align-items:flex-start}.integration-card h3{font:700 21px Georgia,serif;margin:8px 0}.integration-card p{color:var(--muted);line-height:1.55;margin:0 0 10px}.integration-icon{width:50px;height:50px;border-radius:14px;background:#f0ede5;display:grid;place-items:center;font:700 15px Georgia,serif;color:var(--navy);flex:0 0 auto}.integration-card code,.mapping-panel code{font-size:11px;background:#f4f5f7;padding:3px 6px;border-radius:6px}.mapping-panel{margin-top:14px}.mapping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mapping-item{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fbfbfa;display:grid;gap:4px}.mapping-item strong{font-size:11px;text-transform:capitalize}.mapping-item code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sync-result{margin-top:14px}.sync-result strong{font:700 22px Georgia,serif}.audit-details{max-width:380px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(12,18,33,.38);z-index:40;backdrop-filter:blur(2px)}.drawer{position:fixed;z-index:50;right:0;top:0;height:100vh;width:min(560px,96vw);background:#fff;box-shadow:-20px 0 60px rgba(12,18,33,.18);overflow:auto}.drawer-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:20px 22px;display:flex;justify-content:space-between;align-items:flex-start}.drawer-header h2{font:700 27px Georgia,serif;margin:0}.drawer-content{padding:20px 22px 50px}.detail-section{margin-bottom:22px}.detail-section h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7e8797;margin:0 0 10px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}.detail-item{padding:12px;border-bottom:1px solid var(--line);min-height:64px}.detail-item:nth-child(odd){border-right:1px solid var(--line)}.detail-item label{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.detail-item strong{font-size:12px;word-break:break-word}.status-select{width:100%;border:1px solid var(--line);padding:10px;border-radius:10px;background:#fff}.raw-box{background:#151d2f;color:#ced6e6;padding:12px;border-radius:10px;max-height:210px;overflow:auto;font:11px/1.5 ui-monospace,monospace;white-space:pre-wrap}.modal-backdrop{display:grid;place-items:center;padding:20px}.modal-card{width:min(480px,100%);background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow)}.modal-heading{display:flex;justify-content:space-between}.modal-heading h2{font:700 26px Georgia,serif;margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}
.toast{position:fixed;z-index:100;right:20px;bottom:20px;background:#15213b;color:#fff;padding:12px 15px;border-radius:11px;box-shadow:var(--shadow);font-size:12px;font-weight:700;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.mobile-only{display:none}
@media(max-width:1050px){.stats-grid{grid-template-columns:1fr 1fr}.filterbar{grid-template-columns:1fr 1fr 1fr}.searchbox{grid-column:1/-1}.mapping-grid{grid-template-columns:1fr 1fr}.login-brand-panel{padding:50px 5vw}}
@media(max-width:780px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh}.mobile-brand{display:flex}.app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.2s}.sidebar.open{transform:none}.main-column{display:block}.mobile-only{display:grid}.topbar{padding:0 14px}.topbar-title{display:none}.user-chip-text,.topbar .secondary{display:none}.content{padding:20px 14px}.hero-row,.page-heading-row{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.integration-grid{grid-template-columns:1fr}.mapping-grid{grid-template-columns:1fr}.filterbar{grid-template-columns:1fr 1fr}.filterbar .searchbox{grid-column:1/-1}.filterbar button{width:100%}.detail-grid{grid-template-columns:1fr}.detail-item:nth-child(odd){border-right:0}.page-heading-row .primary,.hero-row .primary{width:100%}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.filterbar{grid-template-columns:1fr}.filterbar>*{grid-column:1!important}.login-form-panel{padding:25px}.hero-row h1,.page-heading-row h1{font-size:29px}}

/* Supabase / multi-campus additions */
button:disabled{opacity:.58;cursor:not-allowed}
textarea{font:inherit}
.setup-note{margin-top:16px;padding:12px 14px;border:1px solid #ead69d;background:#fff8e6;color:#735316;border-radius:11px;font-size:12px;line-height:1.55}.setup-note code{font-size:11px;background:rgba(255,255,255,.7);padding:2px 4px;border-radius:4px}
.heading-actions{display:flex;gap:9px;flex-wrap:wrap}
.access-banner{margin:-8px 0 16px;padding:13px 15px;border:1px solid #dfe4ed;border-radius:14px;background:#f9fafc;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px}.access-banner>strong{white-space:nowrap}.access-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.permission-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}.permission-pill.read{background:#e9effa;color:#3d5e92}.permission-pill.write{background:#e5f5ec;color:#1d704e}
.menu-access{display:flex!important;flex-direction:row!important;gap:5px!important;flex-wrap:wrap!important;padding:10px 4px!important}.menu-access .permission-pill{font-size:9px}
.modal-card.modal-wide{width:min(760px,100%);max-height:92vh;overflow:auto}.form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-two-col label{margin-top:20px}.checkbox-line{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important}.checkbox-line input{width:auto!important;margin:0}.modal-card label small{font-weight:500;color:var(--muted);line-height:1.4}
.permission-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.permission-heading div{display:grid;gap:4px}.permission-heading strong{font-size:13px}.permission-heading small{font-size:11px;color:var(--muted)}
.access-list{display:grid;gap:8px;margin-top:10px;max-height:290px;overflow:auto;padding-right:3px}.access-row{display:grid;grid-template-columns:1fr 170px;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfbfa}.access-campus{margin:0!important;display:flex!important;align-items:center;gap:10px!important}.access-campus input{width:auto!important}.access-campus span{display:grid;gap:2px}.access-campus small{font-size:10px;color:var(--muted);font-weight:500}.access-row select{padding:10px 12px!important}.inactive-row{opacity:.65;background:#f4f4f4}.permission-help{font-size:11px;line-height:1.75;color:var(--muted);margin-top:10px}.compact-empty{padding:20px}.drawer-permission{display:flex;justify-content:flex-end;margin-bottom:8px}.detail-section>label{display:grid;gap:6px;font-size:11px;font-weight:800;color:#626d80;margin:10px 0}.detail-section textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px;outline:none;background:#fff;line-height:1.5}.detail-section textarea:focus{border-color:#8b98ae;box-shadow:0 0 0 3px rgba(21,33,59,.07)}.detail-section textarea[readonly],.status-select:disabled{background:#f5f6f8;color:#7c8492}.code-badge{font-family:ui-monospace,monospace}

/* --- VTA Tamil School crest & brand identity ---------------------------- */
.brand-logo{width:44px;height:44px;display:block;flex:0 0 auto;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(109,20,31,.28)}
.brand-logo.xl{width:108px;height:108px;box-shadow:0 16px 44px rgba(109,20,31,.4)}
.brand-lockup{display:flex;align-items:center;gap:18px;z-index:1}
.logo-glow{position:relative;display:grid;place-items:center;flex:0 0 auto}
.logo-glow:before{content:"";position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,201,69,.4),transparent 72%);z-index:-1}
.brand-lockup-text{display:grid;gap:3px}
.brand-lockup-text strong{font:700 23px Georgia,serif;color:#fff;letter-spacing:.01em}
.brand-lockup-text span{font-size:11px;color:#e7c98b;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.sidebar-brand{align-items:center}
.sidebar-brand .brand-logo{width:40px;height:40px}
.sidebar-brand strong{font:700 16px Georgia,serif;line-height:1.12}
.mobile-brand-text{display:grid;gap:1px}
.mobile-brand-text strong{font:700 16px Georgia,serif}
.mobile-brand-text small{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.09em;text-transform:uppercase}

/* --- Fancier login brand panel ----------------------------------------- */
.login-brand-panel{background:radial-gradient(120% 95% at 12% -5%,#2b3c62 0%,#182647 48%,#111c33 100%)}
.login-brand-panel:before{content:"";position:absolute;left:-150px;top:-130px;width:380px;height:380px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,201,69,.18),transparent 70%);pointer-events:none}
.login-brand-panel:after{border:1px solid rgba(245,201,69,.22);box-shadow:0 0 0 80px rgba(245,201,69,.045),0 0 0 160px rgba(245,201,69,.025)}
.login-brand-panel h1{background:linear-gradient(92deg,#fff 60%,#f3d38c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-feature-list span{border-color:rgba(245,201,69,.28);background:rgba(245,201,69,.07)}
body.nav-open .sidebar{transform:none}
@media(max-width:780px){.heading-actions{width:100%}.heading-actions>*{flex:1}.access-banner{align-items:flex-start;flex-direction:column}.form-two-col{grid-template-columns:1fr}.access-row{grid-template-columns:1fr}.access-row select{width:100%}.modal-card.modal-wide{max-height:94vh}.top-actions #globalSyncButton{display:none}}