/* Box Wilson Investor Portal — brand styles
   Palette + type mirror boxwilson.com: navy #212e40, gold #b27503,
   Open Sans (body) + Playfair Display (headings). */

:root {
  --navy: #212e40;
  --gold: #b27503;
  --blue: #2ea3f2;
  --ink: #2a2f36;
  --muted: #6b7280;
  --line: #e6e8eb;
  --bg: #f6f7f9;
  --card: #ffffff;
  --radius: 10px;
  --maxw: min(1560px, 94vw);  /* responsive content width — stretches with the window */
  --shadow: 0 1px 3px rgba(33, 46, 64, .08), 0 6px 20px rgba(33, 46, 64, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .35em;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top bar ---------- */
.topbar { background: var(--navy); border-bottom: 3px solid var(--gold); }
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; }
.logo { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); }
.nav { display: flex; gap: 22px; margin-left: 8px; }
.nav a {
  color: #cfd6e0; font-weight: 600; font-size: .94rem; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.active { color: #fff; border-bottom-color: var(--gold); }
.account { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.who { color: #cfd6e0; font-size: .9rem; }
.logout { color: #cfd6e0; font-size: .9rem; }
.logout:hover { color: #fff; text-decoration: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 64px; min-height: 60vh; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 2rem; }
.page-head .sub { color: var(--muted); margin: 0; }

/* ---------- login / hero ---------- */
.hero { display: flex; justify-content: center; padding: 24px 0; }
.hero-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 44px 40px; max-width: 460px; width: 100%; text-align: center;
  border-top: 4px solid var(--gold);
}
.hero-logo { height: 46px; margin-bottom: 18px; }
.hero h1 { font-size: 1.8rem; }
.lede { color: var(--muted); margin: 6px 0 26px; }
.btn-ms {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; font-weight: 600;
  padding: 13px 26px; border-radius: 8px; font-size: 1rem;
}
.btn-ms:hover { background: #2c3b52; text-decoration: none; }
.fineprint { color: var(--muted); font-size: .82rem; margin-top: 24px; line-height: 1.5; }
.help-link { margin-top: 16px; font-size: .9rem; }
.help-link a { color: var(--blue); text-decoration: none; }
.help-link a:hover { text-decoration: underline; }

/* ---------- document groups ---------- */
.doc-group {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 22px;
}
.doc-group h2 {
  font-size: 1.15rem; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc { border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: none; }
.doc-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px;
  color: var(--ink); border-radius: 6px;
}
.doc-link:hover { background: #f3f5f8; text-decoration: none; }
.doc-icon { color: var(--gold); font-size: 1.05rem; }
.doc-chevron { color: var(--muted); font-size: 1.3rem; line-height: 1; margin-left: 4px; }
.doc-name { flex: 1; }
.doc-period {
  color: var(--muted); font-size: .82rem; font-weight: 600;
  background: #eef1f5; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---------- documents table (Juniper-style) ---------- */
.refresh-link { margin-left: 8px; font-size: .85rem; white-space: nowrap; }
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center;
}
.f-input {
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  flex: 1 1 220px; min-width: 180px;
}
.f-input:focus { outline: none; border-color: var(--blue); }
/* Quick-filter shortcut boxes — inline on the filter row, styled like the
   dropdowns (neutral bordered boxes). The tinted "Clear filters" that pops in
   between them and the dropdowns is what stands out, so it stays findable. */
.shortcuts { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shortcut {
  font: inherit; font-size: .88rem; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
.shortcut:hover { color: var(--navy); border-color: var(--muted); }

/* "Clear filters" — shown only when a filter/sort is active (JS toggles [hidden]),
   anchored right after the dropdowns. Tinted blue (never green — that's Download's
   colour) so it's unmistakable without competing with the primary action. */
.f-clear {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--blue);
  background: rgba(46,163,242,.08); border: 1px solid rgba(46,163,242,.45);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; white-space: nowrap;
}
.f-clear:hover { background: rgba(46,163,242,.15); border-color: var(--blue); }
.f-clear[hidden] { display: none; }

/* multi-select checkbox dropdowns */
.ms { position: relative; }
.ms-btn {
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.ms-btn:hover { border-color: var(--muted); }
.ms.has-sel .ms-btn { border-color: var(--blue); color: var(--navy); font-weight: 600; }
.ms-count { color: var(--blue); font-weight: 700; }
.ms-caret { color: var(--muted); font-size: .8rem; }
.ms-panel {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 240px; max-height: 75vh; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px;
}
.ms.open .ms-panel { display: block; }
.ms-opts { max-height: 65vh; overflow-y: auto; }  /* shows all without scroll until very tall */
.ms-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.ms-opt:hover { background: #f3f5f8; }
.ms-opt input { accent-color: var(--blue); }
.ms-all { border-top: 1px solid var(--line); margin-top: 4px; font-weight: 600; color: var(--navy); }
.ms-head {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 8px 9px 4px;
}

/* toolbar: filters left, actions right */
.toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.actions { display: flex; align-items: center; gap: 16px; }
.btn-download {
  font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: #1f9d63;
  border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; white-space: nowrap;
}
.btn-download:hover { background: #18834f; }
.btn-download:disabled { background: #c7d0cc; cursor: default; }
.selbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: .9rem; color: var(--navy); }
.selbar[hidden] { display: none; }   /* the display:flex above otherwise defeats the [hidden] attr — keep it hidden until rows are selected */
.linkbtn { font: inherit; font-size: .9rem; color: var(--blue); background: none; border: none; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

/* row select + checked highlight */
.doc-table .col-check { width: 36px; text-align: center; }
.doc-table .row-check, #check-all { accent-color: var(--blue); cursor: pointer; }
.doc-table tbody tr.checked { background: #eafaf1; }
.doc-table tbody tr.checked:hover { background: #e1f5ea; }

/* sortable headers */
.doc-table th.sortable { cursor: pointer; user-select: none; }
.doc-table th.sortable:hover { color: var(--navy); }
.doc-table th .arrow { color: var(--blue); font-size: .8rem; }

.table-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow-x: auto;
  /* Force an ALWAYS-VISIBLE horizontal scrollbar when the table overflows so it's
     obvious it can scroll. scrollbar-* covers Firefox; the -webkit rules defeat the
     macOS/iOS overlay scrollbars that auto-hide. Only renders when content overflows. */
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--line);
}
.table-wrap::-webkit-scrollbar {
  height: 11px; -webkit-appearance: none;   /* -webkit-appearance:none = persistent, non-overlay bar on Mac */
}
.table-wrap::-webkit-scrollbar-track {
  background: var(--line); border-radius: 0 0 var(--radius) var(--radius);
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--muted); border-radius: 999px; border: 2px solid var(--line);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--navy); }
/* Size the table to its content (not a stretched 100%) so the columns stay
   clustered with uniform, tight gaps instead of spreading apart on wide screens.
   max-width keeps it within the card; it still shrinks/wraps as the window narrows. */
.doc-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: .92rem; }
.doc-table thead th {
  text-align: left; color: var(--muted); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 13px 16px;
  border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap;
}
.doc-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.doc-table tbody tr:last-child td { border-bottom: none; }
.doc-table tbody tr:hover { background: #f3f5f8; }
/* Default (wide screens): the document name is the flexible column that absorbs
   the slack; everything else sits on a single line. Account/Investment only start
   to wrap below ~1340px (see the @media block) — never on a roomy screen. */
.doc-table .col-name { min-width: 320px; }
.doc-table td.col-name .doc-name { white-space: normal; word-break: break-word; }
.doc-table .col-cat { white-space: nowrap; }
.doc-table .col-acct, .doc-table .col-inv { white-space: nowrap; }
.doc-table .col-date { white-space: nowrap; color: var(--muted); }
/* Tighten the gaps between the right-hand columns (cat↔acct, acct↔inv, inv↔date):
   inner edges use 8px instead of 16px. Document↔Category keeps its full 16+16. */
.doc-table .col-cat { padding-right: 8px; }
.doc-table .col-acct { padding-left: 8px; padding-right: 8px; }
.doc-table .col-inv  { padding-left: 8px; padding-right: 8px; }
.doc-table .col-date { padding-left: 8px; }
.doc-table .doc-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); padding: 0; }
.doc-table .doc-link:hover { color: var(--blue); text-decoration: none; }
.doc-table .doc-link:hover .doc-name { text-decoration: underline; }
.tag {
  display: inline-block; font-size: .78rem; font-weight: 600; color: var(--navy);
  background: #eef1f5; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.no-match { padding: 24px 16px; text-align: center; color: var(--muted); margin: 0; }

/* breadcrumb on folder views */
.crumbs { font-size: .9rem; margin-bottom: 6px; }
.crumbs a { color: var(--blue); }
.crumbs .sep { color: var(--line); margin: 0 7px; }
.crumbs .current { color: var(--muted); }

/* ---------- performance cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; border-left: 4px solid var(--gold);
}
.card-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.card-value { font-family: "Playfair Display", Georgia, serif; color: var(--navy); font-size: 1.7rem; font-weight: 700; margin-top: 6px; }

.positions { width: 100%; border-collapse: collapse; }
.positions th, .positions td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.positions th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.positions .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- states ---------- */
.alert {
  background: #fdf3e7; border: 1px solid #f0d9b5; color: #8a5a12;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;
}
.empty {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px; text-align: center; color: var(--ink);
}
.muted { color: var(--muted); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: #fff; }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 20px 24px;
  color: var(--muted); font-size: .85rem; display: flex; gap: 10px; flex-wrap: wrap;
}
.foot .sep { color: var(--line); }

@media (max-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .topbar-inner { gap: 16px; flex-wrap: wrap; }
  .account { margin-left: 0; }
}

/* ---------- documents table: progressive wrap (tablet/narrow-desktop) ----------
   As the window tightens below ~1340px the single-line table would start to overflow.
   Instead of scrolling, let Account/Investment wrap and drop the name column's
   width:100% so the shrink is shared — the long document name (biggest column) gives
   first, and Account/Investment stay on one line until space is genuinely tight.
   Below 1080px this hands off to the card layout. */
@media (max-width: 1340px) {
  .doc-table .col-name { width: auto; }
  .doc-table td.col-acct, .doc-table td.col-inv { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- mobile: documents table -> stacked cards ----------
   The table wraps Account/Investment as it narrows; its wrapped minimum is ~939px.
   With the 94vw content cap + page padding, that fits down to a ~1052px window, so
   below ~1080px the wrapped Investment can no longer shrink and the table reflows
   into cards — document name + checkbox on top, the remaining columns as label:value
   lines (data-label on the td). No horizontal scroll. */
@media (max-width: 1080px) {
  .table-wrap { overflow-x: visible; border: none; box-shadow: none; background: none; border-radius: 0; }
  .doc-table { display: block; width: 100%; font-size: .95rem; }
  .doc-table tbody { display: block; }
  .doc-table thead { display: none; }

  .doc-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px;
  }
  .doc-table tbody tr[hidden] { display: none; }   /* keep JS-filtered rows hidden (beats the flex above) */
  .doc-table tbody tr:hover { background: var(--card); }   /* no desktop row-hover on touch */
  .doc-table tbody tr.checked,
  .doc-table tbody tr.checked:hover { background: #eafaf1; }

  .doc-table tbody td { display: block; padding: 0; border: none; }
  .doc-table td.col-check { flex: 0 0 auto; width: auto; }
  .doc-table td.col-name { flex: 1 1 0; min-width: 0; }
  .doc-table td.col-name .doc-name { white-space: normal; word-break: break-word; font-weight: 600; }

  /* metadata columns: each on its own full-width line as "LABEL  value" */
  .doc-table td.col-cat,
  .doc-table td.col-acct,
  .doc-table td.col-inv,
  .doc-table td.col-date {
    flex: 0 0 100%; display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; font-size: .88rem; color: var(--ink); padding-top: 2px; white-space: normal;
  }
  .doc-table td.col-date { color: var(--muted); }
  .doc-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; color: var(--muted);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  }

  .filters { gap: 8px; }
  .ms-panel { max-width: calc(100vw - 32px); }   /* never overflow the viewport edge */
}

/* ---------- click-to-preview modal ---------- */
.doc-modal[hidden] { display: none; }
.doc-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.doc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, .62); }
.doc-modal-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(1000px, 100%); height: min(92vh, 100%);
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.doc-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card);
}
.doc-modal-name {
  font-weight: 600; color: var(--navy); font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-modal-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.doc-modal-btn {
  font-size: .85rem; color: var(--blue); text-decoration: none;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  cursor: pointer; white-space: nowrap;
}
.doc-modal-btn:hover { border-color: var(--blue); }
.doc-modal-close {
  font-size: 1rem; line-height: 1; color: var(--muted); background: none;
  border: none; cursor: pointer; padding: 6px 8px; border-radius: 7px;
}
.doc-modal-close:hover { color: var(--navy); background: #f3f5f8; }
.doc-modal-frame { flex: 1 1 auto; width: 100%; border: 0; background: #f6f7f9; }
body.modal-open { overflow: hidden; }