/* Bar Calc — Responsive & Mobile */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0f0f0d; --card: #1a1c17; --card2: #22251d; --text: #f0ede5;
    --muted: #7a7d72; --border: #2e3028; --inp: #1e211a;
  }
}
@media(prefers-color-scheme:dark){
@media(max-width:600px){
  .hdr-acts{gap:4px;}
  .hbtn{width:36px;height:36px;font-size:16px;}
}
.hbtn-menu{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:1.5px solid var(--border);
  cursor:pointer;transition:all .18s;color:var(--muted);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.hbtn-menu:hover{ background:var(--card);border-color:var(--g);color:var(--text); }
.hbtn-menu:active{ transform:scale(.95); }
/* Main menu panel */
#mainMenuPanel{
  position:fixed;right:10px;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:18px;
  z-index:8000;
  width:min(240px,calc(100vw - 20px));
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  overflow:hidden;
  animation:fadeIn .15s ease;
}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;cursor:pointer;
  border:none;background:transparent;
  width:100%;text-align:left;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);transition:background .12s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.menu-item:hover{ background:var(--card2); }
.menu-item:active{ background:var(--card2);transform:scale(.98); }
.menu-item svg{ flex-shrink:0;color:var(--muted); }
.menu-item .menu-label{ flex:1; }
.menu-item .menu-badge{
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:6px;
  background:var(--card2);color:var(--muted);
}
.menu-divider{ height:1px;background:var(--border);margin:4px 0; }
.hbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--card2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .18s;color:var(--text);}
.hbtn:hover{border-color:#2d8c50;transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,140,80,0.15);}
.hbtn:active{transform:translateY(0);}
.hbtn-svg{color:var(--muted);}
.hbtn-svg:hover{color:#2d8c50;}
.hbtn:hover{border-color:var(--g);background:var(--gl);}

@media(max-width:400px){
  .fresh-ing-fields{grid-template-columns:1fr 1fr;}
}
.fresh-ing-field label{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;}

/* Yield info */
.fresh-ing-yield{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;background:rgba(42,140,63,0.07);border-radius:8px;
  font-size:11.5px;color:var(--muted);
}
.fresh-ing-yield b{color:var(--fresh-primary);font-family:'Fraunces',serif;font-size:13px;}
@media(max-width:400px){
  .capsate-metrics{grid-template-columns:1fr 1fr;}
}
.capsate-metric{
  background:var(--card2);
  border-radius:9px;
  padding:7px 8px;
  text-align:center;
}
.capsate-metric-lbl{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--muted);
  margin-bottom:3px;
}
.capsate-metric-val{
  font-family:'Fraunces',serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

/* Saved items */
.capsate-saved-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:7px;
  cursor:pointer;
  transition:all .2s;
}
.capsate-saved-item:hover{
  border-color:#5c35a8;
  transform:translateX(3px);
  background:rgba(92,53,168,0.05);
  box-shadow:0 3px 10px rgba(92,53,168,0.12);
}
.capsate-saved-name{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--text);}
.capsate-saved-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.capsate-saved-meta b{color:#5c35a8;}
@media (max-width: 440px){
  .coffee-ing-fields{
    grid-template-columns:1fr 1fr;
  }
  .coffee-ing-fields > div:last-child{grid-column:span 2;}
}
.coffee-ing-field label{
  display:block;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:3px;
}
.coffee-ing-cost{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  background:rgba(45,140,80,0.06);
  border-radius:9px;
  font-size:12px;
  color:var(--muted);
}
.coffee-ing-cost b{
  font-family:'Fraunces',serif;
  font-size:14px;
  font-weight:700;
  color:#2d8c50;
}
@media (max-width: 440px){
  .sj-hero, .cord-hero, .pb-hero, .cost-hero{
    padding: 1.25rem !important;
  }
  .sj-hero-title, .cord-hero-title, .pb-hero-title, .cost-hero-title{
    font-size: 22px !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   PREMIUM SAVE BUTTONS — adaptive per section
   Base class .save-btn + section modifiers:
   - .save-btn-cost      → emerald + gold (Cost section)
   - .save-btn-coffee    → emerald + warm amber (Coffee mode in Cost)
   - .save-btn-prebatch  → teal + coral (Pre-Batch section)
   ═══════════════════════════════════════════════════════════ */
.save-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 20px;
  margin:14px 0 6px 0;
  border:none;
  border-radius:14px;
  font-family:'Outfit',sans-serif;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:#fff;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s ease,
             filter .25s ease;
}
.save-btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
  transition:left .6s ease;
  pointer-events:none;
}
.save-btn:hover::before{left:100%;}
.save-btn:hover{transform:translateY(-2px);}
.save-btn:active{transform:translateY(0) scale(0.98);transition-duration:.1s;}

.save-btn svg{
  flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

@media(hover:none){
  .card:hover,.an-card:hover{transform:none;box-shadow:none;}
  .capsate-saved-item:hover{transform:none;}
  .card:active{transform:scale(.99);box-shadow:0 4px 16px rgba(0,0,0,.2);}
}

/* ============================================================
   MOBILE OPTIMIZATIONS v2.0 — Touch, Performance, UX
   ============================================================ */

/* ── Touch targets minime 44px (Apple HIG) ── */
button, .bnav-btn, .hbtn, .menu-item, .card[onclick],
.citrus-btn, .abv8-unit-btn, .save-btn, input[type="checkbox"],
input[type="radio"], select {
  min-height: 44px;
  touch-action: manipulation;
}

/* ── Scroll smooth pe toate containerele ── */
.sec, .modal-box, .hdr-acts, .bnav {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── Previne selecția accidentală la tap rapid ── */
.bnav-btn, .hbtn, .card-title, .slabel {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Active state pe mobile (înlocuiește :hover) ── */
@media (hover: none) {
  .bnav-btn:active {
    transform: scale(0.94) translateY(2px) !important;
    transition-duration: 0.08s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  }
  .hbtn:active {
    transform: scale(0.92) !important;
    opacity: 0.8;
  }
  .card:active {
    transform: scale(0.985) !important;
    transition: transform 0.08s ease;
  }
  .save-btn:active {
    transform: scale(0.96) !important;
  }
  /* Ripple effect pe butoane la tap */
  button:active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: inherit;
    animation: rippleFade 0.4s ease forwards;
  }
}

/* ── Keyboard avoidance — input focus pe mobile ── */
@media (max-width: 768px) {
  .inp-wrap input:focus,
  input:focus, textarea:focus, select:focus {
    position: relative;
    z-index: 10;
  }

  /* Header mai compact pe mobile */
  .app-hdr {
    padding: 0.7rem 0 0.4rem;
    gap: 6px;
  }

  /* Nav tabs mai mici pe telefoane mici */
  @media (max-width: 380px) {
    .bnav-btn {
      width: 62px;
      font-size: 9.5px;
      padding: 8px 2px 6px;
    }
    .bnav-btn .bni {
      font-size: 20px;
    }
  }

  /* Cards mai puțin padding pe mobile */
  .card {
    padding: 1rem;
    border-radius: 14px;
  }

  /* Modal full-screen pe mobile */
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }

  /* Toast mai mare pe mobile */
  .toast-msg {
    font-size: 14px !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* Input font minim 16px — previne zoom iOS */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Butoane full-width pe mobile în modals */
  .modal-box button[style*="width"] {
    min-width: 100px;
  }

  /* Tabela stoc — scroll orizontal */
  .stock-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Safe area pentru iPhone cu notch ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .bnav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Performance: GPU acceleration pe animații ── */
.bnav-btn, .card, .hbtn, .save-btn, .modal-box {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Reduce motion pentru utilizatori sensibili ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}