/* =============================================================================
   RECRUITER OVERVIEW PAGE STYLES
   Design specs from Figma - 1920x1080 @ 1600px working space
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ADDITIONAL CSS VARIABLES (Dark Theme - Recruiter Page)
   ----------------------------------------------------------------------------- */
:root {
    /* Gray True Scale (from Figma) */
    --gray-true-25: #FCFCFC;
    --gray-true-200: #CACACA;
    --gray-true-300: #B1B1B1;
    --gray-true-500: #808080;
    --gray-true-600: #666666;
    --gray-true-700: #4D4D4D;
    --gray-true-750: #414141;
    --gray-true-800: #343434;
    --gray-true-850: #282828;
    --gray-true-900: #1B1B1B;
    --gray-true-950: #0F0F0F;

    /* Page-specific colors */
    --recruiter-bg: #1A1A1A;
    --recruiter-text: #E3E3E3;
    --recruiter-text-white: #FFFFFF;
    --recruiter-text-muted: #B1B1B1;

    /* Shadows - Dark theme */
    --shadow-button-dark: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 1px 2px 10px 0 rgba(0, 0, 0, 0.50);
    --shadow-button-square: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 1px 1px 8px 0 rgba(0, 0, 0, 0.50);
    --shadow-card-dark: 2px 5px 20px 0 rgba(0, 0, 0, 0.60);
    --shadow-inner-tag: 2px 2px 3px 0 rgba(0, 0, 0, 0.50) inset;
    --shadow-experience-item: 1px 1px 10px 0 rgba(0, 0, 0, 0.50);
    --shadow-scroll-top: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 2px 2px 15px 0 rgba(0, 0, 0, 0.60);
    --shadow-expand-btn: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 2px 2px 8px 0 rgba(0, 0, 0, 0.60);
}

/* -----------------------------------------------------------------------------
   TEXT SELECTION
   ----------------------------------------------------------------------------- */
::selection {
    background-color: var(--gray-true-600);
    color: #FFFFFF;
}

