/* ==========================================================================
   AcNEXUS self-service portal — visual language matches the organization's
   approved design system (colors, type, buttons, cards, badges) exactly,
   laid out as a responsive sidebar app-shell (matches the reference staff
   portals' structure). Every class is prefixed kmgc- and every rule is
   scoped under .kmgc-portal-page so it can never leak out and affect the
   surrounding WordPress theme, and nothing here is affected by it either.
   Fonts: system stack only — no external font loading, zero network access.
   ========================================================================== */

.kmgc-portal-page{
  --ink:        #1B2030;
  --ink-soft:   #4A5164;
  --slate:      #707A8C;
  --slate-200:  #E4E7EE;
  --slate-100:  #EEF0F5;
  --parchment:  #F5F6FA;
  --paper:      #FFFFFF;

  --brand-navy-950: #00183B;
  --brand-navy-900: #001D45;

  --church-side:   #191E5E; --church-accent: #402092; --church-accent-2: #6A3FC0; --church-soft:   #EFEAFB;
  --inst-side:     #004324; --inst-accent:   #017C3F; --inst-accent-2:   #16A34A; --inst-soft:     #E6F6EC;
  --dc-side:       #A65001; --dc-accent:     #EE8102; --dc-accent-2:     #F0921E; --dc-soft:       #FDF0E1;
  --admin-side:    #00183A; --admin-accent:  #17418F; --admin-accent-2:  #2C5DBE; --admin-soft:    #E7EDF9;

  --green-700: #235C41; --green-600: #2E7D57; --green-100: #E1F0E7;
  --amber-700: #93591C; --amber-600: #C07A2B; --amber-100: #F7E7D1;
  --red-700:   #8B342B; --red-600:   #B4443A; --red-100:   #F6E1DE;

  --portal-950: var(--admin-side);
  --portal-accent: var(--admin-accent);
  --portal-accent-soft: var(--admin-soft);

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 2px 10px rgba(16,24,40,.05);
  --shadow-pop:  0 10px 30px rgba(11,24,48,.18);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--font-body);
  color: var(--ink);
}
.kmgc-portal-page[data-portal="church"]{ --portal-950: var(--church-side); --portal-accent: var(--church-accent); --portal-accent-soft: var(--church-soft); }
.kmgc-portal-page[data-portal="institute"]{ --portal-950: var(--inst-side); --portal-accent: var(--inst-accent); --portal-accent-soft: var(--inst-soft); }
.kmgc-portal-page[data-portal="daycare"]{ --portal-950: var(--dc-side); --portal-accent: var(--dc-accent); --portal-accent-soft: var(--dc-soft); }
.kmgc-portal-page[data-portal="admin"]{ --portal-950: var(--admin-side); --portal-accent: var(--admin-accent); --portal-accent-soft: var(--admin-soft); }

/* ---------------------------------------------------------------------- */
/* Dark mode -- a genuine, complete alternate set of the CORE tokens (not   */
/* just accent hues), applied under any [data-theme="dark"] ancestor. Set  */
/* per-module (Central/Church/Institute/School each pick their OWN mode --  */
/* see KMGC_Settings::get_scoped_theme_keys()) on .kmgc-content-panel for   */
/* that module's own panel content, and on the outer page wrapper for the   */
/* login screen and the shared sidebar/topbar chrome (which follow the      */
/* primary/active module -- see portal-dashboard.php and portal-login.php   */
/* for the documented trade-off, mirroring the existing sidebar-logo one).  */
/* Scoped strictly under the attribute selector so a site that never turns  */
/* dark mode on sees zero visual change anywhere. --portal-950/--portal-    */
/* accent/--portal-accent-soft are intentionally NOT touched here -- those  */
/* stay whatever that element's own accent scoping already set them to (see */
/* above), dark mode only swaps the neutral ink/paper/border tokens they    */
/* render alongside. */
/* ---------------------------------------------------------------------- */
[data-theme="dark"]{
  --ink:        #E7E9F0;
  --ink-soft:   #B7BECE;
  --slate:      #8891A3;
  --slate-200:  #333A4E;
  --slate-100:  #262C3D;
  --parchment:  #12151F;
  --paper:      #1A1E2B;
  --green-100: #133523; --amber-100: #3A2A14; --red-100: #3A1F1C;
}
[data-theme="dark"] .kmgc-card,
[data-theme="dark"] .kmgc-summary-card,
[data-theme="dark"] .kmgc-chart-card,
[data-theme="dark"] .kmgc-report-filter,
[data-theme="dark"] .kmgc-modal,
[data-theme="dark"] .kmgc-dropdown-panel{ background: var(--paper); border-color: var(--slate-200); }
[data-theme="dark"] .kmgc-topbar{ background: var(--paper); border-color: var(--slate-200); }
[data-theme="dark"] table.kmgc-data tr:hover td{ background: var(--slate-100); }
[data-theme="dark"] .kmgc-field input,
[data-theme="dark"] .kmgc-report-filter-row select,
[data-theme="dark"] .kmgc-report-filter-row input[type="date"]{ background: var(--parchment); color: var(--ink); border-color: var(--slate-200); }
[data-theme="dark"].kmgc-portal--dashboard,
[data-theme="dark"].kmgc-portal--empty{ background: var(--parchment); }
[data-theme="dark"] .kmgc-login-card{ background: var(--paper); }

/* Each dashboard panel/nav item carries its own module accent, independent
   of the sidebar's default (admin navy) chrome — e.g. the Church panel's
   card-icon and badges tint indigo even though the sidebar stays navy. */
.kmgc-content-panel[data-accent="church"]{ --portal-accent: var(--church-accent); --portal-accent-soft: var(--church-soft); }
.kmgc-content-panel[data-accent="institute"]{ --portal-accent: var(--inst-accent); --portal-accent-soft: var(--inst-soft); }
.kmgc-content-panel[data-accent="daycare"]{ --portal-accent: var(--dc-accent); --portal-accent-soft: var(--dc-soft); }
.kmgc-content-panel[data-accent="admin"]{ --portal-accent: var(--admin-accent); --portal-accent-soft: var(--admin-soft); }

