:root{
--bg:#F4EBDD;
--panel:#E6D8BF;
--card:#ffffff;

--primary:#B02829;
--danger:#7F1416;

--text:#1E1E1E;
--muted:#5a5a5a;
--border:#2B2B2B;
}


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

body{
margin:0;
font-family: "Segoe UI", Arial, sans-serif;
background:var(--bg);
color:var(--text);
padding:20px;
}

h2{
margin-top:0;
font-weight:700;
letter-spacing:.5px;
}


/* ===== TOPBAR ===== */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:16px 28px;
border:2px solid var(--border);
box-shadow:6px 6px 0 #000;
margin:-20px -20px 30px -20px;
}

.logo{
font-weight:900;
font-size:18px;
letter-spacing:2px;
color:var(--primary);
text-transform:uppercase;
}

.navlinks{
display:flex;
align-items:center;
}

.navlinks a{
margin-left:20px;
color:var(--muted);
text-decoration:none;
font-weight:700;
font-size:13px;
letter-spacing:.3px;
padding:6px 14px;
transition:.1s;
}

.navlinks a:hover{
color:var(--text);
}

.navlinks a.active{
color:var(--primary)!important;
border:2px solid var(--primary);
padding:5px 13px;
}


/* ===== CARDS ===== */

.card{
background:white;
padding:22px;
border-radius:6px;
border:2px solid var(--border);
box-shadow:6px 6px 0 #000;
margin-bottom:22px;
}


/* ===== STATS ===== */

.stats{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:25px;
}

.statCard{
flex:1;
min-width:160px;
background:white;
border:2px solid var(--border);
box-shadow:6px 6px 0 #000;
padding:18px;
text-align:center;
}

.statCard b{
display:block;
font-size:24px;
margin-top:6px;
font-weight:800;
}


/* ===== INPUTS ===== */

input,select{
display:block;
width:100%;
margin:10px 0;
padding:12px;
border:2px solid var(--border);
background:white;
font-size:14px;
}

input:focus{
outline:none;
border:2px solid var(--primary);
}


/* ===== BUTTONS ===== */

button{
display:block;
width:100%;
margin-top:10px;
padding:13px;
border:none;
background:var(--primary);
color:white;
font-weight:800;
letter-spacing:.5px;
cursor:pointer;
box-shadow:4px 4px 0 #000;
transition:.1s;
}

button:hover{
transform:translate(2px,2px);
box-shadow:2px 2px 0 #000;
}

button:active{
transform:translate(4px,4px);
box-shadow:0 0 0 #000;
}

button.delete{
background:var(--danger);
}


/* ===== SCOOTY GRID ===== */

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:16px;
}

.scooty{
background:white;
padding:16px;
border:2px solid var(--border);
box-shadow:5px 5px 0 #000;
cursor:pointer;
}

.available{
border-left:8px solid #2DA049;
}

.rented{
border-left:8px solid var(--primary);
}

.scooty:hover{
transform:translate(2px,2px);
box-shadow:3px 3px 0 #000;
}


/* ===== ROW ===== */

.row{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:14px;
border:2px solid var(--border);
box-shadow:5px 5px 0 #000;
margin-bottom:10px;
}


/* ===== TABLE ===== */

table{
width:100%;
border-collapse:collapse;
background:white;
border:2px solid var(--border);
box-shadow:6px 6px 0 #000;
}

th{
background:#efe3cc;
padding:12px;
text-align:left;
border-bottom:2px solid var(--border);
}

td{
padding:12px;
border-bottom:1px solid #ddd;
}


/* ===== IMAGE ===== */

.thumb{
width:60px;
height:60px;
object-fit:cover;
border:2px solid var(--border);
margin-top:5px;
}