/**
 * @version CVS: 4.0.0
 * @package com_ishiply
 * @copyright   2025 joomlaeye
 * @license Private Extension
 * @author  Joomlaeye <joomlaeye@gmail.com>
 */
.button-container {width: 100%;max-width: 1200px;display: flex;justify-content: space-around;align-items: center;padding: 20px;box-sizing: border-box;}
.button-container .button {flex: 1;max-width: 300px;margin: 10px;padding: 40px;background-color: #007bff;color: white;text-align: center;font-size: 14px;font-weight: bold;border-radius: 15px;text-decoration: none;transition: background-color 0.3s, transform 0.3s;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.button:hover {background-color: #0056b3;}
.kpi-container,.graph-container {width: 100%;max-width: 1200px;display: flex;justify-content: space-around;align-items: flex-start;flex-wrap: wrap;padding: 20px;box-sizing: border-box;}
.kpi,.graph {flex: 1;max-width: 300px;margin: 10px;padding: 20px;background-color: #fff;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);text-align: center;}
.kpi h3,.graph h3 {margin: 0 0 10px;font-size: 14px;}
.kpi p {margin: 0;font-size: 14px;font-weight: bold;}

/* Shipment */
/*.shipment-container .control-group {position: relative;}
.shipment-container .control-label {position: absolute;top: -10px;left: 10px;font-size: 14px;color: #777;background-color: #fff;padding: 0 5px;transition: 0.3s;pointer-events: none;z-index: 1;}*/
#shipments-container{font-size: 14px;}
.shipment-container .container, 
.addressbook-container, 
.ratesheets-container, 
.fuelsheets-container, 
.companysettings-container, 
.integration-container, 
.fuels-container {max-width: 1200px;margin: auto;background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}
.shipment-container .top-section {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-bottom: 10px;padding: 15px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 8px;}
.shipment-container .shipment-field, 
.addressbook-container .addressbook-col .addressbook-field, 
.ratesheets-container .ratesheets-field, 
.billing-lines-container .billing-lines-field, 
.fuelsheets-container .fuelsheets-field, 
.companysettings-container .companysettings-field, 
.integration-container .integration-settings-field, 
.drivers-container .drivers-field, 
.vehicles-container .vehicles-field, 
.carriers-container .carriers-field  {position: relative;margin-bottom: 10px;}
.fuels-container .fuel-field {position: relative;margin-bottom: 20px;}

fieldset.companysettings-radio-field{display: block;min-inline-size: min-content;margin-inline: 2px;padding-block: 0.05em 0.125em;padding-inline: 0.50em;margin: 0;margin-top: -8px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 5px;background: white;}
fieldset.companysettings-radio-field legend.radio-label {float: none;font-size: 10px;padding: 0px 5px;width: auto;top: -8px;color: #007bff;background: white;}
.companysettings-radio-field input[type="radio"] {  display: none;}
.companysettings-radio-field label {padding: 0px 5px;border: 1px solid #ccc;border-radius: 4px;cursor: pointer;font-size: 14px;color: #000;background-color: #fff;transition: all 0.3s ease;}
.companysettings-radio-field input[type="radio"]:checked + label {background-color: #007bff;color: white;}
.video-icon{color: #a51f18; font-size: 36px; cursor: pointer;}
.shipment-container .shipment-field label, 
.fuels-container .fuel-field label, 
.addressbook-container .addressbook-field label, 
.ratesheets-container .ratesheets-field label, 
.billing-lines-container .billing-lines-field label, 
.fuelsheets-container .fuelsheets-field label, 
.companysettings-container .companysettings-field label, 
.integration-container .integration-settings-field label, 
.drivers-container .drivers-field label, 
.vehicles-container .vehicles-field label, 
.carriers-container .carriers-field label {position: absolute;top: 8px;left: 10px;font-size: 12px;color: #aaa;pointer-events: none;transition: all 0.3s; white-space: nowrap;}
.shipment-container .shipment-field .pickup_route_order + label,
.shipment-container .shipment-field .dropoff_route_order + label,
.shipment-container .shipment-field.flatpickr label,
.shipment-container .shipment-field input:focus+label,
.shipment-container .shipment-field input:not(:placeholder-shown)+label,
.shipment-container .shipment-field select:focus+label,
.shipment-container .shipment-field select:not([value=""]) + label, 
.addressbook-container .addressbook-field input:focus+label, 
.addressbook-container .addressbook-field input:not(:placeholder-shown)+label, 
.addressbook-container .addressbook-field select:focus+label, 
.addressbook-container .addressbook-field select:not([value=""]) + label,
.ratesheets-container .ratesheets-field input:focus+label, 
.ratesheets-container .ratesheets-field input:not(:placeholder-shown)+label, 
.ratesheets-container .ratesheets-field select:focus+label, 
.ratesheets-container .ratesheets-field select:not([value=""]) + label,
.ratesheets-container .ratesheets-field label.focused, 
.billing-lines-container .billing-lines-field input:focus+label, 
.billing-lines-container .billing-lines-field input:not(:placeholder-shown)+label, 
.billing-lines-container .billing-lines-field select:focus+label, 
.billing-lines-container .billing-lines-field select:not([value=""]) + label,
.billing-lines-container .billing-lines-field label.focused, 
.fuelsheets-container .fuelsheets-field input:focus+label, 
.fuelsheets-container .fuelsheets-field input:not(:placeholder-shown)+label, 
.fuelsheets-container .fuelsheets-field select:focus+label, 
.fuelsheets-container .fuelsheets-field select:not([value=""]) + label,
.fuelsheets-container .fuelsheets-field label.focused, 
.integration-container .integration-settings-field label.focused, 
.companysettings-container .companysettings-field input:focus+label, 
.companysettings-container .companysettings-field input:not(:placeholder-shown)+label, 
.companysettings-container .companysettings-field select:focus+label, 
.companysettings-container .companysettings-field select:not([value=""]) + label, 
.fuels-container .fuel-field.flatpickr label,
.fuels-container .fuel-field input:focus+label,
.fuels-container .fuel-field input:not(:placeholder-shown)+label,
.fuels-container .fuel-field select:focus+label,
.fuels-container .fuel-field select:not([value=""]) + label, 
.drivers-container .drivers-field label.focused, 
.vehicles-container .vehicles-field label.focused, 
.carriers-container .carriers-field label.focused {top: -8px;left: 10px;font-size: 10px;color: #007bff;background: #fff;padding: 0 5px;white-space: nowrap;}
.shipment-container .shipment-field input, .shipment-container .shipment-field select, 
.addressbook-container .addressbook-field input, .addressbook-container .addressbook-field select, 
.ratesheets-container .ratesheets-field input, .ratesheets-container .ratesheets-field select, 
.billing-lines-container .billing-lines-field input,  .billing-lines-container .billing-lines-field select, 
.fuelsheets-container .fuelsheets-field input, .fuelsheets-container .fuelsheets-field select, 
.companysettings-container .companysettings-field input, .companysettings-container .companysettings-field select, 
.fuels-container .fuel-field input, .fuels-container .fuel-field select, 
.integration-container .integration-settings-field select, 
.drivers-container .drivers-field select, 
.drivers-container .drivers-field input, 
.vehicles-container .vehicles-field select, 
.vehicles-container .vehicles-field input, 
.carriers-container .carriers-field select, 
.carriers-container .carriers-field input {width: 100%;padding: 6px 8px;border: 1px solid #ccc;border-radius: 4px;outline: none;font-size: 14px;transition: all 0.3s;}
.shipment-container .shipment-field input:focus,
.shipment-container .shipment-field select:focus {border-color: #007bff;}

.billing-lines-container .billing-lines-field input:read-only, .billing-lines-container .billing-lines-field select:read-only {cursor: not-allowed; background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));}

/*.shipment-container .address-section {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-bottom: 10px;}*/
.shipment-container .section-divider {display: flex;justify-content: center;align-items: center;margin: 20px 0;}
.shipment-container .section-divider hr {flex-grow: 1;border: none;height: 1px;background-color: #ccc;margin: 0 10px;}
.shipment-container .section-divider span {font-size: 14px;font-weight: bold;color: #333;}
.shipment-container .address-section {display: grid;grid-template-columns: 1fr 1fr; /* Pickup, Dropoff, and Remove button */gap: 10px; /* Space between columns */align-items: center; /* Vertical alignment for all items */}
.shipment-container .remove-btn, 
.ratesheets-container .remove-btn, 
.billing-lines-container .remove-btn, 
.fuelsheets-container .remove-btn, 
.integration-container .remove-btn, 
.drivers-container .remove-btn, 
.vehicles-container .remove-btn, 
.carriers-container .remove-btn  {background-color: red;color: white;border: none;padding: 5px 10px;cursor: pointer;border-radius: 5px;font-size: 0.9rem;justify-self: center; /* Center the button in its column */}
/*.shipment-container .remove-btn {background-color: red;color: white;border: none;padding: 5px 10px;cursor: pointer;border-radius: 5px;font-size: 0.9rem;}*/
.shipment-container .address, .addressbook-container .addressbook-col, .companysettings-container .companysettings-col {padding: 15px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 8px;}
.ratesheets-container th, .ratesheets-container td, 
.billing-lines-container th, .billing-lines-container td, 
.fuelsheets-container th, .fuelsheets-container td{background-color: #f9f9f9; padding: 5px;}
.shipment-container .address .shipment-field {margin-bottom: 10px;}
.shipment-container .map-container {height: 200px;margin-bottom: 10px;}
.shipment-container .map-toggle-button {background-color: #007bff;color: white;border: none;padding: 10px;cursor: pointer;border-radius: 5px;transition: background-color 0.3s;}
.shipment-container .map-toggle-button:hover {background-color: #0056b3;}

#osm-map{height: 400px;}
.shipment-container .shipment-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}
.shipment-container .bottom-row {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
.shipment-container .button-section, 
.fuels-container .button-section, 
.addressbook-container .button-section, 
.ratesheets-container .button-section, 
.billing-lines-container .button-section, 
.fuelsheets-container .button-section, 
.companysettings-container .button-section, 
.integration-container .button-section, 
.integration-container .integration-right .button-section {display: flex;justify-content: flex-end;gap: 10px;margin-top: 5px;}
.shipment-container .button-section button, .shipment-container .button-section .button, .shipment-container .create-invoice, 
.fuels-container .button-section button, .fuels-container .button-section .button, 
.addressbook-container .button-section button, .addressbook-container .button-section .button, 
.ratesheets-container button, .ratesheets-container .button,
.billing-lines-container button, .billing-lines-container .button, 
.fuelsheets-container button, .fuelsheets-container .button, 
.rate-container .save-shipment-price, 
.companysettings-container .button-section button, .companysettings-container .button-section .button, 
.integration-container button,
.shipment-container .add-cargo-btn,  
#cargoModal button, 
.integration-container .integration-right .button-section button, 
.drivers-container button, 
.vehicles-container button, 
.carriers-container button  {padding: 7px 12px;font-size: 14px;border: none;border-radius: 5px;cursor: pointer;text-decoration: none;}
.shipment-container .add-stop, .shipment-container .button.back {background-color: #007bff;color: white;}
.shipment-container .add-shipment, .shipment-container .view-shipment, 
.fuels-container .add-edit-fuel, .fuels-container .import-btn, 
.addressbook-container .add-edit-address, 
.ratesheets-container .add-edit-ratesheet, .ratesheets-container .add-more-rates, 
.billing-lines-container .save-billing-lines, .billing-lines-container .add-billing-lines,  
.fuelsheets-container .add-edit-fuelsheet, .fuelsheets-container .add-more-rates, 
.rate-container .save-shipment-price , 
.companysettings-container .add-edit-companysetting, 
.integration-container .save-btn, 
.drivers-container .add-more-drivers,
.save-drivers, 
.vehicles-container .add-more-vehicles,
.save-vehicles, 
.carriers-container .add-more-carriers,
.save-carriers {background-color: #28a745;color: white;}
.shipment-container .add-stop:hover, .shipment-container .button.back:hover {background-color: #0056b3;}
.shipment-container .add-shipment:hover {background-color: #1c7430;}
.shipment-container .create-invoice {background-color: #007bff;color: white;vertical-align: middle;padding: 3px 6px;}
.shipment-container .add-cargo-btn {background: #17a2b8;color: #fff;margin: 5px 0px 0px 5px;}
.shipment-container .add-cargo-btn:hover {background: #117888;}
 /* Styles for the tabs */
 .shipment-container .tabs {display: flex;justify-content: space-between;margin: 5px 0;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 8px;overflow: hidden;flex-wrap: nowrap;}
.shipment-container .tab {flex: 1;text-align: center;padding: 12px;cursor: pointer;transition: background-color 0.3s;position: relative;}
.shipment-container .tab:hover {background-color: #ddd;}
.shipment-container .tab.active {background-color: #007bff;color: #fff;}
/*.shipment-container .tab i {display: block;font-size: 24px;margin-bottom: 5px;}*/
.shipment-container .tab-content{display: none;}
.shipment-container .tab-content.active{ display: block;}
.custom-div-icon {background-color: white;color: black;border: 2px solid black;border-radius: 50%;font-size: 14px;text-align: center;width: 40px;height: 40px;line-height: 40px;display: flex;align-items: center;justify-content: center;}
/*.custom-div-icon {background-color: white;color: black;border: 1px solid #ccc;border-radius: 50%;font-size: 10px;text-align: center;width: 24px;height: 24px;line-height: 40px;display: flex;align-items: center;justify-content: center;}*/
.custom-div-icon .fa {font-size: 18px;margin-right: 5px;}
.custom-div-icon .number {font-size: 14px;}
.tabs-container {display: flex;justify-content: space-around;background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 8px;overflow: hidden;/*margin: 20px 20px 0 20px;  Adjusted margin to ensure spacing is consistent */}
.tabs-container .tabs {display: flex;width: 100%;}
.tabs-container .tab {padding: 15px 20px;cursor: pointer;flex-grow: 1;text-align: center;border-right: 1px solid #ddd;transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;}
.tabs-container .tab:last-child {border-right: none;}
.tabs-container .tab:hover {background-color: #e0e0e0;box-shadow: inset 0 -3px 0 #007bff;}
.tabs-container .tab.active {background-color: #007bff;color: #fff;box-shadow: inset 0 -3px 0 #0056b3;}
.content-container {display: flex;flex-direction: column;flex: 1;background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);/*margin: 0 20px 20px 20px;*/border-radius: 8px;overflow: hidden;}
.shipment-list {flex: 1;overflow-y: auto;padding: 10px;}

.assign-button, .edit-assignment {background-color: #007bff;color: white;border: none;padding: 3px 6px;cursor: pointer;border-radius: 5px;transition: background-color 0.3s;}
.assign-button:hover, .edit-assignment:hover {background-color: #0056b3;}
.assigned-driver, .assigned-vehicle, .assigned-carrier{ margin-right: 2px; }
.modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.4);padding-top: 60px;}
.modal-fullscreen{padding: initial;}
.modal-content {background-color: #fefefe;margin: 5% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 500px;border-radius: 10px;z-index: 1001;}
.modal-bg .modal-content{max-width: 900px;}
.modal-fullscreen .modal-content{max-width: initial; padding: initial; margin: initial;}
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover,
.close:focus {color: black;text-decoration: none;cursor: pointer;}
.modal select {width: 100%;padding: 6px 8px;margin: 10px 0;}
.modal button {background-color: #007bff;color: white;border: none;padding: 7px 12px;cursor: pointer;border-radius: 5px;transition: background-color 0.3s;}
.modal button:hover {background-color: #0056b3;}
.icon-button {background: none;border: none;cursor: pointer;margin: 0 3px;}
.location-number {display: inline-block;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;background-color: #007bff;color: white;text-align: center;margin-right: 5px;}
.price-distance {display: flex;flex-direction: column;}
.distance {margin-top: 5px;font-weight: bold;color: #007bff;}
#shipments-osm-map .leaflet-control-container .leaflet-routing-container-hide {display: none;}
.custom-marker-label {font-size: 12px;font-weight: bold;color: black;text-align: center;white-space: nowrap;background: teal;padding: 5px;border-radius: 5px;border: 1px solid black;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.marker-label {text-shadow: 1px 1px white; position: absolute; transform: translate(7%, -36%);}

.drivers-container, 
.vehicles-container, 
.carriers-container {background: #f9fbfd; border-radius: 8px; box-shadow: 0 2px 8px rgba(30, 51, 84, 0.04); padding: 24px 20px; margin-bottom: 28px; border: 1.5px solid #e5e8ea;}
/*
.integration-container .integrations{display: flex;flex-wrap: wrap;justify-content: space-between; gap: 5px;background: #f9fbfd; border-radius: 8px; box-shadow: 0 2px 8px rgba(30, 51, 84, 0.04); padding: 24px 20px; margin-bottom: 28px; border: 1.5px solid #e5e8ea;}
.integration-container .integrations .integration {text-align: center;width: 19%; padding: 15px;border: 1px solid #ddd;border-radius: 8px;background: #fff;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;align-items: center;}
.integration-container .integrations .integration img {width: 200px;height: auto; margin-bottom: 10px;}
.integration-container .integrations button, .integration-container .integrations .button {width: 100%;padding: 8px 15px;border: none;cursor: pointer;border-radius: 5px;font-size: 14px;margin: 5px 0;text-decoration: none;flex: 1;}
.integration-container .integrations .link-btn, .integration-container .integrations .connected-btn {background: #28a745;color: white;}
.integration-container .integrations .disconnect-btn {background: #007bff;color: white;}
.integration-container .integrations .connected-btn {cursor: default;}
.integration-container .integrations button:disabled, .integration-container .integrations .button:disabled {opacity: 0.5;cursor: not-allowed;}
.integration-container .integrations .integration .input-group{ align-items: center;}
.integration-container .integrations .integration .input-group .video-icon{color: #a51f18; font-size: 25px; cursor: pointer; border: solid 1px #ccc; padding: 5px;border-radius: 5px;}
*/
.integration-container .sub-tab-bar {display: flex;width: 100%;margin-bottom: 20px;}
.integration-container .sub-tab {flex: 1;text-align: center;padding: 12px 0;cursor: pointer;background: #f8fafc;border: 1px solid #e5e7eb;}
.integration-container .sub-tab.active {background: #ffffff;}
.integration-container .sub-tab.disabled {opacity: 0.5;cursor: not-allowed;}
.integration-container .sub-tab-content {display: none;}
.integration-container .sub-tab-content.active {display: block;}
.integration-container .step-frame {background: #ffffff;border-radius: 10px;border: 1px solid #e5e7eb;padding: 20px;margin-bottom: 20px;display: flex;gap: 20px;position: relative;}
.integration-container .integration-card {display: flex;flex-direction: row;gap: 20px;}
.integration-container .integration-left {width: 300px;flex-shrink: 0;display: flex;flex-direction: column;align-items: center;}
.integration-container .logo-box {width: 250px;height: 250px;background: #ffffff;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;border-radius: 10px;border: 1px solid #e5e7eb;}
.integration-container .logo-box img {max-width: 80%;max-height: 80%;}
.integration-container .integration-left .integration-buttons {display: flex;flex-direction: column;gap: 10px;width: 100%;align-items: center;}
.integration-container .connect-btn {width: 220px;border-radius: 6px !important;padding: 12px 0 !important;font-weight: bold;font-size: 1rem !important;color: #fff;text-align: center;border: none !important;cursor: pointer !important;text-decoration: none;}
.integration-container .qbo-btn {background-color: #2ca01c;}
.integration-container .xero-btn {background-color: #2d9cdb;}
.integration-container .fa-btn {background-color: #4f46e5;}
.integration-container .divider {width: 1px;background: #e5e7eb;}
.integration-container .integration-right {flex: 1;display: flex;flex-direction: column;}
.integration-container .integration-right .button-section {position: absolute;bottom: 20px;right: 20px;}
.integration-container .video-btn {background-color: #10b981; color: #fff;}
.integration-container .coming-logos {display: flex;flex-direction: row !important;justify-content: center;gap: 20px;width: 100%;}
.integration-container .overview-content {display: flex;flex-direction: column;gap: 12px;}

.integration-container .integrationtabs, 
.fuels-container .fueltabs, 
.companysettings-container .settingstabs { display: flex; gap: 2px; margin-bottom: 20px;}
.integration-container .integrationtab, 
.fuels-container .fueltab, 
.companysettings-container .settingstab { background: #f3f7fa; border: none; padding: 5px 10px; font-weight: 500; cursor: pointer; border-radius: 8px 8px 0 0; outline: none; transition: background 0.18s; color: #1e3354; border-bottom: 2px solid transparent; flex: 1; text-align: center; }
.integration-container .integrationtab.active, 
.fuels-container .fueltab.active, 
.companysettings-container .settingstab.active { background: #fff; border-bottom: 2px solid #2186eb; color: #2186eb;}
.integration-container .integration-tab-content, 
.fuels-container .fuel-tab-content, 
.companysettings-container .settings-tab-content { display: none;}
.integration-container .integration-tab-content.active, 
.fuels-container .fuel-tab-content.active, 
.companysettings-container .settings-tab-content.active { display: block;}
.integration-container .mapping-label { color: #2596FF; font-size: 15px; font-weight: 500; margin-bottom: 16px; display: block;}
.fuels-container .import-btn { width: 100%; padding: 7px 12px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;}

.invoice-badge, .badge {background-color: #0056b3;color: white;padding: 3px 6px;text-align: center;border-radius: 5px;}
/*.editable {cursor: pointer;color: #0056b3;text-decoration: underline;}
.editable {cursor: pointer;color: black;font-weight: bold;}*/
.edit-icon {cursor: pointer;color: #0056b3;margin-left: 5px;font-size: 14px;}
.currency-symbol {font-weight: bold;}


.status-created {color: black; cursor: default;}
.status-accepted {color: #007FFF;}
.status-arrived {color: #00CC00;}
.status-onroute {color: #FF5F1F;}
.status-collected, .status-delivered {color: #009900;}
.status-not-collected, .status-not-delivered {color: #990000;}
.status-created[data-status="created"] {color: black; cursor: pointer;}
.fa-truck, .fa-invoice[data-id], .view-fa-invoice, #existingPODAttachment span, .tracking-link{cursor: pointer;}

#loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); display: flex;justify-content: center;align-items: center;z-index: 9999; }/* Full-screen overlay */
.spinner {width: 50px;height: 50px;border: 5px solid rgba(255, 255, 255, 0.3);border-top: 5px solid #fff;border-radius: 50%;animation: spin 1s linear infinite;}/* Spinner Animation */
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}

.addressbook-container .top-section, 
.ratesheets-container .top-section, .ratesheets-container .bottom-section, 
.billing-lines-container .bottom-section, 
.fuelsheets-container .top-section, .fuelsheets-container .bottom-section, 
.companysettings-container .top-section, .companysettings-container .bottom-section {display: grid; grid-template-columns: 1fr; margin-bottom: 10px; padding: 15px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px;}
.addressbook-container .addressbook-row, 
.companysettings-container .companysettings-row, 
.footer-buttons-row, 
.drivers-row, 
.vehicles-row, 
.carriers-row {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;align-items: end;}
.addressbook-container .map-container, 
.ratesheets-container .map-container {height: 260px;margin-bottom: 10px;}
.companysettings-container .map-container {height: 350px;margin-bottom: 10px;}
.addressbook-container .delete-address, 
.ratesheets-container .delete-ratesheet, 
.billing-lines-container .delete-line,
.fuelsheets-container .delete-fuelsheet, 
.companysettings-container .delete-companysetting, 
.fuels-container .delete-fuel {background-color: #990000;color: white;	}
.addressbook-container .cancel-address, 
.ratesheets-container .cancel-ratesheet, 
.fuelsheets-container .cancel-fuelsheet, 
.companysettings-container .cancel-companysetting, 
.fuels-container .cancel-fuel {background-color: #ddd;color: black;	}


.select2-container {  width: 100% !important;  /* Override inline styles */}
span.select2-selection.select2-selection--single {height: 35px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: #000 transparent transparent transparent !important;}
span.select2-selection__placeholder, span.select2-selection__rendered {color: #000 !important;line-height: 32px !important;font-size: 14px !important;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{font-size: 14px; font-weight: normal; margin-top: 7px !important;}
.select2-selection { overflow: hidden !important; }
.select2-selection__rendered { white-space: normal !important; word-break: break-all !important; }

.shipment_stop_company_list_outer {background: none;border: none;padding: 0;margin: 0;position: relative;}
.shipment_stop_company_list .shipment_stop_company_list_button {margin: 0;padding: 5px 7px;border: none;border-bottom: 1px solid #DDDDDD;display: block;text-decoration: none;background: none;color: #000000;font-size: 0.9em;line-height: 1.1em;overflow: hidden;white-space: nowrap;cursor: pointer;}
.shipment_stop_company_list, .shipment_stop_address_list {background: none;border-top: 1px solid #DDDDDD;border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;border-bottom: none;background-color: #FFFFFF;padding: 0;width: 100%;position: absolute;top: 0;left: 0;z-index: 999;display: none;-webkit-box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);overflow: hidden;max-height: 300px;overflow-y: auto;}
.shipment-container .address .address-result-item {position: relative; padding: 5px 5px 5px 25px;cursor: pointer;font-size: 12px;}
.shipment-container .address .address-result-item:hover {background: #eee;}
.shipment-container .address .address-result-item.db::before {content: "\f1c0";font-family: "Font Awesome 6 Free";font-weight: 900;position: absolute;left: 8px;top: 50%;transform: translateY(-50%);}
.shipment-container .address .address-result-item.google::before {content: "\f3c5";font-family: "Font Awesome 6 Free";font-weight: 900;position: absolute;left: 8px;top: 50%;transform: translateY(-50%);}

.leaflet-routing-container{display: none;}
.rate-container .inline-flex{display: flex;justify-content: space-between; gap: 5px;}
.rate-container .inline-flex.flex-variant button{ margin-right: auto;}
.rate-container .inline-flex.flex-variant input{ margin-left: auto;}
.rate-container .rate-field {position: relative;padding: 10px;background: #f9f9f9;margin: 10px 0px;border: 1px solid #ccc;border-radius: 5px;}
.rate-container .rate-field input {padding: 6px 8px;border: 1px solid #ccc;border-radius: 4px;outline: none;font-size: 14px;transition: all 0.3s;background: white;	text-align: center; max-width: 175px; width: 100%;}
.rate-container .rate-field .input-mini{max-width: 75px;}
.rate-container .rate-field label {top: -8px;left: 50%;transform: translateX(-50%);font-size: 12px;color: #000000;background: #fff;padding: 0 5px;position: absolute;border-radius: 5px;white-space: nowrap;}
.rate-container .overridetotal-cost-message{align-self: center; width: 100%; text-align: end;}
.rate-container .overridetotal-cost-message span{background-color: #d72b2ba3;color: white;padding: 5px 10px;border-radius: 0px 5px 5px 0px;border-left: solid 5px #990000;}

.shipment-listing .main-layout {display: flex;flex: 1;overflow: hidden;}
.shipment-listing .main-layout .sidebar {width: 30%;background-color: var(--cassiopeia-color-primary);background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);padding: 0px 5px;overflow-y: auto;box-sizing: border-box;max-height: calc(100vh - 185px);min-width: 430px;}
.shipment-listing .main-layout .sidebar::-webkit-scrollbar {width: 8px;}
.shipment-listing .main-layout .sidebar::-webkit-scrollbar-thumb {background-color: #BDC3C7;border-radius: 4px;}
.shipment-listing .main-layout .tabs {display: flex;justify-content: space-around;margin: 0px 0px 10px 0px;background: transparent;border-radius: unset;border: none;}
.shipment-listing .main-layout .tab {flex: 1;text-align: center;padding: 5px;background-color: #ECF0F1;border: 1px solid var(--cassiopeia-color-primary);font-size: 0.9em;cursor: pointer;transition: background-color 0.3s, color 0.3s;display: flex;flex-direction: column;align-items: center;}
.shipment-listing .main-layout .tab .tab-inner {display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.2em; width: 100%; margin: 0 auto;}
.shipment-listing .main-layout .tab:hover {background-color: #BDC3C7;color: white;}
.shipment-listing .main-layout .tab.active {background-color: #3498DB;color: white;}

.shipment-listing .main-layout .filters {display: flex;justify-content: space-around;margin-bottom: 10px;background: transparent;border-radius: unset;border: none;}
.shipment-listing .main-layout .filters .filter {flex: 1;text-align: center;}
.shipment-listing .main-layout .filters .filter select {width: 100%;font-size: 0.9em;padding: 2px 0px;outline: none;}

.shipment-listing .main-layout .shipment {background-color: #FAFAFA;border: 1px solid #E0E0E0;border-radius: 8px;padding: 10px;margin-bottom: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);box-sizing: border-box;}
.shipment-listing .main-layout .shipment .shipment-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 10px;}
.shipment-listing .main-layout .shipment .shipment-header .left {text-align: left;flex: 1;}
.shipment-listing .main-layout .shipment .shipment-header .right {text-align: right;flex: 1;}
.shipment-listing .main-layout .shipment .shipment-header div {font-size: 0.95em;color: #555555;align-self: end;}
.shipment-listing .main-layout .shipment .shipment-header .left div:first-child, .shipment-listing .main-layout .shipment .shipment-header .right div:first-child {font-size: 1em; font-weight: bold;}
.shipment-listing .main-layout .shipment .shipment-body {display: flex;flex-wrap: wrap;gap: 10px;}
.shipment-listing .main-layout .shipment .pickups, .shipment-listing .main-layout .shipment .dropoffs{flex: 1;}
.shipment-listing .main-layout .shipment .card {flex: 1;padding: 5px;border-radius: 6px;background-color: #F8F9FA;border: 1px solid #E0E0E0;position: relative;text-align: left;box-sizing: border-box;min-width: calc(50% - 10px); margin-bottom: 5px;}
.shipment-listing .main-layout .shipment .card h3 {display: flex;align-items: center;margin: 0 0 5px;font-size: 0.95em;color: #2C3E50;}
.shipment-listing .main-layout .shipment .card h3 span.edit {cursor: pointer;}
.shipment-listing .main-layout .shipment .card h3 span.dot {height: 12px;width: 12px;background-color: #bbb;border-radius: 50%;display: inline-block;margin-left: auto;}
.shipment-listing .main-layout .shipment .card h3 span.dot.red {background-color: red;}
.shipment-listing .main-layout .shipment .card h3 span.dot.green {background-color: green;}
.shipment-listing .main-layout .shipment .card p {margin: 0;font-size: 0.95em;color: #7F8C8D;min-height: 18px;}
.shipment-listing .main-layout .shipment .date-time-row {display: flex;justify-content: space-between; align-items: center;color: #7F8C8D;margin-top: 4px;font-weight: bold;font-size: 0.90em;}
.shipment-listing .main-layout .shipment .circle-badge {width: auto;height: 15px; padding: 0 3px; border-radius: 4px; display: flex;justify-content: center;align-items: center;font-size: 0.7em; font-weight: bold;color: white;margin-right: 8px; }
.shipment-listing .main-layout .shipment .circle-badge.pickup {background-color: #3498DB;}
.shipment-listing .main-layout .shipment .circle-badge.dropoff {background-color: #2ECC71;}

.shipment-listing .main-layout .shipment .circle-badge.created {background-color: black; cursor: default;}
.shipment-listing .main-layout .shipment .circle-badge.accepted {background-color: #007FFF;}
.shipment-listing .main-layout .shipment .circle-badge.arrived {background-color: #00CC00;}
.shipment-listing .main-layout .shipment .circle-badge.onroute {background-color: #FF5F1F;}
.shipment-listing .main-layout .shipment .circle-badge.collected, .shipment-listing .main-layout .shipment .circle-badge.delivered {background-color: #009900;}
.shipment-listing .main-layout .shipment .circle-badge.not-collected, .shipment-listing .main-layout .shipment .circle-badge.not-delivered {background-color: #990000;}
.shipment-listing .main-layout .shipment .circle-badge.created[data-status="created"] {background-color: black; cursor: pointer;}

.shipment-listing .main-layout .shipment .maps-icon {font-size: 1.5em;color: #3498DB;cursor: pointer;}
.shipment-listing .main-layout .shipment .maps-icon:hover {color: #2980B9;}
.shipment-listing .main-layout .shipment .actions {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;padding: 10px;border-top: 1px solid #E0E0E0;}
.shipment-listing .main-layout .shipment .invoice-button {background-color: #3498DB;color: white;padding: 5px 10px;border: none;border-radius: 5px;font-size: 0.9em;cursor: pointer;}
.shipment-listing .main-layout .shipment .invoice-button:hover {background-color: #2980B9;}
.shipment-listing .main-layout .shipment .actions .action_buttons{align-self: end;}
.shipment-listing .main-layout .shipment .actions .action_buttons .icon-button{padding: 5px; margin: 0 5px;}
.shipment-listing .main-layout .shipment .price-icon {font-size: 1em;color: #2C3E50;font-weight: bold;}
.shipment-listing .main-layout .shipment .price_kms {text-align: right;}
.shipment-listing .main-layout .shipment .price_kms .distance {font-weight: normal;font-size: 0.95em;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-status{ font-size: 0.75em;}

.shipment-listing .main-layout .shipment .invoice-details {display:flex; align-items:flex-start;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper {position: relative; display:flex; flex-direction:column; align-items:flex-start;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row {display:flex;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .invoice-btn { height:28px; padding:0 10px; background:#2563eb; color:#fff; border:0; display:flex; align-items:center;  justify-content:center; cursor:pointer; border-radius:10px 0 0 10px; transition:background 0.2s;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .invoice-btn.border-radius-all{border-radius:10px;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .invoice-btn:hover { background:#1d4ed8; }
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .email-btn {height:28px; padding:0 10px; background:#ef4444; color:#fff;border:0; cursor:pointer;border-radius:0 10px 10px 0;transition:background 0.2s;display: flex;align-items: center; justify-content: center;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .email-btn:hover { background:#dc2626; }
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .buttons-row .email-btn.emailed {background:#16a34a; }
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .void-btn {margin-bottom:4px; background:#ef4444; color:#fff; border:none; border-radius:4px;padding:3px 8px; font-size:12px; font-weight:bold;cursor:pointer;opacity:0; pointer-events:none;transform:translateY(-6px);transition:opacity 0.25s ease, transform 0.25s ease;white-space:nowrap;    text-decoration: none;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper .void-btn::after {content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:#ef4444 transparent transparent transparent;}
.shipment-listing .main-layout .shipment .invoice-details .invoice-wrapper.hovering .void-btn {opacity:1;pointer-events:auto;transform:translateY(0);animation:slideUpBounce 0.25s ease forwards;}

@keyframes slideUpBounce {
    0% { transform: translateY(-6px); }
    60% { transform: translateY(3px); }
    80% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

.shipment-listing .main-layout .map-area {flex: 1;position: relative;z-index: 9;}
.shipment-listing .main-layout #shipments-osm-map {height: calc(100vh - 185px);width: 100%;}
.shipment-listing .popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border: 1px solid #E0E0E0;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);z-index: 1000;display: none;}
.shipment-listing .popup h3 {margin-top: 0;}
.shipment-listing .popup button {margin-top: 10px;padding: 8px 12px;border: none;border-radius: 5px;background-color: #3498DB;color: white;cursor: pointer;}
.shipment-listing .popup button:hover {background-color: #2980B9;}
.shipment-listing .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 999;display: none;}

.map-marker-wrapper {position: relative;display: flex;flex-direction: column;align-items: center;width: 150px;}
.map-marker-label {background-color: #fff;color: #333;padding: 2px 6px;border-radius: 4px;font-size: 11px;white-space: nowrap;box-shadow: 0 1px 3px rgba(0,0,0,0.2);z-index: 2;}
.map-marker-popup {position: relative;background-color: #000;color: #fff;font-weight: bold;padding: 2px 6px;border-radius: 4px;font-size: 11px;z-index: 1;white-space: nowrap;min-width: 36px;text-align: center;}
.map-marker-popup::after {content: "";position: absolute;top: 100%;left: 50%;transform: translateX(-50%);border-width: 8px;border-style: solid;border-color: #000 transparent transparent transparent;}

.map-marker-wrapper.accepted .map-marker-label{box-shadow: 0 1px 3px #007FFF;}
.map-marker-wrapper.accepted .map-marker-popup {background-color: #007FFF;}
.map-marker-wrapper.accepted .map-marker-popup::after {border-top-color: #007FFF;}
.map-marker-wrapper.arrived .map-marker-label{box-shadow: 0 1px 3px #00CC00;}
.map-marker-wrapper.arrived .map-marker-popup {background-color: #00CC00;}
.map-marker-wrapper.arrived .map-marker-popup::after {border-top-color: #00CC00;}
.map-marker-wrapper.onroute .map-marker-label{box-shadow: 0 1px 3px #FF5F1F;}
.map-marker-wrapper.onroute .map-marker-popup {background-color: #FF5F1F;}
.map-marker-wrapper.onroute .map-marker-popup::after {border-top-color: #FF5F1F;}
.map-marker-wrapper.collected .map-marker-label, .map-marker-wrapper.delivered .map-marker-label{box-shadow: 0 1px 3px #009900;}
.map-marker-wrapper.collected .map-marker-popup, .map-marker-wrapper.delivered .map-marker-popup {background-color: #009900;}
.map-marker-wrapper.collected .map-marker-popup::after, .map-marker-wrapper.delivered .map-marker-popup::after {border-top-color: #009900;}
.map-marker-wrapper.not-collected .map-marker-label, .map-marker-wrapper.not-delivered .map-marker-label{box-shadow: 0 1px 3px #990000;}
.map-marker-wrapper.not-collected .map-marker-popup, .map-marker-wrapper.not-delivered .map-marker-popup {background-color: #990000;}
.map-marker-wrapper.not-collected .map-marker-popup::after, .map-marker-wrapper.not-delivered .map-marker-popup::after {border-top-color: #990000;}

span.disabled{background-color: gray;color: white;padding: 3px 6px;text-align: center;border-radius: 5px; cursor: default;}
.fuels-container .fuelsheets-field input[readonly] {background: #e3eaf3; color: #555; font-weight: 600; cursor: pointer;}


.fuels-container .fuel-economy {font-size: 15px;color: #555;margin-top: 8px;margin-bottom: 8px;text-align: center;}
.fuels-container .fuel-economy strong {color: #0071f3;}
.fuels-container .table-scroll-fuel, .table-scroll-history {max-height: 240px;overflow-y: auto;width: 100%;margin-bottom: 8px;}
.fuels-container .fuelprice-history-table {margin: 0;width: 100%;border-collapse: collapse;font-size: 13px;background: #f6f9fb;border-radius: 13px;overflow: hidden;}
.fuels-container .fuelprice-history-table th, .fuels-container .fuelprice-history-table td {padding: 8px 5px;text-align: center;}
.fuels-container .fuelprice-history-table th {background: #e3eaf3;font-weight: 600;}
.fuels-container .fuelprice-history-table td {border-bottom: 1px solid #e3eaf3;}
.fuels-container .mini-action {display: inline-flex;align-items: center;justify-content: center;border: none;background: none;font-size: 20px;cursor: pointer;padding: 0 4px;color: #0071f3;border-radius: 4px;transition: background 0.18s;height: 32px;width: 32px;}
.mini-action.delete {color: #f44336;}

#cargoModal {display: none;position: fixed;z-index: 999;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);overflow-y: auto;}
#cargoModal .modal-content {background: #fff;width: 980px;max-width: 95%;margin: 60px auto;padding: 25px 30px;border-radius: 12px;position: relative;box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);}
#cargoModal .close {position: absolute;right: 15px;top: 10px;font-size: 22px;font-weight: bold;color: #888;cursor: pointer;}
#cargoModal .close:hover {color: #000;}
/* HEADING STYLES */
#cargoModal .modal-heading {font-size: 18px;font-weight: 600;margin-bottom: 10px;color: #222;text-align: center;}
#cargoModal .modal-subheading-container, .cargo-details .heading-container {margin-bottom: 20px;background: #f0f8ff;padding: 15px 20px;border-radius: 14px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);display: flex;justify-content: center;}
#cargoModal .modal-subheading, .cargo-details .heading {font-size: 20px;font-weight: 600;color: #333;text-align: center;}
#cargoModal .cargo-pickup-company {font-weight: bold;color: #0d6efd;}
#cargoModal .cargo-dropoff-company {font-weight: bold;color: #28a745;}
#cargoModal .cargo-pickup-city,
#cargoModal .cargo-dropoff-city {color: #555;}
#cargoModal .arrow {margin: 0 10px;color: #888;font-size: 22px;transition: transform 0.3s ease;}
#cargoModal .modal-subheading:hover .arrow {transform: translateX(5px);}
/* FORM STYLES */
#cargoModal .floating-group {position: relative;margin-bottom: 8px;}
#cargoModal .floating-group input,
#cargoModal .floating-group select,
#cargoModal .override-fields input,
#cargoModal .override-fields select {width: 100%;padding: 10px 6px 6px 6px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;box-sizing: border-box;outline: none;background: #fff;}
#cargoModal input[type=number]::-webkit-inner-spin-button,
#cargoModal input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
/*#cargoModal input[type=number] {-moz-appearance: textfield;}*/
#cargoModal .floating-group label,
#cargoModal .override-fields label {position: absolute;left: 8px;top: 10px;font-size: 12px;color: #888;pointer-events: none;background: #fff;padding: 0 3px;transition: 0.2s;}
#cargoModal .floating-group input:focus+label,
#cargoModal .floating-group input:not(:placeholder-shown)+label,
#cargoModal .floating-group select:focus+label,
#cargoModal .floating-group select:not([value=""])+label,
#cargoModal .override-fields input:focus+label,
#cargoModal .override-fields input:not(:placeholder-shown)+label,
#cargoModal .override-fields select:focus+label,
#cargoModal .override-fields select:not([value=""])+label {top: -8px;font-size: 10px;color: #007bff;}
#cargoModal .cargo-row {display: flex;gap: 10px;margin-bottom: 12px;border: 1px solid #ccc;padding: 10px;border-radius: 8px;background: #fdfdfd;align-items: flex-start;}
#cargoModal .cargo-col {display: flex;flex-direction: column;}
#cargoModal .qty-input {width: 60px;}
#cargoModal .override-container {display: flex;justify-content: space-between;margin-top: 15px;gap: 20px;align-items: flex-end;}
#cargoModal .overrides,
#cargoModal .top-selects .floating-group {flex: 1;}
#cargoModal .overrides h4 {margin: 0 0 8px 0;}
#cargoModal .override-fields {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;align-items: center;}
#cargoModal .override-fields .form-group {position: relative;}
#cargoModal .top-selects {display: flex;gap: 15px;margin-bottom: 15px;}
#cargoModal .calculated {width: 220px;text-align: right;font-size: 14px;}
#cargoModal .calculated strong {display: block;margin-bottom: 6px;}
.cargo-details .cargo-item {margin-bottom: 15px;border: 1px solid #ccc;padding: 10px;border-radius: 8px;background: #fdfdfd;}

#videoModal .modal-content h4{position: absolute;right: 20px;z-index: 2;top: 5px;background-color: lightgray;border-radius: 20px;}
#videoModal .modal-content h4 span.close {padding: 5px 10px;color: #000000;margin-top: -5px;font-size: 24px;}
#videoModal .modal-content h4 span.close:hover, #videoModal .modal-content h4 span.close:focus {color: #000000;}

.fuel-dashboard-container, .shipment-timeline-container, .billing-lines-container {margin-bottom: 15px; padding: 15px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 8px }
.fuel-dashboard-container .hdr { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fuel-dashboard-container h2, .shipment-timeline-container h2 { text-align:left; font-size:22px; color:#1c2b47; margin:0 0 8px 0; }
.fuel-dashboard-container .explanation { margin:13px auto 8px; font-size:13px; color:#333; line-height:1.3; }
.fuel-dashboard-container .input-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; }
.fuel-dashboard-container .input-row label { font-weight:600; font-size:13px; color:#333; min-width:140px; margin-right:8px; }
.fuel-dashboard-container .input-row input, 
.fuel-dashboard-container .input-row select { padding:6px 8px; border-radius:6px; border:1px solid #cfd3de; background:#f8f9fc; font-size:13px; flex:1; text-align:right; }
.fuel-dashboard-container .card { border-radius:10px; padding:10px 12px; margin-top:10px; box-shadow:0 3px 12px rgba(0,0,0,0.08); transition:all 0.3s ease; }
.fuel-dashboard-container .card.actual { background:#fff; }
.fuel-dashboard-container .card.suggested { background:#f3f6fd; }
.fuel-dashboard-container .card h3 { margin-top:0; color:#1c2b47; font-size:16px; margin-bottom:6px; }
.fuel-dashboard-container .card-row { display:flex; justify-content:space-between; margin-bottom:6px; align-items:center; }
.fuel-dashboard-container .card-row label { font-weight:500; color:#555; font-size:12px; }
.fuel-dashboard-container .card-row .value { font-weight:700; font-size:14px; color:#1c2b47; transition:all 0.3s ease; min-width:120px; text-align:right; }
.fuel-dashboard-container .bar-container { width:100%; background:#e4e9f2; border-radius:6px; height:14px; margin-top:6px; overflow:hidden; position:relative; user-select:none; }
.fuel-dashboard-container .bar-container.interactive { cursor:pointer; }
.fuel-dashboard-container .bar-container:focus { outline: none; box-shadow: 0 0 0 4px rgba(28,43,71,0.12); border-radius:6px; }
.fuel-dashboard-container .bar-marker { position:absolute; top:0; bottom:0; width:2px; background:#888; opacity:0.6; }
.fuel-dashboard-container .bar-fill { height:100%; width:0; background:#1c9a29; border-radius:6px; transition:width 0.06s linear, background 0.06s linear; }
.fuel-dashboard-container .bar-fill.red { background:#d97a1b; }
.fuel-dashboard-container .bar-fill.yellow { background:#f5a623; }
.fuel-dashboard-container .bar-text { font-size:12px; color:#555; margin-top:6px; }
.fuel-dashboard-container .note { margin-top:10px; font-size:12px; color:#666; line-height:1.3; }
/* Compact label + percent display */
.fuel-dashboard-container .profit-label-row { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.fuel-dashboard-container .profit-label-row .label { font-size:12px; color:#555; font-weight:500; }
.fuel-dashboard-container .profit-label-row .percent { min-width:64px; text-align:right; font-weight:700; color:#1c2b47; }
/* small reset button */
.fuel-dashboard-container .btn { background:#1c2b47; color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:600; }


/* Responsive: Stack in 2 rows for smaller screens */
/*@media (max-width: 900px) {.integration-container .integrations .integration {width: 48%;}}
@media (max-width: 600px) {.integration-container .integrations .integration {width: 100%;}}*/

@media (max-width: 768px) {
    .button-container {flex-direction: column;}.button-container .button {max-width: 100%;}.kpi,.graph {max-width: 100%;}
    .shipment-container .top-section {grid-template-columns: 1fr;gap: 10px;}
    /*.shipment-container .address-section {grid-template-columns: 1fr;}*/
    .shipment-container .address-section, .addressbook-container .addressbook-row, .companysettings-container .companysettings-row, .drivers-row, .vehicles-row, .carriers-row {grid-template-columns: 1fr; /* Stacks items vertically */gap: 15px; /* Adjust spacing between rows for better visibility */}
    .shipment-container .address {padding: 15px;}
    .shipment-container .shipment-row {grid-template-columns: 1fr;gap: 10px;}
    .shipment-container .bottom-row {grid-template-columns: 1fr;gap: 10px;}
    .ratesheets-container table, .ratesheets-container thead, .ratesheets-container tbody, .ratesheets-container th, .ratesheets-container td, .ratesheets-container tr,
    .billing-lines-container table, .billing-lines-container thead, .billing-lines-container tbody, .billing-lines-container th, .billing-lines-container td, .billing-lines-container tr,
    .fuelsheets-container table, .fuelsheets-container thead, .fuelsheets-container tbody, .fuelsheets-container th, .fuelsheets-container td, .fuelsheets-container tr {display: block;width: 100%;}
    .ratesheets-container tr, 
    .billing-lines-container tr, 
    .fuelsheets-container tr{margin-bottom: 10px;}
    /* Ensure tabs are horizontal on mobile */
    .shipment-container .tabs {flex-direction: row;flex-wrap: nowrap;}
    .shipment-container .tab, .tabs-container .tab {flex: 1;padding: 5px 20px;border-bottom: 1px solid #ddd;}

    .driver-carrier {display: flex;flex-direction: column;align-items: end;}
    .shipment-checkbox-container {display: flex;justify-content: end;align-items: end;}
    .customer-info {font-weight: bold;}
    .customer-info a {text-decoration: none!important; cursor: pointer; color: black;}


    .status-icon {width: 10%;text-align: right;}
    .status-icon .fa-truck {font-size: 24px;cursor: pointer;}
    .arrow-icon {font-size: 20px;color: #007bff;}
    .arrow-count {font-size: 16px;margin-left: 5px;}

    .shipment-listing .main-layout {flex-direction: column;}
    .shipment-listing .main-layout .map-area {order: -1;height: 50%;width: 100%;}
    .shipment-listing .main-layout #shipments-osm-map{height: calc(50vh - 154px);}
    .shipment-listing .main-layout .sidebar {width: 100%;height: calc(50vh);min-width: auto}
    .shipment-listing .main-layout .shipment {padding: 10px;}
    .shipment-listing .main-layout .shipment .card {padding: 10px;}

    .integration-container .integration-card {flex-direction: column;}
    .integration-container .divider {display: none;}
    .integration-container .integration-left {width: 100%;flex-direction: column;align-items: center;}
    .integration-container .integration-left .integration-buttons {flex-direction: column;}
    .integration-container .integration-right .button-section {position: static;}
    .shipment-container .add-cargo-btn{display: none;}

    .fuel-dashboard-container .input-row { gap:6px; }
    .fuel-dashboard-container .input-row label, 
    .fuel-dashboard-container .card-row label { width:auto; font-size:12px; }
    .fuel-dashboard-container .input-row input, 
    .fuel-dashboard-container .input-row select, 
    .fuel-dashboard-container .card-row .value { font-size:12px; padding:6px 8px; }
    .fuel-dashboard-container .card { padding:8px 10px; }
    .fuel-dashboard-container .card h3 { font-size:15px; margin-bottom:4px; }
    .fuel-dashboard-container .bar-text { font-size:11px; }
}
/* Hide Price and Invoice columns in mobile landscape view */
@media (max-width: 768px) and (orientation: landscape) {.hidden-mobile-price,.hidden-mobile-invoice {display: none;}}

/* Hide mobile cards in desktop view */
@media (min-width: 769px) {.mobile-card, .mobile-customer-card {display: none;}}
@media (max-width: 480px) {
    header + div{padding: 0 !important;margin: 0 !important;grid-gap: 0 !important;}
    body.wrapper-fluid .site-grid{grid-gap: 0;}
    main {padding: 0 !important;margin: 0 !important;}
    .shipment-container .container, 
    .addressbook-container, 
    .ratesheets-container, 
    .billing-lines-container,
    .fuelsheets-container, 
    .companysettings-container, 
    .integration-container, 
    .fuels-container {padding: 10px;}

    .shipment-container .button-section, 
    .addressbook-container .button-section, 
    .ratesheets-container .button-section, 
    .billing-lines-container .button-section, 
    .fuelsheets-container .button-section, 
    .companysettings-container .button-section, 
    .integration-container .integration-right .button-section {flex-direction: column;gap: 5px;}
    .shipment-container .button-section button, 
    .addressbook-container .button-section button, .addressbook-container .button-section .button, 
    .ratesheets-container .button-section button, .ratesheets-container .button-section .button, 
    .billing-lines-container .button-section button, .billing-lines-container .button-section .button, 
    .fuelsheets-container .button-section button, .fuelsheets-container .button-section .button, 
    .companysettings-container .button-section button, .companysettings-container .button-section .button, 
    .integration-container button {width: 100%;}
    .rate-container .rate-field input {width: 29%;}
	.rate-container .rate-field .input-mini {width: 20%;}

    .inline-flex.flex-variant {flex-direction: column-reverse;}
    .rate-container .overridetotal-cost-message{text-align: left;font-size: 0.85rem;}
    .rate-container .inline-flex.flex-variant button, .rate-container .inline-flex.flex-variant input{ margin: auto; width: 100%;}

    .shipment-listing .main-layout .shipment, .shipment-listing .main-layout .shipment .card {padding: 5px;}
    .shipment-listing .main-layout .shipment .shipment-body {gap: 5px;}
    .shipment-listing .main-layout .shipment .date-time-row{font-size: 0.80em;}

    .integration-container .sub-tab-bar {flex-direction: column;}
}