/* [ dashboard.css] */

.dashboard-container {
    padding-top: 40px; /* Space below header */
    padding-bottom: 40px;
}

.dashboard-container h1 {
    text-align: center;
    margin-bottom: 10px;
}

.dashboard-container > p { /* The introductory paragraph */
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

#saved-itineraries-list {
    /* Uses .itinerary-grid styles, which should already exist */
    min-height: 200px; /* Ensure container has some height while loading */
}

#loading-message,
.no-itineraries-message {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    padding: 50px 20px;
    width: 100%; /* Ensure it spans grid width */
    grid-column: 1 / -1; /* Make sure it takes full width if inside grid */
}

/* Style for Delete Button */
.delete-btn {
    /* Inherits .action-btn styles */
    border-color: #e74c3c; /* Red border */
    color: #e74c3c;      /* Red text/icon */
}

.delete-btn:hover {
    background-color: #e74c3c !important; /* Red background on hover */
    color: white !important;           /* White text/icon on hover */
}

/* --- Dashboard Card Actions --- */

/* यह सुनिश्चित करता है कि 4 बटन ठीक से फ़िट हों */
.itinerary-card .card-actions {
    display: flex;
    gap: 8px; /* बटनों के बीच थोड़ी जगह */
}

.itinerary-card .action-btn {
    flex-grow: 1; /* सभी बटन बराबर चौड़ाई के हों */
    padding: 10px; /* आइकन बटन के लिए अच्छा पैडिंग */
    font-size: 1rem; /* आइकन का साइज़ */
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.itinerary-card .action-btn i {
    margin: 0; /* आइकन बटन के लिए टेक्स्ट की ज़रूरत नहीं */
}

/* View (Blue) */
.action-btn.view-btn { 
    background-color: var(--yale-blue, #1B4079); 
    color: white; 
}
.action-btn.view-btn:hover { background-color: #163561; }

/* Share (Teal) */
.action-btn.share-btn { 
    background-color: var(--air-force-blue, #4D7C8A); 
    color: white; 
}
.action-btn.share-btn:hover { background-color: #426975; }

/* Book (Green) - NEW */
.action-btn.book-btn {
    background-color: #10B981; /* एक अलग हरा रंग */
    color: white;
}
.action-btn.book-btn:hover { background-color: #0F9D6B; }

/* Delete (Red) - NEW */
.action-btn.delete-btn {
    background-color: #EF4444; /* एक अलग लाल रंग */
    color: white;
}
.action-btn.delete-btn:hover { background-color: #D93A3A; }

/* --- Profile Card Structure --- */

.profile-card-wrapper {
    display: flex;
    justify-content: center; /* Center the card horizontally */
    width: 100%;
}

.profile-form-content {
    /* Reuses styling from modal-content or auth-form-content */
    max-width: 550px; 
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    background-color: var(--bg-content); /* White in light mode, dark in dark mode */
}

.profile-heading {
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 2rem;
    color: var(--heading-color);
}

.profile-subtitle {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* --- Detail Groups (Name, Email, UID) --- */

.profile-detail-group {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-color);
}
.profile-detail-group:last-child {
    border-bottom: none;
}

.profile-detail-group label {
    font-weight: bold;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px; /* Small gap below label */
    font-size: 0.9rem;
}

/* Values */
.profile-detail-group p {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0 30px; /* Indent the value slightly */
    word-break: break-all; /* Break long UID strings */
}
.profile-detail-group .small-text {
    font-size: 0.85rem;
    word-break: break-all;
}

/* --- Status and Action Buttons --- */

.profile-actions {
    margin-top: 30px;
    text-align: center;
}

.profile-actions .logout-btn {
    width: 100%;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    
    /* Logout Button Specific Color */
    background-color: #e74c3c; /* Bright Red */
    color: white;
    border: none;
    transition: background-color 0.3s;
}

.profile-actions .logout-btn:hover {
    background-color: #c0392b; 
}


/* --- Responsive Adjustments (Optional) --- */
@media (max-width: 600px) {
    .profile-form-content {
        max-width: 95%;
    }
}

/* --- DASHBOARD NAVIGATION HUB STYLING --- */

.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px; /* Space above saved list */
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-hub-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px; /* Fixed size for aesthetic grid look */
    height: 120px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 0.95rem;
    font-weight: 600;
}

.dashboard-hub-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Icon Styles */
.dashboard-hub-btn i {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

/* Text Styles */
.dashboard-hub-btn span {
    font-size: 0.9rem;
    text-align: center;
}


/* --- Color Coding --- */

/* Plan Trip (Primary Action) */
.dashboard-hub-btn.trip-btn {
    background-color: var(--air-force-blue);
    color: white;
}
/* Profile (Secondary) */
.dashboard-hub-btn.profile-btn {
    background-color: var(--bg-content);
    color: var(--yale-blue);
    border: 1px solid var(--yale-blue);
}
/* Tools (Accent) */
.dashboard-hub-btn.tools-btn {
    background-color: var(--mindaro-accent);
    color: var(--dark-blue-bg, #0A192F); /* Dark text on light background */
}
/* Logout (Danger) */
.dashboard-hub-btn.logout-btn {
    background-color: #c0392b; /* Red */
    color: white;
}

/* Heading for Saved Itineraries */
.saved-itineraries-heading {
    text-align: left;
    font-size: 1.8rem;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
}

/* Responsive adjustment */
@media (max-width: 600px) {
    .dashboard-nav {
        gap: 10px;
    }
    .dashboard-hub-btn {
        width: 45%; /* Make buttons take up half width on small screens */
        height: 100px;
    }
}
/* --- Setting Blocks (Containers for Change Name/Password) --- */
.setting-block {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Hides content when collapsed */
}

.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin: 0;
    cursor: pointer;
    background-color: var(--bg-content); 
    font-size: 1.1rem;
    color: var(--heading-color);
}
body.dark-mode .setting-header {
    background-color: #1A2A44;
}

.setting-header:hover {
    background-color: var(--bg-main); /* Slight change on hover */
}

.setting-header i {
    margin-right: 10px;
}

/* Toggle Icon */
.setting-header .toggle-icon {
    transition: transform 0.3s ease;
}
.setting-block.active .toggle-icon {
    transform: rotate(180deg);
}

/* Collapsible Content */
.setting-content {
    padding: 15px 20px;
    background-color: var(--bg-main);
    display: none; /* Initially hidden */
    max-height: 0; /* Smooth collapse transition (handled by JS) */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
.setting-block.active .setting-content {
    max-height: 500px; /* Needs to be larger than content height */
    display: block;
}

/* Form Specific Styles */
#update-name-form label,
#update-password-form label {
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

#update-name-form input,
#update-password-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-content); 
    color: var(--text-primary);
    margin-bottom: 15px;
}

.setting-message {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #e74c3c; /* Default error color */
    min-height: 1.2em;
}
.setting-message.success {
    color: #2ecc71; /* Green for success */
}
/* --- Setting Header Colors (Change Name/Password) --- */
.setting-header {
    /* Existing Styles */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--border-color); /* Add border for definition */
    
    /* FIX: Button Color Match (Use primary Yale Blue theme) */
    background-color: var(--yale-blue); 
    color: white; /* White text on dark button */
    font-weight: 600;
}
body.dark-mode .setting-header {
    background-color: var(--yale-blue); /* Same primary color in dark mode */
}

.setting-header:hover {
    background-color: #163561; /* Darker Yale Blue on hover */
    border-color: #163561;
}

.setting-header i {
    color: var(--mindaro-accent); /* Accent color for icons inside the button */
}

/* --- Logout Button Color --- */
.profile-actions .logout-btn {
    /* FIX: Match Theme's secondary (Air Force Blue) or use a bold primary color */
    background-color: var(--air-force-blue); 
    border-color: var(--air-force-blue);
    color: white;
    /* (All other existing styles remain) */
}
.profile-actions .logout-btn:hover {
    background-color: #426975; /* Darker Teal on hover */
    border-color: #426975;
}