/* ================================================================
   QeCare / Patient Portal — QE Techno Visual System V1
   Visual-only layer. No controller, route, database, JS or workflow changes.
   ================================================================ */
:root {
  /* QE Techno brand */
  --qe-navy-950:#061426;
  --qe-navy-900:#0B1D3A;
  --qe-navy-850:#0E2544;
  --qe-navy-800:#123153;
  --qe-navy-700:#1D466E;
  --qe-teal-700:#008C7E;
  --qe-teal-600:#00A896;
  --qe-teal-500:#16B9A8;
  --qe-teal-100:#DDF8F4;
  --qe-teal-50:#F0FCFA;
  --qe-cyan-600:#00A9DF;
  --qe-cyan-500:#00C2FF;
  --qe-cyan-100:#DDF5FF;
  --qe-blue-50:#F3F9FD;
  --qe-slate-900:#172033;
  --qe-slate-700:#475569;
  --qe-slate-500:#718096;
  --qe-line:#DCE6ED;
  --qe-line-strong:#C9D9E4;
  --qe-bg:#F4F8FB;
  --qe-bg-soft:#F8FBFD;
  --qe-surface:#FFFFFF;
  --qe-success:#18A875;
  --qe-warning:#F59E0B;
  --qe-danger:#E5484D;
  --qe-purple:#7C5CE3;

  /* Bridge existing portal tokens to QE Techno */
  --primary:var(--qe-teal-600);
  --primary-dark:var(--qe-teal-700);
  --primary-soft:var(--qe-teal-50);
  --ink:var(--qe-navy-900);
  --muted:var(--qe-slate-500);
  --line:var(--qe-line);
  --background:var(--qe-bg);
  --surface:var(--qe-surface);
  --success:var(--qe-success);
  --danger:var(--qe-danger);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --qe-shadow-xs:0 3px 10px rgba(11,29,58,.045);
  --qe-shadow-sm:0 10px 30px rgba(11,29,58,.075);
  --qe-shadow-md:0 22px 54px rgba(11,29,58,.12);
  --qe-glow:0 16px 46px rgba(0,168,150,.16);
}

