/* Scheduler additions on top of base.css (the timesheet's look). */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Dark mode: re-point base.css's colour variables so the whole page follows, not just the scheduler's parts. */
@media (prefers-color-scheme: dark) {
  :root { --paper: #11181d; --raised: #182025; --ink: #e7e9e3; --muted: #9ca6a2; --line: #2b3339; color-scheme: dark; }
  input, select, textarea { border-color: #3a444b; }
  button { color: #16222c; }
  button.secondary { color: var(--ink); }
}
.sched-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #d3d6cc; }
.sched-spacer { flex: 1; }
.sched-muted { color: #576269; font-size: 0.9em; font-weight: normal; }
.sched-main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.sched-card { border: 1px solid #d3d6cc; border-radius: 10px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.sched-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.sched-card table { border-collapse: collapse; width: 100%; }
.sched-card th, .sched-card td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e6e8e1; }
.sched-button { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 8px; background: #bd7112; color: #16222c; text-decoration: none; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .sched-head, .sched-card { border-color: #2b3339; }
  .sched-card th, .sched-card td { border-color: #2b3339; }
  .sched-muted { color: #9ca6a2; }
}

/* Phase 2: tabs, forms, badges, notices */
.sched-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sched-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 6px 10px; cursor: pointer; color: inherit; font: inherit; }
.sched-tabs button.active { border-bottom-color: #bd7112; font-weight: 600; }
.sched-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sched-grid { grid-template-columns: minmax(0, 1fr); } }
.sched-card h3 { margin: 18px 0 8px; font-size: 1rem; }
.sched-form { display: grid; gap: 8px; max-width: 520px; }
.sched-field { display: grid; gap: 3px; }
.sched-field span { font-size: 0.85em; color: #576269; }
.sched-field input, .sched-field select, .sched-field textarea { font: inherit; padding: 6px 8px; border: 1px solid #b9beb2; border-radius: 6px; }
.sched-check { display: flex; gap: 6px; align-items: center; }
.sched-actions { display: flex; gap: 8px; margin-top: 4px; }
.sched-actions button { padding: 8px 14px; border-radius: 8px; border: 0; background: #bd7112; color: #16222c; font-weight: 600; cursor: pointer; }
.sched-actions button.secondary { background: none; border: 1px solid #b9beb2; color: inherit; }
.sched-actions button:disabled { opacity: 0.5; cursor: default; }
button.link { background: none; border: 0; padding: 0; color: #9c5d0e; text-decoration: underline; cursor: pointer; font: inherit; }
button.link.danger { color: #b3261e; }
.sched-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8em; white-space: nowrap; }
.sched-badge.ok { background: #dcebe1; color: #2c5e40; }
.sched-badge.warn { background: #f1dec0; color: #7a4a0a; }
.sched-badge.bad { background: #fce8e6; color: #b3261e; }
.sched-badge.grey { background: #e6e8e1; color: #576269; }
.sched-inactive td { color: #8a9196; }
.sched-selected td { background: #f1dec0; }
.sched-card tbody tr { cursor: default; }
.sched-notice { position: sticky; top: 0; z-index: 5; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.sched-notice.ok { background: #dcebe1; color: #2c5e40; }
.sched-notice.bad { background: #fce8e6; color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .sched-field span { color: #9ca6a2; }
  .sched-field input, .sched-field select, .sched-field textarea { background: #182025; color: #e7e9e3; border-color: #3a444b; }
  .sched-selected td { background: #3a2c15; }
  .sched-badge.ok, .sched-notice.ok { background: #1e3327; color: #6fbe8e; }
  .sched-badge.warn { background: #3a2c15; color: #f0ae55; }
  .sched-badge.bad, .sched-notice.bad { background: #3b1d1b; color: #f2b8b5; }
  .sched-badge.grey { background: #2b3339; color: #9ca6a2; }
  button.link { color: #f0ae55; }
}

/* Phase 3: jobs and scheduling */
.sched-row { display: flex; align-items: center; gap: 8px; }
.sched-row.wrap { flex-wrap: wrap; margin: 8px 0; }
.sched-form.wide { max-width: 760px; }
.sched-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .sched-two { grid-template-columns: 1fr; } }
.sched-rows { display: grid; gap: 6px; }
.sched-rowline { display: flex; gap: 8px; align-items: center; }
.sched-rowline select { flex: 1; }
.sched-rowline input[type=number] { width: 70px; }
.sched-rowline select, .sched-rowline input { font: inherit; padding: 6px 8px; border: 1px solid #b9beb2; border-radius: 6px; }
.sched-primary, .sched-danger, button.secondary { padding: 8px 14px; border-radius: 8px; border: 0; font-weight: 600; cursor: pointer; font: inherit; }
.sched-primary { background: #bd7112; color: #16222c; }
.sched-danger { background: #b3261e; color: #fff; }
button.secondary { background: none; border: 1px solid #b9beb2; color: inherit; }
.sched-primary:disabled, .sched-danger:disabled { opacity: 0.5; cursor: default; }
.sched-gap { background: #fce8e6; color: #b3261e; padding: 8px 12px; border-radius: 8px; margin: 6px 0; }
.sched-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sched-card textarea[name=overrideReason] { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid #b9beb2; border-radius: 6px; }
@media (prefers-color-scheme: dark) {
  .sched-gap { background: #3b1d1b; color: #f2b8b5; }
  .sched-rowline select, .sched-rowline input, .sched-card textarea[name=overrideReason] { background: #182025; color: #e7e9e3; border-color: #3a444b; }
}
.sched-actions button.sched-danger { background: #b3261e; color: #fff; }

/* Phase 4: timeline */
.tl-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-controls select { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid #b9beb2; }
.tl-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tl-stat { border: 1px solid #d3d6cc; border-radius: 8px; padding: 6px 12px; min-width: 110px; }
.tl-stat b { display: block; font-size: 1.3rem; }
.tl-stat b.alarm { color: #b3261e; }
.tl-stat span { font-size: 0.75rem; color: #576269; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; color: #576269; margin-bottom: 8px; }
.tl-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.tl-legend-break { flex-basis: 100%; height: 0; }
.tl-wrap { padding: 0; overflow-x: auto; }
.tl-row { display: flex; min-height: 42px; border-bottom: 1px solid #e6e8e1; }
.tl-label { position: sticky; left: 0; z-index: 2; flex: 0 0 260px; width: 260px; background: #f8f9f5; border: 0; border-right: 1px solid #d3d6cc;
  padding: 5px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.tl-label .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-label .m { font-size: 0.75rem; color: #576269; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; flex: 0 0 auto;
  background-image: repeating-linear-gradient(to right, #d9dcd3 0 1px, transparent 1px 100%); background-repeat: repeat-x; }
.tl-head { position: sticky; top: 0; z-index: 3; }
.tl-head .tl-label { cursor: default; font-size: 0.8rem; color: #576269; justify-content: flex-end; }
.tl-head .tl-track { height: 46px; background: #f1f3ec; }
.tl-cell { position: absolute; font-size: 0.75rem; color: #576269; white-space: nowrap; overflow: hidden; padding-left: 4px; border-left: 1px solid #d3d6cc; height: 20px; line-height: 20px; }
.tl-cell.month { top: 0; font-weight: 600; color: inherit; }
.tl-cell.week { top: 23px; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #d93025; z-index: 1; pointer-events: none; }
.tl-cutoff { position: absolute; top: 0; bottom: 0; border-left: 2px dashed #576269; z-index: 1; pointer-events: none; }
.tl-today span, .tl-cutoff span { position: absolute; bottom: 1px; left: 4px; font-size: 0.65rem; font-weight: 700; white-space: nowrap; }
.tl-today span { color: #d93025; }
.tl-cutoff span { color: #576269; bottom: 12px; }
.tl-bar { position: absolute; top: 5px; height: 21px; border: 0; border-radius: 4px; padding: 0 6px; font: inherit; font-size: 0.75rem; line-height: 21px;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; z-index: 2; }
.tl-bar:hover { filter: brightness(1.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.tl-bar.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-bar.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-useg { position: absolute; top: 30px; height: 7px; border-radius: 2px; z-index: 2; cursor: help; }
.s-ok { background: #3f7d58; } .s-sent { background: #2f6db5; } .s-issue { background: #b3261e; }
.s-open { background: #e39b34; color: #16222c !important; }
.s-unfill { background: #fff; color: #b3261e !important; box-shadow: inset 0 0 0 2px #b3261e; }
.s-done { background: #80868b; }
.s-cancel { background: repeating-linear-gradient(45deg, #dadce0 0 6px, #f1f3f4 6px 12px); color: #5f6368 !important; text-decoration: line-through; }
.u-on { background: #3f7d58; } .u-under { background: #e39b34; } .u-over { background: #b3261e; }
.u-part { background: repeating-linear-gradient(45deg, #bdc1c6 0 3px, #e8eaed 3px 6px); }
.u-none { background: #e8eaed; }
.u-text-on { color: #2c5e40 !important; } .u-text-under { color: #9c5d0e !important; } .u-text-over { color: #b3261e !important; }
@media (prefers-color-scheme: dark) {
  .tl-label { background: #182025; border-color: #2b3339; }
  .tl-head .tl-track { background: #1d262c; }
  .tl-row { border-color: #2b3339; }
  .tl-stat { border-color: #2b3339; }
  .tl-stat span, .tl-legend, .tl-label .m, .tl-cell { color: #9ca6a2; }
  .tl-track { background-image: repeating-linear-gradient(to right, #2b3339 0 1px, transparent 1px 100%); }
  .s-unfill { background: #12181c; }
  .u-text-on { color: #6fbe8e !important; } .u-text-under { color: #f0ae55 !important; } .u-text-over { color: #f2b8b5 !important; }
}
/* Keep the timesheet's global form/button styles out of the timeline. */
.tl-controls > * { flex: 0 0 auto; width: auto; margin: 0; }
.tl-controls .sched-spacer { flex: 1 1 auto; }
.tl-bar { box-sizing: border-box; height: 21px; min-height: 0; min-width: 0; margin: 0; padding: 0 6px; line-height: 21px; width: auto; box-shadow: none; }
.tl-label { margin: 0; border-radius: 0; min-height: 0; box-shadow: none; }
.tl-today span, .tl-cutoff span { background: #f1f3ec; padding: 0 3px; border-radius: 3px; }
@media (prefers-color-scheme: dark) { .tl-today span, .tl-cutoff span { background: #1d262c; } }
.tl-bar.s-unfill { box-shadow: inset 0 0 0 2px #b3261e; }

/* Standalone mode: sign-in, password change, hours import. */
.sched-narrow { max-width: 440px; margin: 40px auto; }
.sched-error { padding: 10px 12px; border-radius: 7px; background: #f5dedc; color: #912c2c; margin: 8px 0; }
.sched-warnbox { padding: 12px 14px; border-radius: 9px; background: #f1dec0; color: #5f3a08; margin-top: 12px; }
.sched-warnbox ul { margin: 6px 0 0; padding-left: 20px; }
@media (prefers-color-scheme: dark) { .sched-warnbox { background: #3a2c15; color: #f1dec0; } .sched-error { background: #3b1d1b; color: #f2b8b5; } }
.sched-import-result { margin-top: 16px; }
.sched-import-result:empty { display: none; }
#changePassword { min-height: 0; padding: 6px 12px; }

/* Help link in the header */
.sched-helplink { color: inherit; font-weight: 600; text-decoration: none; padding: 6px 12px; border: 1px solid #b9beb2; border-radius: 8px; }
.sched-helplink:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .sched-helplink { border-color: #3a444b; } }