/* ASK Jhansi Academy design system: tokens, Bootstrap overrides and shared components. */

:root {
  --aja-ink: #13213c;
  --aja-text: #3b4458;
  --aja-muted: #6b7385;
  --aja-bg: #f6f7fb;
  --aja-surface: #ffffff;
  --aja-surface-2: #f1f3f8;
  --aja-border: #e6e9f0;
  --aja-gold: #ffc704;
  --aja-gold-600: #e6b000;
  --aja-gold-700: #9a7400;
  --aja-gold-50: #fff8db;
  --aja-navy: #13213c;
  --aja-navy-900: #0b1426;
  --aja-success: #15803d;
  --aja-success-50: #e9f9ef;
  --aja-danger: #c62828;
  --aja-danger-50: #fdeeee;
  --aja-warning: #a15c00;
  --aja-warning-50: #fff4de;
  --aja-info: #1d4ed8;
  --aja-info-50: #eef3ff;
  --aja-radius-sm: 10px;
  --aja-radius: 14px;
  --aja-radius-lg: 20px;
  --aja-radius-xl: 28px;
  --aja-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --aja-shadow: 0 18px 40px -18px rgba(16, 24, 40, .22), 0 3px 8px rgba(16, 24, 40, .05);
  --aja-ring: 0 0 0 4px rgba(255, 199, 4, .28);

  --bs-body-color: var(--aja-text);
  --bs-body-color-rgb: 59, 68, 88;
  --bs-heading-color: var(--aja-ink);
  --bs-secondary-color: var(--aja-muted);
  --bs-border-color: var(--aja-border);
  --bs-border-radius: var(--aja-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--aja-radius);
  --bs-border-radius-xl: var(--aja-radius-lg);
  --bs-border-radius-xxl: var(--aja-radius-xl);
  --bs-link-color: var(--aja-ink);
  --bs-link-color-rgb: 19, 33, 60;
  --bs-link-hover-color: var(--aja-gold-700);
  --bs-link-hover-color-rgb: 154, 116, 0;
  --bs-focus-ring-color: rgba(255, 199, 4, .35);
}

/* Bootstrap's dark theme sets this to `inherit`, which would copy the navy above; `initial` lets headings take the surrounding text colour again. */
[data-bs-theme=dark] { --bs-heading-color: initial; }

/* Column layout so the footer sits at the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--aja-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255, 199, 4, .35); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.01em; }

/* ---------- Bootstrap component overrides ---------- */

