/* HBM Android visual handover, 2026-09-23.
   Exact source colors/alphas; blur, borders and elevation are web adaptations. */
:root {
    --hbm-primary: #b71c1c;
    --hbm-on-primary: #fff;
    --hbm-secondary: #1565c0;
    --hbm-bg: #eaf2ff;
    --hbm-ink: #111;
    --hbm-muted: #222;
    --hbm-surface: #fff;
    --hbm-surface-variant: #f0f0f0;
    --hbm-error: #b00020;
    --hbm-success: #1b5e20;
    --hbm-glass: rgb(255 255 255 / .22);
    --hbm-glass-faint: rgb(255 255 255 / .18);
    --hbm-glass-strong: rgb(255 255 255 / .60);
    --hbm-glass-solid: rgb(255 255 255 / .75);
    --hbm-glass-input: rgb(255 255 255 / .85);
    --hbm-line: rgb(255 255 255 / .55);
    --hbm-divider: rgb(17 17 17 / .14);
    --hbm-overlay: rgb(0 0 0 / .33);
    --hbm-drawer: rgb(0 0 0 / .60);
    --hbm-tile: rgb(191 216 255 / .60);
    --hbm-tile-title: #0d2a5b;
    --hbm-tile-subtitle: #1a3e78;
    --hbm-tile-icon: #90b7ff;
    --hbm-radius: 18px;
    --hbm-radius-button: 16px;
    --hbm-blur: 14px;
    --hbm-shadow: 0 8px 22px rgb(0 0 0 / .24);
    --hbm-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Scope to the Unfold portal; the classic admin remains independent. */
body.hbm-portal {
    --border-radius: var(--hbm-radius-button);
    --color-primary-50: rgb(183 28 28 / .06);
    --color-primary-100: rgb(183 28 28 / .12);
    --color-primary-200: rgb(183 28 28 / .18);
    --color-primary-300: var(--hbm-primary);
    --color-primary-400: var(--hbm-primary);
    --color-primary-500: var(--hbm-primary);
    --color-primary-600: var(--hbm-primary);
    --color-primary-700: var(--hbm-primary);
    --color-primary-800: var(--hbm-primary);
    --color-primary-900: var(--hbm-primary);
    --color-primary-950: var(--hbm-primary);
    --color-font-default-light: var(--hbm-ink);
    --color-font-default-dark: var(--hbm-ink);
    --color-font-important-light: var(--hbm-ink);
    --color-font-important-dark: var(--hbm-ink);
    --color-font-subtle-light: var(--hbm-muted);
    --color-font-subtle-dark: var(--hbm-muted);
    min-height: 100vh;
    background: var(--hbm-bg);
    color: var(--hbm-ink);
    font-family: var(--hbm-font-family);
    line-height: 1.5;
    isolation: isolate;
}
body.hbm-portal::before, body.hbm-portal::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
body.hbm-portal::before { background: var(--hbm-background-image) center / cover no-repeat; }
body.hbm-portal::after { background: var(--hbm-overlay); }
.hbm-portal #page, .hbm-portal #main, .hbm-portal #content { background: transparent; }
.hbm-portal #content { padding-bottom: 24px; }
.hbm-portal .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.hbm-portal :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--hbm-primary);
    outline-offset: 3px;
}
.hbm-skip-link { position: fixed; top: -100px; left: 16px; z-index: 1001; background: white; color: var(--hbm-primary); padding: 12px 16px; border-radius: 16px; }
.hbm-skip-link:focus { top: 8px; }
.hbm-glass-card, .hbm-portal #changelist, .hbm-portal fieldset.module,
.hbm-portal .inline-group, .hbm-portal .hbm-account__menu {
    background: var(--hbm-glass);
    border: 1px solid var(--hbm-line);
    border-radius: var(--hbm-radius);
    box-shadow: var(--hbm-shadow);
    backdrop-filter: blur(var(--hbm-blur));
    -webkit-backdrop-filter: blur(var(--hbm-blur));
    color: var(--hbm-ink);
}
.hbm-glass-card--strong { background: var(--hbm-glass-strong); }
.hbm-glass-card--solid { background: var(--hbm-glass-solid); }

