.live-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:8px 0 28px}.live-heading h1{font-size:30px;font-weight:600;margin:8px 0}.live-heading p{color:#77837b;margin:0}.live-eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#7e9488}.live-connected{font-size:12px;background:#eaf4ee;color:#277452;border:1px solid #d6e8dd;padding:9px 14px;border-radius:24px;white-space:nowrap}.live-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:20px;padding-bottom:8px}.live-tabs button{border:1px solid #e1e8e2;background:#fff;padding:10px 18px;border-radius:30px;white-space:nowrap;font-size:13px;color:#607467}.live-tabs button.active{background:#214c3b;color:white;border-color:#214c3b}.live-panel{background:white;border:1px solid #e3eae5;border-radius:20px;overflow:hidden;margin-bottom:22px;box-shadow:0 4px 20px #244c3a03}.live-toolbar{padding:24px;display:flex;gap:18px;align-items:center;justify-content:space-between}.live-toolbar h2,.live-panel h2{font-size:20px;margin:7px 0}.live-count{font-size:12px;background:#edf4ef;border-radius:20px;padding:4px 10px;color:#48735b;vertical-align:middle}.live-actions{display:flex;gap:8px;flex-wrap:wrap}.live-actions form{display:flex;gap:6px}.live-actions input{border:1px solid #dfe7e0;border-radius:9px;padding:9px 12px;width:210px;font-family:inherit;font-size:12px}.live-button{background:#fff;color:#3c5949;border:1px solid #d9e3dc;padding:9px 13px;border-radius:9px;font-family:inherit;font-size:12px;white-space:nowrap}.live-button:hover{background:#f0f6f2}.live-button:disabled,.primary:disabled{opacity:.5;cursor:wait}.live-actions .primary,.live-drawer .primary,.live-login .primary{border:0;background:#275c43;color:#fff;border-radius:9px;padding:11px 19px;font-family:inherit;font-size:13px}.live-table-wrap{overflow:auto}.live-table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}.live-table th{font-weight:400;color:#7a887f;background:#f7f9f7;padding:15px 19px;white-space:nowrap;border-top:1px solid #eff2ef;border-bottom:1px solid #eff2ef}.live-table td{padding:19px;border-bottom:1px solid #f0f3f0;color:#415749;max-width:235px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-table tr:hover td{background:#fcfdfb}.live-table td:first-child{font-weight:500;color:#244d38}.live-row-action{position:sticky;right:0;background:white}.live-link{background:none;border:0;color:#39765b;font-family:inherit;white-space:nowrap}.live-status{padding:5px 9px;border-radius:20px;font-size:10px;letter-spacing:.2px;background:#eef2f0}.live-status.ok{background:#e9f5ed;color:#39825b}.live-status.pending{background:#fff4dd;color:#a37a2b}.live-status.muted{background:#f1eeee;color:#9a7272}.live-pagination{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#88958c}.live-pagination>div{display:flex;gap:7px}.live-empty{text-align:center;padding:65px 24px;color:#819489}.live-empty strong{display:block;color:#355e45;font-size:21px;margin-bottom:12px}.live-success,.live-error,.live-hint{padding:13px 18px;border-radius:10px;font-size:13px;margin:12px 0 20px}.live-panel>.live-success,.live-panel>.live-error{margin:0 24px 18px}.live-success{background:#eaf7ee;color:#306d44}.live-error{background:#fff0ed;color:#a0463a;overflow-wrap:anywhere}.live-hint{background:#f0f5f1;color:#6a7c70;line-height:1.8}.live-overlay{position:fixed;inset:0;z-index:1100;background:rgba(14,32,24,0.58);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;overflow-y:auto;backdrop-filter:blur(5px);animation:liveModalFadeIn .2s ease-out}.live-drawer{background:#fff;width:860px;max-width:100%;max-height:min(90vh,920px);height:auto;border-radius:22px;box-shadow:0 30px 75px -15px rgba(10,32,22,0.4), 0 0 0 1px rgba(0,0,0,0.06);display:flex;flex-direction:column;position:relative;overflow:hidden;animation:liveModalPop .24s cubic-bezier(0.16,1,0.3,1)}@keyframes liveModalFadeIn{from{opacity:0}to{opacity:1}}@keyframes liveModalPop{from{opacity:0;transform:scale(0.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.live-drawer header{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid #edf1ee;background:#fff;border-radius:22px 22px 0 0}.live-drawer header h2{font-size:24px;margin:6px 0}.live-drawer form{display:flex;flex-direction:column;overflow:hidden;flex:1}.live-form-scroll{overflow:auto;padding:8px 30px 30px;flex:1}.live-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;margin-top:20px}.live-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#546d5c;min-width:0}.live-field b{color:#bc8155}.live-field input,.live-field select{background:#fcfdfb;border:1px solid #dbe5dd;border-radius:9px;padding:11px 12px;font-family:inherit;font-size:13px;color:#2e4c39;min-width:0;width:100%}.live-field input:focus,.live-field select:focus,.live-actions input:focus{outline:2px solid #a7cbb6;outline-offset:1px}.live-advanced{margin-top:26px;border-top:1px solid #e6ede7;padding-top:18px}.live-advanced summary{cursor:pointer;color:#67846f;font-size:13px}.live-drawer footer{padding:18px 28px;margin:0;border-top:1px solid #e6ede7;display:flex;gap:10px;justify-content:flex-end;background:#fafcfb;border-radius:0 0 22px 22px}.live-danger{background:#fff2ee;border:1px solid #f0d6cc;color:#a45442;border-radius:9px;padding:10px 17px;font-family:inherit;font-size:13px}.live-drawer footer .live-danger{margin-right:auto}.live-confirm{position:absolute;bottom:0;left:0;right:0;background:#fffaf6;box-shadow:0 -10px 50px #0002;padding:30px;z-index:2}.live-confirm h3{font-size:21px}.live-confirm p{font-size:13px;color:#8b7462}.live-confirm button{margin-right:10px}.live-details{display:grid;grid-template-columns:1fr 2fr;gap:14px;font-size:12px;padding-top:20px}.live-details dd{word-break:break-word}.live-login{max-width:590px;margin:5vh auto;background:#fff;border:1px solid #e2e9e3;border-radius:26px;padding:45px}.live-login h1{font-size:38px;line-height:1.5;color:#234c39;margin:22px 0 15px}.live-login p{font-size:14px;color:#849086;line-height:1.9}.live-login form{display:flex;flex-direction:column;gap:12px;margin:27px 0;font-size:13px}.live-login input{padding:14px;border:1px solid #d5e0d7;border-radius:10px;width:100%}.live-login small{font-size:11px;color:#92a095}.live-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:25px 0}.live-kpis>a{background:#fff;border:1px solid #e1e9e3;border-radius:18px;padding:24px;text-decoration:none;color:#244f38;display:flex;flex-direction:column;gap:14px}.live-kpis span{font-size:13px;color:#7c8c81}.live-kpis strong{font-size:34px;font-weight:500;line-height:1.2}.live-kpis small{font-size:11px;color:#93a296}.live-kpis .accent{background:#254f3d;color:#fff}.live-kpis .accent span,.live-kpis .accent small{color:#b8cfbf}.live-overview{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-bottom:25px}.live-overview .live-panel{padding:26px;margin:0}.live-bar-label{display:flex;justify-content:space-between;font-size:11px;color:#708575;margin:15px 0 7px}.live-bar-label strong{font-weight:400}.live-bar{background:#eff4ef;height:8px;border-radius:6px;overflow:hidden}.live-bar i{height:100%;display:block;background:#a4bfa8;border-radius:6px}.live-feature{background:#e7ede0;border:1px solid #dce4d7;border-radius:20px;padding:32px}.live-feature h2{font-size:30px;line-height:1.5;margin:20px 0;color:#355540}.live-feature p{font-size:13px;color:#7a8975;line-height:1.8}.live-feature a{display:block;margin-top:16px;font-size:13px;color:#385d43;text-decoration:none}.live-drawer fieldset{border:0;padding:0;min-width:0}@media(max-width:1100px){.live-toolbar{align-items:flex-start;flex-direction:column}.live-kpis{grid-template-columns:repeat(2,1fr)}.live-overview{grid-template-columns:1fr}}@media(max-width:600px){.live-overlay{padding:10px;align-items:center}.live-drawer{width:100%;max-height:95vh;border-radius:18px}.live-heading{align-items:flex-start;flex-direction:column}.live-heading h1{font-size:25px}.live-kpis{gap:10px}.live-kpis>a{padding:17px}.live-kpis strong{font-size:25px}.live-toolbar{padding:18px}.live-actions form{width:100%}.live-actions input{width:100%;min-width:0}.live-pagination{padding:15px;flex-direction:column;align-items:flex-start}.live-form-grid{grid-template-columns:1fr}.live-form-scroll{padding:8px 20px 20px}.live-drawer header{padding:20px}.live-login{padding:28px;margin:20px 0}.live-login h1{font-size:29px}.live-connected{font-size:11px}}
.live-image-preview{display:block;width:100%;max-height:260px;object-fit:contain;background:#f3f7f1;border-radius:14px;margin:16px 0}


/* Vehicle Photos Manager */
.vehicle-photos-section{margin:24px 0;padding:20px;background:#f8faf8;border:1px solid #dbe7df;border-radius:16px}
.vehicle-photos-header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.vehicle-photos-title{font-size:15px;font-weight:600;color:#214c3b;display:flex;align-items:center}
.vehicle-photos-count{display:inline-block;background:#e1ede5;color:#266b4c;font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;margin-left:8px}
.vehicle-photos-sub{font-size:12px;color:#6d8274}
.vehicle-upload-box{display:flex;flex-direction:column;gap:10px}
.vehicle-dropzone{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#ffffff;border:2px dashed #b8d4c3;border-radius:14px;cursor:pointer;transition:all .2s ease}
.vehicle-dropzone:hover{border-color:#277452;background:#f4faf6}
.vehicle-dropzone.disabled{opacity:.6;cursor:not-allowed}
.vehicle-dropzone-icon{color:#387b5a;flex-shrink:0}
.vehicle-dropzone-text{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#304e3c}
.vehicle-dropzone-text strong{font-weight:600;color:#1a4230}
.vehicle-dropzone-text span{font-size:11px;color:#72897a}
.vehicle-url-row{display:flex;align-items:center;gap:8px;font-size:12px}
.vehicle-url-label{color:#647b6c;white-space:nowrap}
.vehicle-url-row input{flex:1;border:1px solid #d5e0d7;border-radius:8px;padding:8px 12px;font-size:12px;font-family:inherit;background:#fff;min-width:0}
.vehicle-url-row input:focus{outline:2px solid #a7cbb6}
.vehicle-uploading-bar{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;background:#eaf4ee;border:1px solid #c9e3d3;border-radius:10px;font-size:12px;color:#276d4a}
.vehicle-uploading-bar .spinner{width:14px;height:14px;border:2px solid #a3ceb7;border-top-color:#276d4a;border-radius:50%;animation:liveSpin .7s linear infinite}
@keyframes liveSpin{to{transform:rotate(360deg)}}
.vehicle-status-alert{margin-top:10px;padding:9px 14px;border-radius:8px;font-size:12px}
.vehicle-status-alert.success{background:#eef8f1;color:#266b47;border:1px solid #cae8d3}
.vehicle-status-alert.error{background:#fdf1ee;color:#9c4135;border:1px solid #f2cfc7}
.vehicle-photos-empty{text-align:center;padding:26px 16px;background:#fff;border:1px dashed #dbe5de;border-radius:12px;margin-top:14px;color:#7a8e80}
.vehicle-photos-empty p{margin:8px 0 2px;font-size:13px;font-weight:500;color:#335742}
.vehicle-photos-empty small{font-size:11px;color:#92a498}
.vehicle-photos-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:14px;margin-top:16px}
.vehicle-photo-card{background:#ffffff;border:1px solid #dbe6de;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.03);transition:all .2s ease;display:flex;flex-direction:column}
.vehicle-photo-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,48,32,0.08);border-color:#b0cdba}
.vehicle-photo-card.is-cover{border:2px solid #2e7a57;box-shadow:0 4px 14px rgba(46,122,87,0.15)}
.vehicle-photo-img-wrap{position:relative;width:100%;height:150px;background:#f1f6f2;border:1px solid #dce8e0;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:6px;box-sizing:border-box}
.vehicle-photo-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:6px;transition:transform .18s ease}.vehicle-photo-img-wrap:hover img{transform:scale(1.03)}
.vehicle-badge-cover{position:absolute;top:8px;left:8px;background:#1b4d37;color:#ffffff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,0.25);letter-spacing:.3px}
.vehicle-photo-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:1;justify-content:space-between}
.vehicle-photo-name{font-size:11px;color:#4b6655;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.vehicle-photo-actions{display:flex;gap:6px;justify-content:flex-end}
.btn-action{border:1px solid #d5e1d8;background:#fff;color:#456251;padding:4px 9px;border-radius:6px;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s ease}
.btn-action:hover{background:#f1f7f3}
.btn-action.cover{color:#276d4b;border-color:#bad9c6;background:#f4faf6}
.btn-action.cover:hover{background:#e4f3eb;border-color:#276d4b}
.btn-action.delete{color:#9d4638;border-color:#f0cfc7;background:#fff6f4}
.btn-action.delete:hover{background:#fde8e3;border-color:#b54939}
.live-storage-input-wrap{display:flex;gap:8px;align-items:center}
.live-storage-input-wrap input{flex:1}
.live-upload-btn{cursor:pointer;font-size:12px;padding:10px 12px;white-space:nowrap}


/* Vehicles Table Custom Columns */
.table-media-cell{padding:6px 14px !important;width:68px;text-align:center;vertical-align:middle}
.table-media-pill{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:2px;border-radius:10px;transition:background .15s ease}
.table-media-pill:hover{background:#edf6f1}
.table-media-preview{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#f3f7f4;border:1px solid #d0e0d6;display:block;transition:transform .18s cubic-bezier(0.16,1,0.3,1),box-shadow .18s cubic-bezier(0.16,1,0.3,1);padding:3px;box-sizing:border-box}
.table-media-pill:hover .table-media-preview{transform:scale(1.12);box-shadow:0 6px 16px rgba(24,64,44,0.2);border-color:#277452}
.table-vehicle-cell{padding:10px 14px !important;width:68px}
.table-vehicle-thumb{width:56px;height:42px;object-fit:contain;border-radius:8px;border:1px solid #dbe6de;background:#ffffff;display:block;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-sizing:border-box;padding:2px}
.table-vehicle-thumb:hover{transform:scale(1.06);box-shadow:0 3px 8px rgba(0,0,0,0.12)}
.table-driver-cell{padding:10px 14px !important;min-width:160px}
.table-driver-pill{display:flex;align-items:center;gap:10px}
.table-driver-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid #b8d4c3;background:#eef4f0;flex-shrink:0}
.table-driver-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.table-driver-name{font-size:12px;font-weight:600;color:#244d38;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.table-driver-exp{font-size:10px;color:#7a8f82;white-space:nowrap}

/* Fuel Badges */
.fuel-badge{display:inline-block;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:500;white-space:nowrap}
.fuel-badge.diesel{background:#e8f1fb;color:#1e5185;border:1px solid #c8dcf2}
.fuel-badge.petrol{background:#fdf3e7;color:#9b5a1e;border:1px solid #f6dbbe}
.fuel-badge.ev{background:#e6f8ee;color:#1d7045;border:1px solid #bcecd0}
.fuel-badge.hybrid{background:#e6f6f7;color:#136c75;border:1px solid #bde6e8}
.fuel-badge.gas{background:#f3eefb;color:#61349a;border:1px solid #decff5}

/* Vehicle Specs Card in Modal */
.vehicle-specs-card{margin:20px 0 16px;padding:18px 20px;background:#f9fbf9;border:1px solid #dbe7df;border-radius:14px}
.vehicle-specs-header{margin-bottom:12px}
.vehicle-specs-title{font-size:14px;font-weight:600;color:#224f3b;display:flex;align-items:center}
.vehicle-specs-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vehicle-specs-body textarea{background:#fcfdfb;border:1px solid #dbe5dd;border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13px;color:#2e4c39;width:100%;box-sizing:border-box;resize:vertical}
.vehicle-specs-body textarea:focus{outline:2px solid #a7cbb6}

/* Driver & Document Cards Grid */
.vehicle-docs-section{margin:22px 0 10px;padding:20px;background:#f8faf8;border:1px solid #dbe7df;border-radius:16px}
.doc-cards-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));gap:16px;margin-top:16px}
.doc-card{background:#ffffff;border:1px solid #dbe6de;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,0.02);transition:all .2s ease}
.doc-card:hover{border-color:#b4d2be;box-shadow:0 4px 12px rgba(18,48,32,0.06)}
.doc-card.has-file{border-color:#9dc5ad}
.doc-card-header{padding:10px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #edf2ee;background:#fdfefe}
.doc-card-icon{font-size:16px;flex-shrink:0}
.doc-card-title-wrap{display:flex;flex-direction:column;overflow:hidden}
.doc-card-title{font-size:12px;font-weight:600;color:#204b39;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-card-desc{font-size:10px;color:#788f80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-card-body{padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:130px;flex:1}
.doc-preview-wrap{position:relative;width:100%;height:185px;border-radius:10px;overflow:hidden;background:#f1f6f2;border:1px solid #d8e5dc;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;box-sizing:border-box;transition:all .18s ease}.doc-preview-wrap:hover{border-color:#2c7552;box-shadow:0 4px 14px rgba(18,48,32,0.12)}.doc-preview-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:6px;transition:transform .18s ease}.doc-preview-wrap:hover img{transform:scale(1.02)}
.doc-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.doc-upload-trigger{width:100%;height:185px;border:2px dashed #b9d7c5;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .18s ease;background:#fafdfb;text-align:center;padding:12px;box-sizing:border-box}.doc-upload-trigger:hover{border-color:#2a724f;background:#f0f8f3}
.doc-upload-trigger:hover{border-color:#2e7a57;background:#f1f8f4}
.doc-upload-trigger span{font-size:11px;font-weight:500;color:#355e46}
.doc-upload-trigger small{font-size:9px;color:#859b8d}
.doc-card-footer{padding:8px 12px;background:#fafcfb;border-top:1px solid #edf2ee;display:flex;align-items:center;justify-content:space-between;gap:6px}
.doc-file-info{font-size:10px;color:#5a7565;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}


/* Document Zoom Hint & Lightbox Styles */
.doc-zoom-hint{position:absolute;bottom:6px;right:6px;background:rgba(20,44,32,0.82);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:8px;backdrop-filter:blur(3px);pointer-events:none;opacity:0.85;transition:opacity .15s ease}
.doc-preview-wrap:hover .doc-zoom-hint, .vehicle-photo-img-wrap:hover .doc-zoom-hint{opacity:1;background:rgba(20,44,32,0.95)}
.image-lightbox-overlay{position:fixed;inset:0;z-index:2500;background:rgba(8,20,14,0.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;animation:liveModalFadeIn .2s ease-out}
.image-lightbox-modal{background:#ffffff;border-radius:20px;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.6);animation:liveModalPop .22s cubic-bezier(0.16,1,0.3,1)}
.image-lightbox-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#f5faf7;border-bottom:1px solid #dce8df}
.image-lightbox-title{font-size:15px;font-weight:600;color:#1e4b36}
.image-lightbox-close{background:#f0f5f2;border:1px solid #d5e2d8;color:#395b46;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease}
.image-lightbox-close:hover{background:#e2ece5;color:#18412e}
.image-lightbox-content{padding:18px;background:#0d1a12;display:flex;align-items:center;justify-content:center;max-height:calc(92vh - 65px);overflow:auto}
.image-lightbox-content img{max-width:100%;max-height:calc(92vh - 100px);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.4)}


/* Dashboard Advanced 6-Cards System */
.dash-section{margin:28px 0 16px}
.dash-section-title{font-size:16px;font-weight:700;color:#1c4433;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:20px;margin-bottom:26px}
.dash-grid-2{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;margin-bottom:26px}
.dash-grid-4{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;margin-bottom:26px}
.dash-grid-5{display:grid;grid-template-columns:repeat(5, 1fr);gap:16px;margin-bottom:26px}

.dash-card{background:#ffffff;border:1px solid #e1e9e3;border-radius:18px;padding:22px;box-shadow:0 3px 14px rgba(18,48,32,0.04);display:flex;flex-direction:column;gap:14px;transition:all .2s ease;text-decoration:none;color:inherit;position:relative;overflow:hidden}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,48,32,0.08);border-color:#b5d4c2}
.dash-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dash-card-label{font-size:13px;font-weight:600;color:#5a7566;display:flex;align-items:center;gap:6px}
.dash-card-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:14px;background:#eaf4ee;color:#236a49;white-space:nowrap}
.dash-card-badge.pulse{background:#fff3e0;color:#b26a00;border:1px solid #fedba8}
.dash-card-badge.active{background:#e3f7eb;color:#1e7e48;border:1px solid #b8ebca}
.dash-card-badge.info{background:#f0f5f2;color:#456754}

.dash-hero-stat{display:flex;align-items:baseline;gap:6px}
.dash-hero-stat strong{font-size:32px;font-weight:700;color:#1b4432;line-height:1}
.dash-hero-stat span{font-size:13px;color:#798f82;font-weight:500}

/* Breakdown List & Chips */
.dash-breakdown{display:flex;flex-direction:column;gap:7px;margin-top:2px;background:#f9fbf9;padding:12px 14px;border-radius:12px;border:1px solid #e7efe9;max-height:160px;overflow-y:auto}
.dash-breakdown-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#456352}
.dash-breakdown-name{display:flex;align-items:center;gap:6px;font-weight:500}
.dash-breakdown-dot{width:8px;height:8px;border-radius:50%;background:#2e7a57;display:inline-block;flex-shrink:0}
.dash-breakdown-count{background:#e8f2ec;color:#205e3f;padding:2px 8px;border-radius:10px;font-weight:600;font-size:11px}

/* Financial Periods Grid */
.dash-finance-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;margin-top:4px}
.dash-finance-box{background:#f9fbf9;border:1px solid #e7efe9;border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:3px;text-align:center}
.dash-finance-box span{font-size:11px;color:#758d7f}
.dash-finance-box strong{font-size:14px;font-weight:700;color:#204f38}

/* Financial Progress Card */
.dash-pending-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.dash-pending-box{border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.dash-pending-box.paid{background:#eef7f2;border:1px solid #cce5d5}
.dash-pending-box.paid span{font-size:11px;color:#2b754e}
.dash-pending-box.paid strong{font-size:16px;font-weight:700;color:#185334}
.dash-pending-box.pending{background:#fff8ec;border:1px solid #f6dfbe}
.dash-pending-box.pending span{font-size:11px;color:#9e6a14}
.dash-pending-box.pending strong{font-size:16px;font-weight:700;color:#85550a}

.dash-progress-wrap{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.dash-progress-bar{height:8px;border-radius:6px;background:#fdf2e3;overflow:hidden;position:relative;border:1px solid #f2e3cb}
.dash-progress-fill{height:100%;border-radius:6px;background:linear-gradient(90deg, #277452 0%, #3ea877 100%)}
.dash-progress-labels{display:flex;justify-content:space-between;font-size:11px;color:#7a8e81}

/* Quick Action Link inside Card */
.dash-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;font-size:11px;color:#2d7250;font-weight:600;border-top:1px dashed #e8efe9}
.dash-card-footer span{display:flex;align-items:center;gap:4px}
.dash-btn-accept{background:#236143;color:#ffffff;border:none;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:background .15s ease}
.dash-btn-accept:hover{background:#184a32}

.dash-grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-bottom:26px}
.dash-card.clickable{cursor:pointer;user-select:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dash-card.clickable:hover{border-color:#2a7b54;box-shadow:0 10px 28px rgba(18,48,32,0.12);transform:translateY(-3px)}
.dash-click-hint{font-size:10px;color:#6d8878;display:inline-flex;align-items:center;gap:4px;margin-top:2px}
.dash-card.clickable:hover .dash-click-hint{color:#1f6240;font-weight:600}

/* Dashboard Detail Modal */
.dash-modal{background:#ffffff;width:960px;max-width:96vw;max-height:88vh;border-radius:24px;box-shadow:0 30px 80px rgba(10,32,20,0.4);display:flex;flex-direction:column;overflow:hidden;animation:liveModalPop .22s cubic-bezier(0.16,1,0.3,1);position:relative}
.dash-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;background:#f7faf8;border-bottom:1px solid #e4ede7}
.dash-modal-header h3{font-size:20px;font-weight:700;color:#184431;margin:4px 0 0}
.dash-modal-close{background:#eaf2ed;border:none;color:#456754;width:34px;height:34px;border-radius:50%;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.dash-modal-close:hover{background:#d5e5db;color:#184431}
.dash-modal-body{padding:24px 28px;overflow-y:auto;flex:1}
.dash-modal-footer{padding:16px 28px;background:#f9fbf9;border-top:1px solid #e7efe9;display:flex;justify-content:space-between;align-items:center;gap:12px}

.dash-modal-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:12px;margin-bottom:20px}
.dash-modal-stat-box{background:#f4f8f5;border:1px solid #dce8e0;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.dash-modal-stat-box span{font-size:11px;color:#617b6d}
.dash-modal-stat-box strong{font-size:18px;font-weight:700;color:#184a33}

.dash-modal-table-wrap{overflow-x:auto;border:1px solid #e5ede7;border-radius:14px;background:#fff}
.dash-modal-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}
.dash-modal-table th{background:#f5f8f6;color:#60796b;padding:12px 16px;font-weight:600;border-bottom:1px solid #e2ece5;white-space:nowrap}
.dash-modal-table td{padding:12px 16px;border-bottom:1px solid #edf3ef;color:#335340;white-space:nowrap}
.dash-modal-table tr:hover td{background:#f8fbf9}
.dash-modal-table tr:last-child td{border-bottom:none}

@media(max-width:1400px){
    .dash-grid-5{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:1100px){
    .dash-grid-5{grid-template-columns:repeat(2, 1fr)}
    .dash-grid-4{grid-template-columns:repeat(2, 1fr)}
    .dash-grid-3{grid-template-columns:1fr}
    .dash-grid-2{grid-template-columns:1fr}
}
@media(max-width:650px){
    .dash-grid-5{grid-template-columns:1fr;gap:14px}
    .dash-grid-4{grid-template-columns:1fr;gap:14px}
    .dash-finance-grid{grid-template-columns:1fr}
    .dash-pending-stats{grid-template-columns:1fr}
    .dash-modal{max-height:94vh}
    .dash-modal-header,.dash-modal-body,.dash-modal-footer{padding:16px 20px}
    .dash-card{padding:16px;border-radius:14px;gap:10px}
    .dash-hero-stat strong{font-size:26px}
    .dash-section{margin:18px 0 12px}
    .dash-section-title{font-size:15px;margin-bottom:10px}
    .live-heading{margin:4px 0 16px;flex-direction:row;justify-content:space-between;align-items:flex-end}
    .live-heading h1{font-size:22px;margin:4px 0}
    .live-heading p{font-size:11px}
    .live-heading .live-button{padding:6px 12px;font-size:11.5px}
}


/* ==========================================================
   DISPATCH SYSTEM & BLACKLIST STYLES
   ========================================================== */
.dispatch-settings-card {
    background: #ffffff;
    border: 1px solid #d7e6dc;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(24,64,44,0.04);
    overflow: hidden;
}
.dispatch-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #f7faf8;
    border-bottom: 1px solid #e2ece5;
    flex-wrap: wrap;
    gap: 16px;
}
.dispatch-settings-title-group h2 {
    margin: 4px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #174a32;
    display: flex;
    align-items: center;
}
.dispatch-mode-toggle-group {
    display: inline-flex;
    background: #eaf1ed;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}
.dispatch-toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #557262;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}
.dispatch-toggle-btn:hover:not(:disabled) {
    color: #1d7045;
}
.dispatch-toggle-btn.active-auto {
    background: #1d7045;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(29,112,69,0.25);
}
.dispatch-toggle-btn.active-manual {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}
.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
}
.dot-indicator.green {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}
.dot-indicator.blue {
    background: #93c5fd;
    box-shadow: 0 0 8px #93c5fd;
}
.dispatch-settings-body {
    padding: 24px;
}
.dispatch-mode-banner {
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 20px;
}
.dispatch-mode-banner.banner-auto {
    background: #edf8f2;
    border: 1px solid #b7e4ca;
}
.dispatch-mode-banner.banner-manual {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.dispatch-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.dispatch-banner-icon {
    font-size: 24px;
    line-height: 1;
    margin-top: 2px;
}
.dispatch-banner-content strong {
    font-size: 15px;
    color: #15452e;
    display: block;
    margin-bottom: 4px;
}
.dispatch-mode-banner.banner-manual .dispatch-banner-content strong {
    color: #1e40af;
}
.dispatch-banner-content p {
    margin: 0;
    font-size: 13px;
    color: #3b614b;
    line-height: 1.5;
}
.dispatch-mode-banner.banner-manual .dispatch-banner-content p {
    color: #3b5998;
}
.dispatch-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.dispatch-rule-box {
    background: #f8fbf9;
    border: 1px solid #e1eee5;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.dispatch-rule-icon {
    font-size: 20px;
}
.dispatch-rule-text strong {
    font-size: 13px;
    font-weight: 700;
    color: #1c4d34;
    display: block;
    margin-bottom: 3px;
}
.dispatch-rule-text span {
    font-size: 11.5px;
    color: #5c7968;
    line-height: 1.4;
    display: block;
}
.dispatch-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f8f5;
    border: 1px dashed #cde1d4;
    border-radius: 12px;
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.dispatch-run-btn {
    background: #1d7045 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(29,112,69,0.2) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}
.dispatch-run-btn:hover:not(:disabled) {
    background: #165b37 !important;
    transform: translateY(-1px) !important;
}
.dispatch-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.dispatch-mode-pill.auto {
    background: #e6f8ee;
    color: #156238;
    border: 1px solid #b7ecc8;
}
.dispatch-mode-pill.manual {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.open-jobs-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.open-jobs-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.open-jobs-banner-info .pulse-icon {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.open-jobs-banner-info strong {
    font-size: 14px;
    color: #92400e;
    display: block;
    margin-bottom: 2px;
}
.open-jobs-banner-info p {
    margin: 0;
    font-size: 12px;
    color: #a16207;
}
.dispatch-job-summary-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    background: #f4f8f5;
    border: 1px solid #dbe8df;
    border-radius: 12px;
    padding: 14px 18px;
}
.dispatch-job-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dispatch-job-summary-item span {
    font-size: 11px;
    color: #627f6e;
}
.dispatch-job-summary-item strong {
    font-size: 13px;
    color: #194832;
}
.dispatch-candidates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}
.dispatch-candidate-card {
    background: #ffffff;
    border: 1.5px solid #e1ece5;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.15s ease;
}
.dispatch-candidate-card:hover:not(.ineligible) {
    border-color: #277452;
    box-shadow: 0 4px 14px rgba(24,64,44,0.08);
}
.dispatch-candidate-card.rank-top {
    border-color: #22c55e;
    background: #fbfefc;
    box-shadow: 0 4px 16px rgba(34,197,94,0.1);
}
.dispatch-candidate-card.ineligible {
    background: #fafaf9;
    border-color: #e5e5e5;
    opacity: 0.75;
}
.dispatch-candidate-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rank-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.rank-badge.gold {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.rank-badge.silver {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.rank-badge.bronze {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fed7aa;
}
.rank-badge.standard {
    background: #f3f7f4;
    color: #284f39;
    border: 1px solid #d5e5db;
}
.rank-badge.disabled {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.dispatch-candidate-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dispatch-candidate-media {
    flex-shrink: 0;
}
.dispatch-candidate-info {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dispatch-candidate-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dispatch-candidate-title strong {
    font-size: 15px;
    color: #17422d;
}
.dispatch-candidate-driver {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dispatch-candidate-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.metric-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    background: #f1f6f3;
    color: #375945;
    border: 1px solid #dde8e1;
}
.metric-pill.score {
    background: #e6f8ee;
    color: #166534;
    border-color: #bbf7d0;
    font-weight: 600;
}
.metric-pill.map-pill {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}
.metric-pill.map-pill:hover {
    background: #e0e7ff;
    color: #1e1b4b;
    border-color: #a5b4fc;
}
.dispatch-candidate-location {
    font-size: 11px;
    color: #4b6354;
    display: flex;
    align-items: center;
    gap: 4px;
}
.candidate-map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.candidate-map-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}
.candidate-map-btn.active {
    background: #1e40af;
    color: #ffffff;
    border-color: #1e3a8a;
}
.candidate-route-map-panel {
    margin-top: 14px;
    border-top: 1px dashed #bfdbfe;
    padding-top: 12px;
    width: 100%;
}
.candidate-map-box {
    width: 100%;
    height: 280px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
    background: #e5e7eb;
}
.candidate-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: #1e3a8a;
    background: #eff6ff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #dbeafe;
}
.candidate-map-header strong {
    font-weight: 700;
}
.candidate-map-close {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    transition: all 0.15s ease;
}
.candidate-map-close:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.dispatch-candidate-action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    justify-content: center;
}
.dispatch-candidate-warning {
    font-size: 12px;
    color: #b91c1c;
    font-weight: 600;
}
.dispatch-assign-btn {
    background: #1d7045 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(29,112,69,0.2) !important;
    cursor: pointer !important;
    white-space: nowrap;
}
.dispatch-assign-btn:hover:not(:disabled) {
    background: #165b37 !important;
}
.dispatch-report-box {
    background: #f8faf9;
    border: 1px solid #d5e5dc;
    border-radius: 12px;
    padding: 14px 18px;
}
.dispatch-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #244e38;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}
.dispatch-report-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dispatch-report-list li {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
}
.dispatch-report-list li.success {
    background: #edfdf4;
    color: #14532d;
    border: 1px solid #bbf7d0;
}
.dispatch-report-list li.skipped {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.dispatch-report-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}
.dispatch-report-badge.ok {
    background: #22c55e;
    color: #ffffff;
}
.dispatch-report-badge.warn {
    background: #f59e0b;
    color: #ffffff;
}

/* Password Eye Toggle */
.login-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.login-password-wrap input {
    padding-right: 48px !important;
}
.login-password-wrap input::-ms-reveal,
.login-password-wrap input::-ms-clear {
    display: none !important;
}
.login-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7f72;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.login-toggle-password:hover {
    color: #1a422f;
    background: #edf4f0;
}
.login-toggle-password:focus {
    outline: 2px solid #a7cbb6;
    outline-offset: 1px;
}
.login-toggle-password svg {
    display: block;
}

/* Dispatch Type Badge */
.dispatch-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.dispatch-type-badge.auto {
    background: #e6f8ee;
    color: #156238;
    border: 1px solid #b7ecc8;
}
.dispatch-type-badge.manual {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.dispatch-type-badge.customer {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.dispatch-type-badge.pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.dispatch-type-badge.muted {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* Revoke Dispatch Button */
.revoke-dispatch-btn {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    margin-right: 6px !important;
}
.revoke-dispatch-btn:hover:not(:disabled) {
    background: #ffe4e6 !important;
    color: #be123c !important;
    border-color: #fda4af !important;
    transform: translateY(-1px);
}
.revoke-dispatch-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Booking Dispatch Drawer Card */
.booking-dispatch-card {
    background: #ffffff;
    border: 1px solid #cfe2d6;
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
}
.booking-dispatch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f8f5;
    padding: 10px 16px;
    border-bottom: 1px solid #e1ece5;
    flex-wrap: wrap;
    gap: 8px;
}
.booking-dispatch-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a4d35;
    display: flex;
    align-items: center;
    gap: 6px;
}
.booking-dispatch-body {
    padding: 14px 16px;
}
.booking-dispatch-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.payment-review{width:820px}.payment-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.payment-totals>div{background:#eff5f0;padding:14px;border-radius:12px}.payment-totals small,.payment-totals strong{display:block}.payment-totals small{font-size:11px;color:#718978}.payment-totals strong{font-size:20px;margin-top:8px;color:#24563a}.payment-card{border:1px solid #dce6de;border-radius:16px;padding:22px;margin:16px 0}.payment-card-title{display:flex;justify-content:space-between;gap:12px;align-items:center}.payment-slip{display:block;max-width:100%;max-height:430px;object-fit:contain;margin:12px auto;background:#f5f8f4}.payment-check{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:13px}.payment-confirm{padding:22px;background:#eef6ec;border-radius:15px;margin:22px 0}.payment-confirm p{font-size:13px}.driver-job{padding:24px}.driver-job h2{font-size:23px}.driver-job .primary,.payment-review .primary{border:0;border-radius:9px;background:#24593d;color:white;padding:11px 18px;font-family:inherit}.payment-review .live-danger{margin-left:8px}.booking-stages button{padding:13px 20px}@media(max-width:650px){.payment-totals{grid-template-columns:1fr 1fr}.payment-card-title{align-items:flex-start;flex-direction:column}}
.live-table td.live-row-action{white-space:normal;max-width:none;min-width:200px}.live-row-action button{margin:3px 0}

.vehicle-reviews{width:min(760px,100%)}.vehicle-review{padding:22px 0;border-bottom:1px solid #e3eae5}.vehicle-review-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.vehicle-review-score{color:#89621b;background:#fff6dd;padding:6px 12px;border-radius:18px;white-space:nowrap}.vehicle-review small{color:#78887f}.vehicle-review-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;margin:16px 0;color:#294c3b}.vehicle-review-details{display:flex;flex-wrap:wrap;gap:8px}.vehicle-review-details span{background:#f1f6f2;padding:5px 10px;border-radius:8px;font-size:12px}

.vehicle-review-button:disabled{cursor:default;opacity:1;color:#95a099;background:#f4f6f4;border-color:#e6ebe7}

/* Jobs Table Custom Columns & Phone Chips */
.driver-phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 3px;
    transition: all .15s ease;
    width: fit-content;
}
.driver-phone-chip:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #047857;
    transform: translateY(-1px);
}

.customer-phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 3px;
    transition: all .15s ease;
    width: fit-content;
}
.customer-phone-chip:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.table-customer-cell {
    padding: 10px 12px !important;
    min-width: 160px;
}
.table-customer-pill {
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-customer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.table-customer-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.table-booking-tag {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
}

.table-route-cell {
    padding: 8px 12px !important;
    min-width: 250px;
}
.job-route-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
}
.job-route-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}
.route-point {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-point .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.route-point .dot.green {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22,163,74,0.2);
}
.route-point .dot.red {
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.2);
}
.route-point .addr-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
}

.job-route-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.route-map-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .15s ease;
    font-family: inherit;
}
.route-map-btn.gmaps-link {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.route-map-btn.gmaps-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-1px);
}
.route-map-btn.track-btn {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.route-map-btn.track-btn:hover {
    background: #dcfce7;
    border-color: #86efac;
    transform: translateY(-1px);
}

/* Leaflet Custom Marker & Tracking Pins */
.leaflet-custom-marker-wrapper {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
}

.map-pickup-pin {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 50px;
    cursor: pointer;
}

.map-pickup-pin .pickup-dot {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    z-index: 2;
}

.map-pickup-pin .pickup-label {
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap !important;
    margin-top: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 3;
    pointer-events: none;
    text-align: center;
}

.map-pickup-pin .pickup-radar-wave {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    animation: mapRadarPing 1.8s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes mapRadarPing {
    0% { transform: translateX(-50%) scale(0.5); opacity: 1; }
    100% { transform: translateX(-50%) scale(2.2); opacity: 0; }
}

.map-van-pin {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 50px;
}

.map-van-pin .van-badge-box {
    background: #ffffff;
    border: 2px solid #16a34a;
    border-radius: 20px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 2;
}

.map-van-pin.selected-van .van-badge-box {
    border-color: #2563eb;
    background: #eff6ff;
    transform: scale(1.1);
}

.map-van-pin .van-emoji {
    font-size: 16px;
    line-height: 1;
}

.map-van-pin .van-star-tag {
    font-size: 10px;
    font-weight: 700;
    color: #d97706;
    white-space: nowrap;
}

.map-van-pin .van-caption {
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap !important;
    margin-top: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 3;
}

.map-van-pin .van-radar-wave {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #10b981;
    animation: mapVanRadarPing 1.8s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes mapVanRadarPing {
    0% { transform: translateX(-50%) scale(0.6); opacity: 1; }
    100% { transform: translateX(-50%) scale(2.2); opacity: 0; }
}

/* Driver Acceptance Status Badges & Drawer Cards */
.acceptance-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.accept-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
    transition: all .2s ease;
}

.accept-badge.accepted {
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #a7f3d0;
}

.accept-badge.waiting {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.accept-badge.unassigned {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.accept-badge.pulse-orange {
    animation: pulseOrange 2s infinite ease-in-out;
}

@keyframes pulseOrange {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(234, 88, 12, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
    }
}

.accept-time-tag {
    font-size: 10px;
    color: #64748b;
    margin-left: 2px;
}

.accept-hint-tag {
    font-size: 10px;
    color: #ea580c;
    font-weight: 500;
    margin-left: 2px;
}

.driver-acceptance-card {
    background: #ffffff;
    border: 1px solid #d1e3d7;
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.driver-acceptance-card.waiting {
    background: #fffbf5;
    border-color: #fcd34d;
}

.driver-acceptance-card.accepted {
    background: #f0fdf4;
    border-color: #86efac;
}

.driver-acceptance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.driver-acceptance-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e3a29;
    display: flex;
    align-items: center;
    gap: 6px;
}

.driver-acceptance-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.driver-acceptance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.driver-acceptance-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.btn-accept-proxy {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease;
    font-family: inherit;
}

.btn-accept-proxy:hover {
    background: #166534;
}

.btn-accept-proxy:disabled {
    opacity: 0.6;
    cursor: wait;
}

.btn-open-driver-portal {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease;
    font-family: inherit;
}

.btn-open-driver-portal:hover {
    background: #dbeafe;
}

/* Agents Page: Dual View Mode Switcher (Tree vs Table) */
.agents-page-wrapper {
    display: flex;
    flex-direction: column;
}

.agents-top-heading {
    margin-bottom: 20px;
}

.agents-heading-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.agents-view-switcher {
    display: inline-flex;
    align-items: center;
    background: #edf4ef;
    border: 1px solid #cfded4;
    border-radius: 30px;
    padding: 3px;
    gap: 4px;
}

.agents-view-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #436351;
    cursor: pointer;
    transition: all 0.16s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    user-select: none;
}

.agents-view-btn:hover {
    color: #174230;
    background: rgba(255, 255, 255, 0.6);
}

.agents-view-btn.active {
    background: #214c3b;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 76, 59, 0.22);
}

.agents-view-btn .view-icon {
    font-size: 14px;
}

.agents-view-content {
    animation: liveFadeIn 0.2s ease-out;
}

@keyframes liveFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   WITHDRAWALS & PROMPTPAY PAYOUT SYSTEM STYLES
   ========================================================================= */

/* Table Bank Account Cell */
.bank-account-card-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.bank-header-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bank-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid;
}

.bank-verified-tag {
    font-size: 10px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 1px 6px;
    border-radius: 4px;
}

.bank-name-line {
    font-size: 12px;
    color: #334155;
}

.bank-copy-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.bank-label {
    font-size: 11px;
    color: #64748b;
    min-width: 60px;
}

.bank-number-text {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.bank-number-text.promptpay-text {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.btn-copy-chip {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.btn-copy-chip:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-copy-chip.pp-copy {
    color: #0284c7;
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.btn-copy-chip.pp-copy:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.no-bank-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 11px;
    color: #b45309;
    font-weight: 500;
}

/* QR Code Table Cell */
.qr-cell-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: all 0.16s ease;
}

.qr-cell-wrapper:hover {
    background: #eff6ff;
    transform: scale(1.04);
}

.qr-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 2px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.btn-view-qr {
    background: #0284c7;
    color: #ffffff;
    border: none;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-view-qr:hover {
    background: #0369a1;
}

/* Member Bank/PromptPay Status inline badge for Wallets / Payouts / Commissions */
.member-bank-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.member-name-tag {
    font-weight: 600;
    color: #1e293b;
}

.promptpay-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    width: fit-content;
}

.promptpay-badge-inline.ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-weight: 600;
}

.promptpay-badge-inline.missing {
    background: #fff7ed;
    color: #c2410c;
    border: 1px dashed #fdba74;
    font-weight: 500;
}

/* Withdrawal Payout Card in Drawer */
.withdrawal-payout-card {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08);
}

.withdrawal-payout-header {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.payout-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.withdrawal-payout-body {
    padding: 16px 20px;
    background: #fafcff;
}

.payout-content-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
    align-items: start;
}

.payout-details-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payout-detail-block {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}

.payout-detail-block.bank-box {
    border-color: #cbd5e1;
    background: #ffffff;
}

.payout-block-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.payout-member-name {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #0f172a;
}

.payout-clipboard-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bank-number-highlight {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.bank-number-highlight.promptpay-highlight {
    color: #0284c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.btn-copy-action {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.btn-copy-action:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-copy-action.pp {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.btn-copy-action.pp:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.payout-amount-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-mark-paid {
    background: #16a34a;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-mark-paid:hover {
    background: #15803d;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
    transform: translateY(-1px);
}

/* QR Code Column in Drawer */
.payout-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payout-qr-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.payout-qr-card:hover {
    border-color: #0284c7;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.18);
    transform: translateY(-2px);
}

.payout-qr-badge {
    font-size: 11px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 10px;
}

.payout-qr-image {
    width: 170px;
    height: 170px;
    object-fit: contain;
    border-radius: 6px;
}

.payout-qr-amount {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.payout-qr-zoom-hint {
    font-size: 10px;
    color: #64748b;
}

.payout-no-qr {
    text-align: center;
    padding: 24px 12px;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 12px;
    color: #64748b;
}

/* Dedicated PromptPay QR Modal */
.promptpay-qr-modal {
    background: #ffffff;
    width: 440px;
    max-width: 95vw;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.35);
    animation: liveModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.qr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.qr-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qr-promptpay-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0079c8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.promptpay-logo-img {
    height: 18px;
    object-fit: contain;
}

.qr-code-frame {
    background: #ffffff;
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 14px;
}

.qr-large-image {
    width: 250px;
    height: 250px;
    object-fit: contain;
    display: block;
}

.qr-amount-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.qr-amount-display .amount-label {
    font-size: 12px;
    color: #64748b;
}

.qr-amount-display .amount-number {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.qr-account-info-box {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.qr-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qr-label {
    color: #64748b;
    font-size: 12px;
    min-width: 80px;
}

.qr-value {
    color: #1e293b;
}

.qr-number {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-weight: 700;
    color: #0f172a;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.qr-scan-guide {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.qr-modal-footer {
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

/* Toast Clipboard Floating Notification */
.toast-clipboard-alert {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2200;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    animation: toastSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #334155;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Live Tabs Badge Counts */
.live-tabs button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.live-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: #edf4ef;
    color: #2b6145;
    border: 1px solid #d5e5da;
    transition: all 0.15s ease;
}

.live-tabs button:hover .live-tab-badge {
    background: #e2ede5;
    color: #1f4f36;
}

.live-tabs button.active .live-tab-badge {
    background: #ffffff !important;
    color: #1b4533 !important;
    border-color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.live-tab-badge.zero {
    opacity: 0.6;
    background: #f1f5f2;
    color: #798e81;
    border-color: #e2e8e4;
}

.live-tabs button.active .live-tab-badge.zero {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Transfer Nav Toggle Bar & Slip Styles */
.transfer-nav-toggle-bar {
    display: inline-flex;
    background: #f1f5f2;
    padding: 3px;
    border-radius: 20px;
    gap: 4px;
    border: 1px solid #dce6df;
}

.transfer-toggle-btn {
    border: none;
    background: transparent;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #4f6356;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.transfer-toggle-btn:hover {
    background: #e2ede5;
    color: #1f4332;
}

.transfer-toggle-btn.active {
    background: #214c3b;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.slip-thumb-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.slip-thumb-wrap:hover {
    background: #f0fdf4;
}

.slip-thumbnail-mini {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease;
}

.slip-thumb-wrap:hover .slip-thumbnail-mini {
    transform: scale(1.08);
}

.slip-zoom-badge {
    font-size: 10px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 1px 6px;
    border-radius: 8px;
}

.btn-quick-paid {
    transition: all 0.15s ease;
}

.btn-quick-paid:hover {
    background: #047857 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

/* =========================================================================
   INCOME & REVENUE BREAKDOWN SYSTEM (ค่าแนะนำชั้นลูก, ค่าแนะนำชั้นหลาน, ค่ารถ, ยอดรวม)
   ========================================================================= */

.income-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .income-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .income-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.income-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.income-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.income-kpi-card.selected {
    border-width: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.income-kpi-card.kpi-child {
    border-left: 4px solid #0284c7;
}
.income-kpi-card.kpi-child.selected {
    border-color: #0284c7;
    background: linear-gradient(to bottom right, #f0f9ff, #ffffff);
}

.income-kpi-card.kpi-grandchild {
    border-left: 4px solid #8b5cf6;
}
.income-kpi-card.kpi-grandchild.selected {
    border-color: #8b5cf6;
    background: linear-gradient(to bottom right, #f5f3ff, #ffffff);
}

.income-kpi-card.kpi-vehicle {
    border-left: 4px solid #059669;
}
.income-kpi-card.kpi-vehicle.selected {
    border-color: #059669;
    background: linear-gradient(to bottom right, #ecfdf5, #ffffff);
}

.income-kpi-card.kpi-grand {
    border-left: 4px solid #d97706;
}
.income-kpi-card.kpi-grand.selected {
    border-color: #d97706;
    background: linear-gradient(to bottom right, #fffbeb, #ffffff);
}

.kpi-icon-wrap {
    font-size: 26px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.income-kpi-card.kpi-child .kpi-icon-wrap { background: #e0f2fe; }
.income-kpi-card.kpi-grandchild .kpi-icon-wrap { background: #ede9fe; }
.income-kpi-card.kpi-vehicle .kpi-icon-wrap { background: #d1fae5; }
.income-kpi-card.kpi-grand .kpi-icon-wrap { background: #fef3c7; }

.kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-top: 2px;
}

.income-kpi-card.kpi-child .kpi-value { color: #0369a1; }
.income-kpi-card.kpi-grandchild .kpi-value { color: #6d28d9; }
.income-kpi-card.kpi-vehicle .kpi-value { color: #047857; }
.income-kpi-card.kpi-grand .kpi-value { color: #b45309; }

.kpi-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Income Filter Bar */
.income-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.income-filter-bar .filter-caption {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-right: 4px;
}

.income-filter-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.income-filter-pill:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.income-filter-pill.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.3);
}

/* Income Stage Sub-Tabs (ยอดยังไม่โอน vs โอนแล้ว) */
.income-stage-tabs-wrap {
    margin-bottom: 14px;
}

.income-stage-tabs {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.income-stage-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.income-stage-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
}

.income-stage-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.income-stage-tab .stage-icon {
    font-size: 14px;
}

.income-stage-tab .stage-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
}

.income-stage-tab .stage-badge.pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.income-stage-tab .stage-badge.paid {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.income-stage-tab .stage-badge.all {
    background: #e2e8f0;
    color: #334155;
}

/* Income Badges */
.income-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.income-badge-child {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.income-badge-grandchild {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.income-badge-vehicle {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.income-badge-default {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Income Detail Modal */
.income-detail-modal-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.income-modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.income-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px;
}

@media (max-width: 640px) {
    .income-modal-grid {
        grid-template-columns: 1fr;
    }
}

.income-modal-cell {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.income-modal-cell.highlight {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.income-modal-cell .cell-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.income-modal-cell .cell-val {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.income-modal-cell .cell-val-large {
    font-size: 22px;
    color: #059669;
    font-weight: 800;
}

/* =========================================================================
   COMMISSION SETTLEMENT & BATCH CLOSING SYSTEM
   ========================================================================= */

.btn-settle-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
}

.btn-settle-action:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45);
    transform: translateY(-1px);
}

.btn-settle-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.income-batch-pill {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    margin-top: 3px;
    white-space: nowrap;
}

.income-unsettled-pill {
    display: inline-block;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    margin-top: 3px;
    white-space: nowrap;
}

.income-vehicle-instant-pill {
    display: inline-block;
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    margin-top: 3px;
    white-space: nowrap;
}

.income-vehicle-paid-pill {
    display: inline-block;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    margin-top: 3px;
    white-space: nowrap;
}

.income-category-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.income-category-alert.vehicle {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.income-category-alert.referral {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #5b21b6;
}

.income-category-alert .alert-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.3;
}

.income-category-alert .alert-body {
    flex: 1;
}

/* Settlement Modal Dialog */
.settlement-modal-dialog {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    width: 95%;
    max-width: 820px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalScaleIn 0.2s ease-out;
}

.settlement-modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.settlement-modal-header .header-titles {
    flex: 1;
    margin-right: 16px;
}

.settlement-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.settlement-control-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .settlement-control-card {
        grid-template-columns: 1fr;
    }
}

.control-col {
    display: flex;
    flex-direction: column;
}

.control-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.cutoff-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settle-date-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
    background: #ffffff;
}

.settle-date-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-refresh-preview {
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-refresh-preview:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
}

.settle-note-input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    color: #0f172a;
    background: #ffffff;
}

.settle-note-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.control-hint {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

.settle-loading-box {
    padding: 30px;
    text-align: center;
}

/* Settlement Preview KPI Grid */
.settle-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .settle-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.settle-kpi-card {
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.settle-kpi-card.child {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    border-color: #bae6fd;
}
.settle-kpi-card.child .kpi-amt { color: #0284c7; }

.settle-kpi-card.grandchild {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
    border-color: #ddd6fe;
}
.settle-kpi-card.grandchild .kpi-amt { color: #7c3aed; }

.settle-kpi-card.total {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border-color: #a7f3d0;
}
.settle-kpi-card.total .kpi-amt { color: #059669; }

.settle-kpi-card .kpi-tag {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 4px;
}

.settle-kpi-card .kpi-amt {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.settle-kpi-card .kpi-amt.large {
    font-size: 24px;
}

.settle-kpi-card .kpi-cnt {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

.settle-period-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: #334155;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.settle-zero-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    color: #334155;
    margin-bottom: 16px;
}

.settle-table-section {
    margin-top: 14px;
}

.settle-table-section .section-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.settle-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.settle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.settle-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.settle-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.settle-table tr:last-child td {
    border-bottom: none;
}

.settle-table tr:hover td {
    background: #f8fafc;
}

.settlement-modal-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.settlement-modal-footer .footer-hint {
    font-size: 11px;
    color: #64748b;
    max-width: 420px;
}

.settlement-modal-footer .footer-actions {
    display: flex;
    gap: 10px;
}

.btn-confirm-settle {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
    transition: all 0.2s ease;
}

.btn-confirm-settle:hover:not(:disabled) {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
}

.btn-confirm-settle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Row Action Icons for List Tables (Eye for View, Pen for Edit) */
.live-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.live-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    background: #f8fafc;
    line-height: 1;
    padding: 0;
}

.live-action-icon-btn.btn-view {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.live-action-icon-btn.btn-view:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
    transform: translateY(-1px);
}

.live-action-icon-btn.btn-edit {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.live-action-icon-btn.btn-edit:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

/* Also for text-button icon in BookingList */
.btn-view-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.btn-view-icon:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px) !important;
}









.journey-search{margin:12px 0}.journey-search>div{display:flex;gap:8px}.journey-search input{min-width:0;flex:1;padding:10px;border:1px solid #cbd5e1;border-radius:8px}.journey-result{display:block;width:100%;text-align:left;background:#f0f7f3;border:1px solid #d9e7dd;padding:10px;cursor:pointer}.journey-summary{background:#eef6f1;padding:18px;border-radius:14px;margin:16px 0}.journey-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.journey-summary dd{text-align:right;margin:0}.journey-options{display:grid;gap:12px;margin:16px 0}.journey-options label{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.journey-options select{max-width:100%;padding:8px}.journey-options input[type=number]{width:80px}

.booking-rate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;padding:0 24px 24px}.booking-rate-card{padding:18px;background:#f5f8f5;border:1px solid #dce6df;border-radius:12px;display:flex;flex-direction:column;gap:12px}.booking-rate-card label span,.booking-rate-card small{display:block;color:#718278;font-size:12px}.booking-rate-card input{padding:12px;border:1px solid #ceddd3;border-radius:8px;width:100%;font-family:inherit}.booking-rate-settings .live-toolbar p{font-size:12px;color:#718278}

.company-account-form{padding:0 24px 24px;display:grid;gap:12px}.company-account-form label{display:grid;gap:6px}.company-account-form input{padding:12px;border:1px solid #ccdcd2;border-radius:8px}.company-payment{padding:16px;border:1px solid #d9e5de;border-radius:12px;background:white}.company-payment dl{display:grid;grid-template-columns:1fr 2fr;text-align:left;gap:12px}.company-payment dd{margin:0;overflow-wrap:anywhere}

/* =========================================================
   VANFORHIRE DEVICE NOTIFICATIONS & VISUAL ALERTS
   ========================================================= */
.vanforhire-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 32px);
}

.vanforhire-toast {
    position: relative;
    pointer-events: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-start;
    padding: 14px 16px 14px 18px;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: 1px solid #e2e8f0;
}

.vanforhire-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.22);
}

.vanforhire-toast.toast-fadeout {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.vanforhire-toast .toast-side-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background: #dc2626;
}

.vanforhire-toast.toast-booking .toast-side-bar {
    background: #0284c7;
}

.vanforhire-toast .toast-icon-wrap {
    font-size: 24px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.vanforhire-toast .toast-content-wrap {
    flex: 1;
    min-width: 0;
}

.vanforhire-toast .toast-tag-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.vanforhire-toast .toast-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
}

.vanforhire-toast.toast-booking .toast-tag {
    background: #e0f2fe;
    color: #0369a1;
}

.vanforhire-toast .toast-time {
    font-size: 10.5px;
    color: #94a3b8;
}

.vanforhire-toast .toast-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vanforhire-toast .toast-desc {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vanforhire-toast .toast-close-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.vanforhire-toast .toast-close-btn:hover {
    color: #334155;
}

/* Header Bell Badge */
.topbar .icon-button.has-badge {
    background: #fff5f5 !important;
    border-color: #fecaca !important;
}

.topbar .icon-button.has-badge .bell-icon-inner {
    display: inline-block;
    transform-origin: top center;
}

.topbar-unread-pill.pulsing {
    background: #dc2626 !important;
}

/* Device Notification Controls in Setup & Notifications */
.device-notify-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-top: 20px;
}

.device-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.device-notify-title-group h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.device-notify-title-group p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.device-notify-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-device-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-device-toggle.is-active {
    background: #166534;
    color: #ffffff;
    border-color: #15803d;
    box-shadow: 0 3px 10px rgba(22, 101, 52, 0.25);
}

.btn-device-toggle.is-active:hover {
    background: #14532d;
}

.btn-device-toggle.is-inactive {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}

.btn-device-toggle.is-inactive:hover {
    background: #e2e8f0;
    color: #334155;
}

.btn-device-test {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-device-test:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.btn-device-pwa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-device-pwa:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.device-notify-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.device-notify-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}

.device-notify-info-box strong {
    color: #0f172a;
    display: block;
    margin-bottom: 2px;
}

/* ==========================================================
   MOBILE & TABLET RESPONSIVE TOPBAR CLEANUP (< 992px)
   ========================================================== */
@media (max-width: 992px) {
    .topbar {
        padding: 0 12px !important;
        height: 52px !important;
    }
    .topbar .header-actions {
        gap: 8px !important;
    }
    /* Strictly hide unnecessary items on mobile topbar */
    .topbar .header-actions .top-account,
    .topbar .header-actions .live-button,
    .topbar .header-actions .topbar-notif-pill,
    .topbar .header-actions .demo {
        display: none !important;
    }
    .admin-to-front-btn {
        padding: 5px 11px !important;
        font-size: 12px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    .topbar .icon-button {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    .breadcrumb {
        max-width: 140px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        display: none !important;
    }
    .admin-to-front-btn .front-btn-text {
        display: none !important;
    }
    .admin-to-front-btn {
        padding: 5px 9px !important;
    }
}