/* =====================================================================
   ZIQSY CMS — VIEW GROUP: CALENDAR & SCHEDULING
   ---------------------------------------------------------------------
   Scoped, additive polish for the Calendar dashboard (FullCalendar 6 +
   custom Gantt), the Leave Management screen, and the Timesheet screens.
   CSS ONLY — no markup, class, id, data-attribute or JS changes.
   Builds entirely on the --zq-* tokens defined in css/design-system.css
   and remaps FullCalendar's own --fc-* custom properties to the brand.
   Loaded AFTER design-system.css. Light + dark aware.
   ===================================================================== */

/* =====================================================================
   1. FULLCALENDAR 6 — THEME VIA --fc-* VARIABLES
   The calendar lives in #calendar (inside the dashboard cards). We remap
   FullCalendar's documented custom properties to the Ziqsy tokens so the
   buttons, today highlight, borders and event chips all read on-brand.
   ===================================================================== */
#calendar .fc,
#calendar.fc,
#calendarView .fc {
    /* Brand the toolbar buttons */
    --fc-button-bg-color:            var(--zq-brand-500);
    --fc-button-border-color:        var(--zq-brand-500);
    --fc-button-hover-bg-color:      var(--zq-brand-600);
    --fc-button-hover-border-color:  var(--zq-brand-600);
    --fc-button-active-bg-color:     var(--zq-brand-700);
    --fc-button-active-border-color: var(--zq-brand-700);
    --fc-button-text-color:          #fff;

    /* Grid + structural colours */
    --fc-border-color:        var(--zq-border);
    --fc-page-bg-color:       var(--zq-surface);
    --fc-neutral-bg-color:    var(--zq-surface-2);
    --fc-neutral-text-color:  var(--zq-text-muted);

    /* Today / now */
    --fc-today-bg-color:      var(--zq-brand-50);
    --fc-now-indicator-color: var(--zq-danger);

    /* Default event chip (overridden per-event by inline colors from JS) */
    --fc-event-bg-color:      var(--zq-brand-500);
    --fc-event-border-color:  var(--zq-brand-600);
    --fc-event-text-color:    #fff;

    --fc-highlight-color:     rgba(0, 174, 239, .14);
    --fc-non-business-color:  var(--zq-slate-100);

    font-family: var(--zq-font-sans);
    color: var(--zq-text);
}

/* --- Toolbar --- */
#calendar .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}
#calendar .fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zq-text);
}

/* --- Buttons: pull FullCalendar's chrome into the design system --- */
#calendar .fc .fc-button {
    font-weight: 600;
    font-size: var(--zq-fs-sm);
    border-radius: var(--zq-radius-sm);
    padding: .45rem .8rem;
    text-transform: capitalize;
    box-shadow: none;
    transition: background-color var(--zq-dur) var(--zq-ease),
                border-color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease),
                transform var(--zq-dur) var(--zq-ease);
}
#calendar .fc .fc-button:hover { box-shadow: var(--zq-shadow-brand); }
#calendar .fc .fc-button:active { transform: translateY(1px); }
#calendar .fc .fc-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .35);
}
#calendar .fc .fc-button-primary:disabled {
    background-color: var(--zq-brand-300);
    border-color: var(--zq-brand-300);
    opacity: 1;
}
/* Button groups: soften the seams */
#calendar .fc .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#calendar .fc .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* --- Column header (weekday row) --- */
#calendar .fc .fc-col-header-cell {
    background: var(--zq-surface-2);
    padding: .6rem 0;
}
#calendar .fc .fc-col-header-cell-cushion {
    color: var(--zq-text-muted);
    font-weight: 700;
    font-size: var(--zq-fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .35rem .5rem;
}

