*{box-sizing:border-box}
:root{--ink:#1f2937;--muted:#667085;--line:#d8dde4;--panel:#fff;--bg:#f4f5f7;--brand:#315f8c;--dark:#111827;--gold:#d6bd99;--danger:#b42318;--good:#dff4df;--warn:#fff0bd;--yellow:#fff200}
html{background:var(--bg)}
body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink)}
header{background:#000;color:#fff;padding:10px 14px;display:flex;gap:12px;align-items:center;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.15)}
header img{width:58px;height:58px;object-fit:contain}
h1{font-size:19px;margin:0}header small{color:var(--gold)}
main{max-width:1080px;margin:auto;padding:12px}
.tabs,.tools,.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs{margin:10px 0}.tools{margin:10px 0}
button{border:0;border-radius:9px;padding:10px 12px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
button.secondary{background:#6b7280}.tab{background:#6b7280}.tab.on{background:#000}.danger{background:var(--danger)}.success{background:#167c3a}.ghost{background:#eef2f6;color:#243042;border:1px solid #d7dde5}.smallbtn{padding:6px 8px;border-radius:7px;font-size:12px}
button:disabled{opacity:.45;cursor:not-allowed}.panel{display:none}.panel.on{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:0 1px 2px rgba(16,24,40,.03)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.metrics4{grid-template-columns:repeat(4,1fr)}.metrics6{grid-template-columns:repeat(6,1fr)}.metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px}.metric.good{background:var(--good)}.metric.warn{background:var(--warn)}
.costmetric{background:#eef7ff}.current-osm{display:flex;justify-content:space-between;align-items:center;gap:15px}.current-osm .big{font-size:34px;font-weight:800;letter-spacing:-.5px}.current-osm.good{background:var(--good)}.current-osm.warn{background:var(--warn)}
.k{font-size:12px;color:var(--muted)}.v{font-size:23px;font-weight:780}.note{font-size:12px;color:var(--muted);line-height:1.45}.statusline{font-size:12px;color:var(--muted);margin-left:auto}
.scroll{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}table{width:100%;border-collapse:collapse;min-width:980px}th,td{padding:7px;border-bottom:1px solid var(--line);vertical-align:middle}th{background:#e3e5e8;text-align:left;font-size:12px;position:sticky;top:0;z-index:2}tr:last-child td{border-bottom:0}
input,select,textarea{width:100%;padding:9px;border:1px solid #cbd1d9;border-radius:8px;font-size:15px;background:#fff;color:#111827}input[type=number]{text-align:right}.calc{text-align:right;background:#f5f6f7}.total td{background:var(--yellow);font-weight:bold}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.searchbar{display:grid;grid-template-columns:minmax(180px,1fr) 170px 150px;gap:8px;margin:10px 0}
.savedrow{border:1px solid #ddd;border-radius:10px;padding:10px;margin:8px 0;display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff}.savedrow .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-block;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2f6;color:#344054}.badge.green{background:#e4f7e8;color:#146c2e}.badge.red{background:#fde8e8;color:#9b1c1c}.badge.gold{background:#fff6d8;color:#7d5f00}
.syncbox{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.authgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hr{height:1px;background:#e5e7eb;margin:12px 0}.hidden{display:none!important}
.warning{padding:9px;border-radius:9px;background:#fff4e5;border:1px solid #f3c678;color:#7a4b00;font-size:13px;margin:8px 0}.error{padding:9px;border-radius:9px;background:#fdecec;border:1px solid #f2b8b8;color:#8b1e1e;font-size:13px;margin:8px 0}.ok{padding:9px;border-radius:9px;background:#eaf8ee;border:1px solid #b8e0c3;color:#146c2e;font-size:13px;margin:8px 0}
.print-only{display:none}
@media(max-width:760px){main{padding:8px}.metrics,.metrics4,.metrics6,.two,.three,.authgrid{grid-template-columns:1fr}.searchbar{grid-template-columns:1fr}.current-osm{align-items:flex-start;flex-direction:column}.current-osm .big{font-size:30px}.tabs{position:sticky;top:78px;background:var(--bg);z-index:12;padding:6px 0}.tabs button{flex:1 1 44%;padding:11px 8px}.tools button{flex:1 1 auto}.savedrow{flex-direction:column;align-items:stretch}.savedrow .actions{justify-content:flex-start}.statusline{width:100%;margin-left:0}}
@media print{body{background:#fff}header,.tabs,.tools,.no-print,#library,#saved,#supplies,#backup,#sync{display:none!important}main{max-width:none;padding:0}#formula{display:block!important}.card,.metric{box-shadow:none;border:1px solid #bbb}.print-only{display:block}input,select{border:0;padding:0;background:transparent;appearance:none}.scroll{overflow:visible;border:0}table{min-width:0}.xcol{display:none}.current-osm{break-inside:avoid}}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.62);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100}.modalbox{background:#fff;border-radius:14px;max-width:1050px;width:min(1050px,96vw);max-height:88vh;overflow:auto;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.modalhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}.pricingtable{min-width:900px}.money{text-align:right}.currentpill{font-size:11px;font-weight:700;background:#e4f7e8;color:#146c2e;border-radius:999px;padding:4px 7px;display:inline-block}.costcard{background:#eef7ff}.costcard .big{color:#154f7d}

.supplymetric{background:#f5f0ff}.totalcostmetric{background:#e8f7ee}
.cost-summary{display:flex;justify-content:space-between;align-items:center;gap:15px}.cost-summary .big{font-size:30px;font-weight:800;color:#154f7d}
.total-cost-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#e8f7ee;border-color:#b9ddc6}
.total-cost-amount{font-size:38px;font-weight:850;color:#146c2e;white-space:nowrap}
.suppliestable{min-width:850px}.supplylibtable{min-width:980px}
@media(max-width:760px){.metrics6{grid-template-columns:1fr}.cost-summary,.total-cost-card{flex-direction:column;align-items:flex-start}.total-cost-amount{font-size:32px}}


/* V6.1.3 Ingredient Library readability */
#library .scroll table {
  table-layout: fixed;
  min-width: 1080px;
}
#library .scroll th:nth-child(1), #library .scroll td:nth-child(1) { width: 47%; }
#library .scroll th:nth-child(2), #library .scroll td:nth-child(2) { width: 10%; }
#library .scroll th:nth-child(3), #library .scroll td:nth-child(3) { width: 20%; }
#library .scroll th:nth-child(4), #library .scroll td:nth-child(4) { width: 10%; }
#library .scroll th:nth-child(5), #library .scroll td:nth-child(5) { width: 13%; }
#library .desc-cell { vertical-align: top; }
#library .ingredient-desc { width:100%; min-height:54px; resize:vertical; white-space:pre-wrap; overflow-wrap:anywhere; }



/* V6.2 — grouped categories, favorites, recents, searchable ingredient chooser */
.library-searchbar{grid-template-columns:minmax(240px,1fr) 190px 170px 150px}
.ingredient-library-table{min-width:1260px!important}
#library .ingredient-library-table th:nth-child(1),#library .ingredient-library-table td:nth-child(1){width:37%}
#library .ingredient-library-table th:nth-child(2),#library .ingredient-library-table td:nth-child(2){width:8%}
#library .ingredient-library-table th:nth-child(3),#library .ingredient-library-table td:nth-child(3){width:14%}
#library .ingredient-library-table th:nth-child(4),#library .ingredient-library-table td:nth-child(4){width:17%}
#library .ingredient-library-table th:nth-child(5),#library .ingredient-library-table td:nth-child(5){width:9%}
#library .ingredient-library-table th:nth-child(6),#library .ingredient-library-table td:nth-child(6){width:15%}
.category-row td{background:#eef2f6;font-weight:800;color:#344054;padding:8px 10px;border-top:2px solid #cfd6df}
.favorite-btn{background:#fff;color:#8a6b00;border:1px solid #d7dde5;padding:6px 9px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer}
.favorite-btn.on{background:#fff7cc;color:#9a7200;border-color:#e3c85c}
.favorite-btn.library-fav{font-size:16px;padding:5px 8px}
.chooserbox{max-width:850px}
.chooser-controls{display:grid;grid-template-columns:minmax(260px,1fr) 220px;gap:8px;margin:10px 0 14px}
.chooser-results{display:flex;flex-direction:column;gap:12px}
.chooser-section{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.chooser-section-title{background:#eef2f6;padding:8px 10px;font-weight:800;color:#344054;position:sticky;top:0}
.chooser-item{display:grid;grid-template-columns:46px 1fr;align-items:stretch;border-top:1px solid #edf0f3}
.chooser-item:first-of-type{border-top:0}
.chooser-item .favorite-btn{margin:7px;align-self:center}
.chooser-main{background:#fff;color:var(--ink);text-align:left;border-radius:0;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.chooser-main:hover{background:#f7f9fb}
.chooser-name{font-weight:750;font-size:15px}
.chooser-meta{font-size:12px;color:var(--muted);font-weight:500}
.chooser-empty{padding:18px;text-align:center}
@media(max-width:760px){
  .library-searchbar,.chooser-controls{grid-template-columns:1fr}
  .chooserbox{width:98vw}
}


/* V6.3 visual hierarchy */
#oc,
#currentOsmCard {
  background: #ffd8a8 !important;
  border-color: #f0a85a !important;
}

#oc.good, #oc.warn,
#currentOsmCard.good, #currentOsmCard.warn {
  background: #ffd8a8 !important;
  border-color: #f0a85a !important;
}

.totalcostmetric,
.total-cost-card {
  background: #dff4df !important;
  border-color: #a9d5ad !important;
}

.totalcostmetric .v,
.total-cost-amount {
  color: #1f6a35;
}

#stat {
  font-weight: 750;
  margin-top: 3px;
}

.print-cost-summary {
  background: #f7f8fa;
}

.print-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.print-cost-grid > div {
  border: 1px solid #d8dde4;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.print-cost-grid .print-total {
  background: #dff4df;
  border-color: #a9d5ad;
}

@media(max-width:650px){
  .print-cost-grid { grid-template-columns: 1fr; }
}


/* V6.3.1 — fit the full Ingredient Library through Actions on desktop */
#library .ingredient-library-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

#library .ingredient-library-table th:nth-child(1),
#library .ingredient-library-table td:nth-child(1) { width: 31%; }

#library .ingredient-library-table th:nth-child(2),
#library .ingredient-library-table td:nth-child(2) { width: 8%; }

#library .ingredient-library-table th:nth-child(3),
#library .ingredient-library-table td:nth-child(3) { width: 14%; }

#library .ingredient-library-table th:nth-child(4),
#library .ingredient-library-table td:nth-child(4) { width: 17%; }

#library .ingredient-library-table th:nth-child(5),
#library .ingredient-library-table td:nth-child(5) { width: 10%; }

#library .ingredient-library-table th:nth-child(6),
#library .ingredient-library-table td:nth-child(6) { width: 20%; }

#library .ingredient-desc {
  min-height: 50px;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  resize: vertical;
}

#library .ingredient-library-table th,
#library .ingredient-library-table td {
  padding-left: 6px;
  padding-right: 6px;
}

#library .ingredient-library-table td:last-child .inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#library .ingredient-library-table td:last-child .smallbtn {
  padding-left: 7px;
  padding-right: 7px;
  white-space: nowrap;
}

/* On genuinely small displays, preserve usability with horizontal scrolling. */
@media(max-width:900px){
  #library .ingredient-library-table {
    min-width: 980px !important;
  }
}

/* V6.3.2 — formula volume selector + mobile table usability */
#formula .scroll table{table-layout:fixed;min-width:1060px}
#formula .scroll th:nth-child(1),#formula .scroll td:nth-child(1){width:31%}
#formula .scroll th:nth-child(2),#formula .scroll td:nth-child(2){width:14%}
#formula .scroll th:nth-child(3),#formula .scroll td:nth-child(3){width:9%}
#formula .scroll th:nth-child(4),#formula .scroll td:nth-child(4){width:18%}
#formula .scroll th:nth-child(5),#formula .scroll td:nth-child(5){width:8%}
#formula .scroll th:nth-child(6),#formula .scroll td:nth-child(6){width:9%}
#formula .scroll th:nth-child(7),#formula .scroll td:nth-child(7){width:8%}
#formula .scroll th:nth-child(8),#formula .scroll td:nth-child(8){width:3%}
.volume-control{display:grid;gap:6px;min-width:0}
.volume-control select,.volume-control input{min-width:0}
@media(max-width:760px){
  #formula .card{padding:10px}
  #formula .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #formula .scroll table{min-width:860px}
  #formula .scroll th,#formula .scroll td{padding:6px}
  #formula .scroll th:nth-child(1),#formula .scroll td:nth-child(1){width:30%}
  #formula .scroll th:nth-child(2),#formula .scroll td:nth-child(2){width:16%}
  #formula .scroll th:nth-child(3),#formula .scroll td:nth-child(3){width:9%}
  #formula .scroll th:nth-child(4),#formula .scroll td:nth-child(4){width:17%}
  #formula .scroll th:nth-child(5),#formula .scroll td:nth-child(5){width:8%}
  #formula .scroll th:nth-child(6),#formula .scroll td:nth-child(6){width:9%}
  #formula .scroll th:nth-child(7),#formula .scroll td:nth-child(7){width:8%}
  #formula .scroll th:nth-child(8),#formula .scroll td:nth-child(8){width:3%}
  #formula .scroll select,#formula .scroll input{font-size:16px;padding:8px}
}

/* V6.3.3 — mobile app polish */
.mobile-label,.mobile-more-wrap,.mobile-add-ingredient,.mobile-live-bar{display:none}

/* Respect iPhone/Android display cutouts and standalone-app safe areas. */
.app-header{
  padding-top:max(10px, env(safe-area-inset-top));
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
}

@media(max-width:760px){
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .app-header{
    position:sticky;
    top:0;
    min-height:78px;
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-bottom:10px;
    gap:10px;
  }
  .app-header img{width:50px;height:50px;flex:0 0 50px}
  .app-header h1{font-size:17px;line-height:1.15}
  .app-header small{font-size:12px;line-height:1.2;display:block;margin-top:3px}

  /* Compact app navigation: three primary destinations plus a More menu. */
  .tabs{
    top:calc(78px + env(safe-area-inset-top));
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    padding:7px 0;
    margin:4px 0 8px;
    overflow:visible;
  }
  .tabs .mobile-secondary{display:none}
  .tabs .mobile-primary{display:block;min-width:0;padding:10px 5px;font-size:13px}
  .desktop-label{display:none}
  .mobile-label{display:inline}
  .mobile-more-wrap{display:block;position:relative;min-width:0}
  .mobile-more-btn{width:100%;height:100%;background:#6b7280;padding:10px 5px;font-size:13px}
  .mobile-more-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    width:min(210px,80vw);
    z-index:40;
    padding:7px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 12px 30px rgba(15,23,42,.2);
  }
  .mobile-more-menu button{display:block;width:100%;text-align:left;margin:3px 0;background:#6b7280;padding:11px 12px}
  .mobile-more-btn.on{background:#000}

  /* On phones, start with the actual formula workflow rather than summary cards. */
  #formula{display:none}
  #formula.on{display:flex;flex-direction:column}
  #formula>.metrics6{display:none}
  #formula>.formula-builder{order:1}
  #formula>#currentOsmCard{order:2}
  #formula>.card:not(.formula-builder):not(#currentOsmCard):not(.costcard):not(.total-cost-card):not(.print-only){order:3}
  #formula>.costcard{order:4}
  #formula>.total-cost-card{order:5}
  #formula>.print-only{order:6}
  #formula{padding-bottom:20px}

  .formula-builder{display:flex;flex-direction:column}
  .formula-builder>.formula-basics{order:1}
  .formula-builder>.mobile-add-ingredient{order:2}
  .formula-builder>#formulaWarnings{order:3}
  .formula-builder>.scroll{order:4}
  .formula-builder>.formula-tools{order:5}
  .mobile-add-ingredient{display:block;margin:12px 0 10px}
  .mobile-add-ingredient button{
    width:100%;
    min-height:54px;
    border-radius:12px;
    font-size:17px;
    background:#24679d;
    box-shadow:0 3px 9px rgba(49,95,140,.24);
  }
  .desktop-add-ingredient{display:none}
  .formula-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .formula-tools button{width:100%;min-height:46px}
  .formula-tools .statusline{grid-column:1/-1}

  /* Live formula result remains visible while scrolling through ingredients/supplies. */
  .mobile-live-bar{
    display:grid;
    grid-template-columns:.8fr 1.35fr 1fr;
    gap:6px;
    position:fixed;
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:60;
    padding:8px;
    border:1px solid #c8d0da;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 26px rgba(15,23,42,.20);
    backdrop-filter:blur(12px);
  }
  .mobile-live-bar>div{min-width:0;padding:3px 5px;border-right:1px solid #e5e7eb}
  .mobile-live-bar>div:last-child{border-right:0}
  .mobile-live-bar .live-label{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .mobile-live-bar strong{display:block;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Current osmolarity stays compact because the sticky bar already repeats the value. */
  #currentOsmCard{padding:12px}
  #currentOsmCard .big{font-size:28px}

  /* Emphasize the same interaction pattern for supplies. */
  #addSupplyBtn{width:100%;min-height:50px;font-size:16px}
}

@media(max-width:430px){
  .app-header h1{font-size:16px}
  .app-header small{font-size:11px}
  .tabs .mobile-primary,.mobile-more-btn{font-size:12px;padding-left:3px;padding-right:3px}
  .mobile-live-bar strong{font-size:12px}
}

/* Clinic Sync password management */
.password-card{margin-top:16px;background:#f8fafc}
.password-card .authgrid{margin-top:10px}
.password-card #passwordChangeMessage:empty{display:none}

/* Version 6.3.4: screen-only version and direct-entry pricing */
.app-version{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:700;color:#e5e7eb;border:1px solid #64748b;border-radius:8px;padding:5px 8px}
.pricingtable input[data-p="containerCost"],.pricingtable input[data-p="containerMl"],.pricingtable input[data-p="pricePerMl"]{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:760px){.app-version{font-size:10px;padding:3px 5px}}

/* Compact paper summary; no clipping, horizontal bars or blank trailing sheet. */
@page{size:auto;margin:9mm 10mm}
@media print{
 html,body{background:white!important;font-size:9pt!important;line-height:1.2!important}
 .app-version,.no-print,.mobile-live-bar{display:none!important}
 main{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
 #formula{display:block!important;width:100%!important}
 #formula .metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;margin-bottom:5px!important}
 #formula .metric{padding:4px 6px!important;border-radius:3px!important}
 #formula .metric .k{font-size:7pt!important}
 #formula .metric .v{font-size:11pt!important}
 #formula .card{padding:6px 8px!important;margin:0 0 5px!important;border-radius:4px!important;box-shadow:none!important;break-inside:auto!important}
 #formula .card b{font-size:9pt!important}
 #formula .note{font-size:7.3pt!important;line-height:1.2!important;margin:1px 0!important}
 #formula .scroll{width:100%!important;overflow:visible!important;border:0!important}
 #formula table{min-width:0!important;width:100%!important;table-layout:fixed!important;font-size:7.5pt!important}
 #formula th,#formula td{padding:2px 3px!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.2!important}
 #formula th{position:static!important;font-size:7pt!important}
 #formula input,#formula select{padding:0!important;margin:0!important;min-height:0!important;font-size:7.5pt!important;width:100%!important;border:0!important}
 #formula .formula-basics{grid-template-columns:1fr 1fr!important;gap:6px!important}
 #formula .formula-basics input{font-size:9pt!important}
 #formula .current-osm{display:flex!important;flex-direction:row!important;align-items:center!important;padding:4px 8px!important;break-inside:avoid!important}
 #formula .current-osm .big{font-size:16pt!important}
 #formula .cost-summary,#formula .total-cost-card{flex-direction:row!important;align-items:center!important;gap:6px!important}
 #formula .cost-summary .big,#formula .total-cost-amount{font-size:15pt!important}
 #formula .print-cost-grid{gap:4px!important}
 #formula .print-cost-grid>div{padding:4px!important}
 #formula .print-cost-grid strong{font-size:10pt!important}
 #formula .suppliestable th:nth-child(1),#formula .suppliestable td:nth-child(1){width:31%!important}
 #formula .suppliestable th:nth-child(2),#formula .suppliestable td:nth-child(2){width:8%!important}
 #formula .suppliestable th:nth-child(3),#formula .suppliestable td:nth-child(3){width:10%!important}
 #formula .suppliestable th:nth-child(4),#formula .suppliestable td:nth-child(4){width:19%!important}
 #formula .suppliestable th:nth-child(5),#formula .suppliestable td:nth-child(5){width:15%!important}
 #formula .suppliestable th:nth-child(6),#formula .suppliestable td:nth-child(6){width:17%!important}
 #formula .print-only:last-of-type{break-inside:avoid!important}
}