:root {
    /* Gemini-inspired Color Palette - LIGHT THEME */
    --gemini-bg-dark: #F8F9FA; /* Page background - Very light gray */
    --gemini-bg-medium: #FFFFFF; /* Cards, Navbar, Active Tab content - White */
    --gemini-bg-light: #F0F2F5; /* Inputs, Inactive Tabs, Repeatable items - Off-white/Super light gray */

    --gemini-text-primary: #202124; /* Main text - Dark gray/Black */
    --gemini-text-secondary: #5F6368; /* Secondary text - Medium gray */
    --gemini-text-on-accent: #FFFFFF; /* Text on accent-colored buttons - White */
    --gemini-text-on-dark-accent: #FFFFFF; /* For logout button if purple is dark enough */


    --gemini-accent-blue: #1A73E8; /* Google Blue */
    --gemini-accent-purple: #7E57C2; /* Purple - Material Design Purple 300 */
    --gemini-border-color: #DADCE0; /* Light gray border */
    --gemini-success-color: #34A853; /* Google Green */
    --gemini-danger-color: #EA4335; /* Google Red */
    --gemini-error-text-color: var(--gemini-danger-color);

    --gemini-font-family: 'Poppins', 'Roboto', sans-serif;
    --gemini-border-radius: 0.6rem;
    --gemini-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.05);

    /* Form compactness variables */
    --form-element-font-size: 0.875rem;
    --form-label-font-size: 0.8rem;
    --form-control-padding-y: 0.45rem;
    --form-control-padding-x: 0.8rem;
    --form-grid-gap: 0.85rem;
    --form-mb-3-margin: 0.85rem;
}

body {
    font-family: var(--gemini-font-family);
    background-color: var(--gemini-bg-dark);
    color: var(--gemini-text-primary);
    line-height: 1.5;
    padding-top: 70px;
    font-size: 0.925rem;
}

/* === NAVBAR === */
.navbar {
    background-color: var(--gemini-bg-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0.6rem 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--gemini-border-color);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--gemini-text-primary) !important;
    display: flex;
    align-items: center;
}

.navbar-brand .material-icons-sharp {
    font-size: 1.8rem;
    margin-right: 0.5rem;
    color: var(--gemini-accent-blue);
}

.navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(32, 33, 36, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link {
    color: var(--gemini-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--gemini-accent-blue);
}


/* === BUTTONS === */
.btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.825rem;
    border-radius: var(--gemini-border-radius);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}
.btn-lg {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

.btn-gemini-logout {
    background-color: var(--gemini-accent-purple);
    border: none;
    color: var(--gemini-text-on-dark-accent);
    font-weight: 500;
}
.btn-gemini-logout:hover {
    background-color: #673AB7;
    color: var(--gemini-text-on-dark-accent);
}

.btn-gemini-save, .btn-gemini-action {
    font-weight: 500;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-gemini-action i {
    margin-right: 0.4rem;
}

.btn-gemini-save {
    background-color: var(--gemini-success-color);
    color: var(--gemini-text-on-accent);
}
.btn-gemini-save:hover {
    background-color: #2E8C44;
    color: var(--gemini-text-on-accent);
}

.btn-gemini-cancel, .btn-gemini-preview {
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-secondary);
    font-weight: 500;
    border: 1px solid var(--gemini-border-color);
}
.btn-gemini-cancel:hover, .btn-gemini-preview:hover {
    background-color: #E8EAED;
    color: var(--gemini-text-primary);
    border-color: #BFC1C3;
}

.btn-gemini-add {
    background-color: var(--gemini-accent-blue);
    color: var(--gemini-text-on-accent);
    border: none;
}
.btn-gemini-add:hover {
    background-color: #1665C7;
}

.btn-gemini-remove {
    background-color: transparent;
    color: var(--gemini-danger-color);
    border: 1px solid var(--gemini-danger-color);
}
.btn-gemini-remove:hover {
    background-color: rgba(234, 67, 53, 0.08);
    color: #A52E23;
}

.btn-gemini-primary {
    background-color: var(--gemini-accent-blue);
    color: var(--gemini-text-on-accent);
}
.btn-gemini-primary:hover {
    background-color: #1665C7;
    color: var(--gemini-text-on-accent);
}

.btn-gemini-secondary {
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-secondary);
    border: 1px solid var(--gemini-border-color);
}
.btn-gemini-secondary:hover {
    background-color: #E8EAED;
    color: var(--gemini-text-primary);
    border-color: #BFC1C3;
}

.btn-outline-primary {
    color: var(--gemini-accent-blue);
    border-color: var(--gemini-accent-blue);
}
.btn-outline-primary:hover {
    background-color: var(--gemini-accent-blue);
    color: var(--gemini-text-on-accent);
}

.btn-outline-secondary {
    color: var(--gemini-text-secondary);
    border-color: var(--gemini-border-color);
    background-color: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-primary);
    border-color: #BFC1C3;
}

.btn-outline-danger {
    color: var(--gemini-danger-color);
    border-color: var(--gemini-danger-color);
}
.btn-outline-danger:hover {
    background-color: var(--gemini-danger-color);
    color: var(--gemini-text-on-accent);
}


/* === CONTAINERS === */
.container-form { /* For editResume.html - full width */
    padding-top: 0.8rem;
    padding-bottom: 2.5rem;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-main { /* For listCandidateResume.html and general pages */
    padding-top: 0.8rem;
    padding-bottom: 2.5rem;
    width: 95%;
    max-width: 1200px; /* Default max-width */
    margin-left: auto;
    margin-right: auto;
}

.container-main.container-list-view { /* For listResume.html in materialWide */
    width: 100%;
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}


/* === FORMS (EDIT PAGE) === */
.nav-tabs {
    border-bottom: 1px solid var(--gemini-border-color);
    margin-bottom: 1.2rem;
}

.nav-tabs .nav-link {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    background-color: var(--gemini-bg-light);
    border: 1px solid var(--gemini-border-color);
    border-bottom-color: var(--gemini-border-color);
    padding: 0.55rem 0.9rem;
    font-size: 0.825rem;
    border-top-left-radius: calc(var(--gemini-border-radius) * 0.66);
    border-top-right-radius: calc(var(--gemini-border-radius) * 0.66);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    margin-right: 0.2rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--gemini-accent-blue);
    color: var(--gemini-accent-blue);
    background-color: #E8F0FE;
}

.nav-tabs .nav-link.active {
    color: var(--gemini-accent-blue);
    background-color: var(--gemini-bg-medium);
    border-color: var(--gemini-border-color);
    border-bottom-color: var(--gemini-bg-medium);
    font-weight: 600;
}

.nav-tabs .nav-link .fas,
.nav-tabs .nav-link .material-icons-sharp {
    margin-right: 0.4rem;
    font-size: 1em;
}

.tab-content > .tab-pane {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-top: none;
    border-radius: 0 0 var(--gemini-border-radius) var(--gemini-border-radius);
    padding: 1.5rem;
    box-shadow: var(--gemini-box-shadow);
}

.tab-content > .active {
    display: block;
}

.form-section-card h2, .form-section-title {
    color: var(--gemini-text-primary);
    font-weight: 600;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

.form-section-card h2 .material-icons-sharp,
.form-section-title .material-icons-sharp,
.form-section-title .fas {
    font-size: 1.4rem;
    margin-right: 0.6rem;
    color: var(--gemini-accent-blue);
}

.form-section-title .fas {
    color: var(--gemini-accent-purple);
}

.form-label {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.3rem;
    font-size: var(--form-label-font-size);
}

.form-label .optional {
    font-weight: 400;
    font-size: 0.9em;
    color: var(--gemini-text-secondary);
    opacity: 0.8;
}

.form-control,
.form-select,
.form-control-search {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    color: var(--gemini-text-primary);
    border-radius: calc(var(--gemini-border-radius) * 0.66);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-element-font-size);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}
