/* The Hive Cañon City — Operations Dashboard
   Brand: #030303 black · #ECC519 honey · #8601AF purple · #383F48 slate
   Dark mode is Bootstrap 5.3's data-bs-theme, set per user (auto / light / dark). */

:root {
  --hive-black: #030303;
  --hive-honey: #ECC519;
  --hive-honey-dark: #c9a60c;
  --hive-purple: #8601AF;
  --hive-slate: #383F48;
  --sidebar-w: 236px;
  /* Fonts are self-hosted in assets/fonts (assets/css/fonts.css). */
  --hive-font-title: "Kanit", "Poppins", system-ui, sans-serif;
  --hive-font-num: "Chivo Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-link-color: #6c0190;
  --bs-link-color-rgb: 108, 1, 144;
  --bs-link-hover-color: #8601AF;
  --bs-link-hover-color-rgb: 134, 1, 175;
  --app-bg: #f4f5f7;
  --ie-hover: rgba(236, 197, 25, .18);
}
/* Page and card titles: Kanit, uppercase. Subtext and controls inside a card header stay in Poppins. */
h1, .card-header { font-family: var(--hive-font-title); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-weight: 600; }
.card-header .text-body-secondary, .card-header .text-none, .card-header .btn,
.card-header .form-control, .card-header .form-select { font-family: var(--bs-body-font-family); }

/* Numbers: Chivo Mono so digits line up. Right-aligned table cells hold amounts and counts; a
   right-aligned cell spanning columns is a label ("Total"). Use .num for any other number. */
.num, .stat-value, .aging-amount, .table td.text-end:not([colspan]) { font-family: var(--hive-font-num); }
.table td.text-end .btn { font-family: var(--bs-body-font-family); }

/* Badges: pill shape, all caps. Colors follow meaning: success = done/good, warning = needs action
   or demo data, danger = failed/overdue, info = in progress or informational, primary = open/staff,
   hive = admin/members/default, secondary/light = ended or neutral, comped = $0.
   Chivo Mono is already wide, so it gets less letter spacing than Poppins caps would. */
.badge {
  --bs-badge-border-radius: var(--bs-border-radius-pill);
  --bs-badge-padding-x: .75em; --bs-badge-padding-y: .4em;
  --bs-badge-font-weight: 600;
  font-family: var(--hive-font-num);
  text-transform: uppercase; letter-spacing: .02em;
}
/* Center the capitals exactly: trim the line box to cap height, so equal padding top and bottom
   puts the letters in the middle. Without trimming, the font's room for descenders plus pixel
   rounding can leave the text a pixel high. Padding keeps the pill the same height as before
   (1em line + 2 × .4em = .686em caps + 2 × .557em). Browsers without text-box keep the rule above. */
@supports (text-box: trim-both cap alphabetic) {
  .badge { text-box: trim-both cap alphabetic; --bs-badge-padding-y: .557em; }
}

/* Action icons: one shade of purple per kind of action; the eye (View) stays .text-hive.
   All pass 3:1 against white, the hover row and the dark background. Disabled icons stay gray. */
