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

/* ==========================================================================
   EffectStats — Unified Stylesheet
   ==========================================================================
   Combined styles for the EffectStats Dash application.

   TABLE OF CONTENTS
   -----------------
   1. Design tokens
   2. Base reset & typography
   3. Layout helpers
   4. Controls (buttons, inputs, forms)
   5. Utility classes
   6. Public shell (landing, header)
   7. Auth page
   8. App shell (header, sidebar, profile)
   9. App landing (study explorer, data explorer, upload)
   10. Enrollment & placeholder pages
   11. Dashboard pages (study, adverse events, efficacy, patient profile, labs)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --bg: #d9d9d9;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --border: rgba(15, 23, 42, 0.10);
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  
    --primary: #2563eb;
    --primary-2: #06b6d4;
    --success: #22c55e;
    --warning: #f97316;
    --danger: #ef4444;
    --nav-active: #34b27f;
    --header-accent: #2b6cb0;
  
    --radius: 16px;
    --radius-sm: 12px;
}

/* --------------------------------------------------------------------------
   2. Base reset & typography
   -------------------------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
body {
    height: 100%;
  }
  
  body {
    margin: 0;
    color: var(--text);
    background: #e0f2fe; /* light blue page background */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
    /* Keep a stable viewport width across routes (landing has no scroll,
       auth often does). This prevents responsive breakpoint flicker that
       can change the logo size/position between pages. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }

/* Sticky controls above large tables (Excel-like freeze-pane behavior) */
.ae-sticky-controls {
  position: sticky;
  top: 12px;
  z-index: 50;
  background: var(--card);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}


/* TEAE table: lock column widths to avoid header/body misalignment and overlap
   when using multi-row headers + fixed rows/columns + dynamic hide/show. */
#adverse-events-common-teae-table .dash-spreadsheet-container .dash-spreadsheet-inner td,
#adverse-events-common-teae-table .dash-spreadsheet-container .dash-spreadsheet-inner th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TEAE table: keep fixed header aligned with body when a vertical scrollbar is present.
   Dash renders fixed headers in a separate container; adding padding compensates for
   the scrollbar gutter in the scrollable body on Windows. */
#adverse-events-common-teae-table .dash-fixed-row {
  /* Default to 0; `assets/effectstats.js` measures and applies an exact value. */
  padding-right: 0px;
  box-sizing: border-box;
}

/* TEAE table: enforce deterministic column sizing across header/body tables.
   This reduces header/body drift during horizontal scrolling on some browsers. */
#adverse-events-common-teae-table .dash-spreadsheet-container table {
  table-layout: fixed;
}

/* Toggle Columns menu: make long labels wrap cleanly and keep consistent spacing. */
#adverse-events-common-teae-toggle-columns-menu .dropdown-menu {
  min-width: 320px;
  max-width: 460px;
  white-space: normal;
}

.ae-toggle-columns-checklist label {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  line-height: 1.25;
}

.ae-toggle-columns-checklist input {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Dash checklist markup is <label><input/><span>text</span></label>.
   Make the span flexible so wrapped lines stay aligned under the text. */
.ae-toggle-columns-checklist label > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}




/* Headers: allow wrapping so group labels aren't truncated */
#adverse-events-common-teae-table .dash-spreadsheet-container .dash-spreadsheet-inner thead th {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
}

  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button,
  input,
  select {
    font: inherit;
  }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
  .container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
  }
  
  .surface {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
  }
  
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border-radius: var(--radius);
  }
  
  .muted {
    color: var(--muted);
  }
  
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   4. Controls (buttons, inputs, forms)
   -------------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
    user-select: none;
  }
  
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
    border-color: rgba(37, 99, 235, 0.30);
  }
  
  .btn:active {
    transform: translateY(0);
    box-shadow: none;
  }
  
  .btn.primary {
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
  }
  
  .btn.primary:hover {
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.28);
  }

  .btn.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: white;
    filter: none;
  }

  .btn.danger:hover:not(:disabled) {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    filter: brightness(0.95);
  }
  
  .btn.ghost {
    background: transparent;
  }
  
  .field {
    display: grid;
    gap: 8px;
  }
  
  
  .label {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.75);
  }
  
  .input {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
    outline: none;
    /* Ensure text + password inputs render the same height across browsers. */
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.45; /* match `body` */
    height: 47px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  
  .input:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  }
  
  .divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    color: rgba(15, 23, 42, 0.55);
    font-size: 12px;
  }
  
  .divider::before,
  .divider::after {
    content: "";
    height: 1px;
    background: rgba(15, 23, 42, 0.10);
}

/* Base layout responsive */
  @media (max-width: 720px) {
    .container {
      width: min(1120px, calc(100% - 28px));
    }
}

/* --------------------------------------------------------------------------
   5. Utility classes
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   6. Public shell (landing page, public header)
   -------------------------------------------------------------------------- */
  .public {
    min-height: 100vh;
  }
  
  .public-header {
    height: 82px;
    background: #fff;
    border-bottom: 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  .public-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    position: relative;
  }
  
  .public-header .public-inner .public-brand {
    position: absolute;
    left: 39px;
    top: 14px;
    width: 88px;
    height: 52px;
    display: block;
    padding-bottom: 6px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.85);
  }
  
  .public-header .public-inner .public-brand:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 6px;
    border-radius: 10px;
  }
  
  .public-header .public-inner .public-logo {
    width: 88px;
    height: 52px;
    display: block;
    object-fit: contain;
  }
  
  @media (max-width: 980px) {
    .public-header .public-inner .public-brand {
      left: 62px;
    }
  }
  
  @media (max-width: 520px) {
    .public-header .public-inner .public-brand {
      left: 56px;
      top: 20px;
      width: 72px;
      height: 42px;
    }
    .public-header .public-inner .public-logo {
      width: 72px;
      height: 42px;
    }
  }
  
  .actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .public-main {
    padding: 18px 0 56px;
}

/* Landing page (public, pre-login) */
  .landing-public .panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    margin-top: 14px;
  }

/* Session loader (first-paint) */
  .session-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .session-loader-square {
    width: min(360px, calc(100vw - 48px));
    height: min(360px, calc(100vh - 48px));
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius-sm);
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  .session-loader-square .progress {
    width: 100%;
  }
  
  .landing-public .panel-inner {
    padding: 22px;
    display: grid;
    gap: 12px;
    max-width: 720px;
  }
  
  .landing-public .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.02);
    width: fit-content;
    font-weight: 700;
    font-size: 12px;
  }
  
  .landing-public .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--nav-active);
  }
  
  .landing-public .title {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.02em;
  }
  
  .landing-public .subtitle {
    margin: 0;
    font-size: 14px;
  }
  
  .landing-public .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   7. Auth page
   -------------------------------------------------------------------------- */
  .auth-wrap {
    min-height: calc(100vh - 82px);
    display: grid;
    place-items: center;
    padding: 36px 16px 56px;
  }
  
  .auth-wrap .form {
    overflow: hidden;
    width: min(520px, 100%);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  .auth-wrap .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  
  .auth-wrap .tab {
    padding: 14px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.7);
  }
  
  .auth-wrap .tab.active {
    color: rgba(15, 23, 42, 0.92);
    background: white;
    box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.35);
  }
  
  .auth-wrap .body {
    padding: 22px;
    display: grid;
    gap: 10px;
  }
  
  .auth-wrap .title {
    margin: 2px 0 0;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }
  
  .auth-wrap .subtitle {
    margin: 0;
    font-size: 14px;
  }
  
  .auth-wrap .stack {
    display: grid;
    gap: 16px;
    margin-top: 8px;
  }
  
  .auth-wrap .stack .btn.primary {
    width: 100%;
    margin-top: 4px;
  }
  
  .auth-wrap .alert {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    font-size: 13px;
  }
  
  .auth-wrap .alert.danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
  }
  
  .auth-wrap .alert.success {
    background: rgba(34, 197, 94, 0.09);
    border-color: rgba(34, 197, 94, 0.18);
  }
  
  .auth-wrap .help ul {
    margin: 0;
    padding-left: 16px;
  }
  
  .auth-wrap .help li {
    margin: 4px 0;
  }
  
  /* Secondary actions: Register + Microsoft stacked (industry standard: Forgot password? is by password field) */
  .auth-wrap .auth-actions-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
  }
  
  /* Forgot password? — below Sign in, small helper link (placed after primary button to avoid misclicks) */
  .auth-wrap .auth-link-forgot {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    padding: 0;
    margin-top: 4px;
  }
  
  .auth-wrap .auth-link-forgot:hover {
    color: var(--primary);
  }
  
  .auth-wrap .auth-link-sep {
    color: var(--muted);
    font-weight: 400;
    font-size: 14px;
    user-select: none;
    pointer-events: none;
    margin: 0 2px;
  }
  
  /* Standard login link style: text-only, readable weight, underline on hover */
  .auth-wrap .auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration 0.15s ease;
  }
  
  .auth-wrap .auth-link:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
    color: #1d4ed8;
    text-decoration: underline;
  }
  
  .auth-wrap .auth-link:active {
    transform: none;
  }
  
  /* Microsoft: same link treatment, distinct color — stacked under Register on left */
  .auth-wrap .auth-link-ms {
    display: inline-flex;
    margin: 0;
    padding: 0;
    color: #0078d4;
    font-size: 14px;
    font-weight: 500;
  }
  
  .auth-wrap .auth-link-ms:hover {
    color: #106ebe;
    text-decoration: underline;
  }
  
  .auth-wrap .auth-link-ms[disabled],
  .auth-wrap .auth-link-ms[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    color: #0078d4;
  }
  
  .auth-wrap .ms {
    border: 1px solid rgba(0, 120, 212, 0.85);
    background: rgba(0, 120, 212, 0.90);
    color: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
  }
  
  .auth-wrap .ms .muted {
    color: rgba(255, 255, 255, 0.85);
  }
  
  .auth-wrap .ms:hover {
    border-color: rgba(0, 120, 212, 1);
    background: rgba(0, 120, 212, 1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.14);
  }
  
  .auth-wrap .ms[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
  }
  
  .auth-wrap .guest {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
    color: rgba(15, 23, 42, 0.78);
  }
  
  .auth-wrap .guest:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.10);
}

