/* Monthly Schedule — month calendar + pending-jobs sidebar (Jobs module).
   Ported from the month-calendar prototype, scoped with an ms- prefix. */

/* Defined on :root (not .monthly-schedule-page) so the detached fixed-position
   elements — toast, "+N more" popover, assign modal — which render OUTSIDE the
   page wrapper can resolve them too. This file only loads on the monthly page. */
:root {
    --ms-green: #059669;
    --ms-green-dark: #047857;
    --ms-ink: #0f172a;
    --ms-muted: #64748b;
    --ms-line: #e2e8f0;
    --ms-insp-bg: #d1fae5; --ms-insp-ink: #065f46;
    --ms-svc-bg: #dbeafe;  --ms-svc-ink: #1e3a8a;
    --ms-p-low: #3b82f6; --ms-p-med: #f59e0b; --ms-p-high: #f97316; --ms-p-urg: #ef4444;
}

.monthly-schedule-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 460px;
    overflow: hidden;
}

.ms-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ===================== Pending Jobs sidebar ===================== */
.ms-sidebar {
    width: 320px; flex-shrink: 0; background: #fff;
    border: 1px solid var(--ms-line); border-radius: 10px;
    display: flex; flex-direction: column; overflow: hidden; margin-right: 14px;
}
.ms-sidebar-header {
    padding: 14px 16px; border-bottom: 1px solid var(--ms-line);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ms-sidebar-header h2 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px; }
.ms-sidebar-header h2 i { color: var(--ms-green); }
.ms-count { background: var(--ms-green); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 8px; min-width: 22px; text-align: center; }

