/* --- MANPOWER SCHEDULER: GRID & PIN PAD --- */

#admin-grid-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-input);
}

.sched-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85em;
    table-layout: fixed;
}

.sched-grid-table th, 
.sched-grid-table td {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: center;
    position: relative;
}

/* Sticky First Column (Names) */
.sched-grid-table th:first-child,
.sched-grid-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-panel);
    width: 180px;
    text-align: left;
    font-weight: bold;
    border-right: 2px solid var(--accent-color);
}

/* Sticky Header */
.sched-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-topbar);
    color: var(--accent-color);
    height: 60px;
}

/* Intersection of sticky row and column */
.sched-grid-table thead th:first-child {
    z-index: 15;
}

.cell-am-pm {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
}

.status-box {
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 5px;
}

.shift-label {
    font-weight: 900;
    font-size: 0.7em;
    opacity: 0.5;
    min-width: 22px;
    text-align: left;
    border-right: 1px solid currentColor;
    margin-right: 2px;
}

.tech-info b {
    display: block;
    color: var(--text-main);
}

.status-box:hover {
    filter: brightness(1.2);
    border-color: var(--accent-color);
    transform: scale(1.02);
}

.status-box.active-copy {
    animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
    0% { border-color: transparent; }
    50% { border-color: var(--accent-color); }
    100% { border-color: transparent; }
}

/* Status Colors */
.stat-office    { background: rgba(0, 229, 255, 0.2); color: #00e5ff; border: 1px solid rgba(0, 229, 255, 0.4); }
.stat-field     { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.4); }
.stat-shop      { background: rgba(255, 153, 0, 0.2); color: #ff9900; border: 1px solid rgba(255, 153, 0, 0.4); }
.stat-available { background: rgba(255, 255, 255, 0.05); color: #888; border: 1px solid rgba(255, 255, 255, 0.1); }
.stat-day-off   { background: rgba(255, 51, 68, 0.2); color: #ff3344; border: 1px solid rgba(255, 51, 68, 0.4); }
.stat-vacation  { background: rgba(153, 0, 255, 0.2); color: #b366ff; border: 1px solid rgba(153, 0, 255, 0.4); }

/* PIN PAD */
.pin-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 1.5em;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.pin-btn:hover {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}
.pin-btn:active {
    transform: scale(0.9);
}

/* Tech View Cards */
.tech-day-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tech-day-info h4 { margin: 0; color: var(--accent-color); }
.tech-day-status { display: flex; gap: 10px; margin-top: 10px; }
.tech-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
}

/* --- Comment indicator in admin grid cells --- */
.cell-comment-indicator {
    font-size: 0.7em;
    color: var(--accent-color);
    margin-top: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255,160,0, 0.12);
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}
.cell-comment-indicator .comment-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Comment display in tech view cards --- */
.tech-day-comment {
    margin-top: 8px;
    font-size: 0.82em;
    color: var(--accent-color);
    opacity: 0.9;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.tech-day-comment i { margin-top: 2px; flex-shrink: 0; }

.comment-section {
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}
.comment-bubble {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9em;
    margin-bottom: 5px;
    position: relative;
}
.comment-time {
    font-size: 0.7em;
    color: var(--text-subtle);
    display: block;
    margin-bottom: 4px;
}

/* Desktop: push the action buttons to the right of the toolbar */
.sched-controls .push-right { margin-left: auto; }

/* ============================================================
   MOBILE / PHONE — office & dispatch grid + compact toolbar
   Frozen tech column (left) + frozen day header (top), middle
   scrolls both ways, pinch-to-zoom. Desktop untouched (<=768px).
   ============================================================ */
@media (max-width: 768px) {

    /* Let the whole view span the screen */
    /* One-line title: drop the "Last Synced" note, keep it on one row */
    #sched-last-sync { display: none !important; }
    .header-row h2 { font-size: 1.2em; white-space: nowrap; }

    /* ---- Compact toolbar ----
       Row 1: week switcher (full width). Row 2: division + refresh + theme. */
    .ctrl-label { display: none; }                 /* hide the big uppercase labels */
    .mobile-hide { display: none !important; }      /* Schedule Assistant hidden on phones */
    .sched-controls { padding: 10px !important; gap: 8px 10px !important; }
    .sched-week { flex: 1 1 100%; }                 /* week switcher on its own line */
    .sched-week #sched-current-week-label { flex: 1; min-width: 0 !important; }
    .sched-div { flex: 0 0 auto; }
    .sched-div select { width: auto; min-width: 140px !important; padding: 10px 12px; }
    .push-right { margin-left: 0 !important; }       /* don't push on mobile */
    .sched-controls .action-btn { padding: 10px 12px; font-size: 0.8em; letter-spacing: 0; min-width: 0; }
    .btn-label { display: none; }                    /* Refresh/Theme become icon-only */

    /* Remove the per-tech deactivate button on phones */
    .btn-deactivate-tech { display: none !important; }

    /* ---- Grid box: scrolls inside itself on both axes ---- */
    #admin-grid-wrapper {
        height: calc(100dvh - 220px) !important;
        min-height: 300px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;   /* let 2-finger pinch reach JS, keep 1-finger scroll */
    }

    /* Fixed layout keeps columns from collapsing; explicit table width
       (scaled by the pinch-zoom variable) makes it overflow -> horizontal
       scroll. Day columns auto-share the remaining width equally. */
    .sched-grid-table {
        table-layout: fixed;
        width: calc(88px + 7 * (124px * var(--sched-zoom, 1)));
        font-size: calc(0.8em * var(--sched-zoom, 1));
    }
    .sched-grid-table th:first-child,
    .sched-grid-table td:first-child {
        width: 88px;
        min-width: 88px;
    }

    /* Frozen panes must be OPAQUE so scrolled cells don't bleed through */
    .sched-grid-table td:first-child,
    .sched-grid-table th:first-child,
    .sched-grid-table thead th {
        background: var(--bg-main);
    }

    /* Shorter header + rows. Vertical sizes scale with --sched-zoom so a
       pinch grows/shrinks ROW HEIGHT too, not just the font. */
    .sched-grid-table thead th { height: calc(40px * var(--sched-zoom, 1)); }
    .sched-grid-table th,
    .sched-grid-table td { padding: calc(4px * var(--sched-zoom, 1)); }
    .cell-am-pm { gap: calc(3px * var(--sched-zoom, 1)); }
    .status-box {
        min-height: calc(30px * var(--sched-zoom, 1));
        padding: calc(3px * var(--sched-zoom, 1)) calc(5px * var(--sched-zoom, 1));
    }
    .tech-info b { font-size: 0.92em; }
}