/**
 * RecruitFlow — Visual Enhancement Layer v3
 * Brand palette: Deep Indigo #2B3E5E · Electric Teal #00D2B4 · Soft Indigo #646EDC · Cool Gray #828CAA · Light BG #F5F7FC
 * Logo: RF SVG circle (patched via patch-logo-rf-svg.php)
 */

/* === CSS VARIABLES OVERRIDE === */
:root {
  --rf-indigo: #2B3E5E;
  --rf-teal: #00D2B4;
  --rf-soft-indigo: #646EDC;
  --rf-gray: #828CAA;
  --rf-light: #F5F7FC;
  --rf-teal-glow: rgba(0,210,180,0.12);
  --rf-teal-dark: #00B89E;
  --rf-indigo-light: rgba(24,30,55,0.06);
}

/* === SIDEBAR === */
.sidebar {
  background: linear-gradient(180deg, #0f1529 0%, var(--rf-indigo) 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar-header {
  padding: 20px 18px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 8px !important;
}

/* === LOGO (SVG inline after patch) === */
.logo-mark {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: transparent !important;
}

.logo-mark svg {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}

/* Remove any old ::after hack */
.logo-mark::after {
  content: none !important;
  display: none !important;
}

.logo-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

/* === SIDEBAR NAV === */
.sidebar-nav {
  padding: 0 10px !important;
}

.nav-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--rf-gray) !important;
  padding: 16px 12px 8px !important;
  text-transform: uppercase !important;
}

.nav-item {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  margin-bottom: 2px !important;
  transition: all 0.15s ease !important;
  color: rgba(255,255,255,0.6) !important;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.9) !important;
}

.nav-item.active {
  background: var(--rf-teal-glow) !important;
  color: var(--rf-teal) !important;
}

.nav-item.active .nav-icon {
  color: var(--rf-teal) !important;
}

.nav-icon {
  color: var(--rf-gray) !important;
  opacity: 0.7 !important;
}

.nav-item:hover .nav-icon {
  opacity: 1 !important;
}

