/* view.css */


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; 
}




#datePickerBtn {
    font-size: 0.75rem;
}

h5 {

    font-weight: bold !important;

}



.form-label {

    font-weight: bold !important;

}



.table>:not(caption)>*>* {

    padding: .3rem .3rem;

}



.main-container {

    display: flex;

    flex-direction: column;

    height: 100vh;

}



#map {

    height: 75vh;

    width: 100%;

    position: relative; /* Keep relative for child positioning if needed */

}



.map-overlay-logo {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 10; /* Ensures it's on top of map tiles */

    background-color: rgba(255, 255, 255, 0.75);

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}



.map-overlay-logo img {

    display: block;

    width: 200px;

    height: auto;

}



.map-overlay-logo .logo-text {

    font-size: 1rem;

    font-weight: bold;

    color: #000;

    text-align: center;

    margin-top: 5px;

}



.dashboard-content {

    flex-grow: 1;

    padding: 10px;

    display: flex;

    gap: 10px;

    overflow: hidden;

}



.dispatch-main-column {

    flex: 3;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.dispatch-form-column {

    flex: 1;

    background-color: #fff;

    padding: 15px;

    padding-top: 2px;

    border: 1px solid #dee2e6;

    overflow-y: auto;

}



.info-bar {

    border-top: 4px solid #ffc107;

    background-color: #e9ecef;

    padding: 0 15px;

}



/* --- "File Folder" Tabs --- */

.nav-tabs .nav-link {

    color: #333;

    font-weight: bold;

    background-color: transparent;

    border-left: none !important;

    border-right: none !important;

    border-top: 2px solid transparent !important;

    margin-right: 2px;

    padding: 0.5rem 1.5rem;

    border-radius: 0;

    margin-top: 2px;

}



.nav-tabs .nav-link.active {

    background-color: #fff;

    border-top: 2px solid #343a40 !important;

    border-bottom: 3px solid #fff !important;

    position: relative;

    margin-bottom: -3px; 

}



.nav-tabs .nav-link:not(.active):hover {

    background-color: #f0f2f5;

}



.summary-section-wrapper {

    background-color: #fff;

    padding: 5px;

    border: 2px solid #343a40;

    margin-bottom: 0;

}



.summary-section .summary-block {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 5px;

    margin-bottom: 10px;

}



.summary-section .total-assigned .label-stack {

    font-weight: bold;

    text-transform: uppercase;

    font-size: 0.9rem;

    line-height: 1.1;

    margin-right: 10px;

}



.summary-section .total-assigned .value-pill {

    font-size: 1.2rem;

    font-weight: bold;

}



.summary-section .assignment-types span {

    margin-right: 15px;

}



.summary-section .overview-text {

    font-size: 0.9rem;

    color: #6c757d;

}

.summary-section .overview-text strong {

    color: #343a40;

}

iframe {
    width: 100%;
    height: 100%;
    border: none; 
    display: block; 
}


.zone-filter-buttons {

    gap: 10px;

}



.zone-button-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-right: 10px;

}



.zone-button-wrapper .btn {

    min-width: 90px;

}



.zone-button-wrapper .zone-count {

    font-size: 0.8rem;

    font-weight: bold;

    color: #6c757d;

    margin-top: 4px;

}



.tab-content {

    flex-grow: 1;

    overflow: hidden;

    display: flex;

}



.tab-pane {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.deliveries-table {

    flex-grow: 1;

    overflow-y: auto;

}



.deliveries-table th, .deliveries-table td {

    font-size: 0.8rem;

    vertical-align: middle;

    padding: 0;

}



.form-header {

    background-color: #343a40;

    color: #ffffff;

    padding: 8px 15px;

    border-radius: 5px;

    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 15px !important;

}



.form-header i {

    margin-right: 10px;

    font-size: 1.2rem;

}



.form-action-buttons {

    display: flex;

    gap: 10px;

    justify-content: center;

}



/* Style for the new map marker button in the table row */

.btn-map-marker {

    background-color: #ffffff;

    border: 1px solid #ccc;

    padding: 0.2rem 0.5rem;

}



.btn-map-marker i {

    color: #dc3545; /* Bootstrap's danger red color */

    font-size: 1rem;

}



/* Styles for the new Delivery Detail Modal */

.modal-detail-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px;

}



.detail-block {

    background-color: #f8f9fa;

    padding: 10px;

    border-radius: 5px;

    border: 1px solid #e9ecef;

}



.detail-block h6 {

    font-weight: bold;

    color: #0d6efd;

    border-bottom: 1px solid #dee2e6;

    padding-bottom: 5px;

    margin-bottom: 10px;

}



.detail-item {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

    font-size: 0.9rem;

}



.detail-item i {

    font-size: 1.1rem;

    color: #6c757d;

    width: 25px;

    text-align: center;

    margin-right: 8px;

}



.detail-item .value {

    font-weight: 500;

}



#modal-edit-mode .form-label i {

    margin-right: 8px;

}



#toggleZonesBtn, #datePickerBtn, #toggleMapBtn, #toggleOrdersBtn, #toggleCustomersBtn {

    margin-bottom: 5px;

}



#cancelNewCustomerBtn {

    margin-bottom: 10px;

    width: 100%;

}