:root {
  /* A6 final brand palette (MPSC Dreamers Academy). Every admin/public
     surface reads from these custom properties, so this is the single
     place the rebrand's colors cascade from — no other markup/layout
     changes were made to the existing A1-A5 admin interface. */
  --va-navy: #102A43;
  --va-navy-light: #1c3f60;
  --va-saffron: #FF7A00;
  --va-green: #138A4B;
  --va-gold: #D4AF37;
  /* Pre-A9 UI pass: LIVE ENDED needs a tone distinct from both navy
     (UPCOMING) and green (LIVE/LIVE COMPLETED) so a student scanning a
     list can tell "this window is over" apart from "this is scheduled"
     at a glance — a muted brick red, not an alarm/danger red. */
  --va-red: #B3413E;
  --va-white: #FFFFFF;
  --va-bg: #F5F7FA;
  --va-dark: #263238;
  --va-text: #1C2B3A;
  --va-text-muted: #6B7A8D;
  --va-border: #E5E9EF;
  --va-radius: 12px;
  --va-radius-sm: 10px;
  --va-shadow: 0 4px 16px rgba(16, 42, 67, 0.08);
  --va-shadow-lg: 0 20px 60px rgba(16, 42, 67, 0.25);
}

* { box-sizing: border-box; }

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--va-bg);
  color: var(--va-text);
}

a { text-decoration: none; }

/* ---- Brand mark (used via partials/_brand_logo.html everywhere) ---- */
.brand-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.brand-logo-img {
  /* Horizontal logo — height-constrained, width auto, never forced into
     a square/circle. object-fit: contain preserves its native aspect
     ratio if the source image itself is ever taller/wider than this box.
     Mobile-first: 32-42px tall on small screens, 40-50px on desktop
     (per brand spec), width follows the logo's own ~4.2:1 aspect ratio. */
  height: 34px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .brand-logo-img {
    height: 60px;
    max-width: 230px;
  }
}

.brand-wordmark {
  display: block;
  text-align: left;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--va-navy);
  font-size: 1.05rem;
  line-height: 1.15;
}

.brand-wordmark-accent { color: var(--va-saffron); }

.brand-wordmark small {
  display: block;
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: 1.4px;
  color: var(--va-text-muted);
  text-transform: uppercase;
}

.tricolor-bar {
  height: 5px;
  border-radius: var(--va-radius) var(--va-radius) 0 0;
  margin: -2.25rem -2rem 1.5rem -2rem;
  background: linear-gradient(
    90deg,
    var(--va-saffron) 0%, var(--va-saffron) 33%,
    var(--va-white) 33%, var(--va-white) 66%,
    var(--va-green) 66%, var(--va-green) 100%
  );
}

/* ---- Toasts ---- */
.toast-stack { max-width: 380px; z-index: 1080; }

/* ---- Buttons ---- */
.btn-va-primary {
  background-color: var(--va-navy);
  border-color: var(--va-navy);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
  padding: .65rem 1rem;
  border-radius: var(--va-radius-sm);
}
.btn-va-primary:hover,
.btn-va-primary:focus {
  background-color: #0d2d5c;
  border-color: #0d2d5c;
  color: #fff;
}

.btn-outline-va-navy {
  color: var(--va-navy);
  border-color: var(--va-navy);
  border-radius: var(--va-radius-sm);
}
.btn-outline-va-navy:hover {
  background-color: var(--va-navy);
  color: #fff;
}

/* ---- Reusable card ---- */
.va-card {
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius);
  box-shadow: var(--va-shadow);
}

/* ---- Error pages ---- */
.error-card-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.error-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--va-radius);
  box-shadow: var(--va-shadow);
  padding: 2.5rem 2rem;
}

.error-card-container .brand-logo { justify-content: center; }

.error-code {
  font-size: 3rem;
  font-weight: 900;
  color: var(--va-navy);
  line-height: 1;
  margin-top: .5rem;
}

.error-title { font-size: 1.25rem; font-weight: 700; margin: .5rem 0; }
.error-message { color: var(--va-text-muted); margin-bottom: 1.5rem; }

/* =========================================================
   PWA INSTALL MODAL
   ========================================================= */

.pwa-install-modal .modal-content {

    border-radius: 20px;
    overflow: hidden;
    background: #fff;

}


/* =========================================================
   INDIAN TRICOLOR
   ========================================================= */

.pwa-tricolor {

    height: 4px;

    background: linear-gradient(
        90deg,
        #FF9933 0%,
        #FF9933 33.33%,
        #FFFFFF 33.33%,
        #FFFFFF 66.66%,
        #138808 66.66%,
        #138808 100%
    );

}


/* =========================================================
   MODAL BRAND
   ========================================================= */

.pwa-modal-brand {

    color: #173653;

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.3px;

}


.pwa-modal-brand i {

    color: #FF9933;

    margin-right: 5px;

}


/* =========================================================
   APP ICON
   ========================================================= */

.pwa-app-icon-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 5px;

}


.pwa-app-icon {

    width: 88px;

    height: 88px;

    object-fit: contain;

    border-radius: 20px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.12);

}


/* =========================================================
   ANDROID INSTALL BOX
   ========================================================= */

.pwa-step-box {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px;

    border-radius: 14px;

    background: #f7f9fb;

    border: 1px solid #e5e9ed;

}


.pwa-feature-icon {

    width: 44px;

    height: 44px;

    min-width: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #fff3e8;

    color: #FF9933;

    font-size: 1.25rem;

}


/* =========================================================
   INSTALL BUTTON
   ========================================================= */

.pwa-install-btn {

    background: #173653;

    color: #fff;

    border: 0;

    border-radius: 12px;

    padding: 12px 18px;

    font-weight: 700;

}


.pwa-install-btn:hover {

    background: #102b43;

    color: #fff;

}


/* =========================================================
   iOS
   ========================================================= */

.pwa-ios-title {

    font-weight: 700;

    color: #173653;

    margin-bottom: 10px;

}


.pwa-ios-title i {

    color: #138808;

}


.pwa-ios-step {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    border-bottom: 1px solid #edf0f2;

    font-size: 0.94rem;

}


.pwa-step-number {

    width: 30px;

    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #173653;

    color: #fff;

    font-size: 0.8rem;

    font-weight: 700;

}


.pwa-share-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 0 3px;

    color: #138808;

    font-size: 1.05rem;

}


/* =========================================================
   FOOTER NOTE
   ========================================================= */

.pwa-install-note {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    padding: 11px 13px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        rgba(255, 153, 51, 0.08),
        rgba(255, 255, 255, 0.8),
        rgba(19, 136, 8, 0.08)
    );

    color: #5b6570;

    font-size: 0.78rem;

}


.pwa-install-note i {

    color: #138808;

    font-size: 1rem;

}