:root {
  --bm-panel-navy: #082f4b;
  --bm-panel-blue: #17435b;
  --bm-panel-line: #dfe7ee;
  --bm-panel-soft: #f3f6f9;
  --bm-panel-green: #2eae60;
  --bm-panel-shadow: 0 12px 34px rgba(8, 47, 75, .10);
}

body {
  background-color: var(--bm-panel-soft) !important;
  color: #20384c;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.header, header.header, .admin-header, .panel-header {
  background: linear-gradient(135deg, #0d3c5d, #062942) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(6, 41, 66, .16) !important;
}

nav.main-panel-nav, nav.admin-nav, .main-nav {
  background: #fff !important;
  border-bottom: 1px solid var(--bm-panel-line) !important;
  box-shadow: 0 5px 16px rgba(8, 47, 75, .06) !important;
}

nav.main-panel-nav a, nav.admin-nav a, .main-nav a {
  color: #365168 !important;
  background: transparent !important;
  border-color: #e7edf2 !important;
  font-weight: 650 !important;
}

nav.main-panel-nav a:hover, nav.main-panel-nav a.active,
nav.admin-nav a:hover, nav.admin-nav a.active, .main-nav a:hover, .main-nav a.active {
  color: var(--bm-panel-navy) !important;
  background: #edf4f8 !important;
  border-bottom-color: var(--bm-panel-blue) !important;
}

.container, .login-container, .register-container, .form-container, .content-container,
.profile-container, .messages-container, .dashboard-container, main.container {
  border: 1px solid #e2e9ef !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--bm-panel-shadow) !important;
}

.container h1, .container h2, .container h3, .login-container h2,
.register-container h2, .form-container h2 { color: var(--bm-panel-navy) !important; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], select, textarea {
  border: 1px solid #d5e0e8 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #263e52 !important;
  min-height: 43px;
  transition: border-color .2s, box-shadow .2s !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #6b9dbe !important;
  box-shadow: 0 0 0 3px rgba(23, 67, 91, .11) !important;
}

button[type="submit"], input[type="submit"], .btn-primary, .submit-btn,
.login-container button[type="submit"], .register-container button[type="submit"] {
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #174b6c, #082f4b) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(8, 47, 75, .18) !important;
  font-weight: 750 !important;
}

button[type="submit"]:hover, input[type="submit"]:hover, .btn-primary:hover, .submit-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

table { border-radius: 10px; overflow: hidden; }
thead tr, table thead { background: linear-gradient(135deg, #0e3f60, #082f4b) !important; color: #fff !important; }
th { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.12) !important; }
td { border-color: #e4ebf0 !important; }
tbody tr:nth-child(even) { background: #fafcfd !important; }
tbody tr:hover { background: #f0f6f9 !important; }

.alert-success, .success-message, .message.success { background: #eaf8ef !important; color: #176136 !important; border-color: #b9e6c9 !important; }
.alert-danger, .error-message, .message.error { background: #fff0f0 !important; color: #9c2d2d !important; border-color: #efc3c3 !important; }
.badge { border-radius: 999px !important; }

body:has(.login-container), body:has(.register-container) {
  background-image: linear-gradient(115deg, rgba(4,35,57,.95), rgba(7,49,76,.70)), url('../images/portal-hero.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

body:has(.login-container) > p, body:has(.register-container) > p { color: rgba(255,255,255,.72) !important; }
.login-logo, .register-logo { padding: 12px 22px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(0,0,0,.14); }

footer { background: #06253b !important; color: #adbfcb !important; }

@media (max-width: 768px) {
  .container, .login-container, .register-container, .form-container, .content-container,
  .profile-container, .messages-container, .dashboard-container { width: calc(100% - 20px) !important; margin-left: auto !important; margin-right: auto !important; padding: 20px 16px !important; }
  nav.main-panel-nav a, nav.admin-nav a { border-left: 0 !important; }
}