/* ==========================================================================
   User Dashboard Styles
   ========================================================================== */

   #crf-dashboard-container {
    display: flex;
    flex-wrap: wrap; /* Allows sidebar to stack on top on smaller screens */
    gap: 20px;
}

.crf-dashboard-sidebar {
    flex: 0 0 350px; /* Sidebar width, doesn't grow, doesn't shrink */
    min-height:100vh;
    background-color: #1a1c4c;
    padding: 20px;
}

.crf-dashboard-user-profile {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    color:#fff;
}

.crf-profile-picture-container {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    overflow: hidden; /* Important for rounded corners on image and overlay */
    cursor: pointer;
}

.crf-profile-picture-container img.avatar,
.crf-profile-picture-container img.profile-picture-display {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area */
    border-radius: 50%;
    border: 3px solid #0073aa; /* WordPress blue */
}

.crf-profile-picture-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crf-profile-picture-container:hover .crf-profile-picture-overlay {
    opacity: 1;
}

.crf-upload-icon {
    font-size: 24px;
    line-height: 1;
}

.crf-upload-text {
    font-size: 10px;
    margin-top: 5px;
}


.crf-dashboard-user-profile h4 {
    margin: 10px 0 5px;
    color:#fff;
}

.crf-dashboard-user-profile p {
    font-size: 0.9em;
    color: #fff;
    margin: 0;
    word-break: break-all;
}

.crf-dashboard-nav {
    list-style-type: none; /* Remove list style */
    padding: 0;
    margin: 0;
}

.crf-dashboard-sidebar ul.crf-dashboard-nav {
    padding: 0;
}

.crf-dashboard-nav li {
    list-style-type: none; /* Ensure individual items also have no style */
}

.crf-dashboard-nav li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.crf-dashboard-nav li a:hover {
    background-color: #f0f0f1;
    color: #005a87;
}

.crf-dashboard-nav li.active a {
    background-color: #01a2d9;
    color: #fff;
    font-weight: bold;
}

.crf-dashboard-content {
    flex: 1;
    min-width: 300px;
    max-width:800px;
    background-color: #fff;
    padding: 20px;
    margin:60px;
    border-radius: 8px;
}

.crf-dashboard-content h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.crf-dashboard-content h3 {
    margin-top: 0;
    color: #333;
    margin-bottom: 15px;
}


/* Dashboard Tabs */
.crf-dashboard-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.crf-tab-button {
    background-color: #f0f0f1;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    position: relative;
    top: 1px; /* Align with bottom border of the container */
}

.crf-tab-button.active {
    background-color: #fff;
    border-bottom: 1px solid #fff; /* Makes it look like tab is part of content */
    font-weight: bold;
    color: #0073aa;
}

.crf-tab-content {
    display: none; /* Hidden by default */
    border-top: none;
}

.crf-tab-content.active {
    display: block; /* Shown when active */
}

/* Dashboard Forms */
.crf-dashboard-form {
    margin-top: 10px;
}

.crf-dashboard-form .form-row { /* Reusing .form-row from registration for consistency */
    margin-bottom: 15px;
}
.crf-dashboard-form .form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}
.crf-dashboard-form input[type="text"],
.crf-dashboard-form input[type="email"],
.crf-dashboard-form input[type="tel"],
.crf-dashboard-form select,
.crf-dashboard-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.crf-dashboard-form input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
}
.crf-dashboard-form .crf-current-file {
    display: block;
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}
.crf-dashboard-form .crf-current-file a {
    color: #0073aa;
    text-decoration: none;
}
.crf-dashboard-form .crf-current-file a:hover {
    text-decoration: underline;
}


.crf-dashboard-form button.crf-dashboard-submit,
.crf-dashboard-form input[type="submit"].crf-dashboard-submit { /* More specific selector for dashboard buttons */
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.crf-dashboard-form button.crf-dashboard-submit:hover,
.crf-dashboard-form input[type="submit"].crf-dashboard-submit:hover {
    background-color: #005a87;
}

/* Dashboard Messages (Success/Error) */
#crf-dashboard-messages {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
}
#crf-dashboard-messages.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
#crf-dashboard-messages.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
#crf-dashboard-messages ul {
    margin: 0;
    padding-left: 20px;
}

