/* ==========================================================================
   HOAOS design layer — sits on top of Metronic / Bootstrap 5.
   1. Tokens  2. Base  3. App shell  4. Components  5. Auth  6. Responsive/print
   View conventions: docs/ui-conventions.md
   ========================================================================== */

/* ---- 1. Tokens ----------------------------------------------------------- */
:root,
[data-bs-theme=light] {
    --hx-brand: #1e6bb8;
    --hx-brand-hover: #185a9d;
    --hx-brand-soft: #eaf2fb;
    --hx-brand-text: #185a9d;

    --hx-ink: #0f172a;
    --hx-ink-2: #334155;
    --hx-muted: #64748b;
    --hx-subtle: #94a3b8;
    --hx-border: #e5e9f0;
    --hx-border-strong: #d3dae4;
    --hx-surface: #ffffff;
    --hx-surface-2: #f7f9fc;
    --hx-canvas: #f2f5f9;
    --hx-focus: rgba(30, 107, 184, .22);

    --hx-success: #2f7d5c;  --hx-success-soft: #e6f4ec;  --hx-success-text: #24674a;
    --hx-warning: #b45309;  --hx-warning-soft: #fdf2e0;  --hx-warning-text: #92400e;
    --hx-danger: #d92d20;   --hx-danger-soft: #fdecea;   --hx-danger-text: #b42318;
    --hx-info: #2b7a8a;     --hx-info-soft: #e4f1f3;     --hx-info-text: #1f6472;
    --hx-neutral: #64748b;  --hx-neutral-soft: #eef1f5;  --hx-neutral-text: #475569;

    --hx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --hx-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --hx-shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, .22);
    --hx-radius: 12px;
    --hx-radius-sm: 8px;

    --hx-sidebar-bg: #0f1d33;
    --hx-sidebar-bg-2: #122640;
    --hx-sidebar-text: #b4c0d3;
    --hx-sidebar-muted: #71829d;
    --hx-sidebar-hover: rgba(255, 255, 255, .06);
    --hx-sidebar-active: rgba(96, 165, 250, .16);
    --hx-sidebar-accent: #6cb0f5;
    --hx-sidebar-rule: rgba(255, 255, 255, .07);

    /* Bootstrap / Metronic mapping */
    --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--hx-ink);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-app-bg-color: var(--hx-canvas);
    --bs-border-color: var(--hx-border);
    --bs-text-muted: var(--hx-muted);
    --bs-secondary-color: var(--hx-muted);
    --bs-link-color: var(--hx-brand);
    --bs-link-color-rgb: 30, 107, 184;
    --bs-link-hover-color: var(--hx-brand-hover);
    --bs-link-hover-color-rgb: 24, 90, 157;

    --bs-gray-100: #f5f7fa;
    --bs-gray-200: #edf0f5;
    --bs-gray-300: #dbe1ea;
    --bs-gray-400: #b3bdcb;
    --bs-gray-500: #8591a3;
    --bs-gray-600: #64748b;
    --bs-gray-700: #475569;
    --bs-gray-800: #1e293b;
    --bs-gray-900: #0f172a;

    --bs-primary: #1e6bb8;  --bs-primary-rgb: 30, 107, 184;  --bs-primary-active: #185a9d;
    --bs-primary-light: #eaf2fb;  --bs-primary-inverse: #ffffff;  --bs-primary-clarity: rgba(30, 107, 184, .2);
    --bs-primary-text-emphasis: #134a80;  --bs-primary-bg-subtle: #d6e6f6;  --bs-primary-border-subtle: #aecde9;

    --bs-success: #2f7d5c;  --bs-success-rgb: 47, 125, 92;  --bs-success-active: #266a4d;
    --bs-success-light: #e6f4ec;  --bs-success-inverse: #ffffff;  --bs-success-clarity: rgba(47, 125, 92, .2);

    --bs-info: #2b7a8a;  --bs-info-rgb: 43, 122, 138;  --bs-info-active: #236674;
    --bs-info-light: #e4f1f3;  --bs-info-inverse: #ffffff;  --bs-info-clarity: rgba(43, 122, 138, .2);

    --bs-warning: #b45309;  --bs-warning-rgb: 180, 83, 9;  --bs-warning-active: #9a4608;
    --bs-warning-light: #fdf2e0;  --bs-warning-inverse: #ffffff;  --bs-warning-clarity: rgba(180, 83, 9, .2);

    --bs-danger: #d92d20;  --bs-danger-rgb: 217, 45, 32;  --bs-danger-active: #b42318;
    --bs-danger-light: #fdecea;  --bs-danger-inverse: #ffffff;  --bs-danger-clarity: rgba(217, 45, 32, .2);

    --bs-root-card-box-shadow: var(--hx-shadow-sm);
    --bs-root-card-border-color: var(--hx-border);
    --bs-menu-dropdown-bg-color: var(--hx-surface);
    --bs-menu-dropdown-box-shadow: var(--hx-shadow-lg);
    --bs-app-header-base-bg-color: var(--hx-surface);
    --bs-app-header-base-box-shadow: none;
    --bs-app-header-base-border-bottom: 1px solid var(--hx-border);
    --bs-app-header-minimize-bg-color: var(--hx-surface);
    --bs-app-header-sticky-bg-color: var(--hx-surface);
}

