/* Staff pages: the back-end inspiration's look, exactly (design owner, 29 Sep 2026). Loaded LAST on the staff pages
   (staff/coordinator/*.html) and only there: the public site and the volunteer and member pages keep ICCF's sizes (16px
   text, 48px targets), made for phones outdoors. The inspiration's values, each about 1px larger for
   ICCF's colours (design owner, 29 Sep 2026: the exact sizes read too small): Poppins; 15px text (14.5px medium labels,
   14px table cells, 13px table heads and badges, 12px widget "View All"); medium (500) headings, page title 19px, card
   titles 19px; 45px inputs and form buttons, 14px regular button text; 1px light borders; 5px corners; its faint card and
   widget shadows. ICCF's colours stay. WCAG 2.1 AA still holds: text contrast is unchanged, and the small targets keep a
   48px tap area where the page had one (::before). The app shell keeps its layout; its text takes the inspiration's
   sizes, each 1px larger (menu items 14px, sub-items 13px, section headings 12px, the account name 13px). */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
}

.app_body {
  --staff-font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --staff-shadow-card: 0 0.75rem 1.5rem rgb(18 38 63 / 0.03);
  --staff-shadow-widget: 0 4px 10px rgb(56 65 74 / 0.06);
  --staff-radius: 5px;
  font-family: var(--staff-font);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Everything inside the page takes the inspiration's font and 15px text */
.app_body :is(p, li, a, dt, dd, td, th, label, legend, small, button, input, select, textarea, summary, h1, h2, h3, h4) {
  font-family: var(--staff-font);
}

.app_body :is(p, li, dt, dd, legend, small, .profile_help, .profile_check__label, .banner, .banner__title, .banner__body,
  .board p, .board li, .acc, .acc_chips, .acc_pages__count, .msg, .msg p, .msg dd, .msg dt, .msg .profile_help,
  .pd, .pd p, .pd dt, .pd dd, .pd .profile_help, .pd_modal p, .pd_modal .profile_help, .person p, .person .profile_help) {
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ---------- Titles: medium weight ---------- */

.app_body .app_title {
  font-size: 1.1875rem;
  line-height: 1.4;
  font-weight: 500;
}

.app_body .app_title_row {
  margin-bottom: var(--space-lg);
}

.app_body .app_back {
  min-height: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
}

.app_body .app_back::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.app_body :is(.board_card__title, .msg_card__title, .acc_panel__title, .pd_modal__title) {
  font-family: var(--staff-font);
  font-size: 1.1875rem;
  line-height: 1.4;
  font-weight: 500;
}

.app_body .profile_subheading {
  font-family: var(--staff-font);
  font-size: 1.0625rem;
  font-weight: 500;
}

.app_body :is(.pd_info dd, .msg_via__name, .acc_name, .acc_chip, .pd_verified, .pd_modal__lead) {
  font-weight: 500;
}

/* ---------- Cards (the inspiration's "card"): no border, 5px corners, a faint shadow; 16px inside ---------- */

.app_body :is(.board_card, .acc_card, .msg_card, .board_note) {
  border-radius: var(--staff-radius);
  box-shadow: var(--staff-shadow-card);
}

.app_body :is(.board_card, .board_note) {
  padding: 16px;
}

/* The card header: the title on its own row with a line under it */
.app_body .pd_main > .board_card__title,
.app_body .pd_side .board_card > .board_card__title {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(140 140 140 / 0.125);
}

.app_body .msg_card__header,
.app_body .msg_card__footer {
  padding: 12px 16px;
}

.app_body .msg_card__body {
  padding: 16px 16px 4px;
}

/* ---------- Widgets (the inspiration's "widget-two"): white, 5px, its shadow, 15px inside; a 65px icon square with a
   42px icon; the number 23px medium; the label 15px; "View All" 12px, top right ---------- */

.app_body .board_two {
  gap: 20px;
  padding: 15px;
  background-color: var(--color-bg);
  border: 0;
  border-radius: var(--staff-radius);
  box-shadow: var(--staff-shadow-widget);
}

.app_body .board_two__icon {
  width: 65px;
  height: 65px;
  border-radius: var(--staff-radius);
}

.app_body .board_two__icon .icon {
  width: 42px;
  height: 42px;
}

.app_body .board_two__value {
  font-family: var(--staff-font);
  font-size: 1.4375rem;
  line-height: 1.4;
  font-weight: 500;
}

.app_body .board_two__title {
  font-size: 0.9375rem;
}

.app_body .board_two__link {
  top: 5px;
  right: 5px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  border-radius: 4px;
}

/* ---------- Buttons: 15px regular; form buttons 45px; the large action buttons ("btn-lg"); small ones ("btn-sm") ---------- */

.app_body :is(.person_button, .msg_button, .acc_button, .acc_notify, .pd_button, .acc_tool, .pd_login, .pd_outline, .acc_pages__link) {
  font-family: var(--staff-font);
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 3.2px;
}

.app_body :is(.person_button, .msg_button, .acc_button) {
  min-height: 45px;
  padding: 6px 12px;
  border-width: 1px;
}

.app_body .acc_notify {
  min-height: 0;
  padding: 6px 12px;
}

.app_body .acc_notify strong {
  font-weight: 500;
}

/* The large action buttons (Add task … Ban Account): the inspiration's btn-lg with 15px text and its coloured shadow */
.app_body .pd_button {
  min-height: 0;
  padding: 8px 16px;
  line-height: 1.5;
  box-shadow: 0 5px 10px 0 color-mix(in srgb, var(--tone) 35%, transparent);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

/* Hover (the inspiration's btn--shadow): the button lifts 2px, its shadow grows and its colour darkens a little; the text
   stays white and isn't underlined */
@media (hover: hover) {
  .app_body .pd_button:hover {
    text-decoration: none;
    color: var(--color-bg);
    background-color: color-mix(in srgb, var(--tone) 88%, #000);
    box-shadow: 0 8px 15px 0 color-mix(in srgb, var(--tone) 45%, transparent);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app_body .pd_button {
    transition: none;
  }

  .app_body .pd_button:hover {
    transform: none;
  }
}

.app_body .pd_button.is_small {
  min-height: 0;
  padding: 6px 12px;
  box-shadow: none;
}

@media (hover: hover) {
  .app_body .pd_button.is_small:hover {
    box-shadow: none;
    transform: none;
  }
}

.app_body .pd_button .icon,
.app_body .pd_login .icon {
  width: 16px;
  height: 16px;
}

.app_body .pd_login {
  padding: 4px 8px;
  line-height: 1.5;
  border-radius: 4px;
}

.app_body .pd_login::before {
  inset: -9px -2px;
}

.app_body .acc_tool {
  min-height: 45px;
  padding: 0 14px;
  border-color: var(--color-rule);
}

.app_body .acc_icon_btn {
  width: 31px;
  height: 31px;
  border-radius: 4px;
  position: relative;
}

.app_body .acc_icon_btn::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.app_body .acc_menu__item {
  min-height: 0;
  padding: 4px 16px;
  font-size: 0.9375rem;
}

/* ---------- Forms: labels 14.5px medium; 45px inputs and selects with 15px text, 1px light border, 5px corners ---------- */

.app_body .profile_group {
  margin-bottom: 15px;
}

.app_body :is(.profile_label, .msg .profile_label, .pd .profile_label, .person .profile_label, .acc_panel .profile_label, .pd_modal .profile_label) {
  margin-bottom: 5px;
  font-size: 0.90625rem;
  line-height: 1.5;
  font-weight: 500;
}

.app_body :is(.profile_input, .profile_select) {
  font-family: var(--staff-font);
  font-size: 0.9375rem;
  border: 1px solid #ced4da;
  border-radius: var(--staff-radius);
}

.app_body .profile_input {
  padding: 10px 20px;
  line-height: 1.5;
}

.app_body .profile_input:not(textarea):not([type="file"]),
.app_body .profile_select,
.app_body .acc_select .profile_select,
.app_body .acc_search .profile_input {
  height: 45px;
  min-height: 0;
}

.app_body .profile_select {
  padding: 0 32px 0 20px;
}

.app_body textarea.profile_input {
  min-height: 100px;
}

.app_body :is(.profile_input, .profile_select):focus {
  border-color: var(--color-primary);
  box-shadow: 0 3px 9px rgb(50 50 9 / 0.05), 3px 4px 8px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.app_body .profile_input::placeholder {
  font-size: 0.9375rem;
}

.app_body .profile_input[type="file"] {
  line-height: 45px;
}

.app_body .profile_input[type="file"]::file-selector-button {
  min-height: 31px;
  font-weight: 400;
  line-height: 1.5;
}

.app_body .acc_search__btn {
  border-width: 1px;
  border-color: #ced4da;
}

.app_body .profile_help {
  font-size: 0.875rem;
}

.app_body .field_error {
  font-family: var(--staff-font);
  font-size: 0.875rem;
  font-weight: 500;
}

.app_body .field_error .icon {
  width: 16px;
  height: 16px;
}

.app_body .msg_editor {
  border-width: 1px;
  border-color: #ced4da;
  border-radius: var(--staff-radius);
}

.app_body .msg_editor__button {
  width: 36px;
  height: 36px;
}

.app_body .msg_editor__button .icon {
  width: 16px;
  height: 16px;
}

.app_body .msg_editor__box.profile_input {
  min-height: 12rem;
}

.app_body .msg_via__card {
  min-height: 0;
  border-width: 1px;
  border-color: #ced4da;
  border-radius: var(--staff-radius);
}

/* ---------- Tabs, chips, page links ---------- */

.app_body .acc_tab {
  min-height: 0;
  padding: 10px 16px;
  font-size: 0.9375rem;
}

.app_body .acc_tab[aria-current="page"] {
  font-weight: 500;
}

.app_body .acc_chip {
  font-size: 0.9375rem;
  border-radius: var(--staff-radius);
}

.app_body .acc_pages__link {
  min-height: 0;
  padding: 8px 15px;
  color: var(--color-text-muted);
  border-color: #dee2e6;
  border-radius: var(--staff-radius);
}

.app_body .acc_pages__link.is_current {
  color: var(--color-bg);
}

/* ---------- Tables (the inspiration's "table--light style--two"): the head on the primary colour, 13px white; the cells
   14px medium, centred, 15px × 25px, a light line between rows ---------- */

@media (min-width: 768px) {
  .app_body .acc_table th {
    padding: 15px 25px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-bg);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-primary);
    border: 0;
  }

  .app_body .acc_table td {
    padding: 15px 25px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text); /* the inspiration's grey read faint on ICCF's white (design owner, 29 Sep 2026) */
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid #e8e8e8;
  }
}

.app_body .acc_table td {
  font-size: 0.875rem;
}

.app_body .acc_table :is(td span, td p, .acc_name) {
  font-size: 0.9375rem;
}

.app_body .acc_also {
  font-size: 0.8125rem;
}

/* ---------- Badges (the inspiration's badge--*): a pill, 13px, the colour's line and a 10% ground ---------- */

.app_body .badge {
  padding: 2px 15px;
  font-family: var(--staff-font);
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 400;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.app_body .badge.is_success { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); }
.app_body .badge.is_warning { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.app_body .badge.is_danger { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.app_body .badge.is_info { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.app_body .badge.is_neutral { background-color: color-mix(in srgb, var(--color-text) 10%, transparent); }

/* Counters in the menu stay as they are (the shell) */

/* ---------- Flash and error banners: 15px ---------- */

.app_body .banner {
  padding: 12px 16px;
  border-radius: var(--staff-radius);
}

.app_body .banner__title {
  font-weight: 500;
}

.app_body .banner__title .icon {
  width: 16px;
  height: 16px;
}

/* ---------- Dialogs and side panels (the inspiration's modal and offcanvas) ---------- */

.app_body :is(.pd_modal__box) {
  border-radius: 8px;
}

.app_body :is(.pd_modal__head, .acc_panel__head) {
  padding: 16px;
  border-bottom-color: #dee2e6;
}

.app_body :is(.pd_modal__close, .acc_panel__close) {
  width: 32px;
  height: 32px;
  position: relative;
}

.app_body :is(.pd_modal__close, .acc_panel__close)::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.app_body .pd_modal__foot {
  padding: 12px 16px;
  border-top-color: #dee2e6;
}

.app_body .pd_modal__question {
  font-family: var(--staff-font);
  font-size: 1.4375rem;
  font-weight: 500;
}

/* ---------- Person page (6.20): the inspiration's detail blocks ---------- */

.app_body .pd_verified {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  font-size: 1.0625rem;
  border-bottom: 1px solid rgb(140 140 140 / 0.125);
}

.app_body .pd_verified .icon {
  width: 18px;
  height: 18px;
}

/* The inspiration's 180px square photo, 5px corners; the upload badge in its corner */
.app_body .pd_photo {
  width: 180px;
}

.app_body .pd_photo__picture {
  border-radius: var(--staff-radius);
}

.app_body .pd_photo__badge {
  right: 6px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  border-radius: var(--staff-radius);
}

.app_body .pd_photo__badge .icon {
  width: 16px;
  height: 16px;
}

.app_body .pd_photo__help {
  font-size: 0.875rem;
}

.app_body .pd_info div {
  padding: 8px 0;
}

.app_body .pd_info dt {
  font-size: 0.9375rem;
}

.app_body .pd_info dd {
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* The inspiration's toggle ("bootstrap toggle"): 45px, the word on its colour, its dark handle (26px, full height; ICCF's
   near-black), 5px corners */
.app_body .pd_switch__control {
  min-height: 45px;
  padding: 0;
  gap: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: var(--staff-radius);
  overflow: hidden;
}

.app_body .pd_switch__handle {
  align-self: stretch;
  width: 26px;
  height: auto;
  background-color: var(--color-text);
  border: 0;
  border-radius: var(--staff-radius);
}

.app_body .pd_actions {
  gap: 16px;
}


/* ---------- The message box is a writing area, not a one-line field ---------- */

.app_body .msg_editor__box.profile_input:not(textarea) {
  height: auto;
  min-height: 12rem;
}

/* ---------- Checkboxes and radio buttons: regular 15px labels (the inspiration's form-check) ---------- */

.app_body .profile_check__label {
  min-height: 0;
  padding: 4px 0 4px 10px;
  font-weight: 400;
}

.app_body .profile_check__input {
  width: 16px;
  height: 16px;
  margin-top: 8px;
}

.app_body .profile_check__input:checked[type="checkbox"]::before {
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
}

.app_body .profile_check__input:checked[type="radio"]::before {
  width: 8px;
  height: 8px;
}

/* ---------- The app shell's text (the inspiration's sidebar and top bar sizes; the layout is unchanged) ---------- */

.app_shell :is(.app_menu__link, .app_menu__heading, .app_dropdown__toggle, .app_dropdown__item) {
  font-family: var(--staff-font, Poppins, system-ui, sans-serif);
}

.app_shell .app_menu__link {
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}

.app_shell .app_submenu .app_menu__link {
  font-size: 0.8125rem;
}

.app_shell .app_menu__icon {
  font-size: 1.1875rem;
}

.app_shell .app_submenu .app_menu__icon {
  font-size: 0.8125rem;
}

.app_shell .app_menu__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.app_shell .app_dropdown__toggle {
  font-size: 0.8125rem;
}

/* the top bar's icon buttons (the bell is also a dropdown toggle): the inspiration's 1.5rem icons */
.app_shell .app_topbar__icon {
  font-size: 1.5rem;
}

.app_shell .app_dropdown__item {
  font-size: 0.9375rem;
}

.app_shell .app_menu__count {
  padding: 1px 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 3px;
}

.app_body .pd_switch__meta {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.app_body .pd_status_who {
  font-size: 0.8125rem;
}

/* ---------- Task tables and the Task history (3 Oct 2026, design owner: "small square boxes, smaller text, since the boxes
   already take space"): status, message and role badges as small squares, 12px ---------- */
.app_body :is(.task_table, .task_history) .badge {
  padding: 1px 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 3px;
}

/* ---------- The app version at the foot of the sidebar (5 Oct 2026; staff only): the inspiration's version band, centred,
   in capitals, on a band darker than the sidebar, under the scrolling menu. Its name in the brand colour and the version
   in green become ICCF's light blue and light green (both over 10:1 on the band). ---------- */

.app_shell .app_version {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 16px;
  font-family: var(--staff-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  background-color: color-mix(in srgb, var(--color-text) 45%, var(--color-primary-dark));
}

.app_shell .app_version__name {
  color: var(--color-primary-bg);
}

.app_shell .app_version__number {
  color: var(--color-success-bg);
}