/* SHAW ROAD LINE CRM — light, calm, business UI. Brand green sampled from the logo. */
:root{
  --brand:#008349; --brand-dark:#00693a; --brand-pale:#EAF5EF; --brand-line:#cfe6da;
  --ink:#222222; --muted:#68716C; --line:#E6E9E7; --bg:#F7F8F7; --card:#fff;
  --amber:#a86a00; --amber-bg:#fdf3dc; --red:#b42318; --red-bg:#fdecea; --blue:#1d5f8a; --blue-bg:#e8f2f9;
  --radius:10px;
  --bs-body-font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-color:var(--ink); --bs-body-bg:var(--bg); --bs-body-font-size:.925rem;
  --bs-link-color:var(--brand); --bs-link-hover-color:var(--brand-dark);
  --bs-border-color:var(--line); --bs-border-radius:8px;
}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{letter-spacing:-.01em}
a{text-decoration:none}
.text-muted{color:var(--muted)!important}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.text-end.num,.num.text-end{text-align:right}

/* ---------- shell */
.shell{display:flex;min-height:100vh}
.sidebar-col{display:contents}
.sidebar{--bs-offcanvas-width:280px;background:#fff;display:flex;flex-direction:column}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem .9rem}
.sidebar-brand img{width:150px;height:auto;display:block}
.sidebar-nav{padding:.4rem .7rem;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-link-x{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:8px;color:#3b4440;font-weight:500;position:relative}
.nav-link-x i{font-size:1.05rem;color:#7b857f;width:1.2rem;text-align:center}
.nav-link-x:hover{background:#f2f5f3;color:var(--ink)}
.nav-link-x.active{background:var(--brand-pale);color:var(--brand-dark)}
.nav-link-x.active i{color:var(--brand)}
.nav-link-x.active::before{content:"";position:absolute;left:-.7rem;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.sidebar-foot{padding:1rem 1.2rem;border-top:1px solid var(--line)}
@media (min-width:992px){
  .sidebar-col{display:block;width:248px;flex:0 0 248px;position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line)}
  .sidebar-col .sidebar{height:100%!important;width:100%!important;background:#fff!important}
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-title{font-weight:600;color:#3b4440}
.content{padding:1.4rem 1.25rem 3rem;max-width:1400px;width:100%;margin:0 auto}
@media (min-width:768px){.content{padding:1.6rem 2rem 3rem}}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem;margin-bottom:1.15rem}
.page-head h1{font-size:1.45rem;font-weight:650;margin:0}
.page-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.gst-banner{display:flex;gap:.7rem;align-items:flex-start;background:var(--amber-bg);color:#6b4500;border:1px solid #f1dca8;padding:.6rem .9rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.85rem}
.gst-banner i{font-size:1.1rem;margin-top:.1rem}

/* ---------- buttons / forms */
.btn{font-weight:550;border-radius:8px}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-outline-brand{border-color:var(--brand);color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.btn-light{background:#fff;border:1px solid var(--line)}
.btn-light:hover{background:#f3f5f4;border-color:#d5dad7}
.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus{box-shadow:0 0 0 .2rem rgba(0,131,73,.2);border-color:var(--brand)}
.form-control,.form-select{border-color:#d9dedb;border-radius:8px}
.form-label{font-weight:550;font-size:.82rem;color:#3b4440;margin-bottom:.25rem}
.form-text{color:var(--muted)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
textarea.form-control{min-height:2.6rem}
.req::after{content:" *";color:var(--red)}
@media (max-width:767px){.form-control,.form-select,.btn{min-height:44px}.btn-sm{min-height:38px}}

/* ---------- cards */
.card-x{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.card-x>.card-h{padding:.85rem 1.1rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:600}
.card-x>.card-b{padding:1.1rem}
.section-title{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:650;margin:0 0 .7rem}
.stat{padding:1rem 1.1rem;display:block;color:inherit;height:100%;transition:border-color .15s,box-shadow .15s}
a.stat:hover{border-color:var(--brand-line);box-shadow:0 2px 10px rgba(0,60,30,.06)}
.stat .lbl{font-size:.78rem;color:var(--muted);font-weight:550;display:flex;align-items:center;gap:.4rem}
.stat .val{font-size:1.5rem;font-weight:650;margin-top:.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .sub{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.stat .ico{width:1.7rem;height:1.7rem;border-radius:7px;background:var(--brand-pale);color:var(--brand);display:inline-grid;place-items:center;font-size:.9rem}
.stat.neg .val{color:var(--red)}

/* ---------- tables */
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table{--bs-table-bg:transparent;margin:0}
.table>thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;background:#fafbfa;border-bottom:1px solid var(--line);padding:.65rem .85rem;white-space:nowrap}
.table>tbody td{padding:.7rem .85rem;vertical-align:middle;border-color:var(--line)}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:#f8fbf9}
tr.clickable{cursor:pointer}
.sort-link{color:inherit}.sort-link:hover{color:var(--brand)}
.table-responsive{-webkit-overflow-scrolling:touch}
.row-actions{display:flex;gap:.25rem;justify-content:flex-end;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:#fff}
.filters .form-control,.filters .form-select{min-width:9rem}
.filters .grow{flex:1 1 14rem}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-state i{font-size:2.2rem;color:#b9c4be;display:block;margin-bottom:.5rem}
.empty-state h2{font-size:1.1rem;color:var(--ink)}

/* ---------- badges */
.badge-soft{display:inline-block;padding:.18rem .55rem;border-radius:20px;font-size:.72rem;font-weight:650;line-height:1.35;white-space:nowrap}
.badge-secondary{background:#eef0ef;color:#555f59}
.badge-success{background:var(--brand-pale);color:var(--brand-dark)}
.badge-warning{background:var(--amber-bg);color:var(--amber)}
.badge-danger{background:var(--red-bg);color:var(--red)}
.badge-info{background:var(--blue-bg);color:var(--blue)}
.badge-brand{background:var(--brand);color:#fff}

/* ---------- line editor */
.line-head.svc,.line-row.svc{grid-template-columns:minmax(220px,3.4fr) 130px 120px 100px 120px 34px}
.line-row.goods{grid-template-columns:minmax(200px,3fr) 90px 90px 110px 90px minmax(100px,1.2fr) 34px}
.line-editor{container-type:inline-size;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.line-head,.line-row{display:grid;gap:.5rem;align-items:start;padding:.6rem .75rem;grid-template-columns:minmax(220px,3.2fr) 90px 80px 110px 120px 75px 90px 120px 34px}
.line-head{background:#fafbfa;border-bottom:1px solid var(--line);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;border-radius:var(--radius) var(--radius) 0 0}
.line-row{border-bottom:1px solid var(--line)}
.line-row:last-child{border-bottom:0}
.line-row .form-control,.line-row .form-select{font-size:.85rem;padding:.35rem .5rem}
.line-row .line-total{text-align:right;font-weight:600;padding-top:.4rem;font-variant-numeric:tabular-nums}
.line-row .m-lbl{display:none}
@container (max-width:1000px){
  .line-row.svc{grid-template-columns:repeat(3,1fr)}
  .line-row.goods{grid-template-columns:repeat(3,1fr)}
  .line-head{display:none}
  .line-row{grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.9rem}
  .line-row>.c-desc{grid-column:1/-1}
  .line-row .m-lbl{display:block;font-size:.7rem;color:var(--muted);font-weight:600;margin-bottom:.1rem}
  .line-row .line-total{grid-column:1/-1;text-align:right;padding-top:0}
  .line-row .c-del{grid-column:1/-1;text-align:right}
}
@container (max-width:520px){ .line-row,.line-row.goods,.line-row.svc{grid-template-columns:1fr 1fr} }
.totals-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.totals-box .tr{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;font-variant-numeric:tabular-nums}
.totals-box .tr.sub{color:var(--muted);font-size:.86rem}
.totals-box .tr.grand{border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.6rem;font-size:1.2rem;font-weight:700}
.totals-box .tr.grand span:last-child{color:var(--brand-dark)}

/* ---------- combo (searchable dropdown) */
.combo{position:relative}
.combo-list{position:absolute;z-index:1055;left:0;right:0;top:100%;margin-top:3px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:280px;overflow:auto;display:none;min-width:240px}
.combo-list.open{display:block}
.combo-item{padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid #f1f3f2;font-size:.88rem}
.combo-item:last-child{border-bottom:0}
.combo-item:hover,.combo-item.hi{background:var(--brand-pale)}
.combo-item small{display:block;color:var(--muted)}
.combo-empty{padding:.7rem;color:var(--muted);font-size:.85rem}

/* ---------- detail pages */
.kv{display:grid;grid-template-columns:140px 1fr;gap:.35rem .8rem;font-size:.9rem}
.kv dt{color:var(--muted);font-weight:500;margin:0}.kv dd{margin:0;word-break:break-word}
@media (max-width:575px){.kv{grid-template-columns:1fr}.kv dt{margin-top:.5rem;font-size:.78rem}}
.paid-stamp{display:inline-block;border:2px solid var(--brand);color:var(--brand);padding:.1rem .7rem;border-radius:6px;font-weight:800;letter-spacing:.12em;transform:rotate(-4deg)}
.pre-wrap{white-space:pre-wrap}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:.45rem 0 .45rem 1rem;border-left:2px solid var(--line);font-size:.85rem;position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:.8rem;width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ---------- charts */
.chart-wrap{width:100%;min-height:200px}
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--muted);margin-top:.5rem}
.legend i{display:inline-block;width:.65rem;height:.65rem;border-radius:2px;margin-right:.3rem}
.chart-tip{position:fixed;pointer-events:none;background:#222;color:#fff;font-size:.78rem;padding:.35rem .55rem;border-radius:6px;z-index:2000;display:none;white-space:nowrap}

/* ---------- login */
body.bare{background:linear-gradient(180deg,#fff,var(--bg))}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem}
.login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:2rem 1.8rem;box-shadow:0 10px 40px rgba(0,50,25,.07)}
.login-logo{width:190px;display:block;margin:0 auto 1.4rem}
.login-title{font-size:1.25rem;font-weight:650;text-align:center;margin:0 0 .15rem}
.login-card .text-muted{text-align:center}

/* ---------- misc */
.pill-tabs{display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.pill-tabs a{padding:.55rem .95rem;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.pill-tabs a.active{color:var(--brand-dark);border-color:var(--brand)}
.pill-tabs a:hover{color:var(--ink)}
.modal-content{border-radius:12px;border:0;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.dropdown-menu{border-color:var(--line);border-radius:10px}
.dropdown-item:active{background:var(--brand)}
.page-link{color:var(--brand)}.page-item.active .page-link{background:var(--brand);border-color:var(--brand)}
.alert{border-radius:var(--radius)}
.pdf-frame{width:100%;height:80vh;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
@media print{.sidebar-col,.topbar,.page-actions,.gst-banner{display:none!important}.content{padding:0}}

/* ================= mobile: tables become cards, filters compact ================= */
@media (max-width:767.98px){
  html{font-size:15.5px}
  .content{padding:.85rem .8rem 5rem}
  .page-head h1{font-size:1.25rem}
  .page-head .btn{padding:.55rem .9rem}
  .btn{min-height:42px}
  .btn-sm{min-height:36px}
  .form-control,.form-select{min-height:44px;font-size:16px}
  textarea.form-control{min-height:0}
  .table-responsive{overflow:visible}
  .m-stack thead{display:none}
  .m-stack,.m-stack tbody{display:block;width:100%}
  .m-stack tr{display:block;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
  .m-stack tr:last-child{border-bottom:0}
  .m-stack td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border:0!important;padding:.18rem 0!important;text-align:right!important;white-space:normal!important;font-size:.9rem}
  .m-stack td[data-label]::before{content:attr(data-label);flex:0 0 36%;max-width:36%;text-align:left;color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
  .m-stack td.m-primary{display:block;text-align:left!important;font-weight:650;font-size:1rem;padding-bottom:.3rem!important}
  .m-stack td.m-primary::before{display:none}
  .m-stack td.m-hide,.m-stack td:empty{display:none}
  .m-stack td:not([data-label]):not(.m-primary){justify-content:flex-start}
  .m-stack td>.dropdown,.m-stack td .btn-group{margin-left:auto}
  .filters{gap:.5rem;padding:.75rem}
  .filters>div{flex:1 1 calc(50% - .5rem);min-width:0}
  .filters .grow{flex:1 1 100%}
  .filters .form-control,.filters .form-select{min-width:0;width:100%}
  .filters>div:has(button),.filters>div:has(.btn){flex:0 0 auto}
  .stat .val,.stat .v{font-size:1.35rem}
  .modal-dialog{margin:.6rem}
  .offcanvas{width:84vw!important}
  .totals-box{padding:.85rem}
}

@media (max-width:767.98px){.badge{white-space:normal}.table td code{word-break:break-all}}

.route-box{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center;border:1.5px solid var(--brand);background:var(--brand-pale);border-radius:12px;padding:.85rem}
.route-box .form-label{font-weight:650;margin-bottom:.3rem}
.route-arrow{font-size:1.6rem;color:var(--brand)}
.goods-row{display:grid;grid-template-columns:1fr 110px 40px;gap:.5rem;margin-bottom:.5rem}
.route-view{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:stretch}
.route-view .rv{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;background:#fff}
.route-view .rv small{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.15rem}
.route-view .ra{align-self:center;color:var(--brand);font-size:1.4rem}
@media (max-width:767.98px){
  .route-box,.route-view{grid-template-columns:1fr}
  .route-arrow,.route-view .ra{text-align:center;transform:rotate(90deg);height:1.6rem;line-height:1.6rem}
  .goods-row{grid-template-columns:1fr 84px 40px}
}

/* ---- account details card (settings preview) */
.acct-card{border:1px solid var(--brand-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,131,73,.08)}
.acct-head{background:linear-gradient(135deg,#008349,#00693a);color:#fff;padding:.7rem 1rem;font-weight:700;font-size:.78rem;letter-spacing:.08em;display:flex;align-items:center;gap:.5rem}
.acct-head i{font-size:1.05rem}.acct-head span{margin-left:auto;font-weight:500;letter-spacing:0;opacity:.85;font-size:.75rem}
.acct-body{padding:1rem;background:linear-gradient(180deg,#f4faf7,#fff)}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem}
.acct-f label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .1rem}
.acct-f b{font-size:.92rem;word-break:break-word}.acct-f.wide{grid-column:1/-1}.acct-f.empty{display:none}
.acct-no{font-size:1.2rem!important;letter-spacing:.08em;color:var(--brand-dark)}

.qr-thumb{width:96px;height:96px;object-fit:contain;border:1px solid var(--brand-line);border-radius:10px;background:#fff;padding:4px}
.acct-qr{margin-top:.9rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;border:1px solid var(--brand-line);border-radius:12px;background:#fff;padding:.6rem;width:fit-content}
.acct-qr img{width:130px;height:130px;object-fit:contain}.acct-qr span{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--brand)}