/* Planning > turnos -- the shift planner. Every colour is a token from app.css; none of its own. */

.tn-wrap { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 18px; min-height: 0; height: 100%; box-sizing: border-box; font-family: var(--sans, 'IBM Plex Sans', sans-serif); color: var(--ink); }
.tn-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tn-head .tn-title { font-size: 28px; font-weight: 600; margin-top: 2px; }
.tn-micro { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tn-grow { flex: 1 1 auto; }
.tn-btn { height: 38px; padding: 0 14px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.tn-btn:hover { background: var(--field-focus); }
.tn-btn.tn-dark { background: var(--ink); color: var(--panel-figure); border-color: var(--ink); }
.tn-btn.tn-sq { width: 38px; padding: 0; font-size: 16px; }
.tn-btn[disabled] { opacity: .45; cursor: default; }
.tn-btn.tn-danger { border-color: var(--alarm); color: var(--alarm); }
.tn-msg { font-size: 13px; color: var(--body); min-height: 18px; }
.tn-msg.tn-bad { color: var(--alarm); }
/* workers' requests waiting for an answer, above the grid */
.tn-reqs { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; }
.tn-req { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tn-req-t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--body); }
.tn-req-n { color: var(--muted); }
.tn-req-bill { color: var(--warn-ink); font-weight: 600; }

.tn-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--body); }
.tn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tn-sw { width: 12px; height: 12px; display: inline-block; }
.tn-sw.tn-sw-draft { border: 1.5px dashed var(--ink); }

.tn-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--hairline); background: var(--card); }
.tn-grid { display: grid; grid-template-columns: 210px repeat(7, minmax(128px, 1fr)); font-size: 12px; min-width: 1100px; }
.tn-dayh { position: sticky; top: 0; z-index: 1; background: var(--card); border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--rule); padding: 10px 12px; font-family: var(--mono, monospace); text-transform: uppercase; }
.tn-dayh.tn-today { background: var(--panel); color: var(--panel-figure); }
.tn-dayh.tn-weekend { color: var(--muted); }
.tn-who { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 10px 12px; }
.tn-who .tn-name { font-size: 14px; font-weight: 500; }
.tn-who .tn-sub { font-family: var(--mono, monospace); color: var(--muted); margin-top: 2px; font-size: 11px; }
.tn-who .tn-flex { margin-top: 6px; font-size: 11px; color: var(--accent-purple); }
.tn-who .tn-flex.tn-owed { color: var(--alarm); }
.tn-cell { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 5px; display: flex; flex-direction: column; gap: 4px; min-height: 64px; cursor: copy; }
.tn-cell.tn-weekend { background: var(--surface-2); }
.tn-cell.tn-todaycol { background: var(--field-focus); }
.tn-cell:hover { outline: 1px solid var(--rule); outline-offset: -3px; }

.tn-card { display: block; width: 100%; text-align: left; border: 0; padding: 5px 7px; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.tn-card .tn-t { font-weight: 600; }
.tn-card .tn-pl { font-family: var(--mono, monospace); font-size: 11px; margin-top: 2px; }
.tn-card.tn-draft { background: var(--card) !important; color: var(--ink); border: 1.5px dashed currentColor; }
.tn-card.tn-cancelled { background: var(--surface-2) !important; color: var(--muted); text-decoration: line-through; }
.tn-card.tn-corrected { outline: 2px solid var(--alarm); outline-offset: -2px; }
.tn-badge { font-family: var(--mono, monospace); font-size: 10px; background: var(--card); color: var(--ink); padding: 0 3px; margin-left: 4px; }
.tn-dot { color: var(--alarm); font-weight: 700; margin-left: 4px; }
.tn-leave { padding: 6px; font-family: var(--mono, monospace); font-size: 11px; text-transform: uppercase; color: var(--body);
  background: repeating-linear-gradient(45deg, var(--rule) 0 6px, var(--surface-2) 6px 12px); }

.tn-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--rule); padding: 8px 14px; font-size: 13px; }

/* the side panel: add or edit a shift, or a flexible-hours assignment */
.tn-scrim { position: fixed; inset: 0; background: rgba(20, 20, 19, .18); z-index: 20; }
.tn-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--card); border-left: 1.5px solid var(--hairline); z-index: 21; display: flex; flex-direction: column; box-sizing: border-box; }
.tn-panel-h { padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); display: flex; gap: 12px; align-items: flex-start; }
.tn-panel-h .tn-ptitle { font-size: 22px; font-weight: 600; margin-top: 4px; }
.tn-panel-b { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; overflow: auto; flex: 1 1 auto; }
.tn-field { display: flex; flex-direction: column; gap: 5px; }
.tn-field > span { font-family: var(--mono, monospace); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.tn-field input, .tn-field select, .tn-field textarea { height: 42px; border: 1.5px solid var(--ink); font: inherit; font-size: 15px; padding: 0 10px; background: var(--card); color: var(--ink); min-width: 0; box-sizing: border-box; }
.tn-field textarea { height: 64px; padding: 8px 10px; resize: none; }
.tn-row { display: flex; gap: 10px; }
.tn-row > .tn-field { flex: 1 1 0; min-width: 0; }
.tn-row > .tn-field input, .tn-row > .tn-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.tn-wp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tn-wp button { height: 38px; border: 1.5px solid var(--rule); background: var(--card); font-family: var(--mono, monospace); font-size: 13px; cursor: pointer; color: var(--ink); }
.tn-wp button[aria-pressed="true"] { background: var(--dep-projects); border-color: var(--dep-projects); color: #fff; }
.tn-note { background: var(--surface-2); border: 1px solid var(--rule); padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.tn-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--rule); }
.tn-actions .tn-btn { flex: 1 1 auto; height: 44px; }

@media (max-width: 900px) {
  .tn-wrap { padding: 10px; }
  .tn-head .tn-title { font-size: 22px; }
}

/* filters and views (Paul, 2026-11-09, from the gaps against Sling) */
.tn-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tn-filters select { font: inherit; font-size: 12px; padding: 4px 6px; max-width: 260px; }
.tn-views .tn-btn[aria-pressed="true"] { cursor: default; }
.tn-grid.tn-grid-day { grid-template-columns: 210px minmax(260px, 1fr); min-width: 0; }
.tn-dayh.tn-dayh-click { cursor: pointer; }
.tn-dayh.tn-dayh-click:hover { text-decoration: underline; }
.tn-cell.tn-ro { cursor: default; }
.tn-cell.tn-ro:hover { outline: 0; }
.tn-card .tn-trade { font-weight: 600; }
.tn-month { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); font-size: 12px; min-width: 800px; border-left: 1px solid var(--rule); }
.tn-mday { display: flex; flex-direction: column; gap: 2px; min-height: 96px; padding: 5px; text-align: left; font: inherit; font-size: 11px;
  background: var(--card); border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; }
.tn-mday:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.tn-mday.is-blank { background: var(--surface-2); cursor: default; }
.tn-mday.tn-mtoday b { background: var(--panel); color: var(--panel-figure); padding: 0 4px; }
.tn-mline { border-left: 4px solid var(--muted); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-mline.tn-mdraft { border-left-style: dashed; color: var(--muted); }
.tn-mmore { color: var(--muted); }