/* Transport / TMS — theme tokens (มืด = ค่าเริ่มต้นแอป · สว่าง = MINDHAIR) */
#page-ops-tms-queue,
#page-ops-tms-trips,
#page-ops-tms-master,
#page-ops-tms-loading,
#page-ops-tms-track,
#page-ops-tms-appt,
#page-ops-tms-billing,
#page-ops-tms-dash,
#page-ops-tms-drive {
    --tms-bg: var(--bg-page);
    --tms-surface: var(--bg-surface);
    --tms-elevated: var(--bg-elevated);
    --tms-border: var(--border);
    --tms-text: var(--text-primary);
    --tms-muted: var(--text-muted);
    --tms-accent: #A8841A;
    --tms-soft: #d4af37;
    --tms-gold-deep: #8a6f16;
    --tms-danger: #f87171;
    --tms-success: #34d399;
    --tms-glow: rgba(168, 132, 26, 0.14);
    --tms-card-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --tms-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset;
    --tms-panel-veh-bg: rgba(168, 132, 26, 0.08);
    --tms-panel-drv-bg: rgba(52, 211, 153, 0.08);
    --tms-panel-zone-bg: rgba(212, 175, 55, 0.06);
    color-scheme: dark;
    color: var(--tms-text);
    background: var(--tms-bg);
}
html[data-erp-theme="light"] #page-ops-tms-queue,
html[data-erp-theme="light"] #page-ops-tms-trips,
html[data-erp-theme="light"] #page-ops-tms-master,
html[data-erp-theme="light"] #page-ops-tms-loading,
html[data-erp-theme="light"] #page-ops-tms-track,
html[data-erp-theme="light"] #page-ops-tms-appt,
html[data-erp-theme="light"] #page-ops-tms-billing,
html[data-erp-theme="light"] #page-ops-tms-dash,
html[data-erp-theme="light"] #page-ops-tms-drive {
    --tms-bg: #F7F4EF;
    --tms-surface: #FFFFFF;
    --tms-elevated: #F0EBE3;
    --tms-border: #DDD4C6;
    --tms-text: #1A1714;
    --tms-muted: #6B645C;
    --tms-accent: #A8841A;
    --tms-soft: #8A6F16;
    --tms-gold-deep: #785A12;
    --tms-danger: #C63438;
    --tms-success: #218358;
    --tms-glow: rgba(168, 132, 26, 0.1);
    --tms-card-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 20px rgba(40, 30, 10, 0.08),
        0 0 0 1px rgba(168, 132, 26, 0.12);
    --tms-input-shadow: 0 1px 2px rgba(40, 30, 10, 0.06) inset;
    --tms-panel-veh-bg: #FBF8F2;
    --tms-panel-drv-bg: #F5FAF7;
    --tms-panel-zone-bg: #F8F5EF;
    color-scheme: light;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--tms-glow), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168, 132, 26, 0.06), transparent),
        var(--tms-bg);
}
#page-ops-tms-queue .ops-prod-card,
#page-ops-tms-trips .ops-prod-card,
#page-ops-tms-master .ops-prod-card,
#page-ops-tms-loading .ops-prod-card,
#page-ops-tms-track .ops-prod-card,
#page-ops-tms-appt .ops-prod-card {
    background: var(--tms-surface) !important;
    border: 1px solid var(--tms-border) !important;
    color: var(--tms-text);
    border-radius: 12px;
    box-shadow: var(--tms-card-shadow);
}
html[data-erp-theme="light"] #page-ops-tms-queue .ops-prod-card,
html[data-erp-theme="light"] #page-ops-tms-trips .ops-prod-card,
html[data-erp-theme="light"] #page-ops-tms-master .ops-prod-card,
html[data-erp-theme="light"] #page-ops-tms-loading .ops-prod-card,
html[data-erp-theme="light"] #page-ops-tms-track .ops-prod-card,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-prod-card {
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.9), transparent 50%);
}
#page-ops-tms-queue h3,
#page-ops-tms-queue h4,
#page-ops-tms-trips h3,
#page-ops-tms-trips h4,
#page-ops-tms-master h3,
#page-ops-tms-master h4,
#page-ops-tms-loading h3,
#page-ops-tms-loading h4,
#page-ops-tms-track h3,
#page-ops-tms-track h4,
#page-ops-tms-appt h3,
#page-ops-tms-appt h4 {
    color: var(--tms-text) !important;
}
#page-ops-tms-queue .ops-sales-intro,
#page-ops-tms-trips .ops-sales-intro,
#page-ops-tms-master .ops-sales-intro,
#page-ops-tms-loading .ops-sales-intro,
#page-ops-tms-track .ops-sales-intro,
#page-ops-tms-appt .ops-sales-intro,
#page-ops-tms-queue .ops-prod-field label,
#page-ops-tms-trips .ops-prod-field label,
#page-ops-tms-master .ops-prod-field label,
#page-ops-tms-loading .ops-prod-field label,
#page-ops-tms-track .ops-prod-field label,
#page-ops-tms-appt .ops-prod-field label,
#page-ops-tms-queue #tms-queue-pagination label,
#page-ops-tms-queue #tms-queue-page-info {
    color: var(--tms-muted) !important;
}
/* ช่องกรอก — elevated ครีม + ขอบทองอ่อน (MINDHAIR mh-input) */
#page-ops-tms-queue .ops-prod-field input,
#page-ops-tms-queue .ops-prod-field select,
#page-ops-tms-queue input.ops-input,
#page-ops-tms-queue select.ops-input,
#page-ops-tms-trips .ops-prod-field input,
#page-ops-tms-trips .ops-prod-field select,
#page-ops-tms-trips input.ops-input,
#page-ops-tms-trips select.ops-input,
#page-ops-tms-trips #tms-trip-detail input,
#page-ops-tms-trips #tms-trip-detail select,
#page-ops-tms-master .ops-prod-field input,
#page-ops-tms-master .ops-prod-field select,
#page-ops-tms-master input.ops-input,
#page-ops-tms-master select.ops-input,
#page-ops-tms-loading .ops-prod-field input,
#page-ops-tms-loading .ops-prod-field select,
#page-ops-tms-loading input.ops-input,
#page-ops-tms-loading select.ops-input,
#page-ops-tms-loading #tms-load-detail input,
#page-ops-tms-loading #tms-load-detail select,
#page-ops-tms-track .ops-prod-field input,
#page-ops-tms-track .ops-prod-field select,
#page-ops-tms-track input.ops-input,
#page-ops-tms-track select.ops-input,
#page-ops-tms-track #tms-track-detail input,
#page-ops-tms-track #tms-track-detail select,
#page-ops-tms-track textarea.ops-input,
#page-ops-tms-appt .ops-prod-field input,
#page-ops-tms-appt .ops-prod-field select,
#page-ops-tms-appt input.ops-input,
#page-ops-tms-appt select.ops-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.35;
    border-radius: 10px;
    border: 1px solid var(--tms-border) !important;
    background: var(--tms-elevated) !important;
    color: var(--tms-text) !important;
    -webkit-text-fill-color: var(--tms-text) !important;
    caret-color: var(--tms-text) !important;
    color-scheme: dark;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    opacity: 1 !important;
    box-shadow: var(--tms-input-shadow);
}
#page-ops-tms-queue .ops-prod-field input[type="checkbox"],
#page-ops-tms-trips .ops-prod-field input[type="checkbox"],
#page-ops-tms-master .ops-prod-field input[type="checkbox"],
#page-ops-tms-loading .ops-prod-field input[type="checkbox"],
#page-ops-tms-track .ops-prod-field input[type="checkbox"],
#page-ops-tms-appt .ops-prod-field input[type="checkbox"],
#page-ops-tms-master .tms-zone-checks input[type="checkbox"],
#page-ops-tms-master input[type="checkbox"] {
    width: 1.1rem !important;
    min-width: 1.1rem !important;
    max-width: 1.1rem !important;
    height: 1.1rem !important;
    min-height: 1.1rem !important;
    padding: 0 !important;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 4px !important;
    box-shadow: none !important;
    -webkit-text-fill-color: unset !important;
    accent-color: var(--tms-success);
    cursor: pointer;
    color-scheme: light;
}
html[data-erp-theme="light"] #page-ops-tms-queue .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-queue .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-queue input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-queue select.ops-input,
html[data-erp-theme="light"] #page-ops-tms-trips .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-trips .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-trips input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-trips select.ops-input,
html[data-erp-theme="light"] #page-ops-tms-trips #tms-trip-detail input,
html[data-erp-theme="light"] #page-ops-tms-trips #tms-trip-detail select,
html[data-erp-theme="light"] #page-ops-tms-master .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-master .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-master input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-master select.ops-input,
html[data-erp-theme="light"] #page-ops-tms-loading .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-loading .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-loading input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-loading select.ops-input,
html[data-erp-theme="light"] #page-ops-tms-loading #tms-load-detail input,
html[data-erp-theme="light"] #page-ops-tms-loading #tms-load-detail select,
html[data-erp-theme="light"] #page-ops-tms-track .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-track .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-track input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-track select.ops-input,
html[data-erp-theme="light"] #page-ops-tms-track #tms-track-detail input,
html[data-erp-theme="light"] #page-ops-tms-track #tms-track-detail select,
html[data-erp-theme="light"] #page-ops-tms-track textarea.ops-input,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-prod-field input,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-prod-field select,
html[data-erp-theme="light"] #page-ops-tms-appt input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-appt select.ops-input {
    color-scheme: light;
}
#page-ops-tms-queue input::placeholder,
#page-ops-tms-trips input::placeholder,
#page-ops-tms-master input::placeholder,
#page-ops-tms-loading input::placeholder,
#page-ops-tms-track input::placeholder,
#page-ops-tms-track textarea::placeholder,
#page-ops-tms-appt input::placeholder {
    color: var(--tms-muted) !important;
    -webkit-text-fill-color: var(--tms-muted) !important;
    opacity: 0.85;
}
#page-ops-tms-queue .ops-prod-field input:focus,
#page-ops-tms-queue .ops-prod-field select:focus,
#page-ops-tms-queue input.ops-input:focus,
#page-ops-tms-queue select.ops-input:focus,
#page-ops-tms-trips .ops-prod-field input:focus,
#page-ops-tms-trips .ops-prod-field select:focus,
#page-ops-tms-trips input.ops-input:focus,
#page-ops-tms-trips select.ops-input:focus,
#page-ops-tms-trips #tms-trip-detail input:focus,
#page-ops-tms-trips #tms-trip-detail select:focus,
#page-ops-tms-master .ops-prod-field input:focus,
#page-ops-tms-master .ops-prod-field select:focus,
#page-ops-tms-master input.ops-input:focus,
#page-ops-tms-master select.ops-input:focus,
#page-ops-tms-loading .ops-prod-field input:focus,
#page-ops-tms-loading .ops-prod-field select:focus,
#page-ops-tms-loading input.ops-input:focus,
#page-ops-tms-loading select.ops-input:focus,
#page-ops-tms-track .ops-prod-field input:focus,
#page-ops-tms-track .ops-prod-field select:focus,
#page-ops-tms-track input.ops-input:focus,
#page-ops-tms-track select.ops-input:focus,
#page-ops-tms-track textarea.ops-input:focus,
#page-ops-tms-appt .ops-prod-field input:focus,
#page-ops-tms-appt .ops-prod-field select:focus,
#page-ops-tms-appt input.ops-input:focus,
#page-ops-tms-appt select.ops-input:focus {
    outline: none;
    background: var(--tms-surface) !important;
    border-color: rgba(168, 132, 26, 0.65) !important;
    color: var(--tms-text) !important;
    -webkit-text-fill-color: var(--tms-text) !important;
    caret-color: var(--tms-text) !important;
    box-shadow:
        var(--tms-input-shadow),
        0 0 0 3px rgba(168, 132, 26, 0.22),
        0 0 24px rgba(168, 132, 26, 0.12);
}
#page-ops-tms-queue select option,
#page-ops-tms-trips select option,
#page-ops-tms-master select option,
#page-ops-tms-loading select option,
#page-ops-tms-track select option,
#page-ops-tms-appt select option {
    background: var(--tms-surface);
    color: var(--tms-text);
}
#page-ops-tms-queue .ops-prod-btn.ghost,
#page-ops-tms-trips .ops-prod-btn.ghost,
#page-ops-tms-master .ops-prod-btn.ghost,
#page-ops-tms-loading .ops-prod-btn.ghost,
#page-ops-tms-track .ops-prod-btn.ghost,
#page-ops-tms-appt .ops-prod-btn.ghost,
#page-ops-tms-queue .ops-prod-btn.secondary,
#page-ops-tms-trips .ops-prod-btn.secondary,
#page-ops-tms-master .ops-prod-btn.secondary,
#page-ops-tms-loading .ops-prod-btn.secondary,
#page-ops-tms-track .ops-prod-btn.secondary,
#page-ops-tms-appt .ops-prod-btn.secondary {
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    color: var(--tms-text) !important;
}
#page-ops-tms-queue .ops-prod-btn.ghost:hover,
#page-ops-tms-trips .ops-prod-btn.ghost:hover,
#page-ops-tms-master .ops-prod-btn.ghost:hover,
#page-ops-tms-loading .ops-prod-btn.ghost:hover,
#page-ops-tms-track .ops-prod-btn.ghost:hover,
#page-ops-tms-appt .ops-prod-btn.ghost:hover,
#page-ops-tms-queue .ops-prod-btn.secondary:hover,
#page-ops-tms-trips .ops-prod-btn.secondary:hover,
#page-ops-tms-master .ops-prod-btn.secondary:hover,
#page-ops-tms-loading .ops-prod-btn.secondary:hover,
#page-ops-tms-track .ops-prod-btn.secondary:hover,
#page-ops-tms-appt .ops-prod-btn.secondary:hover {
    border-color: rgba(168, 132, 26, 0.4) !important;
    background: rgba(168, 132, 26, 0.12) !important;
    color: var(--tms-soft) !important;
}
#page-ops-tms-queue .ops-prod-btn.primary,
#page-ops-tms-trips .ops-prod-btn.primary,
#page-ops-tms-master .ops-prod-btn.primary,
#page-ops-tms-loading .ops-prod-btn.primary,
#page-ops-tms-track .ops-prod-btn.primary,
#page-ops-tms-appt .ops-prod-btn.primary {
    background: linear-gradient(180deg, var(--tms-soft) 0%, var(--tms-accent) 45%, var(--tms-gold-deep) 100%) !important;
    border: 1px solid rgba(120, 90, 18, 0.35) !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 240, 180, 0.45) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
        0 4px 14px rgba(168, 132, 26, 0.28);
}
#page-ops-tms-queue .ops-prod-btn.primary:hover,
#page-ops-tms-trips .ops-prod-btn.primary:hover,
#page-ops-tms-master .ops-prod-btn.primary:hover,
#page-ops-tms-loading .ops-prod-btn.primary:hover,
#page-ops-tms-track .ops-prod-btn.primary:hover,
#page-ops-tms-appt .ops-prod-btn.primary:hover {
    filter: brightness(1.06);
}
#page-ops-tms-trips #tms-trip-list .ops-prod-btn.ghost,
#page-ops-tms-trips #tms-trip-queue label.tms-q-row,
#page-ops-tms-master .tms-list-item,
#page-ops-tms-loading #tms-load-list .ops-prod-btn.ghost,
#page-ops-tms-track #tms-track-list .ops-prod-btn.ghost,
#page-ops-tms-track .tms-dash-card,
#page-ops-tms-appt #tms-appt-list .tms-list-item,
#page-ops-tms-appt #tms-appt-list .ops-prod-btn.ghost,
#page-ops-tms-appt #tms-appt-po-cands .tms-list-item {
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    border-radius: 10px;
    color: var(--tms-text) !important;
}
#page-ops-tms-trips #tms-trip-queue label.tms-q-row .tms-q-main,
#page-ops-tms-trips #tms-trip-detail .tms-stop-title,
#page-ops-tms-loading #tms-load-detail .tms-stop-title,
#page-ops-tms-track #tms-track-detail .tms-stop-title {
    color: var(--tms-text) !important;
}
#page-ops-tms-trips #tms-trip-queue label.tms-q-row .tms-q-meta,
#page-ops-tms-trips #tms-trip-detail .tms-stop-meta,
#page-ops-tms-loading #tms-load-detail .tms-stop-meta,
#page-ops-tms-track #tms-track-detail .tms-stop-meta {
    color: var(--tms-muted) !important;
    opacity: 1;
}
#page-ops-tms-trips #tms-trip-detail,
#page-ops-tms-loading #tms-load-detail,
#page-ops-tms-track #tms-track-detail {
    color: var(--tms-text) !important;
}
#page-ops-tms-trips #tms-trip-detail .tms-stop-card,
#page-ops-tms-loading #tms-load-detail .tms-stop-card,
#page-ops-tms-track #tms-track-detail .tms-stop-card {
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    border-radius: 10px;
    color: var(--tms-text) !important;
    margin-top: 10px;
    padding: 10px;
}
#page-ops-tms-trips #tms-trip-detail .tms-stop-line {
    border-bottom: 1px solid var(--tms-border) !important;
}
#page-ops-tms-trips #tms-trip-detail .tms-zone-tag {
    background: var(--tms-glow) !important;
    color: var(--tms-soft) !important;
}
/* แบนเนอร์จัดเที่ยว — ไม่ใช้พื้นขาวแข็งใน dark */
#page-ops-tms-trips .tms-banner,
#page-ops-tms-loading .tms-banner,
#page-ops-tms-track .tms-banner {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    color: var(--tms-text) !important;
}
#page-ops-tms-trips .tms-banner.is-ok,
#page-ops-tms-loading .tms-banner.is-ok {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    color: #6ee7b7 !important;
}
#page-ops-tms-trips .tms-banner.is-warn,
#page-ops-tms-loading .tms-banner.is-warn {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fca5a5 !important;
}
#page-ops-tms-trips .tms-banner.is-freight {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}
#page-ops-tms-trips .tms-banner.is-locked {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #93c5fd !important;
}
#page-ops-tms-trips .tms-banner.is-cost {
    background: rgba(148, 163, 184, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: var(--tms-text) !important;
}
#page-ops-tms-trips .tms-status-pill,
#page-ops-tms-loading .tms-status-pill,
#page-ops-tms-track .tms-status-pill {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(52, 211, 153, 0.15) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(52, 211, 153, 0.35);
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner.is-ok,
html[data-erp-theme="light"] #page-ops-tms-loading .tms-banner.is-ok {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner.is-warn,
html[data-erp-theme="light"] #page-ops-tms-loading .tms-banner.is-warn {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner.is-freight {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner.is-locked {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1e3a8a !important;
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner.is-cost,
html[data-erp-theme="light"] #page-ops-tms-trips .tms-banner {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-erp-theme="light"] #page-ops-tms-trips .tms-status-pill,
html[data-erp-theme="light"] #page-ops-tms-loading .tms-status-pill,
html[data-erp-theme="light"] #page-ops-tms-track .tms-status-pill {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0;
}
#page-ops-tms-queue .ops-sales-lines-table tbody tr:hover {
    background: rgba(168, 132, 26, 0.12) !important;
}
html[data-erp-theme="light"] #page-ops-tms-queue .ops-sales-lines-table tbody tr:hover {
    background: rgba(240, 235, 227, 0.65) !important;
}
#page-ops-tms-billing .ops-prod-card {
    background: var(--tms-surface) !important;
    border: 1px solid var(--tms-border) !important;
    color: var(--tms-text);
    border-radius: 12px;
    box-shadow: var(--tms-card-shadow);
}
#page-ops-tms-billing h3,
#page-ops-tms-billing h4 { color: var(--tms-text) !important; }
#page-ops-tms-billing .ops-sales-intro,
#page-ops-tms-billing .ops-prod-field label {
    color: var(--tms-muted) !important;
}
#page-ops-tms-billing input.ops-input,
#page-ops-tms-billing select.ops-input {
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    color: var(--tms-text) !important;
    -webkit-text-fill-color: var(--tms-text) !important;
    color-scheme: dark;
    min-height: 44px;
    border-radius: 10px;
    padding: 10px 14px;
}
html[data-erp-theme="light"] #page-ops-tms-billing input.ops-input,
html[data-erp-theme="light"] #page-ops-tms-billing select.ops-input {
    color-scheme: light;
}
#page-ops-tms-billing .ops-sales-lines-table,
#page-ops-tms-billing .ops-sales-lines-table th,
#page-ops-tms-billing .ops-sales-lines-table td,
#page-ops-tms-billing .tms-list-item {
    color: var(--tms-text) !important;
    border-color: var(--tms-border) !important;
}
#page-ops-tms-billing .ops-sales-lines-table th {
    background: var(--tms-elevated) !important;
}
#page-ops-tms-billing .tms-list-item {
    background: var(--tms-elevated) !important;
    border: 1px solid var(--tms-border) !important;
    border-radius: 10px;
}
#page-ops-tms-queue .ops-sales-lines-table,
#page-ops-tms-queue .ops-sales-lines-table th,
#page-ops-tms-queue .ops-sales-lines-table td {
    color: var(--tms-text) !important;
    border-color: var(--tms-border) !important;
}
#page-ops-tms-queue .ops-sales-lines-table th {
    background: var(--tms-elevated) !important;
    color: var(--tms-soft) !important;
}
#page-ops-tms-queue .ops-prod-msg.ok,
#page-ops-tms-trips .ops-prod-msg.ok,
#page-ops-tms-master .ops-prod-msg.ok,
#page-ops-tms-loading .ops-prod-msg.ok,
#page-ops-tms-track .ops-prod-msg.ok,
#page-ops-tms-appt .ops-prod-msg.ok {
    background: rgba(33, 131, 88, 0.1) !important;
    border: 1px solid rgba(33, 131, 88, 0.35) !important;
    color: var(--tms-success) !important;
    font-weight: 600;
}
#page-ops-tms-queue .ops-prod-msg.err,
#page-ops-tms-trips .ops-prod-msg.err,
#page-ops-tms-master .ops-prod-msg.err,
#page-ops-tms-loading .ops-prod-msg.err,
#page-ops-tms-track .ops-prod-msg.err,
#page-ops-tms-appt .ops-prod-msg.err {
    background: rgba(198, 52, 56, 0.08) !important;
    border: 1px solid rgba(198, 52, 56, 0.35) !important;
    color: var(--tms-danger) !important;
    font-weight: 600;
}
/* Master / นัดรถ — แท็บอ่านง่ายทั้งโหมดมืดและสว่าง */
#page-ops-tms-master .tms-master-tabs,
#page-ops-tms-appt .ops-sales-tabs {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(226, 232, 240, 0.28) !important;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
}
#page-ops-tms-master .tms-master-tab,
#page-ops-tms-appt .ops-sales-tab {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    background: rgba(148, 163, 184, 0.18) !important;
    border: 1px solid rgba(226, 232, 240, 0.28) !important;
    font-weight: 700;
    min-height: 42px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#page-ops-tms-master .tms-master-tab i {
    color: inherit !important;
    opacity: 0.95;
}
#page-ops-tms-master .tms-master-tab:hover,
#page-ops-tms-appt .ops-sales-tab:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(226, 232, 240, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
#page-ops-tms-master .tms-master-tab[data-tab="veh"].active {
    color: #fde68a !important;
    -webkit-text-fill-color: #fde68a !important;
    background: rgba(212, 175, 55, 0.28) !important;
    border-color: rgba(252, 211, 77, 0.7) !important;
}
#page-ops-tms-master .tms-master-tab[data-tab="drv"].active {
    color: #6ee7b7 !important;
    -webkit-text-fill-color: #6ee7b7 !important;
    background: rgba(52, 211, 153, 0.24) !important;
    border-color: rgba(110, 231, 183, 0.65) !important;
}
#page-ops-tms-master .tms-master-tab[data-tab="carrier"].active {
    color: #fdbA74 !important;
    -webkit-text-fill-color: #fdba74 !important;
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: rgba(251, 146, 60, 0.6) !important;
}
#page-ops-tms-master .tms-master-tab[data-tab="zone"].active {
    color: #f5e6a8 !important;
    -webkit-text-fill-color: #f5e6a8 !important;
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
}
#page-ops-tms-master .tms-master-tab[data-tab="rate"].active,
#page-ops-tms-appt .ops-sales-tab.active {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.28) !important;
    border-color: rgba(147, 197, 253, 0.65) !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tabs,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-sales-tabs {
    background: #efe8dc !important;
    border: 1px solid #c9bda8 !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-sales-tab {
    color: #1A1714 !important;
    -webkit-text-fill-color: #1A1714 !important;
    background: #fff !important;
    border-color: #c9bda8 !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab:hover,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-sales-tab:hover {
    color: #1A1714 !important;
    -webkit-text-fill-color: #1A1714 !important;
    background: #fbf8f2 !important;
    border-color: #A8841A !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab[data-tab="veh"].active {
    color: #785A12 !important;
    -webkit-text-fill-color: #785A12 !important;
    background: rgba(168, 132, 26, 0.18) !important;
    border-color: rgba(168, 132, 26, 0.55) !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab[data-tab="drv"].active {
    color: #145c3c !important;
    -webkit-text-fill-color: #145c3c !important;
    background: rgba(33, 131, 88, 0.16) !important;
    border-color: rgba(33, 131, 88, 0.5) !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab[data-tab="carrier"].active {
    color: #9a3412 !important;
    -webkit-text-fill-color: #9a3412 !important;
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: rgba(234, 88, 12, 0.45) !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab[data-tab="zone"].active {
    color: #5c4a2a !important;
    -webkit-text-fill-color: #5c4a2a !important;
    background: rgba(120, 90, 18, 0.12) !important;
    border-color: rgba(120, 90, 18, 0.45) !important;
}
html[data-erp-theme="light"] #page-ops-tms-master .tms-master-tab[data-tab="rate"].active,
html[data-erp-theme="light"] #page-ops-tms-appt .ops-sales-tab.active {
    color: #1e3a5f !important;
    -webkit-text-fill-color: #1e3a5f !important;
    background: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
}
#page-ops-tms-master .tms-master-panel {
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid var(--tms-border);
    background: var(--tms-bg);
    color: var(--tms-text);
}
#page-ops-tms-master .tms-master-panel-veh {
    border-color: rgba(168, 132, 26, 0.35);
    border-left: 5px solid var(--tms-accent);
    background: var(--tms-panel-veh-bg);
}
#page-ops-tms-master .tms-master-panel-drv {
    border-color: rgba(33, 131, 88, 0.35);
    border-left: 5px solid var(--tms-success);
    background: var(--tms-panel-drv-bg);
}
#page-ops-tms-master .tms-master-panel-carrier {
    border-color: rgba(249, 115, 22, 0.35);
    border-left: 5px solid #f97316;
    background: rgba(249, 115, 22, 0.06);
}
#page-ops-tms-master .tms-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    min-height: 0;
    cursor: pointer;
    color: var(--tms-text);
}
#page-ops-tms-master .tms-check-row span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tms-text);
}
#page-ops-tms-master .tms-check-row small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tms-muted);
}
#page-ops-tms-master .tms-master-panel-zone {
    border-color: rgba(120, 90, 18, 0.3);
    border-left: 5px solid var(--tms-gold-deep);
    background: var(--tms-panel-zone-bg);
}
#page-ops-tms-master .tms-master-panel-rate {
    border-color: rgba(37, 99, 235, 0.3);
    border-left: 5px solid #2563eb;
    background: rgba(37, 99, 235, 0.04);
}
#page-ops-tms-master .tms-master-panel-head h4 {
    color: var(--tms-text) !important;
}
#page-ops-tms-master .tms-zone-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 6px 0 2px;
}
#page-ops-tms-master .tms-zone-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    color: #0f172a;
    font-size: 14px;
}
#page-ops-tms-master .tms-zone-summary-card {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    color: #0f172a;
}
#page-ops-tms-master .tms-zone-summary-card h5 {
    margin: 0 0 8px;
    font-size: 14px;
}
#page-ops-tms-master .tms-zone-summary-card ul {
    margin: 0;
    padding-left: 1.2em;
}
/* TMS Dashboard — มอนิเตอร์วันนี้ + สรุปช่วง */
#page-ops-tms-dash .tms-dash-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 4px 4px 28px;
    color: var(--tms-text);
}
#page-ops-tms-dash .tms-today-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
#page-ops-tms-dash .tms-today-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tms-accent);
}
#page-ops-tms-dash .tms-today-head h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tms-text);
    line-height: 1.15;
}
#page-ops-tms-dash .tms-today-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-today-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#page-ops-tms-dash .tms-dash-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--tms-elevated);
    border: 1px solid var(--tms-border);
}
#page-ops-tms-dash .tms-dash-tab {
    min-height: 36px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-dash-tab {
    color: #1A1714;
}
#page-ops-tms-dash .tms-dash-tab.is-on {
    background: var(--tms-surface);
    color: var(--tms-text);
    border-color: var(--tms-border);
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12);
}
#page-ops-tms-dash .tms-today-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--tms-surface);
    border: 1px solid var(--tms-border);
    box-shadow: var(--tms-card-shadow);
}
#page-ops-tms-dash .tms-today-toolbar > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
#page-ops-tms-dash .tms-today-date-lab {
    font-size: 12px;
    font-weight: 600;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-today-toolbar input.ops-input[type="date"] {
    width: 11.5rem;
    min-width: 11.5rem;
    max-width: 16rem;
    flex: 0 0 auto;
}
#page-ops-tms-dash .tms-today-updated {
    margin-left: auto;
    font-size: 12px;
    color: var(--tms-muted);
    white-space: nowrap;
}
#page-ops-tms-dash .tms-today-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
#page-ops-tms-dash .tms-today-kpi {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    text-align: left;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    color: var(--tms-text);
    box-shadow: var(--tms-card-shadow);
    cursor: pointer;
    min-height: 108px;
}
#page-ops-tms-dash .tms-today-kpi .ico {
    grid-row: 1 / span 3;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    align-self: start;
}
#page-ops-tms-dash .tms-today-kpi .val {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
#page-ops-tms-dash .tms-today-kpi .lbl {
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}
#page-ops-tms-dash .tms-today-kpi .hint {
    font-size: 11px;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-today-kpi.tone-slate .ico { background: rgba(148,163,184,.18); color: #94a3b8; }
#page-ops-tms-dash .tms-today-kpi.tone-amber .ico { background: rgba(245,158,11,.16); color: #f59e0b; }
#page-ops-tms-dash .tms-today-kpi.tone-teal .ico { background: rgba(20,184,166,.16); color: #14b8a6; }
#page-ops-tms-dash .tms-today-kpi.tone-sky .ico { background: rgba(14,165,233,.16); color: #38bdf8; }
#page-ops-tms-dash .tms-today-kpi.tone-warn .ico { background: rgba(249,115,22,.16); color: #fb923c; }
#page-ops-tms-dash .tms-today-kpi.tone-green .ico { background: rgba(34,197,94,.16); color: #4ade80; }
#page-ops-tms-dash .tms-today-kpi.tone-rose .ico { background: rgba(244,63,94,.16); color: #fb7185; }
#page-ops-tms-dash .tms-today-kpi.tone-violet .ico { background: rgba(139,92,246,.16); color: #a78bfa; }
#page-ops-tms-dash .tms-today-kpi.tone-sky .val { color: #38bdf8; }
#page-ops-tms-dash .tms-today-kpi.tone-warn .val { color: #fb923c; }
#page-ops-tms-dash .tms-today-kpi.tone-green .val { color: #4ade80; }
#page-ops-tms-dash .tms-today-kpi.tone-rose .val { color: #fb7185; }
#page-ops-tms-dash .tms-today-kpi.tone-amber .val { color: #fbbf24; }
#page-ops-tms-dash .tms-today-kpi:hover {
    border-color: rgba(168, 132, 26, 0.45);
    transform: translateY(-1px);
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-slate .ico { color: #475569; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-amber .val { color: #b45309; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-sky .val { color: #0369a1; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-warn .val { color: #c2410c; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-green .val { color: #15803d; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-today-kpi.tone-rose .val { color: #be123c; }
#page-ops-tms-dash .tms-today-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 12px;
    margin-bottom: 12px;
}
#page-ops-tms-dash .tms-today-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
#page-ops-tms-dash .tms-today-mini-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
#page-ops-tms-dash .tms-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--tms-muted);
    background: rgba(15, 23, 42, 0.35);
    pointer-events: none;
    z-index: 2;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-map-empty {
    background: rgba(247, 244, 239, 0.72);
    color: #6B645C;
}
#page-ops-tms-dash .tms-dash-map-box { position: relative; }
#page-ops-tms-dash .tms-pipe {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
#page-ops-tms-dash .tms-pipe-step {
    position: relative;
    padding: 12px 12px 10px;
    border-radius: 14px;
    background: var(--tms-surface);
    border: 1px solid var(--tms-border);
    min-height: 72px;
}
#page-ops-tms-dash .tms-pipe-step .n {
    display: block;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
