/* ============================================================
   Components — page furniture, forms, buttons, tables, pills,
   chips, cards, detail views. Token references only.
   ============================================================ */

/* ---------- Page furniture ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 28px; }
.head-actions { display: flex; gap: 10px; align-items: center; }

.muted { color: hsl(var(--text-400)); font-size: 13px; }
.req { color: hsl(var(--danger-100)); }
.empty { padding: 24px 0; text-align: center; color: hsl(var(--text-400)); }

.flash { padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.flash-success { background: hsl(var(--success-900)); color: hsl(var(--success-100)); border: 1px solid hsl(var(--success-100) / 0.35); }
.flash-error { background: hsl(var(--danger-900)); color: hsl(var(--danger-000)); border: 1px solid hsl(var(--danger-100) / 0.35); }

.card {
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 18px; }
.card h2:not(:first-child) { margin-top: 28px; }
.narrow { max-width: 440px; margin: 40px auto; }

/* ---------- Auth pages (login / 2FA / forgot password) ----------
   Frameless: no card, form sits on the page background. Fields are a
   subtle bg-000 fill with a hairline border; the shell in base.css
   centers the column under the lockup. */
.auth-page { text-align: center; }
.auth-page h1 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
}
.auth-sub { margin: 0 0 28px; font-size: 12.5px; color: hsl(var(--text-400)); }
.auth-form { text-align: left; }
.auth-form input:not([type="checkbox"]) {
  margin: 0 0 10px; padding: 12px 14px; font-size: 14.5px;
  background: hsl(var(--bg-000));
  border-color: hsl(var(--border) / 0.1);
}
.auth-form input:not([type="checkbox"]):hover { border-color: hsl(var(--border) / 0.2); }
.auth-form input:not([type="checkbox"]):focus { border-color: hsl(var(--accent-100)); }
.auth-form .inline-check { margin: 14px 0 0; font-size: 13px; color: hsl(var(--text-200)); }
.auth-row { display: flex; justify-content: flex-end; }
.auth-link { font-size: 12.5px; color: hsl(var(--text-400)); }
.auth-link:hover { color: hsl(var(--text-200)); }
.auth-submit.btn-block { margin: 20px 0 0; padding: 10px 16px; font-size: 14.5px; }
.auth-alt { margin: 22px 0 0; font-size: 13px; }
.auth-hint { margin: 22px 0 0; font-size: 12.5px; color: hsl(var(--text-400)); }

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 14px; font-weight: 500; font-size: 13px; color: hsl(var(--text-200)); }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 12px;
  border: 1px solid hsl(var(--border) / 0.2); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; font-size: 14px;
  background: hsl(var(--bg-100)); color: hsl(var(--text-100));
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: hsl(var(--accent-100));
  box-shadow: 0 0 0 3px hsl(var(--accent-100) / 0.33);
}
input[type="file"] { margin-top: 6px; font-weight: 400; color: hsl(var(--text-200)); }
textarea { resize: vertical; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid hsl(var(--border) / 0.2);
  background: hsl(var(--bg-000)); color: hsl(var(--text-100));
  font: inherit; font-weight: 500; font-size: 13.5px;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: hsl(var(--border) / 0.08); text-decoration: none; }
