@import 'design-tokens.css';

:root {
    --sidebar-left-width: 250px;
    --sidebar-right-width: 300px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Allow header + layout flow ⚖️🏗️ */
}

body.is-dragging,
body.is-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 13px;
    /* Adjusted to 13px for refined balance ⚖️📏 */
}

::-webkit-scrollbar-track {
    background: transparent;
    /* Changed to transparent to help with clipping ⚖️🎨 */
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray-border);
    border-radius: 10px;
    border: 3px solid transparent;
    /* Adjusted border for perfect balance ⚖️🩹 */
    background-clip: content-box;
    /* Keeps color inside the border ⚖️✨ */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-yellow);
    /* Switched from orange to yellow ⚖️🎨 */
}

/* Hide scrollbar arrows (buttons) globally ⚖️🎨 */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* --- GLOBAL HEADER --- */
global-header {
    display: block;
}

.global-header {
    height: 70px;
    background-color: var(--brand-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 20px;
    /* Aligned with .sidebar-left padding (20px) ⚖️📏 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
}

.app-logo {
    max-height: 48px;
    /* Refined size for 70px header ⚖️📏 */
    width: auto;
    display: block;
}

.header-right {
    height: 100%;
    /* Fill header height ⚖️↕️ */
}

.global-nav {
    list-style: none;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

.global-nav li {
    height: 100%;
}

.global-nav li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 23px;
    transition: background-color 0.2s, color 0.2s;
}

.global-nav li a.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.global-nav li a:hover:not(.active):not(.logout-link) {
    background-color: var(--brand-yellow);
    color: white;
}

.global-nav li a.logout-link:hover {
    background-color: var(--brand-orange);
    color: white;
}

.global-nav li a.logout-link {
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text ⚖️📏 */
}

.nav-icon {
    flex-shrink: 0;
    stroke-width: 2.25px; /* Slightly bolder for header visibility ⚖️🎨 */
}

/* Ensure prepended buttons (like Save) match nav style ⚖️🎯 */
.global-nav li .save-btn {
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    padding: 0 23px !important; /* Match standard link padding */
}



/* --- MOBILE NAVIGATION (Default Dashboard) --- */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: white;
    transition: color 0.2s;
}

.mobile-menu-btn:hover {
    color: var(--brand-yellow);
}

.mobile-menu-btn .burger-icon,
.mobile-menu-btn .close-icon {
    display: none;
}

.mobile-menu-btn:not(.open) .burger-icon {
    display: block;
}

.mobile-menu-btn.open .close-icon {
    display: block;
}

.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 70px;
    right: 15px;
    width: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--gray-border-light);
    z-index: 1002;
    overflow: hidden;
    transform-origin: top right;
    animation: menuFadeIn 0.2s ease-out;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mobile-nav-overlay.active {
    display: block;
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.mobile-nav-content a {
    padding: 14px 20px;
    text-decoration: none;
    color: var(--gray-text-main);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
}

.mobile-nav-content a:hover:not(.active) {
    background-color: var(--brand-yellow);
    color: white;
}

.mobile-nav-content a.active {
    background-color: var(--brand-blue-10);
    color: var(--primary-color);
}

.mobile-nav-content hr {
    border: 0;
    border-top: 1px solid var(--gray-border-light);
    margin: 6px 0;
}

#mobile-logout-btn:hover {
    background-color: var(--brand-orange) !important;
    color: white !important;
}

@media (max-width: 900px) {
    /* Mobile Menu is ONLY for Search Page 🍔 */
    .search-header .header-nav-links,
    .search-header .logout-btn-wrapper {
        display: none !important;
    }
    
    .search-header .mobile-menu-btn {
        display: flex;
    }
}

/* Default Nav (Admin) stays visible until the blocker covers it (800px) ⚖️🛡️ */



/* 3-Column Layout */
.app-layout {
    display: flex;
    flex: 1;
    /* Take all remaining space ⚖️📏 */
    height: calc(100vh - 70px);
    /* Fill space below header */
    overflow: hidden;
    position: relative;
    /* For absolute sidebar positioning ⚖️🏗️ */
}

/* LEFT SIDEBAR (Navigation) */
/* Custom Select */
.custom-select {
    position: relative;
    flex: 1;
    min-width: 80px;
}

.select-trigger {
    height: 42px;
    /* Unified height ⚖️📏 */
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.select-trigger:hover {
    border-color: var(--brand-blue);
}

.select-trigger::after {
    content: '▾';
    font-size: 1.2rem;
    color: var(--gray-text-hint);
    margin-left: 8px;
}

.select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.custom-select.open .select-options {
    display: block;
}

.select-option {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.9rem;
}

.select-option:hover {
    background: var(--brand-blue);
    color: white;
}

.sidebar-left {
    width: var(--sidebar-left-width);
    background: white;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    overflow: visible;
    /* To allow overlay expansion */
}

/* Quick helper to disable transitions on load ⚖️🚀 */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* --- Mini-Sidebar Logic (V5) 🧭 --- */
.sidebar-toggle {
    display: none;
    /* Hidden by default, shown on collapse */
    width: 32px;
    height: 32px;
    min-height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--gray-text-hint);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
}

