/* ============================================================
   Calendar Module - Dedicated Styles
   Hotel Reservation System
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --cal-confirmed:   #198754;
    --cal-pending:     #ffc107;
    --cal-checkedin:   #0dcaf0;
    --cal-checkedout:  #6c757d;
    --cal-cancelled:   #dc3545;
    --cal-noshow:      #6f42c1;
    --cal-resource-w:  220px;
    --cal-event-h:     28px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.calendar-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.calendar-page-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.calendar-quick-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.calendar-quick-nav .btn {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}

/* ── Filter Bar ─────────────────────────────────────────────── */
.calendar-filter-bar {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.calendar-filter-bar .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #495057;
}

.calendar-filter-bar .form-select,
.calendar-filter-bar .form-control {
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: border-color .2s, box-shadow .2s;
}

.calendar-filter-bar .form-select:focus,
.calendar-filter-bar .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.2);
}

/* ── Calendar Container ─────────────────────────────────────── */
.calendar-wrapper {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    overflow: hidden;
}

/* ── FullCalendar Toolbar ───────────────────────────────────── */
.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #212529;
}

.fc-button-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    padding: 0.3rem 0.7rem !important;
    transition: background-color .2s, transform .15s !important;
}

.fc-button-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    transform: translateY(-1px) !important;
}

.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
    background-color: #0a58ca !important;
    border-color: #0a53be !important;
}

/* ── Resource Area (room rows) ──────────────────────────────── */
.fc-resource-area-header-cell,
.fc-datagrid-header {
    background-color: #0d6efd !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
}

.fc-datagrid-cell-cushion {
    padding: 0.4rem 0.6rem !important;
}

.fc-resource-group-cell {
    background-color: #e9ecef !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    color: #495057 !important;
    padding: 0.3rem 0.6rem !important;
}

/* ── Resource Label ─────────────────────────────────────────── */
.resource-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.2rem 0;
    min-width: 0;
}

.resource-room-number {
    font-weight: 700;
    font-size: 0.875rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-room-type {
    font-size: 0.7rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-room-meta {
    font-size: 0.65rem;
    color: #adb5bd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-room-status {
    margin-top: 0.1rem;
}

.resource-room-status .badge {
    font-size: 0.6rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.2rem;
}

/* ── Timeline Events ────────────────────────────────────────── */
.fc-timeline-event {
    border-radius: 4px !important;
    border: none !important;
    margin: 2px 1px !important;
    min-height: var(--cal-event-h) !important;
    cursor: pointer !important;
    transition: filter .15s, transform .15s, box-shadow .15s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}

.fc-timeline-event:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.2) !important;
    z-index: 20 !important;
}

.fc-event-main {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ── Event Content ──────────────────────────────────────────── */
.cal-event-inner {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    height: 100%;
    min-height: var(--cal-event-h);
    overflow: hidden;
}

.cal-event-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    flex-shrink: 0;
}

.cal-event-guest {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    color: inherit;
}

.cal-event-nights {
    font-size: 0.68rem;
    opacity: .85;
    white-space: nowrap;
    flex-shrink: 0;
}

.cal-event-source-icon {
    font-size: 0.65rem;
    opacity: .8;
    flex-shrink: 0;
}

/* ── Status Colors ──────────────────────────────────────────── */
.fc-event.status-confirmed,
.fc-event.status-Confirmed {
    background-color: var(--cal-confirmed) !important;
    color: #fff !important;
}

.fc-event.status-pending,
.fc-event.status-Pending {
    background-color: var(--cal-pending) !important;
    color: #212529 !important;
}

.fc-event.status-checkedin,
.fc-event.status-CheckedIn {
    background-color: var(--cal-checkedin) !important;
    color: #212529 !important;
}

.fc-event.status-checkedout,
.fc-event.status-CheckedOut {
    background-color: var(--cal-checkedout) !important;
    color: #fff !important;
    opacity: 0.85;
}

.fc-event.status-cancelled,
.fc-event.status-Cancelled {
    background-color: var(--cal-cancelled) !important;
    color: #fff !important;
    opacity: 0.7;
    text-decoration: line-through;
}

