*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ═══════════════════════════════════════════════════════
   THEMES — all colors use CSS variables only
   ═══════════════════════════════════════════════════════ */

/* DEFAULT: Legacy (Windows XP / Visual Basic) */
:root{
  --red:#0055ea;
  --red2:#0044cc;
  --red3:#0033aa;
  --bg-win:#0055ea;
  --bg-sidebar:#d4d0c8;
  --bg-app:#c8c4bc;
  --bg-topbar:#0055ea;
  --bg-toolbar:#d4d0c8;
  --bg-tabs:#bdb9b1;
  --bg-thead:#c0bdb5;
  --bg-row-even:#ffffff;
  --bg-row-odd:#f0f0f0;
  --bg-input:#ffffff;
  --bg-hover:#dde8ff;
  --bg-sel:#ffd0d0;
  --bg-card:#e8e4dc;
  --bg-scrollbar:#c0bdb5;
  --text-white:#ffffff;
  --text-light:#000000;
  --text-mid:#333333;
  --text-dim:#666666;
  --text-thead:#222222;
  --text-td:#111111;
  --text-td1:#000000;
  --text-sel:#0055ea;
  --text-sel1:#0055ea;
  --bg-sel:#bcd0f1;
  --border0:#888880;
  --border1:#a8a49c;
  --border2:#b8b4ac;
  --ap-grid-separator:#84817a;
  --shadow-accent:rgba(0,85,234,0.2);
  --shadow-red:rgba(0,85,234,0.2);
  --sidebar-w:214px;
  --sidebar-col:58px;
}

/* Dark Red — Dracula */
[data-theme="dark-red"]{
  --red:#c0392b;--red2:#a93226;--red3:#7b241c;
  --bg-win:#0d0d0d;--bg-sidebar:#1e1e1e;--bg-app:#191919;
  --bg-topbar:#1e1e1e;--bg-toolbar:#1a1a1a;--bg-tabs:#161616;
  --bg-thead:#141414;--bg-row-even:#1c1c1c;--bg-row-odd:#191919;
  --bg-input:#1c1c1c;--bg-hover:#252525;--bg-sel:#1f0c0c;
  --bg-card:#1e1e1e;--bg-scrollbar:#111;
  --text-white:#f2f2f2;--text-light:#e8e8e8;--text-mid:#b0b0b0;
  --text-dim:#808080;--text-thead:#c0c0c0;--text-td:#d8d8d8;
  --text-td1:#d8d8d8;--text-sel:#cc9090;--text-sel1:#e88080;
  --border0:#080808;--border1:#252525;--border2:#2e2e2e;
  --ap-grid-separator:#4e4e4e;
  --shadow-accent:rgba(192,57,43,0.2);--shadow-red:rgba(192,57,43,0.3);
}

/* Dark Blue — Nebula */
[data-theme="dark-blue"]{
  --red:#1a6bb5;--red2:#155da0;--red3:#0e3f72;
  --bg-win:#0a0c10;--bg-sidebar:#111827;--bg-app:#0f172a;
  --bg-topbar:#111827;--bg-toolbar:#0f172a;--bg-tabs:#0a0f1e;
  --bg-thead:#090e1c;--bg-row-even:#111827;--bg-row-odd:#0f172a;
  --bg-input:#111827;--bg-hover:#1e2a3a;--bg-sel:#0a1428;
  --bg-card:#111827;--bg-scrollbar:#060810;
  --text-white:#f2f2f2;--text-light:#e8e8e8;--text-mid:#b0b0b0;
  --text-dim:#808080;--text-thead:#c0c0c0;--text-td:#d8d8d8;
  --text-td1:#d8d8d8;--text-sel:#90a8cc;--text-sel1:#a0b8e8;
  --border0:#060810;--border1:#1e2a3a;--border2:#243044;
  --ap-grid-separator:#3f5065;
  --shadow-accent:rgba(26,107,181,0.2);--shadow-red:rgba(26,107,181,0.3);
}

/* Dark Green — Verdant Night */
[data-theme="dark-green"]{
  --red:#1a7a4a;--red2:#156b3e;--red3:#0e4a2a;
  --bg-win:#080e0a;--bg-sidebar:#0f1f14;--bg-app:#0d1a11;
  --bg-topbar:#0f1f14;--bg-toolbar:#0d1a11;--bg-tabs:#0a1510;
  --bg-thead:#08120d;--bg-row-even:#0f1f14;--bg-row-odd:#0d1a11;
  --bg-input:#0f1f14;--bg-hover:#1a2e1e;--bg-sel:#0a1a0e;
  --bg-card:#0f1f14;--bg-scrollbar:#040a06;
  --text-white:#f2f2f2;--text-light:#e8e8e8;--text-mid:#b0b0b0;
  --text-dim:#808080;--text-thead:#c0c0c0;--text-td:#d8d8d8;
  --text-td1:#d8d8d8;--text-sel:#90cc9a;--text-sel1:#a0e8aa;
  --border0:#040a06;--border1:#1a2e1e;--border2:#203826;
  --ap-grid-separator:#3d5744;
  --shadow-accent:rgba(26,122,74,0.2);--shadow-red:rgba(26,122,74,0.3);
}

/* Dark Purple — Arise */
[data-theme="dark-purple"]{
  --red:#6b3fa0;--red2:#5c358a;--red3:#3e2460;
  --bg-win:#0a080e;--bg-sidebar:#16101f;--bg-app:#120e1c;
  --bg-topbar:#16101f;--bg-toolbar:#120e1c;--bg-tabs:#0e0a18;
  --bg-thead:#0c0816;--bg-row-even:#16101f;--bg-row-odd:#120e1c;
  --bg-input:#16101f;--bg-hover:#241a34;--bg-sel:#180e28;
  --bg-card:#16101f;--bg-scrollbar:#060408;
  --text-white:#f2f2f2;--text-light:#e8e8e8;--text-mid:#b0b0b0;
  --text-dim:#808080;--text-thead:#c0c0c0;--text-td:#d8d8d8;
  --text-td1:#d8d8d8;--text-sel:#b090cc;--text-sel1:#c8a0e8;
  --border0:#060408;--border1:#241a34;--border2:#2c2040;
  --ap-grid-separator:#544668;
  --shadow-accent:rgba(107,63,160,0.2);--shadow-red:rgba(107,63,160,0.3);
}

/* Light Red — Crimson Rose */
[data-theme="light-red"]{
  --red:#c0392b;--red2:#a93226;--red3:#7b241c;
  --bg-win:#ffffff;--bg-sidebar:#fff5f5;--bg-app:#fafafa;
  --bg-topbar:#ffffff;--bg-toolbar:#fff0f0;--bg-tabs:#ffe8e8;
  --bg-thead:#fde8e8;--bg-row-even:#ffffff;--bg-row-odd:#fff8f8;
  --bg-input:#ffffff;--bg-hover:#fde8e8;--bg-sel:#ffd0d0;
  --bg-card:#fff0f0;--bg-scrollbar:#f5d0d0;
  --text-white:#ffffff;--text-light:#1a0a0a;--text-mid:#5a2020;
  --text-dim:#a06060;--text-thead:#3a1010;--text-td:#2a1010;
  --text-td1:#1a0808;--text-sel:#c0392b;--text-sel1:#e74c3c;
  --border0:#f0c0c0;--border1:#f5d0d0;--border2:#fadddd;
  --ap-grid-separator:#cc9696;
  --shadow-accent:rgba(192,57,43,0.15);--shadow-red:rgba(192,57,43,0.2);
}

/* Light Blue — Aquarium */
[data-theme="light-blue"]{
  --red:#1a6bb5;--red2:#155da0;--red3:#0e3f72;
  --bg-win:#ffffff;--bg-sidebar:#f0f7ff;--bg-app:#fafcff;
  --bg-topbar:#ffffff;--bg-toolbar:#eaf3ff;--bg-tabs:#daeaff;
  --bg-thead:#d0e8ff;--bg-row-even:#ffffff;--bg-row-odd:#f5faff;
  --bg-input:#ffffff;--bg-hover:#daeaff;--bg-sel:#c0d8f8;
  --bg-card:#eaf3ff;--bg-scrollbar:#c8dff8;
  --text-white:#ffffff;--text-light:#0a1a2a;--text-mid:#1a4a7a;
  --text-dim:#5a88b0;--text-thead:#0e2a4a;--text-td:#0a1e3a;
  --text-td1:#081828;--text-sel:#1a6bb5;--text-sel1:#2980d0;
  --border0:#c0d8f0;--border1:#d0e4f8;--border2:#ddeeff;
  --ap-grid-separator:#95aec7;
  --shadow-accent:rgba(26,107,181,0.15);--shadow-red:rgba(26,107,181,0.2);
}

/* Light Green — Emerald Forest */
[data-theme="light-green"]{
  --red:#1a7a4a;--red2:#156b3e;--red3:#0e4a2a;
  --bg-win:#ffffff;--bg-sidebar:#f0fff5;--bg-app:#fafffe;
  --bg-topbar:#ffffff;--bg-toolbar:#e8fff2;--bg-tabs:#d8f5e8;
  --bg-thead:#cceedd;--bg-row-even:#ffffff;--bg-row-odd:#f5fff8;
  --bg-input:#ffffff;--bg-hover:#d8f5e8;--bg-sel:#b8e8d0;
  --bg-card:#e8fff2;--bg-scrollbar:#c0e8d5;
  --text-white:#ffffff;--text-light:#0a1a10;--text-mid:#1a5a30;
  --text-dim:#4a9060;--text-thead:#0e2a18;--text-td:#0a1e12;
  --text-td1:#08180e;--text-sel:#1a7a4a;--text-sel1:#27ae60;
  --border0:#b8e0c8;--border1:#c8ecd8;--border2:#d8f5e8;
  --ap-grid-separator:#8db29c;
  --shadow-accent:rgba(26,122,74,0.15);--shadow-red:rgba(26,122,74,0.2);
}

/* Light Purple — Amethyst */
[data-theme="light-purple"]{
  --red:#6b3fa0;--red2:#5c358a;--red3:#3e2460;
  --bg-win:#ffffff;--bg-sidebar:#f8f0ff;--bg-app:#fdfaff;
  --bg-topbar:#ffffff;--bg-toolbar:#f3e8ff;--bg-tabs:#ead8ff;
  --bg-thead:#e0ccff;--bg-row-even:#ffffff;--bg-row-odd:#faf5ff;
  --bg-input:#ffffff;--bg-hover:#ead8ff;--bg-sel:#d8c0f8;
  --bg-card:#f3e8ff;--bg-scrollbar:#d0b8f0;
  --text-white:#ffffff;--text-light:#1a0a2a;--text-mid:#4a1a7a;
  --text-dim:#8860b0;--text-thead:#2a0e4a;--text-td:#1e0a3a;
  --text-td1:#180828;--text-sel:#6b3fa0;--text-sel1:#8e44ad;
  --border0:#d0b8e8;--border1:#ddc8f0;--border2:#ead8ff;
  --ap-grid-separator:#aa91c0;
  --shadow-accent:rgba(107,63,160,0.15);--shadow-red:rgba(107,63,160,0.2);
}

/* Light Pink — Cherry Blossom */
[data-theme="light-pink"]{
  --red:#d63a7a;--red2:#c0326a;--red3:#8a2050;
  --bg-win:#ffffff;--bg-sidebar:#fff0f7;--bg-app:#fffafc;
  --bg-topbar:#ffffff;--bg-toolbar:#ffe8f3;--bg-tabs:#ffd8ec;
  --bg-thead:#ffc8e4;--bg-row-even:#ffffff;--bg-row-odd:#fff5fa;
  --bg-input:#ffffff;--bg-hover:#ffd8ec;--bg-sel:#ffc0df;
  --bg-card:#ffe8f3;--bg-scrollbar:#f8c0d8;
  --text-white:#ffffff;--text-light:#2a0a18;--text-mid:#7a1a4a;
  --text-dim:#c06090;--text-thead:#3a0e20;--text-td:#280a14;
  --text-td1:#200810;--text-sel:#d63a7a;--text-sel1:#e91e8c;
  --border0:#f0c0d8;--border1:#f8d0e4;--border2:#ffdded;
  --ap-grid-separator:#ca8fa8;
  --shadow-accent:rgba(214,58,122,0.15);--shadow-red:rgba(214,58,122,0.2);
}

/* Nyan Light — Rainbow on white */
[data-theme="nyan-light"]{
  --red:#ff6b6b;--red2:#ee5a5a;--red3:#cc3333;
  --bg-win:#ffffff;--bg-sidebar:#fafafa;--bg-app:#ffffff;
  --bg-topbar:#ffffff;--bg-toolbar:#f8f8f8;--bg-tabs:#f0f0f0;
  --bg-thead:#f5f5f5;--bg-row-even:#ffffff;--bg-row-odd:#fafafa;
  --bg-input:#ffffff;--bg-hover:#f0f0f0;--bg-sel:#e8e8ff;
  --bg-card:#f8f8f8;--bg-scrollbar:#e0e0e0;
  --text-white:#ffffff;--text-light:#1a1a2e;--text-mid:#444444;
  --text-dim:#888888;--text-thead:#1a1a2e;--text-td:#2a2a2a;
  --text-td1:#1a1a1a;--text-sel:#ff6b6b;--text-sel1:#ff4444;
  --border0:#e0e0e0;--border1:#ebebeb;--border2:#f0f0f0;
  --ap-grid-separator:#adadad;
  --shadow-accent:rgba(255,107,107,0.15);--shadow-red:rgba(255,107,107,0.2);
}

/* Nyan Dark — Rainbow on dark */
[data-theme="nyan-dark"]{
  --red:#ff6b6b;--red2:#ee5a5a;--red3:#cc3333;
  --bg-win:#0d0d0d;--bg-sidebar:#111111;--bg-app:#0d0d0d;
  --bg-topbar:#111111;--bg-toolbar:#161616;--bg-tabs:#1a1a1a;
  --bg-thead:#1a1a1a;--bg-row-even:#0d0d0d;--bg-row-odd:#121212;
  --bg-input:#1a1a1a;--bg-hover:#1e1e1e;--bg-sel:#2a1a2e;
  --bg-card:#161616;--bg-scrollbar:#2a2a2a;
  --text-white:#f0f0f0;--text-light:#f0f0f0;--text-mid:#b0b0b0;
  --text-dim:#707070;--text-thead:#e0e0e0;--text-td:#d0d0d0;
  --text-td1:#e8e8e8;--text-sel:#ff6b6b;--text-sel1:#ff4444;
  --border0:#2a2a2a;--border1:#222222;--border2:#1e1e1e;
  --ap-grid-separator:#444444;
  --shadow-accent:rgba(255,107,107,0.2);--shadow-red:rgba(255,107,107,0.3);
}

/* ═══════════════════════════════════════════════════════
   PRICE LIST ENTRY FORM
   ═══════════════════════════════════════════════════════ */
.price-list-entry-view{
  margin-top: 12px;
}

.price-list-entry-card{
  background: var(--bg-card);
  border: 1px solid var(--border1);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.price-list-entry-header{
  margin-bottom: 16px;
}

.price-list-entry-header h3{
  font-size: 20px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.price-list-entry-header p{
  color: var(--text-dim);
  font-size: 13px;
}

.price-list-entry-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.price-list-entry-grid .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mid);
  font-size: 13px;
}

.price-list-entry-grid .field input{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border1);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════
   SVG & DYNAMIC COLORS
   ═══════════════════════════════════════════════════════ */
.logo-icon svg circle:nth-child(1),
.logo-icon svg circle:nth-child(2),
.logo-icon svg circle:nth-child(3),
.logo-icon svg circle:nth-child(4),
.logo-icon svg circle:nth-child(5),
.logo-icon svg circle:nth-child(6),
.logo-icon svg circle:nth-child(7),
.logo-icon svg circle:nth-child(8),
.logo-icon svg circle:nth-child(9) {
  fill: var(--text-white);
  opacity: 0.75;
}

.logo-icon svg circle:nth-child(1) {
  opacity: 0.95;
}

