@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: only light;
  --bg: #f2f8f3;
  --bg-strong: #e4f1e6;
  --card: rgba(255, 255, 255, 0.9);
  --card-strong: #ffffff;
  --ink: #112530;
  --muted: #5b7282;
  --primary: #0b6f74;
  --primary-strong: #075b60;
  --primary-soft: #d9eff0;
  --accent: #74b3c6;
  --accent-soft: #eaf5f8;
  --success: #1f9d6a;
  --warning: #d97706;
  --danger: #d64c4c;
  --danger-soft: #fce9e9;
  --border: #d9e2ea;
  --shadow: 0 20px 40px -28px rgba(14, 32, 44, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #f2f8f3;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.font-display {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: -0.02em;
}

a {
  color: var(--primary);
}

.app-shell {
  position: relative;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.82), transparent 34%),
    radial-gradient(circle at 92% 6%, rgba(120, 184, 132, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(242, 248, 243, 0.96) 0%, rgba(228, 241, 230, 0.92) 100%);
  pointer-events: none;
}

.glass-panel,
.surface-panel,
.stat-card,
.content-card,
.card-panel {
  background: var(--card);
  border: 1px solid rgba(217, 226, 234, 0.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.85rem;
  color: var(--ink);
}

.section-subtitle {
  color: var(--muted);
}

.btn-brand,
.btn-primary-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
  transition: 180ms ease;
}

.btn-brand {
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  box-shadow: 0 18px 34px -24px rgba(7, 91, 96, 0.9);
}

.btn-brand:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-primary-soft {
  color: var(--primary-strong);
  background: linear-gradient(135deg, #eef9f9 0%, var(--primary-soft) 100%);
  border-color: rgba(11, 111, 116, 0.15);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 1rem;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #df5b5b 0%, #c53e3e 100%);
  box-shadow: 0 18px 34px -24px rgba(197, 62, 62, 0.75);
  transition: 180ms ease;
}

.btn-danger:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 1rem;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(91, 114, 130, 0.18);
  background: rgba(255, 255, 255, 0.82);
  transition: 180ms ease;
}

.btn-muted:hover {
  background: #fff;
}

.form-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(91, 114, 130, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  padding: 0.9rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(11, 111, 116, 0.42);
  box-shadow: 0 0 0 4px rgba(11, 111, 116, 0.12);
  background: #fff;
}

label {
  color: var(--ink);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  background: rgba(217, 239, 240, 0.9);
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

tbody tr {
  background: rgba(255, 255, 255, 0.72);
  transition: background-color 160ms ease;
}

tbody tr:hover {
  background: rgba(234, 245, 248, 0.92);
}

th,
td {
  border-bottom: 1px solid rgba(217, 226, 234, 0.75);
}

.status-chip,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-ok {
  color: #0e6b47;
  background: rgba(50, 190, 124, 0.14);
}

.status-warn {
  color: #a15c0c;
  background: rgba(245, 158, 11, 0.16);
}

.status-danger {
  color: #b33434;
  background: rgba(214, 76, 76, 0.14);
}

.topbar-shell {
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(217, 226, 234, 0.7);
  backdrop-filter: blur(10px);
}

.topbar-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  box-shadow: 0 12px 24px -16px rgba(7, 91, 96, 0.72);
}

#sidebar {
  background: linear-gradient(180deg, #0d6469 0%, #0a5158 52%, #093f44 100%);
  box-shadow: 0 24px 44px -28px rgba(6, 25, 31, 0.7);
}

#sidebar .sidebar-brand {
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#sidebar .nav-section-title {
  color: rgba(255, 255, 255, 0.56);
  letter-spacing: 0.18em;
}

#sidebar .nav-link {
  border-radius: 1rem;
  color: rgba(255, 255, 255, 0.72);
}

#sidebar .nav-link:hover,
#sidebar .nav-link.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

#sidebar .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
}

.page-header-card {
  border-radius: 1.75rem;
  padding: 1.5rem 1.75rem;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(145deg, rgba(11, 111, 116, 0.94) 0%, rgba(7, 91, 96, 0.96) 100%);
  color: #fff;
  box-shadow: 0 24px 44px -30px rgba(7, 91, 96, 0.85);
}

.page-header-card p,
.page-header-card span {
  color: rgba(255, 255, 255, 0.78);
}

.page-header-card h1,
.page-header-card h2 {
  color: #fff;
}

.chart-panel canvas {
  max-height: 340px;
}

.message-banner {
  border-radius: 1rem;
  border: 1px solid transparent;
  padding: 0.95rem 1rem;
  font-weight: 600;
}

.message-banner.success {
  border-color: rgba(50, 190, 124, 0.26);
  background: rgba(50, 190, 124, 0.12);
  color: #0e6b47;
}

.message-banner.warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #a15c0c;
}

.message-banner.error {
  border-color: rgba(214, 76, 76, 0.3);
  background: rgba(214, 76, 76, 0.11);
  color: #b33434;
}

.message-banner.info {
  border-color: rgba(116, 179, 198, 0.32);
  background: rgba(116, 179, 198, 0.12);
  color: #18556a;
}

.candidate-photo-upload {
  position: relative;
}

.candidate-photo-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.candidate-photo-preview {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 55%),
    linear-gradient(145deg, rgba(11, 111, 116, 0.12) 0%, rgba(217, 239, 240, 0.85) 100%);
  border: 1px solid rgba(11, 111, 116, 0.12);
}

.candidate-photo-preview img {
  display: block;
}