.sidebar-toggle:hover {
    background: var(--brand-blue-10);
    border-color: var(--brand-blue-20);
    color: var(--primary-color);
}

/* Base Collapsed State */
.sidebar-left.collapsed {
    width: 72px;
    padding: 20px;
    /* Synchronized with base sidebar padding for rock-stable alignment ⚖️🏗️ */
    position: absolute;
    /* Always absolute when collapsed to avoid jumping ⚖️🏗️ */
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
}

/* Reserved space for the absolute sidebar so content doesn't jump */
.sidebar-left.collapsed+.main-editor,
.sidebar-left.collapsed+.dashboard-main {
    margin-left: 72px;
}

.sidebar-left.collapsed .logo,
.sidebar-left.collapsed .nav-links {
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    /* Instant disappearance on close (no delay) 🚅💨 */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Hide text nodes for footer buttons in collapsed RAIL 🚅 */
.sidebar-left.collapsed .sidebar-footer .sidebar-action-btn {
    font-size: 0;
}

/* Fix phantom hover highlights when collapsed ⚖️🚫 */
.sidebar-left.collapsed:not(.expanded) .nav-links {
    pointer-events: none;
    /* Replaces display: none to allow transitions */
}

.sidebar-left.collapsed .sidebar-toggle {
    display: flex;
}

/* Sidebar Footer in Collapsed Mode (Icons-only) */
.sidebar-left.collapsed .sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Keep left-aligned with toggle button ⚖️🏗️ */
}

.sidebar-left.collapsed:not(.expanded) .sidebar-action-btn {
    width: 32px;
    height: 40px;
    /* Rock-stable height to match expanded state footprint ⚖️🏗️ */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    font-size: 0;
    /* Clean Minimal Style: No border, no bg 📐✨ */
    background-color: transparent !important;
    border: none !important;
    background-size: 32px !important;
    background-repeat: no-repeat;
    background-position: center;
    transition: none;
    box-shadow: none !important;

    /* RECOVERY: Explicitly guarantee visibility in rail mode ⚖️🩹 */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Disable hover/active for mini-icons ⚖️🚫 */
.sidebar-left.collapsed:not(.expanded) .sidebar-action-btn:hover,
.sidebar-left.collapsed:not(.expanded) .sidebar-action-btn:active {
    background-color: transparent !important;
    transform: none !important;
    border: none !important;
}

.sidebar-left.collapsed #export-pdf-btn {
    background-image: url('/images/pdf.png');
}

.sidebar-left.collapsed #preview-cv-btn {
    background-image: url('/images/cv.png');
}

/* --- EXANDED OVERLAY STATE 🚀 --- */
/* When sidebar is collapsed but user opens it as an overlay */
.sidebar-left.collapsed.expanded {
    width: 250px !important;
    z-index: 2000;
    background: white;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
    padding: 20px;
    /* Maintain 20px anchor ⚖️🏗️ */
}

/* FIX: Prevent content jumping when sidebar becomes absolute ⚖️🏗️ */
/* We add a margin to the next sibling to occupy the 72px gap left by the absolute sidebar */
.sidebar-left.collapsed.expanded+.main-editor,
.sidebar-left.collapsed.expanded+.dashboard-main {
    margin-left: 72px;
}

.sidebar-left.collapsed.expanded .logo,
.sidebar-left.collapsed.expanded .nav-links {
    opacity: 1;
    visibility: visible;
    /* Delayed reveal during expansion 🎨✨ */
    transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s;
}

/* Footer buttons sync reveal (borders/bg) 📐📏 */
.sidebar-left.collapsed.expanded .sidebar-footer .sidebar-action-btn {
    opacity: 1;
    visibility: visible;
    /* Delay only the reveal (opacity/visibility). All other properties (bg/border) are immediate. 🎨✨ */
    transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar-left.collapsed.expanded .sidebar-footer {
    align-items: flex-start;
}

.sidebar-left.collapsed.expanded .sidebar-action-btn {
    width: 100%;
    height: 40px;
    /* Match collapsed mode footprint exactly ⚖️🏗️ */
    /* Refined Style: Smaller & Centered ⚖️🎯 */
    background-image: none !important;
    font-size: 0.85rem;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* RESTORE Standard Button Aesthetics (regression fix) ⚖️🎨 */
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-color);
    visibility: visible;
    opacity: 1;
}

.sidebar-left.collapsed.expanded .sidebar-action-btn:hover {
    background-color: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

/* RIGHT SIDEBAR (Context Tools) */
.sidebar-right {
    width: var(--sidebar-right-width);
    background: white;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.tools-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--brand-gray);
    padding-bottom: 15px;
}

