.app_version {
    color: #616161;
    padding-top: 10px;
    border-top: solid 1px #ddd;
    width: 100%;
}

.app_version_label {
    font-style: italic;
    text-align: center;
    margin: auto;
}

@media screen and (min-height: 900px) {
    .app_version {
        position: absolute;
        bottom: 3px;
        border-top: 0px;
        width: 100%;
    }
}

.ui.table td.right-aligned {
    text-align: right;
}

.ui.table th.right-aligned {
    text-align: right;
}

.right-aligned {
    text-align: right;
}

.ui.table td.center-aligned {
    text-align: center;
}

.ui.table th.center-aligned {
    text-align: center;
}

.center-aligned {
    text-align: center;
}

.collapsed {
    display: none !important;
}

tr.inactive_member, tr.inactive_member > td, tr.inactive_member > td > a {
    color: #d0d0d0;
}

.ui.label.inactive_member {
    color: #d0d0d0;
}

.ui.item.inactive_member {
    color: #d0d0d0;
}

.ui.button.inactive_member {
    color: #d0d0d0;
}

/* Restrict number of items in some dropdown qualified with 'short' class by limiting the height. */
.ui.short.dropdown .menu {
    max-height: 200px !important;
}

.ui.container {
    margin-left: 7px;
    margin-right: 7px;
}

audio, video {
    width: 100%;
    max-width: 1280px;
    max-height: 720px;
}

/* --- Flexbox app layout --- */
body.myclub-app {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- Sidebar --- */
#app-sidebar {
    width: 150px;
    min-width: 150px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    z-index: 102;
    display: flex;
    flex-direction: column;
    border-radius: 0 !important;
}

#app-sidebar .item:first-child,
#app-sidebar .item:last-child {
    border-radius: 0 !important;
}

#app-sidebar .sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#app-sidebar .sidebar-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Override .app_version global positioning inside sidebar footer */
#app-sidebar .sidebar-footer .app_version {
    position: static !important;
    border-top: 0 !important;
    padding-top: 6px !important;
    bottom: auto !important;
}

#app-sidebar .header .content {
    overflow: hidden;
}

#app-sidebar .header img.sidebar-logo {
    max-width: 100%;
    transition: max-width 0.25s ease;
}

#app-sidebar .item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#app-sidebar .item > i.icon {
    display: block;
    font-size: 1.5em !important;
    margin: 0 auto 0.25rem !important;
    width: auto !important;
    height: auto !important;
    opacity: 1;
}

#app-sidebar .sidebar-label {
    font-size: 0.85em;
}

/* --- Sidebar collapsed state --- */
body.sidebar-collapsed #app-sidebar {
    width: 60px;
    min-width: 60px;
}

body.sidebar-collapsed #app-sidebar .sidebar-label {
    display: none;
}

body.sidebar-collapsed #app-sidebar .header img.sidebar-logo {
    max-width: 40px;
}

body.sidebar-collapsed #app-sidebar .app_version {
    display: none;
}

body.sidebar-collapsed #sidebar-toggle i.icon {
    transform: rotate(180deg);
}

/* Anti-flash: collapse sidebar before DOMContentLoaded */
html.sidebar-will-collapse #app-sidebar {
    width: 60px;
    min-width: 60px;
    transition: none;
}
html.sidebar-will-collapse #app-sidebar .sidebar-label {
    display: none;
}
html.sidebar-will-collapse #app-sidebar .app_version {
    display: none;
}
html.sidebar-will-collapse .app-main {
    margin-left: 60px;
    transition: none;
}

/* --- Toggle button --- */
#sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
    padding: 0.6em;
    width: 100%;
    text-align: center;
    transition: color 0.15s ease;
}

#sidebar-toggle:hover {
    color: rgba(0, 0, 0, 0.8);
}

#sidebar-toggle:focus-visible {
    outline: 2px solid #2185d0;
    outline-offset: -2px;
}

#sidebar-toggle i.icon {
    transition: transform 0.25s ease;
    margin: 0 !important;
}

/* --- Main content area --- */
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 150px;
    transition: margin-left 0.25s ease;
}

body.sidebar-collapsed .app-main {
    margin-left: 60px;
}

/* --- Top menu --- */
#top-menu {
    border-radius: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    flex-shrink: 0;
}