.logo-icon svg circle:nth-child(10) {
  fill: var(--red);
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════
   THEME MODAL
   ═══════════════════════════════════════════════════════ */
.theme-modal-overlay{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.55);align-items:center;justify-content:center;
}
.theme-modal-overlay.open{display:flex;}
.theme-modal{
  background:var(--bg-toolbar);border:1px solid var(--border2);
  border-radius:10px;padding:28px 30px;min-width:400px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.theme-modal-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
}
.theme-modal-header h3{
  font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;
  color:var(--text-light);letter-spacing:.4px;
}
.theme-modal-close{
  background:none;border:none;cursor:pointer;color:var(--text-dim);
  font-size:18px;line-height:1;padding:2px 6px;border-radius:4px;
  transition:background .12s,color .12s;
}
.theme-modal-close:hover{background:var(--red);color:var(--text-white);}
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;}
.theme-card-swatch{
  width:100%;aspect-ratio:1;border-radius:8px;border:2px solid var(--border2);
  overflow:hidden;position:relative;transition:border-color .15s,transform .1s;
}
.theme-card:hover .theme-card-swatch{transform:scale(1.06);border-color:var(--text-mid);}
.theme-card.active .theme-card-swatch{border-color:var(--red);box-shadow:0 0 0 2px var(--red);}
.sw-top{position:absolute;top:0;left:0;right:0;height:50%;}
.sw-bot{position:absolute;bottom:0;left:0;right:0;height:50%;}
.theme-card-label{font-size:11px;color:var(--text-dim);text-align:center;line-height:1.2;}
.theme-card.active .theme-card-label{color:var(--red);font-weight:600;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Roboto',sans-serif;background:var(--bg-app);color:var(--text-light);display:flex;flex-direction:column;font-size:13px;line-height:1.4;}

/* ─── TITLEBAR ─── */
.titlebar{display:none;}
.tl-left{display:none;}
.tl-dot{display:none;}
.tl-btns{display:none;}
.tl-btn{display:none;}
.tl-btn:hover{background:var(--bg-hover);color:var(--text-mid);}
.tl-btn.cls:hover{background:var(--red);color:var(--text-white);}

/* ─── LAYOUT ─── */
.app{display:flex;flex:1;overflow:hidden;}

/* ─── SIDEBAR ─── */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:var(--bg-sidebar);
  display:flex;flex-direction:column;
  border-right:1px solid var(--border0);
  overflow:hidden;
  flex-shrink:0;
  transition:width .22s ease, min-width .22s ease;
  position:relative;
}
.sidebar.collapsed{width:var(--sidebar-col);min-width:var(--sidebar-col);}

/* decorative red swoosh background */
.sidebar-bg{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.sidebar-bg svg{position:absolute;bottom:0;left:0;width:100%;height:auto;}
#sidebarDotCanvas{position:absolute;bottom:0;left:0;width:100%;height:100%;pointer-events:none;}

/* ─── LOGO ─── */
.logo-wrap{
  position:relative;z-index:1;
  height:78px;
  display:flex;align-items:center;
  padding:0 9px;gap:10px;
  border-bottom:1px solid var(--border0);
  cursor:pointer;
  flex-shrink:0;
  overflow:hidden;
}
.logo-icon{
  width:40px;height:40px;min-width:40px;
  background:var(--red);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-icon svg{width:30px;height:30px;}
.logo-text{overflow:hidden;transition:opacity .18s,width .18s;white-space:nowrap;}
.logo-text h2{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;color:var(--text-light);letter-spacing:.5px;line-height:1.1;}
.logo-text p{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;}
.sidebar.collapsed .logo-text{opacity:0;pointer-events:none;}

/* ─── NAV ─── */
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0;position:relative;z-index:1;}
.sidebar-nav::-webkit-scrollbar{width:2px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border1);}

.nav-link{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;
  cursor:pointer;color:var(--text-mid);
  border-left:3px solid transparent;
  transition:background .12s,color .12s;
  white-space:nowrap;overflow:hidden;
  user-select:none;position:relative;
}
.nav-link:hover{background:var(--bg-hover);color:var(--text-light);}
.nav-link.active{background:var(--red);color:var(--text-white);border-left-color:rgba(255,255,255,.25);}
.nav-link svg{width:19px;height:19px;min-width:19px;stroke:currentColor;fill:none;stroke-width:1.7;}
.nav-label{font-size:12.5px;font-weight:400;transition:opacity .18s;}
.sidebar.collapsed .nav-label{opacity:0;}
.nav-arr{margin-left:auto;font-size:9px;color:inherit;opacity:.6;transition:transform .2s,opacity .18s;}
.sidebar.collapsed .nav-arr{opacity:0;}
.nav-item.open>.nav-link .nav-arr{transform:rotate(90deg);}

/* submenu */
.submenu{overflow:hidden;max-height:0;transition:max-height .28s ease;background:var(--bg-tabs);}
.nav-item.open .submenu{max-height:800px;}
.sidebar.collapsed .submenu{max-height:0!important;}
.sub-item{
  display:flex;align-items:center;gap:8px;
  padding:7.5px 14px 7.5px 40px;
  color:var(--text-dim);font-size:12px;
  cursor:pointer;
  transition:background .1s,color .1s;
  white-space:nowrap;
}
.sub-item:hover{background:var(--bg-hover);color:var(--text-light);}
.sub-item.active{color:var(--text-light);}
.sub-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0;display:none;}

/* ─── USER ─── */
.sidebar-user{
  position:relative;z-index:1;
  border-top:1px solid var(--border0);
  padding:9px 12px;
  display:flex;align-items:center;gap:9px;
  overflow:hidden;flex-shrink:0;
}
.u-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;color:var(--text-dim);position:relative;}
.u-avatar svg{width:17px;height:17px;}
.u-dot{position:absolute;bottom:1px;right:1px;width:7px;height:7px;border-radius:50%;background:#27ae60;border:1.5px solid var(--bg-sidebar);}
.u-info{overflow:hidden;transition:opacity .18s;}
.sidebar.collapsed .u-info{opacity:0;}
.u-name{font-size:12.5px;font-weight:500;color:var(--text-mid);}
.u-role{font-size:10.5px;color:var(--text-dim);}
.u-chev{margin-left:auto;color:var(--border1);font-size:13px;transition:opacity .18s;}
.sidebar.collapsed .u-chev{opacity:0;}

/* ─── MAIN ─── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-app);}

/* ─── TOPBAR ─── */
.topbar{
  height:72px;
  background:var(--bg-topbar);
  border-bottom:1px solid var(--border0);
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
  flex-shrink:0;
}
.top-icon{
  width:44px;height:44px;
  background:var(--bg-card);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.top-icon svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.7;}
.top-text h1{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:600;color:var(--text-light);letter-spacing:.3px;line-height:1.1;}
.top-text p{font-size:11px;color:var(--text-mid);margin-top:1px;}
:root:not([data-theme]) .top-text h1{color:#ffffff;}
:root:not([data-theme]) .top-text p{color:rgba(255,255,255,0.75);}
.notification-area{position:relative;margin-left:auto;align-self:stretch;display:flex;align-items:center;}
.notification-toggle{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border1);border-radius:5px;background:var(--bg-card);color:var(--text-light);cursor:pointer;}
.notification-toggle:hover,.notification-toggle[aria-expanded="true"]{background:var(--bg-hover);}
.notification-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.notification-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:#c0392b;color:#fff;font:600 10px 'Roboto',sans-serif;}
.notification-panel{position:absolute;z-index:50;top:calc(100% - 3px);right:0;width:min(360px,calc(100vw - 24px));max-height:min(480px,calc(100vh - 90px));display:flex;flex-direction:column;overflow:hidden;background:var(--bg-card);color:var(--text-light);border:1px solid var(--border1);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.22);}
.notification-panel[hidden],.notification-badge[hidden],.notification-load-more[hidden]{display:none;}
.notification-panel-header{min-height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border1);}
.notification-panel-header h2{font:600 16px 'Rajdhani',sans-serif;color:var(--text-light);}
.notification-mark-all,.notification-load-more{border:0;background:transparent;color:var(--red);font:500 11px 'Roboto',sans-serif;cursor:pointer;padding:8px;}
.notification-mark-all:disabled,.notification-load-more:disabled{opacity:.55;cursor:default;}
.notification-list{overflow:auto;min-height:40px;}
.notification-entry{position:relative;padding:11px 12px 11px 16px;border-bottom:1px solid var(--border1);font:12px 'Roboto',sans-serif;}
.notification-entry.unread{background:var(--bg-hover);}
.notification-entry.unread::before{position:absolute;content:"";left:7px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--red);}
.notification-entry-title{display:block;color:var(--text-light);font-weight:600;text-decoration:none;overflow-wrap:anywhere;}
.notification-entry-title:hover{text-decoration:underline;}
.notification-entry-message{margin-top:4px;color:var(--text-mid);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.notification-entry-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;color:var(--text-dim);font-size:10px;}
.notification-entry-read{border:0;background:transparent;color:var(--red);font:500 10px 'Roboto',sans-serif;cursor:pointer;}
.notification-empty,.notification-error{padding:20px 12px;text-align:center;color:var(--text-dim);font:12px 'Roboto',sans-serif;}
.notification-error{color:#c0392b;}
.notification-load-more{border-top:1px solid var(--border1);padding:10px;}
@media(max-width:560px){
  .topbar{padding:0 12px;gap:9px;}
  .top-icon{width:38px;height:38px;}
  .notification-panel{right:-4px;}
}

/* ─── TOOLBAR ─── */
.toolbar{
  background:var(--bg-toolbar);
  border-bottom:1px solid var(--border0);
  display:flex;align-items:stretch;
  padding:7px 10px;gap:5px;
  flex-shrink:0;
}
.tool-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:7px 18px;
  background:var(--bg-card);
  border:1px solid var(--border1);
  border-left:3px solid var(--border1);
  border-radius:4px;
  cursor:pointer;color:var(--text-mid);
  transition:all .12s;
  min-width:75px;user-select:none;
}
.tool-btn:hover{background:var(--bg-hover);border-color:var(--border2);border-left-color:var(--border2);color:var(--text-light);}
.tool-btn.active{background:var(--bg-toolbar);border-color:var(--border1);border-left-color:var(--red);color:var(--text-light);}
.tool-btn.del:hover{background:var(--bg-sel);border-left-color:var(--red);color:var(--red);}
.tool-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;}
.tb-label{font-size:11.5px;font-weight:400;}
.tb-key{font-size:10px;color:var(--text-dim);background:var(--bg-tabs);padding:1px 5px;border-radius:3px;border:1px solid var(--border2);font-family:'Roboto Mono',monospace;}
.tool-btn.active .tb-key,.tool-btn:hover .tb-key{color:var(--text-mid);}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border1);
  border-radius: 4px;
  flex: 0 1 220px;
  margin-right: 35px;
}

.search-container svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 12px;
  padding: 0;
  outline: none;
  font-family: inherit;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.search-input:focus ~ svg {
  stroke: var(--red);
}

/* ─── TABS ─── */
.tabs {
  background: var(--bg-tabs);
  border-bottom: 1px solid var(--border0);
  display: flex;
  padding: 10px 60px;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.sort-dropdown {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border1);
  color: var(--text-mid);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  flex: 0 0 auto;
  margin-left: 35px;
}

.sort-dropdown:hover {
  background: var(--bg-hover);
  color: var(--text-light);
}

.sort-dropdown:focus {
  outline: none;
  background: var(--bg-hover);
  border-color: var(--red);
  color: var(--text-light);
}

.sort-dropdown option {
  background: var(--bg-toolbar);
  color: var(--text-light);
}

.category-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 1 auto;
}

.category-buttons button {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border1);
  color: var(--text-mid);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all .12s;
  white-space: nowrap;
}

.category-buttons button:hover {
  background: var(--bg-hover);
  color: var(--text-light);
  border-color: var(--border2);
}

.category-buttons button.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red2);
}

/* ─── TABLE ─── */
.table-container{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-app);}
.tbl-wrap{flex:1;overflow:auto;background:var(--bg-app);scroll-behavior:smooth;}
.tbl-wrap::-webkit-scrollbar{width:10px;height:18px;}
.tbl-wrap::-webkit-scrollbar-track{background:linear-gradient(to right, var(--bg-app) 0%, var(--bg-row-odd) 50%, var(--bg-app) 100%);border-radius:10px;}
.tbl-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red) 0%, var(--red2) 50%, var(--red3) 100%);
  border-radius:10px;border:2px solid var(--bg-row-odd);
  box-shadow:0 0 8px var(--shadow-red);
}
.tbl-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--red) 0%, var(--red) 50%, var(--red2) 100%);
  box-shadow:0 0 12px var(--shadow-red);
}
.tbl-wrap::-webkit-scrollbar-corner{background:var(--bg-app);}

