:root {
    --bg-primary: #F1EFEC;
    --bg-secondary: #FFFFFF;
    --bg-accent: #D4C9BE;
    --text-primary: #bd5555;
    --text-secondary: #5c5c5c;
    --brand-primary: #123458;
    --brand-secondary: #3a5b8a;
    --border-color: #e5e7eb;
    --success-color: #16a34a;
}

.dark {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-accent: #222222;
    --text-primary: #F1EFEC;
    --text-secondary: #a1a1aa;
    --brand-primary: #a8bfe1;
    --brand-secondary: #6c8bc2;
    --border-color: #27272a;
    --success-color: #4ade80;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar { width: 16rem; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); display: none; flex-direction: column; flex-shrink: 0; }
@media (min-width: 768px) { .sidebar { display: flex; } }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.page-header { height: 5rem; display: flex; align-items: center; justify-content: space-between; padding-left: 2rem; padding-right: 2rem; border-bottom: 1px solid var(--border-color); background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); flex-shrink: 0; }
.dark .page-header { background-color: rgba(17, 17, 17, 0.8); }

.page-content { flex: 1; overflow-y: auto; padding: 1rem; }
@media (min-width: 768px) { .page-content { padding: 2rem; } }

.nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-radius: 0.5rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }
.nav-link:hover { background-color: rgba(212, 201, 190, 0.3); color: var(--text-primary); }
.nav-link.active { background-color: rgba(18, 52, 88, 0.1); color: var(--brand-primary); font-weight: 600; }
.dark .nav-link.active { background-color: rgba(168, 191, 225, 0.1); }
.nav-link i { width: 1.25rem; height: 1.25rem; }

.content-card { background-color: var(--bg-secondary); padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); border: 1px solid var(--border-color); }
.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: rgba(18, 52, 88, 0.1); color: var(--brand-primary); }
.dark .stat-icon { background-color: rgba(168, 191, 225, 0.1); }
.stat-label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }

.input-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.25rem; }
.input-field { width: 100%; padding: 0.625rem 1rem; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; transition: all 0.2s; }
.input-field:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--brand-primary); border-color: var(--brand-primary); }

.action-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; padding: 0.625rem 1rem; border-radius: 0.5rem; transition: all 0.2s; }
.action-button:hover { transform: scale(1.05); }
.action-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background-color: var(--brand-primary); color: white; }
.btn-primary:hover:not(:disabled) { background-color: var(--brand-secondary); }
.btn-secondary { background-color: rgba(212, 201, 190, 0.4); color: var(--text-primary); }
.btn-secondary:hover:not(:disabled) { background-color: rgba(212, 201, 190, 0.7); }
.btn-success { background-color: var(--success-color); color: white; }
.btn-success:hover:not(:disabled) { opacity: 0.8; }

.icon-button { color: rgba(92, 92, 92, 0.6); padding: 0.375rem; border-radius: 9999px; transition: all 0.2s; }
.dark .icon-button { color: rgba(161, 161, 170, 0.6); }
.icon-button:hover { background-color: rgba(212, 201, 190, 0.3); color: var(--brand-primary); }

.modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal-content { background-color: var(--bg-secondary); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 42rem; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--border-color); }
.modal-footer { display: flex; justify-content: flex-end; align-items: center; padding: 1rem; border-top: 1px solid var(--border-color); background-color: rgba(241, 239, 236, 0.5); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; gap: 0.75rem; }
.dark .modal-footer { background-color: rgba(10, 10, 10, 0.5); }

.table-header { padding: 0.75rem 1.5rem; text-align: left; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.table-cell { padding: 1rem 1.5rem; white-space: nowrap; font-size: 0.875rem; }

.status-tag { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: 9999px; }
.tag-red { background-color: rgba(239, 68, 68, 0.1); color: #b91c1c; }
.tag-green { background-color: rgba(34, 197, 94, 0.1); color: #15803d; }
.tag-blue { background-color: rgba(59, 130, 246, 0.1); color: #1d4ed8; }
.dark .tag-red { color: #f87171; }
.dark .tag-green { color: #4ade80; }
.dark .tag-blue { color: #60a5fa; }
.shortlisted { color: #f59e0b; fill: #f59e0b; }

.loader { width: 2rem; height: 2rem; border-width: 2px; border-color: var(--bg-accent); border-top-color: var(--brand-primary); border-radius: 9999px; animation: spin 1s linear infinite; }
.animate-pop-in { animation: pop-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.action-menu {
  position: absolute; 
  z-index: 20;
  min-width: 14rem; 
  margin-top: 0.5rem; 
  background-color: var(--bg-secondary);
  border-radius: 0.375rem; 
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 
  border: 1px solid var(--border-color);
  padding: 0.25rem; 
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; 
  padding: 0.5rem 0.75rem; 
  font-size: 0.875rem; 
  color: var(--text-secondary);
  border-radius: 0.25rem; 
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}

.action-menu-item:hover {
  background-color: var(--bg-accent);
  color: var(--text-primary);
}

.action-menu-item.delete {
  color: #ef4444; 
}

.action-menu-item.delete:hover {
  background-color: #ef4444; 
  color: white;
}

.action-menu-divider {
  margin: 0.25rem 0; 
  height: 1px;
  background-color: var(--border-color);
}