[data-bs-theme=dark] {
    --hx-brand: #4f93dd;
    --hx-brand-hover: #74aae6;
    --hx-brand-soft: rgba(79, 147, 221, .15);
    --hx-brand-text: #8fbdee;

    --hx-ink: #e6ebf2;
    --hx-ink-2: #c4cddb;
    --hx-muted: #93a1b5;
    --hx-subtle: #66758b;
    --hx-border: #233045;
    --hx-border-strong: #2f3e56;
    --hx-surface: #121a29;
    --hx-surface-2: #172134;
    --hx-canvas: #0b111c;
    --hx-focus: rgba(79, 147, 221, .3);

    --hx-success: #4fb38a;  --hx-success-soft: rgba(79, 179, 138, .14);  --hx-success-text: #7fcfae;
    --hx-warning: #eaa045;  --hx-warning-soft: rgba(234, 160, 69, .14);  --hx-warning-text: #f2bd7a;
    --hx-danger: #f0695e;   --hx-danger-soft: rgba(240, 105, 94, .14);   --hx-danger-text: #f59a92;
    --hx-info: #4fb0c1;     --hx-info-soft: rgba(79, 176, 193, .14);     --hx-info-text: #85cad6;
    --hx-neutral: #93a1b5;  --hx-neutral-soft: rgba(147, 161, 181, .14); --hx-neutral-text: #b6c1d0;

    --hx-shadow-sm: 0 0 0 transparent; /* not "none": it is combined into box-shadow lists */
    --hx-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --hx-shadow-lg: 0 16px 40px -14px rgba(0, 0, 0, .7);

    --hx-sidebar-bg: #0a1220;
    --hx-sidebar-bg-2: #0d1829;

    --bs-body-bg: var(--hx-surface);
    --bs-body-bg-rgb: 18, 26, 41;
    --bs-body-color: var(--hx-ink);
    --bs-body-color-rgb: 230, 235, 242;
    --bs-app-bg-color: var(--hx-canvas);
    --bs-border-color: var(--hx-border);
    --bs-text-muted: var(--hx-muted);
    --bs-secondary-color: var(--hx-muted);
    --bs-link-color: #74aae6;
    --bs-link-color-rgb: 116, 170, 230;
    --bs-link-hover-color: #9cc3ee;
    --bs-link-hover-color-rgb: 156, 195, 238;

    --bs-gray-100: #172134;
    --bs-gray-200: #1c283c;
    --bs-gray-300: #2a374c;
    --bs-gray-400: #3a485e;
    --bs-gray-500: #66758b;
    --bs-gray-600: #8593a7;
    --bs-gray-700: #a9b4c4;
    --bs-gray-800: #c8d0dc;
    --bs-gray-900: #e6ebf2;

    --bs-primary: #2f74c0;  --bs-primary-rgb: 47, 116, 192;  --bs-primary-active: #3f84d0;
    --bs-primary-light: rgba(79, 147, 221, .15);  --bs-primary-inverse: #ffffff;
    --bs-success: #2f8a63;  --bs-success-rgb: 47, 138, 99;   --bs-success-active: #379b71;  --bs-success-light: rgba(79, 179, 138, .14);
    --bs-info: #2f8596;     --bs-info-rgb: 47, 133, 150;     --bs-info-active: #3795a8;     --bs-info-light: rgba(79, 176, 193, .14);
    --bs-warning: #c26a14;  --bs-warning-rgb: 194, 106, 20;  --bs-warning-active: #d27a22;  --bs-warning-light: rgba(234, 160, 69, .14);
    --bs-danger: #d8463b;   --bs-danger-rgb: 216, 70, 59;    --bs-danger-active: #e5574c;   --bs-danger-light: rgba(240, 105, 94, .14);

    --bs-root-card-border-color: var(--hx-border);
    --bs-menu-dropdown-bg-color: var(--hx-surface-2);
    --bs-app-header-base-bg-color: var(--hx-surface);
    --bs-app-header-minimize-bg-color: var(--hx-surface);
    --bs-app-header-sticky-bg-color: var(--hx-surface);
}

/* ---- 2. Base ------------------------------------------------------------- */
body {
    font-size: 14px !important;
    background-color: var(--hx-canvas);
    color: var(--hx-ink);
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 { color: var(--hx-ink); }
a { text-decoration: none; }
/* Metronic forces .bi to muted gray at 1rem; icons should take their context's color and size. */
i.bi, .bi { color: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--hx-brand); outline-offset: 2px; }
.num, .table-app .cell-num { font-variant-numeric: tabular-nums; }
.text-ink { color: var(--hx-ink) !important; }
.fw-medium { font-weight: 500 !important; }
.badge { white-space: nowrap; }
canvas { max-width: 100%; }

/* Long free-text fields (descriptions, notes) — replaces inline white-space styles. */
.prose-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hx-ink-2); line-height: 1.65; margin: 0; }

