/* =====================================================================
   SMRC v15.6 - Rwandan flag theme + full-width desktop shell +
   rebuilt mobile dashboard.

   Loaded LAST (after smrc-ui-v13.css and smrc-responsive.css) so it
   refines the existing look without replacing any existing stylesheet,
   markup, logic or download option - same approach v13 itself used.

   Official Rwanda flag colours (blue/yellow/green, gold sun):
     Blue   #00A1DE   Yellow #FAD201   Green #20603D   Gold #E5BE01
   ===================================================================== */

:root {
	--rw-blue:      #00A1DE;
	--rw-blue-dark: #007DAE;
	--rw-yellow:    #FAD201;
	--rw-green:     #20603D;
	--rw-green-dark:#164429;
	--rw-gold:      #E5BE01;
}

/* ---------------------------------------------------------------------
   1. COLOUR SYSTEM - re-theme the core variables AND the v13 "deep
   density" overrides (which use their own hard-coded hex values) so
   every surface that reads either one now renders in the flag palette.
   Nothing here changes layout, only colour.
   --------------------------------------------------------------------- */
:root {
	--smrc-primary: var(--rw-blue);
	--smrc-primary-dark: var(--rw-blue-dark);
	--smrc-accent: var(--rw-green);
}

body.smrc-app-page {
	--smrc-deep-1: var(--rw-blue-dark);
	--smrc-deep-2: var(--rw-blue);
	--smrc-deep-3: var(--rw-green);
	--smrc-accent: var(--rw-green);
	--smrc-accent-2: var(--rw-gold);
	--smrc-rc-navy: var(--rw-blue-dark);
	--smrc-rc-gold: var(--rw-gold);
}

