/* portal-utils.css — small shared utilities (CSP forbids inline <style>).
   .desktop-only: cells/elements that enrich the wide view but don't fit
   a phone (e.g. dashboard's Koht and Kohtunik columns). */

/* !important: the conditional Pico build scopes its rules under .pico
   (e.g. `.pico nav ul { display: flex }`), which outranks a bare utility
   class — the hide must win everywhere, whatever the context. */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* .nav-menu: the mobile hamburger menu — a native <details>,
   so it needs no JS (the CSP forbids inline scripts anyway). Self-styled
   rather than Pico's dropdown component to not depend on the Pico build.
   Selectors are .pico-prefixed to outrank Pico's scoped nav styling. */
.pico .nav-menu {
    position: relative;
}

/* The trigger: a square icon button holding the three CSS-drawn bars. */
.pico .nav-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    list-style: none;                       /* no disclosure triangle */
}
.pico .nav-menu summary::marker { content: none; }
.pico .nav-menu summary::-webkit-details-marker { display: none; }
.pico .nav-menu summary::after { display: none !important; } /* Pico chevron */

.nav-burger,
.nav-burger::before,
.nav-burger::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: var(--pico-color);
    border-radius: 1px;
}
.nav-burger { position: relative; }
.nav-burger::before,
.nav-burger::after {
    content: '';
    position: absolute;
    left: 0;
}
.nav-burger::before { top: -6px; }
.nav-burger::after  { top:  6px; }

/* The panel: a card of uniform full-width rows, anchored to the right.
   Sized to the longest label (not a fixed fraction of the viewport) so
   shorter items don't sit in a wide empty strip. */
.pico .nav-menu > ul {
    position: absolute;
    right: 0;
    z-index: 10;
    width: max-content;
    max-width: min(90vw, 18rem);
    margin: .25rem 0 0;
    padding: .25rem;
    display: flex;
    flex-direction: column;                 /* Pico lays nav uls out as rows */
    align-items: stretch;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-card-box-shadow);
    animation: nav-menu-open .15s ease;
}
@keyframes nav-menu-open {
    from { opacity: 0; transform: translateY(-.25rem); }
}

.pico .nav-menu > ul > li {
    width: 100%;
    padding: 0;
}
.pico .nav-menu > ul > li + li {
    border-top: 1px solid var(--pico-muted-border-color);
}

/* Every item — link or the logout form's button — is the same row. */
.pico .nav-menu > ul > li a,
.pico .nav-menu > ul > li button {
    display: block;
    width: 100%;
    margin: 0;
    padding: .75rem 1rem;
    text-align: left;
    text-decoration: none;
    font-size: 1rem;
    font-weight: normal;
    /* inherit, NOT var(--pico-color): Pico v2 redefines that custom property
       ON the button element (to its inverse/white), so the var would resolve
       to invisible-on-card. Inheriting takes the panel's actual text color. */
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.pico .nav-menu > ul > li a:hover,
.pico .nav-menu > ul > li a:focus,
.pico .nav-menu > ul > li button:hover,
.pico .nav-menu > ul > li button:focus {
    background: var(--pico-muted-border-color);
}
.pico .nav-menu form {
    margin: 0;
}

/* The open page, marked with aria-current="page" in layout.php. Someone who
   is both a club rep and an EKL-KKK member has three legitimate dashboards;
   this says which one they are looking at. Desktop: the link is weighted and
   underlined. Mobile: the panel row reads as selected (same tint as hover),
   and the underline is dropped — a full-width row needs no second signal. */
.pico nav ul li a[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .25rem;
}
.pico .nav-menu > ul > li a[aria-current="page"] {
    font-weight: 600;
    text-decoration: none;
    background: var(--pico-muted-border-color);
}

/* .section-chips: a jump-nav as wrapping pill links —
   compact boxes that wrap into tidy rows on narrow screens instead of
   one overlong line. .pico-prefixed to outrank Pico's scoped nav rules. */
.pico .section-chips > ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 var(--pico-spacing);
    padding: 0;
}
.pico .section-chips > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pico .section-chips a {
    display: inline-block;
    padding: .3rem .9rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 2rem;
    background: var(--pico-card-background-color);
    text-decoration: none;
    white-space: nowrap;
}
.pico .section-chips a:hover,
.pico .section-chips a:focus {
    background: var(--pico-muted-border-color);
}