/* ---- 3. App shell -------------------------------------------------------- */
/* Header */
.app-header {
    background-color: var(--hx-surface) !important;
    border-bottom: 1px solid var(--hx-border) !important;
    box-shadow: none !important;
}
.header-context { align-items: center; gap: .5rem; color: var(--hx-ink-2); font-weight: 600; font-size: 15px; min-width: 0; }
.header-context .bi { color: var(--hx-muted); font-size: 17px; }
.community-switcher-toggle { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 320px; padding: .25rem .5rem; margin-left: -.5rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.community-switcher-toggle:hover, .community-switcher-toggle:focus-visible { background: var(--bs-gray-100); }

/* Board search box in the header: icon inside the field, "/" hint on the right. */
.header-search { position: relative; margin-left: 1.25rem; width: 100%; max-width: 360px; }
.header-search .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
/* Three classes: Metronic's .form-control.form-control-sm padding would otherwise put the text under the icon. */
.header-search .form-control.form-control-sm { padding-left: 2rem; padding-right: 2rem; font-weight: 400; }
.header-search-key {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    padding: 0 .35rem; font-size: 11px; color: var(--hx-muted);
    background: var(--hx-surface-2); border: 1px solid var(--hx-border); border-radius: 4px; box-shadow: none;
}
.header-search .form-control:focus ~ .header-search-key { display: none; }
.header-logo { height: 24px; width: auto; }

.header-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--hx-radius-sm);
    background: transparent; color: var(--hx-muted); font-size: 18.5px;
    transition: background-color .15s, color .15s;
}
.header-icon-btn:hover { background: var(--hx-surface-2); color: var(--hx-ink); }

.header-user {
    display: inline-flex; align-items: center; gap: .625rem;
    padding: .25rem .6rem .25rem .25rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--hx-ink);
    transition: background-color .15s;
}
.header-user:hover { background: var(--hx-surface-2); }
.header-user-text { flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.header-user-text .name { font-weight: 600; font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-text .role { font-size: 12px; color: var(--hx-muted); }
.header-user .bi-chevron-down { font-size: 11px; color: var(--hx-muted); }

.avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--hx-brand-soft); color: var(--hx-brand-text);
    font-weight: 700; font-size: 14px;
}
.avatar-lg { width: 42px; height: 42px; font-size: 16px; }

.menu-sub-dropdown { border: 1px solid var(--hx-border); border-radius: var(--hx-radius) !important; }
.menu-sub-dropdown .menu-link { border-radius: 6px; }
.menu-sub-dropdown .menu-icon .bi { font-size: 16px; color: var(--hx-muted); }

/* Sidebar */
.app-sidebar,
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background: linear-gradient(180deg, var(--hx-sidebar-bg) 0%, var(--hx-sidebar-bg-2) 100%) !important;
    border-right: 0 !important;
}
.app-sidebar-logo,
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    display: flex; align-items: center; flex-shrink: 0;
    height: var(--bs-app-header-height, 70px);
    padding: 0 1.4rem;
    border-bottom: 1px solid var(--hx-sidebar-rule) !important;
}
.sidebar-brand img { height: 26px; width: auto; display: block; }

