/* A11-196: Minimal, phone-first 3-column fueling worksheet. */
#equipment-fueling .fuel-simple-content{padding-top:16px}
#equipment-fueling #equipment-fueling-title{margin:8px 0 25px;text-align:center;font-size:clamp(24px,6.4vw,30px);line-height:1.3;font-weight:850;letter-spacing:-.9px}
#equipment-fueling .fuel-simple-wrap{max-width:640px;margin:auto}
#equipment-fueling .fuel-simple-table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
#equipment-fueling .fuel-col-equipment{width:37%}
#equipment-fueling .fuel-col-total{width:41%}
#equipment-fueling .fuel-col-used{width:22%}
#equipment-fueling .fuel-simple-table :is(th,td){border:1px solid #d2dce4;text-align:center;padding:0}
#equipment-fueling .fuel-simple-table th{height:44px;background:#edf3f7;color:#31495b;font-size:clamp(11px,3.2vw,14px);font-weight:850;letter-spacing:-.5px;white-space:nowrap}
#equipment-fueling .fuel-simple-table td{height:49px;background:white}
#equipment-fueling .fuel-simple-table input{display:block;width:100%;height:49px;margin:0;padding:0 4px;background:transparent;border:0;box-shadow:none;outline:0;border-radius:0;text-align:center;font-family:inherit;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;color:#203d51}
#equipment-fueling .fuel-simple-table input:focus{background:#ebf6ff;outline:2px solid #66a7df;outline-offset:-2px}
#equipment-fueling .fuel-simple-table .fuel-equipment{font-size:19px;font-weight:850;letter-spacing:-.35px;color:#F45424}
#equipment-fueling .fuel-simple-table .fuel-cumulative{font-size:15px;font-weight:550;color:#60788a}
#equipment-fueling .fuel-simple-table .fuel-amount{font-size:20px;font-weight:900;color:#126c4c;letter-spacing:-.4px;white-space:nowrap}
#equipment-fueling .fuel-simple-table .fuel-amount[data-invalid="true"]{background:#fff2ee;color:#bb5235;font-size:12px;font-weight:750;letter-spacing:0}
#equipment-fueling .fuel-simple-table .fuel-amount small{margin-left:2px;font-size:11px;font-weight:750}
#equipment-fueling .fuel-simple-add{width:100%;min-height:48px;margin-top:10px;border:1px solid #cbdbe5;border-radius:10px;background:#f3f8fb;color:#385c73;font-size:15px;font-family:inherit;font-weight:800;cursor:pointer}
#equipment-fueling .fuel-simple-add:active{background:#e6f1f7}
#equipment-fueling .fuel-simple-add:focus-visible{outline:2px solid #4e99de;outline-offset:2px}
@media(max-width:390px){
  #equipment-fueling .fuel-simple-content{padding-top:10px}
  #equipment-fueling #equipment-fueling-title{margin-bottom:19px}
  #equipment-fueling .fuel-simple-table th{height:42px}
  #equipment-fueling .fuel-simple-table td{height:46px}
  #equipment-fueling .fuel-simple-table input{height:46px}
  #equipment-fueling .fuel-simple-table .fuel-equipment{font-size:19px}
  #equipment-fueling .fuel-simple-table .fuel-cumulative{font-size:14px}
  #equipment-fueling .fuel-simple-table .fuel-amount{font-size:19px}
}

/* A11-195: reset next to the fueling page's Ramp Mini Tool back control. */
#equipment-fueling .fuel-simple-header{justify-content:space-between;gap:10px}
#equipment-fueling .fuel-simple-reset{flex:none;min-height:36px;min-width:66px;border:1px solid #d6dfe6;border-radius:9px;background:#fff;color:#536a79;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;padding:6px 12px}
#equipment-fueling .fuel-simple-reset:active{background:#f1f5f8}
#equipment-fueling .fuel-simple-reset:focus-visible{outline:2px solid #4e99de;outline-offset:2px}
/* Keep the narrow last header readable after reducing its width by ~one third. */
#equipment-fueling .fuel-simple-table th:nth-child(2){font-size:clamp(9px,2.6vw,13px)}