/* .button-row: two or more entry buttons that belong together.
   Sharing the width is a PHONE fix only: `flex: 1 1 0` keeps them side by
   side and min-width: 0 lets a too-long label wrap inside its own button
   instead of pushing the button below. On desktop they size to their
   labels, as inline-block links would. */
.pico .button-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0 0 var(--pico-spacing);
}
.pico .button-row > [role="button"] {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;          /* the row owns the spacing below */
    text-align: center;
}
@media (min-width: 768px) {
    .pico .button-row > [role="button"] {
        flex: 0 1 auto;
    }
}
/* A lone button has nothing to share with, and stretching it across the whole
   width looks like a banner rather than an action. Sizes to its label at every
   width — the extra pseudo-class outranks the rule above regardless of order. */
.pico .button-row > [role="button"]:only-child {
    flex: 0 1 auto;
}

/* .dash-toolbar (dashboard.php): the apply buttons and the .section-chips
   jump-nav on ONE band from 768px up, which lifts the first section about 50px
   at 1280px. Desktop only, and deliberately nothing outside the media query:
   below 768px the wrapper stays a plain block, both children keep their own
   margins, and the phone layout is byte-for-byte what it was.

   The chips take the rest of the row (flex: 1 1 18rem) instead of sizing to
   their content, so when they outgrow the space they wrap INSIDE their own
   column — two tidy rows next to the buttons — rather than dropping below the
   band. 18rem is the point where two chips still fit per row; under that the
   basis loses and the block goes to its own line, which is the right outcome
   on a ~800px window.

   The buttons may be absent (a rep who cannot apply sees chips only), so
   nothing here depends on both children being present.

   NB the margin-bottom lives on the wrapper: .button-row's own bottom margin is
   zeroed inside the band, and without this the first section card would butt
   straight against the chips. */
@media (min-width: 768px) {
    .pico .dash-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.5rem;
        margin-bottom: 1.25rem;
    }
    .pico .dash-toolbar > .button-row {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .pico .dash-toolbar > .section-chips {
        flex: 1 1 18rem;
        min-width: 0;
    }
    .pico .dash-toolbar .section-chips > ul {
        margin-bottom: 0;
    }
}

/* .badge-stack: a status cell may hold several badges (status + attention +
   pending-change). Wrap them with even spacing so they stack cleanly on a
   narrow screen instead of crowding. */
