/* ============================================================================
   reservebid.css — Reserve Bid Planner (X-day pattern legality checker).
   ========================================================================== */

#page-reservebid .rb-rules-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem 1.2rem;
}
#page-reservebid .rb-field label {
  display: block; font-size: .74rem; color: var(--dim); margin-bottom: .3rem;
}
#page-reservebid .rb-field input, #page-reservebid .rb-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font: inherit; font-size: .88rem; padding: .45rem .55rem;
}
#page-reservebid .rb-field input:focus, #page-reservebid .rb-field select:focus {
  outline: 2px solid var(--amber); outline-offset: 1px;
}
/* Native date-picker chrome (the calendar icon) is invisible against a dark
   field without this -- color-scheme tells the browser which of its own
   built-in palettes to draw that icon in. Follows the same three-state
   light/dark/system pattern as styles.css's :root color tokens. */
#page-reservebid input[type="date"] { color-scheme: dark; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #page-reservebid input[type="date"] { color-scheme: light; }
}
:root[data-theme="light"] #page-reservebid input[type="date"] { color-scheme: light; }
:root[data-theme="dark"] #page-reservebid input[type="date"] { color-scheme: dark; }

#page-reservebid .rb-history-row {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap;
}
#page-reservebid .rb-history-row label { font-size: .8rem; color: var(--dim); }
#page-reservebid .rb-history-row select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font: inherit; font-size: .82rem; padding: .35rem .6rem;
}

/* table-layout:fixed + width:100%, no min-width -- the browser divides the
   7 columns evenly across whatever width is actually available, so this
   fits any screen without horizontal scrolling. overflow-x:auto stays only
   as a defensive fallback, not the primary fit mechanism. */
#page-reservebid .rb-cal-scroll { overflow-x: auto; }
#page-reservebid .rb-calendar { table-layout: fixed; border-collapse: separate; border-spacing: 2px; width: 100%; font-family: var(--font-mono); }
#page-reservebid .rb-calendar th {
  font-family: var(--font-body); font-size: .64rem; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 500; padding: .2rem 0;
}
#page-reservebid .rb-daycell {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
  padding: .3rem .1rem; text-align: center; cursor: pointer; vertical-align: top; position: relative;
  overflow: hidden;
}
#page-reservebid .rb-daycell:hover { border-color: var(--dim); }
#page-reservebid .rb-daycell.weekend .rb-datenum { color: var(--amber); }
/* Days outside the bid period (the 7-day lookback week) get a red date
   number -- this needs to win over the weekend-amber rule above, hence
   coming after it here despite equal selector specificity. */
#page-reservebid .rb-daycell.lookback .rb-datenum { color: var(--red); }
#page-reservebid .rb-datenum {
  font-size: .68rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-reservebid .rb-code { font-size: .95rem; font-weight: 600; margin-top: 2px; min-height: 1.2em; }
@media (max-width: 480px) {
  #page-reservebid .rb-datenum { font-size: .6rem; }
  #page-reservebid .rb-code { font-size: .82rem; }
  #page-reservebid .rb-daycell { padding: .25rem .05rem; }
}
#page-reservebid .rb-daycell.empty .rb-code { color: var(--dim); font-weight: 400; }

/* R is the only code whose fill itself carries legality: green while its
   block is within the min/max rule, red the moment it isn't. Every other
   code (except X, which never gets a fill at all) keeps a fixed per-type
   color regardless of legality, with a red outline layered on for the
   rare case a block ends on that day out of range -- mirrors the source
   workbook, which colors the code cell by type and reserves red for the
   separate block-length cell rather than the code itself. */
#page-reservebid .rb-daycell.code-r { background: color-mix(in srgb, var(--green) 22%, var(--panel-2)); border-color: var(--green); }
#page-reservebid .rb-daycell.code-r .rb-code { color: var(--green); }
#page-reservebid .rb-daycell.code-r.violation { background: color-mix(in srgb, var(--red) 26%, var(--panel-2)); border-color: var(--red); }
#page-reservebid .rb-daycell.code-r.violation .rb-code { color: var(--red); }