.tools-header h2 {
    margin: 0;
    font-size: 1.2rem;
    /* Matched to .block-header h2 ⚖️📏 */
    color: var(--primary-color);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.nav-links li {
    margin-bottom: 10px;
}

.nav-links a {
    text-decoration: none;
    color: var(--gray-text-alt);
    display: block;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    background-color: var(--brand-blue-10);
    color: var(--accent-color);
    font-weight: 600;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.reset-btn {
    width: 100%;
    padding: 10px;
    background: none;
    border: 1px solid var(--brand-yellow);
    color: var(--brand-yellow);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    /* semi-bold ⚖️💪 */
    transition: all 0.2s;
    opacity: 0.8;
}

.reset-btn:hover {
    background: var(--brand-yellow);
    color: white;
    opacity: 1;
}

/* CENTER (Main Editor) */
.main-editor {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    background-color: var(--bg-color);
    scroll-behavior: smooth;
}

.editor-block {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.editor-block:focus-within {
    border-color: var(--accent-color);
}

/* --- Layout: Fit-to-Viewport (Scoped to Search Aliases) ⚖️🖼️ --- */
body.layout-fit-aliases .app-layout,
body.layout-fit-aliases .main-editor {
    overflow: hidden !important;
    /* Lock global scroll */
}

body.layout-fit-aliases .main-editor {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 70px) !important;
    padding: 40px !important;
    /* Synchronized with standard pages ⚖️📏 */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.layout-fit-aliases #section-aliases {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    /* Allow collapse */
    margin-bottom: 0 !important;
    padding: 25px !important;
    /* Standard padding ⚖️📏 */
    overflow: hidden !important;
    background: white;
    border-radius: 10px;
    /* Synchronized ⚖️📏 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Standard minimal shadow ⚖️📏 */
}

body.layout-fit-aliases #section-aliases>.block-header,
body.layout-fit-aliases #section-aliases>.dashboard-toolbar,
body.layout-fit-aliases #section-aliases>.format-hint,
body.layout-fit-aliases #section-aliases>.block-footer {
    flex-shrink: 0 !important;
    /* Fixed elements */
}

body.layout-fit-aliases .dashboard-toolbar {
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Next to search ⚖️📏 */
}

.search-results-mini {
    font-size: 0.85rem;
    color: var(--gray-text-hint);
    font-weight: 500;
    margin-left: 15px;
    white-space: nowrap;
    opacity: 0.8;
}

body.layout-fit-aliases .format-hint {
    margin-bottom: 0 !important;
    font-size: 0.8rem;
    color: var(--gray-text-hint);
}

body.layout-fit-aliases #aliases-editor-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    /* Allow collapse */
    margin: 10px 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--gray-border-subtle);
    border-radius: 10px;
    background: #f9f9f9;
}

body.layout-fit-aliases #aliases-editor-container .cm-editor {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.layout-fit-aliases #aliases-editor-container .cm-scroller {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    /* CodeMirror internal scroller should fill the container */
}

body.layout-fit-aliases #section-aliases .block-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px !important;
    /* Minimal padding since separator is gone ⚖️📏 */
    margin-top: 0 !important;
    /* Removed top margin as requested ⚖️📏 */
    border-top: none !important;
    /* Removed separator as requested ⚖️🚫 */
}

body.layout-fit-aliases #aliases-stats {
    font-size: 0.8rem;
    color: var(--gray-text-hint);
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--brand-gray);
    padding-bottom: 15px;
}

.block-actions-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* CV Header Photo Layout ⚖️📸 */
.header-left-top {
    grid-row: span 2;
    position: relative;
    /* Contain the absolute photo */
}

.names-wrapper {
    margin-left: 160px;
    /* Make perfect space for 140px photo + 20px gap */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}

.photo-upload-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 100%;
    flex-shrink: 0;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    background-color: var(--gray-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.photo-upload-wrapper:hover {
    background-color: var(--brand-blue-10);
    border-color: var(--brand-blue);
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    gap: 0;
}

.no-photo-icon {
    flex: 1;
    /* Take up remaining space */
    min-height: 0;
    /* Prevent from overflowing wrapper */
    width: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.3);
}

.photo-hint {
    font-size: 1.1rem;
    color: var(--gray-text-hint);
    font-weight: 400;
}

#cv-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /* slightly smaller than wrapper to allow border space if needed, or matched */
}

#skills-preset-selector {
    min-width: 200px;
}

.block-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.block-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color);
    display: inline-block;
    transition: border-color 0.2s, color 0.2s;
    border-bottom: 2px solid transparent;
    cursor: text;
    padding-bottom: 2px;
}

.section-editable-title:focus {
    outline: none;
    border-bottom-color: var(--brand-yellow);
    color: var(--text-color);
}

.block-header .hint {
    font-size: 0.85rem;
    color: var(--gray-text-hint);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}



.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-group.full-width {
    grid-column: span 2;
}

#header-year-selector {
    display: flex;
    gap: 10px;
}

#header-year-selector .custom-select {
    flex: 1;
}

label {
    font-weight: 600;
    /* Semi-bold ⚖️💪 */
    font-size: 1rem;
    /* Prominent size ⚖️📏 */
    color: var(--gray-text-alt);
    margin-bottom: 8px;
    /* Standardized label margin ⚖️📏 */
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    min-height: 24px;
    /* Ensure consistent grid height ⚖️📏 */
}

.label-row label {
    margin-bottom: 0;
}

