.time-break-library { grid-column: 2; min-width: 0; scroll-margin-top: 140px; }
@media (max-width:1180px) { .time-break-library { grid-column:1 / -1; } }
.time-break-library .card-header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:16px; }
.time-break-library .card-header > div { flex:1 1 240px; min-width:0; }
.time-break-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; padding:16px; }
.time-break-cards .time-model-card { grid-template-columns:minmax(0,1fr) auto; }
.time-break-form { display:grid; gap:14px; padding:18px; margin:0; border-top:1px solid #cbd9e7; }
.time-break-form h3,.time-break-form p,.time-break-assignment p { margin:0; overflow-wrap:anywhere; }
.time-break-form [data-break-stages] { display:grid; gap:10px; }
.time-break-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:12px; padding:12px; border:1px solid #cbd9e7; border-radius:10px; background:#f7fbff; }
.time-break-stage > *,.time-break-assignment > * { min-width:0; }
.time-break-stage input,.time-break-form input:not([type=checkbox]),.time-break-assignment select { box-sizing:border-box; width:100%; min-width:0; max-width:100%; }
.time-break-assignment { display:grid; gap:12px; padding:14px; border:1px solid #bed6e8; border-radius:10px; background:#f2f9fe; margin-bottom:14px; }
.time-break-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.time-break-actions.end { justify-content:flex-end; }
.time-break-actions label { display:flex; gap:8px; align-items:center; }
.time-break-message { padding:16px; }
.time-break-form [data-break-error]:not(:empty) { padding:12px; border-radius:8px; background:#fff1f3; color:#9e2035; }
.time-break-form [data-break-total] { padding:12px; background:#eaf6fb; border-radius:8px; font-weight:700; color:#175574; }
@media (max-width:650px) { .time-break-stage { grid-template-columns:minmax(0,1fr); } .time-break-actions > .button { max-width:100%; white-space:normal; } .time-break-form { padding:12px; } }
.time-model-layout {
  display: grid;
  grid-template-columns: clamp(230px, 28%, 330px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.time-model-library { position: sticky; top: 132px; container: time-model-library / inline-size; }
.time-model-list { display: grid; gap: 7px; padding: 12px; }
.time-model-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd9e7;
  border-radius: 10px;
  background: #fff;
  color: #1a3856;
  text-align: left;
  cursor: pointer;
}
.time-model-card:hover,
.time-model-card.selected { border-color: #1685ae; background: #eef9fd; box-shadow: 0 0 0 2px rgba(22,133,174,.1); }
.time-model-card > span:first-child { display: grid; gap: 2px; min-width: 0; }
.time-model-card > span:first-child strong,
.time-model-card > span:first-child small { white-space: normal; overflow-wrap: anywhere; }
.time-model-card small { color: #60758b; font-size: 10px; }
.time-model-count { display: grid; place-items: center; min-width: 38px; font-weight: 900; }
.time-model-count small { font-weight: 600; }
.time-model-card i { font-style: normal; }
.time-model-editor { container: time-model-editor / inline-size; }
.time-model-form { display: grid; gap: 14px; padding: 14px; }
.time-model-basics { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(150px, .75fr); gap: 10px; }
.time-model-basics .full { grid-column: 1 / -1; }
.time-model-days { overflow: hidden; border: 1px solid #ccdae7; border-radius: 11px; }
.time-model-day-head,
.time-model-day { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 110px 100px 70px; gap: 8px; align-items: center; padding: 7px 10px; }
.time-model-day-head { background: #edf4f9; color: #526a81; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.time-model-day { border-top: 1px solid #e2eaf1; background: #f8fafc; opacity: .72; }
.time-model-day.active { background: #fff; opacity: 1; }
.time-model-day label { display: grid; gap: 2px; }
.time-model-day label span { color: #61758a; font-size: 9px; font-weight: 700; }
.time-model-day-toggle { grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; }
.time-model-day input[type="time"],
.time-model-day input[type="number"] { width: 100%; min-height: 34px; padding: 4px 7px; border: 1px solid #c1d1e0; border-radius: 7px; }
.time-model-day output { justify-self: end; color: #156f95; font-weight: 900; }
.time-model-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.time-model-active { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid #cbd9e7; border-radius: 8px; background: #f8fbfd; font-weight: 700; }
.time-model-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; background: #eaf6fb; }
.time-model-footer > div { display: grid; color: #60758b; font-size: 10px; }
.time-model-footer strong { color: #135d80; font-size: 18px; }
.time-model-assignment,
.time-assignment-history { grid-column: 1 / -1; }
.time-assignment-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 220px); gap: 12px; padding: 14px; }
.time-employee-picker { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; max-height: 230px; overflow: auto; margin: 0; padding: 10px; border: 1px solid #cbd9e7; border-radius: 10px; }
.time-employee-picker legend { padding: 0 6px; color: #4f667d; font-size: 11px; font-weight: 800; }
.time-employee-picker label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 1px solid #dce6ef; border-radius: 8px; background: #fbfdff; }
.time-assignment-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.time-muted-row { opacity: .62; }
.time-device-guide,
.time-device-register { grid-column: 1 / -1; }
.time-device-guide ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 14px; list-style: none; counter-reset: terminal-step; }
.time-device-guide li { display: grid; gap: 4px; padding: 12px; border: 1px solid #cdddeb; border-radius: 10px; background: #f8fbfd; counter-increment: terminal-step; }
.time-device-guide li strong::before { content: counter(terminal-step); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: #1685ae; color: #fff; }
.time-device-guide li span { color: #5e7388; font-size: 11px; }
.time-device-guide code { overflow-wrap: anywhere; }
.time-device-guide-actions,
.time-row-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.time-device-guide-actions { margin: 0; padding: 0 14px 14px; }
.time-terminal-stage-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 14px; }
.time-terminal-stage-showcase article { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid #cbdbe8; border-radius: 12px; background: #f8fbfd; }
.time-terminal-stage-showcase b { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #176fa4; color: #fff; }
.time-terminal-stage-showcase article div { display: grid; gap: 4px; }
.time-terminal-stage-showcase span { color: #5c7186; font-size: 11px; line-height: 1.4; }
.time-terminal-stage-showcase a { width: max-content; margin-top: 4px; color: #116f9a; font-size: 11px; font-weight: 800; text-decoration: none; }
.time-terminal-stage-showcase a:hover { text-decoration: underline; }
.time-terminal-cards { display: grid; gap: 10px; padding: 14px; }
.time-terminal-card { overflow: hidden; border: 1px solid #cbdbe8; border-radius: 12px; background: #fff; }
.time-terminal-card-head { display: flex; justify-content: space-between; gap: 16px; padding: 13px; }
.time-terminal-card-head h3 { margin: 7px 0 2px; color: #173b5e; }
.time-terminal-card-head p { margin: 0; color: #65788c; font-size: 11px; }
.time-terminal-last-contact { display: flex; gap: 10px; padding: 8px 13px; border-top: 1px solid #e3ebf2; background: #f8fafc; color: #60758a; font-size: 11px; }
.time-tabs { align-items: stretch; gap: 9px; padding: 3px 1px 5px; }
.time-tab-group { display: grid; grid-template-rows: auto 1fr; gap: 3px; padding-right: 9px; border-right: 1px solid #d4e1ea; }
.time-tab-group:last-child { padding-right: 0; border-right: 0; }
.time-tab-group > span { padding-left: 3px; color: #73879a; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.time-tab-group > div { display: flex; gap: 4px; }
.time-tab-group .time-tab { min-height: 36px; border-radius: 10px; }
.time-model-advanced { display: grid; gap: 9px; }
.time-settings-section { overflow: hidden; border: 1px solid #cfdee9; border-radius: 12px; background: #fff; }
.time-settings-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 9px 13px; cursor: pointer; list-style: none; }
.time-settings-section > summary::-webkit-details-marker { display: none; }
.time-settings-section > summary::after { content: '⌄'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #edf5f9; color: #1a6f93; font-size: 17px; font-weight: 900; transition: transform .16s ease; }
.time-settings-section[open] > summary::after { transform: rotate(180deg); }
.time-settings-section > summary > span { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.time-settings-section > summary b { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #0e789f; color: #fff; }
.time-settings-section > summary strong { color: #173c5a; }
.time-settings-section > summary small { color: #667b8d; font-size: 10px; font-weight: 600; }
.time-settings-body { display: grid; gap: 12px; padding: 13px; border-top: 1px solid #d9e5ed; background: #f9fcfd; }
.time-section-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; background: #edf7fb; }
.time-section-intro p { margin: 0; color: #526d80; font-size: 11px; line-height: 1.45; }
.time-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 9px; }
.time-rule-grid .form-field { min-width: 0; }
.time-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 8px; }
.time-switch { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border: 1px solid #d3e1ea; border-radius: 9px; background: #fff; color: #345169; font-size: 11px; font-weight: 750; }
.time-switch input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #0d7da6; }
.time-shift-variant { display: grid; gap: 9px; margin-bottom: 9px; padding: 11px; border: 1px solid #ccdae6; border-left: 4px solid var(--shift-color,#1685ae); border-radius: 11px; background: #fff; }
.time-shift-variant-head { display: grid; grid-template-columns: 16px 100px minmax(180px,1fr) auto; gap: 8px; align-items: end; }
.time-shift-variant-head label,.time-shift-variant-times label { display: grid; gap: 3px; }
.time-shift-variant-head label span,.time-shift-variant-times label span { color: #65798b; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.time-shift-color { width: 12px; height: 38px; border-radius: 8px; background: var(--shift-color,#1685ae); }
.time-shift-variant input,.time-rule-grid input,.time-rule-grid select { width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid #bfd1df; border-radius: 8px; background: #fff; }
.time-shift-variant-times { display: grid; grid-template-columns: repeat(5,minmax(90px,1fr)); gap: 8px; }
.time-shift-weekdays { display: flex; gap: 5px; flex-wrap: wrap; }
.time-shift-weekdays label { display: block; }
.time-shift-weekdays input { position: absolute; opacity: 0; pointer-events: none; }
.time-shift-weekdays span { display: grid; place-items: center; width: 38px; height: 32px; border: 1px solid #c6d7e3; border-radius: 8px; background: #f8fbfd; color: #607589; font-size: 10px; font-weight: 900; }
.time-shift-weekdays input:checked + span { border-color: #0e7ca5; background: #e5f5fa; color: #0c678b; }
.time-empty-inline { padding: 12px; border: 1px dashed #c8d9e4; border-radius: 9px; color: #6b7f90; font-size: 11px; text-align: center; }
.time-capture-layout { display: grid; grid-template-columns: minmax(250px,.7fr) minmax(560px,1.5fr); gap: 12px; align-items: start; }
.time-capture-library { position: sticky; top: 132px; }
.time-capture-list { display: grid; gap: 7px; padding: 12px; }
.time-capture-card { display: grid; grid-template-columns: 5px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid #ccdae7; border-radius: 11px; background: #fff; color: #173b59; text-align: left; cursor: pointer; }
.time-capture-card > i { align-self: stretch; border-radius: 9px; background: var(--profile-color,#0b78a5); }
.time-capture-card > span { display: grid; gap: 2px; min-width: 0; }
.time-capture-card strong,.time-capture-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-capture-card small { color: #64788a; font-size: 10px; }
.time-capture-card > em { padding: 4px 6px; border-radius: 999px; background: #e8f5ee; color: #167454; font-size: 9px; font-style: normal; font-weight: 850; }
.time-capture-card:hover,.time-capture-card.selected { border-color: #0d7ea8; background: #eef9fc; box-shadow: 0 0 0 2px rgba(13,126,168,.1); }
.time-capture-editor { min-width: 0; }
.time-capture-editor { container: time-capture-editor / inline-size; }
.time-capture-form { display: grid; gap: 10px; padding: 14px; }
.time-capture-basics { display: grid; grid-template-columns: 1.2fr .65fr .35fr .8fr; gap: 9px; }
.time-capture-basics .full { grid-column: 1 / -1; }
.time-capture-section { overflow: hidden; border: 1px solid #d2e0e9; border-radius: 12px; background: #fbfdfe; }
.time-capture-section > header { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #d9e5ed; background: #eef7fa; }
.time-capture-section > header b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #0e789f; color: #fff; }
.time-capture-section > header div { display: grid; }
.time-capture-section > header strong { color: #173b59; }
.time-capture-section > header span { color: #64798b; font-size: 10px; }
.time-capture-section > .time-switch-grid,.time-capture-section > .time-action-picker,.time-capture-section > .form-field { margin: 11px; }
.time-action-picker { display: grid; grid-template-columns: repeat(5,minmax(92px,1fr)); gap: 7px; }
.time-action-picker label { display: block; }
.time-action-picker input { position: absolute; opacity: 0; pointer-events: none; }
.time-action-picker span { display: grid; place-items: center; min-height: 42px; padding: 6px; border: 1px solid #c5d6e2; border-radius: 9px; background: #fff; color: #3a586e; font-size: 10px; font-weight: 850; }
.time-action-picker input:checked + span { border-color: #0c7ea8; background: #0c7ea8; color: #fff; box-shadow: 0 4px 12px rgba(12,126,168,.18); }
.time-capture-assignment,.time-capture-history { grid-column: 1 / -1; }
.time-terminal-stage-showcase article { display:grid; grid-template-rows:auto 1fr auto; min-height:240px; border-radius:16px; background:#fff; box-shadow:0 9px 24px rgba(23,59,89,.08); }
.time-terminal-stage-showcase article b { width:34px; height:34px; }
.time-terminal-stage-showcase article div { align-content:start; }
.time-terminal-stage-showcase article strong { color:#173b59; font-size:15px; }
.time-terminal-stage-showcase article a { min-height:36px; padding:9px 10px; border-radius:9px; background:#eaf6fa; text-align:center; }
.time-stage-preview { display:grid; grid-template-rows:auto 1fr; overflow:hidden; min-height:230px; border:1px solid #cbdbe8; border-radius:16px; background:#fff; color:#173b59; text-decoration:none; box-shadow:0 9px 24px rgba(23,59,89,.08); transition:transform .16s ease,border-color .16s ease; }
.time-stage-preview:hover,.time-stage-preview:focus-visible { transform:translateY(-3px); border-color:#0c7ca5; outline:3px solid rgba(12,124,165,.16); outline-offset:2px; }
.stage-browser { display:flex; gap:4px; padding:8px 10px; border-bottom:1px solid #d6e3ec; background:#eef4f8; }
.stage-browser i { width:7px; height:7px; border-radius:50%; background:#9bb0bf; }
.stage-screen { display:grid; align-content:center; justify-items:center; gap:8px; padding:18px; text-align:center; background:linear-gradient(150deg,#fbfdfe,#edf4f7); }
.stage-screen b { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#0d789f; color:#fff; }
.stage-screen strong { color:#173b59; font-size:16px; }
.stage-screen small { color:#61778a; }
.stage-screen.success b { border-radius:50%; background:#16865e; }
.stage-screen.employee img { width:130px; height:52px; object-fit:contain; }
.stage-screen.employee strong { font-size:32px; }
@media (max-width: 1050px) {
  .time-model-layout { grid-template-columns: 1fr; }
  .time-model-library { position: static; }
  .time-capture-layout { grid-template-columns: 1fr; }
  .time-capture-library { position: static; }
  .time-model-assignment,
  .time-assignment-history { grid-column: auto; }
  .time-model-rules { grid-template-columns: repeat(2, 1fr); }
  .time-rule-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1180px) {
  .time-model-layout { grid-template-columns: 1fr; }
  .time-model-library { position: static; }
}
@media (max-width: 760px) {
  .time-model-day-head { display: none; }
  .time-model-day { grid-template-columns: 1fr 1fr 1fr; }
  .time-model-day-toggle { grid-column: 1 / -1; }
  .time-model-day output { justify-self: start; }
  .time-assignment-form,
  .time-model-basics { grid-template-columns: 1fr; }
  .time-device-guide ol,
  .time-terminal-stage-showcase { grid-template-columns: 1fr; }
  .time-terminal-card-head { flex-direction: column; }
  .time-tabs { display:grid; overflow:visible; }
  .time-tab-group { padding:0 0 7px; border-right:0; border-bottom:1px solid #d4e1ea; }
  .time-tab-group > div { overflow:auto; }
  .time-capture-basics,.time-rule-grid,.time-switch-grid { grid-template-columns:1fr; }
  .time-action-picker { grid-template-columns:repeat(2,1fr); }
  .time-shift-variant-head { grid-template-columns:16px 1fr auto; }
  .time-shift-variant-head .wide { grid-column:2 / -1; }
  .time-shift-variant-times { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 650px) {
  .time-model-rules,
  .time-employee-picker { grid-template-columns: 1fr; }
  .time-model-day { grid-template-columns: 1fr 1fr; }
}

/* Prevent long labels and configuration cards from crossing their boundaries. */
.time-model-layout,
.time-model-library,
.time-model-form,
.time-model-card,
.time-model-card > *,
.time-model-day > *,
.time-model-rules > *,
.time-assignment-form > *,
.time-device-guide li,
.time-terminal-stage-showcase article,
.time-terminal-card,
.time-terminal-card-head > *,
.time-tab-group,
.time-tab-group > div,
.time-settings-section,
.time-settings-section > summary > span,
.time-settings-body > *,
.time-rule-grid > *,
.time-switch-grid > *,
.time-shift-variant,
.time-shift-variant-head > *,
.time-shift-variant-times > *,
.time-capture-layout > *,
.time-capture-card > *,
.time-capture-form > *,
.time-capture-basics > *,
.time-capture-section,
.time-action-picker > * { min-width: 0; max-width: 100%; }
.time-model-layout :is(h3, h4, p, span, strong, small, label),
.time-device-layout :is(h3, h4, p, span, strong, small, label),
.time-capture-layout :is(h3, h4, p, span, strong, small, label),
.time-terminal-cards :is(h3, h4, p, span, strong, small, label) { overflow-wrap: anywhere; }
.time-rule-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.time-switch-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.time-capture-layout { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); }
.time-capture-basics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.time-capture-basics .full { grid-column: 1 / -1; }
.time-action-picker { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.time-shift-variant-times { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.time-tab-group > div { flex-wrap: wrap; }

/* The available content area can be much narrower than the browser because the
   application navigation is still visible. Container queries prevent the
   settings cards from waiting for an unrelated viewport breakpoint. */
@container time-settings (max-width: 1180px) {
  .time-break-library { grid-column: 1 / -1; }
  .time-model-layout,
  .time-capture-layout { grid-template-columns: 1fr; }
  .time-model-library,
  .time-capture-library { position: static; }
  .time-model-assignment,
  .time-assignment-history,
  .time-capture-assignment,
  .time-capture-history { grid-column: auto; }
}

@container time-model-library (max-width: 330px) {
  .time-model-card { grid-template-columns: minmax(0, 1fr) auto; }
  .time-model-card > .status-pill { grid-column: 1 / -1; justify-self: start; }
}

@container time-model-editor (max-width: 760px) {
  .time-model-basics { grid-template-columns: 1fr; }
  .time-model-basics .full { grid-column: auto; }
  .time-model-day-head { display: none; }
  .time-model-day { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time-model-day-toggle { grid-column: 1 / -1; }
  .time-model-day output { justify-self: start; }
  .time-section-intro,
  .time-model-footer { align-items: stretch; flex-direction: column; }
}

@container time-model-editor (max-width: 480px) {
  .time-model-day,
  .time-rule-grid,
  .time-switch-grid,
  .time-shift-variant-head,
  .time-shift-variant-times { grid-template-columns: 1fr; }
  .time-model-day-toggle,
  .time-model-day output,
  .time-shift-variant-head .wide { grid-column: auto; }
  .time-shift-color { width: 100%; height: 6px; }
}

@container time-capture-editor (max-width: 700px) {
  .time-capture-basics,
  .time-rule-grid,
  .time-switch-grid { grid-template-columns: 1fr; }
  .time-capture-basics .full { grid-column: auto; }
}

@media (max-width: 1180px) {
  .time-capture-layout { grid-template-columns: 1fr; }
  .time-capture-library { position: static; }
}

@media (max-width: 560px) {
  .time-model-day { grid-template-columns: 1fr; }
  .time-model-day-toggle,
  .time-model-day output { grid-column: auto; }
  .time-model-footer,
  .time-section-intro,
  .time-terminal-card-head { align-items: stretch; flex-direction: column; }
  .time-assignment-form,
  .time-shift-variant-head,
  .time-shift-variant-times,
  .time-action-picker { grid-template-columns: 1fr; }
  .time-shift-color { width: 100%; height: 6px; }
  .time-shift-variant-head .wide { grid-column: auto; }
}

.time-flex-target{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:18px;align-items:center;padding:18px;border:1px solid var(--border,#cddae7);border-radius:12px;background:var(--surface,#f5f8fc)}
.time-flex-target[hidden],.time-settings-section[hidden]{display:none!important}.time-flex-target p{margin:0;line-height:1.5}.time-employment-form input[readonly],.time-assignment-form input[readonly]{background:#eef3f8;font-weight:700;color:#244974}@media(max-width:700px){.time-flex-target{grid-template-columns:1fr}}