/* ======================= RESET ======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ======================= BODY ======================= */
body {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ======================= SIDEBAR ======================= */
.sidebar {
    width: 250px;
    background: rgba(32, 58, 67, 0.9);
    color: #fff;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    padding-top: 30px;
    overflow-y: auto;
    box-shadow: -3px 0 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.sidebar.minimized { width: 60px; }

.sidebar h2 { text-align: center; margin-bottom: 30px; font-size: 20px; }

.sidebar a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    border-right: 4px solid transparent;
    white-space: nowrap;
}
.sidebar a i { margin-left: 10px; font-size: 18px; }
.sidebar a:hover {
    background: rgba(255, 204, 0, 0.2);
    border-right: 4px solid #ffcc00;
}

/* ======================= MAIN CONTENT ======================= */
.main-content {
    margin-right: 250px;
    padding: 30px;
    transition: margin-right 0.3s ease;
}
.sidebar.minimized ~ .main-content {
    margin-right: 60px;
}

/* ======================= DASHBOARD CARDS ======================= */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}
.card{
    border-radius:14px;
    padding:22px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    cursor:pointer;
    transition:.3s;
    color:#fff;
}
.card:hover{transform:translateY(-6px)}
.card h3{margin:10px 0;font-size:18px}
.card p{font-size:28px;font-weight:bold}
.card i{font-size:32px}
.card-blue{background:linear-gradient(135deg,#1e3c72,#2a5298)}
.card-green{background:linear-gradient(135deg,#11998e,#38ef7d)}
.card-red{background:linear-gradient(135deg,#cb2d3e,#ef473a)}
.card-orange{background:linear-gradient(135deg,#f7971e,#ffd200)}
.card-purple{background:linear-gradient(135deg,#7b4397,#dc2430)}
.card-gray{background:linear-gradient(135deg,#485563,#29323c)}

.details-card{
    display:none;
    margin-top:15px;
    background:#fff;
    padding:15px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    color:#000;
}

/* ======================= TABLE ======================= */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}
th,td{
    padding:8px;
    border:1px solid #ccc;
    text-align:center;
    color:#000;
}
th{background:#1e3c72;color:#fff}
tr.booked{background:#e9ffe9}
tr.available{background:#ffecec}
.btn{
    padding:6px 10px;
    border:none;
    border-radius:6px;
    background:#1e3c72;
    color:#fff;
    cursor:pointer;
    text-decoration:none;
}

/* ======================= CHAT ======================= */
.chat-box{
    max-height:400px;
    overflow-y:auto;
    border:1px solid #ccc;
    padding:10px;
    border-radius:8px;
    margin-top:10px;
}
.chat-msg{
    padding:6px 10px;
    border-radius:8px;
    margin-bottom:6px;
}
.chat-msg.sent{background:#d1e7dd;text-align:right;}
.chat-msg.received{background:#f8d7da;text-align:left;}
.chat-actions{
    margin-top:5px;
}
.chat-actions a{
    margin-left:5px;
    font-size:12px;
    color:#1e3c72;
    text-decoration:none;
}

/* ======================= EXPORT BUTTON ======================= */
.export-btn{
    margin:5px;
    padding:6px 12px;
    border:none;
    border-radius:5px;
    background:#28a745;
    color:#fff;
    cursor:pointer;
}
.export-btn:hover{
    background:#218838;
}

/* ======================= RESPONSIVE ======================= */
@media(max-width:768px){
    .sidebar { width: 60px; }
    .main-content { margin-right: 60px; padding: 15px; }
    .cards { grid-template-columns: 1fr 1fr; }
}
@media(max-width:480px){
    .cards { grid-template-columns: 1fr; }
}