/* Admin-only styles, layered over the carrier-facing stylesheet. -------- */

/*
 * One row that gives way rather than growing.
 *
 * A flex item defaults to min-width:auto, so a row that cannot wrap cannot be
 * squeezed either: the signed-in address held the header wider than a small
 * phone, and a page wider than the screen is one the browser zooms out to fit.
 * Letting it wrap fixed the width but spent three rows of a phone screen on
 * chrome, so the address gives up its own width first and only wraps if even
 * that is not enough.
 */
.admin-identity {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  gap: 0.5rem 0.75rem; min-width: 0; font-size: 0.85rem; color: var(--slate-300);
}
.admin-identity form { margin: 0; flex: none; }
.admin-identity .staff-link { flex: none; }

/* Truncated rather than wrapped: it says which account is signed in, and the
   first half of an address answers that as well as the whole of it. */
#identity-email {
  /* Basis zero, so it asks for none of the row and takes only what is spare.
     With `auto` it claimed its full width first and pushed Sign out onto a
     line of its own -- wrapping is meant to be the last resort here, not the
     first. */
  flex: 1 1 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.button-small { padding: 0.4rem 0.85rem; font-size: 0.85rem; }

.signin-card { max-width: 520px; margin: 3rem auto; text-align: center; padding: 2rem; }
.signin-card h1 { font-size: 1.5rem; }
.signin-card p { margin-top: 0.6rem; color: var(--slate-600); }
.signin-card .button { margin-top: 1.25rem; }
.signin-card .button + .button { margin-left: 0.5rem; }

/* Toolbar ---------------------------------------------------------------- */

.admin-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 1rem;
}
/*
 * Every group wraps and may shrink.
 *
 * A flex item defaults to min-width:auto, so a nested row that cannot wrap
 * cannot shrink either: the day controls held the toolbar wider than the phone,
 * which stretched the actions beside them so they never reached their own wrap
 * point. "Close day" ended up off-screen entirely.
 */
.toolbar-context { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
.day-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }

/* Which warehouse ---------------------------------------------------------
 *
 * The shared .segmented component carries the look; there are two sites, both
 * worth reading at a glance, and switching between them is the thing the dock
 * does most.
 */

.date-input {
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--slate-300); border-radius: var(--radius); background: var(--white);
  color: var(--navy-900);
}
.date-input:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--focus); }

/* Day summary ------------------------------------------------------------ */

.day-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.day-summary h1 { font-size: 1.35rem; }
.day-stats { display: flex; gap: 1.5rem; }
.day-stats div { display: flex; flex-direction: column; align-items: center; }
.day-stats span { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.day-stats small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin-top: 0.2rem; }

.closure-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  background: var(--red-100); border: 1px solid #f3c9c6; border-left: 3px solid var(--red-500);
  border-radius: var(--radius); color: var(--red-700); font-size: 0.9rem;
}

/* Slot cards ------------------------------------------------------------- */

.admin-slots { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }

.admin-slot { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.admin-slot.is-blocked { background: var(--slate-100); }

.admin-slot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--slate-200); background: var(--slate-100);
}
/*
 * The heading, the count and any tag sit in a row that wraps.
 *
 * Without that they were squeezed side by side on a phone and each broke
 * internally instead -- "Drop / Hook Trailers" over two lines beside "0 of 10
 * trailers" over two lines beside a pill reading "DOCK OFFICE / ONLY". Given
 * permission to wrap, whichever does not fit takes a line of its own and stays
 * whole.
 */
.admin-slot-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; min-width: 0; }
.admin-slot-title h2 { font-size: 1.05rem; }
.slot-count { font-size: 0.85rem; color: var(--slate-500); font-weight: 600; white-space: nowrap; }
.slot-count.is-full { color: var(--red-700); }
.admin-slot-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/*
 * The one pill carrying free text, so it is the one that must wrap.
 *
 * The dock types the closure reason, and holding it to a single line clipped
 * anything past the edge of the card -- which is worse than a tall pill,
 * because the reason is the whole point of showing it.
 */
