/* ============================================================================
   Veldhuisbouw – Redesign 2026-07-25
   Zelfde kleuren, ander (frisser, compacter) ontwerp. App-achtige mobiele
   navigatie onderaan, dichtere layout, minder scrollen. Laadt NA styles.css
   zodat het gericht overschrijft.
   ========================================================================== */

:root {
  --r-radius: 20px;
  --r-radius-sm: 14px;
  --r-nav-h: 64px;
}

/* ---- Subtiele algemene verfrissing (alle schermen) ---------------------- */
.panel,
.metric,
.card,
.directory-card {
  border-radius: var(--r-radius);
}
.dashboard-command {
  border-radius: 24px;
}

/* Mooiere, compactere metric-tegels met accentrand bovenaan */
.metric {
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gold);
  opacity: 0.85;
}

/* ===========================================================================
   MOBIELE BOTTOM-NAVIGATIE (app-gevoel)  – standaard verborgen
   =========================================================================== */
.bottom-nav {
  display: none;
}

@media (max-width: 820px) {
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(22, 18, 11, 0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 30px rgba(22, 18, 11, 0.25);
  }
  .bottom-nav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-family: "DM Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 14px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }
  .bottom-nav-btn svg {
    width: 22px;
    height: 22px;
  }
  .bottom-nav-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-btn.active {
    color: #2a1f0c;
    background: var(--gold);
  }
  .bottom-nav-btn:not(.active):active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Ruimte onderaan zodat inhoud niet achter de balk valt */
  .main {
    padding-bottom: calc(var(--r-nav-h) + env(safe-area-inset-bottom) + 20px) !important;
  }
  /* De losse "Menu"-knop in de mobiele header mag weg: bottom-nav neemt het over */
  .mobile-menu-button {
    display: none !important;
  }
}

/* ===========================================================================
   COMPACTE MOBIELE LAYOUT – minder scrollen, dichtere info
   =========================================================================== */
@media (max-width: 820px) {
  /* Compactere mobiele header */
  .mobile-app-header {
    min-height: 58px !important;
    padding: 8px 12px !important;
  }
  .mobile-brand img {
    width: 38px !important;
    height: 38px !important;
  }
  .mobile-brand strong {
    font-size: 15px !important;
  }

  /* Hoofdinhoud dichter op elkaar */
  .main {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
  }
  .view-panel {
    gap: 12px;
  }
  .panel {
    padding: 14px !important;
  }

  /* Dashboard-command compacter */
  .dashboard-command {
    padding: 16px !important;
    gap: 12px;
  }
  .dashboard-command h2 {
    font-size: 20px;
    line-height: 1.15;
  }
  .dashboard-command > .dashboard-command-copy > p {
    font-size: 13px;
  }
  /* Dagstatus als 3 compacte kolommen */
  .dashboard-pulse {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dashboard-pulse > div {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    padding: 10px 6px;
  }
  .dashboard-pulse strong {
    font-size: 20px;
  }
  .dashboard-pulse small {
    font-size: 10.5px;
  }

  /* Snelacties: 2 kolommen i.p.v. volle breedte-stapel */
  .dashboard-command-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dashboard-quick-action {
    padding: 12px !important;
  }
  .dashboard-quick-action small {
    display: none;
  }

  /* KPI-tegels: 2 kolommen compacte tiles (was 1 kolom = lang scrollen) */
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dashboard-kpi-grid .metric,
  .dashboard-kpi-grid .metric:nth-child(1),
  .dashboard-kpi-grid .metric:nth-child(6),
  .dashboard-kpi-grid .metric:nth-child(7) {
    grid-column: auto !important;
  }
  .metric {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px 12px 12px 16px !important;
  }
  .metric .metric-arrow {
    display: none !important;
  }
  .metric-copy strong {
    font-size: 22px !important;
    line-height: 1.05;
  }
  .metric-copy small,
  .metric-copy span {
    font-size: 11px !important;
  }
  .metric-icon {
    width: 34px !important;
    height: 34px !important;
  }

  /* "Vandaag op pad" compacter op mobiel */
  .today-card {
    padding: 12px !important;
    gap: 10px !important;
  }
  .today-time {
    min-width: 48px !important;
    padding-right: 10px !important;
  }
  .today-time strong {
    font-size: 18px !important;
  }

  /* Dashboard-panelen dichter en met compacte koppen */
  .dashboard-grid,
  .dashboard-panels {
    gap: 12px !important;
  }
  .panel-heading h3,
  .panel h3 {
    font-size: 16px;
  }

  /* Klantenlijst-kaarten compacter */
  .customer-card {
    padding: 12px !important;
  }
  .directory-card {
    padding: 14px !important;
  }

  /* Sectietitels compacter */
  .topbar h1,
  #pageTitle {
    font-size: 22px;
  }
  .page-subtitle {
    font-size: 13px;
  }
}

/* Nog compacter op kleine telefoons */
@media (max-width: 380px) {
  .bottom-nav-btn span {
    font-size: 9.5px;
  }
  .dashboard-command-actions {
    grid-template-columns: 1fr;
  }
}

/* De mobiele dropdown-sidebar (via "Meer") iets frisser */
@media (max-width: 820px) {
  .sidebar {
    border-radius: var(--r-radius-sm) !important;
  }
  .side-nav-button {
    border-radius: 12px;
  }
}