/* Breathing room between top menu and page content */
#page > .ui.fluid.container {
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}

.mobile-only {
    display: none !important;
}

/* --- Sidebar overlay (mobile) --- */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 101;
}

/* --- Intermediate breakpoint: tablets / small laptops (769-1100px) --- */
/* Force collapsed layout in this zone without modifying user's localStorage */
@media screen and (min-width: 769px) and (max-width: 1100px) {
    body.myclub-app #app-sidebar {
        width: 60px !important;
        min-width: 60px !important;
    }
    body.myclub-app .app-main {
        margin-left: 60px !important;
    }
    body.myclub-app #app-sidebar .sidebar-label {
        display: none !important;
    }
    body.myclub-app #app-sidebar .header img.sidebar-logo {
        max-width: 40px !important;
    }
    body.myclub-app #app-sidebar .app_version {
        display: none !important;
    }
    /* Hide toggle in this zone - the layout is forced */
    body.myclub-app #sidebar-toggle {
        display: none !important;
    }
    /* Footer is empty in this zone - remove visual separator */
    body.myclub-app #app-sidebar .sidebar-footer {
        border-top: 0 !important;
    }
}

/* --- Mobile layout --- */
@media screen and (max-width: 768px) {
    body.myclub-app {
        flex-direction: column;
    }

    /* Keep the layout viewport pinned to the device width. A non-wrapping wide
       element in .app-main (and the off-canvas sidebar) otherwise inflated the
       layout viewport (innerWidth 547 on a 390px device), so the whole UI was
       downscaled ~0.71x. ``body`` already clips overflow-x; ``html`` must too,
       or it reports the overflow and the browser zooms the page out to fit. */
    html {
        overflow-x: hidden;
    }

    /* Page titles (h1.ui.header) are oversized on phones and push the page content
       below the fold; scale them down. The back-arrow icon many titles embed is
       em-based, so it follows. Audit: documentation/mobile-ui-audit-galaxy.md. */
    .app-main h1.ui.header {
        font-size: 1.5rem;
    }

    /* The staff site-search input overflows the crowded top bar and gets clipped by
       overflow-x:hidden (its right edge AND magnifier disappear off-screen).
       Collapse it to its magnifier button, which opens the full-page search
       (search.html carries its own search field). Audit #3. */
    #top-menu #id-search-website-input {
        display: none;
    }

    /* With the input collapsed, the magnifier is the only control left in the
       action input, so Fomantic's flush (square) left edge — meant to butt
       against the input — looks detached. Round all four corners back into a
       standalone icon button. */
    #top-menu #id-search-website-input + .button {
        border-radius: .28571429rem !important;
    }

    /* Home dashboard stat tiles: Fomantic only sets min-width:50% on
       .two.statistics, so the wide labels grow each tile past 50% and it wraps to
       one-per-row. Pin a real 50% width so the dashboard shows two columns on
       phones, lifting the checklist / upcoming events above the fold. Audit:
       documentation/mobile-ui-audit-galaxy.md. */
    .home-statistics.ui.statistics > .statistic {
        width: 50% !important;
        min-width: 0 !important;
        max-width: 50% !important;
        margin: 0 0 1em !important;
    }

    #app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        min-width: 260px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 103;
    }

    body.sidebar-mobile-open #app-sidebar {
        transform: translateX(0);
    }

    body.sidebar-mobile-open #sidebar-overlay {
        display: block;
    }

    .app-main {
        width: 100%;
        margin-left: 0;
        transition: none;
    }

    body.sidebar-collapsed .app-main {
        margin-left: 0;
    }

    .mobile-only {
        display: flex !important;
    }

    #sidebar-toggle {
        display: none;
    }

    /* Override collapsed state on mobile - always show full sidebar when open */
    body.sidebar-collapsed #app-sidebar {
        width: 260px;
        min-width: 260px;
    }
    body.sidebar-collapsed #app-sidebar .sidebar-label {
        display: inline;
    }
    body.sidebar-collapsed #app-sidebar .header img.sidebar-logo {
        max-width: 100%;
    }
}

