/* =====================================================================
   21 September Alumni Club — Admin Design System
   Centralised design tokens. Replace brand values here to re-skin the
   entire platform (see docs/UI_DESIGN_SYSTEM.md). No page-specific CSS.
   ===================================================================== */

:root {
  /* Brand — official 21 September University palette (https://21umas.edu.ye/) */
  --brand-primary:        #004f87; /* Medical Navy / Ocean Blue */
  --brand-primary-600:    #003f6c;
  --brand-primary-700:    #003053;
  --brand-primary-050:    #eef6fc;
  --brand-primary-100:    #d9ecfa;
  
  --brand-secondary:      #0d7735; /* University Emerald Green (Footer & Highlights) */
  --brand-secondary-600:  #0a612b;
  --brand-secondary-700:  #094a20;
  --brand-secondary-050:  #eaf6ee;
  
  --brand-accent:         #0ea5e9; /* Medical Sky Blue */

  /* Surfaces */
  --surface-body:         #f8fafc;
  --surface-card:         #ffffff;
  --surface-muted:        #f1f5f9;
  --border-color:         #e2e8f0;

  /* Sidebar */
  --sidebar-bg:           #002440;
  --sidebar-bg-2:         #003b66;
  --sidebar-fg:           #cbd5e1;
  --sidebar-fg-active:    #ffffff;
  --sidebar-active-bg:    rgba(255,255,255,.12);

  /* Text */
  --text-strong:          #0f172a;
  --text-body:            #334155;
  --text-muted:           #64748b;

  /* Metrics */
  --radius:               .625rem;
  --radius-sm:            .375rem;
  --shadow-sm:            0 1px 2px rgba(0,79,135,.06), 0 1px 3px rgba(0,79,135,.05);
  --shadow-md:            0 4px 16px rgba(0,79,135,.08);
  --sidebar-w:            270px;

  --bs-primary-rgb:       0,79,135;
  --bs-success-rgb:       13,119,53;
  --bs-body-color:        var(--text-body);
  --bs-body-bg:           var(--surface-body);
  --bs-link-color:        var(--brand-primary);
  --bs-link-hover-color:  var(--brand-primary-600);
  --bs-border-color:      var(--border-color);
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--surface-body);
  color: var(--text-body);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .925rem;
}
html[dir="ltr"] body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }

h1,h2,h3,h4,h5,h6,.fw-strong { color: var(--text-strong); }

