/* ------------------------------------------- */
/* 1. Global Reset, Typography, and Professional Palette */
/* ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* User-Provided Palette */
    --primary-color: #044569;
    --secondary-color: #058F48;
    --primary-shade: #04466925; 
    --secondary-shade: #058f4825;
    
    /* Core Gradient for visual interest */
    --main-gradient: linear-gradient(135deg, var(--primary-color) 0%, #056A79 40%, var(--secondary-color) 100%);

    --bg-color: #fdfdfd;       
    --section-bg: #f5f7f9;     
    --navbar-bg: #ffffff;
    --border-color: #e0e0e0;

    --text-color: #1a1a1a;
    --secondary-text: #555555;

    --button-bg: var(--primary-color);
    --button-text: #ffffff;
    --button-hover: #033956;

    --color-success: var(--secondary-color);      /* Delivered (Green) */
    --color-processing: var(--primary-color);     /* In Transit (Blue) */
    --color-cancelled: #DC3545;                   /* Red (Cancelled) */

    --border-radius-sm: 12px; /* Increased */
    --border-radius-lg: 20px; /* Larger radius for modern look */
    --shadow-subtle: 0 10px 40px rgba(0, 0, 0, 0.15); /* Deep, soft shadow */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    /* Use a fixed, light background for consistency */
    background-color: #f7f9fb; 
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.bx {
    font-size: 1.4rem; /* Slightly larger icons for impact */
    vertical-align: middle;
}

/* ------------------------------------------- */
/* 2. Main Layout and Section Styling (Responsiveness Fixes) */
/* ------------------------------------------- */

.main-content {
    padding: 30px 10px; /* Reduced vertical padding, added horizontal safety */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.track-shipment {
    width: 100%;
    max-width: 1100px; 
    background-color: transparent;
    padding: 0 10px; /* Ensure content padding on edges */
}

.track-title {
    font-size: 2.8rem; 
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: center;
}

/* ------------------------------------------- */
/* 3. Search Box (Track Button Gradient) */
/* ------------------------------------------- */

.track-search-box {
    display: flex;
    margin-bottom: 40px;
    background-color: var(--navbar-bg); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-subtle);
    max-width: 800px; /* Constrain search box width slightly */
    margin-left: auto;
    margin-right: auto;
}

.track-search-box input[type="text"] {
    flex-grow: 1;
    padding: 20px 25px; 
    border: none;
    font-size: 1.1rem;
    color: var(--text-color);
    background-color: transparent;
    transition: box-shadow 0.3s;
}

.track-search-box input[type="text"]:focus {
    box-shadow: inset 0 0 0 2px var(--secondary-color); 
    outline: none;
}

.track-search-box button {
    padding: 18px 40px; 
    /* Primary Gradient for the Track Button */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); 
    color: var(--button-text);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700; 
    transition: all 0.3s ease;
    flex-shrink: 0;
    border-left: 1px solid var(--secondary-color); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.track-search-box button:hover {
    /* Reverse gradient direction on hover for subtle animation */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 20px rgba(4, 69, 105, 0.5); 
    transform: translateY(-2px);
}

/* ------------------------------------------- */
/* 4. Progress Bar (Gradient Fill) */
/* ------------------------------------------- */

.status-progress-bar {
    margin-bottom: 40px;
    background-color: var(--navbar-bg); /* Use pure white background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 25px 30px;
    box-shadow: var(--shadow-subtle);
    background-color: rgba(255, 255, 255, 0.85); /* Light glass effect */
    backdrop-filter: blur(5px);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.progress-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.progress-percentage {
    font-size: 1.9rem;
    font-weight: 800;
    /* Use the primary color for the percentage text */
    color: var(--primary-color); 
}

.progress-bar-container {
    height: 14px; /* Thicker bar */
    background-color: var(--border-color);
    border-radius: 7px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    /* Gradient for the progress fill! */
    background: var(--main-gradient); 
    transition: width 1.5s ease-in-out; /* Slower, smoother animation */
}

/* ------------------------------------------- */
/* 5. Shipment Details Card (Glassmorphism + Consistency) */
/* ------------------------------------------- */

.shipment-details {
    padding: 30px;
    background-color: var(--navbar-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); 
    margin-bottom: 40px;
    box-shadow: var(--shadow-subtle);
    
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
}

.shipment-details h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
}

.shipment-info-grid {
    display: grid;
    /* Fully responsive grid for all sizes */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
}

.shipment-info-grid p {
    padding: 18px; 
    background-color: var(--section-bg); /* Use light grey for inputs */
    border-radius: var(--border-radius-sm); 
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.shipment-info-grid p:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-shade);
}

