/* ATC-SMS Application Styles */

/* ===== Layout ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f6fa;
    /* Text selection is disabled globally on touch + mouse. Long-press
       on iPads was accidentally selecting text and blocking the
       gesture-based menus (sector-scheduling page). Form controls +
       CodeMirror's contenteditable area stay selectable so editing
       isn't broken; the ``allow-select`` opt-in body class re-enables
       free text selection on pages where copy/paste of content is the
       primary task (currently /admin/solver). */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* Form controls stay selectable on EVERY page — the global rule above
   would otherwise stop users typing / copying inside inputs. */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
.CodeMirror,
.CodeMirror * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}
/* Per-page opt-in: free text selection across the whole page. Used by
   /admin/solver so the operator can copy the DSL editor's help text,
   rule snippets, etc. Set ``$bodyClass = 'allow-select'`` before
   including layout-start.php. */
body.allow-select,
body.allow-select * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.main-header {
    z-index: 1040;
    height: 56px;
}

.app-wrapper {
    display: flex;
    /* --push-banner-h is set by push-banner.js when the soft-ask banner
       is visible, so .app-wrapper slides down to clear the banner that
       sits at top:56px below the navbar. Default 0 → no offset. */
    margin-top: calc(56px + var(--push-banner-h, 0px));
    min-height: calc(100vh - 56px - var(--push-banner-h, 0px));
}

/* ===== Sidebar ===== */
.sidebar {
    width: 240px;
    min-height: calc(100vh - 56px - var(--push-banner-h, 0px));
    position: fixed;
    /* Slide down with the banner so the sidebar's top doesn't disappear
       behind it (banner z-index 1029, sidebar z-index 1030 — without the
       offset, sidebar's top is hidden visually by the banner above it). */
    top: calc(56px + var(--push-banner-h, 0px));
    left: 0;
    z-index: 1030;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

.sidebar .nav-link {
    color: #495057;
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
}
/* Tighten section dividers + top padding so the menu fits in one
   viewport for the Sector / Room Supervisor flat list (10+ items
   plus three dividers). Without this, supervisors had to scroll
   the sidebar on standard 1080p displays. */
.sidebar .nav.flex-column { padding-top: 0.25rem !important; }
.sidebar .nav-item.mt-3 { margin-top: 0.5rem !important; }
.sidebar .nav-link.text-uppercase { padding: 0.25rem 1rem; }

.sidebar .nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
}

.sidebar .nav-link.active {
    color: #0d6efd;
    background-color: #e7f1ff;
    border-left-color: #0d6efd;
    font-weight: 600;
}

.sidebar .nav-link .bi {
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    margin-left: 240px;
    min-width: 0;
    transition: margin-left 0.3s ease;
}

/* Desktop sidebar collapse — toggled by the header hamburger at any
   breakpoint. Scoped to ≥992px so the mobile off-canvas rules below
   keep ownership of the small-screen behaviour. */
@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
}

/* ===== Position Type Colors ===== */
.position-exe,
.pos-exe {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.position-pln,
.pos-pln {
    background-color: #198754 !important;
    color: #fff !important;
}

.position-sup,
.pos-sup-sector,
.pos-sup {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.position-break,
.pos-break {
    background-color: #adb5bd !important;
    color: #333 !important;
}

/* ===== Validation Indicators ===== */
.validation-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.validation-error-indicator {
    background-color: #dc3545;
}

.validation-warning-indicator {
    background-color: #ffc107;
}

.validation-ok-indicator {
    background-color: #198754;
}

.validation-error {
    background-color: #fff5f5;
}

.validation-warning {
    background-color: #fffcf0;
}

.validation-error-border {
    border: 2px solid #dc3545 !important;
}

.validation-warning-border {
    border: 2px solid #ffc107 !important;
}

/* ===== Timeline Grid ===== */
.timeline-wrapper {
    overflow-x: auto;
    padding: 0.5rem;
}

.timeline-grid {
    min-width: 900px;
}

.timeline-header {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    padding-bottom: 0.25rem;
}

.timeline-label-col {
    width: 120px;
    min-width: 120px;
    flex-shrink: 0;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 0.8rem;
}

.timeline-hour-col {
    flex: 1;
    text-align: center;
    border-left: 1px solid #e9ecef;
    padding: 2px 0;
}

.timeline-row {
    display: flex;
    border-bottom: 1px solid #e9ecef;
    min-height: 40px;
    align-items: center;
}

.timeline-row:hover {
    background-color: #f8f9fa;
}

.timeline-cells {
    flex: 1;
    position: relative;
    height: 36px;
}

.timeline-block {
    position: absolute;
    top: 2px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 500;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.timeline-block:hover {
    opacity: 0.85;
    z-index: 2;
}

.block-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* OJT indicator - hatched pattern */
.ojt-assignment {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.3) 4px,
        rgba(255,255,255,0.3) 8px
    ) !important;
}

/* ===== Lock Indicator ===== */
.lock-banner {
    border-left: 4px solid #ffc107;
}

/* ===== Cards ===== */
.card {
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

/* ===== Tabulator Overrides ===== */
.tabulator {
    border: none !important;
    font-size: 0.875rem;
}

.tabulator .tabulator-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: #f8f9fa;
}

.tabulator-row.tabulator-row-even {
    background-color: #fafbfc;
}

.tabulator-row:hover {
    background-color: #e7f1ff !important;
}

/* ===== Toast ===== */
.toast-container {
    z-index: 1060;
}

/* ===== Notification Dropdown ===== */
.notification-dropdown .dropdown-item {
    white-space: normal;
    border-bottom: 1px solid #f0f0f0;
}

.notification-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

/* On narrow viewports the 350px-wide dropdown anchored to the bell
   (which is the 3rd icon from the right edge) overflows past the LEFT
   side of the screen. Override Popper's transform with fixed positioning
   pinned to both sides of the viewport so the panel fits within it. */
@media (max-width: 575.98px) {
    .notification-dropdown.show {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .timeline-wrapper {
        font-size: 0.75rem;
    }

    .timeline-label-col {
        width: 80px;
        min-width: 80px;
        font-size: 0.7rem;
    }

    .timeline-block {
        font-size: 0.6rem;
        height: 28px;
    }

    .card-header h6 {
        font-size: 0.85rem;
    }
}

/* ===== Print ===== */
@media print {
    .sidebar, .main-header, .toast-container, .btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .app-wrapper {
        margin-top: 0 !important;
    }
}