/* A11-195: shared R2 storage state, subtle and readable in the existing compact header. */
#equipment-fueling .fuel-sync-status{margin-left:auto;font-size:11px;font-weight:750;color:#617f92;white-space:nowrap;text-align:right;max-width:138px;line-height:1.4}
#equipment-fueling .fuel-sync-status[data-state="saving"]{color:#317db5}
#equipment-fueling .fuel-sync-status[data-state="error"]{color:#b9462d}
#equipment-fueling .fuel-sync-status[data-state="ready"]{color:#258263}
#equipment-fueling .fuel-simple-add:disabled,#equipment-fueling .fuel-simple-reset:disabled{opacity:.5;cursor:default}
#equipment-fueling .fuel-simple-table input:disabled{opacity:.55;background:#f4f7f9}
@media(max-width:390px){#equipment-fueling .fuel-sync-status{font-size:10px;max-width:98px}}

/* A11-196: compact, shared special-notes row, visually inside the same worksheet. */
#equipment-fueling .fuel-notes-row th{background:#f2f6f8;color:#304a5d;font-size:15px;font-weight:850;letter-spacing:-.25px;white-space:nowrap}
#equipment-fueling .fuel-notes-row td{height:auto;padding:0;text-align:left;vertical-align:middle}
#equipment-fueling .fuel-notes-row textarea{display:block;width:100%;min-height:38px;height:38px;resize:vertical;border:0;outline:0;box-sizing:border-box;background:#fff;color:#30485c;font-family:inherit;font-size:15px;font-weight:500;line-height:1.5;padding:7px 10px;border-radius:0;-webkit-appearance:none;appearance:none}
#equipment-fueling .fuel-notes-row textarea:focus{background:#fff9ed;outline:2px solid #e5aa52;outline-offset:-2px}
#equipment-fueling .fuel-notes-row textarea::placeholder{color:#9aabb5;font-weight:400}
/* Gentle red with white text; disabled state still clearly indicates saving. */
#equipment-fueling .fuel-simple-reset{background:#D96C76;border-color:#D96C76;color:#fff;box-shadow:0 2px 7px #bd596522}
#equipment-fueling .fuel-simple-reset:active{background:#C9515D;border-color:#C9515D}
#equipment-fueling .fuel-simple-reset:hover:not(:disabled){background:#CE5966;border-color:#CE5966}
#equipment-fueling .fuel-simple-content{padding-top:12px}
@media(max-width:390px){#equipment-fueling .fuel-notes-row th{font-size:14px}#equipment-fueling .fuel-notes-row textarea{font-size:14px;min-height:35px;height:35px}}

/* A11-197: single-line-height note row, retaining multiline text and shared autosave. */
#equipment-fueling .fuel-simple-table .fuel-notes-row th{height:38px;min-height:38px}
@media(max-width:390px){#equipment-fueling .fuel-simple-table .fuel-notes-row th{height:35px;min-height:35px}}

/* A11-198: Halve the width of the label cell ONLY on the notes row.
   Use an inner grid spanning the three table columns so the equipment input
   columns retain their 37 / 22 / 41 widths, without any side effects. */
#equipment-fueling .fuel-notes-row .fuel-notes-layout{
  display:grid;grid-template-columns:18.5% minmax(0,1fr);
  min-height:38px;width:100%;align-items:stretch;
}
#equipment-fueling .fuel-notes-row .fuel-notes-label{
  display:flex;align-items:center;justify-content:center;
  background:#f2f6f8;color:#304a5d;
  font-size:15px;font-weight:850;letter-spacing:-.25px;
  border-right:1px solid #d2dce4;white-space:nowrap;
}
#equipment-fueling .fuel-notes-row .fuel-notes-layout textarea{
  min-width:0;width:100%;
}
@media(max-width:390px){
  #equipment-fueling .fuel-notes-row .fuel-notes-layout{min-height:35px}
  #equipment-fueling .fuel-notes-row .fuel-notes-label{font-size:14px}
}

/* A11-199: Status reflects private device storage, not shared R2 storage. */

/* A11-225: keep long sample/equipment names readable on narrow phones. */
#equipment-fueling .fuel-simple-table .fuel-equipment.fuel-equipment-long{font-size:clamp(12px,3.4vw,15px);letter-spacing:-.55px}