/*
 * Shared look for the partner portal (resources/views/portal) and the
 * investigator portal (resources/views/pi, auth/pi): the admin pages'
 * background, glass cards, dark fields, soft grey text and pink accents.
 * Loaded by both portals' layouts; every class here starts with portal-.
 */

/* Matches the admin pages exactly: the same background image and
   settings as .hero-section.moving in layouts/app.blade.php, and the
   admin cards' white glass (bg-white/10 backdrop-blur-md). */
.portal-body {
    background: #0b1a2b url('/img/bg-img/header-1.webp') no-repeat center top;
    background-size: cover;
}
/* Text: soft greys for secondary text, pale pink for highlights. */
.portal-muted { color: rgba(255, 255, 255, 0.70); }
.portal-text { color: rgba(255, 255, 255, 0.85); }
.portal-highlight { color: #f9c6cf; }
a.portal-highlight:hover { color: #fff; }
/* The portal name beside the logo, as a pink-tinted pill. */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: .75rem;
    padding: .3rem .85rem;
    border-radius: 9999px;
    border: 1px solid rgba(249, 198, 207, 0.35);
    background-color: rgba(251, 98, 125, 0.12);
    color: #f9c6cf;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    /* A tight line box, so the icon and the text are centred on the
       glyphs rather than on the text's taller line box. */
    line-height: 1;
}
.portal-badge i { line-height: 1; font-size: .9em; }
a.portal-badge { text-decoration: none; transition: background-color .15s, border-color .15s; }
a.portal-badge:hover { background-color: rgba(251, 98, 125, 0.25); border-color: rgba(249, 198, 207, 0.6); }
/* Form fields: dark like the dashboard's link fields, pink when focused. */
.portal-input {
    width: 100%;
    padding: .5rem 1rem;
    background-color: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: .5rem;
    color: #fff;
}
.portal-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.portal-input:focus {
    outline: none;
    border-color: #fb627d;
    box-shadow: 0 0 0 2px rgba(251, 98, 125, 0.35);
}
/* Dropdowns are solid black, box and list: a translucent background
   looks muddy, and browsers draw the open list inconsistently. */
select.portal-input { background-color: #000; }
.portal-input option { background-color: #000; color: #fff; }
/* Radio buttons and checkboxes in pink. The forms plugin fills a
   checked box with its text colour (blue by default); accent-color
   covers browsers' native controls. */
.portal-body input[type=radio],
.portal-body input[type=checkbox] {
    color: #fb627d;
    accent-color: #fb627d;
}
.portal-body input[type=radio]:focus,
.portal-body input[type=checkbox]:focus {
    --tw-ring-color: rgba(251, 98, 125, 0.5);
}
/* Small pink icon before a section heading. */
.portal-icon { color: #fb627d; margin-right: .5rem; }
.portal-card {
    background-color: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* Pop-ups: a solid dark panel over a dimmed page, so the text stays
   readable whatever is behind it. The header row of a scrolling table
   inside one gets the same colour so rows don't show through it. */
.portal-overlay { background-color: rgba(0, 0, 0, 0.65); }
.portal-modal,
.portal-modal thead {
    background-color: #0f2236;
}
.portal-modal { border: 1px solid rgba(255, 255, 255, 0.20); }
/* Tables: soft dividers between rows and a faint highlight on hover,
   including rows added by JavaScript. */
.portal-table tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.10); }
.portal-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); }
/* A secondary button: outlined, for Close and Cancel. */
.portal-button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: .5rem;
    padding: .5rem 1rem;
    color: #fff;
}
.portal-button-secondary:hover { background-color: rgba(255, 255, 255, 0.10); }
/* Hover labels on icon links, e.g. the investigator dashboard's actions. */
.portal-tooltip { position: relative; display: inline-block; cursor: pointer; }
.portal-tooltip .portal-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    padding: 5px 8px;
    border-radius: 4px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.portal-tooltip:hover .portal-tooltip-text { visibility: visible; opacity: 1; }