.app-sidebar-menu {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: .9rem .75rem 1.5rem;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem; border-radius: var(--hx-radius-sm);
    color: var(--hx-sidebar-text); font-weight: 500; font-size: 14.5px;
    cursor: pointer; list-style: none; user-select: none;
    transition: background-color .15s, color .15s;
}
.side-nav-link::-webkit-details-marker { display: none; }
.side-nav-link > .bi:first-child { width: 1.25rem; text-align: center; font-size: 17px; color: var(--hx-sidebar-muted); transition: color .15s; }
.side-nav-link:hover { background: var(--hx-sidebar-hover); color: #fff; }
.side-nav-link:hover > .bi:first-child { color: #fff; }
.side-nav-link.active { background: var(--hx-sidebar-active); color: #fff; }
.side-nav-link.active > .bi:first-child,
.side-nav-group.has-active > .side-nav-link > .bi:first-child { color: var(--hx-sidebar-accent); }
.side-nav-group[open] > .side-nav-link { color: #fff; }

.side-nav-caret { margin-left: auto; font-size: 10.5px; opacity: .55; transition: transform .2s; }
.side-nav-group[open] > .side-nav-link .side-nav-caret { transform: rotate(180deg); }

.side-nav-sub {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 8px 1.35rem; padding-left: .85rem;
    border-left: 1px solid var(--hx-sidebar-rule);
}
.side-nav-sublink {
    position: relative; display: block;
    padding: .4rem .7rem; border-radius: 6px;
    color: var(--hx-sidebar-text); font-size: 13.5px; font-weight: 500;
    transition: background-color .15s, color .15s;
}
.side-nav-sublink:hover { color: #fff; background: var(--hx-sidebar-hover); }
.side-nav-sublink.active { color: #fff; background: var(--hx-sidebar-active); }
.side-nav-sublink.active::before {
    content: ""; position: absolute; left: calc(-.85rem - 1px); top: 7px; bottom: 7px;
    width: 2px; border-radius: 2px; background: var(--hx-sidebar-accent);
}

/* Content area */
.app-content { padding-top: 1.75rem !important; padding-bottom: 2.5rem !important; }
#kt_app_content_container,
#kt_app_header_container,
#kt_app_footer .app-container { max-width: 1480px; }

.app-footer { background: transparent !important; border-top: 1px solid var(--hx-border); box-shadow: none !important; }

/* Page header — rendered by _Layout from ViewData["Title"/"Subtitle"/"BackUrl"] + @section PageActions */
.page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 1.5rem; margin-bottom: 1.5rem;
}
.page-header-main { min-width: 0; }
.page-back {
    display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .4rem;
    font-size: 13px; font-weight: 500; color: var(--hx-muted);
}
.page-back:hover { color: var(--hx-brand); }
.page-title { margin: 0; font-size: 25.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--hx-ink); }
.page-subtitle { margin: .3rem 0 0; font-size: 15px; color: var(--hx-muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---- 4. Components ------------------------------------------------------- */
/* Cards */
.card {
    --bs-card-border-radius: var(--hx-radius);
    --bs-card-inner-border-radius: calc(var(--hx-radius) - 1px);
    --bs-card-bg: var(--hx-surface);
    border-radius: var(--hx-radius);
    background-color: var(--hx-surface);
}
.card .card-header {
    min-height: 56px; padding: 0 1.25rem;
    border-bottom: 1px solid var(--hx-border) !important;
    align-items: center;
}
.card .card-header .card-title,
.card .card-header .card-title .card-label { font-size: 16px; font-weight: 600; color: var(--hx-ink); }
.card .card-header .card-title { margin: .6rem 0; }
.card .card-header .card-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.card .card-body { padding: 1.25rem; }
.card .card-footer { padding: 1rem 1.25rem; background: var(--hx-surface-2); border-top: 1px solid var(--hx-border); }
.card-subtitle-text { font-size: 13px; color: var(--hx-muted); font-weight: 400; }

/* Filter row that sits between a card header and a table */
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--hx-border);
}
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 11rem; }

/* Tables — canonical: <div class="card"><div class="table-responsive"><table class="table table-app"> */
/* Without paint containment a table wider than the screen still widens the page on mobile, despite overflow-x:auto. */
.table-responsive { contain: paint; }
.table-app { margin-bottom: 0; --bs-table-bg: transparent; }
/* Metronic's .table:not(.table-bordered) cell rules out-specify these, hence !important. */
.table-app > thead > tr > th,
.table > thead.table-light > tr > th {
    padding: .7rem 1rem !important;
    background: var(--hx-surface-2) !important;
    color: var(--hx-muted) !important;
    font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase !important;
    white-space: nowrap; border-bottom: 1px solid var(--hx-border);
    box-shadow: none;
}
.table-app > tbody > tr > td {
    padding: .8rem 1rem !important; vertical-align: middle;
    color: var(--hx-ink-2); border-bottom: 1px solid var(--hx-border);
}
.table-app > tbody > tr:last-child > td { border-bottom: 0; }
.table-app > tbody > tr:hover > td { background-color: var(--hx-surface-2); }
.table-app > tfoot > tr > * {
    padding: .8rem 1rem !important; font-weight: 600; color: var(--hx-ink);
    background: var(--hx-surface-2); border-top: 1px solid var(--hx-border); border-bottom: 0;
}
.table-app > * > tr > :first-child { padding-left: 1.25rem !important; }
.table-app > * > tr > :last-child { padding-right: 1.25rem !important; }
.table-app .cell-primary, .table-app .cell-primary a { font-weight: 600; color: var(--hx-ink); }
.table-app .cell-primary a:hover { color: var(--hx-brand); }
.table-app .cell-muted { color: var(--hx-muted); }
.table-app .cell-num { text-align: right; white-space: nowrap; }
.table-app .cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.table-app .cell-check { width: 1%; padding-right: 0; }
.table-app .cell-check .form-check-input { margin: 0; }
.table-app .cell-truncate { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-app .cell-sub { display: block; font-size: 13px; color: var(--hx-muted); font-weight: 400; }
.card > .table-responsive:last-child .table-app,
.card > .table-app:last-child { border-bottom-left-radius: var(--hx-radius); border-bottom-right-radius: var(--hx-radius); }

/* Buttons */
.btn { font-weight: 600; border-radius: var(--hx-radius-sm); line-height: 1.3; font-size: 14px; gap: .4rem; }
.btn:not(.btn-icon):not(.btn-link) { display: inline-flex; align-items: center; justify-content: center; }
.btn:not(.btn-icon) { padding: .56rem 1rem !important; }
.btn.btn-sm:not(.btn-icon) { padding: .4rem .75rem !important; font-size: 13px; }
.btn.btn-lg:not(.btn-icon) { padding: .75rem 1.35rem !important; font-size: 15px; }
.btn:not(.btn-icon) > .bi, .btn:not(.btn-icon) > i { padding-right: 0 !important; font-size: 1.05em; line-height: 1; }
/* Metronic zeroes box-shadow via a long .btn:not(.btn-shadow)… chain, hence !important. */
.btn.btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
.btn.btn-light {
    --bs-light: var(--hx-surface);
    --bs-light-active: var(--hx-surface-2);
    --bs-light-inverse: var(--hx-ink-2);
    box-shadow: inset 0 0 0 1px var(--hx-border-strong), var(--hx-shadow-sm) !important;
}
.btn.btn-light:hover { box-shadow: inset 0 0 0 1px var(--hx-subtle), var(--hx-shadow-sm) !important; }
.btn.btn-link { font-weight: 600; }

/* Forms */
.form-label { font-size: 13px; font-weight: 600; color: var(--hx-ink-2); margin-bottom: .375rem; }
.form-control,
.form-select {
    font-size: 14.5px; font-weight: 400; color: var(--hx-ink);
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-border-strong); border-radius: var(--hx-radius-sm);
    box-shadow: var(--hx-shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.form-control { padding: .56rem .8rem; }
.form-select { padding: .56rem 2.25rem .56rem .8rem; }
.form-control-sm, .form-select-sm { font-size: 13px; border-radius: 6px; }
.form-control.form-control-sm { padding: .38rem .65rem; }
.form-select.form-select-sm { padding: .38rem 2rem .38rem .65rem; }
.form-control.form-control-lg { padding: .72rem .95rem; font-size: 15px; }
.form-control:focus, .form-select:focus {
    color: var(--hx-ink); background-color: var(--hx-surface);
    border-color: var(--hx-brand); box-shadow: 0 0 0 3px var(--hx-focus);
}
.form-control::placeholder { color: var(--hx-subtle); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--hx-surface-2); color: var(--hx-muted); }
.form-text { font-size: 13px; color: var(--hx-muted); margin-top: .3rem; }
.form-check { display: flex; align-items: center; gap: .55rem; min-height: 1.25rem; padding-left: 0; }
.form-check.form-check-inline { display: inline-flex; margin-right: 1.25rem; }
.form-check .form-check-input { float: none; flex-shrink: 0; margin: 0; width: 1.125rem; height: 1.125rem; border-color: var(--hx-border-strong); }
.form-check.form-switch .form-check-input { width: 2rem; height: 1.125rem; }
.form-check-input:checked { background-color: var(--hx-brand); border-color: var(--hx-brand); }
.form-check-label { font-size: 14px; color: var(--hx-ink-2); }
.input-group-text { font-size: 14px; color: var(--hx-muted); background: var(--hx-surface-2); border-color: var(--hx-border-strong); }
.input-validation-error { border-color: var(--hx-danger) !important; }
.field-validation-error { display: block; margin-top: .3rem; font-size: 13px; }
.validation-summary-valid { display: none !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

.form-card { max-width: 780px; }
.form-section + .form-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hx-border); }
.form-section-title { margin: 0 0 .2rem; font-size: 15px; font-weight: 600; color: var(--hx-ink); }
.form-section-text { margin: 0 0 1rem; font-size: 13px; color: var(--hx-muted); }
.form-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hx-border);
}

/* Badges */
.badge { font-size: 12px; font-weight: 600; line-height: 1.2; border-radius: 999px; padding: .28rem .6rem; }
.badge-status { gap: .375rem; background-color: var(--tone-soft); color: var(--tone-text); }
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
.badge-status-success { --tone: var(--hx-success); --tone-soft: var(--hx-success-soft); --tone-text: var(--hx-success-text); }
.badge-status-warning { --tone: var(--hx-warning); --tone-soft: var(--hx-warning-soft); --tone-text: var(--hx-warning-text); }
.badge-status-danger  { --tone: var(--hx-danger);  --tone-soft: var(--hx-danger-soft);  --tone-text: var(--hx-danger-text); }
.badge-status-info    { --tone: var(--hx-info);    --tone-soft: var(--hx-info-soft);    --tone-text: var(--hx-info-text); }
.badge-status-primary { --tone: var(--hx-brand);   --tone-soft: var(--hx-brand-soft);   --tone-text: var(--hx-brand-text); }
.badge-status-neutral { --tone: var(--hx-neutral); --tone-soft: var(--hx-neutral-soft); --tone-text: var(--hx-neutral-text); }

/* Soft tone chips (stat icons, list icons) */
.tone-primary { background-color: var(--hx-brand-soft);   color: var(--hx-brand-text); }
.tone-success { background-color: var(--hx-success-soft); color: var(--hx-success-text); }
.tone-warning { background-color: var(--hx-warning-soft); color: var(--hx-warning-text); }
.tone-danger  { background-color: var(--hx-danger-soft);  color: var(--hx-danger-text); }
.tone-info    { background-color: var(--hx-info-soft);    color: var(--hx-info-text); }
.tone-neutral { background-color: var(--hx-neutral-soft); color: var(--hx-neutral-text); }

/* Alerts — <div class="alert alert-app alert-app-{tone}"><i class="bi … alert-app-icon"></i><div class="alert-app-body">…</div></div> */
.alert { border-radius: var(--hx-radius-sm); }
.alert-app {
    display: flex; align-items: flex-start; gap: .75rem;
    margin-bottom: 1.25rem; padding: .85rem 1rem;
    font-size: 14.5px; color: var(--hx-ink);
    border: 1px solid transparent;
}
.alert-app.alert-dismissible { padding-right: 3rem; }
.alert-app .btn-close { padding: 1.1rem 1rem; font-size: 10.5px; }
.alert-app-icon { flex-shrink: 0; font-size: 17.5px; line-height: 1.3; }
.alert-app-body { flex: 1; min-width: 0; line-height: 1.5; }
.alert-app-body > :last-child { margin-bottom: 0; }
.alert-app-actions { flex-shrink: 0; align-self: center; }
.alert-app-success { background: var(--hx-success-soft); border-color: color-mix(in srgb, var(--hx-success) 22%, transparent); }
.alert-app-warning { background: var(--hx-warning-soft); border-color: color-mix(in srgb, var(--hx-warning) 22%, transparent); }
.alert-app-danger  { background: var(--hx-danger-soft);  border-color: color-mix(in srgb, var(--hx-danger) 22%, transparent); }
.alert-app-info    { background: var(--hx-info-soft);    border-color: color-mix(in srgb, var(--hx-info) 22%, transparent); }
.alert-app-primary { background: var(--hx-brand-soft);   border-color: color-mix(in srgb, var(--hx-brand) 22%, transparent); }
.alert-app-success .alert-app-icon { color: var(--hx-success); }
.alert-app-warning .alert-app-icon { color: var(--hx-warning); }
.alert-app-danger  .alert-app-icon { color: var(--hx-danger); }
.alert-app-info    .alert-app-icon { color: var(--hx-info); }
.alert-app-primary .alert-app-icon { color: var(--hx-brand); }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    width: 52px; height: 52px; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 22.5px;
}
.empty-state-icon:not([class*="tone-"]) { border: 1px solid var(--hx-border); background: var(--hx-surface-2); color: var(--hx-muted); }
.empty-state-title { margin: 0 0 .25rem; font-size: 16px; font-weight: 600; color: var(--hx-ink); }
.empty-state-text { max-width: 44ch; margin: 0 0 .5rem; font-size: 14.5px; color: var(--hx-muted); }