#page-reservebid .rb-daycell.code-a { background: color-mix(in srgb, var(--rb-a) 22%, var(--panel-2)); border-color: var(--rb-a); }
#page-reservebid .rb-daycell.code-a .rb-code { color: var(--rb-a); }
#page-reservebid .rb-daycell.code-c { background: color-mix(in srgb, var(--rb-c) 22%, var(--panel-2)); border-color: var(--rb-c); }
#page-reservebid .rb-daycell.code-c .rb-code { color: var(--rb-c); }
#page-reservebid .rb-daycell.code-w { background: color-mix(in srgb, var(--rb-w) 22%, var(--panel-2)); border-color: var(--rb-w); }
#page-reservebid .rb-daycell.code-w .rb-code { color: var(--rb-w); }
#page-reservebid .rb-daycell.code-cq { background: color-mix(in srgb, var(--rb-cq) 22%, var(--panel-2)); border-color: var(--rb-cq); }
#page-reservebid .rb-daycell.code-cq .rb-code { color: var(--rb-cq); }
#page-reservebid .rb-daycell.code-ci { background: color-mix(in srgb, var(--rb-ci) 22%, var(--panel-2)); border-color: var(--rb-ci); }
#page-reservebid .rb-daycell.code-ci .rb-code { color: var(--rb-ci); }
#page-reservebid .rb-daycell.code-alp { background: color-mix(in srgb, var(--rb-alp) 22%, var(--panel-2)); border-color: var(--rb-alp); }
#page-reservebid .rb-daycell.code-alp .rb-code { color: var(--rb-alp); }

/* Violation outline for the non-R types above (X never reaches this --
   it gets no code-* class at all, so it can't match here either). */
#page-reservebid .rb-daycell.violation:not(.code-r) { outline: 2px solid var(--red); outline-offset: -2px; }

#page-reservebid .rb-popover {
  position: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 20; width: 132px;
}
#page-reservebid .rb-popover button {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; color: var(--ink);
  font: inherit; font-size: .74rem; padding: .35rem 0; cursor: pointer;
}
#page-reservebid .rb-popover button:hover { border-color: var(--amber); color: var(--amber); }
#page-reservebid .rb-popover button.clear { grid-column: span 3; color: var(--dim); }

#page-reservebid .rb-verdict {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.25rem; border: 1px solid var(--line);
}
#page-reservebid .rb-verdict.legal { background: color-mix(in srgb, var(--green) 16%, var(--panel)); border-color: var(--green); }
#page-reservebid .rb-verdict.illegal { background: color-mix(in srgb, var(--red) 16%, var(--panel)); border-color: var(--red); }
#page-reservebid .rb-verdict-label {
  font-family: var(--font-disp); font-weight: 700; font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase;
}
#page-reservebid .rb-verdict.legal .rb-verdict-label { color: var(--green); }
#page-reservebid .rb-verdict.illegal .rb-verdict-label { color: var(--red); }
#page-reservebid .rb-verdict-reason {
  font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: normal;
  text-transform: none; color: var(--dim); vertical-align: middle;
}
#page-reservebid .rb-verdict-sub { font-size: .8rem; color: var(--dim); }

#page-reservebid .rb-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
#page-reservebid .rb-stat { background: var(--panel-2); border-radius: 6px; padding: .7rem .9rem; }
#page-reservebid .rb-stat-label { font-size: .7rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
#page-reservebid .rb-stat-value { font-family: var(--font-mono); font-size: 1.3rem; margin-top: 2px; }
#page-reservebid .rb-stat-value.warn { color: var(--red); }

#page-reservebid .rb-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem 1.2rem; }
#page-reservebid .rb-legend-row { display: flex; align-items: baseline; gap: .6rem; font-size: .82rem; }
#page-reservebid .rb-legend-swatch {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; flex: none;
  align-self: center; background: transparent; border: 1px dashed var(--line);
}
#page-reservebid .rb-legend-swatch.code-r,
#page-reservebid .rb-legend-swatch.code-a,
#page-reservebid .rb-legend-swatch.code-c,
#page-reservebid .rb-legend-swatch.code-w,
#page-reservebid .rb-legend-swatch.code-cq,
#page-reservebid .rb-legend-swatch.code-ci,
#page-reservebid .rb-legend-swatch.code-alp { border: none; }
#page-reservebid .rb-legend-swatch.code-r { background: var(--green); }
#page-reservebid .rb-legend-swatch.code-a { background: var(--rb-a); }
#page-reservebid .rb-legend-swatch.code-c { background: var(--rb-c); }
#page-reservebid .rb-legend-swatch.code-w { background: var(--rb-w); }
#page-reservebid .rb-legend-swatch.code-cq { background: var(--rb-cq); }
#page-reservebid .rb-legend-swatch.code-ci { background: var(--rb-ci); }
#page-reservebid .rb-legend-swatch.code-alp { background: var(--rb-alp); }
#page-reservebid .rb-legend-code { font-family: var(--font-mono); font-weight: 600; color: var(--amber); min-width: 2.2em; }
#page-reservebid .rb-legend-desc { color: var(--dim); }