/*
 * app-components.css
 *
 * First-party (served from 'self') home for component styles that were
 * previously emitted as inline <style> elements inside .razor components and
 * one JS-injected <style> (AgentCalendar.js). Externalized so the CSP
 * style-src-elem directive can drop 'unsafe-inline' (security-review item D2,
 * ADR-0004). A raw <style> in component markup is NOT Blazor-scoped, so these
 * rules were already global; consolidating them here is behaviour-equivalent
 * and de-duplicates CSS previously re-emitted on every component render.
 */

/* ===== source: WebApp/Components/Agent/Board/AppointmentFullDetailPopup.razor ===== */
    /* Dialog styling */
    ::deep .rz-dialog.rz-open {
        width: 80% !important;
        height: 90% !important;
        resize: both !important;
        max-height: 90vh !important;
    }

    ::deep .rz-dialog.rz-open .rz-dialog-content {
        height: calc(100% - 60px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .appointment-full-detail-container {
        animation: fadeIn 0.2s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .header-section,
    .details-section,
    .notes-section {
        animation: slideIn 0.25s ease-out;
    }

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

    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        min-height: 200px;
    }

    .error-container {
        padding: 2rem;
        text-align: center;
        color: #dc2626;
    }

    .header-section {
        padding: 20px;
        border-bottom: 0;
        background: var(--white-color);
        border-radius: var(--input-radius);
        box-shadow: 0 2px 2px -1px #1019280a, 0 2px 12px -1px #1019281a;
        margin-bottom:0;
    }

    .appointment-title {
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }

    .appointment-number {
        color: #6b7280;
        font-size: 14px;
    }

    .action-buttons-section {
        padding: 20px;
        background: white;
        flex-shrink: 0;
    }

    .details-section {
        padding: 20px;
        flex: 0 0 auto;
        min-height: 0;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 12px;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .detail-item.full-width {
        grid-column: 1 / -1;
    }

    .detail-label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
    }

    .detail-value {
        color: #6b7280;
        font-size: 14px;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        font-size: 14px;
    }

    .status-badge.completed {
        background-color: #d1fae5;
        color: #065f46;
    }

    .otp-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .otp-input {
        width: 100%;
    }

    .otp-timer {
        font-size: 12px;
        color: #6b7280;
        text-align: center;
    }

    .action-button {
        margin-left: 8px;
        margin-bottom: 0;
        min-width: 120px;
    }

    .action-button:first-child {
        margin-left: 0;
    }

    .action-button.danger {
        background-color: #dc2626;
        border-color: #dc2626;
    }

    .manager-actions {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .recurring-option {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .recurring-option label {
        font-size: 14px;
        color: #374151;
        cursor: pointer;
    }

    .manager-buttons {
        display: flex;
        gap: 12px;
    }

    .manager-buttons .action-button {
        flex: 1;
        margin-bottom: 0;
    }

    /* .notes-section {
        padding: 20px;
        background: #f9fafb;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 400px;
        height: 100%;
        border-top: 2px solid #e5e7eb;
        margin-top: 10px;
    } */

    .notes-section ::deep .notes-chat-container {
        height: 100% !important;
        min-height: 400px !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
    }

    .notes-section ::deep .notes-header {
        padding: 16px 20px !important;
        background: #f3f4f6 !important;
        border-bottom: 2px solid #e5e7eb !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .notes-section ::deep .notes-content {
        flex: 1 !important;
        min-height: 250px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px 20px !important;
        scroll-behavior: smooth !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .notes-section ::deep .message-input {
        padding: 16px 20px !important;
        border-top: 1px solid #e5e7eb !important;
        background: #f9fafb !important;
        flex-shrink: 0 !important;
        display: flex !important;
        gap: 8px !important;
    }

    .notes-section ::deep .message-input-disabled {
        padding: 16px 20px !important;
        border-top: 1px solid #e5e7eb !important;
        background: #f9fafb !important;
        flex-shrink: 0 !important;
    }

    .notes-section ::deep .message-textarea {
        flex: 1 !important;
    }

    .notes-section ::deep .send-button {
        flex-shrink: 0 !important;
    }

    .notes-section ::deep .empty-chat-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 200px !important;
    }

    /* Responsive design */
    /* @media (max-width: 1200px) {
        .appointment-full-detail-container {
            min-width: 90vw;
            max-width: 95vw;
        }
    } */

    @media (max-width: 768px) {
        /* .appointment-full-detail-container {
            min-width: 95vw;
            max-width: 100vw;
        } */
        
        .detail-grid {
            grid-template-columns: 1fr;
        }

        .notes-section {
            min-height: 300px;
            height: auto;
        }

        .notes-section ::deep .notes-chat-container {
            min-height: 300px !important;
        }

        .notes-section ::deep .notes-content {
            min-height: 200px !important;
        }
    }

/* ===== source: WebApp/Components/Agent/AssignedAppointments/AgentAssignedAppointments.razor ===== */
    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        min-height: 200px;
    }

    .data-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-radius: 4px;
    }

    #agent-appointments-calendar {
        width: 100%;
        position: relative;
    }

    .data-loading-overlay .rz-progressbar-circular {
        width: 40px;
        height: 40px;
    }

    .appointment-number-link {
        color: var(--rz-grid-cell-color);
        text-decoration: underline;
        cursor: pointer;
        font-weight: 500;
    }

    .appointment-number-link:hover {
        color: #1565c0;
        text-decoration: underline;
    }

/* ===== source: WebApp/Components/Agent/AgentDashboard/DashBoard.razor ===== */
    .status-badge.completed {
        background-color: #28a745;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
    }

/* ===== source: WebApp/Components/Admin/WorkOrder/WorkOrderList.razor ===== */
    .work-order-number-link {
        color: var(--rz-grid-cell-color);
        text-decoration: underline;
        cursor: pointer;
        font-weight: 500;
    }

    .work-order-number-link:hover {
        color: #1565c0;
        text-decoration: underline;
    }

/* ===== source: WebApp/Components/Agent/Board/WorkBoard.razor ===== */
    /* Filters Container - Horizontal Layout */
    .filters-container {
        margin-bottom: 1rem;
        padding: 1rem;
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .filters-row {
        align-items: flex-end;
    }

    .filter-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .date-filter-wrapper {
        position: relative;
    }

    .collapsible-calendar {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        margin-top: 0.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        background: white;
    }

    .filter-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0.5rem;
    }

    /* Main Container */
    .main-container {
        margin-bottom: 20px;
        position: relative;
    }

    .right-container {
        height: 100%;
        overflow: hidden;
    }

    .calendar-map-container {
        width: 100%;
        overflow: hidden;
    }

    /* Calendar and Map Width Distribution */
    .calendar-column-35 {
        flex: 0 0 35%;
        max-width: 35%;
    }

    .map-column-65 {
        flex: 0 0 65%;
        max-width: 65%;
    }

    /* ListBox Styles */
    .status-listbox,
    .priority-listbox {
        border: 1px solid #ddd;
        border-radius: 4px;
    }

        .status-listbox .rz-listbox-item,
        .priority-listbox .rz-listbox-item {
            padding: 8px 12px;
            cursor: pointer;
        }

            .status-listbox .rz-listbox-item:hover,
            .priority-listbox .rz-listbox-item:hover {
                background-color: #f5f5f5;
            }

            .status-listbox .rz-listbox-item.rz-state-selected,
            .priority-listbox .rz-listbox-item.rz-state-selected {
                background-color: #007bff;
                color: white;
            }

    /* Loading Styles */
    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        min-height: 200px;
    }

    .calendar-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-radius: 4px;
    }

    .route-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-radius: 4px;
    }

    /* FullCalendar Overrides */
    .fc .fc-toolbar-title {
        font-size: 1.25em;
        margin: 0;
    }

    .fc .fc-button-group {
        display: inline-flex;
    }

    .fc .fc-button {
        padding: 0.4em 0.65em;
        font-size: 0.9em;
        border-radius: 4px;
        margin-right: 2px;
    }

    .fc .fc-button-primary {
        background-color: #f0f0f0;
        color: #333;
        border: 1px solid #ddd;
    }

        .fc .fc-button-primary:not(:disabled).fc-button-active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .fc .fc-button-primary:hover {
            background-color: #e9e9e9;
        }

    /* Route Panel Styles */
    .route-panel-column {
        padding-left: 1rem;
    }

    .route-panel-card {
        height: 100%;
        max-height: 600px;
        overflow-y: auto;
    }

    .route-appointments-container {
        max-height: 400px;
        overflow-y: auto;
        margin-top: 1rem;
    }

    .appointment-card {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .appointment-card:hover {
        border-color: #007bff;
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
    }

    .appointment-card.route-selected {
        border-color: #007bff;
        background-color: #f0f7ff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

    .appointment-card.appointment-in-route {
        border-color: #28a745;
        background-color: #f0f9f4;
        opacity: 0.85;
        cursor: not-allowed;
    }

    .appointment-card.appointment-in-route:hover {
        border-color: #28a745;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    }

    /* Google Maps Directions Panel Styles */
    .google-directions-panel {
        margin-top: 10px;
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        padding: 10px;
    }

    /* Style Google Maps directions panel content */
    #directionsPanel .adp {
        font-family: inherit;
    }

    #directionsPanel .adp-step {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

    #directionsPanel .adp-placemark {
        margin: 10px 0;
    }

    .route-actions {
        border-top: 1px solid #e0e0e0;
        padding-top: 1rem;
    }

    .calendar-map-column {
        padding-right: 1rem;
    }

    /* Map Wrapper for Clustering Toggle */
    .map-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .clustering-toggle-container {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;
        background-color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: 1px solid #e0e0e0;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .filters-row {
            flex-direction: column;
        }

        .filter-actions {
            margin-top: 1rem;
        }

        .route-panel-column {
            padding-left: 0;
            margin-top: 1rem;
        }

        .calendar-map-column {
            padding-right: 0;
        }
    }

