:root{
  --bg:#f3f2f1;
  --white:#ffffff;
  --surface:#faf9f8;
  --border:#edebe9;
  --border2:#d2d0ce;
  --text:#201f1e;
  --text2:#605e5c;
  --text3:#a19f9d;
  --accent:#0078d4;
  --accent-hover:#106ebe;
  --accent-light:#eff6fc;
  --accent-mid:#c7e0f4;
  --success:#107c10;
  --success-bg:#dff6dd;
  --warn:#c8610a;
  --warn-bg:#fff4ce;
  --danger:#a4262c;
  --danger-bg:#fde7e9;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes checkDraw{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
@keyframes scaleIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── OUTER SHELL ── */
.wizard-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── TOP BAR ── */
.wiz-topbar{
  height:48px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 28px;
  gap:10px;
  flex-shrink:0;
}
.sap-portal-brand-logo{height:22px;width:auto;display:block;flex-shrink:0;object-fit:contain}
/* Theme-aware brand logo: color wordmark on light theme, white wordmark on dark theme */
.brand-ic-dark{display:none !important}
html[data-theme="dark"] .brand-ic-light{display:none !important}
html[data-theme="dark"] .brand-ic-dark{display:block !important}
/* Collapsed sidebar: swap the wide wordmark for the small icon mark */
.brand-ic-mini{display:none !important}
.p-sidebar.collapsed .brand-ic-light,.p-sidebar.collapsed .brand-ic-dark{display:none !important}
.p-sidebar.collapsed .brand-ic-mini-light{display:block !important}
html[data-theme="dark"] .p-sidebar.collapsed .brand-ic-mini-light{display:none !important}
html[data-theme="dark"] .p-sidebar.collapsed .brand-ic-mini-dark{display:block !important}
.wiz-topbar .sap-portal-brand-logo{height:20px}
.wiz-logo-name{font-size:13px;font-weight:600;color:var(--text)}
.wiz-logo-name span{color:var(--text2);font-weight:400}
.wiz-topbar-label{
  margin-left:auto;
  font-size:12px;color:var(--text3);
  display:flex;align-items:center;gap:6px;
}
.wiz-topbar-label svg{width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── BODY ── */
.wiz-body{
  flex:1;
  display:flex;
  overflow:hidden;
}

/* ── LEFT RAIL ── */
.wiz-rail{
  width:260px;
  flex-shrink:0;
  background:var(--white);
  border-right:1px solid var(--border);
  padding:32px 0;
  display:flex;
  flex-direction:column;
}
.wiz-rail-header{
  padding:0 24px 24px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.wiz-rail-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-0.2px}
.wiz-rail-sub{font-size:12px;color:var(--text2);line-height:1.5}

.wiz-steps{padding:8px 0}
.wiz-step{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 24px;
  cursor:pointer;
  transition:background 0.15s;
  position:relative;
}
.wiz-step::after{
  content:'';
  position:absolute;
  left:40px;
  top:46px;
  width:1.5px;
  height:calc(100% - 14px);
  background:var(--border);
}
.wiz-step:last-child::after{display:none}
.wiz-step:hover{background:var(--surface)}
.wiz-step.active{background:var(--accent-light)}

.step-num{
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--border2);
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--text2);
  flex-shrink:0;z-index:1;
  transition:all 0.2s;
}
.wiz-step.active .step-num{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.wiz-step.done .step-num{
  background:var(--success);
  border-color:var(--success);
  color:#fff;
  font-size:12px;
}
.step-info{flex:1;padding-top:2px}
.step-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:2px;transition:color 0.15s}
.wiz-step.active .step-label{color:var(--accent)}
.wiz-step.done .step-label{color:var(--success)}
.step-desc{font-size:11px;color:var(--text3);line-height:1.4}

.wiz-rail-footer{
  margin-top:auto;
  padding:20px 24px 0;
  border-top:1px solid var(--border);
}
.wiz-progress-bar{height:4px;background:var(--border);border-radius:2px;margin-bottom:8px;overflow:hidden}
.wiz-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.4s cubic-bezier(.22,1,.36,1)}
.wiz-progress-text{font-size:11px;color:var(--text2);display:flex;justify-content:space-between}

/* ── CONTENT AREA ── */
.wiz-content{
  flex:1;
  overflow-y:auto;
  padding:32px 40px;
  background:var(--bg);
}
.wiz-content::-webkit-scrollbar{width:6px}
.wiz-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

.wiz-page{
  display:none !important;
  opacity:0;
  transform:translateX(16px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.wiz-page.active{
  display:block !important;
  opacity:1;
  transform:translateX(0);
}

.wiz-page-header{margin-bottom:28px}
.wiz-page-step{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:var(--accent);margin-bottom:6px}
.wiz-page-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.3px;margin-bottom:6px}
.wiz-page-sub{font-size:13px;color:var(--text2);line-height:1.6}

/* FORM ELEMENTS */
.form-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:16px;
}
.fc-head{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.fc-head-icon{
  width:28px;height:28px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.fc-head-icon svg{width:14px;height:14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fci-blue{background:var(--accent-light);stroke:var(--accent)}
.fci-green{background:var(--success-bg);stroke:var(--success)}
.fci-warn{background:var(--warn-bg);stroke:var(--warn)}
.fc-head-title{font-size:13px;font-weight:600;color:var(--text)}
.fc-head-sub{font-size:12px;color:var(--text2);margin-left:auto}
.fc-body{padding:20px}

.form-grid{display:grid;gap:14px}
.fg2{grid-template-columns:1fr 1fr}
.fg3{grid-template-columns:1fr 1fr 1fr}
.form-group{}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px}
.form-label.req::after{content:' *';color:var(--danger)}
.form-hint{font-size:11px;color:var(--text3);margin-top:4px}
.form-input{
  width:100%;background:var(--white);
  border:1px solid var(--border2);border-radius:2px;
  padding:8px 12px;font-size:13px;font-family:var(--font);
  color:var(--text);outline:none;
  transition:border 0.15s,box-shadow 0.15s;
}
.form-input:hover{border-color:#8a8886}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.form-input::placeholder{color:var(--text3)}
.form-input.error{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.form-input[type="password"]{letter-spacing:0.1em}
.form-select{
  width:100%;background:var(--white);
  border:1px solid var(--border2);border-radius:2px;
  padding:8px 30px 8px 12px;font-size:13px;font-family:var(--font);
  color:var(--text);outline:none;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border 0.15s;
}
.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.field-err{font-size:11px;color:var(--danger);margin-top:4px;display:none}
.field-err.show{display:block}

/* PASSWORD FIELD */
.pw-wrap{position:relative}
.pw-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  z-index:2;
  font-size:12px;font-weight:500;color:var(--text2);
  cursor:pointer;user-select:none;transition:color 0.15s;
  font-family:var(--font);
}
.pw-toggle:hover{color:var(--accent)}

/* TEST CONNECTION */
.test-conn-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;
  background:var(--white);border:1px solid var(--border2);border-radius:2px;
  font-size:12px;font-weight:600;font-family:var(--font);
  color:var(--text2);cursor:pointer;
  transition:all 0.15s;margin-top:16px;
}
.test-conn-btn:hover{background:var(--surface);border-color:#8a8886;color:var(--text)}
.test-conn-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.test-conn-result{
  margin-top:10px;padding:10px 14px;border-radius:2px;
  font-size:12px;font-weight:600;
  display:none;align-items:center;gap:8px;
}
.test-conn-result.show{display:flex}
.tcr-success{background:var(--success-bg);color:var(--success);border:1px solid #c3e6c3}
.tcr-fail{background:var(--danger-bg);color:var(--danger);border:1px solid #f5c6c8}
.tcr-testing{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent-mid)}
.tcr-spinner{width:13px;height:13px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.6s linear infinite;flex-shrink:0}
.tcr-icon{width:14px;height:14px;flex-shrink:0}

/* ── BRANCHES ── */
.branch-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.branch-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:3px;
  padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  transition:border 0.15s,box-shadow 0.15s;
  animation:fadeUp 0.2s both;
}
.branch-card:hover{border-color:var(--border2);box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.branch-card.default-branch{
  border-color:var(--accent);
  background:var(--accent-light);
}
.branch-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--text2);
  flex-shrink:0;
}
.branch-card.default-branch .branch-num{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.branch-fields{flex:1;display:grid;grid-template-columns:1fr minmax(180px,1.1fr);gap:8px;align-items:center}
.branch-input{
  width:100%;background:var(--white);
  border:1px solid var(--border2);border-radius:2px;
  padding:7px 10px;font-size:13px;font-family:var(--font);
  color:var(--text);outline:none;
  transition:border 0.15s;
}
select.branch-input{
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% - 2px),calc(100% - 9px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}
.branch-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.branch-input::placeholder{color:var(--text3)}
.branch-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.branch-default-btn{
  padding:5px 10px;border-radius:2px;font-size:11px;font-weight:600;
  cursor:pointer;border:1px solid var(--border2);background:var(--white);
  font-family:var(--font);color:var(--text2);transition:all 0.15s;white-space:nowrap;
}
.branch-default-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.branch-card.default-branch .branch-default-btn{
  background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;
}
.branch-del-btn{
  width:28px;height:28px;border:1px solid var(--border);border-radius:2px;
  background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:all 0.15s;
}
.branch-del-btn:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.branch-del-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.add-branch-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  background:var(--white);border:1.5px dashed var(--border2);border-radius:3px;
  font-size:13px;font-weight:600;color:var(--text2);
  cursor:pointer;transition:all 0.15s;width:100%;font-family:var(--font);
}
.add-branch-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.add-branch-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.branch-tip{
  margin-top:12px;padding:10px 14px;
  background:var(--warn-bg);border:1px solid #edd9a3;border-radius:2px;
  font-size:12px;color:var(--warn);
  display:flex;align-items:flex-start;gap:8px;line-height:1.5;
}
.branch-tip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px}

/* ── REVIEW STEP ── */
.review-section{margin-bottom:16px}
.review-section-title{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--text2);margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.review-edit{font-size:11px;color:var(--accent);cursor:pointer;font-weight:500;text-transform:none;letter-spacing:0}
.review-edit:hover{text-decoration:underline}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.review-item{background:var(--white);border:1px solid var(--border);border-radius:2px;padding:10px 14px}
.review-label{font-size:11px;color:var(--text3);margin-bottom:3px;font-weight:500}
.review-val{font-size:13px;font-weight:600;color:var(--text)}
.review-val.mono{font-family:'Courier New',monospace;font-size:12px}
.review-val.masked{letter-spacing:0.1em;color:var(--text2)}
.review-branches{display:flex;flex-direction:column;gap:6px}
.review-branch{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--border);border-radius:2px;
  padding:10px 14px;
}
.review-branch.default{border-color:var(--accent);background:var(--accent-light)}
.rb-badge{
  padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;
  background:var(--accent);color:#fff;
  flex-shrink:0;
}
.rb-name{font-size:13px;font-weight:600;color:var(--text);flex:1}
.rb-code{font-size:11px;color:var(--text2);font-family:'Courier New',monospace}
.rb-user{font-size:11px;color:var(--text2)}