/* --------------------------------------------------------------------------
   8. App shell (header, sidebar, profile, navigation)
   -------------------------------------------------------------------------- */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    background: #fff;
    border-bottom: 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 1000;
  }
  
  .header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: relative;
  }
  
  .header .brand {
    position: absolute;
    left: 39px;
    top: 14px;
    width: 88px;
    height: 52px;
    display: block;
    padding-bottom: 6px;
    background: transparent;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    cursor: pointer;
  }
  
  .header .brand:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 6px;
    border-radius: 10px;
  }
  
  .header .logo {
    width: 88px;
    height: 52px;
    display: block;
    object-fit: contain;
  }
  
  .profile-wrap {
    position: absolute;
    right: 39px;
    top: 18px;
    width: 46px;
  }
  
  .profile-btn {
    width: 46px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    color: #1f4d7a;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  
  .profile-btn:hover {
    opacity: 0.9;
  }
  
  .profile-btn:active {
    transform: scale(0.98);
  }
  
  .profile-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 6px;
    border-radius: 10px;
  }
  
  .profile {
    width: 46px;
    height: 38.56px;
    display: block;
    object-fit: contain;
  }
  
  .name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
  
  /* Profile popover – enterprise menu: controlled visibility, no mount/unmount glitch */
  .popover {
    position: absolute;
    top: 54px;
    right: 0;
    width: 260px;
    min-width: 220px;
    max-height: min(420px, calc(100vh - 100px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 12px 28px -4px rgba(15, 23, 42, 0.12);
    padding: 0 0 10px 0;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transform-origin: top right;
    transition: opacity 0.18s ease, visibility 0.18s step-end, transform 0.18s ease;
    pointer-events: none;
  }
  
  .profile-wrap[data-open="true"] .popover,
  .popover.popover--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0.18s step-start, transform 0.18s ease;
  }
  
  .popover-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e2e8f0;
  }
  
  
  .popover-user {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #1e293b;
  }
  
  .popover-sub {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
  }
  
  .popover-spacer {
    height: 12px;
    flex-shrink: 0;
  }
  
  .popover-label {
    padding: 0 16px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    box-sizing: border-box;
    text-decoration: none;
  }
  
  .popover a.menu-item {
    color: inherit;
  }
  
  .menu-item:hover {
    background: #f8fafc;
    color: #0f172a;
  }
  
  .menu-item:active {
    background: #f1f5f9;
  }
  
  .menu-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
  }
  
  .menu-item--action {
    color: #64748b;
    font-weight: 500;
  }
  
  .menu-item--action:hover {
    color: #dc2626;
    background: #fef2f2;
  }
  
  .nav-toggle {
    display: none;
    position: absolute;
    left: 14px;
    top: 24px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #fff;
    cursor: pointer;
  }
  
  .nav-toggle:hover {
    background: rgba(15, 23, 42, 0.03);
  }
  
  .nav-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 3px;
  }
  
  .hamburger {
    width: 16px;
    height: 12px;
    display: inline-block;
    background:
      linear-gradient(#364153, #364153) 0 0 / 100% 2px no-repeat,
      linear-gradient(#364153, #364153) 0 50% / 100% 2px no-repeat,
      linear-gradient(#364153, #364153) 0 100% / 100% 2px no-repeat;
  }
  
  @media (max-width: 980px) {
    .nav-toggle {
      display: inline-grid;
      place-items: center;
    }
    .header .brand {
      left: 62px;
    }
    .profile-wrap {
      right: 16px;
    }
  }
  
  @media (max-width: 520px) {
    /* On very small widths, absolute positioning can cause hit-target overlap
       (hamburger/profile “crossing”). Use a 3-column grid to guarantee separation. */
    .header .header-inner {
      display: grid;
      grid-template-columns: 46px 1fr 46px;
      align-items: center;
      justify-content: initial; /* grid handles spacing */
    }
  
    .nav-toggle {
      position: static;
      place-self: center start;
    }
  
    .header .brand {
      position: static;
      place-self: center;
      left: auto;
      top: auto;
    }
  
    .profile-wrap {
      position: static;
      place-self: center end;
      right: auto;
      top: auto;
    }
  
    .header .brand {
      width: 72px;
      height: 42px;
    }
    .header .logo {
      width: 72px;
      height: 42px;
    }
    .profile-btn {
      width: 40px;
    }
    .profile-wrap {
      width: 40px;
    }
    .profile {
      width: 40px;
      height: 33px;
    }
    .name {
      font-size: 12px;
    }
    .popover {
      width: 220px;
      right: -8px;
    }
}

/* App shell layout */
  .shell {
    min-height: 100vh;
  }
  
  .shell .body {
    padding-top: 82px; /* keep content below fixed header */
  }
  
  .shell .body .app-landing {
    padding-top: 0; /* tab bar sits right under the header */
  }
  
  .shell .body-inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  
  .shell .content {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  
  .shell .content.with-sidebar {
    margin-left: 205px; /* match sidebar width */
  }
  
  @media (max-width: 980px) {
    .shell .body-inner {
      flex-direction: column;
      align-items: stretch;
    }
    .shell .content {
      margin-left: 0;
      width: 100%;
    }
    .shell .content.with-sidebar {
      margin-left: 0;
    }
    .shell .backdrop {
      display: block;
    }
  }
  
  .shell .backdrop {
    display: none;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1100;
}

/* Sidebar */
  .sidebar {
    width: 205px;
    background: linear-gradient(#ffffff, #fbfbfb);
    padding: 0;
    box-shadow: none;
    border-right: 0.66px solid #E2E8F0;
    z-index: 10; /* below header */
  }
  
  /* Desktop fixed sidebar */
  .sidebar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }
  
  /* Mobile drawer sidebar (hidden by default) */
  .sidebar.drawer {
    position: fixed;
    top: 82px;
    left: 0;
    bottom: 0;
    transform: translateX(-110%);
    transition: transform 180ms ease;
    will-change: transform;
    z-index: 1200;
  }
  
  .sidebar.drawer.open {
    transform: translateX(0);
  }
  
  @media (max-width: 980px) {
    .sidebar.fixed {
      display: none;
    }
  }
  
  @media (min-width: 981px) {
    .sidebar.drawer {
      display: none;
    }
  }
  
  .study {
    position: absolute;
    top: 105px;
    left: 12px;
    width: 180px;
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 8px 12px;
    box-shadow: 0 2px 5px rgba(226, 232, 240, 0.5);
    overflow: hidden;
  }
  
  .study-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: none;
    flex-shrink: 0;
  }
  
  .study-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    overflow: hidden;
  }
  
  .study-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 500; /* medium */
    color: #90a1b9;
    line-height: 1;
  }
  
  .study-value {
    font-weight: 600; /* semibold */
    color: rgba(51, 65, 85, 0.95);
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
  }
  
  .sidebar .nav {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 180px; /* below study badge with gap (study ~105 + max 2-line height ~55 + 12px gap) */
    display: grid;
    gap: 10px;
  }
  
  /* Drawer offsets are relative to drawer top (82px). Keep the same visual spacing below study. */
  .sidebar.drawer .study {
    top: 23px; /* 105 - 82 */
  }
  
  .sidebar.drawer .nav {
    top: 98px; /* 23 + 2-line study height ~55 + 12px gap */
  }
  
  .sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10.62px;
    height: 33.39px;
    padding: 0 10px;
    text-align: left;
    cursor: pointer;
    background: transparent;
    color: #364153; /* default (unselected) */
  }
  
  .sidebar .nav-item:hover {
    background: rgba(15, 23, 42, 0.03);
  }
  
  .sidebar .nav-item.active {
    background: linear-gradient(90deg, #00BC7D 0%, #00BBA7 100%);
    color: #fff;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
  }
  
  .sidebar .icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: rgba(51, 65, 85, 0.95);
    flex: none;
  }
  
  .sidebar .icon-mask {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #364153; /* unselected default */
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
  }
  
  .sidebar .nav-item.active .icon-mask {
    background-color: #fff;
  }
  
  .sidebar .label {
    font-weight: 700;
    font-size: 10.62px;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   9. App landing (study explorer, data explorer, upload wizard)
   -------------------------------------------------------------------------- */
  .app-landing {
    background: #e0f2fe; /* light blue page background */
    min-height: calc(100vh - 82px);
    display: flex;
    flex-direction: column;
  }
  
  .app-landing .top-tabs-wrap {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    padding: 14px 24px 0;
  }
  
  .app-landing .top-tabs {
    width: min(980px, 100%);
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 0 0 12px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  
  .app-landing .top-tab {
    position: relative;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font-weight: 800;
    color: rgba(51, 65, 85, 0.76);
    cursor: pointer;
    border-radius: 12px;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  }
  
  .app-landing .top-tab:hover {
    background: rgba(15, 23, 42, 0.03);
    color: rgba(15, 23, 42, 0.90);
  }
  
  .app-landing .top-tab:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 4px;
    border-radius: 10px;
  }
  
  .app-landing .top-tab.active {
    color: #1f4d7a;
    background: rgba(15, 23, 42, 0.02);
  }
  
  .app-landing .top-tab.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -12px;
    height: 2px;
    background: linear-gradient(90deg, #00BC7D 0%, #00BBA7 100%);
    border-radius: 999px;
  }
  
  .app-landing .content {
    flex: 1;
    padding: 28px 24px 32px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  
  /* Study Explorer – enterprise layout */
  .app-landing .explorer-section {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    gap: 0;
  }
  
  .app-landing .explorer-section-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .app-landing .explorer-section-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #1e293b;
  }
  
  .app-landing .explorer-section-sub {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #64748b;
  }
  
  /* Upload – enterprise wizard */
  .app-landing .upload-view {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .app-landing .upload-card-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #1e293b;
  }
  
  .app-landing .upload-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: visible;
  }
  
  .app-landing .upload-card-inner {
    padding: 32px 36px 36px;
    overflow: visible;
  }
  
  .app-landing .upload-step-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
  }
  
  .app-landing .upload-prompt {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    line-height: 1.45;
  }
  
  .app-landing .upload-step-content {
    overflow: visible;
  }
  
  .app-landing .upload-step-content .field {
    margin-bottom: 24px;
    max-width: 360px;
    min-width: 0;
  }
  
  .app-landing .upload-step-content .field.field-date {
    min-width: 200px;
    max-width: 360px;
    overflow: visible;
  }
  
  .app-landing .upload-date-select {
    width: 100%;
    min-width: 200px;
  }
  
  .app-landing .upload-date-select .Select-control {
    min-height: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0 14px;
    padding-right: 36px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    overflow: visible;
  }
  
  .app-landing .upload-date-select .Select-control:hover {
    border-color: #cbd5e1;
  }
  
  .app-landing .upload-date-select.is-focused .Select-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }
  
  .app-landing .upload-date-select .Select-placeholder,
  .app-landing .upload-date-select .Select-value {
    line-height: 44px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    overflow: visible;
    text-overflow: clip;
  }
  
  .app-landing .upload-date-select .Select-value-label {
    overflow: visible;
    text-overflow: clip;
  }
  
  .app-landing .upload-date-select .Select-input {
    height: 44px;
    line-height: 44px;
  }
  
  .app-landing .upload-date-select .Select-input > input {
    line-height: 44px;
    font-size: 14px;
  }
  
  .app-landing .upload-date-select .Select-arrow-zone {
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    width: 28px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
  }
  
  .app-landing .upload-date-select .Select-arrow-zone .Select-arrow {
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    border-top-color: #64748b;
    vertical-align: middle;
  }
  
  .app-landing .upload-date-select .Select-menu-outer {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    margin-top: 4px;
  }
  
  .app-landing .upload-step-content .field-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
    display: block;
  }
  
  .app-landing .upload-radio {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .app-landing .upload-radio label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    line-height: 1.4;
  }
  
  .app-landing .upload-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
  }
  
  .app-landing .upload-btn-back {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  
  .app-landing .upload-btn-back:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }
  
  .app-landing .upload-btn-next,
  .app-landing .upload-btn-submit {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  }
  
  .app-landing .upload-btn-next:hover,
  .app-landing .upload-btn-submit:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
  }
  
  .app-landing .upload-btn-next:focus-visible,
  .app-landing .upload-btn-submit:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .upload-browse {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    margin-bottom: 0;
    max-width: 420px;
  }
  
  .app-landing .upload-browse:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
  }
  
  .app-landing .upload-browse-text {
    font-weight: 600;
    font-size: 14px;
    color: #2563eb;
  }
  
  .app-landing .upload-filename {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
  }
  
  /* Upload Progress Indicator */
  .app-landing .upload-progress-block {
    margin: 24px 0;
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }
  
  .app-landing .upload-progress-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .app-landing .progress-steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .app-landing .progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  
  .app-landing .progress-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  .app-landing .progress-step.active .progress-step-number {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .app-landing .progress-step.complete .progress-step-number {
    background: #22c55e;
    color: #fff;
  }
  
  .app-landing .progress-step.error .progress-step-number {
    background: #ef4444;
    color: #fff;
  }
  
  .app-landing .progress-step-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
  }
  
  .app-landing .progress-step.active .progress-step-label {
    color: #1e293b;
    font-weight: 600;
  }
  
  .app-landing .progress-step.complete .progress-step-label {
    color: #059669;
  }
  
  .app-landing .progress-step.error .progress-step-label {
    color: #dc2626;
  }
  
  .app-landing .upload-progress-message {
    text-align: center;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    min-height: 20px;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  
  
  .app-landing .study-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    width: min(980px, 100%);
  }
  
  .app-landing .study-tab {
    border: 0;
    background: #fff;
    padding: 14px 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
  }
  
  .app-landing .study-tab + .study-tab {
    border-left: 1px solid #E2E8F0;
  }
  
  .app-landing .study-tab:hover {
    background: rgba(15, 23, 42, 0.04);
  }
  
  .app-landing .study-tab:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: -3px;
  }
  
  .app-landing .study-tab.active {
    background: rgba(37, 99, 235, 0.10);
    color: rgba(31, 77, 122, 0.95);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.22);
  }
  
  .app-landing .study-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
  }

  .app-landing .study-toolbar-left,
  .app-landing .study-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .app-landing .study-toolbar-left {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .app-landing .study-pager {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .app-landing .study-pager-nav {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .app-landing .study-pager-bottom {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  
  .app-landing .study-view-toggle {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  
  .app-landing .study-view-toggle:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
  }

  .app-landing .study-view-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .app-landing .study-view-toggle:disabled:hover {
    background: #fff;
    border-color: #e2e8f0;
    color: #334155;
  }

  /* Study Explorer toolbar buttons: use the global .btn theme but keep them compact */
  .app-landing .study-toolbar-btn {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    color: #fff;
    background: var(--nav-active);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
  }

  .app-landing .study-toolbar-btn:hover {
    transform: none; /* avoid toolbar jitter */
    filter: brightness(0.95);
  }

  .app-landing .study-toolbar-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
  }

  .app-landing .study-toolbar-btn:disabled:hover {
    border-color: var(--border);
    box-shadow: none;
  }
  
  .app-landing .study-view-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .study-count-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .app-landing .study-count-wrap.pill {
    padding: 6px 10px;
  }
  
  .app-landing .study-count-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    white-space: nowrap;
  }
  
  .app-landing .study-count-test {
    min-width: 80px;
  }
  
  .app-landing .study-count-test .Select-control {
    min-height: 38px;
    min-width: 88px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border-color: #e2e8f0;
    overflow: visible;
  }
  
  .app-landing .study-count-test .Select-control:hover {
    border-color: #cbd5e1;
  }
  
  .app-landing .study-count-test .Select-value,
  .app-landing .study-count-test .Select-value-label {
    overflow: visible;
    text-overflow: clip;
    color: #334155;
  }
  
  /* Study table – enterprise data grid */
  .app-landing .study-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    table-layout: fixed;
  }
  
  .app-landing .study-table tbody td {
    padding: 0;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    overflow: visible;
  }
  
  .app-landing .study-table tr:last-child td {
    border-bottom: 0;
  }
  
  .app-landing .study-table-th {
    padding: 14px 20px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.3;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
  }
  
  .app-landing .study-table-row {
    transition: background 0.12s ease;
  }
  
  .app-landing .study-table-row:hover {
    background: #f8fafc;
  }
  
  .app-landing .study-table-row.active {
    background: rgba(52, 178, 127, 0.08);
  }
  
  .app-landing .study-table-row.active .study-table-cell {
    box-shadow: inset 3px 0 0 var(--nav-active);
  }
  
  .app-landing .study-table-cell {
    padding: 0;
    overflow: visible;
  }
  
  .app-landing .study-table-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.45;
    color: #334155;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    overflow: visible;
  }
  
  .app-landing .study-table-btn:hover {
    background: transparent;
    color: #1e293b;
  }
  
  .app-landing .study-table-row.active .study-table-btn {
    color: var(--text);
    font-weight: 700;
  }
  
  .app-landing .study-table-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .study-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
  }
  
  .app-landing .study-card {
    width: 100%;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    padding: 0;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  
  .app-landing .study-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  }
  
  .app-landing .study-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .study-card.active {
    background: rgba(52, 178, 127, 0.08);
    border-color: var(--nav-active);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  }
  
  .app-landing .study-card-inner {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .app-landing .study-card-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: #334155;
  }
  
  .app-landing .study-card.active .study-card-title {
    font-weight: 600;
    color: var(--text);
  }
  
  .app-landing .study-card-sub {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.4;
  }
  
  /* Study load modal – enterprise dialog */
  .app-landing .study-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: study-modal-fade-in 0.2s ease-out;
  }
  
  @keyframes study-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .app-landing .study-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .app-landing .study-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 20px 40px -8px rgba(15, 23, 42, 0.15);
    animation: study-modal-scale-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  @keyframes study-modal-scale-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
  }
  
  .app-landing .study-modal-inner {
    padding: 28px 32px 32px;
    position: relative;
  }
  
  .app-landing .study-modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
  }
  
  .app-landing .study-modal-close-btn:hover {
    background: #f1f5f9;
    color: #334155;
  }
  
  .app-landing .study-modal-close-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .study-modal-title {
    margin: 0 44px 24px 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #1e293b;
  }
  
  .app-landing .study-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .app-landing .study-modal-actions .field-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