/* --- Day cells / grid --- */
#calendar .fc .fc-daygrid-day-number {
    color: var(--zq-text);
    font-size: var(--zq-fs-sm);
    font-weight: 600;
    padding: .4rem .5rem;
    text-decoration: none;
}
#calendar .fc .fc-day-other .fc-daygrid-day-number { color: var(--zq-slate-500); }
#calendar .fc .fc-day-today { background: var(--fc-today-bg-color) !important; }
#calendar .fc .fc-day-today .fc-daygrid-day-number {
    color: var(--zq-brand-700);
    font-weight: 800;
}
#calendar .fc .fc-daygrid-day.fc-day-today::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--zq-brand-400);
    border-radius: var(--zq-radius-sm);
    pointer-events: none;
}
#calendar .fc .fc-daygrid-day { transition: background-color var(--zq-dur) var(--zq-ease); }
#calendar .fc .fc-daygrid-day:hover { background: var(--zq-brand-50); }
#calendar .fc .fc-scrollgrid,
#calendar .fc .fc-scrollgrid td,
#calendar .fc .fc-scrollgrid th {
    border-color: var(--zq-border);
}
#calendar .fc .fc-scrollgrid { border-radius: var(--zq-radius); overflow: hidden; }

/* --- Event chips --- */
#calendar .fc .fc-event,
#calendar .fc .fc-daygrid-event {
    border-radius: var(--zq-radius-sm);
    border: none;
    padding: 1px 5px;
    font-size: var(--zq-fs-xs);
    font-weight: 600;
    box-shadow: var(--zq-shadow-xs);
    transition: transform var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease),
                filter var(--zq-dur) var(--zq-ease);
}
#calendar .fc .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--zq-shadow-sm);
    filter: brightness(1.04);
    z-index: 5;
}
#calendar .fc .fc-event-title { font-weight: 600; }
#calendar .fc .fc-daygrid-event-dot { border-color: currentColor; }
#calendar .fc .fc-daygrid-more-link {
    color: var(--zq-brand-600);
    font-weight: 700;
    font-size: var(--zq-fs-xs);
}

/* --- Member avatars injected onto events by calendar JS (.event-avatars/.avatar) --- */
#calendarView .event-avatars,
.fc .event-avatars {
    display: inline-flex;
    align-items: center;
    gap: -4px;
    margin-top: 2px;
    padding-left: 2px;
}
#calendarView .event-avatars .avatar,
.fc .event-avatars .avatar {
    width: 18px;
    height: 18px;
    border-radius: var(--zq-radius-pill);
    background: var(--zq-brand-600);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    margin-left: -5px;
    border: 1.5px solid var(--zq-surface);
    box-shadow: var(--zq-shadow-xs);
}
#calendarView .event-avatars .avatar.more,
.fc .event-avatars .avatar.more { background: var(--zq-slate-500); }

/* SLA breach icon injected into event titles */
.fc .sla-icon { color: #fff; opacity: .9; margin-left: 2px; }

/* --- Popover (more-events / now-indicator) --- */
#calendar .fc .fc-popover {
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius);
    box-shadow: var(--zq-shadow-lg);
    background: var(--zq-surface);
}
#calendar .fc .fc-popover-header {
    background: var(--zq-surface-2);
    color: var(--zq-text);
    font-weight: 700;
    border-radius: var(--zq-radius) var(--zq-radius) 0 0;
}

/* =====================================================================
   2. CALENDAR DASHBOARD CHROME
   View-toggle buttons in the gradient header, legend, sprint cards, the
   online counter and the empty state. (.dashboard-header itself is in the
   shared design-system; we only refine pieces unique to this view.)
   ===================================================================== */

/* View toggle buttons inside the brand header (.view-toggle-btn.active) */
.dashboard-header .view-toggle-btn {
    transition: background-color var(--zq-dur) var(--zq-ease),
                color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
.dashboard-header .view-toggle-btn.active {
    background: #fff;
    color: var(--zq-brand-700);
    border-color: #fff;
    box-shadow: var(--zq-shadow-sm);
    font-weight: 700;
}

/* Online counter pill in the Team Members card header */
.online-counter {
    box-shadow: var(--zq-shadow-xs);
    letter-spacing: .01em;
}

/* Legend rows */
.legend-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--zq-radius-sm);
    background: var(--zq-surface-2);
    border: 1px solid var(--zq-border);
    transition: border-color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