/* CONFIRM BOX */
.confirm-box{
  margin-top:16px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:3px;
  padding:16px 20px;
  display:flex;align-items:flex-start;gap:14px;
}
.confirm-check{
  width:18px;height:18px;border:1.5px solid var(--border2);border-radius:2px;
  background:var(--white);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.15s;
}
.confirm-check.on{background:var(--accent);border-color:var(--accent)}
.confirm-check.on::after{content:'✓';font-size:11px;color:#fff;font-weight:700;line-height:1}
.confirm-text{font-size:13px;color:var(--text2);line-height:1.6}
.confirm-text b{color:var(--text);font-weight:600}

/* ── NAVIGATION FOOTER ── */
.wiz-footer{
  flex-shrink:0;
  background:var(--white);
  border-top:1px solid var(--border);
  padding:14px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.wiz-footer-left{display:flex;align-items:center;gap:12px}
.wiz-footer-right{display:flex;align-items:center;gap:8px}
.btn-back{
  padding:8px 18px;background:var(--white);border:1px solid var(--border2);
  border-radius:2px;font-size:13px;font-weight:500;font-family:var(--font);
  color:var(--text2);cursor:pointer;transition:background 0.15s;
  display:flex;align-items:center;gap:6px;
}
.btn-back:hover{background:var(--surface);color:var(--text)}
.btn-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-next{
  padding:8px 22px;background:var(--accent);border:1px solid var(--accent);
  border-radius:2px;font-size:13px;font-weight:600;font-family:var(--font);
  color:#fff;cursor:pointer;transition:background 0.15s;
  display:flex;align-items:center;gap:6px;
}
.btn-next:hover{background:var(--accent-hover)}
.btn-next svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-confirm{
  padding:8px 22px;background:#107c10;border:1px solid #107c10;
  border-radius:2px;font-size:13px;font-weight:700;font-family:var(--font);
  color:#fff;cursor:pointer;transition:background 0.15s;
  display:flex;align-items:center;gap:6px;
}
.btn-confirm:hover{background:#0b5c0b}
.btn-confirm svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-confirm:disabled{opacity:0.45;cursor:not-allowed}
.step-hint{font-size:12px;color:var(--text3)}

/* ── SUCCESS OVERLAY ── */
/* Background uses the same --bg var as the rest of the wizard so dark mode picks up
   the dark canvas automatically. Light = light grey, dark = #1b1a19. */
#success-overlay{
  display:none;
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  align-items:center;justify-content:center;
  animation:fadeIn 0.3s ease;
}
/* The box itself has no explicit background — it sits on top of the overlay. Force
   the title + countdown numerals to use theme-aware colors (defaults were OK but the
   countdown circle had an accent border that needs the dark accent in dark mode). */
#success-overlay.show{display:flex}
.success-box{
  text-align:center;max-width:440px;width:100%;
  animation:scaleIn 0.35s cubic-bezier(.22,1,.36,1) both;
}
.success-icon-wrap{
  width:80px;height:80px;border-radius:50%;
  background:var(--success-bg);border:3px solid var(--success);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
}
.success-icon-wrap svg{width:36px;height:36px;stroke:var(--success);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.success-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-0.3px}
.success-sub{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:28px}
.success-countdown{
  font-size:13px;color:var(--text2);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.countdown-num{
  font-size:22px;font-weight:700;color:var(--accent);
  width:36px;height:36px;border-radius:50%;
  border:2.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  animation:countUp 0.3s ease;
}
.success-progress{
  width:280px;height:4px;background:var(--border);
  border-radius:2px;overflow:hidden;margin:0 auto 24px;
}
.success-progress-fill{
  height:100%;background:var(--accent);border-radius:2px;width:0%;
  transition:width 1s linear;
}
.btn-go-login{
  padding:10px 28px;background:var(--accent);border:none;
  border-radius:2px;font-size:14px;font-weight:700;font-family:var(--font);
  color:#fff;cursor:pointer;transition:background 0.15s;
}
.btn-go-login:hover{background:var(--accent-hover)}

/* ── LOGIN SCREEN ── */
#login-screen{
  display:none;
  position:fixed;inset:0;z-index:300;
  flex-direction:row;
  background:var(--bg);
  animation:fadeIn 0.4s ease;
}
#login-screen.show{display:flex}
.login-left{
  width:420px;flex-shrink:0;
  background:var(--white);
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  animation:slideRight 0.4s cubic-bezier(.22,1,.36,1) both;
}
.ll-inner{padding:0 40px;flex:1;display:flex;flex-direction:column;justify-content:center}
.ll-brand{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.ll-brand .sap-portal-brand-logo{height:28px}
.ll-brand-name{font-size:17px;font-weight:700;color:var(--text)}
.ll-brand-name span{color:var(--text2);font-weight:400}
.ll-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-0.3px}
.ll-sub{font-size:13px;color:var(--text2);margin-bottom:28px}
.ll-company-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-light);border:1px solid var(--accent-mid);
  padding:5px 12px;border-radius:2px;
  font-size:12px;font-weight:600;color:var(--accent);
  margin-bottom:24px;
}
.ll-company-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.li-group{margin-bottom:14px}
.li-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;display:block}
.li-input{
  width:100%;background:var(--white);
  border:1px solid var(--border2);border-radius:2px;
  padding:9px 12px;font-size:13px;font-family:var(--font);
  color:var(--text);outline:none;
  transition:border 0.15s,box-shadow 0.15s;
}
.li-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.li-input::placeholder{color:var(--text3)}
.li-options{display:flex;justify-content:space-between;align-items:center;margin:6px 0 18px}
.li-check{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.li-chk{width:15px;height:15px;border:1px solid var(--border2);border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.li-chk.on{background:var(--accent);border-color:var(--accent)}
.li-chk.on::after{content:'✓';font-size:9px;color:#fff;font-weight:700}
.li-chk-lbl{font-size:12px;color:var(--text2)}
.li-forgot{font-size:12px;color:var(--accent);cursor:pointer}
.li-forgot:hover{text-decoration:underline}
.btn-signin{
  width:100%;padding:9px;background:var(--accent);border:1px solid var(--accent);
  border-radius:2px;color:#fff;font-size:14px;font-weight:700;
  font-family:var(--font);cursor:pointer;transition:background 0.15s;margin-bottom:10px;
}
.btn-signin:hover{background:var(--accent-hover)}
.li-divider{display:flex;align-items:center;gap:10px;margin:16px 0 14px}
.li-divider::before,.li-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.li-divider span{font-size:11px;color:var(--text3)}
.li-social{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.li-sbtn{padding:8px;border:1px solid var(--border2);border-radius:2px;background:var(--white);font-size:12px;font-family:var(--font);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.15s}
.li-sbtn:hover{background:var(--surface)}
.ll-footer{padding:16px 40px;border-top:1px solid var(--border);font-size:12px;color:var(--text3)}
.ll-footer a{color:var(--accent);cursor:pointer}
.login-right{
  flex:1;
  background:linear-gradient(140deg,#0078d4 0%,#004578 100%);
  display:flex;align-items:center;justify-content:center;padding:60px;
  position:relative;overflow:hidden;
}
.lr-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.07) 1px,transparent 1px);background-size:28px 28px}
.lr-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(rgba(255,255,255,0.06),transparent);top:50%;left:50%;transform:translate(-50%,-50%)}
.lr-content{position:relative;z-index:2;text-align:center;max-width:min(528px,96vw)}
.login-right .lr-icon{width:auto;height:auto;min-height:0;padding:0;background:transparent;border:none;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;margin:0 auto 32px}
.login-right .lr-icon svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lr-icon-svg{display:none}
.lr-zynova-logo-light,.lr-zynova-logo-dark{display:none;height:auto;max-height:300px;width:auto;max-width:min(440px,92vw);object-fit:contain}
.login-right .lr-zynova-logo-light{display:block}
html[data-theme="dark"] .login-right .lr-zynova-logo-light{display:none}
html[data-theme="dark"] .login-right .lr-zynova-logo-dark{display:block}
/* Light theme: light right-panel so the blue vertical logo reads clearly */
html:not([data-theme="dark"]) .login-right{background:linear-gradient(140deg,#f5f8fc 0%,#e2ebf6 100%)}
html:not([data-theme="dark"]) .lr-dots{background-image:radial-gradient(rgba(18,75,146,0.10) 1px,transparent 1px)}
html:not([data-theme="dark"]) .lr-glow{background:radial-gradient(rgba(18,75,146,0.06),transparent)}
html:not([data-theme="dark"]) .lr-title{color:#1b2130}
html:not([data-theme="dark"]) .lr-body{color:#4a5568}
html:not([data-theme="dark"]) .lr-feat-text{color:#2b3a4e}
html:not([data-theme="dark"]) .lr-feat-dot{background:rgba(18,75,146,0.12)}
html:not([data-theme="dark"]) .lr-feat-dot svg{stroke:#124B92}
html:not([data-theme="dark"]) .login-right .lr-icon svg{stroke:#124B92}
.lr-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-0.3px}
.lr-body{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.7;margin-bottom:28px}
.lr-feats{display:flex;flex-direction:column;gap:10px;text-align:left}
.lr-feat{display:flex;align-items:center;gap:10px}
.lr-feat-dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.13);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lr-feat-dot svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lr-feat-text{font-size:12px;color:rgba(255,255,255,0.75)}

/* ════ AR INVOICE STYLES ════ */
.ar-pg{display:none}.ar-pg.active{display:block!important}

:root{
  --bg:#f3f2f1;
  --white:#ffffff;
  --surface:#faf9f8;
  --border:#edebe9;
  --border2:#d2d0ce;
  --text:#201f1e;
  --text2:#605e5c;
  --text3:#a19f9d;
  --accent:#0078d4;
  --accent-hover:#106ebe;
  --accent-light:#eff6fc;
  --accent-mid:#c7e0f4;
  --success:#107c10;
  --success-bg:#dff6dd;
  --warn:#c8610a;
  --warn-bg:#fff4ce;
  --danger:#a4262c;
  --danger-bg:#fde7e9;
  --purple:#5c2d91;
  --purple-bg:#f4ecfd;
  --sidebar-w:220px;
  --topbar-h:48px;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  --bg:#1b1a19;--white:#2d2c2b;--surface:#252423;--border:#3b3a39;--border2:#484644;
  --text:#f3f2f1;--text2:#c8c6c4;--text3:#8a8886;--accent:#479ef5;--accent-hover:#62abf5;
  --accent-light:#243a5c;--accent-mid:#2a5282;--success:#6ccb5f;--success-bg:#1e3a24;
  --warn:#f4ba79;--warn-bg:#3a2c1a;--danger:#f1707b;--danger-bg:#3b1f22;
  --purple:#c7a8e8;--purple-bg:#352b45;
}
html[data-theme="dark"]{color-scheme:dark}
[data-theme="dark"] .filter-select,[data-theme="dark"] .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8c6c4'/%3E%3C/svg%3E");
}
html{transition:background-color .22s ease,color .22s ease}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ LAYOUT ══ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--white);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:50;
  animation:slideIn 0.3s ease both;
}
.sb-logo{height:var(--topbar-h);display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-logo-name{font-size:13px;font-weight:600;color:var(--text)}
.sb-logo-name span{color:var(--text2);font-weight:400}
.sb-nav{flex:1;overflow-y:auto;padding:8px 0}
.sb-nav::-webkit-scrollbar{width:0}
.sb-group-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;padding:12px 16px 4px}
.sb-item{display:flex;align-items:center;gap:10px;padding:7px 16px;cursor:pointer;font-size:13px;color:var(--text2);transition:background 0.1s,color 0.1s;position:relative;border-left:2px solid transparent;text-decoration:none}
.sb-item:hover{background:var(--surface);color:var(--text)}
.sb-item.active{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.sb-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px}
.sb-bottom{border-top:1px solid var(--border);flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background 0.1s}
.sb-user:hover{background:var(--surface)}
.sb-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sb-uname{font-size:12px;font-weight:600;color:var(--text)}
.sb-urole{font-size:11px;color:var(--text3)}

.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 16px;z-index:40}
.tb-crumb{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px}
.tb-crumb span{color:var(--text);font-weight:600}
.tb-crumb-sep{color:var(--text3)}
.tb-crumb a{color:var(--accent);cursor:pointer;text-decoration:none}
.tb-crumb a:hover{text-decoration:underline}
.tb-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.tb-icon-btn{width:32px;height:32px;border-radius:2px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background 0.1s;position:relative}
.tb-icon-btn:hover{background:var(--surface)}
.tb-icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:1.5px solid var(--white)}
.tb-divider-v{width:1px;height:18px;background:var(--border);margin:0 2px}

/* ══ NOTIFICATIONS DROPDOWN (topbar — must be global, appears on every page) ══ */
.notif-row{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;align-items:flex-start}
.notif-row:last-child{border-bottom:none}
.notif-row:hover{background:var(--surface)}
.notif-row.unread{background:#eff6ff}
.notif-row.unread:hover{background:#dbeafe}

/* ── Dot color ────────────────────────────────────────────────────────
   Unread: severity color (info=blue, warn=orange, danger=red, ok=green).
   Read:   neutral grey — matches Gmail / Facebook read state.
   The `:not(.unread)` override MUST come after the severity rules so it
   wins the cascade for read rows regardless of the severity class. */
.notif-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:#3b82f6}
.notif-row.unread .notif-dot.info{background:#3b82f6}
.notif-row.unread .notif-dot.warn{background:#f59e0b}
.notif-row.unread .notif-dot.danger{background:#ef4444}
.notif-row.unread .notif-dot.ok{background:#10b981}
.notif-row:not(.unread) .notif-dot{background:#cbd5e1}
[data-theme="dark"] .notif-row:not(.unread) .notif-dot{background:#475569}
.notif-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-body{font-size:12px;color:var(--text2);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.notif-time{font-size:10px;color:var(--text3);margin-top:3px}

/* ══ Topbar notification bell badge (FB / Gmail / Twitter style) ══ */
.p-notif-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:16px;height:16px;padding:0 4px;
  background:#ef4444;color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  border-radius:999px;border:2px solid var(--white);
  box-sizing:content-box;
  display:none;pointer-events:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .15s ease;
}
.p-notif-badge.is-visible{display:block;animation:notifBadgePop .28s ease-out}
.p-notif-badge.is-double{min-width:20px}
.p-notif-badge.is-triple{min-width:26px;font-size:9px}
@keyframes notifBadgePop{
  0%  {transform:scale(.4);opacity:0}
  60% {transform:scale(1.15);opacity:1}
  100%{transform:scale(1)}
}
.p-notif-bell.has-unread svg{animation:notifBellRing 1.6s ease-in-out 1 .2s}
@keyframes notifBellRing{
  0%,100% {transform:rotate(0)}
  10%,30%,50%{transform:rotate(-12deg)}
  20%,40%  {transform:rotate(12deg)}
  60%      {transform:rotate(0)}
}
[data-theme="dark"] .p-notif-badge{border-color:var(--surface)}
.tb-user-btn{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:2px;cursor:pointer;border:none;background:transparent;font-family:var(--font)}
.tb-user-btn:hover{background:var(--surface)}
.tb-user-av{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.tb-user-name{font-size:13px;font-weight:500;color:var(--text)}

.main{position:absolute;top:var(--topbar-h);left:var(--sidebar-w);right:0;bottom:0;overflow-y:auto;background:var(--bg)}
.main::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ══ PAGE SWITCHER ══ */
.page{display:none;animation:fadeIn 0.25s ease both}
.page.active{display:block}

/* ══ COMMON COMPONENTS ══ */
.page-wrap{padding:20px 24px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.page-title{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-0.3px;margin-bottom:3px}
.page-sub{font-size:13px;color:var(--text2)}
.ph-actions{display:flex;gap:8px;flex-shrink:0}

.btn-primary{padding:7px 16px;background:var(--accent);border:1px solid var(--accent);border-radius:2px;color:#fff;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background 0.15s;display:flex;align-items:center;gap:6px}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-secondary{padding:7px 16px;background:var(--white);border:1px solid var(--border2);border-radius:2px;color:var(--text);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background 0.15s;display:flex;align-items:center;gap:6px}
.btn-secondary:hover{background:var(--surface)}
.btn-secondary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-danger{padding:7px 16px;background:var(--white);border:1px solid var(--danger);border-radius:2px;color:var(--danger);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background 0.15s}
.btn-danger:hover{background:var(--danger-bg)}
.btn-icon{width:30px;height:30px;border-radius:2px;background:transparent;border:1px solid var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background 0.1s;font-family:var(--font)}
.btn-icon:hover{background:var(--surface)}
.btn-icon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:2px;font-size:11px;font-weight:600;white-space:nowrap}
.tag-success{background:var(--success-bg);color:var(--success)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-info{background:var(--accent-light);color:var(--accent)}
.tag-danger{background:var(--danger-bg);color:var(--danger)}
.tag-neutral{background:var(--surface);color:var(--text2)}
.tag-purple{background:var(--purple-bg);color:var(--purple)}
.tag-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

.card{background:var(--white);border:1px solid var(--border);border-radius:2px;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
.card-title{font-size:14px;font-weight:600;color:var(--text)}

/* ══ FILTER BAR ══ */
.filter-bar{display:flex;align-items:center;gap:8px;padding:12px 0;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:6px 12px;min-width:260px;transition:border 0.15s,box-shadow 0.15s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.search-box svg{width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.search-box input{background:none;border:none;outline:none;font-size:13px;font-family:var(--font);color:var(--text);width:100%}
.search-box input::placeholder{color:var(--text3)}
.filter-select{background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:6px 28px 6px 10px;font-size:13px;font-family:var(--font);color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border 0.15s}
.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.filter-sep{width:1px;height:20px;background:var(--border)}
.filter-count{font-size:12px;color:var(--text2);margin-left:auto;white-space:nowrap}

/* ══ COMMAND BAR ══ */
.cmd-bar{display:flex;align-items:center;gap:1px;padding:6px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
.cmd-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:2px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border:none;background:transparent;font-family:var(--font);transition:background 0.1s,color 0.1s}
.cmd-btn:hover{background:var(--accent-light);color:var(--accent)}
.cmd-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cmd-sep{width:1px;height:16px;background:var(--border);margin:0 2px}

/* ══ TABLE ══ */
.ms-table{width:100%;border-collapse:collapse}
.ms-table th{font-size:11px;font-weight:600;color:var(--text2);text-align:left;padding:9px 14px;background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;cursor:pointer;user-select:none}
.ms-table th:hover{background:#edebe9}
.ms-table th.sort-asc::after{content:' ↑';color:var(--accent)}
.ms-table th.sort-desc::after{content:' ↓';color:var(--accent)}
.ms-table td{padding:10px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
.ms-table tr:last-child td{border-bottom:none}
.ms-table tbody tr{cursor:pointer;transition:background 0.1s}
.ms-table tbody tr:hover td{background:var(--bg)}
.ms-table tbody tr.selected td{background:var(--accent-light)}
.ms-table .mono{font-family:'Courier New',monospace;font-size:12px}
.ms-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ms-table .check-col{width:36px;text-align:center}
.ms-chk{width:14px;height:14px;border:1px solid var(--border2);border-radius:2px;background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;margin:0 auto}
.ms-chk.on{background:var(--accent);border-color:var(--accent)}
.ms-chk.on::after{content:'✓';font-size:9px;color:#fff;font-weight:700;line-height:1}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--border);background:var(--surface)}
.pg-info{font-size:12px;color:var(--text2)}
.pg-btns{display:flex;gap:2px}
.pg-btn{padding:4px 10px;border:1px solid var(--border2);border-radius:2px;background:var(--white);font-size:12px;font-family:var(--font);color:var(--text2);cursor:pointer;transition:background 0.1s}
.pg-btn:hover{background:var(--surface)}
.pg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-btn:disabled{opacity:0.4;cursor:default}

/* ══ INVOICE FORM ══ */
.form-layout{display:grid;grid-template-columns:minmax(0, 1fr) 320px;gap:16px;padding:20px 24px}
.form-card{background:var(--white);border:1px solid var(--border);border-radius:2px}
.form-section{padding:16px 20px;border-bottom:1px solid var(--border)}
.form-section:last-child{border-bottom:none}
.form-section-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text2);margin-bottom:14px}
.form-grid{display:grid;gap:12px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-grid-3{grid-template-columns:1fr 1fr 1fr}
.form-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;display:block}
.form-label.req::after{content:' *';color:var(--danger)}
.form-input{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:7px 10px;font-size:13px;font-family:var(--font);color:var(--text);outline:none;transition:border 0.15s,box-shadow 0.15s}
.form-input:hover{border-color:#8a8886}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.form-input::placeholder{color:var(--text3)}
.form-input[readonly]{background:var(--surface);color:var(--text2)}
.form-select{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:7px 28px 7px 10px;font-size:13px;font-family:var(--font);color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border 0.15s}
.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.form-textarea{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:7px 10px;font-size:13px;font-family:var(--font);color:var(--text);outline:none;resize:vertical;min-height:70px;transition:border 0.15s}
.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* LINES TABLE */
.lines-table{width:100%;border-collapse:collapse}
.lines-table th{font-size:11px;font-weight:600;color:var(--text2);text-align:left;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.4px}
.lines-table td{padding:7px 10px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
.lines-table tr:last-child td{border-bottom:none}
.lines-table tbody tr:hover td{background:var(--bg)}
.line-input{width:100%;background:transparent;border:1px solid transparent;border-radius:2px;padding:4px 6px;font-size:13px;font-family:var(--font);color:var(--text);outline:none;transition:border 0.15s;min-width:60px}
.line-input:hover{border-color:var(--border2)}
.line-input:focus{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 1px var(--accent)}
.line-del{width:28px;height:28px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:2px;color:var(--text3);transition:all 0.1s;margin:0 auto}
.line-del:hover{background:var(--danger-bg);color:var(--danger)}
.line-del svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.add-line-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12px;color:var(--accent);cursor:pointer;border:none;background:transparent;font-family:var(--font);font-weight:500;transition:background 0.1s}
.add-line-btn:hover{background:var(--accent-light)}
.add-line-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

/* SUMMARY PANEL */
.summary-card{background:var(--white);border:1px solid var(--border);border-radius:2px;overflow:hidden;position:sticky;top:20px}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border)}
.summary-row:last-child{border-bottom:none}
.sum-label{font-size:13px;color:var(--text2)}
.sum-val{font-size:13px;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.summary-total{background:var(--accent);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.sum-total-label{font-size:14px;font-weight:600;color:#fff}
.sum-total-val{font-size:18px;font-weight:700;color:#fff}
.journal-info{padding:12px 16px;background:var(--surface);border-top:1px solid var(--border)}
.ji-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.ji-label{color:var(--text2)}
.ji-val{color:var(--text);font-weight:500;font-family:'Courier New',monospace}

/* STATUS BAR */
.status-bar{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.status-step{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3)}
.status-step.done{color:var(--success)}
.status-step.active{color:var(--accent);font-weight:600}
.status-step svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.status-line{flex:1;height:1px;background:var(--border);max-width:40px}

/* ══ POS PAGE ══ */
.pos-layout{display:grid;grid-template-columns:1fr 380px;height:calc(100vh - var(--topbar-h));overflow:hidden}
.pos-left{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg);overflow:hidden}
.pos-right{display:flex;flex-direction:column;background:var(--white);overflow:hidden}

/* POS Left */
.pos-search-bar{padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border);display:flex;gap:8px}
.pos-cats{display:flex;gap:6px;padding:10px 16px;background:var(--white);border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0}
.pos-cats::-webkit-scrollbar{height:0}
.pos-cat{padding:5px 14px;border-radius:14px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border2);background:var(--white);color:var(--text2);transition:all 0.15s;white-space:nowrap;font-family:var(--font)}
.pos-cat:hover{border-color:var(--accent);color:var(--accent)}
.pos-cat.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pos-items{flex:1;overflow-y:auto;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;align-content:start}
.pos-items::-webkit-scrollbar{width:4px}
.pos-items::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.pos-item{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:14px 12px;cursor:pointer;transition:all 0.15s;text-align:center}
.pos-item:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,120,212,0.12)}
.pos-item:active{transform:scale(0.97)}
.pos-item-icon{width:44px;height:44px;border-radius:8px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:20px}
.pos-item-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.3}
.pos-item-code{font-size:10px;color:var(--text3);font-family:'Courier New',monospace;margin-bottom:6px}
.pos-item-price{font-size:14px;font-weight:700;color:var(--accent)}
.pos-item-stock{font-size:10px;color:var(--text3);margin-top:2px}

/* POS Right — Cart */
.pos-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.pos-header-title{font-size:14px;font-weight:600;color:var(--text)}
.pos-customer{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.pos-customer svg{width:14px;height:14px;stroke:var(--text3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pos-cart{flex:1;overflow-y:auto;padding:0}
.pos-cart::-webkit-scrollbar{width:4px}
.pos-cart::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);transition:background 0.1s}
.cart-item:hover{background:var(--surface)}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-code{font-size:11px;color:var(--text3);font-family:'Courier New',monospace}
.ci-qty{display:flex;align-items:center;gap:6px;flex-shrink:0}
.qty-btn{width:22px;height:22px;border-radius:2px;border:1px solid var(--border2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--text2);transition:all 0.1s;line-height:1}
.qty-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.qty-val{width:28px;text-align:center;font-size:13px;font-weight:600;color:var(--text)}
.ci-price{font-size:13px;font-weight:600;color:var(--text);text-align:right;min-width:70px;font-variant-numeric:tabular-nums}
.ci-del{width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:var(--text3);display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all 0.1s}
.ci-del:hover{background:var(--danger-bg);color:var(--danger)}
.ci-del svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.pos-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--text3);gap:10px;text-align:center}
.pos-empty svg{width:40px;height:40px;stroke:var(--border2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* POS Totals */
.pos-totals{border-top:1px solid var(--border);padding:12px 16px;background:var(--surface)}
.pos-total-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--text2)}
.pos-total-row.grand{color:var(--text);font-weight:700;font-size:15px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.pos-discount{display:flex;align-items:center;gap:8px;padding:8px 0}
.pos-discount label{font-size:12px;color:var(--text2);flex-shrink:0}
.pos-discount input{width:80px;padding:5px 8px;border:1px solid var(--border2);border-radius:2px;font-size:13px;font-family:var(--font);outline:none;text-align:right}
.pos-discount input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* POS Actions */
.pos-actions{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.pos-pay-methods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:4px}
.pay-method{padding:8px 6px;border:1.5px solid var(--border2);border-radius:2px;background:var(--white);cursor:pointer;text-align:center;font-size:11px;font-weight:600;color:var(--text2);transition:all 0.15s;font-family:var(--font)}
.pay-method:hover{border-color:var(--accent);color:var(--accent)}
.pay-method.selected{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.btn-checkout{width:100%;padding:12px;background:var(--accent);border:none;border-radius:2px;color:#fff;font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background 0.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-checkout:hover{background:var(--accent-hover)}
.btn-checkout svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn-void{width:100%;padding:8px;background:var(--white);border:1px solid var(--danger);border-radius:2px;color:var(--danger);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background 0.15s}
.btn-void:hover{background:var(--danger-bg)}

/* POS split/partial tender */
.pos-tender-add{display:flex;gap:6px;align-items:center}
.pos-tender-add .fi{flex:1;text-align:right;padding:6px 8px;border:1px solid var(--border2);border-radius:2px;font-size:13px;font-family:var(--font);outline:none}
.pos-tender-add .fi:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pos-tender-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--border2);border-radius:2px;margin-top:6px;font-size:12px;background:var(--surface)}
.pos-tender-row-method{flex:1;font-weight:600;color:var(--text2)}
.pos-tender-row-amt{font-family:'Courier New',monospace;color:var(--text)}
.pos-tender-row-del{border:none;background:none;color:var(--danger);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.pos-tender-row-del:hover{opacity:0.7}
.pos-tender-remaining-row{margin-top:4px}
.pos-tender-remaining-row.pos-tender-open span:last-child{color:var(--warning,#f59e0b);font-weight:700}

/* ── PORTAL BASE ── */
#portal{display:none;position:fixed;inset:0;z-index:400;flex-direction:row;background:var(--bg);font-family:var(--font)}
#portal.open{display:flex}
.p-sidebar{width:220px;flex-shrink:0;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:width .2s ease,background-color .22s ease,border-color .22s ease}
.p-sidebar.collapsed{width:52px}
.p-sidebar.collapsed .p-nav-label,.p-sidebar.collapsed .p-nav-badge,.p-sidebar.collapsed .sb-text{display:none}
.p-sidebar.collapsed .p-logo-name{display:none}
.p-sidebar.collapsed .p-nav-item{justify-content:center;padding:10px 0}
.p-sidebar.collapsed .p-nav-item svg{margin:0}
.p-sidebar.collapsed .p-user-box .sb-text-wrap{display:none}
.p-sidebar.collapsed .p-user-box{justify-content:center;padding:12px 0;gap:0}
.p-sidebar.collapsed .p-logo{flex-direction:column;padding:10px 0;height:auto;min-height:48px;gap:6px;justify-content:center;align-items:center}
.p-sidebar.collapsed .sidebar-toggle{margin-left:0}
.sidebar-toggle{width:32px;height:32px;border-radius:2px;border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);margin-left:auto;transition:background .15s;flex-shrink:0}
.sidebar-toggle:hover{background:var(--surface)}
.sidebar-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.p-nav-item .sb-text{flex:1;min-width:0}
.p-topbar{height:48px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:8px;flex-shrink:0;transition:background-color .22s ease,border-color .22s ease}
.p-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.p-content{flex:1;overflow-y:auto;background:var(--bg);transition:background-color .22s ease}
.p-content::-webkit-scrollbar{width:5px}
.p-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* sidebar logo */
.p-logo{height:48px;display:flex;align-items:center;gap:9px;padding:0 12px 0 16px;border-bottom:1px solid var(--border);flex-shrink:0;transition:border-color .22s ease}
.p-logo .sb-text{flex:1;min-width:0}
.p-sidebar.collapsed .sap-portal-brand-logo{max-width:40px;max-height:22px;width:auto;height:auto}

/* sidebar nav */
.p-nav{flex:1;overflow-y:auto;padding:8px 0}
.p-nav::-webkit-scrollbar{width:0}
.p-nav-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;padding:10px 16px 4px}
.p-nav-item{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px;color:var(--text2);cursor:pointer;border-left:2.5px solid transparent;transition:background .1s,color .1s;user-select:none}
.p-nav-item:hover{background:var(--bg);color:var(--text)}
.p-nav-item.active{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.p-nav-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.p-nav-item.p-nav-sub{padding-left:30px;font-size:12px;color:var(--text3);gap:8px}
.p-nav-item.p-nav-sub svg{width:13px;height:13px;opacity:.92}
.p-sidebar.collapsed .p-nav-sub{display:none}
.p-nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px}

/* collapsible modules (SAP-style) */
.p-nav-group{border-top:1px solid var(--border);margin-top:2px}
.p-nav-group:first-child{border-top:none;margin-top:0}
.p-nav-group-hdr{
  width:100%;display:flex;align-items:center;gap:8px;padding:11px 12px 9px 16px;margin:0;
  border:none;background:transparent;cursor:pointer;font-family:inherit;text-align:left;
  font-size:12px;font-weight:700;color:var(--text);letter-spacing:.15px;user-select:none;
  transition:background .12s,color .12s
}
.p-nav-group-hdr:hover{background:var(--bg);color:var(--accent)}
.p-nav-group-hdr:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent-light)}
.p-nav-group-hdr-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text2)}
.p-nav-group-hdr-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-nav-group-chevron{margin-left:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text3);transition:transform .34s cubic-bezier(0.33,1,0.68,1)}
.p-nav-group-chevron svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-nav-group.open .p-nav-group-chevron{transform:rotate(90deg)}
.p-nav-group-body{
  max-height:0;overflow:hidden;opacity:0;padding-bottom:0;pointer-events:none;
  transition:max-height .38s cubic-bezier(0.33,1,0.68,1),opacity .26s ease,padding-bottom .26s ease
}
.p-nav-group.open .p-nav-group-body{
  max-height:2200px;opacity:1;padding-bottom:6px;pointer-events:auto
}
.p-sidebar.collapsed .p-nav-group{border-top-color:transparent}
.p-sidebar.collapsed .p-nav-group-hdr{padding:8px 0;justify-content:center}
.p-sidebar.collapsed .p-nav-group-hdr .sb-text,.p-sidebar.collapsed .p-nav-group-hdr .p-nav-group-chevron{display:none!important}
/* Icon rail: only the OPEN group unrolls. Without the `.open` qualifier this rule reopened
   every group at once, so collapsing the sidebar produced one unbroken column of ~120
   unlabelled icons with no way to tell which module any of them belonged to. */
.p-sidebar.collapsed .p-nav-group.open .p-nav-group-body{
  max-height:none!important;opacity:1!important;padding-bottom:4px!important;pointer-events:auto!important;overflow:visible!important;
  transition:none!important
}
.p-sidebar.collapsed .p-nav-group:not(.open) .p-nav-group-body{
  max-height:0!important;opacity:0!important;padding-bottom:0!important;pointer-events:none!important;overflow:hidden!important;
  transition:none!important
}
@media (prefers-reduced-motion:reduce){
  .p-nav-group-body,.p-nav-group.open .p-nav-group-body{transition-duration:.01ms!important}
  .p-nav-group-chevron{transition-duration:.01ms!important}
}

/* sidebar bottom */
.p-user-box{border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:border-color .22s ease,background .1s}
.p-user-box:hover{background:var(--surface)}
.p-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}

/* topbar */
.p-breadcrumb{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px}
.p-breadcrumb b{color:var(--text);font-weight:600}
.p-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);border-radius:2px;padding:6px 12px;margin:0 8px;flex:1;max-width:300px;transition:background .22s ease,border-color .22s ease}
.p-search svg{width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.p-search input{background:none;border:none;outline:none;font-size:13px;color:var(--text);width:100%;font-family:inherit}
.p-search input::placeholder{color:var(--text3)}
.p-topbar-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.p-icon-btn{width:32px;height:32px;border-radius:2px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background .1s,color .1s ease}
.p-icon-btn:hover{background:var(--surface)}
.p-icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* pages */
@keyframes p-page-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.p-page{display:none;opacity:0}
.p-page.show{
  display:block;
  animation:p-page-in .38s cubic-bezier(0.22,1,0.36,1) both;
}
@media (prefers-reduced-motion:reduce){
  .p-page.show{animation:none;opacity:1}
}

/* page wrapper */
.p-wrap{padding:20px 24px}
.p-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.p-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:3px}
.p-sub{font-size:13px;color:var(--text2)}
.p-actions{display:flex;gap:8px;flex-shrink:0}

/* buttons */
.btn-p{padding:7px 16px;background:var(--accent);border:1px solid var(--accent);border-radius:2px;color:#fff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.btn-p:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-p svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.btn-s{padding:7px 16px;background:var(--white);border:1px solid var(--border2);border-radius:2px;color:var(--text);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.btn-s:hover{background:var(--surface)}
.btn-s svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* Soft / tonal primary — same accent family as .btn-p but lighter so two
   buttons of similar visual weight can sit side-by-side without the user
   being unsure which is "the" action. Used on actions that are important
   but secondary to the main commit (e.g. Save Draft next to Save to SAP).
   Same size/font-weight as .btn-p so both buttons feel equally substantial. */
.btn-soft{
  padding:7px 16px;
  background:var(--accent-light);
  border:1px solid var(--accent-mid, var(--accent-light));
  border-radius:2px;
  color:var(--accent);
  font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-soft:hover{
  background:var(--accent-mid, var(--accent-light));
  border-color:var(--accent);
}
.btn-soft svg{width:12px;height:12px;stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round}

/* kpi strip */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:2px;padding:14px 16px;transition:background .22s ease,border-color .22s ease}
.kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);margin-bottom:8px}
.kpi-val{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.4px;margin-bottom:4px}
.kpi-trend{font-size:11px;color:var(--text3)}
/* Filter KPIs — clickable cards that filter the list to a specific status.
   Active state gets a thick accent border + lift; hover shows preview state. */
.kpi.kpi-filter{cursor:pointer;user-select:none;position:relative}
.kpi.kpi-filter:hover{border-color:var(--accent);box-shadow:0 4px 10px rgba(0,0,0,0.06);transform:translateY(-1px)}
.kpi.kpi-filter.active{
  border:2px solid var(--accent);
  padding:13px 15px;   /* compensate the +1px border to avoid jump */
  background:var(--accent-light, rgba(0,120,212,0.06));
  box-shadow:0 0 0 3px rgba(0,120,212,0.12);
}
.kpi.kpi-filter.active::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent);border-top-left-radius:2px;border-top-right-radius:2px;
}
.kpi.kpi-filter.active .kpi-label{color:var(--accent)}
.kpi-trend.up{color:var(--success);font-weight:600}
.kpi-trend.dn{color:var(--danger);font-weight:600}
.kpi-trend.warn{color:var(--warn);font-weight:600}

/* filter bar */
.filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.f-search{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:7px 12px;min-width:260px;flex:1;max-width:360px;transition:background .22s ease,border-color .22s ease}
.f-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.f-search svg{width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.f-search input{background:none;border:none;outline:none;font-size:13px;font-family:inherit;color:var(--text);width:100%}
.f-search input::placeholder{color:var(--text3)}
.f-sel{background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:7px 28px 7px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border .15s,background .22s ease}
.f-sel:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
[data-theme="dark"] .f-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8c6c4'/%3E%3C/svg%3E")}
.f-count{font-size:12px;color:var(--text2);margin-left:auto;white-space:nowrap}

/* card + table */
.p-card{background:var(--white);border:1px solid var(--border);border-radius:2px;overflow:hidden;margin-bottom:14px;transition:background .22s ease,border-color .22s ease}
.p-card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border);transition:border-color .22s ease}
.p-card-title{font-size:14px;font-weight:600;color:var(--text)}
.p-cmd{display:flex;align-items:center;gap:1px;padding:6px 18px;background:var(--surface);border-bottom:1px solid var(--border);transition:background .22s ease,border-color .22s ease}
.p-cmd-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:2px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border:none;background:transparent;font-family:inherit;transition:background .1s,color .1s}
.p-cmd-btn:hover{background:var(--accent-light);color:var(--accent)}
.p-cmd-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.p-cmd-sep{width:1px;height:16px;background:var(--border);margin:0 2px}
.p-tbl{width:100%;border-collapse:collapse}
.p-tbl th{font-size:11px;font-weight:600;color:var(--text2);text-align:left;padding:9px 14px;background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;cursor:pointer;user-select:none;transition:background .1s,border-color .22s ease}
.p-tbl th:hover{background:var(--border)}
.p-tbl td{padding:10px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;transition:border-color .22s ease}
.p-tbl tr:last-child td{border-bottom:none}
.p-tbl tbody tr{cursor:pointer;transition:background .1s}
.p-tbl tbody tr:hover td{background:var(--bg)}
.p-tbl .mono{font-family:'Courier New',monospace;font-size:12px}
.p-tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* tags */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:2px;font-size:11px;font-weight:600;white-space:nowrap}
.tag svg{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex-shrink:0}
.tag-ok{background:var(--success-bg);color:var(--success)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-err{background:var(--danger-bg);color:var(--danger)}
.tag-info{background:var(--accent-light);color:var(--accent)}
.tag-gray{background:var(--surface);color:var(--text2)}

/* pagination */
.p-pager{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--border);background:var(--surface);transition:border-color .22s ease,background .22s ease}
.p-pager-info{font-size:12px;color:var(--text2)}
.p-pager-btns{display:flex;gap:2px}
.pg{padding:4px 10px;border:1px solid var(--border2);border-radius:2px;background:var(--white);font-size:12px;font-family:inherit;color:var(--text2);cursor:pointer;transition:background .1s,border-color .15s}
.pg:hover{background:var(--bg)}
.pg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pg:disabled{opacity:.4;cursor:default}

