/* Nahj Alrawan portal palette: ivory, deep blue and warm bronze from the school crest. */
/* Text inside the strong login panel follows the panel, not the page canvas. */
:root[data-theme] body.g-auth .g-auth-brand .g-auth-feature>span{color:var(--identity-on-hero);background:color-mix(in srgb,var(--identity-on-hero) 8%,transparent)}
:root[data-theme] body.g-auth .g-auth-brand .g-auth-kicker{color:var(--identity-on-hero-muted)}
:root[data-theme] body.tp-body .tp-hero .tp-stat-number{color:var(--identity-on-hero)}
:root[data-theme] body.tp-body .tp-btn-quiet{appearance:none;-webkit-appearance:none;background:var(--identity-surface-soft);color:var(--identity-text);border-color:var(--identity-border)}
:root[data-theme] body.tp-body .tp-btn-quiet:hover{background:var(--identity-primary-hover);color:var(--identity-on-primary);border-color:var(--identity-primary-hover)}
:root[data-theme="light"]{
  --g-bg:var(--identity-background);--g-surface:var(--identity-surface);--g-surface-2:var(--identity-surface-soft);
  --g-ink:var(--identity-text);--g-muted:var(--identity-muted);--g-line:var(--identity-border);
  --g-brand:var(--identity-primary);--g-brand-2:var(--identity-primary-hover);--g-accent:var(--identity-primary-text);
  --g-accent-soft:var(--identity-primary-soft);--g-shadow:0 14px 36px color-mix(in srgb, var(--identity-shadow-color) 8.000%, transparent);
  --tp-bg:var(--identity-background);--tp-bg-2:var(--identity-surface-soft);--tp-surface:var(--identity-surface);
  --tp-surface-2:var(--identity-surface-soft);--tp-surface-3:var(--identity-surface-tint);
  --tp-line:var(--identity-border);--tp-text:var(--identity-text);--tp-muted:var(--identity-muted);
  --tp-muted-2:var(--identity-muted);--tp-cyan:var(--identity-primary-text);--tp-cyan-2:var(--identity-primary-hover);
  --tp-blue:var(--identity-info);--tp-shadow:0 14px 36px color-mix(in srgb, var(--identity-shadow-color) 8.000%, transparent);
}
:root[data-theme="light"] body.g-app,
:root[data-theme="light"] .g-shell,
:root[data-theme="light"] body.tp-body,
:root[data-theme="light"] .tp-shell{background:var(--identity-background);color:var(--identity-text);}
:root[data-theme="light"] .g-header,
:root[data-theme="light"] .tp-topbar,
:root[data-theme="light"] .g-bottom-nav,
:root[data-theme="light"] .tp-mobile-nav{background:color-mix(in srgb, var(--identity-surface) 97.000%, transparent);border-color:var(--identity-border);}
:root[data-theme="light"] .g-brand__text strong,
:root[data-theme="light"] .tp-brand-title{color:var(--identity-text);}
:root[data-theme="light"] .g-brand__text small,
:root[data-theme="light"] .tp-brand-subtitle{color:var(--identity-muted);}
:root[data-theme="light"] .g-welcome,
:root[data-theme="light"] .tp-hero,
:root[data-theme="light"] .tp-welcome{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));color:var(--identity-on-hero);border-color:var(--identity-hero-end);}
:root[data-theme="light"] .g-welcome h1,
:root[data-theme="light"] .tp-hero h1,
:root[data-theme="light"] .tp-welcome h1{color:var(--identity-on-hero);}
:root[data-theme="light"] .g-welcome p,
:root[data-theme="light"] .tp-hero p{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));color:var(--identity-on-hero);border-color:var(--identity-hero-end);}
:root[data-theme="light"] body.g-app .g-welcome h1{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome p{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome .g-eyebrow{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-service-links--home a:first-child,
:root[data-theme="light"] body.g-app .g-service-links--home a:last-child{background:linear-gradient(145deg,var(--identity-surface),var(--identity-surface-soft));border-color:var(--identity-border);color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-child-card{background:linear-gradient(145deg,var(--identity-surface),var(--identity-surface));border-color:var(--identity-border);}
:root[data-theme="light"] body.g-auth .g-input-wrap,
:root[data-theme="light"] body.g-auth .g-input-wrap input{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-auth .portal-mode-switch{background:var(--identity-surface-soft)!important;border-color:var(--identity-border)!important;}
:root[data-theme="light"] body.g-auth .portal-mode-switch button.active{color:var(--identity-text)!important;}
:root[data-theme="light"] body.tp-body .tp-hero{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));border-color:var(--identity-hero-end);color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-hero-name{color:var(--identity-text);}
:root[data-theme="light"] body.tp-body .tp-hero-meta{color:var(--identity-text);}
:root[data-theme="light"] body.tp-body .tp-hero .tp-eyebrow{color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-hero::before{background:color-mix(in srgb, var(--identity-on-hero) 9.000%, transparent);}
:root[data-theme="light"] body.tp-body .tp-hero::after{background:color-mix(in srgb, var(--identity-accent) 10.000%, transparent);}
:root[data-theme="light"] body.tp-body .tp-hero .tp-stat-number{color:var(--identity-on-hero);}
:root[data-theme="light"] .g-card,
:root[data-theme="light"] .g-child-card,
:root[data-theme="light"] .g-detail-card,
:root[data-theme="light"] .g-alert-strip,
:root[data-theme="light"] .tp-card,
:root[data-theme="light"] .tp-card-soft{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);box-shadow:0 12px 30px color-mix(in srgb, var(--identity-shadow-color) 7.000%, transparent);}
:root[data-theme="light"] .g-primary,
:root[data-theme="light"] .tp-btn-primary,
:root[data-theme="light"] .tp-mobile-nav a.is-active{background:var(--identity-primary)!important;color:var(--identity-on-primary)!important;border-color:var(--identity-primary)!important;}
:root[data-theme="light"] .g-primary:hover,
:root[data-theme="light"] .tp-btn-primary:hover{background:var(--identity-primary-hover)!important;border-color:var(--identity-primary)!important;}
:root[data-theme="light"] .g-desktop-nav a.active,
:root[data-theme="light"] .g-bottom-nav a.active,
:root[data-theme="light"] .tp-nav-link.is-active{background:var(--identity-surface-soft);color:var(--identity-primary-text);border-color:var(--identity-primary-text);}
:root[data-theme="light"] .g-eyebrow,
:root[data-theme="light"] .tp-eyebrow,
:root[data-theme="light"] .g-announcement-inline-image+a{color:var(--identity-primary-text);}
:root[data-theme="light"] .g-icon-btn,
:root[data-theme="light"] .tp-input,
:root[data-theme="light"] .tp-select,
:root[data-theme="light"] .tp-textarea,
:root[data-theme="light"] .tp-upload,
:root[data-theme="light"] .g-app input,
:root[data-theme="light"] .g-app select,
:root[data-theme="light"] .g-app textarea{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);}
:root[data-theme="light"] .g-app input:focus,
:root[data-theme="light"] .g-app select:focus,
:root[data-theme="light"] .g-app textarea:focus,
:root[data-theme="light"] .tp-input:focus,
:root[data-theme="light"] .tp-select:focus,
:root[data-theme="light"] .tp-textarea:focus{border-color:var(--identity-primary-text);outline:2px solid color-mix(in srgb, var(--identity-primary-text) 24.000%, transparent);outline-offset:1px;}
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] button:focus-visible{outline:3px solid var(--identity-primary);outline-offset:2px;}
:root[data-theme="light"] .g-detail-body,
:root[data-theme="light"] .g-section-heading h2,
:root[data-theme="light"] .tp-card h2{color:var(--identity-text);}
:root[data-theme="light"] .g-announcement-inline-image img{background:var(--identity-surface)!important;border-color:var(--identity-border)!important;}
:root[data-theme="light"] body.g-auth,
:root[data-theme="light"] body.tp-login-body,
:root[data-theme="light"] body.install-body,
:root[data-theme="light"] body.teacher-install-body{background:var(--identity-background);color:var(--identity-text);}
@media (prefers-reduced-motion:reduce){:root[data-theme="light"] *, :root[data-theme="light"] *::before, :root[data-theme="light"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;}}

/* Warm walnut refinement. Scope these rules to the light portals only. */
:root[data-theme="light"]{
  --g-bg:var(--identity-background);--g-surface:var(--identity-surface);--g-surface-2:var(--identity-surface-soft);
  --g-ink:var(--identity-text);--g-muted:var(--identity-muted);--g-line:var(--identity-border);
  --g-brand:var(--identity-primary);--g-brand-2:var(--identity-primary-hover);--g-accent:var(--identity-primary-text);
  --g-accent-soft:var(--identity-primary-soft);--g-shadow:0 14px 34px color-mix(in srgb, var(--identity-shadow-color) 10.000%, transparent);
  --tp-bg:var(--identity-background);--tp-bg-2:var(--identity-surface-soft);--tp-surface:var(--identity-surface);
  --tp-surface-2:var(--identity-surface-soft);--tp-surface-3:var(--identity-surface-tint);
  --tp-line:var(--identity-border);--tp-text:var(--identity-text);--tp-muted:var(--identity-muted);
  --tp-muted-2:var(--identity-muted);--tp-cyan:var(--identity-primary-text);--tp-cyan-2:var(--identity-primary-hover);
  --tp-blue:var(--identity-info);--tp-shadow:0 14px 34px color-mix(in srgb, var(--identity-shadow-color) 10.000%, transparent);
}
:root[data-theme="light"] body.g-app,
:root[data-theme="light"] .g-shell,
:root[data-theme="light"] body.tp-body,
:root[data-theme="light"] .tp-shell,
:root[data-theme="light"] body.g-auth,
:root[data-theme="light"] body.tp-login-body{background:var(--identity-background);color:var(--identity-text);}
:root[data-theme="light"] body.g-auth .g-auth-shell{background:var(--identity-surface-soft);}
:root[data-theme="light"] body.g-auth .g-auth-brand{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));color:var(--identity-on-hero);border-color:var(--identity-hero-end);}
:root[data-theme="light"] body.g-auth .g-auth-brand h1,
:root[data-theme="light"] body.g-auth .g-auth-feature strong{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-auth .g-auth-kicker{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-auth .g-auth-brand>p,
:root[data-theme="light"] body.g-auth .g-auth-feature small{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-auth .g-auth-feature>span{background:color-mix(in srgb, var(--identity-surface) 17.000%, transparent);color:var(--identity-text);}
:root[data-theme="light"] body.g-auth .g-auth-card{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);box-shadow:0 24px 60px color-mix(in srgb, var(--identity-shadow-color) 15.000%, transparent);}
:root[data-theme="light"] body.g-auth .g-auth-card__head h2,
:root[data-theme="light"] body.g-auth .g-field>span:first-child{color:var(--identity-text);}
:root[data-theme="light"] body.g-auth .g-auth-card__head small,
:root[data-theme="light"] body.g-auth .g-auth-install-link{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-auth .g-input-wrap svg{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-auth .portal-mode-switch{background:var(--identity-surface-soft)!important;border-color:var(--identity-border)!important;}
:root[data-theme="light"] body.g-auth .portal-mode-switch button{color:var(--identity-primary-text)!important;}
:root[data-theme="light"] body.g-auth .portal-mode-switch button.active{background:var(--identity-surface)!important;color:var(--identity-primary-text)!important;box-shadow:0 3px 12px color-mix(in srgb, var(--identity-shadow-color) 13.000%, transparent)!important;}
:root[data-theme="light"] body.g-auth .g-primary,
:root[data-theme="light"] body.g-app .g-primary,
:root[data-theme="light"] body.tp-body .tp-btn-primary{background:var(--identity-primary)!important;color:var(--identity-on-primary)!important;border-color:var(--identity-primary)!important;box-shadow:0 8px 20px color-mix(in srgb, var(--identity-shadow-color) 20.000%, transparent);}
:root[data-theme="light"] body.g-auth .g-primary:hover,
:root[data-theme="light"] body.g-app .g-primary:hover,
:root[data-theme="light"] body.tp-body .tp-btn-primary:hover{background:var(--identity-primary-hover)!important;border-color:var(--identity-primary)!important;}
:root[data-theme="light"] body.g-app .g-welcome{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));border-color:var(--identity-hero-end);color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome h1{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome p{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-welcome .g-eyebrow{color:var(--identity-on-hero);}
:root[data-theme="light"] body.g-app .g-child-card,
:root[data-theme="light"] body.g-app .g-page-hero,
:root[data-theme="light"] body.g-app .g-form-card,
:root[data-theme="light"] body.g-app .g-detail-card{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-service-links--home a,
:root[data-theme="light"] body.g-app .g-action-tile,
:root[data-theme="light"] body.g-app .g-today-times>div{background:var(--identity-surface-soft);border:1px solid var(--identity-border);color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-service-links--home a:hover,
:root[data-theme="light"] body.g-app .g-action-tile:hover{background:var(--identity-primary-soft);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile>span,
:root[data-theme="light"] body.g-app .g-service-links--home a>span{background:var(--identity-primary-soft);color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-page-hero h1,
:root[data-theme="light"] body.g-app .g-section-heading h2,
:root[data-theme="light"] body.g-app .g-action-tile b{color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-field>span:first-child,
:root[data-theme="light"] body.g-app .g-absence-justify summary{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-justify-form textarea{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-absence-link{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px 13px;border-radius:12px;background:var(--identity-primary-soft);color:var(--identity-primary-text);font-weight:800;font-size:12px;text-decoration:none;}
:root[data-theme="light"] body.g-app .g-absence-link:hover{background:var(--identity-primary-soft);}
:root[data-theme="light"] body.g-app .g-absence-guide{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px;padding:17px 19px;background:var(--identity-surface);border:1px solid var(--identity-border);border-radius:18px;}
:root[data-theme="light"] body.g-app .g-absence-guide h2{margin:0;color:var(--identity-text);font-size:18px;}
:root[data-theme="light"] body.g-app .g-absence-guide p{margin:5px 0 0;color:var(--identity-muted);font-size:12px;line-height:1.7;}
:root[data-theme="light"] body.g-app .g-absence-guide__status{color:var(--identity-primary-text);font-size:12px;font-weight:700;}
:root[data-theme="light"] body.g-app .g-attendance-day:target{outline:3px solid var(--identity-border);outline-offset:2px;}
@media(max-width:620px){:root[data-theme="light"] body.g-app .g-absence-guide{display:grid;padding:15px;}}

/* Give the three school services their own quiet, readable colors. */
:root[data-theme="light"] body.g-app .g-action-tile--attendance{background:var(--identity-surface);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--attendance>span{background:var(--identity-success-soft);color:var(--identity-success);}
:root[data-theme="light"] body.g-app .g-action-tile--attendance:hover{background:var(--identity-surface-soft);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--grades{background:var(--identity-surface);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--grades>span{background:var(--identity-surface-soft);color:var(--identity-muted);}
:root[data-theme="light"] body.g-app .g-action-tile--grades:hover{background:var(--identity-surface-soft);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--homework{background:var(--identity-surface);border-color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-action-tile--homework>span{background:var(--identity-primary-soft);color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-action-tile--homework:hover{background:var(--identity-surface-soft);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--schedule{background:var(--identity-surface-soft);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-action-tile--schedule>span{background:var(--identity-primary-soft);color:var(--identity-primary-text);}

/* Attendance counters keep the same meaning in the light palette. */
:root[data-theme="light"] body.g-app .g-metric{color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-metric span,
:root[data-theme="light"] body.g-app .g-metric small{color:var(--identity-muted);}
:root[data-theme="light"] body.g-app .g-metric--school-days{background:var(--identity-surface);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-metric--school-days strong{color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-metric--present{background:var(--identity-surface-soft);border-color:var(--identity-success);}
:root[data-theme="light"] body.g-app .g-metric--present strong{color:var(--identity-success);}
:root[data-theme="light"] body.g-app .g-metric--late{background:var(--identity-surface-soft);border-color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-metric--late strong{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-metric--absent{background:var(--identity-surface);border-color:var(--identity-danger);}
:root[data-theme="light"] body.g-app .g-metric--absent strong{color:var(--identity-danger);}
:root[data-theme="light"] body.g-app .g-metric--excused{background:var(--identity-surface);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-metric--excused strong{color:var(--identity-text);}
:root[data-theme="light"] body.g-app .g-metric--early{background:var(--identity-surface);border-color:var(--identity-border);}
:root[data-theme="light"] body.g-app .g-metric--early strong{color:var(--identity-violet);}

/* The dark portal's hover rules remain in app.css; replace them for light mode. */
:root[data-theme="light"] body.g-app .g-desktop-nav a,
:root[data-theme="light"] body.g-app .g-bottom-nav a{color:var(--identity-primary-text);}
:root[data-theme="light"] body.g-app .g-desktop-nav a:hover,
:root[data-theme="light"] body.g-app .g-desktop-nav a.active,
:root[data-theme="light"] body.g-app .g-bottom-nav a:hover,
:root[data-theme="light"] body.g-app .g-bottom-nav a.active{background:var(--identity-primary-soft);color:var(--identity-text);box-shadow:inset 0 0 0 1px var(--identity-shadow-color);}
:root[data-theme="light"] body.g-app .g-icon-btn:hover,
:root[data-theme="light"] body.g-app .g-back:hover,
:root[data-theme="light"] body.g-app .g-secondary:hover{background:var(--identity-primary-soft);color:var(--identity-text);border-color:var(--identity-primary-text);}
:root[data-theme="light"] body.tp-body .tp-nav-link:hover,
:root[data-theme="light"] body.tp-body .tp-mobile-nav a:hover{background:var(--identity-primary-soft);color:var(--identity-text);border-color:var(--identity-primary-text);}

/* A slightly deeper walnut canvas, while keeping cards and field text legible. */
:root[data-theme="light"] body.g-app,
:root[data-theme="light"] body.g-app .g-shell{background:var(--identity-background);color:var(--identity-text);}
:root[data-theme="light"] body.tp-body .tp-hero,
:root[data-theme="light"] body.tp-body .tp-welcome{background:linear-gradient(125deg,var(--identity-hero-start),var(--identity-hero-end));border-color:var(--identity-hero-end);color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-hero h1,
:root[data-theme="light"] body.tp-body .tp-hero .tp-hero-name,
:root[data-theme="light"] body.tp-body .tp-hero .tp-eyebrow{color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-hero .tp-hero-meta,
:root[data-theme="light"] body.tp-body .tp-hero .tp-stat-label{color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-hero .tp-stat-mini,
:root[data-theme="light"] body.tp-body .tp-hero .tp-avatar{background:color-mix(in srgb, var(--identity-on-hero) 13.000%, transparent);border-color:color-mix(in srgb, var(--identity-hero-end) 27.000%, transparent);color:var(--identity-on-hero);}
:root[data-theme="light"] body.tp-body .tp-input,
:root[data-theme="light"] body.tp-body input,
:root[data-theme="light"] body.tp-body select,
:root[data-theme="light"] body.tp-body textarea{background:var(--identity-surface);color:var(--identity-text);border-color:var(--identity-border);}
:root[data-theme="light"] body.tp-body .tp-input:focus,
:root[data-theme="light"] body.tp-body input:focus,
:root[data-theme="light"] body.tp-body select:focus,
:root[data-theme="light"] body.tp-body textarea:focus{border-color:var(--identity-border);outline-color:var(--identity-border);}