#page-ops-tms-dash .tms-pipe-step .lb {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-pipe-step.is-hot {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
#page-ops-tms-dash .tms-pipe-step.is-hot .n { color: #38bdf8; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-pipe-step.is-hot .n { color: #0369a1; }
#page-ops-tms-dash .tms-zone-board-panel { margin: 0 0 14px; }
#page-ops-tms-dash .tms-zone-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
#page-ops-tms-dash .tms-zone-card {
    text-align: left;
    width: 100%;
    min-height: 148px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    color: var(--tms-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--tms-card-shadow);
}
#page-ops-tms-dash .tms-zone-card:hover {
    border-color: rgba(56, 189, 248, 0.45);
}
#page-ops-tms-dash .tms-zone-card.is-on {
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}
#page-ops-tms-dash .tms-zone-card.is-idle { opacity: 0.72; }
#page-ops-tms-dash .tms-zone-card .code {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
#page-ops-tms-dash .tms-zone-card .name {
    font-size: 12px;
    color: var(--tms-muted);
    margin-top: -2px;
}
#page-ops-tms-dash .tms-zone-card .trip-n {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
#page-ops-tms-dash .tms-zone-card .trip-n span {
    font-size: 12px;
    font-weight: 600;
    color: var(--tms-muted);
    margin-left: 6px;
}
#page-ops-tms-dash .tms-zone-prog {
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}
#page-ops-tms-dash .tms-zone-prog > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}
#page-ops-tms-dash .tms-zone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-zone-cars {
    font-size: 12px;
    color: var(--tms-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#page-ops-tms-dash .tms-zone-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-zone-tag {
    background: #e0f2fe;
    color: #0369a1;
}
#page-ops-tms-dash .tms-st-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}
#page-ops-tms-dash .tms-st-draft { background: rgba(148,163,184,.16); color: #94a3b8; }
#page-ops-tms-dash .tms-st-planned { background: rgba(167,139,250,.16); color: #c4b5fd; }
#page-ops-tms-dash .tms-st-loading { background: rgba(20,184,166,.16); color: #5eead4; }
#page-ops-tms-dash .tms-st-departed { background: rgba(14,165,233,.18); color: #7dd3fc; }
#page-ops-tms-dash .tms-st-completed { background: rgba(34,197,94,.16); color: #86efac; }
#page-ops-tms-dash .tms-st-failed { background: rgba(244,63,94,.16); color: #fda4af; }
#page-ops-tms-dash .tms-st-cancelled { background: rgba(148,163,184,.12); color: #64748b; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-st-planned { color: #6d28d9; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-st-loading { color: #0f766e; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-st-departed { color: #0369a1; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-st-completed { color: #15803d; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-st-failed { color: #be123c; }