.btn {
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: .95rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 12px;
  --bs-btn-focus-box-shadow: var(--aja-ring);
  letter-spacing: .01em;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn .bx { vertical-align: -.15em; font-size: 1.15em; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 14px; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 10px; }

.btn-primary {
  --bs-btn-color: #1b1b1b;
  --bs-btn-bg: var(--aja-gold);
  --bs-btn-border-color: var(--aja-gold);
  --bs-btn-hover-color: #1b1b1b;
  --bs-btn-hover-bg: var(--aja-gold-600);
  --bs-btn-hover-border-color: var(--aja-gold-600);
  --bs-btn-active-color: #1b1b1b;
  --bs-btn-active-bg: var(--aja-gold-600);
  --bs-btn-active-border-color: var(--aja-gold-600);
  --bs-btn-disabled-color: #1b1b1b;
  --bs-btn-disabled-bg: var(--aja-gold);
  --bs-btn-disabled-border-color: var(--aja-gold);
  box-shadow: 0 6px 16px -8px rgba(230, 176, 0, .65);
}
.btn-secondary {
  --bs-btn-bg: var(--aja-navy);
  --bs-btn-border-color: var(--aja-navy);
  --bs-btn-hover-bg: #1d2f52;
  --bs-btn-hover-border-color: #1d2f52;
  --bs-btn-active-bg: var(--aja-navy-900);
  --bs-btn-active-border-color: var(--aja-navy-900);
}
.btn-light {
  --bs-btn-bg: var(--aja-surface);
  --bs-btn-border-color: var(--aja-border);
  --bs-btn-color: var(--aja-ink);
  --bs-btn-hover-bg: var(--aja-surface-2);
  --bs-btn-hover-border-color: var(--aja-border);
}
.btn-outline-secondary {
  --bs-btn-color: var(--aja-ink);
  --bs-btn-border-color: var(--aja-border);
  --bs-btn-hover-color: var(--aja-ink);
  --bs-btn-hover-bg: var(--aja-surface-2);
  --bs-btn-hover-border-color: #d5d9e3;
  --bs-btn-active-color: var(--aja-ink);
  --bs-btn-active-bg: var(--aja-surface-2);
  --bs-btn-active-border-color: #d5d9e3;
}

.form-label { margin-bottom: .4rem; color: var(--aja-ink); font-size: .875rem; font-weight: 500; }
.form-control,
.form-select {
  min-height: 48px;
  padding: .7rem 1rem;
  border-color: var(--aja-border);
  border-radius: 12px;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: #9aa1b2; }
.form-control:focus,
.form-select:focus { border-color: var(--aja-gold-600); box-shadow: var(--aja-ring); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--aja-surface-2); }
.form-select { padding-right: 2.5rem; }
.form-check-input:checked { background-color: var(--aja-gold); border-color: var(--aja-gold-600); }
.form-check-input:focus { border-color: var(--aja-gold-600); box-shadow: var(--aja-ring); }
.input-group > .form-control { min-height: 48px; }

.card {
  --bs-card-border-color: var(--aja-border);
  --bs-card-border-radius: var(--aja-radius-lg);
  --bs-card-inner-border-radius: calc(var(--aja-radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--aja-shadow-sm);
}

.alert {
  --bs-alert-padding-y: .9rem;
  --bs-alert-padding-x: 1.1rem;
  --bs-alert-border-radius: var(--aja-radius);
  font-size: .925rem;
}

.badge {
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .42em;
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 999px;
  letter-spacing: .02em;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--aja-border);
  --bs-table-hover-bg: rgba(19, 33, 60, .025);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table > thead th,
.table > thead td {
  background: var(--aja-surface-2);
  color: var(--aja-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom-width: 1px;
}

.accordion {
  --bs-accordion-border-color: var(--aja-border);
  --bs-accordion-border-radius: var(--aja-radius);
  --bs-accordion-inner-border-radius: calc(var(--aja-radius) - 1px);
  --bs-accordion-btn-padding-y: 1.05rem;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-focus-box-shadow: var(--aja-ring);
  --bs-accordion-active-bg: var(--aja-gold-50);
  --bs-accordion-active-color: var(--aja-ink);
  --bs-accordion-body-padding-x: 1.25rem;
}
.accordion-button { color: var(--aja-ink); font-weight: 600; }

.modal {
  --bs-modal-border-radius: var(--aja-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--aja-radius-lg) - 1px);
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: var(--aja-border);
  --bs-modal-footer-border-color: var(--aja-border);
  --bs-modal-padding: 1.5rem;
}
.modal-content { box-shadow: var(--aja-shadow); }

.text-aja-info { color: var(--aja-ink); }
.min-w-0 { min-width: 0; }
.text-muted-aja { color: var(--aja-muted) !important; }

/* ---------- Layout primitives ---------- */

.aja-section { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; }
.aja-section-sm { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; }
.aja-section-head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.aja-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .9rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--aja-gold-50);
  color: var(--aja-gold-700);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aja-title {
  margin-bottom: .75rem;
  color: var(--aja-ink);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.aja-lead { margin: 0 auto; max-width: 62ch; color: var(--aja-muted); font-size: 1.05rem; line-height: 1.7; }

.aja-card {
  position: relative;
  height: 100%;
  background: var(--aja-surface);
  border: 1px solid var(--aja-border);
  border-radius: var(--aja-radius-lg);
  box-shadow: var(--aja-shadow-sm);
}
.aja-card-body { padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.aja-card-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--aja-border);
}
.aja-card-title { margin: 0; color: var(--aja-ink); font-size: 1.05rem; font-weight: 600; }
.aja-card-sub { margin: .15rem 0 0; color: var(--aja-muted); font-size: .85rem; }
.aja-hover-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.aja-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--aja-shadow); border-color: #dde1ea; }

.aja-icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--aja-gold-50);
  color: var(--aja-gold-700);
  font-size: 1.5rem;
}
.aja-icon-tile.is-navy { background: rgba(19, 33, 60, .07); color: var(--aja-ink); }

