/* ==========================================================================
   Griffen School ERP — UI layer (v1.1)
   Loaded AFTER gse-public.css. Pure additions/overrides: one consistent
   design system (indigo brand + role-coded accents) for dashboards, cards,
   tables and forms, with a mobile-first, no-horizontal-scroll layout.
   ========================================================================== */

.gse-app, .gse-frontend {
	--gse-shadow-sm: 0 6px 16px -10px rgba(34, 29, 61, 0.35);
	--gse-shadow-md: 0 16px 34px -18px rgba(34, 29, 61, 0.4);
	--gse-r: 18px;
}
html, body { max-width: 100%; }
.gse-app { overflow-x: clip; }
.gse-app-main, .gse-app-content, .gse-portal-dashboard { min-width: 0; max-width: 100%; }
.gse-app img, .gse-app video, .gse-app iframe { max-width: 100%; height: auto; }
.gse-app input, .gse-app select, .gse-app textarea, .gse-app button { max-width: 100%; font-family: inherit; }

/* The ERP header sits at the very top when the WP toolbar is gone. */
.gse-app-topbar { background: linear-gradient(90deg, #fff 0%, #F7F5FF 100%); }
body.admin-bar .gse-app-topbar { top: 32px; }
body.admin-bar .gse-app-sidebar { top: calc(var(--gse-topbar-h) + 32px); height: calc(100vh - var(--gse-topbar-h) - 32px); }
@media (max-width: 782px) { body.admin-bar .gse-app-topbar { top: 46px; } }
@media (max-width: 960px) { body.admin-bar .gse-app-sidebar { top: 0; height: 100dvh; } }

/* ---------------------------------------------------------------
 * Hero banner
 * ------------------------------------------------------------- */
.gse-portal-dashboard { max-width: 1100px; }
.gse-hero {
	display: flex; align-items: center; gap: 16px;
	padding: 22px 24px; margin-bottom: 20px;
	border-radius: var(--gse-r); color: #fff;
	background: linear-gradient(120deg, #4338CA 0%, #5B4FE9 45%, #9B5DE5 100%);
	box-shadow: var(--gse-shadow-md);
	position: relative; overflow: hidden;
}
.gse-hero::after {
	content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px;
	border-radius: 50%; background: rgba(255, 255, 255, 0.12);
}
.gse-hero h2 { margin: 0 0 4px; color: #fff; font-size: 22px; overflow-wrap: anywhere; }
.gse-hero p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 13.5px; overflow-wrap: anywhere; }
.gse-hero .gse-portal-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; }
.gse-hero .gse-portal-avatar-fallback {
	display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
	background: rgba(255, 255, 255, 0.22); color: #fff;
}

/* ---------------------------------------------------------------
 * Stat cards
 * ------------------------------------------------------------- */
.gse-dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.gse-dcards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gse-dcard {
	--c: var(--gse-brand); --t: var(--gse-brand-tint);
	display: flex; align-items: center; gap: 14px; min-width: 0;
	padding: 16px 18px; border-radius: var(--gse-r);
	background: #fff; border: 1px solid var(--gse-border);
	box-shadow: var(--gse-shadow-sm);
	text-decoration: none !important; color: var(--gse-ink) !important;
	position: relative; overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gse-dcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
a.gse-dcard:hover, a.gse-dcard:focus-visible { transform: translateY(-3px); box-shadow: var(--gse-shadow-md); border-color: var(--c); }
a.gse-dcard:active { transform: translateY(0); }
.gse-dcard-icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 46px; height: 46px; border-radius: 14px; background: var(--t); color: var(--c);
}
.gse-dcard-icon .gse-icon { width: 23px; height: 23px; }
.gse-dcard-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.gse-dcard-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gse-muted); }
.gse-dcard-value { font-size: 24px; line-height: 1.15; font-weight: 800; color: var(--gse-ink); overflow-wrap: anywhere; }
.gse-dcard-caption { font-size: 12px; color: var(--gse-muted); font-weight: 500; }
.gse-dcard-brand { --c: var(--gse-brand); --t: var(--gse-brand-tint); }
.gse-dcard-grape { --c: var(--gse-grape); --t: var(--gse-grape-tint); }
.gse-dcard-teal { --c: var(--gse-teal); --t: var(--gse-teal-tint); }
.gse-dcard-leaf { --c: var(--gse-leaf); --t: var(--gse-leaf-tint); }
.gse-dcard-coral { --c: var(--gse-coral); --t: var(--gse-coral-tint); }
.gse-dcard-tangerine { --c: var(--gse-tangerine); --t: var(--gse-tangerine-tint); }
.gse-dcard-gold { --c: #D9A400; --t: #FBF3D9; }

/* ---------------------------------------------------------------
 * Sections, buttons, chips
 * ------------------------------------------------------------- */
.gse-section {
	background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-r);
	padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--gse-shadow-sm);
	scroll-margin-top: 90px;
}
.gse-section > h3 { margin: 0 0 14px; font-size: 17px; }
.gse-subhead { margin: 22px 0 10px; font-size: 14px; color: var(--gse-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.gse-btn, .gse-portal-quicklinks a {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0;
	font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none !important;
	transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.gse-btn-soft { background: var(--gse-brand-tint); color: var(--gse-brand-dark) !important; }
.gse-btn-soft:hover { background: #DDD9FB; }
.gse-portal-quicklinks a { background: linear-gradient(135deg, var(--gse-brand), var(--gse-grape)); color: #fff !important; box-shadow: 0 10px 20px -12px rgba(91, 79, 233, 0.8); }
.gse-portal-quicklinks a:hover { transform: translateY(-2px); }
.gse-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gse-chip { display: inline-flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; background: var(--gse-grape-tint); color: var(--gse-ink); }
.gse-chip span { font-size: 12px; color: var(--gse-muted); }
.gse-badge-green { background: var(--gse-leaf-tint); color: #12795A; }
.gse-badge-orange { background: var(--gse-tangerine-tint); color: #B35F0C; }

/* ---------------------------------------------------------------
 * Homework cards
 * ------------------------------------------------------------- */
.gse-hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gse-hw-card {
	display: flex; flex-direction: column; gap: 10px; min-width: 0;
	padding: 16px 18px; border: 1px solid var(--gse-border); border-top: 4px solid var(--gse-grape);
	border-radius: var(--gse-r); background: #fff; transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.gse-hw-card:hover { box-shadow: var(--gse-shadow-md); transform: translateY(-2px); }
.gse-hw-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.gse-hw-card h4 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.gse-hw-desc { font-size: 13.5px; line-height: 1.55; color: #4a4468; overflow-wrap: anywhere; }
.gse-hw-desc p { margin: 0 0 6px; }
.gse-hw-card dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 8px 14px; justify-content: start; }
.gse-hw-card dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gse-muted); font-weight: 700; }
.gse-hw-card dd { margin: 0; font-size: 13px; font-weight: 700; }
.gse-hw-card .gse-btn { margin-top: auto; }

/* ---------------------------------------------------------------
 * Tables (modern; stack into cards on phones)
 * ------------------------------------------------------------- */
.gse-table-wrap { width: 100%; max-width: 100%; }
.gse-ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.gse-ptable th { text-align: left; background: #F4F2FE; color: var(--gse-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 11px 12px; }
.gse-ptable th:first-child { border-radius: 10px 0 0 10px; }
.gse-ptable th:last-child { border-radius: 0 10px 10px 0; }
.gse-ptable td { padding: 12px; border-bottom: 1px solid var(--gse-border); vertical-align: middle; overflow-wrap: anywhere; }
.gse-ptable tbody tr:hover { background: #FBFAFF; }

/* ---------------------------------------------------------------
 * Forms (leave application, etc.)
 * ------------------------------------------------------------- */
.gse-app .gse-leave-application { max-width: 560px; }
.gse-app .gse-leave-panel { display: grid; gap: 12px; }
.gse-app .gse-leave-panel label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; color: var(--gse-ink); }
.gse-app .gse-leave-panel input, .gse-app .gse-leave-panel select, .gse-app .gse-leave-panel textarea {
	width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--gse-border); border-radius: 12px; background: #fff; font-size: 15px;
}
.gse-app .gse-leave-panel input:focus, .gse-app .gse-leave-panel select:focus, .gse-app .gse-leave-panel textarea:focus {
	outline: none; border-color: var(--gse-brand); box-shadow: 0 0 0 4px rgba(91, 79, 233, 0.15);
}
.gse-app .gse-leave-panel button[type=submit] {
	min-height: 46px; border: 0; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; color: #fff;
	background: linear-gradient(135deg, var(--gse-brand), var(--gse-grape));
}
.gse-app .gse-result-error { color: var(--gse-coral); font-weight: 700; }

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 782px) {
	.gse-dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.gse-dcard { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
	.gse-dcard-value { font-size: 21px; }
	.gse-section { padding: 16px; }
	.gse-hero { padding: 18px; }
	.gse-hero h2 { font-size: 19px; }

	.gse-ptable-stack thead { display: none; }
	.gse-ptable-stack, .gse-ptable-stack tbody, .gse-ptable-stack tr, .gse-ptable-stack td { display: block; width: 100%; }
	.gse-ptable-stack tr { border: 1px solid var(--gse-border); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
	.gse-ptable-stack td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
	.gse-ptable-stack td::before { content: attr(data-label); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gse-muted); text-align: left; flex-shrink: 0; }
	.gse-ptable-stack td:empty { display: none; }
}
@media (max-width: 420px) {
	.gse-dcards, .gse-dcards-3 { grid-template-columns: 1fr; }
	.gse-hw-grid { grid-template-columns: 1fr; }
	.gse-hw-card dl { grid-template-columns: 1fr 1fr; }
	.gse-hero { flex-direction: column; align-items: flex-start; }
	.gse-portal-quicklinks { flex-direction: column; }
	.gse-portal-quicklinks a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.gse-dcard, .gse-hw-card, .gse-btn, .gse-portal-quicklinks a { transition: none !important; }
	a.gse-dcard:hover, .gse-hw-card:hover { transform: none; }
}