.crf-dashboard-form .crf-field-error { /* For individual field errors from JS/AJAX */
    color: red;
    font-size: 0.9em;
    display: block;
    margin-top: 3px;
}
.crf-dashboard-form input.crf-input-error, /* Class to add to input field on error */
.crf-dashboard-form select.crf-input-error {
    border-color: red !important; /* Make sure it overrides other border styles */
}

/* Spinner for AJAX */
.crf-spinner {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.crf-spinner img {
    height: 16px; /* Adjust as needed for wpspin_light.gif */
    width: 16px;
}


/* Styles for crf-field-container and conditional display */
.crf-field-container {
    /* Standard styling for field containers */
}
.crf-field-container.crf-hidden-conditional {
    display: none !important; /* Ensure it's hidden if condition not met */
}
/* Profile Completeness Widget */
.ilm-profile-completeness-widget {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.ilm-completeness-header {
    font-size: 0.95em;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.ilm-progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 18px; /* Adjusted height */
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.ilm-progress-bar {
    width: 0%; /* Default width */
    height: 100%;
    background-color: #4CAF50; /* Green */
    text-align: center;
    line-height: 18px; /* Adjusted line height */
    color: white;
    font-size: 0.8em;
    border-radius: 4px 0 0 4px; /* Keep left radius if bar is not full */
    transition: width 0.4s ease;
}
.ilm-progress-bar[style*="width: 100%"] {
    border-radius: 4px; /* Full radius when 100% */
}


.ilm-profile-completeness-widget .ilm-completion-tasks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
}

.ilm-completion-tasks-list li {
    margin-bottom: 5px;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.ilm-completion-tasks-list li span {
    font-weight: bold;
    color: #fff;
}
.ilm-completion-tasks-list li .ilm-missing-details {
    font-size: 0.9em;
    color: #ddd;
    margin-left: 5px;
}

/* Downloads Section */
.ilm-button-download {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    background-color: #0073aa; /* WordPress blue */
    color: white !important; /* Override theme link styles if needed */
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1em;
    transition: background-color 0.3s ease;
}
.ilm-button-download:hover,
.ilm-button-download:focus {
    background-color: #005a87;
    color: white !important;
}
.ilm-button-download .dashicons {
    line-height: inherit; /* Align Dashicon better */
}

.ilm-missing-items-for-download {
    list-style: disc;
    margin-left: 20px;
    margin-top: 10px;
}
.ilm-missing-items-for-download li ul {
    list-style: circle;
    margin-left: 20px;
}
.crf-message.error a {
    text-decoration:underline;
}
.crf-message.error {
    padding: 30px;
    font-size: 18px;
}

.crf-dashboard-header,
#crf-hamburger-menu,
#crf-close-sidebar,
.crf-sidebar-overlay {
    display: none;
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 768px) {
    #crf-dashboard-container {
        flex-direction: column;
        gap: 0;
    }

    /* Show Mobile Header */
    .crf-dashboard-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        background-color: #fff;
        border-bottom: 1px solid #e9ecef;
        width: 100%;
        box-sizing: border-box;
    }

    #crf-hamburger-menu {
        display: block;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 20px;
        z-index: 1002;
    }

    #crf-hamburger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px 0;
        background-color: #333;
    }

    .crf-header-text .crf-greeting {
        margin: 0;
        font-size: 0.9em;
        color: #6c757d;
    }

    .crf-header-text .crf-welcome-message {
        margin: 2px 0 0;
        font-size: 1.4em;
        color: #343a40;
        font-weight: 600;
        line-height: 1.2;
    }

    /* Hide and position sidebar off-screen */
    .crf-dashboard-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100dvh;
        width: 280px; /* A fixed width for the slide-out menu */
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        flex: 1 1 auto; /* Reset flex properties */
        margin-bottom: 0;
    }

    /* Class to show the sidebar */
    #crf-dashboard-container.sidebar-open .crf-dashboard-sidebar {
        transform: translateX(0);
    }
    
    #crf-close-sidebar {
        display: block;
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 30px;
        background: none;
        border: none;
        cursor: pointer;
        color: #fff; /* White to show on dark sidebar */
        line-height: 1;
        padding: 5px;
    }
    
    .crf-dashboard-content {
        flex: 1 1 100%;
        margin: 0;
        padding: 20px;
    }

    .crf-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none; /* Hidden by default */
    }

    #crf-dashboard-container.sidebar-open .crf-sidebar-overlay {
        display: block; /* Show when sidebar is open */
    }
}

div#crf-tab-documents {
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 30px;
}