/* =============================================================
   app.css — Custom styles for Handyman Job Manager
   Built on top of Tabler (Bootstrap 5).
   Only overrides and additions — not a full stylesheet.
   ============================================================= */

/* ------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --font-base:       'Inter', system-ui, -apple-system, sans-serif;
    --color-primary:   #206bc4;
    --color-today:     #e8f0fe;
    --color-cancelled: #e9ecef;
    --color-linked:    #fff3cd;
    --chip-height:     48px;
    --header-height:   64px;
    --mob-bar-height:  60px; /* mobile bottom action bar */
}

body {
    font-family: var(--font-base);
    background-color: #f4f6fa;
}

/* Brand heading on login page */
.app-brand-text {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

/* ------------------------------------------------------------------
   OTP input
   ------------------------------------------------------------------ */
.otp-input {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    text-align: center;
}

/* ------------------------------------------------------------------
   Planner layout — full-viewport
   ------------------------------------------------------------------ */

/* Desktop: planner-page is the sticky header only */
.planner-page {
    position: sticky;
    top: 0;
    z-index: 150;
}

.planner-header {
    flex-shrink: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e6e7e9;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    z-index: 100;
}

.planner-header h1 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.week-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.week-label {
    display: inline-block;
    min-width: 210px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1d2939;
    white-space: nowrap;
}

/* planner-body: the scrollable grid area */
.planner-body {
    /* Desktop: fill remaining viewport below the sticky header */
    height: calc(100vh - var(--header-height));
    overflow: auto;
    position: relative;
}

/* Mobile: content scrolls between fixed top bar and fixed bottom bars */
@media (max-width: 640px) {
    .planner-body {
        height: auto;
        overflow: visible;
        padding-top: 54px;                         /* mob-top-bar height */
        padding-bottom: calc(52px + 64px + env(safe-area-inset-bottom)); /* emp-bar + bottom-bar */
    }
}


/* ------------------------------------------------------------------
   Planner grid table
   ------------------------------------------------------------------ */
.planner-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
    table-layout: fixed;
}

/* Sticky column — day names */
.planner-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    min-width: 90px;
    width: 90px;
}

/* Sticky header row */
.planner-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8f9fc;
    border-bottom: 2px solid #b0b7c8;
    padding: .6rem .75rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4b5675;
    white-space: nowrap;
}

.planner-table thead th.sticky-col {
    z-index: 30;   /* above both sticky row + sticky col */
}

/* Employee column drag handle */
.emp-drag-handle {
    display: inline-block;
    cursor: grab;
    color: #c0c7d8;
    font-size: .75rem;
    letter-spacing: -.1em;
    margin-right: .3rem;
    user-select: none;
    transition: color .1s;
}
.planner-emp-col:hover .emp-drag-handle {
    color: var(--color-primary);
}
.planner-emp-col:active .emp-drag-handle {
    cursor: grabbing;
}

/* Drag-and-drop states */
.emp-dragging {
    opacity: .4;
}
.emp-drag-over {
    background: #eff6ff !important;
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}


/* Day label cells */
.planner-table .planner-day-col {
    padding: .5rem .6rem;
    border-right: 2px solid #b0b7c8;
    vertical-align: top;
    background: #f8f9fc;
}

.planner-day-name {
    font-weight: 700;
    font-size: .9rem;
    color: #1d2939;
}

.planner-day-date {
    font-size: .8rem;
    color: #667085;
    margin-top: 2px;
}

