/*
 * Wardstow skin for the chapter portals (admin and members).
 *
 * Loaded after the theme bundles and any page stylesheet. Every rule is scoped
 * under html.ws (the head template sets the class), which outranks the theme's
 * own skin selectors without !important. The two portals carry byte-identical copies of this file; change
 * both together.
 *
 * One accent per tenant: the head template sets --ws-accent from
 * APP_BRAND_COLOR (a validated hex, default #1F4E5F). Everything else here is
 * fixed, so no chapter's colour can clash with the rest of the page.
 *
 * Fonts are self-hosted (../fonts/wardstow/): Public Sans and Source Serif 4,
 * both under the SIL Open Font License 1.1. No request leaves the portal.
 */

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/wardstow/public-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/wardstow/public-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/wardstow/source-serif-4-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/wardstow/source-serif-4-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ws-accent: #1F4E5F;
    --ws-accent-strong: color-mix(in srgb, var(--ws-accent) 80%, #000);
    --ws-accent-soft: color-mix(in srgb, var(--ws-accent) 10%, #fff);
    --ws-ground: #f7f6f3;
    --ws-surface: #ffffff;
    --ws-sidebar: #efece6;
    --ws-line: #e4e1db;
    --ws-line-strong: #cfcac1;
    --ws-ink: #1a1c1f;
    --ws-text: #33373c;
    --ws-muted: #5b6169;
    --ws-danger: #a3362b;
    --ws-good-fill: #e2efe6;
    --ws-good-ink: #245a37;
    --ws-warn-fill: #f7e8d3;
    --ws-warn-ink: #7a4510;
    /* Status colours for charts and page accents (assets/js/wardstow-charts.js):
       each differs from its neighbours in lightness, not only hue. */
    --ws-good: #2F7A4A;
    --ws-info: #4A74A8;
    --ws-warn: #C07A2C;
    --ws-bad: #A3362B;
    --ws-neutral: #80858C;
    --ws-sans: 'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ws-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
}

/* ---- Ground and type ---------------------------------------------------- */

html.ws body {
    background: var(--ws-ground);
    color: var(--ws-text);
    font-family: var(--ws-sans);
}
html.ws body .page-content-wrapper,
html.ws body .page-content,
html.ws body .page-wrapper {
    background: var(--ws-ground);
    color: var(--ws-text);
}
html.ws body h1,
html.ws body h2,
html.ws body h3,
html.ws body h4,
html.ws body h5,
html.ws body h6,
html.ws body .h1,
html.ws body .h2,
html.ws body .h3,
html.ws body .h4,
html.ws body .h5 {
    color: var(--ws-ink);
    font-family: var(--ws-sans);
}
html.ws body .subheader-title,
html.ws body .page-content h1 {
    font-family: var(--ws-serif);
    font-weight: 600;
    color: var(--ws-ink);
    letter-spacing: 0;
}
html.ws body .subheader-title small,
html.ws body .subheader-title .fw-300 {
    font-family: var(--ws-serif);
    font-weight: 600;
}
html.ws body .subheader-icon {
    display: none;
}
html.ws body a,
html.ws body a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--ws-accent);
}
html.ws body a:hover {
    color: var(--ws-accent-strong);
}
html.ws body .text-muted,
html.ws body .help-block,
html.ws body small.text-muted {
    color: var(--ws-muted) !important;
}

/* ---- Sidebar ------------------------------------------------------------- */

