/* ════════════════════════════════════════════════════════════════════════════
   Broodboek — auth.css
   Aanvulling op styles.css: navigatie, schermen, componenten, responsive
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Navigatie ───────────────────────────────────────────────────────────── */
.main-nav { display: flex; gap: 4px; }

.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 7px 12px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--steen-grijs);
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-btn.active { background: var(--oven-bruin); color: var(--zout-wit); border-color: rgba(122,63,36,0.3); }
.nav-btn:not(.active):hover { background: var(--rogge); }

/* ── Topbar uitbreidingen ────────────────────────────────────────────────── */
.topbar { justify-content: space-between; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-email { font-size: 0.82rem; font-weight: 600; color: var(--steen-grijs); }

/* ── Tegel scherm ────────────────────────────────────────────────────────── */
.tile-screen {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--zout-wit); box-shadow: var(--schaduw); padding: 20px;
}

.tile-screen-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.tile-screen-header h2 { font-size: clamp(1.1rem, 3vw, 1.6rem); }

/* ── Filter knoppen ──────────────────────────────────────────────────────── */
.recipe-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.filter-btn {
  padding: 5px 12px; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--meel); color: var(--steen-grijs);
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.filter-btn.active { background: var(--oven-bruin); color: var(--zout-wit); border-color: var(--oven-bruin); }
.filter-btn:not(.active):hover { background: var(--rogge); }

/* ── Tegels ──────────────────────────────────────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.recipe-tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border: 1px solid var(--lijn);
  border-radius: var(--radius); background: #fbf4e8;
  min-width: 0;
}

.recipe-tile-body { display: grid; gap: 5px; min-width: 0; }
.recipe-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.recipe-tile-name { color: var(--oven-donker); font-size: 1rem; font-weight: 800; font-family: Fraunces, Georgia, serif; line-height: 1.2; }
.recipe-tile-badges { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
.recipe-tile-cat { color: var(--gist-groen); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.recipe-tile-meta { color: var(--steen-grijs); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.recipe-tile-desc { margin: 2px 0 0; color: var(--steen-grijs); font-size: 0.82rem; line-height: 1.4; }

.recipe-tile-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.recipe-tile-actions .tool-button { flex: 1; min-width: 0; justify-content: center; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800;
}
.badge svg { width: 10px; height: 10px; }
.badge-star { background: #fff0b8; color: #8a5d12; }
.badge-shared { background: rgba(122,63,36,0.1); color: var(--oven-bruin); }
.badge-own { background: rgba(111,127,77,0.12); color: var(--gist-groen); text-transform: uppercase; }
.badge-leavening { background: rgba(111,127,77,0.1); color: var(--gist-groen); font-size: 0.68rem; padding: 2px 6px; border-radius: 999px; font-weight: 800; }

.active-star { border-color: rgba(180,130,20,0.4); background: rgba(255,220,50,0.15); color: #8a6a10; }
.active-share { border-color: rgba(122,63,36,0.36); background: rgba(122,63,36,0.1); color: var(--oven-bruin); }

/* ── Werkbench scherm ────────────────────────────────────────────────────── */
.workbench-screen {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--zout-wit); box-shadow: var(--schaduw); overflow: hidden;
}

.workbench-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 14px 18px;
  border-bottom: 1px solid var(--lijn); background: var(--meel);
}
.workbench-title { margin: 0; font-size: clamp(1rem, 3vw, 1.5rem); color: var(--oven-donker); font-family: Fraunces, Georgia, serif; }
.workbench-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.workbench-body { padding: 16px; }

/* ── Meer opties dropdown ────────────────────────────────────────────────── */
.more-options { position: relative; }
.more-options summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 7px 12px;
  border: 1px solid var(--lijn); border-radius: 6px;
  background: #fbf4e8; color: var(--oven-donker);
  font: inherit; font-size: 0.82rem; font-weight: 800;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.more-options summary::-webkit-details-marker { display: none; }
.more-options-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  display: grid; gap: 4px; min-width: 210px; padding: 10px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--zout-wit); box-shadow: var(--schaduw);
}

