/* FMR WhatsUpCrew's own content (see STYLE.md). Every shared look (the header, cards, sections, headings, fields, buttons, messages, the empty list, popups, the cog)
   is the UI kit's, kit.css, and the brand's colours are brand.css, both loaded before this file; nothing here sets a card's, a section's or a heading's size,
   padding or gap (CLAUDE.md s.10). Only this page's own content's tokens are below, each with a dark value. Pager Alerts' style.css is the model. */
:root { --bubble-in:#ffffff; --bubble-out:#dcf3e3; --bubble-ink:#1f2328; --unread-bg:#137f35; --unread-ink:#fff; --toast-bg:#323232; --toast-ink:#fff; --selected-bg:#e6f4ea;
        --tcard-bg:#e4f3dc; --tcard-ink:#1f2328; --tcard-edge:#9ccc8a;
        --log-bg:#10151a; --log-ink:#e6e8eb; --log-line:#222a33; --log-warn:#ffc72c; --log-error:#ff7b8a; }          /* (the Server Log's own dark colours, the same in both modes: the BDO hub's) */
@media (prefers-color-scheme: dark) {
  :root { --bubble-in:#222a33; --bubble-out:#173826; --bubble-ink:#e6e8eb; --unread-bg:#4cc06f; --unread-ink:#0b1a10; --toast-bg:#e6e7ea; --toast-ink:#1c1e21; --selected-bg:#173826;
          --tcard-bg:#1f3324; --tcard-ink:#e6e8eb; --tcard-edge:#3f6b45;
          --log-bg:#10151a; --log-ink:#e6e8eb; --log-line:#222a33; --log-warn:#ffc72c; --log-error:#ff7b8a; }
}
.kit-test-banner { display:none; } body.dry .kit-test-banner { display:block; }          /* the phone kit's banner (its look and words), shown in test mode only */
body.user-view #admin-slot { display:none; }          /* Admin View off: the page as a user sees it (the BDO hub's switch) */
#brand-mark { border-radius:6px; object-fit:contain; }

main { max-width:760px; margin:0 auto; padding:16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (min-width:1000px) { main { max-width:1200px; } }
.card { overflow-wrap:anywhere; }          /* (nothing runs past a card's edge, on any device: CLAUDE.md s.10; its size is the kit's) */

/* The parts of the app: Messages, Deployments, Members, Contacts. Plain buttons, the one in use filled, so the way round is always in view */
.tabs { display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.tabs button { flex:1 1 0; min-width:0; margin:0; padding-left:4px; padding-right:4px; }          /* (side by side where they fit) */
@media (max-width:520px) { .tabs button { flex:1 1 calc(50% - 4px); } }          /* (four parts on a phone upright: two by two, so no name is cut) */
.tabs button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* Messages: the conversations on the left and the one open on the right on a wide screen; one at a time on a phone (Back returns to the list) */
.messages { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
@media (min-width:1000px) { .messages { grid-template-columns:minmax(0, 22rem) minmax(0, 1fr); } .messages .back { display:none; } }
@media (max-width:999px) { .messages.reading .threads { display:none; } .messages:not(.reading) .thread { display:none; } }
.thread-row { display:flex; align-items:flex-start; gap:10px; width:100%; margin:0; padding:10px 4px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; font:inherit; cursor:pointer; min-height:44px; }
.messages .back { width:auto; margin:0 0 10px; }
.thread-row:hover, .thread-row.selected { background:var(--selected-bg); }
.thread-row .text { display:flex; flex-direction:column; min-width:0; flex:1; }
.thread-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-row .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.thread-row time { font-size:.78rem; color:var(--grey); white-space:nowrap; }
.unread { margin-left:6px; display:inline-block; min-width:1.4rem; padding:1px 6px; border-radius:999px; background:var(--unread-bg); color:var(--unread-ink); font-size:.78rem; font-weight:700; text-align:center; }
.kind-mark { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); }
.bubbles { display:flex; flex-direction:column; gap:8px; max-height:60vh; max-height:60dvh; overflow-y:auto; padding:4px 2px; -webkit-overflow-scrolling:touch; }
.bubble { max-width:85%; padding:8px 12px; border-radius:12px; background:var(--bubble-in); color:var(--bubble-ink); border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; }
.bubble.out { align-self:flex-end; background:var(--bubble-out); }
.bubble .meta { display:block; margin-top:4px; font-size:.75rem; color:var(--grey); white-space:normal; }
.bubble .who { display:block; font-size:.78rem; font-weight:700; color:var(--heading); margin-bottom:2px; }
.bubble.failed { border-color:var(--danger); }
.composer { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.composer textarea { min-height:5rem; }
.choice-row { display:flex; gap:8px; align-items:center; }
.choice-row input { flex:1; }
.choice-row button { width:auto; flex:none; margin:0; }

/* Members: one line a person, a tap opens their card */
.member-row { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; margin:0; padding:10px 4px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; font:inherit; cursor:pointer; min-height:44px; }
.member-row:hover { background:var(--selected-bg); }
.member-row .text { display:flex; flex-direction:column; min-width:0; }
.facts { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 14px; margin:6px 0 12px; }
.facts dt { color:var(--grey); font-size:.85rem; } .facts dd { margin:0; overflow-wrap:anywhere; }

.field { margin:10px 0; padding:6px 8px; border-left:3px solid transparent; }
.field.changed { background:var(--changed-bg); border-left-color:var(--highlight); }
.field-problem { color:var(--err-ink); background:var(--err-bg); border-left:4px solid var(--danger); border-radius:4px; padding:6px 10px; margin:6px 0 0; font-size:.9rem; }
.field .muted { margin:4px 0 0; }
input[type=checkbox] { width:20px; height:20px; padding:0; margin:0; flex:none; accent-color:var(--accent); }
label.tick { display:flex; align-items:center; gap:10px; font-weight:600; margin:14px 0 4px; }
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:4px 12px; margin:6px 0; }
.checks label { display:flex; align-items:center; gap:8px; font-weight:500; margin:2px 0; }
.buttons { display:flex; gap:10px; flex-wrap:wrap; } .buttons button { flex:1; min-width:8rem; }
/* Edit, Save and Cancel (the BDO hub's settings cards, as Pager Alerts copies them): together on the left, the values greyed until Edit, a changed one highlighted */
.edit-bar { margin:4px 0 8px; } .edit-bar button { margin-top:0; flex:0 1 auto; min-width:6rem; }
.edit-bar.foot { margin-top:12px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.pill { display:inline-block; border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:700; background:var(--busy-bg); color:var(--grey); text-transform:none; letter-spacing:0; white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok-ink); } .pill.warn { background:var(--note-bg); color:var(--ink); } .pill.bad { background:var(--err-bg); color:var(--err-ink); }
.hello { font-size:1.15rem; font-weight:700; margin:0 0 14px; }

/* Admin sections, tables and the Server Log (the BDO hub's, as Pager Alerts copies them) */
table { width:100%; border-collapse:collapse; font-size:.9rem; margin:6px 0 12px; }
th { text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); border-bottom:2px solid var(--accent); padding:6px 8px; }
td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.scroll-x { overflow-x:auto; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap:10px; margin:12px 0; }
.tile { border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:0; }
.tile h3 { margin:0 0 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); }
.tile .figure { font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; } .tile .muted { margin:2px 0 0; font-size:.78rem; }
.log-box { height:320px; overflow:auto; background:var(--log-bg); color:var(--log-ink); border-radius:8px; padding:10px; margin:8px 0 0; font:12px/1.45 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; -webkit-overflow-scrolling:touch; }
.log-box div { padding:2px 0; border-bottom:1px solid var(--log-line); }
.log-box .WARNING { color:var(--log-warn); }
.log-box .ERROR, .log-box .CRITICAL { color:var(--log-error); }
.log-levels { display:flex; flex-wrap:wrap; gap:6px 18px; }
.log-levels label { display:flex; align-items:center; gap:6px; margin:0; font-weight:400; padding:6px 0; }
.load-table td { padding:6px 8px 6px 0; vertical-align:top; border-bottom:1px solid var(--line); font-size:.85rem; overflow-wrap:normal; word-break:normal; }
button.wide { width:100%; }
.bulk { float:right; margin-left:10px; white-space:nowrap; }
.bulk button { width:auto; min-height:0; margin:0 0 0 2px; padding:0 8px; background:none; border:1px solid var(--field-line); border-radius:6px; color:var(--link); font-size:1rem; line-height:1.5; cursor:pointer; }

#toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); background:var(--toast-bg); color:var(--toast-ink); padding:10px 16px; border-radius:10px; box-shadow:0 4px 14px var(--shadow); z-index:50; }
@media print { #tabs, #toast, .composer { display:none; } }

/* Deployments (DESIGN.md s.2): the board's columns by where each crew is (side by side on a wide screen, one under another on a phone upright), each crew a
   light-green T-card (CFA's crew card T.2 Ver. 3 is light green), short crews edged red; the card itself prints alone, both sides */
.board { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap:12px; }
.board-column { min-width:0; } .board-column h3 { margin:0 0 6px; }
@media (max-width:760px) { .board-column.vacant { display:none; } }          /* (one under another on a phone: only the places a crew is at; each card says where) */
.tcard summary { background:var(--tcard-bg); color:var(--tcard-ink); }
.tcard-tab { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; margin:0 0 8px; padding:10px 12px; text-align:left; font:inherit; cursor:pointer;
  background:var(--tcard-bg); color:var(--tcard-ink); border:1px solid var(--tcard-edge); border-radius:8px; min-height:44px; overflow-wrap:anywhere; }
.tcard-tab.short { border-color:var(--danger); border-width:2px; }
.tcard-tab .tcard-crew { font-weight:700; font-size:1.05rem; } .tcard-tab .muted { font-size:.82rem; }
.short-words { color:var(--err-ink); font-weight:600; font-size:.85rem; }
.tcard { background:var(--tcard-bg); color:var(--tcard-ink); border:1px solid var(--tcard-edge); border-radius:8px; padding:10px 12px; margin:8px 0 12px; }
.tcard h3 { margin:12px 0 4px; }
.sides button { flex:0 1 auto; min-width:6rem; }
.sides button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.crew-person { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-bottom:1px solid var(--tcard-edge); }
.crew-person .text { display:flex; flex-direction:column; min-width:0; flex:1 1 12rem; }
.crew-actions { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 100%; } .crew-actions select { flex:1 1 100%; } .crew-actions button { flex:1 1 0; margin:0; }
@media (min-width:761px) { .crew-actions select { flex:2 1 12rem; } }
.fatigue-why { flex:1 1 100%; font-size:.82rem; }
.equip-list { display:flex; flex-wrap:wrap; gap:6px; } .equip { border:1px solid var(--tcard-edge); border-radius:6px; padding:2px 8px; font-size:.85rem; color:var(--grey); }
.equip.on { color:var(--tcard-ink); font-weight:600; }
.alarm { border-bottom:1px solid var(--line); padding:6px 0 10px; } .alarm p { margin:4px 0; } .alarm button { width:auto; }
.status-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 10px; } .status-row .field { flex:1 1 12rem; } .status-row button { flex:0 1 auto; margin-bottom:10px; }
.addr { display:block; overflow-wrap:anywhere; margin:2px 0; } .addr.wrong { color:var(--danger); } .addr-label { margin:6px 0 2px; }          /* (Admin, Texts: an address Vonage has that is not the app's own) */
@media print {
  body.print-card > *:not(.modal-back) { display:none; }
  body.print-card .modal-back { position:static; background:none; } body.print-card .modal { box-shadow:none; max-height:none; }
  body.print-card .modal-actions, body.print-card .sides, body.print-card .buttons, body.print-card .crew-actions { display:none; }
  body.print-card .tcard-side.hidden { display:block; } body.print-card .tcard { border:1px solid var(--tcard-edge); }
}