/* 2-step setup QR code: QRCoder's SVG has a fixed pixel size, so scale it to the box. Always light: scanners need dark-on-light. */
.qr-box { width: 196px; flex-shrink: 0; }
.qr-box svg { display: block; width: 100%; height: auto; }

/* Stat cards */
.stat-card { flex-direction: row; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.25rem; color: inherit; }
.stat-card-link { transition: border-color .15s, box-shadow .15s; }
.stat-card-link:hover { color: inherit; border-color: var(--hx-border-strong); box-shadow: var(--hx-shadow); }
.stat-card-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 19px; }
.stat-card-body { min-width: 0; }
.stat-card-label { margin-bottom: .15rem; font-size: 13px; font-weight: 500; color: var(--hx-muted); }
.stat-card-value { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.stat-card-hint { margin-top: .2rem; font-size: 12.5px; color: var(--hx-muted); }

/* Key/value details — <dl class="detail-list"><dt>Label</dt><dd>Value</dd></dl> */
.detail-list { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; margin: 0; }
.detail-list > dt, .detail-list > dd { padding: .6rem 0; border-bottom: 1px solid var(--hx-border); }
.detail-list > dt { font-size: 14px; font-weight: 500; color: var(--hx-muted); }
.detail-list > dd { margin: 0; padding-left: 1rem; color: var(--hx-ink); min-width: 0; overflow-wrap: anywhere; }
.detail-list > dt:last-of-type, .detail-list > dd:last-of-type { border-bottom: 0; }
.detail-list > dt:first-of-type, .detail-list > dd:first-of-type { padding-top: 0; }

/* Simple stacked list inside a card (announcements, activity, documents) */
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows > li { padding: .9rem 1.25rem; border-bottom: 1px solid var(--hx-border); }
.list-rows > li:last-child { border-bottom: 0; }
.list-rows-title { font-weight: 600; color: var(--hx-ink); }
.list-rows-meta { font-size: 13px; color: var(--hx-muted); }

/* Navigable rows with an icon, label, value and chevron — <ul class="link-list"><li><a class="link-list-item">… */
.link-list { list-style: none; margin: 0; padding: .4rem 0; }
.link-list-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem 1.25rem; color: var(--hx-ink);
    transition: background-color .15s;
}
.link-list-item:hover { background: var(--hx-surface-2); color: var(--hx-ink); }
.link-list-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 16px; }
.link-list-label { flex: 1; min-width: 0; font-weight: 500; }
.link-list-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.link-list-chevron { font-size: 12px; color: var(--hx-subtle); }