/* Modal Data Date dropdown (#data-date) */
  #data-date .Select-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    height: 48px;
    min-width: 140px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 0 14px 0 14px;
    padding-right: 36px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
  }
  
  #data-date .Select-control:hover {
    border-color: rgba(15, 23, 42, 0.2);
  }
  
  #data-date.is-focused .Select-control {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  }
  
  #data-date .Select-placeholder,
  #data-date .Select-value {
    line-height: 48px;
    font-size: 15px;
    color: rgba(15, 23, 42, 0.9);
    overflow: visible;
    text-overflow: clip;
  }
  
  #data-date .Select-value-label {
    overflow: visible;
    text-overflow: clip;
  }
  
  #data-date .Select-input {
    height: 48px;
    line-height: 48px;
  }
  
  #data-date .Select-input > input {
    line-height: 48px;
    font-size: 15px;
  }
  
  /* Arrow zone: 5px from right border of control, fixed width, flex center the arrow */
  #data-date .Select-arrow-zone {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    width: 28px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
  }
  
  #data-date .Select-arrow-zone .Select-arrow {
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    border-top-color: rgba(51, 65, 85, 0.8);
    vertical-align: middle;
  }
  
  #data-date .Select-menu-outer {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    margin-top: 4px;
  }
  
  .app-landing .study-modal-actions .load {
    margin-top: 4px;
    margin-right: 0;
    height: 34px;
    padding: 0 16px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(90deg, #00BC7D 0%, #00BBA7 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  
  .app-landing .study-modal-actions .load:hover {
    background: linear-gradient(90deg, #00a86b 0%, #00a392 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
  }
  
  .app-landing .study-modal-actions .load:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  }
  
  .app-landing .study-modal-actions .load:focus-visible {
    outline: 3px solid rgba(0, 187, 167, 0.35);
    outline-offset: 4px;
  }
  
  .app-landing .banner {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(51, 65, 85, 0.85);
    width: min(980px, 100%);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  .app-landing .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #00bc7d;
  }
  
  .app-landing .banner-strong {
    color: rgba(15, 23, 42, 0.92);
    font-weight: 800;
  }
  
  .app-landing .empty {
    margin-top: 16px;
    padding: 20px 18px;
    border: 1px dashed rgba(226, 232, 240, 1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    width: min(980px, 100%);
  }
  
  .app-landing .empty-title {
    font-weight: 800;
    color: rgba(15, 23, 42, 0.88);
  }
  
  .app-landing .empty-sub {
    margin-top: 6px;
    font-size: 13px;
  }
  
  .app-landing .card {
    margin-top: 16px;
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    width: min(980px, 100%);
  }
  
  .app-landing .card-inner {
    padding: 18px;
  }
  
  .app-landing .hint {
    font-size: 12px;
    color: rgba(51, 65, 85, 0.75);
    margin-bottom: 10px;
  }
  
  .app-landing .row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .app-landing .field {
    display: grid;
    gap: 6px;
    width: 280px;
  }
  
  .app-landing .field-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(51, 65, 85, 0.85);
  }
  
  .app-landing .select {
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    padding: 0 34px 0 10px;
    background: #fff;
    color: rgba(15, 23, 42, 0.9);
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.55) 50%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.55) 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position:
      calc(100% - 16px) 14px,
      calc(100% - 11px) 14px,
      100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
  }
  
  .app-landing .select:focus {
    outline: none;
    border-color: rgba(0, 187, 167, 0.65);
    box-shadow: 0 0 0 4px rgba(0, 187, 167, 0.18);
  }
  
  /* Dash `dcc.Dropdown` — remove native .select triangle so only react-select arrow shows */
  .app-landing .dd-select.Select,
  .app-landing .dd-select.select {
    background-image: none;
    background-position: unset;
    background-size: unset;
    background-repeat: unset;
  }
  
  .app-landing .dd-select .Select-control {
    height: 34px;
    min-width: 100px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    box-shadow: none;
    overflow: visible;
  }
  
  .app-landing .dd-select.is-focused .Select-control {
    border-color: rgba(0, 187, 167, 0.65);
    box-shadow: 0 0 0 4px rgba(0, 187, 167, 0.18);
  }
  
  .app-landing .dd-select .Select-placeholder,
  .app-landing .dd-select .Select-value {
    line-height: 34px;
    overflow: visible;
    text-overflow: clip;
  }
  
  .app-landing .dd-select .Select-input {
    height: 34px;
  }
  
  .app-landing .dd-select .Select-input > input {
    line-height: 34px;
  }
  
  .app-landing .dd-select .Select-value-label {
    color: rgba(15, 23, 42, 0.9);
    overflow: visible;
    text-overflow: clip;
  }
  
  .app-landing .dd-select .Select-arrow-zone {
    padding-right: 10px;
  }
  
  .app-landing .dd-select .Select-menu-outer {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  }
  
  /* Upload wizard Data Date dropdown — !important overrides react-select inline/default styles */
  #upload-date-wrapper {
    width: 100% !important;
    min-width: 200px !important;
  }
  
  #upload-date-wrapper .Select-control {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    height: 44px !important;
    min-width: 200px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    padding: 0 14px !important;
    padding-right: 36px !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    overflow: visible !important;
  }
  
  #upload-date-wrapper .Select-control:hover {
    border-color: #cbd5e1 !important;
  }
  
  #upload-date-wrapper .Select.is-focused .Select-control {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  }
  
  #upload-date-wrapper .Select-placeholder,
  #upload-date-wrapper .Select-value {
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  
  #upload-date-wrapper .Select-value-label {
    overflow: visible !important;
    text-overflow: clip !important;
  }
  
  #upload-date-wrapper .Select-input {
    height: 44px !important;
    line-height: 44px !important;
  }
  
  #upload-date-wrapper .Select-input > input {
    line-height: 44px !important;
    font-size: 14px !important;
  }
  
  #upload-date-wrapper .Select-arrow-zone {
    position: absolute !important;
    right: 6px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
  }
  
  #upload-date-wrapper .Select-arrow-zone .Select-arrow {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 0 !important;
    border-top-color: #64748b !important;
    vertical-align: middle !important;
  }
  
  #upload-date-wrapper .Select-menu-outer {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important;
    margin-top: 4px !important;
  }
  
  .app-landing .load {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: #3b82f6;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
  }
  
  .app-landing .load:hover {
    background: #2563eb;
  }
  
  .app-landing .load:active {
    background: #1d4ed8;
  }
  
  .app-landing .load:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  /* Data Explorer – enterprise grid */
  .app-landing .data-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
  }
  
  .app-landing .data-grid .card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    width: auto;
    margin-top: 0;
  }
  
  .app-landing .objectives-inner {
    padding: 20px;
    display: grid;
    gap: 8px;
  }
  
  .app-landing .obj-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
  }
  
  .app-landing .obj-btn {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  
  .app-landing .obj-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
  }
  
  .app-landing .obj-btn.active {
    background: #f0f9ff;
    border-color: #3b82f6;
    color: #1e40af;
    font-weight: 600;
  }
  
  .app-landing .obj-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  .app-landing .details-inner {
    padding: 24px;
  }
  
  .app-landing .details-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #1e293b;
  }
  
  .app-landing .details-body {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #64748b;
  }
  
  .app-landing .details-hint {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.45;
  }
  
  @media (max-width: 680px) {
    .app-landing .content {
      padding: 14px 14px 0;
    }
    .app-landing .top-tabs-wrap {
      padding: 12px 14px 0;
    }
    .app-landing .top-tabs {
      gap: 12px;
      padding-bottom: 10px;
    }
    .app-landing .study-tabs {
      grid-template-columns: 1fr;
    }
    .app-landing .study-tab + .study-tab {
      border-left: 0;
      border-top: 1px solid #E2E8F0;
    }
    .app-landing .study-collection .study-card {
      min-width: 100%;
      max-width: 100%;
    }
    .app-landing .field {
      width: 100%;
    }
    .app-landing .data-grid {
      grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   10. Enrollment & placeholder pages
   -------------------------------------------------------------------------- */
  .enrollment-page .wrap {
    display: grid;
    gap: 16px;
    padding: 16px;
  }
  
  .enrollment-page .panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  }
  
  .enrollment-page .panel-inner {
    padding: 18px;
  }
  
  .enrollment-page .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }
  
  .enrollment-page .title {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
  }
  
  .enrollment-page .sub {
    font-size: 13px;
    margin-top: 2px;
  }
  
  .enrollment-page .date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.02);
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
  }
  
  .enrollment-page .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2fbf71;
  }
  
  .enrollment-page .kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  
  .enrollment-page .kpi {
    border-radius: 14px;
    padding: 14px;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 96px;
  }
  
  .enrollment-page .kpi::after {
    content: "";
    position: absolute;
    top: -24px;
    right: -24px;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }
  
  .enrollment-page .kpi-top {
    display: flex;
    justify-content: flex-start;
  }
  
  .enrollment-page .kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
  }
  
  .enrollment-page .kpi-value {
    margin-top: 10px;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  
  .enrollment-page .kpi-label {
    opacity: 0.9;
    font-weight: 800;
    font-size: 12px;
  }
  
  .enrollment-page .kpi.blue {
    background: linear-gradient(135deg, rgba(94, 171, 227, 0.95), rgba(66, 153, 225, 0.85));
  }
  .enrollment-page .kpi.navy {
    background: linear-gradient(135deg, rgba(32, 66, 98, 0.95), rgba(15, 23, 42, 0.85));
  }
  .enrollment-page .kpi.green {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.95), rgba(34, 197, 94, 0.85));
  }
  .enrollment-page .kpi.orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(245, 158, 11, 0.85));
  }
  
  .enrollment-page .bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
  }
  
  .enrollment-page .bar-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
  }
  
  .enrollment-page .val {
    font-weight: 900;
    color: rgba(15, 23, 42, 0.88);
  }
  
  .enrollment-page .track {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-top: 8px;
  }
  
  .enrollment-page .fill {
    height: 100%;
    border-radius: 999px;
  }
  
  .enrollment-page .section {
    margin: 0 0 10px;
    font-size: 18px;
    letter-spacing: -0.02em;
  }
  
  .enrollment-page .chart {
    position: relative;
    height: 240px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
  }
  
  .enrollment-page .grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .enrollment-page .line {
    border-right: 1px solid rgba(15, 23, 42, 0.05);
  }
  
  .enrollment-page .spark {
    position: absolute;
    inset: 28px 16px 16px 16px;
  }
  
  /* When the sparkline is an <img>, make it behave like the Vue <svg>. */
  .enrollment-page img.spark {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  @media (max-width: 1100px) {
    .enrollment-page .kpis {
      grid-template-columns: repeat(2, 1fr);
    }
    .enrollment-page .bars {
      grid-template-columns: 1fr;
    }
}

/* Placeholder page */
  .placeholder-page .wrap {
    padding: 16px;
  }
  
  .placeholder-page .panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  }
  
  .placeholder-page .panel-inner {
    padding: 18px 18px 16px;
  }
  
  .placeholder-page .title {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   11. Dashboard pages
   (Study dashboard, Adverse events, Efficacy, Patient profile, Labs)
   -------------------------------------------------------------------------- */

/* Dashboard base — typography & layout */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: #1a1a1a;
}

