/* Daily Board — the Day view of the H&P Planning module.
   The table itself reuses .table-wrap and .player-table, so the board reads
   like the squad grid with different columns. The hp- prefix is the module
   chrome; the db- prefix is the board itself. */

.db-container {
    padding: 0;
}

/* ── Module chrome ──
   The toolbar shape (62px, lanes, page title) comes from the shared toolbar
   lists in styles.css; only the module-owned pieces live here. */

/* One line at any width: the lanes shrink and the summary ellipsizes
   instead of wrapping below the toolbar's divider. */
.hp-toolbar {
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* §4a: Module Tabs are seam-anchored, so the lane that holds them must reach
   the full 62px and the toolbar's 14px vertical padding is negated on that
   lane only. The title keeps its own vertical centring inside the tall lane. */
.hp-toolbar-left {
    flex: 0 1 auto;
    min-width: 0;
    align-self: stretch;
    align-items: stretch;
    margin-top: -14px;
    margin-bottom: -14px;
}

.hp-toolbar-left .hp-page-title {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Lane shrink priority, left to right. The tab row clips first, behind the
   §4a mask fade, and the active tab is scrolled into view; then the centre
   disclosure ellipses its own label. The right lane carries one counted fact
   and never clips, so the primary act stays reachable at 1180px. */
.hp-toolbar-center {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}

.hp-toolbar-right {
    flex: 0 0 auto;
    margin-left: auto;
}

.hp-page-title {
    white-space: nowrap;
}

/* ── The toolbar-centre disclosure ──
   One button stating the resolved choice. The label parts ellipsize; the
   separator and the chevron never do. */

.hp-disclosure {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.hp-disclosure > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-disclosure > .nv-chev,
.hp-disclosure > .hp-disclosure-sep {
    flex: 0 0 auto;
}

.hp-disclosure-sep {
    color: var(--ink-line-strong);
}

.hp-disclosure-dim {
    color: var(--text-secondary);
}

/* The popover the disclosure opens: an anchored transient float, so it takes
   the overlay plane. It sits on the fixed layer — the toolbar clips its own
   overflow to hold the lanes on one line, and would clip an absolute child.
   HPPlanning.placePop() sets its position under the disclosure. */
.hp-pop {
    position: fixed;
    z-index: 200;
    width: 340px;
    padding: 14px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    text-align: left;
}

.hp-pop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.hp-pop-row + .hp-pop-row {
    border-top: 1px solid var(--ink-line);
}

.hp-pop-row > select,
.hp-pop-row > .hub-date-trigger,
.hp-pop-row > .hub-date-control {
    flex: 1;
    min-width: 0;
}

/* The two session-time controls share the row's remaining width. Their
   trigger fills its wrapper, so without this bound the empty "Select
   time" trigger takes its content width and overflows the popover. */
.hp-pop-row > .hub-time-control {
    flex: 1 1 0;
    min-width: 0;
}

.hp-pop-label {
    min-width: 78px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.hp-pop-to {
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

.hp-pop-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ink-line);
}

.hp-summary {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-summary-count {
    color: var(--text-primary);
    font-weight: 750;
}

/* ── Toolbar-centre controls ── */

.db-slot-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.db-plan-label {
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.db-slot-single {
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 650;
}

/* ── Cells ── */

.player-table td.db-cell {
    padding: 3px 10px;
    text-align: center;
}

.db-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.db-mark:hover {
    background: var(--ink-wash);
}

/* An empty cell carries no glyph. Its add target appears on row hover and
   on keyboard focus, so the grid at rest shows only what is planned. */
.db-add {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px dashed transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: transparent;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.player-table tr:hover .db-add,
.db-add:focus-visible {
    border-color: var(--ink-line-strong);
    color: var(--text-tertiary);
}

.db-add:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.db-add:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}

.db-add:disabled {
    cursor: default;
}

/* ── The cell token family ──
   One shape at every state: an outline is open, a bar says how it closed,
   and done says its time. The accent ring marks waiting and nothing else. */

.db-tok {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    vertical-align: -3px;
}

.db-tok-waiting {
    border: 1.5px solid var(--accent);
}

.db-tok-draft {
    border: 1.5px dashed var(--text-secondary);
}

.db-tok-cancelled,
.db-tok-not-executed {
    border: 1.5px solid var(--text-tertiary);
    color: var(--text-tertiary);
}

.db-tok-cancelled::after,
.db-tok-not-executed::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 1.5px;
    margin: -0.75px 0 0 -6.5px;
    background: currentColor;
}

.db-tok-cancelled::after {
    transform: rotate(-45deg);
}

.db-tok-done {
    width: auto;
    height: auto;
    padding: 2px 8px 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: 0;
}

.db-mark-time {
    margin-left: 4px;
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 650;
}

.db-mark-note {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-tertiary);
}

.db-conflict {
    display: inline-block;
    margin-left: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--status-modified);
    color: var(--surface-field);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
}

/* ── Availability ──
   One way everywhere in this module: a dot and plain text, never a filled
   status pill. The severity colour is the platform's own status token. */

.db-avail {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.74rem;
    white-space: nowrap;
}

.db-avail-none {
    color: var(--text-tertiary);
}

.db-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary);
}