/* FORM layout */
/* CRITICAL: minmax(0, 1fr) — NOT plain 1fr — so the left form column can shrink
   below its intrinsic content width. Plain `1fr` resolves to `minmax(min-content, 1fr)`,
   which means a wide lines table (~2000px of th/td cells) forces this column to be
   2000px wide and pushes the right sticky 300px column off-screen entirely. With
   minmax(0, 1fr) the column can collapse, letting the inner `overflow-x:auto` wrapper
   take effect and scroll the lines table horizontally INSIDE its own card. */
.form-layout{display:grid;grid-template-columns:minmax(0, 1fr) 300px;gap:16px;padding:20px 24px}
/* Apply the same fix to the form-layout's left child so any deeply-nested wide
   content (lines table, big tables) is contained, not blowing the column wide. */
.form-layout > *{min-width:0}
.fc{background:var(--white);border:1px solid var(--border);border-radius:2px;margin-bottom:14px;transition:background .22s ease,border-color .22s ease}
.fc-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);transition:border-color .22s ease}
.fc-icon{width:28px;height:28px;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fc-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-blue{background:var(--accent-light);color:var(--accent)}
.fc-green{background:var(--success-bg);color:var(--success)}
.fc-title{font-size:13px;font-weight:600;color:var(--text)}
.fc-body{padding:18px}
.fg{display:grid;gap:12px}
.fg-2{grid-template-columns:1fr 1fr}
.fg-3{grid-template-columns:1fr 1fr 1fr}
.fg-4{grid-template-columns:1fr 1fr 1fr 1fr}
/* ── PO List pagination footer ──────────────────────────────────────────
   Sits below the table inside the .p-card. Page-size selector on the left,
   First/Prev/Next/Last buttons + "Page X of Y" on the right. Compact look
   matching the toolbar (.p-cmd) above the table. */
.po-pager{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:10px 16px;
  border-top:1px solid var(--border);background:var(--surface);
  font-size:12px;color:var(--text2);
}
.po-pager-left, .po-pager-right{display:flex;align-items:center;gap:8px}
.po-pager-lbl{color:var(--text2)}
.po-pager-sel{
  padding:4px 8px;border:1px solid var(--border2);border-radius:3px;
  background:var(--white);color:var(--text);font-size:12px;
  cursor:pointer;outline:none;font-family:inherit;
}
.po-pager-sel:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.po-pager-range{color:var(--text3);margin-left:8px;font-variant-numeric:tabular-nums}
.po-pager-info{
  font-size:12px;color:var(--text);font-weight:500;
  padding:0 8px;font-variant-numeric:tabular-nums;
}
.po-pager-btn{
  background:var(--white);border:1px solid var(--border2);
  width:28px;height:28px;border-radius:3px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);font-size:14px;line-height:1;
  transition:border-color .15s,background .15s,color .15s;
  font-family:inherit;
}
.po-pager-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-light, rgba(0,120,212,0.06))}
.po-pager-btn:disabled{color:var(--text3);cursor:not-allowed;background:var(--surface);opacity:0.5}

/* ── PO Proper Preview Modal — full-screen, form-style read-only render ─────
   Shows the PO in the same layout as the edit form but with static values
   instead of inputs. 95vw × 95vh so it feels like a full page. Cards mirror
   the form's .fc / .fc-head / .fc-body structure for visual consistency. */
.po-preview-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:2.5vh 2.5vw;
}
.po-preview-modal{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  width:95vw;height:95vh;max-width:1400px;
  display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.45);
  overflow:hidden;
}
.po-preview-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;border-bottom:1px solid var(--border);
  background:var(--surface);
}
.po-preview-title{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;color:var(--text);
}
.po-preview-actions{display:flex;align-items:center;gap:8px}
.po-preview-close{
  background:none;border:none;cursor:pointer;color:var(--text2);
  font-size:24px;line-height:1;padding:2px 10px;border-radius:4px;
  transition:background .15s,color .15s;
}
.po-preview-close:hover{background:var(--border);color:var(--text)}
.po-preview-body{
  flex:1;overflow-y:auto;padding:20px 26px;background:var(--bg);
  scrollbar-width:thin;scrollbar-color:var(--text3) transparent;
}
.po-preview-body::-webkit-scrollbar{width:8px}
.po-preview-body::-webkit-scrollbar-thumb{background:var(--text3);border-radius:4px}

/* Preview cards mirror the edit form's .fc structure. */
.pp-card{
  background:var(--white);border:1px solid var(--border);border-radius:6px;
  margin-bottom:14px;
}
.pp-card-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid var(--border);
}
.pp-card-ic{
  width:24px;height:24px;background:var(--accent-light, rgba(0,120,212,0.10));
  color:var(--accent);border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pp-card-ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pp-card-title{font-size:13px;font-weight:600;color:var(--text)}
.pp-card-body{padding:16px 18px}
.pp-card-totals{max-width:480px;margin-left:auto}

/* ── Bottom row: Remarks (left) + Totals (right) ───────────────────────
   Used by the document preview (PO/GRPO/AP) when both Remarks AND Totals
   are rendered. JS only wraps them in this row when Remarks has content
   — otherwise Totals floats right on its own (legacy behavior preserved).
   The Totals card override drops its own margin-left:auto + max-width so
   it fills the grid column exactly.

   align-items:stretch makes both cards grow to the same height — the
   taller of the two sets the row height and the shorter one fills the
   extra vertical space cleanly. Without this, Remarks would shrink-wrap
   its content and look orphaned next to the always-larger Totals card. */
.pp-bottom-row{
  display:grid;
  grid-template-columns:1fr 480px;
  gap:14px;
  align-items:stretch;
}
.pp-bottom-row > .pp-card-totals{ max-width:none; margin-left:0 }
/* Make the cards' internal body fill the available vertical space so the
   stretch effect is visually obvious (otherwise the body would float at
   the top with empty space below). */
.pp-bottom-row > .pp-card{ display:flex; flex-direction:column }
.pp-bottom-row > .pp-card > .pp-card-body{ flex:1 }
@media (max-width: 800px){
  .pp-bottom-row{ grid-template-columns:1fr; align-items:start }
  .pp-bottom-row > .pp-card{ display:block }
}

/* Grid layouts — match form's 3/4-col grids. */
.pp-grid{display:grid;gap:14px}
.pp-grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.pp-grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 900px){.pp-grid-3, .pp-grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 600px){.pp-grid-3, .pp-grid-4{grid-template-columns:1fr}}

