/* ---- Operations (projects, work orders, dispatch, time, safety) and team pages ---- */
.tp-amber-text { color: #b45309; }
.tp-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 1rem 1.25rem; }
.tp-card + .tp-card { margin-top: 0.75rem; }
.tp-section-title { font-size: 0.95rem; font-weight: 600; color: var(--tp-navy); margin-bottom: 0.5rem; }
.tp-muted-box { background: #f8f9fb; border: 1px dashed #d6dbe1; border-radius: 8px; padding: 1rem; color: #6c757d; text-align: center; }
.tp-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.tp-toolbar > .tp-grow { flex: 1 1 220px; max-width: 420px; }
.tp-field-sm { width: 180px; }
.tp-row-warning td { background: #fff8eb !important; }
.tp-row-danger td { background: #fff5f5 !important; }

/* Job header and finance cards */
.job-header { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 1rem 1.25rem; }
.job-number { color: #6c757d; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.fin-grid .tile-value { font-size: 1.35rem; }
.tile-danger { border-color: #dc3545; background: #fff5f5; }
.tile-good .tile-value { color: #15803d; }
.tile-bad .tile-value { color: #b91c1c; }
.tp-progress { height: 0.55rem; background: #e9ecef; border-radius: 999px; overflow: hidden; min-width: 60px; }
.tp-progress > span { display: block; height: 100%; background: var(--tp-blue); border-radius: 999px; }
.tp-progress.warn > span { background: #f59e0b; }
.tp-progress.over > span { background: #dc3545; }
.tp-range { width: 100%; accent-color: var(--tp-blue); }

/* Weather strip */
.weather-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.weather-day { flex: 0 0 auto; min-width: 92px; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.8rem; text-align: center; }
.weather-day.risk { background: #fff8eb; border-color: #f59e0b; }
.weather-day .wd-date { font-weight: 600; color: var(--tp-navy); }
.weather-day .wd-temp { font-size: 0.95rem; font-weight: 600; }
.weather-badge { display: inline-block; background: #fff3cd; color: #92400e; border: 1px solid #f59e0b; border-radius: 4px; padding: 0 0.35rem; font-size: 0.75rem; }

/* Timeline (gantt-ish) */
.gantt { position: relative; }
.gantt-row { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid #eef0f2; }
.gantt-track { position: relative; height: 1.1rem; background: #f1f3f5; border-radius: 4px; }
.gantt-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--tp-blue); min-width: 6px; }
.gantt-bar.done { background: #16a34a; }
.gantt-bar.milestone { background: var(--tp-navy); width: 10px !important; border-radius: 50%; }
.gantt-scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: #6c757d; margin-left: calc(32% + 0.75rem); }
@media (max-width: 576px) {
    .gantt-row { grid-template-columns: 1fr; gap: 0.2rem; }
    .gantt-scale { margin-left: 0; }
}

/* Photo gallery */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.media-tile { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4 / 3; background: #eef0f2; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 0.8rem; cursor: pointer; position: relative; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-play { font-size: 2.2rem; color: var(--tp-navy); line-height: 1; }
.media-meta { padding: 0.35rem 0.5rem; font-size: 0.75rem; }
.media-viewer { position: fixed; inset: 0; background: rgba(11, 26, 58, 0.88); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.media-viewer img { max-width: 100%; max-height: 82vh; border-radius: 6px; }
.media-viewer .mv-bar { color: #fff; margin-top: 0.75rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; }

/* Checklist */
.checklist-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid #eef0f2; }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; flex: 0 0 auto; }
.checklist-done .ci-text { text-decoration: line-through; color: #6c757d; }

/* Dispatch board */
.dispatch-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
.dispatch-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; }
.dispatch-col { background: #f8f9fb; border: 1px solid #e3e6ea; border-radius: 8px; min-height: 320px; display: flex; flex-direction: column; }
.dispatch-col.drop-hover { border-color: var(--tp-blue); background: #eef4ff; }
.dispatch-col.today .dc-head { background: var(--tp-navy); color: #fff; }
.dispatch-col.selected { box-shadow: inset 0 0 0 2px var(--tp-blue); }
.dc-head { padding: 0.4rem 0.6rem; font-weight: 600; font-size: 0.85rem; border-bottom: 1px solid #e3e6ea; border-radius: 8px 8px 0 0; background: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.dc-body { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.wo-card { background: #fff; border: 1px solid #dfe3e8; border-left: 4px solid var(--tp-blue); border-radius: 6px; padding: 0.45rem 0.55rem; font-size: 0.8rem; cursor: grab; }
.wo-card.prio-High { border-left-color: #f59e0b; }
.wo-card.prio-Urgent { border-left-color: #dc3545; }
.wo-card.prio-Low { border-left-color: #adb5bd; }
.wo-card.weather-risk { background: #fff8eb; }
.wo-card .woc-title { font-weight: 600; color: var(--tp-navy); }
.unscheduled-list { display: flex; flex-direction: column; gap: 0.45rem; max-height: 70vh; overflow-y: auto; }
.crew-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #eef0f2; font-size: 0.85rem; }
.crew-row:last-child { border-bottom: 0; }
@media (max-width: 992px) {
    .dispatch-layout { grid-template-columns: 1fr; }
    .unscheduled-list { max-height: none; }
}

/* Time clock */
.clock-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 1.25rem; text-align: center; }
.clock-elapsed { font-size: 2.6rem; font-weight: 700; color: var(--tp-navy); font-variant-numeric: tabular-nums; }
.clock-running { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12); }
.clock-btn { min-width: 200px; padding: 0.8rem 1.5rem !important; font-size: 1.1rem !important; }

/* Ratings */
.rating-stars { color: #f59e0b; letter-spacing: 0.05em; }
.rating-pick button { font-size: 1.6rem; line-height: 1; color: #d1d5db; background: none; border: 0; padding: 0 0.1rem; }
.rating-pick button.on { color: #f59e0b; }

/* Availability editor */
.avail-grid { display: grid; grid-template-columns: 70px 1fr 1fr 80px; gap: 0.4rem 0.6rem; align-items: center; max-width: 460px; }

/* Tabs scroll on phones */
.job-tabs .dxbl-tabs-tablist { flex-wrap: nowrap; overflow-x: auto; }
.tp-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

@media (max-width: 576px) {
    .clock-btn { width: 100%; }
    .tp-field-sm { width: 100%; }
    .fin-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Simple modal used by dispatch and other quick dialogs */
.tp-modal-backdrop { position: fixed; inset: 0; background: rgba(11, 26, 58, 0.45); z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem; overflow-y: auto; }
.tp-modal { background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); padding: 1.25rem; width: 100%; max-width: 620px; }
.side-panel.drop-hover { border-color: var(--tp-blue); background: #eef4ff; }