html.ws body .page-sidebar,
html.ws body .page-sidebar .primary-nav,
html.ws body .nav-footer {
    background: var(--ws-sidebar);
    background-image: none;
    box-shadow: none;
    border-right: 1px solid var(--ws-line);
}
html.ws body .page-logo {
    background: var(--ws-sidebar);
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--ws-line);
}
html.ws body .page-logo-text {
    color: var(--ws-ink);
    font-weight: 600;
}
html.ws body .page-logo .fa-angle-down {
    color: var(--ws-muted) !important;
}
/* The starfield profile card; the header's avatar menu carries the account. */
html.ws body .page-sidebar .info-card {
    display: none;
}
html.ws body .nav-title {
    color: var(--ws-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
html.ws body .nav-menu li a {
    color: var(--ws-text);
    border-radius: 8px;
    margin: 1px 8px;
    padding-left: 12px;
}
html.ws body .nav-menu li a > [class*='fa-'],
html.ws body .nav-menu li a > .ni {
    color: var(--ws-muted);
}
html.ws body .nav-menu li a:hover {
    color: var(--ws-ink);
    background: rgba(26, 28, 31, 0.05);
}
html.ws body .nav-menu li.active > a {
    color: var(--ws-accent);
    font-weight: 600;
    background: var(--ws-surface);
    box-shadow: 0 1px 0 var(--ws-line);
}
html.ws body .nav-menu li.active > a > [class*='fa-'] {
    color: var(--ws-accent);
}
html.ws body .nav-menu li.active > a::before,
html.ws body .nav-menu li a > .dl-ref,
html.ws body .nav-menu li > ul li.active > a::before {
    display: none;
}
html.ws body .nav-menu li > ul {
    background: transparent;
}
html.ws body .nav-menu li > ul li a {
    color: var(--ws-text);
}
html.ws body .nav-menu li.open > a {
    color: var(--ws-ink);
}
html.ws body .nav-menu b.collapse-sign {
    color: var(--ws-muted);
}
html.ws body .nav-menu li a .badge {
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
}

/* ---- Header -------------------------------------------------------------- */

html.ws body .page-header {
    background: #fbfaf8;
    border-bottom: 1px solid var(--ws-line);
    box-shadow: none;
    color: var(--ws-text);
}
html.ws body .page-header .header-icon:not(.btn),
html.ws body .page-header .header-btn {
    color: var(--ws-text);
    border-color: var(--ws-line);
    background: transparent;
}
html.ws body .page-header .search .form-control {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: 8px;
}

/* ---- Panels and cards ---------------------------------------------------- */

html.ws body .panel,
html.ws body .card {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: 12px;
    box-shadow: none;
    color: var(--ws-text);
}
html.ws body .panel-hdr,
html.ws body .card-header {
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-line);
    border-radius: 12px 12px 0 0;
    color: var(--ws-ink);
}
html.ws body .panel-hdr h2 {
    font-weight: 600;
    color: var(--ws-ink);
}
html.ws body .panel-hdr h2 span,
html.ws body .panel-hdr h2 small,
html.ws body .panel-hdr h2 i {
    font-style: normal;
    color: var(--ws-muted);
    font-weight: 400;
}
/* The theme's collapse / fullscreen / close dots read as red, amber and green
   status lights. Panels stay open; the controls go. */
html.ws body .panel-hdr .panel-toolbar .btn-panel,
html.ws body .panel-hdr .panel-toolbar .dropdown-toggle[data-toggle='dropdown'] > .fal.fa-ellipsis-v {
    display: none;
}

/* The dashboard number tiles (admin .dashboard-card, members tiles): white
   cards with ink numbers in place of saturated fills under white text. */
html.ws body .dashboard-card,
html.ws body #dashboard-cards .p-3.rounded,
html.ws body .page-content .p-3.rounded.text-white.mb-g {
    background: var(--ws-surface) !important;
    border: 1px solid var(--ws-line);
    border-radius: 12px !important;
    color: var(--ws-ink) !important;
}
html.ws body .dashboard-card *,
html.ws body .page-content .p-3.rounded.text-white.mb-g *:not(.btn) {
    color: inherit;
}
html.ws body .dashboard-card small,
html.ws body .page-content .p-3.rounded.text-white.mb-g small {
    color: var(--ws-muted) !important;
    opacity: 1;
}
html.ws body .dashboard-card > i.position-absolute,
html.ws body .page-content .p-3.rounded.text-white.mb-g > i.position-absolute {
    color: var(--ws-accent) !important;
    opacity: 0.12 !important;
}
html.ws body .page-content a:hover > .p-3.rounded.text-white.mb-g,
html.ws body .page-content .p-3.rounded.text-white.mb-g:hover {
    border-color: var(--ws-line-strong);
}
html.ws body .dashboard-card h3,
html.ws body .page-content .p-3.rounded.text-white.mb-g h3,
html.ws body .page-content .p-3.rounded.text-white.mb-g h4 {
    color: var(--ws-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* ---- Buttons ------------------------------------------------------------- */

html.ws body .btn {
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}
html.ws body .btn-primary,
html.ws body .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}
html.ws body .btn-primary:hover,
html.ws body .btn-primary:focus {
    background: var(--ws-accent-strong);
    border-color: var(--ws-accent-strong);
    color: #fff;
    box-shadow: none;
}
html.ws body .btn-outline-primary {
    color: var(--ws-accent);
    border-color: var(--ws-accent);
}
html.ws body .btn-outline-primary:hover {
    background: var(--ws-accent);
    color: #fff;
}
html.ws body .btn-default,
html.ws body .btn-secondary,
html.ws body .btn-outline-default {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line-strong);
    color: var(--ws-ink);
}
html.ws body .btn-default:hover,
html.ws body .btn-secondary:hover {
    background: var(--ws-ground);
    color: var(--ws-ink);
}
html.ws body .btn-danger,
html.ws body .btn-outline-danger {
    background: var(--ws-surface);
    border: 1px solid #e6c4bf;
    color: var(--ws-danger);
}
html.ws body .btn-danger:hover,
html.ws body .btn-outline-danger:hover {
    background: var(--ws-danger);
    border-color: var(--ws-danger);
    color: #fff;
}

/* ---- Forms --------------------------------------------------------------- */

html.ws body .form-control,
html.ws body .custom-select {
    background-color: var(--ws-surface);
    border: 1px solid var(--ws-line-strong);
    border-radius: 8px;
    color: var(--ws-ink);
}
html.ws body .form-control:focus,
html.ws body .custom-select:focus {
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px var(--ws-accent-soft);
}
html.ws body .form-control:disabled,
html.ws body .form-control[readonly] {
    background-color: var(--ws-ground);
    color: var(--ws-muted);
}
html.ws body label,
html.ws body .form-label {
    color: var(--ws-ink);
    font-weight: 600;
}
html.ws body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ws-accent);
    border-color: var(--ws-accent);
}

