/* shared.css — ComplyGlobally design system. Every page (login, signup,
   app, review, calendar, portal, admin) pulls from these same tokens, so
   a token change here re-themes the whole product at once. Built around
   the ComplyGlobally brand teal (#34A9A1) — see --teal below, which is
   that exact color, not an approximation. */

:root {
  --brand: #34A9A1;
  --brand-dark: #278A83;

  --ink: #1B2A2E; --ink-soft: #5C6E72; --paper: #F5F8F8; --card: #FFFFFF;
  --rule: #E1E9E8; --rule-soft: #ECF2F1;
  --stamp-red: #D64545; --stamp-red-bg: #FBEAEA;
  --seal-gold: #C68A2E; --seal-gold-bg: #FBF1E1;
  --grey-dot: #98A6A5; --grey-bg: #F1F4F3;
  --teal: #34A9A1; --teal-bg: #E3F5F3;
  --mono: 'Inter', sans-serif; --sans: 'Inter', sans-serif; --serif: 'Plus Jakarta Sans', sans-serif;

  --radius: 10px; --radius-sm: 6px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(27,42,46,0.04), 0 4px 16px rgba(27,42,46,0.06);
  --shadow-sm: 0 1px 3px rgba(27,42,46,0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper);
  color: var(--ink); font-family: var(--sans); min-height: 100vh; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px 120px; }
.wrap.narrow { max-width: 460px; }

.topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule); padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto;
}
.brand { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.brand strong { color: var(--brand); font-weight: 800; }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 2px; }

.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color .12s;
}
.nav-links a:hover, .nav-links a.active { color: var(--brand); border-bottom-color: var(--brand); }
.nav-user { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.nav-user button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  background: none; border: 1px solid var(--rule); color: var(--ink-soft); padding: 6px 12px; cursor: pointer;
  border-radius: var(--radius-sm); transition: all .12s;
}
.nav-user button:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 640px) {
  .nav-links { display: none; }
}
/* Phone menu (added by public/js/notifications.js on pages with links). */
.menu-btn { display: none; }
@media (max-width: 640px) {
  .topbar .brand { white-space: nowrap; font-size: 13.5px; }
  .topbar .nav-user button { white-space: nowrap; }
  .topbar .nav-user #navUser, .topbar .nav-user > span:not(:only-child) { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--rule); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer;
  }
  .topbar.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--card);
    border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); padding: 6px 16px 10px; z-index: 40;
  }
  .topbar.nav-open .nav-links a { padding: 12px 2px; border-bottom: 1px solid var(--rule-soft); }
  .topbar.nav-open .nav-links a:last-child { border-bottom: 0; }
}

/* ---- two-column workspace layout (calendar.html, portal.html): main
   content on the left, a sticky sidebar (contact + chat) on the right.
   Falls back to a single stacked column below 980px — see the media
   query at the bottom of this file — so nothing here assumes a wide
   viewport is guaranteed. ---- */
.page-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.main-col { min-width: 0; } /* min-width:0 so long table cells can't force the grid track wider than intended */
.side-col { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 24px; }
.side-col .list-section { margin-top: 0; }
.side-col .contact-grid { grid-template-columns: 1fr; } /* two cards side-by-side never fits a 360px sidebar */

/* ---- responsive card grid for admin.html's client-company list ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

/* ---- cards / auth forms ---- */
.card { margin-top: 36px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.card-head { padding: 28px 32px 6px; }
.card-eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.card h1 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 6px; line-height: 1.25; letter-spacing: -0.01em; }
.card p.sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.55; max-width: 64ch; }
.card-body { padding: 4px 32px 32px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; }
.field.span2 { grid-column: 1 / -1; }
label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
/* font-size MUST be >= 16px: iOS Safari auto-zooms the whole page in
   when a focused input/select/textarea renders below 16px, and it does
   not reliably zoom back out on its own — this was the "page opens
   zoomed in" bug on every page (login, portal, admin, review, signup)
   that includes this stylesheet. 14.5px / 14px were both just under
   the threshold. */
input[type=text], input[type=date], input[type=email], input[type=password], input[type=number], select, textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; width: 100%; transition: border-color .12s;
}
textarea { font-family: var(--sans); font-size: 16px; resize: vertical; min-height: 60px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--teal-bg); }
select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235C6E72'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
select:disabled { color: var(--grey-dot); background: var(--grey-bg); }

.toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.toggle-row .switch { position: relative; width: 40px; height: 22px; }
.toggle-row .switch input { opacity: 0; width: 0; height: 0; }
.toggle-row .slider { position: absolute; inset: 0; background: var(--rule); cursor: pointer; transition: .15s; border-radius: 11px; }
.toggle-row .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; transition: .15s; border-radius: 50%; box-shadow: var(--shadow-sm); }
.toggle-row input:checked + .slider { background: var(--brand); }
.toggle-row input:checked + .slider::before { transform: translateX(18px); }
.toggle-label { font-size: 13.5px; color: var(--ink); }