.shipment-info-grid strong {
    font-weight: 600;
    color: var(--primary-color); 
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Current Status Emphasis (Gradient Background) */
.shipment-info-grid .status-field {
    border: none; /* Remove traditional border */
    font-weight: 700;
    font-size: 1.1rem; 
    color: white !important; /* Text white for contrast */
    padding: 20px;

    /* Use the Main Gradient as the background for high visibility */
    background: var(--main-gradient) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Strong shadow for pop */
}

/* Override text color inside the status field */
.shipment-info-grid .status-field strong,
.shipment-info-grid .status-field span {
    color: white !important;
}

.status-Cancelled { 
    background: var(--color-cancelled) !important;
}

.status-Delivered {
    background: var(--color-success) !important;
}


/* ------------------------------------------- */
/* 6. Timeline Table (Enhanced) */
/* ------------------------------------------- */

.timeline-table {
    padding: 30px;
    background-color: var(--navbar-bg); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); 
    box-shadow: var(--shadow-subtle);
    overflow-x: auto;
    
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
}

.timeline-table h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

.timeline-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px; 
}

.timeline-table thead th {
    background-color: var(--primary-color);
    color: var(--button-text);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 15px 15px;
    /* Ensure radius on corners of table header */
    border-radius: 0; 
}
.timeline-table thead tr th:first-child { border-top-left-radius: 10px; }
.timeline-table thead tr th:last-child { border-top-right-radius: 10px; }

.timeline-table td {
    padding: 18px 15px; 
    border-bottom: 1px solid var(--border-color);
    white-space: normal; /* Allow text wrapping for better mobile view */
    color: var(--secondary-text);
    transition: background-color 0.2s;
}

/* ------------------------------------------- */
/* 7. Responsiveness */
/* ------------------------------------------- */

@media (max-width: 768px) {
    .track-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    
    /* Stack search box on mobile */
    .track-search-box {
        flex-direction: column;
        border-radius: var(--border-radius-sm);
    }
    .track-search-box button {
        width: 100%;
        padding: 15px 20px;
        border-left: none;
        border-top: 1px solid var(--primary-shade);
        background: var(--button-bg); /* Use solid color for simplicity on mobile */
        transform: none;
        box-shadow: none;
    }
    .track-search-box input[type="text"] {
         padding: 15px 15px;
    }

    .shipment-info-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }

    .shipment-details, .timeline-table, .status-progress-bar {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
    
    .timeline-table table {
        min-width: 100%; /* Important: Table can now shrink down */
        display: block;
    }
}


