body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #F4F6F9; color: #1A2340; }

/* ── Header Bar ── */
.header-bar {
    background: #0C3471; color: #fff;
    padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 8px rgba(12,52,113,0.25);
    min-height: 72px; margin: -20px -20px 20px -20px; position: relative;
    gap: 16px; flex-wrap: wrap;
}
.header-bar img { height: 32px; filter: brightness(0) invert(1); flex-shrink: 0; }
.header-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 200px; }
.header-titles { flex: 1; text-align: center; min-width: 0; }
.header-titles h1 { font-size: clamp(15px, 2.2vw, 20px); font-weight: 700; letter-spacing: 0.3px; margin: 0; color: #fff; }
.header-titles p { font-size: 12px; color: #A8C4E0; margin: 2px 0 0; }
.header-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 200px; justify-content: flex-end; }
@media (max-width: 768px) {
    .header-bar { padding: 12px 16px; min-height: auto; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .header-titles { order: 3; width: 100%; text-align: center; }
    .header-titles h1 { font-size: 15px; }
    .header-brand { order: 1; flex: none; }
    .header-actions { order: 2; flex: none; }
}
.btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; border: none; white-space: nowrap; transition: background 0.2s; width: auto; }
.btn-outline { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-outline:hover { background: rgba(255,255,255,.22); }
.btn-secondary { background: #e1e8f0; color: #0C3471; }
.btn-secondary:hover { background: #cdd7e3; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-danger:hover { background: #c82333; }
.container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
h1 { color: #0C3471; text-align: center; }
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
.resource { padding: 10px; margin: 5px 0; background: #e8f5e8; border-radius: 3px; }
form { display: flex; gap: 10px; flex-wrap: wrap; }
input, select, textarea, button { padding: 8px; border: 1px solid #ccc; border-radius: 3px; }
select { 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0 L5 6 L10 0 Z" fill="%23333"/></svg>') no-repeat right 8px center;
    background-size: 10px;
    padding-right: 28px;
    cursor: pointer;
}
textarea { width: 100%; flex-basis: 100%; resize: vertical; font-family: Arial, sans-serif; }
#workDescription { min-height: 120px; height: 120px; }
#comments { min-height: 40px; height: 40px; }
button { background: #0C3471; color: white; cursor: pointer; flex: none; width: 100%; }
button:hover { background: #008ABC; }
option:disabled { color: #999; }
.status-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.status-table th, .status-table td { border: 1px solid #ddd; padding: 8px; text-align: center; font-size: 12px; }
.status-table th { background: #0C3471; color: white; font-weight: bold; position: sticky; top: 0; z-index: 5; }
.person-name { font-weight: bold; background: #f0f0f0; text-align: left; }
.status-available { background: #64A70B; color: #fff; }
.status-busy { background: #FF6B6B; color: #fff; }
.status-leave { background: #9CA3AF; color: #FFFFFF; }
.status-lunch { background: #FDE68A; color: #92400E; }
.status-unavailable { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 4px, #e0e0e0 4px, #e0e0e0 8px); color: #999; }

/* Available Hours modal */
.slot-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; cursor:pointer; padding:5px 10px; border-radius:5px; border:1px solid #DDE3EC; transition:all .15s; user-select:none; }
.slot-pill input[type=checkbox] { accent-color:#008ABC; cursor:pointer; }
.slot-pill-on  { border-color:#008ABC; background:#e8f4fb; color:#0C3471; font-weight:600; }
.slot-pill-off { border-color:#DDE3EC; background:#f8f9fa; color:#999; font-weight:400; }
.avail-btn { padding:6px 14px; border:none; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; width:auto !important; }
.avail-btn-save  { background:#0C3471; color:#fff; }
.avail-btn-save:hover  { background:#008ABC; }
.avail-btn-all   { background:#64A70B; color:#fff; }
.avail-btn-all:hover   { background:#5a9209; }
.avail-btn-clear { background:#6c757d; color:#fff; }
.avail-btn-clear:hover { background:#5a6268; }

input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
#statusDate { cursor: pointer; }
.status-booked { background: #008ABC; color: #fff; cursor: pointer; }

/* Drag and Drop Styles */
.draggable-row {
    cursor: move;
    transition: all 0.2s ease;
}
.draggable-row:hover {
    background-color: #f8f9fa;
}
.draggable-row.dragging {
    opacity: 0.5;
}
.drag-handle {
    cursor: grab;
    user-select: none;
    font-size: 16px;
    color: #999;
}
.drag-handle:hover {
    color: #666;
}
.drag-handle:active {
    cursor: grabbing;
}
.drop-zone {
    border-top: 2px solid #008ABC;
}

#timeSlotsContainer { width: 100%; padding: 10px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; flex-basis: 100%; }
#timeSlotCheckboxes { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
#timeSlotCheckboxes label { display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; }
#timeSlotCheckboxes input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

#slotDropdownBtn, #availSlotDropdownBtn { 
    font-family: inherit; 
    font-size: inherit;
    background: white !important;
    color: #1A2340 !important;
    position: relative;
    padding-right: 28px !important;
}
#slotDropdownBtn::after, #availSlotDropdownBtn::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}
#slotDropdownBtn:hover, #availSlotDropdownBtn:hover {
    background: #f5f5f5 !important;
}

/* Reorder text styles */
.reorder-text {
    color: #1A2340 !important;
    font-size: 12px;
    background: transparent !important;
}

.reorder-btn {
    color: #1A2340 !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 10px; max-width: 100%; }
    h2 { font-size: 16px; }

    /* Header */
    img[alt="Pentair Logo"] { height: 40px !important; }

    /* Status table — horizontal scroll with sticky name column */
    .status-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 10px;
    }
    .status-table th, .status-table td {
        padding: 4px 6px;
        min-width: 72px;
        white-space: nowrap;
    }
    .status-table th:first-child,
    .status-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        min-width: 90px;
    }
    .person-name {
        position: sticky;
        left: 0;
        background: #f0f0f0;
        z-index: 10;
    }

    /* Forms — stack all fields vertically */
    form { flex-direction: column; gap: 8px; }
    form > *, form > div { width: 100% !important; min-width: 100% !important; flex: none !important; }
    form select, form input[type="date"], form input[type="email"], form input[type="text"] {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box;
    }
    form textarea { width: 100% !important; box-sizing: border-box; }
    form button[type="submit"] { width: 100% !important; }

    /* Date picker full width */
    input[type="date"] { width: 100%; box-sizing: border-box; }

    /* Slot dropdown full width */
    #slotDropdownBtn, #availSlotDropdownBtn { width: 100% !important; box-sizing: border-box; }

    /* Section spacing */
    .section { padding: 10px; margin: 10px 0; }

    /* Buttons */
    button { font-size: 13px; padding: 10px; }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .status-table { font-size: 11px; }
    #timeSlotCheckboxes { grid-template-columns: repeat(2, 1fr) !important; }
}