/**
 * 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;
}