.present-checkbox-label {
    font-size: 0.85rem;
    font-weight: 600;
    /* Match label weight for professional look ⚖️💪 */
    color: var(--gray-text-hint);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: color 0.2s;
}

.present-checkbox-label:hover {
    color: var(--brand-blue);
}

.present-checkbox-label input {
    appearance: none;
    /* Reset for custom look ⚖️🎨 */
    width: 18px !important;
    height: 18px !important;
    /* Force override global 42px ⚖️📏 */
    padding: 0 !important;
    /* Force override global 12px ⚖️🚫 */
    flex-shrink: 0;
    box-sizing: border-box;
    /* Crucial for perfect square ⚖️📐 */
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--gray-border);
    border-radius: 4px;
    background: white;
    position: relative;
    display: flex;
    /* Perfect centering ⚖️🎯 */
    align-items: center;
    justify-content: center;
}

.present-checkbox-label input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.present-checkbox-label input:checked::after {
    content: '';
    width: 100%;
    height: 100%;
    /* Standard crisp checkmark via SVG ⚖️🎨 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.present-checkbox-label input:hover {
    border-color: var(--brand-blue);
}

input,
select {
    height: 42px;
    /* Unified height ⚖️📏 */
    padding: 0 12px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    font-family: inherit;
    /* Now Raleway ⚖️🖋️ */
    font-size: 0.95rem;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

textarea {
    padding: 10px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    min-height: 100px;
    /* Approximately 4 lines */
}

button {
    font-family: inherit;
    /* Raleway ⚖️🖋️ */
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Experience/Education Dynamic Items */
.dynamic-item {
    padding: 0;
    /* Background removed, padding no longer needed */
    margin-bottom: 45px;
    position: relative;
}

/* Visual separator between blocks (Excluded from Certifications) */
.dynamic-item:not(.certification-item):not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-yellow);
    border-radius: 2px;
    border: none;
}

/* Old remove-btn removed for global unification ⚖️❌ */

/* RIGHT SIDEBAR (Tools) */
.sidebar-right {
    width: var(--sidebar-right-width);
    background: white;
    border-left: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.tools-header h3 {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.tool-content {
    flex: 1;
    overflow-y: auto;
    /* Hide scrollbar visually but keep scrollable ⚖️👁️ */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.tool-content::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Tag System */
.category-header {
    display: flex;
    justify-content: flex-start;
    /* Icon follows title closely ⚖️🏹 */
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.category-header label {
    margin-bottom: 0;
    /* Remove double margin inside header */
}

/* Vertical spacing for Skills categories */
.category-input-row {
    display: flex;
    align-items: center;
    /* Center handles and buttons vertically with inputs */
    gap: 0;
    width: 100%;
}

.certification-inputs {
    display: flex;
    gap: 15px;
    flex: 1;
    margin-right: 8px;
    /* Added margin to match Skills section ⚖️📏 */
}

.date-row {
    display: flex;
    gap: 10px;
    transition: opacity 0.2s, visibility 0.2s;
}

.date-row.is-present {
    opacity: 0.35;
    /* Grayed out effect ⚖️🌫️ */
    filter: grayscale(1);
    pointer-events: none;
    /* Disable interaction */
}

/* remove-category-btn styling moved to unified section below */

/* New Layout for Input Row */
.category-input-row {
    display: flex;
    align-items: stretch;
    /* Match height of input */
    gap: 0;
    /* Gap removed for tighter icon group ⚖️📏 */
}

.category-input-row .tag-input-wrapper {
    flex-grow: 1;
    min-width: 0;
    margin-right: 8px;
    /* Added margin instead of gap for the input ⚖️📏 */
}

.skill-category {
    margin-bottom: 20px;
    /* Match form-grid gap */
    background: transparent;
    border-radius: 10px;
    transition: transform 0.3s ease;
    padding: 0;
}

.skill-category.dragging {
    opacity: 0;
    /* Hide original element while dragging (manual ghost takes over) */
}

.category-drag-handle,
.remove-category-btn {
    color: var(--gray-text-hint);
    user-select: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid transparent;
}

.category-drag-handle {
    cursor: grab;
    padding: 0 12px;
    height: auto;
    /* Stretch to fill parent height */
    min-height: 42px;
    /* Match tag-input-wrapper */
    border-radius: 12px;
    font-size: 1.6rem;
}

/* Redundant remove-category-btn style removed ⚖️❌ */

/* --- Skill Presets Styling --- */
.preset-categories-list {
    background: var(--gray-bg-subtle);
    border: 1px solid var(--gray-border-subtle);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
    min-height: 50px;
}

.cv-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    background: var(--gray-bg-subtle);
    border-top: 1px solid var(--border-color);
}

.preset-category-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--gray-chip);
    border-radius: 8px;
    margin-bottom: 6px;
    gap: 12px;
    transition: all 0.2s;
}

.preset-category-item:last-child {
    margin-bottom: 0;
}

.preset-category-item:hover {
    border-color: var(--brand-blue);
    transform: translateX(4px);
}

.preset-category-item .drag-handle {
    cursor: grab;
    color: var(--gray-text-hint);
    font-size: 1.2rem;
    user-select: none;
}

.preset-category-item .category-name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--gray-text-main);
    font-weight: 600;
}