/* สรุปช่วง — การ์ด KPI */
#page-ops-tms-dash .tms-dash-exceptions {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;
}
#page-ops-tms-dash .tms-dash-exceptions:empty { display: none; }
#page-ops-tms-dash .tms-ex-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.55);
    color: var(--tms-text, #e2e8f0); font-size: 13px; font-weight: 600; cursor: pointer;
}
#page-ops-tms-dash .tms-ex-chip .n {
    font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right;
}
#page-ops-tms-dash .tms-ex-chip.warn {
    border-color: rgba(251,191,36,.55); background: rgba(245,158,11,.14); color: #fbbf24;
}
#page-ops-tms-dash .tms-ex-chip.danger {
    border-color: rgba(248,113,113,.55); background: rgba(239,68,68,.16); color: #fca5a5;
}
#page-ops-tms-dash .tms-ex-chip.info {
    border-color: rgba(56,189,248,.45); background: rgba(14,165,233,.14); color: #7dd3fc;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-ex-chip {
    background: #fff; color: #0f172a;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-ex-chip.warn { color: #b45309; background: #fffbeb; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-ex-chip.danger { color: #b91c1c; background: #fef2f2; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-ex-chip.info { color: #0369a1; background: #f0f9ff; }
#page-ops-tms-dash .tms-dash-funnel {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(148,163,184,.28); background: rgba(15,23,42,.4);
    font-size: 12px; color: var(--tms-text, #e2e8f0);
}
#page-ops-tms-dash .tms-dash-funnel:empty { display: none; }
#page-ops-tms-dash .tms-funnel-step {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 999px; background: rgba(148,163,184,.12);
}
#page-ops-tms-dash .tms-funnel-step .n { font-weight: 700; font-variant-numeric: tabular-nums; }
#page-ops-tms-dash .tms-funnel-arrow { opacity: .45; }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-dash-funnel {
    background: #f8fafc; border-color: #e2e8f0; color: #0f172a;
}
#page-ops-tms-dash .tms-dash-headline {
    margin: 12px 0 14px; padding: 14px 18px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(14,165,233,.12));
    border: 1px solid rgba(148,163,184,.25);
    font-size: 15px; font-weight: 600; color: var(--tms-text, #e2e8f0); line-height: 1.45;
}
#page-ops-tms-dash .tms-dash-headline .sub {
    display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .75;
}
#page-ops-tms-dash .tms-kpi-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px;
}
#page-ops-tms-dash .tms-kpi-card {
    background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148,163,184,.22);
    border-radius: 16px; padding: 14px 16px; min-height: 118px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-kpi-card {
    background: #fff; border-color: #e2e8f0; box-shadow: 0 4px 14px rgba(15,23,42,.06);
}
#page-ops-tms-dash .tms-kpi-card .top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
#page-ops-tms-dash .tms-kpi-card .lbl {
    font-size: 12px; opacity: .75; display: flex; align-items: center; gap: 7px;
}
#page-ops-tms-dash .tms-kpi-card .lbl i { width: 16px; text-align: center; }
#page-ops-tms-dash .tms-kpi-card .target {
    font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums;
}
#page-ops-tms-dash .tms-kpi-card .val {
    font-size: 28px; font-weight: 800; margin-top: 6px; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