.pp-field{display:flex;flex-direction:column;min-width:0}
.pp-field label{
  font-size:11px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;
}
.pp-val{
  font-size:13px;color:var(--text);
  background:var(--surface);border:1px solid var(--border2);border-radius:3px;
  padding:7px 10px;min-height:32px;
  display:flex;align-items:center;
  font-variant-numeric:tabular-nums;
}
.pp-val-multiline{white-space:pre-wrap;align-items:flex-start;min-height:60px}

/* Status badges */
.pp-status{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.4px;
  padding:2px 8px;border-radius:10px;border:1px solid;
  text-transform:uppercase;
}
/* Open is the default "no special signal" state — treat it as neutral so
   the eye is drawn to Closed (success) / Cancelled (danger) badges. SAP B1
   client does the same: only terminal states get accent colors. */
.pp-status.pp-st-open{color:var(--text2);border-color:var(--border2);background:var(--surface)}
.pp-status.pp-st-closed{color:var(--success);border-color:var(--success);background:rgba(34,139,34,0.08)}
.pp-status.pp-st-cancelled{color:var(--danger);border-color:var(--danger);background:rgba(220,53,69,0.08)}
.pp-status.pp-st-unknown{color:var(--text3);border-color:var(--text3)}

/* Lines table */
.pp-tbl{width:100%;border-collapse:collapse;font-size:12px}
.pp-tbl th{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text2);background:var(--surface);
  padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;
  white-space:nowrap;
}
.pp-tbl th.num{text-align:right}
.pp-tbl td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.pp-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.pp-tbl td.mono{font-family:'Courier New',monospace;font-size:11px}
.pp-tbl tr:last-child td{border-bottom:none}
.pp-tbl tr:hover td{background:var(--surface)}
.pp-tbl tr.pp-row-closed td{background:var(--surface);opacity:0.7}

/* Totals panel */
.pp-totals{display:flex;flex-direction:column;gap:0}
.pp-trow{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;
}
.pp-trow:last-child{border-bottom:none}
.pp-trow > span:first-child{color:var(--text2)}
.pp-trow-final{
  border-top:2px solid var(--accent);margin-top:6px;padding-top:11px;
  font-size:15px;font-weight:700;
}
.pp-trow-final > span:first-child{color:var(--text);font-weight:600}

/* Audit footer */
.pp-audit{
  padding:12px 18px;font-size:11px;color:var(--text3);
  border-top:1px solid var(--border);margin-top:6px;
  display:flex;gap:10px;
}

/* Print stylesheet — when user clicks Print, hide chrome and let
   the preview card take the full page. */
@media print{
  body > *:not(.po-preview-overlay):not(.doc-sheet-overlay){display:none !important}
  body:has(.doc-sheet-overlay) .po-preview-overlay{display:none !important}
  .po-preview-overlay{position:static !important;background:none !important;padding:0 !important}
  .po-preview-modal{
    width:100% !important;height:auto !important;max-width:none !important;
    box-shadow:none !important;border:none !important;
  }
  .po-preview-header, .po-preview-actions{display:none !important}
  .po-preview-body{overflow:visible !important;padding:0 !important;background:#fff !important}
  .pp-card{box-shadow:none !important;page-break-inside:avoid}
}

/* ── SAP B1 link-arrow button ───────────────────────────────────────────
   Mimics SAP Business One client's "navigate to master" affordance — a
   small filled orange square with a white right-pointing triangle (►).
   Click opens the linked master record in a new tab.

     • Default state: solid amber (--warn, the hover color from the prior
       iteration) — bolder than the project default so it reads as a
       clickable control even at 18×18.
     • Hover:         deeper amber + slight translateX nudge so the eye
       picks up the affordance.
     • Active:        pressed-in (translateY +1) for tactile feedback.
     • Disabled:      muted grey, no cursor pointer, 0.55 opacity — used
       when the linked field is empty (no master to navigate to).

   Used in two places today:
     1. Header field (Vendor Code on PO form, `#po-vend-link-btn`).
     2. Line-row Item Code cell (`.po-li-item-link`), see PO lines table.
   Both share the same visual treatment so the user learns the affordance
   once. */
.sap-link-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  background:var(--warn, #c8610a);
  color:#fff;
  border:1px solid var(--warn, #c8610a);
  border-radius:2px;
  cursor:pointer;
  padding:0;flex-shrink:0;
  font-size:9px;line-height:1;font-weight:700;
  box-shadow:0 1px 0 rgba(0,0,0,0.08);
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.sap-link-arrow:hover{
  background:#a04e08;
  border-color:#a04e08;
  transform:translateX(1px);
  box-shadow:0 2px 4px rgba(160,78,8,0.35);
}
.sap-link-arrow:active{
  transform:translateY(1px);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
/* Right-pointing triangle (▶) rendered via inline SVG. White stroke +
   fill so it shows clearly on the amber bg. Sized for the 18px button. */
.sap-link-arrow svg{
  fill:#fff;stroke:#fff;
  stroke-width:0.8;
  stroke-linecap:round;stroke-linejoin:round;
  width:9px;height:9px;
  pointer-events:none;
}
.sap-link-arrow:disabled,
.sap-link-arrow[disabled]{
  background:var(--text3);
  border-color:var(--text3);
  cursor:not-allowed;
  opacity:0.45;
  box-shadow:none;
}
.sap-link-arrow:disabled:hover,
.sap-link-arrow[disabled]:hover{
  transform:none;
  box-shadow:none;
}
/* Row-level variant — slightly tighter for the dense lines grid. Same
   colors as the header variant but 16×16 so it doesn't bloat the cell. */
.sap-link-arrow.sap-link-arrow-sm{
  width:16px;height:16px;
}
.sap-link-arrow.sap-link-arrow-sm svg{
  width:8px;height:8px;
}
/* Cell layout for the Item Code column on PO lines — flex so the picker
   button takes remaining space and the link-arrow sits flush on the right. */
.po-li-item-wrap{
  display:flex;align-items:center;gap:4px;
}
.po-li-item-wrap > .po-li-item-btn{ flex:1; min-width:0; }

/* ── Uniform row height in the lines table ────────────────────────────
   The Item Code and Description cells use `.fsel`-styled picker buttons
   (button-as-select), while WHS / Tax / Price List / UoM / etc. use
   `.line-in` selects. Default `.fsel` is sized for header forms
   (padding 8px 28px 8px 10px → ~34px tall); `.line-in` is the leaner
   line-row size (padding 5px 6px → ~28px tall). The mismatch shows up
   as Item Code / Description sitting visually taller than the other
   cells, giving rows an uneven look.

   Override here shrinks the pickers to match `.line-in` exactly — same
   padding, border, font-size, line-height. The chevron right-padding is
   reduced to 22px (matching `select.line-in[padding-right]`) and the
   bg-image position pulled in to match. */
.lines-tbl .po-li-item-btn,
.lines-tbl .po-li-desc-btn{
  padding:5px 22px 5px 6px;
  font-size:13px;
  line-height:1.4;
  border:1px solid var(--border);
  border-radius:2px;
  background-position:right 6px center;
  background-size:10px 6px;
  min-height:0;
  text-align:left;
  /* width:100% is already on .fsel — don't restate it (would clobber the
     flex:1 on .po-li-item-wrap > .po-li-item-btn). */
}
/* The inner labels (span) shouldn't add extra height — keep them inline
   with normal line-height. */
.lines-tbl .po-li-item-label,
.lines-tbl .po-li-desc-label{
  display:inline-block;
  line-height:1.4;
  vertical-align:middle;
}

/* ── Vendor-gated lines section ─────────────────────────────────────────
   Until the user picks a vendor on a NEW PO, the entire Lines card is
   locked. Inputs/selects/buttons are individually disabled by JS, but we
   also apply a faded look + the hint banner here so the visual state is
   unmistakable. Removed automatically once a vendor is selected (see
   setPoLinesEnabled in sap-portal-purchase.js). */
.fc.po-lines-locked{
  position:relative;
  opacity:0.65;
}
.fc.po-lines-locked .lines-tbl,
.fc.po-lines-locked button[onclick="addPoLineRow()"]{
  pointer-events:none;
  user-select:none;
}
.po-lines-vendor-hint{
  display:flex;align-items:center;gap:6px;
  margin:10px 18px;padding:8px 12px;
  background:var(--warn-bg, rgba(255, 185, 0, 0.10));
  border:1px solid var(--warning, #e6a700);
  border-left:4px solid var(--warning, #e6a700);
  border-radius:4px;
  font-size:12px;color:var(--text);
}
.po-lines-vendor-hint svg{stroke:var(--warning, #e6a700);flex-shrink:0}

/* ── Per-line closed status (POR1.LineStatus = 'C') ──────────────────────
   Individual PO line is fully delivered into target docs (GRPOs / APInvs).
   Even when the PO header is still Open (other lines may still have open qty),
   this specific row can't be edited. Matches SAP B1 client behaviour. */
.po-line-closed > td{
  background:var(--surface) !important;
  position:relative;
}
.po-line-closed input,
.po-line-closed select,
.po-line-closed button:not(.line-del){
  background:var(--surface) !important;
  color:var(--text2) !important;
  opacity:0.75;
  cursor:not-allowed !important;
}
.po-line-closed .po-li-desc-btn{
  pointer-events:none;
}
.po-line-lock-icon{display:inline-block;line-height:1}

/* ── Cancelled / Closed PO form lock ─────────────────────────────────────
   Visual state when applyPoStatusLock() flips DocStatus C/L. Greys out locked
   fields, keeps the whitelisted soft fields fully editable, and shows a banner. */
.po-locked-banner{
  display:flex;align-items:center;gap:10px;
  margin:14px 24px 0;padding:10px 16px;
  background:var(--warn-bg, rgba(255, 185, 0, 0.12));
  border:1px solid var(--warning, #e6a700);
  border-left:4px solid var(--warning, #e6a700);
  border-radius:4px;
  font-size:12px;color:var(--text);
}
.po-locked-banner svg{stroke:var(--warning, #e6a700);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.po-form-locked .fi:disabled,
.po-form-locked .fsel:disabled,
.po-form-locked .fta:disabled,
.po-form-locked .line-in:disabled,
.po-form-locked .sum-input:disabled,
.po-form-locked .po-li-desc-btn:disabled{
  background:var(--surface) !important;
  color:var(--text2) !important;
  cursor:not-allowed;
  opacity:0.75;
}
/* Whitelisted (still editable) fields get a subtle blue highlight so user sees
   what they CAN edit even though the rest looks gray. */
.po-form-locked #po-f-contact:not(:disabled),
.po-form-locked #po-f-slp:not(:disabled),
.po-form-locked #po-f-numatcard:not(:disabled),
.po-form-locked #po-f-comments:not(:disabled),
.po-form-locked #po-f-jrnlmemo:not(:disabled){
  border-color:var(--accent) !important;
  background:var(--white) !important;
}

/* PO Form — Document section: ALWAYS 4 columns regardless of viewport width.
   Uses #id + class compound selector with !important so it beats every other rule
   in this file (including tablet/mobile responsive overrides). The grid only
   collapses to 2 cols on phones (≤640px) because 4 cols on a phone is unusable. */
#po-doc-grid.po-doc-grid-4{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:12px !important;
}
.fl{display:flex;flex-direction:column}
.fl label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px}
.fl label .req{color:var(--danger)}
.fi{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;transition:border .15s,box-shadow .15s,background .22s ease}
.fi:hover{border-color:var(--text3)}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fi::placeholder{color:var(--text3)}
.fi[readonly]{background:var(--surface);color:var(--text2)}
.fsel{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:8px 28px 8px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border .15s,background .22s ease}
.fsel:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
[data-theme="dark"] .fsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8c6c4'/%3E%3C/svg%3E")}
.fta{width:100%;background:var(--white);border:1px solid var(--border2);border-radius:2px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;resize:vertical;min-height:72px;transition:border .15s,background .22s ease}
.fta:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* summary panel */
.sum-panel{background:var(--white);border:1px solid var(--border);border-radius:2px;overflow:hidden;position:sticky;top:20px;transition:background .22s ease,border-color .22s ease}
.sum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:13px;transition:border-color .22s ease;min-height:38px}
.sum-row:last-child{border-bottom:none}
.sum-row-total{border-top:1px solid var(--border);padding-top:11px;padding-bottom:11px;background:var(--surface)}
.sum-lbl{color:var(--text2);flex:1;min-width:0}
.sum-val{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* Fixed-width right-hand column for every totals row.
   All values + inputs + dash placeholders sit in the same 110px column so they
   line up vertically — fixing the misalignment caused by mixed input widths
   (60px disc, 90px freight) and bare-text rows. */
.sum-val-col{
  flex:0 0 110px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  text-align:right;
}
/* All Totals inputs same width + same styling — no inline overrides needed. */
.sum-input{
  width:100%;
  box-sizing:border-box;
  text-align:right;
  padding:5px 8px;
  border:1px solid var(--border2);
  border-radius:3px;
  background:var(--white);
  color:var(--text);
  font-size:12px;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.sum-input:hover{border-color:var(--text3)}
.sum-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* Small secondary value (e.g. the discount-amount preview under the % input). */
.sum-sub{font-size:11px;color:var(--text3);font-weight:400}
.sum-total{background:var(--accent);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.sum-total-lbl{font-size:14px;font-weight:600;color:#fff}
.sum-total-val{font-size:18px;font-weight:700;color:#fff}
.je{padding:12px 16px;background:var(--surface);border-top:1px solid var(--border);transition:background .22s ease,border-color .22s ease}
.je-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);margin-bottom:8px}
.je-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.je-lbl{color:var(--text2)}
.je-val{font-family:'Courier New',monospace;color:var(--text);font-weight:500}

/* lines table */
.lines-tbl{width:100%;border-collapse:collapse}
/* po-lines-auto — used by lines table to opt into auto layout.
   table-layout:auto (default) means column widths grow to fit content beyond
   the th min-widths. Combined with white-space:nowrap on cells (below), this
   gives "dynamic adjust" — type a long Unit Price and the column widens. */
.lines-tbl.po-lines-auto{table-layout:auto}
.lines-tbl.po-lines-auto td{white-space:nowrap}
/* Inputs inside auto-layout cells need a content-based minimum so they don't
   collapse below readable width when there's room. The cell's min-width on the
   th sets the floor; the input fills 100% of cell. */
.lines-tbl.po-lines-auto td input.line-in,
.lines-tbl.po-lines-auto td select.line-in{min-width:0}

/* Scroll wrapper for lines table — visible custom scrollbar so user knows
   they can scroll horizontally. Standard browser scrollbars are often invisible
   on dark themes until you hover, which made the user think scroll was missing. */
.po-lines-scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--text3) transparent;
}
.po-lines-scroll::-webkit-scrollbar{height:10px}
.po-lines-scroll::-webkit-scrollbar-track{background:var(--surface)}
.po-lines-scroll::-webkit-scrollbar-thumb{background:var(--text3);border-radius:5px}
.po-lines-scroll::-webkit-scrollbar-thumb:hover{background:var(--text2)}
.lines-tbl th{font-size:11px;font-weight:600;color:var(--text2);text-align:left;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.lines-tbl td{padding:6px 8px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
.lines-tbl tr:last-child td{border-bottom:none}
/* Line inputs — ALWAYS show a visible border so users can see where each
   field is without having to hover. Mirrors the look of header inputs (.fi)
   so the form looks consistent end-to-end. */
.line-in{
  width:100%;
  box-sizing:border-box;
  background:var(--white);
  border:1px solid var(--border2);
  border-radius:2px;
  padding:5px 6px;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  outline:none;
  transition:border .15s,box-shadow .15s,background .22s ease;
}
.line-in:hover{border-color:var(--text3)}
.line-in:focus{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 1px var(--accent)}
.line-in[readonly]{color:var(--text2);background:var(--surface)}

/* SELECT dropdowns inside line rows — match the .fsel header look (chevron + dropdown affordance).
   Applies to UoM / Price List / Project / D1-D5 / and any future per-line <select>.
   IMPORTANT: `.line-in:focus` further down uses `background:var(--white)` shorthand
   which RESETS background-image + background-repeat → chevron disappears and the
   image tiles. So every state here is declared with the SAME atomic shorthand to
   bake in image + no-repeat + position together; the :focus rule below also uses
   the atomic shorthand so the chevron survives the focus state. */
select.line-in{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
  padding-right:22px;
  border:1px solid var(--border);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E") no-repeat right 6px center / 10px 6px;
}
[data-theme="dark"] select.line-in{
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8c6c4'/%3E%3C/svg%3E") no-repeat right 6px center / 10px 6px;
}
select.line-in:hover{border-color:var(--accent)}
/* Override .line-in:focus so the chevron survives — same atomic shorthand. */
select.line-in:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E") no-repeat right 6px center / 10px 6px;
}
[data-theme="dark"] select.line-in:focus{
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8c6c4'/%3E%3C/svg%3E") no-repeat right 6px center / 10px 6px;
}
.line-del{width:26px;height:26px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:2px;color:var(--text3);transition:all .1s;margin:0 auto}
.line-del:hover{background:var(--danger-bg);color:var(--danger)}
.line-del svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* apply-invoices table */
.apply-tbl{width:100%;border-collapse:collapse}
.apply-tbl th{font-size:11px;font-weight:600;color:var(--text2);text-align:left;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.4px}
.apply-tbl td{padding:9px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
.apply-tbl tr:last-child td{border-bottom:none}
.apply-tbl tbody tr:hover td{background:var(--bg)}
.p-chk{width:15px;height:15px;border:1.5px solid var(--border2);border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;vertical-align:middle}
.p-chk.on{background:var(--accent);border-color:var(--accent)}
.p-chk.on::after{content:'✓';font-size:9px;color:#fff;font-weight:700;line-height:1}

/* page header with status steps */
.p-form-hdr{background:var(--white);border-bottom:1px solid var(--border);padding:14px 24px;transition:background .22s ease,border-color .22s ease}
.p-form-title-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.p-steps{display:flex;align-items:center;gap:8px;margin-top:4px}
.p-step{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3)}
.p-step.active{color:var(--accent);font-weight:600}
.p-step.done{color:var(--success)}
.p-step svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.p-step-line{flex:1;height:1px;background:var(--border);max-width:32px}

/* dashboard home */
.dash-home{padding:24px}

/* lookup combobox */
.lookup-wrap{position:relative}
.lookup-dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:200;
  background:var(--white);border:1px solid var(--border2);
  border-top:none;border-radius:0 0 2px 2px;
  max-height:220px;overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  display:none;
}
[data-theme="dark"] .lookup-dropdown{box-shadow:0 6px 20px rgba(0,0,0,.5)}
.lookup-dropdown.open{display:block}
.lookup-item{padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border);font-size:13px;transition:background .1s}
.lookup-item:last-child{border-bottom:none}
.lookup-item:hover,.lookup-item.active{background:var(--accent-light)}
.lookup-item-code{font-family:'Courier New',monospace;font-size:12px;color:var(--accent);
  font-weight:600;min-width:70px;flex-shrink:0}
.lookup-item-name{color:var(--text);flex:1}
.lookup-item-meta{font-size:11px;color:var(--text3);margin-left:auto}
.lookup-no-results{padding:12px;font-size:13px;color:var(--text3);text-align:center}

.field-error{font-size:11px;color:var(--danger);margin-top:3px;display:none}
.field-error.show{display:block}
.field-hint{font-size:11px;color:var(--text3);margin-top:3px}

#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:2px;
  min-width:260px;max-width:400px;font-size:13px;font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);border-left:3px solid transparent}
[data-theme="dark"] .toast{box-shadow:0 6px 20px rgba(0,0,0,.45)}
.toast-ok{background:var(--success-bg);color:var(--success);border-left-color:var(--success)}
.toast-err{background:var(--danger-bg);color:var(--danger);border-left-color:var(--danger)}
.toast-info{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent)}
.toast-warn{background:var(--warn-bg);color:var(--warn);border-left-color:var(--warn)}

.settings-layout{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:500px}
.settings-nav{border-right:1px solid var(--border);padding:8px 0}
.settings-nav-item{padding:8px 16px;font-size:13px;color:var(--text2);cursor:pointer;
  border-left:2.5px solid transparent;transition:all .1s}
.settings-nav-item:hover{background:var(--surface);color:var(--text)}
.settings-nav-item.active{color:var(--accent);background:var(--accent-light);
  border-left-color:var(--accent);font-weight:600}
.settings-nav-item--disabled{opacity:.45;cursor:not-allowed;pointer-events:none;color:var(--text3)}
.settings-nav-item--disabled:hover{background:transparent;color:var(--text3)}
.settings-content{padding:24px}
.settings-section-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin-bottom:4px}
.settings-section-sub{font-size:13px;color:var(--text2);margin-bottom:20px}

.chart-wrap{padding:16px 18px 8px;position:relative;height:200px}
.chart-legend{display:flex;gap:16px;padding:0 18px 12px;flex-wrap:wrap}
.chart-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2)}
.chart-legend-dot{width:8px;height:8px;border-radius:50%}

.avatar-upload{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.avatar-circle{width:72px;height:72px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  font-weight:700;color:#fff;flex-shrink:0;position:relative;cursor:pointer;overflow:hidden}
.avatar-circle img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar-circle:hover::after{content:'Change';position:absolute;inset:0;background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.avatar-info{font-size:12px;color:var(--text2);line-height:1.6}
.pw-wrap{position:relative}
.pw-wrap .fi{padding-right:52px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  z-index:2;
  font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;user-select:none}
.pw-toggle:hover{color:var(--accent-hover)}

/* ════ Sales order form: SAP lookups ════ */
.so-fl-rel{position:relative}
.so-suggest-panel{
  display:none;
  z-index:4000;
  background:var(--white);
  border:1px solid var(--border2);
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:220px;
  overflow-y:auto;
  text-align:left;
}
.so-fl-rel .so-suggest-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:4px;
}
.so-suggest-panel .so-sug-row{
  padding:8px 10px;
  font-size:12px;
  cursor:pointer;
  border-bottom:1px solid var(--border2);
  line-height:1.35;
}
.so-suggest-panel .so-sug-row:last-child{border-bottom:none}
.so-suggest-panel .so-sug-row:hover{background:var(--surface2)}
.so-suggest-panel .so-sug-row .mono{font-family:'Courier New',monospace;font-size:11px;color:var(--accent);font-weight:600}
[data-theme="dark"] .so-suggest-panel{border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ════ BOM explorer (from bom view) ════ */
.pg-bom-page#pg-bom{display:flex;flex-direction:column;min-height:0;height:calc(100vh - var(--topbar-h));max-height:calc(100vh - var(--topbar-h))}
.pg-bom-page .pg-bom-body{flex:1;display:flex;min-height:0;overflow:hidden}
.bom-layout{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - var(--topbar-h,48px) - 48px);gap:0}
/* ── BOM left selector panel ──────────────────────────────────────────
   The list is the visual entry point for picking a BOM. Each card needs
   to read clean at a glance (code, type, name, quick stats) and respond
   crisply on hover/active so navigation feels instant. */
.bom-selector{border-right:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;overflow:hidden;min-width:260px;width:280px;flex-shrink:0}
.bom-selector-head{padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)}
.bom-selector-head .p-card-title{margin-bottom:10px;color:var(--text);font-weight:700;font-size:13px}
.bom-list{flex:1;overflow-y:auto;padding:8px 8px}
.bom-list::-webkit-scrollbar{width:6px}
.bom-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.bom-list::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* Card-style item — left-accent border tells the user where focus is.
   Compact padding so the list can show ~12 BOMs in the visible panel
   without scrolling. `min-width:0` is critical for nested flex children
   so `text-overflow:ellipsis` actually triggers on long item names. */
.bom-list-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  margin:0 0 3px 0;
  cursor:pointer;
  border:1px solid var(--border);
  border-left:3px solid transparent;
  border-radius:3px;
  background:var(--white);
  transition:background .12s, border-color .12s, transform .1s;
  font-size:11.5px;color:var(--text2);
  min-width:0;
  line-height:1.25;
}
.bom-list-item:hover{
  background:var(--surface);
  border-color:var(--border2);
  border-left-color:var(--text3);
}
.bom-list-item.active{
  background:var(--accent-light);
  border-color:var(--accent-mid);
  border-left-color:var(--accent);
}
.bom-list-item.active span:first-child,
.bom-list-item.active > div > div:first-child > span:first-child{ color:var(--accent) }
.bom-main{background:var(--bg);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.bom-toolbar{background:var(--white);border-bottom:1px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.bom-toolbar-title{font-size:14px;font-weight:700;color:var(--text);flex:1;min-width:120px}
.bom-toolbar-subtitle{font-size:12px;color:var(--text2)}
.bom-toolbar-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.bom-view-btn{padding:5px 12px;border-radius:2px;border:1px solid var(--border2);
  background:var(--white);font-size:12px;font-weight:600;font-family:inherit;
  color:var(--text2);cursor:pointer;transition:all .12s}
.bom-view-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.bom-view-btn:not(.active):hover{background:var(--surface)}
.bom-canvas{flex:1;overflow:auto;padding:30px;position:relative}
.bom-canvas::-webkit-scrollbar{width:6px;height:6px}
.bom-canvas::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.bom-tree{display:flex;flex-direction:column;gap:0;min-width:max-content}
.bom-node{display:flex;flex-direction:column;position:relative}
.bom-node-row{display:flex;align-items:center;gap:0;position:relative}
.bom-node-line-v{width:1px;background:var(--border2);flex-shrink:0}
.bom-node-line-h{height:1px;background:var(--border2);width:24px;flex-shrink:0}
.bom-node-card{background:var(--white);border:1.5px solid var(--border2);border-radius:3px;
  padding:10px 14px;cursor:pointer;transition:all .15s;min-width:200px;max-width:240px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.bom-node-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,120,212,.12)}
.bom-node-card.selected{border-color:var(--accent);background:var(--accent-light);box-shadow:0 2px 8px rgba(0,120,212,.15)}
.bom-node-card.root{border-color:var(--accent);border-width:2px;background:var(--white)}
.bom-node-card.sub-assy{border-color:var(--warn);background:var(--white)}
.bom-node-card.raw{border-color:var(--border2);background:var(--surface)}
.bom-node-card.svc{border-color:var(--success);background:var(--white)}
.bom-node-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:5px}
.bom-node-code{font-family:'Courier New',monospace;font-size:11px;font-weight:600;color:var(--accent)}
.bom-node-type-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;text-transform:uppercase;letter-spacing:.3px}
.badge-root{background:var(--accent);color:#fff}
.badge-sub{background:var(--warn-bg);color:var(--warn)}
.badge-raw{background:var(--surface);color:var(--text3);border:1px solid var(--border)}
.badge-svc{background:var(--success-bg);color:var(--success)}
.bom-node-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:4px}
.bom-node-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text3)}
.bom-node-qty{font-weight:700;color:var(--text2)}
.bom-node-unit{color:var(--text3)}
.bom-node-cost{font-weight:600;color:var(--text);font-size:11px}
.bom-expand-btn{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border2);
  background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--text2);flex-shrink:0;
  transition:all .15s;user-select:none;line-height:1;margin-left:4px}