/* ---- Buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary-600);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary-600);
}
.btn-success {
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: var(--brand-secondary-600);
  --bs-btn-hover-border-color: var(--brand-secondary-600);
  --bs-btn-active-bg: var(--brand-secondary-700);
  --bs-btn-active-border-color: var(--brand-secondary-700);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
}
.btn { border-radius: var(--radius-sm); font-weight: 500; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.text-brand { color: var(--brand-primary-600) !important; }
.bg-brand-soft { background: var(--brand-primary-050) !important; }

/* ---- App shell ---- */
.app { min-height: 100vh; }
.app-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-fg);
  display: flex; flex-direction: column;
  z-index: 1040; overflow-y: auto;
}
.app-sidebar .brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-sidebar .brand .logo {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: var(--brand-primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.app-sidebar .brand .name { font-size: .92rem; font-weight: 600; color: #fff; line-height: 1.25; }
.app-sidebar .brand .sub { font-size: .72rem; color: var(--sidebar-fg); }

.nav-section-title {
  padding: 1rem 1.4rem .4rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.app-sidebar .nav-link, .app-sidebar .nav-parent {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem 1.4rem; color: var(--sidebar-fg);
  font-size: .875rem; border: 0; background: none; width: 100%;
  border-inline-start: 3px solid transparent; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.app-sidebar .nav-link i, .app-sidebar .nav-parent i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-parent:hover { background: var(--sidebar-active-bg); color: #fff; }
.app-sidebar .nav-link.active {
  background: var(--sidebar-active-bg); color: var(--sidebar-fg-active);
  border-inline-start-color: var(--brand-accent); font-weight: 600;
}
.app-sidebar .submenu { padding-inline-start: .5rem; }
.app-sidebar .submenu .nav-link { padding-inline-start: 3.1rem; font-size: .83rem; }
.nav-parent .chev { margin-inline-start: auto; font-size: .75rem; transition: transform .2s ease; }
.nav-parent[aria-expanded="true"] .chev { transform: rotate(90deg); }
html[dir="rtl"] .nav-parent[aria-expanded="true"] .chev { transform: rotate(-90deg); }

.app-main { margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--surface-card); border-bottom: 1px solid var(--border-color);
  padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.app-content { padding: 1.5rem; flex: 1; }

.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--brand-primary-050); color: var(--brand-primary-700);
  display: grid; place-items: center; font-weight: 600; font-size: .8rem;
}

/* ---- Cards ---- */
.card { border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header { background: var(--surface-card); border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--text-strong); }

/* ---- Page header ---- */
.page-header { margin-bottom: 1.4rem; }
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.page-header .sub { color: var(--text-muted); font-size: .875rem; margin-top: .15rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); font-size: .8rem; margin: 0; }

/* ---- KPI ---- */
.kpi-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.kpi-card .kpi-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text-strong); line-height: 1; }
.kpi-card .kpi-label { color: var(--text-muted); font-size: .82rem; margin-top: .3rem; }

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 700; background: var(--surface-muted);
  padding: .7rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--border-color);
}
.data-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; color: var(--text-body); }
.data-table tbody tr:hover { background: var(--brand-primary-050); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.sortable { cursor: pointer; user-select: none; }
.sortable .bi { opacity: .4; font-size: .7rem; }
.sortable.active .bi { opacity: 1; color: var(--brand-primary-600); }

/* ---- Badges ---- */
.badge.rounded-pill { font-weight: 600; padding: .35em .7em; font-size: .72rem; }
.badge-demo { background: repeating-linear-gradient(45deg,#fff7e6,#fff7e6 6px,#ffeecc 6px,#ffeecc 12px); color: #8a6d1d; border: 1px solid #f0dcae; }

/* ---- States ---- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .6rem; }
.skeleton-row td { padding: 1rem; }
.skeleton-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg,#eef1f5 25%,#e2e7ee 37%,#eef1f5 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.table-loading { opacity: .55; pointer-events: none; }

/* ---- Toasts ---- */
.toast-stack { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; max-width: 360px; }
.app-toast { background: var(--surface-card); border: 1px solid var(--border-color); border-inline-start: 4px solid var(--brand-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: .8rem 1rem; display: flex; gap: .6rem; align-items: flex-start; animation: toastIn .25s ease; }
.app-toast.success { border-inline-start-color: #198754; }
.app-toast.error { border-inline-start-color: #dc3545; }
.app-toast.info { border-inline-start-color: #0dcaf0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- Login ---- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(1200px 600px at 100% 0%, var(--brand-primary-050), transparent), var(--surface-body); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: var(--shadow-md); padding: 2.25rem; }
.auth-logo { width: 54px; height: 54px; border-radius: 14px; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }

.form-label { font-weight: 600; color: var(--text-strong); font-size: .84rem; }
.form-label .req { color: #dc3545; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border-color); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(0,79,135,.18); }
.help-text { font-size: .78rem; color: var(--text-muted); }

/* ---- Responsive ---- */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  html[dir="rtl"] .app-sidebar { transform: translateX(100%); }
  body.sidebar-open .app-sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,31,51,.4); z-index: 1035; }
  .app-main { margin-inline-start: 0; }
}

/* =====================================================================
   Native App-Like Mobile UI (Top Bar, Offcanvas & Bottom Tab Bar)
   ===================================================================== */
:root {
  --mobile-bottom-h: 62px;
}

@media (max-width: 991.98px) {
  body.has-mobile-nav {
    padding-bottom: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0, 79, 135, 0.12);
  box-shadow: 0 -4px 20px rgba(0, 36, 64, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1040;
}

.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.2rem;
  color: #64748b;
  text-decoration: none;
  font-size: 0.70rem;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab-item i,
.mobile-tab-item .tab-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 2px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.mobile-tab-item:active {
  transform: scale(0.92);
}

.mobile-tab-item:hover {
  color: var(--brand-primary);
}

.mobile-tab-item.active {
  color: var(--brand-primary) !important;
  font-weight: 700;
}

.mobile-tab-item.active i,
.mobile-tab-item.active .tab-icon {
  color: var(--brand-primary) !important;
  transform: translateY(-2px);
}

/* Offcanvas Drawer Enhancements */
.app-offcanvas {
  width: 310px !important;
  max-width: 85vw !important;
  border: 0 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25) !important;
}

.app-offcanvas .offcanvas-header {
  background: linear-gradient(135deg, #001f38 0%, #004f87 100%);
  color: #ffffff;
}

.app-offcanvas .offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-offcanvas-user {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.75rem;
  backdrop-filter: blur(8px);
}

.app-drawer-nav .nav-link,
.app-drawer-nav .drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  color: #334155;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 0.25rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.app-drawer-nav .nav-link:hover,
.app-drawer-nav .drawer-link:hover {
  background: rgba(0, 79, 135, 0.08);
  color: var(--brand-primary);
}

.app-drawer-nav .nav-link.active,
.app-drawer-nav .drawer-link.active {
  background: var(--brand-primary);
  color: #ffffff !important;
}

.app-drawer-nav .nav-link.active i,
.app-drawer-nav .drawer-link.active i {
  color: #ffffff !important;
}

.app-drawer-nav .nav-link i,
.app-drawer-nav .drawer-link i {
  font-size: 1.15rem;
}

/* Tablet Optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
  .feature-box, .stat-card-public {
    height: 100%;
  }
}

/* =====================================================================
   Progressive Web App (PWA) Install Banner & Buttons
   ===================================================================== */
.pwa-banner {
  position: fixed;
  bottom: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px) + 12px);
  left: 14px;
  right: 14px;
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(0, 79, 135, 0.15);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 36, 64, 0.18);
  z-index: 1045;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: slideUpPwa 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpPwa {
  from {
    transform: translateY(120%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pwa-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}