/* =========================================================
   Asore — Church Management System
   Brand: navy #0D1B3D, royal #1E3A8A, teal #00B3A6,
          bg #F1F5F9, slate #64748B, gold #F5B841
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette */
  --brand-navy:      #0D1B3D;
  --brand-navy-2:    #071331;
  --brand-royal:     #1E3A8A;
  --brand-teal:      #00B3A6;
  --brand-teal-dk:   #007E75;
  --brand-slate:     #64748B;
  --brand-bg:        #F1F5F9;
  --brand-border:    #E2E8F0;
  --brand-gold:      #F5B841;
  --brand-gold-dk:   #C99226;

  /* Semantic aliases */
  --v2-bg:            var(--brand-bg);
  --v2-surface:       #FFFFFF;
  --v2-border:        var(--brand-border);
  --v2-text:          var(--brand-navy);
  --v2-muted:         var(--brand-slate);

  --v2-sidebar-bg:    var(--brand-navy);
  --v2-sidebar-bg-2:  var(--brand-navy-2);
  --v2-sidebar-text:  #CBD5E1;
  --v2-sidebar-mute:  #94A3B8;
  --v2-accent:        var(--brand-gold);
  --v2-accent-2:      var(--brand-teal);

  --v2-shadow:        0 1px 2px rgba(13,27,61,.05), 0 8px 24px rgba(13,27,61,.06);
  --v2-shadow-lg:     0 4px 12px rgba(13,27,61,.08), 0 24px 48px rgba(13,27,61,.08);

  --v2-radius:        .625rem;   /* 10px */
  --v2-radius-lg:     1rem;      /* 16px */
}

/* ============ Bootstrap overrides ============ */
.btn-primary {
  background-color: var(--brand-royal);
  border-color: var(--brand-royal);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
}
.btn-outline-primary {
  color: var(--brand-royal);
  border-color: var(--brand-royal);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--brand-royal);
  border-color: var(--brand-royal);
}
.btn-success  { background-color: var(--brand-teal);    border-color: var(--brand-teal); }
.btn-success:hover, .btn-success:focus {
  background-color: var(--brand-teal-dk); border-color: var(--brand-teal-dk);
}
.btn-warning  {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--brand-gold-dk);
  border-color: var(--brand-gold-dk);
  color: var(--brand-navy);
}
a { color: var(--brand-royal); text-decoration: none; }
a:hover { color: var(--brand-navy); text-decoration: underline; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 .2rem rgba(0,179,166,.15);
}
.badge.text-bg-success-subtle.text-success {
  background-color: rgba(0,179,166,.12) !important;
  color: var(--brand-teal-dk) !important;
}

html, body { height:100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--v2-text);
  background: var(--v2-bg);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
}

/* ============ Shell layout ============ */
.v2-shell { display:flex; min-height:100vh; }

.v2-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--v2-sidebar-bg) 0%, var(--v2-sidebar-bg-2) 100%);
  color: var(--v2-sidebar-text);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}
.v2-main { flex:1; display:flex; flex-direction:column; min-width:0; }

@media (max-width: 991.98px) {
  .v2-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    transform: translateX(-100%); box-shadow: var(--v2-shadow-lg);
  }
  .v2-sidebar.open { transform: translateX(0); }
}

