/* ===== DARK MODE - PROFESSIONAL THEME ===== */

/* Smooth transitions for all elements */
body, .card, .form-control, .form-select, .table, .header, .aside, .btn-light,
.alert, .modal-content, .dropdown-menu, .nav-tabs, .nav-link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ===== GLOBAL BACKGROUND & TEXT ===== */
body.dark-mode {
    background: #1a1d29 !important;
    color: #e8eaed !important;
}

body.dark-mode #kt_body {
    background: #1a1d29 !important;
}

body.dark-mode .page,
body.dark-mode .wrapper {
    background: #1a1d29 !important;
}

/* ===== CARDS ===== */
body.dark-mode .card {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
    color: #e8eaed !important;
}

body.dark-mode .card-header {
    background: #252836 !important;
    border-bottom-color: #3d4152 !important;
    color: #e8eaed !important;
}

body.dark-mode .card-title {
    color: #e8eaed !important;
}

body.dark-mode .card-footer {
    background: #252836 !important;
    border-top-color: #3d4152 !important;
}

/* ===== FORM CONTROLS ===== */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #1f222e !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: #252836 !important;
    border-color: #667eea !important;
    color: #e8eaed !important;
}

body.dark-mode .form-control::placeholder {
    color: #6b7280 !important;
}

body.dark-mode .form-control-solid {
    background: #252836 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .form-label {
    color: #a8b3c5 !important;
}

body.dark-mode textarea.form-control {
    background: #1f222e !important;
    color: #e8eaed !important;
}

/* ===== TABLES ===== */
body.dark-mode .table {
    color: #e8eaed !important;
    background: transparent !important;
}

body.dark-mode .table thead th {
    background: #252836 !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .table tbody tr {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .table tbody tr:hover {
    background: #33374e !important;
}

body.dark-mode .table td {
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .table-responsive {
    background: transparent !important;
}

/* ===== HEADER & SIDEBAR ===== */
body.dark-mode .header,
body.dark-mode #kt_header {
    background: #252836 !important;
    border-bottom-color: #3d4152 !important;
}

body.dark-mode .aside,
body.dark-mode #kt_aside {
    background: #252836 !important;
}

body.dark-mode .menu-link {
    color: #a8b3c5 !important;
}

body.dark-mode .menu-link:hover,
body.dark-mode .menu-link.active {
    background: #2d3142 !important;
    color: #e8eaed !important;
}

body.dark-mode .menu-title {
    color: #a8b3c5 !important;
}

/* ===== TOOLBAR ===== */
body.dark-mode .toolbar {
    background: #252836 !important;
    border-bottom: 1px solid #3d4152 !important;
}

body.dark-mode .page-title h1,
body.dark-mode .page-title {
    color: #e8eaed !important;
}

/* ===== BUTTONS - Light variant only (gradients stay) ===== */
body.dark-mode .btn-light {
    background: #2d3142 !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .btn-light:hover {
    background: #33374e !important;
    color: #ffffff !important;
}

body.dark-mode .btn-icon.btn-bg-light {
    background: #2d3142 !important;
    color: #e8eaed !important;
}

body.dark-mode .btn-icon.btn-bg-light:hover {
    background: #33374e !important;
}

/* ===== ALERTS ===== */
body.dark-mode .alert {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
    color: #e8eaed !important;
}

body.dark-mode .alert-primary {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: #667eea !important;
    color: #a8b3e8 !important;
}

body.dark-mode .alert-success {
    background: rgba(17, 153, 142, 0.15) !important;
    border-color: #11998e !important;
    color: #7dd3c0 !important;
}

body.dark-mode .alert-warning {
    background: rgba(240, 147, 251, 0.15) !important;
    border-color: #f093fb !important;
    color: #f5b8f7 !important;
}

body.dark-mode .alert-danger {
    background: rgba(245, 87, 108, 0.15) !important;
    border-color: #f5576c !important;
    color: #f89ba8 !important;
}

/* ===== SELECT2 ===== */
body.dark-mode .select2-container--bootstrap5 .select2-selection {
    background: #1f222e !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .select2-container--bootstrap5 .select2-selection:focus {
    border-color: #667eea !important;
}

