/* ==========================================================================
   منصة مساعد — Design System (app.css)
   Layered on top of Bootstrap 5.3 RTL. Overrides Bootstrap CSS variables so
   existing utility classes (btn-primary, text-primary, bg-success…) adopt the
   new palette automatically, then adds custom components + dark mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — جامعة دار السلام للعلوم الطبية (medical) */
  --ms-primary: #1565C0;          /* Medical Blue */
  --ms-primary-rgb: 21, 101, 192;
  --ms-primary-600: #114E96;
  --ms-primary-700: #0A2A4A;      /* Deep Navy */
  --ms-secondary: #1F8A56;        /* Emerald Green */
  --ms-secondary-rgb: 31, 138, 86;
  --ms-success: #1F8A56;          /* Emerald */
  --ms-success-rgb: 31, 138, 86;
  --ms-warning: #C9A227;          /* Gold accent */
  --ms-warning-rgb: 201, 162, 39;
  --ms-danger: #C0392B;
  --ms-danger-rgb: 192, 57, 43;
  --ms-info: #1565C0;
  /* Institutional accents */
  --ms-navy: #0A2A4A;
  --ms-gold: #C9A227;
  --ms-emerald: #1F8A56;

  /* Neutral / surface */
  --ms-bg: #F8FAFC;
  --ms-bg-soft: #EEF2F7;
  --ms-surface: #FFFFFF;
  --ms-surface-2: #F8FAFC;
  --ms-dark: #0F172A;
  --ms-text: #1E293B;
  --ms-text-muted: #64748B;
  --ms-border: #E2E8F0;
  --ms-border-strong: #CBD5E1;

  /* Gradients */
  --ms-gradient-primary: linear-gradient(135deg, #1565C0 0%, #1F8A56 100%);
  --ms-gradient-hero: linear-gradient(135deg, #0A2A4A 0%, #114E96 45%, #1565C0 100%);
  --ms-gradient-success: linear-gradient(135deg, #1F8A56 0%, #34B97A 100%);
  --ms-gradient-warning: linear-gradient(135deg, #C9A227 0%, #E2C04A 100%);

  /* Typography */
  --ms-font-base: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --ms-font-heading: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --ms-fs-xs: .75rem;
  --ms-fs-sm: .875rem;
  --ms-fs-base: 1rem;
  --ms-fs-lg: 1.125rem;
  --ms-fs-xl: 1.375rem;
  --ms-fs-2xl: 1.75rem;
  --ms-fs-3xl: 2.25rem;
  --ms-fs-4xl: 3rem;

  /* Radius */
  --ms-radius-sm: .5rem;
  --ms-radius: .875rem;
  --ms-radius-lg: 1.25rem;
  --ms-radius-xl: 1.75rem;
  --ms-radius-pill: 999px;

  /* Shadows (soft) */
  --ms-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --ms-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --ms-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --ms-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
  --ms-shadow-primary: 0 10px 24px rgba(21, 101, 192, .28);

  /* Glass */
  --ms-glass-bg: rgba(255, 255, 255, .72);
  --ms-glass-border: rgba(255, 255, 255, .55);
  --ms-glass-blur: 16px;

  /* Motion */
  --ms-ease: cubic-bezier(.4, 0, .2, 1);
  --ms-speed: .22s;

  /* Map onto Bootstrap variables so native classes re-skin */
  --bs-primary: var(--ms-primary);
  --bs-primary-rgb: var(--ms-primary-rgb);
  --bs-secondary: var(--ms-secondary);
  --bs-secondary-rgb: var(--ms-secondary-rgb);
  --bs-success: var(--ms-success);
  --bs-success-rgb: var(--ms-success-rgb);
  --bs-warning: var(--ms-warning);
  --bs-warning-rgb: var(--ms-warning-rgb);
  --bs-danger: var(--ms-danger);
  --bs-danger-rgb: var(--ms-danger-rgb);
  --bs-body-bg: var(--ms-bg);
  --bs-body-color: var(--ms-text);
  --bs-border-color: var(--ms-border);
  --bs-border-radius: var(--ms-radius);
  --bs-link-color: var(--ms-primary);
  --bs-link-hover-color: var(--ms-primary-700);
  --bs-font-sans-serif: var(--ms-font-base);
}

/* --------------------------------------------------------------------------
   2. DARK MODE  (Bootstrap 5.3 data-bs-theme="dark")
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --ms-bg: #0B1220;
  --ms-bg-soft: #0F172A;
  --ms-surface: #111A2E;
  --ms-surface-2: #0F172A;
  --ms-text: #E2E8F0;
  --ms-text-muted: #94A3B8;
  --ms-border: #1E293B;
  --ms-border-strong: #334155;

  --ms-glass-bg: rgba(17, 26, 46, .72);
  --ms-glass-border: rgba(148, 163, 184, .16);

  --ms-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --ms-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --ms-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --ms-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);

  --bs-body-bg: var(--ms-bg);
  --bs-body-color: var(--ms-text);
  --bs-border-color: var(--ms-border);
  --bs-emphasis-color: #F8FAFC;
  --bs-secondary-color: var(--ms-text-muted);
  --bs-tertiary-bg: var(--ms-surface-2);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
* { scroll-behavior: smooth; }

body {
  font-family: var(--ms-font-base);
  background-color: var(--ms-bg);
  color: var(--ms-text);
  transition: background-color var(--ms-speed) var(--ms-ease),
              color var(--ms-speed) var(--ms-ease);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fw-bold { font-family: var(--ms-font-heading); }
.text-muted { color: var(--ms-text-muted) !important; }

a { transition: color var(--ms-speed) var(--ms-ease); }

::selection { background: rgba(var(--ms-primary-rgb), .18); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ms-border-strong);
  border-radius: 999px;
  border: 3px solid var(--ms-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ms-text-muted); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid rgba(var(--ms-primary-rgb), .35);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY SCALE HELPERS
   -------------------------------------------------------------------------- */
.ms-display { font-size: var(--ms-fs-4xl); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.ms-h1 { font-size: var(--ms-fs-3xl); font-weight: 800; }
.ms-h2 { font-size: var(--ms-fs-2xl); font-weight: 700; }
.ms-lead { font-size: var(--ms-fs-lg); color: var(--ms-text-muted); }
.ms-eyebrow {
  font-size: var(--ms-fs-xs); font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ms-primary);
}

/* --------------------------------------------------------------------------
   5. SURFACES — cards, glass
   -------------------------------------------------------------------------- */
.card,
.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  transition: transform var(--ms-speed) var(--ms-ease),
              box-shadow var(--ms-speed) var(--ms-ease),
              border-color var(--ms-speed) var(--ms-ease);
}
.card-header { background: transparent; border-bottom: 1px solid var(--ms-border); }

.ms-card-hover:hover,
.hover-shadow:hover {
  transform: translateY(-4px);
  box-shadow: var(--ms-shadow-lg);
  border-color: rgba(var(--ms-primary-rgb), .35);
}

.ms-glass {
  background: var(--ms-glass-bg);
  -webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--ms-glass-blur)) saturate(160%);
  border: 1px solid var(--ms-glass-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow);
}

