/* Solvexa POS theme — used by HospPOSLS.cshtml.
   Teal-accented palette designed for hospitality outlets.            */

:root {
  --tim-teal:        #0E7C8B;   /* primary ribbon / header */
  --tim-teal-2:      #19A6A1;   /* secondary action (Cancel, Tender) */
  --tim-teal-3:      #08607A;   /* darker teal for modal headers */
  --tim-red:         #D7202E;   /* Void / Hold / TOTAL / Logoff */
  --tim-green:       #2EB67D;   /* Logon / OK / Confirm */
  --tim-orange:      #E89B3B;   /* STAFF chip */
  --tim-olive:       #5C7B2E;   /* Beverages category */
  --tim-salmon:      #D67574;   /* Sandwich category */
  --tim-brown:       #8B6F47;   /* Baked Goods category */
  --tim-olive-2:     #6F8A3C;   /* Merchandise */
  --tim-blue-table:  #B8DCE5;   /* Available / fresh table */
  --tim-beige-table: #E2C99E;   /* Occupied table */
  --tim-grey-table:  #C9B89B;   /* Held table */
  --tim-text:        #1A1A1A;
  --tim-text-on-dark:#FFFFFF;
  --tim-text-dim:    #5A5A5A;
  --tim-bg:          #F5F6F7;
  --tim-bg-white:    #FFFFFF;
  --tim-border:      #D5D8DC;

  /* Layout sizes — populated from Store row at runtime. Fallback values
     match the LS / Tim-Hortons reference. Editable via /POS/Branding. */
  --ls-ribbon-h:     80px;
  --ls-right-w:      160px;
  --ls-status-h:     38px;
  --ls-logo-fs:      96px;
  --ls-logo-ff:      'Brush Script MT','Lucida Handwriting',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;width:100%;overflow:hidden;
  font-family:'Segoe UI','Roboto',system-ui,sans-serif;
  background:var(--tim-bg);color:var(--tim-text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
body{display:flex;flex-direction:column}

/* ─── Top ribbon (~11% of viewport height) ─────────────────────────── */
.ls-ribbon{
  height:var(--ls-ribbon-h);background:var(--tim-teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  font-weight:600;font-size:26px;letter-spacing:.01em;
}
.ls-ribbon .ls-title{flex:1;text-align:center}
.ls-staff-chip{
  position:absolute;top:50%;right:18px;transform:translateY(-50%);
  background:var(--tim-orange);color:#fff;
  padding:9px 20px;font-weight:700;font-size:13px;letter-spacing:.04em;
  border:1px solid rgba(0,0,0,.1);min-width:64px;text-align:center;
}
/* Back buttons on the top ribbon — each scoped to a single state so they
   only appear where they're useful. Cart screen → "← Tables"; map screen →
   "← Sales Type". Both share the same translucent-white pill style. */
.ls-back-btn{
  position:absolute;top:50%;left:18px;transform:translateY(-50%);
  background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:9px 18px;font-weight:700;font-size:14px;letter-spacing:.02em;
  cursor:pointer;border-radius:4px;display:none;
}
.ls-back-btn:hover{background:rgba(255,255,255,.30)}
body.state-pos .ls-back-tomap{display:inline-block}
body.state-map .ls-back-tosales{display:inline-block}

/* ─── Right rail (full-height vertical action column) ──────────────── */
.ls-shell{display:flex;flex-direction:column;height:100vh}
.ls-body{flex:1;display:flex;overflow:hidden}
.ls-main{flex:1;overflow:auto;background:var(--tim-bg)}
.ls-right{
  width:var(--ls-right-w);display:flex;flex-direction:column;flex-shrink:0;
  border-left:1px solid var(--tim-border);
}
.ls-right-btn{
  flex:1;border:none;cursor:pointer;font-size:22px;font-weight:600;
  color:#fff;text-align:center;padding:16px 8px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.18);
  line-height:1.18;
}
.ls-right-btn:last-child{border-bottom:none}
.ls-right-btn.green{background:var(--tim-green)}
.ls-right-btn.teal {background:var(--tim-teal-2)}
.ls-right-btn.red  {background:var(--tim-red)}
.ls-right-btn.grey {background:#C7CCD1;color:#1A1A1A}
.ls-right-btn:hover{filter:brightness(1.08)}
.ls-right-btn:disabled{opacity:.45;cursor:default}
.ls-right-arrow{font-size:14px;background:#E2E5E9;color:#1A1A1A;flex:0 0 24px}

/* ─── Bottom status bar ────────────────────────────────────────────── */
.ls-statusbar{
  height:var(--ls-status-h);background:#fff;border-top:1px solid var(--tim-border);
  display:flex;align-items:center;padding:0 14px;gap:24px;
  font-size:12px;flex-shrink:0;
}
.ls-statusbar .lsg{display:flex;flex-direction:column;line-height:1.15}
.ls-statusbar .lsg label{font-size:10px;color:var(--tim-text-dim);font-weight:600}
.ls-statusbar .lsg span{font-weight:600;color:var(--tim-text);font-size:12px}
.ls-statusbar .ls-grow{flex:1}

/* ─── State 1: Idle screen ─────────────────────────────────────────── */
.state-idle .ls-main{display:flex;align-items:center;justify-content:center}
.ls-logo{max-width:520px;width:55%;background:#fff;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ls-logo img{display:block;width:100%}
.ls-logo-fallback{
  font-family:var(--ls-logo-ff);
  color:#A8211A;font-size:var(--ls-logo-fs);line-height:1;text-align:center;
  background:#fff;padding:48px 72px;box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* ─── State 2: Staff login keypad ──────────────────────────────────── */
.ls-login{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:28px 24px;gap:14px;width:100%;
}
.ls-login-row{display:flex;align-items:center;gap:14px;width:520px;max-width:90%}
.ls-login-row label{font-size:15px;font-weight:500;color:var(--tim-text);width:96px;text-align:left}
.ls-login-input{
  flex:1;height:38px;font-size:16px;border:2px solid var(--tim-teal);
  background:#fff;color:var(--tim-text);outline:none;padding:0 40px 0 10px;
  position:relative;
}
.ls-login-input:focus{border-color:var(--tim-teal-3)}
.ls-kbd-icon{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:22px;background:#E8EBEF;border:1px solid #B5BBC1;border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#444;
}
.ls-kbd-wrap{position:relative;flex:1;display:flex;align-items:center}

.ls-pad{
  margin-top:8px;display:grid;grid-template-columns:repeat(3,60px) 88px;
  gap:5px;width:fit-content;
}
.ls-pad button{
  height:60px;font-size:20px;font-weight:500;background:#fff;
  border:1px solid var(--tim-border);cursor:pointer;color:var(--tim-text);
  transition:background .12s;
}
.ls-pad button:hover{background:#EEF2F4}
.ls-pad button.pad-grey{background:#EAEDF0;color:#7A7A7A}
.ls-pad .pad-ok{
  grid-row:1 / span 2;background:var(--tim-green);color:#fff;font-size:22px;font-weight:700;
  border:none;
}
.ls-pad .pad-cancel{
  grid-row:3 / span 2;background:var(--tim-teal-2);color:#fff;font-size:16px;font-weight:600;
  border:none;
}

/* ─── State 2b: Sales Type picker ──────────────────────────────────── */
/* Panel-driven layout: a 24-col × 14-row grid filling the main pane.
   Each InterfacePanel row (Context='salestype') is placed via inline
   grid-column/row + span styles. The grid containers inside each panel
   (e.g. salestype-cards) handle their own column counts via params. */
.state-salestype .ls-main{display:flex;flex-direction:column;overflow:hidden;padding:0;height:100%}
.ls-salestype-grid{
  flex:1;display:grid;
  grid-template-columns:repeat(24,1fr);
  grid-template-rows:repeat(14,1fr);
  min-height:0;
}
.ls-stpanel{overflow:hidden;min-height:0}
.ls-stpanel-title{padding:24px;font-size:22px;font-weight:700;color:#1A1A1A;text-align:center}
.ls-stpanel-banner{padding:18px;font-size:14px;color:#1A1A1A;text-align:center;background:#FFF8E1}
.ls-stgrid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:6px;padding:30px;height:100%;align-content:center;
}
.ls-stcard{
  cursor:pointer;color:#fff;border:none;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:48px 24px;font-size:22px;font-weight:700;
  letter-spacing:.02em;line-height:1.2;transition:filter .12s;
}
.ls-stcard:hover{filter:brightness(1.08)}
.ls-stcard .ico{font-size:62px;line-height:1}
.ls-stcard .desc{font-size:12px;color:rgba(255,255,255,.85);font-weight:400;text-transform:uppercase;letter-spacing:.06em}

/* ─── State 3: Table map ───────────────────────────────────────────── */
/* In map state the main pane is a flex column: a thin area-tab strip on
   top, the table grid filling the rest. Tabs are data-driven from the
   DiningArea table — admin adds a new area in /Hospitality/DiningSetup
   and a new tab appears here automatically. */
.state-map .ls-main{display:flex;flex-direction:column;overflow:hidden;padding:0;height:100%}
.ls-area-strip{
  flex-shrink:0;display:flex;gap:4px;padding:6px 6px 4px;background:var(--tim-bg);
  border-bottom:1px solid rgba(0,0,0,.07);overflow-x:auto;
}
.ls-area-strip::-webkit-scrollbar{height:4px}
.ls-area-strip::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:2px}
.ls-area-tab{
  background:#fff;color:#1A1A1A;border:1px solid var(--tim-border);
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:8px;border-radius:4px;
  white-space:nowrap;transition:all .12s;
}
.ls-area-tab:hover{background:#F0F5F6;border-color:var(--tim-teal-2)}
.ls-area-tab.sel{
  background:var(--tim-teal);color:#fff;border-color:var(--tim-teal-3);
}
.ls-area-tab .cnt{
  background:rgba(0,0,0,.10);color:inherit;padding:1px 7px;border-radius:10px;
  font-size:11px;font-weight:700;min-width:18px;text-align:center;
}
.ls-area-tab.sel .cnt{background:rgba(255,255,255,.25)}

.ls-tablegrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:3px;padding:3px;flex:1;min-height:0;align-content:stretch;
  grid-auto-rows:1fr;
}
.ls-table{
  position:relative;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:10px 14px;font-weight:500;color:#1A1A1A;font-size:14px;
  border:1px solid transparent;transition:filter .12s;
  min-height:0;
}
.ls-table:hover{filter:brightness(.94)}
.ls-table .ls-table-no{font-size:14px;font-weight:500;align-self:flex-end}
.ls-table .ls-table-tag{font-size:11px;color:#3a3a3a;align-self:flex-end}
.ls-table .ls-table-staff{align-self:flex-end;font-size:12px;color:#3a3a3a}
.ls-table.s-available{background:var(--tim-blue-table)}
.ls-table.s-occupied {background:var(--tim-beige-table)}
.ls-table.s-held     {background:var(--tim-grey-table)}
.ls-table.s-fresh    {background:var(--tim-blue-table)}

/* ─── State 4: Table tap modal ─────────────────────────────────────── */
.ls-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:none;align-items:center;justify-content:center;z-index:80;
}
.ls-modal-overlay.show{display:flex}
/* Tender + input modals can be opened on TOP of other modals (e.g. the
   Split-Bill modal opens tender for each part), so they need to sit above
   the base modal layer. */
#lsTenderOverlay,#lsInputOverlay{z-index:120}
.ls-tap-modal{
  width:520px;max-width:92vw;background:#fff;border:1px solid var(--tim-border);
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.ls-tap-head{background:var(--tim-teal-3);color:#fff;
  padding:28px 24px;font-size:20px;font-weight:600;text-align:center;
}
.ls-tap-mid{background:var(--tim-teal-2);height:120px}
.ls-tap-bot{background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background-color:var(--tim-border);
}
.ls-tap-bot button{
  padding:32px 0;background:#fff;border:none;cursor:pointer;
  font-size:18px;font-weight:600;color:#1A1A1A;
}
.ls-tap-bot button:hover{background:#F0F2F4}
.ls-tap-bot button.tap-prim{background:#fff;font-weight:700}
.ls-tap-bot button:only-child{grid-column:1 / -1}

/* ─── State 5 (panel-driven layout — 24-col × 14-row CSS grid) ─────── */
.state-pos .ls-main{padding:0;height:100%;overflow:hidden}
.ls-pos-grid{
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  grid-template-rows:repeat(14, 1fr);
  width:100%;height:100%;
  gap:6px;padding:6px;background:#E7EAED;
}
.ls-panel{overflow:hidden;background:#fff;display:flex;flex-direction:column}
.ls-panel-cafe-cart{background:#fff}
.ls-panel-cafe-ribbon{background:transparent;padding:0}
.ls-panel-cafe-items{background:transparent;padding:0}
.ls-panel-cafe-actions{background:transparent;padding:0}
.ls-panel-cart-inner{display:flex;flex-direction:column;height:100%}

/* The cart inner sections fill the panel */
.ls-panel-cafe-cart .cafe-lines{flex:1;overflow:auto}
.cafe-pos{display:grid;grid-template-columns:42% 58%;height:100%;background:#F5F6F7}
.cafe-cart{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--tim-border);overflow:hidden}
.cafe-brand{padding:14px 18px;border-bottom:1px solid var(--tim-border);min-height:60px;display:flex;align-items:center}
.cafe-brand-logo{display:flex;align-items:center;gap:12px}
.cafe-brand-logo img{display:block}
.cafe-itemno-row{position:relative;padding:10px 14px;border-bottom:1px solid var(--tim-border)}
.cafe-itemno{
  width:100%;height:36px;border:1px solid var(--tim-teal);background:#fff;padding:0 40px 0 12px;
  font-size:14px;outline:none;color:var(--tim-text);
}
.cafe-tableheader{
  padding:8px 14px;color:#3A3A3A;font-size:13px;border-bottom:1px solid var(--tim-border);
  background:#FAFBFC;
}
.cafe-tableheader-label{font-weight:600;color:#1A1A1A}
.cafe-cart-cols{
  display:grid;grid-template-columns:1fr 50px 80px 60px 80px;
  background:#D8E5E8;color:#1A1A1A;padding:10px 14px;font-weight:700;font-size:12px;
  border-bottom:1px solid var(--tim-border);
}
.cafe-cart-cols .ra{text-align:right}
.cafe-lines{flex:1;overflow:auto;padding:0}
.cafe-line{
  display:grid;grid-template-columns:1fr 50px 80px 60px 80px;
  padding:10px 14px;border-bottom:1px solid #EBEDF0;font-size:13px;cursor:pointer;color:#1A1A1A;
}
.cafe-line:hover{background:#F4F6F8}
.cafe-line.sel{background:#E1ECEE}
.cafe-line .ra{text-align:right}
.cafe-cart-scroll{display:flex;justify-content:center;gap:50px;padding:6px;border-top:1px solid var(--tim-border)}
.cafe-arrow{
  width:36px;height:36px;background:#fff;border:1px solid var(--tim-border);border-radius:4px;
  cursor:pointer;font-size:16px;color:#3A3A3A;
}
.cafe-arrow:hover{background:#F0F2F4}
.cafe-balance{
  display:grid;grid-template-columns:1fr auto;padding:14px 18px;background:#fff;border-top:1px solid var(--tim-border);
  align-items:baseline;gap:14px;
}
.cafe-balance .lbl{font-size:22px;font-weight:700;color:#1A1A1A}
.cafe-balance .val{font-size:22px;font-weight:700;color:#1A1A1A;text-align:right}

/* RIGHT side: ribbon (1 row) + items (~2 rows) + actions (~4 rows) */
.cafe-right{display:grid;grid-template-rows:auto auto 1fr;overflow:hidden;background:#F5F6F7;padding:8px;gap:8px}
.cafe-ribbon{
  /* Auto-fit so 5 / 7 / 12 categories all lay out cleanly without
     overlapping. Tabs stay readable down to ~110 px min-width; beyond
     that the row wraps to a second line rather than clipping. */
  display:grid;grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:6px;
}
.cafe-ribbon .pos-cat{
  background:#A8C5CC;color:#1A1A1A;border:none;cursor:pointer;
  font-size:13px;font-weight:700;padding:12px 6px;border-radius:0;
  position:relative;line-height:1.15;text-align:center;
  /* Truncate long category names with an ellipsis so they never spill
     into the adjacent tab. Full label is in the tooltip. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cafe-ribbon .pos-cat:hover{filter:brightness(.96)}
.cafe-ribbon .pos-cat.sel{outline:2px solid #fff;outline-offset:-2px}
.cafe-ribbon .pos-cat .arr{display:none}
.cafe-items{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.cafe-itemcell{
  background:#fff;border:1px solid var(--tim-border);cursor:pointer;
  padding:18px 8px;text-align:center;font-size:14px;font-weight:500;color:#1A1A1A;
  line-height:1.18;min-height:60px;
}
.cafe-itemcell:hover{background:#F0F2F4}
.cafe-itemcell.empty{background:transparent;border:none;cursor:default}
.cafe-itemcell.empty:hover{background:transparent}
.cafe-actions{align-self:end}


.pos-cart{display:flex;flex-direction:column;border-right:1px solid var(--tim-border);background:#fff}
.pos-itemno{padding:8px 8px 4px;display:flex;align-items:center;gap:6px}
.pos-itemno input{
  flex:1;height:38px;border:1px solid var(--tim-teal);background:#fff;padding:0 36px 0 10px;
  font-size:15px;outline:none;
}
.pos-itemno .pos-itemno-wrap{position:relative;flex:1;display:flex}
.pos-itemlookup{
  background:var(--tim-teal-2);color:#fff;border:none;cursor:pointer;
  padding:10px;height:54px;font-size:13px;font-weight:600;width:130px;
}
.pos-tableheader{
  padding:8px 12px;font-size:15px;color:var(--tim-text);font-weight:500;
  border-top:1px solid var(--tim-border);border-bottom:1px solid var(--tim-border);
}
.pos-cart-cols{
  display:grid;grid-template-columns:1fr 60px 80px;
  background:#D8E5E8;padding:8px 10px;font-weight:600;font-size:13px;
  border-bottom:1px solid var(--tim-border);
}
.pos-cart-cols .ra{text-align:right}
.pos-lines{flex:1;overflow:auto}
.pos-line{
  display:grid;grid-template-columns:1fr 60px 80px;
  padding:8px 10px;border-bottom:1px solid #EBEDF0;font-size:14px;cursor:pointer;
}
.pos-line:hover{background:#F4F6F8}
.pos-line.sel{background:#E1ECEE}
.pos-line .ra{text-align:right}

.pos-totals{
  border-top:2px solid var(--tim-border);background:#fff;padding:6px 12px;
  display:grid;grid-template-columns:1fr auto;row-gap:6px;column-gap:12px;font-size:14px;
}
.pos-totals .l{color:#3A3A3A}
.pos-totals .v{text-align:right;font-weight:600}

.pos-actions{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:64px;gap:1px;background:var(--tim-border);
  border-right:1px solid var(--tim-border);
}
.pos-actbtn{
  background:#fff;border:none;cursor:pointer;padding:8px;
  font-size:13px;font-weight:600;color:var(--tim-text);
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;
}
.pos-actbtn.red {background:var(--tim-red); color:#fff}
.pos-actbtn.teal{background:var(--tim-teal-2);color:#fff}
.pos-actbtn.big {grid-column:span 3;background:var(--tim-red);color:#fff;font-size:18px;font-weight:700}
.pos-actbtn.span2{grid-column:span 2}
.pos-actbtn:hover{filter:brightness(.96)}
.pos-actbtn .arr{position:absolute;top:4px;right:6px;font-size:10px;color:rgba(0,0,0,.55)}
.pos-actbtn{position:relative}

.pos-menu{display:flex;flex-direction:column;background:#fff;overflow:hidden}
.pos-cat-ribbon{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--tim-border);
  flex-shrink:0;
}
.pos-cat{
  cursor:pointer;padding:14px 6px;text-align:center;font-weight:700;
  font-size:14px;color:#fff;border:none;position:relative;line-height:1.15;
}
.pos-cat .arr{position:absolute;bottom:2px;right:6px;font-size:11px;color:rgba(255,255,255,.85)}
.pos-cat.beverages{background:var(--tim-olive)}
.pos-cat.sandwich {background:var(--tim-salmon)}
.pos-cat.bakedgoods{background:var(--tim-brown)}
.pos-cat.merchandise{background:var(--tim-olive-2)}
.pos-cat.ready    {background:var(--tim-teal-2)}
.pos-cat.combos   {background:var(--tim-teal-2)}
.pos-cat.lto      {background:var(--tim-teal-2)}

.pos-subcats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--tim-border);
  flex-shrink:0;
}
.pos-subcat{
  background:var(--tim-olive);color:#fff;font-weight:700;font-size:16px;
  padding:32px 6px;text-align:center;cursor:pointer;border:none;position:relative;
}
.pos-subcat.alt{background:var(--tim-olive-2)}
.pos-subcat .arr{position:absolute;bottom:2px;right:6px;font-size:11px;color:rgba(255,255,255,.85)}

.pos-items{
  flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--tim-border);
  overflow:auto;
}
.pos-itemcell{
  background:#fff;border:none;cursor:pointer;padding:18px 8px;text-align:center;
  font-size:14px;font-weight:500;color:var(--tim-text);line-height:1.2;position:relative;
  min-height:80px;display:flex;align-items:center;justify-content:center;
}
.pos-itemcell:hover{background:#F0F2F4}
.pos-itemcell .arr{position:absolute;bottom:2px;right:6px;font-size:11px;color:rgba(0,0,0,.4)}
.pos-itemcell.empty{background:var(--tim-teal-3);cursor:default}
.pos-itemcell.empty:hover{background:var(--tim-teal-3)}
.pos-next{
  background:var(--tim-teal-2);color:#fff;font-weight:700;font-size:20px;
  padding:18px;cursor:pointer;border:none;text-align:center;
}

/* ─── Bottom status bar variant for POS state ──────────────────────── */
.state-pos .ls-statusbar{
  height:42px;padding:0 16px;font-size:13px;gap:30px;
  background:#fff;color:var(--tim-text);
}
.state-pos .ls-statusbar .lsg{flex-direction:row;gap:6px;align-items:center}
.state-pos .ls-statusbar .lsg label{font-size:13px;color:var(--tim-text);font-weight:600}
.state-pos .ls-statusbar .lsg span{font-weight:500}

/* ─── Tender modal (Cash / Card / UPI + quick chips + pad) ────────── */
.ls-tender-modal{
  width:680px;max-width:94vw;background:#fff;border:1px solid var(--tim-border);
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.ls-tender-head{
  background:var(--tim-teal);color:#fff;padding:18px 22px;font-size:20px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
.ls-tender-head .tot{font-weight:700;font-size:26px}
.ls-tender-tabs{display:flex;background:#F0F2F4;border-bottom:1px solid var(--tim-border)}
.ls-tender-tab{
  flex:1;padding:18px;font-size:17px;font-weight:700;cursor:pointer;
  text-align:center;color:#1A1A1A;border:none;background:transparent;
}
.ls-tender-tab.active{background:#fff;color:var(--tim-teal);border-bottom:3px solid var(--tim-teal)}
.ls-tender-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.ls-tender-amt-row{display:flex;align-items:center;gap:10px}
.ls-tender-amt-row label{font-size:14px;color:#3A3A3A;font-weight:600;width:120px}
.ls-tender-amt-row input{
  flex:1;height:50px;font-size:22px;border:2px solid var(--tim-teal);background:#fff;
  padding:0 14px;text-align:right;outline:none;font-weight:600;color:#1A1A1A;
}
.ls-tender-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ls-tender-chip{
  padding:14px 0;background:#EEF2F4;border:1px solid var(--tim-border);
  font-size:18px;font-weight:600;cursor:pointer;color:#1A1A1A;
}
.ls-tender-chip:hover{background:#E0E6EA}
.ls-tender-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ls-tender-pad button{
  padding:14px 0;background:#F5F6F7;border:1px solid var(--tim-border);
  font-size:20px;font-weight:600;cursor:pointer;color:#1A1A1A;
}
.ls-tender-pad button.del{background:#F8E1E1;color:var(--tim-red)}
.ls-tender-foot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tim-border)}
.ls-tender-foot button{
  padding:18px;border:none;cursor:pointer;font-size:17px;font-weight:700;
}
.ls-tender-foot .cancel{background:#fff;color:#1A1A1A}
.ls-tender-foot .ok    {background:var(--tim-green);color:#fff}
.ls-tender-change{
  font-size:14px;color:#3A3A3A;text-align:right;padding-right:4px;font-weight:600;
}
.ls-tender-change .v{color:var(--tim-green);font-weight:700}
.ls-tender-change.neg .v{color:var(--tim-red)}

/* ─── Toast ────────────────────────────────────────────────────────── */
.ls-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(40px);
  background:rgba(20,30,40,.92);color:#fff;padding:12px 22px;
  font-size:14px;font-weight:500;opacity:0;transition:.2s;z-index:200;border-radius:2px;
}
.ls-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ls-toast.error{background:var(--tim-red)}
.ls-toast.ok{background:var(--tim-green)}