/* ------------------------------------------- */
/* 1. Global Reset, Typography, and Professional Palette */
/* ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* User-Provided Palette */
    --primary-color: #044569;
    --secondary-color: #058F48;
    --primary-shade: #04466925; 
    --secondary-shade: #058f4825;
    
    /* Core Gradient for visual interest */
    --main-gradient: linear-gradient(135deg, var(--primary-color) 0%, #056A79 40%, var(--secondary-color) 100%);

    --bg-color: #fdfdfd;       
    --section-bg: #f5f7f9;     
    --navbar-bg: #ffffff;
    --border-color: #e0e0e0;

    --text-color: #1a1a1a;
    --secondary-text: #555555;

    --button-bg: var(--primary-color);
    --button-text: #ffffff;
    --button-hover: #033956;

    --color-success: var(--secondary-color);      /* Delivered (Green) */
    --color-processing: var(--primary-color);     /* In Transit (Blue) */
    --color-cancelled: #DC3545;                   /* Red (Cancelled) */

    --border-radius-sm: 12px; /* Increased */
    --border-radius-lg: 20px; /* Larger radius for modern look */
    --shadow-subtle: 0 10px 40px rgba(0, 0, 0, 0.15); /* Deep, soft shadow */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    /* Use a fixed, light background for consistency */
    background-color: #f7f9fb; 
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.bx {
    font-size: 1.4rem; /* Slightly larger icons for impact */
    vertical-align: middle;
}

/* ------------------------------------------- */
/* 2. Main Layout and Section Styling (Responsiveness Fixes) */
/* ------------------------------------------- */

.main-content {
    padding: 30px 10px; /* Default desktop/tablet padding */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Prevents horizontal overflow caused by nested margins/paddings */
    overflow-x: hidden; 
}

.track-shipment {
    width: 100%;
    max-width: 1100px; 
    background-color: transparent;
    padding: 0 10px; /* Ensure content padding on edges */
}

.track-title {
    font-size: 2.8rem; 
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: center;
}

/* ------------------------------------------- */
/* 3. Search Box (Track Button Gradient) */
/* ------------------------------------------- */

.track-search-box {
    display: flex;
    margin-bottom: 40px;
    background-color: var(--navbar-bg); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-subtle);
    max-width: 800px; /* Constrain search box width slightly on desktop */
    margin-left: auto;
    margin-right: auto;
}

/* ... (Search Box Input/Button Styles remain the same) ... */

/* ------------------------------------------- */
/* 6. Timeline Table (Enhanced) */
/* ------------------------------------------- */

.timeline-table {
    padding: 30px;
    background-color: var(--navbar-bg); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); 
    box-shadow: var(--shadow-subtle);
    /* Allow horizontal scrolling ONLY for the table content */
    overflow-x: auto; 
    
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
}

.timeline-table h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

.timeline-table table {
    width: 100%; 
    border-collapse: collapse;
    /* Adjusted min-width to better fit small screens while maintaining readability */
    min-width: 600px; 
}

/* ... (Table Header/Cell Styles remain the same) ... */


/* ------------------------------------------- */
/* 7. Responsiveness */
/* ------------------------------------------- */

@media (max-width: 768px) {
    
    /* Tighter padding on very narrow screens to prevent overflow */
    .main-content {
        padding: 15px 5px; 
    }
    
    .track-shipment {
        padding: 0 5px; 
    }
    
    .track-title {
        font-size: 2.2rem;
        margin-bottom: 25px; 
    }
    
    /* Ensure the search box doesn't have a desktop max-width forcing overflow */
    .track-search-box {
        flex-direction: column;
        border-radius: var(--border-radius-sm);
        margin-bottom: 25px;
        max-width: none; /* CRITICAL: Remove max-width limit */
    }
    
    /* ... (Search Box input/button styles remain the same) ... */

    .progress-label {
        font-size: 1.1rem;
    }
    .progress-percentage {
        font-size: 1.6rem;
    }

    .shipment-info-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
    
    .shipment-details h3, .timeline-table h3 {
        font-size: 1.4rem;
    }

    .shipment-details, .timeline-table, .status-progress-bar {
        padding: 15px; /* Reduced internal padding for smaller screens */
        margin-bottom: 20px;
        border-radius: var(--border-radius-lg); 
    }
    
    .timeline-table thead th {
        font-size: 0.8rem; /* Shrink table headers */
        padding: 10px 8px;
    }
    
    .timeline-table td {
        padding: 12px 8px; /* Shrink table data padding */
        font-size: 0.9rem;
    }
}