/* ── Ingrediënten secties ────────────────────────────────────────────────── */
.ingredients-section { display: grid; gap: 20px; }
.ingredients-group {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 14px; background: var(--meel);
}
.ingredients-group-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px; font-size: 0.95rem; color: var(--oven-donker);
  font-family: Fraunces, Georgia, serif;
}
.pct-total {
  font-family: Inter, sans-serif; font-size: 0.78rem; font-weight: 900;
  padding: 2px 8px; border-radius: 999px;
}
.pct-ok { background: rgba(111,127,77,0.15); color: var(--gist-groen); }
.pct-under { background: rgba(200,160,40,0.15); color: #8a6a10; }
.pct-over { background: rgba(180,40,40,0.15); color: #8a1010; }
.pct-hint { font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--gist-groen); text-transform: uppercase; }

/* ── Bloem indicator ─────────────────────────────────────────────────────── */
.flour-total-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; font-family: Inter, sans-serif;
}
.flour-total-input {
  width: 80px; min-height: 28px; padding: 3px 8px;
  border: 1px solid rgba(122,63,36,0.22); border-radius: 6px;
  background: var(--zout-wit); color: var(--oven-donker);
  font: inherit; font-size: 0.88rem; font-weight: 700;
}
.flour-total-input:focus { outline: 0; border-color: rgba(122,63,36,0.68); box-shadow: 0 0 0 3px rgba(122,63,36,0.12); }
.flour-total-indicator > span:not(.pct-total) { font-size: 0.8rem; color: var(--steen-grijs); font-weight: 600; }

/* ── readonly velden ─────────────────────────────────────────────────────── */
input[readonly] { background: var(--meel) !important; color: var(--steen-grijs); cursor: default; }

/* ── Save message ────────────────────────────────────────────────────────── */
.save-message { min-height: 1.15em; margin: 0; color: var(--gist-groen); font-size: 0.84rem; font-weight: 900; }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.avatar-btn {
  padding: 0; border: 2px solid var(--lijn); border-radius: 999px;
  background: transparent; cursor: pointer; display: flex; align-items: center;
  flex-shrink: 0;
}
.avatar-btn:hover { border-color: var(--oven-bruin); }
.avatar-small, .avatar-tiny { border-radius: 999px; object-fit: cover; display: block; }
.avatar-small { width: 36px; height: 36px; font-size: 0.88rem; }
.avatar-tiny { width: 22px; height: 22px; font-size: 0.7rem; }
.avatar-large { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; display: block; font-size: 1.8rem; }
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--oven-bruin); color: var(--zout-wit); font-weight: 800;
}