.scroll-buttons{
  display:flex;gap:12px;align-items:center;justify-content:center;
  padding:0 16px;
  background:var(--bg-toolbar);
  border-top:1px solid var(--border1);
  flex-shrink:0;
  height:38px;
}
.scroll-btn{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:32px;
  background:var(--bg-card);border:1px solid var(--border2);
  border-radius:6px;color:var(--text-light);cursor:pointer;
  font-size:16px;font-weight:500;transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.scroll-btn:hover{background:var(--bg-hover);border-color:var(--red);color:var(--text-light);box-shadow:0 4px 12px var(--shadow-red);
}
.scroll-btn:active{
  background:var(--red);
  color:var(--text-white);
  border-color:var(--red2);
  box-shadow:0 2px 6px rgba(0,0,0,0.4), inset 0 1px 3px rgba(0,0,0,0.3);
}

table{width:100%;border-collapse:collapse;table-layout:auto;}
thead{position:sticky;top:0;z-index:2;}
thead tr{background:linear-gradient(135deg, var(--bg-thead) 0%, var(--bg-tabs) 100%);border-bottom:2px solid var(--red);}
thead th{
  padding:13px 16px;text-align:left;
  font-size:11px;font-weight:400;
  color:var(--text-thead);text-transform:uppercase;letter-spacing:.6px;
  border-right:1px solid var(--border1);
  user-select:none;cursor:pointer;
  min-width:80px;white-space:nowrap;
}
thead th:first-child{
  position:sticky;left:0;z-index:3;
  background:linear-gradient(135deg, var(--bg-thead) 0%, var(--bg-tabs) 100%);
}
thead th:last-child{border-right:none;}
.th-inner{display:flex;align-items:center;gap:5px;}
.sort-ico{font-size:9px;color:var(--red);}

tbody tr{
  border-bottom:1px solid var(--border0);cursor:pointer;
  transition:background .12s, box-shadow .12s;
}
tbody tr:nth-child(even){background:var(--bg-row-even);}
tbody tr:nth-child(odd){background:var(--bg-row-odd);}
tbody tr:nth-child(even) td:first-child{background:var(--bg-row-even);}
tbody tr:nth-child(odd) td:first-child{background:var(--bg-row-odd);}
tbody tr:hover{
  background:var(--bg-hover);
  box-shadow:inset 0 0 0 1px var(--border1);
}
tbody tr:hover td:first-child{
  background:var(--bg-hover);
}
tbody tr.sel{background:var(--bg-sel)!important;}
tbody tr.sel td:first-child{
  box-shadow:inset 3px 0 0 0 var(--red);
  background:var(--bg-sel)!important;
}

td{
  padding:12px 16px;font-size:12.5px;color:var(--text-td);
  border-right:1px solid var(--border0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
td:last-child{border-right:none;}
td:first-child{
  position:sticky;left:0;z-index:1;
  color:var(--text-td1);font-size:12px;font-weight:500;
  background:var(--bg-row-odd);
}
tr.sel td{color:var(--text-sel);}
tr.sel td:first-child{color:var(--text-sel1);}

/* Lookup row selection styling */
.lookupRow {
  position: relative;
  background: var(--bg-app) !important;
  border-left: 4px solid transparent !important;
}
.lookupRow > div {
  color: var(--text-mid);
}
.lookupRow > div:first-child {
  color: var(--text-td1);
  font-weight: bold;
}
.lookupRow.sel {
  background: var(--red) !important;
  border-left: 4px solid var(--red) !important;
  box-shadow: inset -8px 0 0 0 rgba(0,0,0,0.1);
}
.lookupRow.sel > div {
  color: var(--text-white) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.lookupRow.sel > div:first-child {
  color: var(--text-white) !important;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.lookupRow.sel::before {
  content: '✓';
  position: absolute;
  left: 8px;
  font-weight: bold;
  color: var(--text-white);
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.row-arr{display:none;}

/* ─── PAGINATION ─── */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:12px;background:var(--bg-thead);
  border-top:1px solid var(--border0);
  flex-shrink:0;
  width:100%;
  box-sizing:border-box;
}
.pag-btn{
  background:var(--bg-card);border:1px solid var(--border1);
  border-radius:4px;padding:6px 14px;color:var(--text-mid);
  cursor:pointer;font-size:12px;transition:all .12s;
}
.pag-btn:hover{background:var(--bg-hover);color:var(--text-light);border-color:var(--border2);}
.pag-btn:disabled{opacity:.4;cursor:not-allowed;}
.page-info{color:var(--text-dim);font-size:12px;}

/* ─── FORM MODAL ─── */
.form-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:998;}
.form-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bg-app);border:2px solid var(--red);
  z-index:1000;border-radius:8px;
  box-shadow:0 0 30px var(--shadow-red);
  max-width:1200px;width:95%;max-height:90vh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#priceListEntryFormOverlay{z-index:1015;}
#priceListEntryFormModal{z-index:1016;}
.form-container{
  display:flex;flex-direction:column;
  flex:1;
  overflow:hidden;
}
.form-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--border1);
  background:var(--bg-toolbar);flex-shrink:0;
}
.form-header h2{color:var(--text-light);margin:0;font-size:16px;font-weight:600;}
.form-close-btn{
  background:none;border:none;color:var(--text-light);
  font-size:24px;cursor:pointer;padding:0;
  transition:color .12s;
}
.form-close-btn:hover{color:var(--red);}

.form-tabs{
  display:flex;border-bottom:1px solid var(--border1);
  background:var(--bg-tabs);
  gap:0;padding:0;
  flex-shrink:0;
}
.form-tab-btn{
  flex:1;padding:12px 16px;border:none;background:none;
  color:var(--text-mid);cursor:pointer;
  border-bottom:3px solid transparent;
  transition:all .12s;text-align:center;
  font-size:12px;font-weight:500;
}
.form-tab-btn:hover{background:var(--bg-hover);color:var(--text-light);}
.form-tab-btn.active{
  color:var(--red);border-bottom-color:var(--red);
  background:var(--bg-card);
}

.form-content{
  max-height:calc(90vh - 180px);
  overflow-y:auto;overflow-x:hidden;
  padding:20px;
  background:var(--bg-app);
}
.form-content::-webkit-scrollbar{width:8px;background:transparent;}
.form-content::-webkit-scrollbar-track{background:var(--bg-tabs);}
.form-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.form-content::-webkit-scrollbar-thumb:hover{background:var(--border1);}
.form-tab-content{display:none;}
.form-tab-content.active{display:block;}

.form-grid{display:flex;flex-direction:column;gap:20px;}
.form-section h4{
  color:var(--red);font-size:13px;font-weight:600;
  margin-bottom:0;text-transform:uppercase;
  letter-spacing:0.5px;padding-bottom:6px;
  border-bottom:1px solid var(--border1);
}

.form-section{width:100%;display:flex;flex-direction:column;gap:12px;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row .form-group.full{grid-column:1/-1;}

#priceListItemForm .form-row {margin-bottom: 12px;}
#priceListItemForm .form-row:last-child {margin-bottom: 0;}

.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label{
  display:flex;align-items:center;gap:8px;
  color:var(--text-mid);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.3px;cursor:pointer;user-select:none;
}
.form-group input,.form-group select,.form-group textarea{
  background:var(--bg-input);border:1px solid var(--border1);
  color:var(--text-light);padding:8px 10px;
  border-radius:4px;font-size:12px;
  font-family:'Roboto',sans-serif;
  transition:all .12s;
  text-transform:uppercase;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--red);
  background:var(--bg-row-odd);box-shadow:0 0 8px var(--shadow-accent);
}
.form-group input:disabled,.form-group select:disabled{
  opacity:0.5;background:var(--bg-row-even);cursor:not-allowed;
}

.barcode-mode-control{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:8px;
}

.barcode-mode-control[data-mode="auto"]{
  grid-template-columns:100px minmax(0,1fr);
}

.barcode-mode-control[data-mode="manual"]{
  grid-template-columns:82px minmax(0,1fr);
}

.barcode-mode-control select,
.barcode-mode-control input{
  width:100%;
}

/* Date input styling */
.form-group input[type="date"]{
  position:relative;
  cursor:pointer;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:0.8;
  filter:invert(0.5);
}

.form-group input[type="date"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
}
.form-group textarea{resize:vertical;}

/* Checkbox styling */
.form-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: var(--bg-input);
  border: 1.5px solid var(--border1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

.form-group input[type="checkbox"]:hover {
  border-color: var(--red);
  background: var(--bg-row-odd);
}

.form-group input[type="checkbox"]:checked {
  background: var(--red);
  border-color: var(--red);
}

.form-group input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.form-group input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 8px var(--shadow-accent);
}

.form-group input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pricing-table{display:flex;flex-direction:column;gap:0;border:1px solid var(--border1);border-radius:4px;overflow:hidden;}

.pricing-row{display:flex;gap:0;border-bottom:1px solid var(--border1);}

.pricing-row:last-child{border-bottom:none;}

.pricing-label{
  flex:0 0 180px;padding:12px;background:var(--bg-row-odd);
  border-right:1px solid var(--border1);color:var(--text-mid);
  font-size:12px;font-weight:500;display:flex;align-items:center;
  word-wrap:break-word;white-space:normal;
}

.pricing-inputs{
  flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}

.pricing-inputs input{
  border:none;border-right:1px solid var(--border1);
  border-radius:0;padding:10px 8px;
  background:var(--bg-row-even);color:var(--text-light);
  font-size:12px;text-align:center;
}

.pricing-inputs input:last-child{border-right:none;}

.pricing-inputs input:focus{
  outline:none;background:var(--bg-row-odd);
  box-shadow:inset 0 0 8px var(--shadow-accent);
}

.form-section.full-width{grid-column:1/-1;width:100%;}

/* Sourcing (Product > Supplier card) */
.sourcing-divider{
  display:flex;align-items:center;gap:10px;
  margin-top:4px;
}
.sourcing-divider::before{
  content:'';flex:0 0 3px;align-self:stretch;
  background:var(--red);border-radius:2px;
}
.sourcing-divider span{
  color:var(--red);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
}

.sourcing-toggle-group{display:flex;gap:10px;flex-wrap:wrap;}
.sourcing-toggle-option{position:relative;cursor:pointer;}
.sourcing-toggle-option input[type="checkbox"]{
  position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;
}
.sourcing-toggle-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:20px;
  background:var(--bg-input);border:1.5px solid var(--border1);
  color:var(--text-mid);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
  transition:all .15s ease;user-select:none;
}
.sourcing-toggle-icon{width:14px;height:14px;flex:0 0 auto;color:currentColor;}
.sourcing-toggle-option:hover .sourcing-toggle-pill{
  border-color:var(--red);color:var(--text-light);
}
.sourcing-toggle-option input[type="checkbox"]:checked ~ .sourcing-toggle-pill,
.sourcing-toggle-option input[type="checkbox"]:checked + .sourcing-toggle-pill{
  background:var(--red);border-color:var(--red);color:var(--text-white);
  box-shadow:0 0 8px var(--shadow-accent);
}
.sourcing-toggle-option input[type="checkbox"]:focus-visible + .sourcing-toggle-pill{
  outline:none;box-shadow:0 0 0 2px var(--bg-card),0 0 0 4px var(--red);
}

.sourcing-fields-panel{
  display:flex;flex-direction:column;gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border1);border-left:3px solid var(--red);
  border-radius:6px;padding:14px;
  animation:sourcingPanelIn .15s ease;
}
@keyframes sourcingPanelIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
.sourcing-fields-panel-title{
  color:var(--red);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  padding-bottom:6px;border-bottom:1px solid var(--border1);
}

/* Price List Entry — header + grid layout */
.pl-header{
  display:flex;gap:24px;align-items:flex-start;
  padding-bottom:16px;margin-bottom:14px;
  border-bottom:1px solid var(--border1);
  flex-wrap:wrap;
}
.pl-header-left{
  flex:0 0 200px;display:flex;flex-direction:column;gap:12px;
}
.pl-header-right{
  flex:1;min-width:320px;display:flex;flex-direction:column;gap:10px;
}
.pl-field-row{
  display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;
}
.pl-field-row label{
  color:var(--text-mid);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.3px;
}
.pl-lookup-row{display:flex;gap:6px;align-items:center;}
.pl-code-input{
  flex:0 0 25%;min-width:70px;
  background:var(--bg-input);border:1px solid var(--border1);
  color:var(--text-light);padding:8px 10px;border-radius:4px;
  font-size:12px;font-family:'Roboto',sans-serif;text-transform:uppercase;
}
.pl-name-input{
  flex:1;
  background:var(--bg-input);border:1px solid var(--border1);
  color:var(--text-light);padding:8px 10px;border-radius:4px;
  font-size:12px;font-family:'Roboto',sans-serif;text-transform:uppercase;
}
.pl-code-input:focus,.pl-name-input:focus{
  outline:none;border-color:var(--red);
  background:var(--bg-row-odd);box-shadow:0 0 8px var(--shadow-accent);
}
.pl-lookup-btn{
  flex:0 0 auto;padding:6px 10px;cursor:pointer;
  background:var(--red);color:var(--text-white);
  border:none;border-radius:4px;font-size:14px;line-height:1;
  transition:background .12s;
}
.pl-lookup-btn:hover{background:var(--red2);}

.pl-grid-toolbar{
  display:flex;justify-content:flex-end;align-items:center;
  margin-bottom:8px;
}
.pl-add-item-btn{
  padding:6px 14px;background:var(--red);color:var(--text-white);
  border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;
  transition:background .12s;
}
.pl-add-item-btn:hover{background:var(--red2);}

/* Item grid now reuses the app's global table/thead/td styling
   (see the bare `table`, `thead`, `td` rules above) so it matches
   the main list table look-and-feel exactly. This wrapper just
   constrains it to a scrollable box inside the modal. */
.pl-grid-wrap{
  border:1px solid var(--border1);border-radius:4px;
  max-height:340px;overflow:auto;position:relative;
  background:var(--bg-app);scroll-behavior:smooth;
}
.pl-grid-wrap table{width:100%;}
.pl-grid-wrap td,.pl-grid-wrap th{white-space:nowrap;}
.pl-action-col{width:90px;text-align:center!important;}
.pl-grid-wrap::-webkit-scrollbar{width:10px;height:14px;}
.pl-grid-wrap::-webkit-scrollbar-track{background:linear-gradient(to right, var(--bg-app) 0%, var(--bg-row-odd) 50%, var(--bg-app) 100%);border-radius:10px;}
.pl-grid-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red) 0%, var(--red2) 50%, var(--red3) 100%);
  border-radius:10px;border:2px solid var(--bg-row-odd);
  box-shadow:0 0 8px var(--shadow-red);
}
.pl-grid-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--red) 0%, var(--red) 50%, var(--red2) 100%);
  box-shadow:0 0 12px var(--shadow-red);
}
.pl-grid-wrap::-webkit-scrollbar-corner{background:var(--bg-app);}

/* The real item rows are built by addPriceListEntryItemRow() in
   script.js, which sets inline styles per cell/input (so it keeps
   working as plain editable inputs that getPriceListEntryItems()
   reads back out). Overriding those inline styles here is the only
   way to make them visually match the main table without touching
   that data logic. */
#priceListEntryItemsBody td{
  padding:10px 12px!important;
  border:none!important;
  border-right:1px solid var(--border0)!important;
  border-bottom:none!important;
}
#priceListEntryItemsBody td:last-child{border-right:none!important;}
#priceListEntryItemsBody input:not([type="hidden"]){
  border:none!important;
  background:transparent!important;
  padding:4px 2px!important;
  font-size:12.5px!important;
  color:var(--text-td)!important;
  border-radius:3px!important;
  cursor:default!important;
  pointer-events:none!important;
}
#priceListEntryItemsBody button{
  padding:5px 9px!important;
  border-radius:4px!important;
  font-size:11px!important;
}

.pl-row-actions{
  display:flex;gap:6px;justify-content:center;align-items:center;
}
.pl-row-edit,.pl-row-delete{
  width:26px;height:26px;border:none;border-radius:4px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  transition:background .12s,color .12s;
}
.pl-row-edit{background:var(--bg-tabs);color:var(--text-light);}
.pl-row-edit:hover{background:var(--bg-hover);}
.pl-row-delete{background:var(--bg-tabs);color:#dc2626;}
.pl-row-delete:hover{background:#dc2626;color:#fff;}

/* Selected row highlighting */
.pl-grid-table tr.selected td{background:rgba(59,130,246,0.06)!important;}

/* Toolbar edit/delete buttons */
.pl-edit-item-btn,.pl-delete-item-btn{
  margin-left:8px;padding:6px 10px;border-radius:4px;border:none;cursor:pointer;background:var(--bg-tabs);color:var(--text-light);
}
.pl-delete-item-btn{background:var(--red);color:var(--text-white);}
.pl-edit-item-btn:disabled,.pl-delete-item-btn:disabled{opacity:0.45;cursor:not-allowed}
.pl-grid-empty{padding:24px;text-align:center;color:var(--text-dim);font-size:12px;}

.pl-footer{justify-content:center;gap:12px;}

/* Item entry sub-modal (opened via the + Add Item button) */
.form-overlay-top{z-index:1029;}
.form-modal-top{z-index:1030;}

/* Purchase Order Entry — item grid reuses the same read-only-cell
   treatment as Price List Entry's item grid. */
#purchaseOrderItemsBody td{
  padding:10px 12px!important;
  border:none!important;
  border-right:1px solid var(--border0)!important;
  border-bottom:none!important;
}
#purchaseOrderItemsBody td:last-child{border-right:none!important;}
#purchaseOrderItemsBody input:not([type="hidden"]){
  border:none!important;
  background:transparent!important;
  padding:4px 2px!important;
  font-size:12.5px!important;
  color:var(--text-td)!important;
  border-radius:3px!important;
  cursor:default!important;
  pointer-events:none!important;
}
.po-totals-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border1);
  flex-wrap:wrap;gap:12px;
}
.po-vat-check{
  display:flex;align-items:center;gap:8px;
  color:var(--text-mid);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.3px;cursor:pointer;
}
.po-grand-total{display:flex;align-items:center;gap:10px;}
.po-grand-total label{
  color:var(--text-mid);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.3px;
}
.po-grand-total input{
  width:160px;text-align:right;font-weight:700;
  background:var(--bg-input);border:1px solid var(--border1);
  color:var(--text-light);padding:8px 10px;border-radius:4px;
  font-size:14px;font-family:'Roboto',sans-serif;
}

.sp-discount-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sp-discount-group input{
  width:66px;text-align:right;padding:8px 6px;
  border:1px solid var(--border1);border-radius:4px;
  background:var(--bg-input);color:var(--text-light);
  font-size:13px;font-family:'Roboto',sans-serif;
}
.sp-discount-group .sp-pct{color:var(--text-mid);font-weight:600;font-size:12px;}
.sp-item-discounts{display:flex;gap:6px;flex-wrap:wrap;}
.sp-item-discounts .form-group{flex:1 1 auto;min-width:60px;}
.sp-item-discounts input{width:100%;text-align:right;}

/* Return Slip (Return to Supplier) — the item grid's own content sets
   its natural weight: description reads left, every number reads
   right, and column widths are declared once via <colgroup> so the
   grid doesn't reflow as rows are added. */
.rs-grid-table{table-layout:fixed;}
.rs-grid-table .rs-col-qty{width:70px;}
.rs-grid-table .rs-col-unit{width:80px;}
.rs-grid-table .rs-col-desc{width:auto;}
.rs-grid-table .rs-col-price{width:110px;}
.rs-grid-table .rs-col-amount{width:120px;}
.rs-grid-table td.rs-num,.rs-grid-table th.rs-num{text-align:right;}
.rs-grid-table td.rs-desc{white-space:normal;word-break:break-word;}
.rs-empty-state{
  display:none;padding:14px 12px;border-top:1px solid var(--border1);
  color:var(--text-dim);font-size:12px;text-align:center;
}
.rs-empty-state.visible{display:block;}

/* Item sub-modal — Amount is the one number this small form exists to
   produce, so it gets the same visual weight as the header-level
   grand-total fields elsewhere in the app instead of sitting flush
   with the rest of the inputs. */
.rs-amount-row{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--border1);
}
.rs-amount-row label{
  color:var(--text-mid);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.3px;
}
.rs-amount-row input{
  width:160px;text-align:right;font-weight:700;font-size:15px;
  background:var(--bg-input);border:1px solid var(--red);color:var(--text-light);
  padding:8px 10px;border-radius:4px;font-family:'Roboto',sans-serif;
}

.rs-duplicate-warning{
  margin-top:6px;padding:6px 10px;border-radius:4px;
  background:rgba(217,119,6,0.12);border:1px solid #d97706;
  color:#d97706;font-size:11.5px;font-weight:600;line-height:1.5;
}

@media (max-width:720px){
  .pl-header{flex-direction:column;}
  .pl-header-left{flex:1 1 auto;}
  .pl-field-row{grid-template-columns:90px 1fr;}
}

.pricing-card{
  display:flex;flex-direction:column;gap:2px;
  padding:6px;border:1px solid var(--border1);
  border-radius:4px;background:var(--bg-row-even);
  margin-bottom:1px;
  width:100%;box-sizing:border-box;
}

.pricing-cards-grid{
  display:flex;flex-wrap:wrap;gap:16px;
}

.pricing-column{
  display:flex;flex-direction:column;gap:0;
  flex:1 1 calc(50% - 8px);min-width:200px;
}

.pricing-card-label{
  color:var(--text-mid);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.3px;
}

.pricing-editable-value{
  color:var(--text-light);
}

.pricing-card-header{
  display:flex;align-items:center;gap:8px;
}

.pricing-card-header .pricing-card-label{
  flex:1;min-width:0;
}

.pricing-label-edit-btn{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-row-odd);
  color:var(--text-mid);
  font-size:11px;
  font-family:'Roboto',sans-serif;
  cursor:pointer;
}

.pricing-label-edit-btn:hover{
  border-color:var(--red);
  color:var(--text-light);
}

.pricing-srp-btn{
  flex:0 0 auto;
  padding:4px 8px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-row-odd);
  color:var(--text-mid);
  font-size:11px;
  font-family:'Roboto',sans-serif;
  cursor:pointer;
  margin-left:4px;
}

.pricing-srp-btn:hover{
  border-color:var(--red);
  color:var(--text-light);
}