.main-container {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    color: #2c3e50;
}

/* Demo page: keep filters visible while scrolling */
.demo-filters-sticky {
    position: sticky;
    top: 12px;
    z-index: 50;
    backdrop-filter: blur(6px);
}

/* Demo page: floating expandable filters box */
.demo-filters-float {
    position: fixed;
    top: auto !important;
    bottom: 18px !important;
    right: 18px;
    width: 360px;
    max-width: calc(100vw - 36px);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: 2500;
}

.demo-filters-float:not(.open) {
    /* collapsed: header-only pill look */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.demo-filters-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px;
    border: none;
    background: linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%);
    color: #ffffff;
    text-align: left;
    border-radius: 18px;
}

.demo-filters-float.open .demo-filters-toggle {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.demo-filters-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-filters-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    font-size: 18px;
}

.demo-filters-toggle:focus {
    outline: none;
}

.demo-filters-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-filters-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;
}

.demo-filters-subtitle {
    font-size: 12px;
    opacity: 0.95;
}

.demo-filters-caret {
    font-size: 18px;
    opacity: 0.95;
    margin-left: 12px;
    transition: transform 160ms ease;
}

.demo-filters-caret.open {
    transform: rotate(180deg);
}

.demo-filters-body {
    background: #ffffff;
    padding: 16px 16px 18px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: none;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Fit within viewport when expanded */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.demo-filters-section-title {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.demo-filter-row {
    margin-bottom: 12px;
}

.demo-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #334155;
    text-transform: uppercase;
    margin-bottom: 6px;
}

@media (max-width: 576px) {
    .demo-filters-float {
        top: auto !important;
        bottom: 10px !important;
        right: 10px;
        width: auto;
    }
}
/* Cards */
.custom-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    /* Base z-index */
}