html { accent-color:var(--qe-teal-600); }
body.portal-body {
  color:var(--qe-navy-900);
  background:
    radial-gradient(circle at 91% 2%,rgba(0,194,255,.08),transparent 25%),
    radial-gradient(circle at 8% 16%,rgba(0,168,150,.075),transparent 26%),
    linear-gradient(180deg,#FBFDFE 0%,var(--qe-bg) 54%,#F7FAFC 100%);
}
body.portal-body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background-image:
    linear-gradient(rgba(11,29,58,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,29,58,.025) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,#000 0,transparent 54%);
  z-index:-1;
}

/* -------------------------------
   Main app shell
   ------------------------------- */
.desktop-sidebar {
  width:270px;
  flex-basis:270px;
  padding:24px 16px 20px;
  color:#fff;
  border-inline-end:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 26% 8%,rgba(0,194,255,.16),transparent 22%),
    radial-gradient(circle at 88% 64%,rgba(0,168,150,.13),transparent 28%),
    linear-gradient(180deg,var(--qe-navy-950) 0%,var(--qe-navy-900) 48%,#0A213C 100%);
  box-shadow:16px 0 42px rgba(6,20,38,.08);
}
.desktop-sidebar::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(0,194,255,.08),transparent 30%),
    radial-gradient(circle at 30% 95%,rgba(0,168,150,.16),transparent 24%);
  opacity:.8;
}
.desktop-sidebar > * { position:relative; z-index:1; }
.sidebar-brand {
  grid-template-columns:54px minmax(0,1fr);
  gap:12px;
  padding:0 8px 23px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar-brand img {
  width:54px;
  height:54px;
  padding:6px;
  border-radius:17px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.2);
}
.sidebar-brand-title { color:#fff; font-weight:900; letter-spacing:-.01em; }
.sidebar-brand-tagline { color:#8EDFD8; font-weight:700; }
.sidebar-nav { gap:6px; margin-top:20px; }
.sidebar-link {
  min-height:48px;
  gap:11px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:14px;
  color:rgba(235,247,255,.72);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.sidebar-link .nav-icon {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.055);
  color:#A9CDE2;
  transition:.18s ease;
}
.sidebar-link:hover {
  color:#fff;
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.07);
  transform:translateX(var(--qe-hover-x,0));
}
.sidebar-link:hover .nav-icon { color:#fff; background:rgba(0,194,255,.11); }
.sidebar-link.active {
  color:#fff;
  background:linear-gradient(135deg,rgba(0,168,150,.22),rgba(0,194,255,.10));
  border-color:rgba(79,226,211,.25);
  box-shadow:inset 3px 0 0 var(--qe-cyan-500),0 10px 24px rgba(0,0,0,.12);
  font-weight:900;
}
[dir="rtl"] .sidebar-link.active { box-shadow:inset -3px 0 0 var(--qe-cyan-500),0 10px 24px rgba(0,0,0,.12); }
.sidebar-link.active .nav-icon {
  color:#061426;
  background:linear-gradient(135deg,#7EF3E6,#57D6FF);
  box-shadow:0 7px 18px rgba(0,194,255,.18);
}
.sidebar-logout { border-top-color:rgba(255,255,255,.10); }
.sidebar-logout button { color:#C7D8E7; border:1px solid transparent; }
.sidebar-logout button:hover { color:#fff; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.05); }

.portal-main { background:transparent; }
.topbar {
  height:78px;
  padding:0 28px;
  border-bottom:1px solid rgba(201,217,228,.78);
  background:rgba(255,255,255,.83);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 6px 24px rgba(11,29,58,.045);
}
.desktop-breadcrumb span { color:#8495A8; }
.desktop-breadcrumb strong { color:var(--qe-navy-900); font-weight:900; }
.portal-language-switch,.portal-back-button,.topbar-notifications {
  border:1px solid var(--qe-line);
  background:rgba(255,255,255,.88);
  color:var(--qe-navy-800);
  box-shadow:var(--qe-shadow-xs);
}
.portal-language-switch:hover,.portal-back-button:hover,.topbar-notifications:hover {
  border-color:#A9DCD9;
  color:var(--qe-teal-700);
  background:#fff;
  box-shadow:0 8px 22px rgba(0,168,150,.09);
}
.topbar-notifications.active { color:var(--qe-teal-700); border-color:#8DD7D0; background:var(--qe-teal-50); }
.notification-nav-badge { background:linear-gradient(135deg,var(--qe-danger),#FF6B70)!important; box-shadow:0 0 0 3px #fff; }
.user-chip {
  padding:5px 8px 5px 13px;
  border:1px solid var(--qe-line);
  border-radius:15px;
  background:rgba(255,255,255,.91);
  box-shadow:var(--qe-shadow-xs);
}
.user-avatar {
  color:#062338!important;
  background:linear-gradient(135deg,#62E2D5,#6AD8FF)!important;
  box-shadow:0 7px 18px rgba(0,168,150,.18)!important;
}
.portal-content { max-width:1480px; padding:30px 30px 42px; }

/* -------------------------------
   Dashboard hero / patient identity
   ------------------------------- */
.welcome-section {
  min-height:190px;
  position:relative;
  overflow:hidden;
  align-items:center;
  padding:30px 32px;
  border:1px solid rgba(76,139,177,.24);
  border-radius:26px;
  background:
    radial-gradient(circle at 85% 14%,rgba(0,194,255,.18),transparent 24%),
    radial-gradient(circle at 10% 110%,rgba(0,168,150,.22),transparent 28%),
    linear-gradient(120deg,var(--qe-navy-950) 0%,var(--qe-navy-900) 48%,#12365B 100%);
  box-shadow:0 20px 46px rgba(11,29,58,.16);
}
.welcome-section::before {
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  inset-inline-end:-100px;
  top:-180px;
  border:1px solid rgba(0,194,255,.18);
  border-radius:50%;
  box-shadow:0 0 0 48px rgba(0,194,255,.028),0 0 0 96px rgba(0,168,150,.018);
}
.welcome-section::after {
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border-radius:0;
  background:linear-gradient(90deg,transparent 0 54%,rgba(255,255,255,.025));
}
.welcome-section > * { position:relative; z-index:1; }
.welcome-section h1 { color:#fff!important; font-size:clamp(1.75rem,2.6vw,2.45rem); font-weight:900; }
.welcome-section p { color:#BCD0DF!important; font-size:.93rem; }
.welcome-section .page-eyebrow { color:#69E6D7!important; font-weight:900; }
.welcome-visual { max-width:245px; opacity:.95; filter:drop-shadow(0 18px 26px rgba(0,0,0,.18)); }
.welcome-visual img { max-height:150px; }
.patient-status-pill {
  color:#D5FFF7!important;
  background:rgba(0,168,150,.13)!important;
  border-color:rgba(111,236,220,.24)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px);
}
.patient-status-pill span { background:#52E4B5; box-shadow:0 0 0 4px rgba(82,228,181,.12); }

/* -------------------------------
   Cards, panels, sections
   ------------------------------- */
.portal-card,.metric-card,.patient-mobile-card,.insurance-card,.appointment-card,
.visit-card,.lab-card,.sick-leave-card,.request-card,.complaint-card,
.dashboard-skeleton-panel {
  border:1px solid rgba(210,224,233,.93)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:var(--qe-shadow-sm)!important;
}
.portal-card,.metric-card,.quick-actions-grid>a,.insurance-card,.appointment-card,.visit-card,.lab-card,.request-card,.complaint-card {
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.portal-card:hover,.metric-card:hover,.quick-actions-grid>a:hover,.insurance-card:hover,.appointment-card:hover,.visit-card:hover,.lab-card:hover,.request-card:hover,.complaint-card:hover {
  transform:translateY(-2px);
  border-color:#B8D7E4!important;
  box-shadow:0 15px 36px rgba(11,29,58,.105)!important;
}
.card-header-row h2,.dashboard-v120-section-heading h2,.quick-actions-section h2 { color:var(--qe-navy-900)!important; font-weight:900!important; }
.page-eyebrow,.section-kicker { color:var(--qe-teal-700)!important; font-weight:900!important; }
.dashboard-v120-section-heading a,.card-header-row a { color:var(--qe-teal-700)!important; }
.profile-summary-card { overflow:hidden; position:relative; }
.profile-summary-card::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--qe-teal-600),var(--qe-cyan-500));
}
.dashboard-profile-edit-link {
  border-color:#BEE7E2!important;
  color:var(--qe-teal-700)!important;
  background:var(--qe-teal-50)!important;
}
.dashboard-profile-edit-link:hover { background:#E5FAF6!important; box-shadow:0 8px 20px rgba(0,168,150,.08); }
.patient-details-grid > div {
  border:1px solid #E6EDF2!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#FBFDFE,#F7FAFC)!important;
}
.patient-details-grid dt { color:#8292A4!important; }
.patient-details-grid dd { color:var(--qe-navy-900)!important; }

/* Metrics — corporate product feel */
.metrics-grid { gap:15px; }
.metric-card {
  min-height:148px;
  position:relative;
  overflow:hidden;
  padding:19px!important;
}
.metric-card::before {
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--qe-teal-600),var(--qe-cyan-500));
  opacity:.9;
}
.metric-card::after { display:none!important; }
.metric-card .metric-icon {
  width:50px!important;
  height:50px!important;
  flex-basis:50px!important;
  border-radius:15px!important;
  background:var(--qe-teal-50)!important;
  color:var(--qe-teal-700)!important;
  border:1px solid rgba(0,168,150,.09);
}
.metric-card:nth-child(2) .metric-icon,.metric-blue .metric-icon { background:var(--qe-cyan-100)!important; color:#138FB9!important; }
.metric-card:nth-child(3) .metric-icon,.metric-violet .metric-icon { background:#F1EEFF!important; color:var(--qe-purple)!important; }
.metric-card:nth-child(4) .metric-icon,.metric-orange .metric-icon { background:#FFF5E6!important; color:#C97700!important; }
.metric-card strong { color:var(--qe-navy-900)!important; font-weight:900; }
.metric-card small { color:#8897A7!important; }

/* Quick actions */
.quick-actions-grid { gap:14px!important; }
.quick-actions-grid>a {
  overflow:hidden;
  position:relative;
  border:1px solid var(--qe-line)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--qe-shadow-xs)!important;
}
.quick-actions-grid>a::after {
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-inline-end:0;
  bottom:0;
  height:3px;
  transform:scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,var(--qe-teal-600),var(--qe-cyan-500));
  transition:transform .22s ease;
}
.quick-actions-grid>a:hover::after { transform:scaleX(1); }
.quick-actions-grid>a>span {
  background:linear-gradient(135deg,var(--qe-teal-50),var(--qe-cyan-100))!important;
  color:var(--qe-teal-700)!important;
  border:1px solid rgba(0,168,150,.08);
}
.quick-actions-grid strong { color:var(--qe-navy-900)!important; }

/* Attention / activity states */
.attention-item,.dashboard-attention-item { border-radius:16px!important; }
.status-badge { color:#087451!important; background:#E9F9F2!important; border-color:#C7EBDD!important; }
.portal-alert { border-color:#F4D7A2!important; background:#FFF8E9!important; color:#7A5515!important; }

/* Pregnancy keeps its own semantic tone but joins the system */
.pregnancy-dashboard-entry {
  border-radius:20px!important;
  border:1px solid #DDD4FB!important;
  background:linear-gradient(135deg,#FBF9FF 0%,#F6F2FF 58%,#F9FDFF 100%)!important;
  box-shadow:var(--qe-shadow-sm)!important;
}
.pregnancy-dashboard-entry:hover { box-shadow:0 15px 36px rgba(92,70,170,.12)!important; }
.pregnancy-dashboard-entry-icon { background:#ECE7FF!important; color:var(--qe-purple)!important; }

/* -------------------------------
   Forms and action components
   ------------------------------- */
input,select,textarea,.input-shell,.auth-input-wrap { font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif; }
.input-shell,.auth-input-wrap,input:not([type="checkbox"]):not([type="radio"]),select,textarea {
  border-color:#D7E2EA!important;
}
.input-shell:focus-within,.auth-input-wrap:focus-within,
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus {
  border-color:var(--qe-teal-600)!important;
  box-shadow:0 0 0 4px rgba(0,168,150,.10)!important;
  outline:0!important;
}
.primary-button,.auth-primary-button,.portal-feedback-submit,.mobile-logout {
  color:#fff!important;
  border:0!important;
  background:linear-gradient(135deg,var(--qe-teal-700),var(--qe-teal-600) 50%,var(--qe-cyan-600))!important;
  box-shadow:0 12px 28px rgba(0,168,150,.20)!important;
}
.primary-button:hover,.auth-primary-button:hover,.portal-feedback-submit:hover,.mobile-logout:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,168,150,.27)!important;
}

/* -------------------------------
   Login — same design DNA as QE Techno corporate site
   ------------------------------- */
.auth-page {
  background:
    radial-gradient(circle at 7% 8%,rgba(0,194,255,.08),transparent 26%),
    linear-gradient(135deg,#F4F9FC 0%,#FBFDFE 55%,#F2F8FB 100%)!important;
}
.auth-card {
  border:1px solid #D7E3EB!important;
  border-radius:30px!important;
  box-shadow:0 30px 78px rgba(11,29,58,.15)!important;
}
.auth-brand-panel {
  color:#fff!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(0,194,255,.17),transparent 24%),
    radial-gradient(circle at 14% 88%,rgba(0,168,150,.18),transparent 27%),
    linear-gradient(145deg,var(--qe-navy-950) 0%,var(--qe-navy-900) 55%,#12365A 100%)!important;
}
.auth-brand-panel::before {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  opacity:.55!important;
}
.auth-brand-panel::after { background:radial-gradient(circle at 50% 50%,transparent,rgba(6,20,38,.18))!important; }
.auth-brand-ar,.auth-brand-en,.auth-brand-middle h1 { color:#fff!important; }
.auth-brand-middle p { color:#BCD0DF!important; }
.auth-brand-kicker { color:#72E8DC!important; border-color:rgba(114,232,220,.22)!important; background:rgba(0,168,150,.10)!important; }
.auth-security-note { color:#E6F4FC!important; border-color:rgba(255,255,255,.12)!important; background:rgba(255,255,255,.055)!important; }
.auth-security-icon { color:#071D3A!important; background:linear-gradient(135deg,#72E8DC,#69D7FF)!important; border-color:transparent!important; }
.auth-form-panel { background:linear-gradient(180deg,#fff,#FBFDFE)!important; }
.auth-form-header h2 { color:var(--qe-navy-900)!important; }
.auth-language-switch { color:var(--qe-teal-700)!important; border-color:#BFE4E1!important; }

/* -------------------------------
   Assistant / Notifications
   ------------------------------- */
.patient-assistant-launcher {
  background:linear-gradient(135deg,var(--qe-teal-600),var(--qe-cyan-500))!important;
  box-shadow:0 15px 34px rgba(0,168,150,.27)!important;
}
.patient-assistant-panel {
  border-color:#D3E1E9!important;
  box-shadow:0 30px 72px rgba(11,29,58,.24)!important;
}
.patient-assistant-header { background:linear-gradient(135deg,#fff,var(--qe-teal-50))!important; }
.assistant-message-user>div { background:linear-gradient(135deg,var(--qe-navy-800),var(--qe-teal-700))!important; }
.assistant-primary-answer { background:linear-gradient(135deg,#FBFEFF,var(--qe-teal-50))!important; border-color:#D4EDE9!important; }

/* -------------------------------
   Mobile navigation
   ------------------------------- */
.mobile-bottom-nav {
  border-top:1px solid rgba(201,217,228,.92)!important;
  background:rgba(255,255,255,.90)!important;
  box-shadow:0 -14px 34px rgba(11,29,58,.10)!important;
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
}
.mobile-bottom-nav a,.mobile-bottom-nav button { color:#73869A; }
.mobile-bottom-nav a.active,.mobile-bottom-nav button.active { color:var(--qe-teal-700)!important; }
.mobile-bottom-nav a.active::before,.mobile-bottom-nav button.active::before {
  background:linear-gradient(90deg,var(--qe-teal-600),var(--qe-cyan-500))!important;
}
.mobile-menu-sheet { border-color:#D8E3EA!important; box-shadow:0 -25px 60px rgba(11,29,58,.17)!important; }

/* Semantic states */
.insurance-card.active,.insurance-card.is-active { border-color:#A8E3CB!important; box-shadow:0 12px 30px rgba(24,168,117,.10)!important; }
.insurance-card.expired,.insurance-card.inactive,.insurance-card.is-expired { border-color:#F0C6CA!important; }
.status.valid { background:#EDFBF4!important; border-color:#BCE9D2!important; }
.status.invalid { background:#FFF3F4!important; border-color:#F0C3C8!important; }

/* Accessible focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid rgba(0,194,255,.28)!important;
  outline-offset:2px;
}

/* Small-screen refinements */
@media (max-width:980px) {
  .auth-card { border-radius:0!important; border:0!important; }
}
@media (max-width:767px) {
  body.portal-body { background:linear-gradient(180deg,#F8FCFD,#F3F8FB)!important; }
  body.portal-body::before { display:none; }
  .portal-content { padding:18px 14px 104px!important; }
  .welcome-section {
    min-height:auto;
    padding:22px 18px!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 90% 0,rgba(0,194,255,.20),transparent 26%),
      linear-gradient(135deg,var(--qe-navy-950),var(--qe-navy-800))!important;
  }
  .welcome-section h1 { font-size:1.5rem!important; }
  .welcome-section p { font-size:.82rem!important; }
  .welcome-visual { max-width:120px!important; opacity:.82; }
  .patient-mobile-card { box-shadow:var(--qe-shadow-sm)!important; }
  .metric-card { min-height:132px!important; padding:16px!important; }
  .topbar { background:rgba(255,255,255,.91)!important; }
  .auth-page { background:#fff!important; }
  .auth-mobile-brand { border-color:#D8E5EB!important; background:linear-gradient(135deg,var(--qe-teal-50),#fff)!important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* ========================================================================
   QE Techno login focus refinement
   Keep one clear theme-colored outer focus ring and remove the inner input ring.
   ======================================================================== */
body.portal-theme-qe.auth-page .auth-input-wrap:focus-within {
  border-color:var(--qe-teal-600) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,168,150,.12) !important;
  outline:0 !important;
}
body.portal-theme-qe.auth-page .auth-input-wrap input,
body.portal-theme-qe.auth-page .auth-input-wrap input:focus,
body.portal-theme-qe.auth-page .auth-input-wrap input:focus-visible {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
body.portal-theme-qe.auth-page .auth-input-wrap:focus-within .auth-input-icon {
  color:var(--qe-teal-700) !important;
}