/* =====================================================================
   ClassCloud Kids — Plugin Harmony Stylesheet
   Re-skins the ClassCloud plugin family (core LMS, Registrar, Messaging,
   School Bus Tracker) to match the theme's design tokens, WITHOUT
   touching a single plugin file. Loaded as a dependent of each plugin's
   own stylesheet so it always cascades last (see inc/plugin-compat.php).

   Sections:
   1. Layout: full-width / immersive plugin pages
   2. ClassCloud core (student/parent portal) — variable bridge
   3. ClassCloud Messaging — inherits automatically via shared --smu-*
      variables, plus a few messaging-specific touches
   4. ClassCloud Registrar — direct selector overrides (no CSS vars
      in the original plugin)
   5. School Bus Tracker — parent live map (playful) + driver console
      (kept dark for outdoor legibility, rebranded accent only)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LAYOUT
   --------------------------------------------------------------------- */

/* Wide: dashboards/portals get the full container, no narrow sidebar
   column, but the site header/footer/mascot remain. */
body.cc-plugin-page--wide .cc-container {
	max-width: 1320px;
}

body.cc-plugin-page--wide main .cc-grid[style] {
	display: block; /* neutralize page.php's 2-column inline grid-template */
}

/* Immersive: driver console / live parent map take over the full
   viewport exactly like a native app screen. */
body.cc-plugin-page--immersive .cc-site-header,
body.cc-plugin-page--immersive .cc-bottom-nav,
body.cc-plugin-page--immersive .cc-site-footer,
body.cc-plugin-page--immersive .cc-skip-link {
	display: none !important;
}

body.cc-plugin-page--immersive {
	padding-bottom: 0 !important;
}

body.cc-plugin-page--immersive main {
	margin: 0;
	padding: 0;
}

/* Quick-links row in the header account area (see plugin-compat.php). */
.cc-plugin-quick-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------------------------------------------------------------------
   2. CLASSCLOUD CORE — variable bridge
   These custom properties are declared on :root by the plugin's own
   admin.css. Redeclaring them here (loaded after, per dependency chain)
   overrides every .smu-* component automatically — cards, buttons,
   badges, stat tiles — with zero markup changes.
   --------------------------------------------------------------------- */
:root {
	--smu-primary:       var(--cc-blue-dark);
	--smu-primary-dark:  #145a9e;
	--smu-primary-light: var(--cc-bg-alt);
	--smu-secondary:     var(--cc-purple);
	--smu-success:       var(--cc-success);
	--smu-success-bg:    #eafff3;
	--smu-warning:       var(--cc-warning);
	--smu-warning-bg:    #fff6da;
	--smu-danger:        var(--cc-error);
	--smu-danger-bg:     #fdeeee;
	--smu-info-bg:       var(--cc-bg-alt);
	--smu-surface:       var(--cc-surface);
	--smu-bg:            var(--cc-bg-alt);
	--smu-border:        var(--cc-border);
	--smu-text:          var(--cc-text);
	--smu-text-muted:    var(--cc-text-muted);
	--smu-radius:        var(--cc-radius-lg);
	--smu-radius-sm:     var(--cc-radius-md);
	--smu-shadow:        var(--cc-shadow-card);
	--smu-shadow-md:     var(--cc-shadow-lift);

	/* Pastel stat-card backgrounds */
	--pastel-blue:   var(--cc-bg-alt);
	--pastel-green:  #eafff3;
	--pastel-purple: #f3edff;
	--pastel-orange: #fff4e6;
	--pastel-teal:   #e6fbf8;
	--pastel-red:    #fdeeee;

	/* Badge colors */
	--badge-blue:   var(--cc-blue-dark); --badge-blue-bg:   var(--cc-bg-alt);
	--badge-green:  var(--cc-success);   --badge-green-bg:  #eafff3;
	--badge-red:    var(--cc-error);     --badge-red-bg:    #fdeeee;
	--badge-purple: var(--cc-purple);    --badge-purple-bg: #f3edff;
	--badge-orange: var(--cc-orange);    --badge-orange-bg: #fff4e6;
	--badge-teal:   #0d9488;             --badge-teal-bg:   #f0fdfa;
	--badge-grey:   var(--cc-text-muted);--badge-grey-bg:   var(--cc-surface-muted);
}

.smu-wrap,
.smu-modal {
	font-family: var(--cc-font-body);
}

/* Front-of-site portal pages read a little more "kids brand" than the
   dense wp-admin dashboard: soften card corners further and let stat
   tiles lift on hover, consistent with .cc-card. */