body.dark-mode .select2-dropdown {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .select2-results__option {
    background: #2d3142 !important;
    color: #e8eaed !important;
}

body.dark-mode .select2-results__option--highlighted {
    background: #33374e !important;
    color: #ffffff !important;
}

body.dark-mode .select2-search__field {
    background: #1f222e !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

/* ===== DATATABLES ===== */
body.dark-mode .dataTables_wrapper {
    color: #e8eaed !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #1f222e !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #a8b3c5 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #a8b3c5 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #33374e !important;
    color: #ffffff !important;
}

/* ===== MODALS ===== */
body.dark-mode .modal-content {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .modal-header {
    background: #252836 !important;
    border-bottom-color: #3d4152 !important;
    color: #e8eaed !important;
}

body.dark-mode .modal-title {
    color: #e8eaed !important;
}

body.dark-mode .modal-footer {
    background: #252836 !important;
    border-top-color: #3d4152 !important;
}

body.dark-mode .modal-body {
    color: #e8eaed !important;
}

/* ===== SUMMERNOTE EDITOR ===== */
body.dark-mode .note-editor {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .note-toolbar {
    background: #252836 !important;
    border-bottom-color: #3d4152 !important;
}

body.dark-mode .note-btn {
    background: #2d3142 !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode .note-editable {
    background: #1f222e !important;
    color: #e8eaed !important;
}

body.dark-mode .note-statusbar {
    background: #252836 !important;
    border-top-color: #3d4152 !important;
}

/* ===== DROPDOWNS ===== */
body.dark-mode .dropdown-menu {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .dropdown-item {
    color: #e8eaed !important;
}

body.dark-mode .dropdown-item:hover {
    background: #33374e !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-divider {
    border-color: #3d4152 !important;
}

/* ===== NAV TABS ===== */
body.dark-mode .nav-tabs {
    border-bottom-color: #3d4152 !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #a8b3c5 !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #3d4152 !important;
    color: #e8eaed !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background: #2d3142 !important;
    border-color: #3d4152 #3d4152 #2d3142 !important;
    color: #e8eaed !important;
}

/* ===== CONTENT AREAS ===== */
body.dark-mode .post,
body.dark-mode #kt_content,
body.dark-mode #kt_content_container {
    background: transparent !important;
}

/* ===== TEXT COLORS ===== */
body.dark-mode .text-dark {
    color: #e8eaed !important;
}

body.dark-mode .text-muted {
    color: #6b7280 !important;
}

body.dark-mode .text-gray-600 {
    color: #a8b3c5 !important;
}

/* ===== BORDERS ===== */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: #3d4152 !important;
}

/* ===== BADGES ===== */
body.dark-mode .badge {
    background: #2d3142 !important;
    color: #e8eaed !important;
}

/* ===== SCROLLBAR (Webkit) ===== */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1f222e;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #3d4152;
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a4d5e;
}

/* ===== SPECIAL: Preserve Logo visibility ===== */
body.dark-mode img[alt="Logo"] {
    filter: brightness(0.9) contrast(1.1);
}

/* ===== KANBAN BOARD - Job Applications ===== */
body.dark-mode .kanon-section {
    background: #1a1d29 !important;
}

body.dark-mode .kanon-stage-grid {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .kanon-stage-grid .card-header {
    background: #252836 !important;
    color: #e8eaed !important;
}

body.dark-mode .kanon-stage-grid .card-header.btn-primary {
    /* Keep gradient for stage headers */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
}

body.dark-mode .kanon-stage-grid .card-header .stage-title {
    color: #ffffff !important;
}

/* Candidate Item Cards */
body.dark-mode .candidate-item {
    background: transparent !important;
}

body.dark-mode .candidate-item .card-body {
    background: #1f222e !important;
    border-color: #3d4152 !important;
}

body.dark-mode .candidate-item .card-body:hover {
    background: #252836 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px);
}

/* Candidate name and info */
body.dark-mode .candidate-item .text-gray-800 {
    color: #e8eaed !important;
}

body.dark-mode .candidate-item .text-gray-400 {
    color: #a8b3c5 !important;
}

body.dark-mode .candidate-item .fw-bold {
    color: #e8eaed !important;
}

/* Job application section background */
body.dark-mode .job-application-section {
    background: transparent !important;
}

/* Stage menu dropdown - Enhanced visibility */
body.dark-mode ul.stage-sub-menu,
body.dark-mode ul.stage-sub-menu_1 {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    display: none !important; /* Explicit default */
}

body.dark-mode ul.stage-sub-menu.d-block,
body.dark-mode ul.stage-sub-menu_1.d-block {
    display: block !important; /* Force display when active */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    pointer-events: all !important;
    position: absolute !important;
}

body.dark-mode ul.stage-sub-menu li {
    color: #e8eaed !important;
}

body.dark-mode ul.stage-sub-menu li a {
    color: #e8eaed !important;
}

body.dark-mode ul.stage-sub-menu li:hover {
    background: #33374e !important;
}

/* Stage menu button - ensure clickable */
body.dark-mode .stage-menu-btn {
    cursor: pointer !important;
    pointer-events: all !important;
    position: relative;
    z-index: 10;
}

body.dark-mode .stage-menu {
    position: relative;
    z-index: 100;
}

/* Override hardcoded bg-white classes */
body.dark-mode .bg-white {
    background: #2d3142 !important;
}

body.dark-mode .border-gray-300 {
    border-color: #3d4152 !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800 {
    color: #a8b3c5 !important;
}

body.dark-mode .text-gray-400 {
    color: #6b7280 !important;
}

/* Kanban item content */
body.dark-mode .kanban-item h6,
body.dark-mode .kanban-item p,
body.dark-mode .kanban-item span {
    color: #e8eaed !important;
}

body.dark-mode .kanban-item small {
    color: #a8b3c5 !important;
}

/* Stage counter badges */
body.dark-mode .badge-light {
    background: #3d4152 !important;
    color: #e8eaed !important;
}

/* Kanban add button */
body.dark-mode .kanban-add-new-item {
    background: #252836 !important;
    color: #a8b3c5 !important;
    border-color: #3d4152 !important;
}

body.dark-mode .kanban-add-new-item:hover {
    background: #33374e !important;
    color: #e8eaed !important;
}

/* Collapsed stage (kanon-grid-hide) */
body.dark-mode .kanon-grid-hide .job-application-section {
    background: #667eea !important;
}

/* Stage show/hide icon */
body.dark-mode .kanon-show-hide-icon {
    background: #667eea !important;
}

/* Candidate action bar */
body.dark-mode .candidate-action-bar__browser .info {
    color: #e8eaed !important;
}

body.dark-mode .candidate-action-bar__browser .browse-arrow {
    border-color: #667eea !important;
    background: transparent !important;
}

body.dark-mode .candidate-action-bar__browser .browse-arrow svg {
    color: #667eea !important;
}

body.dark-mode .candidate-action-bar__browser .browse-arrow--disabled {
    border-color: #3d4152 !important;
}

body.dark-mode .candidate-action-bar__browser .browse-arrow--disabled svg {
    color: #6b7280 !important;
}

/* Add Stage Section & Dropdown */
body.dark-mode #add-stage-menu-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .menu[data-kt-menu-placement] {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .menu .menu-item {
    color: #e8eaed !important;
}

body.dark-mode [data-kt-menu-trigger] + .menu {
    background: #2d3142 !important;
}

/* Add Stage Form */
body.dark-mode #stage_name {
    background: #1f222e !important;
    color: #e8eaed !important;
    border-color: #3d4152 !important;
}

body.dark-mode #stage_name:focus {
    background: #252836 !important;
    border-color: #667eea !important;
}