/* --- Table / list pagination footer on phones (UA-driven) ---
   Matches the app-wide ``request.user_agent`` responsive strategy (cf. the
   ``.notifications-mail-layout.is-mobile`` rules): the pagination templates add
   the ``is-mobile`` class on phones and drop the items-per-page dropdown
   entirely server-side. Here the pager is reflowed to full width so its links
   become comfortable touch targets, and the verbose "Page X of Y (...)" status
   takes its own row instead of squeezing the page links into un-tappable
   slivers. */
.ui.pagination.menu.is-mobile {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: .25em;
}
.ui.pagination.menu.is-mobile .item {
    min-height: 2.75em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui.pagination.menu.is-mobile .item.current {
    flex: 1 0 100%;
    text-align: center;
}
.ui.pagination.menu.is-mobile .item:before {
    display: none;
}

input.dirty-field {
    background-color: #ffe9fd !important;
    background-image: url("img/loading.08e3f6096f3c.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
    background-origin: content-box !important;
}

[data-tooltip]::after {
    word-wrap: break-word;
    white-space: pre-wrap !important;
    min-width: 20em;
    text-wrap: normal;
    display: block;
    position: page;
}

/* Work around the fact that FomanticUI does not allow label to be within a div section as we need it. */
.required.field > div > label::after {
    margin: -.2em 0 0 .2em;
    content: "*";
    color: #db2828;
}

.ui.form .field > div > label {
  display: inline;
  margin: 0 0 .28571429rem 0;
  font-size: .92857143em;
  font-weight: 700;
  text-transform: none;
}

.member-picture-container {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.member-picture {
    width: 6em; margin-right: 6px; display: inline-block; line-height: 1; vertical-align: baseline; flex-shrink: 0;
}
.member-picture-padding {
    height: 100%; display: inline-block; line-height: 1; vertical-align: baseline;
}

/* -----
Full screen management
*/

/* The Modal (background) */
#fullScreenModalContainer {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    padding: 0px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
}

/* Modal Content (image) */
#fullScreenContent {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
}

#fullScreenCaption {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    color: white;
    text-shadow: 1px 1px 1px black;
    line-height: 1.0em;
}

#closeFullScreenContent {
    position: fixed;
    top: 15px;
    right: 10px;
}

#previousFullScreenContent {
    position: fixed;
    top: 15px;
    right: 110px;
}

#nextFullScreenContent {
    position: fixed;
    top: 15px;
    right: 60px;
}

.full-screen-button {
    color: #bbb !important;
    transition: 0.3s;
}

.full-screen-button:hover,
.full-screen-button:focus {
    color: #f1f1f1 !important;
    text-decoration: none;
    cursor: pointer;
}

/* ----- */

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 730px) {
    #fullScreenContent {
        width: 100%;
    }
}

/* Radio select without bullets */
.radio-choice-message {
    background: #c6e9f8;
    padding: 1em;
}

/* Radio select without bullets */
.radio-select {
    list-style: none;
}

/* Display delete checkbox and label inline with file name */
div.ui.field > a + input[type="checkbox"] {
    display: inline-flex;
    vertical-align: baseline;
    margin-left: 1em;
}

div.ui.field > input[type="checkbox"] + label {
    display: inline-flex;
}

div.myclub-completion-text-cardtext-class {
    font-size: 0.7em !important;
}

div.myclub-completion-value-cardtext-class {
    font-style: italic !important;
    font-size: 0.7em !important;
}

/* Autocompletion */

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
    overflow: scroll;
}

.autocomplete-items {
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    color: #222f3e;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.autocomplete-items div {
    padding: 3px;
    cursor: pointer;
    font-size: 0.8em;
    /*background-color: #fff;
    border-bottom: 1px solid #d4d4d4;*/
}

/* when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* Style the button like a link */
.icon-link-button {
    background: none;
    border: none;
    padding: 0;
    /*text-decoration: underline;*/
    cursor: pointer;
    /*font-size: 1em;*/
}

/* Tables */
table thead th.orderable > a {
    padding-right: 20px;
    background: url("img/arrow-inactive-up.2898c124b76b.png") right center no-repeat;
}

table thead th.orderable.asc > a {
    background-image: url("img/arrow-active-up.7891d6f2ce48.png");
}

table thead th.orderable.desc > a {
    background-image: url("img/arrow-active-down.ca0c866de58c.png");
}

.text-muted {
    color: #888;
}

