/* General Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #007bff;
    color: white;
}

/* Reminder Color Coding Logic */

/* 1. URGENT: Red color agar dose AAJ hi hai */
.status-today {
    background-color: #ff4d4d !important; /* Bright Red */
    color: white;
    font-weight: bold;
}

/* 2. UPCOMING: Yellow color agar dose agle 5 din mein hai */
.status-upcoming {
    background-color: #fff3cd !important; /* Soft Yellow */
    color: #856404;
    border-left: 5px solid #ffeeba;
}

/* 3. NORMAL: Green color agar sab theek hai ya dose door hai */
.status-normal {
    background-color: #d4edda;
    color: #155724;
}

/* Dashboard Cards (Optional) */
.card-box {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    flex: 1;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    color: white;
}

.bg-red { background-color: #e74c3c; }
.bg-yellow { background-color: #f1c40f; color: #333; }
.bg-blue { background-color: #3498db; }

/* Buttons */
.btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.btn-add { background-color: #2ecc71; color: white; }

:root {
    --sidebar-bg: #2c3e50;
    --primary: #3498db;
    --urgent: #e74c3c;
    --upcoming: #f1c40f;
    --text-dark: #2c3e50;
    --bg-light: #f8f9fa;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

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

/* Sidebar */
.sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    color: white;
    padding: 20px;
}

.logo { font-size: 24px; margin-bottom: 30px; border-bottom: 1px solid #3e5871; padding-bottom: 10px; }

.nav-item {
    display: block;
    color: #bdc3c7;
    text-decoration: none;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: 0.3s;
}

.nav-item:hover, .nav-item.active {
    background: var(--primary);
    color: white;
}

/* Content Area */
.content { flex: 1; padding: 30px; }

header { margin-bottom: 30px; }

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    padding: 20px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.red { background: linear-gradient(45deg, #ff6b6b, #ee5253); }
.yellow { background: linear-gradient(45deg, #feca57, #ff9f43); color: #333; }
.blue { background: linear-gradient(45deg, #54a0ff, #2e86de); }

/* Table Styling */
.table-container {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 15px; border-bottom: 2px solid #eee; color: #7f8c8d; }
td { padding: 15px; border-bottom: 1px solid #eee; }

/* Row Colors */
.row-urgent { background-color: #fff5f5; }
.row-upcoming { background-color: #fffdf2; }

/* Badges */
.badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
}
.badge-urgent { background: #ffdada; color: #c0392b; }
.badge-upcoming { background: #fff3cd; color: #856404; }

/* Buttons */
.action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.btn { padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: #2ecc71; color: white; }
.btn-done {
    background: #27ae60;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
}

/* Base Styles */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5;
    padding: 20px;
}

.container { max-width: 1000px; margin: auto; }
.main-header { text-align: center; margin-bottom: 30px; }

/* Buttons Logic */
.nav-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.btn {
    flex: 1;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-reg { background: #3498db; }
.btn-vac { background: #2ecc71; }
.btn-all { background: #9b59b6; }

/* Stats */
.stats-container { display: flex; gap: 20px; margin-bottom: 30px; }
.stat-card { flex: 1; padding: 20px; border-radius: 15px; color: white; text-align: center; }
.urgent { background: #e74c3c; }
.pending { background: #f1c40f; color: #333; }

/* Desktop vs Mobile Display Logic */
.mobile-view { display: none; } /* Default: hide mobile view */

/* Tables */
table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; }
.row-red { background: #fff5f5; }
.row-yellow { background: #fffdf2; }
.done-btn { background: #27ae60; color: white; padding: 8px 12px; border-radius: 5px; text-decoration: none; font-size: 14px; }

/* --- MOBILE RESPONSIVE LOGIC (Main Part) --- */
@media (max-width: 768px) {
    body { padding: 10px; }
    
    /* Buttons ek ke niche ek stack ho jayenge */
    .nav-buttons { flex-direction: column; }
    
    /* Stats bhi stack ho jayenge */
    .stats-container { flex-direction: column; }

    /* Table hide kar denge aur Mobile List dikhayenge */
    .desktop-view { display: none; }
    .mobile-view { display: block; }

    .mobile-card {
        background: white;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .card-red { border-left: 5px solid #e74c3c; }
    .card-yellow { border-left: 5px solid #f1c40f; }
    
    .mobile-card h4 { margin: 0; font-size: 18px; }
    .mobile-card p { margin: 5px 0 0 0; font-size: 14px; color: #666; }
}