.nav-badge {
  background: var(--rf-teal) !important;
  color: var(--rf-indigo) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

/* === LOGIN SCREEN === */
.login-screen {
  background: linear-gradient(135deg, #0f1529 0%, var(--rf-indigo) 50%, #1a2444 100%) !important;
}

.login-box {
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

.login-logo .logo-mark {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.login-logo .logo-mark svg {
  width: 48px !important;
  height: 48px !important;
}

/* === BUTTONS === */
.btn-primary {
  background: var(--rf-teal) !important;
  border-color: var(--rf-teal) !important;
  color: var(--rf-indigo) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.btn-primary:hover {
  background: var(--rf-teal-dark) !important;
  border-color: var(--rf-teal-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,210,180,0.25) !important;
}

.btn-secondary, .btn-outline {
  border-color: rgba(100,110,220,0.2) !important;
  color: var(--rf-soft-indigo) !important;
  border-radius: 8px !important;
}

.btn-secondary:hover, .btn-outline:hover {
  background: var(--rf-indigo-light) !important;
  border-color: var(--rf-soft-indigo) !important;
}

.btn-danger {
  border-radius: 8px !important;
}

/* === CARDS === */
.card, .stat-card, .stats-card {
  border-radius: 12px !important;
  border: 1px solid rgba(100,110,220,0.08) !important;
  box-shadow: 0 1px 3px rgba(24,30,55,0.04) !important;
  transition: all 0.2s ease !important;
}

.card:hover, .stat-card:hover {
  box-shadow: 0 4px 12px rgba(24,30,55,0.08) !important;
}

/* === DASHBOARD KPIs === */
.stats-grid .stat-card {
  background: #fff !important;
}

.stat-value, .stat-number {
  color: var(--rf-indigo) !important;
  font-weight: 700 !important;
}

/* === KANBAN / PIPELINE === */
.kanban-board {
  background: var(--rf-light) !important;
}

.kanban-column {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(100,110,220,0.08) !important;
}

.column-header {
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.column-count {
  background: var(--rf-light) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--rf-soft-indigo) !important;
}

.kanban-card {
  border-radius: 10px !important;
  border: 1px solid rgba(100,110,220,0.08) !important;
  transition: all 0.15s ease !important;
}

.kanban-card:hover {
  border-color: var(--rf-teal) !important;
  box-shadow: 0 4px 12px rgba(0,210,180,0.1) !important;
}

/* === TABLES === */
table thead th {
  background: var(--rf-light) !important;
  color: var(--rf-indigo) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

table tbody tr:hover {
  background: rgba(0,210,180,0.03) !important;
}

/* === MODALS === */
.modal-content, .modal {
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(24,30,55,0.15) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(100,110,220,0.08) !important;
}

.modal-footer {
  border-top: 1px solid rgba(100,110,220,0.08) !important;
}

/* === BADGES & TAGS === */
.badge, .tag {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.badge-primary {
  background: var(--rf-teal-glow) !important;
  color: var(--rf-teal-dark) !important;
}

.badge-info {
  background: rgba(100,110,220,0.1) !important;
  color: var(--rf-soft-indigo) !important;
}

/* === FORMS === */
.form-input, .form-select, .form-textarea {
  border-radius: 8px !important;
  border: 1px solid rgba(100,110,220,0.15) !important;
  transition: border-color 0.2s !important;
  background: #fff !important;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--rf-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,210,180,0.1) !important;
  outline: none !important;
}

.form-label {
  color: var(--rf-indigo) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* === SEARCH === */
.search-input, input[type="search"] {
  border-radius: 8px !important;
  border: 1px solid rgba(100,110,220,0.12) !important;
}

.search-input:focus, input[type="search"]:focus {
  border-color: var(--rf-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,210,180,0.1) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(24,30,55,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(24,30,55,0.2); }

/* === AVATAR === */
.avatar {
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* === GREETING === */
.rf-greeting h2 {
  color: var(--rf-indigo) !important;
}

/* === PROFILE COMPACT INFO === */
.rf-compact-info {
  background: #fff !important;
  border-color: rgba(100,110,220,0.1) !important;
}

/* === SCORE BADGES (IA Scoring) === */
.score-badge {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* === TABS === */
.tab-active, .tab.active {
  border-bottom-color: var(--rf-teal) !important;
  color: var(--rf-teal) !important;
}

/* === EMPTY STATES === */
.empty-state {
  color: var(--rf-gray) !important;
}

/* === TOOLTIPS === */
.tooltip {
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* === DROPDOWN / MENU === */
.dropdown-menu, .context-menu {
  border-radius: 10px !important;
  border: 1px solid rgba(100,110,220,0.08) !important;
  box-shadow: 0 8px 24px rgba(24,30,55,0.12) !important;
}

.dropdown-item:hover {
  background: var(--rf-teal-glow) !important;
  color: var(--rf-teal-dark) !important;
}

/* === ACCENT COLOR OVERRIDES (teal replaces old accents) === */
[style*="color:var(--accent)"], [style*="color: var(--accent)"] {
  color: var(--rf-teal) !important;
}

/* === MISC BODY === */
body, .app-shell, .main-content {
  background: var(--rf-light) !important;
}

/* === SIDEBAR FOOTER / USER === */
.sidebar-footer, .sidebar-user {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar-user:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* === FILTER BAR === */
.filter-bar, .filters {
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(100,110,220,0.08) !important;
}

/* === JUST ADDED HIGHLIGHT === */
.just-added {
  border-left: 3px solid var(--rf-teal) !important;
}

/* === SELECTION / ACTIVE STATE === */
::selection {
  background: rgba(0,210,180,0.2);
  color: var(--rf-indigo);
}

/* === LINKS === */
a {
  color: var(--rf-soft-indigo);
}

a:hover {
  color: var(--rf-teal-dark);
}


/* ═══ Sidebar collapsed state ═══ */
.sidebar.collapsed .nav-label,
.sidebar.collapsed .section-label,
.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .user-name {
  display: none !important;
}
.sidebar.collapsed .nav-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  font-size: 9px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  line-height: 16px !important;
}
.sidebar.collapsed .nav-item {
  position: relative !important;
  justify-content: center !important;
  padding: 9px !important;
}
.sidebar.collapsed .nav-icon {
  margin-right: 0 !important;
}
.sidebar.collapsed .sidebar-header {
  justify-content: center !important;
  overflow: hidden !important;
}
.sidebar.collapsed .sidebar-toggle {
  margin: 0 !important;
}
.sidebar.collapsed .user-info {
  justify-content: center !important;
}

/* ═══ User info at bottom ═══ */
.sidebar .user-name,
.sidebar .user-role {
  color: rgba(255,255,255,0.7) !important;
}
.sidebar .user-role {
  color: rgba(255,255,255,0.4) !important;
}

/* ═══ Sidebar overflow ═══ */
.sidebar {
  overflow: hidden !important;
}
.sidebar-header {
  overflow: hidden !important;
}

/* Email CV scanning and review */
.rf-scan-help { color: var(--text-secondary, var(--text-muted)); font-size: 13px; line-height: 1.6; margin: 8px 0 20px; max-width: 72ch; }
.rf-email-table-wrap { overflow-x: auto; }
.rf-email-user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rf-email-user-table th, .rf-email-user-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rf-email-user-table th { background: var(--bg-surface); font-size: 12px; }
.rf-email-user-table small { display: block; margin-top: 4px; }
.rf-email-user-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.rf-email-user-table input[type=email] { min-width: 190px; }
.rf-em-state { display: block; min-width: 130px; max-width: 250px; overflow-wrap: anywhere; }
.rf-import-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rf-import-filters label { display: grid; gap: 8px; font-size: 13px; flex: 1 1 180px; max-width: 280px; }
.rf-import-row { padding: 24px 0; border-bottom: 1px solid var(--border); }
.rf-import-row:first-child { border-top: 1px solid var(--border); }
.rf-import-row h2 { font-size: 16px; margin-bottom: 8px; overflow-wrap: anywhere; }
.rf-import-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; margin: 10px 0; overflow-wrap: anywhere; }
.rf-import-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rf-import-actions select { max-width: 300px; }
.rf-import-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.rf-import-empty { padding: 48px 0; max-width: 65ch; }
.rf-import-row a { color: var(--accent); text-underline-offset: 3px; }
.rf-import-filters :focus-visible, .rf-import-row :focus-visible, .rf-email-user-table :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .rf-import-filters label { max-width: none; } .rf-import-actions > * { min-height: 40px; } .rf-email-settings { padding: 16px !important; } }
@media (max-width: 760px) {
  .rf-email-user-table thead { display: none; }
  .rf-email-user-table, .rf-email-user-table tbody, .rf-email-user-table tr { display: block; }
  .rf-email-user-table tr { border-top: 1px solid var(--border); padding: 12px 0; }
  .rf-email-user-table td { display: grid; grid-template-columns: minmax(75px, 1fr) minmax(0, 1.3fr); gap: 12px; border: 0; padding: 8px 0; overflow-wrap: anywhere; }
  .rf-email-user-table td::before { content: attr(data-label); color: var(--text-secondary); font-size: 12px; }
  .rf-email-user-table input[type=email] { min-width: 0; width: 100%; }
  .rf-em-state { min-width: 0; }
}