/* --- Scoped element resets (never touch the surrounding theme) --- */
.kmgc-portal-page, .kmgc-portal-page *{ box-sizing: border-box; }
.kmgc-portal-page h1, .kmgc-portal-page h2, .kmgc-portal-page h3, .kmgc-portal-page h4{
  font-family: var(--font-display); font-weight:600; margin:0; color: var(--ink); letter-spacing:-0.01em;
}
.kmgc-portal-page p{ margin:0; }
.kmgc-portal-page a{ color: var(--portal-accent); text-decoration:none; }
.kmgc-portal-page a:hover{ text-decoration:underline; }
.kmgc-portal-page button{ font-family:inherit; cursor:pointer; }
.kmgc-portal-page input{ font-family:inherit; }
.kmgc-portal-page a:focus-visible, .kmgc-portal-page button:focus-visible, .kmgc-portal-page input:focus-visible{
  outline: 2px solid var(--admin-accent); outline-offset: 2px;
}
/* Fullscreen template body: no theme chrome to fight, safe to own the page. */
body.kmgc-portal-fullscreen-body{ margin:0; background: var(--parchment, #F5F6FA); }

/* ---------------------------------------------------------------------- */
/* Buttons / cards / badges / fields (shared building blocks)              */
/* ---------------------------------------------------------------------- */
.kmgc-portal-page .kmgc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; padding:10px 18px; font-size:14px; font-weight:600;
  border-radius: var(--radius-sm); white-space:nowrap; text-decoration:none;
}
.kmgc-portal-page .kmgc-btn-primary{ background: var(--portal-950); color:#fff; }
.kmgc-portal-page .kmgc-btn-primary:hover{ filter:brightness(1.1); text-decoration:none; }
.kmgc-portal-page .kmgc-btn-accent{ background: var(--portal-accent); color:#fff; }
.kmgc-portal-page .kmgc-btn-accent:hover{ filter:brightness(1.08); text-decoration:none; }
.kmgc-portal-page .kmgc-btn-outline{ background: transparent; color: var(--ink); border-color: var(--slate-200); }
.kmgc-portal-page .kmgc-btn-outline:hover{ border-color: var(--slate); background: var(--slate-100); text-decoration:none; }
.kmgc-portal-page .kmgc-btn-block{ width:100%; }

.kmgc-portal-page .kmgc-card{ background: var(--paper); border: 1px solid var(--slate-200); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.kmgc-portal-page .kmgc-card-pad{ padding: 20px 22px; }
.kmgc-portal-page .kmgc-card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 16px 20px; border-bottom:1px solid var(--slate-100); }
.kmgc-portal-page .kmgc-card-header h3{ font-size:15px; }
.kmgc-portal-page .kmgc-card-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; background: var(--portal-accent-soft); color: var(--portal-accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.kmgc-portal-page .kmgc-card-body{ padding: 18px 20px; }

.kmgc-portal-page .kmgc-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; line-height:1.6; }
.kmgc-portal-page .kmgc-badge-green{ background:var(--green-100); color:var(--green-700); }
.kmgc-portal-page .kmgc-badge-amber{ background:var(--amber-100); color:var(--amber-700); }
.kmgc-portal-page .kmgc-badge-red{ background:var(--red-100); color:var(--red-700); }
.kmgc-portal-page .kmgc-badge-slate{ background:var(--slate-100); color:var(--ink-soft); }

.kmgc-portal-page .kmgc-profile-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px 24px; margin-top:14px; }
.kmgc-portal-page .kmgc-profile-list dt{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:700; }
.kmgc-portal-page .kmgc-profile-list dd{ margin:4px 0 0; font-size:13.5px; font-weight:500; color:var(--ink); }

.kmgc-portal-page .kmgc-table-wrap{ overflow-x:auto; }
.kmgc-portal-page table.kmgc-data{ width:100%; border-collapse:collapse; font-size:13.5px; }
.kmgc-portal-page table.kmgc-data th{ text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color: var(--slate); font-weight:700; padding: 10px 14px; border-bottom:1px solid var(--slate-200); white-space:nowrap; }
.kmgc-portal-page table.kmgc-data td{ padding: 12px 14px; border-bottom:1px solid var(--slate-100); vertical-align:middle; }
.kmgc-portal-page table.kmgc-data tr:hover td{ background: var(--slate-100); }

.kmgc-portal-page .kmgc-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.kmgc-portal-page .kmgc-field label{ font-size:12.5px; font-weight:600; color: var(--ink-soft); }
.kmgc-portal-page .kmgc-field input{ border:1px solid var(--slate-200); border-radius:8px; padding:10px 12px; font-size:13.5px; background:#fff; color:var(--ink); outline:none; width:100%; }
.kmgc-portal-page .kmgc-field input:focus{ border-color: var(--portal-accent); box-shadow: 0 0 0 3px var(--portal-accent-soft); }
.kmgc-portal-page .kmgc-field-icon{ position:relative; }
.kmgc-portal-page .kmgc-field-icon svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--slate); pointer-events:none; }
.kmgc-portal-page .kmgc-field-icon input{ padding-left:36px; }

/* ---------------------------------------------------------------------- */
/* Landing page ("please select a portal") — shown to a logged-out visitor */
/* before the login form. See public/templates/portal-landing.php.         */
/* ---------------------------------------------------------------------- */
.kmgc-portal-page.kmgc-portal--landing{
  min-height:100vh; position:relative; overflow-x:hidden;
  background: linear-gradient(175deg, var(--brand-navy-950), var(--brand-navy-900));
}
.kmgc-portal-page .kmgc-arch-bg{ position:fixed; top:0; right:0; height:100%; width:46%; opacity:.10; pointer-events:none; }
.kmgc-portal-page .kmgc-portal-shell{ max-width:1180px; margin:0 auto; padding: 48px 24px 70px; position:relative; z-index:1; }
.kmgc-portal-page .kmgc-org-header{ text-align:center; margin-bottom:30px; }
.kmgc-portal-page .kmgc-crest-lg{ width:88px; height:auto; margin:0 auto 12px; display:block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.kmgc-portal-page .kmgc-org-header h1{ font-family: var(--font-body); font-weight:800; font-size:26px; line-height:1.18; color:#fff; text-transform:uppercase; letter-spacing:.01em; }
.kmgc-portal-page .kmgc-tagline{ font-size:13px; letter-spacing:.02em; color: #E8A93D; font-weight:700; margin-top:6px; }
.kmgc-portal-page .kmgc-tagline .kmgc-sep{ margin:0 8px; opacity:.7; }
.kmgc-portal-page .kmgc-org-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 26px; margin-top:16px; color: rgba(255,255,255,.85); font-size:13px; }
.kmgc-portal-page .kmgc-org-meta span{ display:flex; align-items:center; gap:7px; }
.kmgc-portal-page .kmgc-org-meta svg{ width:14px; height:14px; color:#fff; flex-shrink:0; }
.kmgc-portal-page .kmgc-director-line{ margin-top:8px; font-size:13px; color: rgba(255,255,255,.85); }
.kmgc-portal-page .kmgc-director-line strong{ color:#fff; font-weight:700; }
.kmgc-portal-page .kmgc-director-line .kmgc-kv-sep{ margin:0 10px; color: rgba(255,255,255,.4); }
.kmgc-portal-page .kmgc-prompt-line{ text-align:center; color: rgba(255,255,255,.9); font-size:14px; margin: 26px 0 20px; }

.kmgc-portal-page .kmgc-portal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; justify-content:center; }
@media (max-width:900px){ .kmgc-portal-page .kmgc-portal-grid{ grid-template-columns:1fr; } }

/* When the developer has only enabled one or two modules, the fixed
   3-column grid otherwise leaves the remaining card(s) pinned to the
   left with empty grid tracks beside them -- center them instead. */
.kmgc-portal-page .kmgc-portal-grid[data-card-count="1"]{ grid-template-columns: minmax(0,340px); }
.kmgc-portal-page .kmgc-portal-grid[data-card-count="2"]{ grid-template-columns: repeat(2, minmax(0,340px)); }
@media (max-width:900px){
	.kmgc-portal-page .kmgc-portal-grid[data-card-count="1"],
	.kmgc-portal-page .kmgc-portal-grid[data-card-count="2"]{ grid-template-columns:1fr; max-width:340px; margin:0 auto; }
}

.kmgc-portal-page .kmgc-portal-card{
  background:#fff; border:none; border-radius:14px; padding: 28px 24px 24px; text-align:center; position:relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.22); transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
}
.kmgc-portal-page .kmgc-portal-card:hover{ transform: translateY(-4px); text-decoration:none; }
.kmgc-portal-page .kmgc-portal-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:#fff; border:2px solid currentColor; }
.kmgc-portal-page .kmgc-portal-icon svg{ width:30px; height:30px; }
.kmgc-portal-page .kmgc-portal-card h2{ font-size:16.5px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.02em; font-weight:800; }
.kmgc-portal-page .kmgc-portal-card .kmgc-desc{ font-size:13px; color: var(--ink-soft); line-height:1.6; margin-bottom:22px; }
.kmgc-portal-page .kmgc-portal-enter{
  width:100%; padding:13px; border-radius:10px; font-size:13.5px; font-weight:700; border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.kmgc-portal-page .kmgc-portal-card:hover .kmgc-portal-enter{ filter:brightness(1.06); }
.kmgc-portal-page .kmgc-portal-card[data-key="church"] .kmgc-portal-icon{ color: var(--church-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="church"] h2{ color: var(--church-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="church"] .kmgc-portal-enter{ background: linear-gradient(180deg, var(--church-accent-2), var(--church-accent)); }
.kmgc-portal-page .kmgc-portal-card[data-key="institute"] .kmgc-portal-icon{ color: var(--inst-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="institute"] h2{ color: var(--inst-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="institute"] .kmgc-portal-enter{ background: linear-gradient(180deg, var(--inst-accent-2), var(--inst-accent)); }
.kmgc-portal-page .kmgc-portal-card[data-key="daycare"] .kmgc-portal-icon{ color: var(--dc-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="daycare"] h2{ color: var(--dc-accent); }
.kmgc-portal-page .kmgc-portal-card[data-key="daycare"] .kmgc-portal-enter{ background: linear-gradient(180deg, var(--dc-accent-2), var(--dc-accent)); }

.kmgc-portal-page .kmgc-admin-strip{ display:flex; justify-content:center; margin-top:22px; }
.kmgc-portal-page .kmgc-admin-strip .kmgc-btn{
  background: rgba(255,255,255,.03); color:#fff; border: 1.5px solid rgba(255,255,255,.55);
  padding: 13px 30px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; border-radius:10px;
}
.kmgc-portal-page .kmgc-admin-strip .kmgc-btn:hover{ background: rgba(255,255,255,.10); text-decoration:none; }
.kmgc-portal-page .kmgc-foot-note{ text-align:center; margin-top:36px; font-size:12px; color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------------- */
/* Login screen                                                             */
/* ---------------------------------------------------------------------- */
.kmgc-portal-page.kmgc-portal--login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: linear-gradient(175deg, var(--brand-navy-950), var(--brand-navy-900));
}
.kmgc-portal-page .kmgc-login-shell{ width:100%; max-width:400px; }
.kmgc-portal-page .kmgc-back-link{ display:flex; align-items:center; gap:6px; color: rgba(255,255,255,.75); font-size:13px; margin-bottom:22px; }
.kmgc-portal-page .kmgc-back-link:hover{ color:#fff; text-decoration:none; }
.kmgc-portal-page .kmgc-back-link svg{ width:15px; height:15px; }
.kmgc-portal-page .kmgc-org-tag{ text-align:center; margin-bottom:22px; }
.kmgc-portal-page .kmgc-org-tag .kmgc-login-crest{ width:58px; height:auto; margin:0 auto 12px; display:block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.kmgc-portal-page .kmgc-org-tag h1{ color:#fff; font-size:18px; }
.kmgc-portal-page .kmgc-org-tag .kmgc-portal-name{ display:inline-block; margin-top:10px; background: var(--portal-accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.kmgc-portal-page .kmgc-login-card{ background:#fff; border-radius:18px; padding: 30px 28px 26px; box-shadow: var(--shadow-pop); }
.kmgc-portal-page .kmgc-login-card h2{ font-size:20px; text-align:center; margin-bottom:2px; }
.kmgc-portal-page .kmgc-login-card .kmgc-sub{ text-align:center; color:var(--slate); font-size:13px; margin-bottom:20px; }
.kmgc-portal-page .kmgc-row-between{ display:flex; align-items:center; justify-content:space-between; margin: 4px 0 18px; font-size:12.5px; }
.kmgc-portal-page .kmgc-remember{ display:flex; align-items:center; gap:7px; color: var(--ink-soft); }
.kmgc-portal-page .kmgc-row-between a{ font-weight:600; }
.kmgc-portal-page .kmgc-login-error{ background: var(--red-100); color: var(--red-700); border-radius:9px; padding:10px 12px; font-size:12.5px; margin-bottom:16px; text-align:left; }
.kmgc-portal-page .kmgc-foot-copy{ text-align:center; color: rgba(255,255,255,.6); font-size:11.5px; margin-top:20px; }

/* ---------------------------------------------------------------------- */
/* Empty state ("no record linked")                                        */
/* ---------------------------------------------------------------------- */
.kmgc-portal-page.kmgc-portal--empty{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 40px 24px; background: var(--parchment); }
.kmgc-portal-page.kmgc-portal--empty .kmgc-card-pad{ max-width:440px; }
.kmgc-portal-page.kmgc-portal--empty .kmgc-empty-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:14px; background: var(--admin-soft); color: var(--admin-accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:22px; font-weight:700;
}

/* ---------------------------------------------------------------------- */
/* Dashboard: responsive sidebar app-shell                                  */
/* ---------------------------------------------------------------------- */
.kmgc-portal-page.kmgc-portal--dashboard{ min-height:100vh; background: var(--parchment); }
.kmgc-app-shell{ display:flex; min-height:100vh; }

.kmgc-sidebar{
  width: 258px; flex-shrink:0; background: linear-gradient(180deg, var(--portal-950), var(--portal-950));
  color: #E8ECF5; display:flex; flex-direction:column; position: sticky; top:0; height:100vh; z-index: 50;
}
.kmgc-sidebar-brand{ display:flex; align-items:center; gap:10px; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.10); min-height: 64px; }
.kmgc-sidebar-brand .kmgc-crest{ width:34px; height:34px; border-radius:8px; flex-shrink:0; background: var(--portal-accent); display:flex; align-items:center; justify-content:center; color: #fff; font-family:var(--font-display); font-weight:700; font-size:16px; }
.kmgc-sidebar-brand .kmgc-brand-text{ line-height:1.15; overflow:hidden; }
.kmgc-sidebar-brand .kmgc-brand-text strong{ display:block; font-size:12.5px; letter-spacing:.02em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kmgc-sidebar-brand .kmgc-brand-text span{ font-size:10.5px; color: rgba(255,255,255,.6); white-space:nowrap; }
.kmgc-sidebar-brand .kmgc-crest-image{ width:34px; height:34px; border-radius:8px; flex-shrink:0; object-fit:contain; background:#fff; padding:2px; }

/* Sidebar profile block: org logo/name sits above this (kmgc-sidebar-brand),
   this is the bigger user photo frame + name underneath it, requested so a
   person can tell at a glance whose portal they're in as well as who is
   logged in. Shared by every portal type (Member/Student/Parent self-service
   and every Admin panel) since they all render through the same
   portal-dashboard.php shell. */
.kmgc-sidebar-profile{ display:flex; flex-direction:column; align-items:center; gap:8px; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.kmgc-sidebar-profile-trigger{ position:relative; border:none; background:none; padding:0; cursor:pointer; border-radius:14px; }
.kmgc-sidebar-profile-photo{
  width:72px; height:72px; border-radius:14px; background: var(--portal-accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:24px; font-family:var(--font-display); background-size:cover; background-position:center; border:2px solid rgba(255,255,255,.18);
}
/* A square-cornered frame is the default (matches the rest of the portal's
   card language); .kmgc-sidebar-profile-photo--round is available if an
   organization prefers a circular DP instead -- see portal-dashboard.php. */
.kmgc-sidebar-profile-photo--round{ border-radius:50%; }
.kmgc-sidebar-profile-edit-badge{
  position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background: var(--portal-accent); color:#fff;
  font-size:11px; display:flex; align-items:center; justify-content:center; border:2px solid var(--portal-950, #0b1c33);
}
.kmgc-sidebar-profile-name{ font-size:12.5px; font-weight:600; color:#fff; text-align:center; line-height:1.25; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The "MY ACCOUNT" / current-portal pill: a rounded, centered, uppercase
   badge -- the sidebar's one clear section divider between the identity
   block above (org logo + user photo) and the navigation below. */
.kmgc-sidebar-tag{
  margin: 14px 16px 10px; padding: 6px 14px; font-size:10.5px; font-weight:700; letter-spacing:.09em; color: #fff;
  background: var(--portal-accent); border-radius:999px; display:block; text-align:center; width:fit-content; margin-left:auto; margin-right:auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.kmgc-sidebar-nav{ flex:1; overflow-y:auto; padding: 6px 12px 16px; }
.kmgc-nav-group{ margin: 3px 0; }
.kmgc-nav-link{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:none; background:none;
  padding: 10px 12px; margin: 0; border-radius: 10px; font-size:13.5px; font-weight:500; color: rgba(232,236,245,.82);
  transition: background .15s ease, color .15s ease;
}
.kmgc-nav-link .kmgc-nav-icon{
  width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.10); color:#fff; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition: background .15s ease, color .15s ease;
}
.kmgc-nav-link .kmgc-nav-icon svg{ width:15px; height:15px; }
.kmgc-nav-link .kmgc-nav-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kmgc-nav-link .kmgc-nav-chevron{ width:14px; height:14px; flex-shrink:0; color: rgba(232,236,245,.45); transition: transform .18s ease, color .15s ease; }
.kmgc-nav-link .kmgc-nav-chevron svg{ width:100%; height:100%; }
.kmgc-nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.kmgc-nav-link:hover .kmgc-nav-chevron{ color: rgba(255,255,255,.8); }
.kmgc-nav-link.kmgc-active{ background: var(--portal-accent); color: #fff; font-weight:600; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.kmgc-nav-link.kmgc-active .kmgc-nav-icon{ background: rgba(255,255,255,.22); color:#fff; }
.kmgc-nav-link.kmgc-active .kmgc-nav-chevron{ color:#fff; transform: rotate(180deg); }

/* Second-level tabs, nested under their panel's own sidebar entry (an
   accordion: only the active panel's group is expanded) — replaces the old
   horizontal pill row that used to sit above the panel's content. */
.kmgc-nav-subitems{ display:none; flex-direction:column; margin: 4px 0 6px; padding-left:12px; }
.kmgc-nav-subitems.kmgc-open{ display:flex; }
.kmgc-nav-sublink{
  display:flex; align-items:center; justify-content:space-between; gap:9px; width:100%; text-align:left; border:none; background:none;
  padding: 8px 12px 8px 24px; margin: 1px 0; border-radius: 8px; font-size:12.5px; font-weight:500; color: rgba(232,236,245,.62);
  position:relative; transition: background .15s ease, color .15s ease;
}
.kmgc-nav-sublink > span:not(.kmgc-nav-item-icon){ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A small connector dot instead of a full vertical rail — reads cleaner at
   this indent depth and matches the flatter, less boxy look of a plain
   indented list rather than a nested tree. Hidden once a tab carries its own
   emoji icon (kmgc-nav-item-icon) — the icon already anchors the row, so the
   dot would just be visual clutter next to it. */
.kmgc-nav-sublink::before{
  content:''; position:absolute; left:11px; top:50%; width:4px; height:4px; border-radius:50%; background: rgba(232,236,245,.35);
  transform: translateY(-50%); transition: background .15s ease;
}
.kmgc-nav-sublink:has(.kmgc-nav-item-icon)::before{ display:none; }
.kmgc-nav-sublink:hover{ background: rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.kmgc-nav-sublink:hover::before{ background: rgba(255,255,255,.7); }
.kmgc-nav-sublink.kmgc-active{ background: rgba(255,255,255,.14); color:#fff; font-weight:600; box-shadow: inset 3px 0 0 var(--portal-accent, #fff); }
.kmgc-nav-sublink.kmgc-active::before{ background: #fff; }

/* Third-level group (e.g. Students, Finance, Transportation) nested inside a
   panel's own second-level tab list — see .kmgc-nav-subitems above. Several
   of these can be open at once within the same panel, independent of each
   other. Ungrouped tabs never produce this markup at all. Given a panel can
   now carry many of these (Church Admin has ~9), a touch more vertical
   breathing room between them keeps a long sidebar from reading as one dense
   block of text. */
.kmgc-nav-subgroup{ margin: 2px 0; }
.kmgc-nav-subgroup + .kmgc-nav-subgroup{ margin-top:4px; }
.kmgc-nav-subgroup-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:9px; width:100%; text-align:left; border:none; background:none;
  padding: 9px 12px 9px 24px; margin: 0; border-radius: 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color: rgba(232,236,245,.7); transition: background .15s ease, color .15s ease;
}
.kmgc-nav-subgroup-toggle > span:not(.kmgc-nav-item-icon):not(.kmgc-nav-chevron){ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kmgc-nav-subgroup-toggle:hover{ background: rgba(255,255,255,.07); color:#fff; }
.kmgc-nav-subgroup-chevron{ width:12px; height:12px; color: rgba(232,236,245,.45); transition: transform .18s ease, color .15s ease; }
.kmgc-nav-subgroup.kmgc-open > .kmgc-nav-subgroup-toggle{ color:#fff; background: rgba(255,255,255,.05); }
.kmgc-nav-subgroup.kmgc-open > .kmgc-nav-subgroup-toggle .kmgc-nav-subgroup-chevron{ color: rgba(255,255,255,.8); transform: rotate(180deg); }
/* Smooth reveal instead of an abrupt display:none/flex snap — max-height is
   given generous headroom (a group's leaf list is short text, never close to
   this) so the transition always has room to animate in either direction,
   without needing to measure real content height in CSS/JS. */
.kmgc-nav-subgroup-items{
  display:flex; flex-direction:column; padding-left:12px; margin:0; overflow:hidden;
  max-height:0; opacity:0; transition: max-height .22s ease, opacity .18s ease;
}
.kmgc-nav-subgroup.kmgc-open > .kmgc-nav-subgroup-items{ max-height:1200px; opacity:1; }
.kmgc-nav-subgroup-items .kmgc-nav-sublink{ padding-left:32px; font-size:12px; }
.kmgc-nav-subgroup-items .kmgc-nav-sublink::before{ left:19px; }

/* Decorative per-group / per-tab emoji (kmgc_portal_group_icon()/
   kmgc_portal_flat_tab_icon() in includes/helpers.php) — purely visual, sits
   before the label text exactly like the top-level .kmgc-nav-icon does, just
   smaller to match this indent depth. aria-hidden in the markup since the
   label text already conveys the same information. */
.kmgc-nav-item-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:18px; font-size:13px; line-height:1; font-style:normal;
}

.kmgc-sidebar-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.10); }
.kmgc-sidebar-foot a{ display:flex; align-items:center; gap:10px; font-size:13px; color: rgba(232,236,245,.7); padding:6px 4px; }
.kmgc-sidebar-foot a:hover{ color:#fff; text-decoration:none; }

.kmgc-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.kmgc-topbar{ display:flex; align-items:center; gap:14px; padding: 12px 24px; background: var(--paper); border-bottom:1px solid var(--slate-200); position: sticky; top:0; z-index:40; }
.kmgc-topbar-heading{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kmgc-breadcrumb{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color: var(--slate); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kmgc-breadcrumb-sep{ margin:0 6px; color: var(--slate-200); }
.kmgc-breadcrumb-tab{ color: var(--portal-accent); }
.kmgc-topbar h1{ font-size:19px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kmgc-sb-toggle{ display:none; background:none; border:1px solid var(--slate-200); border-radius:8px; padding:7px 10px; color:var(--ink-soft); font-size:16px; line-height:1; }
.kmgc-sb-toggle:hover{ background: var(--slate-100); }
.kmgc-topbar-profile{ display:flex; align-items:center; gap:10px; }
.kmgc-avatar-trigger{ position:relative; border:none; background:none; padding:0; cursor:pointer; border-radius:50%; }
.kmgc-avatar-trigger .kmgc-avatar{
  width:36px; height:36px; border-radius:50%; background: var(--portal-950); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px; font-family:var(--font-display); flex-shrink:0; background-size:cover; background-position:center;
}
.kmgc-avatar-edit-badge{
  position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%; background: var(--portal-accent); color:#fff;
  font-size:9px; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
}
.kmgc-topbar-profile .kmgc-who{ line-height:1.2; }
.kmgc-topbar-profile .kmgc-who strong{ display:block; font-size:13px; }
.kmgc-topbar-profile .kmgc-who span{ font-size:11.5px; color:var(--slate); }

/* Topbar date — shown on every portal type (Church, Institute, Day Care,
   Admin), since this header markup is the one shared shell they all render
   through (see public/templates/portal-dashboard.php). */
.kmgc-topbar-date{ font-size:12.5px; font-weight:600; color: var(--ink-soft); white-space:nowrap; padding:0 2px; }

/* Topbar notification bell + its dropdown (KMGC_Notification_Center). */
.kmgc-dropdown{ position:relative; }
.kmgc-bell-trigger{ position:relative; border:none; background:none; padding:6px; cursor:pointer; border-radius:8px; color: var(--ink-soft); display:flex; }
.kmgc-bell-trigger:hover{ background: var(--slate-100); }
.kmgc-bell-icon{ width:20px; height:20px; }
.kmgc-bell-badge{
  position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background: var(--red-600); color:#fff;
  font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper); line-height:1;
}
.kmgc-dropdown-panel{
  display:none; position:absolute; top: calc(100% + 8px); right:0; width:330px; max-width:min(330px, 90vw); background: var(--paper);
  border:1px solid var(--slate-200); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index:210; overflow:hidden;
}
.kmgc-dropdown-panel.kmgc-open{ display:block; }
.kmgc-dropdown-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--slate-200); }
.kmgc-dropdown-header strong{ font-size:13.5px; }
.kmgc-dropdown-header-action{ border:none; background:none; color: var(--portal-accent); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.kmgc-dropdown-header-action:hover{ text-decoration:underline; }
.kmgc-dropdown-list{ max-height:360px; overflow-y:auto; }
.kmgc-dropdown-empty{ padding:24px 14px; text-align:center; color: var(--slate); font-size:12.5px; margin:0; }
.kmgc-dropdown-item{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--slate-100); color: var(--ink); }
.kmgc-dropdown-item:last-child{ border-bottom:none; }
.kmgc-dropdown-item:hover{ background: var(--slate-100); text-decoration:none; }
.kmgc-dropdown-item-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:transparent; }
.kmgc-dropdown-item.kmgc-unread .kmgc-dropdown-item-dot{ background: var(--portal-accent); }
.kmgc-dropdown-item-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kmgc-dropdown-item-title{ font-size:12.5px; font-weight:600; }
.kmgc-dropdown-item-message{ font-size:12px; color: var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kmgc-dropdown-item-time{ font-size:11px; color: var(--slate); }

.kmgc-content{ padding: 22px 24px 60px; flex:1; }
.kmgc-content-panel{ display:none; }
.kmgc-content-panel.kmgc-active{ display:block; }

/* Second-level tab content (the tab list itself is nested in the sidebar —
   see .kmgc-nav-subitems above — this just shows/hides each tab's body). */
.kmgc-subtab-panel{ display:none; }
.kmgc-subtab-panel.kmgc-active{ display:block; }

/* Generic modal/popup component — used by the profile-picture upload popup
   and any profile-edit popup (see public/templates/portal-dashboard.php and
   public/templates/panels/church/profile.php). Reusable by any future
   module: any element can open a modal with data-modal-open="<id>". */
.kmgc-modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(4,10,24,.55); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.kmgc-modal-overlay.kmgc-open{ display:flex; }
body.kmgc-modal-open{ overflow:hidden; }
.kmgc-modal{
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
}
.kmgc-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--slate-200); }
.kmgc-modal-header h3{ font-size:16px; margin:0; }
.kmgc-modal-close{ border:none; background:none; font-size:22px; line-height:1; color: var(--slate); cursor:pointer; padding:2px 6px; }
.kmgc-modal-close:hover{ color: var(--ink); }
.kmgc-modal-body{ padding:20px; }

/* Dashboard summary cards grid (Member Portal). */
.kmgc-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.kmgc-summary-card{ background: var(--paper); border:1px solid var(--slate-200); border-radius: var(--radius-md); padding:16px 18px; box-shadow: var(--shadow-card); }
.kmgc-summary-card .kmgc-summary-value{ font-family: var(--font-display); font-size:24px; font-weight:500; color: var(--ink); }
.kmgc-summary-card .kmgc-summary-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--slate); font-weight:600; margin-top:4px; }
.kmgc-progress-bar{ background: var(--slate-100); border-radius:999px; height:8px; overflow:hidden; margin-top:8px; }
.kmgc-progress-bar > span{ display:block; height:100%; background: var(--portal-accent); }

/* Statistical diagrams (KMGC_Chart_Helper::donut()/hbar()) — same
   dependency-free markup as the wp-admin dashboards, restyled to match the
   portal's own card/typography tokens. */
.kmgc-chart-row{ display:flex; flex-wrap:wrap; gap:16px; margin: 8px 0 20px; }
.kmgc-chart-card{ background: var(--paper); border:1px solid var(--slate-200); border-radius: var(--radius-md); padding:16px 18px; box-shadow: var(--shadow-card); flex:1 1 280px; min-width:260px; }
.kmgc-chart-empty{ color: var(--slate); font-style:italic; font-size:13px; }

.kmgc-chart-donut{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.kmgc-chart-donut__svg{ width:120px; height:120px; flex-shrink:0; }
.kmgc-chart-donut__total{ font-size:19px; font-weight:700; fill: var(--ink); }
.kmgc-chart-donut__total-label{ font-size:7.5px; letter-spacing:.03em; text-transform:uppercase; fill: var(--slate); }

.kmgc-chart-legend{ list-style:none; margin:0; padding:0; flex:1; min-width:140px; }
.kmgc-chart-legend__item{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; }
.kmgc-chart-swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.kmgc-chart-legend__label{ flex:1; color: var(--ink); }
.kmgc-chart-legend__value{ color: var(--slate); font-weight:500; white-space:nowrap; }

.kmgc-chart-hbar__row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.kmgc-chart-hbar__label{ width:120px; flex-shrink:0; font-size:12.5px; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kmgc-chart-hbar__track{ flex:1; background: var(--slate-100); border-radius:999px; height:12px; overflow:hidden; }
.kmgc-chart-hbar__fill{ display:block; height:100%; border-radius:999px; min-width:6px; }
.kmgc-chart-hbar__value{ width:64px; text-align:right; flex-shrink:0; font-size:12.5px; font-weight:500; color: var(--ink); }

.kmgc-chart-compare__legend{ display:flex; gap:16px; font-size:12px; color: var(--slate); margin-bottom:14px; }
.kmgc-chart-compare__legend i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.kmgc-chart-compare__row{ display:flex; align-items:flex-end; gap:6px; height:150px; overflow-x:auto; padding-bottom:2px; }
.kmgc-chart-compare__col{ flex:1 0 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:28px; }
.kmgc-chart-compare__bars{ display:flex; align-items:flex-end; gap:2px; height:120px; width:100%; justify-content:center; }
.kmgc-chart-compare__bars span{ display:block; width:8px; border-radius:2px 2px 0 0; min-height:2px; }
.kmgc-chart-compare__label{ margin-top:6px; font-size:10.5px; color: var(--slate); white-space:nowrap; }

/* Activity Report period filter (KMGC_Report_Period) — shared across the
   Church/Institute/Day Care "My Reports" tabs. */
.kmgc-report-filter{ background: var(--paper); border:1px solid var(--slate-200); border-radius: var(--radius-md); padding:14px 16px; box-shadow: var(--shadow-card); }
.kmgc-report-filter-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.kmgc-report-filter-row label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--slate); }
.kmgc-report-filter-row select,
.kmgc-report-filter-row input[type="date"]{ font: inherit; font-size:13px; text-transform:none; letter-spacing:0; font-weight:400; color: var(--ink); background: var(--paper); border:1px solid var(--slate-200); border-radius:7px; padding:7px 9px; min-width:130px; }
.kmgc-report-filter-row .kmgc-btn{ padding:8px 16px; }

.kmgc-form-actions{ margin-top:8px; }
.kmgc-form-success{ background: var(--green-100); color: var(--green-700); border-radius:9px; padding:10px 12px; font-size:12.5px; margin-bottom:16px; }
.kmgc-form-error{ background: var(--red-100); color: var(--red-700); border-radius:9px; padding:10px 12px; font-size:12.5px; margin-bottom:16px; }
.kmgc-note{ color: var(--slate); font-size:12px; margin-top:14px; display:block; }
.kmgc-child + .kmgc-child{ border-top:1px solid var(--slate-100); margin-top:16px; padding-top:16px; }

.kmgc-sidebar-backdrop{ display:none; }

@media (max-width: 900px){
  .kmgc-sidebar{ position:fixed; left:0; top:0; height:100vh; transform: translateX(-100%); box-shadow: var(--shadow-pop); transition: transform .18s ease; z-index:60; }
  .kmgc-sidebar.kmgc-mobile-open{ transform:none; }
  .kmgc-sidebar-backdrop{ display:block; position:fixed; inset:0; background:rgba(4,10,24,.5); z-index:55; opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .kmgc-sidebar-backdrop.kmgc-open{ opacity:1; pointer-events:auto; }
  .kmgc-sb-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 640px){
  .kmgc-topbar{ padding:10px 14px; gap:8px; }
  .kmgc-topbar h1{ font-size:15px; }
  .kmgc-breadcrumb{ font-size:10px; }
  .kmgc-topbar-profile .kmgc-who{ display:none; }
  .kmgc-topbar-date{ display:none; }
  .kmgc-content{ padding:16px 14px 50px; }
  .kmgc-login-shell{ max-width:100%; }
  .kmgc-portal-shell{ padding: 32px 16px 50px; }
}

/* Form keeper (form-keeper.js): the field a message is about stays visible and marked. */
.kmgc-invalid input, .kmgc-invalid select, .kmgc-invalid textarea { border-color:#b91c1c !important; background:#fef2f2; box-shadow:0 0 0 3px rgba(185,28,28,.12); }
.kmgc-invalid-msg { color:#b91c1c; font-size:12px; margin-top:4px; }
.kmgc-keeper-banner { margin-bottom:14px; }

/* ==========================================================================
   RESPONSIVE LAYER (v0.95.0) -- phones, tablets, laptops, large screens.
   Breakpoints: <=1100 compact desktop/tablet-landscape, <=900 tablet/phone
   (off-canvas sidebar), <=640 phone, <=420 small phone. Nothing here changes
   the desktop (>1100px) layout except the large-screen content cap.
   ========================================================================== */
.kmgc-portal-page{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.kmgc-portal-page img, .kmgc-portal-page svg, .kmgc-portal-page canvas, .kmgc-portal-page video, .kmgc-portal-page iframe{ max-width:100%; }
.kmgc-portal-page img, .kmgc-portal-page video, .kmgc-portal-page iframe{ height:auto; }
.kmgc-portal-page iframe{ border:0; }
.kmgc-portal-page .kmgc-content-panel{ min-width:0; overflow-wrap:anywhere; }
.kmgc-portal-page .kmgc-content-panel table, .kmgc-portal-page .kmgc-content-panel pre{ overflow-wrap:normal; }
.kmgc-portal-page pre{ overflow-x:auto; max-width:100%; }

/* Controls inside panels: one consistent, fluid style for every input type
   (the base .kmgc-field rule only styled <input>). */
.kmgc-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
.kmgc-content-panel select,
.kmgc-content-panel textarea{
  max-width:100%; min-width:0; font-family:inherit; font-size:13.5px; color:var(--ink);
  border:1px solid var(--slate-200); border-radius:8px; padding:9px 11px; background:var(--paper); box-sizing:border-box;
}
.kmgc-content-panel textarea{ width:100%; }
.kmgc-content-panel .kmgc-field select, .kmgc-content-panel .kmgc-field textarea{ width:100%; }
.kmgc-content-panel input[type="file"]{ max-width:100%; }
.kmgc-content-panel [style*="min-width:200px"], .kmgc-content-panel [style*="min-width:260px"]{ min-width:0 !important; max-width:100%; }

/* Wide screens: keep line lengths and card grids readable. */
@media (min-width: 1500px){
  .kmgc-content{ max-width:1500px; width:100%; margin:0 auto; }
}

/* Tabs / sub-tab bars and button rows never push the page wider. */
.kmgc-portal-page [role="tablist"], .kmgc-portal-page .kmgc-tabs, .kmgc-portal-page .kmgc-subtabs{ display:flex; flex-wrap:wrap; gap:6px; }

/* Table wrappers: smooth touch scrolling + a hint that there is more. */
.kmgc-portal-page .kmgc-table-wrap{ -webkit-overflow-scrolling:touch; max-width:100%; overscroll-behavior-x:contain; }

@media (max-width: 1100px){
  .kmgc-sidebar{ width:232px; }
  .kmgc-content{ padding:20px 18px 56px; }
  .kmgc-topbar{ padding:11px 18px; }
}

@media (max-width: 900px){
  .kmgc-sidebar{ width:min(300px, 86vw); height:100vh; height:100dvh; padding-bottom:env(safe-area-inset-bottom); overflow:hidden; }
  .kmgc-sidebar-nav{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .kmgc-nav-link, .kmgc-nav-sublink{ min-height:44px; }
  body.kmgc-nav-open{ overflow:hidden; }
  .kmgc-sb-toggle{ min-width:44px; min-height:44px; font-size:20px; flex-shrink:0; }
  .kmgc-topbar{ padding-top:max(10px, env(safe-area-inset-top)); }
  .kmgc-dropdown-panel{ position:fixed; top:60px; left:12px; right:12px; width:auto; max-width:none; }
  .kmgc-summary-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .kmgc-portal-page .kmgc-portal-shell{ padding:36px 18px 56px; }
  .kmgc-portal-page .kmgc-arch-bg{ display:none; }
  .kmgc-portal-page .kmgc-btn{ white-space:normal; text-align:center; max-width:100%; }
  .kmgc-content-panel form{ max-width:100%; }
  /* Many templates lay rows out with an inline display:flex and no wrap: let them wrap. */
  .kmgc-content-panel [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="nowrap"]){ flex-wrap:wrap !important; }
  .kmgc-content-panel [style*="display:flex"] > *{ min-width:0; }
  /* Chart / two-column layouts collapse to one column. */
  .kmgc-chart-row, .kmgc-portal-page [style*="grid-template-columns:2fr 1fr"]{ grid-template-columns:1fr !important; }
  .kmgc-chart-row{ display:grid; }
}

@media (max-width: 640px){
  .kmgc-portal-page{ font-size:15px; }
  .kmgc-content{ padding:14px 12px calc(56px + env(safe-area-inset-bottom)); }
  .kmgc-card{ padding-left:14px; padding-right:14px; }
  .kmgc-topbar h1{ font-size:15.5px; }
  .kmgc-topbar-profile .kmgc-who{ display:none; }

  /* 16px controls stop iOS Safari from zooming on focus; 44px = touch target. */
  .kmgc-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .kmgc-content-panel select, .kmgc-content-panel textarea,
  .kmgc-portal-page .kmgc-field input,
  .kmgc-report-filter-row select, .kmgc-report-filter-row input[type="date"]{ font-size:16px; min-height:44px; }
  .kmgc-portal-page .kmgc-btn, .kmgc-content-panel button, .kmgc-content-panel .kmgc-btn{ min-height:44px; }
  .kmgc-content-panel input[type="checkbox"], .kmgc-content-panel input[type="radio"]{ width:20px; height:20px; }
  .kmgc-content-panel a.kmgc-link-danger, .kmgc-content-panel td a{ display:inline-block; padding:6px 2px; }

  /* Inline filter/search toolbars (display:flex;flex-wrap) -> each control on its own full-width line. */
  .kmgc-content-panel form[style*="flex-wrap"] > input,
  .kmgc-content-panel form[style*="flex-wrap"] > select,
  .kmgc-content-panel form[style*="flex-wrap"] > label,
  .kmgc-content-panel form[style*="flex-wrap"] > .kmgc-btn,
  .kmgc-content-panel form[style*="flex-wrap"] > button{ flex:1 1 100%; width:100%; }
  .kmgc-content-panel form[style*="flex-wrap"] > label{ display:flex; flex-direction:column; gap:4px; }
  .kmgc-content-panel div[style*="display:flex"][style*="flex-wrap"] > .kmgc-btn{ flex:1 1 auto; }
  .kmgc-report-filter-row{ flex-direction:column; align-items:stretch; }
  .kmgc-report-filter-row label, .kmgc-report-filter-row .kmgc-btn{ width:100%; }
  .kmgc-form-actions{ display:flex; flex-direction:column; gap:8px; }
  .kmgc-form-actions .kmgc-btn, .kmgc-form-actions button{ width:100%; }

  /* Fixed-width inputs set inline become fluid. */
  .kmgc-content-panel [style*="width:100px"], .kmgc-content-panel [style*="width:110px"],
  .kmgc-content-panel [style*="width:140px"], .kmgc-content-panel [style*="width:150px"]{ max-width:100%; }

  /* Summary / stat grids: two per row. */
  .kmgc-summary-grid, .kmgc-stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px; }
  .kmgc-summary-card{ padding:12px 12px; }
  .kmgc-summary-card .kmgc-summary-value{ font-size:19px; }

  /* Modals become full-screen sheets. */
  .kmgc-modal-overlay{ padding:0; align-items:flex-end; }
  .kmgc-modal{ max-width:100%; max-height:94vh; max-height:94dvh; border-radius:var(--radius-md) var(--radius-md) 0 0; }

  /* Data tables turn into stacked label/value cards (labels filled by portal.js). */
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack),
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) tbody,
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) tr,
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td{ display:block; width:100% !important; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) thead{ display:none; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) tr{ border:1px solid var(--slate-200); border-radius:var(--radius-md); background:var(--paper); margin-bottom:10px; padding:4px 0; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td{ border-bottom:1px solid var(--slate-100); padding:8px 12px; display:flex; gap:12px; justify-content:space-between; align-items:center; text-align:right; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td:last-child{ border-bottom:0; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td[data-label]::before{ content:attr(data-label); flex:0 0 38%; max-width:38%; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); }
  /* Cells that hold a small form (e.g. Create login) stack label-over-content. */
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td.kmgc-cell-block{ display:block; text-align:left; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td.kmgc-cell-block::before{ display:block; max-width:none; margin-bottom:6px; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td.kmgc-cell-block form{ max-width:100%; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td[colspan]{ display:block; text-align:left; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td > *{ min-width:0; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td input, .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) td select{ max-width:60%; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) tr:hover td{ background:transparent; }
  .kmgc-portal-page table.kmgc-data.kmgc-stack:not(.kmgc-no-stack) tfoot td{ font-weight:700; }
  /* Dashboard summary table in Central overview, and any bare tables. */
  .kmgc-portal-page .kmgc-card table:not(.kmgc-data){ display:block; overflow-x:auto; max-width:100%; }
}

@media (max-width: 420px){
  .kmgc-summary-grid, .kmgc-stat-grid{ grid-template-columns:1fr !important; }
  .kmgc-topbar{ gap:6px; padding-left:10px; padding-right:10px; }
  .kmgc-breadcrumb{ display:none; }
  .kmgc-portal-page .kmgc-org-header h1{ font-size:21px; }
  .kmgc-portal-page .kmgc-portal-card{ padding:22px 16px 18px; }
}

/* Short landscape phones: let the sidebar header shrink so the menu stays reachable. */
@media (max-height: 480px) and (max-width: 900px){
  .kmgc-sidebar-profile{ display:none; }
  .kmgc-sidebar-brand{ min-height:48px; padding:8px 14px; }
}

/* Touch devices: no hover-only affordances, bigger hit areas. */
@media (hover: none) and (pointer: coarse){
  .kmgc-portal-page .kmgc-btn, .kmgc-nav-link{ min-height:44px; }
  .kmgc-modal-close{ min-width:44px; min-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .kmgc-sidebar, .kmgc-sidebar-backdrop, .kmgc-portal-card{ transition:none !important; }
}

/* ---- Teacher Portal (v0.100.0) ---- */
.kmgc-tp-title{ margin:0 0 12px; font-size:16px; }
.kmgc-tp-subnav{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.kmgc-tp-pill{ display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--slate-200); font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; background:#fff; }
.kmgc-tp-pill:hover{ border-color: var(--portal-accent); color: var(--portal-accent); }
.kmgc-tp-pill.kmgc-tp-active{ background: var(--portal-accent); border-color: var(--portal-accent); color:#fff; }
.kmgc-tp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:0 0 16px; }
.kmgc-tp-stat{ border:1px solid var(--slate-200); border-radius:12px; padding:14px; background:#fff; }
.kmgc-tp-stat-v{ font-size:24px; font-weight:500; color:var(--ink); }
.kmgc-tp-stat-l{ font-size:12px; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; }
.kmgc-tp-card{ padding:16px; margin:0 0 16px; }
.kmgc-tp-card h5, .kmgc-tp h5{ margin:16px 0 10px; font-size:14px; }
.kmgc-tp-card h5{ margin-top:0; }
.kmgc-tp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.kmgc-tp-grid label, .kmgc-tp-filter label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.kmgc-tp-grid .kmgc-tp-wide{ grid-column:1 / -1; }
.kmgc-tp .kmgc-tp-grid input, .kmgc-tp .kmgc-tp-grid select, .kmgc-tp .kmgc-tp-grid textarea, .kmgc-tp-filter select, .kmgc-tp-filter input, .kmgc-tp table.kmgc-data input[type=text], .kmgc-tp table.kmgc-data input[type=number], .kmgc-tp table.kmgc-data select{ border:1px solid var(--slate-200); border-radius:8px; padding:9px 11px; font-size:13.5px; background:#fff; color:var(--ink); width:100%; max-width:100%; box-sizing:border-box; }
.kmgc-tp-filter{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 14px; }
.kmgc-tp-filter label{ min-width:150px; }
.kmgc-tp-exportbar{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.kmgc-tp-exportbar form{ display:inline; margin:0; }
.kmgc-tp-exportrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--slate-100); }
.kmgc-tp-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.kmgc-tp-dl th{ width:200px; text-align:left; }
.kmgc-tp-perm{ border:1px solid var(--slate-200); border-radius:10px; padding:10px 14px; margin:0 0 12px; }
.kmgc-tp-permgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 16px; margin-top:6px; }
.kmgc-tp-permgrid label{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
.kmgc-tp-perm:not(:has(select)) .kmgc-tp-permgrid label{ flex-direction:row; align-items:center; gap:8px; }
@media (max-width:640px){ .kmgc-tp-dl th{ width:auto; } .kmgc-tp-stats{ grid-template-columns:repeat(2,1fr); } }
@media print{ .kmgc-tp-subnav, .kmgc-tp-exportbar, .kmgc-tp-filter, .kmgc-tp-form button{ display:none !important; } }

.kmgc-tp-pane[hidden] { display:none; }

/* Printing never includes portal chrome (sidebar, top bar, filters, buttons). */
@media print {
	.kmgc-sidebar, .kmgc-sidebar-backdrop, .kmgc-topbar, .kmgc-sb-toggle, .kmgc-tp-subnav, .kmgc-tp-filter, .kmgc-tp-exportbar,
	.kmgc-btn, .kmgc-report-filter, .kmgc-modal-overlay { display: none !important; }
	.kmgc-app-shell, .kmgc-main, .kmgc-content { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
	.kmgc-content-panel:not(.kmgc-active), .kmgc-subtab-panel:not(.kmgc-active), .kmgc-tp-pane[hidden] { display: none !important; }
}

/* Administrator display preference: compact density (profile > Preferences). */
.kmgc-compact .kmgc-data th,
.kmgc-compact .kmgc-data td { padding: 5px 9px; font-size: 12.5px; }
.kmgc-compact .kmgc-content-panel h4 { margin-bottom: 6px; }

/* ---- Institute admissions review (v0.116.0) ---- */
.kmgc-adm-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.kmgc-adm-chip{ border:1px solid var(--slate-200,#ddd); border-left-width:4px; border-radius:6px; padding:4px 10px; font-size:12.5px; text-decoration:none; color:inherit; background:#fff; }
.kmgc-adm-filter{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.kmgc-adm-badge{ display:inline-block; color:#fff; border-radius:999px; padding:3px 12px; font-size:12px; font-weight:600; white-space:nowrap; }
.kmgc-adm-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start; margin-bottom:8px; }
.kmgc-adm-box{ border:1px solid var(--slate-200,#ddd); border-radius:10px; padding:12px 16px; margin:0 0 14px; }
.kmgc-adm-box > legend, .kmgc-adm-box > summary{ padding:0 6px; font-weight:600; font-size:13.5px; cursor:default; }
.kmgc-adm-box > summary{ cursor:pointer; padding:0; }
.kmgc-adm-dl{ display:grid; grid-template-columns:minmax(160px,30%) 1fr; gap:6px 14px; margin:0; font-size:13.5px; }
.kmgc-adm-dl dt{ font-weight:600; color:var(--slate,#5b5f6b); }
.kmgc-adm-dl dd{ margin:0; overflow-wrap:anywhere; }
.kmgc-adm-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.kmgc-adm-inline .kmgc-field{ margin-bottom:0; }
.kmgc-adm-checklist{ list-style:none; margin:0 0 10px; padding:0; display:flex; gap:8px 16px; flex-wrap:wrap; font-size:13px; }
.kmgc-adm-checklist .is-ok{ color:#166534; }
.kmgc-adm-checklist .is-missing{ color:#b32d2e; }
.kmgc-adm-history{ margin:0; padding-left:18px; font-size:13px; }
.kmgc-adm-history li{ margin-bottom:8px; }
.kmgc-adm-pager{ display:flex; gap:14px; align-items:center; justify-content:center; font-size:13px; }
@media (max-width:640px){ .kmgc-adm-dl{ grid-template-columns:1fr; } .kmgc-adm-filter > *{ flex:1 1 100%; } }

/* Staff Portal */
.kmgc-sf .kmgc-tp-filter{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.kmgc-sf .kmgc-tp-filter label{ display:inline-flex; gap:6px; align-items:center; }
.kmgc-sf .kmgc-tp-inline{ display:inline-block; margin:2px 0; }
.kmgc-sf .kmgc-tp-form{ max-width:560px; margin:8px 0 16px; }
.kmgc-sf h5{ margin:18px 0 8px; }
.kmgc-sf .kmgc-data input[type=text], .kmgc-sf .kmgc-data select, .kmgc-sf .kmgc-data input[type=number]{ max-width:100%; }
.kmgc-sf .kmgc-exportbar, .kmgc-sf .kmgc-tp-exportbar{ display:inline-flex; gap:6px; margin:8px 0; }
@media (max-width:640px){ .kmgc-sf .kmgc-tp-form{ max-width:100%; } }

/* ===== Dashboards (v0.119): light numerals, KPI cards, chart panels ===== */
.kmgc-dash-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.kmgc-dash-title{ font-family:var(--font-body); font-size:19px; font-weight:600; margin:0; color:var(--ink); letter-spacing:0; }
.kmgc-dash-sub{ margin:3px 0 0; font-size:13px; color:var(--slate); }
.kmgc-dash-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.kmgc-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px; margin-bottom:16px; }
.kmgc-kpi{ position:relative; display:block; background:var(--paper); border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:14px 16px 12px; box-shadow:var(--shadow-card); text-decoration:none; color:inherit; overflow:hidden; border-top:3px solid var(--kpi,#2a78d6); }
a.kmgc-kpi:hover{ box-shadow:0 4px 14px rgba(15,23,42,.10); }
.kmgc-kpi__top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kmgc-kpi__label{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); font-weight:500; }
.kmgc-kpi__icon{ font-size:15px; opacity:.75; }
.kmgc-kpi__value{ font-family:var(--font-body); font-size:24px; font-weight:400; line-height:1.2; margin-top:6px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.kmgc-kpi__sub{ font-size:12px; color:var(--slate); margin-top:3px; font-weight:400; }
.kmgc-kpi.is-good .kmgc-kpi__value{ color:#0f7a54; } .kmgc-kpi.is-warn .kmgc-kpi__value{ color:#8a6100; } .kmgc-kpi.is-bad .kmgc-kpi__value{ color:#b32d2e; }
.kmgc-kpi__spark{ height:26px; margin-top:8px; } .kmgc-spark{ width:100%; height:26px; display:block; }
.kmgc-dash-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.kmgc-panel{ background:var(--paper); border:1px solid var(--slate-200); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:14px 16px 14px; min-width:0; grid-column:span 6; }
.kmgc-panel--third{ grid-column:span 4; } .kmgc-panel--twothirds{ grid-column:span 8; } .kmgc-panel--full{ grid-column:span 12; }
.kmgc-panel__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.kmgc-panel__head h3{ margin:0; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:0; }
.kmgc-panel__head span{ display:block; font-size:12px; color:var(--slate); margin-top:2px; }
.kmgc-panel__link{ font-size:12px; color:var(--portal-accent); text-decoration:none; white-space:nowrap; }
.kmgc-chart-wrap{ width:100%; } .kmgc-chart-svg{ width:100%; height:auto; display:block; }
.kmgc-chart-grid{ stroke:var(--slate-200); stroke-width:1; } .kmgc-chart-axis{ font-size:12.5px; fill:var(--slate); font-family:var(--font-body); }
.kmgc-chart-val{ font-size:12px; fill:var(--ink); font-family:var(--font-body); }
.kmgc-chart-line{ stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; } .kmgc-chart-area{ opacity:.10; }
.kmgc-chart-dot{ stroke:var(--paper); stroke-width:1.5; }
.kmgc-chart-key{ list-style:none; display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 0; padding:0; font-size:12px; color:var(--slate); }
.kmgc-chart-key i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.kmgc-chart-note{ margin:4px 0 0; font-size:12px; color:var(--slate); font-style:italic; }
.kmgc-dash-list{ list-style:none; margin:0; padding:0; } .kmgc-dash-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--slate-200); font-size:13px; } .kmgc-dash-list li:last-child{ border-bottom:0; }
.kmgc-dash-list small{ display:block; color:var(--slate); font-size:11.5px; margin-top:1px; }
.kmgc-dash-badge{ font-size:12px; padding:2px 9px; border-radius:999px; background:var(--slate-100,#eef1f5); color:var(--ink); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kmgc-dash-badge.is-warn{ background:#fff4d6; color:#8a6100; } .kmgc-dash-badge.is-bad{ background:#fde8e8; color:#b32d2e; } .kmgc-dash-badge.is-good{ background:#e1f6ec; color:#0f7a54; }
.kmgc-prog__row{ margin-bottom:11px; } .kmgc-prog__top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px; }
.kmgc-prog__track{ height:7px; background:var(--slate-200); border-radius:999px; overflow:hidden; } .kmgc-prog__track i{ display:block; height:100%; background:var(--portal-accent); border-radius:999px; }
[data-theme="dark"] .kmgc-kpi, [data-theme="dark"] .kmgc-panel{ background:var(--paper); }
/* lighter numerals everywhere */
.kmgc-summary-card .kmgc-summary-value, .kmgc-tp-stat-v{ font-family:var(--font-body); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.kmgc-chart-donut__total{ font-weight:500; }
@media (max-width:900px){ .kmgc-panel, .kmgc-panel--third, .kmgc-panel--twothirds{ grid-column:span 12; } }
@media (max-width:520px){ .kmgc-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kmgc-kpi__value{ font-size:21px; } .kmgc-panel{ padding:12px; } }

/* ---- v0.119.1 theme-proofing -------------------------------------------
   Page builders / themes (Elementor kit, Hello Elementor) style bare <button>
   and <svg> elements globally (coloured borders, big padding, svg width:100%).
   Pin the portal's own controls so the sidebar looks the same on any theme. */
html body .kmgc-portal-page button.kmgc-nav-link,
html body .kmgc-portal-page button.kmgc-nav-sublink,
html body .kmgc-portal-page button.kmgc-nav-subgroup-toggle{
  height:auto; min-height:0; border:0; box-shadow:none; text-transform:none; line-height:1.3; font-family:inherit;
  background:none; color: rgba(232,236,245,.82); display:flex; align-items:center; text-decoration:none; letter-spacing:normal;
}
html body .kmgc-portal-page button.kmgc-nav-link{ padding:10px 12px; font-size:13.5px; }
html body .kmgc-portal-page button.kmgc-nav-link:hover,
html body .kmgc-portal-page button.kmgc-nav-link:focus{ background: rgba(255,255,255,.08); color:#fff; }
html body .kmgc-portal-page button.kmgc-nav-link.kmgc-active{ background: var(--portal-accent); color:#fff; }
html body .kmgc-portal-page button.kmgc-nav-sublink{ padding:8px 12px 8px 24px; font-size:12.5px; }
html body .kmgc-portal-page button.kmgc-nav-sublink:hover,
html body .kmgc-portal-page button.kmgc-nav-sublink:focus{ background: rgba(255,255,255,.07); color:#fff; }
html body .kmgc-portal-page button.kmgc-nav-subgroup-toggle{ padding:9px 12px 9px 24px; font-size:12px; }
html body .kmgc-portal-page .kmgc-nav-link .kmgc-nav-icon{ width:26px; height:26px; }
html body .kmgc-portal-page .kmgc-nav-link .kmgc-nav-icon svg{ width:15px; height:15px; }
html body .kmgc-portal-page .kmgc-nav-link .kmgc-nav-chevron{ width:14px; height:14px; flex:0 0 14px; display:inline-flex; }
html body .kmgc-portal-page .kmgc-nav-subgroup-chevron{ width:12px; height:12px; flex:0 0 12px; }
html body .kmgc-portal-page .kmgc-nav-chevron svg{ width:100%; height:100%; max-width:100%; display:block; }
html body .kmgc-portal-page .kmgc-nav-label{ white-space:nowrap; }

/* "Go to website" button on the portal entry + login screens */
html body .kmgc-portal-page .kmgc-site-btn{
  position:absolute; top:18px; right:20px; z-index:5; display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px; background:#fff; color:var(--portal-950,#0b1c33); font-size:13.5px; font-weight:600;
  text-decoration:none; border:1px solid rgba(11,28,51,.14); box-shadow:0 2px 10px rgba(0,0,0,.12); line-height:1.2;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
html body .kmgc-portal-page .kmgc-site-btn:hover,
html body .kmgc-portal-page .kmgc-site-btn:focus-visible{ background:var(--portal-accent,#1d3c8f); color:#fff; transform:translateY(-1px); }
html body .kmgc-portal-page .kmgc-site-btn svg{ width:16px; height:16px; flex:0 0 16px; }
.kmgc-portal-page.kmgc-portal--landing, .kmgc-portal-page.kmgc-portal--login{ position:relative; }
@media (max-width:520px){ html body .kmgc-portal-page .kmgc-site-btn{ top:12px; right:12px; padding:8px 13px; font-size:12.5px; } }