/* Material app bar and native account menu. */
.hbm-topbar { height: 64px; flex: 0 0 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--hbm-primary); color: white; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 12px rgb(0 0 0 / .22); }
.hbm-topbar__brand { color: white; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbm-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 16px; cursor: pointer; color: inherit; background: transparent; }
.hbm-icon-button:hover, .hbm-account__trigger:hover { background: var(--hbm-glass); }
.hbm-topbar :focus-visible, #nav-sidebar :focus-visible { outline-color: white; }
.hbm-account { margin-left: auto; position: relative; flex-shrink: 0; }
.hbm-account__trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 16px; cursor: pointer; color: white; }
.hbm-account__name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbm-portal .hbm-account__menu { position: absolute; top: calc(100% + 12px); right: 0; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 8px; background: rgb(255 255 255 / .95); color: var(--hbm-ink); }
.hbm-account__menu a, .hbm-account__menu button { min-height: 44px; }
.hbm-account__menu a:hover, .hbm-account__menu button:hover { background: var(--hbm-surface-variant); color: var(--hbm-primary); }
.hbm-account__menu :focus-visible { outline-color: var(--hbm-primary); }
.hbm-page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 20px 16px; padding: 14px 16px; color: var(--hbm-ink); background: var(--hbm-glass-solid); border: 1px solid var(--hbm-line); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hbm-page-heading__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hbm-page-heading h1 { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.hbm-page-heading h1 .material-symbols-outlined { color: var(--hbm-muted); }

/* Dark frosted drawer; Unfold owns visibility, search and navigation state. */
.hbm-portal #nav-sidebar { background: var(--hbm-drawer); border-color: rgb(255 255 255 / .22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: white; }
.hbm-portal #nav-sidebar-inner { background: transparent; color: white; height: 100dvh; min-height: 100vh; }
.hbm-drawer-brand { display: flex; align-items: center; padding: 16px; gap: 8px; min-height: 112px; }
.hbm-drawer-brand > a { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: white; font-weight: 700; font-size: 24px; }
.hbm-drawer-brand img { width: 48px; height: 72px; object-fit: contain; border-radius: 16px; box-shadow: 0 4px 12px rgb(0 0 0 / .22); }
.hbm-drawer-brand small { display: block; font-size: 13px; font-weight: 500; }
.hbm-drawer-footer { padding: 20px 24px; font-size: 12px; color: rgb(255 255 255 / .85); }
.hbm-portal #nav-sidebar h2, .hbm-portal #nav-sidebar ol a { color: white; }
.hbm-portal #nav-sidebar h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; min-height: 40px; }
.hbm-portal #nav-sidebar ol a { min-height: 44px; border-radius: 16px; }
.hbm-portal #nav-sidebar hr { border-color: rgb(255 255 255 / .18); }
.hbm-portal #nav-sidebar ol a:hover { background: var(--hbm-glass-faint); }
.hbm-portal #nav-sidebar ol a.active { background: var(--hbm-primary); color: white; box-shadow: 0 4px 12px rgb(0 0 0 / .22); }
.hbm-portal #nav-sidebar h2:hover, .hbm-portal #nav-sidebar h2:hover span { color: white; }
.hbm-portal #nav-sidebar [class~="bg-white"] { background: var(--hbm-glass-faint); border-color: rgb(255 255 255 / .35); }
.hbm-portal #nav-filter { color: white; background: transparent; min-height: 44px; }
.hbm-portal #nav-filter::placeholder { color: rgb(255 255 255 / .85); }
.hbm-portal #nav-sidebar #search-results > div { background: rgb(255 255 255 / .95); color: var(--hbm-ink); }
.hbm-portal #nav-sidebar #search-results a { color: var(--hbm-ink); }

/* Dashboard: Android banner, welcome, live metrics, image tiles, events, activity. */
.hbm-dashboard { max-width: 1440px; margin: 0 auto; }
.hbm-banner { height: 170px; overflow: hidden; border-radius: 18px; margin-bottom: 16px; box-shadow: 0 4px 12px rgb(0 0 0 / .22); background: var(--hbm-glass-strong); position: relative; }
.hbm-banner img { width: 100%; height: 100%; object-fit: contain; opacity: .90; }
.hbm-banner::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / .08); pointer-events: none; }
.hbm-dashboard__intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; margin-bottom: 16px; }
.hbm-dashboard__intro h1 { color: var(--hbm-ink); font-size: 24px; line-height: 32px; font-weight: 700; margin: 4px 0 8px; }
.hbm-dashboard__intro time { font-size: 13px; white-space: nowrap; }
.hbm-eyebrow { color: var(--hbm-primary); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hbm-dashboard__lede { color: var(--hbm-muted); font-size: 14px; }
.hbm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.hbm-metric { display: flex; flex-direction: column; padding: 16px; }
.hbm-metric__top { display: flex; align-items: center; gap: 8px; }
.hbm-icon { color: var(--hbm-primary); font-size: 22px; }
.hbm-metric__label { font-size: 13px; font-weight: 600; }
.hbm-metric strong { font-size: 45px; line-height: 52px; font-weight: 700; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.hbm-metric > span:last-child { color: var(--hbm-muted); font-size: 12px; }
.hbm-panel { padding: 20px; min-width: 0; }
.hbm-panel__heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; }
.hbm-panel h2 { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--hbm-ink); }
.hbm-text-link { color: var(--hbm-primary); font-size: 13px; font-weight: 600; padding: 8px 0; }
.hbm-text-link:hover { text-decoration: underline; }
.hbm-quick-actions { margin-bottom: 16px; }
.hbm-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hbm-action { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--hbm-tile); border: 1px solid var(--hbm-line); min-width: 0; }
.hbm-action:hover { background: rgb(191 216 255 / .85); box-shadow: 0 4px 12px rgb(0 0 0 / .12); }
.hbm-action__image { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hbm-action__icon { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; font-size: 32px; border-radius: 50%; color: var(--hbm-primary); background: var(--hbm-glass-strong); flex-shrink: 0; }
.hbm-action > span:not(.material-symbols-outlined) { display: flex; flex-direction: column; min-width: 0; }
.hbm-action strong { font-size: 14px; line-height: 20px; color: var(--hbm-tile-title); }
.hbm-action small { font-size: 12px; line-height: 18px; margin-top: 4px; color: var(--hbm-tile-subtitle); }
.hbm-action__arrow { margin-left: auto; font-size: 20px; color: var(--hbm-tile-title); flex-shrink: 0; }
.hbm-dashboard__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.hbm-event, .hbm-activity { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hbm-divider); }
.hbm-event:first-child, .hbm-activity:first-child { border-top: 0; padding-top: 0; }
.hbm-event:last-child, .hbm-activity:last-child { padding-bottom: 0; }
.hbm-event__date { display: flex; align-items: center; flex-direction: column; min-width: 48px; padding: 8px; border-radius: 16px; background: var(--hbm-primary); color: white; }
.hbm-event__date b { font-size: 20px; line-height: 24px; }
.hbm-event__date small { font-size: 11px; text-transform: uppercase; }
.hbm-event__body, .hbm-activity__body { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.hbm-event__body strong, .hbm-activity strong { color: var(--hbm-ink); font-size: 14px; line-height: 20px; }
.hbm-event__body small, .hbm-activity small { color: var(--hbm-muted); font-size: 12px; margin-top: 4px; }
.hbm-event__arrow { margin-left: auto; color: var(--hbm-primary); font-size: 20px; }
.hbm-event:hover strong, .hbm-activity a:hover { color: var(--hbm-primary); text-decoration: underline; }
.hbm-activity__dot { background: var(--hbm-secondary); flex: 0 0 8px; height: 8px; border-radius: 50%; }
.hbm-activity__dot--success { background: var(--hbm-success); }
.hbm-activity__dot--danger { background: var(--hbm-error); }
.hbm-empty { font-size: 14px; color: var(--hbm-muted); padding: 12px 0; }

/* Keep all native list/form markup and JavaScript contracts intact. */
.hbm-portal #changelist { background: var(--hbm-glass-solid); margin: 0; padding: 16px 0; }
.hbm-portal #changelist-form [data-simplebar] { background: var(--hbm-glass-strong); border-color: var(--hbm-line); border-radius: 16px; }
.hbm-portal #result_list { color: var(--hbm-ink); background: transparent; }
.hbm-portal #result_list th, .hbm-portal #result_list td { color: var(--hbm-ink); border-color: var(--hbm-divider); padding: 12px 14px; }
.hbm-portal #result_list thead th { background: var(--hbm-glass-solid); font-size: 12px; font-weight: 700; color: var(--hbm-muted); }
.hbm-portal #result_list tbody { background: transparent; }
.hbm-portal #result_list tbody:nth-child(even) { background: var(--hbm-glass); }
.hbm-portal #result_list tbody:hover, .hbm-portal #result_list tr.selected { background: rgb(183 28 28 / .08); }
.hbm-portal #result_list a:hover { color: var(--hbm-primary); text-decoration: underline; }
.hbm-portal #changelist-filter > div:not(#changelist-filter-close) { background: rgb(255 255 255 / .95); border: 1px solid var(--hbm-line); border-radius: 18px; padding: 14px; color: var(--hbm-ink); }
.hbm-portal #changelist-filter a { color: var(--hbm-ink); }
.hbm-portal #changelist-filter .selected a { color: var(--hbm-primary); font-weight: 700; }
.hbm-portal fieldset.module, .hbm-portal .inline-group { padding: 20px; background: var(--hbm-glass-solid); }
.hbm-portal .inline-group fieldset.module { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
.hbm-portal .form-row { border-color: var(--hbm-divider); }
.hbm-portal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.hbm-portal textarea, .hbm-portal select, .hbm-portal .select2-selection {
    color: var(--hbm-ink); background-color: var(--hbm-glass-input); border-color: rgb(17 17 17 / .38); border-radius: 12px; min-height: 44px;
}
.hbm-portal input::placeholder, .hbm-portal textarea::placeholder { color: #555; }
.hbm-portal input[type="checkbox"], .hbm-portal input[type="radio"] { accent-color: var(--hbm-primary); }
.hbm-portal input:focus, .hbm-portal select:focus, .hbm-portal textarea:focus { border-color: var(--hbm-primary); box-shadow: 0 0 0 3px rgb(183 28 28 / .16); }
.hbm-portal input:disabled, .hbm-portal select:disabled, .hbm-portal textarea:disabled { opacity: .65; }
.hbm-portal .errornote, .hbm-portal .errorlist { color: var(--hbm-error); }
.hbm-portal .help, .hbm-portal .helptext { color: var(--hbm-muted); }
.hbm-portal #submit-row > div, .hbm-portal #main > div:has(> .paginator) { background: var(--hbm-glass-solid); border-color: var(--hbm-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hbm-portal #submit-row button, .hbm-portal #submit-row a, .hbm-portal .object-tools a, .hbm-portal #login-form button[type="submit"] { min-height: 44px; border-radius: 16px; }
.hbm-portal #submit-row button[name="_save"], .hbm-portal #login-form button[type="submit"] { min-height: 48px; background: var(--hbm-primary); color: white; }
.hbm-portal #submit-row button:not([name="_save"]) { background: var(--hbm-glass); color: var(--hbm-ink); border-color: rgb(17 17 17 / .38); }
.hbm-portal #submit-row a[href*="/delete/"], .hbm-portal .deletelink { color: var(--hbm-error); background: var(--hbm-glass-solid); border: 1px solid var(--hbm-error); }
.hbm-portal #submit-row a[href*="/delete/"]:hover { background: var(--hbm-error); color: white; }
.hbm-portal #content > #content-main > p, .hbm-portal #content > #content-main > ul { background: var(--hbm-glass-solid); padding: 16px; border-radius: 16px; }
.hbm-portal .flatpickr-calendar { background: rgb(255 255 255 / .95); border-radius: 18px; box-shadow: var(--hbm-shadow); color: var(--hbm-ink); }
.hbm-portal .flatpickr-day.selected, .hbm-portal .flatpickr-day.selected:hover { background: var(--hbm-primary); border-color: var(--hbm-primary); }
.hbm-portal .flatpickr-repeat-until .hbm-month-select, .hbm-portal .flatpickr-repeat-until .hbm-year-select { color: var(--hbm-ink); background: white; border-color: var(--hbm-divider); }
.hbm-portal .flatpickr-repeat-until select:focus { outline-color: var(--hbm-primary); }

/* Full-screen photographic sign-in, using the original authentication form. */
.hbm-portal.login #page { min-height: 100dvh; padding: 32px 0; }
.hbm-portal.login #page > div:first-child { width: 100%; }
.hbm-portal.login #page > div > div:first-child { width: min(100%, 440px); }
.hbm-login-card { width: 100%; padding: 28px; margin: 24px 0; }
.hbm-login-logo { width: 80px; height: 120px; object-fit: contain; border-radius: 18px; margin: 0 auto 20px; box-shadow: 0 4px 12px rgb(0 0 0 / .22); }
.hbm-login-card h1 { color: var(--hbm-ink); }
.hbm-portal.login #login-form label { color: var(--hbm-ink); }
.hbm-portal.login #login-form input { min-height: 48px; }

@media (min-width: 1536px) { .hbm-portal #changelist-filter > div:not(#changelist-filter-close) { background: var(--hbm-glass-strong); } }
@media (max-width: 1399px) { .hbm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1199px) {
    .hbm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hbm-dashboard__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .hbm-topbar { gap: 8px; }
    .hbm-topbar__brand { font-size: 16px; }
    .hbm-account__name { display: none; }
    .hbm-account__trigger { gap: 0; padding: 0 4px; }
    .hbm-dashboard__intro { align-items: flex-start; flex-direction: column; }
    .hbm-actions { grid-template-columns: 1fr; }
    .hbm-page-heading { gap: 12px; }
    .hbm-page-heading h1 { font-size: 16px; }
    .hbm-panel, .hbm-dashboard__intro, .hbm-portal fieldset.module { padding: 16px; }
    .hbm-portal #result_list { min-width: 0; }
    .hbm-portal #result_list tr { background: var(--hbm-glass-strong); }
    .hbm-portal #result_list td, .hbm-portal #result_list th { overflow-wrap: anywhere; }
    .hbm-portal .inline-group { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 380px) {
    .hbm-metrics { grid-template-columns: 1fr; }
    .hbm-login-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hbm-portal *, .hbm-portal *::before, .hbm-portal *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media print {
    body.hbm-portal::before, body.hbm-portal::after, .hbm-topbar, #nav-sidebar { display: none; }
    .hbm-glass-card, .hbm-portal #changelist, .hbm-portal fieldset.module { background: white; box-shadow: none; backdrop-filter: none; }
}

/* These utilities are local: Unfold only ships its own compiled utility classes. */
.hbm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hbm-desktop-toggle { display: none; }
@media (min-width: 1280px) {
    .hbm-desktop-toggle { display: inline-flex; }
    .hbm-mobile-toggle { display: none; }
}
.hbm-portal.login #page > div > .absolute { background: var(--hbm-glass-solid); border-radius: 16px; padding: 8px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Native read-only and upload widgets stay readable in either theme. */
.hbm-portal .readonly { background: var(--hbm-glass-strong); color: var(--hbm-ink); border-color: var(--hbm-divider); }
.hbm-portal fieldset.module > div { border-color: var(--hbm-line); }
.hbm-portal div:has(> label > input[aria-label="Choose file to upload"]) { background: var(--hbm-glass-input); border-color: rgb(17 17 17 / .38); border-radius: 12px; }
.hbm-portal div:has(> label > input[aria-label="Choose file to upload"]) > div { background: transparent; }
.hbm-portal input[aria-label="Choose file to upload"]:disabled { width: 100%; background: transparent; opacity: 1; }
.hbm-portal label:has(> .material-symbols-outlined) { color: var(--hbm-primary); }