/* ============================================================================
   MGIOT Dashboard — Polish layer (Phase 8)
   ----------------------------------------------------------------------------
   Thin, additive layer that sits on top of mgiot-v2.css / mgiot-pro.css.
   Goals:
     • Modernise the login screen (gradient, glassmorphism, larger touch targets).
     • Tighten typography (variable-weight Inter on Latin, Cairo on Arabic).
     • Subtle gradients on primary buttons + a visible focus ring.
     • Card hover lift + smoother transitions across interactive elements.
     • Status pills with a glassy, brand-aligned look.
     • Tabular numbers wherever money/IDs appear.
   No element is hidden, removed, or renamed — every selector targets existing
   markup. Drop the file and reboot; the dashboard inherits the new look.
   ============================================================================ */

/* ── Type ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --mg-font-arabic: 'Cairo', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --mg-font-latin:  'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;

  --mg-grad-brand:  linear-gradient(135deg, #0F4D96 0%, #1E66B8 60%, #1A8DD7 100%);
  --mg-grad-soft:   linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  --mg-grad-hero:   radial-gradient(1200px 600px at 0% 0%, rgba(15,77,150,0.10), transparent 60%),
                    radial-gradient(900px 500px at 100% 100%, rgba(26,141,215,0.10), transparent 65%),
                    var(--mg-grad-soft);

  --mg-ring:        0 0 0 4px rgba(15,77,150,0.22);
  --mg-ring-soft:   0 0 0 4px rgba(15,77,150,0.10);

  --mg-shadow-lg:   0 12px 30px -10px rgba(15,23,42,0.18),
                    0 4px 10px -2px rgba(15,23,42,0.08);

  --mg-radius-pill: 999px;
}

html[lang="ar"] body { font-family: var(--mg-font-arabic); }
html[lang="en"] body { font-family: var(--mg-font-latin); }

/* Numerals never wrap, never lose alignment in tables */
.mg-table td, .mg-table th,
.mg-cell-mono, .mg-number,
.mg-stat-value, .mg-currency,
input[type="number"], input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Login screen — gradient hero + glass card ───────────────────────────── */
.login-page {
  background: var(--mg-grad-hero) !important;
}
.login-page.active {
  align-items: center;
  justify-content: center;
}
.login-card {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--mg-shadow-lg) !important;
  border-radius: 20px !important;
  padding: 32px 30px !important;
  max-width: 380px;
}
.login-card .login-brand .brand-mark {
  filter: drop-shadow(0 6px 14px rgba(15,77,150,0.18));
  transition: transform 240ms ease;
}
.login-card:hover .login-brand .brand-mark {
  transform: scale(1.04);
}
.login-card .brand-title {
  background: var(--mg-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}
.login-card input {
  border: 1px solid var(--mg-border, #E2E8F0) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.login-card input:focus {
  outline: none !important;
  border-color: var(--mg-brand, #0F4D96) !important;
  box-shadow: var(--mg-ring) !important;
}
.login-card button {
  background: var(--mg-grad-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, filter 160ms ease;
  box-shadow: 0 8px 22px -8px rgba(15,77,150,0.55);
}
.login-card button:hover  { filter: brightness(1.05); transform: translateY(-1px); }
.login-card button:active { transform: translateY(0); filter: brightness(0.97); }

/* ── Primary buttons everywhere — gradient + ring + soft press ───────────── */
.btn.btn-primary,
button.primary,
.mg-btn.mg-btn--primary,
.inst-btn--primary {
  background: var(--mg-grad-brand) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 600;
  transition: transform 120ms ease, filter 160ms ease, box-shadow 200ms ease;
}
.btn.btn-primary:hover,
button.primary:hover,
.mg-btn.mg-btn--primary:hover,
.inst-btn--primary:hover { filter: brightness(1.06); }
.btn:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--mg-ring) !important;
}

/* ── Sidebar nav row hover + active glow ─────────────────────────────────── */
.sidebar .nav-item {
  border-radius: 10px;
  margin: 2px 8px;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.sidebar .nav-item:hover {
  background: var(--mg-brand-50, #EEF4FB);
  color: var(--mg-brand, #0F4D96);
  transform: translateX(0);
}
html[dir="rtl"] .sidebar .nav-item:hover { transform: translateX(-2px); }
html[dir="ltr"] .sidebar .nav-item:hover { transform: translateX(2px); }
.sidebar .nav-item.active {
  background: var(--mg-brand-100, #DCE8F6) !important;
  color: var(--mg-brand, #0F4D96) !important;
  font-weight: 700;
  position: relative;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--mg-grad-brand);
}
html[dir="rtl"] .sidebar .nav-item.active::before { right: 0; left: auto; }
html[dir="ltr"] .sidebar .nav-item.active::before { left: 0;  right: auto; }

/* ── Stat / KPI cards: hover lift + reveal gradient strip ────────────────── */
.mg-stat,
.mg-card,
.stats-grid > *,
.dashboard-stats > * {
  transition: transform 220ms cubic-bezier(.2,.7,.25,1), box-shadow 220ms ease;
  will-change: transform;
}
.mg-stat:hover,
.mg-card:hover,
.stats-grid > *:hover,
.dashboard-stats > *:hover {
  transform: translateY(-2px);
  box-shadow: var(--mg-shadow-lg) !important;
}

/* ── Tables: smoother row hover + sticky header subtle gradient ──────────── */
.mg-table thead th,
.card thead th {
  background: var(--mg-grad-soft) !important;
  position: sticky; top: 0;
  z-index: 2;
}
.mg-table tbody tr,
.card tbody tr { transition: background 140ms ease; }
.mg-table tbody tr:hover,
.card tbody tr:hover { background: var(--mg-brand-50, #EEF4FB) !important; }

/* ── Status pills — translucent, ringed, modern ──────────────────────────── */
.status-pill,
.mg-pill,
.badge,
.tag {
  border-radius: var(--mg-radius-pill) !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

/* ── Modal frames — slightly bigger radius and shadow ────────────────────── */
.modal,
.mg-modal,
.modal-bg .modal {
  border-radius: 16px !important;
  box-shadow: var(--mg-shadow-lg) !important;
  overflow: hidden;
}

/* ── Inputs — visible focus ring (a11y) ──────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--mg-ring-soft);
  border-color: var(--mg-brand, #0F4D96) !important;
}

/* ── Top header brand — gradient title ───────────────────────────────────── */
.main-header h1,
.page-title,
.mg-page-title {
  background: var(--mg-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Scrollbars: thin and brand-tinted ───────────────────────────────────── */
* { scrollbar-color: rgba(15,77,150,0.45) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(15,77,150,0.45), rgba(26,141,215,0.45));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(15,77,150,0.65), rgba(26,141,215,0.65));
}

/* ── Print: respect existing print rules, just remove polish noise ───────── */
@media print {
  .login-card, .mg-card, .mg-stat { box-shadow: none !important; transform: none !important; }
  *::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
}