.bom-expand-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.bom-children{display:flex;flex-direction:column;margin-left:0;padding-left:0;position:relative}
.bom-child-group{display:flex;flex-direction:row;align-items:flex-start;gap:0}
.bom-children-col{display:flex;flex-direction:column;gap:16px;padding-left:0}
.bom-connector{display:flex;flex-direction:column;align-items:center}
.bom-conn-v{width:1px;background:var(--border2);flex:1;min-height:20px}
.bom-conn-h{height:1px;width:24px;background:var(--border2)}
.bom-h-tree{display:flex;flex-direction:row;align-items:flex-start;gap:0}
.bom-h-col{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.bom-h-node{display:flex;flex-direction:row;align-items:center}
.bom-h-children{display:flex;flex-direction:column;gap:16px;border-left:1.5px solid var(--border2);margin-left:12px;padding-left:0}
.bom-h-child{display:flex;flex-direction:row;align-items:center}
.bom-h-child::before{content:'';width:24px;height:1.5px;background:var(--border2);flex-shrink:0;margin-top:1px}
.bom-info{width:280px;border-left:1px solid var(--border);background:var(--white);
  flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;min-width:0}
.bom-info::-webkit-scrollbar{width:4px}
.bom-info::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.bom-info-head{padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.bom-info-code{font-family:'Courier New',monospace;font-size:11px;color:var(--accent);font-weight:600;margin-bottom:3px}
.bom-info-name{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.bom-info-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.bom-info-section-title{font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--text3);margin-bottom:8px}
.bom-info-row{display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:12px}
.bom-info-label{color:var(--text2)}
.bom-info-val{font-weight:600;color:var(--text);text-align:right}
.bom-info-val.mono{font-family:'Courier New',monospace;font-size:11px}
.bom-cost-breakdown{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.bom-cost-item{display:flex;align-items:center;gap:8px}
.bom-cost-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:2px;overflow:hidden}
.bom-cost-bar{height:100%;border-radius:2px}
.bom-cost-label{font-size:11px;color:var(--text2);min-width:80px}
.bom-cost-pct{font-size:11px;font-weight:700;color:var(--text);min-width:32px;text-align:right}
.bom-path{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text3);
  padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.bom-path-item{color:var(--accent);cursor:pointer;font-weight:500}
.bom-path-item:hover{text-decoration:underline}

/* ── BOM Tree V2 — horizontal mind-map with curved branches ──────────
   Root sits on the LEFT, children fan out to the RIGHT. Each generation
   is a vertical stack so the tree naturally grows downward as siblings
   are added, and rightward as depth grows. BOMs are typically deep+
   narrow so this orientation usually fits inside the viewport without
   horizontal scroll.

   Layout (per row):
     [parent] ──curve──> [child 1]
                          [child 2]
                          [child 3]

   The connector between parent and each child is an organic curved
   path drawn via CSS background-image — a quarter-circle drawn with
   radial gradients so the line bends smoothly from parent's right
   edge into each child's left edge. No SVG layer needed.

   Nodes are compact avatar cards (180px wide). Smaller than the prior
   org-chart cards so deeper trees still fit. */

@keyframes bomNodeIn{
  from{ opacity:0; transform:translateX(-12px) scale(.96) }
  to  { opacity:1; transform:translateX(0)     scale(1)   }
}
@keyframes bomLineIn{
  from{ opacity:0; stroke-dashoffset:60 }
  to  { opacity:1; stroke-dashoffset:0  }
}
@keyframes bomRootPulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(0,120,212,0); border-color:var(--accent) }
  50%      { box-shadow:0 0 0 8px rgba(0,120,212,0.10); border-color:var(--accent) }
}

/* Canvas — subtle dot pattern background gives the tree a "design surface"
   feel. The pattern is intentionally muted so cards remain the focus. */
.bom-tree-v2{
  display:inline-flex;
  padding:30px 40px 60px 24px;
  font-family:var(--font);
  background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size:18px 18px;
  background-position:0 0;
  border-radius:8px;
  min-width:100%;
}

/* A row = parent node + (optional) child column. Horizontal flex so the
   children grow to the RIGHT of the parent rather than below. */
.bom-tree-row{
  display:flex;flex-direction:row;align-items:center;
  position:relative;
  gap:0;
}

/* The children column — children stack VERTICALLY (mind-map style). */
.bom-tree-children{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:10px;
  margin-left:64px;          /* gap for the connector curve */
  position:relative;
}
.bom-tree-children.bom-tree-collapsed{ display:none }

/* ── Connector — pure SVG-style curves drawn with CSS ────────────────
   Each child row has a `::before` that draws an L-shape with a curved
   corner: from a fixed point in the parent's column down/up to the
   child's vertical center. We use radial-gradient for the corner curve
   and linear-gradient for the straight segments, all overlaid as
   background-images on the same pseudo-element.

   Anchor: parent's right edge sits at offset -64px from the child's
   left edge (= the `margin-left` on .bom-tree-children).

   To keep it simple we draw a STRAIGHT horizontal stub from parent to
   the child mid-height and let the natural visual flow handle vertical
   alignment — since children are stacked vertically with a small gap,
   the connector ends look organic. */
.bom-tree-children > .bom-tree-row::before{
  content:'';
  position:absolute;
  left:-44px;
  top:50%;
  width:44px;height:2px;
  background:linear-gradient(90deg, var(--accent-mid) 0%, var(--border) 100%);
  border-radius:1px;
  transform:translateY(-1px);
  pointer-events:none;
  animation:bomLineIn .4s ease-out both;
}

/* The VERTICAL trunk — runs through the children column connecting
   each child's horizontal stub. Drawn on the .bom-tree-children itself.
   `--first-mid` and `--last-mid` are set by JS post-render to position
   the trunk exactly between the first and last child's centers. Default
   uses 0% → 100% as a safe fallback so even before JS measures, it looks
   right. */
.bom-tree-children::before{
  content:'';
  position:absolute;
  left:-44px;
  /* Anchor the trunk between the first and last child's vertical centers.
     Card height is ~60px (avatar 42 + padding) so 30px from each end
     puts the trunk endpoints precisely on the stub endpoints. JS can
     override via the `--first-mid` / `--last-bot` CSS variables after
     measuring real heights. */
  top:var(--first-mid, 30px);
  bottom:var(--last-bot, 30px);
  width:2px;
  background:var(--border);
  border-radius:1px;
  pointer-events:none;
  animation:bomLineIn .35s ease-out both;
}
/* When there's only one child, hide the trunk — the horizontal stub
   already draws a clean line from parent to child. */
.bom-tree-children.one-kid::before{ display:none }

/* ── Node card ───────────────────────────────────────────────────────
   Compact avatar + content. Smaller than the previous org-chart cards
   (180px wide) so deeper trees still fit comfortably. */
