@page {
    margin: 0;
}
:root {
    --main-red: #FF0000;
    --main-yellow: #FFD700;
    --dark-grey: #333;
    --text-dark: #333;
    --text-light: #555;
    --border-color: #eee;
    --main-blue: #007bff;
}
html {
    scroll-padding-bottom: 120px;
}
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    color: var(--dark-grey);
}
.header {
    background-color: #000;
    padding: 10px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.logo { height: 60px; margin-bottom: 5px; }
.header h1 { margin: 0; font-size: 1.6em; }
.header h2 { margin: 2px 0 0 0; font-weight: 700; font-size: 1.4em; color: var(--main-yellow); }
.header h3 { margin: 0; font-weight: normal; font-size: 0.9em; color: white; letter-spacing: 1px; }
.language-switcher {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 0.9em;
}
.language-switcher a {
    color: #ccc;
    text-decoration: none;
    padding: 0 5px;
    font-weight: bold;
    cursor: pointer;
}
.language-switcher a.active {
    color: var(--main-yellow);
    text-decoration: underline;
}
.container { max-width: 1400px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.nav { background-color: var(--main-yellow); padding: 10px 15px; margin-bottom: 20px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
.nav a { text-decoration: none; color: #000; font-weight: bold; padding: 5px 10px; border-radius: 3px; margin-left: 10px; }
.nav a.active-nav {
    background-color: #000;
    color: var(--main-yellow);
    box-shadow: none;
}
/* Add a smooth transition effect to the navigation links */
.nav a {
    transition: background-color 0.2s ease-in-out;
}

/* Change the background on hover, but only for links that are not 'active' */
.nav a:not(.active-nav):hover {
    background-color: #000000; /* A slightly darker shade of the main yellow */
    border-radius: 3px;
    color: #FFD700;
}
.dashboard { text-align: center; padding: 30px; }
.dashboard-btn { background-color: var(--main-red); color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px; }
.content-panel {
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}
#creation-wrapper { display: flex; justify-content: center; transition: justify-content 0.5s ease-in-out; gap: 2%;}
#creation-wrapper.split-view { justify-content: space-between; }
.form-column { flex: 1 1 50%; max-width: 700px; transition: all 0.5s ease-in-out; border: 1px solid #ddd; padding: 20px; border-radius: 5px; background-color: #fcfcfc; }
#creation-wrapper.split-view .form-column { flex-basis: 32%; max-width: 32%; }
.preview-column { flex-basis: 66%; display: none; }
#preview-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
}
.preview-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
#form-total-price-display {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}
.form-display-box { width: 100%; min-height: 40px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; background-color: #f0f0f0; font-family: 'Montserrat', sans-serif; color: #333; display: flex; align-items: center; }
#invoice-note-display { min-height: 100px; align-items: flex-start; line-height: 1.5; }
textarea { min-height: 100px; }
.all-caps { text-transform: uppercase; }
.section-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--main-yellow); }
.box-container { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; background-color: white; }
.box-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.add-box-btn { background-color: #4CAF50; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 20px; }
.action-buttons { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.btn { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-primary { background-color: var(--main-red); color: white; }
.btn-secondary { background-color: var(--dark-grey); color: white; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-warning { background-color: #ffc107; color: #000; }
.btn-success { background-color: #28a745; color: white; }
.btn-inactive { background-color: #6c757d; color: white; }
.btn-custom-yellow { background-color: var(--main-yellow); color: var(--text-dark); border: 1px solid #c5a800; }
.error-message { color: var(--main-red); font-weight: bold; margin-top: 10px; }
#settings-panel { display: block; }
#settings-panel fieldset, #admin-panel fieldset { border: 1px solid #ddd; padding: 15px; margin-bottom: 0; border-radius: 5px; background-color: #fcfcfc; }
#settings-panel legend, #admin-panel legend { font-weight: bold; font-size: 1.1em; padding: 0 10px; color: var(--text-dark); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-size: 0.9em; color: #666; }
.input-with-checkbox { display: flex; align-items: center; gap: 10px; }
.input-with-checkbox input[type="checkbox"] { width: auto; }
.input-with-checkbox input[type="number"], .input-with-checkbox select { flex-grow: 1; }
.global-value-display { font-size: 0.8em; color: #888; margin-left: 25px; }
#user-list-container .user-item, #delivery-branch-list-container .user-item { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; padding: 15px 10px; border-bottom: 1px solid #eee; }
#user-list-container .user-item:last-child, #delivery-branch-list-container .user-item:last-child { border-bottom: none; }
.user-info { font-size: 1.1em; transition: color 0.3s ease; }
.user-sub-name { font-size: 0.9em; color: #777; margin-top: 2px; }
.user-role { font-size: 0.8em; color: #888; font-weight: normal; }
.user-info.status-active strong { color: #28a745; }
.user-info.status-inactive strong { color: #6c757d; }
.settings-form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; align-items: center; }
.settings-form-grid label { justify-self: end; margin-bottom: 0; font-weight: normal; color: var(--text-light) }
.settings-form-grid .form-group { margin-bottom: 0; width: 100%; }
.settings-form-grid input, .settings-form-grid select { width: 100%; }
.settings-form-grid .form-buttons { grid-column: 2; }
.content-block, .content-block-form { max-width: 650px; margin-left: auto; margin-right: auto; }
.content-block-form { margin-bottom: 0; }
.content-block textarea { max-width: 100%; }
#save-settings-container { margin-top: 30px; position: sticky; bottom: 0; left: 0; width: 100%; background-color: #ffffff; padding: 15px 0; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); border-top: 1px solid #ddd; display: flex; justify-content: center; z-index: 100; }
.invoice-container { position: relative; background: white; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 20mm; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--main-yellow); padding-bottom: 15px; margin-bottom: 20px; }
.invoice-title-container { text-align: center; margin-bottom: 25px; }
.details-section { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
.details-column { flex-basis: 48%; }
.shop-info h3 { margin: 0 0 5px 0; color: var(--text-dark); font-size: 1.3em; }
.shop-info h4 { margin: 0 0 10px 0; color: var(--text-dark); font-size: 1.1em; }
.shop-info p { margin: 2px 0; font-size: 14px; color: var(--text-light); line-height: 1.4; }
.logo-container img { max-width: 250px; max-height: 80px; }
.invoice-title-container h2 { margin: 0; color: #d9534f; font-size: 32px; letter-spacing: 2px; }
.details-column h3 { font-size: 24px; margin: 0 0 5px 0; }
.details-column p { font-size: 14px; color: var(--text-light); margin: 4px 0; }
.details-column .section-title { font-weight: normal; color: var(--text-dark); margin-top: 20px; }
.details-column .customer-name { font-size: 16px; font-weight: bold; color: var(--text-dark); }
.items-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.items-table th, .items-table td { padding: 12px; text-align: left; font-size: 14px; }
.items-table thead { background-color: var(--main-yellow); color: #333; font-weight: bold; }
.items-table tbody tr { border-bottom: 1px solid var(--border-color); }
.items-table td { color: var(--text-light); }
.items-table .text-right { text-align: right; }
.items-table .col-qty { width: 15%; }
.items-table .col-desc { width: 45%; }
.items-table .col-unit { width: 20%; }
.items-table .col-amount { width: 20%; }
.totals-section { margin-top: 20px; padding-top: 15px; display: flex; justify-content: space-between; align-items: flex-start; }
.invoice-notes { font-family: 'Abhaya Libre', serif; font-weight: 400; font-size: 1.2em; margin-top: 20px; padding-top: 15px; border-top: 2px solid var(--main-yellow); }
.invoice-notes b { font-weight: 800; }
.total-weight-display { font-weight: bold; color: var(--text-dark); padding-top: 8px; }
.totals-table { width: 40%; text-align: right; border-top: 2px solid var(--main-yellow); padding-top: 15px;}
.totals-table td { padding: 8px; color: var(--text-light); }
.totals-table tr.total-row td { font-weight: bold; font-size: 18px; color: var(--text-dark); }
.totals-table tr.offer-row td { color: green; }
.footer-line { position: absolute; bottom: 20mm; left: 20mm; width: calc(100% - 40mm); border-bottom: 10px solid var(--main-yellow); box-sizing: border-box; }
.label { width: 150mm; height: 100mm; background: white; padding: 10px; box-sizing: border-box; border: 2px solid #333; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.label-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; padding-bottom: 8px; flex-shrink: 0; }
.label-header img { height: 35px; }
.label-header .from-info { font-size: 10px; text-align: right; color: #555; line-height: 1.4; }
.label-header .from-info strong { color: #000; font-size: 11px; }
.label-body { flex-grow: 1; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto 1fr; gap: 15px; padding: 10px 0; }
.recipient-info { grid-row: 1 / 3; grid-column: 1 / 2; border-right: 1px solid #ccc; padding-right: 15px; }
.recipient-info .to-label { font-size: 14px; font-weight: bold; color: #555; margin-bottom: 4px; }
.recipient-info .recipient-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.recipient-info .recipient-address { font-size: 16px; font-weight: 400; line-height: 1.5; margin-bottom: 8px; }
.recipient-info .recipient-phone { font-size: 16px; font-weight: 700; }
.label .shipment-details { text-align: right; }
.shipment-details .shipment-label { font-size: 12px; font-weight: bold; color: #555; }
.shipment-details .shipment-number { font-size: 32px; font-weight: 700; line-height: 1.1; color: #000; }
.details-minor { text-align: right; }
.details-minor p { font-size: 13px; margin: 4px 0; font-weight: 400; color: #555; }
.details-minor strong { font-weight: 700; color: #000; }
.label-footer { flex-shrink: 0; text-align: center; padding-top: 8px; border-top: 2px solid #333; }
.label-footer .barcode { font-family: 'Libre Barcode 128', cursive; font-size: 50px; line-height: 1; }
.barcode { font-family: 'Libre Barcode 128', cursive; }
.filter-bar { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid #ddd; }
.filter-bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px; }
.filter-bar h2 { margin: 0; }
.list-actions-group { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.list-actions-group .filter-group, .list-actions-group .button-group { display: flex; align-items: center; gap: 15px; flex-wrap: wrap;}
.list-actions-group label { margin-bottom: 0; }
.list-actions-group input[type="date"], .list-actions-group select { width: auto; }
.totals-display { font-size: 1.25em; font-weight: 300; color: var(--text-light); text-align: right; }
.totals-display div { display: inline-block; margin-left: 20px; }
.totals-display span { font-weight: 400; color: var(--text-dark); }
.shipment-list-container { margin-top: 20px; }
.shipment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.shipment-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #aaa;
}
.shipment-item-content { flex-grow: 1; cursor: pointer; }
.selection-mode-active .shipment-item-content { cursor: pointer; }
.shipment-item.item-selected { background-color: #e7f4ff; border-color: var(--main-blue); }
.status-dot {
    height: 8px;
    width: 8px;
    background-color: var(--main-red);
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}
.shipment-item .shipment-details { display: none; background-color: #fdfdfd; border-top: 1px solid #eee; padding: 20px; margin-top: 15px; }
.shipment-divider { display: flex; justify-content: center; align-items: center; gap: 15px; text-align: center; font-weight: bold; color: var(--main-red); padding: 10px; margin: 20px 0; background-color: #fff0f0; border-top: 1px solid var(--main-red); border-bottom: 1px solid var(--main-red); }
.edit-divider-btn { background: none; border: none; cursor: pointer; font-size: 1em; }
#undo-bar { display: none; justify-content: center; align-items: center; padding: 10px; background-color: #28a745; color: white; font-weight: bold; position: fixed; bottom: 0; width: 100%; left: 0; z-index: 2000; }
#undo-bar button { margin-left: 15px; }
.login-form { max-width: 400px; margin: 50px auto; padding: 30px; background-color: white; box-shadow: 0 0 15px rgba(0,0,0,0.1); border-radius: 5px; }
.login-title { text-align: center; margin-bottom: 20px; color: var(--dark-grey); }
.show-password-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}
.show-password-container input[type="checkbox"] {
    width: auto;
}
.show-password-container label {
    margin-bottom: 0;
    font-weight: normal;
    color: #555;
}
#reprint-modal { display: none; }
.modal-overlay { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 15px; }
.modal-header h2 { margin: 0; font-size: 1.2em; }
.modal-body { padding: 10px 0; }
.modal-body p { margin: 0 0 10px; }
.modal-body input, .modal-body select { width: 100%; padding: 8px; box-sizing: border-box; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.price-line { line-height: 1.5; }
.subtotal-line, .discount-line { font-size: 0.85em; font-weight: 400; color: #555; }
.discount-line { color: green; }
.total-line { font-size: 1.1em; font-weight: 700; }
#multi-label-page { display: none; }
.operator-buttons .btn {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}
.operator-buttons .btn.selected, .delivery-type-buttons .btn.selected, .delivery-branch-buttons .btn.selected {
    background-color: var(--main-red);
    color: white;
    border-color: var(--main-red);
}
.delivery-type-buttons .btn, .delivery-branch-buttons .btn {
    flex-grow: 1;
}
#report-frame {
    width: 100%;
    min-height: 80vh;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.scan-preview-item {
    position: relative;
}
.scan-preview-item img {
    max-width: 80px;
    max-height: 80px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.scan-remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--main-red);
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.btn.toggle-on {
    background-color: #28a745;
    color: white;
}
.btn.toggle-off {
    background-color: #dc3545;
    color: white;
}

/* --- Settings & Admin Panel Layouts --- */
.settings-grid-layout, .admin-grid-layout {
    display: grid;
    gap: 25px;
}

#inventory-panel .content-panel,
#admin-panel .content-panel {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-grid-layout > *, .admin-grid-layout > fieldset {
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.settings-grid-layout > *:hover, .admin-grid-layout > fieldset:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.admin-grid-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "create_branch  manage_branches"
        "delivery       manage_branches"
        "branch_settings branch_settings";
}
#admin-create-branch { grid-area: create_branch; }
#admin-manage-branches { grid-area: manage_branches; }
#admin-delivery-branches { grid-area: delivery; }
#admin-branch-settings { grid-area: branch_settings; }


.settings-grid-layout {
    grid-template-columns: 1fr 1fr;
}
#settings-panel.admin-view .settings-grid-layout {
    grid-template-areas: 
        "branch_info    pricing"
        "operators      pricing"
        "schedule       invoice"
        "security       gsheets"; /* This makes the smaller cards share a row */
}
#settings-panel.branch-view .settings-grid-layout {
     grid-template-areas: 
        "branch_info    boxtypes"
        "operators      boxtypes";
}
#settings-branch-info { grid-area: branch_info; }
#settings-global-pricing { grid-area: pricing; }
#settings-box-types { grid-area: boxtypes; }
#settings-departure { grid-area: departure; }
#settings-operators { grid-area: operators; }
#settings-invoice-note { grid-area: invoice; }

@media (max-width: 950px) {
    .settings-grid-layout, .admin-grid-layout {
        grid-template-columns: 1fr;
        grid-template-areas: initial !important;
    }
    .admin-grid-layout > *, .settings-grid-layout > * {
        grid-area: initial !important;
    }
}
/* --- End of Layout Styles --- */

/* --- Inventory & Alert Styles --- */
.nav-item-wrapper {
    position: relative;
    display: inline-block;
}
#inventory-alert-icon {
    display: none; /* Hidden by default */
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 14px;
    color: var(--main-red);
}
#inventory-alert-icon.alert-active {
    display: block;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.inventory-list .inventory-item {
    display: grid;
    grid-template-columns: 1fr 100px 150px;
    gap: 20px;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}
.inventory-list .inventory-item:last-child {
    border-bottom: none;
}
.inventory-list .inventory-item.low-stock .item-qty input {
    color: var(--main-red);
    font-weight: bold;
    border-color: var(--main-red);
}
.inventory-list .item-name {
    font-size: 1.1em;
    font-weight: bold;
}
.inventory-list .item-qty input {
    width: 80px;
    text-align: center;
}
/* --- End of Inventory Styles --- */

@media print {
    body.print-body { margin: 0; padding: 0; background-color: #ffffff !important; color: #000 !important; }
    .no-print { display: none !important; }
    .preview-column { display: block !important; }
    .invoice-container, .label {
        box-shadow: none !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .items-table thead {
        color: #000 !important;
    }
    #multi-label-page { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100vw; height: 100vh; box-sizing: border-box; }
    #multi-label-page.single-label-mode { justify-content: flex-start; padding-top: 4cm; }
    .print-body .invoice-container { margin: 0; height: auto; min-height: auto; width: 100%; padding: 20mm; padding-bottom: 35mm; box-sizing: border-box; box-shadow: none; border: none !important; }
    .print-body .footer-line { position: absolute; }
}

@media print {
    body.print-body { margin: 0; padding: 0; background-color: #ffffff !important; color: #000 !important; }
    .no-print { display: none !important; }
    .preview-column { display: block !important; }
    .invoice-container, .label {
        box-shadow: none !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .items-table thead {
        color: #000 !important;
    }
    #multi-label-page { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100vw; height: 100vh; box-sizing: border-box; }
    #multi-label-page.single-label-mode { justify-content: flex-start; padding-top: 4cm; }
    .print-body .invoice-container { margin: 0; height: auto; min-height: auto; width: 100%; padding: 20mm; padding-bottom: 35mm; box-sizing: border-box; box-shadow: none; border: none !important; }
    .print-body .footer-line { position: absolute; }
    .label {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* For older browsers */
    border: 1px solid #000 !important; /* Make border solid black */
}

.label-header, .label-footer, .recipient-info {
    border-color: #000 !important; /* Ensure all lines are black */
}
}
.status-unpaid {
    background-color: var(--main-red);
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}
/* Add this to style.css */
.status-partial {
    background-color: #ff9800; /* Orange color */
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}
/* --- New Inventory Card Styles --- */
#inventory-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
    gap: 25px;
    padding-top: 20px;
}

.inventory-card {
    position: relative;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.25s ease-in-out;
}

.inventory-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.inventory-card .item-name-card {
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark-grey);
}

.inventory-card .item-price-card {
    font-size: 1.1em;
    color: #4CAF50;
    font-weight: bold;
    margin-bottom: 15px;
}

.inventory-card .item-qty-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.inventory-card .item-qty-group label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--text-light);
}

.inventory-card .item-qty-group input {
    width: 70px;
    text-align: center;
    font-weight: bold;
}

.inventory-card .item-qty-group button {
    margin-left: auto; /* Pushes button to the right */
}

.inventory-card.low-stock {
    border-left: 5px solid var(--main-red);
}

/* Fix for Low Stock Threshold layout */
.low-stock-form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.low-stock-form-group label {
    margin-bottom: 0;
    font-weight: normal;
}
.low-stock-form-group input {
    width: 80px;
}

/* Responsive Grid */
@media (max-width: 950px) {
    #inventory-list-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    #inventory-list-container {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .filter-bar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}
/* --- Shipment Form Box Remove Button Style --- */
.box-container {
    position: relative; /* Required for positioning the absolute child button */
}

.box-container:hover .card-delete-btn {
    display: block; /* Makes the button visible on hover */
}
/* --- Admin Panel Grid & Modal Settings Styles --- */
.branch-settings-header {
    text-align: center;
    margin-bottom: 15px;
}

.branch-settings-header h4 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-dark);
    font-weight: bold;
}
/* Updated Admin Grid Layout */
.admin-grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    grid-template-areas:
        "create_branch  manage_branches"
        "delivery       manage_branches";
}
#admin-create-branch { grid-area: create_branch; }
#admin-manage-branches { grid-area: manage_branches; }
#admin-delivery-branches { grid-area: delivery; }


/* Styles for the new, wider modal */
#custom-modal-overlay .modal-content.wide-modal {
    max-width: 850px; /* Increased from 750px */
    width: 90%;
}

/* Styles for the form inside the modal */
#modal-branch-settings-container fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
    background-color: #fcfcfc;
}

#modal-branch-settings-container legend {
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 10px;
}

/* This is the KEY FIX for input field sizes */
#modal-branch-settings-container .settings-form-grid input,
#modal-branch-settings-container .settings-form-grid select,
#modal-branch-settings-container .settings-form-grid textarea {
    max-width: 400px; /* Prevents fields from being too wide */
    width: 100%;
}

#modal-branch-settings-container .action-buttons {
    justify-content: flex-end; /* Aligns save button to the right */
}
/* --- Branch Selector Button Styles --- */
.branch-selector-buttons {
    display: grid; /* Use a grid layout */
    grid-template-columns: repeat(4, 1fr); /* Create 4 equal-width columns */
    gap: 10px; /* Add space between the buttons */
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}
/* --- Auto Suggestion Box Styles --- */
.suggestions-box {
    position: absolute;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    width: 100%; /* Match the width of the input */
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
}

/* MODIFIED THIS ENTIRE BLOCK */
.suggestion-item {
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;      /* Prevents text from wrapping to a new line */
    overflow: hidden;         /* Hides any text that overflows */
    text-overflow: ellipsis;  /* Adds "..." to the end of truncated text */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover */
}

.suggestion-item:hover, .suggestion-item.highlighted {
    background-color: #007bff; /* This is the blue color you wanted */
    color: white;              /* Makes the text white for better contrast */
}

.suggestion-item .suggestion-district {
    font-size: 0.8em;
    color: #ccc; /* Lighter color for the sub-text on hover */
    margin-left: 8px;
}

/* Position the form group relative to place the suggestions box correctly */
#recipient-details-content .form-group {
    position: relative;
}
.inventory-card .card-actions-container {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.inventory-card:hover .card-actions-container {
    display: flex;
}

.card-actions-container button {
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    transition: background-color 0.2s;
    padding: 0;
}

.card-actions-container button:hover {
    background-color: var(--main-red);
}

.card-actions-container .card-edit-btn:hover {
     background-color: var(--main-blue);
}

.inventory-card .item-qty-display {
    padding: 8px;
    font-weight: bold;
    min-width: 70px;
    text-align: center;
    border: 1px solid transparent;
}
/* === START: Corrected Inventory Card Styles === */

/* This container holds the Edit and Delete buttons */
.inventory-card .card-actions-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none; /* Hide the buttons by default */
    flex-direction: row; /* This ensures the buttons are side-by-side */
    gap: 5px; /* This creates space between the buttons */
}

/* When you hover over the card, the button container becomes visible */
.inventory-card:hover .card-actions-container {
    display: flex;
}

/* This is the main style for BOTH buttons inside the container */
.card-actions-container button {
    /* We removed 'position: absolute' from the buttons themselves */
    width: 22px;
    height: 25px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    transition: background-color 0.2s;
}

/* Changes the color of the delete button when you hover over it */
.card-actions-container .card-delete-btn:hover {
    background-color: var(--main-red);
}

/* Changes the color of the edit button when you hover over it */
.card-actions-container .card-edit-btn:hover {
    background-color: var(--main-blue);
}

/* This ensures the "QTY:" label and the number are always aligned */
.inventory-card .item-qty-group {
    display: flex;
    align-items: center; /* This is the key fix for vertical alignment */
    gap: 10px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* This styles the quantity number when not in edit mode */
.inventory-card .item-qty-display {
    font-weight: bold;
    font-size: 5.1em;
    padding: 8px 0;
}

/* === END: Corrected Inventory Card Styles === */

.input-with-button {
    display: flex;
    gap: 10px;
}

.input-with-button input {
    flex-grow: 1;
}
/* This allows us to position the remove button relative to its box container. */
.box-container {
    position: relative;
}

/* This styles the remove button for the boxes in the shipment form. */
.box-container .card-delete-btn {
    display: none; /* The button is hidden by default. */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: var(--main-red);
    color: white;
    border: none;
    border-radius: 25%; /* Makes the button a circle. */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    line-height: 24px; /* Centers the 'X' vertically. */
    text-align: center;
    padding: 0;
    z-index: 5;
}

/* This makes the button appear when you hover over the box container. */
.box-container:hover .card-delete-btn {
    display: block;
}
/* --- Generic Button Group Styling --- */

/* Default style for buttons in specific groups */
.operator-buttons .btn,
.delivery-type-buttons .btn,
.delivery-branch-buttons .btn,
#payment-method-buttons .btn {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Hover effect for these buttons, but only if they are NOT already selected */
.operator-buttons .btn:not(.selected):hover,
.delivery-type-buttons .btn:not(.selected):hover,
.delivery-branch-buttons .btn:not(.selected):hover,
#payment-method-buttons .btn:not(.selected):hover {
    background-color: #ff0000; /* A slightly darker grey for the hover state */
    border-color: #adadad;
    color: #ffffff;
}

/* Style for when a button in these groups IS selected */
.operator-buttons .btn.selected,
.delivery-type-buttons .btn.selected,
.delivery-branch-buttons .btn.selected,
#payment-method-buttons .btn.selected {
    background-color: var(--main-red);
    color: white;
    border-color: var(--main-red);
}
/* New style for the payment status row in the invoice totals */
.totals-table tr.payment-status-row td {
    font-size: 14px; /* Makes the font smaller than the main total */
    font-weight: bold; /* Keeps the text bold for clarity */
    padding-top: 10px; /* Adds a bit of space from the line above */
}
/* --- Volume Offer Notification Styles --- */
.offer-notification-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e8f5e9; /* Light green background */
    color: #2e7d32; /* Dark green text */
    padding: 12px 15px;
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid #c8e6c9;
    font-weight: bold;
    font-size: 0.9em;
}

.offer-notification-box button {
    padding: 6px 12px;
    font-size: 0.85em;
    margin-left: 15px;
    flex-shrink: 0; /* Prevents the button from shrinking */
}
#settings-invoice-note { grid-area: invoice; }
#settings-gsheets { grid-area: gsheets; } /* Add this line */
#settings-security { grid-area: security; }
/* === ADD THIS ENTIRE SECTION START === */

/* --- QR Code & Tracking Styles --- */
.invoice-tracking-qr {
    text-align: center;
    margin-top: 15px;
}

.invoice-tracking-qr #qr-code-placeholder {
    width: 100px;
    height: 100px;
    margin: 5px auto;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #888;
}

.invoice-tracking-qr p {
    font-weight: bold;
    font-size: 0.8em;
    color: var(--text-dark);
    margin: 0;
}

#tracking-list-container .shipment-item.item-selected {
    background-color: #e7f4ff;
    border-color: var(--main-blue);
}

/* === ADD THIS ENTIRE SECTION END === */
.modal-input {
    width: 100%;
    padding: 10px;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    box-sizing: border-box;
}
/* --- NEW Tracking Page Grid and Card Styles --- */
.parcel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.parcel-card {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap for tighter spacing */
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden; /* Prevents content from overflowing */
}

.parcel-card:hover {
    border-color: #c0c0c0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.parcel-card.selected {
    background-color: #e7f4ff;
    border-color: var(--main-blue);
    box-shadow: 0 0 0 1px var(--main-blue);
}

.parcel-number {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--dark-grey);
    white-space: nowrap; /* Prevents number from wrapping */
}

.update-badge {
    background-color: #ff0000; /* As per your change */
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1;
}

/* This is the new style for the vertical line */
.separator {
    height: 20px;
    border-left: 1px solid #ccc;
}

.parcel-card.selected .update-badge {
    background-color: var(--main-blue);
}

.parcel-update {
    flex-grow: 1;
    font-size: 0.9em;
    color: #555;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* This adds the "..." if the text is too long */
}
/* --- Tracking Modal History Styles --- */
.tracking-update-history {
    padding-left: 0;
    list-style: none;
}

.update-row {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    align-items: center;
}

.update-number {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--dark-grey);
    margin-right: 10px;
}

.update-datetime {
    flex-basis: 90px;
    flex-shrink: 0;
    font-size: 0.8em;
    color: #666;
    text-align: right;
    border-right: 1px solid #e0e0e0;
    padding-right: 12px;
    margin-right: 12px;
}

.update-message {
    flex-grow: 1;
    font-weight: 500;
}

.update-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    padding-left: 10px;
}

.action-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: #999;
    transition: color 0.2s ease-in-out;
}

.action-icon:hover {
    color: var(--main-blue);
}

.action-icon.delete:hover {
    color: var(--main-red);
}
/* --- Message Manager Modal Styles --- */
.message-manager-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.message-manager-form input {
    flex-grow: 1;
}

#messages-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.message-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 5px;
}

.drag-handle {
    cursor: grab;
    color: #aaa;
    margin-right: 15px;
    font-size: 1.2em;
}

.message-item-text {
    flex-grow: 1;
}

.message-item-actions {
    display: flex;
    gap: 10px;
}

/* Style for the item being dragged */
.sortable-ghost {
    opacity: 0.4;
    background: #e7f4ff;
}
/* --- Branch Group Card Styles --- */
.branch-group-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.branch-group-card .tracking-branch-header {
    margin-top: 0; /* Remove extra top margin */
}
/* --- Header Shipment Info Styles --- */
#header-shipment-info {
    position: absolute;
    top: 10px;
    right: 20px;
    text-align: right;
    margin: 0;
    line-height: 1.2;
}
#header-branch-shipment {
    font-size: 1em; /* Adjust size as needed */
    color: #f0f0f0;
    margin: 4px 0 0 0;
    font-weight: normal;
}
#header-shipment-number {
    font-size: 1.5em; 
    font-weight: 800;
    color: var(--main-yellow);
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#header-collection-week {
    font-size: 1.2em; 
    color: #ffffff;
    margin: 5px 0 0 0;
    font-weight: 400;
}

.language-switcher {
    position: absolute;
    top: 100px; /* Moves it down below the shipment info */
    right: 20px;
    color: white;
    font-size: 0.9em;
}
/* --- Compact Toggle Button Style --- */
.btn-toggle {
    padding: 5px 10px;
    font-size: 0.85em;
    min-width: 90px;
    justify-self: start; /* Aligns button to the left in the grid cell */
}
/* --- Footer Styles --- */
.app-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #777;
    font-size: 0.9em;
    border-top: 1px solid #eee;
}

.app-footer p {
    margin: 5px 0;
}

.developer-credit {
    font-size: 0.8em;
    color: #aaa;
}
/* Add this to style.css */
.missing-info-badge {
    background-color: #D8000C; /* Red color */
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}
/* Add this to style.css */
.btn-copy-link {
    position: absolute;
    top: -15px;
    right: 0;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-copy-link:hover {
    background-color: #5a6268;
}
.btn-copy-link:disabled {
    background-color: #28a745;
    cursor: default;
}
.btn-copy-link i {
    margin-right: 5px;
}
/* --- New Filter Bar & Search Styles --- */
.filter-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.filter-bar-row:last-child {
    margin-bottom: 0;
}

.filter-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.search-container {
    flex-grow: 1;
    max-width: 400px;
}

#shipment-search-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

/* --- Pagination Styles --- */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    gap: 5px;
}

.pagination-container button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.pagination-container button:hover {
    background-color: #e0e0e0;
}

.pagination-container button.active {
    background-color: var(--main-red);
    color: white;
    border-color: var(--main-red);
}

.pagination-container button:disabled {
    background-color: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

.pagination-container .page-ellipsis {
    padding: 8px 0;
    color: #777;
}
/* --- Single Row Date Filter Style --- */
.filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: 10px; /* You can adjust this value for spacing */
    flex-wrap: nowrap; /* Ensures items stay on one line */
}

.filter-bar .filter-group label {
    margin-bottom: 0; /* Vertically aligns label with input box */
    white-space: nowrap; /* Prevents label text from wrapping */
}
/* --- ADD THIS ENTIRE SECTION AT THE END OF STYLE.CSS --- */

/* --- Saving Indicator Styles --- */
.saving-indicator-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    gap: 20px;
    text-align: center;
}

.saving-spinner {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid var(--main-red); /* Red */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.saving-indicator-container .saving-message {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-dark);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- ADD THIS AT THE END OF STYLE.CSS --- */

/* For the smaller 'Manage Batches' & 'Tracking Messages' buttons */
.btn-management {
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: normal;
}

/* For the new notification badge on the 'Import' button */
#import-branch-btn {
    position: relative; /* Allows the badge to be positioned on top */
}

#import-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--main-red);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: bold;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}
/* --- ADD THIS AT THE END OF STYLE.CSS --- */

/* --- Modern Import Modal Styles --- */
.import-branch-group {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.import-branch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.import-branch-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--dark-grey);
}

.import-parcel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.import-parcel-card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px 10px;
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none; /* Prevents text selection on click */
}

.import-parcel-card:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.import-parcel-card.selected {
    background-color: #e7f4ff;
    border-color: var(--main-blue);
    color: var(--main-blue);
    box-shadow: 0 0 0 2px var(--main-blue);
}
/* --- ADD THIS AT THE END OF STYLE.CSS --- */

/* Fix for the wide dropdown in the Import Modal */
#modal-batch-target {
    width: auto;      /* Allows the dropdown to size itself */
    min-width: 300px; /* Ensures it has a good minimum width */
    max-width: 100%;  /* Prevents it from overflowing on small screens */
}
.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px; /* Adjust as needed */
}

.btn-clear {
    padding: 4px 10px;
    font-size: 0.8em;
}
/* --- START: REPLACEMENT FOR FORM HEADERS --- */

.form-section-header {
  display: flex;
  align-items: center; /* Vertically centers the button with the text */
  border-bottom: 2px solid #FFCE4D; /* Moves the yellow line to the whole row */
  padding-bottom: 8px; /* Adds a nice gap between text and the underline */
  margin-bottom: 20px; /* Keeps the spacing between form sections */
}

.form-section-header h2 {
  flex-grow: 1; /* Makes the title take up all available space */
  border: none !important; /* Forcefully removes the old underline */
  padding: 0;
  margin: 0;
}

.form-section-header .btn-clear {
    margin-left: 15px; /* Adds a little space before the button */
} 

/* --- END: REPLACEMENT FOR FORM HEADERS --- */
/* --- START: STYLES FOR ENHANCED SHIPMENT LIST & TRACKING MODAL --- */

/* 1. Styles for the new middle column in the shipment list */
.shipment-item-content {
    /* This ensures the three columns are laid out correctly */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.shipment-item-center-details {
    flex-grow: 1; /* Allows this column to take up the available space */
    text-align: center;
    color: #888; /* Light gray text as requested */
    font-size: 0.9em;
    overflow: hidden;
}

.shipment-item-center-details .batch-number {
    display: block;
    font-weight: 300; /* Thin font weight */
    font-size: 1.4em; /* Larger text for the batch number */
    line-height: 1.2;
    white-space: nowrap;
}

.shipment-item-center-details .latest-update {
    display: block;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." for long text */
}

/* 2. Style for the new "Track Parcel" button */
.btn-track {
    background-color: #007bff; /* A distinct blue color */
    color: white;
    margin-top: 15px; /* Adds space above the button */
}

/* 3. Styles for the read-only tracking modal */
.tracking-history-modal-container {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.history-row-readonly {
    display: flex;
    gap: 15px;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.history-row-readonly:last-child {
    border-bottom: none;
}

.history-row-readonly .datetime {
    flex-basis: 90px;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8em;
    color: #555;
    line-height: 1.4;
}

.history-row-readonly .history-message-block {
    flex-grow: 1;
    border-left: 2px solid #ddd;
    padding-left: 15px;
}

.history-message-block div {
    margin-bottom: 5px;
}
.history-message-block .lang-label {
    font-weight: bold;
    font-size: 0.7em;
    color: #999;
    margin-right: 8px;
    text-transform: uppercase;
}
/* --- Styles for Report Address Dropdown --- */
.editable-address {
    position: relative;
}
.address-text {
    display: block; /* Ensures the text takes up the whole cell */
}
.address-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Makes the dropdown invisible */
    cursor: pointer;
}
.address-select:disabled {
    cursor: not-allowed; /* Changes the cursor for non-admins */
    opacity: 0 !important; /* Ensures it stays invisible and non-interactive */
}

/* --- START: NEW STYLES FOR REDESIGNED TRACKING MODAL --- */

/* 1. New, slightly narrower modal width */
#custom-modal-overlay .modal-content.medium-modal {
    max-width: 750px; /* Less wide than the 'wide-modal' */
    width: 90%;
}

/* 2. Main container for the new modal look */
.tracking-modal-public-view {
    font-family: 'Montserrat', sans-serif;
    text-align: left;
}

/* 3. Header section with shipment info and copy button */
.tracking-modal-public-view .tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.tracking-modal-public-view .info-block h1 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #333;
}
.tracking-modal-public-view .info-block p {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* 4. Language switcher inside the modal */
.tracking-modal-public-view .language-switcher-modal {
    text-align: right;
    margin-bottom: 15px;
}
.tracking-modal-public-view .language-switcher-modal a {
    color: #aaa;
    text-decoration: none;
    padding: 0 5px;
    font-weight: bold;
    cursor: pointer;
}
.tracking-modal-public-view .language-switcher-modal a.active {
    color: #007bff;
    text-decoration: underline;
}

/* 5. Timeline for tracking history (copied from track_style.css) */
.tracking-modal-public-view .timeline {
    border-left: 3px solid #e0e0e0;
    padding: 0;
    margin-left: 20px;
}
.tracking-modal-public-view .timeline-item {
    position: relative;
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}
.tracking-modal-public-view .timeline-number {
    position: absolute;
    left: -21.5px; /* Centers the circle on the border */
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #e0e0e0;
    color: #888;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1em;
}
.tracking-modal-public-view .timeline-item:first-child .timeline-number {
    background-color: #007bff; /* Blue for the latest update */
    color: white;
}
.tracking-modal-public-view .timeline-content {
    padding-left: 35px; /* Space for the number circle */
}
.tracking-modal-public-view .timeline-date {
    font-size: 0.8em;
    color: #777;
    margin-bottom: 5px;
}
.tracking-modal-public-view .timeline-message {
    font-size: 1.1em;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
}
.tracking-modal-public-view .btn-copy-link {
    position: static !important; /* Forcefully put button back in the layout */
    top: auto !important;
    right: auto !important;
    flex-shrink: 0; /* Prevent the button from shrinking */
}

.tracking-modal-public-view .modal-header-close-btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
}
/* Style for the new Close button in the modal header */
.modal-header-close-btn {
    padding: 4px 12px;
    font-size: 0.85em;
    margin-left: 20px; /* Adds space between title and button */
}
/* --- END: NEW MODAL STYLES --- */
/* --- FIX for Track Parcel Button and Modal Buttons --- */

.btn-track {
    background-color: #007bff;
    color: white;
}

.tracking-modal-public-view .btn-copy-link,
.modal-header-close-btn {
    flex-shrink: 0; /* Prevents buttons from shrinking or wrapping */
}

/* --- END --- */
/* --- START: Modal Header Button Styles --- */

/* Make the modal header a flex container to align items */
.modal-header {
    display: flex;
    justify-content: space-between; /* This is the key change */
    align-items: center;
}

/* Container for the top-right buttons */
#modal-header-actions {
    display: flex;
    gap: 10px; /* Adds space between buttons like 'Update' and 'Close' */
    flex-shrink: 0; /* Prevents buttons from shrinking or wrapping */
    margin-left: 20px; /* Ensures space between title and buttons */
}

