/* Fluid scaling — UI grows proportionally on large monitors.
   Base is 14px (set in bootstrap5_overrides.css html rule).
   Add these breakpoints here so they apply to both BS2 and BS5 lanes. */
@media (min-width: 1536px) { :root { font-size: 15px; } }   /* +7%  */
@media (min-width: 1920px) { :root { font-size: 16px; } }   /* +14% */
@media (min-width: 2560px) { :root { font-size: 17px; } }   /* +21% */

/* ── CSS Design Tokens (master reference — see design_system.md §24) ── */
:root {
  /* ── Brand ── */
  --color-brand-900:   #020887;
  --color-brand-700:   #334195;
  --color-brand-500:   #647aa3;
  --color-brand-300:   #95b2b0;
  --color-brand-100:   #E7ECEF;

  /* ── Page surfaces ── */
  --color-page-bg:     #f8fafc;
  --color-surface:     #ffffff;
  --color-surface-alt: #f4f6f9;

  /* ── Text ── */
  --color-text-primary:    #111827;
  --color-text-secondary:  #4b5563;
  --color-text-muted:      #9ca3af;
  --color-text-link:       #334195;
  --color-text-link-hover: #020887;

  /* ── Borders & dividers ── */
  --color-border:        #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-divider:       #f3f4f6;

  /* ── Trial card ── */
  --color-trial-card-header-bg:   #c5d3e8;
  --color-trial-card-title-bg:    #3d5a8a;
  --color-trial-card-title-text:  #ffffff;

  /* ── Navigation ── */
  --color-header-bg:        #ffffff;
  --color-header-border:    #e5e7eb;
  --color-subnav-bg:        #c5d3e8;
  --color-subnav-border:    #b0c0d8;
  --color-subnav-link:      #2c3e6b;
  --color-subnav-active:    #020887;
  --color-subnav-active-bg: #a8bcd4;

  /* ── Buttons ── */
  --color-btn-primary-bg:    #334195;
  --color-btn-primary-hover: #020887;
  --color-btn-primary-text:  #ffffff;
  --color-btn-outline-border:#cbd5e1;
  --color-btn-outline-text:  #334195;
  --color-btn-outline-hover: #E7ECEF;
  --color-btn-danger-bg:     #dc2626;
  --color-btn-danger-hover:  #b91c1c;
  --color-btn-danger-text:   #ffffff;

  /* ── Forms ── */
  --color-input-bg:           #ffffff;
  --color-input-border:       #d1d5db;
  --color-input-border-focus: #020887;
  --color-input-ring:         rgba(2, 8, 135, 0.15);
  --color-input-text:         #111827;
  --color-input-placeholder:  #9ca3af;
  --color-input-disabled-bg:  #f9fafb;
  --color-label:              #374151;
  --color-required:           #dc2626;

  /* ── Trial status ── */
  --color-status-approved-bg:      #dcfce7;
  --color-status-approved-text:    #166534;
  --color-status-approved-border:  #bbf7d0;
  --color-status-pending-bg:       #fef9c3;
  --color-status-pending-text:     #854d0e;
  --color-status-pending-border:   #fef08a;
  --color-status-unapproved-bg:    #f1f5f9;
  --color-status-unapproved-text:  #475569;
  --color-status-unapproved-border:#cbd5e1;
  --color-status-draft-bg:         #fee2e2;
  --color-status-draft-text:       #991b1b;
  --color-status-draft-border:     #fecaca;
  --color-status-reviewing-bg:     #dbeafe;
  --color-status-reviewing-text:   #1e40af;
  --color-status-reviewing-border: #bfdbfe;
  --color-status-reviewed-bg:      #ffedd5;
  --color-status-reviewed-text:    #9a3412;
  --color-status-reviewed-border:  #fed7aa;
  --color-status-returned-bg:      #fff7ed;
  --color-status-returned-text:    #c2410c;
  --color-status-returned-border:  #fed7aa;
  --color-status-resubmitted-bg:    #e8eef7;
  --color-status-resubmitted-text:  #2d4a6d;
  --color-status-resubmitted-border:#c5d3e8;

  /* ── Flags ── */
  --color-flag-protocol:  #ef4444;
  --color-flag-completed: #22c55e;
  --color-flag-progress:  #e879f9;
  --color-flag-retro:     #3b82f6;
  --color-flag-duplicate: #94a3b8;

  /* ── Admin panels (office-only fieldsets, registration form) ── */
  --color-admin-surface: #f5f7fb;   /* admin fieldset / panel background */
  --color-admin-border:  #d4dce8;   /* admin panel border */
  --color-admin-label:   #6b7a8d;   /* uppercase section label inside admin panels */

  /* ── Semantic alerts ── */
  --color-success-bg:     #f0fdf4;
  --color-success-text:   #166534;
  --color-success-border: #bbf7d0;
  --color-warning-bg:     #fffbeb;
  --color-warning-text:   #92400e;
  --color-warning-border: #fde68a;
  --color-error-bg:       #fef2f2;
  --color-error-text:     #991b1b;
  --color-error-border:   #fecaca;
  --color-info-bg:        #eff6ff;
  --color-info-text:      #1e40af;
  --color-info-border:    #bfdbfe;

  /* ── Typography ── */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                Consolas, "Liberation Mono", monospace;
  --text-xs:      0.6875rem;
  --text-sm:      0.75rem;
  --text-base:    0.875rem;
  --text-md:      1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Spacing ── */
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-auth: 0 10px 25px rgba(0,0,0,0.05);

  /* ── Transitions ── */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-medium: 200ms ease;
  --transition-slow:   300ms ease;

  /* ── Z-index ── */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-backdrop:  1040;
  --z-offcanvas: 1045;
  --z-modal:     1050;
  --z-popover:   1070;
  --z-toast:     1090;

  /* ── Layout geometry (rem-converted — see design_system.md §3) ── */
  --layout-container-max:    85.714rem;   /* 1200px */
  --layout-container-pad:    1.429rem;    /* 20px */
  --layout-container-pad-sm: 1.143rem;    /* 16px */
  --layout-header-pad-v:     1.286rem;    /* 18px */
  --layout-header-pad-h:     1.429rem;    /* 20px */
  --layout-header-gap:       1.429rem;    /* 20px */
  --layout-logo-width:       5.143rem;    /* 72px */
  --layout-logo-font:        1.857rem;    /* 26px */
  --layout-nav-gap:          2.286rem;    /* 32px */
  --layout-subnav-pad-v:     0.429rem;    /* 6px */
  --layout-subnav-pad-h:     1.143rem;    /* 16px */
  --layout-subnav-link-pad:  0.357rem 1rem;
  --layout-subnav-radius:    0.357rem;    /* 5px */
  --layout-btn-height:       2.714rem;    /* 38px */
  --layout-btn-height-sm:    2.143rem;    /* 30px */
  --layout-btn-height-lg:    3.286rem;    /* 46px */
  --layout-btn-pad:          0 1.286rem;
  --layout-btn-radius:       0.214rem;    /* 3px */
  --layout-input-height:     2.714rem;    /* 38px */
  --layout-input-pad:        0.429rem 0.857rem;
  --layout-input-radius:     0.214rem;    /* 3px */
  --layout-card-pad:         1.714rem;    /* 24px */
  --layout-card-radius:      0.375rem;
  --layout-card-radius-lg:   0.5rem;
  --layout-card-radius-auth: 0.75rem;
  --layout-badge-radius:     0.214rem;    /* 3px */
  --layout-badge-pad-sm:     0.214rem 0.714rem;
  --layout-badge-pad-lg:     0.429rem 1rem;
  --layout-options-pad:      0.714rem 1rem;
  --layout-col-reg:          12.143rem;   /* 170px */
  --layout-col-flags:        7.857rem;    /* 110px */
  --layout-col-status:       10rem;       /* 140px */
  --layout-col-actions:      5.143rem;    /* 72px */
  --layout-col-check:        2rem;        /* 28px */
  --layout-circle-size:      1rem;        /* 14px */
  --layout-footer-pad-v:     1.857rem;    /* 26px */
  --layout-footer-margin-t:  2.857rem;    /* 40px */
  --layout-toast-max-width:  32.143rem;   /* 450px */
}

