/* ==========================================================================
   CapTax design system
   Ported from the firm's design mockup. All existing class names used by
   the Jinja templates (.card, .badge, .form-grid, a.button, etc.) are kept
   so no template markup needed to change to pick up the new look - only
   the color/type/spacing values changed, plus base.html got a new sidebar
   layout. No routes, forms, field names, or data were touched.
   ========================================================================== */

:root {
  --ink: #1C2B39;
  --ink-soft: #48575F;
  --ink-faint: #6B7A80;
  --paper: #F4F5F2;
  --paper-raised: #FFFFFF;
  --rule: #DBDFDA;
  --rule-strong: #C3C9C3;
  --forest: #2A6155;
  --forest-bg: #E9F1EE;
  --gold: #8F621E;
  --gold-bg: #F6EEE1;
  --clay: #93342B;
  --clay-bg: #F5E9E7;
  --plum: #5C4685;
  --plum-bg: #EDE7F3;
  --navblue: #1F5C93;
  --navblue-hover: #174975;
  --navblue-bg: #E8F0F8;
  --radius: 4px;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Aliases so any old references keep working with the new palette */
  --navy: var(--ink);
  --bg: var(--paper);
  --border: var(--rule);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --danger: var(--clay);
  --success: var(--forest);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App shell: sidebar + content ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  background: var(--ink);
  color: #E4E9EB;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 22px 0;
}
.sidebar .brand { padding: 0 20px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 14px; }
.sidebar .brand-mark { font-family: var(--serif); font-size: 23px; font-weight: 600; color: #fff; }
.sidebar .brand-sub { font-size: 12px; color: #AEBBBF; margin-top: 3px; letter-spacing: 0.4px; text-transform: uppercase; }

nav.primary-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius);
  color: #CBD5D8; text-decoration: none; font-size: 15px;
}
.nav-item svg { width: 17px; height: 17px; opacity: 0.85; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.nav-item.active svg { opacity: 1; }
.nav-group-label {
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  color: #8B9CA1; padding: 16px 14px 7px 14px;
}

.sidebar-foot { margin-top: auto; padding: 14px 20px 0 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.user-chip { display: flex; align-items: center; gap: 9px; padding-top: 14px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.user-name { font-size: 14px; color: #EDF1F2; }
.user-role a { color: #9BAAAF; font-size: 11.5px; text-decoration: none; }
.user-role a:hover { color: #fff; }

.main { flex: 1; min-width: 0; }
.container { max-width: 1320px; margin: 0 auto; padding: 36px 40px 72px 40px; }

/* ---------- Type ---------- */
h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 6px 0; color: var(--ink); }
h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 34px 0 12px 0; color: var(--ink); }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px 0; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.3px; }
.subtle { color: var(--ink-soft); font-size: 14px; }

/* ---------- Buttons ---------- */
a.button, button, input[type=submit] {
  font-family: var(--sans);
  background: var(--forest);
  border: 1px solid var(--forest);
  color: white;
  padding: 11px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
a.button:hover, button:hover, input[type=submit]:hover { background: #275a4f; border-color: #275a4f; }
a.button.secondary, button.secondary {
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--rule-strong);
}
a.button.secondary:hover, button.secondary:hover { background: var(--paper-raised); border-color: var(--ink-soft); }
a.button.nav, button.nav { background: var(--navblue); border-color: var(--navblue); color: #fff; }
a.button.nav:hover, button.nav:hover { background: var(--navblue-hover); border-color: var(--navblue-hover); }
a.button.nav-outline, button.nav-outline {
  background: var(--navblue-bg); color: var(--navblue); border: 1px solid #B6CCE0;
}
a.button.nav-outline:hover, button.nav-outline:hover { background: #DCE9F4; border-color: var(--navblue); }
a.button.danger, button.danger { background: var(--clay); border-color: var(--clay); }
a.button.danger:hover, button.danger:hover { background: #7c2a22; border-color: #7c2a22; }

/* ---------- Tables ---------- */
table { border-collapse: collapse; width: 100%; margin-top: 10px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 13px 16px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--rule); }
th {
  background: #FAFAF8; color: var(--ink-soft); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1.5px solid var(--rule-strong);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFBF9; }
tr.total-row td { font-weight: 700; background: var(--forest-bg); color: var(--forest); }

/* Very wide tables (the holdings grid is 14 columns) get tighter cells so
   they still fit on screen at the larger base type size. The panel around
   them also scrolls horizontally as a fallback on narrow displays. */
table.dense th, table.dense td { padding: 10px 9px; font-size: 13.5px; }
table.dense th { font-size: 11.5px; letter-spacing: 0.2px; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-top: 18px;
}

/* ---------- Forms ---------- */
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=file], select, textarea {
  padding: 11px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper-raised);
  width: 100%;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--forest); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; align-items: end; }
.form-grid label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }

.error { color: var(--clay); margin-bottom: 12px; font-size: 15px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 4px 11px; border-radius: 3px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  background: var(--forest-bg); color: var(--forest);
}
.badge.gold { background: var(--gold-bg); color: var(--gold); }
.badge.plum { background: var(--plum-bg); color: var(--plum); }
.badge.clay { background: var(--clay-bg); color: var(--clay); }
.badge.neutral { background: #EFEFEC; color: var(--ink-soft); }

.disclosure {
  font-size: 13px; color: var(--ink-soft); font-style: italic;
  margin-top: 22px; border-top: 1px dashed var(--rule-strong); padding-top: 12px; line-height: 1.6;
}

.login-wrap { max-width: 420px; margin: 100px auto; }
.login-wrap h1 { text-align: center; }
.login-wrap .subtle { text-align: center; margin-bottom: 6px; }

.right { text-align: right; }

/* ---------- Structural helpers used by restyled pages ---------- */
.breadcrumb { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); }
.breadcrumb .sep { margin: 0 6px; color: var(--ink-faint); }

.section-label {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 10px; margin: 26px 0 10px 0;
}
.section-label .ln { flex: 1; height: 1px; background: var(--rule); }

.panel { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; margin-top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { margin: 0; font-size: 19px; }
.panel-head .meta { font-size: 13px; color: var(--ink-soft); }
.panel table { border: none; border-radius: 0; margin-top: 0; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; margin-bottom: 8px; }
.stat-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; }
.stat-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-soft); margin-bottom: 8px; }
.stat-value { font-family: var(--mono); font-size: 31px; font-weight: 500; }
.stat-sub a { color: var(--navblue); font-size: 13.5px; text-decoration: none; }
.stat-sub a:hover { text-decoration: underline; }

.totals-bar {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 20px 26px; display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; flex-wrap: wrap; gap: 14px;
}
.totals-bar .tot-label { font-family: var(--serif); font-size: 17px; color: #D6DEE0; }
.totals-group { display: flex; gap: 26px; flex-wrap: wrap; }
.tot-item { text-align: right; }
.tot-item .k { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: #A9BAC0; margin-bottom: 4px; }
.tot-item .v { font-family: var(--mono); font-size: 22px; font-weight: 500; color: #B3E2D1; }
.tot-item.muni .v { color: #C9B8DE; font-size: 18px; }

.tax-tag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.3px; display: inline-block;
}
.tax-tag.taxable { background: #EFEFEC; color: var(--ink-soft); }
.tax-tag.exempt { background: var(--plum-bg); color: var(--plum); }

.upload-zone {
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 30px; text-align: center; background: #FAFAF8; margin: 18px 0;
}
.upload-zone .upload-title { font-size: 16.5px; font-weight: 500; margin-bottom: 4px; }

/* ---------- Segmented sub-navigation ---------- */
.subnav { display: inline-flex; background: #EBECE8; border-radius: 6px; padding: 3px; gap: 2px; margin: 16px 0; }
.subtab {
  padding: 10px 20px; font-size: 15px; font-weight: 500; color: var(--ink-soft);
  border-radius: 4px; cursor: pointer; text-decoration: none;
}
.subtab.active { background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.subpanel { display: none; }
.subpanel.active { display: block; }

.toggle-btn { background: transparent; border: none; padding: 0; cursor: pointer; }
.toggle-btn:hover { background: transparent; }
.toggle-btn:hover .badge { filter: brightness(0.92); }