.planner-today-badge {
    margin-top: 4px;
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

/* tbody rows fill the remaining viewport height equally.
   Table cells treat 'height' as a minimum, so content can still push rows taller. */
.planner-table tbody tr {
    height: calc((100vh - var(--header-height) - 38px) / 7);
}

/* Today row — no background highlight, only the badge in the day label indicates today */
.planner-row.planner-today .planner-day-col {
    background-color: #d0e3ff !important;
}

/* Job cells */
.planner-table td {
    vertical-align: top;
    border: 1px solid #c2c7d4;
    padding: .4rem .5rem;
    min-width: 160px;
}

/* ------------------------------------------------------------------
   Alternating column shading (skip col 1 = sticky day label)
   ------------------------------------------------------------------ */
.planner-table thead th:nth-child(even),
.planner-table tbody td:nth-child(even) {
    background-color: #f4f6fb;
}

.planner-table thead th:nth-child(odd):not(.sticky-col),
.planner-table tbody td:nth-child(odd):not(.planner-day-col) {
    background-color: #ffffff;
}

/* ------------------------------------------------------------------
   Alternating row shading
   ------------------------------------------------------------------ */
.planner-table tbody tr:nth-child(odd) > td:not(.planner-day-col) {
    /* already white from column rule — darken slightly */
    filter: brightness(0.985);
}

.planner-table tbody tr:nth-child(even) > td:not(.planner-day-col) {
    filter: brightness(0.972);
}

/* Today row always wins regardless of column/row parity */
.planner-row.planner-today .planner-day-col {
    background-color: #d0e3ff !important;
    filter: none !important;
}

.planner-cell-inner {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 56px;
}

/* ------------------------------------------------------------------
   Job chips
   ------------------------------------------------------------------ */
.job-chip {
    display: block;
    padding: 1px 4px 1px 6px;
    border-left: 3px solid var(--color-primary);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.5;
    color: #1d2939;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .1s;
}

.job-chip:hover {
    background: rgba(99,102,241,.07);
    color: var(--color-primary);
}

/* Cancelled chip */
.job-chip.job-cancelled {
    border-left-color: #adb5bd;
    color: #6c757d;
    text-decoration: line-through;
    opacity: .75;
}

/* Multi-day chip */
.job-chip.job-linked {
    border-left-color: #e6a817;
}

/* WA quick-buttons — inline, hidden until chip is hovered */
.chip-wa-row {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    opacity: 0;
    vertical-align: middle;
    transition: opacity .15s;
}

.job-chip:hover .chip-wa-row {
    opacity: 1;
}

.chip-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    text-decoration: none;
    color: #25d366;
    background: rgba(37,211,102,.12);
    transition: background .12s;
}

.chip-wa-btn:hover {
    background: rgba(37,211,102,.28);
    color: #25d366;
}

.chip-wa-customer {
    color: #128c7e;
    background: rgba(18,140,126,.12);
}

.chip-wa-customer:hover {
    color: #128c7e;
    background: rgba(18,140,126,.28);
}

/* ------------------------------------------------------------------
   "New job" button inside cells
   ------------------------------------------------------------------ */
/* Row that holds "+ New" and the clock marker button */
.cell-btn-row {
    display: flex;
    gap: .3rem;
    margin-top: auto;
}

.btn-new-job {
    display: block;
    flex: 1 1 0;
    margin-top: 0;
    padding: .25rem;
    background: transparent;
    border: 1px dashed #b0bac9;
    border-radius: 5px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .12s, color .12s, border-color .12s;
}

.btn-new-job:hover {
    background: #eff6ff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Clock / marker button */
.btn-gap-marker {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .4rem;
    background: transparent;
    border: 1px dashed #b0bac9;
    border-radius: 5px;
    color: #94a3b8;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    line-height: 1;
}

.btn-gap-marker:hover {
    background: #f0fdf4;
    border-color: #4ade80;
    color: #16a34a;
}

/* ------------------------------------------------------------------
   Inactive employee columns — subtle visual cue
   ------------------------------------------------------------------ */
.cell-inactive {
    background: repeating-linear-gradient(
        -45deg,
        #fafafa,
        #fafafa 6px,
        #f3f4f6 6px,
        #f3f4f6 12px
    );
}


.planner-loading {
    opacity: .5;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Context menu
   ------------------------------------------------------------------ */
#job-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    display: none;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    border-radius: 8px;
    border: 1px solid #e0e4ef;
    padding: .35rem 0;
    background: #fff;
}

#job-context-menu .dropdown-item {
    padding: .55rem 1rem;
    font-size: .88rem;
    cursor: pointer;
}

/* ------------------------------------------------------------------
   Time Picker
   ------------------------------------------------------------------ */
.tp-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-drum-outer {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: #f8f9fc;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: .5rem .75rem;
}

.tp-sep {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1d2939;
    padding: 0 .1rem;
    user-select: none;
}

.tp-drum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.tp-arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    padding: .15rem .4rem;
    border-radius: 4px;
    transition: color .1s, background .1s;
}

.tp-arrow:hover {
    color: var(--color-primary);
    background: #eff6ff;
}

.tp-window {
    width: 56px;
    height: 48px;          /* shows exactly one item */
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e0e4ef;
    cursor: ns-resize;
    position: relative;
}

.tp-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease;
}

.tp-item {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: color .1s;
    user-select: none;
}

.tp-item.tp-selected {
    color: var(--color-primary);
}