#page-ops-tms-dash .tms-kpi-card.tone-orange .val { color: #fb923c; }
#page-ops-tms-dash .tms-kpi-card.tone-teal .val { color: #2dd4bf; }
#page-ops-tms-dash .tms-kpi-card.tone-rose .val { color: #fb7185; }
#page-ops-tms-dash .tms-kpi-card.tone-green .val { color: #4ade80; }
#page-ops-tms-dash .tms-kpi-card .meta-row {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 8px;
}
#page-ops-tms-dash .tms-kpi-progress {
    flex: 1; height: 6px; border-radius: 99px; background: rgba(148,163,184,.2); overflow: hidden;
}
#page-ops-tms-dash .tms-kpi-progress > span {
    display: block; height: 100%; border-radius: 99px; width: 0%;
}
#page-ops-tms-dash .tms-kpi-card.tone-orange .tms-kpi-progress > span { background: linear-gradient(90deg,#fb923c,#f97316); }
#page-ops-tms-dash .tms-kpi-card.tone-teal .tms-kpi-progress > span { background: linear-gradient(90deg,#2dd4bf,#14b8a6); }
#page-ops-tms-dash .tms-kpi-card.tone-rose .tms-kpi-progress > span { background: linear-gradient(90deg,#fb7185,#e11d48); }
#page-ops-tms-dash .tms-kpi-card.tone-green .tms-kpi-progress > span { background: linear-gradient(90deg,#4ade80,#16a34a); }
#page-ops-tms-dash .tms-kpi-delta {
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
#page-ops-tms-dash .tms-kpi-delta.up { color: #4ade80; }
#page-ops-tms-dash .tms-kpi-delta.down { color: #fb7185; }
#page-ops-tms-dash .tms-spark {
    width: 88px; height: 36px; flex-shrink: 0;
}
#page-ops-tms-dash .tms-dash-hero {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-bottom: 14px;
}
#page-ops-tms-dash .tms-dash-map-box {
    height: 280px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(148,163,184,.25); background: #0f172a;
}
#page-ops-tms-dash #tms-dash-live-map { width: 100%; height: 100%; }
#page-ops-tms-dash .tms-dash-tops {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px;
}
#page-ops-tms-dash .tms-dash-rank {
    display: grid; gap: 8px;
}
#page-ops-tms-dash .tms-dash-rank-row {
    display: flex; justify-content: space-between; gap: 8px; align-items: center;
    font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(148,163,184,.15);
}
#page-ops-tms-dash .tms-dash-rank-row .nm { opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-ops-tms-dash .tms-dash-compare {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px;
}
#page-ops-tms-dash .tms-dash-compare-item {
    border-radius: 12px; padding: 10px 12px;
    background: rgba(30,41,59,.55); border: 1px solid rgba(148,163,184,.18);
    font-size: 12px;
}
html[data-erp-theme="light"] #page-ops-tms-dash .tms-dash-compare-item { background: #f8fafc; }
#page-ops-tms-dash .tms-dash-compare-item .k { opacity: .7; margin-bottom: 4px; }
#page-ops-tms-dash .tms-dash-compare-item .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
#page-ops-tms-dash .tms-dash-headline-row {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
}
#page-ops-tms-dash .tms-dash-headline-row .tms-dash-headline { flex: 1; margin: 0; }
#page-ops-tms-dash .tms-dash-compare-cap {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--tms-muted); margin: 0 0 8px;
}
#page-ops-tms-dash .tms-note-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: #38bdf8; opacity: 0.85; cursor: pointer; flex-shrink: 0;
}
#page-ops-tms-dash .tms-note-btn:hover { opacity: 1; transform: scale(1.12); }
html[data-erp-theme="light"] #page-ops-tms-dash .tms-note-btn { color: #0284c7; }
.tms-note-modal {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.tms-note-modal.hidden { display: none; }
.tms-note-box {
    width: min(560px, 100%); max-height: min(80vh, 640px); overflow: auto;
    background: #fff; color: #0f172a; border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.tms-note-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 16px; font-weight: 700; border-bottom: 1px solid #e2e8f0;
    position: sticky; top: 0; background: #fff;
}
.tms-note-close {
    background: none; border: none; color: #64748b; cursor: pointer; font-size: 18px;
    padding: 2px 6px; border-radius: 6px;
}
.tms-note-close:hover { background: #f1f5f9; color: #0f172a; }
.tms-note-body { padding: 14px 18px 18px; font-size: 13.5px; line-height: 1.6; color: #334155; }
.tms-note-body p { margin: 10px 0 4px; font-weight: 600; color: #0f172a; }
.tms-note-body p:first-child { margin-top: 0; }
.tms-note-body ul { margin: 0 0 6px; padding-left: 20px; }
.tms-note-body li { margin: 3px 0; }
.tms-note-body code {
    background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #0f172a;
}
@media (max-width: 1100px) {
    #page-ops-tms-dash .tms-kpi-grid,
    #page-ops-tms-dash .tms-dash-compare,
    #page-ops-tms-dash .tms-dash-tops,
    #page-ops-tms-dash .tms-today-kpis,
    #page-ops-tms-dash .tms-today-side,
    #page-ops-tms-dash .tms-zone-board { grid-template-columns: 1fr 1fr; }
    #page-ops-tms-dash .tms-dash-hero,
    #page-ops-tms-dash .tms-today-hero,
    #page-ops-tms-dash .tms-pipe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    #page-ops-tms-dash .tms-kpi-grid,
    #page-ops-tms-dash .tms-dash-compare,
    #page-ops-tms-dash .tms-dash-tops,
    #page-ops-tms-dash .tms-today-kpis,
    #page-ops-tms-dash .tms-today-side,
    #page-ops-tms-dash .tms-pipe,
    #page-ops-tms-dash .tms-zone-board { grid-template-columns: 1fr; }
}

#page-ops-tms-dash .tms-dash-main {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
    margin-bottom: 12px;
}
#page-ops-tms-dash .tms-dash-panel {
    background: var(--tms-surface);
    border: 1px solid var(--tms-border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--tms-card-shadow);
}
#page-ops-tms-dash .tms-dash-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
#page-ops-tms-dash .tms-dash-panel-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--tms-text);
}
#page-ops-tms-dash .tms-dash-muted {
    font-size: 12px;
    color: var(--tms-muted);
}
#page-ops-tms-dash .tms-dash-status-list { display: grid; gap: 10px; }
#page-ops-tms-dash .tms-dash-bar-row {
    display: grid;
    grid-template-columns: 8.5rem 1fr 3.2rem;
    gap: 8px;
    align-items: center;
}
#page-ops-tms-dash .tms-dash-bar-row .name {
    font-size: 12px;
    color: var(--tms-muted);
    font-weight: 600;
}
#page-ops-tms-dash .tms-dash-bar-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
#page-ops-tms-dash .tms-dash-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tms-accent), var(--tms-gold-deep));
    min-width: 0;
}
#page-ops-tms-dash .tms-dash-bar-row .num {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--tms-text);
    font-variant-numeric: tabular-nums;
}
#page-ops-tms-dash .tms-dash-trips-panel { margin-bottom: 14px; }
#page-ops-tms-dash .tms-dash-trip-list {
    display: grid;
    gap: 8px;
    max-height: 22rem;
    overflow: auto;
}
#page-ops-tms-dash .tms-dash-trip {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--tms-elevated);
    border: 1px solid var(--tms-border);
    color: var(--tms-text);
}
#page-ops-tms-dash .tms-dash-trip .meta {
    font-size: 12px;
    color: var(--tms-muted);
    margin-top: 3px;
}
#page-ops-tms-dash .tms-dash-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(168, 132, 26, 0.14);
    color: var(--tms-soft);
    border: 1px solid rgba(168, 132, 26, 0.35);
}
#page-ops-tms-dash .tms-dash-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
#page-ops-tms-dash .tms-dash-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    color: var(--tms-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#page-ops-tms-dash .tms-dash-shortcut i { color: var(--tms-accent); width: 18px; text-align: center; }
#page-ops-tms-dash .tms-dash-shortcut:hover {
    border-color: rgba(168, 132, 26, 0.45);
    background: rgba(168, 132, 26, 0.08);
}
#page-ops-tms-dash .ops-prod-msg.ok {
    background: rgba(33, 131, 88, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    color: var(--tms-success) !important;
}
#page-ops-tms-dash .ops-prod-msg.err {
    background: rgba(248, 113, 113, 0.12) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    color: var(--tms-danger) !important;
}
#page-ops-tms-dash .ops-sales-intro { color: var(--tms-muted); }
@media (max-width: 860px) {
    #page-ops-tms-dash .tms-dash-main,
    #page-ops-tms-dash .tms-today-hero,
    #page-ops-tms-dash .tms-today-side { grid-template-columns: 1fr; }
    #page-ops-tms-dash .tms-today-updated { margin-left: 0; }
}