/* ============ Brand mark ============ */
.v2-brand {
  display:flex; align-items:center; justify-content:center;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Logo sits directly on the sidebar (no plate). Works with either
   a transparent-background logo OR one that has the navy baked in. */
.v2-brand .logo-plate {
  display:inline-flex; align-items:center; justify-content:center;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;   /* trim any 1px halo if the logo bg is close-but-not-exact */
}
.v2-brand .logo-plate img.logo {
  display:block;
  height: 56px;       /* larger — no pill padding eating into the space */
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.v2-brand .brand-fallback {
  width:38px; height:38px; border-radius:10px;
  background: var(--brand-teal); color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem;
  margin-right:.6rem;
}
.v2-brand-title { color:#fff; font-weight:700; letter-spacing:.2px; font-size:1rem; }
.v2-brand-sub {
  color: var(--v2-sidebar-mute);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; margin-top:2px;
}

/* ============ Nav ============ */
.v2-nav { flex:1; overflow-y:auto; padding: .5rem .5rem 1rem; }
.v2-nav-section {
  color: var(--v2-sidebar-mute);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  padding:1rem .75rem .35rem;
  font-weight:600;
}
.v2-nav-link {
  display:flex; align-items:center; gap:.65rem;
  padding: .55rem .75rem; margin: .1rem .25rem;
  border-radius: var(--v2-radius);
  color: var(--v2-sidebar-text); text-decoration:none;
  font-size:.9rem;
  transition: background .15s, color .15s;
}
.v2-nav-link:hover {
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none;
}
.v2-nav-link.active {
  background: rgba(0,179,166,.14);
  color:#fff;
  box-shadow: inset 3px 0 0 var(--brand-teal);
}
.v2-nav-link i { width: 1.1rem; text-align:center; opacity:.85; }

.v2-sidebar-foot {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1rem 1.25rem;
}
.v2-sidebar-foot .btn-outline-light {
  border-color: rgba(255,255,255,.25);
  color:#fff;
}
.v2-sidebar-foot .btn-outline-light:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.35);
}

/* ============ Topbar ============ */
.v2-topbar {
  display:flex; align-items:center; gap:1rem;
  padding: .85rem 1.25rem;
  background: var(--v2-surface);
  border-bottom: 1px solid var(--v2-border);
  position:sticky; top:0; z-index:1030;
}
.v2-menu-toggle { color: var(--v2-text); }
@media (min-width: 992px) { .v2-menu-toggle { display:none; } }
.v2-crumbs { flex:1; min-width:0; }
.v2-crumbs h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-topbar-context {
  display:flex; align-items:center; gap:1rem;
  min-width: 0;                /* allow shrink instead of pushing the title */
  flex-shrink: 1;
}
.v2-topbar-context .fw-semibold {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Below tablet width the sidebar (once opened) already surfaces the
   workspace name, and squeezing "Workspace / <tenant>" into the
   topbar just overlaps the page title. Drop it on phones. */
@media (max-width: 767.98px) {
  .v2-topbar-context { display: none; }
}

.v2-content { padding: 1.5rem 1.25rem; flex:1; }
.v2-footer {
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--v2-border);
  background:#fff;
}

/* ============ Cards & KPIs ============ */
.v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow);
}
.v2-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  display:flex; align-items:center; justify-content:space-between;
}
.v2-card-body { padding: 1.25rem; }
.v2-card-title { font-size:1rem; margin:0; font-weight:600; letter-spacing:-.01em; }