/* Two pickers side by side inside modal */
.time-pickers-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.time-picker-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.time-picker-label {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5675;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Duration drum — wider window to fit labels like "1h 30m" */
.dur-drum-outer .tp-window {
    width: 80px;
}

/* ------------------------------------------------------------------
   Job modal
   ------------------------------------------------------------------ */
.job-modal-date-display {
    font-size: 1rem;
    font-weight: 600;
    color: #1d2939;
    padding: .4rem .6rem;
    background: #f8f9fc;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.job-modal-emp-display {
    font-size: 1rem;
    font-weight: 600;
    padding: .4rem .6rem;
    background: #f8f9fc;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.btn-change-field {
    font-size: .75rem;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    text-decoration: underline;
    white-space: nowrap;
}

.btn-change-field:hover {
    color: #0052a3;
}

/* Customer update prompt */
.customer-update-prompt {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 1rem;
    margin-top: .75rem;
}

.customer-update-prompt p {
    font-size: .9rem;
    margin-bottom: .6rem;
}

/* ------------------------------------------------------------------
   Desktop: hide mobile-only chrome
   ------------------------------------------------------------------ */
@media (min-width: 641px) {
    .mob-top-bar    { display: none !important; }
    .mob-emp-bar    { display: none !important; }
    .mob-bottom-bar { display: none !important; }
}

/* ------------------------------------------------------------------
   Mobile: hide desktop header, show mobile chrome
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .planner-page { display: none !important; }

    /* Time picker */
    .tp-item   { font-size: 1.1rem; }
    .tp-window { width: 48px; }
}

@media (max-width: 400px) {
    .time-pickers-row { gap: .75rem; }
}

/* ------------------------------------------------------------------
   Mobile top bar — action buttons
   ------------------------------------------------------------------ */
.mob-top-bar {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 .9rem;
    background: #fff;
    border-bottom: 1px solid #e6e7e9;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.mob-top-brand {
    font-size: 1rem;
    font-weight: 700;
    color: #1d2939;
    white-space: nowrap;
}

