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

body{
background:#f4f6f9;
color:#111827;
}

.layout{
display:flex;
min-height:100vh;
}

/* SIDEBAR */
.sidebar{
width:230px;
min-height:100vh;
background:#0d7c3b;
padding:20px;
color:white;
box-shadow:4px 0 15px rgba(0,0,0,.15);
}

.sidebar h2{
margin-bottom:28px;
font-size:34px;
font-weight:700;
}

.sidebar a{
display:block;
padding:10px 12px;
margin-bottom:10px;
color:white;
text-decoration:none;
border-radius:8px;
transition:.2s;
font-size:15px;
}

.sidebar a:hover,
.sidebar a.active{
transform:translateX(4px);
background:#0fa958;
}

/* MAIN */
.main{
flex:1;
min-height:100vh;
}

/* TOPBAR */
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 24px;
background:white;
border-bottom:1px solid #e5e7eb;
box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.topbar h3{
font-size:18px;
font-weight:700;
}

/* ROLE BUTTON */
.employee-btn{
background:#15803d;
color:white;
padding:10px 18px;
border-radius:8px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.2s;
border:none;
}

.employee-btn:hover{
background:#166534;
}

/* CONTENT */
.content{
padding:24px;
}

body{
background:
linear-gradient(
rgba(245,247,250,.90),
rgba(245,247,250,.90)
),
url('/images/fleet-bg.png');

background-size:cover;
background-position:center;
background-attachment:fixed;

color:#111827;
}

/* HEADINGS */
h2{
font-size:22px;
margin-bottom:18px;
font-weight:700;
}

h3{
font-size:20px;
margin-bottom:14px;
font-weight:700;
}

/* CARD GRID */
.cards{
display:flex;
gap:20px;
margin-bottom:24px;
}

.card{
flex:1;
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
}

/* STAT CARDS */
.card h4{
font-size:14px;
color:#64748b;
margin-bottom:8px;
font-weight:600;
}

.number{
font-size:24px;
font-weight:700;
color:#111827;
}

/* TABLE */
table{
width:100%;
background:white;
border-radius:14px;
border-collapse:collapse;
overflow:hidden;
margin-bottom:24px;
}

th{
background:#f8fafc;
font-size:13px;
color:#64748b;
font-weight:600;
text-align:left;
padding:14px;
}

td{
padding:14px;
border-bottom:1px solid #f1f5f9;
font-size:14px;
}

tr:last-child td{
border-bottom:none;
}

/* BUTTONS */
.btn{
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:14px;
text-decoration:none;
display:inline-block;
}

.btn-green{
background:#16a34a;
color:white;
transition:.2s;
}

.btn-green:hover{
background:#15803d;
transform:translateY(-2px);
}

.btn-red{
background:#dc2626;
color:white;
}

.btn-red:hover{
background:#b91c1c;
}

/* PROFILE MODAL */
.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.25);
backdrop-filter:blur(8px);
z-index:9999;
}

.profile-card{
width:400px;
max-width:92%;
background:white;
padding:34px;
border-radius:22px;
box-shadow:0 25px 70px rgba(0,0,0,.12);
position:relative;
animation:fadeIn .2s ease;
}

.profile-card h2{
font-size:34px;
font-weight:700;
color:#166534;
text-align:center;
margin-bottom:28px;
}

.profile-card p{
font-size:15px;
line-height:1.5;
color:#475569;
margin-bottom:14px;
}

.profile-card strong{
display:block;
font-size:15px;
font-weight:700;
color:#111827;
margin-bottom:2px;
}

/* MODAL BUTTONS */
.modal-btn{
display:flex;
justify-content:center;
align-items:center;
width:100%;
padding:13px;
margin-top:14px;
border:none;
border-radius:12px;
font-size:15px;
font-weight:600;
text-decoration:none;
cursor:pointer;
transition:.2s;
}

.neutral-btn{
background:#f8fafc;
color:#111827;
border:1px solid #e5e7eb;
}

