/*
 * The Rock Supreme School - shared modernization layer
 * Loaded after the base template/Bootstrap CSS in every area (marketing
 * site, eportal dashboards, CBT, shop) to bring spacing, typography,
 * shadows, and responsiveness up to a consistent standard without
 * changing the existing navy/orange brand colors.
 */

:root {
  --trss-navy: #0d3b68;
  --trss-navy-dark: #082744;
  --trss-orange: #FF6600;
  --trss-orange-dark: #e05800;
  --trss-ink: #1f2937;
  --trss-muted: #6b7280;
  --trss-border: #e5e7eb;
  --trss-surface: #ffffff;
  --trss-bg: #f4f6f9;

  --trss-radius-sm: 6px;
  --trss-radius-md: 10px;
  --trss-radius-lg: 16px;

  --trss-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --trss-shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --trss-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);

  --trss-space-1: 4px;
  --trss-space-2: 8px;
  --trss-space-3: 12px;
  --trss-space-4: 16px;
  --trss-space-5: 24px;
  --trss-space-6: 32px;

  --trss-transition: 160ms ease;
}

/* Typography rhythm ------------------------------------------------------ */
body {
  color: var(--trss-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-title, .h1, .h2, .h3, .h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { line-height: 1.6; }

/* Cards ------------------------------------------------------------------ */
.card,
.card-kme,
.content__boxed .card,
.checkout-container,
.order-summary,
.student-info-card {
  border: 1px solid var(--trss-border);
  border-radius: var(--trss-radius-md) !important;
  box-shadow: var(--trss-shadow-sm) !important;
  transition: box-shadow var(--trss-transition), transform var(--trss-transition);
}

.card:hover,
.card-kme:hover {
  box-shadow: var(--trss-shadow-md) !important;
}

.card-body { padding: var(--trss-space-5); }

/* Buttons ------------------------------------------------------------------ */
.btn {
  border-radius: var(--trss-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--trss-transition), box-shadow var(--trss-transition), background-color var(--trss-transition);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-orange,
.btn-pay {
  box-shadow: var(--trss-shadow-sm);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible {
  outline: 2px solid var(--trss-orange);
  outline-offset: 2px;
}

/* Forms -------------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--trss-radius-sm);
  border-color: var(--trss-border);
}

.form-label {
  font-weight: 600;
  color: var(--trss-navy);
  margin-bottom: var(--trss-space-1);
}

/* Tables ------------------------------------------------------------------- */
.table {
  --bs-table-hover-bg: rgba(13, 59, 104, 0.04);
}

.table thead th {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--trss-muted);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.table td, .table th {
  vertical-align: middle;
  padding-top: var(--trss-space-3);
  padding-bottom: var(--trss-space-3);
}

.table-responsive {
  border-radius: var(--trss-radius-md);
}

/* Navigation / sidebar shell ------------------------------------------------ */
.mainnav__menu .nav-link {
  border-radius: var(--trss-radius-sm);
  transition: background-color var(--trss-transition), color var(--trss-transition);
}

.mainnav__caption {
  color: var(--trss-muted);
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.navbar {
  box-shadow: var(--trss-shadow-sm);
}

/* Alerts / badges ------------------------------------------------------------ */
.alert {
  border: none;
  border-radius: var(--trss-radius-md);
  box-shadow: var(--trss-shadow-sm);
}

.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Scrollbar polish (webkit) --------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13, 59, 104, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(13, 59, 104, 0.4); }

/* Responsive tightening ------------------------------------------------------- */
@media (max-width: 768px) {
  .card-body,
  .content__wrap { padding: var(--trss-space-4) !important; }

  h1, .page-title { font-size: 1.4rem; }

  .table thead th,
  .table td { padding-left: var(--trss-space-2); padding-right: var(--trss-space-2); }
}

@media (max-width: 480px) {
  .btn-lg { padding: 0.6rem 1rem; font-size: 0.95rem; }
}

/* CBT admin/staff sidebar (Bootstrap-shell pages under eportal/cbt) -------------- */
.sidebar .nav-link {
  border-radius: var(--trss-radius-sm);
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 2px;
  padding: 0.55rem 0.9rem;
}

.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.sidebar .nav-link.active {
  background: var(--trss-orange);
  color: #fff !important;
  font-weight: 600;
}

/* ==========================================================================
   Dashboard shell modernization (Nifty-based admin/staff/student portal)
   Cosmetic-only overrides on top of nifty.min.css - colors, spacing,
   shadows, typography. No layout/collapse/JS-driven classes touched, so
   the existing sidebar toggle and submenu behavior keeps working as-is.
   ========================================================================== */

body { background: var(--trss-bg); }

/* Topbar ------------------------------------------------------------------- */
.header {
  background: var(--trss-surface) !important;
  border-bottom: 1px solid var(--trss-border);
  box-shadow: var(--trss-shadow-sm) !important;
}

.header .brand-title {
  color: var(--trss-navy) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Every portal's top-right header widget (clock/"Welcome: NAME" badge,
   HeaderContentRightSide.php) uses text-white, since nifty.min.css's
   default .header background is dark - the flat light .header above
   made all of that invisible. */
.header .text-white:not(.badge) {
  color: var(--trss-ink) !important;
}

.header__btn {
  border-radius: var(--trss-radius-sm);
  transition: background-color var(--trss-transition);
}

.header-searchbox .searchbox__input {
  border-radius: var(--trss-radius-sm) !important;
}

/* Sidebar / mainnav ---------------------------------------------------------- */
.mainnav {
  background: var(--trss-navy-dark) !important;
  border-right: none;
}

/* nifty.min.css puts a solid white, absolutely-positioned .mainnav__inner
   INSIDE .mainnav, fully covering the navy background above with its icon
   font pre-colored for a dark sidebar (near-invisible light blue on white,
   which is what made every sidebar icon look "missing"). */
.mainnav__inner {
  background: transparent !important;
}

/* .mainnav__bottom-content (the sticky "Logout" section pinned to the
   bottom of the sidebar while it scrolls) has its own solid white
   background, same covering-layer problem as .mainnav__inner above -
   except transparent isn't safe here since it's position:sticky and
   needs something solid behind it while the sidebar scrolls underneath. */
.mainnav__bottom-content {
  background: var(--trss-navy-dark) !important;
}

.mainnav__caption {
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 700;
}

.mainnav__menu .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  margin: 1px 0.5rem;
}

.mainnav__menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.mainnav__menu > .nav-item > .nav-link.active,
.mainnav__menu > .nav-item.active > .nav-link {
  background: var(--trss-orange) !important;
  color: #fff !important;
  font-weight: 600;
}

.mainnav__profile {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The admin/staff/student name + role under the sidebar avatar have no
   color class of their own - they relied on inheriting a light color from
   somewhere up the tree, which the global `body { color }` rule above now
   overrides, leaving dark-on-navy invisible text. */
.mainnav__profile h6,
.mainnav__profile .btn,
.mainnav__profile small {
  color: rgba(255, 255, 255, 0.92) !important;
}

.mainnav__avatar {
  border-radius: var(--trss-radius-md) !important;
  box-shadow: var(--trss-shadow-sm);
}

/* The big school-name heading on admin/bursar/principal/receptionist/student
   dashboards wraps the name in <span class="text-muted"> inside a
   <h3 class="... text-warning">. Bootstrap 5.3's .text-muted resolves to a
   near-white color here (Nifty's dark-banner context), so on the actual
   light background behind it the heading was essentially invisible -
   inherit the intended orange from the parent instead. */
.content__header .page-title .text-muted {
  color: inherit !important;
}

/* Breadcrumbs (Home > Section > Page) throughout every eportal page are
   styled by nifty.min.css for the same dark-banner context as the heading
   above - light gray/white text and separators - so on the actual light
   background they sit on, they were essentially unreadable everywhere.
   This is the single shared .breadcrumb component used site-wide, so one
   fix here covers every portal page at once. */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--trss-muted);
}

.breadcrumb-item,
.breadcrumb-item.active {
  color: var(--trss-muted) !important;
}

.breadcrumb-item a {
  color: var(--trss-navy) !important;
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--trss-orange) !important;
  text-decoration: underline;
}

/* Plain (no text-* utility class) headings/paragraphs directly in the same
   .content__header banner area - e.g. staff dashboard's "Welcome to your
   Dashboard." / "You logged in as TEACHER" - have the identical problem:
   nifty.min.css expects them white-on-dark, so with no override they
   inherited the global dark body color instead and vanished into the
   light background. Leaves .text-warning/.text-muted spans (already
   fixed above) alone since those still carry their own color. */
.content__header h1:not([class*="text-"]),
.content__header h2:not([class*="text-"]),
.content__header h3:not([class*="text-"]),
.content__header h4:not([class*="text-"]),
.content__header p:not([class*="text-"]) {
  color: var(--trss-ink) !important;
}

/* The "Session » 2025-2026 Term » 3rd Term." line puts "Session"/"Term"
   in a .text-warning span, but the actual values and the "»" separators
   sit as bare text directly in the parent <h3 class="h3 page-title mb-2">
   (no text-* class of its own) - so they inherited the same dark-context
   white the rule above fixes for other bare headings, except THIS h3
   also has no text-* class, so it's already covered by :not() above...
   except the school-name h3 right next to it *does* carry text-warning
   directly (not on a child span), which the :not() correctly leaves
   alone. And the date/clock line's <h3 class="text-white"> is the same
   problem as the topbar .text-white fix further up, just here instead
   of .header - excluded from the :not() above since "text-white"
   contains "text-", so it needs its own rule. */
.content__header .text-white {
  color: var(--trss-ink) !important;
}

/* Content area --------------------------------------------------------------- */
.content__wrap {
  background: var(--trss-bg);
}

.content__boxed {
  padding-top: var(--trss-space-5);
}

/* Stat widgets (dashboard summary cards) -------------------------------------- */
.card-kme .p-3.text-center .h1,
.card-kme .p-3.text-center .h3 {
  font-weight: 800;
  color: var(--trss-navy);
}

/* Reduced motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.001ms !important; }
}