.bom-tree-node{
  display:flex;align-items:stretch;gap:0;
  position:relative;
  width:200px;flex-shrink:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  overflow:hidden;
  cursor:default;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
  animation:bomNodeIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.bom-tree-node:hover{
  transform:translateX(2px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
  border-color:var(--accent-mid);
  z-index:3;
}
/* Stagger child appearance — each child fades in 50ms after the previous. */
.bom-tree-children > .bom-tree-row:nth-child(1) > .bom-tree-node{ animation-delay:.04s }
.bom-tree-children > .bom-tree-row:nth-child(2) > .bom-tree-node{ animation-delay:.08s }
.bom-tree-children > .bom-tree-row:nth-child(3) > .bom-tree-node{ animation-delay:.12s }
.bom-tree-children > .bom-tree-row:nth-child(4) > .bom-tree-node{ animation-delay:.16s }
.bom-tree-children > .bom-tree-row:nth-child(5) > .bom-tree-node{ animation-delay:.20s }
.bom-tree-children > .bom-tree-row:nth-child(6) > .bom-tree-node{ animation-delay:.24s }
.bom-tree-children > .bom-tree-row:nth-child(7) > .bom-tree-node{ animation-delay:.28s }
.bom-tree-children > .bom-tree-row:nth-child(n+8) > .bom-tree-node{ animation-delay:.32s }

/* Node type — left stripe (since the layout is horizontal). */
.bom-tree-node.root{
  border-left:4px solid var(--accent);
  background:linear-gradient(90deg, var(--accent-light) 0%, var(--white) 30%);
  /* Subtle pulse to draw the eye to the root. */
  animation:bomNodeIn .4s cubic-bezier(.2,.8,.2,1) both,
            bomRootPulse 2.4s ease-in-out 1s infinite;
}
.bom-tree-node.sub-assy{
  border-left:4px solid var(--warn);
  cursor:pointer;
  background:linear-gradient(90deg, var(--warn-bg) 0%, var(--white) 30%);
}
.bom-tree-node.sub-assy:hover{
  border-color:var(--warn);
  box-shadow:0 8px 20px rgba(200,97,10,.18), 0 2px 4px rgba(200,97,10,.10);
}
.bom-tree-node.raw{
  border-left:4px solid var(--text3);
}

/* Avatar — square tile with gradient, item-code initial. */
.bom-tree-avatar{
  width:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',monospace;
  font-size:18px;font-weight:700;color:#fff;
  letter-spacing:-.5px;
  background:linear-gradient(135deg, var(--text3) 0%, var(--text2) 100%);
  position:relative;
  user-select:none;
}
.bom-tree-node.root .bom-tree-avatar{
  background:linear-gradient(135deg, #4aa3ec 0%, var(--accent) 100%);
}
.bom-tree-node.sub-assy .bom-tree-avatar{
  background:linear-gradient(135deg, #e89a4a 0%, var(--warn) 100%);
}
.bom-tree-node.raw .bom-tree-avatar{
  background:linear-gradient(135deg, #a8b3c7 0%, #758299 100%);
}

/* Content area — code/name/meta stack. */
.bom-tree-content{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:8px 10px;
  gap:1px;
}
.bom-tree-node-head{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.bom-tree-node-code{
  font-family:'Courier New',monospace;
  font-size:10.5px;font-weight:700;
  color:var(--accent);
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bom-tree-node.sub-assy .bom-tree-node-code{ color:var(--warn) }
.bom-tree-node.raw .bom-tree-node-code{ color:var(--text2) }
.bom-tree-node-drill{
  color:var(--warn);flex-shrink:0;
  transition:transform .18s ease;
}
.bom-tree-node.sub-assy:hover .bom-tree-node-drill{ transform:translateX(2px) }
.bom-tree-node-name{
  font-size:12px;font-weight:600;color:var(--text);
  line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  margin-bottom:1px;
}
.bom-tree-node-meta{
  display:flex;align-items:center;gap:6px;
  font-size:9.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.bom-tree-node-meta span{ white-space:nowrap;display:inline-flex;align-items:center;gap:2px }
.bom-tree-node-meta .meta-key{ font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.7 }
.bom-tree-node-meta .meta-val{ font-weight:600;color:var(--text2) }

/* Caret toggle — bottom-right corner so it doesn't fight the type badge. */
.bom-tree-caret{
  position:absolute;
  bottom:3px;right:3px;
  width:16px;height:16px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--white);color:var(--text3);
  cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  z-index:2;
  transition:background .12s, color .12s, transform .15s;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.bom-tree-caret:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:scale(1.15);
}
.bom-tree-caret svg{ transition:transform .25s cubic-bezier(.2,.8,.2,1) }
/* Closed state: arrow points right (the children would expand right). */
.bom-tree-caret[aria-expanded="true"]  svg{ transform:rotate(90deg) }
.bom-tree-caret[aria-expanded="false"] svg{ transform:rotate(0deg)  }

/* Type badge — small chip top-right of card content. */
.bom-tree-type-badge{
  position:absolute;top:-1px;right:0;
  font-size:8px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  padding:2px 6px 2px 8px;
  border-radius:0 10px 0 8px;
  color:#fff;
  background:var(--text3);
}
.bom-tree-node.root .bom-tree-type-badge{ background:var(--accent) }
.bom-tree-node.sub-assy .bom-tree-type-badge{ background:var(--warn) }

/* Empty-state — used when a BOM has zero components. */
.bom-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:240px;gap:12px;text-align:center;
}

/* Reduce-motion accessibility — disable animations for users who prefer it. */
@media (prefers-reduced-motion: reduce){
  .bom-tree-node, .bom-tree-row.has-kids::after, .bom-tree-children::before,
  .bom-tree-children > .bom-tree-row::before{ animation:none !important }
  .bom-tree-node:hover{ transform:none }
  .bom-tree-node.root{ animation:bomNodeIn .4s both !important }
}
.bom-path-sep{color:var(--border2)}
.bom-table-wrap{padding:20px;overflow-y:auto;flex:1}
.bom-indent-0{padding-left:0}
.bom-indent-1{padding-left:24px}
.bom-indent-2{padding-left:48px}
.bom-indent-3{padding-left:72px}
.bom-level-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bom-zoom{display:flex;align-items:center;gap:4px;border:1px solid var(--border2);border-radius:2px;overflow:hidden}
.bom-zoom button{padding:4px 8px;border:none;background:var(--white);cursor:pointer;font-size:12px;
  font-weight:700;color:var(--text2);transition:background .1s;font-family:inherit}
.bom-zoom button:hover{background:var(--surface)}
.bom-zoom-val{font-size:11px;font-weight:600;color:var(--text2);padding:4px 6px;
  background:var(--surface);border-left:1px solid var(--border2);border-right:1px solid var(--border2);min-width:36px;text-align:center}
.bom-tree-canvas{transform-origin:top left;transition:transform .2s}

/* ═══════════════════════════════════════════════════════════
   AI CHATBOT PAGE
   ═══════════════════════════════════════════════════════════ */
/* !important beats the inline display:block that goPage() sets on .p-page.show */
.pg-ai-page{display:flex!important;flex-direction:column;
  height:calc(100vh - 48px);overflow:hidden;background:var(--bg)}
/* kill the outer .p-content scroll while on the AI page */
.p-content:has(.pg-ai-page.show){overflow:hidden}
.ai-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0}
.ai-toolbar-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.2px}
.ai-toolbar-sub{font-size:12px;color:var(--text3);margin-top:2px}
.ai-quota-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}
.ai-quota-pill{font-size:12px;color:var(--text2)}
.ai-quota-pill strong{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ai-toolbar-actions{display:flex;align-items:center;gap:8px}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 3px rgba(16,124,16,.15);animation:aiPulse 2s infinite}
@keyframes aiPulse{0%,100%{opacity:1}50%{opacity:.55}}

.ai-model-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--text);background:var(--accent-light);border:1px solid var(--accent-mid);
  padding:5px 10px;border-radius:2px;cursor:pointer}
.ai-model-pill svg{width:13px;height:13px;fill:var(--accent);stroke:none}
.ai-model-pill .ai-chev{fill:none;stroke:var(--accent);stroke-width:2}

.pg-ai-body{display:flex;flex:1;min-height:0;overflow:hidden}

/* CENTER — CHAT */
.ai-chat{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;min-width:0}
.ai-chat-scroll{flex:1;overflow-y:auto;padding:24px 20px 12px}

.ai-welcome{max-width:760px;margin:30px auto 10px;text-align:center;padding:0 20px}
.ai-welcome-badge{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#6b4bff);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,120,212,.25)}
.ai-welcome-badge svg{fill:#fff;stroke:none}
.ai-welcome-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.4px}
.ai-welcome-sub{font-size:13px;color:var(--text3);margin-top:6px;line-height:1.5}
.ai-suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;text-align:left}
.ai-sugg{display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--white);
  border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:transform .08s,border-color .12s,box-shadow .12s}
