/* Vtiger 8 (layouts/v7) look-alike. Colours taken from v7 skins/style.css */
:root{--vt-nav:#2C3B49;--vt-nav2:#596875;--vt-accent:#EF5E29;--vt-pink:#d1026c;--vt-green:#51a351;--vt-border:#DDDDDD;--vt-bg:#FBFBFB;--vt-text:#333333;--vt-muted:#555555}
*{box-sizing:border-box}
body{margin:0;font-family:'Open Sans','OpenSans-Regular',"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;color:var(--vt-text);background:var(--vt-bg)}
a{color:#15c;text-decoration:none}
.topbar{position:fixed;top:0;left:0;right:0;height:42px;background:#fff;border-bottom:1px solid var(--vt-border);display:flex;align-items:center;z-index:10}
.topbar .apps{width:42px;height:42px;background:var(--vt-nav);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.topbar .brand{font-family:Oswald,'OpenSans-Semibold',sans-serif;font-size:16px;padding:0 15px;color:var(--vt-nav);text-transform:uppercase;letter-spacing:.5px}
.topbar .search{flex:1;max-width:420px}
.topbar .search input{width:100%;padding:5px 8px;border:1px solid var(--vt-border);border-radius:2px}
.topbar .user{margin-left:auto;padding:0 15px;color:var(--vt-muted)}
.sidenav{position:fixed;top:42px;bottom:0;left:0;width:180px;background:var(--vt-nav);color:#fff;padding-top:8px}
.sidenav a{display:block;color:#fff;padding:9px 15px;border-left:3px solid transparent}
.sidenav a:hover,.sidenav a.active{background:var(--vt-nav2);border-left-color:var(--vt-accent)}
.main{margin:42px 0 0 180px;padding:15px}
.module-header{background:#fff;border:1px solid var(--vt-border);padding:10px 15px;margin-bottom:12px;display:flex;align-items:center}
.module-header h1{font-family:'OpenSans-Semibold',sans-serif;font-size:16px;margin:0;font-weight:600}
.btn{display:inline-block;padding:6px 12px;border:1px solid var(--vt-border);background:#fff;border-radius:2px;cursor:pointer;font-size:12px}
.btn-primary{background:var(--vt-accent);border-color:var(--vt-accent);color:#fff}
.btn-success{background:var(--vt-green);border-color:var(--vt-green);color:#fff}
.listview-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--vt-border)}
.listview-table th{background:#f9f9f9;text-align:left;padding:8px;border-bottom:1px solid var(--vt-border);font-weight:600;color:var(--vt-muted)}
.listview-table td{padding:8px;border-bottom:1px solid #eee;color:#222}
.listview-table tr:hover td{background:#f5f8fa}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.card{background:#fff;border:1px solid var(--vt-border);padding:15px}
.card .num{font-size:24px;color:var(--vt-nav)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--vt-nav)}
.login-box{background:#fff;width:340px;padding:30px;border-top:4px solid var(--vt-accent)}
.login-box h2{font-family:Oswald,sans-serif;margin:0 0 20px;color:var(--vt-nav)}
.login-box input{width:100%;padding:8px;margin:4px 0 12px;border:1px solid var(--vt-border)}
.muted{color:#7d7e7d}
.r{text-align:right}
.brand{text-decoration:none}
.linkbtn{background:none;border:0;color:#15c;cursor:pointer;font-size:12px;padding:0}
.badge{background:var(--vt-pink);color:#fff;padding:1px 6px;border-radius:2px;font-size:10px;margin-right:6px}
.navhead{color:#9fb0c0;font-size:10px;text-transform:uppercase;padding:14px 15px 4px;letter-spacing:.5px}
.navsoon{display:block;color:#7f8e9c;padding:9px 15px;border-left:3px solid transparent;cursor:default}
.alert{padding:8px 12px;margin-bottom:12px;border:1px solid}
.alert.ok{background:#eef7ee;border-color:#51a351;color:#2d662d}
.alert.err{background:#fdeef5;border-color:#d1026c;color:#8a0147}
.split{display:flex;gap:12px;align-items:flex-start}.grow{flex:1;min-width:0}
.groups{width:200px;background:#fff;border:1px solid var(--vt-border)}
.groups .ghead{padding:8px 10px;background:#f9f9f9;border-bottom:1px solid var(--vt-border);font-weight:600;color:var(--vt-muted)}
.groups a{display:flex;justify-content:space-between;padding:7px 10px;color:var(--vt-text);border-left:3px solid transparent}
.groups a.active,.groups a:hover{background:#f5f8fa;border-left-color:var(--vt-accent)}
form.inline{display:inline-flex;gap:4px;align-items:center}
form.inline input{padding:4px 6px;border:1px solid var(--vt-border)}
input.qty{width:50px;text-align:right}
.btn-sm{padding:3px 8px;font-size:11px}
.pager{padding:8px 0;color:var(--vt-muted);display:flex;gap:6px;align-items:center}
.tag{font-size:10px;padding:1px 4px;border-radius:2px;margin-left:4px}
.tag-special{background:#fff0e9;color:#EF5E29;border:1px solid #EF5E29}
.tag-group{background:#eef7ee;color:#2d662d;border:1px solid #51a351}
.stock-ok{color:#2d662d;font-weight:600}.stock-no{color:#999}
table.detail{background:#fff;border:1px solid var(--vt-border);border-collapse:collapse;width:100%}
table.detail th{width:180px;text-align:left;background:#f9f9f9;color:var(--vt-muted);font-weight:600}
table.detail th,table.detail td{padding:8px;border-bottom:1px solid #eee;vertical-align:top}
.form label{display:block;margin-top:8px;color:var(--vt-muted)}
.form input{width:100%;padding:6px;border:1px solid var(--vt-border)}
.form .btn{margin-top:12px}
.chk{display:flex!important;gap:6px;align-items:center}.chk input{width:auto!important;margin:0!important}
.login-box label{display:block;color:var(--vt-muted)}
.row-err td{background:#fdeef5}
h3{font-family:'OpenSans-Semibold',sans-serif;font-size:13px;margin:16px 0 8px}
.listview-table tfoot th{background:#fff}
/* checkout / orders */
.panel{background:#fff;border:1px solid #dde1e6;border-radius:3px;padding:10px 14px;margin-bottom:14px}
.panel h2{font-size:14px;margin:0 0 8px;color:#2c3b49}
.form-table th{text-align:left;vertical-align:top;padding:5px 12px 5px 0;width:190px;font-weight:600;color:#555}
.form-table td{padding:5px 0}
.form-table input,.form-table textarea{padding:4px 6px;border:1px solid #ccc;border-radius:2px;margin:0 4px 4px 0;font:inherit}
.status{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#eee}
.status-sent{background:#dff0d8;color:#2b6a2b}.status-queued{background:#fcf8e3;color:#8a6d3b}.status-failed{background:#fcf8e3;color:#8a6d3b}
/* Phase 2b: branding + footer + totals */
.topbar .brand{display:flex;align-items:center;gap:8px}
.brand-logo{height:30px;width:auto;background:#fff;padding:3px 6px;border-radius:3px}
.brand-text{font-weight:600}
.login-logo{display:block;max-height:50px;max-width:100%;margin:0 auto 10px}
.site-footer{clear:both;text-align:center;padding:14px 10px;margin-top:20px;border-top:1px solid #ddd;color:#555;font-size:13px;background:#fafafa}
.site-footer a{color:inherit}
tr.grand th{font-size:1.05em;border-top:2px solid #999}
.status-sending{background:#fff3cd;color:#7a5b00}
.alert .actions form{margin-right:6px}
.main + .site-footer{margin-left:180px}
.status-queued,.status-failed{background:#f2dede;color:#a94442}
.vat-prov{color:#a94442;font-weight:normal}
.status-received{background:#fcf8e3;color:#8a6d3b}.status-confirmed{background:#d9edf7;color:#31708f}.status-part{background:#fff3cd;color:#7a5b00}.status-shipped{background:#dff0d8;color:#2b6a2b}.status-cancelled{background:#eee;color:#777}
.filters input,.filters select{padding:4px;border:1px solid var(--vt-border)}
@media print{.topbar,.sidenav,.btn,.filters,footer{display:none!important}}
/* Staff admin area (separate layout + login) */
.topbar.admin-bar .apps{background:#7a1f3d}
.topbar .brand-text.admin-text{color:#7a1f3d}
.badge.admin-badge{background:#7a1f3d;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;letter-spacing:.5px;margin-right:6px}
.login-box.admin-login{border-top-color:#7a1f3d}
.login-box.admin-login h2{color:#7a1f3d}
.admin-home-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.admin-home-links a.card{display:block;text-decoration:none;color:inherit}
.admin-home-links a.card strong{display:block;color:var(--vt-nav);margin-bottom:4px}