/* KPI / stat card */
.ms-stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--ms-radius-lg);
  padding: 1.5rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-sm);
}
.ms-stat::after {
  content: "";
  position: absolute; inset-inline-start: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ms-primary-rgb), .14), transparent 70%);
}
.ms-stat .ms-stat-icon {
  width: 52px; height: 52px; border-radius: var(--ms-radius);
  display: grid; place-items: center; font-size: 1.5rem; color: #fff;
  background: var(--ms-gradient-primary);
  box-shadow: var(--ms-shadow-primary);
}
.ms-stat .ms-stat-value { font-size: var(--ms-fs-3xl); font-weight: 800; line-height: 1; }
.ms-stat .ms-stat-label { color: var(--ms-text-muted); font-size: var(--ms-fs-sm); }
.ms-stat--success .ms-stat-icon { background: var(--ms-gradient-success); box-shadow: 0 10px 24px rgba(var(--ms-success-rgb), .28); }
.ms-stat--warning .ms-stat-icon { background: var(--ms-gradient-warning); box-shadow: 0 10px 24px rgba(var(--ms-warning-rgb), .28); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--ms-radius);
  font-weight: 600;
  transition: transform var(--ms-speed) var(--ms-ease),
              box-shadow var(--ms-speed) var(--ms-ease),
              background-color var(--ms-speed) var(--ms-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--ms-primary);
  --bs-btn-border-color: var(--ms-primary);
  --bs-btn-hover-bg: var(--ms-primary-600);
  --bs-btn-hover-border-color: var(--ms-primary-600);
  --bs-btn-active-bg: var(--ms-primary-700);
  box-shadow: var(--ms-shadow-primary);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(var(--ms-primary-rgb), .4); transform: translateY(-1px); }