/* Tabs — <ul class="nav nav-tabs nav-line-tabs"> (Bootstrap tab JS via data-bs-toggle="tab") */
.nav-line-tabs { gap: 1.5rem; border-bottom: 1px solid var(--hx-border) !important; }
.nav-line-tabs .nav-item .nav-link {
    margin: 0; padding: .65rem 0;
    font-size: 14px; font-weight: 600; color: var(--hx-muted);
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    transition: color .15s, border-color .15s;
}
.nav-line-tabs .nav-item .nav-link:hover { color: var(--hx-ink); border-bottom-color: var(--hx-border-strong); }
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link { color: var(--hx-ink); border-bottom: 2px solid var(--hx-brand); }
.card-header .nav-line-tabs { border-bottom: 0 !important; align-self: stretch; }
.card-header .nav-line-tabs .nav-link { height: 100%; display: flex; align-items: center; }

/* Progress */
.progress { height: 8px; border-radius: 999px; background-color: var(--hx-surface-2); box-shadow: inset 0 0 0 1px var(--hx-border); }
.progress-bar { border-radius: 999px; }

/* Pagination */
.pagination { gap: .25rem; }
.pagination .page-link { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px !important; font-weight: 600; }

/* Modal */
.modal-content { border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-lg); }

/* AI: answers with their sources, and drafts awaiting review */
.ai-answer { color: var(--hx-ink); line-height: 1.65; }
.ai-answer p { margin: 0 0 .75rem; }
.ai-answer p:last-child { margin-bottom: 0; }
.ai-sources { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ai-quote { border-left: 3px solid var(--hx-brand); background: var(--hx-surface-2); border-radius: 0 var(--hx-radius-sm) var(--hx-radius-sm) 0; padding: .625rem .875rem; }
.ai-quote blockquote { margin: 0 0 .25rem; color: var(--hx-ink-2); font-size: .925rem; }
.ai-quote .ai-quote-source { font-size: .8125rem; color: var(--hx-muted); }
.ai-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--hx-brand-text); background: var(--hx-brand-soft); border-radius: 999px; padding: .15rem .6rem; }
.ai-disclaimer { font-size: .8125rem; color: var(--hx-muted); }
.ai-draft { margin: .5rem 0 .75rem; }
.ai-draft-output { margin-top: .75rem; }
.ai-draft-result { border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm); padding: .75rem; background: var(--hx-surface); display: grid; gap: .5rem; }
.ai-draft-warning { font-size: .8125rem; color: var(--hx-warning-text); background: var(--hx-warning-soft); border-radius: var(--hx-radius-sm); padding: .375rem .625rem; }
.ai-draft-heading { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--hx-muted); }
.ai-draft-note { margin: 0; white-space: pre-wrap; color: var(--hx-ink-2); font-size: .875rem; }
.help-article h3.help-heading { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.help-article p, .help-article li { color: var(--hx-ink-2); line-height: 1.65; }
.help-article ul, .help-article ol { padding-left: 1.25rem; }

/* ---- 5. Auth layout ------------------------------------------------------ */
.auth-body { min-height: 100vh; background: var(--hx-canvas); }
.auth-shell { min-height: 100vh; display: flex; }
.auth-aside { display: none; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-panel { width: 100%; max-width: 400px; }
.auth-shell:not(.auth-shell-split) .auth-panel {
    max-width: 480px; padding: 2.5rem 2.25rem; text-align: center;
    background: var(--hx-surface); border: 1px solid var(--hx-border);
    border-radius: 16px; box-shadow: var(--hx-shadow-lg);
}
.auth-logo { display: inline-block; margin-bottom: 2rem; }
.auth-logo img { height: 30px; width: auto; }
.auth-title { margin: 0 0 .4rem; font-size: 25.5px; font-weight: 700; letter-spacing: -.02em; color: var(--hx-ink); }
.auth-subtitle { margin: 0 0 1.75rem; color: var(--hx-muted); font-size: 15px; }
.auth-icon { width: 60px; height: 60px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 25.5px; }
.auth-shell-doc .auth-main { align-items: flex-start; min-width: 0; }
.auth-shell.auth-shell-doc .auth-panel { max-width: 800px; min-width: 0; text-align: left; }
@media (max-width: 575.98px) {
    .auth-shell-doc .auth-main { padding: 1rem; }
    .auth-shell.auth-shell-doc .auth-panel { padding: 1.5rem 1.25rem; }
}
.auth-shell-doc .auth-logo { margin-bottom: 1.25rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hx-border); font-size: .875rem; }
.legal-nav a { color: var(--hx-muted); }
.legal-nav a.active { color: var(--hx-ink); font-weight: 600; }
.legal-doc h1 { margin: 0 0 .25rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--hx-ink); }
.legal-doc h2 { margin: 2rem 0 .6rem; font-size: 1.15rem; font-weight: 600; color: var(--hx-ink); }
.legal-doc p, .legal-doc li, .legal-doc td { color: var(--hx-ink-2); line-height: 1.65; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25rem; }
.legal-doc li { margin-bottom: .4rem; }
.legal-doc .table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.legal-doc table { width: 100%; min-width: 480px; font-size: .9rem; }
.legal-doc th { color: var(--hx-ink); font-weight: 600; }
.legal-doc th, .legal-doc td { padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--hx-border); vertical-align: top; }
.legal-effective { color: var(--hx-muted); margin-bottom: 1.5rem; }