/* Backdrop mesh (light) */
body.smrc-app-page {
	background-color: #eef6fb;
	background-image:
		radial-gradient(900px 500px at 8% 0%, rgba(0,161,222,.22), transparent 60%),
		radial-gradient(800px 500px at 95% 10%, rgba(32,96,61,.18), transparent 55%),
		radial-gradient(700px 460px at 50% 100%, rgba(250,210,1,.14), transparent 60%),
		linear-gradient(180deg, #eef6fb 0%, #f4f9fc 100%);
}
body.smrc-app-page.smrc-dark {
	background-color: #061420;
	background-image:
		radial-gradient(900px 520px at 8% 0%, rgba(0,161,222,.40), transparent 62%),
		radial-gradient(820px 520px at 95% 8%, rgba(32,96,61,.34), transparent 58%),
		linear-gradient(180deg, #061420 0%, #071a2b 100%);
}

/* Topbar: the three flag stripes, left to right */
body.smrc-app-page .smrc-portal-topbar,
body.smrc-app-page.smrc-dark .smrc-portal-topbar {
	background: linear-gradient(100deg, var(--rw-blue-dark) 0%, var(--rw-blue) 46%, var(--rw-yellow) 72%, var(--rw-green) 100%);
	border-color: rgba(255,255,255,.28);
}

/* Sidebar / nav */
body.smrc-app-page .smrc-portal-nav { background: #eaf6fc; border-right: 1px solid rgba(0,77,110,.14); }
body.smrc-app-page .smrc-portal-nav button { color: #0b3550; }
body.smrc-app-page .smrc-portal-nav button:hover { background: rgba(0,161,222,.14); color: var(--rw-blue-dark); }
body.smrc-app-page .smrc-portal-nav button.active {
	background: linear-gradient(135deg, var(--rw-blue-dark), var(--rw-blue));
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(250,210,1,.65);
}
body.smrc-app-page .smrc-portal-nav button.active .smrc-nav-icon { color: var(--rw-yellow); }

body.smrc-app-page.smrc-dark .smrc-portal-nav { background: #08192a; border-right: 1px solid rgba(255,255,255,.1); }
body.smrc-app-page.smrc-dark .smrc-portal-nav button:hover { background: rgba(0,161,222,.24); color: #ffffff; }
body.smrc-app-page.smrc-dark .smrc-portal-nav button.active {
	background: linear-gradient(135deg, var(--rw-blue-dark), var(--rw-green));
	box-shadow: inset 0 0 0 1.5px rgba(250,210,1,.6);
}

/* Stat cards + generic accents */
body.smrc-app-page .smrc-stat-card { border-left: 5px solid var(--rw-blue); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+1) { border-left-color: var(--rw-blue); background: linear-gradient(135deg, #ffffff 0%, #e6f6fd 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+2) { border-left-color: var(--rw-green); background: linear-gradient(135deg, #ffffff 0%, #e9f3ec 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+3) { border-left-color: var(--rw-gold); background: linear-gradient(135deg, #ffffff 0%, #fdf8e3 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+4) { border-left-color: var(--rw-blue-dark); background: linear-gradient(135deg, #ffffff 0%, #e9f1fb 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+1) .smrc-stat-value { color: var(--rw-blue-dark); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+2) .smrc-stat-value { color: var(--rw-green-dark); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+3) .smrc-stat-value { color: #8a6d00; }
body.smrc-app-page .smrc-stat-card:nth-child(4n+4) .smrc-stat-value { color: var(--rw-blue-dark); }
body.smrc-app-page .smrc-card { border-top: 3px solid var(--rw-blue); }
body.smrc-app-page .smrc-choice-card:hover { border-color: var(--rw-green); box-shadow: 0 10px 26px rgba(32,96,61,.2); }

body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+1) { border-left-color: var(--rw-blue); background: linear-gradient(135deg, #0c2130 0%, #0e2c40 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+2) { border-left-color: var(--rw-green); background: linear-gradient(135deg, #0d2118 0%, #123a25 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+3) { border-left-color: var(--rw-yellow); background: linear-gradient(135deg, #241f0e 0%, #332b12 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+4) { border-left-color: var(--rw-blue-dark); background: linear-gradient(135deg, #0c1a30 0%, #10254a 100%); }
body.smrc-app-page.smrc-dark .smrc-card { border-top: 3px solid var(--rw-blue); }

/* Buttons */
.smrc-btn { background: linear-gradient(135deg, var(--rw-blue-dark), var(--rw-green)); box-shadow: 0 8px 20px -6px rgba(0,101,140,.5); }
.smrc-btn:hover { box-shadow: 0 14px 28px -8px rgba(0,101,140,.55); }
.smrc-btn-secondary { background: linear-gradient(135deg, #94a3b8, #64748b); }
body.smrc-app-page .smrc-btn-secondary { background: #ffffff; color: var(--rw-blue-dark); border: 1.5px solid var(--rw-blue-dark); }
body.smrc-app-page .smrc-btn-secondary:hover { background: var(--rw-blue-dark); color: #ffffff; }

/* Theme toggle */
body.smrc-app-page .smrc-theme-toggle { color: var(--rw-blue-dark); border-color: var(--rw-blue-dark); }
body.smrc-app-page .smrc-theme-toggle:hover { background: #e6f6fd; border-color: var(--rw-green); }
body.smrc-app-page.smrc-dark .smrc-theme-toggle { border-color: var(--rw-yellow); }

/* Nav toggle (collapsible sidebar) - explicit three-line "Menu" button so
   users can always see how to bring the sidebar back. */
.smrc-nav-toggle {
	display: inline-flex !important; align-items: center; gap: 8px; flex-shrink: 0;
	min-height: 44px; padding: 8px 14px 8px 12px; border-radius: 12px;
	background: linear-gradient(135deg, var(--rw-blue-dark), var(--rw-green));
	color: #ffffff; border: 2px solid rgba(255,255,255,.35);
	box-shadow: 0 6px 16px -6px rgba(0,101,140,.65);
	font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.smrc-nav-toggle:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(0,101,140,.7); }
.smrc-nav-toggle:active { transform: scale(.97); }
.smrc-nav-toggle:focus-visible { outline: 3px solid var(--rw-yellow); outline-offset: 2px; }

.smrc-nav-toggle-bars {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
	width: 20px; height: 16px;
}
.smrc-nav-toggle-bars span {
	display: block; height: 3px; width: 100%; border-radius: 2px; background: #ffffff;
	transition: transform .2s ease, opacity .2s ease;
}
.smrc-nav-toggle-text { letter-spacing: .3px; }

/* Off-canvas close control: only relevant to the mobile drawer; the
   @media (max-width:782px) block below turns it on and positions it. */
.smrc-nav-close { display: none; }

/* Turns into an X while the drawer/sidebar is open */
.smrc-nav-toggle[aria-expanded="true"] .smrc-nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.smrc-nav-toggle[aria-expanded="true"] .smrc-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.smrc-nav-toggle[aria-expanded="true"] .smrc-nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.smrc-app-page.smrc-dark .smrc-nav-toggle {
	background: linear-gradient(135deg, #0c2b45, #0f6b3f);
	border-color: var(--rw-yellow); color: #ffffff;
	box-shadow: 0 4px 14px rgba(250,210,1,.28);
}

/* Table header */
body.smrc-app-page .smrc-table th { background: var(--rw-blue-dark); color: #ffffff; border-bottom: 2px solid var(--rw-gold); }
body.smrc-app-page.smrc-dark .smrc-table th { background: #0c2b45; border-bottom: 2px solid var(--rw-gold); }

/* Section cards (Nursery / Primary chooser) keep their own accent colours
   (used to visually tell the two workspaces apart at a glance) - only the
   default badge tone is nudged toward the flag palette. */
.smrc-section-badge .smrc-section-switch { background: rgba(255,255,255,.28); }

/* Report card gold rule already maps to var(--smrc-rc-gold) above -
   Rwanda's own flag carries a gold sun, so the existing gold-accented
   report card design now doubles as a natural fit for the new palette. */

/* ---------------------------------------------------------------------
   2. FULL-WIDTH DESKTOP SHELL
   The previous 1220px cap left large amounts of empty space either side
   on desktop/laptop screens. The shell now uses the available width
   (with a generous cap only at very wide monitors) and the sidebar/main
   split grows proportionally.
   --------------------------------------------------------------------- */
@media (min-width: 783px) {
	.smrc-portal-wrap { max-width: 1800px; padding: 22px 32px 100px; }
	.smrc-portal-nav { width: 250px; }
	.smrc-portal-main { padding: 30px 40px; }

	.smrc-portal-nav {
		transition: width .2s ease, min-width .2s ease, padding .2s ease, opacity .15s ease;
	}
	body:not(.smrc-nav-open) .smrc-portal-nav {
		width: 0; min-width: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none;
	}
}
@media (min-width: 1600px) {
	.smrc-portal-wrap { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 782px) {
	html.smrc-app-page, body.smrc-app-page { -webkit-text-size-adjust: 100%; }

	.smrc-portal-wrap { padding: 0; max-width: 100%; }
	.smrc-portal-topbar { border-radius: 0; padding: 14px 16px; position: sticky; top: 0; z-index: 60; }
	.smrc-portal-body { border-radius: 0; border-left: none; border-right: none; min-height: calc(100vh - var(--smrc-topbar-h, 64px)); }
	.smrc-portal-main { padding: 16px 14px 24px; width: 100%; }

	.smrc-portal-body { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }

	/* Hamburger is always reachable on mobile */
	.smrc-nav-toggle { display: inline-flex !important; padding: 8px 12px; }
	.smrc-nav-toggle-text { font-size: 13px; }

	/* Off-canvas drawer: hidden by default, slides in when body has
	   .smrc-nav-open (toggled by the ☰ button). */
	body .smrc-portal-nav,
	body.smrc-app-page .smrc-portal-nav {
		position: fixed; left: 0; top: var(--smrc-topbar-h, 64px); bottom: 0; right: auto; z-index: 50;
		width: min(280px, 82vw); max-width: 82vw; height: auto;
		/* Modern browsers: pin the drawer to the dynamic viewport height minus
		   the topbar, so it can never run under the (collapsing/expanding)
		   mobile browser chrome. Browsers without dvh support simply ignore
		   this calc() and keep the top/bottom:0 sizing above as a fallback. */
		height: calc(100dvh - var(--smrc-topbar-h, 64px));
		display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
		overscroll-behavior: contain;
		gap: 2px; padding: 10px;
		background: rgba(255,255,255,.98); backdrop-filter: blur(14px);
		border-top: none; border-bottom: none; border-right: 1px solid rgba(0,77,110,.14);
		box-shadow: 8px 0 24px -10px rgba(15,23,42,.3);
		transform: translateX(-100%); transition: transform .25s ease;
		visibility: hidden; pointer-events: none;
		-webkit-overflow-scrolling: touch;
	}
	body.smrc-nav-open .smrc-portal-nav,
	body.smrc-app-page.smrc-nav-open .smrc-portal-nav {
		transform: translateX(0); visibility: visible; pointer-events: auto;
	}
	body.smrc-app-page.smrc-dark .smrc-portal-nav {
		background: rgba(6,20,32,.98); border-right: 1px solid rgba(255,255,255,.1);
	}
	.smrc-portal-nav button { width: 100%; flex: 0 0 auto; }

	/* Explicit close (X) control anchored inside the drawer itself, distinct
	   from the header ☰/✕ toggle, so closing the menu is unambiguous while
	   scrolling a long item list. */
	.smrc-nav-close {
		display: none; position: fixed; z-index: 55; width: 34px; height: 34px; border-radius: 50%;
		align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-size: 15px;
		top: calc(var(--smrc-topbar-h, 64px) + 10px);
		left: calc(min(280px, 82vw) - 44px);
		background: rgba(255,255,255,.95); color: #0b3550;
		border: 1.5px solid rgba(0,77,110,.18); box-shadow: 0 4px 12px -4px rgba(15,23,42,.3);
	}
	body.smrc-nav-open .smrc-nav-close { display: flex; }
	body.smrc-app-page.smrc-dark .smrc-nav-close {
		background: rgba(6,20,32,.95); color: #ffffff; border-color: rgba(255,255,255,.2);
	}

	/* Page must not scroll behind the open drawer */
	body.smrc-nav-open { overflow: hidden; }

	#smrc-portal-nav-backdrop {
		position: fixed; left: 0; right: 0; top: var(--smrc-topbar-h, 64px); bottom: 0; z-index: 45;
		background: rgba(15,23,42,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	body.smrc-nav-open #smrc-portal-nav-backdrop { opacity: 1; pointer-events: auto; }

	/* Bigger, thumb-friendly tap targets */
	.smrc-btn, .smrc-btn-sm { padding-top: 13px; padding-bottom: 13px; font-size: 14.5px; }
	.smrc-inline-form input, .smrc-inline-form select,
	.smrc-card form input, .smrc-card form select, .smrc-card form textarea { font-size: 16px; padding: 12px 13px; }
	.smrc-table th, .smrc-table td { padding: 11px 10px; font-size: 12.5px; }

	/* Single-column stat cards read far more comfortably on a phone than
	   a cramped 2-up grid. */
	.smrc-stats-grid { grid-template-columns: 1fr; }

	.smrc-row-actions .smrc-btn-sm { flex: 1 1 auto; }
	.smrc-toolbar { gap: 10px; }
}