::-moz-selection {
    background-color: var(--gray-true-600);
    color: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   PAGE LAYOUT
   ----------------------------------------------------------------------------- */
.page-recruiter-overview {
    background: linear-gradient(136deg, #1A1A1A 21.92%, #0F0F0F 78.08%);
    min-height: 100vh;
    overflow-x: hidden;
}

.recruiter-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* -----------------------------------------------------------------------------
   TOP BAR
   ----------------------------------------------------------------------------- */
.recruiter-topbar {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 0;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    box-sizing: border-box;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}

.topbar-logo {
    height: 55px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

.topbar-name {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: var(--recruiter-text);
    line-height: normal;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Contact Reveal Button */
.btn-contact-reveal {
    display: flex;
    height: 40px;
    padding: 5px 25px 5px 21px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid var(--gray-true-700);
    background: transparent;
    color: var(--recruiter-text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
}

.btn-contact-reveal:hover {
    border-color: #7F7F7F;
    color: #FFFFFF;
}

.btn-contact-reveal:hover .icon {
    filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}

.btn-contact-reveal .icon {
    width: 20px;
    height: 20px;
}

/* Contact Info (revealed state) */
.contact-info-revealed {
    display: none;
    padding-right: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
}

.contact-info-revealed.visible {
    display: flex;
}

.contact-info-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--recruiter-text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.contact-info-item .icon {
    width: 16px;
    height: 16px;
}

.contact-info-item a {
    color: var(--recruiter-text);
    text-decoration: none;
}

.contact-info-item a:hover {
    color: var(--recruiter-text-white);
}

/* Download Button */
.btn-download {
    display: flex;
    height: 40px;
    padding: 5px 25px 5px 21px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid var(--gray-true-700);
    background: var(--gray-true-850);
    box-shadow: var(--shadow-button-dark);
    color: var(--recruiter-text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

.btn-download:hover {
    border-color: var(--gray-true-300);
    background: var(--gray-true-750);
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 1px 2px 10px 0 rgba(0, 0, 0, 0.50);
    color: #FFFFFF;
}

.btn-download:hover .icon {
    filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}

.btn-download .icon {
    width: 20px;
    height: 20px;
}

/* -----------------------------------------------------------------------------
   DIVIDERS
   ----------------------------------------------------------------------------- */
.divider-main {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.divider-line-dark {
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.divider-line-light {
    width: 100%;
    height: 2px;
    background-color: var(--gray-true-850);
}

/* Card divider (internal) */
.card-divider {
    display: flex;
    padding: 5px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    align-self: stretch;
}

.card-divider-line-1 {
    width: 100%;
    height: 2px;
    background-color: #000000;
}

.card-divider-line-2 {
    width: 100%;
    height: 2px;
    background-color: #282828;
}

/* -----------------------------------------------------------------------------
   FILTER BAR
   ----------------------------------------------------------------------------- */
.filter-section {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px 0 30px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filter-btn {
    display: flex;
    height: 35px;
    padding: 0 12px 0 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: #222222;
    color: var(--recruiter-text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--transition-base);
}

.filter-btn:hover {
    border-color: var(--gray-true-700);
    background: var(--gray-true-800);
}

.filter-btn.active {
    border-radius: 5px;
    border: 1px solid var(--gray-true-600);
    background: var(--gray-true-800);
    box-shadow: var(--shadow-inner-tag);
}

.filter-btn .icon {
    width: 20px;
    height: 20px;
}

/* -----------------------------------------------------------------------------
   FOCUS MODE TOGGLE
   ----------------------------------------------------------------------------- */

.focus-mode-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.focus-mode-label {
    color: #B1B1B1;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.focus-mode-toggle {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    border: 1px solid #5A5A5A;
    background: var(--gray-true-850);
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.40) inset;
    cursor: pointer;
    position: relative;
}

.focus-mode-toggle[data-state="on"] {
    border-color: #E3E3E3;
}

.focus-mode-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    min-width: 22px;
    text-align: center;
}

.focus-mode-toggle[data-state="on"] .focus-mode-on {
    color: #FFFFFF;
}

.focus-mode-switch {
    display: flex;
    width: 32px;
    height: 15px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 15px;
    border: 0.5px solid var(--gray-true-650);
    background: var(--gray-true-750);
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 2px 2px 8px 0 rgba(0, 0, 0, 0.60);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.2s ease, right 0.2s ease;
}

.focus-mode-toggle[data-state="off"] .focus-mode-switch {
    left: 5px;
}

.focus-mode-toggle[data-state="on"] .focus-mode-switch {
    right: 5px;
    left: auto;
}

.focus-mode-lines {
    display: flex;
    align-items: center;
    gap: 2px;
}

.focus-mode-line {
    display: flex;
    gap: 1px;
}

.focus-mode-line .line-1 {
    width: 1px;
    height: 8px;
    background: #1B1B1B;
}

.focus-mode-line .line-2 {
    width: 1px;
    height: 8px;
    background: #666;
}

/* -----------------------------------------------------------------------------
   FOCUS MODE - Card Colors
   ----------------------------------------------------------------------------- */

/* Card and filter transitions */
.recruiter-card {
    transition: border-color 0.3s ease;
}

.recruiter-card .card-icon img,
.recruiter-card .card-title {
    transition: filter 0.3s ease, color 0.3s ease;
}

.filter-btn .icon {
    transition: filter 0.3s ease;
}

/* Focus Mode ON - Card OVERVIEW (summary) */
.focus-mode .recruiter-card[data-card="summary"] {
    border-color: color-mix(in srgb, #FDE272 50%, transparent);
}
.focus-mode .recruiter-card[data-card="summary"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(36%) saturate(613%) hue-rotate(332deg) brightness(103%) contrast(98%);
}
.focus-mode .recruiter-card[data-card="summary"] .card-title {
    color: #FEFBE8;
}

/* Focus Mode ON - Card DESIGN APPROACH */
.focus-mode .recruiter-card[data-card="design-approach"] {
    border-color: color-mix(in srgb, #F7B27A 50%, transparent);
}
.focus-mode .recruiter-card[data-card="design-approach"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(675%) hue-rotate(332deg) brightness(101%) contrast(95%);
}
.focus-mode .recruiter-card[data-card="design-approach"] .card-title {
    color: #FEF6EE;
}

/* Focus Mode ON - Card EDUCATION */
.focus-mode .recruiter-card[data-card="education"] {
    border-color: color-mix(in srgb, #FAA7E0 50%, transparent);
}
.focus-mode .recruiter-card[data-card="education"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(77%) sepia(25%) saturate(754%) hue-rotate(283deg) brightness(101%) contrast(96%);
}
.focus-mode .recruiter-card[data-card="education"] .card-title {
    color: #FDF2FA;
}

/* Focus Mode ON - Card SKILLS */
.focus-mode .recruiter-card[data-card="skills"] {
    border-color: color-mix(in srgb, #FEA3B4 50%, transparent);
}
.focus-mode .recruiter-card[data-card="skills"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(76%) sepia(17%) saturate(917%) hue-rotate(307deg) brightness(102%) contrast(99%);
}
.focus-mode .recruiter-card[data-card="skills"] .card-title {
    color: #FFF1F3;
}

/* Focus Mode ON - Card PORTFOLIO */
.focus-mode .recruiter-card[data-card="portfolio"] {
    border-color: color-mix(in srgb, #FF9C66 50%, transparent);
}
.focus-mode .recruiter-card[data-card="portfolio"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(54%) saturate(527%) hue-rotate(331deg) brightness(101%) contrast(101%);
}
.focus-mode .recruiter-card[data-card="portfolio"] .card-title {
    color: #FFF4ED;
}

/* Focus Mode ON - Card WORK AUTHORIZATION */
.focus-mode .recruiter-card[data-card="work-authorization"] {
    border-color: color-mix(in srgb, #BDB4FE 50%, transparent);
}
.focus-mode .recruiter-card[data-card="work-authorization"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(76%) sepia(22%) saturate(904%) hue-rotate(203deg) brightness(101%) contrast(99%);
}
.focus-mode .recruiter-card[data-card="work-authorization"] .card-title {
    color: #F4F3FF;
}

/* Focus Mode ON - Card WORK PREFERENCES */
.focus-mode .recruiter-card[data-card="work-preferences"] {
    border-color: color-mix(in srgb, #A4BCFD 50%, transparent);
}
.focus-mode .recruiter-card[data-card="work-preferences"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(657%) hue-rotate(189deg) brightness(101%) contrast(98%);
}
.focus-mode .recruiter-card[data-card="work-preferences"] .card-title {
    color: #EEF4FF;
}

/* Focus Mode ON - Card CLIENTS */
.focus-mode .recruiter-card[data-card="clients"] {
    border-color: color-mix(in srgb, #84CAFF 50%, transparent);
}
.focus-mode .recruiter-card[data-card="clients"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(79%) sepia(30%) saturate(678%) hue-rotate(176deg) brightness(101%) contrast(101%);
}
.focus-mode .recruiter-card[data-card="clients"] .card-title {
    color: #EFF8FF;
}

/* Focus Mode ON - Card TOOLS */
.focus-mode .recruiter-card[data-card="tools"] {
    border-color: color-mix(in srgb, #67E3F9 50%, transparent);
}
.focus-mode .recruiter-card[data-card="tools"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate(837%) hue-rotate(151deg) brightness(101%) contrast(95%);
}
.focus-mode .recruiter-card[data-card="tools"] .card-title {
    color: #ECFDFF;
}

/* Focus Mode ON - Card EXPERIENCE */
.focus-mode .recruiter-card[data-card="experience"] {
    border-color: color-mix(in srgb, #73E2A3 50%, transparent);
}
.focus-mode .recruiter-card[data-card="experience"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(26%) saturate(516%) hue-rotate(95deg) brightness(96%) contrast(92%);
}
.focus-mode .recruiter-card[data-card="experience"] .card-title {
    color: #EDFCF2;
}

/* Focus Mode ON - Card AREAS OF INTEREST */
.focus-mode .recruiter-card[data-card="areas-of-interest"] {
    border-color: color-mix(in srgb, #ACDC79 50%, transparent);
}
.focus-mode .recruiter-card[data-card="areas-of-interest"] .card-icon img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(20%) saturate(623%) hue-rotate(36deg) brightness(97%) contrast(90%);
}
.focus-mode .recruiter-card[data-card="areas-of-interest"] .card-title {
    color: #F5FBEE;
}

/* -----------------------------------------------------------------------------
   FOCUS MODE - Filter Button Icon Colors
   ----------------------------------------------------------------------------- */

.focus-mode .filter-btn[data-filter="summary"] .icon {
    filter: brightness(0) saturate(100%) invert(89%) sepia(36%) saturate(613%) hue-rotate(332deg) brightness(103%) contrast(98%);
}

.focus-mode .filter-btn[data-filter="design-approach"] .icon {
    filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(675%) hue-rotate(332deg) brightness(101%) contrast(95%);
}

.focus-mode .filter-btn[data-filter="education"] .icon {
    filter: brightness(0) saturate(100%) invert(77%) sepia(25%) saturate(754%) hue-rotate(283deg) brightness(101%) contrast(96%);
}

.focus-mode .filter-btn[data-filter="skills"] .icon {
    filter: brightness(0) saturate(100%) invert(76%) sepia(17%) saturate(917%) hue-rotate(307deg) brightness(102%) contrast(99%);
}

.focus-mode .filter-btn[data-filter="portfolio"] .icon {
    filter: brightness(0) saturate(100%) invert(70%) sepia(54%) saturate(527%) hue-rotate(331deg) brightness(101%) contrast(101%);
}

.focus-mode .filter-btn[data-filter="work-authorization"] .icon {
    filter: brightness(0) saturate(100%) invert(76%) sepia(22%) saturate(904%) hue-rotate(203deg) brightness(101%) contrast(99%);
}

.focus-mode .filter-btn[data-filter="work-preferences"] .icon {
    filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(657%) hue-rotate(189deg) brightness(101%) contrast(98%);
}

.focus-mode .filter-btn[data-filter="clients"] .icon {
    filter: brightness(0) saturate(100%) invert(79%) sepia(30%) saturate(678%) hue-rotate(176deg) brightness(101%) contrast(101%);
}

.focus-mode .filter-btn[data-filter="tools"] .icon {
    filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate(837%) hue-rotate(151deg) brightness(101%) contrast(95%);
}

.focus-mode .filter-btn[data-filter="experience"] .icon {
    filter: brightness(0) saturate(100%) invert(82%) sepia(26%) saturate(516%) hue-rotate(95deg) brightness(96%) contrast(92%);
}

.focus-mode .filter-btn[data-filter="areas-of-interest"] .icon {
    filter: brightness(0) saturate(100%) invert(86%) sepia(20%) saturate(623%) hue-rotate(36deg) brightness(97%) contrast(90%);
}

/* -----------------------------------------------------------------------------
   FOCUS MODE - Active Filter Border Colors
   ----------------------------------------------------------------------------- */

.focus-mode .filter-btn[data-filter="summary"].active {
    border-color: #FDE272;
}

.focus-mode .filter-btn[data-filter="design-approach"].active {
    border-color: #F7B27A;
}

.focus-mode .filter-btn[data-filter="education"].active {
    border-color: #FAA7E0;
}

.focus-mode .filter-btn[data-filter="skills"].active {
    border-color: #FEA3B4;
}

.focus-mode .filter-btn[data-filter="portfolio"].active {
    border-color: #FF9C66;
}

.focus-mode .filter-btn[data-filter="work-authorization"].active {
    border-color: #BDB4FE;
}

.focus-mode .filter-btn[data-filter="work-preferences"].active {
    border-color: #A4BCFD;
}

.focus-mode .filter-btn[data-filter="clients"].active {
    border-color: #84CAFF;
}

.focus-mode .filter-btn[data-filter="tools"].active {
    border-color: #67E3F9;
}

.focus-mode .filter-btn[data-filter="experience"].active {
    border-color: #73E2A3;
}

.focus-mode .filter-btn[data-filter="areas-of-interest"].active {
    border-color: #ACDC79;
}

/* -----------------------------------------------------------------------------
   MAIN CONTENT GRID (3-column layout)
   ----------------------------------------------------------------------------- */
.content-main {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    gap: 15px;
    padding-bottom: 60px;
    align-items: flex-start;
}

/* Column containers */
.column-left,
.column-center,
.column-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column-left {
    width: 533.33px;
    min-width: 533.33px;
}

.column-center {
    width: 785px;
    flex: 1;
}

.column-right {
    width: 266.67px;
    min-width: 266.67px;
}

/* Hide empty columns when all their cards are hidden */
.column-left:empty,
.column-center:empty,
.column-right:empty,
.column-left:not(:has(.recruiter-card:not(.card-hidden))),
.column-center:not(:has(.recruiter-card:not(.card-hidden))),
.column-right:not(:has(.recruiter-card:not(.card-hidden))) {
    display: none;
}

/* -----------------------------------------------------------------------------
   CARD BASE STYLES
   ----------------------------------------------------------------------------- */
.recruiter-card {
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    border-radius: 15px;
    border: 1px solid #414141;
    background: var(--gray-true-900);
    box-shadow: var(--shadow-card-dark);
}

/* Card header (title section) */
.card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    position: relative;
}

/* Copy content button */
.btn-copy-content {
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 5px;
    border: 1px solid #666666;
    background: var(--gray-true-900);
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 1px 1px 8px 0 rgba(0, 0, 0, 0.50);
    cursor: pointer;
    margin-left: auto;
    position: relative;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.btn-copy-content:hover {
    border-color: #B1B1B1;
}

.btn-copy-content .icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(73%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(87%); /* #B1B1B1 */
    transition: filter var(--transition-base);
}

.btn-copy-content:hover .icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(92%); /* #F0F0F0 */
}

/* Tooltip */
.btn-copy-content::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: #343434;
    color: #E3E3E3;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

/* Tooltip arrow */
.btn-copy-content::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #343434;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

.btn-copy-content:hover::before,
.btn-copy-content:hover::after,
.btn-copy-content.copied::before,
.btn-copy-content.copied::after {
    opacity: 1;
    visibility: visible;
}

.card-icon {
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.card-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.card-title {
    color: var(--recruiter-text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

/* Card content area */
.card-content {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   SCROLL TO TOP BUTTON
   ----------------------------------------------------------------------------- */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-600);
    background: var(--gray-true-950);
    box-shadow: var(--shadow-scroll-top);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 100;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: var(--gray-true-900);
    border-color: var(--gray-true-600);
}

.scroll-to-top .icon {
    width: 20px;
    height: 20px;
}

/* -----------------------------------------------------------------------------
   EXPERIENCE CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.experience-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-expand-collapse {
    display: flex;
    height: 25px;
    padding: 0 15px 0 5px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: var(--gray-true-900);
    color: #4D4D4D;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    cursor: default;
    transition: all var(--transition-base);
}

.btn-expand-collapse.active {
    border-color: var(--gray-true-700);
    background: var(--gray-true-850);
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 2px 2px 8px 0 rgba(0, 0, 0, 0.60);
    color: #E3E3E3;
    cursor: pointer;
}

.btn-expand-collapse.active:hover {
    border-color: #7F7F7F;
    color: #FFFFFF;
}

.btn-expand-collapse .icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(89%);
}

.btn-expand-collapse.active .icon {
    filter: brightness(0) saturate(100%) invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

.btn-expand-collapse .icon-expand {
    transform: rotate(90deg);
}

.btn-expand-collapse .icon-collapse {
    transform: rotate(0deg);
}

/* Experience item */
.experience-item {
    margin-bottom: 0;
}

.experience-header {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: #212121;
    box-shadow: var(--shadow-experience-item);
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.experience-header:hover {
    border-color: #666666;
}

.experience-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.experience-toggle-btn {
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 5px;
    border: 1px solid var(--gray-true-700);
    background: var(--gray-true-800);
    box-shadow: var(--shadow-button-square);
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.experience-toggle-btn .icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.experience-item.expanded .experience-toggle-btn {
    border-color: #7F7F7F;
}

.experience-item.expanded .experience-toggle-btn .icon {
    transform: rotate(90deg);
    filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}

.experience-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.experience-logo {
    width: 25px;
    height: 25px;
    object-fit: contain;
    align-self: flex-start;
    margin-top: 2px;
}

.experience-company {
    color: var(--gray-true-25);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.experience-title {
    color: var(--gray-true-25);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

.experience-meta {
    display: flex;
    padding: 3px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
    gap: 0;
    border-radius: 5px;
    border: 1px solid var(--gray-true-750);
    background: var(--gray-true-900);
    box-shadow: var(--shadow-inner-tag);
}

.experience-location {
    color: var(--gray-true-25);
    text-align: right;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

.experience-date {
    color: var(--gray-true-200);
    text-align: right;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

/* Hide meta divider on desktop (only show on mobile) */
.experience-meta-divider {
    display: none;
}

/* Experience content (expandable) */
.experience-content {
    display: flex;
    padding: 0 10px 0 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.experience-item.expanded .experience-content {
    max-height: 500px;
    opacity: 1;
    padding: 10px 10px 0 20px;
}

.experience-bullet {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.experience-bullet .icon {
    width: 15px;
    height: 15px;
    min-width: 15px;
    flex-shrink: 0;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.60));
    margin-top: 3px;
}

.experience-bullet-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Experience divider between items */
.experience-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.experience-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.experience-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* -----------------------------------------------------------------------------
   SUMMARY CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.summary-bullet {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.summary-bullet .icon {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-top: 6px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.summary-bullet-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Summary divider between bullets */
.summary-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.summary-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.summary-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* -----------------------------------------------------------------------------
   DESIGN APPROACH CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.approach-intro {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 0;
}

/* Approach divider */
.approach-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.approach-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.approach-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* Section titles */
.approach-section-title {
    color: var(--gray-true-100, #E3E3E3);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

/* Design levels container - single column list */
.approach-levels {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
}

/* Individual level item */
.approach-level-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.approach-level-number {
    display: inline-block;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.approach-level-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Cognitive style text */
.approach-cognitive-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   AREAS OF INTEREST CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.interest-section-title {
    color: var(--gray-true-100, #E3E3E3);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.interest-bullet {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.interest-bullet .icon {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-top: 6px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.interest-bullet-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Interest divider between sections */
.interest-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.interest-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.interest-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* -----------------------------------------------------------------------------
   TOOLS CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.tools-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tool-item {
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: #212121;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.50);
}

.tool-info {
    display: flex;
    width: 200px;
    align-items: center;
    gap: 10px;
}

.tool-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.tool-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-name {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

/* Tool divider (vertical) */
.tool-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
    padding: 0 5px;
}

.tool-divider-line-1 {
    width: 1px;
    height: 100%;
    background: #0F0F0F;
}

.tool-divider-line-2 {
    width: 1px;
    height: 100%;
    background: #414141;
}

/* Tool tags section */
.tool-tags {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px;
    align-items: center;
    gap: 5px;
    flex: 1 0 0;
    align-self: stretch;
}

.tool-tag {
    display: flex;
    padding: 3px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-750);
    background: var(--gray-true-900);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.50) inset;
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   WORK AUTHORIZATION CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
[data-card="work-authorization"] .card-header {
    align-items: flex-start;
}

[data-card="work-authorization"] .card-icon {
    margin-top: 3px;
}

.auth-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
}

.auth-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Work Authorization divider */
.auth-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.auth-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.auth-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* -----------------------------------------------------------------------------
   WORK PREFERENCES CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
[data-card="work-preferences"] .card-header {
    align-items: flex-start;
}

[data-card="work-preferences"] .card-icon {
    margin-top: 3px;
}

.pref-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pref-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
}

.pref-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Work Preferences divider */
.pref-divider {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.pref-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.pref-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* -----------------------------------------------------------------------------
   EDUCATION CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.education-entry {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: #212121;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.50);
}

.education-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    flex: 1 0 0;
}

.education-school {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    color: var(--gray-true-25);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

/* School name spans - stacked */
.education-school-line1::after {
    content: none;
}

.education-school-line2 {
    /* Stacked below line1 */
}

.education-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.education-field,
.education-degree {
    color: var(--gray-true-25);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/* Vertical divider between field and degree */
.education-vert-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.education-vert-line-1 {
    width: 1px;
    height: 100%;
    background: #0F0F0F;
}

.education-vert-line-2 {
    width: 1px;
    height: 100%;
    background: #414141;
}

/* Right side - horizontal layout with location | year */
.education-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    gap: 0;
    padding: 3px 10px 3px 15px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-750);
    background: var(--gray-true-900);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.50) inset;
}

.education-location {
    color: var(--gray-true-25);
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

.education-year {
    color: var(--gray-true-200);
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

/* Vertical divider between location and year */
.education-right-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
    padding: 0 10px;
}

.education-right-divider-line-1 {
    width: 1px;
    height: 100%;
    background: #0F0F0F;
}

.education-right-divider-line-2 {
    width: 1px;
    height: 100%;
    background: #414141;
}

/* -----------------------------------------------------------------------------
   SKILLS CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */

/* Toggle wrapper */
.skills-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.skills-toggle-label {
    color: #B1B1B1;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

/* Toggle button base */
.skills-toggle {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    border: 1px solid #5A5A5A;
    background: var(--gray-true-850);
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.40) inset;
    cursor: pointer;
}

.skills-toggle-text {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
}

/* Toggle switch (the moving element) */
.skills-toggle-switch {
    display: flex;
    width: 32px;
    height: 15px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 15px;
    border: 0.5px solid var(--gray-true-650);
    background: var(--gray-true-750);
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 2px 2px 8px 0 rgba(0, 0, 0, 0.60);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.2s ease, right 0.2s ease;
}

/* Position the switch - default is "hide" (covers Show) */
.skills-toggle {
    position: relative;
}

.skills-toggle[data-state="hide"] .skills-toggle-switch {
    left: 5px;
}

.skills-toggle[data-state="show"] .skills-toggle-switch {
    right: 5px;
    left: auto;
}

/* Toggle lines inside switch */
.skills-toggle-lines {
    display: flex;
    align-items: center;
    gap: 2px;
}

.skills-toggle-line {
    display: flex;
    gap: 1px;
}

.skills-toggle-line .line-1 {
    width: 1px;
    height: 8px;
    background: #1B1B1B;
}

.skills-toggle-line .line-2 {
    width: 1px;
    height: 8px;
    background: #666;
}

/* Skills list container - 2 column grid */
.skills-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-self: stretch;
}

/* Stack to 1 column on mobile */
@media (max-width: 768px) {
    .skills-list {
        grid-template-columns: 1fr;
    }
}

/* Individual skill item */
.skill-item {
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--gray-true-800);
    background: #212121;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.50);
}

/* Skill header (dot + name) */
.skill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.skill-dot {
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.skill-name {
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

/* Skill context (divider + tags) - hidden by default */
.skill-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

/* Show context when toggle is on "show" */
.skills-list.context-visible .skill-context {
    max-height: 100px;
    opacity: 1;
    margin-top: 5px;
}

/* Skill divider */
.skill-divider {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-self: stretch;
}

.skill-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #0F0F0F;
}

.skill-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #414141;
}

/* Skill tags container */
.skill-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    align-self: stretch;
}

/* Individual skill tag */
.skill-tag {
    display: flex;
    padding: 3px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid var(--gray-true-750);
    background: var(--gray-true-900);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.50) inset;
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

/* -----------------------------------------------------------------------------
   CLIENTS CARD SPECIFIC STYLES
   ----------------------------------------------------------------------------- */
.clients-intro {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: var(--gray-true-200);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 5px;
}

/* Clients divider */
.clients-divider {
    display: flex;
    padding: 5px 0 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.clients-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.clients-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* Clients logo grid */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

.client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid var(--gray-true-750);
    background: #212121;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.20), 1px 3px 8px 0 rgba(0, 0, 0, 0.50);
    overflow: hidden;
}

.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE DESIGN
   ----------------------------------------------------------------------------- */

/* Add padding when narrower than 1600px container */
@media (max-width: 1650px) {
    .recruiter-container,
    .recruiter-topbar,
    .divider-main,
    .filter-section,
    .content-main {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 2-column layout at medium screens */
@media (max-width: 1363px) {
    .content-main {
        flex-wrap: wrap;
    }

    .column-left,
    .column-center,
    .column-right {
        width: calc(50% - 7.5px);
        min-width: unset;
        flex: none;
    }

    .topbar-name {
        font-size: 32px;
    }

    /* Clients grid: 3 per row */
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Single column layout - all cards stack */
@media (max-width: 992px) {
    /* Reduce side padding to 5px */
    .recruiter-container,
    .recruiter-topbar,
    .divider-main,
    .filter-section,
    .content-main {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Top bar: buttons on next line, right aligned */
    .recruiter-topbar {
        flex-wrap: wrap;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .topbar-name {
        font-size: 28px;
    }

    /* Single column for all cards */
    .content-main {
        flex-direction: column;
    }

    .column-left,
    .column-center,
    .column-right {
        width: 100%;
        min-width: unset;
        display: contents; /* Makes cards participate directly in parent flex */
    }

    /* Card order for single column (mobile):
       1. Summary - Quick overview
       2. Experience - Work history
       3. Work Authorization - Deal-breaker info
       4. Work Preferences - Deal-breaker info
       5. Skills - Keyword scanning
       6. Design Approach - Deeper understanding
       7. Areas of Interest - Deeper understanding
       8. Portfolio - Work samples
       9. Tools - Supplementary
       10. Clients - Supplementary
       11. Education - Supplementary */
    .recruiter-card[data-card="summary"] { order: 1; }
    .recruiter-card[data-card="experience"] { order: 2; }
    .recruiter-card[data-card="work-authorization"] { order: 3; }
    .recruiter-card[data-card="work-preferences"] { order: 4; }
    .recruiter-card[data-card="skills"] { order: 5; }
    .recruiter-card[data-card="design-approach"] { order: 6; }
    .recruiter-card[data-card="areas-of-interest"] { order: 7; }
    .recruiter-card[data-card="portfolio"] { order: 8; }
    .recruiter-card[data-card="tools"] { order: 9; }
    .recruiter-card[data-card="clients"] { order: 10; }
    .recruiter-card[data-card="education"] { order: 11; }

    .filter-buttons {
        justify-content: center;
    }

    /* Clients grid: 4 per row */
    .clients-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile layout */
@media (max-width: 768px) {
    /* Hide filter buttons on mobile, keep Focus Mode toggle */
    .filter-buttons {
        display: none;
    }

    .filter-section {
        justify-content: center;
    }

    /* Fix viewport width issues */
    .recruiter-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .recruiter-topbar {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .topbar-brand {
        gap: 15px;
    }

    .topbar-logo {
        height: 40px;
    }

    .topbar-name {
        font-size: 24px;
    }

    .topbar-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0;
        gap: 10px;
    }

    /* Make Download Resume match Reveal Contact Information width */
    .btn-contact-reveal,
    .btn-download {
        width: 260px;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .contact-info-revealed {
        align-items: center;
        padding-right: 0;
        width: 260px;
    }

    /* Divider full width with bottom margin */
    .divider-main {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 15px;
    }

    /* Content area full width */
    .content-main {
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Cards take full width */
    .recruiter-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Remove column min-widths */
    .column-left,
    .column-center,
    .column-right {
        width: 100%;
        min-width: 0;
    }

    /* Tools card - vertical layout on mobile */
    .tool-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        height: auto;
    }

    .tool-info {
        width: 100%;
    }

    /* Hide vertical divider on mobile */
    .tool-divider {
        display: none;
    }

    .tool-tags {
        padding-left: 34px; /* Align with tool-name (24px icon + 10px gap) */
        width: 100%;
        box-sizing: border-box;
    }

    /* Experience card - vertical layout on mobile */
    .experience-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .experience-meta {
        margin-left: 35px; /* Align with text (25px toggle btn + 10px gap) */
        flex-direction: row;
        padding: 3px 10px 3px 15px;
        justify-content: space-between;
        align-items: center;
        align-self: auto;
        flex: 1 0 0;
        width: calc(100% - 35px);
        box-sizing: border-box;
    }

    .experience-location,
    .experience-date {
        font-size: 12px;
        text-align: left;
    }

    /* Vertical divider between location and date */
    .experience-meta-divider {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1px;
        align-self: stretch;
        padding: 0 10px;
    }

    .experience-meta-divider-line-1 {
        width: 1px;
        height: 100%;
        background: #0F0F0F;
    }

    .experience-meta-divider-line-2 {
        width: 1px;
        height: 100%;
        background: #414141;
    }

    /* Clients grid: 3 per row on mobile */
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   UTILITY CLASSES
   ----------------------------------------------------------------------------- */
.hidden {
    display: none !important;
}

.card-hidden {
    display: none;
}

/* =============================================================================
   PORTFOLIO CARDS (Recruiter Page)
   2-column grid within the recruiter card
   ============================================================================= */

/* Portfolio Grid Container */
.recruiter-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

/* Individual Portfolio Card */
.recruiter-portfolio-card {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid var(--gray-true-750);
    background: #161616;
    box-shadow: 2px 5px 20px 0 rgba(0, 0, 0, 0.60);
    position: relative;
}

/* Copy button for portfolio cards */
.btn-copy-portfolio-card {
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 5px;
    border: 1px solid #666666;
    background: rgba(27, 27, 27, 0.9); /* --gray-true-900 at 90% opacity */
    box-shadow: 1px 1px 0.5px 0 rgba(0, 0, 0, 0.25), 1px 1px 8px 0 rgba(0, 0, 0, 0.50);
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.btn-copy-portfolio-card:hover {
    border-color: #B1B1B1;
}

.btn-copy-portfolio-card .icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(73%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(87%); /* #B1B1B1 */
    transition: filter var(--transition-base);
}

.btn-copy-portfolio-card:hover .icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(92%); /* #F0F0F0 */
}

/* Tooltip for portfolio card copy button */
.btn-copy-portfolio-card::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: #343434;
    color: #E3E3E3;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

/* Tooltip arrow */
.btn-copy-portfolio-card::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #343434;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

.btn-copy-portfolio-card:hover::before,
.btn-copy-portfolio-card:hover::after,
.btn-copy-portfolio-card.copied::before,
.btn-copy-portfolio-card.copied::after {
    opacity: 1;
    visibility: visible;
}


/* Portfolio Card Image */
.recruiter-portfolio-card-image {
    display: flex;
    width: 100%;
    aspect-ratio: 16/9;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: var(--gray-true-850);
    box-shadow: 2px 5px 20px 0 rgba(0, 0, 0, 0.60);
    overflow: hidden;
}

.recruiter-portfolio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* Portfolio Card Text Container */
.recruiter-portfolio-card-text {
    display: flex;
    padding: 0 10px 5px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
}

/* Portfolio Card Title + Description */
.recruiter-portfolio-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

/* Portfolio Card Title */
.recruiter-portfolio-card-title {
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

/* Portfolio Card Description (replaces categories) */
.recruiter-portfolio-card-description {
    color: var(--gray-true-100, #E3E3E3);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
}

/* Portfolio Card Divider */
.recruiter-portfolio-card-divider {
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    align-self: stretch;
}

.recruiter-portfolio-card-divider-line-1 {
    width: 100%;
    height: 1px;
    background: #000000;
}

.recruiter-portfolio-card-divider-line-2 {
    width: 100%;
    height: 1px;
    background: #282828;
}

/* Portfolio Card Bullets */
.recruiter-portfolio-card-bullets {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.recruiter-portfolio-card-bullet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.recruiter-portfolio-card-bullet .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
}

.recruiter-portfolio-card-bullet-text {
    color: var(--gray-true-300);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* Portfolio-only mode: 4 columns at full width */
.content-main.portfolio-only .recruiter-portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Portfolio-only mode: center column takes full width */
.content-main.portfolio-only .column-center {
    width: 100%;
    flex: none;
}

/* Center-column-only mode: when left and right columns are hidden but center has multiple cards */
.content-main.center-only .column-center {
    width: 100%;
    flex: none;
}

/* Center-column-only mode: portfolio gets 4 columns */
.content-main.center-only .recruiter-portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* When only portfolio filter is active at 1363px breakpoint, keep full width */
@media (max-width: 1363px) {
    /* Portfolio-only mode: maintain full width at this breakpoint */
    .content-main.portfolio-only .column-center {
        width: 100%;
    }

    /* Portfolio grid goes to 3 columns when full width at this breakpoint */
    .content-main.portfolio-only .recruiter-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Center-column-only mode at this breakpoint */
    .content-main.center-only .column-center {
        width: 100%;
    }

    .content-main.center-only .recruiter-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: Stack to 1 column on smaller screens */
@media (max-width: 1200px) {
    .recruiter-portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Keep 3 columns for portfolio-only and center-only views */
    .content-main.portfolio-only .recruiter-portfolio-grid,
    .content-main.center-only .recruiter-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: Back to 2 columns at 992px */
@media (max-width: 992px) {
    .recruiter-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Portfolio-only and center-only mode: 3 columns at this breakpoint */
    .content-main.portfolio-only .recruiter-portfolio-grid,
    .content-main.center-only .recruiter-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: Stack to 1 column at 768px */
@media (max-width: 768px) {
    .recruiter-portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Portfolio-only and center-only mode: 2 columns on mobile */
    .content-main.portfolio-only .recruiter-portfolio-grid,
    .content-main.center-only .recruiter-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}