/* ONE STOP PHARMACY — 2025 BEAUTIFUL DESIGN */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 color: #333;
}

.container { max-width: 1200px; }

/* Header with Logo */
header {
 background: white;
 border-radius: 20px;
 padding: 25px;
 text-align: center;
 box-shadow: 0 20px 40px rgba(0,0,0,0.1);
 margin: 20px 0;
}
header img {
 height: 90px;
 border-radius: 15px;
 box-shadow: 0 10px 20px rgba(227,30,36,0.3);
}
header h1 {
 font-weight: 700;
 color: #e31e24;
 font-size: 2.8rem;
 margin: 15px 0 5px;
}
header p { color: #666; font-size: 1.1rem; }

/* Cards */
.card {
 background: white;
 border-radius: 20px;
 box-shadow: 0 15px 35px rgba(0,0,0,0.1);
 border: none;
 overflow: hidden;
 transition: all 0.3s ease;
 margin-bottom: 25px;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.card-header {
 background: linear-gradient(45deg, #e31e24, #c71a1f);
 color: white;
 font-weight: 600;
 padding: 20px;
 font-size: 1.3rem;
}

/* Buttons */
.btn-primary {
 background: linear-gradient(45deg, #e31e24, #ff4444);
 border: none;
 border-radius: 50px;
 padding: 12px 30px;
 font-weight: 600;
 box-shadow: 0 8px 20px rgba(227,30,36,0.4);
 transition: all 0.3s;
}
.btn-primary:hover {
 background: linear-gradient(45deg, #c71a1f, #e31e24);
 transform: translateY(-3px);
 box-shadow: 0 12px 25px rgba(227,30,36,0.5);
}
.btn-success { border-radius: 50px; padding: 10px 25px; }
.btn-danger { border-radius: 50px; }

/* Tables */
.table {
 border-radius: 15px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.table thead {
 background: linear-gradient(45deg, #e31e24, #ff4444);
 color: white;
}
.table th, .table td { padding: 15px; vertical-align: middle; }
.table tbody tr:hover { background: #f8f9fa; }

/* Patient Photo */
.patient-photo */
.patient-photo {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 object-fit: cover;
 border: 4px solid #e31e24;
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Forms */
.form-control, .form-select {
 border-radius: 15px;
 padding: 12px 20px;
 border: 2px solid #eee;
 transition: all 0.3s;
}
.form-control:focus, .form-select:focus {
 border-color: #e31e24;
 box-shadow: 0 0 0 0.2rem rgba(227,30,36,0.25);
}

/* Dark Mode Toggle */
#darkToggle {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 9999;
 background: rgba(0,0,0,0.7);
 color: white;
 border: none;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 font-size: 1.5rem;
 box-shadow: 0 10px 30px rgba(0,0,0,0.3);
 transition: all 0.3s;
}
#darkToggle:hover { transform: scale(1.1); }

/* Dark Mode */
[data-theme="dark"] {
 background: #0f0f1e;
 color: #e0e0e0;
}
[data-theme="dark"] .card,
[data-theme="dark"] header {
 background: #1a1a2e;
 border: 1px solid #333;
}
[data-theme="dark"] .table {
 background: #16213e;
}
[data-theme="dark"] .table thead {
 background: #e31e24;
}
[data-theme="dark"] .form-control {
 background: #16213e;
 border-color: #444;
 color: white;
}

/* Responsive */
@media (max-width: 768px) {
 header h1 { font-size: 2rem; }
 header img { height: 70px; }
 .card-header { font-size: 1.1rem; }
 #darkToggle { width: 50px; height: 50px; font-size: 1.3rem; }
}