.db-dot-available { background: var(--status-available); }
.db-dot-recovery { background: var(--status-recovery); }
.db-dot-modified { background: var(--status-modified); }
.db-dot-differentiated { background: var(--status-differentiated); }
.db-dot-injured { background: var(--status-injured); }
.db-dot-rehab { background: var(--status-injured); }
.db-dot-illness { background: var(--status-illness); }
.db-dot-absent { background: var(--status-absent); }

/* ── The state legend ──
   The shared legend-bar disclosure under the table, exactly where the
   squad grid keeps its own. Only the items are module-owned. */

.db-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
}

.db-legend-blank {
    color: var(--text-tertiary);
}

/* ── The row filter ──
   Above the table, on the content gutters: which players the board shows.
   The players with nothing planned stay off the board by default. */

.db-scope {
    display: flex;
    margin: 0 24px 14px;
}

/* The area each column belongs to, under its label. */
.db-col-area {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Cell detail ── */

/* The block-time editor. The cell detail left this panel for the shared
   modal; moving a whole column's block stays an inline act above the table
   it is about to move. */
.db-editor {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
    /* Full bleed, like the table below it, with the content aligned to the
       Name column rather than floating inside a narrower card. */
    margin: 0;
    padding: 12px 10px 14px;
    border-bottom: 1px solid var(--ink-line);
    background: var(--surface-chrome);
}

.db-editor-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.db-editor-head span {
    color: var(--text-tertiary);
}

.db-editor label {
    display: block;
    min-width: 0;
}

.db-editor label > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

/* Note field: the same shape the other module inputs use. The Responsible
   picker is a shared hub-select-sm, and the day structure a shared
   hub-select, so neither is restyled here. */
.db-input {
    width: 100%;
    min-height: 32px;
    padding: 8px 10px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.db-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.db-editor-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Always the last column, whichever editor variant fills the grid. */
    grid-column: -2 / -1;
    justify-self: end;
}

/* ── The cell modal ──
   One modal for every cell of the board, occupied or empty. It sits on the
   shared .modal shell, which is chrome height with the scrim and the shadow
   carrying its elevation; only its own head, body and foot live here. */

.db-editor-modal {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    overflow: hidden;
}

.db-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ink-line);
}

.db-modal-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.db-modal-context {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-modal-head .btn {
    margin-left: auto;
    flex: 0 0 auto;
}

.db-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
}

/* Practitioner, the time, and the per-player length. The practitioner
   picker takes the room because its options are the longest strings. */
.db-field-grid {
    /* 140px fits the enhanced time trigger's "Select time" placeholder
       beside its clock icon; at 112px the placeholder truncated. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 84px;
    gap: 12px;
}

/* A grid, so the control stretches to the field without this module
   reaching in and restyling a shared class. */
.db-field {
    display: grid;
    min-width: 0;
    margin-bottom: 12px;
}

.db-field-grid .db-field {
    margin-bottom: 0;
    /* Label row, then an exact control track: the three controls share one
       top edge and one height, whatever the grid stretch hands the field. */
    grid-template-rows: auto 36px;
    align-content: start;
}

.db-field-grid + .db-field {
    margin-top: 12px;
}

/* A grid item defaults to min-width auto, so a control whose intrinsic
   width exceeds its track — the enhanced time trigger in the 112px column,
   a select with a long option — would push the row apart. Bounding every
   child keeps the columns honest; the controls stretch to the track. */
.db-field > * {
    min-width: 0;
}

/* One control height across the modal grid: the enhanced time trigger
   must sit level with the select and the number input beside it. */
.db-field .hub-time-control {
    width: 100%;
    height: 36px;
}

.db-field > select,
.db-field > input,
.db-field .hub-time-trigger {
    height: 36px;
    min-height: 36px;
}

.db-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.db-modal-state {
    margin: 2px 0 0;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    line-height: 1.5;
}

.db-modal-planned {
    color: var(--text-secondary);
}

.db-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 13px 18px;
    border-top: 1px solid var(--ink-line);
    background: var(--surface-raised);
}

.db-modal-spacer {
    flex: 1;
}

/* The loading state is the shared .loading-state block, which centres the
   spinner as well as the text. Only the empty message is module-owned. */
.db-empty {
    padding: 40px 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 900px) {
    .db-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A cancelled or not-executed activity keeps its place, visibly closed
   without work. Closed cells recede; open cells hold the eye. */
.db-cell-cancelled,
.db-cell-not-executed,
.db-cell-done {
    opacity: 0.72;
}

.db-cell-cancelled:hover,
.db-cell-not-executed:hover,
.db-cell-done:hover {
    opacity: 1;
}

/* The structure the platform proposes, stated inside the day popover under
   the rows it would change: visibly a proposal, not saved state. The
   editors' variant is a button; everyone else reads the text. */
.db-proposal {
    display: block;
    margin-top: 10px;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.5;
    text-align: left;
}

button.db-proposal {
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

button.db-proposal:hover {
    color: var(--accent);
}

/* ── Task times ── */

/* The team-session window, stated in the day popover. Every block and
   default task time resolves against it, so moving it moves the whole
   schedule at once. */
.db-window-label {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

/* The block time under each column label: the whole column's clock. */
.db-col-time {
    display: block;
    margin-top: 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

button.db-col-time {
    cursor: pointer;
    margin-inline: auto;
}

button.db-col-time:hover {
    color: var(--text-primary);
}

/* A hand-moved block reads apart from the type defaults around it. */
.db-col-time-moved {
    color: var(--accent);
}