/* The tour manager's office, inside the Manager Office.
 *
 * Every colour comes from Pingig's own palette in style.css -- --steel,
 * --silver, --neon-purple and the rest -- rather than a second one. The
 * standalone /tourmanager page had its own tokens, its own greys and its own
 * idea of a button, and it looked like a different product bolted on. It is
 * gone; this is what is left, and it belongs to the same site.
 *
 * Sits inside .manager-section, so the frame, heading and spacing are already
 * the office's. These rules only cover what is new: the tab strip, the field
 * groups, the party cards and the delivery board. */

.office-section select,
.office-section input,
.office-section textarea {
    background: rgba(13, 15, 18, 0.6);
    border: 1px solid rgba(192, 197, 206, 0.15);
    color: var(--silver);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
}
.office-section select:focus,
.office-section input:focus,
.office-section textarea:focus {
    outline: none;
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(181, 55, 242, 0.15);
}
.office-section textarea { resize: vertical; line-height: 1.7; margin-top: 10px; }

.office-h {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
    font-weight: 700;
    margin: 22px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(192, 197, 206, 0.1);
}
.office-dim { color: var(--steel); font-size: 0.8rem; }
.office-note { display: block; margin: -4px 0 10px; }

/* The tab strip. Underline rather than a boxed tab: the panel already sits in
   a bordered card, and a box inside a box is where a page starts to look busy. */
