:root{
--ink:#182d37;
--muted:#73828a;
--line:#e3e9e8;
--bg:#f5f7f8;
--accent:#136c60;
--soft:#eaf4f0}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font:15px/1.55 "Segoe UI",Arial,sans-serif}
a{
color:var(--accent);
text-decoration:none}
button,input,textarea{
font:inherit}
button,a,input,textarea{
touch-action:manipulation}
button{
cursor:pointer}
a:focus-visible,button:focus-visible,input:focus,textarea:focus{
outline:3px solid #9bd9ca;
outline-offset:2px}
input,textarea{
width:100%;
min-width:0;
border:1px solid #d8e0e1;
border-radius:8px;
padding:12px 14px;
background:#fff;
color:var(--ink)}
textarea{
resize:vertical}
input[type=checkbox],input[type=radio]{
width:18px;
height:18px;
accent-color:var(--accent);
flex-shrink:0}
h1,h2,p{
margin-top:0}
h1{
font-size:30px;
line-height:1.25;
font-weight:650;
letter-spacing:-.8px;
margin-bottom:10px;
overflow-wrap:anywhere}
h2{
font-size:18px;
font-weight:650;
margin-bottom:18px}
h2>span{
margin-left:12px}
small,.small{
font-size:12px}
.muted{
color:var(--muted)}
.eyebrow{
display:block;
color:var(--accent);
font-size:11px;
font-weight:750;
letter-spacing:1.8px;
margin-bottom:12px}
.topbar{
background:#fff;
border-bottom:1px solid var(--line)}
.nav{
max-width:1180px;
margin:auto;
padding:20px 28px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px}
.brand{
display:flex;
gap:12px;
align-items:center;
color:var(--ink);
font-weight:650;
font-size:16px}
.brand small{
display:block;
color:var(--muted);
font-size:11px;
font-weight:400}
.brand-icon{
display:grid;
place-items:center;
background:var(--accent);
color:white;
width:38px;
height:40px;
border-radius:10px;
font-size:24px}
.text-button{
background:none;
border:0;
color:var(--muted)}
.secure-label{
font-size:12px;
color:var(--muted)}
.container{
max-width:1180px;
padding:38px 28px;
margin:auto}
.vendor-container{
max-width:760px;
padding:30px 20px;
margin:auto}
.page-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:26px}
.page-heading p{
margin-bottom:0}
.button{
display:inline-flex;
justify-content:center;
align-items:center;
gap:8px;
padding:12px 19px;
border:1px solid transparent;
border-radius:8px;
background:var(--accent);
color:#fff;
font-weight:600;
font-size:14px;
min-height:46px;
white-space:normal;
text-align:center}
.button:hover{
filter:brightness(.95)}
.secondary{
background:#fff;
border-color:#dbe3e2;
color:var(--ink)}
.compact{
padding:7px 12px;
min-height:36px;
font-size:12px}
.wide{
width:100%}
.large{
font-size:16px;
min-height:54px}
.card{
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:26px;
margin-bottom:22px;
box-shadow:0 2px 3px #142e3403;
min-width:0}
.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-bottom:28px}
.stat{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
padding:19px 22px;
display:flex;
justify-content:space-between;
align-items:center}
.stat span{
font-size:13px;
color:var(--muted)}
.stat strong{
font-size:26px;
font-weight:600}
.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:20px}
.section-heading h2{
margin:0}
.count{
display:inline-block;
background:#eff3f3;
border-radius:6px;
font-size:12px;
padding:2px 7px}
.search{
display:flex;
gap:8px;
align-items:center}
.search input{
max-width:270px;
font-size:13px}
.dashboard{
padding:24px 0 0;
overflow:hidden}
.dashboard>.section-heading{
padding:0 24px}
.table-wrap{
width:100%}
table{
border-collapse:collapse;
width:100%;
font-size:13px;
text-align:left}
th{
font-weight:500;
color:var(--muted);
background:#fafbfc;
font-size:11px;
padding:13px 22px}
td{
padding:19px 22px;
border-top:1px solid var(--line);
overflow-wrap:anywhere}
td small{
display:block;
color:var(--muted);
margin-top:4px}
.job-link{
font-weight:650;
color:var(--ink)}
.badge{
display:inline-block;
padding:5px 10px;
border-radius:20px;
font-size:11px;
font-weight:600;
white-space:nowrap}
.draft{
background:#eef1f3;
color:#6b7781}
.sent{
background:#eef2ff;
color:#5a6aaa}
.quotation-received{
background:#e6f4ed;
color:#257452}
.closed{
background:#eeeef0;
color:#73727a}
.empty{
text-align:center;
padding:60px 24px 70px}
.empty-icon{
font-size:30px;
color:var(--accent);
margin-bottom:16px}
.empty h2{
margin-bottom:8px}
.form-grid,.details{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px 24px}
.full{
grid-column:1/-1}
label{
display:block;
font-size:13px;
font-weight:600;
margin-bottom:15px}
label input,label textarea{
display:block;
margin-top:7px;
font-size:16px;
font-weight:400}
.form-grid label{
margin:0}
.check{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-weight:500}
.check input{
margin:0}
.checkbox-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px}
.upload{
padding:22px;
background:#fafcfc;
border:1px dashed #b9cfca;
border-radius:9px;
color:var(--muted)}
.upload input{
border:0;
padding:0;
background:transparent;
font-size:13px}
.form-actions,.actions{
display:flex;
gap:12px;
justify-content:flex-end;
flex-wrap:wrap}
.back{
display:inline-block;
margin-bottom:22px;
font-size:13px}
.job-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px}
.job-meta span,.vendor-meta span{
display:block;
color:var(--muted);
font-size:12px;
margin-bottom:5px}
.job-meta strong{
display:block;
font-size:19px}
.job-meta small{
font-weight:400;
color:var(--muted)}
.share{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:14px}
.share h2,.share p{
margin-bottom:5px}
.share .full{
width:100%}
.copy-row{
display:flex;
gap:8px;
width:100%}
.copy-row input{
flex:1;
font-size:13px}
.whatsapp{
background:#21804d}
.view-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:start}
.details{
margin:0 0 15px}
.details dt{
color:var(--muted);
font-size:12px;
margin-bottom:5px}
.details dd{
margin:0;
white-space:normal;
overflow-wrap:anywhere}
.breakup>div{
display:flex;
justify-content:space-between;
gap:15px;
padding:12px 0;
border-bottom:1px solid #edf0f0}
.breakup span{
overflow-wrap:anywhere}
.total-box{
background:var(--soft);
border:1px solid #d6e8e0;
border-radius:9px;
padding:19px 21px;
margin:22px 0;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px}
.total-box span{
display:block;
font-size:11px;
color:#5d7b72}
.total-box strong{
display:block;
font-size:30px;
line-height:1.4;
color:var(--accent);
overflow-wrap:anywhere}
.total-box b{
display:block;
font-size:18px;
color:var(--accent)}
.vendor-heading{
padding:12px 6px 25px}
.vendor-heading h1{
font-size:32px}
.vendor-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
border-top:1px solid var(--line);
padding-top:20px}
.charge-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:3px 18px}
.amount-input{
display:flex;
align-items:center;
border:1px solid #d8e0e1;
border-radius:8px;
margin-top:7px;
padding-left:14px}
.amount-input>span{
color:var(--muted);
font-size:18px}
.amount-input input{
border:0;
margin:0;
font-size:21px;
padding:10px}
.extra-row{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 36px;
gap:8px;
margin-bottom:12px}
.remove-charge{
border:0;
background:#fff1f0;
color:#ad5550;
border-radius:8px;
font-size:24px}
fieldset{
border:0;
padding:0;
margin:20px 0}
legend{
font-size:13px;
font-weight:600;
margin-bottom:12px}
.radio-row{
display:flex;
gap:20px;
flex-wrap:wrap}
.submit-panel{
background:white;
border:1px solid var(--line);
border-radius:12px;
padding:0 24px 12px}
.confirmation{
font-size:13px;
margin:18px 0}
.center{
text-align:center;
margin:12px 0 0}
.success{
text-align:center;
border-color:#c6e3d4;
background:#f6fcf8}
.success h1{
font-size:25px}
.success-icon{
display:inline-grid;
place-items:center;
width:45px;
height:45px;
border-radius:50%;
background:#dfefe6;
color:#237853;
font-size:25px;
margin-bottom:16px}
.login{
max-width:470px;
margin:35px auto}
.login h1{
font-size:28px}
.alert{
background:#fff1ee;
border:1px solid #f3c9bf;
color:#993e31;
border-radius:8px;
padding:14px;
margin-bottom:20px}
.footer{
text-align:center;
font-size:11px;
color:#97a1a5;
padding:25px}
.actions form{
margin:0}
@media(max-width:800px){
.container{
padding:26px 18px}
.page-heading{
align-items:flex-start;
flex-direction:column}
h1{
font-size:26px}
.stats{
gap:10px;
grid-template-columns:1fr 1fr}
.section-heading{
align-items:flex-start;
flex-direction:column}
.search{
width:100%}
.search input{
max-width:none;
flex:1;
min-width:0}
.view-grid{
grid-template-columns:1fr;
gap:0}
.job-meta{
gap:14px}
.job-meta strong{
font-size:16px}
table thead{
display:none}
table,tbody,tr,td{
display:block}
tr{
border-top:1px solid var(--line);
padding:14px 20px}
td{
border:0;
padding:6px 0;
display:flex;
justify-content:space-between;
gap:15px;
text-align:right}
td::before{
content:attr(data-label);
font-size:12px;
color:var(--muted);
text-align:left}
td:first-child{
display:block;
text-align:left}
td:first-child::before{
display:none}
td small{
display:none}
td:first-child small{
display:block}
.copy-row{
flex-wrap:wrap}
.copy-row input{
flex-basis:100%}
.nav{
padding:16px 18px}
.secure-label{
display:none}
}
@media(max-width:480px){
.vendor-container{
padding:24px 14px}
.brand{
font-size:14px}
.brand small{
font-size:10px}
.card{
padding:20px 17px;
border-radius:10px}
.dashboard{
padding:20px 0 0}
.dashboard>.section-heading{
padding:0 17px}
.form-grid{
grid-template-columns:1fr}
.checkbox-grid{
grid-template-columns:1fr 1fr}
.job-meta{
grid-template-columns:1fr 1fr}
.job-meta>div:last-child{
grid-column:1/-1}
.vendor-heading h1{
font-size:28px}
.charge-grid{
gap:0 12px}
.radio-row{
gap:12px;
font-size:12px}
.radio-row .check{
font-size:12px}
.total-box{
padding:16px 13px}
.total-box strong{
font-size:27px}
.total-box b{
font-size:16px}
.submit-panel{
padding:0 16px 12px}
.stat{
padding:15px}
.stat span{
font-size:12px}
.details{
gap:18px}
.footer{
padding:20px 14px}
.login{
margin:10px 0}
.extra-row input{
padding:10px 8px;
font-size:14px}
.extra-row{
gap:6px;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 32px}
.actions{
justify-content:flex-start}
}
@media print{
body{
background:white;
color:#111;
font-size:11px}
.topbar,.footer,.no-print,.back{
display:none!important}
.container{
max-width:none;
padding:0}
.page-heading{
margin-bottom:15px}
h1{
font-size:23px}
.card{
box-shadow:none;
border:1px solid #ccc;
padding:15px;
margin-bottom:16px;
break-inside:avoid}
.view-grid{
display:block}
.details{
gap:10px 20px}
.button{
display:none}
.total-box{
background:#f5f5f5!important;
border-color:#ccc}
.total-box strong{
color:#111;
font-size:24px}
.job-meta{
grid-template-columns:repeat(3,1fr)}
.badge{
border:1px solid #ddd}
.page-heading .muted{
color:#444}
a{
color:#111}
@page{
size:A4;
margin:15mm}
}