/* Ooredoo — global dark theme (matches login page) */
:root {
  --sh-navy: #0B1929;
  --sh-navy-2: #0f2036;
  --sh-surface: #142338;
  --sh-surface-2: #1b2c44;
  --sh-input: #2a2f3a;
  --sh-accent: #2DD4BF;
  --sh-accent-2: #14B8A6;
  --sh-accent-deep: #0F766E;
  --sh-accent-glow: 0 10px 30px -8px rgba(45, 212, 191, .45);
  --sh-radius: 14px;
  --sh-ink: #ffffff;
  --sh-muted: rgba(255,255,255,0.7);
  --sh-line: rgba(255,255,255,0.12);
}

/* Arabic-friendly type stack */
html, body, input, button, select, textarea, .btn, .card, h1, h2, h3, h4, h5, h6, p, span, div, a, label, li {
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { -webkit-text-size-adjust: 100%; }

/* Force dark navy background + white text on every page */
html, body {
  background: var(--sh-navy) !important;
  color: var(--sh-ink) !important;
}
body {
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  background-image:
    radial-gradient(1000px 500px at 110% -10%, rgba(45,212,191,0.10), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(45,212,191,0.08), transparent 60%),
    linear-gradient(180deg, #0B1929, #0f2036) !important;
  background-attachment: fixed !important;
}

/* Kill legacy light shells/wrappers */
.shell, .container, .wrap, main, .stage, .page {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
}

/* Cards and panels -> dark surface */
.card, .panel, .box, .tile, .section-card, .info-card {
  background: var(--sh-surface) !important;
  color: var(--sh-ink) !important;
  border-radius: 18px !important;
  border: 1px solid var(--sh-line) !important;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.55) !important;
}

/* Headings and text */
h1, h2, h3, h4, h5, h6 { color: var(--sh-ink) !important; }
p, li, span, label, small { color: var(--sh-ink); }
.muted, .sub, .hint, .subtitle, .meta { color: var(--sh-muted) !important; }
hr, .divider { border-color: var(--sh-line) !important; }

/* Links */
a { color: var(--sh-accent); }
a:hover { color: var(--sh-accent-2); }

/* Inputs / selects / textareas -> dark input style from login */
input, select, textarea {
  background: var(--sh-input) !important;
  color: var(--sh-ink) !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.55) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.15) !important;
}

/* Tap targets */
button, .btn, input[type="submit"], input[type="button"], a.btn {
  min-height: 48px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease, filter .2s ease;
  border-radius: 999px;
}
button:active, .btn:active { transform: translateY(1px) scale(.99); }

/* Primary CTA — turquoise pill (matches login "متابعة") */
.btn, .btn-primary, .primary-btn, button.primary,
button[type="submit"]:not(.eye):not(.linklike):not(.lang-btn),
input[type="submit"], a.btn-primary, a.btn.primary {
  background: var(--sh-accent) !important;
  color: var(--sh-navy) !important;
  border: none !important;
  box-shadow: var(--sh-accent-glow) !important;
}
.btn:hover, .btn-primary:hover, .primary-btn:hover, button.primary:hover,
button[type="submit"]:not(.eye):not(.linklike):not(.lang-btn):hover,
input[type="submit"]:hover {
  background: var(--sh-accent-2) !important;
  color: var(--sh-navy) !important;
  filter: brightness(1.03);
  box-shadow: 0 14px 36px -8px rgba(45,212,191,.55) !important;
}
.btn:disabled, button:disabled, input[type="submit"]:disabled {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Secondary / ghost buttons */
.btn-secondary, .secondary-btn, button.secondary, a.btn-secondary {
  background: transparent !important;
  color: var(--sh-accent) !important;
  border: 1.5px solid var(--sh-accent) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .secondary-btn:hover, button.secondary:hover {
  background: rgba(45,212,191,0.12) !important;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--sh-accent) !important;
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: var(--sh-accent); color: var(--sh-navy); }

/* Top bars / navs / footers */
.topbar, .navbar, .header, .footer, .bottom-nav, nav, header, footer {
  background: rgba(11,25,41,0.85) !important;
  color: var(--sh-ink) !important;
  border-color: var(--sh-line) !important;
}

/* Badges / chips */
.badge, .chip, .tag {
  background: rgba(45,212,191,0.15) !important;
  color: var(--sh-accent) !important;
  border: 1px solid rgba(45,212,191,0.35) !important;
}

/* Tables */
table { color: var(--sh-ink); }
th, td { border-color: var(--sh-line) !important; }
thead { background: var(--sh-surface-2) !important; }

/* Icons that used to be dark on light — keep accent-colored where sensible */
svg.accent, .icon-accent { color: var(--sh-accent) !important; fill: currentColor; }

/* Mobile refinements */
@media (max-width: 480px) {
  body { font-size: 15.5px; }
  h1 { font-size: 24px; line-height: 1.25; }
  h2 { font-size: 20px; line-height: 1.3; }
  .card, .panel { border-radius: 16px; }
  button, .btn { min-height: 50px; font-size: 16px; }
}

@keyframes shFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main, .stage, .container, .card { animation: shFadeUp .45s ease both; }