@media (min-width: 992px) {
    .auth-shell-split .auth-aside {
        display: flex; flex-direction: column; justify-content: space-between;
        width: 44%; max-width: 580px; padding: 2.75rem 3.25rem;
        color: #dbe4f0;
        background:
            radial-gradient(ellipse at 10% 0%, rgba(43, 122, 138, .38), transparent 55%),
            radial-gradient(ellipse at 100% 100%, rgba(30, 107, 184, .4), transparent 55%),
            var(--hx-sidebar-bg);
    }
}
.auth-aside-logo { height: 32px; width: auto; align-self: flex-start; }
.auth-aside-copy h2 { margin-bottom: .75rem; font-size: 33.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: #fff; }
.auth-aside-copy p { max-width: 38ch; margin-bottom: 2.25rem; font-size: 16.5px; color: #aebbd0; }
.auth-points { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.auth-points li { display: flex; align-items: center; gap: .8rem; font-size: 15px; color: #dbe4f0; }
.auth-points .bi {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: rgba(255, 255, 255, .08); color: #8cc3f0;
}
.auth-aside-foot { font-size: 13px; color: #71829d; }

/* ---- 6. Responsive & print ----------------------------------------------- */
@media (max-width: 991.98px) {
    .app-content { padding-top: 1.25rem !important; }
}

@media (max-width: 767.98px) {
    #kt_app_content_container.container-fluid { padding-left: 1rem; padding-right: 1rem; }
    .card .card-header { padding: 0 1rem; }
    .card .card-body { padding: 1rem; }
    .table-app > * > tr > :first-child { padding-left: 1rem !important; }
    .table-app > * > tr > :last-child { padding-right: 1rem !important; }
    .filter-bar { padding: .75rem 1rem; }
    .filter-bar .form-control, .filter-bar .form-select { min-width: 0; flex: 1 1 10rem; }
    .page-title { font-size: 21.5px; }
    .modal-dialog { margin: .5rem; }
}

@media (max-width: 575.98px) {
    .page-actions { width: 100%; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list > dt { padding-bottom: 0; border-bottom: 0; }
    .detail-list > dd { padding-left: 0; padding-top: .15rem; }
    .detail-list > dd:first-of-type { padding-top: .15rem; }
}

@media print {
    .app-sidebar, .app-header, .app-footer, .page-actions, .btn { display: none !important; }
    .app-wrapper, .app-main { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; }
}

/* Letter content (disclosures) shown inside the app: the same inline-styled HTML that's emailed and printed. */
.letter-preview { max-width: 760px; overflow-x: auto; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.6; color: var(--hx-ink); }
.letter-preview table { color: inherit; }

/* Owner elections: the user's units on a ballot card, each with its own vote/proxy actions. */
.election-units { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--hx-border); }
.election-units li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .65rem 0; border-bottom: 1px solid var(--hx-border); }
.election-units li:last-child { border-bottom: 0; }
.election-actions { margin-left: auto; display: inline-flex; gap: .4rem; }
/* A candidate's statement under their name on the ballot. */
.candidate-statement { margin-top: .25rem; font-size: 13px; color: var(--hx-muted); white-space: pre-line; max-width: 60ch; }
/* Ballot form: fields that only apply to owner elections. */
#ballot-form:not(.is-election) .owner-only { display: none; }
#proxy-form:not(.is-directed) .directed-only { display: none; }
/* Ballot form: the "voters may pick up to" number field. */
.max-choices-field { max-width: 220px; }
/* Photo thumbnails in a grid (violation photos). */
.photo-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hx-border); border-radius: .475rem; }
/* Theme switcher items are buttons: take the menu's font, and HOAOS blue (not the theme's) for the active one. */
button.menu-link { font: inherit; }
[data-kt-element="theme-mode-menu"] .menu-link.active,
[data-kt-element="theme-mode-menu"] .menu-link.active .menu-icon i { color: var(--hx-brand) !important; }

/* Public community website (/c/{subdomain}): a plain one-page site, no app chrome. */
.public-body { min-height: 100vh; background: var(--hx-canvas); color: var(--hx-ink); }
.public-top { background: var(--hx-sidebar-bg); color: #fff; }
.public-top-inner { width: 100%; max-width: 1040px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.public-name { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.public-hero { width: 100%; max-width: 1040px; margin: 0 auto; padding: 2rem 1.25rem 0; }
.public-hero-img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--hx-radius); margin-bottom: 1.5rem; }
.public-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.public-about { font-size: 16.5px; line-height: 1.6; color: var(--hx-ink-2); white-space: pre-line; max-width: 70ch; }
.public-section { margin-bottom: 1.5rem; }
.public-foot { width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.25rem; font-size: 13px; color: var(--hx-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.public-foot img { height: 16px; width: auto; vertical-align: -3px; }

/* A month calendar: seven equal day columns, however much a day holds. */
.month-grid { table-layout: fixed; }

/* A lot number ("A-101") never breaks at its hyphen. */
.lot { white-space: nowrap; }

/* A list that stacks on a phone: <table class="table table-app table-stack">. Each row becomes a block: its
   cell-primary on the first line, the other cells on one wrapped line below, the actions pinned at the right, so
   nothing a resident needs (status, View) sits off-screen in a sideways scroll. */
@media (max-width: 575.98px) {
    .table-stack > thead { display: none; }
    .table-stack, .table-stack > tbody { display: block; width: 100%; }
    .table-app.table-stack > tbody > tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .8rem 1rem !important; border-bottom: 1px solid var(--hx-border); }
    .table-stack > tbody > tr:last-child { border-bottom: 0; }
    .table-app.table-stack > tbody > tr > td { display: block; padding: 0 !important; border: 0; font-size: 13px; color: var(--hx-muted); }
    .table-app.table-stack > tbody > tr > td.cell-primary { order: -1; flex: 0 0 100%; padding-right: 4.75rem !important; font-size: 14px; color: var(--hx-ink); }
    .table-app.table-stack > tbody > tr > td.cell-actions { position: absolute; top: .65rem; right: 1rem; width: auto; }
    .table-app.table-stack > tbody > tr > td.cell-check { position: absolute; top: .85rem; left: 1rem; width: auto; }
    .table-app.table-stack > tbody > tr:has(> td.cell-check) { padding-left: 2.75rem !important; }
    .table-app.table-stack > tbody > tr > td.cell-num { text-align: left; }
    .table-stack .cell-truncate { max-width: none; white-space: normal; }
    .table-stack .cell-sub { display: inline; margin-left: .35rem; }
}

/* Stripe's embedded Connect components (Views/Connect) need about 320px: on a phone the card gives them its side
   padding, and anything wider scrolls inside the card rather than the page. */
.connect-embed { overflow-x: auto; }
@media (max-width: 575.98px) { .card-body.connect-embed { padding-left: .5rem !important; padding-right: .5rem !important; } }