.legend-item:hover {
    border-color: var(--zq-border-strong);
    box-shadow: var(--zq-shadow-xs);
}
.legend-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--zq-radius-pill);
    padding: .3rem .65rem;
    font-size: var(--zq-fs-xs);
    font-weight: 700;
}
/* Legend chips render via Bootstrap bg-* utilities; the raw utilities fail AA
   with white ink (white on brand-500/success/info ≈ 2.5:1). Deepen the fills
   so the 12px legend text clears 4.5:1 in both themes; amber keeps dark ink. */
.legend-badge.bg-primary { background-color: var(--zq-brand-700, #00719e) !important; color: #fff !important; }
.legend-badge.bg-success { background-color: #047857 !important; color: #fff !important; }
.legend-badge.bg-info    { background-color: #0369a1 !important; color: #fff !important; }
.legend-badge.bg-warning { background-color: var(--zq-warning, #f59e0b) !important; color: #1f2937 !important; }

/* Project titles carry an arbitrary, data-driven colour. Painting the heading
   *text* with it (e.g. legacy indigo #400ff0 ≈ 2.2:1) fails AA and varies per
   project. Instead the colour rides a fixed swatch dot, and the heading text
   uses the readable foreground token — legible in both themes, colour preserved. */
.project-title { color: var(--zq-text, #0f172a); display: flex; align-items: center; min-width: 0; }
.project-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .5rem;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}

/* Sprint cards + their dynamic colour bar */
.sprint-card {
    overflow: hidden;
    transition: transform var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
.sprint-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--zq-shadow-lg) !important;
}
.sprint-card .sprint-card-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--zq-radius) 0 0 var(--zq-radius);
}
.status-badge-compact {
    font-size: var(--zq-fs-xs);
    font-weight: 700;
    padding: .3rem .55rem;
    border-radius: var(--zq-radius-pill);
}

/* Empty state (no active sprints) */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--zq-text-muted);
}
.empty-state i {
    font-size: 2.5rem;
    color: var(--zq-slate-300);
    display: block;
    margin-bottom: .5rem;
}

/* =====================================================================
   3. CUSTOM GANTT / TIMELINE VIEW (#ganttView)
   Pure-CSS markup-only styling so the timeline reads like the calendar.
   ===================================================================== */
#ganttView .gantt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--zq-border);
}
#ganttView .gantt-container {
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius);
    overflow: hidden;
    background: var(--zq-surface);
}
#ganttView .gantt-header,
#ganttView .gantt-body { display: flex; }
#ganttView .gantt-sidebar-header,
#ganttView .gantt-sidebar {
    flex: 0 0 220px;
    background: var(--zq-surface-2);
    border-right: 1px solid var(--zq-border);
}
#ganttView .gantt-sidebar-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    font-weight: 700;
    color: var(--zq-text);
    border-bottom: 1px solid var(--zq-border);
}
#ganttView .gantt-timeline-header,
#ganttView .gantt-timeline { overflow-x: auto; flex: 1 1 auto; }
#ganttView .gantt-timeline-header {
    background: var(--zq-surface-2);
    border-bottom: 1px solid var(--zq-border);
    color: var(--zq-text-muted);
    font-size: var(--zq-fs-xs);
    font-weight: 700;
}

/* Timeline navigation buttons (markup-styled, not .btn) */
#ganttView .timeline-nav-buttons { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
#ganttView .timeline-nav-buttons button {
    border: 1px solid var(--zq-border-strong);
    background: var(--zq-surface);
    color: var(--zq-text);
    border-radius: var(--zq-radius-sm);
    padding: .4rem .7rem;
    font-size: var(--zq-fs-sm);
    font-weight: 600;
    transition: background-color var(--zq-dur) var(--zq-ease),
                border-color var(--zq-dur) var(--zq-ease),
                color var(--zq-dur) var(--zq-ease);
}
#ganttView .timeline-nav-buttons button:hover {
    background: var(--zq-brand-50);
    border-color: var(--zq-brand-400);
    color: var(--zq-brand-700);
}

