/*
 * Shared UI hardening for public, owner, management and super-admin surfaces.
 * Keep this file small: it loads on every application shell.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid rgba(79, 70, 229, .45);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.ui-scroll-table,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ui-scroll-table > table,
.table-responsive > table {
  min-width: 680px;
}

:where(.card, .panel, .modal-content, td, th, p, a, span) {
  overflow-wrap: anywhere;
}

[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58;
}

@media (max-width: 680px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  .modal,
  [role="dialog"] {
    max-width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  /*
   * Keep reduced-motion accessibility everywhere by default. The cinematic
   * landing page deliberately opts back into motion with .lh-force-motion.
   * Without this exclusion, this shared stylesheet overrides every landing
   * animation with 0.01ms durations after deployment.
   */
  html:not(.lh-force-motion) {
    scroll-behavior: auto !important;
  }

  html:not(.lh-force-motion) *,
  html:not(.lh-force-motion) *::before,
  html:not(.lh-force-motion) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   Premium responsive management workspace
   Desktop: professional SaaS console. Mobile: native app shell.
========================================================= */
body.management-role {
  --mg-primary: #4f46e5;
  --mg-primary-strong: #3730a3;
  --mg-accent: #06b6d4;
  --mg-surface: #ffffff;
  --mg-surface-soft: #f8fafc;
  --mg-border: #e2e8f0;
  --mg-text: #0f172a;
  --mg-muted: #64748b;
  --mg-shadow: 0 18px 48px rgba(15, 23, 42, .09);
  background:
    radial-gradient(circle at 74% -10%, rgba(99, 102, 241, .13), transparent 30%),
    linear-gradient(180deg, #f4f6fb 0, #f8fafc 420px) !important;
  color: var(--mg-text);
}

.management-role .sidebar {
  width: 280px;
  padding: 18px 12px 24px;
  background:
    radial-gradient(circle at 12% 5%, rgba(99, 102, 241, .28), transparent 25%),
    linear-gradient(180deg, #0a1020 0%, #111a32 58%, #090f1e 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 18px 0 55px rgba(15, 23, 42, .12);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .28) transparent;
}

.management-role .sidebar-header {
  min-height: 72px;
  padding: 8px 10px 18px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.management-role .sidebar-header img {
  width: 46px !important;
  height: 46px !important;
  padding: 5px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.management-role .sidebar-header h2 {
  font-size: 17px;
  letter-spacing: -.025em;
}

.management-role .sidebar > a {
  min-height: 45px;
  margin: 3px 4px;
  padding: 0 13px;
  border-radius: 13px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  gap: 11px;
}

.management-role .sidebar > a i {
  width: 19px;
  color: #94a3b8;
  font-size: 15px;
  text-align: center;
}

.management-role .sidebar > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
  transform: translateX(2px);
}

.management-role .sidebar > a.active {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 12px 28px rgba(79, 70, 229, .30);
}

.management-role .sidebar > a.active i {
  color: #fff;
}

.management-role .main {
  width: auto;
  min-width: 0;
  min-height: 100vh;
  margin-left: 280px;
  padding: 20px 28px 34px;
  transition: margin-left .28s ease;
}

.management-role .sidebar.hide {
  transform: translateX(-100%);
}

.management-role .main.full {
  margin-left: 0;
}

.management-role .topbar {
  top: 12px;
  min-height: 68px;
  padding: 10px 14px;
  margin: 0 0 22px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.management-role .topbar-title {
  gap: 10px;
}

.management-role .topbar-title > span:last-child {
  display: grid;
  line-height: 1.15;
}

.management-role .topbar-title strong {
  max-width: 42vw;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-role .topbar-title small {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.management-role .topbar-brand-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #4f46e5, #7c3aed);
  box-shadow: 0 9px 22px rgba(79, 70, 229, .25);
}

.management-role .menu-btn,
.management-role .dark-btn,
.management-role .topbar-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  box-shadow: none !important;
}

.management-role .main :where(.card, .section-box, .search-panel, .form-box, .expense-box, .student-fee-card, .stat-card) {
  border: 1px solid rgba(226, 232, 240, .88);
  box-shadow: var(--mg-shadow);
}

.management-role .main :where(button, .btn, a.btn, input[type="submit"]) {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 750;
}

.management-role .main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
}

.management-role .main :where(table) {
  font-size: 13px;
}

.management-role .main :where(th) {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.management-mobile-dock {
  display: none;
}

.management-role.dark-mode {
  --mg-surface: #111827;
  --mg-surface-soft: #0f172a;
  --mg-border: #334155;
  --mg-text: #f8fafc;
  --mg-muted: #94a3b8;
  background: #070d1a !important;
}

.management-role.dark-mode .topbar {
  background: rgba(15, 23, 42, .90);
  border-color: #334155;
}

.management-role.dark-mode .topbar-title strong {
  color: #f8fafc;
}

@media (min-width: 1440px) {
  .management-role .main {
    padding-right: clamp(34px, 4vw, 72px);
    padding-left: clamp(34px, 4vw, 72px);
  }

  .management-role .main > :not(.topbar):not(.management-mobile-dock) {
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  body.management-role,
  body.student-role {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    background: #f3f6fb !important;
  }

  .management-role .base-bg-animation {
    display: none;
  }

  .management-role .sidebar {
    width: min(86vw, 320px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    border-radius: 0 24px 24px 0;
    z-index: 1200;
  }

  .management-role .main,
  .management-role .main.full {
    width: 100%;
    margin-left: 0;
    padding: 0 10px 18px !important;
  }

  .management-role .topbar {
    top: 0;
    min-height: 60px;
    margin: 0 -10px 12px;
    padding: 9px 12px;
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  }

  .management-role .topbar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .management-role .topbar-title strong {
    max-width: 40vw;
    font-size: 12px;
  }

  .management-role .topbar-title small {
    display: none;
  }

  .management-role .topbar-right {
    gap: 6px;
    width: auto;
    flex-wrap: nowrap;
  }

  .management-role .menu-btn,
  .management-role .dark-btn,
  .management-role .topbar-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
  }

  .management-role .main :where(.card, .section-box, .search-panel, .form-box, .expense-box, .student-fee-card, .stat-card) {
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .065) !important;
  }

  .management-role .main :where(button, .btn, a.btn, input[type="submit"]) {
    min-height: 46px;
    border-radius: 14px;
  }

  .management-mobile-dock {
    position: fixed;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 66px;
    padding: 7px 6px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .management-mobile-dock :where(a, button) {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
  }

  .management-mobile-dock i {
    font-size: 17px;
  }

  .management-mobile-dock .dock-primary {
    margin-top: -17px;
    color: #fff;
  }

  .management-mobile-dock .dock-primary i {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 4px solid #f3f6fb;
    border-radius: 16px;
    background: linear-gradient(145deg, #4f46e5, #7c3aed);
    box-shadow: 0 10px 25px rgba(79, 70, 229, .34);
  }

  .management-mobile-dock .dock-primary span {
    color: #4f46e5;
  }

  .management-mobile-dock :where(a.active, a:active, button:active) {
    color: #4f46e5;
    background: #eef2ff;
  }

  .management-role.dark-mode .management-mobile-dock,
  .student-role.dark-mode .management-mobile-dock {
    border-color: #334155;
    background: rgba(15, 23, 42, .96);
  }

  .management-role.dark-mode .management-mobile-dock :where(a, button),
  .student-role.dark-mode .management-mobile-dock :where(a, button) {
    color: #94a3b8;
  }

  .management-role.dark-mode .management-mobile-dock .dock-primary i,
  .student-role.dark-mode .management-mobile-dock .dock-primary i {
    border-color: #070d1a;
  }
}


/* =========================================================
   LibraHub unified professional SaaS design system
   Final cascade layer for public, student, owner and superadmin.
========================================================= */
:root {
  --lh-primary: #4f46e5;
  --lh-primary-dark: #3730a3;
  --lh-accent: #06b6d4;
  --lh-success: #059669;
  --lh-warning: #d97706;
  --lh-danger: #dc2626;
  --lh-ink: #0f172a;
  --lh-muted: #64748b;
  --lh-bg: #f5f7fb;
  --lh-surface: #ffffff;
  --lh-surface-soft: #f8fafc;
  --lh-border: #e2e8f0;
  --lh-radius-sm: 12px;
  --lh-radius: 18px;
  --lh-radius-lg: 24px;
  --lh-shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
  --lh-shadow: 0 18px 48px rgba(15, 23, 42, .09);
  --lh-content: 1440px;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface) {
  color: var(--lh-ink);
  font-family: "Manrope", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(h1, h2, h3, h4, h5, h6) {
  color: var(--lh-ink);
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(p, li, label, td, input, select, textarea, button) {
  line-height: 1.55;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(button, .btn, a.btn, input[type="submit"]) {
  min-height: 44px;
  border-radius: var(--lh-radius-sm);
  font-weight: 750;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(button, .btn, a.btn, input[type="submit"]):not([disabled]):active {
  transform: translateY(1px) scale(.985);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: var(--lh-radius-sm);
  background: #fff;
  color: var(--lh-ink);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(input, select, textarea):focus {
  border-color: #818cf8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(.card, .panel, .section-box, .form-box, .stat-card, .metric-card, .od-card, .sa-card) {
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: var(--lh-radius);
  background-color: rgba(255, 255, 255, .96);
  box-shadow: var(--lh-shadow-sm);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--lh-ink);
  font-size: 13px;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(th) {
  color: #475569;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(th, td) {
  padding: 13px 14px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
tbody tr:hover {
  background: rgba(248, 250, 252, .9);
}

/* Public website: calmer premium presentation and lighter rendering. */
.public-surface {
  background: #fff;
}

.public-surface :where(.container, .public-container, .section-inner) {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

.public-surface :where(.section, section) {
  scroll-margin-top: 86px;
}

/*
 * The cinematic landing template owns its animation policy. Do not globally
 * collapse its animations here; that would freeze the QR scan, problem solver,
 * security rings and every other landing-page motion effect in production.
 */

.public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card) {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card):hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: var(--lh-shadow);
}

.public-surface :where(.btn, button, a[class*="btn"]) {
  letter-spacing: -.01em;
}

.public-surface :where(.navbar, .public-nav, header) {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Student app: same quality bar as management without owner-only layout. */
.student-role {
  --student-shell-width: 260px;
  background:
    radial-gradient(circle at 80% -5%, rgba(79, 70, 229, .12), transparent 28%),
    var(--lh-bg) !important;
}

.student-role .sidebar {
  background:
    radial-gradient(circle at 15% 5%, rgba(79, 70, 229, .26), transparent 24%),
    linear-gradient(180deg, #0a1020 0%, #111a32 58%, #090f1e 100%);
}

.student-role .main {
  max-width: none;
}

.student-role .topbar {
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--lh-shadow-sm);
}

.student-role :where(.dashboard-card, .profile-card, .notification-card, .attendance-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

/* Owner controls: retain navigation, unify surfaces and spacing. */
.owner-surface {
  background:
    radial-gradient(circle at 72% -8%, rgba(99, 102, 241, .11), transparent 28%),
    linear-gradient(180deg, #f1f4fb 0, var(--lh-bg) 360px);
}

.owner-surface .owner-content {
  width: min(100%, var(--lh-content));
  margin-inline: auto;
}

.owner-surface .owner-topbar {
  border-bottom-color: rgba(226, 232, 240, .9);
  background: rgba(245, 247, 251, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.owner-surface :where(.owner-card, .od-card, .billing-card, .settings-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

.owner-surface :where(.table-wrap, .table-responsive, .ui-scroll-table) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
}

/* Super Admin: denser enterprise console, same visual language. */
.superadmin-surface {
  background:
    radial-gradient(circle at 72% -8%, rgba(79, 70, 229, .10), transparent 26%),
    linear-gradient(180deg, #f1f4fb 0, var(--lh-bg) 340px);
}

.superadmin-surface .sa-content {
  width: min(100%, var(--lh-content));
  margin-inline: auto;
}

.superadmin-surface :where(.sa-card, .metric-card, .panel, .table-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

.superadmin-surface :where(.table-wrap, .table-responsive, .ui-scroll-table) {
  overflow-x: auto;
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
}

/* Dark mode parity across authenticated application surfaces. */
:where(.student-role, .owner-surface, .superadmin-surface).dark-mode {
  --lh-ink: #f8fafc;
  --lh-muted: #94a3b8;
  --lh-bg: #070d1a;
  --lh-surface: #0f172a;
  --lh-surface-soft: #111827;
  --lh-border: #334155;
  background: #070d1a !important;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(.card, .panel, .section-box, .form-box, .stat-card, .metric-card, .od-card, .sa-card, .owner-card) {
  border-color: #334155;
  background-color: #0f172a;
  color: #f8fafc;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(h1, h2, h3, h4, h5, h6, td) {
  color: #f8fafc;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(th) {
  color: #cbd5e1;
  background: #111827;
}

@media (min-width: 1200px) {
  .owner-surface .owner-content,
  .superadmin-surface .sa-content {
    padding-right: clamp(24px, 3vw, 52px);
    padding-left: clamp(24px, 3vw, 52px);
  }
}

@media (max-width: 768px) {
  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface) {
    overflow-x: clip;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(h1) {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.12;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(h2) {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.18;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(button, .btn, a.btn, input[type="submit"]) {
    min-height: 46px;
    border-radius: 14px;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.grid, .stats-grid, .metrics-grid, .cards-grid) {
    gap: 12px;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.table-responsive, .ui-scroll-table, .table-wrap, .expense-list) {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.table-responsive, .ui-scroll-table, .table-wrap, .expense-list) > table {
    min-width: 680px;
  }

  .public-surface :where(.container, .public-container, .section-inner) {
    width: min(100% - 22px, 1240px);
  }

  .public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card):hover {
    transform: none;
    box-shadow: var(--lh-shadow-sm);
  }

  .student-role .main {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .owner-surface .owner-content,
  .superadmin-surface .sa-content {
    padding: 14px 12px 28px;
  }

  .owner-surface :where(.owner-card, .od-card, .billing-card, .settings-card),
  .superadmin-surface :where(.sa-card, .metric-card, .panel, .table-card) {
    border-radius: 17px;
  }
}

@media (max-width: 420px) {
  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.actions, .button-row, .form-actions, .hero-actions) {
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.actions, .button-row, .form-actions, .hero-actions) > * {
    width: 100%;
  }
}

/* Student Game Center navigation badge (available on every student page). */
.student-nav-new{margin-left:auto;padding:3px 7px;border-radius:999px;background:linear-gradient(135deg,#22d3ee,#8b5cf6);color:#fff!important;font-size:8px!important;font-weight:950!important;letter-spacing:.08em;box-shadow:0 5px 14px rgba(34,211,238,.22)}