.badge-stack {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

/* .b-ghost: outlined neutral badge for classification tags (the type_ekl
   PV/EMV mark next to the Katse label) — deliberately distinct from the
   filled status badges, so it reads as metadata, not as a state. */
.badge.b-ghost {
    background: transparent;
    color: var(--pico-muted-color);
    /* Border derived from the text color so it stays visible (but quiet)
       on any background / theme; the var line is the fallback for old
       browsers without color-mix support. */
    border: 1px solid var(--pico-muted-border-color);
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}

/* .req: the red asterisk marking a required field — a generic form utility,
   so it lives in this shared file rather than a page-specific one. */
.req {
    color: #b91c1c;
    margin-left: 0.15rem;
}

/* .muted: secondary/empty-state text (the CSP forbids inline styles). */
.pico .muted {
    color: var(--pico-muted-color);
}

/* .callout: accented notice the user must not miss
   (e.g. "this trial has an open change application"). */
.callout {
    border-left: 4px solid var(--pico-primary);
    padding: .5rem .75rem;
    background: var(--pico-card-background-color);
}

/* .error and .success: the red and green siblings of .callout. Same
   accented-panel idiom on purpose — feedback should read as the same KIND of
   object as a notice, just louder. No border-radius, matching .callout above.

   The base colour rules live in portal.css; this file loads after it at equal
   specificity, so these properties win. Geometry is shared and only the four
   colours differ per class. Colours mirror portal.css's own feedback and badge
   palette, stated explicitly (incl. dark mode) rather than derived from Pico
   variables, so the whole palette stays in step if retuned. */
.pico .error,
.pico .warning,
.pico .success {
    display: flex;
    align-items: flex-start;        /* marker stays on line 1 when text wraps */
    gap: .55rem;
    border-left: 4px solid var(--note-line);
    padding: .5rem .75rem;
    margin-bottom: .5rem;           /* several messages read as one group */
    background: var(--note-bg);
    color: var(--note-text);
}

/* The marker: a CSS-drawn disc — no image, nothing to load. */
.pico .error::before,
.pico .warning::before,
.pico .success::before {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--note-line);
    color: var(--note-mark);
    font-weight: 600;               /* matches .badge's weight in portal.css */
    font-size: .8rem;
    line-height: 1.3rem;
    text-align: center;
}
.pico .error::before   { content: "!"; }
/* A question mark, not another "!": .warning is used for confirmations — "press
   the button again" — so it asks something rather than reporting a fault. */
.pico .warning::before { content: "?"; }
.pico .success::before { content: "\2713"; }   /* ✓ — a plain character */

.pico .error {
    --note-line: #b71c1c;
    --note-bg:   #fdf0f0;
    --note-text: #8b1f1f;
    --note-mark: #fdf0f0;
}
/* Amber is the awkward one: a mid amber line (#a9700c) left the pale glyph on
   the disc at only 3.9:1, below the 4.5 an 0.8rem bold character needs. Reusing
   .b-amber's own text colour for the line fixes it at 5.5:1 — a darker bar than
   red or green get, but in-family and legible. */
.pico .warning {
    --note-line: #8a5a00;           /* .b-amber's text in portal.css */
    --note-bg:   #fdf6e8;
    --note-text: #8a5a00;
    --note-mark: #fdf6e8;
}
.pico .success {
    --note-line: #1b7a2f;
    --note-bg:   #eff7ef;
    --note-text: #1e5b20;
    --note-mark: #eff7ef;
}

/* Dark mode, same approach as portal.css's badge overrides: a deep wash, a
   lighter line and text, and the marker inverted so the glyph stays legible. */
@media (prefers-color-scheme: dark) {
    .pico .error {
        --note-line: #d08a8a;
        --note-bg:   #3a1c1c;
        --note-text: #e8a3a3;
        --note-mark: #3a1c1c;
    }
    .pico .warning {
        --note-line: #c9a24a;
        --note-bg:   #3a2f14;
        --note-text: #e8c877;       /* .b-amber's dark text in portal.css */
        --note-mark: #3a2f14;
    }
    .pico .success {
        --note-line: #7fb884;
        --note-bg:   #1c2f1d;
        --note-text: #a3d4a5;
        --note-mark: #1c2f1d;
    }
}

/* .actions: a trial's action list ("Tegevused"). Uniform rows:
   a link-looking trigger with a muted one-line description underneath.
   The <details> summaries (cancel, delete) are styled to match the real
   links around them — link color plus a disclosure triangle — so every
   action reads as one list instead of headings, text and links mixed.
   The revealed form gets a .callout-like panel to visually contain it. */
.pico .actions details {
    margin-bottom: var(--pico-spacing);
    padding: 0;
    border: 0;
}
.pico .actions summary {
    display: inline-block;
    cursor: pointer;
    color: var(--pico-primary);
    text-decoration: underline;
    list-style: none;
}
.pico .actions summary::marker { content: none; }
.pico .actions summary::-webkit-details-marker { display: none; }
.pico .actions summary::after { display: none !important; }  /* Pico chevron */
.pico .actions summary::before { content: '\25B8\00A0'; }    /* ▸ closed */
.pico .actions details[open] > summary::before { content: '\25BE\00A0'; } /* ▾ open */
.pico .actions details > form {
    margin: .5rem 0 0;
    padding: .75rem 1rem;
    border-left: 4px solid var(--pico-primary);
    background: var(--pico-card-background-color);
}