.pricing-label-input{
  display:inline-block;
  min-width:5ch;
  max-width:10ch;
  padding:2px 5px;
  border:1px solid var(--red);
  border-radius:4px;
  background:var(--bg-row-odd);
  color:var(--text-light);
  font-size:12px;
  font-family:'Roboto',sans-serif;
  font-weight:600;
  text-transform:none;
}

.pricing-label-input:focus{
  outline:none;
  box-shadow:0 0 8px rgba(192,57,43,0.2);
}

/* Markup multiplier: click the number in "( )" to edit it in place — no button, no layout shift */
.markup-label-text{
  white-space:nowrap;
}
.markup-editable-value{
  color:var(--text-light);
  cursor:pointer;
  border-bottom:1px dotted var(--text-mid);
}
.markup-editable-value:hover{
  color:var(--red);
  border-bottom-color:var(--red);
}
.markup-label-input{
  display:inline-block !important;
  width:2ch;
  min-width:0 !important;
  height:auto !important;
  padding:0 1px !important;
  margin:0 !important;
  border:none !important;
  border-bottom:1px solid var(--red) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text-light) !important;
  font-size:10px !important;
  font-family:'Roboto',sans-serif;
  font-weight:600;
  text-transform:none !important;
  vertical-align:baseline;
  box-sizing:content-box;
}
.markup-label-input:focus{
  outline:none !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  border-bottom:1px solid var(--red) !important;
}

.pricing-split-field{
  display:flex;gap:4px;
  width:100%;box-sizing:border-box;
}

.pricing-input,.pricing-output{
  padding:4px 6px;
  background:var(--bg-row-odd);border:1px solid var(--border1);
  color:var(--text-light);border-radius:4px;font-size:11px;
  font-family:'Roboto',sans-serif;
  flex:1;box-sizing:border-box;
}

.pricing-output.srp-selected{
  padding-right:28px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2327ae60"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:16px 16px;
}

.pricing-input:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 8px rgba(192,57,43,0.2);
}

.pricing-inputs-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:4px;
}

.pricing-inputs-row input{
  padding:4px 6px;background:var(--bg-row-odd);
  border:1px solid var(--border1);color:var(--text-light);
  border-radius:4px;font-size:11px;font-family:'Roboto',sans-serif;
  text-align:center;
}

.pricing-inputs-row input:focus{
  outline:none;border-color:var(--red);
  box-shadow:0 0 8px var(--shadow-accent);
}

.main-pricing-table .pricing-label{flex:0 0 220px;}

.pricing-tables-group{
  display:flex;flex-direction:column;gap:0;
  margin-top:0;
}

.pricing-tables-group .pricing-table{margin:0;}

.pricing-tables-group .pricing-label{flex:0 0 140px;font-size:11px;}

.pricing-tables-group .pricing-table:not(:first-child) .pricing-row{border-top:none;}

.form-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:0;border-top:1px solid var(--border0);
  background:var(--bg-toolbar);
  flex-shrink:0;
  min-height:44px;
}
.form-footer-left{
  display:flex;align-items:center;
  padding:0 14px;
  gap:16px;
  height:100%;
  border-right:1px solid var(--border1);
}
.form-footer-status{
  display:flex;align-items:center;gap:6px;
}
.form-footer-status-label{
  font-size:9px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:1.2px;
}
.form-footer-status-value{
  font-size:11px;font-weight:600;color:var(--text-light);
  font-family:'Rajdhani',sans-serif;letter-spacing:0.3px;
}
.form-footer-right{
  display:flex;align-items:center;
  gap:0;
  height:100%;
}
.btn-save,.btn-cancel,.btn-update,.btn-delete,.btn-print{
  padding:0 18px;height:44px;border:none;border-radius:0;
  cursor:pointer;font-size:11px;font-weight:700;
  transition:background .12s, filter .1s;
  text-transform:uppercase;letter-spacing:1px;
  font-family:'Rajdhani',sans-serif;
  display:flex;align-items:center;gap:6px;
  border-left:1px solid var(--border0);
}
.btn-save{
  background:var(--red);color:#fff;
}
.btn-save:hover{filter:brightness(1.12);}
.btn-print{
  background:#16a34a;color:#fff;
}
.btn-print:hover{background:#15803d;filter:brightness(1.1);}
.btn-update{
  background:var(--bg-tabs);color:var(--text-light);
  border-left:1px solid var(--border0);
}
.btn-update:hover{background:var(--bg-hover);color:var(--text-light);}
.btn-delete{
  background:var(--bg-tabs);color:#dc2626;
  border-left:1px solid var(--border0);
}
.btn-delete:hover{background:#dc2626;color:#fff;}
.btn-cancel{
  background:var(--bg-tabs);color:var(--text-dim);
  border-left:1px solid var(--border0);
}
.btn-cancel:hover{background:var(--bg-hover);color:var(--text-light);}
.btn-disabled,.btn-save:disabled,.btn-update:disabled,.btn-delete:disabled,.btn-print:disabled{
  opacity:0.38;cursor:not-allowed;pointer-events:none;
}

/* Product form: preview layout only, using the existing app design */
#productFormModal{
  inset:0;
  top:0;
  left:0;
  transform:none;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  font-size:11px;
}
#productFormModal .form-container{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
#productFormModal .form-header{
  min-height:30px;
  padding:6px 12px;
}
#productFormModal .form-header h2{
  font-size:15px;
  line-height:1;
}
#productFormModal .form-close-btn{
  font-size:22px;
}
.product-preview-top{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto minmax(130px,16vh);
  gap:0;
  flex-shrink:0;
  background:var(--bg-app);
  border-bottom:1px solid var(--border1);
  width:100%;
  min-width:0;
}
/* ── Form Modal Header — Letterhead style (matches original VB6 design) ── */
.product-preview-company{
  display:flex;
  align-items:center;
  padding:10px 20px 10px 14px;
  background:var(--red);
  border-bottom:3px solid var(--red3);
  border-left:5px solid var(--red3);
  margin:0;
  min-height:106px;
  position:relative;
  overflow:hidden;
  gap:12px;
}

/* No glow blob */
.product-preview-company::after{
  display:none;
}

/* ── Centered form-type label (Product Form / Supplier Form / Customer Form) ── */
.hdr-form-type-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  font-family:'Rajdhani',sans-serif;
  font-size:32px;
  font-weight:700;
  font-style:italic;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#ffffff;
  opacity:0.9;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  pointer-events:none;
}

/* ── Logo pair: two bordered boxes side by side, like the original ── */
.product-preview-logos{
  display:flex;
  gap:4px;
  flex-shrink:0;
  position:relative;
  z-index:1;
}

.product-preview-logo{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border:2px solid var(--border0);
  border-radius:3px;
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

/* First logo box — HQ monogram: white bg with accent text for contrast on colored header */
.product-preview-logo.logo-monogram{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.35);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-preview-logo.logo-monogram .logo-q-icon{
  width:44px;
  height:44px;
  display:block;
}

/* Second logo box — petal: white on semi-transparent */
.product-preview-logo.logo-petal{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.3);
}
.product-preview-logo.logo-petal svg{
  width:50px;
  height:50px;
  fill:#ffffff;
  opacity:0.85;
}

/* ── Right-side stamp / seal element ── */
.product-preview-stamp{
  flex-shrink:0;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-left:auto;
  padding-left:16px;
}
.hdr-stamp-ring{
  width:72px;
  height:72px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.55);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  overflow:visible;
}
.hdr-stamp-ring::before{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,0.3);
  pointer-events:none;
}
.hdr-stamp-year{
  font-family:'Rajdhani',sans-serif;
  font-size:16px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:1px;
  line-height:1;
}
.hdr-stamp-est{
  font-size:7.5px;
  font-weight:600;
  color:rgba(255,255,255,0.65);
  letter-spacing:2px;
  text-transform:uppercase;
  line-height:1;
}
.hdr-stamp-div{
  width:38px;
  height:1px;
  background:rgba(255,255,255,0.3);
  margin:1px 0;
}
.hdr-stamp-corp{
  font-size:6.5px;
  font-weight:600;
  color:rgba(255,255,255,0.65);
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:center;
  line-height:1.2;
  max-width:56px;
}

/* ── Details: company name in italic, address lines, datetime ── */
.product-preview-details{
  flex:1;
  min-width:0;
  font-size:11px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  position:relative;
  z-index:1;
}

/* Company name — italic, larger, white on accent bg */
.product-preview-details h3{
  margin:0 0 2px;
  color:#ffffff;
  font-family:'Rajdhani',sans-serif;
  font-size:18px;
  font-weight:700;
  font-style:italic;
  letter-spacing:0.3px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
}

/* Address / tel-fax lines */
.product-preview-details p{
  margin:0;
  font-size:10.5px;
  color:rgba(255,255,255,0.75);
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* The datetime / form-type line */
.product-preview-details p.hdr-datetime{
  color:rgba(255,255,255,0.55);
  font-size:10px;
  margin-top:1px;
}

/* Thin rule */
.product-preview-details .hdr-rule{
  display:block;
  height:1px;
  background:rgba(255,255,255,0.25);
  margin:4px 0 3px;
}

/* Mobile collapse */
@media(max-width:760px){
  .hdr-form-type-badge{
    font-size:20px;
    letter-spacing:0.5px;
  }
  .product-preview-company{
    min-height:84px;
    gap:8px;
    padding:8px 10px;
  }
  .product-preview-logo{
    width:54px;
    height:54px;
    flex:0 0 54px;
  }
  .product-preview-logo.logo-monogram .lm-letters{
    font-size:18px;
  }
  .product-preview-logo.logo-petal svg{
    width:38px;height:38px;
  }
  .product-preview-details h3{
    font-size:14px;
  }
  .product-preview-details p{
    font-size:9.5px;
  }
  .hdr-stamp-ring{
    width:56px;
    height:56px;
  }
  .hdr-stamp-year{
    font-size:13px;
  }
}
.product-preview-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  background:var(--bg-tabs);
  border-bottom:1px solid var(--border1);
  color:var(--text-mid);
  font-size:11px;
  margin:0;
  flex-wrap:wrap;
}
.product-preview-search-label{
  color:var(--text-mid);
  font-size:11px;
  white-space:nowrap;
}
.product-preview-searchbox{
  min-height:26px;
  display:flex;
  align-items:center;
  padding:4px 8px;
  background:var(--bg-input);
  border:1px solid var(--border1);
  border-radius:4px;
  color:var(--text-light);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#productPreviewFilterField {
  width:min(140px,24vw);
}

#productPreviewFilterValue {
  width:min(220px,40vw);
}
.product-preview-searchbox:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red);
}
.product-preview-grid{
  display:flex;
  flex-direction:column;
  position:relative;
  min-height:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--bg-app);
  margin:0;
  padding:0;
  margin-top:-1px;
}
.product-preview-grid .tbl-wrap{
  flex:1 1 auto;
  overflow:auto;
  background:var(--bg-app);
  scroll-behavior:smooth;
  min-width:0;
  margin:0;
  padding-bottom:0;
}
.product-preview-grid .tbl-wrap::-webkit-scrollbar{
  width:10px;height:18px;
}
.product-preview-grid .tbl-wrap::-webkit-scrollbar-track{
  background:linear-gradient(to right, var(--bg-app) 0%, var(--bg-row-odd) 50%, var(--bg-app) 100%);
  border-radius:10px;
}
.product-preview-grid .tbl-wrap::-webkit-scrollbar-thumb{
  background:var(--bg-scrollbar);
  border-radius:10px;
  border:1px solid var(--bg-app);
}
.product-preview-grid .tbl-wrap::-webkit-scrollbar-thumb:hover{
  background:var(--red);
}
.product-preview-grid table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  margin:0;
}
.product-preview-grid thead th{
  border-top:0;
}
.product-preview-grid th,
.product-preview-grid td{
  padding:5px 7px;
  border:1px solid var(--border1);
  color:var(--text-td);
  background:var(--bg-row-even);
  font-size:11px;
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:140px;
  margin:0;
}
.product-preview-grid thead{
  margin:0;
  padding:0;
}
.product-preview-grid tbody{
  margin:0;
  padding:0;
}
.product-preview-grid tr{
  margin:0;
  padding:0;
}
.product-preview-grid tbody tr.sel,
.product-preview-grid tbody tr.sel td,
.product-preview-grid tbody tr.sel td:first-child,
.product-preview-grid tbody tr:hover,
.product-preview-grid tbody tr:hover td,
.product-preview-grid tbody tr:hover td:first-child{
  background:var(--bg-sel)!important;
  color:var(--text-sel)!important;
}
.product-preview-grid tbody tr.sel td:first-child,
.product-preview-grid tbody tr:hover td:first-child{
  box-shadow:inset 3px 0 0 0 var(--red);
}
.product-preview-grid th{
  background:var(--bg-thead);
  color:var(--text-thead);
  font-weight:600;
}
.product-preview-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  padding:0;
  background:transparent;
  border:0;
  pointer-events:none;
  z-index:4;
}
.product-preview-controls .pag-btn{
  min-width:78px;
  height:18px;
  padding:0 8px;
  font-size:10px;
  line-height:1;
  border-radius:0;
  pointer-events:auto;
}
.product-preview-controls .page-info{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-width:74px;
  padding:1px 6px;
  border:1px solid var(--border1);
  border-radius:2px;
  background:color-mix(in srgb, var(--bg-app) 86%, transparent);
  font-size:10px;
  line-height:1;
  color:var(--text-mid);
  text-align:center;
  pointer-events:none;
}
#productFormModal .form-tabs{
  flex-shrink:0;
}
#productFormModal .form-tab-btn{
  padding:6px 10px;
  font-size:14px;
}
#productFormModal .form-content{
  flex:1;
  min-height:0;
  padding:8px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
#productFormModal .form-content::-webkit-scrollbar{
  width:0;
  background:transparent;
}
/* --- Product Info tab: 3-column layout + bulletin sidebar --- */
#productFormModal .form-content:has(#productInfo.active){
  display:grid;
  grid-template-columns:1fr 420px;
  gap:10px;
  align-items:start;
}
#productFormModal .form-content:has(#productInfo.active) > #productInfo{
  display:block;
  grid-column:1;
  min-width:0;
}
#productFormModal .form-content:has(#productInfo.active) > #bulletin{
  display:block;
  grid-column:2;
  min-width:0;
  position:sticky;
  top:0;
}
#productFormModal .form-content > .form-tab-content.active:not(#productInfo){
  width:100%;
}

/* pi-layout: 3 columns compressed to make room for image */
.pi-layout{
  display:grid;
  grid-template-columns:0.65fr 0.65fr 0.65fr;
  gap:0;
  align-items:start;
}
#sellingPriceMultiplierCards{
  display:flex;
  justify-content:center;
  width:100%;
}
#sellingPriceMultiplierCards > #pricingMultiplierCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(7, auto);
  grid-auto-flow:column;
  column-gap:16px;
  row-gap:8px;
  width:min(100%, 1100px);
  align-items:start;
}
#sellingPriceMultiplierCards .pricing-card{
  margin-bottom:0;
}
#localCosting > .pi-layout{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
#localCosting > .pi-layout > .pi-col{
  display:contents;
}
#localCosting .local-costing-image{
  grid-column:1;
  grid-row:1;
  padding:4px 6px;
}
#localCosting .local-costing-info{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 6px;
}
#localCosting .local-costing-discounts{
  grid-column:3;
  grid-row:1;
  padding:4px 6px;
}
.pi-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 6px;
  border-right:1px solid var(--border1);
  width:100%;
  box-sizing:border-box;
}
.pi-col:last-child{
  border-right:none;
}