/* Profile preferences: greys out the "delay" field when its parent toggle is off. */
.reminder-pair > .field:last-child {
    transition: opacity 120ms ease-in-out;
}
.reminder-pair.is-off > .field:last-child {
    opacity: 0.45;
    pointer-events: none;
}

/* Notifications — mail view (split pane) */
.notifications-mail-toolbar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.notifications-mail-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
}
.notifications-mail-mark-all {
    margin-right: 0 !important;
}
.notifications-mail-search {
    max-width: 14em;
}
.notifications-mail-search input[type="search"] {
    font-size: .9em !important;
    padding-top: .4em !important;
    padding-bottom: .4em !important;
}
/* Hide the native WebKit/Blink ``x`` inside the input so our own
   clear button is the only affordance — two stacked ``x`` marks look
   broken. */
.notifications-mail-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
/* ---- Mobile inbox toolbar: collapse view/status/topic/sort behind a native
   "Filters & sort" <details> disclosure (UA-driven; see notifications_toolbar.html).
   The quick search stays visible and the message list rises near the top. ---- */
.notifications-mail-toolbar.is-mobile {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.notifications-mail-toolbar.is-mobile .notifications-mail-toolbar-left {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.notifications-toolbar-collapse {
    width: 100%;
}
.notifications-toolbar-summary {
    width: 100%;
    cursor: pointer;
    list-style: none;
}
.notifications-toolbar-summary::-webkit-details-marker {
    display: none;
}
.notifications-toolbar-summary .dropdown.icon {
    margin-left: .4em !important;
    transition: transform .2s ease;
}
.notifications-toolbar-collapse[open] .notifications-toolbar-summary .dropdown.icon {
    transform: rotate(180deg);
}
.notifications-toolbar-panel {
    margin-top: .5em !important;
    display: flex;
    flex-direction: column;
    gap: .6em;
}
.notifications-mail-toolbar.is-mobile .notifications-mail-sort {
    width: 100%;
    justify-content: center;
}
.notifications-mail-toolbar.is-mobile .notifications-mail-search {
    max-width: none;
    width: 100%;
    margin-top: .2em;
}
.notifications-mail-toolbar.is-mobile .notifications-mail-mark-all {
    width: 100%;
    margin-top: .4em;
}
/* ---- Mobile: compact the shared advanced-filter form (filters_form.html, used
   app-wide) WITHOUT forking it. Collapsed: tighter chrome. Open: the field area
   becomes a height-capped scroll region, so the advanced form no longer pushes
   the message list far down the page. UA-driven via the .filters-form-compact
   class (added when not request.user_agent.is_pc). ---- */
.filters-form-compact {
    padding: .4em .7em !important;
    margin-bottom: .4em !important;
}
/* Collapsed state is a compact bar that KEEPS the "Search" header (the visible
   anchor users expect): flatten the grid (the row's default ~1rem padding and
   the header margin are what made it tall) and vertically centre the title with
   the action buttons. We deliberately do NOT hide the header nor restructure the
   two columns — only the surrounding chrome is tightened. */
.filters-form-compact > .ui.grid { margin: 0 !important; }
.filters-form-compact > .ui.grid > .row {
    padding: .15em 0 !important;
    align-items: center;
}
.filters-form-compact .ui.header { margin: 0 !important; }
.filters-form-compact #id_filter_form_container {
    max-height: 42vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.filters-form-compact #id_filter_form_container .field {
    margin-bottom: .5em !important;
}
/* ---- Mobile: render the app-wide section-tab pattern
   (`{% if is_pc %}massive tabular{% else %}mobile-scroll-tabs{% endif %} menu`)
   as a SINGLE horizontally-scrollable row instead of Fomantic's full-width
   `stackable` stack — the tabs take one line (swipeable) so the real content
   rises up the page. UA-driven: the class is added when not
   request.user_agent.is_pc (desktop keeps `massive tabular`, untouched). ---- */
.ui.menu.mobile-scroll-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* slim persistent cue (Firefox/desktop) */
}
.ui.menu.mobile-scroll-tabs::-webkit-scrollbar { height: 3px; }
.ui.menu.mobile-scroll-tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 3px;
}
/* Keep each tab at its natural width (never shrink) and on one line, so a tab
   that overflows the viewport is clipped at the edge — that peek is the
   scroll affordance. */