#sidebar,
.main-content {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-compact {
  display: none;
}

@media (min-width: 768px) {
  .sidebar-collapsed #sidebar {
    width: 5rem;
  }

  .sidebar-collapsed #sidebar .sidebar-brand {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sidebar-collapsed #sidebar .sidebar-brand a {
    justify-content: center;
    gap: 0;
  }

  .sidebar-collapsed #sidebar .sidebar-brand a .bg-white\/10 {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.25rem;
  }

  .sidebar-collapsed #sidebar .sidebar-brand a .bg-white\/10 img {
    width: 2rem;
    height: 2rem;
  }

  .sidebar-collapsed #sidebar .nav-label,
  .sidebar-collapsed #sidebar .section-label,
  .sidebar-collapsed #sidebar .user-meta,
  .sidebar-collapsed #sidebar .logo-text,
  .sidebar-collapsed #sidebar .logo-compact {
    display: none;
  }

  /* In compact mode, we might just want the icon, so we don't show the 'F' text if the icon is there */
  /* If no icon, logo-compact would show. But here we have an icon. */

  .sidebar-collapsed #sidebar .nav-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .sidebar-collapsed #sidebar .nav-icon {
    margin-left: 0;
    margin-right: 0;
    width: 2.5rem;
    height: 2.5rem;
  }

  .sidebar-collapsed #sidebar-collapse {
    position: absolute;
    right: -0.75rem;
    top: 1.5rem;
    z-index: 40;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: #0d6469;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .sidebar-collapsed #sidebar-collapse i {
    transform: rotate(180deg);
    font-size: 0.75rem;
  }

  .sidebar-collapsed .main-content {
    margin-left: 5rem !important;
  }
}

@media (max-width: 767px) {
  .main-content {
    margin-left: 0 !important;
  }
}

.bg-primary,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-indigo-600,
.bg-indigo-700,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-purple-600:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--primary) !important;
}

.text-primary,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-purple-600,
.text-purple-700,
.text-indigo-600,
.text-indigo-700,
.hover\:text-primary:hover {
  color: var(--primary) !important;
}

.border-primary,
.border-blue-500,
.border-blue-600,
.border-purple-500,
.border-purple-600,
.focus\:border-blue-500:focus,
.focus\:border-green-500:focus {
  border-color: rgba(11, 111, 116, 0.45) !important;
}

.focus\:ring-blue-100:focus,
.focus\:ring-green-100:focus {
  --tw-ring-color: rgba(11, 111, 116, 0.12) !important;
}

.from-blue-500,
.from-blue-600,
.from-purple-500,
.from-purple-600,
.from-indigo-600,
.via-purple-500,
.via-purple-600,
.to-blue-600,
.to-purple-600,
.to-emerald-600,
.to-indigo-600,
.hover\:from-blue-600:hover,
.hover\:via-purple-600:hover,
.hover\:to-indigo-700:hover,
.hover\:to-emerald-700:hover,
.hover\:from-green-600:hover {
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(7, 91, 96, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple-700,
.to-blue-700,
.to-indigo-700,
.to-emerald-700,
.hover\:to-purple-700:hover,
.hover\:to-blue-700:hover,
.hover\:to-emerald-700:hover {
  --tw-gradient-to: var(--primary-strong) var(--tw-gradient-to-position) !important;
}

.bg-green-500,
.bg-green-600,
.bg-green-700,
.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover {
  background-color: var(--success) !important;
  color: #fff !important;
}

.from-green-500 {
  --tw-gradient-from: var(--success) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(31, 157, 106, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.text-green-600,
.text-green-700 {
  color: var(--success) !important;
}

.bg-red-500,
.bg-red-600,
.bg-red-700,
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover {
  background-color: var(--danger) !important;
}

.text-red-600,
.text-red-700 {
  color: var(--danger) !important;
}

.bg-red-100 {
  background-color: rgba(214, 76, 76, 0.12) !important;
}

.bg-green-100 {
  background-color: rgba(50, 190, 124, 0.14) !important;
}

.bg-blue-100,
.bg-indigo-100,
.bg-cyan-100,
.bg-purple-100,
.bg-violet-100 {
  background-color: rgba(11, 111, 116, 0.12) !important;
}

.bg-violet-50,
.bg-purple-50,
.hover\:bg-violet-50:hover,
.hover\:bg-purple-50:hover,
.hover\:bg-violet-100:hover,
.hover\:bg-purple-100:hover {
  background-color: rgba(11, 111, 116, 0.08) !important;
}

.text-violet-700,
.text-violet-800,
.text-purple-700,
.text-purple-800 {
  color: var(--primary-strong) !important;
}

.border-violet-100,
.border-violet-200,
.border-purple-100,
.border-purple-200,
.hover\:border-purple-600:hover,
.focus\:border-purple-500:focus {
  border-color: rgba(11, 111, 116, 0.24) !important;
}

.from-violet-500,
.from-violet-600,
.from-purple-500,
.from-purple-600,
.from-indigo-500,
.from-indigo-600,
.hover\:from-violet-500:hover,
.hover\:from-violet-600:hover {
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(11, 111, 116, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-violet-400,
.to-violet-500,
.to-violet-600,
.to-purple-500,
.to-purple-600,
.to-slate-800,
.hover\:to-violet-400:hover,
.hover\:to-violet-500:hover {
  --tw-gradient-to: var(--primary-strong) var(--tw-gradient-to-position) !important;
}

.bg-violet-600,
.bg-purple-600,
.bg-violet-700,
.bg-purple-700,
.hover\:bg-violet-600:hover,
.hover\:bg-purple-700:hover {
  background-color: var(--primary) !important;
}

.bg-white.rounded-xl.shadow-md,
.bg-white.rounded-2xl.shadow-md,
.bg-white.rounded-3xl.shadow-md,
.bg-white.rounded-xl.shadow-xl,
.bg-white.rounded-2xl.shadow-xl {
  background: var(--card) !important;
  border: 1px solid rgba(217, 226, 234, 0.8) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(8px);
}