/* form-group inside pi-layout: label on top of input (stacked) */
.pi-layout .form-group{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.pi-layout .form-group label{
  font-size:10px;
  color:var(--text-mid);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pi-layout .form-group input,
.pi-layout .form-group select,
.pi-layout .form-group textarea{
  min-height:24px;
  padding:3px 6px;
  font-size:11px;
  width:100%;
  box-sizing:border-box;
}
.pi-layout .form-group textarea{
  min-height:52px;
  resize:vertical;
}
.pi-layout .form-group button{
  min-width:26px !important;
  min-height:24px !important;
  padding:3px 6px !important;
  border-radius:4px !important;
  font-size:11px !important;
  line-height:1 !important;
}
.currency-cost-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border1);
}
.currency-cost-toolbar h4{
  margin:0;
  font-size:11px;
  color:var(--text-mid);
}
.currency-cost-toolbar button{
  min-width:auto;
  padding:4px 8px;
  font-size:10px;
}
.currency-cost-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.currency-cost-set{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  padding:8px 10px 10px;
  border:1px solid var(--border1);
  border-radius:6px;
  background:var(--bg-row-even);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.currency-cost-set-header{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-8px -10px 2px;
  padding:6px 10px;
  border-bottom:1px solid var(--border1);
  border-radius:6px 6px 0 0;
  background:var(--bg-row-odd);
}
.currency-cost-set-header h4{
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
  color:var(--text-mid);
}
#currencyNameModal .form-group + .form-group{
  margin-top:14px;
}
.currency-cost-set input[type="number"]{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.currency-cost-set input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(192,57,43,0.15);
}
.currency-cost-set [data-currency-field="peso_cost"],
.currency-cost-set [data-currency-field="peso_cost_extra"]{
  color:var(--text-mid);
  background:var(--bg-row-odd);
}
.currency-peso-cost-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
}
.currency-peso-cost-row label{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
}
#productFormModal .currency-peso-cost-row label .currency-peso-add-btn{
  position:static;
  transform:none;
  margin:0;
}
.currency-peso-cost-row button{
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-hover);
  color:var(--text-light);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.currency-peso-cost-row .currency-peso-remove-btn{
  justify-self:end;
}
.currency-peso-cost-row button:hover{
  background:var(--red);
  color:var(--text-white);
}
.currency-cost-set .repeatable-field-remove-btn{
  width:18px;
  height:18px;
  min-width:18px !important;
  min-height:18px !important;
  padding:0 !important;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.currency-cost-set .repeatable-field-remove-btn:hover{
  background:var(--red2);
  color:var(--text-white);
}
.currency-cost-set-header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.currency-cost-set-active-btn{
  border:1px solid var(--border1);
  border-radius:10px;
  background:var(--bg-row-even);
  color:var(--text-mid);
  font-size:9px;
  font-weight:700;
  letter-spacing:0.2px;
  text-transform:uppercase;
  padding:3px 8px;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.currency-cost-set-active-btn:hover{
  border-color:var(--red);
  color:var(--red);
}
.currency-cost-set-active-btn.is-active{
  background:var(--red);
  border-color:var(--red);
  color:var(--text-white);
  cursor:default;
}
/* ---- FNPC source selector (which FNPC feeds the Selling Price Multiplier cards) ---- */
.fnpc-source-field{
  display:flex;
  align-items:stretch;   /* button takes the same height as the input */
  gap:6px;
}
.fnpc-source-field input{
  flex:1 1 auto;
  min-width:0;           /* lets the input shrink to make room for the button */
}
.fnpc-source-btn{
  flex:0 0 auto;
  width:84px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-row-even);
  color:var(--text-mid);
  font-size:9px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  letter-spacing:0.2px;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;    /* always one line */
  overflow:hidden;
  padding:2px 4px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fnpc-source-btn:hover:not(:disabled){
  border-color:var(--red);
  color:var(--red);
}
.fnpc-source-btn.is-active{
  background:var(--red);
  border-color:var(--red);
  color:var(--text-white);
  cursor:default;
}
.fnpc-source-status{
  margin:0 0 10px 0;
  padding:6px 10px;
  border:1px solid var(--border1);
  border-left:3px solid var(--red);
  border-radius:4px;
  background:var(--bg-row-even);
  color:var(--text-mid);
  font-size:11px;
}
.fnpc-source-status strong{color:var(--text-dark, inherit);}
.fnpc-source-status.is-empty{color:var(--red);}
.currency-cost-set.currency-cost-set-active{
  position:relative;
  border-color:var(--border1);
}
.currency-cost-set.currency-cost-set-active::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:6px 0 0 6px;
  background:var(--red);
}
.currency-cost-set.currency-cost-set-active .currency-cost-set-header{
  background:var(--bg-row-odd);
}

/* Discounts */
.discount-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border1);
}
.discount-toolbar h4{
  margin:0;
  font-size:11px;
  color:var(--text-mid);
}
.discount-toolbar button{
  min-width:auto;
  padding:4px 8px;
  font-size:10px;
}
.discount-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.discount-set{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  min-height:30px;
}
.discount-set > label{
  flex:1 1 auto;
  font-size:11px;
  color:var(--text-mid);
}
.discount-clear-btn{
  width:20px;
  min-width:20px !important;
  height:20px;
  min-height:20px !important;
  padding:0 !important;
  border:0;
  background:transparent;
  color:var(--text-dim);
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.discount-clear-btn:hover{
  color:var(--red);
}
.discount-set [data-discount-field="value"]{
  width:100%;
  max-width:150px;
  min-height:30px;
  padding:6px 8px;
  font-size:12px;
  border:1px solid var(--border1);
  border-radius:3px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
}
.discount-set [data-discount-field="value"]::-webkit-outer-spin-button,
.discount-set [data-discount-field="value"]::-webkit-inner-spin-button,
[data-cod-discount]::-webkit-outer-spin-button,
[data-cod-discount]::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none;
}
.discount-set [data-discount-field="value"],
[data-cod-discount]{
  appearance:textfield;
  -moz-appearance:textfield;
}
.discount-set input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(192,57,43,0.15);
}
.discount-set .repeatable-field-remove-btn{
  width:18px;
  height:18px;
  min-width:18px !important;
  min-height:18px !important;
  padding:0 !important;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.15s ease, color 0.15s ease;
}
.discount-set .repeatable-field-remove-btn:hover{
  background:var(--red2);
  color:var(--text-white);
}
.pi-layout .pi-subsection{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:10px;
  border-top:1px solid var(--border1);
}
.pi-layout .pi-subsection:first-child{
  border-top:none;
  padding-top:0;
}
.pi-layout .pi-subsection h4{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--text-mid);
}
.pi-layout .barcode-mode-control{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:4px;
}

.pi-layout .barcode-mode-control[data-mode="auto"]{
  grid-template-columns:100px minmax(0,1fr);
}

.pi-layout .barcode-mode-control[data-mode="manual"]{
  grid-template-columns:82px minmax(0,1fr);
}

/* Existing grid rules no longer needed for productInfo - kept for other tabs */
#productFormModal .form-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
}
#productFormModal .form-section{
  min-width:0;
  gap:7px;
  padding:10px;
  background:var(--bg-row-even);
  border:1px solid var(--border1);
  border-radius:6px;
}
/* pi-layout replaces form-section/form-grid in productInfo tab */
#productFormModal .form-section h4{
  font-size:11px;
  padding-bottom:4px;
  letter-spacing:0.25px;
}
#productFormModal .form-row{
  grid-template-columns:1fr;
  gap:7px;
}
#productFormModal .form-group{
  min-width:0;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:6px;
}
#productFormModal .form-group label{
  font-size:10px;
  line-height:1.15;
}
#productFormModal .country-made-field{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
#productFormModal .country-made-field > input{
  flex:1;
  min-width:0;
}
#productFormModal .country-made-source{
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  padding:2px;
  border:1px solid var(--border1);
  border-radius:5px;
  background:var(--bg-card);
}
#productFormModal .country-made-option{
  position:relative;
  display:flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border-radius:3px;
  color:var(--text-muted);
  cursor:pointer;
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
#productFormModal .country-made-option:hover{
  background:var(--bg-hover);
  color:var(--text-light);
}
#productFormModal .country-made-option input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
#productFormModal .country-made-option:has(input:checked){
  background:var(--red);
  color:var(--text-white);
}
#productFormModal .country-made-option:focus-within{
  outline:2px solid var(--red3);
  outline-offset:1px;
}
#productFormModal .country-made-option span{
  line-height:22px;
}
#productFormModal .country-made-source label{
  display:flex;
  align-items:center;
  margin:0;
}
#productFormModal .repeatable-field-group label{
  overflow:visible;
  text-overflow:clip;
}
#productFormModal .form-group input,
#productFormModal .form-group select,
#productFormModal .form-group textarea,
#productFormModal .pricing-input,
#productFormModal .pricing-output,
#productFormModal .pricing-inputs-row input{
  min-height:26px;
  padding:5px 8px;
  font-size:11px;
}
#productFormModal .form-group textarea{
  min-height:56px;
}
#productFormModal .form-group button:not(.field-add-btn){
  min-width:28px !important;
  min-height:26px !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  font-size:11px !important;
  line-height:1 !important;
}
#productFormModal .field-add-btn{
  min-width:28px !important;
  min-height:26px !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  font-size:11px !important;
  line-height:1 !important;
}
#productFormModal .form-group > div{
  min-width:0;
}
#productFormModal .form-group > div[style*="display:flex"]{
  gap:5px !important;
}
#productFormModal .product-supplier-stock-number-row .form-group{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:100%;
}
#productFormModal .product-supplier-stock-number-row{
  display:block;
  width:100%;
}
#productFormModal .product-supplier-stock-number-row .form-group input{
  width:100%;
  min-width:0;
}
#productFormModal .product-supplier-stock-number-row .form-group label{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  white-space:nowrap;
}
#productFormModal .barcode-mode-control{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:100%;
  max-width:260px;
}
#productFormModal .pricing-split-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:100%;
  max-width:none;
}
#productFormModal .barcode-mode-control[data-mode="auto"]{
  grid-template-columns:100px minmax(0,1fr);
}
#productFormModal .barcode-mode-control[data-mode="manual"]{
  grid-template-columns:82px minmax(0,1fr);
}
#productFormModal .form-group:has(.barcode-mode-control){
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:6px;
}
#productFormModal .form-group:has(.barcode-mode-control) .barcode-mode-control{
  width:100%;
  max-width:260px;
}
#productFormModal .barcode-mode-control select{
  width:100%;
  min-width:0;
}
#productFormModal .barcode-mode-control input{
  width:100%;
  min-width:0;
}
#productFormModal .pricing-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
#productFormModal .pricing-column{
  min-width:0;
}
#productFormModal .bulletin-container{
  max-width:none;
  margin:0;
  padding:10px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-row-even);
}
#productFormModal .bulletin-header{
  margin:0 0 8px;
  padding:0 0 6px;
}
#productFormModal .bulletin-title{
  font-size:12px;
}
#productFormModal .bulletin-subtitle{
  display:none;
}
#productFormModal .bulletin-content{
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  margin:0 0 8px;
}
#productFormModal .bulletin-column{
  width:100%;
  height:auto;
}
#productFormModal .image-preview-box,
#productFormModal .upload-dropzone{
  height:320px;
  border-radius:4px;
}
#productFormModal .upload-dropzone{
  padding:12px;
  height:96px;
}
#productFormModal .upload-icon,
#productFormModal .placeholder-icon{
  width:28px;
  height:28px;
}
#productFormModal .upload-main,
#productFormModal .placeholder-text{
  font-size:11px;
}
#productFormModal .upload-hint{
  font-size:9px;
}
#productFormModal .bulletin-buttons{
  margin:0;
  gap:6px;
}
#productFormModal .bulletin-buttons .btn{
  flex:1 1 0;
  min-height:30px;
  padding:7px 8px;
  font-size:10px;
}
#productFormModal #bulletin:not(.active){
  display:none;
}
#productFormModal .form-content:has(#productInfo.active) #bulletin{
  display:block;
}
#productFormModal .form-footer{
  flex-shrink:0;
}

#supplierFormModal,
#customerFormModal{
  inset:0;
  top:0;
  left:0;
  transform:none;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  font-size:11px;
}
#supplierFormModal .form-container,
#customerFormModal .form-container{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
#supplierFormModal .form-tabs,
#customerFormModal .form-tabs{
  flex-shrink:0;
}
#supplierFormModal .form-tab-btn,
#customerFormModal .form-tab-btn{
  padding:6px 10px;
  font-size:12px;
}
#supplierFormModal .form-content,
#customerFormModal .form-content{
  flex:1;
  min-height:0;
  padding:8px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
#supplierFormModal .form-content::-webkit-scrollbar,
#customerFormModal .form-content::-webkit-scrollbar{
  width:0;
  background:transparent;
}
#supplierFormModal .form-grid,
#customerFormModal .form-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
}
#supplierFormModal #supplier-info .form-grid{
  align-items:start;
}
#supplierFormModal #supplier-payment .form-grid,
#customerFormModal #customerPayment .form-grid{
  display:block;
  position:relative;
}
#supplierFormModal #supplier-payment .form-grid > .form-section:nth-child(1),
#supplierFormModal #supplier-payment .form-grid > .form-section:nth-child(3),
#customerFormModal #customerPayment .form-grid > .form-section:nth-child(1),
#customerFormModal #customerPayment .form-grid > .form-section:nth-child(3){
  width:54%;
}
#supplierFormModal #supplier-payment .form-grid > .form-section:nth-child(3),
#customerFormModal #customerPayment .form-grid > .form-section:nth-child(3){
  margin-top:10px;
}
#supplierFormModal #supplier-payment .form-grid > .form-section:nth-child(2),
#customerFormModal #customerPayment .form-grid > .form-section:nth-child(2){
  position:absolute;
  top:0;
  right:0;
  width:calc(46% - 10px);
}
#supplierFormModal .form-col,
#customerFormModal .form-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
#supplierFormModal .form-section,
#customerFormModal .form-section{
  min-width:0;
  gap:7px;
  padding:10px;
  background:var(--bg-row-even);
  border:1px solid var(--border1);
  border-radius:6px;
}
#supplierFormModal .form-section h4,
#customerFormModal .form-section h4{
  font-size:11px;
  padding-bottom:4px;
  letter-spacing:0.25px;
}
#supplierFormModal .form-row,
#customerFormModal .form-row{
  grid-template-columns:1fr;
  gap:7px;
}
#supplierFormModal .form-group,
#customerFormModal .form-group{
  min-width:0;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:6px;
}
#supplierFormModal .form-group label,
#customerFormModal .form-group label{
  font-size:10px;
  line-height:1.15;
}
#supplierFormModal .form-group input,
#supplierFormModal .form-group select,
#supplierFormModal .form-group textarea,
#customerFormModal .form-group input,
#customerFormModal .form-group select,
#customerFormModal .form-group textarea{
  min-height:26px;
  padding:5px 8px;
  font-size:11px;
}
#supplierFormModal .form-group textarea,
#customerFormModal .form-group textarea{
  min-height:56px;
}
#supplierFormModal .form-group button,
#customerFormModal .form-group button{
  min-width:28px !important;
  min-height:26px !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  font-size:11px !important;
  line-height:1 !important;
}
#supplierFormModal .form-group > div,
#customerFormModal .form-group > div{
  min-width:0;
}
#supplierFormModal .form-group > div[style*="display:flex"],
#customerFormModal .form-group > div[style*="display:flex"]{
  gap:5px !important;
}
#supplierFormModal .form-footer,
#customerFormModal .form-footer{
  flex-shrink:0;
}

/* ─── CUSTOMER REPEATABLE SINGLE-FIELD CONTACTS (Cellphone 2, Messenger/FB 2, etc.) ─── */
#supplierFormModal .repeatable-field-group label,
#customerFormModal .repeatable-field-group label,
#productFormModal .repeatable-field-group label,
#directoryFormModal .repeatable-field-group label{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}
#supplierFormModal .field-add-btn,
#customerFormModal .field-add-btn,
#productFormModal .field-add-btn,
#directoryFormModal .field-add-btn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  flex-shrink:0;
  border:1px solid var(--border1);
  border-radius:50%;
  background:var(--bg-input);
  color:var(--text-dim);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
#supplierFormModal .field-add-btn:hover,
#customerFormModal .field-add-btn:hover,
#productFormModal .field-add-btn:hover,
#directoryFormModal .field-add-btn:hover{
  background:var(--red);
  border-color:var(--red);
  color:var(--text-white);
}
#productFormModal .currency-peso-cost-row{
  display:grid !important;
  grid-template-columns:132px minmax(0,1fr) !important;
  align-items:center;
  gap:6px;
}
#productFormModal .currency-peso-cost-row > label{
  display:flex !important;
  align-items:center;
  gap:4px;
  min-width:0;
  margin:0;
}
#productFormModal .currency-peso-cost-row .currency-peso-add-btn{
  position:static !important;
  transform:none !important;
  margin:0;
}
#productFormModal .currency-peso-cost-row .currency-peso-remove-btn{
  position:static;
  transform:none;
  margin:0;
}
#productFormModal .product-supplier-stock-number-row .form-group{
  grid-template-columns:160px minmax(0,1fr);
}
#productFormModal .product-supplier-stock-number-row .form-group input{
  width:100%;
  min-width:0;
}
#supplierFormModal .repeatable-field-extra-list,
#customerFormModal .repeatable-field-extra-list,
#productFormModal .repeatable-field-extra-list,
#directoryFormModal .repeatable-field-extra-list{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#supplierFormModal .repeatable-field-extra-list:empty,
#customerFormModal .repeatable-field-extra-list:empty,
#productFormModal .repeatable-field-extra-list:empty,
#directoryFormModal .repeatable-field-extra-list:empty{
  display:none;
}
#supplierFormModal .repeatable-field-extra-row,
#customerFormModal .repeatable-field-extra-row,
#productFormModal .repeatable-field-extra-row,
#directoryFormModal .repeatable-field-extra-row{
  margin:0;
}
#supplierFormModal .repeatable-field-extra-row .form-group label,
#customerFormModal .repeatable-field-extra-row .form-group label,
#productFormModal .repeatable-field-extra-row .form-group label,
#directoryFormModal .repeatable-field-extra-row .form-group label{
  display:flex;
  align-items:center;
  gap:6px;
}
#supplierFormModal .repeatable-field-index,
#customerFormModal .repeatable-field-index,
#productFormModal .repeatable-field-index,
#directoryFormModal .repeatable-field-index{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-dim);
  background:var(--bg-thead);
  border-radius:3px;
  padding:1px 5px;
}
#supplierFormModal .repeatable-field-remove-btn,
#customerFormModal .repeatable-field-remove-btn,
#productFormModal .repeatable-field-remove-btn,
#directoryFormModal .repeatable-field-remove-btn{
  margin-left:auto;
  width:16px;
  height:16px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#supplierFormModal .repeatable-field-remove-btn:hover,