.mob-top-actions {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.mob-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.mob-icon-btn:hover, .mob-icon-btn:active { background: #f3f4f6; color: #374151; }
.mob-icon-btn.danger:hover, .mob-icon-btn.danger:active { background: #fef2f2; color: #dc2626; }

/* ------------------------------------------------------------------
   Mobile bottom bar — week navigation (thumb zone)
   ------------------------------------------------------------------ */
.mob-bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 8px .9rem;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e6e7e9;
    box-shadow: 0 -2px 12px rgba(0,0,0,.07);
    height: 64px;
}

/* Employee filter bar — fixed just above the bottom nav */
.mob-emp-bar {
    position: fixed;
    bottom: 64px;  /* sits on top of mob-bottom-bar */
    left: 0; right: 0;
    z-index: 199;
    background: #f4f6fa;
    padding: .45rem .9rem;
    border-top: 1px solid #e6e7e9;
    box-shadow: 0 -1px 6px rgba(0,0,0,.04);
    height: 52px;
    display: flex;
    align-items: center;
}

.mob-nav-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: none;
    color: #374151;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
}
.mob-nav-btn:hover, .mob-nav-btn:active { background: #f3f4f6; }
.mob-nav-btn.is-today { color: #6366f1; border-color: #c4b5fd; }
.mob-nav-btn.is-today:hover { background: #ede9fe; }
.mob-nav-btn.is-current { color: #6366f1; }

.mob-week-label-wrap {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}

.mob-week-label {
    font-size: .86rem;
    font-weight: 700;
    color: #1d2939;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Mobile week view — main content
   ------------------------------------------------------------------ */
.mob-week-view {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

/* Employee pill filter */
.mob-emp-filter { display: none; }   /* old inside-grid filter — hidden */

.mob-emp-pills {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 0;
    min-width: 0;
}
.mob-emp-pills::-webkit-scrollbar { display: none; }

.mob-emp-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    min-height: 36px;
}
.mob-emp-pill:hover, .mob-emp-pill:active { border-color: #6366f1; color: #4f46e5; background: #f5f3ff; }
.mob-emp-pill.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.mob-emp-pill.active:hover { background: #4f46e5; }

.mob-inactive-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

/* Day sections */
.mob-day-section { border-bottom: 2px solid #e6e7e9; }
.mob-day-section.is-today { border-left: 3px solid #6366f1; }
.mob-day-section.is-today .mob-day-header { background: #eef2ff; }

.mob-day-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    background: #f8f9fc;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 54px;  /* just below mob-top-bar; emp filter is now at the bottom */
    z-index: 90;
}

.mob-day-name { font-size: .88rem; font-weight: 700; color: #1d2939; }
.mob-day-date { font-size: .78rem; color: #667085; flex: 1 1 0; }

.mob-today-badge {
    font-size: .68rem; font-weight: 700;
    background: #6366f1; color: #fff;
    padding: 2px 8px; border-radius: 20px;
}

.mob-add-job-btn {
    display: flex; align-items: center; gap: .25rem;
    padding: .3rem .65rem;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; font-size: .78rem; font-weight: 600; color: #6b7280;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color .12s, color .12s, background .12s;
    min-height: 34px;
}
.mob-add-job-btn:hover, .mob-add-job-btn:active { border-color: #6366f1; color: #4f46e5; background: #f5f3ff; }

.mob-day-jobs {
    padding: .4rem .9rem .6rem;
    display: flex; flex-direction: column; gap: .5rem;
}

.mob-day-empty {
    font-size: .82rem; color: #c4c9d4;
    padding: .4rem 0; font-style: italic;
}

/* Job row */
.mob-job-row {
    display: flex; align-items: stretch;
    background: #fff;
    border: 1px solid #e4e7ec; border-radius: 10px;
    overflow: hidden; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .12s;
    min-height: 62px;
}
.mob-job-row:hover, .mob-job-row:active { box-shadow: 0 2px 10px rgba(99,102,241,.14); border-color: #a5b4fc; }
.mob-job-row.cancelled { opacity: .65; }

.mob-job-accent { width: 4px; background: #6366f1; flex-shrink: 0; }
.mob-job-row.cancelled .mob-job-accent { background: #d1d5db; }
.mob-job-row.linked    .mob-job-accent { background: #e6a817; }

.mob-job-body { flex: 1 1 0; min-width: 0; padding: .55rem .65rem; }

.mob-job-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }

.mob-job-time { font-size: .78rem; font-weight: 700; color: #6366f1; white-space: nowrap; }
.mob-job-row.cancelled .mob-job-time { color: #9ca3af; }

.mob-cancelled-badge {
    font-size: .65rem; font-weight: 700;
    background: #fee2e2; color: #dc2626;
    padding: 1px 6px; border-radius: 12px;
}
.mob-linked-badge {
    font-size: .65rem; font-weight: 700;
    background: #fef9c3; color: #7a5c00;
    padding: 1px 6px; border-radius: 12px;
}

.mob-job-ref {
    font-size: .92rem; font-weight: 700; color: #1d2939;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mob-job-row.cancelled .mob-job-ref { text-decoration: line-through; color: #9ca3af; }

.mob-job-addr {
    font-size: .78rem; color: #6b7280; margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mob-job-wa { display: flex; gap: .4rem; margin-top: .45rem; }

.mob-wa-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .55rem; border-radius: 6px;
    font-size: .72rem; font-weight: 600;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: background .12s;
}
.mob-wa-btn.worker   { color: #16a34a; background: rgba(37,211,102,.1); }
.mob-wa-btn.worker:hover   { background: rgba(37,211,102,.2); }
.mob-wa-btn.customer { color: #128c7e; background: rgba(18,140,126,.1); }
.mob-wa-btn.customer:hover { background: rgba(18,140,126,.2); }

.mob-job-edit-btn {
    flex-shrink: 0; width: 48px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: #d1d5db; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s, background .12s;
    border-left: 1px solid #f3f4f6;
}
.mob-job-edit-btn:hover, .mob-job-edit-btn:active { color: #6366f1; background: #f5f3ff; }

.mob-empty {
    padding: 2.5rem 1rem; text-align: center;
    color: #9ca3af; font-size: .9rem;
}

/* Context menu — bigger tap targets */
#job-context-menu .dropdown-item {
    padding: .7rem 1rem;
    font-size: .9rem;
}



/* ------------------------------------------------------------------
   Multi-day confirmation modal — must sit above the job modal
   ------------------------------------------------------------------ */
#multiDayModal {
    z-index: 1075;
}

/* ------------------------------------------------------------------
   Tom Select — solid dropdown background fix

   ------------------------------------------------------------------ */
.ts-wrapper.single .ts-dropdown,
.ts-dropdown {
    background: #fff !important;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
    z-index: 9999;
}

.ts-dropdown .option {
    background: #fff;
    color: #1d2939;
    padding: .45rem .75rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: #eff4ff;
    color: var(--color-primary);
}

.ts-dropdown .ts-option small {
    display: block;
    font-size: .78rem;
    color: #667085;
}

/* TomSelect control (the visible input box) */
.ts-control {
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    padding: .475rem .75rem !important;
    font-size: .95rem !important;
    font-family: var(--font-base) !important;
    color: #1d2939 !important;
    background: #fff !important;
    min-height: 42px;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
    cursor: text;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
    outline: none !important;
}

/* Placeholder text */
.ts-control input::placeholder,
.ts-control .placeholder {
    color: #9ca3af;
    font-size: .9rem;
}

/* Selected item pill */
.ts-control .item {
    color: #1d2939;
    font-weight: 500;
}


/* ------------------------------------------------------------------
   Flatpickr — custom theme to match Inter + primary blue
   ------------------------------------------------------------------ */
.flatpickr-calendar {
    font-family: var(--font-base);
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* Month header bar */
.flatpickr-months {
    background: var(--color-primary);
    border-radius: 12px 12px 0 0;
    padding: .25rem 0;
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: rgba(255, 255, 255, .75);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 600;
    font-family: var(--font-base);
}

/* Weekday header row */
.flatpickr-weekdays {
    background: #f4f6fa;
    border-bottom: 1px solid #e9ecef;
}

span.flatpickr-weekday {
    color: #667085;
    font-weight: 600;
    font-size: .78rem;
    background: #f4f6fa;
}

/* Day cells */
.flatpickr-day {
    border-radius: 8px;
    font-family: var(--font-base);
    color: #1d2939;
    font-size: .88rem;
}

.flatpickr-day:hover {
    background: #eff4ff;
    border-color: #eff4ff;
    color: var(--color-primary);
}

.flatpickr-day.today {
    border-color: var(--color-primary);
    font-weight: 700;
    color: var(--color-primary);
}

.flatpickr-day.today:hover {
    background: var(--color-primary);
    color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #c8cdd8;
}

/* Today indicator should not show when the day is disabled (before minDate) */
.flatpickr-day.today.flatpickr-disabled,
.flatpickr-day.today.flatpickr-disabled:hover {
    border-color: transparent;
    color: #c8cdd8;
    font-weight: 400;
}

/* Job start date anchor — greyed but visually marked as "from here" */
.flatpickr-day.fp-start-anchor,
.flatpickr-day.fp-start-anchor:hover {
    background: #eff4ff;
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
    opacity: 1;
    cursor: default;
}


/* ------------------------------------------------------------------
   Skip-day toggle buttons (job modal)
   ------------------------------------------------------------------ */
.skip-day-btn {
    min-width: 42px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .55rem;
    transition: background .12s, color .12s, border-color .12s;
}
.skip-day-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff1f2;
}
.skip-day-btn.active {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ------------------------------------------------------------------
   Form hint helper text
   ------------------------------------------------------------------ */
.form-hint {
    font-size: .78rem;
    color: #9ca3af;
}

/* ------------------------------------------------------------------
   Gap markers — the "-------------- HH:MM" strips inside cells
   ------------------------------------------------------------------ */
.gap-marker {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
    font-size: .76rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
}

.gap-marker:hover {
    background: rgba(148,163,184,.13);
    color: #64748b;
}

.gap-dashes {
    letter-spacing: -.5px;
    flex-shrink: 0;
    opacity: .7;
}

.gap-time {
    font-weight: 700;
    color: #475569;
    font-size: .78rem;
    letter-spacing: .03em;
}

.gap-marker:hover .gap-time {
    color: #1d2939;
}

/* Mobile variant */
.mob-gap-marker-item {
    padding: .35rem .75rem;
    border-radius: 6px;
    margin-bottom: 2px;
}

/* Mobile clock button — sits next to the "Add" button in day header */
.mob-gap-marker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}

.mob-gap-marker-btn:hover {
    background: #f0fdf4;
    border-color: #4ade80;
    color: #16a34a;
}

/* ------------------------------------------------------------------
   Gap marker picker panel
   ------------------------------------------------------------------ */
.gap-picker-panel {
    position: fixed;
    z-index: 3000;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    padding: 1rem;
    width: 230px;
    animation: gapPickerIn .12s ease;
}

@keyframes gapPickerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gap-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.gap-picker-label {
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gap-picker-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color .1s, background .1s;
}

.gap-picker-close-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

.gap-picker-time-display {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #1d2939;
    letter-spacing: .06em;
    margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
}

.gap-picker-slider {
    width: 100%;
    margin: 0 0 .25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
    height: 4px;
}

.gap-picker-time-labels {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: #b0bac9;
    margin-bottom: .9rem;
    padding: 0 2px;
}

.gap-picker-actions {
    display: flex;
    gap: .5rem;
}

.gap-picker-actions .btn {
    flex: 1;
}