/* =========================================================================
   Treatment machine roster - machine.php.

   The table is the planning roster's, so planning.css does the heavy lifting.
   Only the machine picker and the operating-hour columns are new here.
   ========================================================================= */

/* ---- machine picker ----------------------------------------------------- */
.machine-tabs {
    display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap;
    margin: 0 0 12px;
}
.machine-tab {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 14px; border-radius: 8px; text-decoration: none;
    background: #fff; border: 1px solid #d1d5db; color: #374151; min-width: 108px;
}
.machine-tab:hover { background: #f8fafc; border-color: #9ca3af; }
.machine-tab.active {
    background: #eef2ff; border-color: #6366f1; color: #3730a3;
    box-shadow: inset 0 -3px 0 #6366f1;
}
.machine-tab .mt-name { font-size: 13px; font-weight: 700; }
.machine-tab .mt-code {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #6b7280;
}
.machine-tab.active .mt-code { color: #4f46e5; }
/* how many radiographers are on it, so a thin machine shows before you open it */
.machine-tab .mt-n {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- the staff cells ---------------------------------------------------- */
/* Two slots: the band the i/c put them on, and who covers them. */
.machine-grid td.machine-cell { min-width: 112px; padding: 2px 4px; }
.machine-grid td.machine-cell .slot-shift {
    min-width: 48px; font-size: 10px; padding: 0 4px; border-radius: 3px;
}
.machine-grid td.machine-cell .slot-side { min-width: 40px; }
.machine-grid .name-cell { min-width: 106px; }

/* The three bands, told apart by colour the way the planning shifts are. */
.machine-grid td.sh-1 .slot-shift, .plan-legend .lg.sh-1 { background: #dbeafe; color: #1e40af; }
.machine-grid td.sh-2 .slot-shift, .plan-legend .lg.sh-2 { background: #dcfce7; color: #15803d; }
.machine-grid td.sh-3 .slot-shift, .plan-legend .lg.sh-3 { background: #ede9fe; color: #5b21b6; }
.machine-grid td.sh-other .slot-shift { background: #fef3c7; color: #92400e; }
/* the cell itself stays white - the band is a chip inside it, not a wash */
.machine-grid td.sh-1, .machine-grid td.sh-2,
.machine-grid td.sh-3, .machine-grid td.sh-other { background: #fff; }
.machine-grid td.is-away { background: #f3f4f6; }

/* a band with no hours behind it yet */
.shift-opt.is-unset .d { color: #b45309; font-style: italic; }

/* the off / AL / SL options in the picker */
.shift-opt.sh-off { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; }
.shift-opt.sh-al,
.shift-opt.sh-sl { background: #e5e7eb; border-color: #9ca3af; color: #374151; }

/* ---- batch panel -------------------------------------------------------- */
/* One panel, three jobs - the machine's hours, the staff's band, and who is
   off. Naming the cover is per cell, because relieving and runner are rostered
   on the planning page rather than here. Only the fields the chosen job needs
   are shown, so the panel never asks for something it will not use. */
#batch-panel[data-what="hours"]  .only-shift,
#batch-panel[data-what="hours"]  .only-staff,
#batch-panel[data-what="hours"]  .only-remark,
#batch-panel[data-what="shift"]  .only-hours,
#batch-panel[data-what="status"] .only-hours,
/* A remark is the machine's line for the day, not anybody's cell, so who is
   ticked cannot change what it writes - the question comes off the panel
   rather than sitting there being ignored. */
#batch-panel[data-what="remark"] .only-hours,
#batch-panel[data-what="remark"] .only-staff,
#batch-panel[data-what="remark"] .batch-skip { display: none; }

.band-tag {
    display: inline-block; min-width: 52px; padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-align: center;
}
.band-early  { background: #dbeafe; color: #1e40af; }
.band-middle { background: #dcfce7; color: #15803d; }
.band-late   { background: #ede9fe; color: #5b21b6; }

#batch-hours .batch-row { gap: 8px; }
#batch-hours .batch-typed { width: 140px; }

.batch-select {
    font-size: 12px; padding: 5px 8px; max-width: 240px;
    border: 1px solid #d1d5db; border-radius: 7px;
}

.chip.sh-off:has(input:checked) { border-color: #9ca3af; background: #f3f4f6; color: #374151; }
.chip.sh-al:has(input:checked),
.chip.sh-sl:has(input:checked) { border-color: #6b7280; background: #e5e7eb; color: #374151; }

/* ---- operating hours ---------------------------------------------------- */
.plan-grid .hours-head {
    font-size: 11px; background: #fef3c7; color: #92400e;
    border-left: 2px solid #cbd5e1;
}
.plan-grid .hours-col {
    width: 96px; min-width: 96px; font-size: 11px; color: #4b5563;
    white-space: nowrap;
}
.plan-grid thead .hours-col { font-size: 10px; color: #92400e; background: #fffbeb; }
.plan-grid .hours-early  { border-left: 2px solid #cbd5e1; }
.plan-grid td.hours-col[data-hours] { cursor: text; }
.plan-grid td.hours-col[data-hours]:hover { background: #fffbeb; outline: 1px dashed #fcd34d; }
.plan-grid td.hours-col.has-val { background: #fffbeb; color: #78350f; font-weight: 600; }
.plan-grid td.hours-col.is-pending { outline: 2px solid #f59e0b; outline-offset: -2px; }

/* ---- the status slot ----------------------------------------------------- */
/* Off / AL / SL sits beside the hours, not in place of them, so a cell can say
   "off in the morning, these hours after" and name the cover as well. */
.machine-grid td.machine-cell { min-width: 152px; }
.machine-grid td.machine-cell .slot-status {
    min-width: 26px; margin-right: 3px; padding: 0 4px; border-radius: 3px;
    font-size: 10px; font-weight: 700; color: #9ca3af;
    border: 1px dashed #e5e7eb;
}
/* The same box made visible as on the planning roster, for the same reason:
   a near-white dash on a coloured cell is a control nobody can find. */
.machine-grid td[data-staff] .slot-status {
    border-color: #9ca3af; background: rgba(255, 255, 255, .85);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
    min-height: 15px;
}
.machine-grid td[data-staff] .slot-status:hover {
    border-color: #2563eb; background: #dbeafe; box-shadow: none;
}
.machine-grid td.machine-cell .slot-status.is-set { border-style: solid; box-shadow: none; }
.machine-grid td.sh-off .slot-status { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.machine-grid td.sh-al  .slot-status,
.machine-grid td.sh-sl  .slot-status { background: #d1d5db; color: #374151; border-color: #9ca3af; }
/* A reason typed in - Training, Conference, a QA day. Amber, as on the planning
   roster: the two sheets take the same reasons and should not have to be read
   two different ways. Written here as well as there because this file styles
   the slot again and comes after it in the cascade, at the same weight.

   It can be a couple of words, so it is held to the column and cut with an
   ellipsis rather than being allowed to widen every cell on the grid; the whole
   of it stays in the cell's tooltip. */
.machine-grid td.sh-reason .slot-status {
    background: #fef3c7; color: #92400e; border-color: #fcd34d;
    max-width: 74px; overflow: hidden; text-overflow: ellipsis;
}
/* away by its own reckoning: the cell greys, the hours stay readable */
.machine-grid td.sh-leave { background: #e5e7eb; }
.machine-grid td.sh-leave .slot-shift { color: #4b5563; }

#batch-panel[data-what="hours"] .only-status,
#batch-panel[data-what="shift"] .only-status,
#batch-panel[data-what="status"] .only-hours,
#batch-panel[data-what="status"] .only-shift { display: none; }

/* Folding the off column away - the cell's grey already carries the message. */
.machine-grid.hide-status .slot-status { display: none; }
.machine-grid.hide-status td.machine-cell { min-width: 112px; }