.ui.menu.mobile-scroll-tabs > .item {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* ---- Responsive data tables (the table-equivalent of .mobile-scroll-tabs).
   Every django-tables2 table renders inside `.table-container` (table.html) and
   carries `unstackable` (tables.py / table.html default), so Fomantic never
   stacks it into label-less blocks on phones; instead the container scrolls
   horizontally (headers + row comparison preserved, swipe for more columns).
   Harmless on desktop: no scrollbar appears unless a table is wider than its
   container. ---- */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-container::-webkit-scrollbar { height: 3px; }
.table-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 3px;
}
/* ---- Mobile: comfortable touch targets (audit finding #3). Fomantic's
   `ui mini` action buttons render ~28px tall — under the >=44px tap size both
   Apple HIG and Material recommend — so on touch devices they mis-tap easily,
   especially adjacent icon buttons (the filter search/clear pair in
   filters_form.html, the app-wide help/search popup activator in
   page_content_top_header.html). The `myclub-touch` body class (added
   server-side when not request.user_agent.is_pc, in base.html) keys the rule
   below, WITHOUT inflating the dense desktop toolbars (desktop UAs never get the
   class). Third-party widgets are excluded for free: the TinyMCE toolbar uses
   `.tox-tbtn`, not `.ui.button`.

   We grow the button via Fomantic's OWN native size lever — `font-size`. Every
   button internal (padding, line-height, icon, and the absolutely-positioned
   icon box of `labeled` buttons) is em-relative, so bumping the font-size scales
   the whole button proportionally and keeps Fomantic's layout/alignment intact.
   This replaces an earlier hand-rolled set of overrides (min-height + inline-flex
   centring + min-width + sibling margin) that broke the labeled-icon action bars:
   `labeled` buttons were stretched to 44px but excluded from the flex centring,
   leaving their label/icon misaligned. We use Fomantic's `large` size
   (1.14286rem ≈ 41px at the 14px rem base): a comfortable native tap size,
   clearly bigger than mini's ~28px without the visually heavy feel of `big`
   (~46px). The quadruple `.ui` mirrors Fomantic's own specificity hack for size
   classes (semantic.css `.ui.ui.ui.ui.mini.button`); without it this override
   loses the cascade and is silently ignored. ---- */
.myclub-touch .ui.ui.ui.ui.mini.button,
.myclub-touch .ui.mini.buttons .button {
    font-size: 1.14285714rem; /* Fomantic `large` */
}
/* The mobile actions toolbar (actions_toolbar.html) stacks its buttons
   vertically inside #hidden-action-menu; once enlarged they run together. Give
   the stacked items a small vertical gap so adjacent tap targets stay distinct.
   Scoped to that menu (and to touch UAs) so the horizontal toolbars elsewhere
   are untouched. */
.myclub-touch #hidden-action-menu .item:not(:last-child) {
    margin-bottom: .4em;
}
/* ---- Mobile: keep action-toolbar dropdown popups vertical. On mobile the action
   toolbar (actions_toolbar.html) renders as a `.ui.menu` instead of the desktop
   `.ui.horizontal.list`. A few toolbar buttons embed a Fomantic *floating dropdown*
   whose popup `.menu` lists secondary actions (make_advanced_members_actions_menu in
   actions.py — "Modifier la liste des membres" + advanced actions; and
   make_notification_templates_menu in notifications_service.py — the "Add Message"
   template picker). Nested inside the `.ui.menu`, Fomantic's menu-descendant rules
   compute that popup as `display:flex`, which (with the default `flex-direction:row`)
   lays the options out HORIZONTALLY — the popup grows to ~580px and overflows the
   phone viewport. Force it back to a single vertical column. We override
   `flex-direction` only, never `display`, so Fomantic's open/close (none↔visible)
   keeps working; the `.ui.floating.dropdown` scope leaves page-level dropdowns and the
   desktop toolbar (a `.ui.horizontal.list`, not a `.ui.menu`) untouched. ---- */
.ui.menu .ui.floating.dropdown > .menu {
    flex-direction: column;
}
.ui.menu .ui.floating.dropdown > .menu > .item {
    width: 100%;
}
/* The clear ``x`` sits on the right edge of the input, next to but
   not overlapping the leading search glyph (which stays visible on
   the left as a visual cue). ``.ui.left.icon.input`` in Fomantic
   already handles the left icon; we pad the input on the right so
   the clear link has its own space without covering the text. */