.btn-gradient {
  background: var(--ms-gradient-primary);
  color: #fff; border: none;
  box-shadow: var(--ms-shadow-primary);
}
.btn-gradient:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--ms-primary-rgb), .42); }

.btn-soft {
  background: rgba(var(--ms-primary-rgb), .1);
  color: var(--ms-primary);
  border: 1px solid rgba(var(--ms-primary-rgb), .18);
}
.btn-soft:hover { background: rgba(var(--ms-primary-rgb), .16); color: var(--ms-primary-700); }

.btn-icon {
  width: 42px; height: 42px; padding: 0;
  display: inline-grid; place-items: center; border-radius: var(--ms-radius);
}

/* --------------------------------------------------------------------------
   7. NAVBAR (glass, sticky)
   -------------------------------------------------------------------------- */
.ms-navbar {
  position: sticky; top: .55rem; z-index: 1030;
  width: calc(100% - 1.4rem); max-width: 1360px;
  margin: .55rem auto 0;
  background: var(--ms-glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  backdrop-filter: blur(18px) saturate(185%);
  border: 1px solid var(--ms-glass-border);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(10, 42, 74, .16), inset 0 1px 0 rgba(255,255,255,.4);
  padding: .4rem .35rem;
}
.ms-navbar .container-xxl { padding-left: .75rem; padding-right: .75rem; }
.ms-brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.ms-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; }
.ms-brand .ms-brand-title { font-family: var(--ms-font-heading); font-weight: 800; font-size: 1rem; color: #0b1220; line-height: 1.15; white-space: nowrap; }
.ms-brand .ms-brand-sub { font-size: .72rem; color: var(--ms-text-muted); }
[data-bs-theme="dark"] .ms-brand .ms-brand-title { color: #f1f5f9; }

.ms-nav-link {
  color: var(--ms-text-muted); font-weight: 600; text-decoration: none;
  padding: .5rem .9rem; border-radius: var(--ms-radius);
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all var(--ms-speed) var(--ms-ease);
}
.ms-nav-link:hover { color: var(--ms-primary); background: rgba(var(--ms-primary-rgb), .08); }
.ms-nav-link.active { color: var(--ms-primary); background: rgba(var(--ms-primary-rgb), .12); }

/* WhatsApp tech-support link */
.ms-support-link { color: #fff; background: #25D366; border-radius: 999px; }
.ms-support-link:hover { color: #fff; background: #1ebe5d; }
.ms-support-link .bi-whatsapp { font-size: 1.15rem; }

/* AI assistant link */
.ms-ai-link {
  color: #fff; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #1565C0 0%, #1F8A56 100%);
}
.ms-ai-link:hover { color: #fff; filter: brightness(1.08); }
.ms-ai-link .bi-robot { font-size: 1.15rem; }

/* أزرار الإجراءات دوائر متساوية عند إخفاء النص (شاشات أصغر) */
@media (max-width: 991.98px) {
  .ms-support-link, .ms-ai-link {
    width: 42px; height: 42px; padding: 0; justify-content: center;
  }
}

/* Always-on glow */
.ms-support-glow {
  animation: ms-support-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
}
@keyframes ms-support-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-support-glow { animation: none; }
}

/* Theme toggle */
.ms-theme-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--ms-glass-border); background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ms-text); display: inline-grid; place-items: center;
  cursor: pointer; transition: all var(--ms-speed) var(--ms-ease);
}
.ms-theme-toggle:hover { color: var(--ms-primary); border-color: rgba(var(--ms-primary-rgb), .4); transform: rotate(-8deg); }
.ms-theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .ms-theme-toggle .bi-sun-fill { display: inline; }
[data-bs-theme="dark"] .ms-theme-toggle .bi-moon-stars-fill { display: none; }

/* Avatar */
.ms-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center; font-weight: 700; color: #fff;
  background: var(--ms-gradient-primary); flex: none;
}

