/* Global Website Styling */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

html,
body{
    height:100%;
}

body{
    background:#f4f4f4;
    color:#333;
    line-height:1.6;
}

/* Main Wrapper */

.page-wrapper{
    min-height:100vh;

    display:flex;
    flex-direction:column;
}

/* Main Container */

.container{
    width:90%;
    max-width:1100px;

    margin:30px auto;

    flex:1;
}

/* Navigation */

.navbar{
    background:#003e7e;

    padding:18px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

/* Navigation Left */

.nav-left{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;
}

/* Navigation Buttons */

.nav-button{
    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:0.3s;
}

.nav-button:hover{
    color:#b9d8ff;
}

/* Logout Button */

.logout-button{
    color:#ffd1d1;
}

/* Logo */

.nav-logo{
    height:70px;
    width:auto;

    display:block;
}

/* Hero Section */

.hero{
    background:white;

    padding:50px 40px;

    border-radius:12px;

    margin-bottom:25px;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);

    text-align:center;
}

.hero h1{
    color:#003e7e;

    margin-bottom:15px;

    font-size:2.2rem;
}

.hero p{
    max-width:750px;

    margin:auto;

    color:#555;
}

/* Dashboard Grid */

.dashboard-grid{
    display:grid;

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

    gap:20px;

    margin-top:25px;
}

/* Cards */

.card,
.bike-card,
.dashboard-card{
    background:white;

    padding:25px;

    border-radius:12px;

    margin-bottom:20px;

    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* Dashboard Cards */

.dashboard-card{
    transition:0.3s;
}

.dashboard-card:hover{
    transform:translateY(-3px);
}

/* Headings */

h1,
h2,
h3{
    margin-bottom:15px;
}

h2{
    color:#003e7e;
}

h3{
    color:#003e7e;
}

/* Forms */

form{
    margin-top:15px;
}

label{
    display:block;

    margin-top:12px;

    font-weight:bold;
}

input,
select,
textarea{
    width:100%;

    padding:12px;

    margin-top:5px;
    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:15px;

    background:white;
}

textarea{
    resize:vertical;
}

/* Buttons */

button,
.btn{
    display:inline-block;

    background:#003e7e;

    color:white;

    border:none;

    padding:12px 18px;

    border-radius:6px;

    text-decoration:none;

    cursor:pointer;

    transition:0.3s;

    font-weight:bold;
}

button:hover,
.btn:hover{
    background:#0050a3;
}

/* Action Buttons */

.action-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

/* Tables */

table{
    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:10px;

    overflow:hidden;
}

table th,
table td{
    border:1px solid #ddd;

    padding:14px;

    text-align:left;
}

table th{
    background:#003e7e;

    color:white;
}

/* Images */

img{
    max-width:100%;

    border-radius:10px;
}

.bike-image{
    margin-top:15px;

    max-height:300px;

    object-fit:cover;
}

/* Alert Messages */

.success,
.success-message{
    background:#d4edda;

    color:#155724;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;
}

.error,
.error-message{
    background:#f8d7da;

    color:#721c24;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;
}

/* Footer */

footer{
    background:#003e7e;

    color:white;

    text-align:center;

    padding:20px;

    margin-top:auto;
}

/* Responsive Design */

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        align-items:flex-start;
    }

    .nav-left{

        flex-direction:column;

        align-items:flex-start;

        width:100%;
    }

    .hero{

        padding:35px 25px;
    }

    .hero h1{

        font-size:1.8rem;
    }

    .nav-logo{

        height:55px;
    }
}