body.dark-mode #stage_name::placeholder {
    color: #6b7280 !important;
}

/* Add Stage container visibility fix */
body.dark-mode .col-8.col-sm-6.col-md-5.col-lg-3.col-xxl-2.bg-white {
    background: #2d3142 !important;
    border-color: #3d4152 !important;
}

/* Ensure Add Stage button is visible and clickable */
#add-stage-menu-btn {
    position: relative;
    z-index: 10;
    pointer-events: all !important;
}

/* Ensure dropdown menu appears above other elements */
body.dark-mode .menu[data-kt-menu="true"] {
    z-index: 1000 !important;
    pointer-events: all !important;
}

/* Separator in dropdown */
body.dark-mode .separator {
    border-color: #3d4152 !important;
}

body.dark-mode .border-gray-200 {
    border-color: #3d4152 !important;
}

/* SVG icons in buttons - fix visibility */
body.dark-mode .btn svg rect[fill="black"],
body.dark-mode .btn svg path[fill="black"] {
    fill: currentColor !important;
}

/* Add Stage button specific */
body.dark-mode #add-stage-menu-btn svg rect {
    fill: #ffffff !important;
}

/* Menu dropdown specific positioning */
body.dark-mode .menu-sub {
    background: #2d3142 !important;
    border: 1px solid #3d4152 !important;
}

body.dark-mode .px-7.py-5 {
    background: transparent !important;
}

/* Form labels in dropdown */
body.dark-mode .menu .form-label {
    color: #e8eaed !important;
}

/* Specific overrides for kanban hardcoded classes */
body.dark-mode #kanon-section.bg-white,
body.dark-mode .kanon-section.bg-white,
body.dark-mode .d-flex.bg-white.kanon-section {
    background: #1a1d29 !important;
}

body.dark-mode .kanon-stage-grid.bg-white {
    background: #2d3142 !important;
}

body.dark-mode .candidate-item .border-solid.border-gray-300 {
    border-color: #3d4152 !important;
    background: #1f222e !important;
}