/* --------------------------------------------------------------------------
   8. SIDEBAR (admin)
   -------------------------------------------------------------------------- */
.ms-sidebar {
  background: var(--ms-dark);
  color: #fff; width: 280px; height: 100vh;
  position: fixed; inset-inline-start: 0; top: 0; z-index: 1000;
  display: flex; flex-direction: column;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .15);
}
.ms-sidebar .ms-side-link {
  color: rgba(255, 255, 255, .72); font-weight: 600;
  margin: 4px 14px; padding: .8rem 1rem; border-radius: var(--ms-radius);
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
  transition: all var(--ms-speed) var(--ms-ease);
}
.ms-sidebar .ms-side-link i { font-size: 1.15rem; }
.ms-sidebar .ms-side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ms-sidebar .ms-side-link.active {
  background: var(--ms-gradient-primary); color: #fff;
  box-shadow: var(--ms-shadow-primary);
}
/* القائمة تتمدد وتُمرّر داخلياً عند طولها حتى يبقى أسفل الشريط (تغيير كلمة المرور + تسجيل الخروج) ظاهراً دائماً */
.ms-sidebar .ms-side-nav { overflow-y: auto; min-height: 0; }
/* لوحة الإدارة: هوية لونية أخضر طبي مميّزة للقائمة الجانبية (يمين في RTL) */
.ms-admin-sidebar {
  background: linear-gradient(180deg, #0A4A2A 0%, #06321d 100%);
  border-inline-start: 4px solid #1F8A56;
}
.ms-admin-sidebar .ms-side-cap { color: #6EE7A8; opacity: 1 !important; }
.ms-admin-sidebar .ms-side-link { color: rgba(255, 255, 255, .82); }
.ms-admin-sidebar .ms-side-link:hover {
  background: rgba(31, 138, 86, .22); color: #fff;
}
.ms-admin-sidebar .ms-side-link.active {
  background: linear-gradient(135deg, #1F8A56 0%, #0A4A2A 100%);
  color: #fff; font-weight: 800;
  box-shadow: 0 10px 24px rgba(31, 138, 86, .35);
}
.ms-admin-sidebar .ms-side-link.active i { color: #fff; }

.ms-admin-content { margin-inline-start: 280px; padding: 2.25rem; min-height: 100vh; }

/* Hamburger toggle + drawer backdrop — hidden on desktop, shown on mobile */
.ms-drawer-toggle { display: none; }
.ms-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(2, 12, 27, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ms-ease);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer that slides in from the start edge (right in RTL) */
  .ms-sidebar {
    width: 84vw; max-width: 320px; height: 100vh;
    transform: translateX(100%);            /* hidden off the inline-start edge (RTL = right) */
    transition: transform .3s var(--ms-ease);
    box-shadow: -10px 0 36px rgba(0, 0, 0, .35);
    z-index: 1060;
  }
  [dir="ltr"] .ms-sidebar { transform: translateX(-100%); }
  body.ms-drawer-open .ms-sidebar { transform: translateX(0); }
  body.ms-drawer-open .ms-drawer-backdrop { opacity: 1; visibility: visible; }
  /* Lock background scroll while the drawer is open */
  body.ms-drawer-open { overflow: hidden; }

  .ms-sidebar .ms-side-nav { overflow-y: auto; }

  /* Content takes full width */
  .ms-admin-content {
    margin-inline-start: 0;
    padding: 1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Show the hamburger button */
  .ms-drawer-toggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; flex: none;
    border-radius: var(--ms-radius);
    border: 1px solid var(--ms-border);
    background: var(--ms-surface); color: var(--ms-text);
    font-size: 1.4rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-drawer-toggle:active { background: var(--ms-bg-soft); }
}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--ms-radius);
  border: 1.5px solid var(--ms-border);
  background-color: var(--ms-surface);
  color: var(--ms-text);
  padding: .65rem .9rem;
  transition: border-color var(--ms-speed) var(--ms-ease), box-shadow var(--ms-speed) var(--ms-ease);
}
.form-control::placeholder { color: var(--ms-text-muted); opacity: .75; }
.form-control:focus, .form-select:focus {
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 4px rgba(var(--ms-primary-rgb), .14);
  background-color: var(--ms-surface);
  color: var(--ms-text);
}
.form-label { font-weight: 600; font-size: var(--ms-fs-sm); color: var(--ms-text); }

.form-floating > label { color: var(--ms-text-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--ms-primary); }

/* Input with leading icon */
.ms-input-icon { position: relative; }
.ms-input-icon .bi { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--ms-text-muted); pointer-events: none; }
.ms-input-icon .form-control { padding-inline-start: 2.75rem; }

/* --------------------------------------------------------------------------
   10. TABLES (enterprise)
   -------------------------------------------------------------------------- */
.ms-table-wrap {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  box-shadow: var(--ms-shadow-sm);
}
.table { --bs-table-bg: transparent; color: var(--ms-text); margin: 0; }
.table > thead {
  background: var(--ms-surface-2);
  position: sticky; top: 0; z-index: 2;
}
.table > thead th {
  font-size: var(--ms-fs-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--ms-text-muted); font-weight: 700;
  border-bottom: 1px solid var(--ms-border); padding: .9rem 1rem; white-space: nowrap;
}
.table > tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--ms-border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: rgba(var(--ms-primary-rgb), .05); }