#customerFormModal .repeatable-field-remove-btn:hover,
#productFormModal .repeatable-field-remove-btn:hover,
#directoryFormModal .repeatable-field-remove-btn:hover{
  background:var(--red2);
  color:var(--text-white);
}

/* ─── CUSTOMER CONTACT PERSONS REPEATER ─── */
#customerFormModal .contact-persons-header,
#supplierFormModal .contact-persons-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border1);
  padding-bottom:6px;
}
#customerFormModal .contact-persons-header h4,
#supplierFormModal .contact-persons-header h4{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
#customerFormModal .btn-add-contact,
#supplierFormModal .btn-add-contact{
  flex:0 0 auto;
  min-width:auto;
  padding:5px 10px;
  font-size:10px;
  font-weight:600;
  border-radius:4px;
  letter-spacing:0.2px;
}
#customerFormModal .customer-contact-persons-list,
#supplierFormModal .customer-contact-persons-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border1);
  border-radius:5px;
  overflow:hidden;
  background:var(--bg-input);
}
#customerFormModal .customer-contact-person-columns,
#customerFormModal .customer-contact-person-row,
#supplierFormModal .customer-contact-person-columns,
#supplierFormModal .customer-contact-person-row{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 22px;
  align-items:center;
  gap:8px;
  padding:6px 8px;
}
#customerFormModal .customer-contact-person-columns,
#supplierFormModal .customer-contact-person-columns{
  background:var(--bg-thead);
  color:var(--text-thead);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
#customerFormModal .customer-contact-person-row,
#supplierFormModal .customer-contact-person-row{
  border-top:1px solid var(--border2);
}
#customerFormModal .customer-contact-person-row:nth-child(even),
#supplierFormModal .customer-contact-person-row:nth-child(even){
  background:var(--bg-row-odd);
}
#customerFormModal .customer-contact-person-index,
#supplierFormModal .customer-contact-person-index{
  font-size:10px;
  color:var(--text-dim);
  text-align:center;
}
#customerFormModal .customer-contact-person-row input,
#supplierFormModal .customer-contact-person-row input{
  width:100%;
  min-height:24px;
  padding:4px 7px;
  font-size:11px;
  border:1px solid var(--border1);
  border-radius:3px;
  background:var(--bg-input);
  color:var(--text-light);
}
#customerFormModal .customer-contact-person-row input:focus,
#supplierFormModal .customer-contact-person-row input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 2px var(--shadow-accent);
}
#customerFormModal .customer-contact-person-remove,
#supplierFormModal .customer-contact-person-remove{
  width:20px;
  height:20px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#customerFormModal .customer-contact-person-remove:hover,
#supplierFormModal .customer-contact-person-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}
#customerFormModal .form-grid > .branch-section,
#supplierFormModal .form-grid > .branch-section{
  grid-column:1 / -1;
}
#customerFormModal .branch-section .form-section-header,
#supplierFormModal .branch-section .form-section-header{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--bg-row-even);
  margin:-10px -10px 0;
  padding:10px 10px 6px;
  border-radius:6px 6px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border1);
}
#customerFormModal .branch-section .form-section-header h4,
#supplierFormModal .branch-section .form-section-header h4{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
#customerFormModal .btn-add-branch,
#supplierFormModal .btn-add-branch,
#directoryFormModal .btn-add-branch{
  flex:0 0 auto;
  min-width:auto;
  padding:5px 10px;
  font-size:10px;
  font-weight:600;
  border-radius:4px;
  letter-spacing:0.2px;
  white-space:nowrap;
}
#customerFormModal .customer-branches-list,
#customerFormModal .customer-contact-persons-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border1);
  border-radius:5px;
  overflow:hidden;
  background:var(--bg-input);
}
#customerFormModal .customer-branch-row,
#customerFormModal .customer-contact-person-row{
  border-top:1px solid var(--border2);
}
#customerFormModal .customer-branch-row:nth-child(even),
#customerFormModal .customer-contact-person-row:nth-child(even){
  background:var(--bg-row-odd);
}
#customerFormModal .customer-branch-row .branch-row-header,
#customerFormModal .customer-contact-person-row{
  display:grid;
  align-items:center;
  gap:8px;
  padding:8px;
}
#customerFormModal .customer-branch-row .branch-row-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
#customerFormModal .customer-branch-row .customer-branch-index{
  font-size:11px;
  font-weight:700;
  color:var(--text-dim);
}
#customerFormModal .customer-branch-row .customer-branch-remove{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#customerFormModal .customer-branch-row .customer-branch-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}
/* ─── DIRECTORY FORM: TWO INDEPENDENT COLUMNS ───
   Left column = identity/address fields, which must never move.
   Right column = contact fields (Fax, Telephone, Email, etc.) grouped
   together, since Telephone naturally belongs with the rest of the
   contact info. align-items:start means the two columns size
   independently — growing the Telephone list only pushes the other
   contact fields further down in the SAME column; the identity column
   on the left is structurally untouched. */
#directoryFormModal .form-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
}
#directoryFormModal .form-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
#directoryFormModal .form-col .form-section{
  width:100%;
}
#directoryFormModal .form-section{
  min-width:0;
  gap:7px;
  padding:10px;
  background:var(--bg-row-even);
  border:1px solid var(--border1);
  border-radius:6px;
}
#directoryFormModal .form-section h4{
  font-size:11px;
  padding-bottom:4px;
  letter-spacing:0.25px;
}
#directoryFormModal .form-row{
  display:flex;
  flex-direction:column;
  gap:7px;
}
#directoryFormModal .form-group{
  min-width:0;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:6px;
}
#directoryFormModal .form-group label{
  font-size:10px;
  line-height:1.15;
}
#directoryFormModal .form-group input,
#directoryFormModal .form-group select,
#directoryFormModal .form-group textarea{
  min-height:26px;
  padding:5px 8px;
  font-size:11px;
}
#directoryFormModal .form-group textarea{
  min-height:56px;
}
#directoryFormModal .form-group button{
  min-width:28px !important;
  min-height:26px !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  font-size:11px !important;
  line-height:1 !important;
}
#directoryFormModal .form-group > div{
  min-width:0;
}
#directoryFormModal .form-group > div[style*="display:flex"]{
  gap:5px !important;
}
/* ─── DIRECTORY TELEPHONE REPEATER ───
   Its own full-width row inside the Contact Information card, not
   paired with any other field. The list has no height cap and no
   scrollbar — it just grows, the same way an address textarea would,
   pushing the remaining contact fields down as needed. The "+ Add"
   button reuses the app's standard secondary-button look (see
   .btn/.btn-secondary/.btn-add-branch) instead of a one-off style. */
#directoryFormModal .directory-telephone-repeater{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
#directoryFormModal .directory-telephone-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#directoryFormModal .directory-telephone-toolbar h4{
  margin:0;
  color:var(--text-mid);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.3px;
  border-bottom:none;
  padding-bottom:0;
}
#directoryFormModal .directory-telephone-add-btn{
  flex:0 0 auto;
}
#directoryFormModal .directory-telephone-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#directoryFormModal .directory-telephone-row{
  display:flex;
  align-items:center;
  gap:8px;
}
#directoryFormModal .directory-telephone-row input{
  flex:1;
  min-width:0;
}
#directoryFormModal .directory-telephone-remove{
  width:28px;
  height:28px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#directoryFormModal .directory-telephone-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}

/* ─── DIRECTORY FORM: FULL-SCREEN SHELL ───
   Matches the Product/Supplier/Customer modal chrome: full-viewport
   dialog with the VB6 letterhead header, live search/preview grid,
   and a flexed scrollable form body + fixed footer. The dedicated
   .form-grid/.form-col/.directory-telephone-* rules above are left
   untouched since Directory keeps its own simpler two-column layout. */
#directoryFormModal{
  inset:0;
  top:0;
  left:0;
  transform:none;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  font-size:11px;
}
#directoryFormModal .form-container{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
#directoryFormModal .form-content{
  flex:1;
  min-height:0;
  padding:8px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
#directoryFormModal .form-content::-webkit-scrollbar{
  width:0;
  background:transparent;
}
#directoryFormModal .form-footer{
  flex-shrink:0;
}

/* ─── CUSTOMER PERSONALITY PURCHASER/BUYER REPEATER ───
   Each entry is a fully standalone card, styled identically to the
   static Owner/President/etc. sections (same .form-section look, own
   h4 title, own form-row/form-group fields) — not nested inside a
   wrapper card. A sticky toolbar with the "+ Add" button stays pinned
   to the top of the scroll area so it's reachable no matter how far
   down the list you've scrolled. Cards simply stack vertically inside
   their own grid cell, so adding more never disturbs the rest of the
   tab's layout. */
#customerFormModal .customer-personality-repeater{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
#customerFormModal .personality-repeater-toolbar{
  position:sticky;
  top:-8px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--bg-app);
  padding:8px 0 6px;
  border-bottom:1px solid var(--border1);
}
#customerFormModal .personality-repeater-toolbar h4{
  color:var(--red);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.25px;
  margin:0;
  border-bottom:none;
  padding-bottom:0;
}
#customerFormModal .customer-personality-contacts-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#customerFormModal .customer-personality-contact-row.form-section{
  gap:7px;
}
#customerFormModal .customer-personality-contact-row .personality-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid var(--border1);
  padding-bottom:6px;
}
#customerFormModal .customer-personality-contact-row .personality-card-header h4{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
#customerFormModal .customer-personality-contact-remove{
  width:20px;
  height:20px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#customerFormModal .customer-personality-contact-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}
#customerFormModal .customer-branch-row .branch-row-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:10px;
}
#customerFormModal .customer-branch-row .branch-row-grid .form-group{
  grid-template-columns:100px minmax(0,1fr);
}
#customerFormModal .customer-branch-row .branch-row-grid .form-group.full{
  grid-column:1 / -1;
}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(1),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(1){grid-column:1;grid-row:1;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(2),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(2){grid-column:1;grid-row:2;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(3),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(3){grid-column:1;grid-row:3;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(4),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(4){grid-column:2;grid-row:1;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(5),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(5){grid-column:2;grid-row:2;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(6),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(6){grid-column:2;grid-row:3;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(7),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(7){grid-column:1;grid-row:4;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(8),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(8){grid-column:2;grid-row:4;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(9),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(9){grid-column:1;grid-row:5;}
#customerFormModal .customer-branch-row .branch-row-grid .form-group:nth-child(10),
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group:nth-child(10){grid-column:2;grid-row:5;}
#customerFormModal .customer-branch-row input,
#customerFormModal .customer-branch-row textarea{
  width:100%;
  min-height:28px;
  padding:6px 8px;
  font-size:12px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-input);
  color:var(--text-light);
}
#customerFormModal .customer-branch-row textarea{
  resize:vertical;
}
#supplierFormModal .supplier-branches-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border1);
  border-radius:5px;
  overflow:hidden;
  background:var(--bg-input);
}
#supplierFormModal .supplier-branch-row{
  border-top:1px solid var(--border2);
}
#supplierFormModal .supplier-branch-row:nth-child(even){
  background:var(--bg-row-odd);
}
#supplierFormModal .supplier-branch-row .branch-row-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px;
}
#supplierFormModal .supplier-branch-row .supplier-branch-index{
  font-size:11px;
  font-weight:700;
  color:var(--text-dim);
}
#supplierFormModal .supplier-branch-row .supplier-branch-remove{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#supplierFormModal .supplier-branch-row .supplier-branch-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}
#supplierFormModal .supplier-branch-row .branch-row-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:10px;
}
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group{
  grid-template-columns:100px minmax(0,1fr);
}
#supplierFormModal .supplier-branch-row .branch-row-grid .form-group.full{
  grid-column:1 / -1;
}
#supplierFormModal .supplier-branch-row input,
#supplierFormModal .supplier-branch-row textarea{
  width:100%;
  min-height:28px;
  padding:6px 8px;
  font-size:12px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-input);
  color:var(--text-light);
}
#supplierFormModal .supplier-branch-row textarea{
  resize:vertical;
}

#customerFormModal .factory-row,
#supplierFormModal .factory-row{
  border:1px solid var(--border1);
  border-radius:5px;
  padding:10px;
  margin-top:10px;
  background:var(--bg-input);
}
#customerFormModal .factory-row-header,
#supplierFormModal .factory-row-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  color:var(--text-light);
}
#customerFormModal .factory-remove,
#supplierFormModal .factory-remove{
  width:22px;
  height:22px;
  border:0;
  border-radius:3px;
  background:var(--red);
  color:var(--text-white);
  cursor:pointer;
}
#customerFormModal .factory-grid,
#supplierFormModal .factory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#customerFormModal .factory-grid .form-group.full,
#supplierFormModal .factory-grid .form-group.full{
  grid-column:1 / -1;
}
.repeatable-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border1);
}
.repeatable-section-header h4{
  margin:0;
}
/* ─── LISTING ADDRESSES (Supplier/Customer) ─── */
#supplierFormModal .listing-addresses-list,
#customerFormModal .listing-addresses-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border1);
  border-radius:5px;
  overflow:hidden;
  background:var(--bg-input);
}
#supplierFormModal .listing-address-row,
#customerFormModal .listing-address-row{
  border-top:1px solid var(--border2);
}
#supplierFormModal .listing-address-row:first-child,
#customerFormModal .listing-address-row:first-child{
  border-top:none;
}
#supplierFormModal .listing-address-row:nth-child(even),
#customerFormModal .listing-address-row:nth-child(even){
  background:var(--bg-row-odd);
}
#supplierFormModal .listing-address-row .listing-address-row-header,
#customerFormModal .listing-address-row .listing-address-row-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px;
}
#supplierFormModal .listing-address-row .listing-address-index,
#customerFormModal .listing-address-row .listing-address-index{
  font-size:11px;
  font-weight:700;
  color:var(--text-dim);
}
#supplierFormModal .listing-address-row .listing-address-remove,
#customerFormModal .listing-address-row .listing-address-remove{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--text-dim);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
#supplierFormModal .listing-address-row .listing-address-remove:hover,
#customerFormModal .listing-address-row .listing-address-remove:hover{
  background:var(--red2);
  color:var(--text-white);
}
#supplierFormModal .listing-address-row .listing-address-grid,
#customerFormModal .listing-address-row .listing-address-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:0 10px 10px;
}
#supplierFormModal .listing-address-row .listing-address-grid .form-group,
#customerFormModal .listing-address-row .listing-address-grid .form-group{
  grid-template-columns:100px minmax(0,1fr);
}
#supplierFormModal .listing-address-row .listing-address-grid .form-group.full,
#customerFormModal .listing-address-row .listing-address-grid .form-group.full{
  grid-column:1 / -1;
}
#supplierFormModal .listing-address-row input,
#customerFormModal .listing-address-row input{
  width:100%;
  min-height:28px;
  padding:6px 8px;
  font-size:12px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-input);
  color:var(--text-light);
}
.bank-account-row{
  margin-top:8px;
  padding:8px;
  border:1px solid var(--border1);
  border-radius:5px;
  background:var(--bg-input);
}
.bank-account-row-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  color:var(--text-mid);
  font-size:10px;
}
@media(max-width:760px){
  #customerFormModal .customer-contact-person-columns,
  #customerFormModal .customer-contact-person-row,
  #supplierFormModal .customer-contact-person-columns,
  #supplierFormModal .customer-contact-person-row{
    grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) 20px;
    gap:6px;
    padding:6px;
  }
  #customerFormModal .customer-branch-row .branch-row-grid{
    grid-template-columns:1fr;
    padding:8px;
  }
  #customerFormModal .customer-branch-row .branch-row-grid .form-group{
    grid-template-columns:1fr;
    align-items:start;
    gap:3px;
  }
  #supplierFormModal .listing-address-row .listing-address-grid,
  #customerFormModal .listing-address-row .listing-address-grid{
    grid-template-columns:1fr;
    padding:0 8px 8px;
  }
  #supplierFormModal .listing-address-row .listing-address-grid .form-group,
  #customerFormModal .listing-address-row .listing-address-grid .form-group{
    grid-template-columns:1fr;
    align-items:start;
    gap:3px;
  }
}
@media(max-width:1160px){
  #productFormModal .form-content:has(#productInfo.active){
    grid-template-columns:1fr;
  }
  #productFormModal .form-content:has(#productInfo.active) > #bulletin{
    grid-column:auto;
    position:static;
  }
  .pi-layout{
    grid-template-columns:1fr 1fr;
  }
  #localCosting > .pi-layout{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .pi-col:nth-child(3){
    grid-column:1 / -1;
    border-right:none;
    border-top:1px solid var(--border1);
  }
  #productFormModal .form-grid,
  #supplierFormModal .form-grid,
  #customerFormModal .form-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .product-preview-top{
    grid-template-rows:auto auto 86px;
  }
  .pi-layout{
    grid-template-columns:1fr;
  }
  #localCosting > .pi-layout{
    grid-template-columns:1fr;
  }
  #localCosting .local-costing-image,
  #localCosting .local-costing-info,
  #localCosting .local-costing-discounts{
    grid-column:1;
    grid-row:auto;
  }
  .pi-col{
    border-right:none;
    border-bottom:1px solid var(--border1);
  }
  #productFormModal .form-content:has(#productInfo.active),
  #productFormModal .form-grid,
  #productFormModal .pricing-cards-grid{
    grid-template-columns:1fr;
  }
  #productFormModal .form-group,
  #supplierFormModal .form-group,
  #customerFormModal .form-group{
    grid-template-columns:1fr;
  }
}