/* A new, more compact style for buttons in the header */
.modal-header-btn {
    padding: 5px 12px;
    font-size: 0.9em;
}

/* --- END: Modal Header Button Styles --- */
/* --- START: Message Manager Modal Styles --- */

/* This makes the modal wider */
#custom-modal-overlay .modal-content.wide-modal {
    max-width: 850px;
    width: 90%;
}

/* This creates the two-column layout */
.message-manager-layout {
    display: flex;
    gap: 25px;
}

/* The left column for the form */
.message-manager-layout .form-column {
    flex: 1 1 45%; /* Allows it to grow but starts at 45% width */
}

/* The right column for the list */
.message-manager-layout .list-column {
    flex: 1 1 55%;
    border-left: 1px solid #eee;
    padding-left: 25px;
    max-height: 50vh; /* Prevents the list from getting too tall */
    overflow-y: auto; /* Adds a scrollbar if the list is long */
}

.list-column #messages-list {
     margin: 0;
     padding: 0;
}

/* --- END: Message Manager Modal Styles --- */
/* --- Style for the Delay Badge in Tracking List --- */
.delay-badge {
    background-color: #ffebee; /* Light red */
    color: #c62828; /* Darker red text */
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    border: 1px solid #ffcdd2;
}
/* --- Styles for the new Toggle Switch --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: #dc3545; /* Red color for delay */
}
input:checked + .toggle-slider:before {
    transform: translateX(24px);
}
.toggle-switch-container label {
    font-weight: bold;
    color: #333;
}
/* --- Style for the Delivery Notice in Modals --- */
.delivery-notice {
    font-size: 1.1em;
    font-weight: 700;
    color: #b95000; /* An orange-brown warning color */
    background-color: #fff4e6;
    border: 1px solid #ffe8cc;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    line-height: 1.5;
    text-align: center;
}
/* --- Accordion Styles for Admin Modal --- */
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    width: 100%;
    background-color: #f9f9f9;
    border: none;
    padding: 15px;
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    position: relative;
    color: var(--dark-grey);
}