.neutral-btn:hover{
background:#eef2f7;
}

.logout-btn{
background:#ef4444;
color:white;
}

.logout-btn:hover{
background:#dc2626;
}

/* CLOSE BUTTON */
.close-btn{
position:absolute;
top:18px;
right:20px;
font-size:24px;
cursor:pointer;
color:#94a3b8;
}

.close-btn:hover{
color:#111827;
}

/* ANNOUNCEMENTS */
.announce-list{
display:flex;
flex-direction:column;
gap:18px;
margin-top:20px;
}

.announce-card{
background:white;
border-radius:16px;
padding:22px;
box-shadow:0 8px 24px rgba(0,0,0,.05);
border-left:6px solid #15803d;
transition:.2s;
}

.announce-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.announce-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
}

.announce-top h3{
font-size:20px;
margin:0;
color:#111827;
}

.announce-top small{
font-size:13px;
color:#6b7280;
}

.announce-icon{
font-size:24px;
}

.announce-card p{
font-size:15px;
line-height:1.7;
color:#374151;
}

/* QUICK TIPS */
.quick-tips{
padding:20px;
}

.quick-tips h3{
font-size:20px;
margin-bottom:12px;
font-weight:700;
}

.quick-tips ul{
padding-left:18px;
margin:0;
}

.quick-tips li{
font-size:15px;
font-weight:500;
line-height:1.6;
margin-bottom:8px;
color:#374151;
}

.quick-tips li:last-child{
margin-bottom:0;
}

/* ANIMATION */
@keyframes fadeIn{
from{
opacity:0;
transform:scale(.95);
}
to{
opacity:1;
transform:scale(1);
}
}

select,
textarea,
input[type=file]{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:8px;
margin-top:5px;
}

.btn{
background:#16a34a;
color:white;
padding:10px 18px;
border:none;
border-radius:8px;
cursor:pointer;
}

.request-panel{
width:100%;
max-width:760px;
background:#f3f4f6;
border:1px solid #d1d5db;
border-radius:14px;
padding:32px;
box-shadow:none;
}

.top-head h2{
margin:0;
font-size:30px;
color:#111827;
}

.top-head p{
margin-top:5px;
margin-bottom:22px;
color:#6b7280;
font-size:14px;
}

.vehicle-banner{
background:#e5e7eb;
border-left:5px solid #15803d;
color:#111827;
padding:18px;
border-radius:10px;
margin-bottom:24px;
}

.vehicle-banner h3{
margin:0;
font-size:22px;
}

.vehicle-banner span{
font-size:14px;
color:#4b5563;
}

input,
textarea{
width:100%;
padding:12px;
background:white;
border:1px solid #cbd5e1;
border-radius:10px;
font-size:14px;
}

input:focus,
textarea:focus{
border-color:#15803d;
box-shadow:none;
}

.big-btn{
margin-top:22px;
width:100%;
padding:14px;
background:#15803d;
color:white;
border:none;
border-radius:10px;
font-size:15px;
font-weight:700;
}

.big-btn:hover{
background:#166534;
transform:none;
}

/* REQUEST PAGE CENTER FIX */
.request-wrapper{
display:flex;
justify-content:center;
align-items:flex-start;
padding:40px 40px 40px 90px;
min-height:calc(100vh - 120px);
}


label{
display:block;
font-weight:700;
font-size:14px;
margin-top:16px;
margin-bottom:10px;
color:#111827;
}

select{
height:46px;
}

.card{
flex:1;
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:.2s;
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 8px 24px rgba(0,0,0,.10);
}

table tr:hover{
background:#f8fafc;
}

.btn-warning{
    background:#f59e0b;
    color:white;

    padding:10px 18px;
    border-radius:10px;

    text-decoration:none;
    font-weight:600;

    transition:.2s;
}

.btn-warning:hover{
    background:#ea580c;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(245,158,11,.25);
}