.office-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(192, 197, 206, 0.12);
    margin: 18px 0 4px;
}
.office-tabs button {
    background: none; border: none; cursor: pointer;
    color: var(--steel); font-family: inherit; font-size: 0.85rem; font-weight: 600;
    padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.office-tabs button:hover { color: var(--silver); }
.office-tabs button.on { color: var(--silver); border-bottom-color: var(--neon-purple); }

.office-tab { display: none; padding-top: 14px; }
.office-tab.on { display: block; }

.office-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.office-bar select, .office-bar input { flex: 1; min-width: 180px; width: auto; }
.office-bar .game-btn { flex: none; }
.office-daybar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.office-daybar input { max-width: 190px; }
.office-daybar .game-btn { flex: none; padding: 8px 14px; }

.office-grid {
    display: grid; gap: 16px; margin-top: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.office-group {
    background: rgba(13, 15, 18, 0.4);
    border: 1px solid rgba(192, 197, 206, 0.1);
    border-radius: 10px; padding: 4px 16px 14px;
}
.office-group .office-h { margin-top: 14px; }
.office-section label {
    display: block; margin-bottom: 10px;
    font-size: 0.78rem; color: var(--steel);
}
.office-section label input, .office-section label select { margin-top: 5px; }
.office-wide { grid-column: 1 / -1; }

.office-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.office-msg { font-size: 0.8rem; min-height: 1em; }
.office-msg.good { color: var(--success-green); }
.office-msg.bad { color: var(--hot-orange); }

/* People */
.office-band h4 {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--steel); margin: 18px 0 8px;
}
.office-person {
    background: rgba(13, 15, 18, 0.45);
    border: 1px solid rgba(192, 197, 206, 0.1);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.office-person-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.office-person-top select { width: auto; padding: 5px 9px; font-size: 0.78rem; }
.office-person-top .game-btn { padding: 5px 12px; font-size: 0.75rem; }
.office-name { font-weight: 700; color: var(--silver); }
.office-line { margin-top: 6px; font-size: 0.85rem; color: var(--silver); }
.office-shared {
    margin-top: 8px; padding-top: 8px; font-size: 0.85rem; color: var(--silver);
    border-top: 1px solid rgba(192, 197, 206, 0.1);
}
.office-shared b { color: var(--steel); font-weight: 600; margin-right: 6px; }

.office-pill {
    font-size: 0.7rem; padding: 3px 10px; border-radius: 999px;
    border: 1px solid rgba(192, 197, 206, 0.18); color: var(--steel);
}
.office-pill.ok { color: var(--success-green); border-color: rgba(76, 175, 80, 0.4); }
.office-pill.stale { color: var(--warning-yellow); border-color: rgba(255, 193, 7, 0.4); }

/* Consent, and the board */
.office-sharerow {
    background: rgba(13, 15, 18, 0.45);
    border: 1px solid rgba(192, 197, 206, 0.1);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.office-tick {
    display: flex; align-items: center; gap: 6px; margin: 0 !important;
    color: var(--silver); font-size: 0.8rem;
}
.office-tick input { width: auto; margin: 0; }

.office-row {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 10px 2px; border-bottom: 1px solid rgba(192, 197, 206, 0.08);
}
.office-field { font-weight: 600; color: var(--silver); min-width: 150px; }
.office-val { color: var(--neon-purple); }

@media (max-width: 560px) {
    .office-grid { grid-template-columns: 1fr; }
    .office-tabs button { padding: 9px 10px; font-size: 0.8rem; }
}


/* ── two doors into the sheet ────────────────────────────────────────────────
   Somebody arriving at the office has either no spreadsheet or their own one,
   and the panel used to offer the same empty box to both. */
.office-start{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin:14px 0 18px;
}
.office-start-card{
  border:1px solid rgba(255,255,255,.09); border-radius:12px;
  padding:14px 16px; background:rgba(255,255,255,.03);
}
.office-start-card b{
  display:block; font-family:'Bangers',cursive; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.05rem; margin-bottom:6px; color:var(--sky);
}
.office-start-card p{margin:0 0 10px; font-size:.86rem; line-height:1.5}
/* An <a> wearing a button's clothes still answers to the link colour, so the
   template link came out blue on blue and could not be read. Forcing the text
   near-black fixed that and then broke differently the moment the site went
   dark purple: a bare .game-btn has no background of its own, so it was
   near-black on near-black -- invisible rather than merely ugly.
   The fix both times was the same one, done properly here: give it a real
   button's background, and then the dark text has something to sit on. */
.office-start-card a.game-btn{
  display:inline-block; text-decoration:none;
  background:linear-gradient(92deg, var(--gold), #ffb01f) !important;
  color:#1a1206 !important;
  font-weight:700;
  box-shadow:0 6px 18px rgba(255,194,74,.22);
}
.office-start-card a.game-btn:visited{color:#1a1206 !important}
.office-start-card a.game-btn:hover{filter:brightness(1.08)}
.office-start-card .office-note{margin-top:10px; margin-bottom:0}
.office-start-card details{margin-top:6px}
.office-start-card summary{
  cursor:pointer; font-size:.85rem; color:var(--silver); padding:4px 0;
}
.office-cols{
  margin:8px 0 6px; padding-left:18px; columns:2; column-gap:18px;
  font-size:.8rem; line-height:1.7; color:var(--steel);
}
.office-cols b{color:var(--silver)}

/* ── THE SHOW PICKER ─────────────────────────────────────────────────────────
 *
 * A <select> sizes itself to its widest option unless it is told not to, and
 * these options are "Fri 4 Sep — AMSTERDAM · Paradiso" -- long enough to push
 * the whole office sideways on a phone. width:100% with min-width:0 is what
 * stops that: the min-width is not redundant, because a flex or grid child
 * refuses to shrink below its content without it, which is the usual reason a
 * select still overflows after being given a width.
 *
 * The open list is the OS's own and scrolls by itself, on every phone, which
 * is exactly why this stays a native select rather than a styled div: a tour
 * with forty dates needs scrolling and the platform already does it properly.
 */
.office-showpick {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 8px 0 2px;
    padding: 10px 12px;
    font-size: 0.92rem;
    border-radius: 10px;
    cursor: pointer;
}
.office-showpick:disabled { opacity: .55; cursor: default; }

/* The arrows and the date sit on one line while there is room for one, and
 * stack rather than overflow when there is not. */
.office-daybar { flex-wrap: wrap; }
.office-daybar input[type="date"] { flex: 1 1 150px; min-width: 0; }

/* ── NOTHING IN THE OFFICE SCROLLS SIDEWAYS ──────────────────────────────────
 * Wide things -- the delivery board, a long field row -- scroll inside their
 * own box. The page never does: a horizontally scrolling page on a phone is
 * how you lose the button you were reaching for. */
.office-section { max-width: 100%; overflow-x: hidden; }
.office-section .office-grid { min-width: 0; }
.office-section .office-group { min-width: 0; overflow-wrap: anywhere; }
.office-section table { display: block; max-width: 100%; overflow-x: auto; }

@media (max-width: 560px) {
    .office-showpick { font-size: 0.86rem; padding: 9px 10px; }
    .office-daybar .game-btn { padding: 8px 12px; }
    /* One column, so a field label and its box are never squeezed to nothing.
       Entering data is the job; two cramped columns is not a feature. */
    .office-section .office-grid { grid-template-columns: 1fr; }
}