.btn-primary { background: hsl(var(--accent-100)); border-color: hsl(var(--accent-100)); color: #fff; }
.btn-primary:hover { background: hsl(var(--accent-000)); border-color: hsl(var(--accent-000)); }
html[data-mode="dark"] .btn-primary { color: hsl(226 50% 12%); }
.btn-danger { background: transparent; border-color: hsl(var(--danger-100) / 0.4); color: hsl(var(--danger-100)); }
.btn-danger:hover { background: hsl(var(--danger-900) / 0.5); }
.btn-success { background: hsl(var(--success-100)); border-color: hsl(var(--success-100)); color: #fff; }
html[data-mode="dark"] .btn-success { color: hsl(127 100% 8%); }
.btn-success:hover { filter: brightness(1.08); }
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: 8px; }
.linklike { background: none; border: none; color: hsl(var(--text-400)); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.linklike:hover { color: hsl(var(--text-100)); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { display: flex; gap: 12px; margin: 20px 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border) / 0.1); vertical-align: top; }
th { font-size: 12px; font-weight: 500; color: hsl(var(--text-400)); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: hsl(var(--border) / 0.04); }
.row-inactive td { opacity: 0.5; }
.wrap { white-space: pre-wrap; word-break: break-word; max-width: 320px; }
.actions-cell form { display: inline-block; margin-right: 10px; }
td a { text-decoration: underline; text-decoration-color: hsl(var(--border) / 0.3); text-underline-offset: 3px; }
td a:hover { text-decoration-color: hsl(var(--text-100)); }

/* ---------- Status pills ---------- */
.status {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; vertical-align: middle; white-space: nowrap;
}
.status-new { background: hsl(var(--info-900)); color: hsl(var(--info-100)); }
.status-needs_info { background: hsl(var(--warning-900)); color: hsl(var(--warning-100)); }
.status-in_progress { background: hsl(var(--purple-900)); color: hsl(var(--purple-100)); }
.status-quoted { background: hsl(var(--success-900)); color: hsl(var(--success-100)); }
.status-sent { background: hsl(var(--success-100)); color: #fff; }
html[data-mode="dark"] .status-sent { color: hsl(127 100% 8%); }
.status-cancelled { background: hsl(var(--border) / 0.12); color: hsl(var(--text-400)); }

/* ---------- PDF viewer overlay ---------- */
.pdfv-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: hsl(0 0% 0% / 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pdfv-overlay[hidden] { display: none; }
body.pdfv-open { overflow: hidden; }
.pdfv-panel {
  display: flex; flex-direction: column;
  width: min(1040px, 100%); height: 100%;
  background: hsl(var(--bg-100));
  border: 1px solid hsl(var(--border) / 0.15);
  border-radius: var(--radius);
  box-shadow: var(--shadow-flyout);
  overflow: hidden;
}
.pdfv-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px;
  background: hsl(var(--bg-000));
  border-bottom: 1px solid hsl(var(--border) / 0.1);
  flex-shrink: 0;
}
.pdfv-title {
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.pdfv-controls { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pdfv-controls .icon-btn { width: 28px; height: 28px; font-size: 15px; }
.pdfv-controls .ic { font-size: 14px; }
.pdfv-pagenum, .pdfv-zoomlevel { font-size: 12.5px; min-width: 44px; text-align: center; }
.pdfv-sep { width: 1px; height: 18px; background: hsl(var(--border) / 0.15); margin: 0 6px; }
.pdfv-stage {
  flex: 1; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px;
  background: hsl(var(--bg-200));
}
.pdfv-stage canvas {
  box-shadow: 0 2px 12px hsl(0 0% 0% / 0.25);
  border-radius: 4px;
  background: #fff;
  margin: auto;
}
.pdfv-loading { margin: auto; color: hsl(var(--text-400)); font-size: 14px; }
.pdfv-error { margin: auto; text-align: center; }

/* Hidden print surface: on Ctrl-free printing from the viewer, only the
   rendered pages reach paper. */
#pdfv-print { display: none; }
@media print {
  body.pdfv-open > *:not(#pdfv-print) { display: none !important; }
  body.pdfv-open #pdfv-print { display: block; }
  #pdfv-print canvas {
    display: block;
    width: 100%;
    height: auto;
    page-break-after: always;
  }
}

/* ---------- Drag-and-drop upload zones ---------- */
.dropzone-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.dropzone {
  margin-top: 6px;
  border: 1.5px dashed hsl(var(--border) / 0.25);
  border-radius: var(--radius-sm);
  background: hsl(var(--bg-100));
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: hsl(var(--border) / 0.4);
  outline: none;
}
.dropzone.drag-over {
  border-color: hsl(var(--accent-100));
  background: hsl(var(--accent-100) / 0.06);
}
.dropzone-prompt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: hsl(var(--text-200));
}
.dropzone-icon::before {
  content: "\e103";
  font-family: "Anthropicons"; font-weight: 433; font-size: 20px;
  font-feature-settings: "liga" 0;
  color: hsl(var(--text-400));
}
.dropzone-hint { font-size: 12px; }
.dropzone-files { list-style: none; margin: 0; padding: 0; }
.dropzone.has-files .dropzone-files { margin-top: 10px; }
.dropzone-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin-top: 4px;
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border) / 0.12);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.dropzone-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-remove {
  background: none; border: none; cursor: pointer;
  color: hsl(var(--text-400)); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.dropzone-remove:hover { color: hsl(var(--danger-100)); background: hsl(var(--danger-900) / 0.5); }
.dropzone-rejected {
  margin-top: 8px; font-size: 12.5px;
  color: hsl(var(--danger-100));
}

/* ---------- @mentions ---------- */
/* Live-highlight editor: transparent-text textarea over a synced backdrop
   that paints the same text with mentions in accent. Metrics must match the
   textarea exactly (font, padding, border box, wrapping). */
.mention-editor { position: relative; margin-top: 5px; }
.mention-editor textarea.mention-input {
  position: relative; margin-top: 0;
  background: transparent;
  color: transparent;
  caret-color: hsl(var(--text-100));
  z-index: 1;
}
.mention-editor textarea.mention-input::selection { background: hsl(var(--accent-100) / 0.28); }
.mention-backdrop {
  position: absolute; inset: 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: hsl(var(--bg-100));
  font: inherit; font-weight: 400; font-size: 14px; line-height: 1.5;
  color: hsl(var(--text-100));
  white-space: pre-wrap; word-wrap: break-word;
  overflow: hidden;
  z-index: 0;
}
.mention-backdrop .mention { padding: 0; }

.mention-menu {
  position: absolute; z-index: 40;
  min-width: 220px; margin-top: 2px;
  background: hsl(var(--bg-000)); border: 1px solid hsl(var(--border) / 0.15);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-menu);
  padding: 4px;
}
.mention-menu[hidden] { display: none; }
.msg-form label { position: relative; }
.mention-item {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border: none; background: none; cursor: pointer;
  border-radius: 6px; font: inherit; font-size: 13.5px; color: hsl(var(--text-100));
}
.mention-item:hover, .mention-active { background: hsl(var(--border) / 0.08); }
.mention {
  color: hsl(var(--accent-100)); font-weight: 600;
  background: hsl(var(--accent-100) / 0.08);
  border-radius: 4px; padding: 0 3px;
}

/* Account request statuses */
.status-acct-submitted { background: hsl(var(--info-900)); color: hsl(var(--info-100)); }
.status-acct-in_review { background: hsl(var(--purple-900)); color: hsl(var(--purple-100)); }
.status-acct-needs_info { background: hsl(var(--warning-900)); color: hsl(var(--warning-100)); }
.status-acct-set_up { background: hsl(var(--success-900)); color: hsl(var(--success-100)); }
.status-acct-rejected { background: hsl(var(--danger-900)); color: hsl(var(--danger-000)); }
.status-acct-cancelled { background: hsl(var(--border) / 0.12); color: hsl(var(--text-400)); }

/* ---------- Chips ---------- */
.chip {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border) / 0.2);
  background: hsl(var(--bg-000)); font-size: 13px; color: hsl(var(--text-200));
  transition: background 0.15s;
}
.chip:hover { text-decoration: none; background: hsl(var(--border) / 0.08); }
.chip-active { background: hsl(var(--text-100)); border-color: hsl(var(--text-100)); color: hsl(var(--bg-100)); }
.chip-active:hover { background: hsl(var(--text-100)); }
.chip .count { opacity: 0.7; font-size: 12px; }
.chip-stock { background: hsl(var(--info-900)); border-color: transparent; color: hsl(var(--info-100)); }
.chip-special { background: hsl(var(--warning-900)); border-color: transparent; color: hsl(var(--warning-100)); }
.status-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.search-form { display: flex; gap: 8px; }
.search-form input { margin-top: 0; width: 240px; }

