*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
:root{--sidebar:220px;--navy:#082668;--navy2:#0d3d93;--blue:#0759ef;--blue2:#0b67ff;--page:#eaf3ff;--line:#d6e2f2;--text:#122344;--muted:#6c7b98;--white:#fff;--green:#138c3e;--orange:#da8600;--red:#e2252d;--shadow:0 8px 24px rgba(28,65,121,.10)}
html,body{width:100%;height:100%;background:var(--page);color:var(--text);font-size:16px;zoom:1}
body{overflow:hidden}button,input,select,textarea{font:inherit}button,a{cursor:pointer}a{text-decoration:none;color:inherit}input,select,textarea{outline:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);height:100vh;padding:12px 10px;background:linear-gradient(180deg,#092a73,#06235e);overflow-y:auto;z-index:100;box-shadow:6px 0 22px rgba(5,29,83,.22)}
.profile{text-align:center;padding:2px 8px 16px}.profile img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #ffb100;background:#fff}.profile h2{margin-top:10px;color:#fff;font-size:15px;line-height:1.35}.profile h3{margin-top:5px;color:#ffe20d;font-size:12px;font-style:italic}
.menu{display:flex;flex-direction:column;gap:7px}.menu a{min-height:43px;padding:10px 12px;border-radius:11px;display:flex;align-items:center;gap:10px;background:rgba(24,72,159,.72);color:#fff;font-size:13px;font-weight:650;transition:.18s}.menu a i{width:20px;text-align:center;font-size:14px}.menu a:hover,.menu a.active{background:linear-gradient(90deg,#1556ed,#2872ff);transform:translateX(2px)}
.main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));height:100vh;padding:8px 12px 10px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.topbar{flex:0 0 62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 15px;background:#fff;border:1px solid #dfe8f5;border-radius:15px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand img{width:80px;height:46px;object-fit:contain}.brand h1{font-size:20px;color:#123783;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;align-items:center;gap:10px}.outline-btn,.primary-top-btn{height:38px;padding:0 14px;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750}.outline-btn{border:1px solid #9ebcf6;color:#084dce;background:#fff}.primary-top-btn{background:var(--blue);color:#fff}.bell-btn{width:42px;height:42px;border:0;border-radius:11px;background:#fff;color:#17305f;box-shadow:0 4px 13px rgba(20,50,100,.15);position:relative}.bell-btn span{position:absolute;right:3px;top:2px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e40012;color:#fff;font-size:9px;font-weight:800}
.alert{flex:0 0 auto;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700}.alert.success{background:#e7f8ed;color:#0f7b34;border:1px solid #afe1bf}.alert.error{background:#fff0ef;color:#a42820;border:1px solid #f1bcb8}
.job-workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.24fr) minmax(540px,1fr);gap:7px}.panel{min-width:0;min-height:0;background:#fff;border:1px solid #dce6f4;border-radius:13px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.panel-title{flex:0 0 45px;padding:7px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel-title>div{display:flex;align-items:center;gap:9px}.panel-title>div>i{width:31px;height:31px;border-radius:7px;background:var(--blue);color:#fff;display:grid;place-items:center}.panel-title h2{font-size:14px;color:#0b3180;letter-spacing:.2px}.summary-title button{height:31px;padding:0 12px;border:0;border-radius:7px;background:var(--blue);color:#fff;font-size:10px;font-weight:750}.summary-title button.active{background:#526173}.panel-scroll,.summary-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#afc3e5 transparent}.panel-scroll{padding:8px 11px 10px}.summary-scroll{padding:7px 11px 10px}
.form-section{padding:5px 0 7px;border-bottom:1px solid #dce6f4}.form-section h3{margin:0 0 8px;color:#0755dc;font-size:11px;font-weight:850}.form-section h3 span{margin-right:3px}.client-layout{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:12px}.client-fields{min-width:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:6px 11px}.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.textareas{margin-top:7px}.notes-label{display:block;width:64%;margin-top:7px}
label{font-size:10px;font-weight:750;color:#223657}label b{color:#e4252b}label input,label select,label textarea{display:block;width:100%;margin-top:4px;border:1px solid #cbd8e9;border-radius:6px;background:#fff;color:#17243e;font-size:11px;padding:7px 9px}label input,label select{height:33px}label textarea{height:51px;resize:vertical;line-height:1.35}label input:focus,label select:focus,label textarea:focus{border-color:#0a63f5;box-shadow:0 0 0 2px rgba(10,99,245,.08)}label input:disabled,label select:disabled,label textarea:disabled{background:#f3f6fa;color:#57677f;cursor:not-allowed}label small{display:block;margin-top:3px;color:#8a96aa;font-size:8px;font-weight:500}
.upload-card{display:flex;flex-direction:column;align-items:center;padding:8px;border:1px solid #c7d7eb;border-radius:7px;background:#fbfdff}.upload-card strong{font-size:9px}.upload-card small{font-size:8px;margin-top:5px}.upload-card input{display:none}.upload-preview{width:100%;height:122px;margin-top:7px;border:1px dashed #9aaac2;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background-position:center;background-size:cover;background-repeat:no-repeat;color:#36527d}.upload-preview i{font-size:25px;color:var(--blue)}.upload-preview em{font-style:normal;font-size:9px}.upload-preview.has-image i,.upload-preview.has-image em{display:none}
.status-help{min-height:13px;color:#eb8900!important;text-align:center;font-weight:700!important;font-size:8px!important}.payment-section{border-bottom:0}.payment-grid{display:grid;grid-template-columns:1.08fr .9fr .9fr 1.15fr;gap:8px 10px;align-items:start;padding:7px 8px;border:1px solid #cfe0f8;border-radius:8px;background:#f8fbff}.diagnosis-box{grid-row:span 2;padding-right:7px;border-right:1px solid #d7e3f3}.diagnosis-box h4,.payment-summary-box h4{font-size:9px;margin-bottom:7px}.diagnosis-box label{display:flex;align-items:center;gap:6px;margin:7px 0;font-size:9px}.diagnosis-box input{width:auto;height:auto;margin:0;accent-color:var(--blue)}.diagnosis-box b{color:#152b57}.money-input,.money-display{height:33px;margin-top:4px;border:1px solid #cbd8e9;border-radius:6px;background:#fff;display:flex;align-items:center;padding:0 8px;gap:7px}.money-input input{height:29px!important;border:0!important;margin:0!important;padding:0!important;text-align:right;box-shadow:none!important}.money-display strong{margin-left:auto;font-size:11px}.money-display.danger{background:#fff8f8}.money-display.danger,.money-display.danger strong{color:var(--red)}.payment-summary-box{grid-row:span 2;padding:8px 10px;border:1px solid #cbd9ec;border-radius:7px;background:#fff;min-height:103px}.payment-summary-box p{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0;font-size:9px}.payment-summary-box .red{color:var(--red)}.payment-info{margin-top:7px;padding:7px 9px;border:1px solid #cbe0ff;border-radius:6px;background:#eaf3ff;color:#0b55d6;font-size:9px;font-weight:700}.payment-info i{margin-right:8px}.payment-status-row{display:flex;align-items:center;gap:20px;margin-top:7px;font-size:9px;font-weight:800;color:#0755d6}.payment-status-row>div{display:grid;grid-template-columns:repeat(2,110px);gap:4px}.payment-status-row button{height:29px;border:1px solid #cbd7e7;border-radius:5px;background:#fff;color:#6c7890;font-size:8px;font-weight:800}.payment-status-row button[data-payment="Partial"].active{background:#fff1cf;color:#9b6500;border-color:#f0c76c}.payment-status-row button[data-payment="Paid"].active{background:#e6f7eb;color:#147b38;border-color:#9ed7ae}
.form-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:8px 0 0}.form-buttons button{height:36px;border:0;border-radius:6px;color:#fff;font-size:10px;font-weight:800}.form-buttons button:disabled{opacity:.45;cursor:not-allowed}.save-job{background:#0759ef}.update-job{background:#138f3d}.clear-job{background:#fff!important;color:#0759ef!important;border:1px solid #83acf5!important}
.summary-banner{padding:9px 10px;border-radius:7px;background:linear-gradient(90deg,#e9f2ff,#e4efff);display:flex;align-items:center;justify-content:space-between;gap:18px}.summary-banner small{display:block;color:#0755dc;font-size:8px;font-weight:850}.summary-banner strong{display:block;margin-top:5px;font-size:15px}.summary-banner>div:last-child{text-align:right}.summary-banner span{font-size:9px}.summary-client-grid{display:grid;grid-template-columns:minmax(0,1fr) 135px;gap:13px;padding:9px 0 5px}.summary-block h3,.price-card h3,.status-card h3,.payment-history-block h3{margin-bottom:8px;color:#0755dc;font-size:9px;font-weight:850}.summary-block h3 i,.price-card h3 i,.status-card h3 i,.payment-history-block h3 i{margin-right:5px}.summary-block p{font-size:9px;line-height:1.45}.summary-block>p:not(.long-text){display:grid;grid-template-columns:14px 108px 1fr;gap:4px;margin:5px 0}.summary-block>p i{color:#0755dc}.summary-block>p span{overflow-wrap:anywhere}.summary-image{height:129px;border:1px dashed #98abc5;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background-position:center;background-size:cover;background-repeat:no-repeat;font-size:8px}.summary-image i{font-size:24px;color:var(--blue)}.summary-image.has-image i,.summary-image.has-image span{display:none}.line-block{padding:7px 0;border-bottom:1px solid #d8e2f0}.long-text{padding:0 12px;color:#354765;white-space:pre-wrap;overflow-wrap:anywhere}.summary-price-status{display:grid;grid-template-columns:1.22fr .98fr;gap:9px;margin:8px 0}.price-card,.status-card{padding:8px 10px;border:1px solid #d4dfed;border-radius:7px}.price-card p,.status-card p{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0;font-size:9px}.price-card hr{border:0;border-top:1px solid #dde5ef;margin:7px 0}.price-card .balance{color:var(--red);font-weight:850}.status-card>em{display:block;margin:-1px 0 7px;text-align:right;color:#e38100;font-size:8px;font-style:normal;font-weight:700}.status-card small{font-size:8px;color:#5f6f89}.status-badge,.payment-badge{display:inline-block;padding:5px 9px;border-radius:6px;font-size:8px;font-weight:850;white-space:nowrap}.status-on-process{background:#eaf2ff;color:#1551b8}.status-waiting-for-parts{background:#fff1cf;color:#996200}.status-to-order{background:#fff0df;color:#b45e00}.status-on-hold{background:#fff0cf;color:#ae6a00}.status-repaired-done{background:#e2f7e8;color:#167b38}.status-release{background:#e6edff;color:#3c56a5}.status-cancelled{background:#ffe4e4;color:#b32323}.payment-badge.partial{background:#fff0cf;color:#a66700}.payment-badge.paid{background:#e4f7e9;color:#177b39}
.payment-history-block{padding:4px 0 8px;border-bottom:1px solid #d8e2f0}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading button{height:27px;padding:0 9px;border:1px solid #83aef6;border-radius:6px;background:#fff;color:#0759ef;font-size:8px;font-weight:800}.section-heading button:disabled{opacity:.45}.payment-table-wrap{overflow:auto;border:1px solid #d8e1ed;border-radius:6px}.payment-table-wrap table{width:100%;border-collapse:collapse;min-width:700px}.payment-table-wrap th,.payment-table-wrap td{padding:6px 7px;border-right:1px solid #dde5ef;border-bottom:1px solid #dde5ef;text-align:left;font-size:7.5px;vertical-align:middle}.payment-table-wrap th{background:#f5f8fc;color:#2d4163;font-weight:850}.payment-table-wrap td:last-child,.payment-table-wrap th:last-child{border-right:0}.type-chip{display:inline-block;padding:3px 6px;border-radius:5px;background:#e9f1ff;color:#1454c4;font-size:7px;font-weight:850;white-space:nowrap}.empty-payment td{text-align:center!important;color:#75839a;padding:15px!important}.notes-block{padding:8px 0;border-bottom:1px solid #d8e2f0}.notes-block p{padding:0 13px;white-space:pre-wrap}.summary-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 18px 6px}.summary-actions button{height:35px;border:1px solid #4f8cf5;border-radius:6px;background:#fff;color:#0755dc;font-size:9px;font-weight:800}.summary-actions button:disabled{opacity:.45}.print-note{text-align:center;color:#6e7d94;font-size:8px}
.list-page{flex:1;min-height:0;overflow:auto;padding:12px 5px}.list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}.list-heading h2{font-size:24px;color:#0b2f7a}.list-heading p{margin-top:4px;color:var(--muted);font-size:12px}.list-tools{display:flex;gap:8px}.list-tools label{width:360px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 11px;gap:8px}.list-tools label input{height:auto;border:0;margin:0;padding:0;font-size:12px}.list-tools select{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fff}.job-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.job-list-card{padding:13px;border:1px solid #d5e1f0;border-radius:12px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:12px}.job-chip{display:inline-block;padding:4px 8px;border-radius:7px;background:#e9f2ff;color:#0755dc;font-size:10px;font-weight:850}.job-list-card h3{margin:9px 0 6px;font-size:15px}.job-list-card p{margin:4px 0;color:#60708c;font-size:11px}.job-list-card p i{width:20px;color:#0755dc}.job-list-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}.job-list-side strong{color:var(--red);font-size:13px}.job-list-side a{padding:7px 10px;border-radius:7px;background:var(--blue);color:#fff;font-size:10px;font-weight:800}.empty-list{grid-column:1/-1;padding:50px;text-align:center;background:#fff;border-radius:12px;color:#75839c}
.modal{position:fixed;inset:0;z-index:500;background:rgba(6,22,58,.58);display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modal-card{width:min(760px,96vw);max-height:90vh;background:#fff;border-radius:14px;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.28)}.modal-card.small{width:min(460px,96vw)}.modal-head{position:sticky;top:0;background:#fff;z-index:2;padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{font-size:17px;color:#0b3180}.modal-head p{margin-top:3px;color:var(--muted);font-size:10px}.modal-head>button{width:30px;height:30px;border:0;border-radius:7px;background:#eef3fa;font-size:21px}.modal-card form{padding:14px}.modal-card form label{display:block;margin-bottom:10px}.modal-card form textarea{min-height:75px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}.modal-actions button{height:36px;padding:0 14px;border:0;border-radius:7px;font-size:10px;font-weight:800}.modal-actions .light{background:#edf2f8;color:#465875}.modal-actions .blue{background:var(--blue);color:#fff}.modal-actions .red{background:var(--red);color:#fff}.timeline-card{width:min(720px,96vw)}.timeline-list{padding:15px}.timeline-list article{display:grid;grid-template-columns:17px 1fr;gap:8px;padding:0 0 16px;position:relative}.timeline-list article:before{content:"";position:absolute;left:6px;top:12px;bottom:0;width:2px;background:#d5e2f4}.timeline-list article:last-child:before{display:none}.timeline-list article>i{font-size:11px;color:#0759ef;z-index:1}.timeline-list strong{font-size:11px;color:#15376f}.timeline-list span{display:block;margin-top:3px;color:#71809a;font-size:9px}.timeline-list p{margin-top:5px;font-size:10px;line-height:1.45}.empty-timeline{text-align:center;padding:30px;color:#71809a}
@media(max-width:1350px){:root{--sidebar:190px}.profile img{width:66px;height:66px}.menu a{font-size:11px}.job-workspace{grid-template-columns:minmax(0,1.12fr) minmax(500px,1fr)}.brand h1{font-size:18px}.three-col{grid-template-columns:1fr 1fr}.three-col label:last-child{grid-column:1/-1}.payment-grid{grid-template-columns:1fr 1fr}.diagnosis-box,.payment-summary-box{grid-row:auto}.diagnosis-box{border-right:0}.notes-label{width:100%}}
@media(max-width:1050px){body{overflow:auto}.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0;width:100%;height:auto;overflow:visible}.menu{display:grid;grid-template-columns:repeat(3,1fr)}.job-workspace{grid-template-columns:1fr}.panel{min-height:760px}.job-list-grid{grid-template-columns:1fr}.list-heading{align-items:stretch;flex-direction:column}.list-tools{width:100%}.list-tools label{width:100%}}
@media(max-width:700px){.topbar{height:auto;align-items:flex-start}.brand h1{font-size:15px;white-space:normal}.brand img{width:60px}.top-actions{flex-direction:column}.client-layout,.two-col,.three-col,.summary-client-grid,.summary-price-status,.payment-grid,.form-buttons,.summary-actions{grid-template-columns:1fr}.notes-label{width:100%}.payment-status-row{align-items:flex-start;flex-direction:column}.payment-status-row>div{grid-template-columns:repeat(2,1fr);width:100%}.menu{grid-template-columns:1fr 1fr}.list-tools{flex-direction:column}.job-list-card{grid-template-columns:1fr}.job-list-side{align-items:flex-start}.payment-table-wrap table{min-width:650px}}
@media print{body{overflow:visible;background:#fff}.sidebar,.topbar,.form-panel,.alert,.summary-title button,.section-heading button,.summary-actions,.print-note,.modal{display:none!important}.main{margin:0;width:100%;height:auto;padding:0}.job-workspace{display:block}.summary-panel{border:0;box-shadow:none}.summary-scroll{overflow:visible}.panel-title{border-bottom:2px solid #0759ef}.payment-table-wrap{overflow:visible}.payment-table-wrap table{min-width:0}.summary-panel{font-size:11px}}


/* Conditional required fields for Diagnosis Only */
.conditional-optional{display:inline-block;margin-left:6px;color:#66789a;font-size:10px;font-weight:600;font-style:italic}


/* =========================================================
   DEFAULT RIGHT PANEL: SEARCHABLE JOB-ORDER LIST
   The list is shown first. The live summary replaces it after
   the user enters or changes any job-order field.
========================================================= */
[hidden]{display:none!important}
.right-list-panel{min-width:0;min-height:0}
.right-list-title{flex:0 0 45px}
.right-list-tools{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);background:#fff}
.right-list-search{height:38px;margin:0;border:1px solid #cfdcf0;border-radius:8px;background:#f8fbff;display:flex;align-items:center;gap:8px;padding:0 11px}
.right-list-search i{color:#5279c5}
.right-list-search input{width:100%;height:auto;margin:0;padding:0;border:0;background:transparent;font-size:11px;outline:0}
.right-list-tools select{height:38px;margin:0;padding:0 10px;border:1px solid #cfdcf0;border-radius:8px;background:#f8fbff;color:#1e2c49;font-size:11px;outline:0}
.right-list-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 11px 12px;scrollbar-width:thin;scrollbar-color:#afc3e5 transparent}
.right-list-panel .job-list-grid{grid-template-columns:1fr;gap:9px}
.right-list-panel .job-list-card{padding:11px 12px;border-radius:11px;box-shadow:0 2px 8px rgba(27,71,140,.04)}
.right-list-panel .job-list-card h3{margin:7px 0 5px;font-size:13px}
.right-list-panel .job-list-card p{font-size:10px;margin:3px 0}
.right-list-panel .job-list-side a{font-size:9px;padding:6px 9px}
.right-list-panel .empty-list{padding:34px 15px;background:#f8fbff;border:1px dashed #cdd9ec}
.summary-title-actions{display:flex;align-items:center;gap:6px}
.outline-btn{border:1px solid #9ebcf6;cursor:pointer}

@media(max-width:1250px){
    .right-list-tools{grid-template-columns:1fr 130px}
    .right-list-panel .job-list-card{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:700px){
    .right-list-tools{grid-template-columns:1fr}
    .summary-title-actions{gap:4px}
    .summary-title .summary-title-actions button{padding:0 8px;font-size:9px}
}


/* Job Order header action */
.form-panel-title{gap:12px}
.new-job-order-button{height:31px;padding:0 11px;border:1px solid #8eb3f5;border-radius:7px;background:#fff;color:#0755dc;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:800;white-space:nowrap;transition:.18s ease}
.new-job-order-button:hover{background:#0759ef;color:#fff;border-color:#0759ef;box-shadow:0 5px 12px rgba(7,89,239,.18)}
.new-job-order-button i{font-size:10px}
@media(max-width:700px){.new-job-order-button{height:30px;padding:0 8px;font-size:9px}}