/* ===== Core Variables ===== */
:root {
  --bg: #0b1220;
  --bg2: #131c2e;
  --card: #18243a;
  --text: #ffffff;
  --muted: #9db2c7;
  --link: #8bc0ff;
  --primary: #2b6cb0;
  --danger: #e11d48;
  --success: #16a34a;
  --border: #24324a;
  --header-blue: #001a40;
}

/* ===== Base Styles ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

/* ===== Header Styles ===== */
.global-header { background-color: #0b3a70; background-image: url("/static/img/bg-pattern.png"); background-repeat: repeat; background-size: auto; }

.header-left {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.header-logo {
  height: 80px; /* Doubled from original 40px */
  width: auto;
  margin-right: 25px;
}

.header-title {
  color: white;
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
}

.header-links a,
.header-links span {
  color: white !important;
  text-decoration: none;
  font-size: 1rem;
}

/* ===== Navigation ===== */
.navbar {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: white !important;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
  opacity: 0.9;
}

.dropdown-menu {
  background: var(--card);
  border: 1px solid var(--border);
}

.dropdown-item {
  color: white !important;
  padding: 0.5rem 1.2rem;
}

.dropdown-item:hover {
  background: var(--bg2);
}

/* ===== Content Area ===== */
.container {
  max-width: 1200px;
  padding: 0 20px;
  margin: 25px auto;
}

/* ===== Cards ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  color: white;
}

/* ===== Tables ===== */
.table {
  color: white !important;
  width: 100%;
}

.table th {
  border-color: var(--border);
}

/* ===== Forms ===== */
.form-control, .form-select {
  background: #111a2a;
  color: white;
  border: 1px solid var(--border);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .header-logo {
    height: 60px; /* Doubled mobile size */
    margin-right: 15px;
  }
  
  .header-title {
    font-size: 1.6rem;
  }
  
  .header-links {
    gap: 12px;
    font-size: 0.9rem;
    padding-right: 10px;
  }
  
  .navbar-dark .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
  }
  
  .global-header { background-color: #0b3a70; background-image: url("/static/img/bg-pattern.png"); background-repeat: repeat; background-size: auto; }
}

/* Cohesive theme tweaks */
.card { background-color: var(--card-bg); color: var(--text); }
.card .form-control { background-color: #0f172a; color: var(--text); border-color: #1f2a44; }
.card .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); }
a { color: var(--primary); }
a:hover { color: #93c5fd; }
.btn-outline-light { border-color: #334155; color: #cbd5e1; }
.btn-outline-light:hover { background-color: #1e293b; border-color: #475569; color: #ffffff; }


/* Button theming to avoid Bootstrap dependency */
.btn { 
  display:inline-block; padding: .5rem 1rem; border-radius: .5rem; 
  text-decoration:none; border:1px solid var(--border); cursor:pointer; 
  background:#0f172a; color: var(--text);
}
.btn:hover { filter: brightness(1.1); text-decoration:none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-secondary { background: #334155; border-color: #334155; color: #fff; }
.btn-sm { padding: .25rem .5rem; font-size:.875rem; }
.btn-outline-light { background: transparent; border-color: #475569; color: #e2e8f0; }
.btn-outline-light:hover { background:#1f2a44; }
.navbar, .global-header { background-color: #0b3a70; background-image: url("/static/img/bg-pattern.png"); background-repeat: repeat; background-size: auto; }
.navbar a { color:white; text-decoration:none; margin-right: 1rem; }
.navbar a.active { text-decoration: underline; }
hr { border-color: var(--border); }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.card { border: 1px solid var(--border); border-radius: .75rem; }
.form-control { width: 100%; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid var(--border); background:#0f172a; color: var(--text); }
label.form-label { margin-bottom: .25rem; display:block; color: var(--muted); }


/* Food Walk cohesion */
.form-check-label { color: var(--text); }
.form-select { background-color: #0f172a; color: var(--text); border-color: var(--border); }
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); }
.form-check-input { border-color: var(--border); background-color: #0b1220; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.summary, summary { color: var(--text); }


/* === Global background pattern applied across all tabs === */
html, body { min-height: 100%; }
body { background-color: #0b3a70; color: var(--text); }


/* Dark blue form fields with white text (global) */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"],
textarea, select, .form-control, .form-select {
  background-color: #0f2f5c; /* dark blue */
  color: #ffffff;
  border: 1px solid #1e3a8a;
}
.form-control::placeholder, textarea::placeholder { color: #cbd5e1; opacity: .8; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}
label, .form-label { color: #e2e8f0; }