/* ============================================================
   style-39-workshop-capacity.css — FEAT-153 Workshop Capacity Board
   Prefix: .wcap-*
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.wcap-page {
    padding: 20px 24px;
    min-height: 100vh;
    font-family: inherit;
}

/* ── Header ────────────────────────────────────────────────── */
.wcap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.wcap-header-left  { display: flex; align-items: center; gap: 12px; }
.wcap-header-right { display: flex; align-items: center; gap: 10px; }

.wcap-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body[data-theme="dark"]  .wcap-page-title { color: #e8eaf0; }
body[data-theme="light"] .wcap-page-title { color: #1a1f2e; }

/* ── Date picker & refresh ─────────────────────────────────── */
.wcap-date-picker .SingleDatePickerInput {
    border-radius: 6px;
    border: 1px solid #3a4460;
    background: transparent;
}
body[data-theme="dark"]  .wcap-date-picker input { color: #c8cfe0; background: #1e2537; }
body[data-theme="light"] .wcap-date-picker input { color: #1a1f2e; background: #f0f2f7; }

.wcap-refresh-btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #3a5080;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
body[data-theme="dark"]  .wcap-refresh-btn { background: #1e2537; color: #9ab4d8; }
body[data-theme="light"] .wcap-refresh-btn { background: #eaf0fb; color: #2450a0; }
.wcap-refresh-btn:hover { opacity: 0.8; }

/* ── Status bar ─────────────────────────────────────────────── */
.wcap-status-bar  { margin-bottom: 12px; font-size: 0.82rem; min-height: 18px; }
.wcap-status-ok   { color: #5ec97e; }
.wcap-status-empty { color: #9aa3b5; }

/* ── Empty state ────────────────────────────────────────────── */
.wcap-empty {
    text-align: center;
    padding: 40px 0;
    font-size: 0.95rem;
    color: #9aa3b5;
}

/* ── Board / site sections ──────────────────────────────────── */
.wcap-sites        { display: flex; flex-direction: column; gap: 28px; }
.wcap-site-section { }
.wcap-site-header  {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid;
}
body[data-theme="dark"]  .wcap-site-header { color: #4a9eff; border-color: #2a3a5c; }
body[data-theme="light"] .wcap-site-header { color: #1a4a90; border-color: #c4d3ec; }

.wcap-slots-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Slot card ──────────────────────────────────────────────── */
.wcap-slot-card {
    flex: 1;
    min-width: 220px;
    max-width: 340px;
    border-radius: 10px;
    border: 1px solid;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s;
}
body[data-theme="dark"]  .wcap-slot-card {
    background: #1e2537;
    border-color: #2d3548;
}
body[data-theme="light"] .wcap-slot-card {
    background: #f7f9fd;
    border-color: #d4dced;
}
.wcap-slot-card--full {
    border-color: #dc3545 !important;
}
body[data-theme="dark"]  .wcap-slot-card--full { background: #231820; }
body[data-theme="light"] .wcap-slot-card--full { background: #fff5f5; }

.wcap-slot-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
body[data-theme="dark"]  .wcap-slot-label { color: #c8cfe0; }
body[data-theme="light"] .wcap-slot-label { color: #2a3550; }

/* ── Utilisation bar ────────────────────────────────────────── */
.wcap-util-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wcap-util-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
body[data-theme="dark"]  .wcap-util-track { background: #2d3548; }
body[data-theme="light"] .wcap-util-track { background: #d4dced; }

.wcap-util-fill {
    height: 100%;
    border-radius: 4px;
    background: #4a9eff;
    transition: width 0.3s;
}
.wcap-util-fill--full { background: #dc3545; }

.wcap-util-label {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
body[data-theme="dark"]  .wcap-util-label { color: #7a8aaa; }
body[data-theme="light"] .wcap-util-label { color: #5a6580; }
.wcap-util-label--full { color: #dc3545 !important; font-weight: 700; }

/* ── Booked list ────────────────────────────────────────────── */
.wcap-bk-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 28px;
}
.wcap-bk-row {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    align-items: center;
    border-radius: 4px;
    padding: 3px 6px;
}
body[data-theme="dark"]  .wcap-bk-row { background: #252b3b; }
body[data-theme="light"] .wcap-bk-row { background: #eaf0fb; }

.wcap-bk-vehicle { font-weight: 700; min-width: 70px; }
body[data-theme="dark"]  .wcap-bk-vehicle { color: #c8cfe0; }
body[data-theme="light"] .wcap-bk-vehicle { color: #1a2540; }

.wcap-bk-ref  { flex: 1; }
body[data-theme="dark"]  .wcap-bk-ref  { color: #8899aa; }
body[data-theme="light"] .wcap-bk-ref  { color: #5a6a80; }

.wcap-bk-user { font-size: 0.72rem; }
body[data-theme="dark"]  .wcap-bk-user { color: #667788; }
body[data-theme="light"] .wcap-bk-user { color: #8899aa; }

.wcap-no-bookings {
    font-size: 0.77rem;
    font-style: italic;
}
body[data-theme="dark"]  .wcap-no-bookings { color: #4a5570; }
body[data-theme="light"] .wcap-no-bookings { color: #a0aabb; }

/* ── Slot action buttons ─────────────────────────────────────── */
.wcap-slot-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.wcap-book-btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #3a5080;
    cursor: pointer;
    transition: opacity 0.15s;
}
body[data-theme="dark"]  .wcap-book-btn { background: #1d3a6a; color: #7ab8ff; }
body[data-theme="light"] .wcap-book-btn { background: #ddeeff; color: #1a4a90; }
.wcap-book-btn:hover { opacity: 0.8; }

.wcap-book-btn--full {
    border-color: #9b2230 !important;
}
body[data-theme="dark"]  .wcap-book-btn--full { background: #3a1520; color: #ff7a8a; }
body[data-theme="light"] .wcap-book-btn--full { background: #ffe5e8; color: #a01020; }

.wcap-admin-edit-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #5a4a20;
    cursor: pointer;
    transition: opacity 0.15s;
}
body[data-theme="dark"]  .wcap-admin-edit-btn { background: #2a2210; color: #f0b030; }
body[data-theme="light"] .wcap-admin-edit-btn { background: #fdf5e0; color: #7a5010; }
.wcap-admin-edit-btn:hover { opacity: 0.8; }

/* ── Modal overlay ───────────────────────────────────────────── */
.wcap-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcap-modal-box {
    border-radius: 12px;
    padding: 28px 32px;
    width: 440px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
body[data-theme="dark"]  .wcap-modal-box { background: #1a1f2e; }
body[data-theme="light"] .wcap-modal-box { background: #ffffff; }

.wcap-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
}
body[data-theme="dark"]  .wcap-modal-title { color: #e8eaf0; }
body[data-theme="light"] .wcap-modal-title { color: #1a1f2e; }

.wcap-modal-context { font-size: 0.85rem; }
.wcap-modal-ctx-text { font-weight: 600; }
body[data-theme="dark"]  .wcap-modal-ctx-text { color: #c8cfe0; }
body[data-theme="light"] .wcap-modal-ctx-text { color: #2a3550; }
.wcap-modal-ctx-count { }
body[data-theme="dark"]  .wcap-modal-ctx-count { color: #7a8aaa; }
body[data-theme="light"] .wcap-modal-ctx-count { color: #7a8aaa; }

/* ── Form elements inside modal ──────────────────────────────── */
.wcap-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wcap-form-label {
    font-size: 0.8rem;
    font-weight: 600;
}
body[data-theme="dark"]  .wcap-form-label { color: #8899aa; }
body[data-theme="light"] .wcap-form-label { color: #5a6a80; }

.wcap-form-input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
}
body[data-theme="dark"]  .wcap-form-input {
    background: #252b3b;
    border-color: #3a4460;
    color: #e8eaf0;
}
body[data-theme="light"] .wcap-form-input {
    background: #f7f9fd;
    border-color: #c4d3ec;
    color: #1a1f2e;
}

.wcap-form-textarea {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.88rem;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}
body[data-theme="dark"]  .wcap-form-textarea {
    background: #252b3b;
    border-color: #3a4460;
    color: #e8eaf0;
}
body[data-theme="light"] .wcap-form-textarea {
    background: #f7f9fd;
    border-color: #c4d3ec;
    color: #1a1f2e;
}

/* ── Override warning ────────────────────────────────────────── */
.wcap-override-warning {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #9b2230;
    background: rgba(220, 53, 69, 0.12);
    color: #ff7a8a;
}
body[data-theme="light"] .wcap-override-warning {
    color: #a01020;
    background: #ffe5e8;
}

/* ── Modal status ────────────────────────────────────────────── */
.wcap-modal-status {
    font-size: 0.82rem;
    min-height: 18px;
    color: #ff7a8a;
}

/* ── Modal action buttons ────────────────────────────────────── */
.wcap-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.wcap-btn-primary {
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    background: #2a5cbf;
    color: #ffffff;
    transition: opacity 0.15s;
}
.wcap-btn-primary:hover { opacity: 0.85; }

.wcap-btn-secondary {
    padding: 9px 20px;
    border-radius: 6px;
    border: 1px solid #3a4460;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
body[data-theme="dark"]  .wcap-btn-secondary { background: #252b3b; color: #9aa3b5; }
body[data-theme="light"] .wcap-btn-secondary { background: #eef0f5; color: #5a6a80; }
.wcap-btn-secondary:hover { opacity: 0.8; }

/* ── Busy overlay ────────────────────────────────────────────── */
.wcap-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcap-busy-text {
    padding: 18px 28px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
}
body[data-theme="dark"]  .wcap-busy-text { background: #1e2537; color: #c8cfe0; }
body[data-theme="light"] .wcap-busy-text { background: #ffffff;  color: #1a1f2e; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wcap-page         { padding: 12px 10px; }
    .wcap-slots-row    { flex-direction: column; }
    .wcap-slot-card    { max-width: 100%; }
    .wcap-modal-box    { padding: 18px 16px; }
}

/* ── FEAT-327 depot table ────────────────────────────────────── */
.wcap-depot-table { border-radius: 8px; overflow: hidden; border: 1px solid #2b3441; margin-bottom: 24px; }
.wcap-depot-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 100px;
    gap: 12px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid #1e2630;
}
.wcap-depot-row:last-child { border-bottom: none; }
.wcap-depot-header { background: #1a212b; font-size: 11px; font-weight: 700; color: #6b7580; text-transform: uppercase; letter-spacing: .05em; }
.wcap-depot-name { font-weight: 600; }
.wcap-depot-cap, .wcap-depot-pus-cap, .wcap-depot-eff { font-size: 13px; color: #a8b4c0; font-variant-numeric: tabular-nums; }

/* ── FEAT-327 advisory strip ─────────────────────────────────── */
.wcap-advisory { margin-top: 24px; }
.wcap-advisory-sections { display: flex; flex-direction: column; gap: 12px; }
.wcap-advisory-depot { border-radius: 8px; border: 1px solid #2b3441; overflow: hidden; }
.wcap-advisory-depot-name { padding: 8px 16px; font-weight: 700; font-size: 13px; background: #1a212b; border-bottom: 1px solid #2b3441; }
.wcap-advisory-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.wcap-day-cell {
    display: flex; flex-direction: column; align-items: center;
    min-width: 52px; padding: 6px 8px; border-radius: 6px;
    border: 1px solid transparent; font-size: 11px; gap: 2px;
}
.wcap-day-date  { color: #6b7580; font-size: 10px; }
.wcap-day-label { font-weight: 700; font-variant-numeric: tabular-nums; }
.wcap-day-ok      { background: #1e2a22; border-color: #2c4433; color: #7fd8b0; }
.wcap-day-over    { background: #2a1e1e; border-color: #5c2c2c; color: #f08f8f; }
.wcap-day-acked   { background: #2a2a18; border-color: #4a4820; color: #d4c870; }
.wcap-day-no-cap  { background: #1e2630; border-color: #2b3441; color: #6b7580; }

.wcap-ack-btn {
    font-size: 9px; padding: 1px 5px; border-radius: 10px;
    background: #3e1e1e; color: #f08f8f; border: 1px solid #5c2c2c;
    cursor: pointer; margin-top: 2px;
}
.wcap-ack-btn:hover { background: #5c2c2c; }

/* ── admin modal extras ──────────────────────────────────────── */
.wcap-ack-reason-dd { min-width: 200px; }

/* light theme */
body[data-theme="light"] .wcap-depot-header { background: #f5f7fa; color: #8b97a7; }
body[data-theme="light"] .wcap-depot-row { border-bottom-color: #eaeef2; }
body[data-theme="light"] .wcap-depot-table { border-color: #dde2e8; }
body[data-theme="light"] .wcap-advisory-depot { border-color: #dde2e8; }
body[data-theme="light"] .wcap-advisory-depot-name { background: #f5f7fa; border-bottom-color: #dde2e8; }
body[data-theme="light"] .wcap-day-ok    { background: #e8f8ef; border-color: #a8e0c4; color: #1e7a54; }
body[data-theme="light"] .wcap-day-over  { background: #fce8e8; border-color: #e8aaaa; color: #9b2222; }
body[data-theme="light"] .wcap-day-acked { background: #fdf9e3; border-color: #e8d89a; color: #7a6400; }
body[data-theme="light"] .wcap-day-no-cap{ background: #f5f7fa; border-color: #dde2e8; color: #aab1ba; }

@media (max-width: 420px) {
    .wcap-depot-row { grid-template-columns: 1fr 60px 80px; }
    .wcap-depot-pus-cap, .wcap-depot-eff { display: none; }
    .wcap-day-cell { min-width: 44px; padding: 4px 6px; }
}

/* ── Board SLA tab (FEAT-359) ───────────────────────────────── */
.wcap-tabs { margin-bottom: 14px; }
.wcap-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: transparent;
}
body[data-theme="dark"]  .wcap-tab { color: #8b93a7; }
body[data-theme="light"] .wcap-tab { color: #5a6478; }
.wcap-tab--selected { border-bottom: 2px solid #4a9eff !important; }
body[data-theme="dark"]  .wcap-tab--selected { color: #e8eaf0; }
body[data-theme="light"] .wcap-tab--selected { color: #1a1f2e; }

.wcap-sla-pane { padding-top: 6px; }
.wcap-sla-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.wcap-sla-depot-dd { min-width: 220px; }
.wcap-sla-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 16px 0 6px;
}
body[data-theme="dark"]  .wcap-sla-section-title { color: #9ab4d8; }
body[data-theme="light"] .wcap-sla-section-title { color: #2450a0; }
.wcap-sla-source { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.wcap-status-error, .wcap-error { color: #e06c75; }

@media (max-width: 420px) {
    .wcap-sla-toolbar { gap: 6px; }
    .wcap-sla-depot-dd { min-width: 100%; }
}