/* ============================================================
   Catenians Membership Portal — UI theme
   Design language adapted from the "Runway" aesthetic, recoloured
   to Catenian navy. Fraunces (display) + IBM Plex Sans/Mono.
   Loaded AFTER bootstrap.min.css; the bottom section maps
   Bootstrap components onto this theme so existing markup inherits it.
   ============================================================ */
:root{
  --ink:#14263b; --ink2:#4a5b6e; --ink3:#8290a0;
  --paper:#ffffff; --panel:#f6f8fa; --panel2:#eef2f6; --line:#e4e9ef; --line2:#d3dbe4;
  --brand:#245c8c; --brand-deep:#1b3a5b; --brand-tint:#e9f1f8; --brand-soft:#c3d9ec;
  --brand-glow:rgba(36,92,140,.16);
  --green:#1f7a4d; --green-tint:#e7f3ec; --amber:#b4791a; --amber-tint:#fbf2e0;
  --red:#c0392b; --red-tint:#fbecea; --red-soft:#f3d2cd;
  --ui:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:10px; --shadow:0 1px 2px rgba(20,38,59,.05), 0 8px 24px -12px rgba(20,38,59,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--ui);color:var(--ink);background:#eef1f5;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh;align-items:stretch;background:var(--paper)}
.sidebar{width:236px;flex-shrink:0;background:var(--ink) !important;color:#e7edf4;display:flex;flex-direction:column}
.sidebar .offcanvas-body{flex:1;display:flex;flex-direction:column;padding:22px 12px 16px;background:transparent}
.brand{padding:0 10px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:12px}
.brand .name{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.2px;line-height:1.05}
.brand .name small{display:block;font-family:var(--ui);font-weight:500;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#8fa2b6;margin-top:3px}
.mark{width:30px;height:30px;border-radius:8px;background:var(--brand);position:relative;flex-shrink:0;display:inline-block;box-shadow:0 0 0 4px var(--brand-glow)}
.mark:before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:#fff;opacity:.96;border-radius:1px}
.mark:after{content:"";position:absolute;top:50%;left:8px;right:8px;height:2px;transform:translateY(-50%);background:#fff;opacity:.96;border-radius:1px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav .lbl{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7f90a4;padding:14px 10px 7px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:#c3cedb;font-weight:500;font-size:13.5px;transition:.16s;text-decoration:none}
.nav a .ic{width:18px;text-align:center;opacity:.9;flex-shrink:0;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:var(--brand);color:#fff}
.nav a.on .ic{opacity:1}
.side-foot{margin-top:auto;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;color:#8497ab}
.side-foot a{color:#b9cadd;text-decoration:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.topbar{height:62px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20}
.topbar .spacer{flex:1}
.topbar .tb-title{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.tb-btn{padding:8px 14px;border:1px solid var(--line2);border-radius:9px;font-weight:600;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;background:var(--paper);cursor:pointer;text-decoration:none}
.tb-btn:hover{border-color:var(--brand);color:var(--brand)}
.tb-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.tb-btn.primary:hover{background:var(--brand-deep);color:#fff}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-tint);border:1px solid var(--brand-soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--brand-deep);flex-shrink:0}
.nav-toggle{border:1px solid var(--line2);background:var(--paper);border-radius:9px;width:42px;height:42px;font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
.mobile-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);flex-shrink:0}
.mobile-brand .mark{width:24px;height:24px}

.canvas{flex:1;overflow:auto;padding:30px 34px 54px}
.stagger>*{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Typography & headers ---------- */
.page-head{margin-bottom:24px}
.eyebrow{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:7px}
h1.title{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.4px;line-height:1.08;margin:0}
.subtitle{color:var(--ink2);font-size:14.5px;margin-top:6px;max-width:660px}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{font-family:var(--display);letter-spacing:-.2px}

/* ---------- Tiles / pills ---------- */
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px}
.tile .k{font-size:11.5px;letter-spacing:.3px;color:var(--ink3);font-weight:600;text-transform:uppercase}
.tile .v{font-family:var(--mono);font-weight:600;font-size:26px;margin-top:7px;letter-spacing:-.5px;color:var(--ink)}
.tile .d{font-size:12px;margin-top:5px;color:var(--ink2)}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px}
.pill.ok,.pill.success{background:var(--green-tint);color:var(--green)}
.pill.warn,.pill.warning{background:var(--amber-tint);color:var(--amber)}
.pill.bad,.pill.danger{background:var(--red-tint);color:var(--red)}
.pill.info{background:var(--brand-tint);color:var(--brand-deep)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Login / auth split screen ---------- */
.auth{min-height:100vh;display:flex}
.auth .left{flex:1;background:var(--ink);color:#e7edf4;padding:56px 60px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth .left:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(36,92,140,.55),transparent 62%);top:-160px;right:-160px;filter:blur(6px)}
.auth .left .brand2{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.auth .left .brand2 .name{font-family:var(--display);font-size:19px;font-weight:600}
.auth .left .hero{margin-top:auto;position:relative;z-index:1}
.auth .left .hero h2{font-family:var(--display);font-weight:500;font-size:33px;line-height:1.18;letter-spacing:-.5px;max-width:460px}
.auth .left .hero p{color:#a9bccf;margin-top:16px;max-width:420px;font-size:14.5px}
.auth .left .stat-row{display:flex;gap:34px;margin-top:38px;position:relative;z-index:1}
.auth .left .stat-row .s .n{font-family:var(--mono);font-size:25px;font-weight:600;color:var(--brand-soft)}
.auth .left .stat-row .s .t{font-size:11.5px;color:#93a6ba;letter-spacing:.3px;margin-top:3px}
.auth .right{width:46%;max-width:560px;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--paper)}
.auth-card{width:100%;max-width:380px}
.brand-inline{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.brand-inline .brand-name{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);line-height:1;letter-spacing:.2px}
.brand-inline .brand-name span{color:var(--brand)}
.auth-card .eyebrow{margin-bottom:10px}
.auth-card h1{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.3px}
.auth-card .lede{color:var(--ink2);margin:8px 0 26px;font-size:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.field input,.field select{width:100%;padding:12px 13px;border:1px solid var(--line2);border-radius:9px;font-family:var(--ui);font-size:14px;background:var(--paper);transition:.16s}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.field .hint{font-size:11.5px;color:var(--ink3);margin-top:5px}
.btn-full{width:100%;padding:13px;background:var(--brand);color:#fff;border-radius:9px;font-weight:600;font-size:14.5px;transition:.16s;border:none;cursor:pointer}
.btn-full:hover{background:var(--brand-deep)}
.auth-meta{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink3);display:flex;gap:7px;align-items:center}
.auth-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}

/* ---------- Themed tables (optional .tbl) ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line2)}
table.tbl td{padding:12px;border-bottom:1px solid var(--line)}
table.tbl tbody tr:hover{background:var(--panel)}

/* ============================================================
   Bootstrap 5 integration layer — maps Bootstrap onto the theme
   so the existing page markup (cards, tables, forms, buttons,
   alerts, badges) picks up the navy aesthetic with no edits.
   ============================================================ */
:root{
  --bs-primary:#245c8c; --bs-primary-rgb:36,92,140;
  --bs-body-bg:#eef1f5; --bs-body-color:#14263b;
  --bs-body-font-family:var(--ui); --bs-border-color:var(--line);
  --bs-link-color:var(--brand); --bs-link-hover-color:var(--brand-deep);
}
body{background:#eef1f5}

.container,.container-fluid{--bs-gutter-x:1.5rem}
.canvas>.container{padding-left:0;padding-right:0;max-width:1180px;margin-left:0}

/* Cards */
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.card.shadow-sm{box-shadow:var(--shadow) !important}
.card-header{background:var(--panel);border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);padding:14px 18px;font-size:14px}
.card-body{padding:18px}
.card-body.card-body{padding:18px}

/* Buttons */
.btn{--bs-btn-font-weight:600;border-radius:9px;font-size:13.5px;transition:.16s}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-deep);--bs-btn-hover-border-color:var(--brand-deep);--bs-btn-active-bg:var(--brand-deep);--bs-btn-active-border-color:var(--brand-deep);--bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand-soft);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:var(--brand);--bs-btn-active-border-color:var(--brand)}
.btn-outline-secondary{--bs-btn-color:var(--ink2);--bs-btn-border-color:var(--line2);--bs-btn-hover-bg:var(--panel2);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--line2);--bs-btn-active-bg:var(--panel2);--bs-btn-active-color:var(--ink)}
.btn-outline-success{--bs-btn-color:var(--green);--bs-btn-border-color:#bfe0cd;--bs-btn-hover-bg:var(--green);--bs-btn-hover-border-color:var(--green)}
.btn-outline-danger{--bs-btn-color:var(--red);--bs-btn-border-color:var(--red-soft);--bs-btn-hover-bg:var(--red);--bs-btn-hover-border-color:var(--red)}
.btn-outline-warning{--bs-btn-color:var(--amber);--bs-btn-border-color:#e9d3a1;--bs-btn-hover-bg:var(--amber);--bs-btn-hover-border-color:var(--amber);--bs-btn-hover-color:#fff}
.btn-warning{--bs-btn-bg:var(--amber);--bs-btn-border-color:var(--amber);--bs-btn-color:#fff;--bs-btn-hover-bg:#9c6916;--bs-btn-hover-border-color:#9c6916;--bs-btn-hover-color:#fff}
.btn-link{--bs-btn-color:var(--brand);--bs-btn-hover-color:var(--brand-deep);text-decoration:none}

/* Forms */
.form-control,.form-select{border:1px solid var(--line2);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink)}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
/* Keep clear space between the option text and the dropdown arrow on every select. */
.form-select{padding-right:2.75rem;background-position:right 1rem center}
.form-select.form-select-sm{padding-right:2.4rem;background-position:right .85rem center}
.form-label{font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.form-text{font-size:11.5px;color:var(--ink3)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}

/* Tables */
.table{--bs-table-bg:transparent;font-size:13.5px;color:var(--ink);margin-bottom:0}
.table>thead th{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3);font-weight:600;border-bottom:1px solid var(--line2);padding:11px 12px}
.table>tbody td{padding:12px;border-color:var(--line);vertical-align:middle}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:var(--panel)}
.table tbody tr:hover>*{background:var(--panel)}

/* Alerts → soft tinted with left accent */
.alert{border:1px solid var(--line);border-radius:var(--r);border-left-width:4px;font-size:13.5px;padding:12px 16px}
.alert-success{background:var(--green-tint);border-color:#bfe0cd;border-left-color:var(--green);color:#155c39}
.alert-danger{background:var(--red-tint);border-color:var(--red-soft);border-left-color:var(--red);color:#8f271c}
.alert-warning{background:var(--amber-tint);border-color:#e9d3a1;border-left-color:var(--amber);color:#7c520f}
.alert-info{background:var(--brand-tint);border-color:var(--brand-soft);border-left-color:var(--brand);color:var(--brand-deep)}

/* Badges */
.badge{font-weight:600;border-radius:6px;padding:.32em .6em}
.text-bg-primary{background:var(--brand) !important;color:#fff !important}
.text-bg-secondary{background:var(--panel2) !important;color:var(--ink2) !important}
.badge-deceased{background:#6c7787 !important}

.text-muted{color:var(--ink3) !important}

/* Responsive: sidebar becomes an off-canvas drawer below lg */
.sidebar{--bs-offcanvas-width:236px}
@media (max-width:991px){
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:520px}
}
@media (max-width:768px){
  h1.title{font-size:24px}
  .canvas{padding:18px 16px 44px}
}
@media (max-width:820px){
  .auth{flex-direction:column}
  .auth .left{display:none}
  .auth .right{width:100%;max-width:none}
}