/* ============================== */
/*        GLOBAL STYLES          */
/* ============================== */

/* Set base styles for the entire body */
body {
    font-family: Arial, sans-serif; /* Default font across the site */
    background-color: #f8f8f8; /* Light gray page background */
    margin: 0; /* Remove default browser margins */
    padding: 80px; /* Padding around page content */
}

/* ============================== */
/*        LOGIN PAGE STYLES      */
/* ============================== */

/* Full-page login body container */
.login-body {
    background-color: #2c3844; /* Dark background for contrast */
    width: 100%; /* Full width */
    text-align: center; /* Center-align login box */
    padding-top: 100px; /* Space from top for breathing room */
}

/* Login wrapper to center content vertically and horizontally */
.login-wrapper {
    display: flex; /* Enable flex layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 40px 20px; /* Padding around the login block */
    min-height: 100vh; /* Full height of viewport */
    background-color: #f8f8f8; /* Match global background */
}

/* Login container box */
.login-container {
    background: white; /* White box background */
    padding: 30px 25px; /* Inner padding */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center align everything inside */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Soft shadow effect */
    width: 100%; /* Allow fluid width */
    max-width: 360px; /* Restrict to 360px max */
    margin: 0 auto; /* Center horizontally */
}

/* Logo container inside login box */
.logo-container {
    text-align: center; /* Center the logo image */
    margin-bottom: 15px; /* Space between logo and title */
}

/* Logo image */
.login-logo {
    height: 100px; /* Set fixed logo height */
    max-width: 100%; /* Prevent image overflow */
}

/* Login title heading */
.login-title {
    font-size: 22px; /* Size of the title text */
    font-weight: bold; /* Bold for emphasis */
    color: #333; /* Dark gray text */
    margin-bottom: 20px; /* Space below title */
}

/* Aligns form fields to the left inside the login box */
.login-box {
    text-align: left;
}

/* Style for login button */
.login-btn {
    width: 100%; /* Full-width button */
    background-color: #ff6600; /* Orange color */
    border: none; /* No border */
    padding: 10px; /* Inner spacing */
    color: white; /* White text */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Readable size */
}

    /* Hover effect for login button */
    .login-btn:hover {
        background-color: #cc5500; /* Darker orange on hover */
    }

