/* The 2026 theme: the look of the redesigned pages (rounded controls, 14px text, the dark sidebar) applied to the
   whole admin on top of join.min.css. Every rule hangs off the theme-2026 class on <body>, so a page without the
   class looks exactly as it did. join.min.css itself stays untouched. */

.theme-2026 {
    --t-ink: #222;
    --t-muted: #5f5f5f;
    --t-border: #e3e3de;
    --t-control-border: #ced4da;
    --t-yellow: #f7d24a;
    --t-focus: 0 0 0 .2rem rgba(247, 210, 74, .55);
    --t-radius: 4px;
    --t-radius-menu: 8px;
    --t-radius-card: 10px;
    --t-shadow-menu: 0 12px 32px rgba(0, 0, 0, .14);
    --t-sidebar: #2b2b2b;
    --t-sidebar-ink: #e8e8e8;
    --t-sidebar-muted: #b8b8b8;
    --t-sidebar-hover: rgba(255, 255, 255, .08);

    font-size: .875rem;
    line-height: 1.45;
    color: var(--t-ink);
}

/* Controls: 14px text in the same 38px height, with corners. join.min.css squares every button and input. */
.theme-2026 .btn,
.theme-2026 button { border-radius: var(--t-radius); }
.theme-2026 .btn { padding: .469rem .75rem; font-size: .875rem; line-height: 1.5; }
.theme-2026 .btn-sm { padding: .25rem .5rem; font-size: .8125rem; }
.theme-2026 .btn-lg { padding: .5rem 1rem; font-size: 1rem; }
.theme-2026 .form-control,
.theme-2026 .custom-select { height: calc(1.5em + .938rem + 2px); padding: .469rem .75rem; font-size: .875rem; border-radius: var(--t-radius); }
.theme-2026 .form-control-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .8125rem; }
/* Some pages force 16px inputs with !important in their own <style> (campaign-edit.html); outrank them here. */
.theme-2026 .form-control { font-size: .875rem !important; }
.theme-2026 .form-control-sm { font-size: .8125rem !important; }
.theme-2026 textarea.form-control,
.theme-2026 select.form-control[multiple],
.theme-2026 select.form-control[size] { height: auto; }
.theme-2026 .input-group-text { font-size: .875rem; }
.theme-2026 .nav-tabs > li > a { border-radius: var(--t-radius) var(--t-radius) 0 0; }
.theme-2026 .main-content-section .main-content .nav-pills li a { border-radius: 6px; }

/* Focus: no highlight anywhere, by choice. Bootstrap 4's script hands focus back to the button that opened a menu or
   dialog, and Chrome decides for itself whether that focus came from the keyboard, so rings appeared after clicks and
   stayed. The cost is that someone moving with Tab cannot see where they are. A text field still darkens its border
   while it is being typed in, so the cursor's field is plain. */
.theme-2026 :focus,
.theme-2026 :focus-visible { outline: none !important; box-shadow: none !important; }
.theme-2026 .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none !important; }
/* Bootstrap also recolours a focused button, and a clicked button keeps focus, so it stayed grey or darker after the
   click. Focus alone now leaves a button as it was; hovering and pressing still show. */
