/* Custom styles can go here */
body {
    padding-top: 0; /* Adjusted because navbar is mb-4, not fixed-top */
}

.navbar {
    /* Add custom navbar styles if needed */
}

.container {
    /* Add custom container styles if needed */
}

/* Example: Style for flash messages */
.alert {
    margin-top: 1rem;
}

/* Profile/Device Indicator Styling */
.profile-indicator {
    text-align: center;
}

.profile-indicator-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid;
    background-color: #f8f9fa;
}

/* Green indicator for profiles with data */
.profile-indicator-badge.profile-with-data {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Yellow indicator for profiles without data */
.profile-indicator-badge.profile-no-data {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/* Professional Calendar Styling */
.calendar {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    width: auto !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.calendar th {
    background: linear-gradient(135deg, #495057, #6c757d) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-align: center !important;
    padding: 8px 4px !important;
    border-radius: 4px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #495057 !important;
    width: 14.28% !important;
    min-width: 45px !important;
    max-width: none !important;
}

.calendar td {
    text-align: center;
    padding: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

/* Default calendar day styling */
.calendar-day {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e9ecef;
    background-color: #ffffff;
    color: #495057;
    cursor: default;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Days with CPAP data - Professional BLACK Style */
.calendar-day.has-data {
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    transform: translateY(-1px);
}

.calendar-day.has-data:hover {
    background: #333333 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border-color: #000000 !important;
}

.calendar-day.has-data:active {
    transform: translateY(0) scale(1.02) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Days with no data - professionally dimmed */
.calendar-day.no-data {
    background-color: #f8f9fa !important;
    color: #adb5bd !important;
    border: 1px solid #e9ecef !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
    cursor: default !important;
    box-shadow: none !important;
}

.calendar-day.no-data:hover {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

/* Empty calendar cells (outside current month) */
.calendar-day.empty {
    background-color: transparent !important;
    border: none !important;
    color: transparent !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* Currently selected date - LIGHT GREY highlight for clear selection */
.calendar td.selected-date {
    background: #d1d5db !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border: 3px solid #9ca3af !important;
    box-shadow: 0 0 0 2px #9ca3af, 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    position: relative !important;
    transform: scale(1.05) !important;
}

/* Selected date with data - LIGHT GREY selection overrides black data styling */
.calendar td.selected-date.has-data {
    background: #d1d5db !important;
    color: #1a1a1a !important;
    border: 3px solid #9ca3af !important;
    box-shadow: 0 0 0 2px #9ca3af, 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.05) !important;
}

/* Current view date highlight */
.calendar-day.current-day-view {
    box-shadow: 0 0 0 2px #9ca3af !important;
}

/* Today's date special styling */
.calendar-day.today {
    border: 2px solid #dc3545 !important;
    font-weight: 600 !important;
}

.calendar-day.today.has-data {
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 2px #dc3545, 0 3px 8px rgba(0, 86, 179, 0.4) !important;
}

/* Calendar header improvements with integrated selectors */
#calendarHeader {
    margin-bottom: 8px !important;
    padding: 6px 8px !important;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border-radius: 6px !important;
    border: 1px solid #dee2e6 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Integrated selector styling in header */
#calendarHeader .d-flex.align-items-center {
    gap: 4px !important;
}

#calendarHeader #monthSelector,
#calendarHeader #yearSelector {
    font-size: 0.75rem !important;
    height: 22px !important;
    padding: 1px 4px !important;
    border: 1px solid #ced4da !important;
    border-radius: 3px !important;
    background: white !important;
}

/* Navigation button improvements - BLACK with WHITE arrows */
#prevMonthBtn, #nextMonthBtn {
    background: #1a1a1a !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
}

#prevMonthBtn:hover, #nextMonthBtn:hover {
    background: #333333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Month/Year selector improvements */
#monthSelector, #yearSelector {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    font-size: 0.8rem !important;
    height: 24px !important;
    padding: 2px 6px !important;
}

#monthSelector:focus, #yearSelector:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Ensure selectors are visible and functional */
select.form-select.form-select-sm {
    display: inline-block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Data availability legend improvements */
.calendar + .mt-1 {
    margin-top: 12px !important;
    padding: 8px !important;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border-radius: 6px !important;
    border: 1px solid #dee2e6 !important;
}

.calendar + .mt-1 .badge {
    margin-right: 8px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* Override existing HTML structure - make calendar cells have BOLD BLUE styling */
.calendar td {
    text-align: center !important;
    padding: 6px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    width: 14.28% !important;
    min-width: 45px !important;
    max-width: none !important;
    height: 40px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid #e9ecef !important;
    background-color: #ffffff !important;
    color: #495057 !important;
    cursor: default !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Professional BLACK styling for days with data using existing HTML structure */
.calendar td.has-data {
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    transform: translateY(-1px) !important;
}

.calendar td.has-data:hover {
    background: #333333 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border-color: #000000 !important;
}

/* Dimmed styling for days without data */
.calendar td:not(.has-data):not(:empty) {
    background-color: #f8f9fa !important;
    color: #adb5bd !important;
    border: 1px solid #e9ecef !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
    cursor: default !important;
    box-shadow: none !important;
}

.calendar td:not(.has-data):not(:empty):hover {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

/* Empty cells (outside current month) */
.calendar td:empty {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Today's date styling */
.calendar td.today {
    border: 2px solid #dc3545 !important;
    font-weight: 600 !important;
}

.calendar td.today.has-data {
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 2px #dc3545, 0 3px 8px rgba(0, 86, 179, 0.4) !important;
}

/* Calendar container width control - expand to fill available space */
#calendarTable {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
}

/* Calendar parent container - expand to fill space */
.calendar-container, #dynamicCalendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
}

/* Preserve month/year selectors above calendar */
#monthSelector, #yearSelector {
    min-width: 80px !important;
    width: auto !important;
    max-width: 120px !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Remove old selector container styles since selectors are now in header */

/* Force tab content to fill available width */
#right-column .tab-content {
    width: 100% !important;
}

/* But keep calendar container compact */
#right-column .tab-content #dynamicCalendar {
    width: fit-content !important;
    max-width: none !important;
}

/* Make all sections in tab content fill full width */
#right-column .tab-content .section-container {
    width: 100% !important;
}

#right-column .tab-content .table {
    width: 100% !important;
}