/* Bar Cost Studio — midnight service ledger */
:root{--bar-ink:#09090b;--bar-panel:#121116;--bar-line:#51414b;--bar-red:#ef5b67;--bar-amber:#f0b35e;--bar-paper:#f5eee6}
html,body{background:var(--bar-ink)!important}
body{background-image:linear-gradient(90deg,rgba(239,91,103,.045) 1px,transparent 1px)!important;background-size:52px 100%!important}
.bar-app{--panel:var(--bar-panel);--line:var(--bar-line);--muted:#b6a9b1;--cream:var(--bar-paper);--rose:var(--bar-red);--amber:var(--bar-amber);display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 34px;padding-top:28px!important}
.hero{grid-column:1/-1;margin:0 0 22px!important;padding:0 0 18px;border-bottom:1px solid var(--bar-line)}
.mark{width:54px!important;height:54px!important;border-radius:1px!important;transform:none!important;background:var(--bar-red)!important;border:0!important;color:#09090b!important;font-weight:900}.brand h1{font-size:clamp(1.9rem,4vw,3rem)!important;line-height:1.02!important}.brand small{text-transform:uppercase;letter-spacing:.11em;font-size:.7rem}
.tabs{grid-column:1;align-self:start;position:sticky!important;top:14px!important;display:flex!important;flex-direction:column;width:100%;gap:0!important;margin:0!important;padding:0!important;border:1px solid var(--bar-line)!important;border-radius:1px!important;background:#0e0d11!important}
.tab{justify-content:flex-start!important;min-height:53px!important;padding:0 15px!important;border-radius:0!important;border-bottom:1px solid #382f35!important;text-align:left!important;font-size:.82rem;letter-spacing:.02em}.tab:last-child{border-bottom:0!important}.tab.active{background:var(--bar-red)!important;color:#09090b!important;box-shadow:inset 5px 0 0 var(--bar-amber)}
.view{grid-column:2;min-width:0}.bar-app>footer{grid-column:1/-1}
.panel,.yield,.manager-note,.inventory-panel{border-radius:1px!important;box-shadow:none!important;background:#121116!important;background-image:none!important}.panel{border-top:3px solid var(--bar-red)!important;padding:clamp(27px,3.5vw,44px)!important}.ingredients-panel{margin-top:28px!important}
.heading{padding-bottom:20px;margin-bottom:30px!important;border-bottom:1px solid #382f35}.heading h2{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.01em;line-height:1.15}.heading p{color:var(--bar-red)!important}
input,select{border-radius:1px!important;background:#09090b!important}.primary,.ghost,.afc-btn,.afc-pill,.inventory-actions button{border-radius:1px!important;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem!important}.primary{background:var(--bar-paper)!important}
.results{gap:1px!important;margin-top:28px!important;background:var(--bar-line);border:1px solid var(--bar-line)}.results article,.quick-results article,.export-excel-card{border:0!important;border-radius:0!important;background:#121116!important}.results .featured{background:#251318!important;border-top:4px solid var(--bar-red)!important}.export-excel-card{border-top:4px solid var(--bar-amber)!important}
.manager-note{border-style:solid!important}.note-icon{border-radius:1px!important;background:var(--bar-red)!important}.yield{border-left:4px solid var(--bar-amber)!important}
.bank-row{border-top-color:#382f35}.inventory-row input{border-radius:1px!important}.inventory-category{font-family:inherit!important;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem!important;color:var(--bar-red)!important}
@media(max-width:820px){.bar-app{display:block}.tabs{position:sticky!important;display:flex!important;flex-direction:row;width:100%;overflow-x:auto;margin-bottom:18px!important}.tab{flex:0 0 auto;min-width:145px;text-align:center!important;justify-content:center!important;border-bottom:0!important;border-right:1px solid #382f35!important}.tab.active{box-shadow:inset 0 -4px 0 var(--bar-amber)}.view{width:100%}}
@media(max-width:650px){.hero{align-items:flex-start}.results{gap:8px!important;background:transparent;border:0}}

/* Phone controls: readable input text and tabs that fit the screen. */
@media (max-width: 700px) {
  .bar-app .tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; position: static !important; }
  .bar-app .tab { min-width: 0; min-height: 44px !important; white-space: normal; padding: 8px !important; }
  .bar-app .cocktail-grid, .bar-app .ingredient-row, .bar-app .bank-form,
  .bar-app .quick-grid, .bar-app .results, .bar-app .quick-results { grid-template-columns: minmax(0, 1fr); }
  .bar-app .pair { grid-template-columns: minmax(0, 1fr) 78px; }
  .bar-app .view *, .bar-app .brand > * { min-width: 0; }
  .bar-app input, .bar-app select { min-height: 44px; font-size: 16px; }
  .bar-app .panel { padding: 18px !important; }
  .bar-app .actions { flex-wrap: wrap; }
  .bar-app .actions button { min-height: 44px; }
  .bar-app .toolbar { flex-wrap: wrap; }
  .bar-app .bank-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-app .bank-row strong, .bar-app .results strong { overflow-wrap: anywhere; }
  .bar-app .remove { min-width: 44px; min-height: 44px; }
}