/* ─── BULLETIN TAB / IMAGE UPLOAD ─── */
.bulletin-container{
  padding:30px;
  max-width:1100px;
  margin:0 auto;
}
.bulletin-header{
  position:relative;
  margin-bottom:25px;
  border-bottom:1px solid var(--border1);
  padding-bottom:15px;
}
.image-nav-controls{
  position:absolute;
  right:0;
  top:10px;
  transform:translateY(-50%);
  display:flex;
  gap:6px;
}
.image-nav-controls button,
.image-viewer-nav{
  width:34px;
  height:34px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--red);
  color:var(--text-white);
  border-color:var(--red);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.image-nav-controls button:hover:not(:disabled),
.image-viewer-nav:hover:not(:disabled){
  background:var(--red2);
  border-color:var(--red2);
}
.image-nav-controls button:disabled,
.image-viewer-nav:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.price-list-image-panel{margin-top:12px}
.bulletin-title{
  margin:0 0 6px 0;
  font-size:16px;
  color:var(--text-light);
  font-weight:600;
}
.bulletin-subtitle{
  margin:0;
  font-size:11px;
  color:var(--text-mid);
}
.bulletin-content{
  display:flex;
  gap:20px;
  margin-bottom:25px;
  align-items:center;
  justify-content:center;
  width:100%;
}
.bulletin-column{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:360px;
}
.bulletin-left{
  flex:1.4;
}
.bulletin-right{
  flex:0.6;
}
.image-preview-box{
  width:100%;
  height:320px;
  background:var(--bg-modal);
  border:1px solid var(--border1);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.preview-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.no-image-placeholder{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-align:center;
}
.no-image-placeholder.show{
  display:flex;
}
.placeholder-icon{
  width:40px;
  height:40px;
  margin-bottom:8px;
  opacity:0.55;
  color:var(--text-light);
}
.placeholder-text{
  margin:0;
  font-size:12px;
  color:var(--text-mid);
}
.upload-dropzone{
  border:2px dashed var(--red);
  border-radius:12px;
  padding:25px;
  text-align:center;
  cursor:pointer;
  background:var(--shadow-accent);
  transition:all .3s ease;
  position:relative;
  width:100%;
  height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-shrink:0;
}
.upload-dropzone:hover{
  background:var(--shadow-red);
  border-color:var(--red2);
}
.upload-dropzone.dragover{
  background:var(--shadow-red);
  border-color:var(--red);
  transform:scale(1.01);
}
.upload-icon{
  width:40px;
  height:40px;
  color:var(--red);
  opacity:0.8;
  flex-shrink:0;
}
.upload-text{
  margin:0;
}
.upload-main{
  margin:0;
  font-size:12px;
  color:var(--text-light);
  font-weight:500;
  line-height:1.3;
}
.upload-hint{
  margin:0;
  font-size:10px;
  color:var(--text-dim);
}
.image-input{
  display:none;
}
.bulletin-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:15px;
  justify-content:flex-start;
}
.btn{
  flex:0 1 auto;
  padding:10px 18px;
  border:none;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.btn:active{
  transform:translateY(0);
}
.btn-primary{
  background:linear-gradient(135deg,var(--red) 0%,var(--red2) 100%);
  color:var(--text-white);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--red2) 0%,var(--red3) 100%);
}
.btn-danger{
  background:linear-gradient(135deg,var(--red2) 0%,var(--red3) 100%);
  color:var(--text-white);
}
.btn-danger:hover{
  background:linear-gradient(135deg,var(--red3) 0%,var(--red) 100%);
}
.btn-secondary{
  background:var(--bg-card);
  color:var(--red);
  border:1px solid var(--red);
}
.btn-secondary:hover{
  background:var(--red);
  color:var(--text-white);
}
.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}
.upload-status{
  padding:12px 14px;
  border-radius:6px;
  font-size:11px;
  border-left:3px solid;
  display:none;
}
.upload-status.success{
  background:rgba(93,214,93,0.15);
  color:var(--text-light);
  border-color:var(--border2);
}
.upload-status.error{
  background:rgba(192,57,43,0.15);
  color:var(--red);
  border-color:var(--red);
}
.upload-status.info{
  background:var(--shadow-accent);
  color:var(--red);
  border-color:var(--red);
}

/* Image Viewer Modal */
.image-viewer-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  overflow:auto;
  z-index:2147483647 !important;
  padding:20px;
}
#productFormModal:has(.image-viewer-overlay.show){
  z-index:2147483646 !important;
}
.image-viewer-overlay.show{
  display:flex;
}
.image-viewer-container{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.image-viewer-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  background:var(--red);
  color:var(--text-white);
  border-color:var(--red);
}
.image-viewer-prev{left:-48px}
.image-viewer-next{right:-48px}
.image-viewer-img{
  max-width:90vw;
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.image-viewer-close{
  position:absolute;
  top:-40px;
  right:0;
  background:none;
  border:none;
  color:var(--text-white);
  font-size:32px;
  cursor:pointer;
  padding:0 8px;
  transition:transform .2s ease;
}
.image-viewer-close:hover{
  transform:scale(1.2);
}
.preview-image.clickable{
  cursor:pointer;
  transition:filter .2s ease;
}
.preview-image.clickable:hover{
  filter:brightness(1.1);
}

/* Responsive: stack on small screens */
@media(max-width:768px){
  .bulletin-content{
    flex-direction:column;
    gap:15px;
  }
  .bulletin-column{
    width:100%;
    height:280px;
  }
}
.btn-cancel{
  background:var(--border1);color:var(--text-light);
}
.btn-cancel:hover{background:var(--border2);color:var(--text-light);}

/* ─── AUDIT MODAL ─── */
#auditModal{
  background:var(--bg-card);border:2px solid var(--red);padding:0;
  max-width:750px;border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);
}
.audit-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px;border-bottom:2px solid var(--red);
  background:var(--bg-toolbar);
}
.audit-header h3{
  color:var(--text-light);margin:0;font-size:16px;
  font-weight:600;letter-spacing:0.5px;
}
.audit-close-btn{
  background:none;border:none;color:var(--text-dim);
  font-size:24px;cursor:pointer;padding:0;
  transition:color 0.2s;
}
.audit-close-btn:hover{color:var(--text-light);}
#auditContent{
  color:var(--text-light);font-size:13px;line-height:1.6;
  overflow-y:auto;padding:0;flex:1;
}
#auditContent::-webkit-scrollbar{width:8px;background:transparent;}
#auditContent::-webkit-scrollbar-track{background:transparent;}
#auditContent::-webkit-scrollbar-thumb{background:var(--border1);border-radius:4px;}
#auditContent::-webkit-scrollbar-thumb:hover{background:var(--text-mid);}
.audit-entry{
  padding:20px;border-bottom:1px solid var(--border1);
}
.audit-entry:last-child{border-bottom:none;}
.audit-labels{
  display:flex;gap:8px;margin-bottom:12px;
}
.audit-table-label{
  color:var(--text-white);font-weight:600;font-size:12px;
  letter-spacing:0.5px;padding:4px 8px;
  background:var(--red);border-radius:3px;
}
.audit-field-label{
  color:var(--text-mid);font-size:12px;padding:4px 0;
}
.audit-values{
  display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:10px;
}
.audit-value-box{
  display:flex;flex-direction:column;
}
.audit-value-label{
  color:var(--text-dim);font-size:11px;
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;
}
.audit-value-content{
  background:var(--bg-input);border:1px solid var(--border1);
  padding:10px;border-radius:4px;min-height:36px;
  display:flex;align-items:center;word-break:break-word;color:var(--text-light);
}
.audit-value-content.new{
  background:var(--bg-row-odd);border-color:var(--border2);
}
.audit-value-old{color:var(--red);}
.audit-value-new{color:var(--text-light);}
.audit-value-empty{color:var(--text-dim);font-style:italic;}
.audit-timestamp{color:var(--text-dim);font-size:10px;margin-top:5px;}
.audit-footer{color:var(--text-dim);font-size:11px;}
.audit-footer span{color:var(--text-mid);}
.audit-delete-btn{
  background:var(--red);color:var(--text-white);
  border:none;padding:4px 12px;border-radius:3px;
  font-size:11px;cursor:pointer;margin-top:8px;
  transition:background 0.2s;font-weight:500;
}
.audit-delete-btn:hover{background:var(--red2);}
.audit-delete-btn:active{background:var(--red3);}
#auditOverlay{
  background:rgba(0,0,0,0.8);z-index:999;
}

/* ─── LOOKUP MODAL SCROLLBAR ─── */
#lookupModal::-webkit-scrollbar,
#lookupResults::-webkit-scrollbar{
  width:8px;
}
#lookupModal::-webkit-scrollbar-track,
#lookupResults::-webkit-scrollbar-track{
  background:transparent;
}
#lookupModal::-webkit-scrollbar-thumb,
#lookupResults::-webkit-scrollbar-thumb{
  background:var(--border1);
}

/* ═══════════════════════════════════════════════════════
   PRINT PREVIEW MODAL
   ═══════════════════════════════════════════════════════ */
.print-preview-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.8);z-index:999;
}

.print-preview-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bg-app);z-index:1000;
  width:90%;max-width:900px;height:90vh;max-height:90vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  border-radius:8px;box-shadow:0 0 30px var(--shadow-red);
  border:2px solid var(--red);
}

.print-preview-container{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  background:var(--bg-app);border-radius:8px;
}

.print-preview-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 20px;border-bottom:2px solid var(--border1);
  background:var(--bg-toolbar);
}

.print-preview-header h2{
  color:var(--text-light);margin:0;font-size:18px;
}

.print-preview-close{
  background:none;border:none;color:var(--text-mid);
  font-size:28px;cursor:pointer;padding:0;
  transition:color 0.2s;
}

.print-preview-close:hover{
  color:var(--red);
}

.print-preview-toolbar{
  display:flex;gap:10px;padding:10px 20px;
  border-bottom:1px solid var(--border1);
  background:var(--bg-app);
}

.print-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--red);color:var(--text-white);
  border:none;padding:8px 16px;border-radius:4px;
  cursor:pointer;font-size:13px;font-weight:500;
  transition:all 0.2s;
}

.print-btn:hover{
  background:var(--red2);box-shadow:0 0 10px var(--shadow-red);
}

.print-btn svg{
  width:16px;height:16px;
}

.print-preview-content{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 20px 20px 20px;
  background:var(--bg-card);color:var(--text-light);font-family:'Roboto','Arial',sans-serif;
  font-size:11.5pt;line-height:1.45;
  text-transform:uppercase;
  -webkit-overflow-scrolling: touch;
  /* Ensure the content area is explicitly constrained so inner scrolling works
     even if parent layout or transforms interfere with default flex sizing */
  max-height: calc(90vh - 120px);
}

/* Smooth, themed scrollbars for the print preview content */
.print-preview-content::-webkit-scrollbar{
  width:12px;height:12px;
}
.print-preview-content::-webkit-scrollbar-track{
  background:transparent;
}
.print-preview-content::-webkit-scrollbar-thumb{
  background:var(--border1);
  border-radius:8px;
  border:3px solid transparent; /* create padding effect */
  background-clip: padding-box;
}
.print-preview-content::-webkit-scrollbar-thumb:hover{
  background:var(--border2);
}

/* Firefox */
.print-preview-content{
  scrollbar-width:thin;
  scrollbar-color: var(--border1) transparent;
}

/* Prevent horizontal overflow creating ugly horizontal scrollbar in the modal */
.print-preview-content table{width:100%;border-collapse:collapse;table-layout:fixed;}
.print-preview-content table td,.print-preview-content table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Sticky table header inside the scrollable print preview area */
.print-preview-content .formal-table thead th{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* stick to the top of the scrollable content area */
  z-index: 5;
  background: var(--bg-thead);
  color: var(--text-light);
}

/* Print preview document styling */
.print-document{
  font-size:11.5pt;line-height:1.45;font-family:'Calibri','Arial',sans-serif;color:var(--text-light);
  text-transform:uppercase;
}

/* When placed inside the modal scroll area we want the document to keep
   its top spacing while allowing table headers to stick to the very top
   of the scroll viewport (below the toolbar). Move the padding into the
   inner document so `position: sticky; top: 0` on thead works as intended. */
.print-preview-content > .print-document{
  padding-top:12px;
}

.formal-header{
  border:none;padding:0;margin-bottom:12px;
  display:block;width:auto;min-width:0;
}

.formal-header-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;margin-bottom:6px;
}

.formal-title{
  display:block;font-weight:700;font-size:13pt;
  width:170px;min-width:140px;padding:0 8px 0 0;white-space:nowrap;
}

.formal-value{
  display:block;font-size:12pt;padding:0;flex:1;
}

.formal-line{
  border-top:3px double var(--border1);margin:8px 0 12px 0;
}

.formal-section{
  margin-bottom:4px;page-break-inside:avoid;
}

.formal-separator{
  font-weight:700;font-size:12pt;color:var(--red);
  padding:6px 0 4px 0;border-top:1px solid var(--border1);margin:8px 0 6px 0;
  letter-spacing:0.5px;
}

.formal-field-row{
  display:flex;gap:20px;margin-bottom:10px;
  flex-wrap:wrap;
}

.formal-field{
  flex:1;min-width:200px;
}

.formal-field-full{
  flex:1 1 100%;
}

.formal-field-label{
  font-weight:700;font-size:9pt;color:var(--text-mid);margin-bottom:3px;
  letter-spacing:0.5px;
}

.formal-field-value{
  font-size:10pt;color:var(--text-light);margin-bottom:8px;
  min-height:14pt;
}

.formal-line-row{
  display:flex;align-items:baseline;gap:10px;margin-bottom:2px;
}

.formal-line-label{
  font-weight:700;font-size:9.5pt;color:var(--text-light);width:165px;flex-shrink:0;letter-spacing:0.5px;
}

.formal-line-value{
  font-size:10.5pt;color:var(--text-light);flex:1;
}

.formal-personality-block{
  margin-bottom:8px;
}

.formal-personality-line{
  display:grid;
  grid-template-columns:85px 130px 50px 225px 70px minmax(120px, 1fr);
  column-gap:14px;
  align-items:center;
  margin-bottom:2px;
}

.formal-personality-role{
  font-weight:700;font-size:9.5pt;color:var(--text-light);
}

.formal-personality-name{
  font-size:10.5pt;color:var(--text-light);overflow-wrap:break-word;min-width:0;
}

.formal-personality-elabel,
.formal-personality-clabel{
  font-weight:700;font-size:9.5pt;color:var(--text-light);white-space:nowrap;
}

.formal-personality-eval,
.formal-personality-cval{
  font-size:10.5pt;color:var(--text-light);overflow-wrap:break-word;min-width:0;
}

.formal-personality-grid{
  display:flex;gap:25px;margin-top:10px;
}

.formal-personality-col{
  flex:1;
}

.formal-personality-col > div:first-child{
  font-weight:700;font-size:10pt;margin-bottom:8px;color:var(--text-mid);
  border-bottom:1px solid var(--border1);padding-bottom:5px;
}

/* Modal: place role+name in left column, contacts to the right */
.print-preview-content .formal-personality-block{
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 14px;
  align-items: start;
  margin-bottom: 10px;
  padding-bottom: 6px;
}
.print-preview-content .formal-personality-role,
.print-preview-content .formal-personality-name{
  grid-column: 1;
}
.print-preview-content .formal-personality-contacts{
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
}
.print-preview-content .formal-personality-name{font-size:11pt}

.formal-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:16px;
}

.formal-table th,
.formal-table td{
  border:1px solid #999;
  padding:8px 10px;
  vertical-align:top;
}

.formal-table-header{
  font-weight:700;
  background:var(--bg-thead);
  color:var(--text-light);
  font-size:10pt;
}

.formal-table-label{
  font-weight:700;
  width:18%;
  font-size:9pt;
  color:var(--text-mid);
}

.formal-table-value{
  font-size:10pt;
  color:var(--text-light);
}

.formal-footer{
  text-align:right;font-size:9pt;color:var(--text-dim);padding-top:15px;
  margin-top:30px;border-top:1px solid var(--border1);
}

.formal-footer p{
  margin:0;
}

.print-header{
  text-align:center;margin-bottom:15px;
}