.v2-kpi {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--v2-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.v2-kpi:hover { transform: translateY(-1px); box-shadow: var(--v2-shadow-lg); }
.v2-kpi-label { color: var(--v2-muted); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; font-weight:600; }
.v2-kpi-value { font-size:1.9rem; font-weight:700; line-height:1.1; color: var(--brand-navy); letter-spacing:-.02em; }
.v2-kpi-delta { font-size:.82rem; margin-top:.25rem; }

/* ============ Wizard ============ */
.v2-steps {
  display:flex; gap:.5rem; margin-bottom:1.25rem;
  overflow-x:auto; padding-bottom:.25rem;
}
.v2-step {
  flex: 1 1 0; min-width:140px;
  display:flex; align-items:center; gap:.5rem;
  padding: .8rem .95rem;
  background:#fff; border:1px solid var(--v2-border); border-radius: var(--v2-radius);
  color: var(--v2-muted); font-size:.9rem;
}
.v2-step .n {
  width:26px; height:26px; border-radius:50%;
  background: var(--v2-bg); color: var(--v2-muted);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.v2-step.current { border-color: var(--brand-teal); color: var(--v2-text); box-shadow: 0 0 0 3px rgba(0,179,166,.08); }
.v2-step.current .n { background: var(--brand-teal); color:#fff; }
.v2-step.done { border-color: rgba(0,179,166,.35); color: var(--brand-teal-dk); }
.v2-step.done .n { background: var(--brand-teal-dk); color:#fff; }

/* ============ Table ============ */
.v2-table thead th {
  background: #F8FAFC; color: var(--v2-muted);
  font-weight:600; font-size:.75rem; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:1px solid var(--v2-border);
}
.v2-table tbody tr:hover { background: #FAFBFD; }

/* ============ Utility ============ */
.hint { font-size:.8rem; color: var(--v2-muted); }
.req::after { content:" *"; color:#C0392B; }
.v2-empty {
  text-align:center; padding:3rem 1rem; color: var(--v2-muted);
}
.v2-empty > i { font-size:2.75rem; opacity:.35; color: var(--brand-royal); }

/* ============ Form controls: checkboxes & radios ============ */
/* Bootstrap's default #dee2e6 border on .form-check-input is barely
   visible against white. Applied globally so every checkbox and
   radio in the app is legible without having to squint. Size stays
   at the Bootstrap default (1em) — tight filter UI stays compact.
   Individual callsites (e.g. .attendance-check) bump size where the
   workflow warrants it. */
.form-check-input {
  border: 2px solid var(--brand-royal);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--brand-royal);
  border-color: var(--brand-royal);
}
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(30, 58, 138, .25);
  border-color: var(--brand-royal);
}
/* Disabled state should look muted, not "just a very dark tick" — */
/* otherwise a disabled control reads as active. */
.form-check-input:disabled,
.form-check-input[disabled] {
  border-color: #adb5bd;
  opacity: .55;
}

/* ============ Attendance register ============ */
/* Bigger tap targets for the high-frequency register-taking flow.
   Border + checked color already come from the global rule above. */
.attendance-check.form-check-input {
  width: 1.35rem; height: 1.35rem;
  border-radius: .3rem;
  flex-shrink: 0;
}
/* Whole-row hover so the tap target reads as clickable, not just the box. */
.attendance-row { cursor: pointer; transition: background-color .1s ease; }
.attendance-row:hover { background-color: rgba(30, 58, 138, .04); }

/* ============ Public / marketing ============ */
.public-body {
  background:
    radial-gradient(ellipse at top left,  rgba(0,179,166,.08) 0%, transparent 55%),
    radial-gradient(ellipse at top right, rgba(245,184,65,.08) 0%, transparent 55%),
    var(--v2-bg);
  min-height:100vh;
}
.public-nav {
  background: var(--brand-navy);
  color: #fff;
  padding: .85rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}
.public-nav a.brand {
  color:#fff; text-decoration:none; font-weight:700;
  display:flex; align-items:center; gap:.6rem;
}
.public-nav .brand .logo-plate {
  display:inline-flex; align-items:center;
  border-radius: 6px;
  overflow: hidden;
}
.public-nav .brand img.logo {
  display:block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.public-nav .mark {
  width:32px;height:32px;border-radius:8px;
  background: var(--brand-teal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;
}
.public-nav .actions a {
  color:#CBD5E1; text-decoration:none; margin-left:1.25rem; font-size:.95rem;
}
.public-nav .actions a:hover { color:#fff; }
.public-nav .actions .btn { margin-left:1.25rem; }

.public-wrap { max-width: 1080px; margin:0 auto; padding: 2rem 1.25rem; }

.public-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lg);
}

.public-hero {
  padding: 4.5rem 1.25rem 3rem;
  text-align:center;
}
.public-hero h1 {
  font-weight:800; letter-spacing:-.03em; color: var(--brand-navy);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}
.public-hero .lead { color: var(--v2-muted); font-size:1.15rem; }
.public-hero .kicker {
  display:inline-block;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(0,179,166,.1); color: var(--brand-teal-dk);
  font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:1.25rem;
}

footer.public-footer {
  text-align:center; color: var(--v2-muted);
  padding: 2rem 1rem; font-size:.85rem;
}
footer.public-footer a { color: var(--v2-muted); }