/* This is the new hover effect */
.accordion-header:hover {
    background-color: #fffbe6; /* A light yellow for hover */
    border-left: 3px solid var(--main-yellow);
}

.accordion-content {
    padding: 20px;
    background-color: #ffffff;
    display: none; /* Hidden by default */
    border-top: 1px solid #e0e0e0;
}
/* --- New styles for copy-to-clipboard button --- */
.btn-copy-phone {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--main-blue);
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 0.9em;
    opacity: 0.7;
}

.btn-copy-phone:hover {
    background-color: #e0e0e0;
    opacity: 1;
}

.btn-copy-phone.copied {
    color: var(--main-green);
    opacity: 1;
}
/* --- New styles for 3-Column Layout --- */
.details-3-column-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.details-column {
    padding: 15px;
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
}

.details-column h4 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-column h4 i {
    color: var(--main-blue);
}

.details-column p,
.details-column ul {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.6;
}
/* --- ADD THIS CSS TO THE END OF style.css --- */

/* 1. Invoice Logo Container Styles */
.logo-container {
    display: flex;
    flex-direction: column; /* Stacks logos vertically */
    align-items: flex-end;  /* Aligns them to the right */
    gap: 10px;              /* Adds space between the logos */
}

.logo-container .main-logo {
    max-width: 250px;
    max-height: 80px; /* Your original size */
}

