/**
 * Kestrel Global Shipping & Logistics LTD - Global Responsive CSS
 * Mobile-first responsive styles for all pages
 */

/* ===== MOBILE FIRST BASE STYLES ===== */

/* Container overrides */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* ===== TABLETS (768px and below) ===== */
@media (max-width: 991.98px) {
    /* Sidebar collapse
       NOTE: do NOT include the bare `.sidebar` class here. AdminLTE's inner menu
       container is <div class="sidebar">, and pushing it to left:-280px threw the
       admin menu off-screen. Only the custom dashboards' `.ks-sidebar` / `#sidebar`
       should be positioned by this rule. */
    .ks-sidebar,
    #sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        z-index: 1050;
        transition: left 0.3s ease;
        width: 260px;
    }

    .ks-sidebar.active,
    #sidebar.active {
        left: 0;
    }
    
    /* Main content full width */
    .ks-main,
    .main-content,
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Mobile menu toggle visible */
    .mobile-menu-toggle,
    .sidebar-toggle {
        display: flex !important;
    }
    
    /* Hero sections */
    .hero-section,
    .ks-hero {
        padding: 60px 20px !important;
        text-align: center;
    }
    
    .hero-section h1,
    .ks-hero h1 {
        font-size: 2rem !important;
    }
    
    /* Tables responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Cards */
    .row .col-lg-3,
    .row .col-lg-4 {
        margin-bottom: 15px;
    }
    
    /* Forms */
    .form-row > .col,
    .form-row > [class*="col-"] {
        margin-bottom: 15px;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 20px);
    }
}

