/* ==== TEMA/BAS ==== */
:root {
  --brand: #2e5c39;
  --brand-2: #3a7248;
  --accent: #4b8f5a;
  --accent-2: #5fae70;
  --bg: #e7f0e7;
  --card: #fff;
  --text: #333;
  --border: #d0e0d0;
  --shadow: 0 3px 8px rgba(0,0,0,0.12);
  --radius: 8px;
  --nav-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(to bottom, #e7f0e7, #d7e7d7);
  margin: 0;
}

/* Containers */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.main-container { padding-top: var(--nav-h); padding-bottom: 12px; }

/* ==== NAVBAR (fast) ==== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.nav-container { display: flex; align-items: center; gap: 10px; }
.navbar-brand a {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem;
}
.navbar-menu { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.navbar-item {
  color: #fff; text-decoration: none;
  padding: 8px 12px; border-radius: 6px; transition: background .2s;
}
.navbar-item:hover { background: var(--brand-2); }

/* ==== ALERTS ==== */
.alert { background: #fff; border: 1px solid var(--border); border-left-width: 4px; padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.alert-success { border-left-color: #4caf50; }
.alert-danger  { border-left-color: #e53935; }
.alert-info    { border-left-color: #2196f3; }
.alert-warning { border-left-color: #ff9800; }

/* ==== FORMS/KNAPPAR ==== */
.form-control {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; background: #fff;
}
.btn {
  display: inline-block; padding: 10px 16px;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  cursor: pointer; font-weight: 600; text-decoration: none; transition: transform .08s ease, box-shadow .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,.15); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-success { background: #5dc48a; color: #fff; }
.btn-sm { padding: 6px 10px; font-size: .9rem; }

/* ==== PANEL FÖR FILTER/SÖK ==== */
.controls-toggle {
  position: fixed; left: 12px; top: calc(var(--nav-h) + 12px);
  height: 40px; min-width: 40px; border-radius: 10px; border: 0;
  background: var(--brand); color: #fff; cursor: pointer; z-index: 1002;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
}
.controls-toggle:hover { background: var(--brand-2); }

.controls-panel {
  position: fixed; left: 12px; top: calc(var(--nav-h) + 60px);
  width: min(360px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); z-index: 1002;
  padding: 14px;
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow: auto;
  backdrop-filter: blur(2px);
}
.controls-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.controls-header h4 { margin: 0; color: var(--brand); }
.controls-close {
  background: transparent; border: 0; color: #666; cursor: pointer; font-size: 1.1rem; padding: 4px 6px; border-radius: 6px;
}
.controls-close:hover { background: #f1f3f1; }

.filter-section { margin-top: 12px; }
.filter-section h5 { margin: 0 0 8px; color: var(--brand); }
.category-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.category-filter-item { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.category-filter-item input[type="checkbox"] { accent-color: var(--accent); }

/* ==== FOOTER ==== */
.footer { padding: 20px 0; color: #446; }
.footer .text-center { text-align: center; }

/* ==== RESPONSIVT ==== */
@media (max-width: 768px) {
  .controls-panel { top: calc(var(--nav-h) + 12px); }
}