:root{
  --bg:#f6fbfb;
  --panel:#ffffff;
  --accent:#2aa198;
  --accent-2:#f39c12;
  --muted:#6b7280;
  --danger:#e05555;
  --glass: rgba(0,0,0,0.04);
}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}
body{margin:0;background:linear-gradient(180deg,var(--bg),#eef7f6);color:#122}
.im-app{width: min(1400px, 96%);margin:0 auto;padding:14px 14px 0}
.im-header{display:flex;align-items:center;justify-content:space-between;padding:12px 6px}
.im-header h1{margin:0;color:var(--accent)}
.im-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,0.96);backdrop-filter: blur(4px);}
.im-header h1{color:var(--accent);margin:0}
.im-actions button{margin-left:8px;padding:8px 12px;border-radius:6px;border:0;background:var(--panel);box-shadow:0 1px 2px var(--glass);cursor:pointer}
.im-actions button:hover{transform:translateY(-1px)}
.im-actions .danger{background:linear-gradient(90deg,#fff6f6,#ffecec);border:1px solid var(--danger);color:var(--danger)}
.im-main{display:flex;gap:18px}

/* Layout model: app is full-height, header sticky, main is flex and contains two independently scrollable panes.
  This prevents form content from overflowing the white panel on tablets. */
.im-app{height:100vh;display:flex;flex-direction:column}
.im-main{flex:1 1 auto;display:flex;gap:12px;min-height:0;overflow:visible;align-items:stretch}

/* Left list: fixed width, scrollable */
.im-list{flex:0 0 360px;max-height:none;border-radius:10px 0 0 10px;display:flex;flex-direction:column}
/* Make products list fill the left panel and let the UL scroll */
#products{flex:1 1 auto;overflow:auto;max-height:none;min-height:0}

/* Ensure product titles stay on one line */
.prod-title .main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right form: keep panel shape, make inner <form> the scrolling area so content doesn't escape rounded container */
.im-form{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:0 10px 10px 0}
.im-form #product-form{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:18px}

/* Prevent right form from becoming too narrow on medium viewports */
@media (min-width:1100px) and (max-width:1400px) {
  .im-list{flex:0 0 380px}
  .im-form{min-width:640px}
}

@media (min-width:901px) and (max-width:1099px) {
  .im-list{flex:0 0 320px}
  .im-form{min-width:520px}
}

@media (min-width:681px) and (max-width:900px) {
  /* Narrow tablets - allow slightly smaller form but keep readable */
  .im-list{flex:0 0 300px}
  .im-form{min-width:440px}
}
.im-form .tag-suggestion-chips{max-height:34vh;overflow:auto;padding-right:6px}

/* Ensure back button overlays the white panel if necessary */
.back-btn{z-index:10010}

/* Desktop: restore normal flow to use more horizontal space and avoid nested scrollbars */
@media (min-width:1281px) {
  /* Desktop: use full-viewport app so both panes can stretch equally.
     Hide body scrollbar and let panels scroll internally to avoid double scrollbars. */
  body { overflow: hidden; }
  .im-app{height:100vh}
  .im-main{min-height:0;overflow:visible;align-items:stretch}
  .im-list{flex:0 0 420px;max-height:none;overflow:hidden;display:flex;flex-direction:column;height:100%}
  #products{flex:1 1 auto;overflow:auto;min-height:0}
  .im-form{overflow:hidden;display:flex;flex-direction:column;height:100%}
  .im-form #product-form{overflow:auto}
}
.im-list{width:320px;background:var(--panel);padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(12,38,36,0.06)}
.im-list input{width:100%;padding:8px;border-radius:8px;border:1px solid var(--glass);margin-bottom:10px}
#products{list-style:none;padding:0;margin:0;max-height:64vh;overflow:auto}
#products li{padding:8px 10px;border-radius:8px;margin-bottom:6px;cursor:pointer;border:1px solid transparent;display:flex;align-items:center;justify-content:space-between}
#products li:hover{background:linear-gradient(90deg,#f7fffe,#f0fbfa)}
#products li.active{background:linear-gradient(90deg,#eaf9f8,#dff2f1);border-color:var(--accent)}
#products li .prod-line.inactive{opacity:0.6;color:#999}
.prod-line{display:flex;align-items:center;gap:12px}
.prod-title{display:block;flex:1;min-width:0}
.prod-title .main{font-weight:700;color:#0b3b38;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-title .sub{font-size:12px;color:var(--muted);margin-top:2px}
.prod-price{font-weight:700;padding:6px 10px;border-radius:8px;background:linear-gradient(180deg,#fff,#f7fffd);border:1px solid var(--glass);color:#0b3b38;min-width:56px;text-align:center}
.im-form{flex:1;background:var(--panel);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(12,38,36,0.04)}
.row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.row.small{align-items:center}
.row label{min-width:110px;color:var(--muted);font-size:14px}
.row input,.row select,.row textarea{flex:1;padding:8px;border-radius:8px;border:1px solid var(--glass);background:#fff}
.row textarea{resize:vertical}
.tag-panel{flex:1;display:flex;flex-direction:column;gap:8px}
.tag-input-row{display:flex;gap:8px}
.tag-input-row input{flex:1}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;min-height:76px;padding:6px 0;font-size:13px}
.tag-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;background:linear-gradient(180deg,#fff,#f7fffd);border:1px solid var(--glass);color:#0b3b38}
.tag-chip .tag-del{border:0;background:transparent;cursor:pointer;font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}
.tag-suggestions{display:flex;flex-direction:column;gap:6px}
.tag-suggestions-title{font-size:12px;font-weight:700;color:#0b3b38;text-transform:uppercase;letter-spacing:0.3px}
.tag-suggestions-info{font-size:12px;color:var(--muted)}
.tag-suggestion-chips{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.tag-suggestion-chips{max-height:260px;overflow:auto;padding-right:4px}
.tag-suggestion-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:16px;border:1px solid var(--glass);background:#eef7ff;color:#0b3b38;cursor:pointer;transition:transform 0.1s;}
.tag-suggestion-chip:hover{transform:translateY(-1px)}
.status{margin-top:10px;padding:8px;border-radius:8px;color:var(--muted);font-size:13px}
.im-actions button{background:linear-gradient(180deg,#fff,#f7fffd)}
@media (max-width:880px){
  .im-app{height:auto !important;}
  .im-main{flex-direction:column !important;gap:10px !important;align-items:stretch !important;overflow:hidden !important;max-height:none !important;}
  .im-list,.im-form{width:100% !important;flex:1 1 0 !important;min-width:0 !important;max-width:100% !important;min-height:40vh !important;overflow:auto !important;}
  #products{max-height:none !important;}
}

/* Tablet-specific: avoid bottom content being cut off on tablets (adjust padding/heights) */
@media (min-width:481px) and (max-width:1400px) {
  .im-app { padding-bottom: 80px !important; }
  .im-main { gap: 14px !important; }
  /* reduce product list max-height slightly to account for added bottom padding/ui chrome */
  #products { max-height: calc(64vh - 40px) !important; }
  /* Allow tag suggestion chips to show more rows on tablets */
  .tag-suggestion-chips { max-height: 360px !important; }
  /* Make right-side form controls 10% narrower on tablets */
  .im-form, .im-form .row > div { max-width: 90% !important; }
  .im-form .row input, .im-form .row select, .im-form .row textarea { max-width: 90% !important; }

  /* Further tablet tweaks to prevent clipping at 1024px */
  .im-list { width: 300px !important; }
  .im-form { padding: 12px !important; }
  .im-form .row { flex-wrap: wrap; }
  .im-form .row > div { flex: 1 1 0 !important; min-width: 0 !important; }
  .im-form .row label { min-width: 80px !important; margin-right: 6px !important; }
  .im-form .row input, .im-form .row select, .im-form .row textarea { padding: 6px !important; }
}

/* Strong overrides for narrower tablets (<=1024px) to counter inline widths */
@media (max-width:1024px) {
  html, body { height: 100% !important; overflow: hidden !important; }
  .im-app { margin: 0 auto !important; box-sizing: border-box !important; height:100vh !important; display:flex !important; flex-direction:column !important; }
  .im-main { gap: 10px !important; flex-direction: column !important; align-items: stretch !important; max-height: none !important; flex:1 1 auto !important; overflow:hidden !important; }
  /* Split the available height equally between the two panes (minus gaps) */
  .im-list, .im-form { width: 100% !important; flex: 1 1 0 !important; min-height: 45vh !important; max-height: none !important; overflow:auto !important; }
  /* keep widths identical and gutters stable even with scrollbars */
  .im-list, .im-form { box-sizing: border-box !important; max-width:100% !important; scrollbar-gutter: stable both-edges; }
  /* unify padding so they look same width */
  .im-form { padding: 12px !important; }
  /* Override inline fixed-width containers to allow wrapping */
  .im-form .row > div[style] { width: auto !important; }
  .im-form .row > div { flex: 1 1 45% !important; min-width: 0 !important; }
  .im-form .row { gap: 8px !important; }
  /* Ensure specific selects take available width */
  #order_unit, #charge_unit, select#vat, input#product_unit_price { width: 100% !important; }
  /* Make panels independently scrollable so content is never clipped */
  /* Let .im-app be visible and make main the constrained scroll area (viewport minus header) */
  .im-app { max-height: none !important; overflow: visible !important; }
  /* Allow normal document flow and body scrolling to show full content */
  .im-main { display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  .im-list { max-height: none !important; overflow: visible !important; flex: 0 0 280px !important; }
  .im-form { max-height: none !important; overflow: visible !important; flex: 1 1 auto !important; min-height: 0 !important; }
}

/* Strong tablet viewport layout: make app full-height and allow independent scrolling */
@media (max-width:1024px) {
  .im-app {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .im-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .im-list, .im-form {
    overflow: auto !important;
    max-height: none !important;
  }
  .im-list { flex: 1 1 0 !important; width:100% !important; min-height:40vh !important; }
  .im-form { flex: 1 1 0 !important; width:100% !important; min-height:40vh !important; }
}

/* Fix: ensure form flex children can shrink and selects fill their containers */
.im-form .row > div{min-width:0}
.im-form select, .im-form input, .im-form textarea{width:100%;box-sizing:border-box}
.im-form .row label{min-width:0}

/* Strong override for order/charge unit selects in case other rules win */
.im-form .row > div{flex:1 1 0}
#order_unit, #charge_unit{display:block;width:100% !important;min-width:0 !important}
.im-form select#order_unit, .im-form select#charge_unit{flex:1 1 0}

/* User request: make all form fields more readable with red outline */
/* red outline removed per user request */

/* Final override: enforce sensible left/right widths on medium and large viewports.
   Placed at the end to ensure these rules win over earlier declarations. */
@media (min-width:1000px) {
  .im-list{flex:0 0 42% !important;width:42% !important}
  .im-form{flex:1 1 58% !important;min-width:48% !important}
}

@media (min-width:1200px) {
  .im-app{width: calc(100% - 40px) !important; max-width: none !important}
  .im-list{flex:0 0 45% !important;width:45% !important}
  .im-form{flex:1 1 55% !important;min-width:50% !important}
}

/* Ensure flex children respect min-height/width and do not collapse */
.im-main, .im-list, .im-form, #products, #product-form { min-height: 0 !important; min-width: 0 !important }

/* Landscape tablets: force side-by-side layout even when width is small */
@media (max-width:1024px) and (orientation: landscape) {
  .im-app { height: 100vh !important; display:flex !important; flex-direction:column !important; }
  .im-main { flex-direction: row !important; align-items: stretch !important; gap: 10px !important; overflow:hidden !important; flex:1 1 auto !important; }
  .im-list { flex: 0 0 42% !important; max-width: 46% !important; min-width: 36% !important; height: auto !important; overflow:auto !important; }
  .im-form { flex: 1 1 58% !important; min-width: 50% !important; height: auto !important; overflow:auto !important; padding:12px !important; }
  #products { max-height: none !important; }
}