/* Responsive adjustments for login section (mobile screens) */
@media (max-width: 767px) {
    .login-wrapper {
        padding: 30px 10px !important; /* Reduce padding on mobile */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .login-container {
        width: 100% !important; /* Full width on mobile */
        max-width: 95% !important; /* Leave side padding */
        margin: 0 auto !important;
        padding: 30px 20px !important; /* Less padding inside box */
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 10px;
    }

        .login-container .login-title {
            font-size: 20px !important; /* Slightly smaller title */
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            font-size: 16px !important;
            padding: 10px !important;
        }

        .login-container .login-btn {
            font-size: 16px !important;
        }
}
/* ====== BUTTON STYLES ====== */

/* Main orange button */
.btn-primary {
    background-color: #ff6600; /* Orange background */
    border: none; /* No border */
    padding: 10px 15px; /* Space inside button */
    color: white; /* White text */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size */
    border-radius: 5px; /* Rounded corners */
}

    /* Hover effect for primary button */
    .btn-primary:hover {
        background-color: #cc5500; /* Darker orange on hover */
    }

/* Custom orange button */
.orange-btn {
    background-color: #ff6600; /* Same orange color */
    color: white; /* White text */
}

/* Light grey button */
.grey-btn {
    background-color: #f2f2f2; /* Light grey */
    color: black; /* Black text */
    border: 1px solid #ccc; /* Light grey border */
}

/* Button with fixed width and height */
.custom-btn {
    min-width: 150px; /* Minimum width */
    height: 38px; /* Fixed height */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text horizontally */
    padding-top: 8px; /* Padding top to align text */
    border-radius: 6px; /* Rounded corners */
}

/* Green confirmation button */
.green-btn {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
}
/* ====== HEADER STYLES ====== */

/* Main header bar at the top of the page */
.custom-header {
    background-color: #2c3844; /* Dark blue-gray background */
    padding: 15px 30px; /* Space inside the header */
    height: auto; /* Height adapts to content */
    width: 100%; /* Full width across screen */
    text-align: center; /* Centers all inline content */
}

/* Container for header elements (logo, title) */
.header-container {
    width: 100%; /* Full width */
    overflow: hidden; /* Prevent content spillover */
}

/* Aligns logo and title horizontally */
.logo-title-container {
    display: table; /* Table display to align children */
    width: 100%; /* Use full space */
    text-align: center; /* Center content */
}

/* Logo image and positioning */
.navbar-brand {
    display: table-cell; /* Align with title using table layout */
    vertical-align: middle; /* Center vertically */
}

    .navbar-brand img {
        height: 90px; /* Logo height */
        max-width: 100%; /* Prevents logo from exceeding container */
        margin-top: -5px; /* Slight vertical adjustment */
    }

/* Title text next to logo */
.site-title {
    display: table-cell; /* Align with logo */
    color: white; /* White text */
    font-size: 24px; /* Title size */
    font-weight: bold; /* Bold font */
    vertical-align: middle; /* Vertically centered */
    padding-left: 20px; /* Space between logo and title */
}

/* Navigation container */
.navbar-nav {
    width: 100%; /* Full width for nav links */
    text-align: left; /* Align left */
    padding-top: 20px; /* Space below title */
}

    /* Each navigation link */
    .navbar-nav > li > a {
        color: #ff6600; /* Orange text */
        font-weight: bold; /* Bold font */
        text-decoration: none; /* Remove underline */
        font-size: 16px; /* Font size */
        padding: 10px 15px; /* Padding inside links */
        display: inline-block; /* Keep spacing consistent */
        border-radius: 5px; /* Rounded corners */
    }

        /* Hover effect for nav links */
        .navbar-nav > li > a:hover {
            background-color: #cc5500; /* Darker orange on hover */
            color: white; /* White text on hover */
        }

/* Border line under header (optional, used on login sometimes) */
.navbar-inverse {
    border-bottom: 1px solid black; /* Thin black separator line */
    margin-bottom: 20px; /* Space below the header */
}

/* Smaller logo title text on mobile */
@media (max-width: 800px) {
    .navbar-brand span {
        font-size: 14px; /* Shrink title on small screens */
    }
}
/* ====== CONTENT AREA STYLES ====== */

/* Main container for body content (used on all main pages) */
.content-body {
    margin-top: 120px; /* Space below the header */
    background: white; /* White background for contrast */
    padding: 20px 40px; /* Internal spacing inside the box */
    border-radius: 20px; /* Rounded corners for smooth look */
    margin-left: auto; /* Horizontally center the container */
    margin-right: auto; /* Horizontally center the container */
    max-width: 1500px; /* Limit how wide the container can get */
}

/* Make content full-width and edge-to-edge on smaller screens */
@media (max-width: 800px) {
    .content-body {
        padding: 15px; /* Less padding on small screens */
        max-width: 100%; /* Use full screen width */
        border-radius: 0; /* Remove border rounding for mobile fit */
    }
}
/* ====== PAGINATION STYLES ====== */

/* Style for page number links and current page indicator */
.pagination > li > a,
.pagination > li > span {
    color: #ff6600; /* Orange text for links */
    border: 1px solid #ddd; /* Light border around each item */
    padding: 5px 10px; /* Padding inside each link */
    margin: 2px; /* Space between pagination items */
    border-radius: 5px; /* Rounded corners */
}

    /* Style when hovering or for the active (selected) page */
    .pagination > li > a:hover,
    .pagination > .active > span {
        background-color: #ff6600; /* Orange background */
        color: white; /* White text */
        border-color: #ff6600; /* Match border with background */
    }
/* ====== BUTTON STYLES ====== */

/* Standard orange button (used for 'Save', 'Submit', etc.) */
.orange-btn {
    background-color: #ff6600; /* Bright orange background */
    color: white; /* White text */
}

/* Grey button (used for Cancel, Back, etc.) */
.grey-btn {
    background-color: #f2f2f2; /* Light grey background */
    color: black; /* Dark text */
    border: 1px solid #ccc; /* Subtle grey border */
}

/* Green button (used for Approve, Confirm, etc.) */
.green-btn {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
}

/* Custom reusable button format */
.custom-btn {
    min-width: 150px; /* Fixed minimum width */
    height: 38px; /* Fixed height */
    font-weight: bold; /* Bold text */
    text-align: center; /* Centered content */
    padding-top: 8px; /* Padding from top for vertical alignment */
    border-radius: 6px; /* Rounded corners */
}
/* ====== TABLE STYLES ====== */

/* Main table styling */
.table {
    width: 100%; /* Take up full container width */
    border-collapse: collapse; /* Remove spacing between cells */
    margin-top: 20px; /* Space above the table */
    background: white; /* White background for content contrast */
}

    /* Header and cell styling */
    .table th, .table td {
        border: 1px solid #ddd; /* Light grey border between cells */
        padding: 10px; /* Inner spacing for readability */
        text-align: left; /* Align text to the left by default */
    }

    /* Table header background and text color */
    .table th {
        background-color: #2c3844; /* Dark grey-blue background */
        color: white; /* White header text */
    }
/* ====== RESPONSIVE TABLE WRAPPERS (MOBILE SCROLLING) ====== */

@media (max-width: 800px) {
    .table-responsive-wrapper {
        overflow-x: auto; /* Horizontal scroll if needed */
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
        width: 100%; /* Take full width */
    }

    .table {
        min-width: 780px; /* Prevent table from squishing */
    }
}

@media (max-width: 800px) {
    .table-responsive-wrap {
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch;
    }

        .table-responsive-wrap table {
            min-width: 700px; /* Minimum table width to avoid squeeze */
        }
}
/* ====== FULLY RESPONSIVE TABLE FORMAT (STACKED ON MOBILE) ====== */

@media (max-width: 800px) {
    .table-responsive-wrap {
        overflow-x: hidden; /* Hide horizontal scroll */
    }

    .table.table-bordered {
        border: 0; /* Remove outer table border */
    }

        .table.table-bordered thead {
            display: none; /* Hide headers for mobile block style */
        }

        .table.table-bordered tbody tr {
            display: block; /* Stack rows vertically */
            margin-bottom: 1rem; /* Space between rows */
            border: 1px solid #ddd; /* Light border per row */
            padding: 10px;
            background-color: #fff; /* Keep rows white */
        }

        .table.table-bordered td {
            display: block; /* Stack each cell */
            width: 100%; /* Take full width */
            border: none; /* Remove individual borders */
            border-bottom: 1px solid #eee; /* Subtle divider */
            text-align: left;
        }

            .table.table-bordered td:last-child {
                border-bottom: none; /* Remove last row divider */
            }

            .table.table-bordered td::before {
                content: attr(data-label); /* Show the label for each field */
                font-weight: bold; /* Emphasize the label */
                display: block;
                margin-bottom: 5px;
                color: #333; /* Dark label text */
            }
}
/* ====== MOBILE INSPECTION BLOCK (QUESTION ITEMS) ====== */

@media (max-width: 800px) {
    .mobile-inspection-question {
        margin-bottom: 20px; /* Space between question blocks */
        padding: 10px; /* Inner spacing */
        background: #fff; /* White background */
        border: 1px solid #ddd; /* Light grey border */
        border-radius: 6px; /* Slightly rounded corners */
    }
}
/* ====== MOBILE SECTION HEADERS (E.g., "Exterior", "Lights") ====== */

@media (max-width: 767px) {
    .mobile-group-header {
        font-size: 18px; /* Slightly bigger text */
        font-weight: bold; /* Emphasized heading */
        margin: 20px 0 10px; /* Top/bottom spacing */
        color: #2c3844; /* Matching main theme */
        border-left: 4px solid #ff6600; /* Orange highlight bar */
        padding-left: 10px; /* Spacing from left border */
    }
}
/* ====== MOBILE FORM FIELDS (LABELS & RADIO BUTTONS) ====== */

@media (max-width: 767px) {
    .mobile-inspection-question {
        border: 1px solid #ccc; /* Light grey border */
        border-radius: 6px; /* Rounded container */
        padding: 10px 15px; /* Padding inside block */
        margin-bottom: 12px; /* Gap between blocks */
        background-color: #fff; /* White background */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Light shadow */
    }

    .question-label {
        font-weight: bold; /* Bold label */
        margin-bottom: 8px; /* Spacing below label */
        font-size: 16px; /* Larger text */
        color: #333; /* Dark grey */
    }

    .answer-row {
        display: flex; /* Layout answers in a row */
        gap: 15px; /* Space between answers */
        flex-wrap: wrap; /* Wrap on small screens */
        margin-top: 5px; /* Space above answers */
    }

        .answer-row label {
            display: flex; /* Inline with radio */
            align-items: center; /* Align vertically */
            font-weight: normal; /* Standard weight */
            font-size: 14px; /* Slightly smaller text */
        }

        .answer-row input[type="radio"] {
            margin-right: 6px; /* Gap between radio and label text */
        }
}
/* ====== VISIBILITY: XS (Extra Small Screens Only) ====== */

/* Default: Hide XS elements on large screens */
.visible-xs {
    display: none; /* Hidden by default */
}

/* Show XS elements on small screens only */
@media (max-width: 767px) {
    .visible-xs {
        display: block; /* Shown on XS */
    }

    .hidden-xs {
        display: none !important; /* Fully hidden on XS */
    }
}
/* ====== VISIBILITY: DESKTOP VS MOBILE TOGGLES ====== */

/* Default: Show desktop, hide mobile */
.visible-desktop {
    display: block;
}

.visible-mobile {
    display: none;
}

/* On small screens, reverse the visibility */
@media (max-width: 800px) {
    .visible-desktop {
        display: none; /* Hide on mobile */
    }

    .visible-mobile {
        display: block; /* Show on mobile */
    }
}
/* ====== SPECIAL MOBILE COMPONENT STYLING ====== */

@media (max-width: 800px) {
    .mobile-vehicle-card {
        border: 1px solid #ccc; /* Card border */
        padding: 12px; /* Internal padding */
        margin-bottom: 15px; /* Space between cards */
        border-radius: 6px; /* Rounded corners */
        background-color: #fff; /* White background */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    }

    .mobile-calendar-day {
        margin-bottom: 20px; /* Spacing between days */
    }

        .mobile-calendar-day ul {
            list-style-type: none; /* Remove bullets */
            padding-left: 0; /* Align left */
        }

        .mobile-calendar-day li {
            padding: 4px 0; /* Vertical spacing */
            border-bottom: 1px solid #eee; /* Separator line */
        }
}
/* ====== CONTAINERS: MOBILE-ONLY / DESKTOP-ONLY ====== */

/* Mobile-only sections (hidden on large screens) */
.mobile-only {
    display: none; /* Hide by default */
}

@media (max-width: 767px) {
    .mobile-only {
        display: block; /* Show on mobile */
    }

    .desktop-only {
        display: none !important; /* Hide desktop-only blocks */
    }
}
/* ====== LOGIN PAGE WRAPPER (DESKTOP AND ALL DEVICES) ====== */

.login-wrapper {
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    padding: 40px 20px; /* Space around the box */
    min-height: 100vh; /* Full height of the screen */
    background-color: #f8f8f8; /* Light background */
}
@media (max-width: 767px) {
    .login-wrapper {
        padding: 30px 10px !important; /* Reduce outer padding */
        display: flex !important; /* Reinforce flexbox */
        justify-content: center !important; /* Recenter */
        align-items: center !important; /* Vertical center */
    }

    .login-container {
        width: 100% !important; /* Full width on small screens */
        max-width: 95% !important; /* Allow margin on sides */
        margin: 0 auto !important; /* Centered horizontally */
        padding: 30px 20px !important; /* Internal padding */
        box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Soft shadow */
        border-radius: 10px; /* Smooth corners */
    }

        .login-container .login-title {
            font-size: 20px !important; /* Slightly smaller on small screens */
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            font-size: 16px !important; /* Comfortable input size */
            padding: 10px !important; /* Input padding */
        }

        .login-container .login-btn {
            font-size: 16px !important; /* Button text size */
        }
}
/* ====== PAGINATION STYLES ====== */

.pagination > li > a,
.pagination > li > span {
    color: #ff6600; /* Orange text for default state */
    border: 1px solid #ddd; /* Light border between pages */
    padding: 5px 10px; /* Inner space for clickable area */
    margin: 2px; /* Space between buttons */
    border-radius: 5px; /* Slight rounding for friendly look */
}

    .pagination > li > a:hover,
    .pagination > .active > span {
        background-color: #ff6600; /* Highlight current/hovered page */
        color: white; /* White text for contrast */
        border-color: #ff6600; /* Match border to background */
    }
/* ====== BUTTON COLOR THEMES ====== */

/* Orange button used throughout the system */
.orange-btn {
    background-color: #ff6600; /* Primary orange */
    color: white; /* Contrast text */
}

/* Light grey button for secondary actions */
.grey-btn {
    background-color: #f2f2f2; /* Light neutral background */
    color: black; /* Dark text */
    border: 1px solid #ccc; /* Subtle border */
}

/* Green button (e.g., for success actions) */
.green-btn {
    background-color: #4CAF50; /* Standard green success */
    color: white; /* White text */
    border: none; /* Flat look */
}

/* ====== BUTTON SIZE AND SHAPE ====== */

/* Universal styling for all custom buttons */
.custom-btn {
    min-width: 150px; /* Consistent minimum width */
    height: 38px; /* Fixed height */
    font-weight: bold; /* Emphasized label */
    text-align: center; /* Center label */
    padding-top: 8px; /* Vertical alignment */
    border-radius: 6px; /* Rounded edges */
}
/* ====== VISIBILITY CLASSES ====== */

/* Always hide by default */
.visible-xs {
    display: none; /* Hide on desktop by default */
}

/* Show .visible-xs and hide .hidden-xs on mobile (max 767px) */
@media (max-width: 767px) {
    .visible-xs {
        display: block; /* Show only on mobile */
    }

    .hidden-xs {
        display: none !important; /* Force hide on mobile */
    }
}

/* Show only on desktop */
.visible-desktop {
    display: block; /* Visible on desktop by default */
}

/* Hide .visible-desktop and show .visible-mobile on smaller screens (max 800px) */
.visible-mobile {
    display: none; /* Hidden by default */
}

@media (max-width: 800px) {
    .visible-desktop {
        display: none; /* Hide desktop content */
    }

    .visible-mobile {
        display: block; /* Show mobile content */
    }
}
/* ====== MOBILE ELEMENTS (CARDS, CALENDAR, ETC.) ====== */

@media (max-width: 800px) {
    /* Mobile version of a vehicle "card" style */
    .mobile-vehicle-card {
        border: 1px solid #ccc; /* Light border */
        padding: 12px; /* Spacing inside */
        margin-bottom: 15px; /* Space between cards */
        border-radius: 6px; /* Rounded corners */
        background-color: #fff; /* White background */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    }

    /* Wrapper for a single calendar day in mobile view */
    .mobile-calendar-day {
        margin-bottom: 20px; /* Space between day sections */
    }

        /* Calendar event list styling */
        .mobile-calendar-day ul {
            list-style-type: none; /* Remove bullet points */
            padding-left: 0; /* Remove default indent */
        }

        .mobile-calendar-day li {
            padding: 4px 0; /* Spacing between entries */
            border-bottom: 1px solid #eee; /* Light bottom border */
        }
}
/* Hide mobile-only elements by default (visible only on small screens) */
.mobile-only {
    display: none; /* Hidden unless in mobile view */
}

/* Show mobile-only content only on screens smaller than 767px */
@media (max-width: 767px) {
    .mobile-only {
        display: block; /* Now visible */
    }

    .desktop-only {
        display: none !important; /* Force-hide desktop-only content */
    }
}
/* Main flex layout for login screen */
.login-wrapper {
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 40px 20px; /* Padding around the container */
    min-height: 100vh; /* Full viewport height */
    background-color: #f8f8f8; /* Light background */
}
@media (max-width: 767px) {
    .login-wrapper {
        padding: 30px 10px !important; /* Smaller padding on small screens */
        display: flex !important; /* Reinforce flexbox */
        justify-content: center !important; /* Recenter */
        align-items: center !important; /* Recenter */
    }
}
@media (max-width: 767px) {
    .login-container {
        width: 100% !important; /* Allow full width of screen */
        max-width: 95% !important; /* Keep slight margins on both sides */
        margin: 0 auto !important; /* Center horizontally */
        padding: 30px 20px !important; /* Balanced padding inside box */
        box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
        border-radius: 10px; /* Rounded corners */
    }

        .login-container .login-title {
            font-size: 20px !important; /* Slightly smaller title text */
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            font-size: 16px !important; /* Input readability */
            padding: 10px !important; /* Comfortable touch spacing */
        }

        .login-container .login-btn {
            font-size: 16px !important; /* Adjust login button size */
        }
}
/* ====== PAGINATION STYLES ====== */

/* General pagination item styling */
.pagination > li > a,
.pagination > li > span {
    color: #ff6600; /* Orange text color for pagination links */
    border: 1px solid #ddd; /* Light border for separation */
    padding: 5px 10px; /* Spacing around pagination numbers */
    margin: 2px; /* Space between each page number */
    border-radius: 5px; /* Rounded edges */
}

    /* Hover and active page styling */
    .pagination > li > a:hover,
    .pagination > .active > span {
        background-color: #ff6600; /* Highlight selected/hovered page with orange */
        color: white; /* Make text white for contrast */
        border-color: #ff6600; /* Border matches background */
    }
/* ====== CUSTOM BUTTONS ====== */

/* Shared custom button style */
.custom-btn {
    min-width: 150px; /* Minimum width for consistency */
    height: 38px; /* Fixed height */
    font-weight: bold; /* Make text bold */
    text-align: center; /* Center-align button text */
    padding-top: 8px; /* Vertical alignment for text */
    border-radius: 6px; /* Rounded corners */
}

/* Orange-styled button (primary theme) */
.orange-btn {
    background-color: #ff6600; /* Orange background */
    color: white; /* White text for contrast */
}

/* Grey-styled button (secondary/neutral actions) */
.grey-btn {
    background-color: #f2f2f2; /* Light grey background */
    color: black; /* Standard text color */
    border: 1px solid #ccc; /* Subtle border */
}

/* Green-styled button (success/positive actions) */
.green-btn {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
}
/* ====== RESPONSIVE VISIBILITY HELPERS ====== */

/* Hide on all screen sizes unless overridden */
.visible-xs {
    display: none; /* Hidden by default */
}

/* Show only on screens smaller than 768px (phones) */
@media (max-width: 767px) {
    .visible-xs {
        display: block; /* Show on mobile screens */
    }

    .hidden-xs {
        display: none !important; /* Hide on mobile screens */
    }
}

/* Desktop-only display */
.visible-desktop {
    display: block; /* Default visibility for large screens */
}

/* Mobile-only display */
.visible-mobile {
    display: none; /* Hidden on desktop by default */
}

/* Adjust visibility for mobile screens */
@media (max-width: 800px) {
    .visible-desktop {
        display: none; /* Hide elements on small screens */
    }

    .visible-mobile {
        display: block; /* Show elements on small screens */
    }

    /* Card layout used for vehicle info on mobile views */
    .mobile-vehicle-card {
        border: 1px solid #ccc; /* Light grey border */
        padding: 12px; /* Padding inside the card */
        margin-bottom: 15px; /* Spacing between cards */
        border-radius: 6px; /* Rounded edges */
        background-color: #fff; /* White background */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow for depth */
    }

    /* Spacing below each mobile calendar section */
    .mobile-calendar-day {
        margin-bottom: 20px;
    }

        /* Remove list styling for cleaner mobile layout */
        .mobile-calendar-day ul {
            list-style-type: none;
            padding-left: 0;
        }

        /* Style for each booking in the mobile calendar view */
        .mobile-calendar-day li {
            padding: 4px 0;
            border-bottom: 1px solid #eee;
        }
}

/* Force-hide desktop views on mobile, and show mobile alternatives */
.mobile-only {
    display: none; /* Hidden by default */
}

@media (max-width: 767px) {
    .mobile-only {
        display: block; /* Show only on mobile */
    }

    .desktop-only {
        display: none !important; /* Hide on mobile */
    }
}
/* ====== MOBILE LOGIN WRAPPER ====== */

/* Ensures the entire login page is vertically centered and padded */
.login-wrapper {
    display: flex; /* Flex layout to allow centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 40px 20px; /* General padding */
    min-height: 100vh; /* Ensure it takes full screen height */
    background-color: #f8f8f8; /* Light background to match theme */
}

/* Adjust login layout specifically for small screens (phones) */
@media (max-width: 767px) {
    .login-wrapper {
        padding: 30px 10px !important; /* Less padding on mobile */
        display: flex !important; /* Reinforce layout in some old browsers */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
    }

    .login-container {
        width: 100% !important; /* Full width of screen */
        max-width: 95% !important; /* Keep a small margin on the sides */
        margin: 0 auto !important; /* Center horizontally */
        padding: 30px 20px !important; /* Comfortable padding inside */
        box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow */
        border-radius: 10px; /* Rounded corners */
    }

        .login-container .login-title {
            font-size: 20px !important; /* Slightly smaller heading */
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            font-size: 16px !important; /* Mobile-friendly font size */
            padding: 10px !important; /* Comfortable padding */
        }

        .login-container .login-btn {
            font-size: 16px !important; /* Button text clarity on mobile */
        }
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    display: block;
    margin: 5% auto;
    max-width: 90%;
    max-height: 80vh;
    border: 4px solid #fff;
    border-radius: 5px;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Lightbox Modal Fullscreen Overlay */
.photo-lightbox {
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1050; /* Make sure it's above Bootstrap navbars etc. */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

/* Image inside the modal */
.photo-lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    margin: auto;
    display: block;
    border: 5px solid white;
    border-radius: 6px;
}

/* Close button */
.photo-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 9999;
}

.photo-lightbox-content {
    transition: transform 0.3s ease-in-out;
}

.photo-lightbox.showing .photo-lightbox-content {
    transform: scale(1);
}