.ai-sugg:hover{border-color:var(--accent-mid);box-shadow:0 4px 12px rgba(0,0,0,.04);transform:translateY(-1px)}
.ai-sugg-icon{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-sugg-icon svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-sugg-blue{background:var(--accent-light);color:var(--accent)}
.ai-sugg-blue svg{stroke:var(--accent)}
.ai-sugg-amber{background:#fff4ce;color:#8a6d00}
.ai-sugg-amber svg{stroke:#8a6d00}
.ai-sugg-purple{background:#f2e9ff;color:#5b2a9b}
.ai-sugg-purple svg{stroke:#5b2a9b}
.ai-sugg-green{background:var(--success-bg);color:var(--success)}
.ai-sugg-green svg{stroke:var(--success)}
.ai-sugg-title{font-size:13px;font-weight:600;color:var(--text)}
.ai-sugg-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* MESSAGES */
.ai-messages{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ai-msg{display:flex;gap:10px;animation:aiIn .2s ease-out}
@keyframes aiIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ai-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-avatar svg{width:15px;height:15px;fill:#fff;stroke:#fff;stroke-width:0}
.ai-avatar-user{background:var(--text2)}
.ai-avatar-bot{background:linear-gradient(135deg,var(--accent),#6b4bff)}
.ai-avatar-user svg{fill:none;stroke:#fff;stroke-width:2}
.ai-bubble{flex:1;min-width:0;background:var(--white);border:1px solid var(--border);
  border-radius:4px;padding:10px 14px}
.ai-msg-user .ai-bubble{background:var(--accent-light);border-color:var(--accent-mid)}
.ai-bubble-who{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ai-bubble-body{font-size:13.5px;color:var(--text);line-height:1.55}
.ai-bubble-body p{margin:0 0 6px}
.ai-bubble-body p:last-child{margin-bottom:0}
/* Markdown headings from model (### **title**) — render as block titles, not literal # */
.ai-bubble-body .ai-bubble-h{font-size:13.5px;font-weight:700;margin:12px 0 6px;color:var(--text);line-height:1.35}
.ai-bubble-body h1.ai-bubble-h{font-size:15px}
.ai-bubble-body h2.ai-bubble-h{font-size:14.5px}
.ai-bubble-body h3.ai-bubble-h,.ai-bubble-body h4.ai-bubble-h{font-size:13.5px}
.ai-bubble-body .ai-bubble-h:first-child{margin-top:0}
.ai-bubble-body ul{margin:4px 0 6px;padding-left:22px}
.ai-bubble-body li{margin-bottom:3px}
.ai-bubble-body .ai-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}
.ai-bubble-body .ai-table th,.ai-bubble-body .ai-table td{padding:6px 8px;border:1px solid var(--border);text-align:left}
.ai-bubble-body .ai-table th{background:var(--surface);font-weight:600;color:var(--text2)}
.ai-bubble-body .ai-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ai-quote{border-left:3px solid var(--accent);padding:8px 12px;margin:6px 0;
  background:var(--surface);color:var(--text);font-size:13px;border-radius:0 2px 2px 0}

.ai-bubble-actions{display:flex;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.ai-bubble-actions button{background:none;border:1px solid transparent;border-radius:3px;
  padding:3px 6px;cursor:pointer;color:var(--text3);display:inline-flex;align-items:center;justify-content:center}
.ai-bubble-actions button:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.ai-bubble-actions svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* TYPING */
.ai-typing{max-width:820px;margin:10px auto 0;display:flex;gap:10px;align-items:center}
.ai-typing-bubble{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:10px 14px;display:inline-flex;gap:4px}
.ai-typing-bubble span{width:6px;height:6px;border-radius:50%;background:var(--text3);opacity:.4;animation:aiBlink 1.2s infinite}
.ai-typing-bubble span:nth-child(2){animation-delay:.18s}
.ai-typing-bubble span:nth-child(3){animation-delay:.36s}
@keyframes aiBlink{0%,80%,100%{transform:scale(.7);opacity:.3}40%{transform:scale(1);opacity:.9}}

/* COMPOSER */
.ai-composer-wrap{padding:10px 20px 14px;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0}
.ai-composer{max-width:820px;margin:0 auto;display:flex;align-items:flex-end;gap:6px;
  background:var(--white);border:1px solid var(--border2);border-radius:6px;
  padding:6px 6px 6px 8px;transition:border-color .12s,box-shadow .12s}
.ai-composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,120,212,.15)}
.ai-composer-btn{background:none;border:none;cursor:pointer;padding:7px;border-radius:3px;color:var(--text3);flex-shrink:0}
.ai-composer-btn:hover{background:var(--surface);color:var(--text)}
.ai-composer-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-input{flex:1;min-width:0;resize:none;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:13.5px;color:var(--text);line-height:1.5;padding:8px 6px;max-height:220px}
.ai-composer-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ai-model-select{height:32px;font-size:12px;padding:0 26px 0 8px;min-width:120px}
.ai-send{width:32px;height:32px;border-radius:4px;border:none;background:var(--accent);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s}
.ai-send:hover{background:var(--accent-hover)}
.ai-send:disabled{background:var(--border2);cursor:not-allowed}
.ai-send svg{width:14px;height:14px;fill:#fff;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ai-composer-hint{max-width:820px;margin:6px auto 0;display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:11px;color:var(--text3)}
.ai-composer-hint-right{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;white-space:nowrap;flex-shrink:0}
.ai-token-count{font-variant-numeric:tabular-nums}

/* Sidebar badge variant for NEW */
.ai-badge-new{background:linear-gradient(135deg,#6b4bff,var(--accent));color:#fff;font-weight:700}

/* ═══════════════════════════════════════════════════════════
   MULTI-SELECT DROPDOWN (chips + checkbox panel)
   ═══════════════════════════════════════════════════════════ */
.ms-wrap{position:relative;display:block;width:100%}
.ms-control{width:100%;min-height:36px;background:var(--white);border:1px solid var(--border2);
  border-radius:2px;padding:5px 30px 5px 8px;font-size:13px;font-family:inherit;color:var(--text);
  outline:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:border .15s,box-shadow .15s,background .22s ease;text-align:left}
.ms-control:hover{border-color:var(--text3)}
.ms-wrap.ms-open .ms-control,.ms-control:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ms-chips{flex:1;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.ms-placeholder{color:var(--text3);font-size:13px;padding:3px 0}
.ms-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;
  background:var(--accent-light);color:var(--accent);border:1px solid var(--accent-mid);
  font-size:11.5px;font-weight:600;padding:2px 4px 2px 7px;border-radius:2px;line-height:1.4}
.ms-chip-more{background:var(--surface);color:var(--text2);border-color:var(--border)}
.ms-chip-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.ms-chip-x{cursor:pointer;font-size:14px;line-height:1;padding:0 3px;border-radius:2px;color:var(--accent)}
.ms-chip-x:hover{background:var(--accent);color:#fff}
.ms-chev{flex-shrink:0;fill:none;stroke:var(--text3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s}
.ms-wrap.ms-open .ms-chev{transform:rotate(180deg);stroke:var(--accent)}

.ms-panel{display:none;position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);
  background:var(--white);border:1px solid var(--border);border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow:hidden;
  flex-direction:column}
.ms-wrap.ms-open .ms-panel{display:flex}
[data-theme="dark"] .ms-panel{box-shadow:0 8px 24px rgba(0,0,0,.4)}

.ms-search{position:relative;padding:8px;border-bottom:1px solid var(--border);flex-shrink:0}
.ms-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:13px;height:13px;
  fill:none;stroke:var(--text3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ms-search input{width:100%;border:1px solid var(--border2);border-radius:2px;
  padding:6px 8px 6px 28px;font-size:12.5px;font-family:inherit;color:var(--text);background:var(--white);outline:none}
.ms-search input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.ms-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0}
.ms-mini{background:var(--white);border:1px solid var(--border2);border-radius:2px;
  padding:3px 8px;font-size:11px;font-family:inherit;color:var(--text2);cursor:pointer;font-weight:500}
.ms-mini:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent-mid)}
.ms-count{margin-left:auto;font-size:11px;color:var(--text3);font-weight:500}

.ms-list{overflow-y:auto;max-height:230px;padding:4px 0}
.ms-list::-webkit-scrollbar{width:5px}
.ms-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.ms-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  font-size:12.5px;color:var(--text);transition:background .1s}
.ms-opt:hover{background:var(--surface)}
.ms-opt input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.ms-opt-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-empty{padding:18px 14px;text-align:center;font-size:12px;color:var(--text3)}

/* Responsive */
@media (max-width: 960px){
  .ai-suggestions{grid-template-columns:1fr}
}

/* Dark theme tweaks */
:root[data-theme="dark"] .ai-sugg-amber{background:rgba(255,203,10,.12);color:#ffcb0a}
:root[data-theme="dark"] .ai-sugg-amber svg{stroke:#ffcb0a}
:root[data-theme="dark"] .ai-sugg-purple{background:rgba(124,77,255,.15);color:#c7b4ff}
:root[data-theme="dark"] .ai-sugg-purple svg{stroke:#c7b4ff}

/* ══════════════════════════════════════════════════════════════
   REPORTS MODULE — SAP B1-style analytics
   ══════════════════════════════════════════════════════════════ */
.rpt-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.rpt-kpi{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rpt-kpi-label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.6px}
.rpt-kpi-val{font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.rpt-kpi-trend{font-size:11px;color:var(--text2)}
@media(max-width:900px){.rpt-kpi-row{grid-template-columns:repeat(2,1fr)}}

.rpt-filter-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.rpt-filter-row .f-search{flex:1;min-width:220px}

.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rpt-tile{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 16px 14px;cursor:pointer;
  transition:all .16s ease;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.rpt-tile:hover{border-color:var(--accent-mid);box-shadow:0 6px 22px -10px rgba(0,120,212,.35);transform:translateY(-1px)}
.rpt-tile-head{display:flex;align-items:center;gap:10px}
.rpt-tile-icon{width:34px;height:34px;min-width:34px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.rpt-tile-icon svg{width:18px;height:18px;stroke-width:2;fill:none}
.rpt-tile-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.25;flex:1}
.rpt-tile-badge{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent-light);color:var(--accent);text-transform:uppercase;letter-spacing:.6px}
.rpt-tile-desc{font-size:11.5px;color:var(--text2);line-height:1.5;flex:1}
.rpt-tile-foot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);padding-top:10px}
.rpt-tile-foot svg{width:13px;height:13px;stroke-width:2;fill:none;stroke:currentColor}

/* module colouring — pastel backgrounds on icon */
.rpt-tile .rpt-mod-sales     {background:#eff6fc;color:#0078d4}
.rpt-tile .rpt-mod-buy       {background:#faf0ff;color:#8764b8}
.rpt-tile .rpt-mod-fin       {background:#fff4ce;color:#8a6d00}
.rpt-tile .rpt-mod-inv       {background:#dff6dd;color:#107c10}
.rpt-tile .rpt-mod-pos       {background:#fde7e9;color:#a4262c}
.rpt-tile .rpt-mod-bank      {background:#e5f1fb;color:#0c5b97}
.rpt-tile .rpt-mod-sales svg,.rpt-tile .rpt-mod-buy svg,.rpt-tile .rpt-mod-fin svg,
.rpt-tile .rpt-mod-inv svg,.rpt-tile .rpt-mod-pos svg,.rpt-tile .rpt-mod-bank svg{stroke:currentColor}

/* runner */
.rpt-runner-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding:10px 4px}
.rpt-runner-icon{width:44px;height:44px;min-width:44px;border-radius:10px;background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.rpt-runner-icon svg{stroke:currentColor;stroke-width:2;fill:none;width:22px;height:22px}
.rpt-runner-title{font-size:18px;font-weight:700;color:var(--text);line-height:1.15}
.rpt-runner-sub{font-size:12px;color:var(--text2);margin-top:2px}

.rpt-param-card{padding:14px 16px;margin-bottom:14px}
.rpt-param-head{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.rpt-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 12px;align-items:end}
.rpt-p{display:flex;flex-direction:column;gap:4px}
.rpt-p label{font-size:11px;color:var(--text2);font-weight:600}
.rpt-p input,.rpt-p select{height:32px;border:1px solid var(--border2);border-radius:6px;padding:0 8px;font:inherit;color:var(--text);background:var(--white);font-size:12.5px}
.rpt-p input:focus,.rpt-p select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-light)}

.rpt-result-card{padding:0;overflow:hidden}
.rpt-results{min-height:240px}
.rpt-empty{padding:54px 20px;text-align:center;color:var(--text2);font-size:13px;display:flex;flex-direction:column;gap:10px;align-items:center}
.rpt-empty svg{stroke:var(--text3);stroke-width:1.6;fill:none}

.rpt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.rpt-tbl th{background:var(--bg);font-weight:700;color:var(--text);padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;position:sticky;top:0;z-index:1}
.rpt-tbl td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.rpt-tbl tr:hover td{background:var(--accent-light)}
.rpt-tbl td.num,.rpt-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.rpt-tbl td.mono{font-family:"Consolas","SF Mono",monospace;font-size:11.5px;color:var(--text2)}
.rpt-tbl tfoot td{background:#fafafa;font-weight:700;border-top:2px solid var(--border2);border-bottom:none}
.rpt-tbl .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600}
.rpt-tbl .pill-ok{background:var(--success-bg);color:var(--success)}
.rpt-tbl .pill-warn{background:var(--warn-bg);color:var(--warn)}
.rpt-tbl .pill-bad{background:var(--danger-bg);color:var(--danger)}
.rpt-tbl .pill-info{background:var(--accent-light);color:var(--accent)}

.rpt-bar{display:block;height:6px;background:var(--bg);border-radius:999px;overflow:hidden;min-width:60px;margin-top:4px}
.rpt-bar>i{display:block;height:100%;background:var(--accent);border-radius:999px}

.rpt-loading{padding:40px 20px;text-align:center;color:var(--text2);font-size:13px}
.rpt-loading .spin{display:inline-block;width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:rptSpin .8s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes rptSpin{to{transform:rotate(360deg)}}

.rpt-err{padding:20px;background:var(--danger-bg);color:var(--danger);border-radius:8px;margin:12px}

/* Dark tweaks */
:root[data-theme="dark"] .rpt-tile{background:var(--surface)}
:root[data-theme="dark"] .rpt-tbl tfoot td{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .rpt-tile .rpt-mod-sales{background:rgba(71,158,245,.16);color:#79c0ff}
:root[data-theme="dark"] .rpt-tile .rpt-mod-buy{background:rgba(168,114,199,.18);color:#d2b4ff}
:root[data-theme="dark"] .rpt-tile .rpt-mod-fin{background:rgba(255,203,10,.18);color:#ffd666}
:root[data-theme="dark"] .rpt-tile .rpt-mod-inv{background:rgba(16,124,16,.2);color:#95e095}
:root[data-theme="dark"] .rpt-tile .rpt-mod-pos{background:rgba(164,38,44,.22);color:#f4a0a4}
:root[data-theme="dark"] .rpt-tile .rpt-mod-bank{background:rgba(12,91,151,.25);color:#89c4ef}

/* Print: only table area */
@media print{
  /* Reports-page print ONLY. Scoped with :has() — the old unscoped `body *{visibility:hidden}` ran on
     EVERY page and blanked the document preview modals (Sales Order / AR Invoice / PO … "Print"
     produced an empty PDF). The preview overlay wins whenever one is open. */
  body:has(#pg-reports):not(:has(.po-preview-overlay)) *{visibility:hidden}
  body:has(#pg-reports):not(:has(.po-preview-overlay)) #pg-reports, body:has(#pg-reports):not(:has(.po-preview-overlay)) #pg-reports *{visibility:visible}
  .p-hdr, #rpt-catalog, .p-actions, .rpt-param-card{display:none !important}
  #rpt-results{visibility:visible;position:static}
  .p-wrap{padding:0 !important}
}

/* ═════════ Live Dashboard (home) ═════════ */
.dash-meta{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;flex-wrap:wrap}
.dash-meta-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--text2)}
.dash-meta-pill svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-meta-ok{background:var(--success-bg);border-color:transparent;color:var(--success)}
.dash-meta-err{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.kpi-row-small{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:-4px}
.kpi-row-small .kpi.kpi-sm{padding:14px 16px}
.kpi-row-small .kpi.kpi-sm .kpi-val{font-size:22px}
.kpi-row-small .kpi.kpi-sm .kpi-label{font-size:11px}
.dash-loading{padding:16px;text-align:center;color:var(--text3);font-size:12px;font-style:italic}
.dash-empty{padding:18px;text-align:center;color:var(--text3);font-size:12px}
.dash-error{padding:14px;text-align:center;color:var(--danger);font-size:12px;font-weight:500}
.dash-refresh-spin svg{animation:dashSpin .9s linear infinite;transform-origin:center}
@keyframes dashSpin{to{transform:rotate(360deg)}}
@media (max-width: 1100px){
  .dash-two-col{grid-template-columns:1fr !important}
  .kpi-row-small{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 720px){
  .kpi-row-small{grid-template-columns:repeat(2,1fr)}
}

/* ════════════════════════════════════════════════════════════════════════════
 *  MOBILE + TABLET RESPONSIVE LAYER
 *  ----------------------------------------------------------------------------
 *  Mobile-first additions ONLY — desktop styles above are untouched. Two
 *  breakpoints:
 *     • Tablet  : up to 1024px  (iPad portrait, small laptops)
 *     • Mobile  : up to 640px   (phones)
 *
 *  The sidebar becomes an off-canvas drawer below 1024px, revealed by tapping
 *  the existing hamburger (`.sidebar-toggle`) which the JS already wires.
 *  A semi-transparent backdrop (`#p-sidebar-overlay`) is added by the layout
 *  so tapping outside closes the drawer.
 * ════════════════════════════════════════════════════════════════════════════ */

/* iOS safe-area helpers — accommodate notch + home indicator on iPhone */
:root{ --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px); }

/* Sidebar backdrop — hidden by default, shown on mobile when drawer open.
   pointer-events:none everywhere except when the drawer is open, so the
   overlay never blocks clicks on the page underneath while it's invisible. */
#p-sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:998;animation:sbOverlayFade .18s ease-out;pointer-events:none;
}
body.sb-mobile-open #p-sidebar-overlay{ display:block;pointer-events:auto; }
@keyframes sbOverlayFade{from{opacity:0}to{opacity:1}}

/* ── Tablet + below (≤ 1024px) ──────────────────────────────────────────── */
@media (max-width: 1024px){
  /* Sidebar slides in from the left as an overlay drawer.
     -----------------------------------------------------------------------
     IMPORTANT: animation uses `left` not `transform`. Earlier versions used
     `transform: translateX(-100%)` which produced a smoother slide BUT iOS
     Safari and some Chrome-Android versions intermittently dropped touch
     events on children of transform-animated `position:fixed` elements —
     the visible bug was "tap menu item, drawer closes, page never opens".
     Switching to `left` re-renders correctly + makes children fully tappable. */
  .p-sidebar{
    position:fixed !important;top:0 !important;bottom:0 !important;left:-100% !important;z-index:1001;
    width:260px !important;max-width:80vw;
    transition:left .25s ease;
    box-shadow:2px 0 18px rgba(0,0,0,.18);
  }
  .p-sidebar.sb-mobile-open{ left:0 !important; }
  /* Nav items inside the drawer — explicit pointer-events + touch-action
     manipulation defeats the 300ms tap-delay on mobile browsers AND keeps
     them clickable when stacked above the backdrop. */
  .p-sidebar .p-nav-item, .p-sidebar .p-nav-group-hdr{
    position:relative;pointer-events:auto;touch-action:manipulation;
  }

  /* Main column takes the full width */
  .p-main{ margin-left:0 !important; width:100% !important; }

  /* Topbar adjustments — make hamburger visible (it's only on the sidebar
     by default; expose a duplicate in the topbar via #p-topbar-burger which
     the layout adds). flex-wrap allowed so the company switcher can take its
     own row, but the burger/search/right-icons stay together via flex-shrink
     and order assignments. */
  .p-topbar{ padding-left:8px !important; gap:8px; flex-wrap:wrap; align-items:center; row-gap:4px; }
  .p-topbar-burger{ display:inline-flex !important; flex-shrink:0; order:0; }
  .p-breadcrumb{ font-size:12px; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; order:1; }
  .p-search{ flex:1 1 0;min-width:80px;order:2; }
  .p-topbar-right{ flex-shrink:0; order:3; }
  /* Company switcher pushed to second flex row.
     IMPORTANT: flex-basis:100% forces this item to take a full row (regular
     width:100% wasn't enough — flex items still rendered inline when there
     was leftover space on the previous row). max-width caps it so a long
     inline-styled width (max-width:220px from the markup) can't blow past
     the viewport on phones; min-width:0 lets the SELECT shrink under its
     content rather than expand the parent. */
  .p-company-wrap{ order:99;flex:0 0 100% !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin-left:0 !important; }
  .p-company-wrap select{ width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box; }

  /* Multi-column form grids — collapse to 2 columns */
  .fg.fg-3, .fg.fg-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .form-grid.fg2, .form-grid.fg3{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .settings-layout{ grid-template-columns:1fr !important; }
  .settings-nav{ display:flex;overflow-x:auto;gap:6px;padding-bottom:6px;margin-bottom:12px; }
  .settings-nav-item{ flex:0 0 auto;white-space:nowrap; }

  /* Tables — wrap in horizontal scroller if not already, but keep header sticky */
  .p-card > table, .p-tbl, .lines-tbl, .ps-table{ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; }

  /* Two-column form layout (so-form / delivery / etc.) → stack */
  .form-layout{ grid-template-columns:1fr !important; }
  .sum-panel{ position:static !important;margin-top:14px; }

  /* KPI grids collapse */
  .kpi-row{ grid-template-columns:repeat(2,1fr) !important; }
  .kpi-row-small{ grid-template-columns:repeat(3,1fr) !important; }

  /* Search field shrink */
  .p-search{ flex:1 1 auto;min-width:0;max-width:none; }
  .p-search input{ width:100%; }

  /* Filter rows — wrap onto multiple lines */
  .filter-row{ flex-wrap:wrap;gap:6px !important; }
}

/* ── Mobile (≤ 640px) ───────────────────────────────────────────────────── */
@media (max-width: 640px){
  body{ padding-top:var(--safe-top);padding-bottom:var(--safe-bot); }
  .p-content{ padding:12px 12px 24px !important; }

  /* Hide breadcrumb on tiny screens to save space (page title still in topbar) */
  .p-breadcrumb{ display:none; }
  .p-topbar{ min-height:54px;padding:6px 10px !important;gap:6px;flex-wrap:nowrap; }
  /* Hide the search input on phones — phones rarely use a global search bar,
     and it was forcing the topbar icons to wrap onto a 2nd line. The page
     filter inputs (each module has its own) remain available. */
  .p-search{ display:none !important; }
  /* Keep right-hand icons (lang/dark/notifications) inline next to the burger. */
  .p-topbar-right{ margin-left:auto;flex-shrink:0;display:inline-flex;gap:4px; }
  .p-topbar-right .p-icon-btn{ padding:6px !important; }

  /* All grids collapse to single column on mobile */
  .fg.fg-2, .fg.fg-3, .fg.fg-4{ grid-template-columns:1fr !important;gap:10px !important; }
  /* PO Form Document grid — phone: collapse to 2 cols (1 is too cramped for date fields) */
  #po-doc-grid.po-doc-grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  /* ── PO List pager — stack left/right groups on small screens so the row
        nav buttons don't overflow the card. */
  .po-pager{ flex-direction:column;align-items:stretch;gap:10px;padding:10px 12px; }
  .po-pager-left, .po-pager-right{ justify-content:space-between;width:100% }
  .po-pager-range{ margin-left:0; }
  .po-pager-info{ padding:0 4px;font-size:11px; }
  .po-pager-btn{ width:34px;height:34px;font-size:16px; }   /* bigger touch targets */

  /* ── PO Proper Preview modal — full screen on phones, less padding */
  .po-preview-overlay{ padding:0 !important; }
  .po-preview-modal{ width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;border-radius:0 !important; }
  .po-preview-header{ padding:10px 12px !important; }
  .po-preview-title{ font-size:13px !important; }
  .po-preview-body{ padding:14px 14px !important; }
  .pp-card-body{ padding:12px !important; }
  .pp-grid-3, .pp-grid-4{ grid-template-columns:1fr !important; }
  .pp-card-totals{ max-width:none !important;margin-left:0; }
  .pp-tbl{ font-size:11px; }
  .pp-tbl th, .pp-tbl td{ padding:6px 6px !important; }

  /* ── Relationship Map modal — collapse columns + stack flow on phones */
  .portal-rel-tree{ flex-direction:column;gap:18px;padding:14px 4px; }
  .portal-rel-col{ flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px; }
  .portal-rel-node{ flex:0 1 calc(50% - 5px); }   /* 2 nodes per row */
  .portal-rel-connectors{ display:none; }  /* SVG arrows break on vertical layout — hide */

  /* ── Per-line lock banner — single-line on phones */
  .po-locked-banner{ margin:10px 12px 0;padding:8px 12px;font-size:11px;flex-wrap:wrap; }

  /* ── Form Settings modal — full width on phones */
  #form-settings-modal > div{ width:96vw !important;max-height:90vh !important; }
  #form-settings-grid{ grid-template-columns:1fr !important; }
  #form-settings-search{ font-size:13px !important; }   /* prevent iOS zoom on focus */

  /* ── Context menu — larger touch targets on phones */
  .portal-ctx-menu{ min-width:180px !important; }
  .portal-ctx-item{ padding:10px 14px !important;font-size:14px !important; }   /* easier to tap */
  .form-grid.fg2, .form-grid.fg3{ grid-template-columns:1fr !important;gap:10px !important; }
  .fl[style*="grid-column:span"]{ grid-column:auto !important; }

  /* Page headers — title + actions stack */
  .p-hdr{ flex-direction:column;align-items:stretch !important;gap:10px; }
  .p-actions{ flex-wrap:wrap;gap:6px; }
  .p-actions .btn-p, .p-actions .btn-s{ flex:1 1 auto;justify-content:center; }
  /* Stronger overflow guard for action buttons in the content header area —
     prevents the row of toolbar buttons (Back / Settings / Copy / Save / Add)
     from exceeding viewport width on small phones. min-width 120px keeps each
     button readable; width:100% on the wrapper makes it take a full row of
     its own when the page title wraps. */
  .p-content-hdr .p-actions{ flex-wrap:wrap;width:100%; }
  .p-actions .btn-p, .p-actions .btn-s{ flex:1 1 auto;min-width:120px; }

  /* Page title smaller */
  .p-title{ font-size:18px !important; }
  .p-sub{ font-size:12px !important; }

  /* KPI cards — 2 columns on phones (was 5+ on desktop) */
  .kpi-row{ grid-template-columns:repeat(2,1fr) !important;gap:8px; }
  .kpi-row-small{ grid-template-columns:repeat(2,1fr) !important;gap:8px; }
  .kpi-val{ font-size:20px !important; }
  .kpi-label{ font-size:10px !important; }

  /* Cards — minimal padding for narrow screens */
  .p-card, .fc, .sum-panel{ border-radius:6px; }
  .p-card-head, .fc-head{ padding:10px 12px !important; }
  .p-card > div, .fc-body{ padding-left:12px;padding-right:12px; }

  /* Touch targets — min 44px height per Apple HIG */
  .btn-p, .btn-s, .btn-danger, .fsel, .fi{ min-height:38px; }
  .p-nav-item{ min-height:44px;font-size:14px; }
  .settings-nav-item{ min-height:40px;padding:10px 14px; }

  /* Sidebar drawer adjustments */
  .p-sidebar{ width:280px !important;max-width:85vw; }
  .p-logo{ padding:14px 16px; }
  .p-user-box{ padding:12px 14px; }

  /* Topbar company switcher — full width on mobile */
  .p-company-wrap{ width:100%;margin-left:0 !important;order:99; }
  .p-company-wrap select{ width:100%;max-width:none !important; }

  /* Modals (login, dialogs) — full width minus margin */
  .modal, .login-card, .wizard-card{ max-width:96vw !important;margin:8px auto; }

  /* Wizard rail collapses to top bar */
  .wizard-rail{ display:none; }
  .wizard-content{ margin-left:0 !important; }

  /* Charts — keep aspect ratio sane on mobile */
  canvas{ max-width:100% !important;height:auto !important; }

  /* Tables: smaller font + cell padding */
  .p-tbl, .lines-tbl, .ps-table{ font-size:12px; }
  .p-tbl th, .p-tbl td{ padding:8px 10px; }

  /* AI Chatbot pane — full screen on mobile */
  .ai-chat-shell, #ai-chat-pane{ height:calc(100vh - 60px) !important; }

  /* Login form */
  .login-screen .login-card{ padding:24px 18px !important; }

  /* Settings tab nav becomes horizontal scrolling chip strip */
  .settings-nav{ -webkit-overflow-scrolling:touch;scrollbar-width:thin; }

  /* Sales Order form lines table cells — slightly tighter */
  .lines-tbl th, .lines-tbl td{ padding:6px 8px; }

  /* CRM lists — recent visits feed etc. */
  .dn-tbl, .crm-tbl{ font-size:12px; }
}

/* Tap-highlight + better tap behavior on touch devices */
@media (hover: none) and (pointer: coarse){
  a, button, .p-nav-item, .settings-nav-item{ -webkit-tap-highlight-color:rgba(164,38,44,.10); }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  AI REPORTS — dark-theme + responsive patches
 *  ----------------------------------------------------------------------------
 *  The airep-* component CSS uses `var(--surface-muted, #f9fafb)` and
 *  `var(--muted, #6b7280)` but those CSS variables are not declared in our
 *  dark theme block (only --surface, --text, --text2, etc.). Result: template
 *  cards, suggestion bubbles, table headers, and SQL chips fall back to the
 *  hard-coded light values and render as white-on-white when the user is in
 *  dark mode. Declare the two missing variables for both themes, then patch
 *  the few component colors that don't compose well in dark mode.
 * ════════════════════════════════════════════════════════════════════════════ */
:root{ --surface-muted:#f9fafb; --muted:#6b7280; }
:root[data-theme="dark"]{
  --surface-muted:#2b2a29;   /* one step lighter than --surface (#252423) */
  --muted:#a8a6a4;           /* readable secondary text on dark surface */
}
:root[data-theme="dark"] .airep-chat-panel,
:root[data-theme="dark"] .airep-preview-panel,
:root[data-theme="dark"] .airep-runner-head{
  background:var(--surface);border-color:var(--border);
}
:root[data-theme="dark"] .airep-sugg{
  background:var(--surface-muted);border-color:var(--border);color:var(--text);
}
:root[data-theme="dark"] .airep-sugg:hover{
  border-color:rgba(124,58,237,.55);background:rgba(124,58,237,.12);
}
:root[data-theme="dark"] .airep-sugg-title{ color:var(--text); }
:root[data-theme="dark"] .airep-sugg-sub{ color:var(--text2); }
:root[data-theme="dark"] .airep-sugg-tag{
  background:rgba(124,58,237,.22);color:#c4b5fd;
}
:root[data-theme="dark"] .airep-tpl-cat-btn{
  background:var(--surface-muted);color:var(--text);border-color:var(--border);
}
:root[data-theme="dark"] .airep-tpl-cat-btn:hover{
  border-color:rgba(124,58,237,.55);color:#c4b5fd;
}
:root[data-theme="dark"] .airep-tpl-cat-btn.active{
  background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border-color:transparent;
}
:root[data-theme="dark"] .airep-tpl-search{
  background:var(--surface-muted);color:var(--text);border-color:var(--border);
}
:root[data-theme="dark"] .airep-bubble{
  background:var(--surface-muted);border-color:var(--border);color:var(--text);
}
:root[data-theme="dark"] .airep-msg-user .airep-bubble{
  background:rgba(71,158,245,.16);border-color:rgba(71,158,245,.35);color:var(--text);
}
:root[data-theme="dark"] .airep-bubble code{ background:rgba(255,255,255,.08);color:var(--text); }
:root[data-theme="dark"] .airep-typing-bubble{
  background:var(--surface-muted);border-color:var(--border);
}
:root[data-theme="dark"] .airep-typing-bubble span{ background:#6b6a68; }
:root[data-theme="dark"] .airep-table thead th{
  background:var(--surface-muted);color:var(--text2);border-color:var(--border);
}
:root[data-theme="dark"] .airep-table tbody td{ border-color:var(--border); }
:root[data-theme="dark"] .airep-table tbody tr:hover{ background:rgba(124,58,237,.10); }
:root[data-theme="dark"] .airep-export-menu{
  background:var(--surface);border-color:var(--border);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 10px 20px -10px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .airep-export-item{ color:var(--text); }
:root[data-theme="dark"] .airep-export-item:hover{ background:rgba(71,158,245,.12); }
:root[data-theme="dark"] .airep-export-tt b{ color:var(--text); }
:root[data-theme="dark"] .airep-export-tt span{ color:var(--text2); }
:root[data-theme="dark"] .airep-export-divider{ background:var(--border); }
:root[data-theme="dark"] .airep-draft-meta .airep-chip{
  background:var(--surface-muted);color:var(--text);border-color:var(--border);
}
:root[data-theme="dark"] .airep-preview-empty-t{ color:var(--text); }
:root[data-theme="dark"] .airep-preview-empty,
:root[data-theme="dark"] .airep-panel-sub,
:root[data-theme="dark"] .airep-welcome-sub,
:root[data-theme="dark"] .airep-runner-sub,
:root[data-theme="dark"] .airep-tpl-empty{ color:var(--text2); }

/* ════════════════════════════════════════════════════════════════════════════
 *  PROFILE LAYOUT — give the inline grid a class so it can collapse on mobile.
 *  Inline styles can't be targeted by media queries reliably, so this rule
 *  uses an attribute selector as a fallback AND a new `.profile-layout` class
 *  (the cshtml is updated to apply it).
 * ════════════════════════════════════════════════════════════════════════════ */
.profile-layout{ display:grid;grid-template-columns:1fr 320px;gap:16px; }
@media (max-width:900px){
  .profile-layout{ grid-template-columns:1fr !important; }
  /* Fallback selector — until the app is restarted, the server may still be
     serving the OLD profile cshtml that had the layout inline as
     style="display:grid;grid-template-columns:1fr 320px;gap:16px". Match
     that inline style by attribute so mobile collapse works regardless. */
  #pg-profile > .p-wrap > div[style*="grid-template-columns:1fr 320px"]{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:640px){
  /* Profile avatar row should stack vertically — was wrapping text awkwardly */
  #pg-profile .avatar-upload{ flex-direction:column;align-items:flex-start;gap:10px; }
  #pg-profile .avatar-circle{ margin:0 auto 8px; }
  #pg-profile .avatar-info{ font-size:11px;line-height:1.5; }
  #pg-profile .fc-body{ padding:14px 12px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  AI TOOLBAR — used by AI Chatbot AND Invoice Scanning pages. On mobile the
 *  toolbar (.ai-toolbar) was flexed in a single row, cramming the title +
 *  description on the left and four action buttons on the right with no
 *  horizontal room. Stack vertically below 640px and let the actions wrap.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .ai-toolbar{ flex-direction:column;align-items:stretch;gap:10px; }
  .ai-toolbar-actions{ flex-wrap:wrap;justify-content:flex-start; }
  .ai-toolbar-actions .btn-s, .ai-toolbar-actions .btn-p{ flex:0 0 auto; }
  .ai-model-pill{ max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
}
@media (max-width:640px){
  .ai-toolbar{ padding:10px 12px !important; }
  .ai-toolbar-title{ font-size:14px; }
  .ai-toolbar-sub{ font-size:11.5px;line-height:1.4; }
  .ai-quota-line{ gap:6px 10px;margin-top:6px; }
  .ai-quota-pill{ font-size:11px; }
  .ai-toolbar-actions{ gap:6px; }
  .ai-toolbar-actions .btn-s, .ai-toolbar-actions .btn-p{
    padding:7px 10px !important;font-size:12px;flex:1 1 auto;justify-content:center;
  }
  .ai-toolbar-actions svg{ width:13px;height:13px; }
  .ai-model-pill{ font-size:11.5px;padding:4px 8px; }
  /* AI Chatbot — welcome state takes most of the viewport, so tighten it. */
  .ai-welcome{ margin:18px auto 6px !important;padding:0 12px !important; }
  .ai-welcome-badge{ width:40px;height:40px;margin-bottom:8px; }
  .ai-welcome-title{ font-size:18px; }
  .ai-welcome-sub{ font-size:12px; }
  .ai-suggestions{ grid-template-columns:1fr !important;gap:8px;margin-top:14px; }
  .ai-sugg{ padding:10px; }
  .ai-chat-scroll{ padding:14px 12px 8px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  INVOICE SCANNING — the 3-step "How it works" tips strip below the upload
 *  area was using grid-template-columns:repeat(3,1fr) which crammed the
 *  text into 3 narrow columns on phones. Stack on mobile.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ari-tips{ grid-template-columns:1fr !important;gap:10px !important; }
  .ari-tip{ padding:10px 12px !important; }
  .ari-drop{ padding:24px 16px !important; }
  .ari-drop-title{ font-size:15px !important; }
  .ari-drop-sub{ font-size:11.5px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  POS PAGE — desktop uses a 2-column grid (products | cart) that's totally
 *  unusable on a phone screen. Stack vertically: products grid up top with
 *  a horizontally scrollable category strip, cart panel below.
 *  Phone keyboards take ~40% of the viewport so we also cap the products
 *  region height — the cart needs to stay reachable.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .pos-layout{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    height:auto !important;
    min-height:calc(100vh - var(--topbar-h));
    overflow:visible !important;
  }
  .pos-left{ border-right:none !important;border-bottom:1px solid var(--border); }
  .pos-items{
    /* On mobile, cap the products grid height so the cart panel is still
       visible without scrolling the entire page. ~55% of the visible area
       keeps it scannable on a phone but leaves room for the cart. */
    max-height:55vh;
  }
}
@media (max-width:640px){
  .pos-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;padding:10px 12px !important; }
  .pos-item{ padding:10px 8px; }
  .pos-item-icon{ width:36px;height:36px;margin-bottom:6px; }
  .pos-item-name{ font-size:11.5px; }
  .pos-item-code{ font-size:9.5px; }
  .pos-item-price{ font-size:13px; }
  .pos-cats{ padding:8px 12px; }
  .pos-search-bar{ padding:10px 12px; }
  .pos-header{ padding:10px 12px; }
  .pos-customer{ padding:8px 12px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  LICENSE INFO — Client + Server binding cards use an inline 2-column grid
 *  (`grid-template-columns:minmax(0,1fr) minmax(0,1fr)`). On phones the two
 *  cards become unreadable side-by-side; stack them. Use an attribute selector
 *  so the CSS works regardless of whether the cshtml has been recompiled.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{
    grid-template-columns:1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  B2B ADMIN — the 3-KPI strip (Customers Listed, Portal-Enabled, Password
 *  Set) renders with `grid-template-columns:repeat(3,minmax(0,1fr))`. The
 *  values are short numbers but the labels need horizontal room — collapse
 *  to a vertical stack on phones for readability.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .b2ba-kpi{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .b2ba-search input{ width:100% !important; }
  .b2ba-table{ font-size:12px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  PAGE-WIDE OVERFLOW SAFETY NET
 *  -----------------------------------------------------------------------
 *  Several form pages had a wide horizontal scrollbar at the very bottom
 *  of the viewport on mobile. Root cause: the topbar's company switcher
 *  could blow past the viewport width AND certain grid form layouts
 *  (.fg.fg-3 specifically) inherited an intrinsic min-content from their
 *  inputs that prevented them from shrinking inside a narrow viewport.
 *
 *  Two-pronged fix:
 *    1. Force every grid form group (.fg, .form-grid) to have `min-width:0`
 *       on its tracks so grid items can shrink under their own content.
 *    2. Clip stray overflow at the .p-content level — main content area
 *       should never produce horizontal scroll on mobile; if a child
 *       (like a wide lines table) needs to scroll, it manages its own
 *       overflow-x via .p-tbl/.lines-tbl/.ps-table (already done above).
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .fg, .form-grid{ min-width:0; }
  .fg > *, .form-grid > *{ min-width:0; }
  .fi, .fsel, .fta{ min-width:0;max-width:100%;box-sizing:border-box; }
  /* Final safety net — clip horizontal overflow at the content level so
     the page never gets a horizontal scrollbar on phones. Inner widgets
     that legitimately need horizontal scrolling (data tables) carry their
     own overflow-x:auto so they're unaffected. */
  .p-content{ overflow-x:hidden !important; }
  /* Inventory form headers — wrap action buttons (Back / Print / Edit /
     Cancel Doc / Post-to-SAP / Update) so they stack on phones rather than
     overflow the title row. */
  .p-form-title-row{ flex-wrap:wrap;gap:8px; }
  .p-form-title-row .p-actions{ flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-end; }
}
@media (max-width:640px){
  /* Inventory line table — collapse most columns; rely on horizontal scroll. */
  .lines-tbl{ font-size:11px; }
  .lines-tbl th, .lines-tbl td{ padding:4px 6px !important; }
  /* Batch / Serial modal — at very narrow viewports keep header buttons readable. */
  [data-role="status"]{ font-size:10px !important; min-width:0 !important; }
}



/* POS product browser: list view + grid/list toggle (setPosViewMode) */
.pos-view-toggle{display:flex;border:1px solid var(--border2);border-radius:4px;overflow:hidden;flex-shrink:0}
.pos-view-toggle button{border:0;background:var(--white);color:var(--text2);padding:0 10px;font-size:15px;cursor:pointer;line-height:1;font-family:var(--font)}
.pos-view-toggle button.active{background:var(--accent);color:#fff}
.pos-items.pos-items-list{display:flex;flex-direction:column;gap:6px}
.pos-item.pos-item-row{display:flex;align-items:center;gap:12px;text-align:left;padding:8px 12px}
.pos-item.pos-item-row .pos-item-icon{margin:0;width:34px;height:34px;font-size:14px;flex-shrink:0}
.pos-item.pos-item-row .pos-item-name{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-item.pos-item-row .pos-item-code{margin:0}
.pos-item.pos-item-row .pos-item-price{margin:0;white-space:nowrap;min-width:70px;text-align:right}



/* ═══ Printable document sheet v3 — clean, minimal, no colour bands ═══ */
.doc-sheet-overlay{position:fixed;inset:0;z-index:10000;background:#4b4f54;overflow:auto;padding:0 0 32px}
.doc-sheet-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#2b2e33;color:#fff;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.doc-sheet{--ink:#111827;--ink2:#374151;--muted:#6b7280;--line:#e5e7eb;--line2:#d1d5db;--accent:#1f6fcb;
  width:210mm;min-height:297mm;margin:22px auto 0;background:#fff;color:var(--ink);padding:16mm 16mm 12mm;box-sizing:border-box;
  box-shadow:0 12px 40px rgba(0,0,0,.45);font:10.5px/1.5 "Segoe UI",Arial,Helvetica,sans-serif;display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.doc-sheet .r{text-align:right}.doc-sheet .c{text-align:center}.doc-sheet .b{font-weight:600}
.doc-sheet .mono{font-family:Consolas,"Courier New",monospace;font-size:9.8px;color:var(--ink2)}
.ds-sub{font-size:9px;color:var(--muted)}
.ds-lbl{font-size:8.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* header */
.ds-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.ds-co-logo{height:38px;width:auto;max-width:160px;object-fit:contain;display:block;margin-bottom:8px}
.ds-co-name{font-size:14px;font-weight:700}
.ds-co-meta{font-size:9.5px;color:var(--muted);line-height:1.55}
.ds-title-block{text-align:right}
.ds-title{font-size:26px;font-weight:300;letter-spacing:4px;color:var(--ink);line-height:1;margin-bottom:10px}
.ds-meta{border-collapse:collapse;margin-left:auto}
.ds-meta th{font-weight:400;color:var(--muted);text-align:right;padding:1px 10px 1px 0;font-size:9.5px;white-space:nowrap}
.ds-meta td{text-align:right;padding:1px 0;font-weight:600;white-space:nowrap}
.ds-meta tr.ds-no td{font-size:12px}
.ds-rule{height:1px;background:var(--ink);margin:14px 0 16px}
/* parties + details */
.ds-parties{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ds-parties>div:last-child{padding-left:38%}
.ds-details{display:grid;grid-template-columns:repeat(5,1fr);margin-top:16px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.ds-details>div{padding:7px 10px 7px 0}
.ds-details .ds-lbl{margin-bottom:2px}
.ds-details .ds-val{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-party-name{font-weight:700;font-size:11.5px;margin-bottom:1px}
.ds-kv{border-collapse:collapse}
.ds-kv th{font-weight:400;color:var(--muted);text-align:left;padding:1px 12px 1px 0;font-size:9.5px;white-space:nowrap;vertical-align:top}
.ds-kv td{padding:1px 0;font-weight:600;white-space:nowrap}
/* lines */
.ds-lines{width:100%;border-collapse:collapse;margin-top:18px}
.ds-lines th{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:600;font-size:8.8px;letter-spacing:1.2px;text-transform:uppercase;padding:7px 6px;text-align:left;color:var(--ink2)}
.ds-lines th.r{text-align:right}.ds-lines th.c{text-align:center}
.ds-lines td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ds-lines td.desc{font-weight:600}
.ds-lines td.desc .ds-sub{font-weight:400}
.ds-lines tbody tr:last-child td{border-bottom:1px solid var(--ink)}
/* bottom */
.ds-bottom{display:grid;grid-template-columns:1fr 230px;gap:28px;margin-top:6px;align-items:start}
.ds-totals{border-collapse:collapse;width:100%}
.ds-totals th{text-align:left;font-weight:400;color:var(--muted);padding:5px 0;border-bottom:1px solid var(--line)}
.ds-totals td{text-align:right;padding:5px 0;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.ds-totals tr.ds-grand th,.ds-totals tr.ds-grand td{border-bottom:0;border-top:2px solid var(--ink);padding-top:8px;font-size:14px;font-weight:700;color:var(--ink)}
.ds-totals tr.ds-grand th{font-weight:600}
.ds-words{margin-top:14px;padding-top:8px;border-top:1px solid var(--line);font-size:9.8px;color:var(--ink2)}
.ds-terms{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}.ds-terms p{margin:2px 0 0;white-space:pre-line;font-size:9.5px;color:var(--ink2)}
.ds-words b{font-weight:600;color:var(--ink)}
.ds-notes{margin-top:14px}
.ds-notes p{margin:0 0 6px;font-size:9.8px;color:var(--ink2)}
.ds-tc{font-size:8.8px;color:var(--muted);line-height:1.55}
.ds-sign{display:grid;grid-template-columns:repeat(2,180px);justify-content:space-between;gap:24px;margin-top:44px;padding-bottom:10px}
.ds-sign>div{border-top:1px solid var(--line2);padding-top:5px;font-size:8.8px;color:var(--muted)}
/* footer */
.ds-foot{margin-top:0;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ds-foot>div:last-child{text-align:right}
.ds-thanks{font-size:10.5px;font-weight:600;color:var(--ink)}
.ds-foot-line{font-size:8.6px;color:var(--muted);margin-top:2px}
.ds-powered{font-size:7.8px;color:#9ca3af;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ds-powered img{height:12px;width:auto;opacity:.8}
.ds-docid{font-size:7.5px;color:#b0b7c0;text-align:right;margin-top:6px}
@media print{
  body > *:not(.doc-sheet-overlay){display:none !important}
  .doc-sheet-overlay{display:block !important;position:static !important;background:none !important;padding:0 !important;overflow:visible !important}
  .doc-sheet-toolbar{display:none !important}
  .doc-sheet{box-shadow:none !important;margin:0 !important;width:auto !important;min-height:0 !important;padding:0 0 26mm !important}
  /* footer pinned to the bottom of every printed page */
  .ds-foot{position:fixed;bottom:0;left:0;right:0;margin:0;background:#fff}
  .ds-lines tr{page-break-inside:avoid}
  @page{size:A4;margin:14mm 15mm 14mm}
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* ── POS 80 mm thermal receipt (printPosReceipt, sap-portal-qt-ar-cn-pos.js) ── */
.pos-rcpt{width:72mm;margin:22px auto 0;background:#fff;color:#111;padding:6mm 3mm 8mm;box-sizing:border-box;font:11px/1.35 "Segoe UI",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.pos-rcpt .rc-co{text-align:center;font-size:10px;color:#333}
.pos-rcpt .rc-co-name{font-size:14px;font-weight:700;color:#111;margin-bottom:2px}
.pos-rcpt .rc-title{text-align:center;font-weight:700;letter-spacing:.12em;font-size:11px;margin:8px 0 6px}
.pos-rcpt .rc-row{display:flex;justify-content:space-between;gap:8px}
.pos-rcpt .rc-meta{font-size:10px;color:#333}
.pos-rcpt .rc-sep{border-top:1px dashed #999;margin:6px 0}
.pos-rcpt .rc-line{margin:3px 0}
.pos-rcpt .rc-name{font-weight:600}
.pos-rcpt .rc-qp{display:flex;justify-content:space-between;gap:8px;color:#333;font-size:10px}
.pos-rcpt .rc-tot .rc-row{padding:1px 0}
.pos-rcpt .rc-grand{font-size:14px;font-weight:700;border-top:1px solid #111;margin-top:3px;padding-top:4px}
.pos-rcpt .rc-pay{font-size:10.5px}
.pos-rcpt .rc-items-n{text-align:center;font-size:10px;color:#555}
.pos-rcpt .rc-foot{text-align:center;margin-top:8px;font-size:10px;white-space:pre-line}
.pos-rcpt .rc-brand{text-align:center;margin-top:6px;font-size:9px;color:#777;letter-spacing:.08em}
@media print{
  .pos-rcpt{width:auto !important;margin:0 !important;padding:0 !important;box-shadow:none !important}
  .pos-rcpt-overlay .doc-sheet-toolbar{display:none !important}
}

/* ── Single-branch SAP company: hide every branch picker / branch setting (body.single-branch set by _LayoutSapPortal from the multi-branch probe) ── */
body.single-branch .fl:has(select[id*="branch"]),
body.single-branch .ari-field:has(select[id*="branch"]),
body.single-branch .fl:has(#settings-user-branches-chk),
body.single-branch #settings-user-branches-chk,
body.single-branch #stab-branches,
body.single-branch .settings-nav-item[onclick*="'branches'"],
body.single-branch [data-mb-only]{display:none !important}