/* Avatar circles in dark mode */
body.dark-mode .symbol.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Links in kanban */
body.dark-mode .candidate-item a {
    color: #a8b3e8 !important;
}

body.dark-mode .candidate-item a:hover {
    color: #c7d2fe !important;
}

/* SVG icons in kanban */
body.dark-mode .candidate-item svg {
    color: #a8b3c5 !important;
}

/* Tooltips in kanban */
body.dark-mode .tooltip-inner {
    background: #2d3142 !important;
    color: #e8eaed !important;
}


/* ===== DARK MODE TOGGLE BUTTON STYLING ===== */
.dark-mode-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.dark-mode-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dark-mode-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E4E6EF;
    transition: background-color 0.25s ease;
    border-radius: 26px;
}

.dark-mode-toggle-slider:before {
    position: absolute;
    /*
     * Icon rendered INSIDE the knob via Font Awesome content.
     * Because the icon sits on the white knob background, any concave area of the
     * glyph (e.g. the inner curve of the moon crescent) shows white — making the
     * background issue physically impossible regardless of which icon is used.
     *
     * Light mode (unchecked): sun glyph ☀ in amber
     * Dark  mode (checked):   moon glyph 🌙 in platform blue  (see :checked rule)
     */
    content: '\f185'; /* fa-sun */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: #f59e0b;
    text-align: center;
    line-height: 20px; /* equals height — vertically centres the glyph */
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: transform 0.25s ease, color 0.15s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.dark-mode-toggle-input:checked + .dark-mode-toggle-slider {
    background-color: #009EF7;
}

.dark-mode-toggle-input:checked + .dark-mode-toggle-slider:before {
    content: '\f186'; /* fa-moon */
    color: #009EF7;
    /* (track 50px) - (knob 20px) - (left pad 3px) - (right pad 3px) = 24px */
    transform: translateX(24px);
}

/* Track icon elements are no longer needed — icon lives inside the knob above */
.dark-mode-toggle-icon {
    display: none !important;
}

/* Ensure toggle is visible in dark mode */
body.dark-mode .dark-mode-toggle-switch {
    opacity: 1;
}

body.dark-mode .dark-mode-toggle-slider {
    background-color: #3a4060;
}

body.dark-mode .dark-mode-toggle-input:checked + .dark-mode-toggle-slider {
    background-color: #009EF7;
}

/* ===== MODERN GLASS TOOLBAR ICONS ===== */

/* Base icon button - Modern Glass style */
.mg-toolbar-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
}

.mg-toolbar-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.mg-toolbar-btn:active {
    transform: scale(0.92);
}

