/* MS Rollout ops portal. Same layout and look as Farm Cropper's ops portal,
   with the MS Rollout orange as the accent. */
:root {
  --ink: #1f2328; --muted: #68707a; --canvas: #eef0f2; --panel: #fffefb; --line: #d9dde2;
  --accent: #F26B1D; --accent-dark: #c4520f; --accent-text: #a8460c; --accent-soft: #fdebdf;
  --band: #2b3036; --red: #a8302a; --green: #277254; --blue: #245b8b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background-color: var(--canvas); background-image: linear-gradient(#ffffff80 1px, transparent 1px), linear-gradient(90deg, #ffffff80 1px, transparent 1px); background-size: 28px 28px; font-family: Outfit, system-ui, sans-serif; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 2rem; margin-bottom: .25rem; }
h2 { font-size: 1.05rem; margin-bottom: 0; }
a { color: var(--accent-text); }
button { background: var(--accent); border: 0; border-radius: 5px; color: white; cursor: pointer; font: 600 .92rem Outfit, system-ui, sans-serif; min-height: 42px; padding: 0 15px; }
button:hover { background: var(--accent-dark); }
button:disabled { cursor: default; opacity: .6; }
.quiet-button { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.quiet-button:hover { background: #f1f2f4; }
.eyebrow { color: var(--accent-text); font: 500 .72rem "DM Mono", monospace; letter-spacing: .08em; margin-bottom: 8px; text-transform: uppercase; }
label { color: var(--muted); display: grid; font-size: .85rem; gap: 6px; }
input, select { background: #f9fafb; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font: 1rem Outfit, system-ui, sans-serif; min-height: 43px; padding: 8px 10px; width: 100%; }
input:focus, select:focus { border-color: var(--accent); outline: 2px solid #f26b1d44; }
.form-error { background: #fce9e7; border-left: 3px solid var(--red); color: #7d2520; margin: 0 0 16px; padding: 10px; }
.dialog-note { color: var(--muted); font-size: .86rem; line-height: 1.45; margin: 0; }
.empty { color: var(--muted); padding: 30px; margin: 0; }

/* Sign-in */
.login-layout { align-content: center; display: grid; gap: 64px; grid-template-columns: minmax(280px,450px) minmax(280px,380px); justify-content: center; min-height: 100vh; padding: 32px; }
.identity > p:last-child { color: var(--muted); font-size: 1.15rem; line-height: 1.5; }
.brand-mark { background: var(--accent); border-radius: 10px; display: inline-block; height: 14px; margin-right: 8px; vertical-align: middle; width: 14px; }
.login-form { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 15px 38px #3a2a1f22; display: grid; gap: 15px; padding: 26px; }
.login-form .form-error { margin: 0; }

/* Top bar and menu */
.topbar { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); border-top: 3px solid var(--accent); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 12px max(24px, calc((100vw - 1180px) / 2)); position: sticky; top: 0; z-index: 1000; }
.topbar h1 { font-size: 1.3rem; margin: 0; }
.topbar .eyebrow { margin-bottom: 1px; }
.operator { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.operator button, .nav-btn { font-size: .82rem; min-height: 34px; padding: 0 11px; }
.nav-btn { align-items: center; border-radius: 5px; color: var(--ink); display: inline-flex; font-weight: 600; text-decoration: none; white-space: nowrap; }
.operator .is-current { background: var(--ink); border-color: var(--ink); color: white; }
.operator .soon { color: var(--muted); }
.operator .soon::after { content: "soon"; font: 500 .6rem "DM Mono", monospace; margin-left: 5px; text-transform: uppercase; vertical-align: 1px; }
.operator .is-current.soon::after { color: #ffd2b8; }
.operator-name { color: var(--muted); font: .78rem "DM Mono", monospace; margin-left: 6px; }

/* Dark band under the top bar */
.toolbar { align-items: end; background: var(--band); color: #e9ecef; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 20px max(24px, calc((100vw - 1180px) / 2)); }
.toolbar label { color: #dde2e7; width: min(450px, 100%); }
.toolbar input, .toolbar select { background: white; }
.toolbar .dialog-note, .toolbar > p { color: #d6dce2; margin: 0; max-width: 760px; }
.toolbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.toolbar .quiet-button { border-color: #ffffff44; color: white; }
.toolbar .quiet-button:hover { background: #ffffff1a; }
.toolbar .status { color: #c9d0d7; font: .75rem "DM Mono", monospace; }
.content { margin: 0 auto; max-width: 1180px; padding: 32px 24px; }

/* Tiles */
.stats-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 7px; cursor: help; padding: 14px 16px; }
.stat-value { font: 700 1.5rem "DM Mono", monospace; overflow-wrap: anywhere; }
.stat-value--text { font-size: 1rem; line-height: 1.4; }
.stat-label { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.stat-sub { color: var(--muted); font: .72rem "DM Mono", monospace; margin-top: 6px; }

/* Panels and tables */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; margin-bottom: 20px; min-width: 0; }
.panel > h2, .panel-head { border-bottom: 1px solid var(--line); padding: 14px 16px; }
.panel-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.panel-head h2 { padding: 0; border: 0; }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.data-table th { border-bottom: 1px solid var(--line); color: var(--muted); cursor: help; font: 500 .7rem "DM Mono", monospace; padding: 10px 12px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--ink); }
.data-table th[aria-sort="ascending"]::after { content: " \25B2"; color: var(--accent); }
.data-table th[aria-sort="descending"]::after { content: " \25BC"; color: var(--accent); }
.data-table td { border-bottom: 1px solid var(--line); padding: 11px 12px; vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .mono { font: .8rem "DM Mono", monospace; white-space: nowrap; }
.data-table tbody tr.row-link { cursor: pointer; }
.data-table tbody tr.row-link:hover { background: var(--accent-soft); }
.data-table tbody tr.row-link a { color: var(--ink); font-weight: 600; text-decoration: none; }
.data-table tbody tr.row-link:hover a { color: var(--accent-text); text-decoration: underline; }
.data-table tfoot td { border-top: 2px solid var(--line); font-weight: 600; padding: 11px 12px; }
.tag { background: #e8eaed; border-radius: 3px; color: var(--muted); display: inline-block; font: 500 .7rem "DM Mono", monospace; padding: 3px 6px; text-transform: uppercase; }
.tag.manager { background: var(--accent-soft); color: var(--accent-text); }
.tag.estimator { background: #e3ecf5; color: var(--blue); }
.tag.worker { background: #e2f0e9; color: var(--green); }
.muted { color: var(--muted); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Company summary band (like Farm Cropper's account support summary) */
.summary { background: var(--ink); color: white; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 max(24px, calc((100vw - 1180px) / 2)); }
.summary div { border-right: 1px solid #ffffff25; display: grid; gap: 5px; padding: 18px 22px; }
.summary div:last-child { border-right: 0; }
.summary span { color: #cfd5db; font-size: .78rem; }
.summary strong { font: 600 1.05rem "DM Mono", monospace; overflow-wrap: anywhere; }

/* Server log */
.terminal { background: #1d1f23; border-radius: 0 0 7px 7px; color: #e8e2dc; font: .78rem/1.65 "DM Mono", monospace; margin: 0; max-height: calc(100vh - 290px); min-height: 240px; overflow: auto; padding: 16px; white-space: pre-wrap; word-break: break-word; }
.terminal mark { background: #f26b1d66; color: inherit; }

/* Map */
.map-page { display: flex; flex-direction: column; height: 100vh; }
.map-layout { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
#map { height: 100%; min-height: 300px; width: 100%; }
.map-panel { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding: 18px; }
.map-panel .form-error { margin: 0; }
.people-list { display: grid; gap: 2px; }
.people-list button { align-items: start; background: transparent; border-radius: 5px; color: var(--ink); display: grid; font-weight: 400; gap: 2px; min-height: 0; padding: 8px 10px; text-align: left; }
.people-list button:hover { background: var(--accent-soft); }
.people-list .who { font-weight: 600; }
.people-list .meta { color: var(--muted); font: .72rem "DM Mono", monospace; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); }
.legend i { border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #0004; display: inline-block; height: 12px; margin-right: 4px; vertical-align: -1px; width: 12px; }
.popup-name { font-weight: 600; }
.popup-meta { color: var(--muted); font-size: .8rem; }

/* Coming next */
.coming { background: var(--panel); border: 1px dashed var(--accent); border-radius: 7px; padding: 28px; }
.coming .tag { background: var(--accent-soft); color: var(--accent-text); margin-bottom: 14px; }
.coming p { font-size: 1.05rem; line-height: 1.5; margin: 0; max-width: 720px; }
.coming p + p { color: var(--muted); font-size: .9rem; margin-top: 12px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary div:nth-child(2) { border-right: 0; }
  .summary div { border-bottom: 1px solid #ffffff25; }
}
@media (max-width: 800px) {
  .login-layout { gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 24px 16px; }
  .map-page { display: block; height: auto; }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  #map { height: 62vh; }
  .map-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .topbar { align-items: start; padding: 9px 16px; position: static; }
  .topbar h1 { font-size: 1.05rem; }
  .topbar > div:first-child { width: 100%; }
  .operator { flex-wrap: nowrap; margin: 0 -16px; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; width: calc(100% + 32px); }
  .operator::-webkit-scrollbar { display: none; }
  .operator > * { flex-shrink: 0; }
  .operator button, .nav-btn { font-size: .78rem; padding: 0 10px; }
  .operator-name { display: none; }
  .toolbar { align-items: stretch; flex-direction: column; padding: 16px; }
  .toolbar-actions button { flex: 1 1 auto; }
  .content { padding: 20px 16px; }
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 1.2rem; }
  .summary { padding: 0; }
  .summary div { padding: 14px 16px; }
  .terminal { max-height: 70vh; }
  /* Keep the name in view while the rest of a wide table scrolls sideways. */
  #companies-table th:first-child, #companies-table td:first-child { background: var(--panel); box-shadow: 1px 0 0 var(--line); left: 0; position: sticky; z-index: 1; }
}