:root{--ink:#17253a;--muted:#748197;--line:#e6ebf3;--bg:#f5f7fb;--card:#fff;--accent:#2563eb;--accent2:#123c89;--green:#0b946e;--shadow:0 8px 28px rgba(18,35,61,.045)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.7 Tahoma,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:var(--accent)}.layout{min-height:100vh;display:flex}.sidebar{width:250px;background:#14243d;color:#dce8ff;position:sticky;top:0;height:100vh;padding:23px 15px;display:flex;flex-direction:column;flex:none}.brand{color:white;display:flex;align-items:center;gap:12px;padding:4px 10px 29px}.brand img{width:55px;height:49px;object-fit:contain}.brand span{display:grid;line-height:1.4}.brand b{font:700 19px/1.4 "Segoe UI",Tahoma,sans-serif}.brand small{font-size:12px;color:#9ab2d7}.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#bfcee4;padding:12px 15px;border-radius:12px;display:flex;gap:13px;align-items:center;font-weight:600;transition:.2s}.sidebar nav a:hover,.sidebar nav a.active{background:#274160;color:white}.nav-icon{font-size:10px;color:#7cb7ff}.sidebar-bottom{margin-top:auto;border-top:1px solid #30445d;padding:20px 10px;font-size:13px}.sidebar-bottom form{margin-top:12px}.sidebar-bottom button{width:100%;background:#213b59!important;color:#fff!important}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:72px;background:#fff;box-shadow:0 1px 0 var(--line);display:flex;align-items:center;padding:0 36px;gap:15px}.top-caption{font-size:13px;color:#6b7b95}.mobilebrand{display:none;align-items:center;gap:8px;color:#17253a}.mobilebrand img{width:34px;height:34px}.menu-toggle{display:none;border:0;background:#edf3fb;padding:7px 14px;border-radius:8px}.wrap{width:100%;max-width:1500px;margin:0 auto;padding:28px 34px 65px;flex:1}.pageheading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.pageheading h1{font-size:24px;margin:0;letter-spacing:-.5px;font-weight:800}.panel{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow);min-width:0}.panel h2{font-size:17px;margin:0 0 18px}.panel p{margin:4px 0 16px}.panel summary{font-weight:700;cursor:pointer;font-size:16px}.panel details,.panel form{margin-top:14px}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8e1ee;background:#fff;color:#284267;padding:9px 15px;border-radius:10px;font-weight:700;font-size:13px;min-height:39px;white-space:nowrap;transition:.18s}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.small{font-size:12px;padding:5px 10px;min-height:32px}.btn:disabled{opacity:.5;cursor:default}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.stat,.stats>div{background:#fff;border:1px solid var(--line);padding:21px;border-radius:15px;display:grid;gap:8px}.stats b{font-size:31px;line-height:1.2;font-weight:800}.stats small{font-size:12px;color:var(--muted)}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.section-title h2{margin:0}.section-title input{max-width:280px}.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:11px}table{border-collapse:collapse;width:100%;min-width:600px;background:white}th,td{text-align:right;padding:12px 14px;border-bottom:1px solid #edf0f5;vertical-align:middle;font-size:13px}th{background:#f5f8fc;color:#5f718d;font-size:12px;font-weight:800}tr:last-child td{border:0}tr:hover td{background:#fafcff}td .btn{margin:2px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}.field{display:grid;gap:7px;min-width:0}.field span{font-size:13px;color:#475b75;font-weight:700}.full{grid-column:1/-1}input,select,textarea{outline:none;border:1px solid #dbe3ee;background:#fff;color:#243956;border-radius:10px;min-height:42px;padding:9px 12px;width:100%;max-width:100%}input:focus,select:focus,textarea:focus{border-color:#4d91fa;box-shadow:0 0 0 3px rgba(59,130,246,.11)}textarea{min-height:85px;resize:vertical}input[type=checkbox]{width:auto;min-height:0;accent-color:#2563eb}.form-grid .btn{max-width:220px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.toolbar,.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}.inline{display:inline-flex;gap:6px;align-items:center;margin:0!important}.inline .btn{max-width:none}.qty{width:76px;min-height:36px}.status{display:inline-block;padding:6px 11px;background:#ebf4ff;border-radius:99px;color:#2760a2;font-size:12px;font-weight:700}.status.active{background:#e2f7ee;color:#08865c}.status.disabled,.status.archived{background:#fff2ed;color:#af614a}.alert{padding:14px 19px;border-radius:12px;border:1px solid #b8d9ca;background:#e9f9f0;color:#1b6c49;margin-bottom:20px}.alert.error{background:#fff0ef;border-color:#f7c6c0;color:#ad3c37}.narrow{max-width:580px;margin:20px auto}.narrow form{display:grid;gap:16px}.login-head{text-align:center;margin:35px auto 20px}.login-head img{max-width:240px;width:80%}body.public .main{width:100%}body.public .topbar{justify-content:space-between}body.public .mobilebrand{display:flex}body.public .wrap{max-width:1080px}.supplier-hero{background:linear-gradient(115deg,#142b48,#1e4c86);border-radius:18px;color:white;padding:30px;margin-bottom:20px}.supplier-hero .eyebrow{font-size:12px;color:#a9d5ff}.supplier-hero h2{margin:6px 0;font-size:26px}.supplier-hero p{max-width:800px;color:#d6e7fc}.supplier-hero .stats{max-width:330px;margin:15px 0 0;grid-template-columns:repeat(2,1fr)}.supplier-hero .stats>div{background:#ffffff15;border-color:#ffffff40;color:white}.supplier-hero .stats small{color:#dfecff}.quote-head,.quote-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:15px;align-items:center;padding:15px 8px;border-bottom:1px solid #e8edf5}.quote-head{font-size:12px;font-weight:800;color:#61718a;background:#f8fafd;border-radius:10px}.quote-row strong{display:block;font-size:14px}.quote-row small{display:block;color:#8190a6;font-size:12px}.quote-row input{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.quote-row:focus-within{background:#f8fbff}.sticky{position:sticky;bottom:0;background:#fff;padding:17px 0;border-top:1px solid var(--line);margin:0;z-index:2}.search-input{margin-bottom:16px}.copyline{display:flex;gap:7px;margin:12px 0}.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 0}.checks label{font-size:12px;display:flex;gap:7px;align-items:center}.details-inline{display:inline-block;vertical-align:middle;position:relative}.details-inline summary{cursor:pointer;border:1px solid #dce5f1;padding:7px 10px;border-radius:9px;color:#294f89}.details-inline[open] form{position:absolute;left:0;top:35px;width:min(480px,80vw);background:white;padding:20px;z-index:4;border:1px solid #dce3ed;box-shadow:0 18px 35px #14243d2b;border-radius:12px}footer{padding:16px;display:flex;justify-content:center;gap:8px;align-items:center;font-size:11px;color:#8998ab;border-top:1px solid var(--line);flex-wrap:wrap}footer a{color:#6b84a9}@media(max-width:1020px){.sidebar{width:218px}.wrap{padding:24px 18px}.grid-2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{position:fixed;right:-270px;width:250px;z-index:9;transition:right .2s}.sidebar.open{right:0;box-shadow:0 0 0 100vw rgba(3,18,38,.45)}.topbar{padding:0 16px;height:62px}.mobilebrand{display:flex}.menu-toggle{display:block}.top-caption{margin-right:auto}.wrap{padding:20px 11px 46px}.pageheading h1{font-size:20px}.panel{padding:15px;border-radius:13px}.form-grid{grid-template-columns:1fr}.stats{gap:8px}.stat,.stats>div{padding:12px}.stats b{font-size:24px}.toolbar{gap:6px}.btn{font-size:12px;padding:8px 10px}.quote-head,.quote-row{grid-template-columns:minmax(0,1fr) 120px;gap:8px}.quote-row input{font-size:15px;padding:7px}.supplier-hero{padding:20px}.supplier-hero h2{font-size:21px}.checks{grid-template-columns:1fr}.copyline{flex-wrap:wrap}}@media print{@page{size:A4;margin:11mm}.sidebar,.topbar,.toolbar,.pageheading,.print-actions,footer,.btn,.inline,.sidebar-bottom{display:none!important}body,.main,.wrap{background:white!important;padding:0!important;margin:0!important}.panel{border:0;box-shadow:none;padding:0}.table-wrap{overflow:visible}table{min-width:0}th,td{padding:6px;font-size:10px;border:1px solid #bbb}tr{break-inside:avoid}.print-paper{display:block}h2{font-size:17px}}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0;max-height:150px;overflow:auto}.pager a{min-width:34px}.quote-list{min-height:110px}@media print{.pager{display:none!important}.quote-row input{border:0;border-bottom:1px solid #777;border-radius:0;box-shadow:none}}

.company-logo{max-height:46px;max-width:90px;object-fit:contain;border-radius:7px;background:white;padding:3px}.login-head .company-logo{max-height:80px;max-width:180px;margin-inline-start:14px}.panel input[type=file]{padding:12px;max-width:100%}


/* === X2P Orders UI Polish === */
:root{
  --bg:#eef3f9;
  --card:#ffffff;
  --line:#dde6f1;
  --ink:#11243d;
  --muted:#5f7088;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --green:#0f9f72;
  --red:#dc2626;
  --amber:#d97706;
  --shadow:0 12px 32px rgba(17,36,61,.07);
}
body{background:linear-gradient(180deg,#f5f8fc 0%,#eef3f9 100%);color:var(--ink)}
.topbar{height:76px;border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(15,23,42,.03)}
.sidebar{background:linear-gradient(180deg,#10233d 0%,#102746 55%,#0b1c33 100%);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset}
.sidebar nav{gap:8px}
.sidebar nav a{padding:13px 15px;border:1px solid transparent}
.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(135deg,#21406f,#1b5cb8);border-color:rgba(255,255,255,.08);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.nav-icon{font-size:11px}
.wrap{padding-top:30px}
.pageheading{margin-bottom:24px}
.pageheading h1{font-size:31px;font-weight:900}
.panel{border-radius:20px;border:1px solid rgba(210,223,238,.9);box-shadow:0 16px 34px rgba(17,36,61,.06);padding:26px}
.panel h2{font-size:19px;font-weight:800;color:#17345b}
.btn{border-radius:12px;padding:10px 16px;font-size:13px;font-weight:800;border-color:#d5e1f0;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 10px rgba(17,36,61,.03)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(17,36,61,.09)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:var(--accent2);color:#fff}
.btn.primary:hover{filter:none;box-shadow:0 12px 22px rgba(37,99,235,.28)}
.btn.small{border-radius:10px;padding:7px 12px;min-height:34px}
.btn.danger{background:#fff2f2;border-color:#fecaca;color:#b42318}
.btn.danger:hover{background:#fee2e2}
.btn.success{background:#effcf6;border-color:#b7ebd5;color:#0f7b59}
input,select,textarea{min-height:45px;border-radius:12px;border:1px solid #d7e1ee;background:#fbfdff;color:#18304d;transition:.18s box-shadow,.18s border-color,.18s background}
input::placeholder,textarea::placeholder{color:#91a0b4}
input:focus,select:focus,textarea:focus{background:#fff;border-color:#4d91fa;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.form-grid{gap:16px}
.field span{font-size:13px;color:#3d5575;font-weight:800}
.table-wrap{border-radius:16px;border-color:#dde6f1;box-shadow:0 4px 14px rgba(17,36,61,.04)}
table{min-width:720px}
th,td{padding:14px 16px}
th{position:sticky;top:0;background:linear-gradient(180deg,#f6f9fc,#edf3f9);color:#4d6280;z-index:1}
tbody tr:nth-child(even) td{background:#fcfdff}
tbody tr:hover td{background:#f0f6ff}
.stats{gap:16px}
.stats>div{border-radius:18px;padding:22px;border:1px solid #dbe4ef;box-shadow:0 8px 20px rgba(17,36,61,.05);background:linear-gradient(180deg,#ffffff,#fbfdff)}
.stats b{color:#16355a;font-size:34px}
.stats small{font-size:12px;color:#6a7d95;font-weight:700}
.status{padding:7px 12px;border-radius:999px;font-weight:800;border:1px solid transparent}
.status.active{background:#eafaf3;color:#087a57;border-color:#c9ead9}
.status.disabled,.status.archived{background:#fff4ef;color:#9f5039;border-color:#ffd7c8}
.status.pending{background:#fff8e8;color:#9b6b11;border-color:#f8e1ab}
.alert{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:16px;border:1px solid #b8d9ca;background:linear-gradient(180deg,#ecfcf3,#e6f7ef);color:#17563d;box-shadow:0 8px 18px rgba(15,159,114,.08)}
.alert::before{content:'✓';width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50%;background:#0f9f72;color:#fff;font-weight:900;flex:none;margin-top:1px}
.alert.error{background:linear-gradient(180deg,#fff3f2,#ffefee);border-color:#f2c7c2;color:#9e312d;box-shadow:0 8px 18px rgba(220,38,38,.08)}
.alert.error::before{content:'!';background:#dc2626}
.alert.warn{background:linear-gradient(180deg,#fff9eb,#fff4d8);border-color:#f6dd9d;color:#8b5b09}
.alert.warn::before{content:'i';background:#d97706}
.toolbar,.actions{gap:10px}
.pager{gap:8px}
.pager a{border-radius:10px;padding:6px 10px;border:1px solid #d8e2f0;background:#fff;color:#21456f;font-weight:700}
.pager a.active,.pager a:hover{background:#2563eb;color:#fff;border-color:#2563eb}
footer{background:transparent;border-top:0;color:#74849b;padding:20px 16px}
/* modal confirm */
.ui-modal-backdrop{position:fixed;inset:0;background:rgba(10,20,35,.52);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.ui-modal{width:min(520px,95vw);background:#fff;border-radius:22px;border:1px solid #dbe4ef;box-shadow:0 32px 80px rgba(15,23,42,.28);overflow:hidden;animation:modalIn .18s ease-out}
.ui-modal-head{padding:20px 22px 10px;font-size:22px;font-weight:900;color:#17345b}
.ui-modal-body{padding:0 22px 20px;color:#44566f;line-height:1.9}
.ui-modal-actions{display:flex;justify-content:flex-start;gap:10px;padding:18px 22px 22px;background:#f7fafc;border-top:1px solid #e7eef7}
.ui-toast-wrap{position:fixed;left:18px;bottom:18px;display:grid;gap:10px;z-index:9998}
.ui-toast{min-width:220px;max-width:360px;background:#102746;color:#fff;padding:12px 14px;border-radius:14px;box-shadow:0 14px 34px rgba(16,39,70,.35);font-weight:700}
.ui-toast.success{background:linear-gradient(135deg,#0f9f72,#0b7f5b)}
.ui-toast.error{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.ui-toast.info{background:linear-gradient(135deg,#21406f,#2563eb)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .panel{padding:16px;border-radius:16px}
  .pageheading h1{font-size:24px}
  th,td{padding:11px 10px}
  .stats>div{padding:15px}
  .ui-modal{border-radius:18px}
  .ui-modal-head{font-size:19px}
}

/* === X2P UI V2: 2026-11 === */
:root{--accent:#2959df;--accent2:#214ac2;--ink:#14283f;--muted:#667990;--line:#dce6f2;--bg:#f2f6fb;--shadow:0 10px 30px rgba(17,36,61,.06)}
html{font-size:15px}body{line-height:1.75;background:#f2f6fb}
.sidebar{width:255px;padding:20px 13px}.brand{padding:10px 9px 23px;gap:9px}.brand img{width:39px;height:43px}.brand img.company-logo{max-width:45px;max-height:43px}.brand b{font-size:17px}.brand small{font-size:11px}
.sidebar nav a{border-radius:11px;min-height:46px;font-size:14px;letter-spacing:0;padding:11px 13px}
.sidebar nav a.active{background:#23559e;box-shadow:0 5px 18px rgba(0,0,0,.12)}
.topbar{height:70px}.wrap{padding:26px 28px 50px}.pageheading h1{font-size:27px}
.panel{padding:23px;border-radius:17px;margin-bottom:18px}.panel summary{padding:4px 2px}
.btn{min-height:40px;font-weight:700;transition:background .18s,box-shadow .18s,transform .18s}.btn:active{transform:translateY(1px)}.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #9abafb;outline-offset:2px}
.btn.small{font-size:12px;min-height:34px;padding:6px 11px;line-height:1.4}
.toolbar{gap:9px;margin-bottom:15px}.actions{gap:8px}
.table-wrap table{table-layout:auto}table td{overflow-wrap:anywhere}td .inline{vertical-align:middle}
.supplier-link-table .table-wrap{overflow-x:auto}.supplier-link-table table{min-width:900px}.supplier-link-table th:last-child{min-width:370px}.supplier-link-table td:last-child{min-width:370px;white-space:normal}.supplier-link-table td:last-child .inline{display:inline-flex;margin:3px!important}.supplier-link-table td:last-child .btn{margin:3px 2px}.supplier-link-table .status{display:inline-flex;align-items:center;white-space:normal;max-width:220px}
.link-copy-source{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;opacity:0!important;pointer-events:none!important;min-height:0!important}
.copy-link-btn{background:#e8f1ff;color:#164f9d;border-color:#bdd5fd}.copy-link-btn:hover{background:#dbeafe;box-shadow:0 7px 14px rgba(37,99,235,.12)}
.copyline{align-items:center;flex-wrap:wrap}.copyline input{flex:1;min-width:180px;direction:ltr;text-align:left}.copyline .btn{min-width:105px}
input[type=search]{background-image:none}
.ui-modal-backdrop{direction:rtl;padding:18px}.ui-modal{width:min(490px,100%);border-radius:20px;box-shadow:0 24px 70px rgba(13,32,60,.32)}.ui-modal-title-row{display:flex;align-items:center;gap:11px;padding:22px 24px 8px}.ui-modal-icon{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:13px;background:#fff0e7;color:#b45309;font-size:23px;font-weight:800}.ui-modal-head{padding:0;font-size:20px}.ui-modal-body{padding:3px 24px 24px;font-size:14px;color:#53647b}.ui-modal-actions{padding:15px 24px 20px;gap:9px;justify-content:flex-start}.ui-modal-actions .btn{min-width:105px}.ui-modal-actions .btn.danger{background:#dc2626;border-color:#dc2626;color:white}.ui-modal-actions .btn.danger:hover{background:#b91c1c}
.ui-toast-wrap{left:20px;bottom:20px;right:auto}.ui-toast{border-radius:13px}
@media(max-width:1050px){.sidebar{width:225px}.wrap{padding:22px 18px 45px}}
@media(max-width:760px){.sidebar{width:260px;right:-280px}.wrap{padding:18px 12px 40px}.pageheading h1{font-size:22px}.topbar{height:62px}.panel{padding:15px}.table-wrap{border-radius:12px}.btn{white-space:normal;text-align:center}.supplier-link-table table{min-width:800px}.supplier-link-table td:last-child{min-width:320px}.copyline input{min-width:140px}.ui-toast-wrap{left:10px;right:10px;bottom:12px}.ui-toast{width:100%;max-width:unset}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.ui-toast-wrap,.ui-modal-backdrop{display:none!important}}