body.dark-mode .mg-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* SVG icon inside toolbar button */
.mg-toolbar-btn .mg-icon {
    width: 18px;
    height: 18px;
    stroke: #86868b;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}

.mg-toolbar-btn:hover .mg-icon {
    stroke: #1d1d1f;
}

body.dark-mode .mg-toolbar-btn .mg-icon {
    stroke: #9ca3af;
}

body.dark-mode .mg-toolbar-btn:hover .mg-icon {
    stroke: #e8eaed;
}

/* Notification badge - Apple style */
.mg-notification-badge {
    position: absolute;
    top: 2px;
    right: 0px;
    min-width: 17px;
    height: 17px;
    background: #ff3b30;
    border-radius: 8.5px;
    border: 2px solid #ffffff;
    font-size: 9px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.dark-mode .mg-notification-badge {
    border-color: #1e1e2d;
}

/* Toolbar divider */
.mg-toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 4px;
    align-self: center;
}

body.dark-mode .mg-toolbar-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* Modern Glass Theme Toggle */
.mg-theme-toggle {
    width: 42px;
    height: 24px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

body.dark-mode .mg-theme-toggle {
    background: #1d1d1f;
}

.mg-theme-toggle-knob {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.dark-mode .mg-theme-toggle-knob {
    transform: translateX(18px);
}

.mg-theme-toggle-knob .mg-toggle-icon {
    width: 12px;
    height: 12px;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mg-theme-toggle-knob .mg-toggle-sun {
    stroke: #f5a623;
    fill: #f5a623;
}

.mg-theme-toggle-knob .mg-toggle-moon {
    stroke: #6366f1;
    fill: #6366f1;
    display: none;
}

body.dark-mode .mg-theme-toggle-knob .mg-toggle-sun {
    display: none;
}

body.dark-mode .mg-theme-toggle-knob .mg-toggle-moon {
    display: block;
}

/* Modern Glass User Avatar - circular with gradient */
.mg-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border: none;
}

.mg-user-avatar:hover {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
}

body.dark-mode .mg-user-avatar {
    background: linear-gradient(135deg, #42A5F5, #2196F3);
}

body.dark-mode .mg-user-avatar:hover {
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.3);
}

/* Modern Glass Role Badge in User Dropdown */
.mg-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    margin-top: 5px;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Recruiter - Blue */
.mg-role-badge-recruiter {
    background: rgba(33, 150, 243, 0.1);
    color: #1976D2;
    border: 1px solid rgba(33, 150, 243, 0.2);
}

/* Hiring Manager - Purple */
.mg-role-badge-hiring-manager {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

/* HR Manager / HR roles - Teal */
.mg-role-badge-hr {
    background: rgba(6, 182, 212, 0.1);
    color: #0891B2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Admin / Company Admin - Emerald */
.mg-role-badge-admin {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Candidate / Job Seeker - Amber */
.mg-role-badge-candidate {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Agency - Indigo */
.mg-role-badge-agency {
    background: rgba(99, 102, 241, 0.1);
    color: #4F46E5;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Default fallback - Slate */
.mg-role-badge-default {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Dark mode role badge adjustments */
body.dark-mode .mg-role-badge-recruiter {
    background: rgba(33, 150, 243, 0.15);
    color: #64B5F6;
    border-color: rgba(33, 150, 243, 0.25);
}

body.dark-mode .mg-role-badge-hiring-manager {
    background: rgba(124, 58, 237, 0.15);
    color: #A78BFA;
    border-color: rgba(124, 58, 237, 0.25);
}

body.dark-mode .mg-role-badge-hr {
    background: rgba(6, 182, 212, 0.15);
    color: #67E8F9;
    border-color: rgba(6, 182, 212, 0.25);
}

body.dark-mode .mg-role-badge-admin {
    background: rgba(16, 185, 129, 0.15);
    color: #6EE7B7;
    border-color: rgba(16, 185, 129, 0.25);
}

body.dark-mode .mg-role-badge-candidate {
    background: rgba(245, 158, 11, 0.15);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.25);
}

body.dark-mode .mg-role-badge-agency {
    background: rgba(99, 102, 241, 0.15);
    color: #A5B4FC;
    border-color: rgba(99, 102, 241, 0.25);
}

body.dark-mode .mg-role-badge-default {
    background: rgba(100, 116, 139, 0.15);
    color: #94A3B8;
    border-color: rgba(100, 116, 139, 0.25);
}

/* Legacy header-icon kept for backward compatibility */
.header-icon {
    font-size: 18px;
    color: #181c32;
    transition: color 0.3s ease;
}

body.dark-mode .header-icon {
    color: #e8eaed !important;
}

.header-icon-small {
    font-size: 14px;
}

/* Hover effect for toggle — subtle focus ring in platform blue */
.dark-mode-toggle-switch:hover .dark-mode-toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.15);
}

body.dark-mode .dark-mode-toggle-switch:hover .dark-mode-toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.25);
}

/* ===== QUESTION TYPE SELECTOR - DARK MODE ===== */
/* Unselected card */
body.dark-mode .btn.btn-outline.btn-outline-dashed.btn-outline-default {
    background-color: #2d3142 !important;
    border-color: #3d4152 !important;
    color: #e8eaed !important;
}

body.dark-mode .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover {
    background-color: #33374e !important;
    border-color: #667eea !important;
}

/* Selected card (btn-check:checked state) */
body.dark-mode .btn-check:checked + .btn.btn-outline.btn-outline-dashed.btn-outline-default,
body.dark-mode .btn-check:active + .btn.btn-outline.btn-outline-dashed.btn-outline-default {
    background-color: #1e2235 !important;
    border-color: #667eea !important;
    color: #a78bfa !important;
}

/* Auto-reject / Yes-No conditional card */
body.dark-mode #auto_reject_options.bg-light-primary {
    background-color: #1e2235 !important;
    border-color: #3d4e8a !important;
}

/* Auto-add (warning card) in dark mode */
body.dark-mode .bg-light-warning.border-warning {
    background-color: #2a2516 !important;
    border-color: #8a6d20 !important;
}

/* Mandatory (danger card) in dark mode */
body.dark-mode .bg-light-danger.border-danger {
    background-color: #2a1820 !important;
    border-color: #8a2030 !important;
}

/* Modal scrollbar styling in dark mode */
body.dark-mode .modal-body::-webkit-scrollbar {
    width: 6px;
}

body.dark-mode .modal-body::-webkit-scrollbar-track {
    background: #2d3142;
}

body.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: #4a4f6a;
    border-radius: 3px;
}

body.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
    background: #667eea;
}