/* นัดรับเข้า / POD — ใช้โทเคนโทน */
#page-ops-tms-appt input,
#page-ops-tms-appt select,
#page-ops-tms-appt textarea {
    background: var(--tms-elevated) !important;
    color: var(--tms-text) !important;
    -webkit-text-fill-color: var(--tms-text) !important;
    caret-color: var(--tms-text) !important;
    border: 1px solid var(--tms-border) !important;
    color-scheme: inherit;
}
#page-ops-tms-appt input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
    filter: none;
}
html[data-erp-theme="dark"] #page-ops-tms-appt input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}
#page-ops-tms-track .ops-prod-scrap-photos {
    margin-top: 4px;
}
#page-ops-tms-track .ops-prod-scrap-thumb {
    background: var(--tms-elevated) !important;
    border-color: var(--tms-border) !important;
}
#page-ops-tms-track .tms-pod-cam-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 96px;
    height: 96px;
    padding: 8px;
    border-radius: 10px;
    border: 2px dashed rgba(168, 132, 26, 0.45);
    background: var(--tms-elevated);
    color: var(--tms-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}
#page-ops-tms-track .tms-pod-cam-box i { font-size: 22px; color: var(--tms-soft); }
#page-ops-tms-track .tms-pod-cam-box:active { background: var(--tms-border); }
@media (max-width: 768px) {
    .tms-trips-layout, .tms-master-layout, .tms-load-layout, .tms-track-layout { grid-template-columns: 1fr !important; }
    #page-ops-tms-track .tms-pod-cam-box,
    #page-ops-tms-track .ops-prod-scrap-thumb {
        width: 110px;
        height: 110px;
    }
}