.aja-stat { padding: 1.4rem 1.5rem; }
.aja-stat-value { color: var(--aja-ink); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; line-height: 1.1; }
.aja-stat-label { margin-top: .35rem; color: var(--aja-muted); font-size: .9rem; }

.aja-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--aja-surface-2);
  color: var(--aja-text);
  font-size: .8rem;
  font-weight: 500;
}
.aja-chip .bx { font-size: 1rem; color: var(--aja-muted); }

.aja-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.aja-empty { padding: 3rem 1.5rem; text-align: center; color: var(--aja-muted); }
.aja-empty .bx { display: block; margin-bottom: .75rem; color: var(--aja-gold-600); font-size: 2.75rem; }
.aja-empty h2, .aja-empty h3 { color: var(--aja-ink); font-size: 1.1rem; font-weight: 600; }

.aja-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.aja-page-title { margin: 0; color: var(--aja-ink); font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); font-weight: 700; }
.aja-page-sub { margin: .3rem 0 0; color: var(--aja-muted); font-size: .95rem; }

.aja-article { color: var(--aja-text); font-size: 1rem; line-height: 1.75; }
.aja-article img { max-width: 100%; height: auto; border-radius: var(--aja-radius); }

/* Workshop card (upcoming workshops, my workshops) */
.aja-workshop-card { display: flex; flex-direction: column; overflow: hidden; }
.aja-workshop-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--aja-surface-2); }
.aja-workshop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.aja-workshop-card:hover .aja-workshop-media img { transform: scale(1.04); }
.aja-workshop-body { display: flex; flex: 1; flex-direction: column; gap: .75rem; padding: 1.25rem 1.4rem 1.4rem; }
.aja-workshop-title { margin: 0; color: var(--aja-ink); font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.aja-workshop-text { margin: 0; color: var(--aja-muted); font-size: .9rem; line-height: 1.6; }
.aja-workshop-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .5rem; }

/* ---------- Public site header ---------- */

.aja-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--aja-border);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.aja-site-header .navbar { padding: .65rem 0; }
.aja-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--aja-ink); text-decoration: none; }
.aja-brand:hover { color: var(--aja-ink); }
.aja-brand img { width: 46px; height: auto; }
.aja-brand-name { margin: 0; color: var(--aja-ink); font-size: 1.05rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.aja-brand-name span { color: var(--aja-gold-600); }
.aja-nav { gap: .25rem; }
.aja-nav .nav-link {
  padding: .5rem .95rem !important;
  border-radius: 999px;
  color: var(--aja-text);
  font-size: .95rem;
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
.aja-nav .nav-link:hover { background: var(--aja-surface-2); color: var(--aja-ink); }
.aja-nav .nav-link.active { background: var(--aja-gold-50); color: var(--aja-ink); }
.aja-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--aja-border);
  border-radius: 12px;
  background: var(--aja-surface);
  color: var(--aja-ink);
  font-size: 1.5rem;
}
.aja-menu-btn:focus { box-shadow: var(--aja-ring); }
@media (max-width: 1199.98px) {
  .aja-site-header .navbar-collapse {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid var(--aja-border);
    border-radius: var(--aja-radius-lg);
    background: var(--aja-surface);
    box-shadow: var(--aja-shadow);
  }
  .aja-site-header .navbar-nav .btn { width: 100%; margin-top: .5rem; }
}

/* ---------- Public site footer ---------- */

.aja-site-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, .7);
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(255, 199, 4, .16), transparent 65%),
    radial-gradient(600px 400px at 100% 100%, rgba(59, 130, 246, .12), transparent 60%),
    linear-gradient(180deg, var(--aja-navy) 0%, var(--aja-navy-900) 100%);
}
.aja-site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .15s; }
.aja-site-footer a:hover { color: var(--aja-gold); }
.aja-site-footer .aja-brand-name { color: #fff; font-size: 1.2rem; }
.aja-site-footer .aja-brand-name span { color: var(--aja-gold); }
.aja-footer-heading {
  margin-bottom: 1rem;
  color: var(--aja-gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aja-footer-links { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.aja-pill-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff !important;
  font-size: .9rem;
}
.aja-pill-link:hover { border-color: rgba(255, 199, 4, .5); background: rgba(255, 199, 4, .1); }
.aja-pill-link .bx { color: var(--aja-gold); font-size: 1.2rem; }
.aja-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.aja-footer-bottom .container { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding-block: 1.5rem; }
.aja-footer-bottom p { margin: 0; }
@media (min-width: 768px) { .aja-footer-bottom .container { flex-direction: row; } }

/* ---------- Student dashboard shell ---------- */

.aja-app { min-height: 100vh; background: var(--aja-bg); }
.aja-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  padding: 1.25rem 1rem;
  background: var(--aja-surface);
  border-right: 1px solid var(--aja-border);
  overflow-y: auto;
}
.aja-user-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--aja-border);
  border-radius: var(--aja-radius);
  background: var(--aja-surface-2);
}
.aja-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--aja-gold);
  color: #1b1b1b;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.aja-user-name { margin: 0; color: var(--aja-ink); font-size: .92rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.aja-user-email { margin: 0; color: var(--aja-muted); font-size: .78rem; overflow-wrap: anywhere; }