body.cc-plugin-page--wide .smu-card,
body.cc-plugin-page--wide .smu-stat-card {
	transition: transform var(--cc-duration-base) var(--cc-ease-bounce), box-shadow var(--cc-duration-base) ease;
}
body.cc-plugin-page--wide .smu-stat-card:hover {
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------------
   3. CLASSCLOUD MESSAGING
   .ccmsg-app already reads var(--smu-primary, …) etc with fallbacks, so
   section 2's bridge re-colors it automatically. Only layout/typography
   touches are needed here.
   --------------------------------------------------------------------- */
.ccmsg-app {
	font-family: var(--cc-font-body);
	border-radius: var(--cc-radius-lg);
}

.ccmsg-page-wrap {
	max-width: var(--cc-container);
}

.ccmsg-unread-badge {
	border-radius: var(--cc-radius-pill);
}

/* ---------------------------------------------------------------------
   4. CLASSCLOUD REGISTRAR — direct overrides (no CSS variables upstream)
   --------------------------------------------------------------------- */
.smur-wizard {
	font-family: var(--cc-font-body);
}

.smur-progress-dot {
	background: var(--cc-surface-muted);
	color: var(--cc-text-muted);
}
.smur-step-active .smur-progress-dot {
	background: var(--cc-blue-dark);
	color: #fff;
}
.smur-step-done .smur-progress-dot {
	background: var(--cc-success);
	color: #fff;
}
.smur-step-active .smur-progress-label {
	color: var(--cc-blue-dark);
}
.smur-progress-line {
	background: var(--cc-border);
}

.smur-step-title {
	color: var(--cc-text);
	font-family: var(--cc-font-display);
}

.smur-field input,
.smur-field select,
.smur-field textarea {
	border-radius: var(--cc-radius-sm);
	border-color: var(--cc-border);
}
.smur-field input:focus,
.smur-field select:focus,
.smur-field textarea:focus {
	border-color: var(--cc-blue-dark);
	box-shadow: 0 0 0 3px rgba(30, 127, 214, 0.12);
}

.smur-feature-card {
	border-radius: var(--cc-radius-md);
}
.smur-feature-card:hover,
.smur-feature-card.smur-selected {
	border-color: var(--cc-blue-dark);
	background: var(--cc-bg-alt);
}
.smur-feat-price,
.smur-total-amount {
	color: var(--cc-blue-dark);
}
.smur-feat-check-mark {
	background: var(--cc-blue-dark);
}

.smur-review-card {
	background: var(--cc-surface-muted);
	border-color: var(--cc-border);
	border-radius: var(--cc-radius-md);
}

.smur-renewal-note {
	background: var(--cc-bg-alt);
	border-radius: var(--cc-radius-sm);
}

.smur-btn {
	border-radius: var(--cc-radius-pill);
	font-family: var(--cc-font-display);
	font-weight: 800;
	transition: transform var(--cc-duration-fast) var(--cc-ease-bounce);
}
.smur-btn-primary {
	background: var(--cc-blue-dark);
}
.smur-btn-primary:hover {
	background: #145a9e;
	transform: translateY(-2px);
}
.smur-btn-outline:hover {
	border-color: var(--cc-blue-dark);
	color: var(--cc-blue-dark);
}

.smur-error-box {
	background: #fdeeee;
	border-color: var(--cc-error);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-error);
}

/* ---------------------------------------------------------------------
   5. SCHOOL BUS TRACKER
   --------------------------------------------------------------------- */

/* Parent live map — playful, matches the Kids brand since parents
   arrive here from the same site chrome. */
#sbt-parent-app {
	font-family: var(--cc-font-body);
	background: var(--cc-bg);
}
#parent-header {
	background: linear-gradient(135deg, var(--cc-blue), var(--cc-purple));
}
.pstatus-going_to_school { background: var(--cc-success); }
.pstatus-returning       { background: var(--cc-blue-dark); }
.pstatus-maintenance     { background: var(--cc-warning); }

/* Driver console — intentionally kept dark for outdoor/glare
   legibility while driving. Only the non-safety-critical "blue" brand
   accent (header, neutral trip button) is rebranded; the green/red
   go/stop trip-button colors are left untouched for at-a-glance
   safety recognition. */
#driver-app {
	font-family: var(--cc-font-body);
}
#driver-header {
	background: linear-gradient(135deg, var(--cc-blue-dark), var(--cc-purple));
	border-bottom-color: var(--cc-purple);
}
.trip-btn {
	border-radius: var(--cc-radius-md);
	font-family: var(--cc-font-display);
}
.btn-blue {
	background: linear-gradient(135deg, var(--cc-blue-dark), var(--cc-blue));
}
.status-going {
	background: var(--cc-blue-dark);
}
#driver-status-badge {
	border-radius: var(--cc-radius-pill);
}