/* ── Profielpagina ───────────────────────────────────────────────────────── */
.profile-form { display: grid; gap: 16px; max-width: 480px; }
.avatar-section { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-field { display: grid; gap: 6px; }
.profile-field span { color: var(--gist-groen); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.profile-field input {
  min-height: 42px; padding: 10px 12px;
  border: 1px solid rgba(122,63,36,0.22); border-radius: 6px;
  background: var(--meel); color: var(--oven-donker); font: inherit; font-size: 0.95rem;
}
.profile-field input:disabled { opacity: 0.6; cursor: not-allowed; }
.profile-field input:focus { outline: 0; border-color: rgba(122,63,36,0.68); box-shadow: 0 0 0 3px rgba(122,63,36,0.12); }

/* ── Bibliotheek ─────────────────────────────────────────────────────────── */
.tile-section { margin-bottom: 24px; }
.tile-section-title { margin: 0 0 10px; font-size: 0.85rem; color: var(--gist-groen); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.library-author { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--steen-grijs); font-size: 0.78rem; font-weight: 600; }

/* ── Auth scherm ─────────────────────────────────────────────────────────── */
.auth-shell { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.auth-card {
  width: min(480px, 100%); border: 1px solid var(--lijn);
  border-radius: var(--radius); background: var(--zout-wit);
  box-shadow: var(--schaduw); overflow: hidden;
}
.auth-brand { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--meel); border-bottom: 1px solid var(--lijn); }
.auth-form-wrap { padding: 24px; }
.auth-form-wrap h2 { margin-bottom: 18px; font-size: 1.4rem; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 5px; }
.auth-form label span { color: var(--gist-groen); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.auth-form input {
  width: 100%; min-height: 42px; padding: 10px 12px;
  border: 1px solid rgba(122,63,36,0.22); border-radius: 6px;
  background: var(--meel); color: var(--oven-donker); font: inherit; font-size: 0.95rem;
}
.auth-form input:focus { outline: 0; border-color: rgba(122,63,36,0.68); box-shadow: 0 0 0 3px rgba(122,63,36,0.12); }
.auth-submit { margin-top: 4px; min-height: 44px; font-size: 0.95rem; }
.auth-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 6px; background: #f4e1d6; color: var(--oven-bruin); font-size: 0.88rem; font-weight: 700; }
.auth-switch { margin: 16px 0 0; color: var(--steen-grijs); font-size: 0.88rem; }
.auth-link { padding: 0; border: 0; background: transparent; color: var(--oven-bruin); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ── Lege staat in tabel wrap ────────────────────────────────────────────── */
.table-wrap .empty-state {
  display: block;
  padding: 12px 0;
  text-align: left;
  font-style: normal;
  color: var(--steen-grijs);
  font-size: 0.86rem;
}
@media print {
  .topbar, .workbench-topbar, .tabbar,
  .more-options, #btn-logout, .topbar-user,
  [data-add-ingredient], [data-delete-ingredient],
  [data-dictate-target], .dictate-button { display: none !important; }
  .workbench-body { padding: 0 !important; }
  .metric-row { display: flex !important; gap: 20px; margin: 12px 0; }
  table { min-width: 0 !important; width: 100% !important; }
  input, textarea, select { border: none !important; background: transparent !important; padding: 0 !important; }
  .app-shell { width: 100% !important; padding: 0 !important; }
}

/* ── Mobiel: compacte app-layout ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  html, body, #root { overflow-x: hidden; max-width: 100vw; }

  .app-shell { width: 100% !important; padding: 0 0 20px !important; gap: 10px !important; }

  .topbar {
    position: sticky; top: 0; z-index: 100;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 9px 10px !important;
    border-radius: 0 !important; border-left: none !important; border-right: none !important;
  }
  .brand-lockup { gap: 9px; min-width: 0; }
  .brand-mark { width: 38px !important; }
  .topbar h1 { font-size: 1.18rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding-top: 2px;
  }
  .main-nav:has([data-go-back]) { grid-template-columns: 1fr; }
  .nav-btn {
    justify-content: center;
    min-height: 38px;
    padding: 7px 8px !important;
    font-size: 0.78rem !important;
    background: rgba(255,250,241,0.72);
    border-color: var(--lijn);
  }
  .topbar-user { grid-column: 2; grid-row: 1; gap: 6px; }
  .user-email { display: none; }
  #btn-logout { width: 38px; padding: 0 !important; font-size: 0; }
  #btn-logout svg { margin: 0; }
  .avatar-small { width: 34px; height: 34px; }

  .tile-screen,
  .workbench-screen {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
  .tile-screen { padding: 12px !important; }
  .tile-screen-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .tile-screen-header h2 { font-size: 1.18rem !important; }
  .tile-screen-header .tool-button { min-height: 38px; padding-inline: 10px; justify-self: end; }

  .recipe-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -12px 12px;
    padding: 0 12px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .recipe-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; min-height: 34px; }

  .tile-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .recipe-tile {
    gap: 10px;
    width: 100%;
    padding: 12px;
    overflow: hidden;
  }
  .recipe-tile-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .recipe-tile-badges { min-width: 0; flex-shrink: 1; justify-content: flex-start; }
  .recipe-tile-name { font-size: 1.05rem; }
  .recipe-tile-cat { font-size: 0.68rem; }
  .recipe-tile-meta, .recipe-tile-desc { font-size: 0.78rem; }
  .recipe-tile-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px 36px 36px !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .recipe-tile-actions .tool-button { min-width: 0; justify-content: center !important; }
  .recipe-tile-actions .icon-action { width: 36px; height: 36px; }

  .workbench-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px !important;
    gap: 8px;
  }
  .workbench-title { font-size: 1.16rem !important; overflow-wrap: anywhere; }
  .workbench-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .workbench-actions > .tool-button,
  .workbench-actions > .more-options > summary {
    width: 100%;
    min-height: 38px;
    padding-inline: 8px;
  }
  .workbench-actions .save-message { grid-column: 1 / -1; min-height: 0; font-size: 0.78rem; }
  .more-options { min-width: 0; }
  .more-options-list { right: 0; left: auto; min-width: min(230px, calc(100vw - 24px)); }
  .workbench-body { padding: 12px !important; }

  .recipe-header { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px; }
  .recipe-name-field input { font-size: 1.36rem !important; }
  .category-field > div { grid-template-columns: 1fr !important; gap: 8px; }
  .leavening-options { gap: 12px; }

  .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .metric-row > div { padding: 9px 8px !important; gap: 3px; min-width: 0; }
  .metric-row svg { width: 16px; height: 16px; }
  .metric-row span { font-size: 0.62rem !important; }
  .metric-row strong { font-size: 0.95rem !important; overflow-wrap: anywhere; }

  .tabbar {
    position: sticky; top: 94px; z-index: 80;
    margin: 12px -12px 12px;
    padding: 0 12px;
    overflow-x: auto;
    background: var(--zout-wit);
  }
  .tabbar button { flex: 1 0 auto; min-height: 42px; padding: 9px 12px; font-size: 0.84rem; }

  .ingredients-section { gap: 12px; }
  .ingredients-group { padding: 10px !important; overflow: hidden; }
  .ingredients-group-title { align-items: flex-start; gap: 6px; font-size: 0.95rem !important; }
  .flour-total-indicator { width: 100%; margin-left: 0 !important; gap: 5px; }
  .flour-total-input { width: 92px !important; }

  .table-wrap { overflow-x: hidden !important; }
  table, tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  thead { display: none !important; }
  tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.72fr) 38px !important;
    gap: 7px !important;
    align-items: end !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--lijn) !important;
    width: 100% !important;
  }
  tr:last-child { border-bottom: none !important; }
  td { display: block !important; padding: 0 !important; border: none !important; min-width: 0 !important; }
  tr td:first-child { grid-column: 1 / -1 !important; }
  tr td:nth-child(2) { grid-column: 1 / 2 !important; }
  tr td:nth-child(3) { grid-column: 2 / 3 !important; }
  tr td:last-child { grid-column: 3 / 4 !important; }
  tr td:nth-child(2)::before,
  tr td:nth-child(3)::before {
    display: block;
    margin: 0 0 3px 2px;
    color: var(--gist-groen);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
  }
  tr td:nth-child(2)::before { content: "Percentage"; }
  tr td:nth-child(3)::before { content: "Hoeveelheid"; }
  .material-input { width: 100% !important; min-height: 38px; font-size: 0.88rem; }
  .number-cell { min-width: 0 !important; width: 100% !important; min-height: 38px; padding: 4px 8px; }
  .number-cell input { font-size: 0.88rem; }
  .icon-action { width: 36px; height: 36px; }

  .note-form-wide { grid-template-columns: 1fr !important; }
  .note summary { grid-template-columns: auto auto auto minmax(0,1fr) !important; padding: 9px 10px; gap: 7px; }
  .note time { font-size: 0.76rem; }
  .note-body { grid-template-columns: 1fr !important; padding: 0 10px 10px; }
  .note-actions { display: flex; justify-content: space-between; align-items: center; }
}

@media (max-width: 600px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .brand-lockup { max-width: calc(100vw - 116px); }
  .topbar-user { max-width: 82px; overflow: hidden; }
  #btn-logout { flex: 0 0 38px; }

  .main-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .nav-btn {
    min-width: 0;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-btn svg { width: 15px; height: 15px; }

  .tile-screen-header {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }
  .tile-screen-header h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tile-screen-header [data-new-recipe] {
    width: 48px;
    min-width: 48px;
    padding: 0 !important;
    font-size: 0;
  }
  .tile-screen-header [data-new-recipe] svg {
    width: 20px;
    height: 20px;
  }

  .recipe-filters {
    max-width: 100vw;
  }
  .filter-btn {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }

  .recipe-tile-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .recipe-tile-actions .tool-button {
    grid-column: 1 / -1;
    min-height: 40px;
  }
  .recipe-tile-actions .icon-action {
    justify-self: stretch;
    width: 100% !important;
    border-radius: 8px;
  }
}


@media (max-width: 600px) {
  .topbar { padding: 8px 10px !important; gap: 7px 9px; }
  .brand-mark { width: 34px !important; }
  .topbar h1 { font-size: 1.05rem !important; }
  .avatar-small { width: 32px; height: 32px; }
  #btn-logout { width: 36px; flex-basis: 36px; }
  .nav-btn { min-height: 34px; padding: 6px 7px !important; font-size: 0.74rem !important; }

  .tile-screen { padding: 10px !important; }
  .tile-screen-header { margin-bottom: 10px; }
  .tile-screen-header h2 { font-size: 1.08rem !important; }
  .tile-screen-header [data-new-recipe] { width: 44px; min-width: 44px; min-height: 42px; }

  .recipe-filters { margin: 0 -10px 10px; padding: 0 10px 5px; }
  .filter-btn { min-height: 30px; padding: 4px 9px; font-size: 0.74rem; }

  .recipe-tile { padding: 10px; gap: 8px; }
  .recipe-tile-name { font-size: 0.98rem; }
  .recipe-tile-cat { font-size: 0.64rem; }
  .recipe-tile-meta { font-size: 0.74rem; }
  .recipe-tile-desc { font-size: 0.76rem; line-height: 1.35; }
  .badge { font-size: 0.62rem; padding: 2px 6px; }
  .recipe-tile-actions { gap: 6px !important; }
  .recipe-tile-actions .tool-button { min-height: 38px; }
  .recipe-tile-actions .icon-action { height: 38px; }
}

@media (max-width: 380px) {
  .workbench-actions { grid-template-columns: 1fr 1fr; }
  .metric-row { grid-template-columns: 1fr !important; }
  tr { grid-template-columns: minmax(0, 1fr) minmax(86px, 0.8fr) 36px !important; }
  .tool-button { font-size: 0.78rem; }
}