.fc-event.status-noshow,
.fc-event.status-NoShow {
    background-color: var(--cal-noshow) !important;
    color: #fff !important;
    opacity: 0.8;
}

/* ── Drag Feedback ──────────────────────────────────────────── */
.fc-event-dragging {
    opacity: 0.75 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
    transform: scale(1.02) !important;
    z-index: 100 !important;
}

.fc-highlight {
    background-color: rgba(13,110,253,.12) !important;
    border: 2px dashed #0d6efd !important;
    border-radius: 4px !important;
}

/* Drop valid/invalid visual feedback */
.drop-valid .fc-highlight {
    background-color: rgba(25,135,84,.15) !important;
    border-color: #198754 !important;
}

.drop-invalid .fc-highlight {
    background-color: rgba(220,53,69,.15) !important;
    border-color: #dc3545 !important;
}

/* ── Tooltip ────────────────────────────────────────────────── */
.cal-tooltip {
    position: fixed;
    z-index: 9999;
    background: #212529;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    max-width: 280px;
    font-size: 0.8125rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    pointer-events: none;
    animation: calTooltipIn .15s ease-out;
}

@keyframes calTooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cal-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.cal-tooltip-guest {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.2;
}

.cal-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cal-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.cal-tooltip-row i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: .75;
}

/* ── Status Legend ──────────────────────────────────────────── */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    font-size: 0.78rem;
}

.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: default;
}

.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Toast Notifications ────────────────────────────────────── */
.cal-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.cal-toast {
    background: #212529;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 220px;
    max-width: 340px;
    pointer-events: auto;
    animation: calToastIn .25s ease-out;
}

.cal-toast.toast-success { border-left: 4px solid #198754; }
.cal-toast.toast-info    { border-left: 4px solid #0dcaf0; }
.cal-toast.toast-warning { border-left: 4px solid #ffc107; }
.cal-toast.toast-error   { border-left: 4px solid #dc3545; }

@keyframes calToastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes calToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

.cal-toast.removing {
    animation: calToastOut .2s ease-in forwards;
}

/* ── Confirmation Dialog ────────────────────────────────────── */
#calDragConfirmModal .modal-header {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border-bottom: none;
}

#calDragConfirmModal .modal-header .btn-close {
    filter: invert(1);
}

#calDragConfirmModal .change-summary {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
}

#calDragConfirmModal .change-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

#calDragConfirmModal .change-row i {
    width: 16px;
    text-align: center;
    color: #6c757d;
}

#calDragConfirmModal .change-arrow {
    color: #0d6efd;
    font-weight: 700;
}

/* ── Conflict Alert ─────────────────────────────────────────── */
.cal-conflict-alert {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #842029;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cal-conflict-alert i {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Loading Overlay for Calendar ───────────────────────────── */
.cal-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 0.75rem;
    backdrop-filter: blur(2px);
}

.calendar-wrapper {
    position: relative;
}

/* ── View Switcher Enhancements ─────────────────────────────── */
.cal-view-switcher {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.cal-view-switcher .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root { --cal-resource-w: 160px; }

    .calendar-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-quick-nav {
        width: 100%;
    }

    .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .resource-room-meta { display: none; }
}

@media (max-width: 767.98px) {
    :root { --cal-resource-w: 110px; }

    .calendar-filter-bar .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .resource-room-type { display: none; }
    .resource-room-status { display: none; }

    .cal-event-nights { display: none; }
    .cal-event-source-icon { display: none; }

    .cal-toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 4.5rem; /* above mobile bottom nav */
    }

    .cal-toast {
        min-width: unset;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    :root { --cal-resource-w: 90px; }

    .resource-room-number { font-size: 0.75rem; }

    .fc-button-primary {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .fc-toolbar-title {
        font-size: 1rem !important;
    }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    .calendar-filter-bar,
    .calendar-quick-nav,
    .cal-toast-container,
    .cal-tooltip { display: none !important; }

    .calendar-wrapper {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}