.form-control:not(textarea) {
    height: calc( (var(--form-control-padding-y) * 2) + (var(--form-element-font-size) * 1.4) + 2px);
}


.form-control-search {
    min-width: 220px;
}

.form-control:focus,
.form-select:focus,
.form-control-search:focus {
    background-color: var(--gemini-bg-medium);
    border-color: var(--gemini-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(26, 115, 232, 0.15);
    color: var(--gemini-text-primary);
    outline: 0;
}

.form-control::placeholder,
.form-control-search::placeholder {
    color: #A0A4A8;
}

textarea.form-control {
    min-height: 70px;
    resize: vertical;
}

.form-actions, .form-actions-noBorder {
    margin-top: 1.8rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding-top: 1rem;
}
.form-actions-noBorder {
    margin-bottom: 1.8rem;
    padding-bottom: 1rem;
}


.form-text {
    font-size: 0.75rem;
    color: var(--gemini-text-secondary);
    opacity: 0.9;
    margin-top: 0.2rem;
}

.error-message {
    display: block;
    font-size: 0.75rem;
    color: var(--gemini-error-text-color);
    margin-top: 0.2rem;
    font-weight: 500;
}

.grid-2-col, .grid-3-col, .grid-4-col {
    display: grid;
    gap: var(--form-grid-gap);
}

.grid-2-col {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-3-col {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.grid-4-col {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}


.mb-3 { margin-bottom: var(--form-mb-3-margin) !important; }
.mb-4 { margin-bottom: calc(var(--form-mb-3-margin) * 1.5) !important; }

.repeatable-item {
    background-color: var(--gemini-bg-light);
    border: 1px solid var(--gemini-border-color);
    border-radius: calc(var(--gemini-border-radius) * 0.8);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.repeatable-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gemini-border-color);
}
.repeatable-item-header[data-bs-toggle="collapse"] {
    background-color: var(--gemini-bg-light) !important;
    border-bottom: 1px solid var(--gemini-border-color) !important;
    border-radius: calc(var(--gemini-border-radius) * 0.66) calc(var(--gemini-border-radius) * 0.66) 0 0 !important;
    padding: 0.6rem 0.8rem !important;
    margin-bottom: 0 !important;
}
.repeatable-item-header[data-bs-toggle="collapse"]:hover {
    background-color: #E8EAED !important;
}

.repeatable-item-title {
    font-weight: 500;
    color: var(--gemini-accent-purple);
    font-size: 0.95rem;
}
.repeatable-item-header[data-bs-toggle="collapse"] .repeatable-item-title {
    color: var(--gemini-text-primary);
}


.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gemini-text-secondary);
    font-size: 0.65rem;
}

select.form-control, select.form-select {
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


.checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
}

.checkbox-group input[type="checkbox"] {
    height: 1.05em;
    width: 1.05em;
    margin-right: 0.4rem;
    accent-color: var(--gemini-accent-blue);
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    cursor: pointer;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: 400;
    color: var(--gemini-text-secondary);
    font-size: var(--form-label-font-size);
}

.profile-photo-preview img {
    max-width: 100px;
    max-height: 100px;
    border-radius: calc(var(--gemini-border-radius) * 0.5);
    margin-top: 0.5rem;
    border: 2px solid var(--gemini-border-color);
}

/* === LIST RESUME PAGE STYLES (listResume.html) === */
.dashboard-header {
    padding: 0.8rem 0;
    margin-bottom: 1.2rem;
    gap: 0.8rem;
}

.dashboard-header h2.page-title {
    font-size: 1.25rem;
}
.dashboard-header .form-select-sm {
    font-size: 0.8rem;
}

.total-resumes-display {
    font-size: 0.9rem;
}
#showingResultsCount {
    font-size: 0.85em;
    margin-bottom: 0.8rem;
}

.resume-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    padding: 0.8rem; /* Reduced padding for compactness */
    /* margin-bottom: 1rem; /* This is handled by the column parent */
    box-shadow: var(--gemini-box-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure card fills its column */
}
.resume-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.07);
}

.col-xl-3.resume-item,
.col-lg-4.resume-item,
.col-md-6.resume-item,
.col-sm-12.resume-item {
    margin-bottom: 1rem; /* Spacing between rows of cards */
    /* d-flex is on the HTML element */
}

.resume-card-header {
    display: flex;
    align-items: flex-start; /* Align items to the top, or 'center' for vertical centering */
    margin-bottom: 0.6rem;
    gap: 0.8rem; /* Space between image and info */
}
.profile-pic-list {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Make it round */
    object-fit: cover; /* Ensures image covers the area without distortion */
    border: 2px solid var(--gemini-border-color);
    flex-shrink: 0; /* Prevent image from shrinking */
}
.resume-card-info {
    flex-grow: 1; /* Allow info to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center text if image is taller */
    min-width: 0; /* Important for text truncation within flex items */
}
.resume-card-info .resume-name-list {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resume-card-info .job-title-list {
    font-size: 0.8rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resume-card-info .resume-id-list {
    font-size: 0.7rem;
    color: var(--gemini-text-secondary);
    opacity: 0.8;
}

.resume-card .skills-section .badge,
.resume-card .technologies-section .badge {
    padding: 0.25em 0.45em;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
}
.resume-card .technologies-section .badge .fa-star {
    font-size: 0.7em;
}
.resume-card .technologies-section .badge .skill-level {
    font-size: 0.8em;
}

.resume-card .projects-count-badge {
    font-size: 0.7rem;
    padding: 0.25em 0.45em;
    background-color: var(--gemini-bg-light); /* Ensure visibility */
    color: var(--gemini-text-secondary); /* Ensure visibility */
    border: 1px solid var(--gemini-border-color); /* Optional: for more definition */
}
.resume-card .projects-count-badge i {
    margin-right: 0.2rem;
    color: var(--gemini-accent-purple); /* Themed icon color */
}

.resume-card .summary-text,
.resume-card .description-html-content {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.35;
    flex-grow: 1; /* Allow description to take available space before actions */
}

.resume-card .description-html-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Truncate to 3 lines */
    max-height: calc(0.75rem * 1.35 * 3); /* Adjusted for new font-size and line-height */
}


.resume-card-actions {
    padding-top: 0.6rem;
    margin-top: auto; /* Push actions to bottom */
    border-top: 1px solid var(--gemini-border-color); /* Add a separator line */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.resume-card .timestamp {
    font-size: 0.65rem;
}

.pagination {
    margin-top: 2rem !important;
}
.pagination .page-item .page-link {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    margin: 0 0.1rem;
}

.no-results .material-icons-sharp {
    font-size: 2.8rem;
    margin-bottom: 0.7rem;
}
.no-results p {
    font-size: 0.95rem;
}

/* === VIEW RESUME PAGE STYLES (listCandidateResume.html) === */
.resume-view-container {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    padding: 1.5rem;
    box-shadow: var(--gemini-box-shadow);
}

.resume-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gemini-border-color);
}

.resume-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gemini-accent-blue);
    flex-shrink: 0;
}

.resume-intro {
    flex-grow: 1;
}

.resume-name {
    font-size: 1.6rem;
    color: var(--gemini-text-primary);
    margin-bottom: 0.1rem;
    line-height: 1.2;
}
.resume-profession {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    color: var(--gemini-accent-blue);
    line-height: 1.3;
}
.resume-header .text-muted.small {
    font-size: 0.7rem;
    color: var(--gemini-text-secondary) !important;
    line-height: 1.3;
}