/* The public landing page (portal/landing.blade.php). */
.portal-landing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: rgba(251, 98, 125, 0.15);
    color: #fb627d;
    font-size: 1.25rem;
}
/* Numbered circles for the "How it works" steps. */
.portal-landing-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: #fb627d;
    font-weight: 700;
}
/* The tier rates, e.g. "5%", in a fixed-width column. */
.portal-landing-rate {
    min-width: 3.5rem;
    color: #fb627d;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
/* An outlined button, sized like the pink one beside it. */
.portal-landing-outline { border: 1px solid rgba(255, 255, 255, 0.30); color: #fff; }
.portal-landing-outline:hover { background-color: rgba(255, 255, 255, 0.10); }
/* The code of conduct's disclosure arrow, in pink. */
.portal-landing-details summary::marker { color: #fb627d; }
/* The photo at the top of each programme card, cropped to the same shape
   whatever the source image's size. */
.portal-landing-photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Below a photo, the programme's icon sits half over its bottom edge,
   solid so the photo doesn't show through it. */
.portal-landing-photo + div > .portal-landing-icon {
    margin-top: -3rem;
    position: relative;
    background-color: #fb627d;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(15, 34, 54, 0.85);
}
/* The investigator landing page (pi/landing.blade.php) has one programme,
   so its photo sits beside the text on wider screens: it fills the card's
   height, and the icon stays in the text column instead of over the photo. */
@media (min-width: 768px) {
    .pi-landing-photo { height: 100%; min-height: 20rem; aspect-ratio: auto; }
    .pi-landing-photo + div > .portal-landing-icon { margin-top: 0; }
}
/* Both portals' pages (portal/layout and pi/layout). Most are taller than
   the background image, so its side glows are scaled off the edges and
   it reads as flat navy. Soft pink and blue glows, spaced down the page,
   give it some depth; the glass cards pick up their colour. Positions
   are percentages of the whole page, so they spread out however long it
   gets. */
.portal-body.portal-glow {
    background:
        radial-gradient(ellipse 45% 28% at 50% 0%, rgba(251, 98, 125, 0.22), transparent 70%),
        radial-gradient(ellipse 40% 25% at 5% 22%, rgba(70, 100, 230, 0.30), transparent 70%),
        radial-gradient(ellipse 40% 25% at 95% 38%, rgba(251, 98, 125, 0.16), transparent 70%),
        radial-gradient(ellipse 45% 25% at 8% 62%, rgba(251, 98, 125, 0.14), transparent 70%),
        radial-gradient(ellipse 40% 25% at 92% 78%, rgba(70, 100, 230, 0.28), transparent 70%),
        radial-gradient(ellipse 50% 22% at 50% 100%, rgba(251, 98, 125, 0.18), transparent 70%),
        url('/img/bg-img/header-1.webp') center top / cover no-repeat #0b1a2b;
}

/* Both portals' headers. On phones the logo and the language picker share
   the first line and the nav links get a line of their own, wrapping if a
   translation is long; from 640px up it's all one line. */
.portal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: .75rem;
}
.portal-header-brand { margin-right: auto; }
.portal-nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: .5rem;
    font-size: .875rem;
}
.portal-nav form { display: inline; }
@media (min-width: 640px) {
    .portal-nav { order: 0; width: auto; }
}

.portal-lang { position: relative; font-size: .875rem; }
.portal-lang summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}
.portal-lang summary::-webkit-details-marker { display: none; }
.portal-lang summary:hover,
.portal-lang[open] summary { border-color: #fb627d; color: #fff; }
.portal-lang summary:focus-visible { outline: 2px solid #fb627d; outline-offset: 2px; }
.portal-lang-chevron { font-size: .65em; transition: transform .15s; }
.portal-lang[open] .portal-lang-chevron { transform: rotate(180deg); }
.portal-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 50;
    min-width: 11rem;
    padding: .35rem 0;
    margin: 0;
    list-style: none;
    background-color: #0b1a2b;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: .5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}
.portal-lang-menu a {
    display: block;
    padding: .5rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.portal-lang-menu a:hover { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
.portal-lang-menu a.portal-lang-current { color: #fb627d; font-weight: 600; }