/* =====================================================================
   4. LEAVE MANAGEMENT (resources/views/leave/requests.blade.php)
   Scopes to #leaveTabs / #leaveTabContent and the page's own header card.
   ===================================================================== */

/* Prominent pill navigation */
#leaveTabs.nav-pills .nav-link,
.nav-pills-prominent .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--zq-text-muted);
    font-weight: 600;
    border-radius: var(--zq-radius-sm);
    transition: background-color var(--zq-dur) var(--zq-ease),
                color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
#leaveTabs.nav-pills .nav-link:hover,
.nav-pills-prominent .nav-link:hover {
    background: var(--zq-brand-50);
    color: var(--zq-brand-700);
}
#leaveTabs.nav-pills .nav-link.active,
.nav-pills-prominent .nav-link.active {
    background: var(--zq-brand-500);
    color: #fff;
    box-shadow: var(--zq-shadow-brand);
}

/* Pending badge in the header */
#nav-pending-badge {
    border-radius: var(--zq-radius-pill) !important;
    box-shadow: var(--zq-shadow-sm);
}

/* Leave content cards: refine the left accent + headers */
#leaveTabContent .card.border-start {
    border-left: 4px solid var(--zq-brand-500) !important;
}
#leaveTabContent .card .card-header.bg-primary {
    background: linear-gradient(135deg, var(--zq-brand-50) 0%, var(--zq-brand-100) 100%) !important;
    border-bottom: 1px solid var(--zq-border);
}

/* Total-days callout + duration pill */
#total-days {
    border-radius: var(--zq-radius);
    border-left: 4px solid var(--zq-brand-500);
    background: var(--zq-brand-50);
}
.duration-badge {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: var(--zq-radius-pill);
    background: var(--zq-brand-500);
    color: #fff;
    font-weight: 700;
    font-size: var(--zq-fs-sm);
}

/* Status badges rendered into the history / approvals tables by JS.
   Bootstrap contextual bg-* classes already pull brand tones from the
   design-system; here we just keep them crisp and pill-shaped. */
#my-leaves-list .badge,
#all-requests-list .badge {
    font-weight: 700;
    border-radius: var(--zq-radius-pill);
    letter-spacing: .01em;
}
#my-leaves-list table.table,
#all-requests-list table.table { margin-bottom: 0; }

/* =====================================================================
   5. TIMESHEET (index, weekly)
   Time clock card, status, recent-entries + weekly tables, custom modal.
   ===================================================================== */

/* Live clock + duration readouts */
#currentTime {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--zq-brand-600);
    font-variant-numeric: tabular-nums;
}
#workDuration h6 { color: var(--zq-text-muted); font-weight: 600; }
#workDuration #durationDisplay {
    color: var(--zq-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
#statusDisplay .badge {
    font-size: var(--zq-fs-sm);
    padding: .5rem .9rem;
    border-radius: var(--zq-radius-pill);
}

/* Themed card headers (.bg-theme) + themed primary button (.btn-theme-primary)
   come from legacy theme.css; nudge them onto the token palette. */
.card-header.bg-theme {
    background: var(--zq-hero-bg) !important;
    color: #fff;
    border-bottom: none;
}
.card-header.bg-theme .btn-outline-light { border-color: rgba(255, 255, 255, .65); }
.btn-theme-primary {
    background: var(--zq-brand-500);
    border-color: var(--zq-brand-500);
    color: #fff;
    font-weight: 600;
    border-radius: var(--zq-radius-sm);
    transition: background-color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease),
                transform var(--zq-dur) var(--zq-ease);
}
.btn-theme-primary:hover {
    background: var(--zq-brand-600);
    border-color: var(--zq-brand-600);
    color: #fff;
    box-shadow: var(--zq-shadow-brand);
}
.btn-theme-primary:active { transform: translateY(1px); }

/* Today's summary split */
#todayStats h4 { color: var(--zq-brand-600); font-weight: 800; }