/* Dropdown Menu for Category Selection */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 100;
    border-radius: 12px;
    border: 1px solid var(--gray-border-subtle);
    overflow: hidden;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-content a {
    color: var(--gray-text-main);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--brand-blue-10);
    color: var(--brand-blue);
}

.small-btn {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
}

.restore-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-text-hint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.restore-btn:hover {
    color: var(--brand-blue);
    background-color: rgba(59, 128, 255, 0.1);
    border-color: rgba(59, 128, 255, 0.2);
}

.category-drag-handle:hover {
    color: var(--brand-blue);
    background-color: rgba(59, 128, 255, 0.1);
    border-color: rgba(59, 128, 255, 0.2);
}

/* Redundant hover styles removed ⚖️❌ */

.category-drag-handle:active {
    cursor: grabbing;
    background-color: rgba(59, 128, 255, 0.2);
}

.archived-label {
    color: var(--gray-text-hint) !important;
}

.archived-badge,
.deleted-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 400;
    color: var(--gray-text-hint);
    background: var(--gray-chip);
    border: 1px solid var(--gray-border);
    display: inline-block;
    cursor: default !important;
    user-select: none;
    line-height: 1.4;
    vertical-align: middle;
}

.archived-category .editable-header-part,
.deleted-category .editable-header-part {
    cursor: default !important;
}

/* Gray tags for archived/deleted categories ⚖️🎨 */
.archived-category .tag-chip,
.deleted-category .tag-chip {
    background: var(--gray-border) !important;
    color: var(--gray-text-alt) !important;
    border-color: var(--gray-border) !important;
    cursor: default !important;
}

.archived-category .category-title-label,
.deleted-category .category-title-label {
    cursor: default !important;
    color: var(--gray-text-hint) !important;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    min-height: 24px;
    /* Ensure consistent height */
}

/* Hide edit button by default ⚖️🕵️‍♂️ */
.edit-category-btn {
    opacity: 0;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s ease, color 0.2s ease;
    user-select: none;
    line-height: 1;
    margin-left: 4px;
    color: var(--gray-text-hint);
}

/* Show edit button on hover of the interactive part only ⚖️🎯 */
.editable-header-part:hover .edit-category-btn {
    opacity: 0.6;
}

.edit-category-btn:hover {
    color: var(--brand-blue);
    opacity: 1 !important;
}

.category-title-input {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--brand-yellow) !important;
    background: transparent !important;
    padding: 0 !important;
    padding-bottom: 3px !important;
    /* Shift line 3px lower (1px more than before) ⚖️📏 */
    margin: 0 !important;
    margin-bottom: -5px !important;
    /* Prevent layout shift (2 + 3) ⚖️🛡️ */
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    height: 1.1em !important;
    color: var(--gray-text-main) !important;
    /* Force unify color ⚖️🎨 */
    outline: none !important;
    font-family: inherit !important;
    display: inline-block;
    vertical-align: middle !important;
    min-width: 50px;
}

/* Container for title + edit icon to isolate hover interaction ⚖️📦 */
.editable-header-part {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
}

.custom-title {
    color: var(--brand-orange) !important;
}

.archived-category .remove-tag,
.deleted-category .remove-tag {
    display: none !important;
    /* Hide removal for archived/deleted tags */
}

.archived-category .tag-input,
.deleted-category .tag-input {
    background: var(--gray-bg-subtle);
    cursor: default;
    opacity: 0.6;
}

.skill-category:first-of-type {
    margin-top: 0;
}

.sort-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

.sort-btn:hover {
    text-decoration: underline;
}

.tag-input-wrapper {
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 6px 10px;
    /* Exactly 6px top/bottom padding + 28px content + 2px border = 42px unified height */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    background: white;
    min-height: 42px;
    /* Unified height ⚖️📏 */
    box-sizing: border-box;
}

.tag-input-wrapper:focus-within {
    border-color: var(--accent-color);
}

.tag-input-wrapper.pending-deletion {
    border-color: var(--brand-orange) !important;
    animation: borderPulse 0.4s infinite alternate;
}

@keyframes borderPulse {
    from {
        border-color: var(--brand-orange);
    }

    to {
        border-color: var(--brand-yellow);
    }
}

.tag-chip {
    background: var(--brand-blue);
    color: white;
    padding: 0 8px 0 12px;
    /* Standardized symmetrical padding */
    height: 28px;
    border-radius: 14px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: grab;
    user-select: none;
    transition: transform 0.1s, opacity 0.2s;
    line-height: normal;
}

.tag-chip.manual-tag {
    background: var(--brand-orange);
    color: white;
    border: none;
}

.tag-chip.badge-tag {
    background: var(--gray-chip);
    color: var(--gray-text-main);
    border: 1px solid var(--gray-border);
}

.tag-chip.badge-tag .remove-tag {
    color: rgba(0, 0, 0, 0.3);
}

.tag-chip.badge-tag .remove-tag:hover {
    color: black;
}