/* Ensure cards with dropdowns that are being interacted with appear on top */
.custom-card:focus-within {
    z-index: 10;
}

/* Specifically for the study selector card which is at the top */
.study-selector-card {
    z-index: 5;
}

.custom-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card-header-custom {
    background: #ffffff;
    padding: 1.5rem;
    border-bottom: 1px solid #edf2f7;
    border-radius: 16px 16px 0 0;
    /* Keep header clipped to card radius */
}

.card-title-custom {
    margin: 0;
    font-size: 1.25rem;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-custom {
    padding: 1.5rem;
}

/* Dashboard dropdowns */
.main-container .Select-control {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px !important;
    box-shadow: none !important;
    background-color: #f8fafc !important;
}

.main-container .Select-control:hover {
    border-color: #cbd5e0 !important;
}

.main-container .Select-menu-outer {
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 4px !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
}

.main-container .dash-dropdown .Select-value-label {
    color: #4a5568 !important;
}

/* Metric Items */
.metric-container {
    padding: 10px;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #edf2f7;
    height: 100%;
}

.metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 4px;
    font-weight: 600;
}

.metric-value {
    font-size: 1.0rem;
    font-weight: 500;
    color: #2d3748;
}

.metric-value.highlight-red {
    color: #e53e3e;
    font-weight: 700;
}

.metric-value.highlight-green {
    color: #38a169;
    font-weight: 700;
}

/* Graph Container */
.graph-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Utility */
.mb-custom {
    margin-bottom: 1.5rem;
}

.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 2rem 0;
}

/* Patient profile — metric cards */
.patient-metric-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.patient-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.patient-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 20px;
}

.patient-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8c9097;
    margin-bottom: 8px;
}

.patient-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.patient-card-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}