/* โหมดคนขับ — จอง่าย ปุ่มใหญ่ */
.app-shell.is-driver-mode .sidebar-nav .nav-link { display: none; }
.app-shell.is-driver-mode .sidebar-nav .nav-link[data-route="drive"],
.app-shell.is-driver-mode .sidebar-nav .nav-link[data-route="dashboard"] { display: flex; }
.app-shell.is-driver-pin .sidebar-nav .nav-link { display: none !important; }
.app-shell.is-driver-pin .sidebar-nav .nav-link[data-route="drive"] { display: flex !important; }
.app-shell.is-driver-pin #btn-back-erp { display: none !important; }
#page-ops-tms-drive .tms-drive-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 8px 4px 32px;
}
#page-ops-tms-drive .tms-drive-hello {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--tms-text);
}
#page-ops-tms-drive .tms-drive-login-hint {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    color: var(--tms-text);
    box-shadow: var(--tms-card-shadow);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}
#page-ops-tms-drive .tms-drive-login-hint p { margin: 0 0 8px; }
#page-ops-tms-drive .tms-drive-login-hint ol {
    margin: 0 0 14px;
    padding-left: 1.25rem;
}
#page-ops-tms-drive .tms-drive-login-hint li { margin: 4px 0; }
#page-ops-tms-drive .tms-drive-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#page-ops-tms-drive .tms-drive-list { display: grid; gap: 10px; }
#page-ops-tms-drive .tms-drive-card {
    text-align: left;
    width: 100%;
    padding: 16px 16px;
    border-radius: 16px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    color: var(--tms-text);
    box-shadow: var(--tms-card-shadow);
    cursor: pointer;
}
#page-ops-tms-drive .tms-drive-card strong { font-size: 18px; }
#page-ops-tms-drive .tms-drive-card .meta {
    margin-top: 6px; font-size: 13px; color: var(--tms-muted);
}
#page-ops-tms-drive .tms-drive-big {
    width: 100%;
    min-height: 56px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#page-ops-tms-drive .tms-drive-big.share {
    background: #0ea5e9; color: #fff;
}
#page-ops-tms-drive .tms-drive-big.share.is-on {
    background: #0369a1;
}
#page-ops-tms-drive .tms-drive-big.ok {
    background: #16a34a; color: #fff;
}
#page-ops-tms-drive .tms-drive-big.bad {
    background: #e11d48; color: #fff;
}
#page-ops-tms-drive .tms-drive-stop {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--tms-border);
    background: var(--tms-surface);
    margin-top: 12px;
}
#page-ops-tms-drive .tms-drive-stop h4 { margin: 0 0 6px; font-size: 16px; }
#page-ops-tms-drive .tms-drive-stop .addr {
    font-size: 13px; color: var(--tms-muted); margin-bottom: 12px;
}
#page-ops-tms-drive .tms-drive-actions {
    display: grid; gap: 8px;
}
#page-ops-tms-drive .tms-drive-cam {
    min-height: 120px;
    border-radius: 14px;
    border: 2px dashed rgba(168,132,26,.45);
    background: var(--tms-elevated);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; cursor: pointer; font-weight: 700;
}
#page-ops-tms-drive .tms-drive-cam img {
    max-width: 100%; max-height: 180px; border-radius: 10px;
}
#page-ops-tms-drive .tms-drive-back {
    margin-bottom: 12px;
}