/* --------------------------------------------------------------------------
   11. BADGES & PILLS
   -------------------------------------------------------------------------- */
.ms-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--ms-fs-xs); font-weight: 700;
  padding: .3rem .7rem; border-radius: var(--ms-radius-pill);
  background: rgba(var(--ms-primary-rgb), .1); color: var(--ms-primary);
}
.ms-badge--success { background: rgba(var(--ms-success-rgb), .12); color: var(--ms-success); }
.ms-badge--warning { background: rgba(var(--ms-warning-rgb), .14); color: #B45309; }
.ms-badge--danger  { background: rgba(var(--ms-danger-rgb), .12);  color: var(--ms-danger); }
.ms-badge--muted   { background: var(--ms-bg-soft); color: var(--ms-text-muted); }

/* File-type chips */
.ms-filechip { width: 44px; height: 44px; border-radius: var(--ms-radius); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.ms-filechip--pdf  { background: rgba(var(--ms-danger-rgb), .12);  color: var(--ms-danger); }
.ms-filechip--doc  { background: rgba(var(--ms-secondary-rgb), .12); color: var(--ms-secondary); }
.ms-filechip--ppt  { background: rgba(var(--ms-warning-rgb), .14); color: #B45309; }

/* --------------------------------------------------------------------------
   12. TOASTS
   -------------------------------------------------------------------------- */
.ms-toast-stack {
  position: fixed; top: 1rem; inset-inline-start: 1rem; z-index: 1090;
  display: flex; flex-direction: column; gap: .6rem; max-width: 360px;
}
.ms-toast {
  display: flex; align-items: center; gap: .75rem;
  background: var(--ms-surface); color: var(--ms-text);
  border: 1px solid var(--ms-border); border-inline-start: 4px solid var(--ms-primary);
  border-radius: var(--ms-radius); padding: .85rem 1rem;
  box-shadow: var(--ms-shadow-lg);
  animation: ms-toast-in .35s var(--ms-ease);
}
.ms-toast.hide { animation: ms-toast-out .3s var(--ms-ease) forwards; }
.ms-toast .bi { font-size: 1.25rem; }
.ms-toast--success { border-inline-start-color: var(--ms-success); }
.ms-toast--success .bi { color: var(--ms-success); }
.ms-toast--warning { border-inline-start-color: var(--ms-warning); }
.ms-toast--warning .bi { color: var(--ms-warning); }
.ms-toast--danger  { border-inline-start-color: var(--ms-danger); }
.ms-toast--danger .bi { color: var(--ms-danger); }
@keyframes ms-toast-in  { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes ms-toast-out { to { opacity: 0; transform: translateX(-20px); } }

/* --------------------------------------------------------------------------
   13. SKELETON / EMPTY STATES
   -------------------------------------------------------------------------- */
.ms-skeleton {
  background: linear-gradient(90deg, var(--ms-bg-soft) 25%, var(--ms-border) 37%, var(--ms-bg-soft) 63%);
  background-size: 400% 100%;
  animation: ms-shimmer 1.4s ease infinite;
  border-radius: var(--ms-radius-sm);
}
@keyframes ms-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.ms-empty { text-align: center; padding: 3.5rem 1rem; }
.ms-empty .ms-empty-icon {
  width: 88px; height: 88px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.4rem;
  background: rgba(var(--ms-primary-rgb), .08); color: var(--ms-primary);
}

/* --------------------------------------------------------------------------
   14. ANIMATIONS / MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.ms-fade-up { animation: ms-fade-up .5s var(--ms-ease) both; }
.ms-fade-up-2 { animation: ms-fade-up .5s var(--ms-ease) .08s both; }
.ms-fade-up-3 { animation: ms-fade-up .5s var(--ms-ease) .16s both; }
@keyframes ms-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ms-hover-lift { transition: transform var(--ms-speed) var(--ms-ease), box-shadow var(--ms-speed) var(--ms-ease); }
.ms-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   15. HERO / DECOR
   -------------------------------------------------------------------------- */
.ms-hero {
  position: relative; overflow: hidden;
  background: var(--ms-gradient-hero);
  color: #fff; border-radius: var(--ms-radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.ms-hero::before,
.ms-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .12); filter: blur(2px);
}
.ms-hero::before { width: 320px; height: 320px; top: -120px; inset-inline-start: -80px; }
.ms-hero::after  { width: 220px; height: 220px; bottom: -110px; inset-inline-end: 8%; background: rgba(255, 255, 255, .08); }
.ms-hero > * { position: relative; z-index: 1; }

/* Animated aurora background for auth pages */
.ms-aurora { position: relative; overflow: hidden; background: var(--ms-dark); }
/* Keep interactive content (buttons/links/inputs) above the decorative blobs */
.ms-aurora > * { position: relative; z-index: 1; }
.ms-aurora::before, .ms-aurora::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px); opacity: .55; animation: ms-float 14s var(--ms-ease) infinite alternate;
  pointer-events: none; z-index: 0;
}
.ms-aurora::before { background: #1565C0; top: -20%; inset-inline-start: -10%; }
.ms-aurora::after  { background: #1F8A56; bottom: -25%; inset-inline-end: -10%; animation-delay: -7s; }
@keyframes ms-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.15); } }

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.ms-divider { height: 1px; background: var(--ms-border); border: 0; margin: 1.25rem 0; }
.bg-surface { background: var(--ms-surface) !important; }
.text-brand { color: var(--ms-primary) !important; }
.rounded-2xl { border-radius: var(--ms-radius-xl) !important; }
.ms-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* List view toggle for results grid */
#resultsGrid.list-view > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

