:root {
  --ink: #0b1220;
  --ink-2: #182235;
  --muted: #667085;
  --line: #e7eaf0;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --accent: #1d5fa7;
  --accent-2: #2f80c9;
  --accent-soft: #eaf3fb;
  --success: #1c9a6c;
  --shadow-sm: 0 10px 30px rgba(13, 24, 45, .07);
  --shadow-md: 0 24px 70px rgba(13, 24, 45, .12);
  --radius-md: 18px;
  --radius-lg: 30px;
}

html { font-size: 15px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }

html { position: relative; min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--surface-soft);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.app-main { min-height: calc(100vh - 146px); }

.btn, .form-control, .form-select, .form-check-input { border-radius: 12px; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .22rem rgba(29,95,167,.18);
}
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #174d88; border-color: #174d88; }

/* Header / navigation */
.app-header {
  z-index: 1035;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(11,18,32,.07);
}
.app-navbar { min-height: 76px; padding: 10px 0; }
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: 28px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--ink), #273550);
  box-shadow: 0 9px 22px rgba(11,18,32,.18);
}
.brand-mark svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark-sm { width: 36px; height: 36px; border-radius: 11px; }
.brand-mark-sm svg { width: 20px; height: 20px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-size: 1rem; letter-spacing: -.02em; }
.brand-copy small { margin-top: 4px; color: #7a8497; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.app-nav-panel { flex: 1; }
.app-nav-panel .offcanvas-body { padding: 0; }
.app-nav-links { gap: 2px; align-items: center; }
.app-nav-links .nav-link {
  color: #3c4658;
  font-weight: 600;
  font-size: .91rem;
  padding: .7rem .72rem !important;
  border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}
.app-nav-links .nav-link:hover, .app-nav-links .nav-link:focus { background: #f1f3f8; color: var(--ink); }
.app-dropdown {
  min-width: 245px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.app-dropdown .dropdown-item {
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-dropdown .dropdown-item span { font-weight: 650; font-size: .92rem; }
.app-dropdown .dropdown-item small { color: #8a93a3; font-size: .76rem; }
.app-dropdown .dropdown-item:hover { background: #f5f6fa; }

.app-scan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .65rem .9rem;
  background: var(--ink);
  color: white;
  border-radius: 11px;
  font-weight: 700;
  font-size: .88rem;
  box-shadow: 0 8px 18px rgba(11,18,32,.12);
}
.app-scan-button:hover { color: white; background: #202b3f; transform: translateY(-1px); }
.app-scan-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-menu-toggle { border: 0; padding: 8px; width: 42px; height: 42px; border-radius: 12px; background: #f2f4f7; }
.app-menu-toggle:focus { box-shadow: none; }
.app-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 5px; }

.app-account { flex-shrink: 0; }
.account-button {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 12px;
  color: var(--ink);
  max-width: 205px;
}
.account-button:hover { background: #f3f5f8; }
.account-button::after { margin-left: 2px; }
.account-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2f80c9, #45a0dc); font-size: .78rem; font-weight: 800; }
.account-copy { min-width: 0; text-align: left; display: flex; flex-direction: column; line-height: 1.15; }
.account-copy small { color: #98a0ae; font-size: .63rem; text-transform: uppercase; letter-spacing: .05em; }
.account-copy strong { margin-top: 3px; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-account-menu { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 7px; }
.app-account-menu .dropdown-item { border-radius: 9px; }
.app-login-link { color: #344054; text-decoration: none; font-weight: 650; }
.app-register-link { border-radius: 11px; font-weight: 650; }

/* Home */
.home-hero { padding: 26px 0 0; }
.hero-surface {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1220 0%, #111a2d 52%, #182238 100%);
  color: white;
  border-radius: 34px;
  padding: clamp(34px, 5vw, 72px);
  box-shadow: 0 30px 90px rgba(10,18,34,.18);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.hero-glow-one { width: 420px; height: 420px; right: -90px; top: -180px; background: radial-gradient(circle, rgba(69,160,220,.38), rgba(69,160,220,0) 68%); }
.hero-glow-two { width: 360px; height: 360px; left: 28%; bottom: -260px; background: radial-gradient(circle, rgba(91,169,223,.14), rgba(91,169,223,0) 70%); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #c6ccef; font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.hero-eyebrow span { width: 25px; height: 2px; background: #5ba9df; border-radius: 3px; }
.hero-surface h1 { margin: 20px 0 20px; max-width: 760px; font-size: clamp(2.45rem, 5vw, 4.65rem); line-height: .98; letter-spacing: -.055em; font-weight: 760; }
.hero-surface h1 span { color: #9fd0f4; }
.hero-lead { max-width: 620px; color: #b9c1d2; font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.72; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-primary, .hero-secondary { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; padding: .78rem 1.1rem; font-weight: 750; }
.hero-primary { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 13px 32px rgba(0,0,0,.16); }
.hero-primary:hover { background: #f2f4f7; color: var(--ink); transform: translateY(-1px); }
.hero-primary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-secondary { color: #eef0f5; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.hero-secondary:hover { color: white; background: rgba(255,255,255,.1); }
.hero-trust { margin-top: 29px; display: flex; flex-wrap: wrap; gap: 14px 22px; color: #8f9aad; font-size: .8rem; }
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-dot { width: 7px; height: 7px; border-radius: 50%; background: #69b7e8; box-shadow: 0 0 0 5px rgba(105,183,232,.08); }

.hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; isolation: isolate; }
.visual-grid { position: absolute; inset: 2% 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, black 25%, transparent 72%); }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.orbit-one { width: 390px; height: 390px; }
.orbit-two { width: 310px; height: 310px; border-style: dashed; animation: orbit-spin 35s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.visual-card { position: relative; z-index: 2; }
.visual-card-main { width: min(100%, 355px); padding: 20px; border-radius: 25px; background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 30px 75px rgba(0,0,0,.28); transform: rotate(-2.3deg); }
.visual-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.visual-card-top div { display: flex; flex-direction: column; }
.visual-card-top small { color: #8c95a5; font-size: .72rem; }
.visual-card-top strong { font-size: .94rem; margin-top: 3px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; color: #177855; background: #eaf8f2; font-size: .64rem; font-weight: 750; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #26a879; box-shadow: 0 0 0 4px rgba(38,168,121,.11); }
.attendance-visual { position: relative; height: 210px; margin: 18px 0; display: grid; place-items: center; border-radius: 19px; overflow: hidden; background: linear-gradient(145deg, #eef1f9, #f9faff); }
.qr-symbol { width: 124px; height: 124px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; padding: 12px; border-radius: 18px; background: white; box-shadow: 0 14px 30px rgba(22,34,55,.09); }
.qr-symbol span { border-radius: 5px; background: #162033; }
.qr-symbol span:nth-child(2), .qr-symbol span:nth-child(4), .qr-symbol span:nth-child(8) { background: transparent; border: 5px solid #162033; }
.qr-symbol span:nth-child(5) { background: #2f80c9; }
.scan-line { position: absolute; left: 18%; right: 18%; top: 48%; height: 2px; background: linear-gradient(90deg, transparent, #45a0dc 12%, #45a0dc 88%, transparent); box-shadow: 0 0 12px rgba(69,160,220,.65); }
.visual-success { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f3f7f5; }
.success-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #24a578; font-weight: 800; }
.visual-success div { display: flex; flex-direction: column; }
.visual-success small { color: #8a94a4; font-size: .65rem; }
.visual-success strong { margin-top: 1px; font-size: .77rem; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: rgba(255,255,255,.95); color: var(--ink); border-radius: 15px; box-shadow: 0 18px 35px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.floating-card div { display: flex; flex-direction: column; }
.floating-card strong { font-size: .72rem; }
.floating-card small { color: #9199a7; font-size: .6rem; }
.floating-people { left: 2%; top: 20%; transform: rotate(2deg); }
.float-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: #1d5fa7; }
.float-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.floating-status { right: 0; bottom: 18%; transform: rotate(1.5deg); }
.status-wave { width: 34px; height: 30px; display: flex; gap: 3px; align-items: end; justify-content: center; padding: 5px; border-radius: 9px; background: #ecf9f4; }
.status-wave i { width: 4px; border-radius: 4px; background: #30aa7f; }
.status-wave i:nth-child(1) { height: 9px; }.status-wave i:nth-child(2) { height: 17px; }.status-wave i:nth-child(3) { height: 12px; }

.home-section { padding: clamp(62px, 8vw, 100px) 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 30px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.045em; font-weight: 740; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.65; }
.section-kicker { color: #1d5fa7; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }
.section-heading-centered { flex-direction: column; align-items: center; text-align: center; }
.section-heading-centered > p { max-width: 680px; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.quick-card { min-height: 180px; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; padding: 23px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 7px 25px rgba(15,23,42,.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.quick-card:hover { color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #d9ddeb; }
.quick-card-featured { background: linear-gradient(145deg, #141d2f, #0c1422); color: white; border-color: transparent; }
.quick-card-featured:hover { color: white; }
.quick-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eaf3fb; color: #1d5fa7; }
.quick-card-featured .quick-icon { background: rgba(255,255,255,.1); color: #b8dcf4; }
.quick-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-copy { display: flex; flex-direction: column; margin-top: 18px; }
.quick-copy small { color: #8b95a5; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; }
.quick-card-featured .quick-copy small { color: #8f99ae; }
.quick-copy strong { margin-top: 4px; font-size: 1.04rem; }
.quick-copy > span { margin-top: 6px; color: #7a8496; font-size: .82rem; line-height: 1.5; max-width: 270px; }
.quick-card-featured .quick-copy > span { color: #abb3c3; }
.quick-arrow { position: absolute; right: 20px; top: 22px; color: #a5adba; font-size: 1.25rem; }
.quick-card-featured .quick-arrow { color: #737f98; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.feature-card { padding: 29px; min-height: 220px; background: white; border: 1px solid var(--line); border-radius: var(--radius-md); }
.feature-card > span { color: #1d5fa7; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.feature-card h3 { margin: 27px 0 10px; font-size: 1.22rem; letter-spacing: -.025em; }
.feature-card p { color: var(--muted); font-size: .91rem; line-height: 1.7; margin: 0; }

.app-footer { padding: 26px 0; border-top: 1px solid #e5e8ee; color: #8a93a1; font-size: .77rem; background: var(--surface-soft); }
.footer-note { color: #a0a7b3; }

/* Give existing CRUD pages a cleaner base without changing their markup. */
/* Consistent page gutters for every internal view. Home remains full-bleed. */
.app-main-contained {
  width: min(100% - 32px, 1320px);
  margin-inline: auto;
  padding-block: 34px 50px;
}
.app-main-contained > .container,
.app-main-contained > .container-fluid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767.98px) {
  .app-main-contained {
    width: min(100% - 24px, 1320px);
    padding-block: 22px 34px;
  }
}

.card { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.05); overflow: hidden; }
.card-header { background: #fafbfc; border-bottom-color: var(--line); padding: 15px 18px; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .85rem .75rem; border-bottom-color: #edf0f4; }
.table thead th { color: #70798a; font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; }
.form-control, .form-select { border-color: #dfe3e9; min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: #6ca9d5; }

@media (max-width: 1199.98px) {
  .app-nav-links .nav-link { padding: .62rem .55rem !important; font-size: .86rem; }
  .app-brand { margin-right: 15px; }
}

@media (max-width: 991.98px) {
  .app-navbar { min-height: 68px; }
  .app-nav-panel { width: min(88vw, 350px) !important; border-left: 0; }
  .app-nav-panel .offcanvas-header { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .app-nav-panel .offcanvas-body { padding: 15px 18px 22px; display: block !important; }
  .app-nav-links { align-items: stretch; gap: 4px; }
  .app-nav-links .nav-link { padding: .78rem .72rem !important; font-size: .96rem; }
  .app-dropdown { position: static !important; transform: none !important; width: 100%; box-shadow: none; border: 0; padding: 4px 0 8px 8px; margin: 0; }
  .app-dropdown .dropdown-item { padding: 9px 10px; }
  .nav-scan-item { margin: 9px 0 4px; }
  .app-scan-button { width: 100%; min-height: 48px; }
  .app-account { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .account-button { width: 100%; max-width: none; }
  .hero-visual { min-height: 430px; margin-top: -5px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .home-hero { padding: 14px 0 0; }
  .home-hero .container-xl { padding-left: 12px; padding-right: 12px; }
  .hero-surface { border-radius: 25px; padding: 34px 22px; }
  .hero-surface h1 { font-size: clamp(2.15rem, 11vw, 3.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { flex-direction: column; gap: 10px; }
  .hero-visual { min-height: 370px; }
  .visual-card-main { width: min(90%, 330px); }
  .visual-card-main { padding: 16px; }
  .attendance-visual { height: 180px; }
  .orbit-one { width: 310px; height: 310px; }
  .orbit-two { width: 250px; height: 250px; }
  .floating-people { left: -2%; top: 16%; }
  .floating-status { right: -2%; bottom: 11%; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 13px; }
  .quick-grid, .feature-grid { grid-template-columns: 1fr; }
  .quick-card { min-height: 170px; }
  .home-section { padding: 62px 0; }
  .app-main > .container, .app-main > .container-fluid { padding: 24px 14px 42px; }
}

@media (max-width: 420px) {
  .brand-copy small { display: none; }
  .hero-visual { min-height: 330px; }
  .visual-card-main { width: 92%; }
  .attendance-visual { height: 150px; }
  .qr-symbol { width: 104px; height: 104px; }
  .floating-card { padding: 8px 9px; }
  .floating-card small { display: none; }
  .floating-people { top: 12%; }
  .floating-status { bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Navigation compatibility fix for Bootstrap 5.1.
   Responsive offcanvas variants (offcanvas-lg/offcanvas-xl) do not exist in 5.1,
   so we use the standard offcanvas component and make it static at >= 1200px. */
html, body { max-width: 100%; overflow-x: hidden; }
.app-navbar .container-xl { width: 100%; min-width: 0; }
.app-nav-panel { max-width: 100vw; }
.app-nav-panel .offcanvas-body { min-width: 0; }
.app-nav-links { min-width: 0; }


@media (min-width: 1200px) {
  .app-nav-panel.offcanvas {
    position: static;
    z-index: auto;
    display: block;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    background: transparent;
    border: 0;
    transform: none !important;
    transition: none;
    flex: 1 1 auto;
  }
  .app-nav-panel .offcanvas-body {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 0;
    overflow: visible;
  }
  .app-nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .app-account { margin-left: 12px; }
}

@media (max-width: 1199.98px) {
  .app-navbar { min-height: 68px; }
  .app-brand { margin-right: 0; }
  .app-nav-panel.offcanvas { width: min(88vw, 360px) !important; }
  .app-nav-panel .offcanvas-header { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .app-nav-panel .offcanvas-body {
    display: block !important;
    padding: 14px 18px 24px;
    overflow-y: auto;
  }
  .app-nav-links { align-items: stretch; gap: 4px; }
  .app-nav-links .nav-link { padding: .8rem .72rem !important; font-size: .96rem; }
  .app-dropdown {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: 0;
    padding: 4px 0 8px 8px;
    margin: 0;
  }
  .app-dropdown .dropdown-item { white-space: normal; padding: 10px; }
  .nav-scan-item { margin: 9px 0 4px; }
  .app-scan-button { width: 100%; min-height: 48px; }
  .app-account { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .account-button { width: 100%; max-width: none; }
  .app-account-menu { width: 100%; }
}

/* Blue-first Scout identity. */
:root { --accent: #1d5fa7; --accent-2: #2f80c9; --accent-soft: #eaf3fb; }
.hero-surface { background: radial-gradient(circle at 82% 18%, rgba(69,145,214,.24), transparent 29%), radial-gradient(circle at 22% 90%, rgba(37,99,160,.28), transparent 35%), linear-gradient(135deg, #082744 0%, #0b3a66 52%, #105184 100%); }
.hero-surface h1 span { color: #9fd0f4; }
.hero-eyebrow { color: #d8ebf8; }
.hero-eyebrow span { background: #5ba9df; }
.trust-dot { background: #69b7e8; box-shadow: 0 0 0 5px rgba(105,183,232,.11); }
.section-kicker { color: #1d5fa7; }
.quick-icon { background: #eaf3fb; color: #1d5fa7; }
.quick-card-featured { background: linear-gradient(145deg, #0d3b66, #082744); }
.account-avatar { background: linear-gradient(145deg, #1d5fa7, #45a0dc); }
.btn-primary { background: #1d5fa7; border-color: #1d5fa7; }
.btn-primary:hover { background: #174d88; border-color: #174d88; }
.form-control:focus, .form-select:focus { border-color: #6ca9d5; }

@media (max-width: 575.98px) {
  .app-navbar .container-xl { padding-left: 12px; padding-right: 12px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand-copy strong { font-size: .94rem; }
  .hero-surface { padding: 30px 18px; border-radius: 22px; }
  .hero-visual { min-height: 315px; }
  .floating-card { max-width: 44%; }
  .floating-card strong { font-size: .68rem; }
}

/* v3: robust mobile navigation using Bootstrap 5.1 collapse instead of offcanvas. */
.app-nav-panel { min-width: 0; }
.app-nav-body { width: 100%; min-width: 0; }

@media (min-width: 1200px) {
  .app-nav-panel.collapse:not(.show) { display: flex !important; }
  .app-nav-panel { flex: 1 1 auto; }
  .app-nav-body {
    display: flex;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .app-header { position: sticky; top: 0; }
  .app-navbar { padding-bottom: 10px; }
  .app-navbar > .container-xl { position: relative; flex-wrap: wrap; }
  .app-nav-panel {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
  .app-nav-panel.collapsing,
  .app-nav-panel.collapse.show {
    display: block;
  }
  .app-nav-body {
    display: block;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 2px 18px;
    scrollbar-width: thin;
  }
  .app-nav-links {
    width: 100%;
    align-items: stretch;
    gap: 4px;
  }
  .app-nav-links .nav-item { width: 100%; }
  .app-nav-links .nav-link {
    width: 100%;
    padding: .78rem .72rem !important;
    font-size: .96rem;
    border-radius: 10px;
  }
  .app-dropdown {
    position: static !important;
    float: none;
    transform: none !important;
    inset: auto !important;
    width: 100%;
    min-width: 0;
    margin: 2px 0 7px;
    padding: 5px 0 5px 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .app-dropdown.show { display: block; }
  .app-dropdown .dropdown-item {
    white-space: normal;
    padding: 9px 10px;
    border-radius: 9px;
  }
  .nav-scan-item { margin: 10px 0 2px; }
  .app-scan-button { width: 100%; min-height: 48px; }
  .app-account {
    margin: 14px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    width: 100%;
  }
  .account-button { width: 100%; max-width: none; }
  .app-account-menu { position: static !important; transform: none !important; width: 100%; margin-top: 6px; box-shadow: none; }
}

/* v5 - Scout photographic identity and unified application surfaces */
body { background: linear-gradient(180deg, #f5f9fd 0, #f7f9fc 310px, #f7f9fc 100%); }
.app-header { background: rgba(255,255,255,.94); box-shadow: 0 4px 24px rgba(9,45,78,.05); }
.brand-mark { background: linear-gradient(145deg,#0b3a66,#1d5fa7); }
.brand-mark svg { stroke-width: 1.7; }

.identity-hero { padding: 24px 0 0; }
.identity-hero-card { position: relative; min-height: 520px; overflow: hidden; border-radius: 30px; box-shadow: 0 28px 70px rgba(7,37,65,.18); background: #0b3a66; }
.identity-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.identity-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(23 58 91 / 66%) 0%, rgba(7, 43, 75, .76) 38%, rgba(8, 48, 83, .24) 72%, rgba(8, 48, 83, .08) 100%);}
.identity-hero-content { position:relative; z-index:2; max-width:650px; padding: clamp(46px,7vw,86px); color:#fff; }
.identity-kicker { display:inline-flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.08); font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.identity-hero-content h1 { margin:20px 0 14px; font-size:clamp(3rem,7vw,5.7rem); line-height:.92; letter-spacing:-.065em; font-weight:790; }
.identity-hero-content p { max-width:560px; margin:0 0 28px; color:#dbeafa; font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.68; }
.identity-hero-badge { position:absolute; z-index:2; right:38px; bottom:34px; width:78px; height:78px; display:grid; place-items:center; border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 18px 45px rgba(4,23,42,.22); }
.identity-hero-badge svg { width:47px; height:47px; fill:none; stroke:#0d4d83; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.hero-secondary { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }

.scout-values { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.scout-values article { min-height:170px; padding:26px; border:1px solid #dfe8f1; border-radius:20px; background:#fff; box-shadow:0 8px 25px rgba(15,46,75,.04); }
.scout-values article > span { color:#2f80c9; font-size:.72rem; font-weight:850; letter-spacing:.1em; }
.scout-values strong { display:block; margin-top:22px; font-size:1.18rem; }
.scout-values p { margin:7px 0 0; color:var(--muted); line-height:1.55; }

/* Shared page treatment for CRUD/report/operator views */
.app-main > .container-fluid, .app-main > .container { width:min(100%,1320px); }
.app-main h1 { color: #7a8497; letter-spacing: -.035em; font-weight: 760; }
.app-main h2 { color: #7a8497; letter-spacing: -.035em; font-weight: 760; }
.app-main h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.app-main h2 { font-size:clamp(1.55rem,2.5vw,2.15rem); }
.app-main hr { border-color:#dce6ef; opacity:1; margin:18px 0 24px; }
.app-main .text-muted { color:#718096 !important; }

.card { border-color:#dfe8f1; box-shadow:0 10px 30px rgba(14,53,87,.06); }
.card-header { color:#163d61; background:linear-gradient(180deg,#fbfdff,#f5f9fc); }
.card-body { padding:1.25rem; }
.table-responsive { border:1px solid #e0e8f0; border-radius:18px; background:#fff; box-shadow:0 9px 28px rgba(14,53,87,.05); }
.card .table-responsive { border:0; border-radius:0; box-shadow:none; }
.table { margin-bottom:0; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg:#f8fbfe; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg:#eef6fc; }
.table thead { background:#f6f9fc; }
.table thead th { color:#48657e; border-bottom-width:1px; white-space:nowrap; }
.table tbody td { vertical-align:middle; color:#263c50; }
.badge { padding:.48em .7em; border-radius:999px; font-weight:700; }
.bg-primary { background-color:#1d5fa7 !important; }
.bg-success { background-color:#168563 !important; }
.bg-danger { background-color:#b94a5a !important; }
.bg-secondary { background-color:#708090 !important; }

.btn { min-height:40px; padding:.52rem .9rem; font-weight:650; border-radius:11px; }
.btn-sm { min-height:34px; padding:.36rem .68rem; }
.btn-secondary { background:#eef2f6; border-color:#dbe3ea; color:#31485b; }
.btn-secondary:hover { background:#e2e9ef; border-color:#d3dce4; color:#20384c; }
.btn-outline-primary { color:#1d5fa7; border-color:#9fc4e1; }
.btn-outline-primary:hover { background:#1d5fa7; border-color:#1d5fa7; }
.btn-outline-secondary { color:#53697c; border-color:#c9d5df; }
.btn-outline-success { color:#13765a; border-color:#9acdbd; }
.btn-outline-danger { color:#ad4050; border-color:#ddb0b7; }

.form-label { color:#314d66; font-size:.86rem; font-weight:700; }
.form-control, .form-select { background-color:#fff; border-color:#ccd9e4; box-shadow:0 1px 2px rgba(13,46,76,.02); }
.form-control::placeholder { color:#98a8b7; }
textarea.form-control { min-height:110px; }
.input-group { padding:7px; border:1px solid #e0e8f0; border-radius:15px; background:#fff; box-shadow:0 7px 22px rgba(14,53,87,.04); }
.input-group > .form-control { border-radius:10px !important; }
.input-group > .btn { margin-left:6px !important; border-radius:10px !important; }

/* Make simple create/edit forms feel like focused panels without changing controllers. */
.app-main > .row > [class*="col-"] > form,
.app-main > .container > .row > [class*="col-"] > form,
.app-main > .container-fluid > .row > [class*="col-"] > form { padding:26px; border:1px solid #dfe8f1; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(14,53,87,.06); }

.alert { border:0; border-radius:14px; box-shadow:0 6px 20px rgba(14,53,87,.05); }
.alert-info { color:#214f73; background:#eaf5fc; }
.alert-warning { color:#6c5621; background:#fff7df; }
.alert-success { color:#176049; background:#e9f8f2; }

/* Operator and scanner emphasis */
#reader { overflow:hidden; border-radius:18px; background:#071d30; }
#reader video { border-radius:16px; }
#estadoCamara { display:inline-flex; margin-top:14px !important; padding:7px 11px; border-radius:999px; background:#f0f5f9; }
#resultado { border-radius:18px; }
.display-4 { color:#0d4d83; font-weight:800; letter-spacing:-.05em; }

@media (max-width: 767.98px) {
  .identity-hero { padding-top:12px; }
  .identity-hero .container-xl { padding-left:10px; padding-right:10px; }
  .identity-hero-card { min-height:520px; border-radius:22px; }
  .identity-hero-image { object-position:58% center; }
  .identity-hero-overlay { background:linear-gradient(0deg,rgba(4,29,52,.94) 0%,rgba(5,35,61,.76) 48%,rgba(5,35,61,.14) 100%); }
  .identity-hero-content { position:absolute; left:0; right:0; bottom:0; padding:28px 22px 30px; }
  .identity-hero-content h1 { font-size:clamp(2.7rem,12vw,4.3rem); }
  .identity-hero-content p { font-size:.95rem; margin-bottom:20px; }
  .identity-hero-badge { top:20px; right:20px; bottom:auto; width:58px; height:58px; border-radius:18px; }
  .identity-hero-badge svg { width:35px; height:35px; }
  .scout-values { grid-template-columns:1fr; }
  .app-main .d-flex.justify-content-between.align-items-center { align-items:flex-start !important; gap:12px; }
  .app-main .d-flex.justify-content-between.align-items-center > .btn { flex-shrink:0; }
  .table-responsive { border-radius:14px; }
  .table > :not(caption) > * > * { padding:.78rem .65rem; }
  .input-group { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .input-group > .form-control { grid-column:1 / -1; width:100%; }
  .input-group > .btn { margin-left:0 !important; width:100%; }
  .app-main > .row > [class*="col-"] > form,
  .app-main > .container > .row > [class*="col-"] > form,
  .app-main > .container-fluid > .row > [class*="col-"] > form { padding:20px 16px; }
}

@media (max-width: 460px) {
  .identity-hero-card { min-height:500px; }
  .identity-kicker { font-size:.64rem; }
  .identity-hero-content p { max-width:90%; }
  .app-main .d-flex.justify-content-between.align-items-center { flex-direction:column; }
  .app-main .d-flex.justify-content-between.align-items-center > .btn { width:100%; }
  .table td.text-end { min-width:150px; }
}


/* v6 - task-focused surfaces and true mobile record cards */
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.page-heading h1, .page-heading h2 { margin:0; }
.page-heading p { margin:.45rem 0 0; color:#6f8294; }
.page-kicker { display:block; margin-bottom:5px; color:#2f80c9; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.page-heading-simple { align-items:flex-start; }
.filter-card { border:1px solid #dce8f2; background:linear-gradient(180deg,#ffffff,#fbfdff); }
.filter-card .card-body { padding:1.35rem; }
.mobile-actions .btn, .mobile-actions form { margin-top:3px; margin-bottom:3px; }
.mobile-actions .btn-group { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.mobile-actions .btn-group > .btn, .mobile-actions .btn-group > form .btn { border-radius:9px !important; }

.scanner-control-card { border-left:4px solid #2f80c9; }
.scanner-card { background:linear-gradient(180deg,#fff,#f8fbfe); }
.scanner-card #reader { max-width:560px !important; margin:8px auto 0 !important; border:8px solid #edf5fb; box-shadow:inset 0 0 0 1px #d7e6f2, 0 16px 38px rgba(10,54,91,.10); }
.scanner-primary-action::before, .operator-scan-button::before { content:""; width:10px; height:10px; display:inline-block; margin-right:9px; border:2px solid currentColor; border-radius:3px; box-shadow:5px 0 0 -2px currentColor,0 5px 0 -2px currentColor; vertical-align:1px; }
.operator-stats .stat-card { border-top:4px solid #2f80c9; }
.operator-stats .stat-card .card-body { padding:1.6rem 1.2rem; }
.operator-stats .display-4 { margin-top:.25rem; font-size:clamp(2.4rem,6vw,3.7rem); }

@media (max-width: 767.98px) {
  .page-heading { align-items:stretch; flex-direction:column; gap:14px; margin-bottom:18px; }
  .page-heading > a.btn, .page-heading > .btn { width:100%; }
  .filter-card .row > [class*="col-"] { width:100%; }

  .responsive-card-table { overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .mobile-card-table, .mobile-card-table tbody { display:block; width:100%; }
  .mobile-card-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .mobile-card-table tbody { display:grid; gap:12px; }
  .mobile-card-table tbody tr { display:block; overflow:hidden; border:1px solid #dce7f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(13,55,90,.06); }
  .mobile-card-table tbody td { display:grid; grid-template-columns:minmax(92px,34%) 1fr; gap:12px; align-items:start; width:100%; min-width:0 !important; padding:.72rem .9rem; border:0; border-bottom:1px solid #edf2f6; background:transparent !important; text-align:left !important; overflow-wrap:anywhere; }
  .mobile-card-table tbody td:last-child { border-bottom:0; }
  .mobile-card-table tbody td::before { content:attr(data-label); color:#6c8193; font-size:.72rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
  .mobile-card-table tbody td.mobile-actions { display:block; padding:.85rem .9rem .95rem; background:#f8fbfe !important; }
  .mobile-card-table tbody td.mobile-actions::before { display:block; margin-bottom:8px; }
  .mobile-card-table .mobile-actions .btn, .mobile-card-table .mobile-actions form { display:inline-block; }
  .mobile-card-table .mobile-actions .btn { margin:3px 4px 3px 0; }
  .mobile-card-table .mobile-actions .btn-group { display:flex; justify-content:flex-start; }
  .report-mobile-table tbody td:nth-last-child(-n+5) { font-size:.93rem; }

  .scanner-heading .text-muted { line-height:1.45; }
  .scanner-card .card-body { padding:14px; }
  .scanner-card #reader { border-width:5px; border-radius:16px; }
  .scanner-card .btn-lg { width:100%; }
  .operator-heading .operator-scan-button { width:100%; }
  .operator-stats > div { flex:0 0 33.333%; max-width:33.333%; }
  .operator-stats .stat-card .card-body { padding:1rem .35rem; }
  .operator-stats .display-4 { font-size:2rem; }
  .operator-stats .text-muted { font-size:.75rem; }
}

@media (max-width: 480px) {
  .mobile-card-table tbody td { grid-template-columns:1fr; gap:4px; }
  .mobile-card-table tbody td::before { margin-bottom:1px; }
  .operator-stats { gap:8px !important; }
  .operator-stats > div { flex:0 0 calc(33.333% - 6px); max-width:calc(33.333% - 6px); }
}


/* v8 - forms, QR profile, report controls and polished empty states */
.form-page-heading { margin-bottom:22px; }
.form-page-row { margin-bottom:28px; }
.form-surface,
.form-surface-card { border:1px solid #dce7f0; border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(12,55,91,.07); }
.form-surface { padding:28px; }
.form-surface-card .card-body { padding:28px; }
.form-surface .form-label,
.form-surface-card .form-label { margin-bottom:.45rem; }
.form-surface .form-control,
.form-surface .form-select,
.form-surface-card .form-control,
.form-surface-card .form-select { min-height:46px; border-radius:11px; }
.form-surface textarea.form-control { min-height:130px; }
.form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid #edf2f6; }
.form-actions .btn { min-width:112px; }
.validation-summary-errors { padding:12px 14px; border-radius:12px; background:#fff0f2; color:#a63f50 !important; }
.field-validation-error { display:block; margin-top:5px; font-size:.8rem; }

.qr-page { width:100%; }
.qr-profile .card { overflow:hidden; }
.participant-profile-card .card-body { padding:30px; }
.participant-profile-label { display:inline-block; margin-bottom:8px; color:#2f80c9; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.participant-profile-card .card-title { color:#0b3a66; font-size:1.5rem; font-weight:780; letter-spacing:-.025em; }
.participant-profile-card dl { margin-bottom:0; }
.participant-profile-card dt { color:#70879a; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.participant-profile-card dd { color:#20384c; font-weight:650; }
.qr-code-card { border-top:4px solid #2f80c9; background:linear-gradient(180deg,#fff,#f8fbfe); }
.qr-code-card .card-body { display:flex; flex-direction:column; align-items:center; padding:30px; }
.qr-code-image { width:min(100%,360px); padding:14px; border:1px solid #dce8f2; border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(10,52,87,.08); }
.qr-code-card .d-grid { width:min(100%,360px); }

.result-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px; }
.result-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.empty-state { position:relative; padding:28px 24px 28px 72px; border:1px dashed #b9d2e6; border-radius:18px; background:linear-gradient(135deg,#f8fcff,#eef7fd); color:#3d607c; box-shadow:none; }
.empty-state::before { content:""; position:absolute; left:24px; top:50%; width:30px; height:30px; transform:translateY(-50%); border:2px solid #73a8cf; border-radius:50%; box-shadow:inset 0 0 0 7px #e1f0fa; }

@media (max-width:767.98px) {
  .form-surface { padding:20px 16px; border-radius:18px; }
  .form-surface-card .card-body { padding:20px 16px; }
  .form-actions { display:grid; grid-template-columns:1fr; }
  .form-actions .btn { width:100%; }
  .qr-code-card .card-body, .participant-profile-card .card-body { padding:20px 16px; }
  .result-toolbar { align-items:flex-start; flex-direction:column; }
  .result-actions { width:100%; justify-content:flex-start; }
  .result-actions .btn { flex:1 1 calc(50% - 8px); }
  .result-actions .badge { margin-right:auto; }
  .empty-state { padding:22px 18px 22px 60px; }
  .empty-state::before { left:18px; }
}

@media (max-width:480px) {
  .result-actions .btn { flex:1 1 100%; width:100%; }
  .qr-code-card .d-grid { width:100%; }
}

/* Identity: acceso y recuperación */
.identity-page-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(18px, 4vw, 52px) 0;
}
.identity-card {
  width: min(100%, 520px);
  border: 1px solid #dce7f1;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(12, 50, 83, .10);
  overflow: hidden;
}
.identity-card .form-control {
  min-height: 46px;
}
@media (max-width: 767.98px) {
  .identity-page-wrap { min-height: auto; padding-top: 14px; }
  .identity-card { border-radius: 18px; }
}

/* Identity v10: legibilidad y administración simplificada */
.identity-card .btn-primary,
.identity-card .btn-primary:visited,
.identity-card .btn-primary:focus,
.identity-card .btn-primary:active,
.app-login-link,
.app-login-link:visited,
.app-login-link:focus,
.app-login-link:active {
  color: #fff !important;
}
.identity-card .btn-primary:hover,
.app-login-link:hover {
  color: #fff !important;
}
.account-summary {
  padding: 16px 18px;
  border: 1px solid #dce7f1;
  border-radius: 14px;
  background: #f7fbff;
}
.account-summary-label {
  display: block;
  margin-bottom: 4px;
  color: #718096;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* v11 - administración de usuarios */
.page-heading-actions { display:flex; align-items:center; gap:10px; }
.data-card { border:1px solid #dce7f0; border-radius:20px; overflow:hidden; }
.users-table th { white-space:nowrap; }
.user-email-cell { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.table-actions .btn { min-width:88px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; font-size:.78rem; font-weight:750; }
.status-pill > span { width:7px; height:7px; border-radius:50%; }
.status-active { color:#17613d; background:#e9f7ef; border:1px solid #c8ead7; }
.status-active > span { background:#26945f; }
.status-inactive { color:#8a3b48; background:#fff0f2; border:1px solid #f1cdd3; }
.status-inactive > span { background:#c85b6c; }
.user-admin-note { padding:14px 16px; border:1px solid #dce7f1; border-radius:14px; background:#f7fbff; color:#49677f; font-size:.88rem; }
.account-status-box { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:18px; border:1px solid #dce7f1; border-radius:16px; transition:.2s ease; }
.account-status-box p { margin-top:4px; color:#6b8294; font-size:.84rem; }
.account-status-box.is-active { background:#f5fbf8; border-color:#cde8d9; }
.account-status-box.is-inactive { background:#fff7f8; border-color:#efd5da; }
.account-status-switch { flex:0 0 auto; margin:0; }
.account-status-switch .form-check-input { width:2.65rem; height:1.35rem; cursor:pointer; }
.account-status-switch .form-check-label { margin-left:5px; font-weight:700; }

@media (max-width:767.98px) {
  .page-heading-actions { width:100%; margin-top:8px; }
  .page-heading-actions .btn { width:100%; }
  .users-table .table-actions { text-align:left !important; }
  .users-table .table-actions .btn { width:100%; }
  .account-status-box { align-items:flex-start; flex-direction:column; gap:14px; }
}

/* Scouts Grupo 8 brand ---------------------------------------------------- */
.brand-logo-wrap {
  width: 38px;
  height: 52px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .brand-logo-wrap { width: 32px; height: 46px; flex-basis: 32px; }
  .brand-logo { height: 44px; }
  .brand-copy strong { font-size: .9rem; }
}

/* Server-side pagination: keeps mobile responses small and navigation touch-friendly. */
.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid rgba(14, 59, 102, .10);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(8, 39, 68, .05);
}
.app-pagination-summary {
    color: #66788a;
    font-size: .9rem;
    white-space: nowrap;
}
.app-pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #dbe7f2;
    color: #1d5fa7;
}
.app-pagination .page-item.active .page-link {
    background: #1d5fa7;
    border-color: #1d5fa7;
    color: #fff;
}
@media (max-width: 767.98px) {
    .app-pagination {
        flex-direction: column;
        align-items: stretch;
        padding: .75rem;
    }
    .app-pagination-summary { text-align: center; }
    .app-pagination nav { overflow-x: auto; padding-bottom: 2px; }
    .app-pagination .pagination { justify-content: center; flex-wrap: nowrap; }
    .app-pagination .page-link { min-width: 42px; min-height: 42px; }
    .app-pagination .page-item:not(:first-child):not(:last-child) .page-link { padding-left: .65rem; padding-right: .65rem; }
}

/* Destructive account actions */
.danger-zone-card {
  border: 1px solid #efc9cf;
  background: #fffafb;
  box-shadow: 0 12px 28px rgba(117, 34, 46, .06);
}
.danger-zone-heading h2 {
  margin: 3px 0 6px;
  font-size: 1.08rem;
  color: #7c2532;
}
.danger-zone-heading p {
  margin: 0;
  color: #735a5e;
  font-size: .9rem;
}
.danger-kicker { color: #a43b49; }
.danger-zone-note {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff1f3;
  color: #71434a;
  font-size: .86rem;
  line-height: 1.5;
}