.resume-section {
    margin-bottom: 1.5rem;
}
.resume-section-title {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.3rem;
    color: var(--gemini-text-primary);
    border-bottom: 2px solid var(--gemini-accent-blue);
    display: flex;
    align-items: center;
}
.resume-section-title .material-icons-sharp,
.resume-section-title .fas {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.resume-section-title .fa-briefcase,
.resume-section-title .fa-project-diagram {
    color: var(--gemini-accent-purple);
}
.resume-section-title .code-icon-class {
    color: var(--gemini-success-color);
}


.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}
.contact-item {
    font-size: 0.825rem;
    margin-bottom: 0.25rem;
    color: var(--gemini-text-secondary);
    display: flex;
    align-items: center;
}
.contact-item i {
    margin-right: 0.4rem;
    font-size: 0.9rem;
    width: 14px;
    text-align: center;
    color: var(--gemini-accent-blue);
    flex-shrink: 0;
}
.contact-item a, .contact-item span {
    color: var(--gemini-text-secondary);
    word-break: break-word;
}
.contact-item a:hover {
    color: var(--gemini-accent-blue);
}


.summary-content, .description-content {
    line-height: 1.5;
    font-size: 0.85rem;
    color: var(--gemini-text-secondary);
}

.skills-list .badge {
    background-color: #e9ecef;
    color: var(--gemini-text-secondary);
    font-weight: 500;
    padding: 0.3em 0.55em;
    margin: 0.1rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    border: 1px solid var(--gemini-border-color);
}
.skills-list .badge.specialization {
    background-color: var(--gemini-accent-blue) !important;
    color: var(--gemini-text-on-accent) !important;
    border: 1px solid var(--gemini-accent-blue) !important;
}
.skills-list .badge .skill-level {
    font-size: 0.85em;
    opacity: 0.8;
    margin-left: 0.25em;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--gemini-accent-blue);
    border: 1.5px solid var(--gemini-bg-medium);
    z-index: 1;
}

.timeline-item {
    margin-bottom: 1.1rem;
    padding-left: 0.8rem;
    border-left: 2px solid var(--gemini-border-color);
}


.timeline-item-title {
    font-size: 0.95rem;
    color: var(--gemini-text-primary);
    margin-bottom: 0.05rem;
}
.timeline-item-subtitle {
    font-size: 0.85rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.15rem;
}
.timeline-item-dates {
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
    color: var(--gemini-text-secondary);
}
.timeline-item-description {
    font-size: 0.825rem;
    line-height: 1.45;
    color: var(--gemini-text-secondary);
}
.timeline-item-description ul {
    padding-left: 0.8rem;
    margin-top: 0.2rem;
}
.timeline-item-description li {
    margin-bottom: 0.15rem;
}

.project-technologies .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.4em;
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-secondary);
}
.project-url a {
    font-size: 0.75rem;
    color: var(--gemini-accent-blue);
}

.languages-list .badge {
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.25em 0.5em;
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-secondary);
}

.resume-actions {
    margin-top: 1.5rem;
    padding-top: 0.8rem;
    gap: 0.6rem;
    border-top: 1px solid var(--gemini-border-color);
}

/* Collapsible item specific styles from editResume.html (should not affect listCandidateResume.html) */
.collapse.show {
}
.collapsing {
    transition: height 0.25s ease;
}
.repeatable-item .collapse {
    border-radius: 0 0 calc(var(--gemini-border-radius) * 0.66) calc(var(--gemini-border-radius) * 0.66) !important;
    border: 1px solid var(--gemini-border-color) !important;
    border-top: none !important;
    padding: 1rem !important;
    background-color: var(--gemini-bg-medium);
}

.repeatable-item-header[data-bs-toggle="collapse"] div {
    display: flex;
    align-items: center;
}
.repeatable-item-header[data-bs-toggle="collapse"] div .fas {
    margin-right: 0.6rem;
    color: var(--gemini-text-secondary);
    font-size: 0.9em;
}

/* ... (all existing styles from your materialWide/css/style.css remain) ... */