.blocked-tag {
  padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--red-100); color: var(--red-700);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.appointment-list { list-style: none; margin: 0; padding: 0; }
.appointment {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.2rem; border-top: 1px solid var(--slate-200);
}
.appointment:first-child { border-top: none; }
.appointment-main { flex: 1 1 320px; min-width: 0; }
.appointment-title { font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.appointment-code {
  margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 5px;
  background: var(--navy-900); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
}
/* Marks the exception -- a truck collecting rather than delivering. */
.type-tag {
  margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--caution-tint); color: var(--caution);
  border: 1px solid var(--caution-line);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.appointment-meta { margin-top: 0.35rem; font-size: 0.86rem; color: var(--slate-600); display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
/*
 * A detail stays on one line while it fits, and gives way when it cannot.
 *
 * These were flatly nowrap, which reads well until a carrier's email address
 * is longer than the phone is wide -- then the whole page is, and the browser
 * zooms out to fit it.
 */
.appointment-meta span { overflow-wrap: anywhere; }
.appointment-notes { margin-top: 0.35rem; font-size: 0.86rem; color: var(--navy-800); font-style: italic; overflow-wrap: break-word; }
.appointment-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.slot-empty { padding: 1rem 1.2rem; color: var(--slate-500); font-size: 0.9rem; }

/* Dialog ----------------------------------------------------------------- */

.dialog-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(13, 27, 42, 0.55);
}
.dialog { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; }
.dialog h2 { font-size: 1.15rem; margin-bottom: 1rem; }

@media (max-width: 620px) {
  /*
   * Three full-width rows on a phone: which warehouse, then which day, then
   * what to do with it. Each control gets the width it needs instead of five
   * of them fighting over one line.
   */
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-context { flex-direction: column; align-items: stretch; gap: 0.5rem; }

  /* Row 1 -- the two sites split the width evenly (the component already
     stretches them; this is only here to say so). */

  /*
   * Row 2 -- the date takes the slack, the arrows and Today keep their size.
   *
   * Still allowed to wrap. A native date input will not shrink past the width
   * of the date it holds, so on the narrowest phones Today drops to a line of
   * its own rather than off the side of the screen.
   */
  .day-nav .date-input { flex: 1 1 150px; min-width: 0; }
  .day-nav .icon-button { flex: none; }
  .day-nav #today-button { flex: none; }

  /* Row 3 -- as before. */
  .toolbar-actions .button { flex: 1; }

  .appointment-actions { width: 100%; }
  .appointment-actions .button { flex: 1; }
}

/* Drop / hook trailers ----------------------------------------------------- */

.admin-slot.is-admin-only { border-color: var(--line-strong); }
.admin-slot.is-admin-only .admin-slot-head { background: var(--brand-tint); }

.admin-only-tag {
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--panel); color: var(--brand-dark); border: 1px solid var(--brand);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Over-capacity marker ---------------------------------------------------- */

.overbooked-tag {
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--amber-100); color: var(--amber-600);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.overbook-notice {
  grid-column: 1 / -1; margin: 0; padding: 0.7rem 0.9rem;
  background: var(--amber-100); border-left: 3px solid var(--amber-500);
  border-radius: var(--radius); color: var(--amber-600); font-size: 0.86rem;
}

/* Says what a dialog will not change, so the operator does not go looking. */
.dialog-note {
  grid-column: 1 / -1; margin: 0; padding: 0.6rem 0.8rem;
  background: var(--slate-100); border-radius: var(--radius);
  color: var(--slate-600); font-size: 0.84rem;
}

.field-checkbox {
  flex-direction: row; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem; background: var(--slate-100); border-radius: var(--radius);
}
.field-checkbox input { width: 16px; height: 16px; flex: none; accent-color: var(--amber-600); }
.field-checkbox label { font-weight: 600; }

/* The printed week --------------------------------------------------------- */

.week-print { display: none; }
.week-day { break-inside: avoid; page-break-inside: avoid; margin-bottom: 10pt; }
.week-day h2 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 12pt; border-bottom: 1pt solid #000; padding-bottom: 3pt; margin-bottom: 5pt;
}
.week-day-count { font-size: 9.5pt; font-weight: 600; color: #333; }
.week-slot { margin: 0 0 6pt; break-inside: avoid; page-break-inside: avoid; }
.week-slot h3 { font-size: 10pt; margin: 0 0 2pt; }
.week-slot ul { margin: 0; padding-left: 14pt; font-size: 9.5pt; line-height: 1.5; }
.week-slot li { break-inside: avoid; page-break-inside: avoid; }
.week-note { display: block; font-style: italic; font-size: 9pt; }
.week-empty { margin: 0; font-size: 9.5pt; color: #555; }

/* The printed day sheet ---------------------------------------------------- */

.print-masthead { display: none; }

@media print {
  /* Printing a week swaps the day view out for the week container. */
  body.printing-week #schedule-view > *:not(#week-print) { display: none !important; }
  body.printing-week .week-print { display: block !important; }
  body:not(.printing-week) .week-print { display: none !important; }

  /* Chrome that means nothing on paper. */
  .site-header,
  .admin-toolbar,
  .closure-banner button,
  .admin-slot-actions,
  .appointment-actions,
  .dialog-backdrop,
  .toast,
  .day-stats { display: none !important; }

  @page { margin: 14mm; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { width: 100%; }

  .print-masthead {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding-bottom: 8pt; margin-bottom: 12pt; border-bottom: 1.5pt solid #000;
  }
  .print-masthead-main { display: flex; flex-direction: column; }
  .print-masthead-main strong { font-size: 13pt; }
  .print-masthead-main span { font-size: 9.5pt; color: #333; }
  .print-masthead-day { text-align: right; display: flex; flex-direction: column; }
  .print-masthead-day strong { font-size: 12pt; }
  .print-masthead-day span { font-size: 9pt; color: #333; }

  /* The on-screen summary card duplicates the printed masthead. */
  .day-summary { display: none; }

  .closure-banner {
    background: none; border: 1.5pt solid #000; border-left-width: 4pt; color: #000;
    padding: 6pt 8pt; margin-bottom: 10pt;
  }

  .admin-slots { gap: 0; }

  .admin-slot {
    border: none; border-top: 1pt solid #000; border-radius: 0;
    box-shadow: none; background: none;
    /* Keep a time and its trucks on the same page. */
    break-inside: avoid; page-break-inside: avoid;
  }
  .admin-slot-head { background: none; padding: 7pt 0 3pt; border-bottom: 0.5pt solid #999; }
  .admin-slot-title h2 { font-size: 12pt; }
  .slot-count, .slot-count.is-full { color: #000; font-size: 10pt; }
  .blocked-tag, .overbooked-tag, .admin-only-tag { background: none; color: #000; border: 0.75pt solid #000; padding: 0 4pt; }
  .admin-slot.is-admin-only .admin-slot-head { background: none; }

  .appointment { padding: 5pt 0; border-top: 0.5pt dotted #999; break-inside: avoid; page-break-inside: avoid; }
  .appointment:first-child { border-top: none; }
  .appointment-title { font-size: 11pt; }
  .appointment-code { background: none; color: #000; border: 0.75pt solid #000; padding: 0 3pt; }
  .type-tag { background: none; color: #000; border: 0.75pt solid #000; padding: 0 3pt; }
  .appointment-meta { color: #000; font-size: 9.5pt; gap: 0 10pt; }
  .appointment-notes { color: #000; font-size: 9.5pt; }
  .appointment-notes::before { content: 'Notes: '; font-style: normal; font-weight: 600; }
  .slot-empty { padding: 5pt 0; color: #555; font-size: 9.5pt; }

  /* Room for the dock office to tick trucks off as they arrive. */
  .appointment-main::after {
    content: 'Arrived: ______   Departed: ______';
    display: block; margin-top: 3pt; font-size: 9pt; color: #555; letter-spacing: 0.02em;
  }
}