/* ---------- Role tags ---------- */
.role-tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px;
  font-weight: 500; vertical-align: middle;
}
.role-sales { background: hsl(var(--info-900)); color: hsl(var(--info-100)); }
.role-inside { background: hsl(var(--success-900)); color: hsl(var(--success-100)); }
.role-admin { background: hsl(var(--border) / 0.12); color: hsl(var(--text-200)); }
.role-distributor { background: hsl(var(--purple-900)); color: hsl(var(--purple-100)); }

/* ---------- Attention list ---------- */
.attention { border-left: 3px solid hsl(var(--accent-100)); }
.attention h2::before {
  content: "●"; color: hsl(var(--accent-100)); font-size: 10px;
  vertical-align: 2px; margin-right: 8px;
}
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { padding: 9px 0; border-bottom: 1px solid hsl(var(--border) / 0.1); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.attention-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- Request detail ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
/* Grid items default to min-width auto — wide tables would stretch the track
   past the viewport instead of scrolling inside .table-wrap. */
.detail-grid > * { min-width: 0; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.kv div { display: flex; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.kv dt { width: 150px; flex-shrink: 0; color: hsl(var(--text-400)); font-size: 13px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.background-text {
  white-space: pre-wrap; word-break: break-word;
  background: hsl(var(--bg-100)); border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--radius-sm); padding: 14px; font: inherit; font-size: 14px;
  max-height: 420px; overflow-y: auto;
}

.thread { list-style: none; margin: 0 0 20px; padding: 0; }
.msg {
  border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 10px; background: hsl(var(--bg-000));
}
/* Engineering comments (drawing/family/customer/file discussion) nest <p>
   tags directly in .msg rather than in a .msg-body div; drop the last one's
   bottom margin so the card doesn't end with extra whitespace. */
.msg p:last-child { margin-bottom: 0; }
.msg-role-inside { background: hsl(var(--bg-100)); }
.msg-role-sales { background: hsl(var(--bg-000)); }
.msg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-form-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.eng-check { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; margin-right: 8px; }
.big-check { font-weight: 500; margin: 12px 0; }

.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li { padding: 6px 0; }
.attach-list a { text-decoration: underline; text-decoration-color: hsl(var(--border) / 0.3); text-underline-offset: 3px; }

.input-narrow { max-width: 100px; }

.quote-card { border-left: 3px solid hsl(var(--success-100)); }
.sent-note { font-weight: 500; }
.sent-form { border-top: 1px solid hsl(var(--border) / 0.1); margin-top: 12px; padding-top: 4px; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { padding: 8px 0 8px 14px; border-left: 2px solid hsl(var(--border) / 0.15); margin-left: 4px; }
.tl-action { font-weight: 600; text-transform: capitalize; margin-right: 6px; }
.tl-sent, .tl-quote_uploaded { color: hsl(var(--success-100)); }
.tl-status { color: hsl(var(--warning-100)); }

/* ---------- 2FA / misc ---------- */
.backup-codes {
  list-style: none; margin: 16px 0; padding: 16px;
  background: hsl(var(--bg-100)); border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  columns: 2;
}
.backup-codes li { padding: 4px 0; }
.backup-codes code { font-size: 15px; }
.setup-steps li { margin-bottom: 8px; }
details summary { cursor: pointer; }

/* QR codes and other data-URI images need a light backing to stay scannable */
img[src^="data:image"] { background: #fff; padding: 8px; border-radius: var(--radius-sm); }

.line-item {
  border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  margin-bottom: 14px; padding: 12px 16px; background: hsl(var(--bg-000));
}
.line-item legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: hsl(var(--text-200)); }
.line-item .remove-line { color: hsl(var(--danger-100)); margin-left: 8px; }

/* ---------- Spacing utilities (replacing CSP-blocked inline styles) ---------- */
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-24 { margin-top: 24px; }
.center { text-align: center; }

/* ---------- Priority pills ---------- */
.prio {
  display: inline-block; padding: 1px 9px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 500; vertical-align: middle; white-space: nowrap;
}
.prio-normal { background: hsl(var(--border) / 0.08); color: hsl(var(--text-400)); }
.prio-high { background: hsl(var(--warning-900)); color: hsl(var(--warning-100)); }
.prio-rush { background: hsl(var(--danger-900)); color: hsl(var(--danger-000)); }
.overdue { color: hsl(var(--danger-100)); font-weight: 500; }

/* ---------- Compact inline controls (assignee/priority rows) ---------- */
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }
.inline-form .select-compact {
  display: inline-block; width: auto; margin: 0; padding: 3px 8px; font-size: 12.5px;
}
.btn-compact { padding: 3px 10px; font-size: 12.5px; }
.avatar-xs { width: 20px; height: 20px; font-size: 9px; vertical-align: -5px; margin-right: 2px; }

/* ---------- Segmented view toggle (Table | Board) ---------- */
.seg-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: hsl(var(--bg-200)); border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--radius-full);
}
.seg-item {
  padding: 4px 14px; border-radius: var(--radius-full);
  font-size: 13px; color: hsl(var(--text-400));
}
.seg-item:hover { text-decoration: none; color: hsl(var(--text-100)); }
.seg-active {
  background: hsl(var(--bg-000)); color: hsl(var(--text-100)); font-weight: 500;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.12);
}