/* === LIST JOB PAGE STYLES (listJobs.html) === */
.job-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    padding: 0.9rem; /* Adjusted padding for compactness */
    box-shadow: var(--gemini-box-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.job-card:hover {
    transform: translateY(-3px); /* Slightly more pronounced hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.job-card-header {
    margin-bottom: 0.5rem; /* Reduced space */
}

.job-card-info .job-title-list {
    font-size: 1.05rem; /* Main job title */
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-info .job-role-list { /* New style for role */
    font-size: 0.85rem;
    color: var(--gemini-text-primary);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-info .location-list {
    font-size: 0.75rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 0; /* No margin if it's the last item in header info */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-card-info .location-list i {
    font-size: 0.9em;
    color: var(--gemini-text-secondary); /* Match text color */
}

.job-meta-section { /* New section for experience, open positions */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap if not enough space */
    gap: 0.3rem 0.8rem; /* Row gap, Column gap */
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    color: var(--gemini-text-secondary);
}
.job-meta-section .job-meta-item {
    display: inline-flex;
    align-items: center;
}
.job-meta-section .job-meta-item i {
    margin-right: 0.3rem;
    color: var(--gemini-accent-purple); /* Consistent icon color for meta items */
    font-size: 0.9em;
}


.job-description-snippet {
    font-size: 0.8rem; /* Slightly larger for readability */
    color: var(--gemini-text-secondary);
    line-height: 1.45; /* Adjusted line height */
    margin-bottom: 0.75rem; /* Space below description */
    flex-grow: 1;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Max 3 lines */
    max-height: calc(0.8rem * 1.45 * 3); /* Approx 3.48rem */
}

.job-card-footer {
    margin-top: 0.5rem;
    padding-top: 0.6rem; /* Increased padding */
    border-top: 1px solid var(--gemini-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem; /* Slightly larger footer text */
}

.job-type-badge {
    background-color: var(--gemini-accent-purple) !important;
    color: var(--gemini-text-on-accent) !important;
    font-weight: 500;
    padding: 0.3em 0.6em; /* Adjusted padding */
    font-size: 0.9em; /* Relative to footer font size */
    border-radius: var(--gemini-border-radius);
}

.job-card-footer .timestamp {
    color: var(--gemini-text-secondary);
    opacity: 0.9;
}

.job-card-actions {
    padding-top: 0.8rem;
    margin-top: auto;
}
.job-card-actions .btn-primary { /* Ensure button takes full width and is themed */
    background-color: var(--gemini-accent-blue);
    border-color: var(--gemini-accent-blue);
}
.job-card-actions .btn-primary:hover {
    background-color: #1665C7; /* Darker blue on hover */
    border-color: #1665C7;
}


.job-item { /* Ensure consistent bottom margin for columns */
    margin-bottom: 1.5rem; /* Increased spacing between rows of cards */
}

/* Ensure filter dropdowns are compact */
#filterJobType {
    font-size: 0.875rem; /* Match other form-select-sm */
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}



/* === JOB DETAIL PAGE STYLES (viewJob.html) === */
.job-detail-page-container {
    /* Similar to .resume-view-container but can be distinct if needed */
}

.job-detail-header.card {
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-box-shadow);
    background-color: var(--gemini-bg-medium);
}

.job-detail-header .card-body {
    padding: 1.5rem; /* Adjust for compactness */
}

.job-title-main {
    font-size: 1.8rem; /* Reduced from viewResume's h1 */
    color: var(--gemini-text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.job-role-main {
    font-size: 1.1rem; /* Reduced */
    color: var(--gemini-text-secondary);
    margin-bottom: 0.75rem;
}

.job-meta-main {
    font-size: 0.85rem; /* Reduced */
    color: var(--gemini-text-secondary);
}
.job-meta-main .job-meta-item i {
    font-size: 0.9em; /* Make icons slightly smaller than text */
}

.job-dates-main small {
    font-size: 0.8rem; /* Reduced */
}

.job-detail-section.card {
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-box-shadow);
    background-color: var(--gemini-bg-medium);
}

.job-detail-section .card-header.section-title-like {
    font-size: 1.2rem; /* Consistent with other section titles */
    font-weight: 500;
    color: var(--gemini-text-primary);
    background-color: var(--gemini-bg-light); /* Light header for sections */
    border-bottom: 1px solid var(--gemini-border-color);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
}
.job-detail-section .card-header.section-title-like i {
    font-size: 1.1em; /* Icon size relative to title */
}


.job-description-full {
    font-size: 0.9rem; /* Slightly smaller than default body text for compactness */
    line-height: 1.6;
    color: var(--gemini-text-secondary);
}
.job-description-full p {
    margin-bottom: 0.75rem;
}
.job-description-full ul,
.job-description-full ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.job-description-full strong {
    color: var(--gemini-text-primary);
    font-weight: 500;
}


.apply-section-card.card {
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-box-shadow);
    background-color: var(--gemini-bg-medium);
}
.apply-section-card .card-header.section-title-like {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
    background-color: var(--gemini-bg-light);
    border-bottom: 1px solid var(--gemini-border-color);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
}
.apply-section-card .card-header.section-title-like i {
    font-size: 1.1em;
}

.apply-section-card .card-body {
    padding: 1.5rem; /* Standard padding for form area */
}

/* Re-use form styles from editResume.html for consistency */
.apply-section-card .form-label {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.3rem;
    font-size: var(--form-label-font-size);
}
.apply-section-card .form-control,
.apply-section-card .form-select {
    background-color: var(--gemini-bg-medium); /* Or --gemini-bg-light if you prefer contrast */
    border: 1px solid var(--gemini-border-color);
    color: var(--gemini-text-primary);
    border-radius: calc(var(--gemini-border-radius) * 0.66);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-element-font-size);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}
.apply-section-card .form-control:not(textarea) {
    height: calc( (var(--form-control-padding-y) * 2) + (var(--form-element-font-size) * 1.4) + 2px);
}
.apply-section-card .form-control:focus,
.apply-section-card .form-select:focus {
    border-color: var(--gemini-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(26, 115, 232, 0.15);
}
.apply-section-card .select-wrapper::after { /* Ensure select arrow is visible */
    color: var(--gemini-text-secondary);
}
.apply-section-card .form-text {
    font-size: 0.75rem;
    color: var(--gemini-text-secondary);
}
.apply-section-card .error-message {
    font-size: 0.75rem;
}
.apply-section-card .form-actions {
    margin-top: 1.5rem; /* Reduced margin */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Soft Badges for status */
.badge.bg-success-soft {
    background-color: rgba(var(--bs-success-rgb), 0.15) !important; /* Bootstrap 5.3+ way */
}
.badge.text-success {
    color: var(--gemini-success-color) !important;
}
.badge.bg-danger-soft {
    background-color: rgba(var(--bs-danger-rgb), 0.15) !important;
}
.badge.text-danger {
    color: var(--gemini-danger-color) !important;
}

/* ... (all existing styles from your materialWide/css/style.css remain) ... */

/* === JOB DETAIL PAGE STYLES (viewJob.html) === */
/* ... (existing job detail styles) ... */

.job-detail-page-container .row {
    /* Ensures the row itself doesn't have unexpected margins if any global styles interfere */
}

/* Sticky Apply Form for larger screens */
@media (min-width: 992px) { /* lg breakpoint and up */
    .apply-section-card.sticky-lg-top {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 85px; /* Adjust based on your navbar height + desired offset */
        z-index: 1019; /* Below navbar (1030) but above other content */
        max-height: calc(100vh - 100px); /* Prevent it from overflowing viewport, adjust 100px as needed */
        overflow-y: auto; /* Allow scrolling within the apply form if it's too tall */
    }
}

/* Style for the resume preview image placeholder */
#resumePreview img {
    border-radius: var(--gemini-border-radius); /* Match theme */
}

/* ... (rest of your job detail styles and other CSS) ... */

/* ... (all existing styles from your materialWide/css/style.css remain) ... */

/* === LOGIN PAGE STYLES (login.html) === */
.login-card {
    max-width: 450px; /* Max width of the login card */
    width: 100%;
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
    background-color: var(--gemini-bg-medium); /* White card background */
}

.login-card .card-body {
    padding: 2rem; /* Generous padding inside the card */
}

.login-icon {
    font-size: 3rem; /* Large login icon */
    color: var(--gemini-accent-blue);
    margin-bottom: 0.5rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gemini-text-primary);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    font-size: 0.95rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 1.5rem;
}

.login-alert {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}
.login-alert .btn-close {
    padding: 0.75rem; /* Ensure close button is easily clickable */
}


.login-card .form-label {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.3rem;
    font-size: var(--form-label-font-size);
}

.login-card .form-control {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    color: var(--gemini-text-primary);
    border-radius: calc(var(--gemini-border-radius) * 0.66);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-element-font-size);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}
.login-card .form-control:not(textarea) {
    height: calc( (var(--form-control-padding-y) * 2) + (var(--form-element-font-size) * 1.4) + 2px);
}

.login-card .form-control:focus {
    border-color: var(--gemini-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(26, 115, 232, 0.15);
}

.login-card .checkbox-group {
    /* Styles for checkbox are already defined globally */
}
.login-card .checkbox-group label {
    font-size: 0.85rem; /* Slightly smaller for "Remember me" */
}

.forgot-password-link {
    font-size: 0.85rem;
    color: var(--gemini-accent-blue);
    text-decoration: none;
}
.forgot-password-link:hover {
    text-decoration: underline;
}

.btn-login {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.signup-prompt p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.create-account-link {
    color: var(--gemini-accent-blue);
    font-weight: 500;
    text-decoration: none;
}
.create-account-link:hover {
    text-decoration: underline;
}

/* Ensure main container on login page centers content vertically */
.container-main.d-flex.justify-content-center.align-items-center {
    padding-top: 1rem; /* Adjust if navbar is fixed and has height */
    padding-bottom: 1rem;
}

/* ... (all existing styles) ... */

/* === REGISTER PAGE STYLES (register.html) === */
.register-card {
    max-width: 550px; /* Slightly wider for more fields if needed */
    width: 100%;
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
    background-color: var(--gemini-bg-medium);
}

.register-card .card-body {
    padding: 2rem;
}

.register-icon {
    font-size: 3rem;
    color: var(--gemini-accent-purple); /* Different accent for registration */
    margin-bottom: 0.5rem;
}

.register-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gemini-text-primary);
    margin-bottom: 0.25rem;
}

.register-subtitle {
    font-size: 0.95rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 1.5rem;
}

.register-alert {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}
.register-alert .btn-close {
    padding: 0.75rem;
}
.register-alert .alert-link {
    font-weight: bold;
    color: inherit; /* Inherit color from parent alert type */
    text-decoration: underline;
}
.alert-success .alert-link {
    color: var(--gemini-success-color);
}
.alert-danger .alert-link {
    color: var(--gemini-danger-color);
}


.register-card .form-label {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.3rem;
    font-size: var(--form-label-font-size);
}

.register-card .form-control {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    color: var(--gemini-text-primary);
    border-radius: calc(var(--gemini-border-radius) * 0.66);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-element-font-size);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}
.register-card .form-control:not(textarea) {
    height: calc( (var(--form-control-padding-y) * 2) + (var(--form-element-font-size) * 1.4) + 2px);
}

.register-card .form-control:focus {
    border-color: var(--gemini-accent-purple); /* Use purple accent for focus */
    box-shadow: 0 0 0 0.15rem rgba(126, 87, 194, 0.15); /* Purple shadow */
}
.register-card .form-control.is-invalid { /* Bootstrap's default invalid style might be fine */
    border-color: var(--gemini-danger-color);
}
.register-card .error-message { /* Ensure this is styled if not already globally */
    display: block;
    font-size: 0.75rem;
    color: var(--gemini-error-text-color);
    margin-top: 0.2rem;
    font-weight: 500;
}