.ms-filter-bar { padding: 10px 12px; border-bottom: 1px solid var(--ms-line); display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; position: relative; }
.ms-filter-bar .ms-count { margin-left: auto; }
.ms-filter-btn { font: inherit; font-size: 12px; line-height: 1; cursor: pointer; border: 1px solid var(--ms-line); background: #fff; color: #475569; border-radius: 8px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; }
.ms-filter-btn:hover { border-color: #cbd5e1; }
.ms-filter-btn.active { background: #ecfdf5; border-color: var(--ms-green); color: var(--ms-green-dark); }
.ms-badge { background: var(--ms-green); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 5px; min-width: 15px; text-align: center; }
.ms-filter-dropdown { position: absolute; top: calc(100% - 4px); left: 12px; z-index: 30; background: #fff; border: 1px solid var(--ms-line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.14); padding: 6px; min-width: 200px; max-height: 300px; overflow-y: auto; display: none; }
.ms-filter-dropdown.open { display: block; }
.ms-filter-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.ms-filter-opt:hover { background: #f1f5f9; }
.ms-filter-opt input { accent-color: var(--ms-green); width: 15px; height: 15px; }
.ms-dd-date { padding: 10px; }
.ms-date-title { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.ms-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; color: #475569; }
.ms-date-row input { border: 1px solid var(--ms-line); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.ms-date-reset { margin-top: 6px; width: 100%; border: none; background: #f1f5f9; color: #334155; border-radius: 6px; padding: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ms-date-reset:hover { background: #e2e8f0; }

.ms-search { padding: 10px 12px; border-bottom: 1px solid var(--ms-line); }
.ms-search input { width: 100%; font: inherit; font-size: 13px; }

.ms-job-list { flex: 1; overflow-y: auto; padding: 10px; }
.ms-job-list.dragover { background: #ecfdf5; outline: 2px dashed var(--ms-green); outline-offset: -6px; }
.ms-job-card { background: #fff; border: 1px solid var(--ms-line); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .12s; }
.ms-job-card:active { cursor: grabbing; }
.ms-job-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.ms-job-card.dragging { opacity: .45; }
.ms-job-card.priority-low { border-left-color: var(--ms-p-low); }
.ms-job-card.priority-medium { border-left-color: var(--ms-p-med); }
.ms-job-card.priority-high { border-left-color: var(--ms-p-high); }
.ms-job-card.priority-urgent { border-left-color: var(--ms-p-urg); }
.ms-job-card.type-inspection { background: var(--ms-insp-bg); }
.ms-job-card.type-service { background: var(--ms-svc-bg); }
.ms-jc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ms-jc-cust { font-weight: 600; font-size: 13px; line-height: 1.25; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; }
.ms-jc-cust i { margin-top: 2px; opacity: .85; flex-shrink: 0; }
.ms-jc-cust > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-jc-dur { font-size: 11px; color: #059669; background: #d1fae5; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ms-jc-days { font-size: 11px; color: #4338ca; background: #e0e7ff; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ms-jc-site { font-size: 12px; color: #475569; margin-top: 3px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ms-jc-site i { opacity: .8; flex-shrink: 0; }
.ms-jc-site > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-jc-attrs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.ms-jc-typerow { margin-top: 2px; }
.ms-jc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; color: #475569; }
.ms-jc-pill { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); border-radius: 6px; padding: 1px 6px; display: inline-flex; align-items: center; gap: 4px; }
.type-inspection .ms-jc-cust, .type-inspection .ms-jc-site { color: var(--ms-insp-ink); }
.type-service .ms-jc-cust, .type-service .ms-jc-site { color: var(--ms-svc-ink); }
.ms-type-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 5px; max-width: 100%; background: #3b82f6; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.ms-attr-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.ms-empty { text-align: center; color: var(--ms-muted); font-size: 13px; padding: 40px 16px; }
.ms-empty i { font-size: 28px; color: #cbd5e1; display: block; margin-bottom: 10px; }

/* ===================== Calendar ===================== */
.ms-cal { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ms-line); border-radius: 10px; overflow: hidden; }
.ms-cal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--ms-line); flex-shrink: 0; }
.ms-cal-title { font-size: 19px; font-weight: 700; min-width: 200px; }
.ms-cal-nav { display: flex; align-items: center; gap: 6px; }
.ms-cal-nav .btn { padding: 6px 12px; font-size: 13px; }
.ms-nav-btn { font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--ms-line); border-radius: 8px; width: 34px; height: 34px; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.ms-nav-btn:hover { background: #f1f5f9; }
.ms-today-btn { width: auto; padding: 0 14px; font-weight: 600; }
.ms-legend { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ms-muted); }
.ms-lg { display: inline-flex; align-items: center; gap: 6px; }
.ms-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ms-sw-insp { background: var(--ms-insp-bg); border: 1px solid var(--ms-insp-ink); }
.ms-sw-svc { background: var(--ms-svc-bg); border: 1px solid var(--ms-svc-ink); }

/* Bottom calendar legend (Status / Priority / Attributes) — mirrors Dispatch + Team Scheduling.
   Single row (nowrap) with horizontal scroll fallback so it stays on one line like Team Scheduling. */
.ms-cal-legend { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px 24px; padding: 10px 16px; border-top: 1px solid var(--ms-line); background: #fafafa; flex-shrink: 0; overflow-x: auto; }
.ms-legend-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ms-legend-label { font-size: 11px; font-weight: 600; color: var(--ms-muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.ms-legend-items { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 14px; }
.ms-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; white-space: nowrap; }
.ms-pri-sw { width: 20px; height: 20px; border-radius: 4px; border-left: 4px solid #cbd5e1; display: inline-block; flex-shrink: 0; }

/* Pending-card footer Inspection / Service color legend */
.ms-side-legend { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 12px; border-top: 1px solid var(--ms-line); background: #fafafa; font-size: 12px; color: var(--ms-muted); flex-shrink: 0; }

.ms-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--ms-line); flex-shrink: 0; }
.ms-weekdays div { padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ms-muted); text-transform: uppercase; border-right: 1px solid var(--ms-line); }
.ms-weekdays div:last-child { border-right: none; }

.ms-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; overflow-y: auto; }
.ms-day { border-right: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); min-height: 110px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.ms-day:nth-child(7n) { border-right: none; }
.ms-day.other-month { background: #fbfdff; }
.ms-day.dragover { background: #ecfdf5; box-shadow: inset 0 0 0 2px var(--ms-green); }
.ms-day-num { font-size: 12px; font-weight: 600; color: #334155; padding: 2px 4px; align-self: flex-start; border-radius: 6px; }
.ms-day.other-month .ms-day-num { color: #cbd5e1; }
.ms-day.today .ms-day-num { background: var(--ms-green); color: #fff; }
.ms-chips { display: flex; flex-direction: column; gap: 2px; }
.ms-chip { font-size: 11px; line-height: 1.25; padding: 2px 6px; border-radius: 4px; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; display: flex; align-items: center; gap: 5px; }
.ms-chip:active { cursor: grabbing; }
.ms-chip.dragging { opacity: .4; }
.ms-chip.type-inspection { background: var(--ms-insp-bg); color: var(--ms-insp-ink); }
.ms-chip.type-service { background: var(--ms-svc-bg); color: var(--ms-svc-ink); }
.ms-chip.priority-low { border-left-color: var(--ms-p-low); }
.ms-chip.priority-medium { border-left-color: var(--ms-p-med); }
.ms-chip.priority-high { border-left-color: var(--ms-p-high); }
.ms-chip.priority-urgent { border-left-color: var(--ms-p-urg); }
.ms-day-chip-badge { flex-shrink: 0; margin-left: auto; font-size: 9px; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 3px; background: rgba(15,23,42,.12); color: inherit; }
.ms-chip .ms-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ms-chip .ms-chip-attrs { display: inline-flex; gap: 2px; flex-shrink: 0; }
.ms-chip-attr-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.15); }
.ms-more { font-size: 11px; font-weight: 600; color: var(--ms-green-dark); cursor: pointer; padding: 1px 6px; }
.ms-more:hover { text-decoration: underline; }

/* Day "+N more" popover */
.ms-pop-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.25); display: none; z-index: 1050; }
.ms-pop-overlay.open { display: block; }
/* Centred in the viewport rather than anchored to the "+N more" chip. Anchoring
   put a popover that can grow to 70vh next to a chip low in the grid, so a busy
   day ran off the bottom of the window. Same centring as .ms-assign below. */
.ms-pop { position: fixed; z-index: 1051; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.28); width: 300px; max-width: 92vw; max-height: 70vh; display: none; flex-direction: column; overflow: hidden; }
.ms-pop.open { display: flex; }
.ms-pop-head { padding: 12px 14px; border-bottom: 1px solid var(--ms-line); display: flex; align-items: center; justify-content: space-between; }
.ms-pop-weekday { font-size: 13px; color: var(--ms-muted); font-weight: 600; }
.ms-pop-day { font-size: 24px; font-weight: 700; }
.ms-pop-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ms-pop-body .ms-chip { font-size: 12px; padding: 5px 8px; }

/* Assign popover */
.ms-assign-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: none; z-index: 1060; }
.ms-assign-overlay.open { display: block; }
.ms-assign { position: fixed; z-index: 1061; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.3); width: 360px; max-width: 92vw; display: none; flex-direction: column; overflow: hidden; }
.ms-assign.open { display: flex; }
.ms-assign-head { padding: 14px 16px; border-bottom: 1px solid var(--ms-line); display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ms-ink); }
.ms-assign-body { padding: 16px; }
.ms-assign-job { background: #f8fafc; border: 1px solid var(--ms-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 14px; }
.ms-assign-label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin: 10px 0 4px; }
.ms-assign-actions { padding: 12px 16px; border-top: 1px solid var(--ms-line); display: flex; justify-content: flex-end; gap: 8px; }

/* Match the app's standard select/input styling (white bg; the popover is not a
   .modal-body so it misses the global white-background rule app selects get). */
.ms-assign-body select.form-input,
.ms-assign-body input.form-input {
    width: 100%;
    background-color: #ffffff;
    color: var(--ms-ink);
}

/* Toast */
.ms-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ms-ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .25s; z-index: 1080; }
.ms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Job preview popover (double-click a scheduled chip) — mirrors the Dispatch view. */
.job-preview { position: fixed; z-index: 10000; width: 240px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 12px 14px; font-size: 12px; }
.job-preview-customer { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.job-preview-address { color: #475569; margin-bottom: 8px; line-height: 1.3; }
.job-preview-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.job-preview-type { background: #f1f5f9; color: #334155; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.job-preview-priority { padding: 2px 8px; border-radius: 4px; font-weight: 600; color: #ffffff; background: #64748b; }
.job-preview-priority.priority-low { background: #3b82f6; }
.job-preview-priority.priority-medium { background: #f59e0b; }
.job-preview-priority.priority-high { background: #f97316; }
.job-preview-priority.priority-urgent { background: #ef4444; }
.job-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.job-preview-link { color: #059669; font-weight: 600; text-decoration: none; }
.job-preview-link:hover { text-decoration: underline; }
/* Multi-day placement badge: {EstimatedDays} / {DaysPlaced} + status pill. */
.job-preview-days { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.job-preview-days-ratio { font-size: 13px; font-weight: 700; color: #0f172a; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; }
.job-preview-day-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; }

/* ===== Hover tooltip (.ms-tip) =====
   Replaces the native title= on calendar chips and pending cards. A native tooltip cannot
   carry structure, waits about a second to appear, and truncates — on a dense month grid the
   scheduler is hovering to answer "what IS this", so it has to be immediate and readable.

   Shares the visual language of .job-preview, the CLICK popover on the same screen, so the
   two read as the same family. It carries no actions: the click popover owns those, and a
   hover card with links you cannot reach without the pointer leaving is a trap. */

.ms-tip {
    position: fixed;
    z-index: 10001;
    width: 268px;
    background: #ffffff;
    border: 1px solid var(--ms-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 11px 13px;
    font-size: 12px;
    pointer-events: none;   /* never steals the hover, never blocks a drop target */
}

.ms-tip-title { font-size: 14px; font-weight: 700; color: var(--ms-ink); line-height: 1.25; }
.ms-tip-sub { color: #475569; margin-top: 2px; line-height: 1.3; }

.ms-tip-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ms-tip-type { background: #f1f5f9; color: #334155; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.ms-tip-type.type-inspection { background: var(--ms-insp-bg); color: var(--ms-insp-ink); }
.ms-tip-type.type-service { background: var(--ms-svc-bg); color: var(--ms-svc-ink); }

.ms-tip-priority { padding: 2px 8px; border-radius: 4px; font-weight: 600; color: #fff; background: #64748b; }
.ms-tip-priority.priority-low { background: var(--ms-p-low); }
.ms-tip-priority.priority-medium { background: var(--ms-p-med); }
.ms-tip-priority.priority-high { background: var(--ms-p-high); }
.ms-tip-priority.priority-urgent { background: var(--ms-p-urg); }

/* Label/value rows — PO, duration, day placement. */
.ms-tip-rows { margin-top: 9px; border-top: 1px solid var(--ms-line); padding-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.ms-tip-label { color: var(--ms-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ms-tip-value { color: var(--ms-ink); font-weight: 600; word-break: break-word; }

.ms-tip-attrs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ms-tip-attr { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #475569; }
.ms-tip-attr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* The chip or pending card the hover card is describing.
   With several look-alike chips in one day cell, and the card itself covering the ones
   below, there is otherwise nothing tying the card to its source. An OUTLINE rather than a
   border or padding change: outlines are drawn outside the box, so nothing reflows and the
   neighbouring chips do not shift while the pointer moves along a stack.
   z-index lifts the ring clear of the chip that follows it. */
.ms-chip.is-tip-target,
.ms-job-card.is-tip-target {
    outline: 2px solid var(--ms-green);
    outline-offset: 1px;
    position: relative;
    z-index: 2;
}