/* Badge Image Styles (Universal) ⚖️🖼️ */
.tag-badge-img,
.suggestion-badge-img {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    /* Ensure images are never stretched ⚖️📏 */
    border-radius: 4px;
    /* Slightly sharper radius for logos */
    margin: 0 !important;
    /* Reset all margins to allow precise layout control ⚖️🎯 */
}

.suggestion-tag {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.tag-chip:active {
    cursor: grabbing;
}

.tag-chip.dragging {
    opacity: 0;
    /* Hide original element while dragging (manual ghost takes over) */
}

.tag-chip .remove-tag {
    cursor: pointer;
    font-weight: 300;
    /* Removed bold as requested ⚖️💪 */
    font-size: 1.4rem;
    /* Increased size ⚖️📏 */
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.1s ease;
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translateY(-1px);
    /* Optical centering for multiplication sign ⚖️🎯 */
}

.tag-chip .remove-tag:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.tag-input {
    border: none;
    flex: 1;
    min-width: 10px;
    /* Reduced to 10px for maximum efficiency and single-tag mode ⚖️📏 */
    padding: 4px 0;
    height: 28px;
    outline: none;
    font-size: 0.95rem;
    /* Match standard input */
    font-family: inherit;
    background: transparent;
}

/* Hide placeholder when tags are present, UNLESS we are at limit ⚖️🏗️ */
.tag-input-wrapper:has(.tag-chip) .tag-input:not(.at-limit)::placeholder {
    color: transparent;
}

/* Single Tag Mode: No longer hide input entirely, JS will disable it + show Max. 1 notice ⚖️🏷️📏 */
.tag-input-wrapper.single-tag-mode:has(.tag-chip) .tag-input {
    display: inline-block;
}

.tag-input:focus {
    box-shadow: none;
}

/* Limit indicator styling ⚖️📏 */
.tag-input.at-limit {
    cursor: default;
    color: var(--gray-text-hint) !important;
}

.tag-input.at-limit::placeholder {
    color: var(--gray-text-hint) !important;
    opacity: 1;
}

/* Tag Suggestions (Right Panel) */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-tag {
    background: var(--gray-chip);
    border: 1px solid var(--gray-border);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

/* Badge-specific overrides for Context Tools ⚖️🎨 */
.suggestion-tag.badge-suggestion {
    padding: 8px;
    /* Reduced from 10px for a tighter, more precise look ⚖️📏 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /* Slightly squarer for large badges ⚖️⬜ */
}

.suggestion-tag:hover {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

/* Override hover for badges to remove blue background per user request ⚖️🚫 */
.suggestion-tag.badge-suggestion:hover {
    background: var(--gray-chip-hover);
    /* Subtle highlight instead of blue ⚖️✨ */
    border-color: var(--brand-blue);
    /* Keep border highlight ⚖️🔵 */
    color: inherit;
}

/* Match Skill "Add Category" button style but keep radius ⚖️🎨 */
.suggestion-tag.custom-action-tag {
    background-color: transparent !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
    font-weight: 600 !important;
    /* Semi-bold to match Add button ⚖️💪 */
    box-shadow: none !important;
}

.suggestion-tag.custom-action-tag:hover {
    background-color: var(--accent-color) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

/* Buttons */
.icon-btn {
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    /* Semi-bold ⚖️💪 */
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--accent-color);
    color: white;
}

.secondary-btn:hover {
    background: var(--gray-chip-hover);
}

/* Enhanced Experience Block Styles */
.date-row {
    display: flex;
    gap: 10px;
}

.date-row select {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    background: white;
}

.dynamic-item .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.dynamic-item .form-group.full-width {
    grid-column: span 2;
}

/* --- Responsive Adjustments: CV Editor Grid ⚖️🏗️ --- */
/* Threshold 1100px: Switch to single column for all forms once workspace becomes cramped 
   (only active after Sidebar Rail mode at 1250px) */
@media (max-width: 1100px) {

    .editor-block .form-grid,
    .dynamic-item .form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #section-personal .header-left-top {
        grid-row: span 1;
        margin-bottom: 5px;
    }

    /* Reset full-width items in single column grid */
    .dynamic-item .form-group.full-width {
        grid-column: span 1 !important;
    }
}

/* Category header is already defined globally, so we use it here too */

/* Refined Experience/Education Block Styling */
.dynamic-item {
    position: relative;
    padding-right: 40px;
    /* Right gutter for remove button */
    /* Border removed to prevent double separator */
}

.dynamic-item:last-child {
    border-bottom: none;
}

/* Global Remove Button Style (Cross) ⚖️❌ */
.remove-btn,
.remove-category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--gray-text-hint);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
    align-self: center;
    /* Restore vertical alignment ⚖️🎯 */
}

.remove-btn:hover,
.remove-category-btn:hover {
    background: var(--brand-orange-10);
    color: var(--brand-orange);
    border-color: var(--brand-orange-20);
}

.dynamic-item .remove-btn {
    position: absolute;
    top: 35px;
    right: 0;
}

.remove-category-btn {
    position: relative;
    /* Inside flex row */
    flex-shrink: 0;
    margin-left: 5px;
}