.logo-container .branch-logo {
    max-height: 60px; /* Makes the branch logo a bit smaller */
    max-width: 200px; /* Prevents it from being too wide */
    border-radius: 4px;
}

/* 2. Admin Panel Logo Uploader Styles */
.branch-logo-preview {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 5px;
    background: #fafafa;
}

.branch-logo-preview img {
    max-width: 250px;
    max-height: 100px;
    border-radius: 4px;
    object-fit: contain;
}

.branch-logo-preview div {
    font-size: 0.8em;
    color: #777;
    margin-top: 5px;
}
/* --- ADD THIS CSS TO THE END OF style.css --- */

/* 1. Styles for the new "Air Cargo" text below the main logo */
.logo-container .logo-subtitle {
    font-size: 1.2em;
    font-weight: 700;
    color: #555;
    text-align: right;
    margin: -5px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. Style for the branch logo when it's in the top-left */
.shop-info .branch-logo-top-left {
    max-height: 70px; /* Adjust height as needed */
    max-width: 220px; /* Adjust width as needed */
    border-radius: 4px;
    margin-bottom: 10px; /* Space between branch logo and address */
}

/* 3. Hide the old branch logo class, just in case */
.logo-container .branch-logo {
    display: none;
}
/* Tracking Card Styles */
.parcel-card {
    /* existing styles... */
    transition: all 0.3s ease;
}

/* Green style for delivered parcels */
.parcel-card.delivered {
    background-color: #d1e7dd !important; /* Light Green */
    border-left: 5px solid #198754 !important; /* Dark Green Border */
}

.parcel-card.delivered .parcel-update {
    color: #0f5132; /* Dark green text */
    font-weight: 600;
}