.print-header h1{
  font-size:16pt;margin-bottom:4px;
}

.print-subtitle{
  font-size:10pt;color:var(--text-mid);margin-bottom:10px;
}

.print-header-line{
  height:2px;background:var(--border1);margin-bottom:15px;
}

.print-report-info{
  margin-bottom:15px;
}

.print-info-table,
.print-detail-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:16px;
}

.print-info-table td,
.print-detail-table td{
  border:1px solid #999;
  padding:8px 10px;
  vertical-align:top;
}

.print-info-label,
.print-detail-label{
  font-weight:700;
  width:18%;
  font-size:9pt;
  color:var(--text-mid);
}

.print-info-value,
.print-detail-value{
  font-size:10pt;
  color:var(--text-light);
}

.print-section{
  margin-bottom:25px;page-break-inside:avoid;
}

.print-section-title{
  font-weight:700;font-size:11pt;
  padding:8px 0;border-bottom:2px solid var(--border1);margin:15px 0 12px 0;
  letter-spacing:1px;
}

.print-footer-line{
  height:1px;background:var(--border1);margin:15px 0;
}

.print-footer{
  text-align:right;font-size:9pt;color:var(--text-dim);padding-top:15px;
  margin-top:10px;
}

.print-footer p{
  margin:0;
}

/* Print media query for actual printing */
@media print{
  body *{display:none !important;}
  .print-preview-content *{display:block !important;}
  .print-preview-modal,
  .print-preview-overlay{display:none !important;}
}
#lookupModal::-webkit-scrollbar-thumb:hover,
#lookupResults::-webkit-scrollbar-thumb:hover{
  background:var(--text-mid);
}

/* ─── CUSTOMIZE COLUMNS MODAL SCROLLBAR ─── */
.customize-columns-body{
  overflow-y:auto;
  max-height:400px;
}
.customize-columns-body::-webkit-scrollbar{
  width:8px;
}
.customize-columns-body::-webkit-scrollbar-track{
  background:transparent;
}
.customize-columns-body::-webkit-scrollbar-thumb{
  background:var(--border1);
  border-radius:4px;
}
.customize-columns-body::-webkit-scrollbar-thumb:hover{
  background:var(--text-mid);
}

/* ─── COLOR SELECTOR ─── */
.color-picker-control{
  position:relative;
  min-width:0;
}
.color-picker-btn{
  width:100%;
  min-height:26px;
  padding:5px 10px;
  background:var(--bg-input);
  color:var(--text-light);
  border:1px solid var(--border1);
  border-radius:4px;
  font-family:'Roboto',sans-serif;
  font-size:11px;
  text-align:left;
  cursor:pointer;
}
.color-picker-btn:hover,
.color-picker-btn:focus{
  outline:none;
  border-color:var(--red);
  background:var(--bg-row-odd);
  box-shadow:0 0 8px var(--shadow-accent);
}
.color-selector{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:1300;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  max-height:220px;
  padding:8px;
  overflow:auto;
  background:var(--bg-card);
  border:1px solid var(--border1);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.color-selector.open{
  display:grid;
}
.color-picker-option{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:28px;
  padding:5px 7px;
  background:var(--bg-input);
  color:var(--text-light);
  border:1px solid var(--border1);
  border-radius:4px;
  font-family:'Roboto',sans-serif;
  font-size:10px;
  line-height:1.1;
  cursor:pointer;
}
.color-picker-option:hover{
  border-color:var(--red);
  background:var(--bg-hover);
}
.color-picker-option.selected{
  border-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}
.color-picker-option.selected::after{
  content:'✓';
  margin-left:auto;
  color:var(--red);
  font-weight:700;
}
.color-picker-swatch{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:50%;
  background:var(--swatch-color);
  border:1px solid var(--border1);
}

/* ─── LOADING SKELETON ─── */
.skeleton-row td {
  padding: 6px 8px;
}
.skeleton-cell {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-input) 25%,
    var(--border1)  50%,
    var(--bg-input) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s infinite;
  opacity: 0.6;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   AUDIT TRAIL — foldable panel used on Product / Supplier / Customer
   forms (and any future form). Uses the app's own theme variables so
   it matches whatever theme is active. See js/auditTrail.js.
   ══════════════════════════════════════════════════════════════ */
.audit-trail{
  margin-top:12px;
  border:1px solid var(--border1);
  background:var(--bg-card);
}
.product-preview-search{
  position:relative;
  z-index:5;
}
.product-preview-search .audit-trail{
  position:relative;
  z-index:10;
  flex:0 0 auto;
  margin:0 0 0 auto;
  border:0;
  background:none;
}
.audit-trail-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:7px 10px; font-size:12px; font-weight:700; color:var(--text-mid);
  font-family:inherit;
}
.audit-trail-toggle:hover{background:var(--bg-hover);}
.product-preview-search .audit-trail-toggle{
  width:auto;
  min-height:28px;
  gap:6px;
  padding:4px 8px;
  border:1px solid var(--border1);
  border-radius:4px;
  background:var(--bg-card);
  color:var(--text-light);
  box-shadow:0 1px 2px var(--shadow-accent);
}
.product-preview-search .audit-trail-toggle:hover{border-color:var(--red2);}
.audit-trail-toggle .audit-chevron{
  display:inline-block; transition:transform .15s ease; font-size:10px; color:var(--text-dim);
}
.audit-trail.open .audit-chevron{transform:rotate(90deg);}
.audit-trail-toggle .audit-summary-pills{margin-left:auto; display:flex; gap:6px; font-weight:600;}
.audit-pill{font-size:10.5px; padding:2px 7px; border-radius:10px; white-space:nowrap;}
.audit-pill.ok{color:#1a7d3c; background:#e3f4e8;}
.audit-pill.warn{color:#8a5a00; background:#fbf0dc;}
.audit-pill.pending{color:#8a8a8a; background:#eeeeec;}

.audit-trail-content{display:none; padding:2px 10px 10px; border-top:1px solid var(--border2);}
.audit-trail.open .audit-trail-content{display:block;}
.product-preview-search .audit-trail-content{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:1000;
  width:min(380px, calc(100vw - 28px));
  max-height:min(58vh, 360px);
  overflow:auto;
  padding:5px 10px 7px;
  border:1px solid var(--border1);
  border-radius:5px;
  background:var(--bg-card);
  box-shadow:0 8px 24px var(--shadow-accent);
}
.audit-trail-empty{padding:10px; font-size:11.5px; color:var(--text-dim); font-style:italic;}

.audit-stage{display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px dashed var(--border2);}
.product-preview-search .audit-stage{
  display:grid;
  grid-template-columns:18px minmax(82px, .8fr) minmax(0, 1.4fr) minmax(84px, auto);
  grid-template-areas:"icon label info action";
  align-items:center;
  gap:8px;
  padding:7px 2px;
}
.audit-stage:last-child{border-bottom:none;}
.audit-stage .audit-stage-icon{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}
.product-preview-search .audit-stage-icon{grid-area:icon;}
.audit-stage-icon.done{background:#1a7d3c;}
.audit-stage-icon.pending{background:#8a8a8a;}
.audit-stage-info{flex:1; min-width:0;}
.product-preview-search .audit-stage-info{display:contents;}
.product-preview-search .audit-stage-label{grid-area:label; grid-row:1 / span 2;}
.product-preview-search .audit-stage-value{grid-area:info; grid-row:1;}
.product-preview-search .audit-stage-meta{grid-area:info; grid-row:2;}
.product-preview-search .audit-stage-empty{grid-area:info; grid-row:1 / span 2; text-align:left; align-self:center;}
.product-preview-search .audit-stage-action{grid-area:action; grid-row:1 / span 2; min-width:0;}
.product-preview-search .audit-stage-action button{max-width:100%; padding:4px 6px; white-space:normal;}
@media(max-width:360px){
  .product-preview-search .audit-stage{
    grid-template-columns:18px minmax(74px, .75fr) minmax(0, 1.25fr);
    grid-template-areas:"icon label info" ". action action";
    gap:5px 8px;
  }
  .product-preview-search .audit-stage-label,
  .product-preview-search .audit-stage-empty{grid-row:1;}
  .product-preview-search .audit-stage-action{
    grid-column:2 / -1;
    grid-row:2;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0 8px;
  }
  .product-preview-search .audit-stage-action .audit-locked-note{
    flex:1 1 100px;
    max-width:none;
    margin-top:0;
  }
}
.audit-stage-label{font-size:11px; font-weight:700; color:var(--text-mid);}
.audit-stage-value{font-size:12px; color:var(--text-td);}
.audit-stage-meta{font-size:10.5px; color:var(--text-dim);}
.audit-stage-empty{font-size:11px; color:#8a8a8a; font-style:italic;}
.audit-stage-action button{
  font-size:11px; padding:4px 11px; border:1px solid var(--red2);
  background:linear-gradient(var(--bg-input), var(--bg-hover)); color:var(--red2); font-weight:700;
  cursor:pointer; border-radius:3px;
}
.audit-stage-action button:hover{background:var(--bg-hover);}
.audit-stage-action button:disabled{
  opacity:.45; cursor:not-allowed; border-color:var(--border1); color:var(--text-dim); background:var(--bg-input);
}
.audit-stage-action .audit-locked-note{font-size:10px; color:var(--text-dim); display:block; margin-top:2px; max-width:140px;}

/* ===== Invoice / D.R. Entry ===== */
.si-modal{max-width:1200px;width:95%;}
.si-header{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;
}
.si-header-left{flex:initial;min-width:0;gap:10px;}
.si-header-right{flex:initial;min-width:0;gap:10px;}
.si-document-fields{display:flex;flex-direction:column;}
.si-doc-row{grid-template-columns:110px minmax(0,1fr);}
.si-doc-row > input,.si-doc-control{width:210px;max-width:100%;box-sizing:border-box;}
.si-doc-control{min-width:0;}
.si-doc-control input{width:100%;max-width:none;box-sizing:border-box;}
.si-field{min-width:0;}
.si-field input[type="text"],.si-field input[type="date"],.si-field input[type="number"]{width:100%;}
.si-field input.si-short{width:80px;}
.si-lookup{flex:1;min-width:0;}
.si-lookup .pl-code-input{flex:0 0 150px;max-width:150px;}
.si-lookup .pl-name-input{flex:1;min-width:0;}
.si-num{text-align:right;}
.si-r{text-align:right!important;}
.si-hint{font-size:11px;color:var(--text-dim);margin-top:3px;min-height:14px;}
.si-hint-bad{color:var(--red);font-weight:600;}
.si-invalid{border-color:var(--red)!important;background:rgba(220,38,38,0.08)!important;}
.si-status-banner{margin-bottom:12px;padding:8px 12px;border-radius:4px;background:rgba(220,38,38,0.10);border:1px solid var(--red);color:var(--red);font-size:12px;font-weight:600;}
.si-grid-wrap{max-height:300px;}
.si-grid tbody tr{cursor:pointer;}
.si-grid tbody tr.selected td{background:rgba(59,130,246,0.14)!important;}
.si-bottom{margin-top:14px;}
.si-bottom-fields{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;margin-bottom:0;}
.si-discount-label{color:var(--text-mid);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
@media (max-width:900px){
  .si-header{grid-template-columns:1fr;gap:14px;}
  .si-bottom-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .si-modal{width:calc(100vw - 16px);max-height:94vh;}
  .si-modal .form-content{padding:14px;}
  .si-doc-row{grid-template-columns:90px minmax(0,1fr);}
  .si-lookup .pl-code-input{flex-basis:110px;max-width:110px;}
  .si-bottom-fields{grid-template-columns:1fr;}
  .si-grid-toolbar{flex-wrap:wrap;}
}

/* Voucher Entry — compact AP settlement form, styled with application themes. */
#voucherFormModal{
  width:calc(100vw - 40px);max-width:1200px!important;
  max-height:calc(100vh - 28px);
  border:1px solid var(--border1);border-radius:8px;
  box-shadow:0 18px 48px rgba(0,0,0,.24);
}
#voucherFormModal .form-container{min-height:0;}
#voucherFormModal .form-header{
  padding:14px 22px;background:var(--bg-card);
}
.voucher-modal-title{display:flex;flex-direction:column;gap:2px;}
.voucher-modal-title span{
  color:var(--text-dim);font:600 10px 'Roboto',sans-serif;
  letter-spacing:.7px;
}
#voucherFormModal .form-header h2{
  color:var(--text-light);font:700 21px 'Roboto',sans-serif;
}
#voucherFormModal .form-content{
  flex:1;min-height:0;max-height:none;padding:18px 22px;
}
.voucher-entry-header{
  display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(420px,1fr);
  gap:18px;align-items:start;margin:14px 0 0;padding:16px;
  background:var(--bg-card);border:1px solid var(--border1);border-radius:6px;
}
#voucherFormModal .voucher-entry-header .pl-header-left{
  min-width:0;display:flex;flex-direction:column;gap:0;
}
#voucherFormModal .voucher-entry-header .pl-header-right{
  min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;align-content:start;
}
#voucherFormModal .voucher-entry-header .form-group{min-width:0;}
#voucherFormModal .voucher-entry-header label{
  color:var(--text-mid);font:600 11px 'Roboto',sans-serif;
  letter-spacing:.2px;text-transform:none;
}
#voucherFormModal .voucher-entry-header input{
  min-width:0;font-size:13px;
}
.voucher-grid-toolbar{
  justify-content:flex-start;align-items:center;gap:7px;
  margin:16px 0 9px;
}
.voucher-grid-title{
  margin-right:auto;color:var(--text-light);
  font:700 14px 'Roboto',sans-serif;
}
.voucher-grid-toolbar .pl-edit-item-btn,
.voucher-grid-toolbar .pl-delete-item-btn{margin-left:0;}
.voucher-grid-toolbar .pl-delete-item-btn{
  background:var(--bg-tabs);color:var(--text-mid);
  border:1px solid var(--border1);
}
#voucherFormModal .pl-grid-wrap{max-height:260px;}
.voucher-lower-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);
  gap:16px;align-items:start;margin:16px 0 0;
}
.voucher-meta-panel,.voucher-totals-panel{
  min-width:0;padding:14px 16px;background:var(--bg-card);
  border:1px solid var(--border1);border-radius:6px;
}
.voucher-panel-heading{
  margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--border1);
  color:var(--text-mid);font:700 11px 'Roboto',sans-serif;
  letter-spacing:.45px;text-transform:uppercase;
}
.voucher-meta-panel > .form-group{margin-bottom:10px;}
.voucher-meta-panel > .form-row{margin:4px 0 0;gap:10px;}
.voucher-meta-panel label{
  color:var(--text-mid);font:500 12px 'Roboto',sans-serif;
  text-transform:none;letter-spacing:0;
}
.voucher-totals-panel .voucher-total-line{
  justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--border1);
}
.voucher-totals-panel .voucher-total-line label,
.voucher-totals-panel .sp-discount-group label{
  color:var(--text-mid);font:500 12px 'Roboto',sans-serif;
  text-transform:none;letter-spacing:0;
}
.voucher-totals-panel .voucher-total-line input{
  width:126px;padding:6px 9px;background:var(--bg-row-even);
  border:1px solid var(--border1);border-radius:4px;
  color:var(--text-light);font:600 13px 'Roboto',sans-serif;text-align:right;
}
.voucher-totals-panel .sp-discount-group{
  padding:5px 0;border-bottom:1px solid var(--border1);
}
.voucher-totals-panel .sp-discount-group input{
  padding:6px 7px;background:var(--bg-input);border-color:var(--border1);
}
.voucher-totals-panel .voucher-grand-total{
  margin-top:7px;padding-top:10px;border-top:1px solid var(--border2);
  border-bottom:0;
}
.voucher-totals-panel .voucher-grand-total label{font-weight:700;color:var(--text-light);}
.voucher-totals-panel .voucher-grand-total input{
  color:var(--text-light);border-color:var(--red);font-size:16px;font-weight:700;
}
#voucherFormModal .form-footer{padding:12px 20px;background:var(--bg-card);}

@media (max-width:900px){
  .voucher-entry-header{grid-template-columns:1fr;}
  #voucherFormModal .voucher-entry-header .pl-header-right{grid-template-columns:repeat(3,minmax(0,1fr));}
  .voucher-lower-grid{grid-template-columns:minmax(0,1fr) 300px;}
}
@media (max-width:680px){
  #voucherFormModal{width:calc(100vw - 20px);max-height:calc(100vh - 20px);}
  #voucherFormModal .form-header{padding:12px 16px;}
  #voucherFormModal .form-content{padding:14px;}
  #voucherFormModal .form-footer{padding:10px 12px;}
  #voucherFormModal .voucher-entry-header .pl-header-right{grid-template-columns:1fr 1fr;}
  .voucher-lower-grid{grid-template-columns:1fr;}
  .voucher-grid-toolbar{flex-wrap:wrap;}
  .voucher-grid-title{flex:1 0 100%;margin:0 0 2px;}
}
@media (max-width:440px){
  #voucherFormModal .voucher-entry-header .pl-header-right{grid-template-columns:1fr;}
}