/* ===== source: WebApp/Components/Agent/Board/RouteCreationComponent.razor ===== */
    #autocomplete-input {
        width: 100%;
        box-sizing: border-box;
    }
    
    .pac-container {
        z-index: 9999 !important;
        font-family: inherit;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    
    .pac-item {
        padding: 10px;
        cursor: pointer;
        border-top: 1px solid #e6e6e6;
    }
    
    .pac-item:first-child {
        border-top: none;
    }
    
    .pac-item:hover {
        background-color: #f5f5f5;
    }
    
    .pac-item-selected {
        background-color: #e8f0fe;
    }

/* ===== source: WebApp/Components/Admin/ManagerRoles/Test.razor ===== */
        /* The original body { display:flex; justify-content:center; height:100vh; } rule from
           Test.razor is intentionally NOT carried over: in this global stylesheet it applied to
           every page, vertically centering the whole app and pushing the header above the
           scrollable viewport. */
        #chatContainer {
            width: 420px;
            height: 650px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        }

/* ===== source: WebApp/Components/SharedComponents/TimeSlotSelectionDialog.razor ===== */
    .time-slot-selection-dialog {
        min-width: 400px;
    }

    .duration-input {
        margin-bottom: 20px;
    }

    .time-slots-list {
        max-height: 220px;
        overflow-y: auto;
        margin-bottom: 20px;
    }

    .time-slot-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border: 2px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        gap: 12px;
    }

    .time-slot-item:hover {
        background-color: #f0f7ff;
        border-color: #3b82f6;
    }

    .time-slot-item.selected {
        background-color: #dbeafe;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .time-slot-item .slot-text {
        flex: 1;
        font-weight: 500;
        color: #374151;
    }

    .time-slot-item.selected .slot-text {
        color: #1e40af;
        font-weight: 600;
    }

    .time-slot-item .selected-indicator {
        color: #16a34a;
        font-size: 18px;
        font-weight: bold;
    }

    .dialog-actions {
        margin-top: 20px;
        border-top: 1px solid #e5e7eb;
        padding-top: 20px;
    }

