/* SHIELDers theme — layered on Bootstrap 5.3 via CSS variables. */

:root {
  --sh-navy: #14365d;
  --sh-navy-2: #1d4f82;
  --sh-teal: #2a7fc1;
  --sh-amber: #4d8fd6;
  --sh-rose: #5b6fd8;
  --sh-violet: #3f6fb0;
  --sh-sky: #58a6e8;

  --bs-font-sans-serif: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: #f1f5fb;
  --bs-body-color: #1f2a37;
  --bs-secondary-color: #5b6b7f;
  --bs-border-color: #e1e6ee;
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-primary: var(--sh-navy-2);
  --bs-primary-rgb: 29, 79, 130;
  --bs-link-color: var(--sh-navy-2);
  --bs-link-color-rgb: 29, 79, 130;
  --bs-link-hover-color: var(--sh-navy);
  --bs-link-hover-color-rgb: 20, 54, 93;
  --bs-primary-bg-subtle: #e4edf7;
  --bs-primary-text-emphasis: #163f6b;
  --sh-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
  --sh-nav-bg: linear-gradient(100deg, #12304f 0%, #1d4f82 60%, #1f5d8a 100%);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0e1626;
  --bs-body-color: #dfe6ef;
  --bs-secondary-color: #93a3b8;
  --bs-border-color: #263348;
  --bs-tertiary-bg: #141f33;
  --bs-secondary-bg: #1a2740;
  --bs-primary: #6fb2ee;
  --bs-primary-rgb: 111, 178, 238;
  --bs-link-color: #8cc2f2;
  --bs-link-color-rgb: 140, 194, 242;
  --bs-link-hover-color: #b5d8f7;
  --bs-link-hover-color-rgb: 181, 216, 247;
  --bs-primary-bg-subtle: #1b3353;
  --bs-primary-text-emphasis: #b5d8f7;
  --sh-card-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-nav-bg: linear-gradient(100deg, #0b1a2e 0%, #132c4a 100%);
}

body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -.01em; }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--sh-navy-2); --bs-btn-border-color: var(--sh-navy-2);
  --bs-btn-hover-bg: var(--sh-navy); --bs-btn-hover-border-color: var(--sh-navy);
  --bs-btn-active-bg: var(--sh-navy); --bs-btn-active-border-color: var(--sh-navy);
  --bs-btn-disabled-bg: var(--sh-navy-2); --bs-btn-disabled-border-color: var(--sh-navy-2);
}
.btn-outline-primary {
  --bs-btn-color: var(--sh-navy-2); --bs-btn-border-color: var(--sh-navy-2);
  --bs-btn-hover-bg: var(--sh-navy-2); --bs-btn-hover-border-color: var(--sh-navy-2);
  --bs-btn-active-bg: var(--sh-navy-2); --bs-btn-active-border-color: var(--sh-navy-2);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #2f6fae; --bs-btn-border-color: #2f6fae; --bs-btn-hover-bg: #3b82c4; --bs-btn-hover-border-color: #3b82c4; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8cc2f2; --bs-btn-border-color: #3b6e9e; --bs-btn-hover-bg: #2f6fae; --bs-btn-hover-border-color: #2f6fae; }
.btn-check:checked + .btn-outline-secondary { background: var(--sh-navy-2); border-color: var(--sh-navy-2); color: #fff; }
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary { background: #2f6fae; border-color: #2f6fae; }

/* Navbar */
.sh-nav { background: var(--sh-nav-bg); box-shadow: 0 2px 10px rgba(10, 30, 60, .18); }
.sh-nav .navbar-brand { color: #fff; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.sh-nav .navbar-brand .bi { color: #9fd0ff; font-size: 1.35rem; }
.sh-nav .nav-link { color: rgba(255, 255, 255, .78); border-radius: .5rem; padding: .4rem .7rem; margin: 0 .1rem; display: flex; align-items: center; gap: .4rem; }
.sh-nav .nav-link .bi { opacity: .85; }
.sh-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.sh-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: 600; }
.sh-nav .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.sh-nav .navbar-toggler-icon { filter: invert(1); }
.sh-nav .dropdown-menu { box-shadow: var(--sh-card-shadow); }

/* Page chrome */
main.sh-main { max-width: 1440px; }
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { margin: 0; }

/* Cards and tables */
.card { border: 1px solid var(--bs-border-color); box-shadow: var(--sh-card-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); font-weight: 500; }
.card .card-body > h2.h6, .card .card-body > h3.h6 { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .6rem; }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--bs-secondary-color); border-bottom-width: 1px; }
.table-sm td, .table-sm th { vertical-align: middle; padding-top: .5rem; padding-bottom: .5rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--bs-primary-rgb), .06); }
.table-responsive { background: var(--bs-body-bg); }
.card .table, .card .table-responsive { background: transparent; }
.badge { font-weight: 600; letter-spacing: .01em; }
.form-control, .form-select { border-color: var(--bs-border-color); }
.form-control:focus, .form-select:focus { border-color: var(--sh-navy-2); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.alert { border: 0; box-shadow: var(--sh-card-shadow); }

/* Avatars */
.avatar { display: inline-flex; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .72rem; font-weight: 700; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; color: #fff; letter-spacing: .02em; }
.avatar.tone-0 { background: linear-gradient(135deg, #14365d, #2a6db5); }
.avatar.tone-1 { background: linear-gradient(135deg, #1f6fb2, #4ea1e6); }
.avatar.tone-2 { background: linear-gradient(135deg, #2b5f9e, #5f8fd0); }
.avatar.tone-3 { background: linear-gradient(135deg, #3a4fa3, #6c7fe0); }
.avatar.tone-4 { background: linear-gradient(135deg, #0f6e8c, #2aa0bf); }
.avatar.tone-5 { background: linear-gradient(135deg, #335c81, #5f8bb0); }

/* Dashboard */
.stat-tile { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; height: 100%; transition: transform .12s ease, box-shadow .12s ease; }
.stat-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .1); text-decoration: none; }
.stat-tile .stat-icon { width: 2.6rem; height: 2.6rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; }
.stat-tile .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--bs-body-color); }
.stat-tile .stat-label { font-size: .78rem; color: var(--bs-secondary-color); }
.tone-navy { background: var(--sh-navy-2); } .tone-teal { background: var(--sh-teal); } .tone-amber { background: var(--sh-amber); }
.tone-violet { background: var(--sh-violet); } .tone-rose { background: var(--sh-rose); } .tone-sky { background: var(--sh-sky); }
.workload-bar { height: 8px; background: var(--bs-secondary-bg); border-radius: 4px; overflow: hidden; }
.workload-bar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #58a6e8, var(--sh-navy-2)); }
.attention-card { border-left: 4px solid var(--bs-border-color); }
.attention-card.warn { border-left-color: #e3a008; }
.attention-card.danger { border-left-color: #d64550; }
.attention-card.info { border-left-color: var(--sh-sky); }
.attention-card .card-body > h3 { display: flex; align-items: center; gap: .4rem; }

/* Auth pages */
.auth-bg { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #d5e6f6 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #cfe0f5 0%, transparent 55%), var(--bs-body-bg); }
[data-bs-theme="dark"] .auth-bg { background: radial-gradient(1200px 600px at 10% -10%, #1b3353 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #152f52 0%, transparent 55%), var(--bs-body-bg); }
.auth-brand { width: 3.6rem; height: 3.6rem; border-radius: 1rem; background: var(--sh-nav-bg); color: #9fd0ff; display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto .75rem; box-shadow: 0 8px 24px rgba(20, 54, 93, .25); }
.auth-card { border: 0; box-shadow: 0 12px 40px rgba(16, 24, 40, .12); }

/* Misc */
.status-chip { font-size: .8rem; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }
.empty { color: var(--bs-secondary-color); font-size: .9rem; }
.text-warning-emphasis { color: #9a6700 !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: #f3c14b !important; }

/* Funds */
.fund-bar { display: flex; height: 10px; background: var(--bs-secondary-bg); border-radius: 5px; overflow: hidden; }
.fund-bar > span { display: block; height: 100%; }
.fund-bar > .definitive, .legend.definitive { background: var(--sh-navy-2); }
.fund-bar > .provisional, .legend.provisional { background: #8fbbea; }
.legend { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
button.badge { cursor: pointer; }