/* ===== MOBILE PHONES (576px and below) ===== */
@media (max-width: 767.98px) {
    /* Typography */
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.1rem; }
    
    /* Navbar */
    .navbar-brand img {
        height: 35px !important;
    }
    
    .navbar-nav {
        padding: 15px 0;
    }
    
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
    
    /* Page headers */
    .ks-page-header,
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    .ks-page-title {
        font-size: 1.5rem;
    }
    
    /* Buttons */
    .btn-group-responsive {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group-responsive .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Cards */
    .card {
        margin-bottom: 15px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* Stats cards */
    .stat-card,
    .ks-stat-card {
        padding: 15px;
    }
    
    .stat-card .stat-value,
    .ks-stat-card .stat-value {
        font-size: 1.5rem;
    }
    
    /* Tables */
    .ks-table th,
    .ks-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
    
    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Dropdowns */
    .dropdown-menu {
        width: 100%;
        max-width: 280px;
    }
    
    /* Footer */
    footer .row {
        text-align: center;
    }
    
    footer .col-md-4,
    footer .col-lg-3 {
        margin-bottom: 30px;
    }
    
    /* Login/Register forms */
    .auth-card,
    .login-card {
        margin: 20px 15px;
        padding: 25px 20px;
    }
    
    /* Shipment detail page */
    .shipment-hero {
        padding: 25px 20px !important;
        border-radius: 12px;
    }
    
    .tracking-number {
        font-size: 1.5rem !important;
        word-break: break-all;
    }
    
    .route-visual {
        flex-direction: column;
        gap: 20px;
    }
    
    .route-line {
        width: 3px;
        height: 40px;
        margin: 0;
    }
    
    .route-line::after {
        display: none;
    }
    
    .progress-steps {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .progress-step {
        flex: 0 0 auto;
        width: calc(33.33% - 10px);
    }
    
    .progress-steps::before {
        display: none;
    }
    
    .progress-step-icon {
        width: 40px;
        height: 40px;
    }
    
    .progress-step-label {
        font-size: 0.65rem;
    }
    
    /* Detail cards */
    .detail-card {
        padding: 15px;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .detail-value {
        text-align: left;
    }
    
    /* Timeline */
    .timeline-item {
        gap: 12px;
    }
    
    .timeline-icon {
        width: 35px;
        height: 35px;
    }
    
    /* Action buttons */
    .action-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    /* Flex utilities */
    .d-flex.gap-3,
    .d-flex.gap-4 {
        gap: 0.75rem !important;
    }
    
    /* Input groups */
    .input-group {
        flex-wrap: wrap;
    }
    
    /* Search bars */
    .ks-table-actions .input-group {
        width: 100% !important;
        margin-top: 10px;
    }
    
    /* Filter buttons */
    .ks-table-header {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .ks-table-header .d-flex {
        flex-wrap: wrap;
    }
}

/* ===== SMALL PHONES (375px and below) ===== */
@media (max-width: 375px) {
    h1, .h1 { font-size: 1.5rem; }
    
    .tracking-number {
        font-size: 1.25rem !important;
    }
    
    .progress-step {
        width: calc(50% - 10px);
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    .shipment-status-badge {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

/* ===== DASHBOARD SPECIFIC ===== */

/* Customer Dashboard */
@media (max-width: 991.98px) {
    .ks-sidebar {
        transform: translateX(-100%);
        left: 0;
    }
    
    .ks-sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
}

/* AdminLTE sidebar now uses native scrolling (the OverlayScrollbars scaffolding
   was removed from navigation.php because its JS is disabled). Ensure the menu
   can scroll on any screen when it is taller than the viewport. */
.main-sidebar .sidebar {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Admin Dashboard (AdminLTE)
   This layout ships with the `sidebar-mini-md sidebar-mini-xs` body classes,
   which stop AdminLTE from taking the sidebar fully off-canvas on phones, so it
   stayed on screen and squeezed the content into a sliver.

   Fix: on screens below AdminLTE's `lg` breakpoint we push the sidebar off-canvas
   using AdminLTE's OWN mechanism — animate `margin-left` (not `left`) and reveal
   it via the `sidebar-open` class that pushmenu toggles on <body>. The content
   wrapper/header/footer then span the full width. Tapping the hamburger
   (data-widget="pushmenu") slides the sidebar in over the page. */
@media (max-width: 991.98px) {
    .main-sidebar {
        left: 0 !important;
        margin-left: -250px !important;
        width: 250px !important;
        transition: margin-left 0.3s ease-in-out !important;
        z-index: 1045;
    }

    /* pushmenu adds `sidebar-open` to <body> on small screens */
    body.sidebar-open .main-sidebar {
        margin-left: 0 !important;
    }

    /* Content is never pushed by the sidebar on mobile */
    .content-wrapper,
    .main-header,
    .main-footer {
        margin-left: 0 !important;
    }

    /* Dim the page behind the open sidebar (AdminLTE injects #sidebar-overlay) */
    #sidebar-overlay {
        z-index: 1044;
    }

    /* Admin cards */
    .small-box {
        margin-bottom: 15px;
    }

    .small-box h3 {
        font-size: 1.5rem;
    }
}

/* ===== PUBLIC PAGES ===== */

/* Homepage */
@media (max-width: 767.98px) {
    .hero-content {
        padding: 40px 20px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .feature-card {
        margin-bottom: 20px;
    }
    
    .cta-section {
        padding: 40px 20px;
    }
    
    .service-card {
        margin-bottom: 20px;
    }
}

/* Track page */
@media (max-width: 767.98px) {
    .track-form {
        padding: 20px;
    }
    
    .track-form .form-control {
        font-size: 1rem;
    }
    
    .tracking-result {
        padding: 20px;
    }
    
    .tracking-timeline {
        padding-left: 30px;
    }
}

/* Login/Register */
@media (max-width: 767.98px) {
    .auth-container {
        padding: 20px;
    }
    
    .auth-form {
        padding: 25px 20px;
    }
    
    .auth-logo img {
        height: 50px;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Show/hide based on viewport */
.show-mobile {
    display: none !important;
}

@media (max-width: 767.98px) {
    .show-mobile {
        display: block !important;
    }
    
    .hide-mobile {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .show-tablet {
        display: block !important;
    }
    
    .hide-tablet {
        display: none !important;
    }
}

/* Touch-friendly elements */
@media (max-width: 991.98px) {
    .btn,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Nav links get the touch height but MUST keep their own display value.
       Forcing inline-flex here collapsed the AdminLTE sidebar menu. */
    .nav-link {
        min-height: 44px;
    }

    /* AdminLTE sidebar links must stay full-width flex rows so the icon + label
       lay out correctly and the menu is visible. */
    .main-sidebar .nav-sidebar .nav-link {
        display: flex !important;
        align-items: center;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

.container,
.container-fluid,
.row {
    max-width: 100%;
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    .ks-sidebar,
    .sidebar {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .main-footer,
    footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Print styles */
@media print {
    .ks-sidebar,
    .sidebar,
    .no-print {
        display: none !important;
    }
    
    .ks-main,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}