/* Unified stylesheet for the mosque management application.
   Replaces app.css and dashboard.css; dashboard selectors are retained. */

:root{
  --navy:#0b2147;
  --navy-2:#12366d;
  --blue:#174ea6;
  --blue-soft:#eaf1ff;
  --gold:#f2b544;
  --gold-soft:#fff5d9;
  --ink:#172033;
  --muted:#64748b;
  --surface:#ffffff;
  --bg:#f4f7fb;
  --line:#e2e8f0;
  --radius:16px;
  --shadow-sm:0 5px 20px rgba(15,23,42,.045);
  --shadow-md:0 12px 30px rgba(15,23,42,.10);
  --focus-ring:0 0 0 .22rem rgba(23,78,166,.2);
}
body{background:var(--bg);color:var(--ink);min-height:100vh;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.app-navbar{background:var(--navy);box-shadow:0 3px 14px rgba(11,33,71,.12)}
.navbar-brand{white-space:normal}
main{max-width:1600px;margin:0 auto}
.summary-card{height:100%;background:var(--surface);border:1px solid #e2e8f0;border-radius:16px;padding:22px;box-shadow:0 5px 20px rgba(15,23,42,.04);border-top:4px solid var(--gold)}
.summary-label{font-size:.95rem;color:var(--muted);margin-bottom:12px}
.summary-value{font-size:clamp(1.4rem,2vw,2rem);font-weight:750;color:var(--navy);overflow-wrap:anywhere}
.module-card{display:block;height:100%;padding:22px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 5px 20px rgba(15,23,42,.03);transition:transform .15s ease,box-shadow .15s ease}
.module-card:hover{color:inherit;transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.module-card h3{color:var(--navy)}
.module-card p{margin:0;color:var(--muted)}
.card{border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(15,23,42,.03)}
.card-header{background:#fff;font-weight:700;padding:14px 18px;border-bottom:1px solid #e2e8f0}
.table{font-size:.94rem}.table thead th{white-space:nowrap;background:#f8fafc;color:#334155}
.btn-primary{background:var(--blue);border-color:var(--blue)}
.auth-wrap{min-height:calc(100vh - 170px);display:flex;align-items:center;justify-content:center;padding:24px 0}
.auth-card{width:100%;max-width:520px;border-radius:20px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:18px;background:var(--navy);color:#fff;font-size:1.8rem;font-weight:800;border-bottom:4px solid var(--gold)}
.app-footer{background:#fff;border-top:1px solid #e2e8f0;color:var(--muted);font-size:.9rem}

/* Dashboard quick-access navigation */
.module-card{position:relative;min-height:175px;padding:20px 22px 48px;border-left:4px solid var(--gold)}
.module-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.module-card h3{margin-top:10px;margin-bottom:8px}
.module-icon{font-size:1.8rem;line-height:1.3}
.module-action{position:absolute;left:22px;bottom:16px;color:var(--blue);font-weight:700}
.admin-card{border-left-color:var(--blue)}
@media(max-width:575.98px){.module-card{min-height:155px;padding:16px 18px 45px}.module-action{left:18px}}

/* ---------- Tones (stat cards & module cards) ---------- */
.dash-tone-green  { --tone: #16a06b; --tone-soft: #e3f6ee; --tone-ink: #0d7a52; }
.dash-tone-red    { --tone: #d64545; --tone-soft: #fdeaea; --tone-ink: #b02a2a; }
.dash-tone-blue   { --tone: var(--blue); --tone-soft: var(--blue-soft); --tone-ink: #174ea6; }
.dash-tone-amber  { --tone: #d98e04; --tone-soft: var(--gold-soft); --tone-ink: #8a5a00; }
.dash-tone-teal   { --tone: #0f9aa6; --tone-soft: #def5f7; --tone-ink: #0a7480; }
.dash-tone-purple { --tone: #6d4ff0; --tone-soft: #eeeaff; --tone-ink: #5636c9; }
.dash-tone-gray   { --tone: #8190a5; --tone-soft: #eef2f7; --tone-ink: #536175; }

/* ---------- Hero (welcome banner) ---------- */
/* Light banner: dark text on a white surface. This can never end up as
   "light text on light background", even if other styles interfere. */
.dash-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem 1.75rem 2.2rem;
  margin-bottom: 1.5rem;
  background: #ffffff !important;
  color: #0b2147 !important;
  border: 1px solid #d9e2ef;
  border-left: 6px solid #f2b544;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
}
.dash-hero::before,
.dash-hero::after { content: none !important; display: none !important; }

.dash-hero .dash-hero-text { flex: 1 1 340px; min-width: 0; }

.dash-hero .dash-hero-greet {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .25rem .8rem;
  color: #7a4f00 !important;
  background: #fff3d1 !important;
  border: 1px solid #f2d589;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  opacity: 1;
}
.dash-hero .dash-hero-name {
  margin: 0 0 .5rem;
  color: #0b2147 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dash-hero .dash-hero-sub {
  margin: 0;
  max-width: 52ch;
  color: #475569 !important;
  font-size: .95rem;
  line-height: 1.65;
  opacity: 1;
}

/* Info panel: date + role */
.dash-hero .dash-hero-meta {
  display: flex;
  flex: 0 0 auto;
  background: #f1f5fb !important;
  border: 1px solid #d9e2ef;
  border-radius: 14px;
  overflow: hidden;
}
.dash-hero .dash-meta-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem 1.35rem;
  min-width: 140px;
}
.dash-hero .dash-meta-item + .dash-meta-item { border-left: 1px solid #d9e2ef; }
.dash-hero .dash-meta-label {
  color: #475569 !important;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.dash-hero .dash-meta-value {
  color: #0b2147 !important;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Alerts / note ---------- */
.dash-alert {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  font-size: .92rem;
}
.dash-alert-warning { background: var(--gold-soft); border: 1px solid #f3d58a; color: #6b4f00; }
.dash-alert-icon { font-size: 1.1rem; line-height: 1.4; }

.dash-note {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .8rem 1.1rem;
  margin-bottom: 2rem;
  background: #fff;
  border: 1px dashed #c3cfe0;
  border-radius: 14px;
  color: var(--muted);
  font-size: .88rem;
}
.dash-note p { margin: 0; }

/* ---------- Stat cards ---------- */
.dash-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.15rem 1.25rem 1.15rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dash-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--tone);
}
.dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dash-stat.is-highlight { border-color: var(--tone); background: linear-gradient(135deg, #fff 40%, var(--tone-soft)); }
.dash-stat-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: var(--tone-soft);
  border-radius: 16px;
}
.dash-stat-body { min-width: 0; }
.dash-stat-label { font-size: .84rem; color: #475569; margin-bottom: .15rem; }
.dash-stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.dash-stat-value.is-small { font-size: 1.05rem; color: #475569; }

/* ---------- Section headings ---------- */
.dash-section-head { margin-bottom: 1.25rem; }
.dash-section-title { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 0 0 .2rem; }
.dash-section-title small { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: .4rem; }
.dash-section-sub { margin: 0; color: var(--muted); font-size: .92rem; }

.dash-group-label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.dash-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dash-group-label.is-admin { color: #8a5a00; }

/* ---------- Module cards ---------- */
.dash-card {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.dash-card:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: var(--tone);
  box-shadow: var(--shadow-md);
}
.dash-card:hover::after { transform: scaleX(1); }
.dash-card:focus-visible { outline: 3px solid var(--tone); outline-offset: 2px; }

.dash-card-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: var(--tone-soft);
  border-radius: 16px;
  transition: transform .25s ease;
}
.dash-card:hover .dash-card-icon { transform: scale(1.08) rotate(-4deg); }

.dash-card-body { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.dash-card-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 .3rem; }
.dash-card-desc { font-size: .88rem; line-height: 1.55; color: #475569; margin: 0 0 .85rem; flex: 1; }
.dash-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--tone-ink, var(--tone));
}
.dash-card-cta i { font-style: normal; transition: transform .2s ease; }
.dash-card:hover .dash-card-cta i { transform: translateX(5px); }

.dash-card.is-admin { border-style: dashed; background: linear-gradient(180deg, #fff, #fbfcff); }

/* ---------- Help ---------- */
.dash-help {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin-top: .5rem;
  background: linear-gradient(135deg, var(--blue-soft), var(--gold-soft));
  border: 1px solid #d5e0f2;
  border-radius: 16px;
  color: #26374f;
  font-size: .92rem;
}
.dash-help-icon { font-size: 1.2rem; }

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  .dash-hero { padding: 1.3rem 1.1rem 1.3rem 1.4rem; border-radius: 14px; }
  .dash-hero .dash-hero-meta { width: 100%; }
  .dash-hero .dash-meta-item { flex: 1 1 0; min-width: 0; padding: .7rem 1rem; }
  .dash-card { padding: 1rem; }
  .dash-card-icon { width: 48px; height: 48px; font-size: 1.45rem; }
  .dash-stat-value { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-stat, .dash-card, .dash-card-icon, .dash-card-cta i, .dash-card::after { transition: none; }
}


/* ---------- Shared application polish ---------- */
html { scroll-behavior:smooth; }
body { line-height:1.5; }
a { transition:color .15s ease; }
:where(button, input, select, textarea, a):focus-visible {
  outline:3px solid rgba(23,78,166,.38);
  outline-offset:2px;
}
.btn { border-radius:10px; font-weight:600; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--blue); border-color:var(--blue); }
.btn-primary:hover, .btn-primary:focus { background:#123e87; border-color:#123e87; }
.form-control, .form-select { min-height:42px; border-color:#cbd5e1; border-radius:10px; }
.form-control:focus, .form-select:focus { border-color:var(--blue); box-shadow:var(--focus-ring); }
.form-label { color:#334155; font-weight:650; }
.alert { border:0; border-radius:12px; box-shadow:0 3px 12px rgba(15,23,42,.04); }
.table-responsive { border-radius:0 0 14px 14px; }
.table > :not(caption) > * > * { padding:.8rem .9rem; vertical-align:middle; }
.badge { font-weight:650; letter-spacing:.01em; }
.card-header { color:var(--navy); }
.app-navbar .navbar-brand { font-weight:750; letter-spacing:.01em; }
.app-footer { padding:1rem 0; margin-top:2rem; }
.summary-card, .module-card, .card, .auth-card { transition:box-shadow .2s ease, transform .2s ease; }
.summary-card:hover { box-shadow:var(--shadow-md); }
.module-card:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.module-card h3 { font-weight:750; }
@media (max-width:767.98px) {
  main { padding-left:1rem; padding-right:1rem; }
  .summary-card { padding:18px; }
  .table { font-size:.88rem; }
  .table > :not(caption) > * > * { padding:.65rem .7rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}