.notifications-mail-search.has-clear input[type="search"] {
    padding-right: 2.2em !important;
}
.notifications-mail-search-clear {
    position: absolute;
    top: 50%;
    right: .6em;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999 !important;
    opacity: 1 !important;
    z-index: 2;
    display: inline-flex;
    align-items: center;
}
.notifications-mail-search-clear:hover {
    color: #555 !important;
}
.notifications-mail-search-clear .icon {
    margin: 0 !important;
}
.notifications-mail-unread-badge {
    margin-left: .3em !important;
    padding: .25em .5em !important;
    font-size: .78em !important;
}
.notifications-mail-unread-badge-empty {
    display: none !important;
}
.notifications-mail-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    min-height: 500px;
}
.notifications-mail-list {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
}
.notifications-mail-resizer {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    background: transparent;
    position: relative;
    margin: 0 .25em;
    transition: background-color .15s ease;
}
.notifications-mail-resizer::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(34,36,38,.12);
}
.notifications-mail-resizer:hover,
.notifications-mail-resizer:active { background: rgba(59,130,246,.08); }
.notifications-mail-resizer:hover::before,
.notifications-mail-resizer:active::before { background: rgba(59,130,246,.6); }
.notifications-mail-preview {
    flex: 1 1 auto;
    min-width: 0;
}
.notifications-mail-empty {
    min-height: 400px;
}
.notifications-mail-preview-legend {
    display: flex;
    justify-content: center;
    margin-top: .8em;
    font-size: .85em;
}
/* Hide the legend while the preview pane is on the empty placeholder — the
   colour codes are only meaningful once a notification is selected. Uses
   :has() so the state tracks HTMX swaps without any JS. */