/* .faq: the FAQ accordions. Each <details> is a card row; the
   open item grows an accent edge and a tinted, primary-colored question
   row, so it clearly stands apart from its closed neighbours and from
   its own answer text. .pico-prefixed to outrank Pico's details rules. */
.pico .faq details {
    margin-bottom: .5rem;
    padding: 0;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    overflow: hidden;              /* keeps the summary tint inside the radius */
}
.pico .faq summary {
    margin: 0;
    padding: .75rem 1rem;
    font-weight: 600;
    cursor: pointer;
}
.pico .faq summary:hover,
.pico .faq summary:focus {
    background: var(--pico-muted-border-color);
}
.pico .faq details[open] {
    border-left: 4px solid var(--pico-primary);
}
.pico .faq details[open] > summary {
    margin: 0;
    color: var(--pico-primary);
    background: var(--pico-card-sectioning-background-color, var(--pico-muted-border-color));
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.pico .faq details p {
    margin: 0;
    padding: .75rem 1rem;
}
/* Lists in an answer share the paragraph's card padding; extra left room
   for the markers. li+li gets a gentle gap instead of Pico's full spacing. */
.pico .faq details ul,
.pico .faq details ol {
    margin: 0;
    padding: .75rem 1rem .75rem 2.25rem;
}
.pico .faq details li + li {
    margin-top: .35rem;
}
/* When blocks stack (intro <p> + list, or list + trailing <p>), drop the
   second block's top padding so the gap stays a single .75rem step. */
.pico .faq details :is(p, ul, ol) + :is(p, ul, ol) {
    padding-top: 0;
}

/* .prewrap: preserve line breaks in a value cell — multiline free-text
   fields in diff tables and their "Praegu:" hints (the CSP blocks the
   inline style equivalent). */
.pico .prewrap {
    white-space: pre-wrap;
}

/* .readonly-locked: a readonly textarea that should read as a locked field
   but stay scrollable and resizable — a truly disabled textarea can't be
   scrolled to reveal long text. Mirrors Pico's disabled opacity. */
.pico textarea.readonly-locked {
    resize: vertical;
    cursor: default;
    opacity: var(--pico-form-element-disabled-opacity, .5);
}

/* .kv: the two-column label/value tables (apply.php and review.php readonly
   "Katse andmed"; the submitted EMV proposal in emv.php and review.php, which
   is a value list rather than a diff and so has the same two-column shape).
   Pico tables are width:100% with auto layout, so the browser
   splits the leftover width between the two columns — with short values the
   label column swells to nearly half the row and the pair drifts apart.
   width:1% + nowrap is the shrink-to-fit trick: the label column asks for
   (almost) nothing, so it settles at its longest label on one line and the
   value column takes everything else. The table itself stays full width, so
   the row rules still span the section.
   Desktop only: on a phone a nowrap label column would eat the row, and the
   default distribution is the right one there. Breakpoint matches the rest
   of this file. */
@media (min-width: 768px) {
    .pico .kv th[scope="row"] {
        width: 1%;
        white-space: nowrap;
    }
}
/* Top, not middle — every table in the portal. Pico centres cell content
   vertically, so as soon as one cell wraps to several lines the short cells
   beside it float to the middle of the row and stop lining up with the line
   they belong to: a row label next to a long Lisainfo, "Praegu" next to a
   multi-line "Taotletud" in the change diffs, the time and user columns next
   to a stack of changes in Ajalugu. Top is the readable default for tables
   whose cells can wrap, and applying it once means no per-table class to
   remember on the next table someone adds. Every width — long values wrap
   on a phone too. */
.pico table th,
.pico table td {
    vertical-align: top;
}