/* Shared app styles (load in BOTH BS2 + BS5 lanes) */
/* ── Legacy subnav (kept for Bootstrap 2 pages) ── */
.subnav { display: none; }

/* ── New sub nav bar ── */
.subnav-bar {
    width: 100%;
    background: var(--color-subnav-bg);
    border-bottom: 1px solid var(--color-subnav-border);
    margin-bottom: 1.25rem;
}

.subnav-inner {
    display: flex;
    align-items: center;
    gap: 1.429rem;
    padding: 0.429rem 1.143rem;
    flex-wrap: wrap;
    max-width: 85.714rem;
    margin: 0 auto;
}

.subnav-link {
    display: inline-block;
    padding: 0.357rem 1rem;
    border-radius: 0.357rem;
    font-size: 1.0rem;
    font-weight: 500;
    color: var(--color-subnav-link);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.subnav-link:hover {
    background: #b5c5dc;
    color: #1a2d50;
    text-decoration: none;
}

.subnav-link--active {
    color: var(--color-subnav-active) !important;
    font-weight: 700;
}

.heading { margin-bottom: 0.714rem; }

#error_explanation {
    background-color: #FFF0F0;
    border-bottom: 1px solid #F0C6C6;
    border-top: 1px solid #F0C6C6;
    color: #8C3F3F;
    margin: 0 0 1.429rem 0;
    padding: 0;
}
#error_explanation h2 {
    background-color: #FFE5E5;
    color: #8C3F3F;
    display: block;
    font-size: 1.071rem;
    font-style: normal;
    margin: 0;
    padding: 0 0.714rem;
    font-weight: normal;
}
#error_explanation ul { padding-top: 0.714rem; }
#error_explanation li { padding-bottom: 0.357rem; font-size: 0.857rem; }