/* ===== source: WebApp/Components/SharedComponents/TimeLine.razor ===== */
    .rz-timeline-item-content {
        min-width: 100px;
        padding: 8px 12px;
    }
    
    .rz-timeline-item-label {
        min-width: 150px;
        padding: 8px 12px;
    }
    
    /* Styles for horizontal timeline */
    .timeline-horizontal-container {
        width: 100%;
        overflow-x: auto;
        padding: 10px 0;
    }
    
    .timeline-horizontal-container .rz-timeline {
        width: 100%;
        min-width: fit-content;
    }

/* ===== source: WebApp/Components/SharedComponents/LookupPopup.razor ===== */
    .no-data-message {
        padding: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    }

/* ===== source: WebApp/Components/Manager/Calendar/Calendar.razor ===== */
    /* Map Wrapper for Clustering Toggle */
    .map-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .clustering-toggle-container {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;
        background-color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: 1px solid #e0e0e0;
    }

/* ===== source: WebApp/Components/Agent/Board/AgentCalendarEventDetail.razor ===== */
    /* The whole rule is commented out, INCLUDING its selector and opening brace.
       It previously read ".agent-event-detail-container {" followed by a comment that
       swallowed the closing brace — so the block never closed and a CSS parser discarded
       every rule from here to the end of the file (roughly 800 lines: the rest of this
       component's styles, the work board, the calendar tooltip, and anything appended
       later). Commenting from the selector rather than from the first declaration is what
       was meant, and it lets the file parse to EOF again.

    .agent-event-detail-container {
        min-width: 400px;
        max-width: 500px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    } */

    .event-details-section {
        /* padding: 20px; */
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
    }

    .event-details-content {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-label {
        font-weight: 600;
        color: #374151;
        min-width: 120px;
    }

    .detail-value {
        color: #6b7280;
        text-align: right;
        flex: 1;
    }

    .no-details {
        text-align: center;
        color: #9ca3af;
        padding: 20px;
    }

    .action-buttons-section {
        /* padding: 20px; */
        background: white;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view-more-button {
        width: 100%;
        min-width: 120px;
    }

    /* Responsive design */
    @media (max-width: 480px) {
        .agent-event-detail-container {
            min-width: 320px;
            max-width: 100%;
        }
        
        .detail-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
        
        .detail-value {
            text-align: left;
        }
    }

/* ===== source: WebApp/wwwroot/JS/AgentCalendar.js (was runtime-injected <style>) ===== */
.calendar-event-tooltip-container {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-size: 12px;
    max-width: 300px;
    display: none;
}

.calendar-event-tooltip div {
    margin: 4px 0;
}

.calendar-event-tooltip strong {
    margin-right: 8px;
}

/* ---- Leave bands on FullCalendar --------------------------------------------------
   Shared by the Manager calendar and the Agent work board. Leave is drawn behind the day
   rather than as an event: it is the absence of availability, not a booking, and an empty
   diary on a leave day would otherwise look identical to a free one.
   Approved leave is unmistakable; a pending request is lighter because it warns without
   blocking — only an approved request removes availability. */

.fc .cal-on-leave {
    background: repeating-linear-gradient(135deg,
        rgba(139, 132, 184, 0.22), rgba(139, 132, 184, 0.22) 8px,
        rgba(139, 132, 184, 0.34) 8px, rgba(139, 132, 184, 0.34) 16px) !important;
}

.fc .cal-leave-pending {
    background: repeating-linear-gradient(135deg,
        rgba(234, 179, 8, 0.12), rgba(234, 179, 8, 0.12) 8px,
        rgba(234, 179, 8, 0.20) 8px, rgba(234, 179, 8, 0.20) 16px) !important;
}

.fc .cal-on-leave .fc-event-title,
.fc .cal-leave-pending .fc-event-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #4b4666;
    padding: 2px 4px;
}

.fc .cal-leave-unknown {
    background: rgba(155, 44, 44, 0.08) !important;
    border-left: 3px dotted #9b2c2c;
}

.fc .s365-absence-band {
    background: rgba(31, 90, 107, 0.16) !important;
}

.fc .s365-absence-band--half {
    background: rgba(31, 90, 107, 0.22) !important;
}