/* Sidebar Stats 📊 */
.stat-card {
    padding: 20px;
    background: var(--gray-bg-subtle);
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-value.blue {
    color: var(--brand-blue);
}

.stat-value.orange {
    color: var(--brand-orange);
}

.stat-label {
    color: var(--gray-text-alt);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: capitalize;
}

/* Category Item Helpers ⚖️📦 */
.category-id-info {
    font-size: 0.75rem;
    color: var(--gray-text-hint);
    margin-top: 2px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.archive-actions {
    display: flex;
    gap: 4px;
}

/* --- Custom Category & Renaming --- */
.category-header {
    cursor: default;
}

.category-title-label {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-text-main);
    /* Unify with editor label color ⚖️🎨 */
    border-bottom: none;
    transition: color 0.2s;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.category-title-label.custom-title {
    color: var(--brand-orange) !important;
}



/* Custom "Create New" Option in Dropdown */
.suggestion-tag[data-category-id="CREATE_CUSTOM"] {
    border-top: 1px solid var(--gray-border-subtle);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--brand-blue);
    font-weight: 600;
    background-color: var(--brand-blue-10);
}

.suggestion-tag[data-category-id="CREATE_CUSTOM"]:hover {
    background-color: var(--brand-blue-20);
}

/* Custom Modal Styles ⚖️🎭 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 5000;
    /* Increased to stay above EVERYTHING 🔝⚖️ */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Transition pointer-events to prevent fall-through during fade 🛡️⚖️ */
    transition: opacity 0.2s ease, visibility 0.2s, pointer-events 0.2s;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    width: fit-content;
    min-width: min(400px, 90vw);
    max-width: min(600px, 90vw);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    text-align: center;
    transform: translateY(-20px);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.modal-text {
    color: var(--gray-text-alt);
    line-height: 1.5;
    margin-bottom: 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-border-subtle);
}

.modal-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s;
    border: 2px solid transparent;
    font-size: 0.95rem;
}

.modal-btn.cancel {
    background: var(--gray-chip);
    color: var(--gray-text-alt);
}

.modal-btn.cancel:hover {
    border-color: var(--gray-border);
}

.modal-btn.confirm {
    background: var(--brand-orange);
    color: white;
}

.modal-btn.confirm:hover {
    background: var(--brand-success);
    border-color: transparent;
}

.modal-btn.discard {
    background: var(--gray-chip);
    color: var(--gray-text-main);
}

.modal-btn.discard:hover {
    border-color: var(--brand-blue);
}

.modal-btn.primary {
    background: var(--brand-blue);
    color: white;
}

.modal-btn.primary:hover {
    background: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(59, 128, 255, 0.2);
}

/* --- Dashboard / Shared Toolbar Styles --- */
.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* De-blocked toolbar for Aliases section ⚖️🚫 */
#section-aliases .dashboard-toolbar {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.dashboard-toolbar:focus-within {
    border-color: var(--accent-color);
}

#section-aliases .dashboard-toolbar:focus-within {
    border-color: transparent !important;
}

.search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input {
    width: 100%;
    height: 42px;
    padding: 0 15px 0 40px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: var(--gray-bg-subtle);
}

/* Clear Search Button (matched with cv_search.html) ⚖️❌ */
.clear-search {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-text-hint);
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0 5px;
    line-height: 1;
    z-index: 10;
}

.search-input:not(:placeholder-shown)~.clear-search {
    display: block;
}

.clear-search:hover {
    color: var(--brand-orange);
}

.category-header-main:focus-within {
    background: white;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 128, 255, 0.1);
    outline: none;
}

.search-input:focus {
    background: white;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 128, 255, 0.1);
    outline: none;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-text-hint);
    font-size: 1.1rem;
}

.btn-new {
    background: transparent;
    color: var(--brand-yellow);
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--brand-yellow);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
}

.btn-new:hover {
    background: var(--brand-yellow);
    color: white;
}

/* --- Badges Gallery --- */
.badge-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.badge-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

.badge-card {
    background: white;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
}

.badge-card:hover {
    border-color: var(--brand-orange);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.badge-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.badge-img-wrapper img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.remove-badge-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: var(--brand-alert);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.badge-card:hover .remove-badge-btn {
    display: none;
    /* Hidden as per request ⚖️🚫 */
}

/* Modal Extensions */
.badge-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
}

.badge-modal-preview {
    width: 120px;
    height: 120px;
    background: var(--gray-bg-subtle);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-border-subtle);
}

.badge-modal-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-border-subtle);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.modal-input:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.modal-btn.delete {
    background: transparent;
    color: var(--brand-alert);
    border: 2px solid var(--brand-alert);
    transition: all 0.2s;
    min-width: 120px;
}

.modal-btn.delete:hover {
    background: var(--brand-alert);
    color: white;
}

.modal-btn.delete.confirm-delete {
    background: var(--brand-alert-bg);
}

.modal-btn.delete.confirm-delete:hover {
    background: var(--brand-alert);
    color: white;
}