.notice { background-color: #dff0d8; border-color: #d6e9c6; }
.notice, .notice .alert-heading { color: #468847; }

.ui-datepicker-trigger { margin-left: 0.357rem; }

.navi-external { margin-left: 0; }
.navi-external li { margin-right: 0.571rem; display: inline; list-style: none; }
.navi-external span { margin-right: 0.714rem; }

hr { margin: 0.714rem 0 1.071rem }
.right { text-align: right; }
.mtl { margin-top: 2.857rem; }
/*.option { position: absolute; right: 0; top: 5px; }*/
.option:not(.ts-dropdown .option) { position: absolute; right: 0; top: 0.357rem; }
.row h2 { margin-bottom: 0.714rem; }

.h3_title {
    font-weight: normal;
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 1.929rem;
    font-size: 1.393rem;
    line-height: 36px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #eee;
}

.date img { position: relative; top: 0.357rem; }

/* Trial preview — field labels */
#preview .light {
  color: #5a6a7e;
  font-size: 0.786rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.214rem;
}
#preview p { color: #000; }

/* Trial preview — section headings */
#preview h3 {
  font-size: 1.071rem;
  font-weight: 700;
  color: #3d5a8a;
  padding-left: 0.714rem;
  border-left: 3px solid #3d5a8a;
  margin-top: 1.857rem;
  margin-bottom: 0.857rem;
}
#preview h4 {
  font-size: 0.929rem;
  font-weight: 600;
  color: #4a6a90;
  padding-left: 0.571rem;
  border-left: 2px solid #c5d3e8;
  margin-top: 1.429rem;
  margin-bottom: 0.714rem;
}

/* Trial preview — field rows */
#preview .row { padding-top: 0.429rem; padding-bottom: 0.429rem; }