.btn-register { /* Specific style for register button if needed, else btn-gemini-primary is fine */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: var(--gemini-accent-purple); /* Purple for register button */
    border-color: var(--gemini-accent-purple);
    color: var(--gemini-text-on-dark-accent);
}
.btn-register:hover {
    background-color: #6A439E; /* Darker purple */
    border-color: #6A439E;
    color: var(--gemini-text-on-dark-accent);
}

.signin-prompt p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.login-link { /* Style for the "Sign In" link on register page */
    color: var(--gemini-accent-blue); /* Blue for login link */
    font-weight: 500;
    text-decoration: none;
}
.login-link:hover {
    text-decoration: underline;
}

/* ... (all existing styles, including .register-card and its children) ... */

/* Specific adjustments for Client Register Page if needed */
.client-register-card {
    max-width: 650px; /* Slightly wider than candidate registration if needed */
}

/* Ensure the main container allows for vertical centering of potentially taller cards */
.container-main.d-flex.justify-content-center.align-items-start {
    /* align-items-start allows taller cards to not be cut off if they exceed viewport height before scrolling */
}

.client-register-card .register-icon {
    color: var(--gemini-accent-blue); /* Example: Blue for client registration */
}



.client-register-card .btn-register {
    background-color: var(--gemini-accent-blue);
    border-color: var(--gemini-accent-blue);
}
.client-register-card .btn-register:hover {
    background-color: #1665C7; // Darker blue
    border-color: #1665C7;
}

/* ... (existing styles) ... */

/* === OR DIVIDER UTILITY === */
.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--gemini-border-color); /* Uses your theme's border color */
}

.or-divider-text {
    padding: 0 0.75rem; /* Adjust spacing around "OR" text */
    font-size: 0.8rem;   /* Slightly smaller text for "OR" */
    font-weight: 500;
    line-height: 1;      /* Prevents extra vertical space */
    color: var(--gemini-text-secondary); /* Uses your theme's secondary text color */
}

/* ... (rest of your styles) ... */

/* ... (all existing styles) ... */

/* === HOMEPAGE STYLES (home.html) === */

.hero-section {
    background-color: var(--gemini-bg-light); /* Light background for hero */
    padding: 4rem 1.5rem;
    color: var(--gemini-text-primary);
    border-bottom: 1px solid var(--gemini-border-color);
}

.hero-title {
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.75rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gemini-text-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

.hero-cta .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
}

.how-it-works-section,
.why-choose-us-section,
.for-candidates-section,
.for-clients-section,
.featured-section,
.final-cta-section {
    padding: 3.5rem 1.5rem; /* Consistent vertical padding */
}

.bg-light-alt { /* For alternating section backgrounds */
    background-color: var(--gemini-bg-dark); /* Slightly different from page bg for contrast */
}


.section-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--gemini-text-primary);
    margin-bottom: 2.5rem; /* Increased margin */
}
.section-title-sub { /* For titles within two-column layouts */
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 1rem;
}

.feature-card {
    background-color: var(--gemini-bg-medium);
    padding: 2rem;
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
    height: 100%;
    border: 1px solid var(--gemini-border-color);
}

.feature-icon span.material-icons-sharp {
    font-size: 3rem;
    color: var(--gemini-accent-purple);
}

.feature-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
    margin-bottom: 1rem;
}
.feature-card ol li .material-icons-sharp {
    font-size: 1.2em; /* Adjust icon size relative to text */
    line-height: inherit; /* Align with text */
}


.info-box {
    padding: 1.5rem;
}

.info-icon i {
    font-size: 2.5rem;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.5rem;
}

.info-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
    margin-bottom: 0.5rem;
}

.info-text {
    font-size: 0.9rem;
    color: var(--gemini-text-secondary);
}

.lead-text {
    font-size: 1.05rem;
    color: var(--gemini-text-secondary);
    line-height: 1.6;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, var(--gemini-accent-blue) 0%, #4C8FFB 100%); /* Example gradient */
}

.final-cta-section h2 {
    font-weight: 600;
}
.final-cta-section .btn-light {
    color: var(--gemini-accent-blue);
    font-weight: 500;
}
.final-cta-section .btn-outline-light {
    border-color: rgba(255,255,255,0.75);
    color: #fff;
    font-weight: 500;
}
.final-cta-section .btn-outline-light:hover {
    background-color: #fff;
    color: var(--gemini-accent-blue);
}

/* Responsive adjustments for images in sections */
.for-candidates-section img,
.for-clients-section img {
    max-height: 350px; /* Control image height */
    object-fit: contain; /* Or 'cover' depending on image aspect ratio */
    margin: 0 auto; /* Center image if it's smaller than column */
    display: block;
}

/* Ensure list items in "How it Works" are nicely aligned */
.how-it-works-section ol li {
    line-height: 1.6;
}
.how-it-works-section ol li .material-icons-sharp {
    position: relative;
    top: 4px; /* Fine-tune vertical alignment */
}

/* ... (all existing styles) ... */

/* === PAGE HEADER (for About, Contact, etc.) === */
.page-header-section {
    background-color: var(--gemini-bg-light);
    padding: 3rem 1.5rem; /* Slightly less padding than hero */
    color: var(--gemini-text-primary);
    border-bottom: 1px solid var(--gemini-border-color);
    margin-bottom: 2rem; /* Space before content */
}

.page-main-title {
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.5rem;
}

.page-main-subtitle {
    font-size: 1.15rem;
    color: var(--gemini-text-secondary);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* === CONTACT PAGE STYLES === */
.contact-content-section {
    /* General padding is handled by py-5 */
}

.contact-info-card,
.contact-form-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
}

.contact-info-title,
.contact-form-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
}
.contact-info-title .material-icons-sharp,
.contact-form-title .material-icons-sharp {
    color: var(--gemini-accent-blue);
    font-size: 1.6rem; /* Adjust icon size */
}


.contact-item {
    display: flex;
    align-items: flex-start; /* Align icon to top if text wraps */
    font-size: 0.9rem;
    color: var(--gemini-text-secondary);
}

.contact-item .contact-icon {
    font-size: 1.5rem; /* Material icon size */
    color: var(--gemini-accent-purple);
    margin-right: 0.8rem;
    margin-top: 0.1rem; /* Small top margin for alignment */
}

.contact-item a {
    color: var(--gemini-accent-blue);
    text-decoration: none;
}
.contact-item a:hover {
    text-decoration: underline;
}

.contact-info-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gemini-text-secondary);
}

.btn-icon { /* For social media icons */
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.map-placeholder {
    /* Styles for map placeholder */
}

/* === ABOUT US PAGE STYLES === */
.about-mission-section img {
    max-height: 400px; /* Control image height */
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.what-we-do-section .info-box,
.for-stakeholders-section .feature-card {
    display: flex;
    flex-direction: column;
}
.what-we-do-section .info-box .info-text,
.for-stakeholders-section .feature-card .info-text {
    flex-grow: 1; /* Make text content take available space */
}
.what-we-do-section .info-box .btn,
.for-stakeholders-section .feature-card .btn {
    margin-top: auto; /* Push button to bottom if cards have varying text length */
}


.our-values-section .value-item {
    /* Styles for value items if needed */
}
.our-values-section .value-icon {
    font-size: 2.5rem;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.5rem;
    display: block; /* Make icon block to center it */
}
.our-values-section .value-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
}

/* Ensure form elements on contact page use theme variables */
.contact-form-card .form-label {
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.3rem;
    font-size: var(--form-label-font-size);
}

.contact-form-card .form-control {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    color: var(--gemini-text-primary);
    border-radius: calc(var(--gemini-border-radius) * 0.66);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-element-font-size);
}
.contact-form-card .form-control:focus {
    border-color: var(--gemini-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(26, 115, 232, 0.15);
}

/* ... (all existing styles) ... */

/* === SERVICES PAGE STYLES (services.html) === */

.service-section {
    /* Reuses padding from .how-it-works-section, .why-choose-us-section, etc. */
}

.service-image {
    /* Optional: Add specific styles for service images if they need different treatment */
    /* max-height: 400px; */ /* Example: Limit height */
    /* object-fit: contain; */ /* Ensure image fits without stretching */
    /* border: 1px solid var(--gemini-border-color); */ /* Example: Add a border */
    /* padding: 1rem; */ /* Example: Add padding inside border */
}

/* Ensure list items in service sections are nicely aligned */
.service-section ul.list-checked li {
    line-height: 1.6;
}
.service-section ul.list-checked li::before {
    /* Styles for the check icon are inherited from .list-checked */
    top: 5px; /* Fine-tune vertical alignment if needed */
}


/* Reuses styles for:
.page-header-section
.page-main-title
.page-main-subtitle
.bg-light-alt
.section-title-sub
.lead-text
.list-checked.primary
.final-cta-section
.bg-primary-gradient
.btn-lg
.btn-light
.btn-outline-light
*/

/* ... (rest of your styles) ... */

/* ... (all existing styles) ... */

/* === BLOG LISTING PAGE STYLES (listBlog.html) === */
.blog-listing-section {
    /* Uses standard py-5 padding */
}

.blog-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.07);
}