/* ---- Tables -------------------------------------------------------------- */

html.ws body .table {
    color: var(--ws-text);
}
html.ws body .table thead th {
    background: #fbfaf8;
    border-bottom: 1px solid var(--ws-line);
    border-top: 0;
    color: var(--ws-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
html.ws body .table td,
html.ws body .table th {
    border-color: #efece6;
}
html.ws body .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}
html.ws body .table-hover tbody tr:hover,
html.ws body table.dataTable tbody tr:hover {
    background-color: var(--ws-accent-soft);
}
/* An empty table is a state, not an error. */
html.ws body table.dataTable td.dataTables_empty,
html.ws body .dataTables_empty {
    color: var(--ws-muted) !important;
    font-style: normal;
    padding: 1.5rem;
}
/* DataTables Responsive's expander: a small neutral disc, not a coloured bar. */
html.ws body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html.ws body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
html.ws body table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
    background-color: var(--ws-surface);
    border: 1px solid var(--ws-line-strong);
    box-shadow: none;
    color: var(--ws-ink);
    font-weight: 700;
}
html.ws body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
html.ws body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before {
    background-color: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}
html.ws body .page-item.active .page-link {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}
html.ws body .page-link {
    color: var(--ws-accent);
    border-radius: 8px;
}
/* Wide tables scroll inside their panel on a phone rather than pushing the page. */
@media (max-width: 767.98px) {
    html.ws body .panel-content > .table,
html.ws body .panel-content > table {
        display: block;
        overflow-x: auto;
    }
}

/* ---- Badges and alerts --------------------------------------------------- */

