:root {
    --primary: #2c5fa8;
    --secondary: #4fc3f7;
    --success: #81c784;
    --warning: #ffb74d;
    --danger: #e57373;
    --light: #f5f5f5;
    --dark: #263238;
    --admin: #7e57c2;
    --nurse: #42a5f5;
    --doctor: #66bb6a;
    --pharmacist: #ffa726;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    margin: 0;
    height: 100vh;
    width: 100vw;
}

/* Main content يملأ كامل الشاشة تحت الهيدر */
.main-content {
    padding: 20px;
    margin-top: 76px; /* ارتفاع الهيدر */
    min-height: calc(100vh - 76px);
    width: 100%;
    box-sizing: border-box;
}

/* Navbar/Header */
.navbar {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    width: 100%;
    direction: rtl; /* محتوى الهيدر من اليمين لليسار */
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 15px; /* مسافة بين رابط وآخر */
}

.navbar-nav .nav-link {
    color: #333;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(0,0,0,0.05);
    color: var(--primary);
}

/* User Info */
.user-role-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.role-admin { background-color: var(--admin); color: white; }
.role-nurse { background-color: var(--nurse); color: white; }
.role-doctor { background-color: var(--doctor); color: white; }
.role-pharmacist { background-color: var(--pharmacist); color: white; }

/* Dropdown */
.dropdown-toggle::after {
    margin-left: 0.3rem; /* تعديل سهم الـ dropdown RTL */
}

.dropdown-menu {
    text-align: right;
}

/* Dashboard Cards */
.dashboard-card {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border: none;
    margin-bottom: 20px;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* إخفاء القائمة بشكل افتراضي */
.navbar-collapse {
  display: none;
  position: absolute;
  top: 100%;     /* أسفل الهيدر مباشرة */
  right: 20px;   /* تظهر من جهة اليمين */
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  border-radius: 10px;
  min-width: 180px;
  z-index: 1050;
}

/* عند التفعيل */
.navbar-collapse.show {
  display: block;
}

@media (max-width: 576px) {
    .login-card { width: 100%; border-radius: 12px; }
    .dashboard-card { margin: 10px 0; }
}