.blog-card-image {
    height: 200px; /* Adjust as needed */
    object-fit: cover;
    border-top-left-radius: calc(var(--gemini-border-radius) - 1px); /* Adjust for border */
    border-top-right-radius: calc(var(--gemini-border-radius) - 1px);
}

.blog-card .card-body {
    padding: 1rem; /* Slightly less padding for cards */
}

.blog-card-title a {
    color: var(--gemini-text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}
.blog-card-title a:hover {
    color: var(--gemini-accent-blue);
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: var(--gemini-text-secondary);
    line-height: 1.5;
    /* CSS for truncating excerpt text */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: calc(0.875rem * 1.5 * 3); /* font-size * line-height * lines */
}

.blog-card-meta {
    font-size: 0.8rem;
}
.blog-card-meta .btn-link {
    font-size: 0.8rem;
    font-weight: 500;
}

.badge.bg-primary-soft {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important; /* Bootstrap 5.3+ way */
}
.badge.text-primary {
    color: var(--gemini-accent-blue) !important;
}
.badge.bg-secondary-soft {
    background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
}
.badge.text-secondary {
    color: var(--gemini-text-secondary) !important;
}


/* === SINGLE BLOG POST PAGE STYLES (viewBlog.html) === */
.blog-post-view-section {
    /* Uses standard py-5 padding */
}

.blog-post-full-content {
    background-color: var(--gemini-bg-medium);
    padding: 2rem; /* More padding for single post */
    border-radius: var(--gemini-border-radius);
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-box-shadow);
}

.blog-post-header .blog-post-title {
    color: var(--gemini-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.blog-post-meta {
    font-size: 0.9rem;
}
.blog-post-meta a {
    color: var(--gemini-accent-blue);
    text-decoration: none;
    font-weight: 500;
}
.blog-post-meta a:hover {
    text-decoration: underline;
}

.blog-post-featured-image img {
    max-height: 450px; /* Adjust as needed */
    width: 100%;
    object-fit: cover;
}

.blog-post-body {
    font-size: 1rem; /* Good base for readability */
    line-height: 1.7;
    color: var(--gemini-text-primary);
}
.blog-post-body h2, .blog-post-body h3, .blog-post-body h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--gemini-text-primary);
}
.blog-post-body p {
    margin-bottom: 1.25rem;
}
.blog-post-body ul, .blog-post-body ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.blog-post-body blockquote {
    border-left: 4px solid var(--gemini-accent-blue);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--gemini-text-secondary);
}
.blog-post-body pre {
    background-color: var(--gemini-bg-dark); /* Or your Prism.js theme background */
    padding: 1rem;
    border-radius: var(--gemini-border-radius);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.blog-post-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
}
.blog-post-body pre code {
    padding: 0;
    background-color: transparent;
    color: inherit; /* Let Prism.js handle colors */
}

.blog-post-tags .badge,
.blog-post-share .btn {
    font-size: 0.85rem;
}

.blog-post-author-bio {
    border-top: 1px solid var(--gemini-border-color);
}

.blog-post-comments h3 {
    font-weight: 600;
}
.blog-post-comments .form-control {
    font-size: 0.9rem;
}

/* ... (rest of your styles) ... */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* Adjust gap as needed */
    margin-bottom: 1rem;
}
.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* Adjust gap as needed */
    margin-bottom: 1rem;
}

@media (max-width: 992px) { /* Tablet */
    .grid-3-col, .grid-4-col {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) { /* Mobile */
    .grid-3-col, .grid-4-col {
        grid-template-columns: 1fr; /* Stack columns */
    }
}



/* NEW class specifically for pages like editCandidate.html that need a card form */
.content-card-form {
    background-color: var(--gemini-bg-medium); /* White background for the card */
    border: 1px solid var(--gemini-border-color); /* Optional: if you want a border */
    border-radius: var(--gemini-border-radius); /* Rounded corners */
    box-shadow: var(--gemini-box-shadow);      /* Standard shadow */
    padding: 1.5rem; /* Inner padding for the card content */
    margin-top: 1.5rem; /* Space between navbar and card */
    margin-bottom: 2rem; /* Space before footer */
    max-width: 1140px; /* Or your preferred max-width for these forms */
    /* margin-left: auto; and margin-right: auto; are inherited from .container */
}

/* === PAGE TITLES (Specific for Card Layouts) === */
.content-card-form h1.page-title {
    font-size: 1.65rem; /* Adjusted: Smaller than a typical h2, for a more subdued headline */
    font-weight: 500;   /* Adjusted: Slightly less bold */
    color: var(--gemini-text-primary);
    background-color: var(--gemini-bg-light); /* Light grey background for the title area */
    padding: 0.75rem 1.5rem; /* Padding around the title text */

    /* Negative margins to make the background stretch to the card's edges */
    margin-top: -1.5rem;    /* Pulls it to the top of the parent card's padding */
    margin-left: -1.5rem;   /* Pulls it to the left edge of the parent card's padding */
    margin-right: -1.5rem;  /* Pulls it to the right edge of the parent card's padding */

    /* The existing mb-4 class on the h1 in HTML will provide margin-bottom */
    /* margin-bottom: 1.5rem; /* Space below the title block, before the form content */

    border-bottom: 1px solid var(--gemini-border-color); /* Separator line */
    border-top-left-radius: var(--gemini-border-radius); /* Match parent card's top corners */
    border-top-right-radius: var(--gemini-border-radius); /* Match parent card's top corners */

    /* text-align: center; is already applied via class in HTML, but can be reinforced if needed */
}


/* Admin Page - Candidate Resumes Two-Column Layout */
.admin-candidate-select-list .list-group-item {
    padding: 0.6rem 0.8rem; /* Compact list items */
    border-radius: var(--gemini-border-radius);
    margin-bottom: 0.3rem;
    transition: background-color 0.15s ease-in-out;
}

.admin-candidate-select-list .list-group-item.active {
    background-color: var(--gemini-accent-blue);
    border-color: var(--gemini-accent-blue);
    color: var(--gemini-text-on-accent);
}
.admin-candidate-select-list .list-group-item.active .candidate-list-email,
.admin-candidate-select-list .list-group-item.active .resume-count-badge-list {
    color: rgba(255,255,255,0.85) !important;
}
.admin-candidate-select-list .list-group-item.active .resume-count-badge-list {
    background-color: rgba(255,255,255,0.2) !important;
}


.candidate-list-photo {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 1px solid var(--gemini-border-color);
}

.admin-candidate-list-item .candidate-list-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--gemini-text-primary);
}
.admin-candidate-list-item.active .candidate-list-name {
    color: var(--gemini-text-on-accent);
}