/* Sidebar section captions */
.ms-side-cap { color: rgba(255,255,255,.6); letter-spacing: .04em; font-weight: 700; }

/* --------------------------------------------------------------------------
   17. MOBILE OPTIMIZATION (phones / tablets — Android & iOS)
   -------------------------------------------------------------------------- */
/* Comfortable tap targets everywhere */
@media (hover: none) and (pointer: coarse) {
  .btn, .ms-nav-link, .ms-side-link, .nav-link, .form-control, .form-select,
  .dropdown-item, .badge.rounded-pill[href] { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* Tablets and below */
@media (max-width: 991.98px) {
  .ms-h2 { font-size: 1.4rem; }
  .ms-card { border-radius: var(--ms-radius); }
  /* Horizontal scroll for pill nav groups */
  .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-pills::-webkit-scrollbar { height: 0; }
}

/* Phones */
@media (max-width: 575.98px) {
  body { font-size: 15px; }
  main.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .ms-navbar .container-xxl { gap: .5rem !important; }
  .ms-h2 { font-size: 1.25rem; }
  h1.ms-h2 { line-height: 1.3; }
  /* Stack heading + action rows */
  .d-flex.justify-content-between.flex-wrap { gap: .75rem; }
  /* Cards: tighter padding on phones */
  .ms-card.p-5 { padding: 1.5rem !important; }
  .ms-card.p-4 { padding: 1.1rem !important; }
  /* Tables scroll horizontally instead of squashing */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { white-space: nowrap; }
  /* Full-width primary actions */
  .btn-lg { padding: .8rem 1rem; font-size: 1rem; }
  /* Modals fill the screen edge-to-edge */
  .modal-dialog { margin: .5rem; }
  /* Quick-link tiles shrink gracefully */
  .ms-empty-icon { font-size: 2.2rem; }
  /* Keep aurora hero readable */
  .ms-aurora.p-4, .ms-aurora.p-5 { padding: 1.25rem !important; }
}

/* Prevent iOS auto-zoom on input focus (font-size >= 16px) */
@media (max-width: 575.98px) {
  .form-control, .form-select, .form-floating > .form-control { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   16. MOBILE BOTTOM NAVIGATION (app-like)
   -------------------------------------------------------------------------- */
.ms-bottom-nav { display: none; }

@media (max-width: 991.98px) {
  .ms-bottom-nav {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1045;
    background: var(--ms-surface);
    border-top: 1px solid var(--ms-border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ms-bnav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .5rem .2rem;
    min-height: 58px;
    text-decoration: none;
    color: var(--ms-text-muted);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    transition: color .15s var(--ms-ease), background .15s var(--ms-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .ms-bnav-item i { font-size: 1.32rem; line-height: 1; }
  .ms-bnav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ms-bnav-item.active { color: var(--ms-primary); }
  .ms-bnav-item:active { background: var(--ms-bg-soft); }
  .ms-bottom-nav--finance .ms-bnav-item.active { color: #0EA5A5; }

  /* Ensure page content is never hidden behind the fixed bar.
     Only the main shell (layout.html) carries the bottom nav and a <main>;
     admin/finance layouts use .ms-admin-content and keep their own mobile nav. */
  main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   صفحة تسجيل الدخول بخلفية صورة الحرم الجامعي (نمط بوابة UniMAP)
   خلفية ثابتة تملأ الشاشة + بطاقة دخول زجاجية في المنتصف.
   ضع صورة المبنى في:  static/images/campus-bg.jpg
   ===================================================================== */
body.ms-auth-bg { min-height: 100vh; }
body.ms-auth-bg .ms-navbar,
body.ms-auth-bg .ms-bottom-nav { display: none !important; }
body.ms-auth-bg main { padding: 0 !important; }
body.ms-auth-bg main > .container-xxl { max-width: 100%; padding: 0; }

/* طبقة الصورة (مع لون احتياطي إذا لم تتوفر الصورة بعد) */
body.ms-auth-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: #0A2A4A url("/static/images/campus-bg.jpg") center center / cover no-repeat;
}
/* طبقة تظليل لتباين النص فوق الصورة */
body.ms-auth-bg::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(10,42,74,.80) 0%, rgba(15,23,42,.66) 55%, rgba(31,138,86,.55) 100%);
}

.ms-auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2.25rem 1rem;
}
.ms-auth-card {
  width: 100%; max-width: 460px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(0,0,0,.50);
  padding: 2.5rem 2rem 2rem;
  animation: msAuthUp .5s ease both;
}
[data-bs-theme="dark"] .ms-auth-card {
  background: rgba(17,24,39,.92);
  border-color: rgba(255,255,255,.12);
}
@keyframes msAuthUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ms-auth-logo {
  width: 88px; height: 88px; object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.ms-auth-faculties img {
  width: 50px; height: 50px; object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ms-auth-card .ms-divider { opacity: .5; }

/* شعارات دائرية موحّدة (الجامعة + الكليتان) في كل الواجهات */
.ms-logo-circle {
  border-radius: 50% !important;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

@media (max-width: 575.98px) {
  .ms-auth-card { padding: 2rem 1.25rem 1.5rem; border-radius: 22px; }
}