/* Patient profile — color themes */
/* Blue - Patient ID */
.theme-blue .patient-icon-circle {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.theme-blue .patient-card-decoration {
    background-color: #3b82f6;
}

/* Purple - Age */
.theme-purple .patient-icon-circle {
    background-color: #8b5cf6;
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.theme-purple .patient-card-decoration {
    background-color: #8b5cf6;
}

/* Pink - Sex */
.theme-pink .patient-icon-circle {
    background-color: #ec4899;
    color: white;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.theme-pink .patient-card-decoration {
    background-color: #ec4899;
}

/* Orange - Race */
.theme-orange .patient-icon-circle {
    background-color: #f97316;
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.theme-orange .patient-card-decoration {
    background-color: #f97316;
}


/* Green - Consent */
.theme-green .patient-icon-circle {
    background-color: #10b981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.theme-green .patient-card-decoration {
    background-color: #10b981;
}

/* Teal - Completion */
.theme-teal .patient-icon-circle {
    background-color: #06b6d4;
    color: white;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.theme-teal .patient-card-decoration {
    background-color: #06b6d4;
}

/* New Accents for Adverse Events dashboard */
.theme-crimson .patient-icon-circle {
    background-color: #e74c3c;
    color: white;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.theme-crimson .patient-card-decoration {
    background-color: #e74c3c;
}

.theme-navy .patient-icon-circle {
    background-color: #1f2937;
    color: white;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3);
}

.theme-navy .patient-card-decoration {
    background-color: #1f2937;
}

.theme-amber .patient-icon-circle {
    background-color: #f59e0b;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.theme-amber .patient-card-decoration {
    background-color: #f59e0b;
}

.theme-tealbright .patient-icon-circle {
    background-color: #10b981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.theme-tealbright .patient-card-decoration {
    background-color: #10b981;
}

.theme-violet .patient-icon-circle {
    background-color: #7c3aed;
    color: white;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.theme-violet .patient-card-decoration {
    background-color: #7c3aed;
}

.theme-cyan .patient-icon-circle {
    background-color: #06b6d4;
    color: white;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.theme-cyan .patient-card-decoration {
    background-color: #06b6d4;
}

/* Patient profile — header */
.patient-header-title {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0;
}

.patient-status-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    margin-right: 8px;
}

.patient-status-text {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* Patient profile — medical history */
.medical-history-card .card-body-custom {
    padding: 1.5rem;
}

.medical-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.history-item-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.history-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.history-item-date {
    font-size: 0.9rem;
    color: #6b7280;
}

.history-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid transparent;
}

.history-pill.severity-mild {
    color: #0f9b6c;
    background: #ecfdf3;
    border-color: #a7f3d0;
}

.history-pill.severity-moderate {
    color: #c27803;
    background: #fff7ed;
    border-color: #fcd9bd;
}

.history-pill.severity-severe {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecdd3;
}

.history-pill.severity-unknown {
    color: #4b5563;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.medical-history-empty {
    padding: 4px 0;
    font-weight: 500;
}

/* Adverse events — floating filter */
.adverse-events-page .floating-filter-container {
    position: fixed;
    top: 140px;
    right: 48px;
    z-index: 1200;
}

.adverse-events-page .floating-filter-button {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 999px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.adverse-events-page .floating-filter-button:hover,
.adverse-events-page .floating-filter-button:focus {
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.3);
    transform: translateY(-2px);
}

.adverse-events-page .floating-filter-offcanvas.offcanvas {
    --bs-offcanvas-width: 380px;
    background: transparent;
    border: none;
}

.adverse-events-page .floating-filter-offcanvas .offcanvas-body {
    padding: 0;
    background: transparent;
}

.adverse-events-page .floating-filter-card {
    margin-bottom: 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.adverse-events-page .floating-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border: none;
}

.adverse-events-page .floating-filter-close-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #475569 !important;
}

.adverse-events-page .floating-filter-body {
    padding-top: 1rem;
}

@media (max-width: 1199.98px) {
    .adverse-events-page .floating-filter-container {
        top: 100px;
        right: 32px;
    }
}

@media (max-width: 767.98px) {
    .adverse-events-page .floating-filter-container {
        top: 80px;
        right: 16px;
    }

    .adverse-events-page .floating-filter-button {
        padding: 0.6rem 1.2rem;
    }

    .adverse-events-page .floating-filter-offcanvas.offcanvas {
        --bs-offcanvas-width: min(94vw, 360px);
    }
}

/* Study dashboard */
/* Colorful Top Stats Cards */
.stat-card {
    border-radius: 16px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card.blue {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.stat-card.orange {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.stat-card.green {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.stat-card.red {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.stat-card.purple {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.stat-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    opacity: 0.8;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* Rate/Progress Section below cards */
.rate-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rate-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 600;
}

.rate-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rate-change {
    font-size: 0.875rem;
    font-weight: 600;
}

.rate-change.positive {
    color: #10b981;
}

.rate-change.negative {
    color: #ef4444;
}

.custom-progress {
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-top: auto;
}

.custom-progress-bar {
    height: 100%;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   12. Admin page & modals (world-class layout, tables, badges, alerts)
   -------------------------------------------------------------------------- */
.admin-page {
    padding: 32px 24px 48px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 82px);
    background: transparent;
}

/* Page hero */
.admin-hero {
    margin-bottom: 32px;
    padding: 0 0 24px;
    border-bottom: 1px solid #e2e8f0;
}

.admin-hero-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #0f172a;
}

.admin-hero-sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #64748b;
    max-width: 560px;
}

/* Section cards */
.admin-section-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.admin-section-card:last-of-type {
    margin-bottom: 0;
}

.admin-section-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.admin-section-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #1e293b;
}

.admin-section-sub {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #64748b;
}

/* Admin section header actions (e.g., Activity Logs toolbar) */
.admin-page .admin-section-header--with-actions .admin-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.admin-page .admin-section-header--with-actions .admin-section-title {
  margin: 0;
}

.admin-page .admin-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-page .activity-clear-btn {
  padding: 8px 12px;
  border-radius: 12px;
}

.admin-section-body {
    padding: 24px;
}

.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-form-row:last-child {
    margin-bottom: 0;
}

.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.admin-form-group .label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #475569;
}

/* Status alerts */
.admin-page #admin-status-message {
    margin-bottom: 16px;
}

.admin-page .alert {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-page .alert.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.admin-page .alert.danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Badges for registration status & role */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.admin-badge--pending {
    background: #fef3c7;
    color: #b45309;
}

.admin-badge--approved {
    background: #d1fae5;
    color: #065f46;
}

.admin-badge--denied {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-badge--in_review {
    background: #e0e7ff;
    color: #3730a3;
}

.admin-badge--role {
    background: #f1f5f9;
    color: #475569;
}

.admin-badge--sponsor {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #e2e8f0;
}

/* Tables */
.admin-page .card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.admin-page .study-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
}

.admin-page .study-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
}

/* Users table: explicit column widths */
.admin-page .study-table.users-table thead th:first-child { width: 5%; }
.admin-page .study-table.users-table thead th:nth-child(2) { width: 14%; }
.admin-page .study-table.users-table thead th:nth-child(3) { width: 22%; }
.admin-page .study-table.users-table thead th:nth-child(4),
.admin-page .study-table.users-table thead th:nth-child(5),
.admin-page .study-table.users-table thead th:nth-child(6) { width: 6%; }
.admin-page .study-table.users-table thead th:nth-child(7) { width: 14%; }
.admin-page .study-table.users-table thead th:nth-child(8) { width: 9%; }
.admin-page .study-table.users-table thead th:nth-child(9) { width: 18%; }

/* Activity log tables: stable, readable column sizing + wrapping */
.admin-page .study-table.activity-log-table {
  width: 100%;
  table-layout: fixed;
}

/* Horizontal scroll container for activity logs (Admin + Profile) */
.admin-page .activity-log-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.admin-page .activity-log-scroll .study-table.activity-log-table {
  width: 100%;
}

.admin-page .study-table.activity-log-table--admin {
  min-width: 1120px;
}

.admin-page.profile-page .study-table.activity-log-table--profile {
  min-width: 980px;
}

.admin-page .study-table.activity-log-table thead th,
.admin-page .study-table.activity-log-table tbody td {
  min-width: 0;
}

.admin-page .study-table.activity-log-table thead th {
  padding: 10px 14px;
}

.admin-page .study-table.activity-log-table tbody td {
  padding: 10px 14px;
  vertical-align: top;
}

/* Add subtle visual separation between columns */
.admin-page .study-table.activity-log-table thead th,
.admin-page .study-table.activity-log-table tbody td {
  border-right: 1px solid #f1f5f9;
}

.admin-page .study-table.activity-log-table thead th:last-child,
.admin-page .study-table.activity-log-table tbody td:last-child {
  border-right: 0;
}

/* Never ellipsize activity-log cells; prefer multi-line wrapping */
.admin-page .study-table.activity-log-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-page .study-table.activity-log-table tbody td > * {
  min-width: 0;
}

.admin-page .study-table.activity-log-table tbody tr:hover {
  background: #f8fafc;
}

.admin-page .study-table.activity-log-table td.activity-log-cell--role {
  white-space: nowrap;
}

.admin-page .study-table.activity-log-table td.activity-log-cell--access {
  padding-top: 6px;
  padding-bottom: 6px;
}

.admin-page .activity-access {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.25;
}

.admin-page .activity-access-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-page .activity-access-key {
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
}

.admin-page .activity-access-val {
  color: #334155;
  font-weight: 600;
}

/* Admin activity logs (8 columns): When, Event, User, Company, IP, Device, Role, Access */
.admin-page .study-table.activity-log-table--admin thead th:nth-child(1) { width: 12%; min-width: 140px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(2) { width: 16%; min-width: 140px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(3) { width: 15%; min-width: 140px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(4) { width: 13%; min-width: 140px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(5) { width: 9%;  min-width: 110px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(6) { width: 13%; min-width: 160px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(7) { width: 10%; min-width: 140px; }
.admin-page .study-table.activity-log-table--admin thead th:nth-child(8) { width: 12%; min-width: 150px; }

/* Profile activity logs (7 columns): When, Event, User, IP, Device, Role, Access */
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(1) { width: 14%; min-width: 140px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(2) { width: 20%; min-width: 160px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(3) { width: 18%; min-width: 150px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(4) { width: 10%; min-width: 110px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(5) { width: 16%; min-width: 180px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(6) { width: 12%; min-width: 140px; }
.admin-page.profile-page .study-table.activity-log-table--profile thead th:nth-child(7) { width: 10%; min-width: 150px; }

/* Optional: keep timestamps and IPs on one line */
.admin-page .study-table.activity-log-table--admin tbody td:nth-child(1),
.admin-page .study-table.activity-log-table--admin tbody td:nth-child(5),
.admin-page.profile-page .study-table.activity-log-table--profile tbody td:nth-child(1),
.admin-page.profile-page .study-table.activity-log-table--profile tbody td:nth-child(4) {
  white-space: nowrap;
}

/* Pager (match studies pager UX, but for admin/profile pages) */
.admin-page .study-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-page .study-pager-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-page .study-pager-bottom {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Match the Studies pager button colors on Admin/Profile pages */
.admin-page .btn.study-toolbar-btn {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  color: #fff;
  background: var(--nav-active);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

.admin-page .btn.study-toolbar-btn:hover {
  transform: none;
  filter: brightness(0.95);
}

.admin-page .btn.study-toolbar-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.admin-page .btn.study-toolbar-btn:disabled:hover {
  border-color: var(--border);
  box-shadow: none;
}

.admin-page .study-table thead th {
    padding: 6px 8px 5px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.admin-page .study-table tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    line-height: 1.3;
}

.admin-page .study-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.admin-page .study-table tbody tr:hover {
    background: #f1f5f9;
}

.admin-page .study-table tbody tr:nth-child(even):hover {
    background: #f1f5f9;
}

.admin-page .study-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-page .admin-user-table-wrapper {
    width: 100%;
    overflow: visible;
}

.admin-page .admin-section-body {
    overflow: visible;
}

.admin-page .study-table.users-table tbody td:last-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

/* Company registry table: 4 columns, proper widths and spacing */
.admin-page .study-table.registry-table {
    table-layout: fixed;
}

.admin-page .study-table.registry-table thead th:nth-child(1) { width: 22%; min-width: 140px; }
.admin-page .study-table.registry-table thead th:nth-child(2) { width: 48%; min-width: 200px; }
.admin-page .study-table.registry-table thead th:nth-child(3) { width: 12%; min-width: 90px; }
.admin-page .study-table.registry-table thead th:nth-child(4) { width: 18%; min-width: 140px; }

.admin-page .study-table.registry-table thead th {
    padding: 12px 16px;
    font-size: 11px;
    white-space: nowrap;
}

.admin-page .study-table.registry-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

.admin-page .study-table.registry-table .registry-cell-sponsor {
    font-weight: 600;
    color: #1e293b;
}

.admin-page .study-table.registry-table .registry-cell-studies {
    min-width: 0;
    white-space: normal;
}

.admin-page .study-table.registry-table .registry-cell-studies .registry-studies-list {
  max-height: 96px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.admin-page .study-table.registry-table .registry-cell-studies .registry-study-item {
    margin-bottom: 6px;
}

.admin-page .study-table.registry-table .registry-cell-studies .registry-study-item:last-child {
    margin-bottom: 0;
}

.admin-page .study-table.registry-table .registry-cell-manage,
.admin-page .study-table.registry-table .registry-cell-actions {
    white-space: nowrap;
  text-align: right;
}

.admin-page .study-table.registry-table .registry-cell-manage .btn,
.admin-page .study-table.registry-table .registry-cell-actions .btn {
    margin: 0;
}

/* Add breathing room between Manage and Actions columns */
.admin-page .study-table.registry-table .registry-cell-manage {
  padding-right: 10px;
}

.admin-page .study-table.registry-table .registry-cell-actions {
  padding-left: 10px;
}

.admin-page .admin-table-email {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-page .admin-actions-row {
    gap: 6px;
}

.admin-page .admin-actions-dropdown {
    min-width: 100px;
}

.admin-page .admin-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.admin-page .admin-actions--compact {
    flex-direction: row;
    gap: 6px;
    flex-wrap: nowrap;
}

.admin-page .btn.success {
    background: var(--success, #22c55e);
    border-color: var(--success, #22c55e);
    color: white;
}

/* ==========================================================================
   Profile page — World-class UI/UX
   ========================================================================== */

/* Page container and vertical rhythm */
.profile-page {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 48px;
}

/* Hero: compact, with accent bar */
.profile-page .profile-hero {
  position: relative;
  margin-bottom: 28px;
  padding-left: 20px;
  border-left: 4px solid var(--primary, #2563eb);
}

.profile-page .profile-hero-accent {
  display: none;
}

.profile-page .profile-hero-title {
  margin: 0 0 6px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #0f172a;
}

.profile-page .profile-hero-sub {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #64748b;
  max-width: 42ch;
}

/* Status alerts */
.profile-page .profile-status-wrap {
  margin-bottom: 20px;
}

.profile-page .profile-status-wrap .alert {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-page .profile-status-wrap .alert.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.profile-page .profile-status-wrap .alert.danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* Inline alerts inside profile modals (e.g., admin transfer validation)
   Keep these consistent with profile status alerts, since the top-of-page
   banner is hidden behind the modal overlay. */
.admin-modal #profile-company-transfer-admin-inline-message .alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-modal #profile-company-transfer-admin-inline-message .alert.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.admin-modal #profile-company-transfer-admin-inline-message .alert.danger {
  background: #fef2f2;
  border: 1px solid var(--danger);
  border-left-width: 5px;
  color: #b91c1c;
}

/* Make danger alerts read clearly as errors inside modals */
.admin-modal #profile-company-transfer-admin-inline-message .alert.danger::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
  margin-top: 1px;
}

.admin-modal #profile-company-transfer-admin-inline-message .alert.danger {
  font-weight: 600;
}

/* Profile card (avatar + identity) */
.profile-page .profile-card-wrap {
  margin-bottom: 32px;
}

.profile-page .profile-card.profile-header-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.profile-page .profile-header-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.profile-page .profile-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profile-page .profile-header-name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.profile-page .profile-header-email {
  margin: 0;
  font-size: 0.9375rem;
  color: #64748b;
}

.profile-page .profile-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.profile-page .profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.profile-page .profile-badge-role {
  background: #f1f5f9;
  color: #475569;
}

.profile-page .profile-badge-company {
  background: #dbeafe;
  color: #1e40af;
}

/* Content grid: two columns on large screens */
.profile-page .profile-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.profile-page .profile-content-grid > * {
  min-width: 0;
}

.profile-page .profile-section-card--full {
  grid-column: 1 / -1;
}

/* Activity Log: header actions */
.profile-page .profile-section-head--with-actions .profile-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-page .profile-section-head--with-actions .profile-section-title {
  margin: 0;
}

.profile-page .activity-clear-btn {
  padding: 8px 12px;
  border-radius: 12px;
}

.activity-clear-error {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

@media (max-width: 768px) {
  .profile-page .profile-content-grid {
    grid-template-columns: 1fr;
  }
}

.profile-page .profile-main-col,
.profile-page .profile-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-page .profile-side-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section cards */
.profile-page .profile-section-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.profile-page .profile-section-head {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.profile-page .profile-section-title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1e293b;
  line-height: 1.3;
}

.profile-page .profile-section-desc {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #64748b;
}

.profile-page .profile-section-body {
  padding: 24px;
}

/* Account meta list (definition list) */
.profile-page .profile-meta-list {
  margin: 0;
  display: grid;
  gap: 2px 24px;
  grid-template-columns: minmax(140px, 180px) 1fr;
  max-width: 100%;
}

.profile-page .profile-meta-row {
  display: contents;
}

.profile-page .profile-meta-row dt {
  margin: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #64748b;
  padding: 6px 0;
}

.profile-page .profile-meta-row dd {
  margin: 0;
  font-size: 0.9375rem;
  color: #1e293b;
  padding: 6px 0;
  overflow-wrap: anywhere;
}

/* Studies: chips + empty state */
.profile-page .profile-studies-body {
  min-height: 44px;
}

.profile-page .profile-studies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-page .profile-study-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
  border: 1px solid #e2e8f0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-page .profile-study-chip:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.profile-page .profile-empty-state,
.profile-page .profile-loading-state {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}

/* Edit profile form */
.profile-page .profile-edit-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-page .profile-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-page .profile-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
}

.profile-page .profile-input {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.35;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-page .profile-input::placeholder {
  color: #94a3b8;
}

.profile-page .profile-input:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Buttons */
.profile-page .profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  font-family: inherit;
}

.profile-page .profile-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.profile-page .profile-btn-primary {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}

.profile-page .profile-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.profile-page .profile-btn-primary:active {
  transform: scale(0.98);
}

/* Security CTA */
.profile-page .profile-security-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-page .profile-security-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.profile-page .profile-security-cta {
  width: fit-content;
}

@media (max-width: 480px) {
  .profile-page .profile-security-cta {
    width: 100%;
  }
}

/* Company management block (in side column) */
.profile-page .profile-company-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-page .profile-company-name {
  font-weight: 600;
  font-size: 1rem;
  color: #1e293b;
}

/* Modals (keep existing behavior) */
.profile-page .profile-manage-note {
  color: #64748b;
  font-size: 0.8125rem;
}

.profile-page .profile-company-studies-in-modal {
  max-height: 120px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.profile-page .profile-company-manage-modal .modal-dialog {
  max-width: 640px;
}

.profile-page .link {
  color: var(--primary, #2563eb);
  text-decoration: underline;
}

.profile-page .link:hover {
  color: #1d4ed8;
}

.admin-page .btn.success:hover {
    filter: brightness(1.05);
}

.admin-page .admin-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-page .admin-actions-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-right: 2px;
}

.admin-page .admin-actions .btn {
    white-space: nowrap;
}

.admin-page .admin-actions--compact .btn {
    padding: 5px 10px;
    font-size: 12px;
}

.admin-page .admin-actions-dropdown {
    min-width: 120px;
    font-size: 13px;
}

.admin-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-page .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.30);
}

.admin-page .btn.primary {
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.admin-page .btn.primary:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.admin-page .btn.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: white;
  filter: none;
}

.admin-page .btn.danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  filter: brightness(0.95);
}

.admin-page .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Empty state */
.admin-empty {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.admin-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

/* Admin modals — centered, clear hierarchy */
.admin-modal,
.admin-modal.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.75rem;
}

.admin-modal .modal-dialog {
    margin: auto;
    max-width: 420px;
    width: 100%;
}

.admin-modal.admin-manage-modal .modal-dialog {
    max-width: 520px;
}

/* User-manage modal benefits from extra width (lots of controls). */
.admin-modal.admin-user-manage-modal .modal-dialog {
  max-width: 760px;
}

/* Company-manage modal has similar density; match user-manage width. */
.admin-modal.admin-company-manage-modal .modal-dialog {
  max-width: 760px;
}

@media (max-width: 720px) {
  .admin-modal.admin-user-manage-modal .modal-dialog {
    max-width: 520px;
  }

  .admin-modal.admin-company-manage-modal .modal-dialog {
    max-width: 520px;
  }
}

.admin-manage-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}

.admin-modal .modal-content {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 24px 48px -12px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.admin-modal .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.admin-modal .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #0f172a;
}

.admin-modal .modal-body {
    padding: 20px 24px;
    background: #fff;
}

/* Manage modals can be tall (many sections). Keep header/footer fixed and
   make the body scroll within the viewport. */
.admin-modal.admin-manage-modal .modal-body {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-modal .modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    gap: 12px;
}

.admin-modal .stack {
    display: grid;
    gap: 16px;
}

.admin-modal .field {
    display: grid;
    gap: 8px;
}

.admin-modal .label {
    font-size: 13px;
    color: #475569;
    font-weight: 600;
}

.admin-modal .input {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    outline: none;
    font-size: 14px;
    line-height: 1.4;
    height: 42px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-modal .input:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-modal .muted {
    color: var(--muted);
    font-size: 12px;
}

.admin-modal .btn {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.admin-modal .btn.primary {
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

.admin-modal .btn.primary:hover {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

/* Assign studies modal */
.admin-modal .assign-studies-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 48px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* In the user-manage modal we have more horizontal space, so allow a taller
   list viewport before scrolling to reduce friction. */
.admin-modal.admin-user-manage-modal .assign-studies-list {
  max-height: 340px;
}

.admin-modal.admin-user-manage-modal .assign-study-dropdown {
  min-width: 220px;
}

.admin-modal .assign-study-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* Profile → Manage company: member rows should have a header line and a single
   horizontal action bar underneath (never wraps; scrolls horizontally if needed). */
.admin-modal .assign-study-row.profile-company-member-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.admin-modal .profile-company-member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-modal .profile-company-member-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}

/* Buttons: never clip text; allow wrap in member rows */
.admin-modal .btn,
.admin-modal .assign-study-row .btn,
.admin-modal .assign-study-row button,
.profile-page .profile-btn,
.profile-page .btn,
.admin-page .btn {
    white-space: nowrap;
    overflow: visible;
    min-width: max-content;
    flex-shrink: 0;
}

.admin-modal .assign-study-code {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.admin-modal .assign-study-row .assign-study-code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-modal .assign-study-row .assign-study-dropdown {
  flex: 0 0 140px;
  min-width: 140px;
}

.admin-modal.admin-user-manage-modal .assign-study-row .assign-study-dropdown {
  flex-basis: 220px;
}

.admin-modal .assign-study-dropdown {
    flex: 1;
    min-width: 180px;
}

.admin-modal .assign-study-dropdown .Select-control {
    border-radius: 10px;
    border-color: #e2e8f0;
}

.assign-studies-modal .modal-dialog {
    max-width: 500px;
}

/* Danger modal (delete confirmations) */
.admin-modal .modal-header.border-danger {
    border-bottom-color: #fecaca;
    background: #fef2f2;
}

.admin-modal .modal-header.border-danger .modal-title {
    color: #b91c1c;
}

/* --------------------------------------------------------------------------
   13. Adverse Events Demographics Table (Baseline Characteristics) - Figma-like styling
   -------------------------------------------------------------------------- */
#adverse-events-demographics-table.dash-table-container .dash-spreadsheet-container {
    border-radius: 12px;
    overflow: hidden;
}

#adverse-events-demographics-table .dash-spreadsheet-menu {
    padding: 8px 0 10px 0;
}

#adverse-events-demographics-table .dash-spreadsheet-menu button,
#adverse-events-demographics-table .dash-spreadsheet-menu .dropdown > button {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#adverse-events-demographics-table .dash-spreadsheet-menu button:hover,
#adverse-events-demographics-table .dash-spreadsheet-menu .dropdown > button:hover {
    background: #f8fafc !important;
}

#adverse-events-demographics-table .dash-filter input {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
}

#adverse-events-demographics-table .dash-spreadsheet tr:hover td {
    background-color: #f8fafc !important;
}


/* Demo Efficacy Evaluable Set table */
#demo-efficacy-evaluable-table.dash-table-container .dash-spreadsheet-container {
    border-radius: 12px;
    overflow: hidden;
}

#demo-efficacy-evaluable-table .dash-spreadsheet-menu {
    padding: 8px 0 10px 0;
}

#demo-efficacy-evaluable-table .dash-spreadsheet-menu button,
#demo-efficacy-evaluable-table .dash-spreadsheet-menu .dropdown > button {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#demo-efficacy-evaluable-table .dash-spreadsheet-menu button:hover,
#demo-efficacy-evaluable-table .dash-spreadsheet-menu .dropdown > button:hover {
    background: #f8fafc !important;
}

#demo-efficacy-evaluable-table .dash-spreadsheet tr:hover td {
    background-color: #f8fafc !important;
}
/* --------------------------------------------------------------------------
   14. Adverse Events Dashboard Specific Styles
   -------------------------------------------------------------------------- */

/* Graph Containers */
.ae-graph-container {
    height: 500px;
}

.ae-graph-controls {
    padding: 0 15px 10px 15px;
}

/* Table Components */
.ae-table-info {
    padding: 0 10px;
}

.ae-page-size-dropdown {
    min-width: 80px;
}

/* Dashboard Display States */
.ae-content-hidden {
    display: none;
}

.ae-content-visible {
    display: block;
}

.dash-datepicker,
.dash-datepicker .SingleDatePicker,
.dash-datepicker .SingleDatePickerInput,
.dash-datepicker .DateInput {
  width: 100% !important;
  display: block !important;
  min-width: 160px !important;
  max-width: 180px !important;
}

.dash-datepicker .DateInput_input {
  font-size: 20px !important;
  padding: 8px 12px !important;
  width: 100% !important;
}