/* App switcher (Quotes | Engineering) — full-width segmented toggle at the top
   of the sidebar, so the two portals read as separate apps you switch between. */
.app-switch { display: flex; width: 100%; margin: 0 0 14px; }
.app-switch .seg-item {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 8px; white-space: nowrap;
}
.app-switch .seg-item .ic { font-size: 15px; }

.assignee-chips { margin-bottom: 16px; }

/* ---------- Kanban board ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr)) 150px;
  gap: 12px; align-items: start;
  overflow-x: auto;
}
.board-col {
  background: hsl(var(--bg-100));
  border: 1px solid hsl(var(--border) / 0.08);
  border-radius: var(--radius);
  padding: 8px;
  min-height: 220px;
}
.board-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 10px;
}
.board-col-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.board-card {
  display: block;
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border) / 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  cursor: grab;
}
.board-card:hover { text-decoration: none; border-color: hsl(var(--border) / 0.25); }
.board-card.dragging { opacity: 0.5; cursor: grabbing; }
.board-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.board-card-title { font-size: 13.5px; color: hsl(var(--text-200)); margin: 3px 0 6px; }
.board-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.board-col.drag-over {
  border-color: hsl(var(--accent-100) / 0.6);
  background: hsl(var(--accent-100) / 0.05);
}
.board-col-terminal { display: flex; flex-direction: column; gap: 8px; min-height: 0; background: none; border: none; padding: 0; }
.board-tile {
  display: flex; align-items: center; justify-content: space-between;
  background: hsl(var(--bg-100));
  border: 1px solid hsl(var(--border) / 0.08);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.board-tile:hover { text-decoration: none; border-color: hsl(var(--border) / 0.2); }

/* ---------- Notification bell ---------- */
.sidebar-head-actions { display: inline-flex; align-items: center; gap: 2px; }
.bell { position: relative; display: inline-flex; }
.bell .icon-btn { position: relative; }
.bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: hsl(var(--danger-100)); color: #fff;
  font-size: 9.5px; font-weight: 600; line-height: 15px; text-align: center;
}
.bell-menu {
  position: absolute; top: calc(100% + 6px); left: -80px;
  width: 320px; max-height: 420px; overflow-y: auto;
  background: hsl(var(--bg-000)); border: 1px solid hsl(var(--border) / 0.15);
  border-radius: var(--radius); box-shadow: var(--shadow-menu);
  padding: 6px; z-index: 80;
}
.bell-menu[hidden] { display: none; }
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; font-size: 13px; font-weight: 600;
}
.bell-item { align-items: flex-start; }
.bell-item .bell-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  background: hsl(var(--accent-100));
}
.bell-item.bell-read { opacity: 0.62; padding-left: 27px; }
.bell-body { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.bell-body .muted { font-size: 11.5px; }

@media (max-width: 860px) {
  .board { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .board-col-terminal { grid-column: span 2; flex-direction: row; }

  /* Detail pages: stack labels above values so nothing fights for width */
  .kv div { flex-direction: column; gap: 2px; }
  .kv dt { width: auto; }
  .inline-form { margin-left: 0; }

  /* PDF viewer: use the whole screen, let the toolbar wrap */
  .pdfv-overlay { padding: 6px; }
  .pdfv-toolbar { flex-wrap: wrap; row-gap: 4px; }
  .pdfv-title { flex: 1 1 100%; }
  .pdfv-controls { flex-wrap: wrap; row-gap: 4px; width: 100%; justify-content: flex-end; }
  .pdfv-stage { padding: 10px; }

  .search-form { width: 100%; }
  .search-form input { width: 100%; flex: 1; }
  .head-actions { width: 100%; }
}
@media (max-width: 480px) {
  .board { grid-template-columns: 1fr; }
  .board-col-terminal { grid-column: span 1; }
}

/* Disk-usage meter on the admin Users page */
progress.usage-bar {
  display: block; width: min(360px, 100%); height: 8px; margin-top: 8px;
  appearance: none; -webkit-appearance: none; border: 0; overflow: hidden;
  border-radius: 999px; background: hsl(var(--border) / 0.3);
}
progress.usage-bar::-webkit-progress-bar { background: hsl(var(--border) / 0.3); border-radius: 999px; }
progress.usage-bar::-webkit-progress-value { background: hsl(var(--accent-100)); border-radius: 999px; }
progress.usage-bar::-moz-progress-bar { background: hsl(var(--accent-100)); border-radius: 999px; }

/* ---------- Engineering PDF frame (file page viewer) ---------- */
.eng-pdf-frame { display: block; width: 100%; height: 75vh; border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm); }