:root {
  --brand-primary: #1e6082;
  --brand-secondary: #3ca6a6;
  --brand-primary-dark: #174a66;
  --brand-secondary-light: #5bc4c4;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
  min-height: 100vh;
}

.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.btn-brand-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-brand-primary:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}
.btn-brand-secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #fff;
}
.btn-brand-secondary:hover {
  background-color: var(--brand-secondary-light);
  border-color: var(--brand-secondary-light);
  color: #fff;
}

.navbar {
  box-shadow: 0 2px 8px rgba(30, 96, 130, 0.15);
}
/* Space between ERP brand and first menu item; push menu right for consistent spacing */
.navbar .navbar-collapse {
  margin-left: 1.5rem;
}
.navbar-logo {
  height: 36px;
  width: auto;
  display: block;
}
.navbar-logo.navbar-logo-white {
  filter: brightness(0) invert(1);
}
.navbar-brand { font-weight: 600; }
.navbar-nav .nav-link { font-weight: 400; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.9); }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }
/* Spacing between top menu modules */
.navbar-nav .nav-item .nav-link { margin-left: 0.1rem; margin-right: 0.1rem; }

/* Settings icon - softer white, not full white; even spacing in nav */
.settings-icon-link { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.15s; padding: 0.25rem; line-height: 1; }
.settings-icon-link:hover { color: rgba(255, 255, 255, 0.95); }
.navbar .d-flex.align-items-center.gap-3 { flex-shrink: 0; }

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(30, 96, 130, 0.08);
}
.card-header {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
  border: none;
}

.table th { color: var(--brand-primary); font-weight: 600; }
.badge.bg-brand-primary { background-color: var(--brand-primary); }
.badge.bg-brand-secondary { background-color: var(--brand-secondary); }

.form-control:focus, .form-select:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 0.2rem rgba(60, 166, 166, 0.25);
}

.lead-stat {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem;
}
.lead-stat h3 { font-size: 2rem; margin: 0; font-weight: 700; }
.lead-stat p { margin: 0.25rem 0 0; opacity: 0.95; }

.login-page { padding-top: 2rem; }
.login-logo-wrap { margin-bottom: 1rem; }
.login-logo {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
.login-card { max-width: 420px; margin: 0 auto 4rem; }
.login-card .card { border-radius: 16px; overflow: hidden; }
.login-card .card-header { padding: 1.5rem; font-size: 1.25rem; }

.report-image {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* YayeTech HR */
.hr-stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 96, 130, 0.12);
}
.hr-stat-card .card-body { padding: 1.25rem; }
.hr-stat-card a.small { text-decoration: none; color: var(--brand-primary); }

.employee-form-photo {
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  border: 1px solid #dee2e6;
}
.employee-list-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}

/* Projects */
.project-subtask-list .list-group-item {
  transition: background-color 0.15s ease;
}
.project-subtask-list .subtask-done .subtask-badge { background-color: var(--brand-secondary) !important; }
.project-subtask-list .list-group-item:hover { background-color: rgba(30, 96, 130, 0.04); }
.subtask-badge { min-width: 4.5rem; }
.project-subtask-form .form-control:focus, .project-subtask-form .form-select:focus { border-color: var(--brand-secondary); }