html.ws body .badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.7em;
}
html.ws body .badge-primary { background: var(--ws-accent-soft); color: var(--ws-accent); }
html.ws body .badge-success { background: var(--ws-good-fill); color: var(--ws-good-ink); }
html.ws body .badge-warning { background: var(--ws-warn-fill); color: var(--ws-warn-ink); }
html.ws body .badge-danger { background: #f5e0dd; color: #8a2a21; }
html.ws body .badge-secondary,
html.ws body .badge-info { background: #ebe8e2; color: #4a4f56; }

html.ws body .alert {
    border-radius: 12px;
    border-width: 1px;
}
html.ws body .alert-success { background: var(--ws-good-fill); border-color: #c5dfcd; color: var(--ws-good-ink); }
html.ws body .alert-warning { background: var(--ws-warn-fill); border-color: #efd9b8; color: var(--ws-warn-ink); }
html.ws body .alert-danger { background: #f5e0dd; border-color: #e6c4bf; color: #8a2a21; }
html.ws body .alert-info,
html.ws body .alert-primary { background: var(--ws-accent-soft); border-color: color-mix(in srgb, var(--ws-accent) 25%, #fff); color: var(--ws-accent-strong); }

/* ---- Dropdowns and modals ------------------------------------------------ */

html.ws body .dropdown-menu {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 28, 31, 0.12);
}
html.ws body .dropdown-item {
    color: var(--ws-text);
}
html.ws body .dropdown-item:hover,
html.ws body .dropdown-item:focus {
    background: var(--ws-ground);
    color: var(--ws-ink);
}
html.ws body .dropdown-header.bg-trans-gradient {
    background: var(--ws-accent);
    background-image: none;
}
html.ws body .modal-content {
    border: 0;
    border-radius: 14px;
}

/* ---- Sign-in pages (_base_blank / base_blank) ---------------------------- */

html.ws body .blankpage-form-field {
    max-width: 420px;
}
html.ws body .blankpage-form-field .page-logo {
    background: var(--ws-accent);
    border: 0;
    border-radius: 14px 14px 0 0 !important;
    height: auto;
    padding: 20px 24px;
}
html.ws body .blankpage-form-field .page-logo {
    flex-wrap: wrap;
    gap: 12px;
}
html.ws body .blankpage-form-field .page-logo img {
    background: #fff;
    border-radius: 8px;
    height: 40px;
    padding: 4px;
}
html.ws body .blankpage-form-field .page-logo-text {
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    color: #fff;
    font-family: var(--ws-serif);
    font-size: 1.25rem;
    font-weight: 600;
}
html.ws body .blankpage-form-field .card {
    border-top: 0;
    border-radius: 0 0 14px 14px;
}
html.ws body #bgvid,
html.ws body video#bgvid {
    display: none;
}

/* ---- Focus --------------------------------------------------------------- */

html.ws body a:focus-visible,
html.ws body .btn:focus-visible,
html.ws body .nav-menu li a:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}

/* ---- Fixes found against the live markup --------------------------------- */

/* Tile captions use .text-white-50, which is !important white. */
html.ws body .dashboard-card .text-white-50,
html.ws body .page-content .p-3.rounded.text-white.mb-g .text-white-50 {
    color: var(--ws-muted) !important;
}
html.ws body .dashboard-card .card-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
html.ws body .page-content .p-3.rounded.text-white.mb-g .fs-xl {
    color: var(--ws-ink);
    font-weight: 600;
}

/* mod-nav-link draws a dotted rail and a bullet on every sub-item. */
html.ws body .nav-menu li > ul::before,
html.ws body .nav-menu li > ul > li > a::after,
html.ws body .nav-menu li > ul > li > a::before {
    display: none !important;
}

/* A parent that is open because a child is active reads as a heading, not as
   the selected page. */
html.ws body .nav-menu li.active.open > a {
    background: transparent;
    box-shadow: none;
    color: var(--ws-ink);
}

/* The sidebar ends where its menu does; carry its colour to the page bottom. */
@media (min-width: 992px) {
    html.ws body .page-inner {
        background: linear-gradient(to right, var(--ws-sidebar) 0, var(--ws-sidebar) 16.875rem, var(--ws-ground) 16.875rem);
    }
    html.ws body.nav-function-minify .page-inner,
    html.ws body.nav-function-hidden .page-inner {
        background: var(--ws-ground);
    }
}

/* FullCalendar (4.4 on members, 6 on admin): accent buttons and events. */
html.ws body .fc .fc-button-primary,
html.ws body .fc-button.fc-button-primary {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line-strong);
    color: var(--ws-ink);
    box-shadow: none;
    text-transform: none;
}
html.ws body .fc .fc-button-primary:not(:disabled).fc-button-active,
html.ws body .fc .fc-button-primary:not(:disabled):active {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}
html.ws body .fc-event,
html.ws body .fc-daygrid-event,
html.ws body .fc-h-event {
    background: var(--ws-accent-soft);
    border: 1px solid color-mix(in srgb, var(--ws-accent) 30%, #fff);
    color: var(--ws-accent-strong);
}
html.ws body .fc-event .fc-content,
html.ws body .fc-event .fc-title,
html.ws body .fc-event .fc-time,
html.ws body .fc-event-main {
    color: var(--ws-accent-strong);
}
html.ws body .fc-day-today,
html.ws body .fc-today {
    background: var(--ws-warn-fill) !important;
}
html.ws body .fc th,
html.ws body .fc-day-header {
    color: var(--ws-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
html.ws body .fc td,
html.ws body .fc th {
    border-color: var(--ws-line);
}