.modal-btn.delete:active {
    background: var(--brand-alert-hover);
}

/* Badge chips in Editor without text */
.tag-chip.badge-tag {
    padding-right: 0px !important;
    /* Removed extra space after icon ⚖️🚫 */
    padding-left: 8px !important;
    background: var(--brand-blue-10) !important;
    border: 1px solid var(--brand-blue-20) !important;
}

.tag-chip.badge-tag.selected {
    background: var(--brand-blue-10) !important;
    border: 1px solid var(--brand-blue-20) !important;
}

/* Specific zero-margin for badges to fix centering issues ⚖️🎯 */
.tag-chip.badge-tag .tag-badge-img {
    margin-right: 0 !important;
    /* Removes the 6px margin from line 846 */
}

.badge-suggestion .suggestion-badge-img {
    margin-right: 0 !important;
    /* Removes the 10px margin from line 854 */
}

/* Badge sizes ⚖️🔍 */
.suggestion-badge-img {
    width: 60px !important;
    /* Adjusted to 60px per user request ⚖️📏 */
    height: 60px !important;
    min-width: 60px;
    /* Lock dimensions for drag safety ⚖️🔒 */
    min-height: 60px;
    object-fit: contain;
}

.tag-badge-img {
    width: auto !important;
    /* Set to auto to prevent drag stretching per user request ⚖️📏 */
    height: 22px !important;
    object-fit: contain;
}

/* Custom Global Tooltip ⚖️✨ */
.global-tooltip {
    position: fixed;
    /* Fixed position entirely outside flow to prevent clipping ⚖️🏰 */
    background: var(--brand-gray);
    color: black;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out;
    /* Only transition opacity ⚖️✨ */
    z-index: 999999;
    /* Maximum z-index ⚖️🔝 */
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-border);
}

.global-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow removed per user request ⚖️🚫 */

/* Photo Management Modal 📸⚖️🎭 */
.photo-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 12px;
    /* Same gap as under the title ⚖️📏 */
}

.photo-editor-viewport {
    width: 100%;
    height: 220px;
    /* Compact but comfortable editing height ⚖️📏 */
    background: white;
    /* White background — blends with modal ⚖️🤍 */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* Border removed per user request ⚖️ */
}

.photo-editor-viewport img#cropper-image {
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    /* Hide raw image until Cropper.js takes over ⚖️🎭 */
    display: block;
}

/* Rounded Rectangle Cropper 📸⏹️ */
.cropper-view-box,
.cropper-face {
    border-radius: 10px;
}

/* Interaction-based transparency ⚖️✨ */
.cropper-modal {
    opacity: 1 !important;
    background-color: white !important;
    /* White to match modal background ⚖️🤍 */
    transition: opacity 0.2s ease;
}

.photo-editor-viewport.cropper-interacting .cropper-modal {
    opacity: 0.5 !important;
    /* Reveal context during drag/zoom */
}

/* Ensure the modal overlay has a bit more opacity for better focus */
#photo-modal .modal-card {
    padding-bottom: 25px;
}

/* ─── Save CV Button States ⚖️💾 ──────────────────────────────── */
/* Clean / just saved — teal signals "all good" */
.save-btn.saved {
    background: var(--brand-success) !important;
    cursor: default;
}

.save-btn {
    background: var(--brand-success) !important;
    transition: background 0.4s ease;
    opacity: 1 !important;
    color: white !important;
    font-weight: 600;
    /* Match nav links */
    font-size: 0.95rem;
    /* Match nav links */
    min-width: 100px;
    /* Stable width across 'Save' ↔ 'Saved' ⚖️📏 */
}

/* Prevent browser focus/active dimming after click */
.save-btn:focus,
.save-btn:focus-visible,
.save-btn:active {
    outline: none;
    opacity: 1 !important;
    color: white !important;
    filter: none;
}

/* Dirty — orange signals "unsaved changes" */
.save-btn.dirty {
    background: var(--brand-orange) !important;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-action-btn {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-action-btn:hover {
    background-color: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

.sidebar-action-btn.secondary:hover {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.sidebar-action-btn:active {
    transform: translateY(1px);
}

/* ID Sync Button ⚖️🔄 */
.sync-id-btn {
    cursor: pointer;
    color: var(--gray-text-hint);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.sync-id-btn:hover {
    color: var(--brand-blue);
    transform: rotate(180deg);
}

/* --- Small Screen Blocker 📱🚫 --- */
/* Unified protection for screens < 800px OR touch-devices ⚖️🛡️ */
.small-screen-blocker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-bg-subtle);
    z-index: 100000;
    /* Above all other layers ⚖️🔝 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    box-sizing: border-box;
}

.small-screen-blocker img {
    width: 160px;
    height: auto;
    margin-bottom: 32px;
    opacity: 0.9;
}

.small-screen-blocker p {
    color: var(--gray-text-alt);
    font-size: 1.2rem;
    max-width: 300px;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

@media (max-width: 800px),
(max-height: 500px),
(hover: none),
(any-pointer: coarse) {
    .small-screen-blocker {
        display: flex;
    }

    body {
        overflow: hidden !important;
    }
}