.theme-2026 .btn-primary:focus:not(:hover):not(:active) { background-color: #222; border-color: #222; }
.theme-2026 .btn-secondary:focus:not(:hover):not(:active) { background-color: #f7d24a; border-color: #f7d24a; }
.theme-2026 .btn-light:focus:not(:hover):not(:active) { background-color: #f8f9fa; border-color: #f8f9fa; }
.theme-2026 .btn-link:focus:not(:hover) { text-decoration: none; }
.theme-2026 .form-control:focus,
.theme-2026 .custom-select:focus { border-color: var(--t-ink); }
/* select2's searchable lists are fields too; admin_base.html gives them Bootstrap's grey ring */
.theme-2026 .select2-container--bootstrap.select2-container--focus .select2-selection,
.theme-2026 .select2-container--bootstrap.select2-container--open .select2-selection { border-color: var(--t-ink); box-shadow: none !important; }

/* Surfaces */
.theme-2026 .card { border-radius: var(--t-radius-menu); }
.theme-2026 .modal-content { border-color: var(--t-border); border-radius: var(--t-radius-card); }
.theme-2026 .alert { border-radius: var(--t-radius-menu); }
.theme-2026 .dropdown-menu { padding: 6px; font-size: .875rem; border-color: var(--t-border); border-radius: var(--t-radius-menu); box-shadow: var(--t-shadow-menu); }
.theme-2026 .dropdown-item { padding: .4rem .75rem; border-radius: 6px; }

/* Type: Noto Sans for names and small numbers, which people scan. Montserrat is wide and geometric, so it is
   kept for the sidebar brand and big figures (22px and up) only. The page stylesheets set Montserrat on these. */
.theme-2026 .list-name,
.theme-2026 .list-name:hover,
.theme-2026 td.list-number,
.theme-2026 .dash-campaign-title,
.theme-2026 .dash-campaign-title:hover,
.theme-2026 .dash-days,
.theme-2026 .company-campaigns-link,
.theme-2026 .company-campaigns-link:hover { font-family: "Noto Sans", sans-serif; }

/* select2 sets its own square corners with !important in admin_base.html; these win by being more specific. */
.theme-2026 .select2-selection { font-size: .875rem !important; }
.theme-2026 .select2-container--bootstrap .select2-selection,
.theme-2026 .select2-container--bootstrap .select2-selection.form-control,
.theme-2026 .select2-container--bootstrap .select2-search--dropdown .select2-search__field,
.theme-2026 .select2-dropdown { border-radius: var(--t-radius) !important; }

/* The app shell (admin_base.html, shell/*.html). One <nav popover> is the sidebar on a wide screen and the menu a
   phone opens over the page, so the browser handles opening, closing on Escape or a tap beside it, focus, the
   backdrop and stacking. The sidebar fills the window and stays put while the content scrolls; the status bar ends
   the content column. Measures follow Carbon's UI shell and Material's drawer: a ~230px panel, 36px rows, 16px icons,
   items grouped under small headings. On a medium screen the sidebar narrows to a rail of icons by itself, rather
   than asking anyone to collapse it. */
.theme-2026 .shell-nav {
    flex-direction: column;
    margin: 0;
    padding: 12px;
    border: 0;
    background-color: var(--t-sidebar);
    color: var(--t-sidebar-ink);
}
/* Spacing runs on a 4/8px grid and steps up with each level: 4px between items, 24px between sections, and the brand
   one step further off (24px plus its own height). Everything shares two vertical lines: icons, the logo and the
   avatar are centred 34px in, and every label, the brand name and the account name start at 56px. The brand row is
   48px tall so its centre meets the page title's. */
.theme-2026 .shell-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 0 24px; }
.theme-2026 .shell-brand { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 6px; color: #fff; text-decoration: none; }
.theme-2026 .shell-brand:hover { color: #fff; text-decoration: none; }
.theme-2026 .shell-brand img { flex: none; width: 32px; height: auto; transition: filter .2s ease; }
/* A soft glow in the brand yellow when pointing at the logo. */
.theme-2026 .shell-brand:hover img { filter: drop-shadow(0 0 6px rgba(247, 210, 74, .55)); }
/* The configured name and tagline carry ml-2 for the old sidebar; here the gap places them on the label line. */
.theme-2026 .shell-brand-text > * { margin-left: 0 !important; }
.theme-2026 .shell-brand-text h5 { margin: 0; font-family: Montserrat, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: #fff; }
.theme-2026 .shell-brand-text p { margin: 0; font-size: 11px; color: var(--t-sidebar-muted); white-space: nowrap; }
.theme-2026 .shell-icon-button { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--t-radius-menu); background: transparent; color: #fff; cursor: pointer; }
.theme-2026 .shell-icon-button:hover { background-color: var(--t-sidebar-hover); }

/* Sections scroll on their own when the window is short; the account below them never does, so its menu is not cut. */
.theme-2026 .shell-sections { display: flex; flex: 1 1 auto; flex-direction: column; gap: 24px; min-height: 0; margin: 0 -4px; padding: 0 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.theme-2026 .shell-section-title { margin: 0 0 4px; padding: 0 12px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 16px; text-transform: uppercase; color: var(--t-sidebar-muted); }
.theme-2026 .shell-links { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.theme-2026 .shell-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-radius: var(--t-radius-menu); background: transparent; color: var(--t-sidebar-ink); font: inherit; font-size: 14px; line-height: 20px; text-align: left; text-decoration: none; cursor: pointer; list-style: none; }
.theme-2026 .shell-link::-webkit-details-marker { display: none; }
.theme-2026 .shell-link:hover { background-color: var(--t-sidebar-hover); color: #fff; text-decoration: none; }
.theme-2026 .shell-link[aria-current="page"] { background-color: var(--t-yellow); color: var(--t-ink); font-weight: 600; }
.theme-2026 .shell-link > i { flex: none; width: 20px; font-size: 16px; text-align: center; }
.theme-2026 .shell-sublinks { margin: 2px 0 4px; padding: 0 0 0 32px; list-style: none; }
.theme-2026 .shell-sublink { display: block; padding: 7px 12px; border-radius: 6px; color: var(--t-sidebar-ink); text-decoration: none; }
.theme-2026 .shell-sublink:hover { background-color: var(--t-sidebar-hover); color: #fff; text-decoration: none; }
.theme-2026 .shell-sublink[aria-current="page"] { color: var(--t-yellow); font-weight: 600; }

/* The account: who is signed in, with Settings and Log out behind it. */
.theme-2026 .shell-account { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.theme-2026 .shell-account-button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 8px 8px 6px; border: 0; border-radius: var(--t-radius-menu); background: transparent; color: var(--t-sidebar-ink); font: inherit; text-align: left; cursor: pointer; }
.theme-2026 .shell-account-button:hover { background-color: var(--t-sidebar-hover); }
/* Centred on the icon column. The account sits under its own divider, so its name may start a little right of the
   labels to give the avatar the 12px the Users list gives it too. */
.theme-2026 .shell-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #4a4a4a; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.theme-2026 .shell-account-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.25; }
.theme-2026 .shell-account-name { overflow: hidden; color: #fff; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.theme-2026 .shell-account-hint { font-size: 12px; color: var(--t-sidebar-muted); }
.theme-2026 .shell-account-caret { flex: none; color: var(--t-sidebar-muted); }
.theme-2026 .shell-account .dropdown-menu { min-width: 100%; }
/* On the account's own pages (Settings) the avatar takes the yellow the menu gives the current page. */
.theme-2026 .shell-account-button.is-current .shell-avatar { background-color: var(--t-yellow); color: var(--t-ink); }
/* A photo instead of initials: it fills the circle, and on the account's pages gets a yellow ring instead. */
.theme-2026 img.shell-avatar { display: block; object-fit: cover; background-color: #4a4a4a; }
.theme-2026 .shell-account-button.is-current img.shell-avatar { box-shadow: 0 0 0 2px var(--t-sidebar), 0 0 0 4px var(--t-yellow); }
.theme-2026 .shell-account-button.is-current .shell-account-hint { color: var(--t-sidebar-ink); }


@media screen and (min-width: 992px) {
    .theme-2026 .shell-bar,
    .theme-2026 .shell-close { display: none; }
    /* The popover's own box (fixed, centred, hidden until opened) gives way to an ordinary sidebar. */
    .theme-2026 .shell-nav { position: sticky; inset: auto; top: 0; z-index: 20; display: flex; flex: none; align-self: flex-start; width: 232px; height: 100vh; height: 100dvh; overflow: visible; }
}

/* A medium screen: a rail of icons. Headings become dividers; each label shows as a tip on hover or keyboard focus and
   stays readable to screen readers. */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .theme-2026 .shell-nav { width: 72px; padding-inline: 12px; }
    .theme-2026 .shell-brand { padding: 0; }
    .theme-2026 .shell-brand-text,
    .theme-2026 .shell-sublinks,
    .theme-2026 .shell-account-text,
    .theme-2026 .shell-account-caret { display: none; }
    .theme-2026 .shell-sections { gap: 12px; overflow: visible; }
    .theme-2026 .shell-section + .shell-section { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
    .theme-2026 .shell-section-title,
    .theme-2026 .shell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .theme-2026 .shell-link,
    .theme-2026 .shell-account-button { justify-content: center; padding: 8px; }
    .theme-2026 .shell-link:hover::after,
    .theme-2026 .shell-link:focus-visible::after,
    .theme-2026 .shell-account-button:hover::after,
    .theme-2026 .shell-account-button:focus-visible::after { content: attr(data-label); position: absolute; top: 50%; left: calc(100% + 10px); z-index: 30; padding: 4px 8px; border-radius: var(--t-radius); background-color: var(--t-ink); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; white-space: nowrap; pointer-events: none; transform: translateY(-50%); }
    .theme-2026 .shell-account .dropdown-menu { min-width: 10rem; }
}

/* On a phone: a dark top bar, and the menu slides in from the right, the side of the button that opens it. */
@media screen and (max-width: 991px) {
    .theme-2026 .shell-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; background-color: var(--t-sidebar); }
    /* The top bar is a title, not a column: the logo a little larger and the name a comfortable 10px from it. */
    .theme-2026 .shell-bar .shell-brand { gap: 10px; padding: 0; }
    .theme-2026 .shell-bar .shell-brand img { width: 36px; }
    .theme-2026 .shell-nav-head .shell-brand { display: none; }
    .theme-2026 .shell-nav-head { justify-content: flex-end; min-height: 0; margin: 0 -4px 8px 0; }
    /* Fingers need bigger targets than a pointer: 44px rows, as Apple's guidelines and WCAG 2.5.5 ask. */
    .theme-2026 .shell-link,
    .theme-2026 .shell-sublink { min-height: 44px; }
    .theme-2026 .shell-nav { inset: 0 0 0 auto; width: min(300px, 85vw); height: 100dvh; max-height: none; overflow: hidden; box-shadow: var(--t-shadow-menu); transform: translateX(100%); }
    .theme-2026 .shell-nav:popover-open { display: flex; transform: none; }
    .theme-2026 .shell-nav::backdrop { background-color: rgba(0, 0, 0, 0); }
    .theme-2026 .shell-nav:popover-open::backdrop { background-color: rgba(0, 0, 0, .4); }
    /* Animated only while it opens or closes (admin_base.html marks it), so resizing the window across the breakpoint
       does not slide it out of view. */
    .theme-2026 .shell-nav.is-sliding { transition: transform .3s ease, display .3s allow-discrete, overlay .3s allow-discrete; }
    .theme-2026 .shell-nav.is-sliding::backdrop { transition: background-color .3s, display .3s allow-discrete, overlay .3s allow-discrete; }
    .theme-2026:has(.shell-nav:popover-open) { overflow: hidden; }
}
@starting-style {
    .theme-2026 .shell-nav:popover-open { transform: translateX(100%); }
    .theme-2026 .shell-nav:popover-open::backdrop { background-color: rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .theme-2026 .shell-brand img,
    .theme-2026 .shell-nav.is-sliding,
    .theme-2026 .shell-nav.is-sliding::backdrop { transition: none; }
}