/* Recent entries table */
#entriesTable thead th {
    text-transform: uppercase;
    font-size: var(--zq-fs-xs);
    letter-spacing: .04em;
    color: var(--zq-text-muted);
    font-weight: 700;
}
#entriesTable tbody td { vertical-align: middle; }

/* Weekly table: brand the highlighted "today" row + footer */
.table > tbody > tr.table-info > * {
    --bs-table-bg: var(--zq-brand-50);
    --bs-table-color: var(--zq-text);
}
.table > tfoot.table-light > tr > *,
.table > thead.table-light > tr > * {
    --bs-table-bg: var(--zq-surface-2);
    color: var(--zq-text);
    font-weight: 700;
}

/* Custom clock-out modal (NOT a Bootstrap .modal — uses .modal-overlay) */
.modal-overlay {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.modal-overlay > .modal-content {
    border: none;
    border-radius: var(--zq-radius-lg);
    box-shadow: var(--zq-shadow-lg);
    background: var(--zq-surface);
    color: var(--zq-text);
}

/* =====================================================================
   6. DARK MODE — re-point FullCalendar vars + surfaces to dark tokens.
   The shared --zq-* surface/border/text tokens already flip under
   [data-bs-theme="dark"]; FullCalendar's --fc-* vars need explicit help.
   ===================================================================== */
[data-bs-theme="dark"] #calendar .fc,
[data-bs-theme="dark"] #calendarView .fc {
    --fc-page-bg-color:      var(--zq-surface);
    --fc-neutral-bg-color:   var(--zq-surface-2);
    --fc-neutral-text-color: var(--zq-text-muted);
    --fc-border-color:       var(--zq-border);
    --fc-today-bg-color:     rgba(0, 174, 239, .12);
    --fc-non-business-color: rgba(148, 163, 184, .08);
    --fc-highlight-color:    rgba(0, 174, 239, .20);
}
[data-bs-theme="dark"] #calendar .fc .fc-day-today .fc-daygrid-day-number { color: var(--zq-brand-300); }
[data-bs-theme="dark"] #calendar .fc .fc-daygrid-day:hover { background: rgba(0, 174, 239, .10); }

[data-bs-theme="dark"] .legend-item,
[data-bs-theme="dark"] #ganttView .gantt-container,
[data-bs-theme="dark"] #ganttView .gantt-sidebar,
[data-bs-theme="dark"] #ganttView .gantt-sidebar-header,
[data-bs-theme="dark"] #ganttView .gantt-timeline-header {
    background: var(--zq-surface-2);
    border-color: var(--zq-border);
    color: var(--zq-text);
}
[data-bs-theme="dark"] #ganttView .timeline-nav-buttons button {
    background: var(--zq-surface);
    border-color: var(--zq-border-strong);
    color: var(--zq-text);
}
[data-bs-theme="dark"] #ganttView .timeline-nav-buttons button:hover {
    background: rgba(0, 174, 239, .12);
    border-color: var(--zq-brand-500);
    color: var(--zq-brand-300);
}
[data-bs-theme="dark"] #total-days { background: rgba(0, 174, 239, .10); }
[data-bs-theme="dark"] #leaveTabContent .card .card-header.bg-primary {
    background: linear-gradient(135deg, rgba(0, 174, 239, .16) 0%, rgba(0, 174, 239, .08) 100%) !important;
}
[data-bs-theme="dark"] #currentTime { color: var(--zq-brand-300); }
[data-bs-theme="dark"] #todayStats h4 { color: var(--zq-brand-300); }

/* =====================================================================
   7. MOTION-REDUCE GUARD (scoped to this view group's additions)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    #calendar .fc .fc-button,
    #calendar .fc .fc-event,
    #calendar .fc .fc-daygrid-day,
    .dashboard-header .view-toggle-btn,
    .legend-item,
    .sprint-card,
    #ganttView .timeline-nav-buttons button,
    #leaveTabs.nav-pills .nav-link,
    .nav-pills-prominent .nav-link,
    .btn-theme-primary {
        transition: none !important;
    }
}