.conditional-block { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--rule-soft); display: none; }
.conditional-block.visible { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }

.divider-label {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
}

.submit-row { margin-top: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.hint { font-size: 12.5px; color: var(--grey-dot); margin-right: auto; max-width: 40ch; }
.field-hint { font-size: 12px; color: var(--grey-dot); margin-top: 4px; display: block; }
.hint.err { color: var(--stamp-red); }

button.primary {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  background: var(--brand); color: #fff; border: none; padding: 12px 24px; cursor: pointer; transition: background .12s, transform .06s;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
button.primary:hover:not(:disabled) { background: var(--brand-dark); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.primary:disabled { background: #B7C4C2; cursor: wait; box-shadow: none; }

button.ghost {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  background: none; border: 1.5px solid var(--rule); color: var(--ink-soft); padding: 10px 18px; cursor: pointer;
  border-radius: var(--radius-sm); transition: all .12s;
}
button.ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

button.danger {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  background: none; border: 1.5px solid var(--stamp-red); color: var(--stamp-red); padding: 10px 18px; cursor: pointer;
  border-radius: var(--radius-sm); transition: all .12s;
}
button.danger:hover:not(:disabled) { background: var(--stamp-red-bg); }

.form-foot { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }

/* ---- status badges ---- */
.badge { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 4px 10px; display: inline-block; border-radius: 999px; }
.badge.pending_review { color: var(--seal-gold); background: var(--seal-gold-bg); }
.badge.approved { color: var(--brand-dark); background: var(--teal-bg); }
.badge.rejected { color: var(--stamp-red); background: var(--stamp-red-bg); }
.badge.cache, .badge.database { color: var(--ink-soft); background: var(--grey-bg); }
.badge.live, .badge.mixed { color: var(--ink-soft); background: var(--grey-bg); }

/* ---- calendars list / queue table ---- */
.list-section { margin-top: 46px; }
.section-title { font-family: var(--serif); font-weight: 700; font-size: 19px; margin-bottom: 4px; letter-spacing: -0.01em; }
.section-sub { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
.empty-state { padding: 40px 0; text-align: center; color: var(--ink-soft); font-size: 14.5px; border-top: 1px dashed var(--rule); }

table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 6px 10px 8px; border-bottom: 1px solid var(--rule);
}
table.list td { padding: 12px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.list tr:hover td { background: var(--teal-bg); }
table.list td.name { font-weight: 600; }
table.list td.meta { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
table.list a.open-link { font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--brand); white-space: nowrap; }
table.list a.open-link:hover { text-decoration: underline; }

.tabs { display: flex; gap: 4px; margin-top: 36px; border-bottom: 1px solid var(--rule); }
.tab-btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  background: none; border: none; padding: 10px 16px; cursor: pointer; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s;
}
.tab-btn:hover { color: var(--brand); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---- calendar detail / case view ---- */
.case { border-top: 3px solid var(--brand); padding: 30px 0 40px; margin-top: 30px; }
.case-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.case-title { font-family: var(--serif); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; }
.case-sub { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.case-summary { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.case-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

.cat-block { margin-top: 26px; }
.cat-title {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--teal-bg); display: inline-block; padding: 5px 12px; margin-bottom: 10px; border-radius: 999px;
}
table.cal { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cal th {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 6px 10px 8px; border-bottom: 1px solid var(--rule);
}
table.cal td { padding: 10px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.5; }
table.cal td.due { font-family: var(--sans); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
table.cal td.name { font-weight: 600; }
table.cal td.applies { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
table.cal td.edit-cell { width: 30px; text-align: right; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; position: relative; top: -1px; }
.dot.high { background: var(--brand); }
.dot.medium { background: var(--seal-gold); }
.dot.low { background: var(--stamp-red); }
.src-link { font-size: 11.5px; color: var(--brand); text-decoration: none; display: block; margin-top: 3px; }
.src-link:hover { text-decoration: underline; }
.edited-flag { font-family: var(--sans); font-size: 10px; font-weight: 700; color: var(--stamp-red); text-transform: uppercase; margin-left: 6px; }

.row-edit-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; background: none; border: 1px solid var(--rule);
  color: var(--ink-soft); padding: 4px 9px; cursor: pointer; border-radius: var(--radius-sm);
}
.row-edit-btn:hover { border-color: var(--brand); color: var(--brand); }

.edit-row td { background: var(--grey-bg); padding: 14px 10px; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.edit-grid .field.span2 { grid-column: 1 / -1; }
.edit-grid label { font-size: 11px; }
.edit-grid input, .edit-grid select, .edit-grid textarea { font-size: 16px; padding: 8px 10px; }
.edit-row-actions { margin-top: 12px; display: flex; gap: 8px; }
.edit-row-actions button {
  font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 7px 14px; cursor: pointer;
}

.legend { margin-top: 20px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); display: flex; gap: 18px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; }

.disclaimer {
  margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--rule-soft);
  font-size: 12.5px; color: var(--ink-soft); font-style: italic;
}

.review-panel { margin-top: 30px; padding: 24px 28px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.review-panel h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 0 0 12px; }

.loading-case { border-top: 3px solid var(--brand); padding: 30px 0; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.loading-case .dots::after { content: ''; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }
@media (prefers-reduced-motion: reduce) { .loading-case .dots::after { animation: none; content: '...'; } }

.error-case { border-top: 3px solid var(--stamp-red); padding: 20px 0; color: var(--stamp-red); font-size: 14px; font-family: var(--sans); }
.error-banner {
  margin-top: 24px; padding: 14px 18px; border: 1px solid var(--stamp-red); background: var(--stamp-red-bg);
  color: var(--stamp-red); font-family: var(--sans); font-size: 13px; border-radius: var(--radius-sm);
}

/* ---- contact panel (calendar.html staff side, portal.html client side) ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.contact-card { background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.contact-card-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 8px; }
.contact-card-row { font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.contact-card-row a { color: var(--brand); font-weight: 500; }

/* ---- document chips + upload control (shared by portal.html and the
   staff-side "Client Filing & Documents" workspace in calendar.html) ---- */
.doc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; margin: 4px 6px 4px 0; text-decoration: none; color: var(--ink); transition: border-color .12s; }
.doc-chip:hover { border-color: var(--brand); color: var(--brand); }
.upload-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--brand); }
.status-pill-cw { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 4px 10px; background: var(--grey-bg); color: var(--ink-soft); border-radius: 999px; white-space: nowrap; }

/* ---- chat (staff↔client messaging) ---- */
.chat-box { margin-top: 14px; border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.chat-thread { max-height: 360px; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 82%; display: flex; flex-direction: column; }
.chat-msg.from-staff { align-self: flex-start; align-items: flex-start; }
.chat-msg.from-client { align-self: flex-end; align-items: flex-end; }
.chat-msg-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
.chat-tag { color: var(--brand); font-weight: 600; }
.chat-msg-body { font-size: 13.5px; line-height: 1.5; background: var(--grey-bg); padding: 9px 14px; border-radius: 14px; }
.chat-msg.from-client .chat-msg-body { background: var(--teal); color: #fff; }
.chat-compose { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--rule-soft); align-items: flex-end; }
.chat-compose textarea { flex: 1; min-height: 42px; max-height: 140px; }
.chat-compose button.primary { padding: 10px 20px; white-space: nowrap; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--stamp-red); margin-left: 6px; vertical-align: middle; }

@media (max-width: 980px) {
  .page-grid { grid-template-columns: 1fr; }
  .side-col { position: static; }
}

@media (max-width: 720px) {
  .grid, .conditional-block.visible, .edit-grid { grid-template-columns: 1fr; }
  .card h1 { font-size: 22px; }
  table.cal { font-size: 12.5px; }
  table.cal th:nth-child(3), table.cal td:nth-child(3) { display: none; }
  table.list th:nth-child(3), table.list td:nth-child(3) { display: none; }
  .wrap { padding: 0 14px 100px; }
  .topbar { padding: 14px 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .chat-msg { max-width: 100%; }
}

/* ---- notification bell (public/js/notifications.js) ---- */
.nav-right { display: flex; align-items: center; gap: 14px; }
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card);
  color: var(--ink-soft); cursor: pointer; transition: border-color .12s, color .12s;
}
.bell-btn:hover, .bell-btn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.bell-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bell-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--stamp-red); color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--card);
}
.bell-count[hidden] { display: none; }
.bell-panel {
  position: absolute; right: 0; top: 44px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50;
}
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink); position: sticky; top: 0; background: var(--card); }
.bell-readall { background: none; border: none; color: var(--brand); font-size: 12.5px; cursor: pointer; padding: 0; }
.bell-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--rule-soft); padding: 11px 14px 11px 22px; cursor: pointer; font-family: var(--sans); position: relative;
}
.bell-item:hover { background: var(--paper); }
.bell-item.unread::before { content: ""; position: absolute; left: 9px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.bell-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.bell-item:not(.unread) .bell-title { font-weight: 500; }
.bell-body { font-size: 12.5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bell-meta { font-size: 11.5px; color: var(--grey-dot); }
.bell-empty { padding: 20px 14px; font-size: 13px; color: var(--ink-soft); }

/* ---- price labels, shared by portal + staff calendar ---- */
.price-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid var(--rule); color: var(--ink); background: var(--card); }
.price-tag.invoiced { border-color: var(--brand); color: var(--brand-dark); background: var(--teal-bg); }
.price-tag.included, .price-tag.quote { font-weight: 500; color: var(--ink-soft); }
.price-tag.paid { border-color: var(--brand); background: var(--brand); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Small phones: keep the top bar on one line */
@media (max-width: 480px) {
  .topbar .brand { font-size: 14px; }
  .nav-user #navUser, .nav-user > span:first-child { display: none; }
  .nav-right { gap: 8px; }
}