/* Contact block inline labels */
.contact-label { font-size: 0.714rem; font-weight: 600; color: #5a6a7e; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.286rem; }

.bdot { margin: 0 0 0.5rem; border-style: dotted; }

/* Revision list */
.revision-list { border-left: 2px solid #c5d3e8; margin-left: 0.5rem; padding-left: 0; }
.revision-item { position: relative; padding: 0.571rem 0.857rem 0.571rem 1.286rem; border-bottom: 1px solid #f0f2f5; }
.revision-item:last-child { border-bottom: none; }
.revision-item::before { content: ""; position: absolute; left: -0.357rem; top: 1rem; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #3d5a8a; border: 2px solid #fff; box-shadow: 0 0 0 1px #c5d3e8; }
.revision-meta { display: flex; align-items: center; gap: 0.429rem; margin-bottom: 0.214rem; }
.revision-author { display: flex; align-items: center; gap: 0.429rem; color: #666; font-size: 0.786rem; }
.revision-link { font-size: 0.857rem; font-weight: 500; color: #3d5a8a; }
.revision-link:hover { color: #2a4070; text-decoration: underline; }
.revision-icon { color: #9aafc7; font-size: 0.786rem; width: 0.857rem; text-align: center; }
.revision-toggle-row { border-bottom: none; }
.revision-toggle-row::before { display: none; }
.revision-toggle-btn { color: #3d5a8a; font-size: 0.786rem; text-decoration: none; }
.revision-toggle-btn:hover { color: #2a4070; text-decoration: underline; }
.revision-toggle-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.revision-toggle-btn .fa-chevron-down { transition: transform 0.2s ease; }
.revision-toggle-btn[aria-expanded="false"] .when-expanded { display: none; }
.revision-toggle-btn[aria-expanded="true"]  .when-collapsed { display: none; }
#preview ul, #preview ol { margin-left: 1.071rem; }
#preview ul li, #preview ol li { margin-bottom: 0.714rem; }

#loading { display: block; margin: 0 auto; text-align: center; width: 7.143rem; }

.relative { position: relative; }
.option_btn { position: absolute; top: 0.357rem; right: 0; }

.approved { background-color: #468847; }
.pending { background-color: #F89406; }
.draft { background-color: #B94A48; }
.unapproved { background-color: #1e1e1e; }

.search { text-align: right; }
.search-query {
    -webkit-border-radius: 0.357rem;
    -moz-border-radius: 0.357rem;
    border-radius: 0.357rem;
}

form { margin: 0; }


.navbar .nav { margin: 0; right: 0; left: auto; }
.navbar-text a { padding: 0.714rem; background-color: #F5F5F5; font-size: 0.857rem; text-transform: uppercase; color: #B21002; }
.navbar .navbar-text { margin: -0.286rem 0 0 0.357rem; }
.navbar .navbar-text a:hover { background-color: #F5F5F5; color: #222 }

.logo_img { margin-top: 0.857rem; }


.weighted-link {
    font-weight: 700;
    color: #224fed;
    text-decoration: none;
}

.weighted-text {
    font-weight: 700;
}


.list-option { float: right; }
.loading_form_submit { left: 0.714rem; position: relative; top: 0.357rem; }
.download_xml { position: absolute; right: 0; top: 0; }
.heading { position: relative; }

.light { color: #999; font-size: 0.857rem; }

.outcome-block { display: flex; }
.outcome-block p { display: inline; }
.outcome-block em { margin-left: 0.357rem; }

.trial-title { display: flex; align-items: center; }
.trial-title p { font-size: 1.286rem; line-height: 140%; }
.ml-5 { margin-left: 0.357rem; }

.custom-inline p { display: inline; }

table td { padding-right: 1.429rem; padding-bottom: 0.714rem; }

.outcome-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.571rem;
    height: 1.571rem;
    padding: 0;
    border: 1px solid #dc3545;
    border-radius: 50%;
    background: transparent;
    color: #dc3545;
    font-size: 0.643rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.214rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.outcome-remove-btn:hover {
    background: #dc3545;
    color: #fff;
}

.flags-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 0.714rem;
}

.list-flags-row {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    flex-wrap: nowrap;
}

.list-flags-item {
    display: flex;
    align-items: center;
    gap: 0.429rem;
}

.flags-item {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.429rem;
}

@media (max-width: 768px) {
    .flags-item {
        flex: 0 0 50%;
    }
}

@media (max-width: 480px) {
    .flags-item {
        flex: 0 0 100%;
    }
}

/* Trial flag icons */
.trial-flag-icon {
    font-size: 1.071rem;
    flex-shrink: 0;
    color: #6b7280;
}

.empty-state {
    border: 1px dashed #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;

    i { opacity: 0.4; }

    h6 { color: #495057; }
}

.breadcrumb-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.429rem;

    .breadcrumb-tag {
        display: flex;
        align-items: center;
        height: 1.429rem;
        padding: 0 0.857rem;
        font-size: 0.78rem;
        font-weight: 500;
        color: #6c757d;
        border: 1px solid #dee2e6;
        border-radius: 0.286rem;
        background: #fff;
        transition: border-color 0.15s ease, color 0.15s ease;

    &:not(:last-child)::after {
        content: "›";
        margin-left: 0.857rem;
        color: #ced4da;
        font-size: 0.9rem;
    }

        a {
            color: #6c757d;
            text-decoration: none;

            &:hover {
                color: #334195;
            }
        }

        &:not(.active):hover {
            border-color: #020887;
            color: #334195;
        }

    &.active {
        border-color: #020887;
        color: #334195;
        background: #E7ECEF;
        font-weight: 600;
    }
    }
}

.required-red {
    color: #cc0606;
    font-size: 1.25rem;
}

/*Styles for trial options*/
.trial-options-table {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trial-options-table li {
    border-bottom: 1px solid #eee;
    width: 100%;
}

.trial-options-table li:last-child {
    border-bottom: none;
}

.trial-options-table li a {
    display: flex;
    align-items: center;
    padding: 0.714rem 1rem;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: all 0.15s ease;
}

.trial-options-table li a:hover {
    background: #f8f9fa;
}

.trial-options-table li.active a {
    background: #f1f3f5;
    font-weight: 600;
    color: #020887;
}

.trial-options-table li a::after {
    content: "›";
    font-size: 1.143rem;
    color: #aaa;
    margin-left: 0.357rem;
}

.trial-option-disabled a {
    color: var(--color-text-muted) !important;
    pointer-events: none;
    cursor: default;
}
.trial-option-disabled a:hover {
    background: transparent !important;
}
.trial-option-disabled a::after {
    opacity: 0.35 !important;
}
.trial-option-disabled a::before {
    opacity: 0.35 !important;
}
.trial-options-divider {
    border: none;
    margin: 0.5rem 0 0;
    padding: 0 !important;
    list-style: none;
}
.trial-options-section-label {
    font-size: 0.714rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 0.357rem 1rem 0.143rem;
    border-bottom: none;
}
.trial-options-warning {
    font-size: 0.786rem;
    color: var(--color-warning-text, #856404);
    background: var(--color-warning-bg, #fff3cd);
    border: 1px solid var(--color-warning-border, #ffc107);
    border-radius: 0.286rem;
    padding: 0.214rem 0.429rem !important;
    margin: 0.214rem 0;
}

.assign-reg-panel {
    border: 1px solid var(--color-admin-border);
    border-radius: 0.357rem;
    overflow: hidden;
}
.assign-reg-header {
    background: var(--color-admin-surface);
    padding: 0.5rem 0.857rem;
    font-size: 0.857rem;
    user-select: none;
    border-bottom: 1px solid var(--color-admin-border);
    color: var(--color-text-secondary);
}
.assign-reg-body {
    padding: 0.857rem;
    background: var(--color-surface);
}
.admin-details-label {
    display: block;
    font-size: 0.786rem;
    font-weight: 600;
    color: var(--color-admin-label);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.214rem;
}
.admin-details-chevron {
    transition: transform 0.2s ease;
}
[aria-expanded="true"] .admin-details-chevron {
    transform: rotate(180deg);
}
@media (max-width: 767px) {
    .assign-reg-header { min-height: 44px; display: flex; align-items: center; }
}

#trial_view a::before { content: "👁 "; margin-right: 0.429rem; }
#trial_publications_submit a::before, #trial_publications a::before { content: "📄 "; margin-right: 0.429rem; }
#trial_progresses_submit a::before, #trial_progresses a::before { content: "📊 "; margin-right: 0.429rem; }
#trial_protocols_submit a::before, #trial_protocols a::before { content: "🔄 "; margin-right: 0.429rem; }
#trial_results_submit a::before { content: "📈 "; margin-right: 0.429rem; }
#trial_results_submit a[href="#"] {
    color: var(--color-text-muted);
    pointer-events: none;
    cursor: default;
}
#trial_results_submit a[href="#"]::after,
#trial_results_submit a[href="#"]::before { opacity: 0.35; }
#trial_edit_admin a::before, #trial_edit_draft a::before { content: "✏️ "; margin-right: 0.429rem; }
#trial_reject a::before { content: "❌ "; margin-right: 0.429rem; }
#trial_approve a::before { content: "✅ "; margin-right: 0.429rem; }
#trial_download_xml a::before { content: "📥 "; margin-right: 0.429rem; }
#trial_publish a::before { content: "🚀 "; margin-right: 0.429rem; }
#trial_unpublish a::before { content: "🔕 "; margin-right: 0.429rem; }


 /*Auth styles*/

/* Page background */
.auth-page {
    background: #f8fafc;
}

/* Card (only inside auth page) */
.auth-page .card {
    backdrop-filter: blur(6px);
    animation: fadeIn 0.4s ease-in-out;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Inputs */
.auth-page .custom-input {
    border-radius: 0.5rem;
    padding: 0.25rem 0.9rem;
    transition: all 0.2s ease;
}

.auth-page .custom-input:focus {
    border-color: #0b0d83;
}

/* Optional: tighten link styles */
.auth-page a {
    color: #0b0d83;
}

.auth-page a:hover {
    text-decoration: underline;
}

/* Placeholder styling (scoped) */
.auth-page .custom-input::placeholder {
    color: #959b9f;
    opacity: 0.7;
}

/* On focus (optional: slightly fade more) */
.auth-page .custom-input:focus::placeholder {
    opacity: 0.4;
}

.auth-page .form-control-lg,
.auth-page .form-select-lg {
    font-size: 1.0rem;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.571rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Flash container positioning */
.flash-container {
    top: 16%;
    z-index: 1060;
}

/* Toast style */
.flash-toast {
    min-width: 18.571rem;
    max-width: 32.143rem;
    opacity: 0;
    transform: translateY(-0.714rem);
    animation: slideFadeIn 0.4s ease 0.3s forwards;
}

 /*Entry animation */
@keyframes slideFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Trial accordion card list ─────────────────────────────────────────── */

.trial-card {
    border: 1px solid #d0d7e2;
    border-radius: 0.286rem;
    overflow: hidden;
}

/* Header strip */
.trial-card-header {
    background-color: #c5d3e8;
    border-bottom: 1px solid #b0c0d8;
}

.trial-card-source {
    font-size: 0.857rem;
    font-weight: 600;
    color: #2c3e6b;
}

.trial-card-view-link {
    font-size: 0.857rem;
    font-weight: 500;
    color: #1a3a6e;
    text-decoration: none;
}

.trial-card-view-link:hover {
    text-decoration: underline;
    color: #0d2a55;
}

.trial-card-select {
    font-size: 0.857rem;
    color: #2c3e6b;
    cursor: pointer;
}

/* Title strip */
.trial-card-title {
    background-color: #3d5a8a;
    color: #ffffff;
    font-size: 0.929rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Status pill row */
.trial-card-status {
    background-color: #f0f2f5;
    border-bottom: 1px solid #dde1e8;
    font-size: 0.857rem;
}

.trial-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    color: #374151;
    white-space: nowrap;
}

.pill-label {
    font-weight: 600;
    color: #374151;
}

.trial-status-tip {
    color: #5b7fa6;
    font-size: 0.857rem;
    cursor: help;
}

.trial-status-tip:hover {
    color: #334195;
}

.trial-results-available {
    color: #198754;
}

.trial-results-unavailable {
    color: #adb5bd;
}

/* Accordion sections */
.trial-card-sections {
    background-color: #ffffff;
}

.trial-card-section {
    border-top: 1px solid #e2e5ea;
}

.trial-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    width: 100%;
    padding: 0.571rem 0.857rem;
    background-color: #e8ebf0;
    border: none;
    text-align: left;
    font-size: 0.857rem;
    font-weight: 600;
    color: #2c3e6b;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.trial-section-toggle:hover {
    background-color: #dde1e9;
}

.trial-section-toggle[aria-expanded="true"] {
    background-color: #d4daea;
}

.section-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.143rem;
    height: 1.143rem;
    border: 2px solid #2c3e6b;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    color: #2c3e6b;
    font-size: 0; /* hide raw text; ::before provides content */
}

.section-toggle-icon::before {
    font-size: 0.857rem;
    content: "+";
}

.trial-section-toggle:not(.collapsed) .section-toggle-icon::before {
    content: "−";
}

/* Section body */
.trial-section-body {
    padding: 0.857rem 1rem;
    background-color: #fafbfc;
}

.trial-section-row {
    display: flex;
    gap: 1rem;
    padding: 0.357rem 0;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.857rem;
}

.trial-section-row:last-child {
    border-bottom: none;
}

.trial-section-label {
    flex: 0 0 16rem;
    font-weight: 600;
    color: #4b5563;
}

.trial-section-value {
    flex: 1;
    color: #111827;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .trial-section-row {
        flex-direction: column;
        gap: 0.143rem;
    }

    .trial-section-label {
        flex: none;
    }
}

/* ── Auto-resize textarea ─────────────────────────────────────────────────── */

/* Single-row textareas that grow with content (outcome_title, time_frame).
   The controller sets resize:none and overflow:hidden at connect time;
   line-height here keeps the initial height flush with a normal form-control. */
textarea.form-control[data-controller~="auto-resize"] {
    line-height: 1.5;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px); /* same as Bootstrap form-control */
}

/* ── TipTap rich text editor ──────────────────────────────────────────────── */

.tiptap-wrapper {
    border: 1px solid #d4dce8;
    border-radius: 0.286rem;
    background: #fff;
    overflow: hidden;
}

.tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.143rem;
    padding: 0.286rem 0.429rem;
    background: #f5f7fb;
    border-bottom: 1px solid #d4dce8;
}

.tiptap-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.143rem;
}

.tiptap-toolbar-sep {
    width: 1px;
    height: 1.143rem;
    background: #d4dce8;
    margin: 0 0.214rem;
}

.tiptap-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.214rem;
    padding: 0.143rem 0.429rem;
    cursor: pointer;
    font-size: 0.786rem;
    color: #3a4a5c;
    line-height: 1.5;
    white-space: nowrap;
}

.tiptap-btn:hover {
    background: #e8edf5;
    border-color: #c5d3e8;
}

.tiptap-btn--accent {
    color: #3d5a8a;
    font-weight: 600;
}

.tiptap-btn--danger:hover {
    background: #fde8e8;
    border-color: #f5c6cb;
    color: #c0392b;
}

/* Editor content area */
.tiptap-content {
    padding: 0.571rem 0.857rem;
    min-height: 8rem;
    outline: none;
    font-size: 0.857rem;
    line-height: 1.6;
    color: #212529;
}

.tiptap-content:focus-within {
    box-shadow: inset 0 0 0 2px rgba(61, 90, 138, 0.2);
}

/* ProseMirror root element */
.tiptap-content .ProseMirror {
    outline: none;
    min-height: 6rem;
}

/* Placeholder */
.tiptap-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    pointer-events: none;
    float: left;
    height: 0;
}

/* Tables */
.tiptap-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.786rem;
}

.tiptap-content th,
.tiptap-content td {
    border: 1px solid #dee2e6;
    padding: 0.286rem 0.571rem;
    vertical-align: top;
    position: relative;
    min-width: 3rem;
}

.tiptap-content th {
    background: #e8edf5;
    font-weight: 600;
    text-align: left;
}

.tiptap-content .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(61, 90, 138, 0.12);
    pointer-events: none;
}

.tiptap-content .column-resize-handle {
    background: #3d5a8a;
    bottom: 0;
    position: absolute;
    right: -1px;
    top: 0;
    width: 2px;
    pointer-events: none;
}

.tiptap-content .tableWrapper {
    overflow-x: auto;
}

/* Lists */
.tiptap-content ul,
.tiptap-content ol {
    padding-left: 1.286rem;
    margin: 0.286rem 0;
}

/* TipTap HTML rendered directly on the show page (bypasses .trix-content wrapper) */
.results-content {
    font-size: 0.857rem;
    line-height: 1.6;
    color: #212529;
}

.results-content p {
    margin-bottom: 0.571rem;
}

.results-content ul,
.results-content ol {
    padding-left: 1.286rem;
    margin-bottom: 0.571rem;
}

.results-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.results-content th,
.results-content td {
    border: 1px solid #dee2e6;
    padding: 0.286rem 0.571rem;
    vertical-align: top;
    min-width: 3rem;
}

.results-content th {
    background: #e8edf5;
    font-weight: 600;
    text-align: left;
}

.results-content th p,
.results-content td p {
    margin-bottom: 0;
}

/* ── TipTap heading select ───────────────────────────────────────────────── */

.tiptap-heading-select {
    appearance: auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.214rem;
    padding: 0.143rem 0.286rem;
    font-size: 0.786rem;
    color: #3a4a5c;
    cursor: pointer;
    height: 1.857rem;
}

.tiptap-heading-select:hover {
    background: #e8edf5;
    border-color: #c5d3e8;
}

.tiptap-heading-select:focus {
    outline: none;
    border-color: #3d5a8a;
    box-shadow: 0 0 0 2px rgba(61, 90, 138, 0.15);
}

/* Heading styles inside the editor content area */
.tiptap-content h1 { font-size: 1.286rem; font-weight: 700; margin: 0.571rem 0 0.286rem; }
.tiptap-content h2 { font-size: 1.143rem; font-weight: 700; margin: 0.571rem 0 0.286rem; }
.tiptap-content h3 { font-size: 1rem;     font-weight: 600; margin: 0.429rem 0 0.214rem; }
.tiptap-content h4 { font-size: 0.929rem; font-weight: 600; margin: 0.429rem 0 0.214rem; }

/* Link styles inside the editor content area */
.tiptap-content a {
    color: #3d5a8a;
    text-decoration: underline;
    cursor: pointer;
}

/* ── TipTap image support ────────────────────────────────────────────────── */

/* URL bar that slides in below the toolbar when "Image URL" is clicked */
.tiptap-url-bar {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.286rem 0.429rem;
    background: #f0f4fb;
    border-bottom: 1px solid #d4dce8;
}

.tiptap-url-bar-label {
    font-size: 0.786rem;
    font-weight: 600;
    color: #3a4a5c;
    white-space: nowrap;
}

.tiptap-url-input {
    flex: 1;
    padding: 0.143rem 0.429rem;
    font-size: 0.786rem;
    border: 1px solid #d4dce8;
    border-radius: 0.214rem;
    outline: none;
    color: #3a4a5c;
}

.tiptap-url-input:focus {
    border-color: #3d5a8a;
    box-shadow: 0 0 0 2px rgba(61, 90, 138, 0.15);
}

/* Images inside the editor */
.tiptap-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.214rem;
    display: block;
    cursor: default;
}

/* Selection outline when an image node is selected */
.tiptap-content img.ProseMirror-selectednode {
    outline: 2px solid #3d5a8a;
    outline-offset: 2px;
}

/* Images on the results show page */
.results-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.214rem;
    margin: 0.5rem 0;
}

/* ── Review Feedback Interface ───────────────────────────────────────────── */

.feedback-field-row {
    border: 1px solid var(--color-border);
    border-radius: 0.357rem;
    overflow: hidden;
}

.feedback-field-label {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.857rem;
}

.feedback-section-badge {
    display: inline-block;
    font-size: 0.643rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-border);
    border-radius: 0.214rem;
    padding: 0.071rem 0.357rem;
}

/* Column borders on large screens */
@media (min-width: 992px) {
    .feedback-col-reviewer {
        border-left: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
    }
}

.feedback-col-header {
    display: block;
    font-size: 0.714rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 0.286rem;
}

.feedback-original-value {
    font-size: 0.857rem;
    white-space: pre-wrap;
    color: var(--color-text-body);
}

.feedback-reviewer-comment {
    padding: 0.429rem 0.571rem;
    background: var(--color-bg-subtle);
    border-left: 0.214rem solid var(--color-primary-light);
    border-radius: 0 0.214rem 0.214rem 0;
    font-size: 0.857rem;
}

.feedback-comment-delete {
    opacity: 0;
    transition: opacity 0.15s;
}

.feedback-reviewer-comment:hover .feedback-comment-delete {
    opacity: 1;
}

.feedback-textarea {
    font-size: 0.857rem;
    min-height: 5rem;
    resize: vertical;
    border-color: var(--color-border);
}

.feedback-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.143rem rgba(61, 90, 138, 0.15);
}

.feedback-admin-attribution {
    font-size: 0.714rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.286rem;
}

/* Reviewer comment blocks in reviewer_comments view */
.reviewer-comment-block .card-header {
    font-size: 0.857rem;
}

/* ── Activity Timeline ───────────────────────────────────────────────────── */
/* Reuses .revision-list / .revision-item styles; only sidebar heading and detail line needed */

.activity-section-heading {
    font-size: 0.786rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-navy, #3d5a8a);
    margin-top: 1.5rem;
    margin-bottom: 0.571rem;
    padding-bottom: 0.357rem;
    border-bottom: 2px solid #c5d3e8;
}

.activity-detail {
    font-size: 0.714rem;
    color: var(--color-text-muted);
    margin-bottom: 0.214rem;
    padding-left: 1.286rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Teal-green colour theme for the Activity Timeline list */
.revision-list--timeline { border-left-color: #a8d4bc; }
.revision-list--timeline .revision-item::before { background: #2e7a52; box-shadow: 0 0 0 1px #a8d4bc; }
.revision-list--timeline .revision-link { color: #2e7a52; }
.revision-list--timeline .revision-link:hover { color: #1f5c3c; }
.revision-list--timeline .revision-toggle-btn { color: #2e7a52; }
.revision-list--timeline .revision-toggle-btn:hover { color: #1f5c3c; }