.admin-candidate-list-item .candidate-list-email {
    font-size: 0.75rem;
    color: var(--gemini-text-secondary);
}

.resume-count-badge-list {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
    background-color: var(--gemini-bg-light);
    color: var(--gemini-text-secondary);
    border: 1px solid var(--gemini-border-color);
}

/* Ensure .resume-card styles are suitable for this context */
/* .resume-card is already defined, but you might want to check its padding/margins for this grid */
.col-xl-3.resume-item .resume-card,
.col-lg-4.resume-item .resume-card, /* If you use different col counts */
.col-md-6.resume-item .resume-card {
    /* margin-bottom is handled by g-3 on the row */
}

.resume-card .card-title.resume-name-list { /* From existing .resume-name-list */
    font-size: 1rem; /* Or adjust as needed for card title */
    font-weight: 600;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.2rem;
}
.resume-card .card-subtitle.job-title-list { /* From existing .job-title-list */
    font-size: 0.85rem;
    color: var(--gemini-text-secondary);
    margin-bottom: 0.2rem;
}
.resume-card .summary-text { /* From existing .summary-text */
    font-size: 0.8rem;
    line-height: 1.4;
    /* -webkit-line-clamp might need adjustment if card height changes */
}
.admin-resume-actions .btn-sm { /* Already defined, ensure it looks good here */
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.admin-resume-actions .btn-sm i {
    font-size: 0.85em; /* Slightly smaller icons in small buttons */
    margin-right: 0.25rem;
}

.section-title-sub { /* General utility for sub-section titles */
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--gemini-text-primary); /* Or var(--gemini-accent-blue) */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gemini-border-color);
    margin-bottom: 1rem; /* Default margin, can be overridden by mb-* classes */
}

/* In style.css */
.resume-card-additional-info {
    font-size: 0.75rem; /* Consistent small text for these details */
    border-top: 1px solid var(--gemini-border-color);
    border-bottom: 1px solid var(--gemini-border-color);
    padding: 0.5rem 0;
}

.resume-card-additional-info p i.fa-fw {
    /* text-primary is already applied in HTML, this is just a note */
    /* color: var(--gemini-accent-blue); */
}

/* In style.css */

/* ... (other .resume-card styles remain the same) ... */

.resume-card .resume-card-info .resume-meta-info {
    font-size: 0.7rem; /* Smaller font for these meta items */
    color: var(--gemini-text-secondary);
    opacity: 0.9;
    margin-top: 0.1rem; /* Small space below profession */
}
.resume-card .resume-card-info .resume-meta-info .resume-id-list {
    /* Individual span styling if needed, but gap handles spacing */
}


.resume-card-additional-info {
    font-size: 0.75rem; /* Consistent small text for these details */
    padding: 0.3rem 0; /* Reduced vertical padding, no horizontal padding needed if items have margins/gap */
    margin-top: 0.4rem; /* Space from header elements */
    margin-bottom: 0.6rem; /* Space before next section (technologies/description) */
    /* Removed borders for a cleaner, more integrated look */
    /* border-top: 1px solid var(--gemini-border-color); */
    /* border-bottom: 1px solid var(--gemini-border-color); */
}

.resume-card-additional-info .d-flex > span {
    /* This targets the spans directly if using gap isn't enough or for older browser support */
    /* margin-right: 0.75rem; /* Example if not using gap */
}
.resume-card-additional-info .d-flex > span:last-child {
    /* margin-right: 0; /* Remove margin from last item if not using gap */
}

.resume-card-additional-info .small.text-muted {
    display: inline-flex; /* Helps with vertical alignment of icon and text */
    align-items: center;
    line-height: 1.3; /* Adjust line height for better readability if text wraps */
}

.resume-card-additional-info .fa-fw {
    /* text-primary is already applied in HTML for icons */
    /* color: var(--gemini-accent-blue); */ /* Redundant if text-primary is used */
}

/* ... (rest of your styles) ... */

/* In style.css */

/* ... (your existing .resume-view-container, .resume-header, .resume-section, etc. styles from viewResume.html) ... */

/* Wrapper for the two-column layout */
.resume-and-ratings-container {
    /* No specific styles needed if using Bootstrap row/col directly */
}

/* Card styling for the resume details column to match the ratings card */
.resume-details-column .resume-view-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    padding: 1.5rem; /* Match .resume-view-container padding */
    box-shadow: var(--gemini-box-shadow);
    height: 100%; /* If you want columns to be equal height visually */
}


/* Ratings Column Styles */
.ratings-column {
    /* Styles for the column itself */
}

.ratings-sticky-container {
    /* For sticky behavior on larger screens */
}
@media (min-width: 992px) { /* lg breakpoint and up */
    .ratings-sticky-container {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 85px; /* Adjust based on your navbar height + desired offset */
        z-index: 1019; /* Below navbar (1030) but above other content */
        max-height: calc(100vh - 100px); /* Prevent it from overflowing viewport */
    }
    .ratings-sticky-container .ratings-card .card-body {
        max-height: calc(100vh - 100px - 50px); /* Adjust 50px for card header */
        overflow-y: auto; /* Allow scrolling within the ratings card if content is too tall */
    }
}


.ratings-card {
    background-color: var(--gemini-bg-medium);
    border: 1px solid var(--gemini-border-color);
    border-radius: var(--gemini-border-radius);
    box-shadow: var(--gemini-box-shadow);
    height: 100%; /* If you want columns to be equal height visually */
}

.ratings-card-header {
    background-color: var(--gemini-bg-light);
    border-bottom: 1px solid var(--gemini-border-color);
    padding: 0.75rem 1.25rem;
}

.ratings-main-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gemini-text-primary);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.ratings-main-title i {
    color: var(--gemini-accent-purple); /* Or your preferred accent */
}

.framework-rating-block {
    /* Spacing for each framework's rating block */
}

.framework-rating-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gemini-accent-blue);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--gemini-border-color);
}

.overall-score-display {
    font-size: 0.95rem;
}
.overall-score-display .fw-bold.text-primary {
    font-size: 1.1em; /* Make score slightly larger */
}


.rating-overall-summary {
    font-size: 0.85rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important; /* Softer background */
    border-left: 3px solid var(--gemini-accent-blue);
}
.rating-overall-summary p {
    color: var(--gemini-text-secondary);
}

.section-ratings-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gemini-text-secondary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.section-rating-list {
    /* Styles for the list of section ratings */
}

.section-rating-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gemini-border-color);
    font-size: 0.85rem;
}
.section-rating-item:last-child {
    border-bottom: none;
}
.section-rating-item strong {
    color: var(--gemini-text-primary);
}

.section-rating-comments {
    margin-top: 0.25rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--gemini-bg-light);
    font-size: 0.78rem;
}

.star-rating .fas.fa-star {
    color: #D3D3D3; /* Default empty star color */
    font-size: 0.9em; /* Adjust star size */
    margin-right: 1px;
}
.star-rating .fas.fa-star.filled {
    color: #FFC107; /* Filled star color (gold) */
}
.star-rating .fas.fa-star.half-filled {
    position: relative;
    color: #FFC107;
}
.star-rating .fas.fa-star.half-filled::before { /* For half star effect */
    content: '\f089'; /* Font Awesome half star character */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: #FFC107;
}
.star-rating .rating-score-text {
    font-size: 0.8em;
    color: var(--gemini-text-secondary);
}


.resume-actions-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gemini-border-color);
    display: flex;
    justify-content: flex-start; /* Or flex-end / center as preferred */
}

/* Responsive adjustments for the two-column layout */
@media (max-width: 991.98px) { /* Below lg breakpoint */
    .resume-details-column, .ratings-column {
        /* Full width on smaller screens, stacking handled by Bootstrap col-lg-* */
    }
    .ratings-sticky-container {
        position: static; /* Disable sticky on smaller screens */
    }
}

