.logout-btn{
    width:100%;
    padding:10px;
    background:var(--primary);
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    transition:background 0.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
   }
   .logout-btn:hover,.btn-add-note:hover{
    background:var(--primary-dark);
   }
   .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    background:var(--primary);
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    transition:all 0.2s;
    font-size:var(--base-font-size);
   }
   .btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
   }
   .btn i{
    font-size:0.9rem;
   }
   .btn-icon:hover{
    transform:translateY(-1px);
    box-shadow:var(--card-shadow-lg);
    border-color:rgba(67,97,238,0.35);
   }
   .btn-secondary{
    background:var(--secondary);
   }
   .btn-secondary:hover{
    background:#5a6268;
   }
   .btn-warning:hover{
    background:#e0a800;
   }
   .btn-danger{
    background:var(--danger);
   }
   .btn-danger:hover,.remove-field-btn:hover{
    background:#d2335c;
   }
   .stat-card{
    border-radius:12px;
    padding:20px;
    transition:backdrop-filter 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
   }
   .stat-card:hover{
    /* No translateY jump — frost handled by liquid-glass.css */
   }
   .stat-card .title{
    font-size:var(--base-font-size);
    color:var(--secondary);
    margin-bottom:5px;
   }
   .stat-card .value{
    font-size:var(--large-font-size);
    font-weight:700;
    margin-bottom:10px;
   }
   .stat-card .icon{
    width:50px;
    height:50px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    font-size:1.5rem;
   }
   /* Icon colour tints — keyed to data-card-color so they follow the card after DnD reorder */
   .stat-card[data-card-color="1"] .icon{background:rgba(67,97,238,0.1);color:var(--primary);}
   .stat-card[data-card-color="2"] .icon{background:rgba(239,71,111,0.1);color:var(--danger);}
   .stat-card[data-card-color="3"] .icon{background:rgba(6,214,160,0.1);color:var(--success);}
   .stat-card[data-card-color="4"] .icon{background:rgba(255,209,102,0.1);color:var(--warning);}
   .stat-card[data-card-color="5"] .icon{background:rgba(67,97,238,0.1);color:#4361ee;}
   .stat-card[data-card-color="6"] .icon{background:rgba(6,214,160,0.1);color:var(--success);}
   .stat-card[data-card-color="7"] .icon{background:rgba(239,71,111,0.1);color:var(--danger);}
   .stat-card[data-card-color="8"] .icon{background:rgba(255,179,0,0.12);color:#d4a017;}
   .add-field-btn,
   .add-field-btn{background:var(--success);color:white;}
   .add-field-btn:hover{background:#05b388;}
   tr:hover,.stage-nav-btn:hover{background:#f8f9fa;}
   #splashScreen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    display:flex;
    justify-content:center;
    align-items:center;
   }
   /* CRITICAL FIX: Force hide splash when app is ready */
   body.app-ready #splashScreen {
    display: none !important;
    z-index: -1 !important;
    pointer-events: none !important;
   }
   #loginScreen, #registerScreen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:100000;
   }
   #loginScreen.active, #registerScreen.active{
    display:flex;
   }
   body.loading #loginScreen,
   body.loading #registerScreen {
    display:none !important;
   }
   .login-box .google-btn:hover{background:#111 !important;}
   .login-box .google-btn .google-icon{filter:invert(1);}
   #profileModal,#invoiceActionModal,#fillVacancyModal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    z-index:1000;
    display:none;
    justify-content:center;
    align-items:flex-start;
    overflow-y:auto;
    padding:20px;
   }
   #invoiceActionModal{
    z-index:10001 !important;
   }
   #timelineModal .modal-content{
    width:95%;
    max-width:1200px;
    background:rgba(255,255,255,0.65);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
    padding:24px;
   }
   #messageModal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    z-index:2003;
    display:none;
    justify-content:center;
    align-items:flex-start;
    overflow-y:auto;
    padding:20px;
   }
   #daysWorkedModal{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    background:rgba(0,0,0,0.8) !important;
    z-index:2002 !important;
    display:none !important;
    overflow-y:auto !important;
    padding:20px !important;
   }
   .modal-content{
    background:white;
    margin:auto;
    padding:30px;
    border-radius:10px;
    max-width:900px;
    width:90%;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    position:relative;
   }
   #daysWorkedModal .modal-content{
    margin:0 !important;
    margin-left:20px !important;
    margin-top:120px !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    max-width:800px !important;
    width:calc(100% - 60px) !important;
    max-height:calc(100vh - 160px) !important;
    overflow-y:auto !important;
   }
   #messageModal .modal-content{
    max-width:400px;
    text-align:center;
   }
   #messageModalActions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
   }
   .close-modal{
    position:absolute;
    top:15px;
    right:15px;
    font-size:24px;
    cursor:pointer;
    color:var(--secondary);
   }
   #profileModal .modal-content{
    background:#ffffff;
    border:none;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:8px;
    overflow:hidden;
    max-width:1200px;
    width:95vw;
    max-height:95vh;
    display:flex;
    flex-direction:column;
   }
   .back-btn:hover{
    background:rgba(255,255,255,0.1);
   }
   .quick-actions-card:hover,
   .candidate-info-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
   }
   .quick-action-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg,transparent 0,rgba(59,130,246,0.05) 100%);
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:1;
   }
   .quick-action-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    border-color:rgba(59,130,246,0.3);
   }
   .quick-action-btn.phone:hover{border-color:rgba(34,197,94,0.4);}
   .quick-action-btn.email:hover{border-color:rgba(239,68,68,0.4);}
   .quick-action-btn.maps:hover{border-color:rgba(245,158,11,0.4);}
   .quick-action-btn.edit:hover{border-color:rgba(139,69,193,0.4);}
   .notes-section-card,
   .notes-section-header,
   .notes-section-header h3,
   .free-text-section-header h3{
    margin:0;
    font-size:1.1rem;
    font-weight:600;
    color:#1e293b;
    display:flex;
    align-items:center;
    gap:10px;
   }
   .btn-edit-text{
    background:rgba(59,130,246,0.1);
    color:#3b82f6;
    border:1px solid rgba(59,130,246,0.2);
    padding:6px 12px;
    border-radius:8px;
    font-size:0.8rem;
    cursor:pointer;
    transition:all 0.2s ease;
   }
   .btn-edit-text:hover{
    background:rgba(59,130,246,0.2);
   }
   .btn-save:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(16,185,129,0.3);
   }
   .btn-cancel:hover{
    background:rgba(156,163,175,0.2);
   }
   #profileFreeTextSection{grid-column:1 / -1;}
   #profileFreeTextSection .free-text-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--card-shadow);
    overflow:hidden;
   }
   #profileFreeTextSection .free-text-actions .btn-icon{width:32px;height:32px;}
   .notes-section-card{
    background:white;
    border:1px solid #e9ecef;
    border-radius:8px;
    margin:20px;
    overflow:hidden;
    position:relative;
   }
   .notes-expand-btn{
    background:none;
    border:none;
    color:var(--primary);
    cursor:pointer;
    padding:8px;
    border-radius:4px;
    transition:all 0.2s ease;
   }
   .notes-expand-btn:hover{
    background:var(--light);
   }
   .notes-card-content{
    max-height:320px;
    overflow-y:auto;
    transition:max-height 0.3s ease;
   }
   .notes-expanded-mode .notes-card-content{
    max-height:calc(100vh - 200px);
   }
   .btn-add-note{
    background:var(--primary);
    color:white;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    font-size:var(--base-font-size);
    font-weight:500;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:background 0.2s ease;
   }
   #profileNotesSection .notes-card{
    width:100%;
    
    margin:0;
   }
   #profileNotesSection .notes-actions .btn{
    padding:6px 10px;
   }

/* ── Toggle Switch (iOS-style) ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  transition: background 0.25s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary, #4361ee);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* ── Theme Background Image Overlay ── */
#themeBackgroundImg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* Ensure content sits above the background image */
body.has-picture-bg .sidebar {
  z-index: 100;
}
body.has-picture-bg .content-area {
  position: relative;
  z-index: 1;
}
body.has-picture-bg .content-area .section {
  position: relative;
  z-index: 1;
}