.aja-side-label { margin: .5rem .75rem 0; color: var(--aja-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.aja-side-nav { display: grid; gap: .25rem; }
.aja-side-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  color: var(--aja-text);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.aja-side-link .bx { color: var(--aja-muted); font-size: 1.3rem; transition: color .15s; }
.aja-side-link:hover { background: var(--aja-surface-2); color: var(--aja-ink); }
.aja-side-link.active { background: var(--aja-gold-50); color: var(--aja-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--aja-gold); }
.aja-side-link.active .bx { color: var(--aja-gold-700); }
.aja-side-link.is-danger:hover { background: var(--aja-danger-50); color: var(--aja-danger); }
.aja-side-link.is-danger:hover .bx { color: var(--aja-danger); }

.aja-app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  padding: .6rem clamp(1rem, .5rem + 2vw, 2rem);
  border-bottom: 1px solid var(--aja-border);
  background: rgba(246, 247, 251, .86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.aja-app-content { padding: clamp(1.25rem, .75rem + 2vw, 2.25rem) clamp(1rem, .5rem + 2vw, 2.25rem) 3rem; }
.aja-app-content > .aja-container { max-width: 1180px; margin: 0 auto; }

@media (min-width: 768px) {
  /* The sidebar column is painted here so it runs the full page height; responsive offcanvas forces its own background transparent. */
  .aja-app {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    background: linear-gradient(90deg, var(--aja-surface) 0 271px, var(--aja-border) 271px 272px, var(--aja-bg) 272px);
  }
  .aja-sidebar { position: sticky; top: 0; height: 100vh; }
  .aja-sidebar-inner { border-right: 0; }
  .aja-app-topbar .aja-brand { display: none; }
}
@media (max-width: 767.98px) {
  .aja-sidebar.offcanvas-md { --bs-offcanvas-width: 290px; }
  .aja-sidebar-inner { border-right: 0; }
}

/* ---------- Sign-in shell ---------- */

.aja-auth { display: grid; flex: 1 0 auto; background: var(--aja-bg); }
.aja-auth-brand {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem;
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(255, 199, 4, .22), transparent 65%),
    radial-gradient(520px 420px at 100% 100%, rgba(59, 130, 246, .16), transparent 60%),
    linear-gradient(160deg, var(--aja-navy) 0%, var(--aja-navy-900) 100%);
}
.aja-auth-brand .aja-brand-name { color: #fff; font-size: 1.25rem; }
.aja-auth-brand .aja-brand-name span { color: var(--aja-gold); }
.aja-auth-headline { margin: auto 0; color: #fff; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.aja-auth-headline span { color: var(--aja-gold); }
.aja-auth-main { display: flex; align-items: center; justify-content: center; padding: clamp(1.25rem, 1rem + 3vw, 3rem); }
.aja-auth-card {
  width: 100%;
  max-width: 460px;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px solid var(--aja-border);
  border-radius: var(--aja-radius-xl);
  background: var(--aja-surface);
  box-shadow: var(--aja-shadow);
}
.aja-auth-mobile-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
@media (min-width: 992px) {
  .aja-auth { grid-template-columns: minmax(380px, 5fr) 7fr; }
  .aja-auth-brand { display: flex; }
  .aja-auth-mobile-brand { display: none; }
}

/* ---------- Print ---------- */

@media print {
  .aja-site-header, .aja-site-footer, .aja-no-print { display: none !important; }
  body { background: #fff; }
  .aja-card { box-shadow: none; }
}