/* === NAVBAR === */
/* ... (existing navbar styles) ... */

.navbar-nav .nav-link {
    color: var(--gemini-text-secondary);
    font-weight: 500;
    font-size: 0.875rem; /* Existing style */
    /* font-family: var(--gemini-font-family); */ /* Already inherited from body, but can be explicit */
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--gemini-accent-blue);
}

/* ADDED/MODIFIED STYLES FOR DROPDOWN ITEMS */
.navbar .dropdown-menu {
    font-family: var(--gemini-font-family); /* Ensure dropdown menu itself uses theme font */
    border-radius: calc(var(--gemini-border-radius) * 0.8); /* Slightly smaller radius for dropdown */
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-box-shadow);
    padding: 0.3rem 0; /* Adjust padding for the menu */
    font-size: 0.85rem; /* Slightly smaller font size for dropdown items for better fit */
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--gemini-text-secondary);
    font-weight: 400; /* Regular weight for dropdown items, or 500 to match nav-links */
    padding: 0.35rem 1rem; /* Adjust padding for items */
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--gemini-accent-blue);
    background-color: #e8f0fe; /* Light blue hover, consistent with nav-link hover */
}

.navbar .dropdown-menu .dropdown-item.active, /* If you have active states in dropdowns */
.navbar .dropdown-menu .dropdown-item:active {
    color: var(--gemini-text-on-accent);
    background-color: var(--gemini-accent-blue);
}

/* ... (rest of your CSS) ... */




/* Custom styles for Quill to match the theme will go in style.css,
           but a few overrides might be needed here or inline if specific */
.ql-toolbar.ql-snow {
    border-top-left-radius: calc(var(--gemini-border-radius) * 0.66);
    border-top-right-radius: calc(var(--gemini-border-radius) * 0.66);
    border-color: var(--gemini-border-color);
    background-color: var(--gemini-bg-light); /* Light background for toolbar */
}
.ql-container.ql-snow {
    border-bottom-left-radius: calc(var(--gemini-border-radius) * 0.66);
    border-bottom-right-radius: calc(var(--gemini-border-radius) * 0.66);
    border-color: var(--gemini-border-color);
    font-size: var(--form-element-font-size); /* Match form control font size */
    color: var(--gemini-text-primary);
    background-color: var(--gemini-bg-medium);
}
.ql-editor {
    min-height: 120px; /* Adjust as needed, similar to textarea rows="4" */
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
}
.ql-editor.ql-blank::before{
    color: #A0A4A8; /* Placeholder text color */
    font-style: normal; /* Ensure placeholder is not italic if theme doesn't want it */
    left: var(--form-control-padding-x);
    right: var(--form-control-padding-x);
}





/* === WYSIWYG EDITOR (Quill.js) STYLING === */
.ql-toolbar.ql-snow {
    border: 1px solid var(--gemini-border-color);
    border-bottom: 0; /* Remove bottom border as container will have it */
    border-top-left-radius: calc(var(--gemini-border-radius) * 0.66);
    border-top-right-radius: calc(var(--gemini-border-radius) * 0.66);
    background-color: var(--gemini-bg-light); /* Light background for toolbar */
    padding: 6px 8px; /* Compact padding */
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 10px; /* Spacing between format groups */
}

.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--gemini-text-secondary);
    padding: 3px 5px;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: var(--gemini-accent-blue);
}
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    font-weight: 600; /* Or a subtle background */
}

.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
    width: 16px; /* Smaller icons */
    height: 16px;
    vertical-align: middle;
}
.ql-snow .ql-picker-label svg {
    vertical-align: middle;
}


.ql-container.ql-snow {
    border: 1px solid var(--gemini-border-color);
    border-bottom-left-radius: calc(var(--gemini-border-radius) * 0.66);
    border-bottom-right-radius: calc(var(--gemini-border-radius) * 0.66);
    font-size: var(--form-element-font-size); /* Match form control font size */
    color: var(--gemini-text-primary);
    background-color: var(--gemini-bg-medium); /* Match input background */
    line-height: 1.5; /* Consistent line height */
}

.ql-editor {
    min-height: 120px; /* Or adjust to match approx 4 rows of textarea */
    padding: var(--form-control-padding-y) var(--form-control-padding-x); /* Match form control padding */
    overflow-y: auto; /* Add scroll if content exceeds min-height */
}

.ql-editor.ql-blank::before {
    color: #A0A4A8; /* Placeholder text color, same as input placeholder */
    font-style: normal; /* Remove Quill's default italic placeholder */
    left: var(--form-control-padding-x); /* Align with padding */
    right: var(--form-control-padding-x);
    font-family: var(--gemini-font-family); /* Ensure placeholder uses theme font */
}

/* Ensure focus state is consistent */
#summaryEditorContainer .ql-container.ql-snow.ql-focused {
    border-color: var(--gemini-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(26, 115, 232, 0.15); /* Match form control focus */
}
/* If the toolbar should also indicate focus (optional) */
#summaryEditorContainer .ql-toolbar.ql-snow.ql-focused { /* This class might not be added by Quill, check if needed */
    border-color: var(--gemini-accent-blue);
}

/* Error state styling (if you want to indicate error on the editor itself) */
#summaryEditorContainer.is-invalid .ql-toolbar.ql-snow,
#summaryEditorContainer.is-invalid .ql-container.ql-snow {
    border-color: var(--gemini-danger-color) !important;
}
#summaryEditorContainer.is-invalid .ql-container.ql-snow.ql-focused {
    box-shadow: 0 0 0 0.15rem rgba(234, 67, 53, 0.15); /* Red focus shadow for error */
}

/* ... (existing styles) ... */

/* === OR DIVIDER UTILITY === */
.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--gemini-text-secondary); /* Match subtitle color */
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--gemini-border-color);
}

.or-divider-text {
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
}

/* === SOCIAL LOGIN BUTTONS === */
.social-login-buttons {
    /* Container for social buttons if needed for additional spacing or layout */
}

.btn-social-login {
    display: flex;
    align-items: center;
    justify-content: center; /* Center icon and text */
    font-weight: 500; /* Match other buttons */
    padding-top: 0.55rem; /* Adjust padding for consistent height */
    padding-bottom: 0.55rem;
}

.btn-social-login i.fab {
    font-size: 1.1em; /* Adjust icon size if needed */
}


.btn-social-login.btn-google {
    background-color: #DB4437;
    color: white;
    border-color: #DB4437;
}
.btn-social-login.btn-google:hover {
    background-color: #C33D2E;
    border-color: #C33D2E;
    color: white;
}



.btn-social-login.btn-github {
    background-color: #333;
color: white;
border-color: #333;
}
.btn-social-login.btn-github:hover {
    background-color: #24292e;
    border-color: #24292e;
    color: white;
}

.btn-social-login.btn-apple {
    background-color: #000;
color: white;
border-color: #000;
}
.btn-social-login.btn-apple:hover {
    background-color: #1c1c1e;
    border-color: #1c1c1e;
    color: white;
}

/* Global Messages Toast Container */
.global-messages-toast-container {
    position: fixed;
    top: 80px; /* Adjust based on your navbar height + desired offset */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2050; /* High z-index to appear above other content */
    width: auto;   /* Auto width based on content */
    min-width: 300px; /* Minimum width */
    max-width: 90%; /* Max width relative to viewport */
}

@media (min-width: 576px) { /* Small devices (sm) and up */
    .global-messages-toast-container {
        max-width: 500px; /* A fixed max-width for larger screens */
    }
}

.global-messages-toast-container .alert {
    margin-bottom: 0.75rem; /* Spacing between multiple messages */
    font-size: 0.9rem;    /* Adjust font size if needed */
    /* Bootstrap alert styles (alert-success, alert-danger, etc.) will apply */
}