.notifications-mail-preview:has(.notifications-mail-empty) .notifications-mail-preview-legend {
    display: none;
}
.notifications-mail-preview-legend .ui.horizontal.list {
    margin: 0;
}
.notifications-mail-rows {
    background: #fff;
    border: 1px solid rgba(34,36,38,.15);
    border-radius: .28571429rem;
    max-height: 70vh;
    overflow-y: auto;
}
.notifications-mail-group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .35em .8em;
    font-size: .72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
    background: #f5f7fa;
    border-bottom: 1px solid rgba(34,36,38,.1);
}
.notifications-mail-row {
    display: block !important;
    padding: .55em .7em !important;
    border-bottom: 1px solid rgba(34,36,38,.08);
    color: rgba(0,0,0,.87);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
.notifications-mail-row:last-child { border-bottom: none; }
.notifications-mail-row:hover { background: #f5f7fa; color: rgba(0,0,0,.87); }
.notifications-mail-row.selected { background: #e3f2fd; }
.notifications-mail-row.unread .notifications-mail-row-title { font-weight: 700; }
.notifications-mail-row-content { min-width: 0; }
.notifications-mail-row-line-top {
    display: flex;
    align-items: center;
    gap: .4em;
    min-width: 0;
}
.notifications-mail-unread-marker {
    flex: 0 0 auto;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: #2185d0;
    display: inline-block;
}
.notifications-mail-row:not(.unread) .notifications-mail-unread-marker {
    display: none;
}
.notifications-mail-row-event-pill {
    flex: 0 0 auto;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    display: inline-block;
}
.notifications-mail-row-event-pill.green { background: #21ba45; }
.notifications-mail-row-event-pill.red { background: #db2828; }
.notifications-mail-row-event-pill.orange { background: #f2711c; }
.notifications-mail-row-title {
    flex: 1 1 auto;
    font-size: .9em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.notifications-mail-row-attachment {
    flex: 0 0 auto;
    color: #888 !important;
    font-size: .85em !important;
}
.notifications-mail-row-draft {
    flex: 0 0 auto;
}
.notifications-mail-row-date {
    flex: 0 0 auto;
    font-size: .75em;
    white-space: nowrap;
    margin-left: auto;
}
.notifications-mail-row-snippet {
    margin-top: .2em;
    font-size: .8em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.notifications-mail-row.unread .notifications-mail-row-snippet { color: #555; }
.notifications-mail-pagination {
    margin-top: .5em;
    display: flex;
    justify-content: center;
}
.notifications-mail-pagination .ui.menu {
    float: none !important;
    margin: 0 !important;
    font-size: .9em !important;
    min-height: 0 !important;
}
.notifications-mail-pagination .ui.menu .item {
    padding: .55em .85em !important;
}
/* Hide the "Items per page" selector in the mail view — the fixed
   50-per-page default is enough for the dense row layout and the
   chooser only clutters the footer. */
.notifications-mail-pagination .ui.selection.dropdown {
    display: none !important;
}
.notifications-mail-shortcut-hint {
    margin-top: .4em;
    font-size: .72em;
    color: #999;
    text-align: center;
}
/* Compact header for the mail-preview right pane.

   The shared ``notification_rendering.html`` template normally wraps
   the meta row in a ``.ui.top.attached.segment`` that hosts a
   ``.ui.top.attached.label`` (absolute-positioned in Fomantic), so
   the segment needs enough padding-top to reserve space for the
   absolute label and the content flows awkwardly when the label is
   multi-line. In compact mode we override both: the segment loses
   all chrome and padding (it becomes a mere wrapper), and the label
   is forced back into the normal flow (``position: static``) with
   a tight single-line layout. The body below the segment therefore
   starts immediately beneath the one-line header bar, no matter how
   long the event title is. */
.notification-rendering-compact-segment {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.notification-rendering-compact-header {
    position: static !important;
    width: 100% !important;
    display: block !important;
    font-size: .78em !important;
    line-height: 1.35 !important;
    padding: .4em .7em !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: .28571429rem .28571429rem 0 0 !important;
}
.notification-rendering-compact-header .ui.right.floated.label {
    margin: 0 !important;
}
.notifications-mail-shortcut-hint kbd {
    display: inline-block;
    padding: 0 .35em;
    margin: 0 .1em;
    font-family: inherit;
    font-size: .85em;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: .25em;
    color: #555;
}
/* ---- Mobile mail view (single-pane master-detail) ----
   UA-driven (the server ``is_mobile`` flag + the ``.is-mobile`` layout class),
   NOT viewport-driven, to match the app-wide ``request.user_agent`` responsive
   strategy. On phones/tablets the side-by-side 2-pane layout is replaced by a
   full-width list whose rows navigate to a full-screen message page (see
   notifications_mail.html); the resizer and the preview pane are not rendered
   at all, so a row click is a plain navigation with a back control. */
.notifications-mail-layout.is-mobile .notifications-mail-list {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
}
.notifications-mail-mobile-detail {
    display: flex;
    flex-direction: column;
}
/* Back-to-list control on the mobile detail page. A Fomantic `ui blue button`
   (the app's action-button colour) with the same `arrow left` nav icon used in
   the page headers (e.g. event detail); only layout is set here. */
.notifications-mail-back {
    align-self: flex-start;
    margin-bottom: .7em;
}
@media (max-width: 768px) {
    .notifications-mail-layout {
        flex-direction: column;
    }
    .notifications-mail-list,
    .notifications-mail-preview {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0;
    }
    .notifications-mail-resizer {
        display: none;
    }
    .notifications-mail-rows {
        max-height: none;
    }
}

/* Export column picker — per-section "select all / none" toggle.
   A flex header keeps the small checkbox icon vertically centred with the
   section title and prevents the old floated button from wrapping under a
   long title. The icon mirrors the section state (check = all, minus =
   partial, empty square = none) and toggles every selectable column on click. */
.export-section-header.ui.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}
/* Selector deliberately mirrors Fomantic's `.ui.header > i.icon` (0,3,1) and adds
   classes so it wins — otherwise the icon inherits font-size:1.5em / table-cell. */
.export-section-header.ui.header > i.export-section-toggle.icon {
    display: inline-block;
    margin: 0;
    width: auto;
    height: auto;
    font-size: 1.15em;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 120ms ease-in-out;
}
.export-section-header.ui.header > i.export-section-toggle.icon:hover,
.export-section-header.ui.header > i.export-section-toggle.icon:focus {
    color: #2185d0; /* Fomantic primary blue, matches the Export action button */
    outline: none;
}