:root { --act-contact: #4b1d6b; --act-person: #6c0190; --act-add: #7b3fa0; --act-web: #9a45c4; --act-edit: #b05ad6; }
[data-bs-theme="dark"] { --act-contact: #e3c4f5; --act-person: #d79cf0; --act-add: #c9a2e6; --act-web: #b98ae0; --act-edit: #a879d6; }
.act-contact { color: var(--act-contact); } .act-person { color: var(--act-person); } .act-add { color: var(--act-add); }
.act-web { color: var(--act-web); } .act-edit { color: var(--act-edit); }
:is(.act-contact, .act-person, .act-add, .act-web, .act-edit):hover { color: var(--hive-honey-dark); }
:is(.act-contact, .act-person, .act-add, .act-web, .act-edit, .text-hive) .fa-duotone { --fa-secondary-opacity: .6; }

/* Row hover for list-group cards, matching .table-hover (same tint Bootstrap uses, adapts to dark mode). */
.list-hover > .list-group-item:hover { background-color: rgba(var(--bs-emphasis-color-rgb), .075); }

/* Light mode only: Bootstrap's warning text (#664d03) reads as olive on white. This amber keeps
   AA contrast on white (5.4:1), the row-hover gray (4.6:1) and .alert-warning (4.9:1). Dark mode
   keeps Bootstrap's #ffda6a. */
:root:not([data-bs-theme="dark"]) {
  --bs-warning-text-emphasis: #9a5b00;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #16191d;
  --bs-body-bg-rgb: 22, 25, 29;
  --bs-tertiary-bg: #1e2227;
  --bs-secondary-bg: #262b31;
  --bs-border-color: #343a42;
  --bs-link-color: #d79cf0;
  --bs-link-color-rgb: 215, 156, 240;
  --bs-link-hover-color: #ECC519;
  --bs-link-hover-color-rgb: 236, 197, 25;
  --app-bg: #101215;
  --ie-hover: rgba(236, 197, 25, .12);
}

body { background: var(--app-bg); font-size: .925rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-hive { color: var(--hive-purple) !important; }
[data-bs-theme="dark"] .text-hive { color: var(--hive-honey) !important; }

/* ---- Buttons & badges ------------------------------------------------------------- */
.btn-hive {
  --bs-btn-color: var(--hive-black); --bs-btn-bg: var(--hive-honey); --bs-btn-border-color: var(--hive-honey);
  --bs-btn-hover-color: var(--hive-black); --bs-btn-hover-bg: var(--hive-honey-dark); --bs-btn-hover-border-color: var(--hive-honey-dark);
  --bs-btn-active-color: var(--hive-black); --bs-btn-active-bg: var(--hive-honey-dark); --bs-btn-active-border-color: var(--hive-honey-dark);
  --bs-btn-disabled-color: var(--hive-black); --bs-btn-disabled-bg: var(--hive-honey); --bs-btn-disabled-border-color: var(--hive-honey);
  --bs-btn-focus-shadow-rgb: 236, 197, 25;
  font-weight: 600;
}
/* Hive purple, so brand badges (Admin, Members, Default) never look like a yellow warning. */
.text-bg-hive { color: #fff !important; background-color: var(--hive-purple) !important; }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: var(--hive-slate); --bs-btn-border-color: var(--hive-slate); --bs-btn-hover-bg: #4a525d; --bs-btn-hover-border-color: #4a525d; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #dee2e6; --bs-btn-border-color: #6c757d; --bs-btn-active-bg: var(--hive-slate); --bs-btn-active-border-color: var(--hive-slate); --bs-btn-hover-bg: var(--hive-slate); }
[data-bs-theme="dark"] .badge.text-bg-light { color: #dee2e6 !important; background-color: #343a42 !important; }
/* Comped: $0 rent or invoices. Light blue; Bootstrap's subtle info colors adapt to dark mode. */
.text-bg-comped { color: var(--bs-info-text-emphasis) !important; background-color: var(--bs-info-bg-subtle) !important; }

/* ---- Shell ------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040;
  background: var(--hive-black); color: #c9ccd1; display: flex; flex-direction: column;
  border-right: 3px solid var(--hive-honey);
  transition: transform .2s ease;
}
.sidebar-brand { display: block; padding: 18px 20px 14px; }
.sidebar-brand img { display: block; height: auto; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 2px;
  color: #c9ccd1; border-radius: 6px; font-weight: 500;
}
.sidebar-link i { --fa-primary-color: var(--hive-honey); --fa-secondary-color: #fff; --fa-secondary-opacity: .35; font-size: 1.05rem; }
.sidebar-link:hover { color: #fff; background: #17191c; text-decoration: none; }
.sidebar-link.active { color: var(--hive-black); background: var(--hive-honey); }
.sidebar-link.active i { --fa-primary-color: var(--hive-black); --fa-secondary-color: var(--hive-black); --fa-secondary-opacity: .45; }
.sidebar-foot { padding: 14px 20px; font-size: .75rem; color: #7a7f87; letter-spacing: .04em; text-transform: uppercase; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 20px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color);
}
.topbar-search { position: relative; flex: 1; max-width: 560px; margin-left: auto; }   /* search, theme and user sit at the right end */
.topbar-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.topbar-search .form-control { padding-left: 36px; background: var(--bs-tertiary-bg); border-color: transparent; }
.topbar-search .form-control:focus { background: var(--bs-body-bg); border-color: var(--hive-honey); box-shadow: 0 0 0 .2rem rgba(236, 197, 25, .25); }
.search-results { width: 100%; max-height: 420px; overflow-y: auto; }
.search-results .dropdown-item { white-space: normal; }
.search-results .dropdown-item.active, .search-results .dropdown-item:active { background: var(--hive-honey); color: var(--hive-black); }
.topbar-icon, .topbar-user, .topbar-toggle { color: var(--bs-body-color); text-decoration: none; }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.topbar-user:hover, .topbar-icon:hover { color: var(--hive-purple); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--hive-purple); color: #fff; font-weight: 700; font-size: .85rem;
  line-height: 1; padding-top: .12em;   /* Poppins sits high in its line box; nudge the letter to the middle */
}
@supports (text-box: trim-both cap alphabetic) {
  .avatar { padding-top: 0; text-box: trim-both cap alphabetic; }   /* exact: center the capital itself */
}
.content { padding: 24px; flex: 1; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
  .main { margin-left: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; }
}

/* ---- Page furniture -------------------------------------------------------------- */
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 2px 0 4px; }
.card { border-color: var(--bs-border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.card-header {
  background: var(--hive-black); color: var(--hive-honey); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em;
  padding: .7rem 1rem; border-bottom: 2px solid var(--hive-honey);
}
.card-header i { --fa-primary-color: var(--hive-honey); --fa-secondary-color: #fff; --fa-secondary-opacity: .4; }
.card-header .text-body-secondary { color: #a9adb3 !important; text-transform: none; letter-spacing: 0; }
[data-bs-theme="dark"] .card-header { background: #0b0c0e; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.table { --bs-table-bg: transparent; }
.row-link { cursor: pointer; }
.filter-bar .form-label { margin-bottom: .2rem; color: var(--bs-secondary-color); }

.stat { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--hive-honey); border-radius: var(--bs-border-radius); padding: 14px 16px; height: 100%; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.stat-value small { font-size: .95rem; color: var(--bs-secondary-color); font-weight: 500; }

.kv { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bs-border-color); }
.kv:last-child { border-bottom: 0; }
.kv-label { color: var(--bs-secondary-color); font-weight: 600; font-size: .85rem; }
.kv-value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .kv { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Inline editing --------------------------------------------------------------- */
.ie {
  cursor: pointer; border-bottom: 1px dashed rgba(134, 1, 175, .45); padding: 1px 3px; margin: -1px -3px;
  border-radius: 3px; transition: background .12s;
}
[data-bs-theme="dark"] .ie { border-bottom-color: rgba(236, 197, 25, .45); }
.ie:hover, .ie:focus { background: var(--ie-hover); outline: none; }
.ie.ie-block { display: block; min-height: 1.5em; white-space: pre-wrap; }
.ie.ie-saving { opacity: .55; pointer-events: none; }
.ie.ie-saved { animation: ie-flash 1.2s ease; }
@keyframes ie-flash { 0% { background: rgba(25, 135, 84, .35); } 100% { background: transparent; } }
.ie-editor { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; }
.ie-editor .form-control, .ie-editor .form-select { min-width: 120px; }
.ie-editor textarea.form-control { min-width: 260px; min-height: 110px; }
.ie-editor.ie-editor-block { display: flex; flex-direction: column; align-items: stretch; }
.ie-editor .ie-hint { font-size: .72rem; color: var(--bs-secondary-color); }
.text-end .ie-editor { justify-content: flex-end; }

/* ---- Auth pages ------------------------------------------------------------------- */
.auth-body {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px;
  background: var(--hive-black) radial-gradient(circle at 20% 10%, rgba(236, 197, 25, .12), transparent 45%);
}
.auth-card { width: 100%; max-width: 400px; background: var(--bs-body-bg); border-radius: 10px; padding: 32px 28px; border-top: 4px solid var(--hive-honey); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.auth-foot { color: #8a8f96; font-size: .8rem; margin-top: 18px; text-align: center; }

.activity code { font-size: .8em; }

/* ---- Billing ---------------------------------------------------------------------- */
.stat-danger { border-left-color: #dc3545; }
.stat-success { border-left-color: #198754; }
.card-header .text-none { text-transform: none; letter-spacing: 0; font-weight: 500; }
.aging-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 12px; align-items: center; padding: 4px 0; }
.aging-label { font-size: .85rem; color: var(--bs-secondary-color); font-weight: 600; }
.aging-bar { height: 12px; background: var(--bs-tertiary-bg); border-radius: 6px; overflow: hidden; }
.aging-bar span { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.aging-bar .ok { background: #198754; } .aging-bar .warn { background: var(--hive-honey); } .aging-bar .bad { background: #dc3545; }
.aging-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 575.98px) { .aging-row { grid-template-columns: 1fr 90px; } .aging-bar { grid-column: 1 / -1; grid-row: 2; } }

.kanban { display: grid; grid-template-columns: repeat(6, minmax(160px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 10px; min-height: 160px; display: flex; flex-direction: column; }
.kanban-col[data-stage="hold"] { border-style: dashed; }
.kanban-col.drop-ok { outline: 2px solid var(--hive-honey); outline-offset: -2px; }
.kanban-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.kanban-sub { font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: 8px; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; margin-top: 6px; }
.kanban-card { display: flex; flex-direction: column; gap: 2px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-left: 3px solid var(--hive-purple); border-radius: 6px; padding: 8px 10px; color: var(--bs-body-color); font-size: .85rem; }
.kanban-card { cursor: pointer; user-select: none; }
.kanban-card:hover, .kanban-card:focus { border-color: var(--hive-honey); outline: none; }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging { opacity: .5; }
.kanban-col[data-stage="cutoff"] .kanban-card, .kanban-col[data-stage="late_fee"] .kanban-card { border-left-color: #dc3545; }
.kanban-col[data-stage="hold"] .kanban-card { border-left-color: #6c757d; }

.pay-summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 14px; }
.pay-summary dt { font-weight: 500; } .pay-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pay-summary [hidden] { display: none; }

/* ---- Calendars ------------------------------------------------------------------- */
#calendar { --fc-border-color: var(--bs-border-color); --fc-page-bg-color: var(--bs-body-bg); --fc-neutral-bg-color: var(--bs-tertiary-bg);
  --fc-today-bg-color: rgba(236, 197, 25, .12); --fc-button-bg-color: #030303; --fc-button-border-color: #030303;
  --fc-button-hover-bg-color: #383F48; --fc-button-active-bg-color: #8601AF; --fc-button-active-border-color: #8601AF; font-size: .85rem; }
#calendar .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; }
#calendar .fc-event { cursor: pointer; }
#calendar .ev-held { opacity: .6; border-style: dashed !important; }
#calendar .ev-review { outline: 2px solid var(--hive-honey); }
.public-body { background: var(--bs-body-bg); }
.public-head { display: flex; align-items: center; gap: 16px; background: #030303; border-bottom: 3px solid var(--hive-honey); padding: 12px 20px; }
.public-head-title { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.public-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 32px; }
.public-main.embed { padding: 8px; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 500; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.slot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-list .busy { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 4px; padding: 2px 8px; font-size: .8rem; color: var(--bs-secondary-color); }

/* ---- CMS editor (TinyMCE 4) inside the dashboard ---------------------------------- */
.mce-tinymce { border-radius: var(--bs-border-radius); overflow: hidden; }
.mce-fullscreen { z-index: 2000 !important; }
.listing-preview img { max-width: 100%; height: auto; }

/* ---- Searchable pickers (select[data-combobox], app.js) ------------------------- */
.combo { position: relative; }
.combo-list { width: 100%; max-height: 300px; overflow-y: auto; margin-top: 2px; }
.combo-list .dropdown-item { cursor: pointer; white-space: normal; }
.combo-list .dropdown-item strong { font-weight: 700; }
.combo-list .dropdown-item.active, .combo-list .dropdown-item:active { background: var(--hive-honey); color: var(--hive-black); }

/* ---- Space photos (templates/spaces/view.php, app.js) ----------------------------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; }
.photo-tile { position: relative; border: 1px solid var(--bs-border-color); border-radius: 6px; overflow: hidden; background: var(--bs-tertiary-bg); aspect-ratio: 1 / 1; }
.photo-tile[draggable="true"] { cursor: grab; }
.photo-tile.dragging { opacity: .4; outline: 2px dashed var(--hive-honey); }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-first { position: absolute; top: 6px; left: 6px; }
.photo-tools { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.photo-tools form { margin: 0; }
.photo-tile:hover .photo-tools, .photo-tile:focus-within .photo-tools { opacity: 1; }
@media (hover: none) { .photo-tools { opacity: 1; } }
.photo-add { max-width: 340px; }
.photo-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.photo-frame [hidden] { display: none !important; }
.photo-drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
  border: 2px dashed var(--bs-border-color); border-radius: 6px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.photo-drop:hover, .photo-drop.is-over { border-color: var(--hive-honey); color: var(--bs-body-color); }
.photo-drop:focus-within { outline: 2px solid var(--hive-honey); outline-offset: 2px; }
.photo-drop i { --fa-primary-color: var(--hive-honey); --fa-secondary-color: currentColor; }
.photo-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; }
.photo-crop { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #000; cursor: grab; touch-action: none; user-select: none; }
.photo-crop.is-dragging { cursor: grabbing; }
.photo-crop:focus-visible { outline: 2px solid var(--hive-honey); outline-offset: 2px; }
.photo-crop img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.photo-crop-tools .form-range { flex: 1 1 auto; }

/* ---- Documentation ------------------------------------------------------------------- */
.doc-search { position: relative; max-width: 560px; }
.doc-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.doc-search .form-control { padding-left: 36px; }
.doc-group-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; color: var(--hive-purple); }
[data-bs-theme="dark"] .doc-group-title { color: var(--hive-honey); }
.doc-group-title i { --fa-primary-color: var(--hive-honey); --fa-secondary-color: var(--bs-body-color); --fa-secondary-opacity: .4; }
.doc-card { color: var(--bs-body-color); text-decoration: none; transition: border-color .15s; }
.doc-card:hover, .doc-card:focus { border-color: var(--hive-honey); color: var(--bs-body-color); text-decoration: none; }
.doc-toc .list-group-item.active { background: var(--hive-honey); border-color: var(--hive-honey); color: var(--hive-black); }
.doc-article { line-height: 1.6; }
.doc-article > h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; }
.doc-article > h2 { font-size: 1.2rem; font-weight: 700; margin: 32px 0 10px; }
.doc-article > h3 { font-size: 1rem; font-weight: 700; margin: 22px 0 8px; }
.doc-article > h2, .doc-article > h3 { color: var(--hive-purple); }
[data-bs-theme="dark"] .doc-article > h2, [data-bs-theme="dark"] .doc-article > h3 { color: var(--hive-honey); }
.doc-article .lead { font-size: 1.05rem; }
.doc-article kbd { font-size: .8em; }

/* A mockup: real dashboard markup in a window frame, for looking at only (the body is inert). */
.doc-mock { margin: 18px 0 22px; border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; background: var(--bs-body-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.doc-mock-bar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); font-size: .75rem; color: var(--bs-secondary-color); }
.doc-mock-bar::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hive-honey); box-shadow: 14px 0 0 var(--bs-border-color), 28px 0 0 var(--bs-border-color); margin-right: 34px; }
.doc-mock-body { padding: 16px; line-height: 1.5; user-select: none; }
.doc-mock-body .card { box-shadow: none; }
.doc-mock figcaption { padding: 8px 14px; border-top: 1px solid var(--bs-border-color); font-size: .8rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.doc-mock .kanban { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; }
.doc-mock .table { font-size: .875rem; }
.doc-mock .table > thead th { white-space: normal; }
@media (max-width: 575.98px) { .doc-mock-body { padding: 10px; } .doc-mock .table { font-size: .78rem; } .doc-mock .table > :not(caption) > * > * { padding: .3rem .35rem; } }
.doc-mock .sidebar-mock { background: #030303; border-radius: 8px; padding: 8px; width: 210px; }
.doc-mock .sidebar-mock .sidebar-link { margin: 0; }

/* Numbered pins inside a mockup match the numbered list under it. */
.doc-pin { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hive-purple); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; vertical-align: middle; flex: none; box-shadow: 0 0 0 2px var(--bs-body-bg); }
[data-bs-theme="dark"] .doc-pin { background: var(--hive-honey); color: var(--hive-black); }
.doc-steps { counter-reset: step; list-style: none; padding-left: 0; }
.doc-steps > li { counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 10px; }
.doc-steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--hive-purple); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
[data-bs-theme="dark"] .doc-steps > li::before { background: var(--hive-honey); color: var(--hive-black); }

.doc-tip { border-left: 4px solid var(--hive-honey); background: var(--bs-tertiary-bg); border-radius: 6px; padding: 10px 14px; margin: 16px 0; }
.doc-tip.doc-warn { border-left-color: #dc3545; }
.doc-tip > :last-child { margin-bottom: 0; }

/* Form labels: Hive purple in light mode, honey in dark. List filter labels stay gray. */
.form-label { color: var(--hive-purple); }
[data-bs-theme="dark"] .form-label { color: var(--hive-honey); }
.filter-bar .form-label, [data-bs-theme="dark"] .filter-bar .form-label { color: var(--bs-secondary-color); }

/* Live password checklist (partials/password-rules.php + js/password-rules.js). Gray until they type. */
.pw-rules { color: var(--bs-secondary-color); margin-top: .65rem; }
.pw-rules li { padding-left: 1.35em; position: relative; transition: color .15s; }
.pw-rules li::before { content: "\25CB"; position: absolute; left: 0; width: 1em; text-align: center; font-weight: 700; }
.pw-rules li.is-met { color: var(--bs-success-text-emphasis); }
.pw-rules li.is-met::before { content: "\2713"; }
.pw-rules li.is-unmet { color: var(--bs-danger-text-emphasis); }
.pw-rules li.is-unmet::before { content: "\2715"; }

/* Maintenance requests: description + updates thread, photo thumbnails (templates/maintenance/_thread.php). */
.mt-thread .list-group-item { padding: 14px 16px; }
.mt-meta { font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.mt-body { white-space: normal; overflow-wrap: anywhere; }
.mt-internal { background: var(--bs-tertiary-bg); border-left: 3px solid var(--bs-secondary-color); }
.mt-tenant { border-left: 3px solid var(--hive-honey); }
.mt-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mt-photos a { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--bs-border-color); }
.mt-photos img { display: block; width: 96px; height: 96px; object-fit: cover; }
a.stat:hover, a.stat:focus { border-color: var(--hive-honey); }

/* Requests page (templates/requests.php, js/requests.js). */
/* Each request is its own sub-card inside its category card (Kenny, 2026-11-10). */
.req-item { padding: 1rem 1.15rem; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--hive-honey);
  border-radius: .5rem; background: var(--bs-tertiary-bg); }
.req-item + .req-item { margin-top: 1rem; }
.req-item.req-closed { opacity: .7; }
.req-title { font-size: 1.05rem; font-weight: 600; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--bs-body-font-family); }
.req-desc { color: var(--bs-secondary-color); margin-top: .35rem; }
.req-files:empty { display: none; }
.req-file { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem 0; }
.req-file + .req-file { border-top: 1px dashed var(--bs-border-color); }
.req-file-name { max-width: 100%; }
.req-file-note { flex: 1 1 14rem; min-width: 0; }
.req-thread { border-left: 3px solid var(--bs-border-color); padding-left: .75rem; }
.req-update + .req-update { margin-top: .6rem; }
.req-update-us { border-left: 3px solid var(--hive-honey); margin-left: calc(-.75rem - 3px); padding-left: .75rem; }
.req-reply summary { cursor: pointer; width: fit-content; color: var(--bs-link-color); }
.req-attach { cursor: pointer; }
.req-drop { display: block; text-align: center; border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 1.5rem 1rem; cursor: pointer; }
.req-drop.is-over, .req-drop:hover { border-color: var(--hive-honey); }

/* ---- Notifications preview (templates/notifications.php) ------------------------- */
.notify-preview { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; color: #333; max-height: 640px; overflow: auto; }
.notify-preview-note { max-width: 600px; margin: 0 auto 32px; padding: 0 20px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #444; line-height: 1.6; }

/* A .visually-hidden label inside a scrolling table is position:absolute; without a positioned
   ancestor it escapes the scroll box and widens the whole page on phones (Overview, Notifications). */
.table-responsive { position: relative; }

/* ---- Broadcasts (templates/broadcasts/new.php) ---------------------------------- */
.bc-group { padding: .35rem 0 .35rem 1.75em; }
.bc-group + .bc-group { border-top: 1px solid var(--bs-border-color-translucent); }
.bc-choose-list { max-height: 320px; overflow-y: auto; }

/* Space names in Office Occupancy (home.php): Hive yellow; a darker gold in light mode so it stays readable on white. */
.space-name { color: #8a6d00; }
[data-bs-theme="dark"] .space-name { color: var(--hive-honey); }

/* Colorado surcharge notice (statute + this payment's line). Body color on tertiary bg: AA in both modes. */
.surcharge-notice { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-left: 3px solid var(--bs-warning); border-radius: 4px; padding: .6rem .75rem; line-height: 1.45; }

/* WCAG AA contrast (Work Order #1 item 12). Bootstrap's gray and red outline/text colors fall
   below 4.5:1 on the page backgrounds; these keep every mode at AA or better. */
[data-bs-theme="light"] .btn-outline-secondary { --bs-btn-color: #50575d; --bs-btn-border-color: #6c757d; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c4cad0; --bs-btn-border-color: #8a939b; --bs-btn-hover-color: #101215; --bs-btn-hover-bg: #c4cad0; --bs-btn-hover-border-color: #c4cad0; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f1a3aa; --bs-btn-border-color: #ea868f; }
[data-bs-theme="dark"] .text-danger { color: #f1a3aa !important; }

/* Click-to-copy placeholder chips (agreement wording, email templates). */
.copy-chip { font-family: var(--bs-font-monospace); font-size: .85em; padding: .1rem .45rem; border: 1px dashed var(--bs-border-color); border-radius: 4px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); cursor: copy; }
.copy-chip:hover, .copy-chip:focus-visible { border-style: solid; border-color: var(--bs-primary); }
.copy-chip.copied { border-color: var(--bs-success); }

/* Blur-to-reveal dollar amounts (Profile → Blur dollar amounts). */
.money-blur:not(.revealed) { filter: blur(6px); cursor: pointer; user-select: none; border-radius: 3px; }
.money-blur:not(.revealed):focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; filter: blur(4px); }
@media print { .money-blur { filter: none !important; } }

/* Self check-in (/checkin): big touch targets on a phone. */
.checkin { max-width: 26rem; margin: 0 auto; }
.checkin h1 { font-size: 1.35rem; margin-bottom: 1rem; }
.checkin-digits { font-size: 2.2rem; letter-spacing: .5em; font-variant-numeric: tabular-nums; }
.checkin-result { text-align: center; padding: 2rem 0; }
.checkin-result i { font-size: 3.5rem; margin-bottom: 1rem; }
.checkin-result.ok i { color: var(--bs-success); } .checkin-result.warn i { color: var(--bs-warning); }