#page-ops-tms-master .tms-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#page-ops-tms-master .tms-picker-overlay.hidden { display: none; }
#page-ops-tms-master .tms-picker-panel {
    width: min(520px, 100%);
    max-height: min(70vh, 640px);
    overflow: auto;
    background: #fff;
    color: #0f172a;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
}
#page-ops-tms-master .tms-picker-rows {
    margin-top: 10px;
    display: grid;
    gap: 6px;
    max-height: 22rem;
    overflow: auto;
}
#page-ops-tms-master .tms-picker-row {
    text-align: left;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
}
#page-ops-tms-master .tms-picker-row:hover,
#page-ops-tms-master .tms-picker-row:focus {
    background: #fff;
    border-color: #94a3b8;
}

#page-ops-tms-appt .tms-appt-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}
#page-ops-tms-appt .tms-appt-kpi-item {
    min-width: 4.5rem;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--tms-border);
    background: var(--tms-elevated);
    text-align: center;
}
#page-ops-tms-appt .tms-appt-kpi-item b {
    display: block;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
#page-ops-tms-appt .tms-appt-kpi-item span {
    font-size: 11px;
    color: var(--tms-muted);
}
#page-ops-tms-appt .tms-appt-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
#page-ops-tms-appt .tms-appt-slot {
    border: 1px solid var(--tms-border);
    border-radius: 12px;
    padding: 10px;
    background: var(--tms-surface);
    min-height: 8rem;
}
#page-ops-tms-appt .tms-appt-slot h4 {
    margin: 0 0 8px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
#page-ops-tms-appt .tms-appt-slot h4 span {
    font-variant-numeric: tabular-nums;
    color: var(--tms-muted);
}
#page-ops-tms-appt .tms-appt-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 44px;
    padding: 6px 0;
}
#page-ops-tms-appt .tms-appt-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--tms-border);
    background: var(--tms-elevated);
    font-size: 12px;
}
#page-ops-tms-appt tr.tms-appt-overdue td {
    color: var(--tms-danger);
}
#page-ops-tms-appt .tms-status-pill {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--tms-border);
    text-transform: lowercase;
}
#page-ops-tms-appt #tms-appt-board .tms-list-item,
#page-ops-tms-appt #tms-appt-plan-body .ops-prod-btn.sm {
    margin-top: 0;
}
@media (max-width: 768px) {
    #page-ops-tms-appt .tms-appt-board {
        grid-template-columns: 1fr;
    }
}