/* ==========================================================================
   Woman & Health Portal (bo.womanandhealth.at) – auf Meridian-Tokens (Gold)
   Lade-Reihenfolge: tokens → base → button/input/badge → bo.css
   ========================================================================== */

body.bo { min-height: 100vh; display: flex; flex-direction: column; }
.bo-main { flex: 1; width: min(1100px, calc(100% - 2 * var(--dm-space-lg))); margin: var(--dm-space-xl) auto var(--dm-space-3xl); }
body.bo--login .bo-main { display: grid; place-items: center; margin-top: 0; margin-bottom: 0; padding: var(--dm-space-2xl) 0; }
.bo-footer { padding: var(--dm-space-lg); text-align: center; font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.bo-icon { width: 22px; height: 22px; flex: none; }
.bo-muted { color: var(--dm-color-on-surface-variant); font-weight: 400; }
.bo-eyebrow { display: block; font: var(--dm-type-label-sm); letter-spacing: var(--dm-tracking-label-sm); text-transform: uppercase; color: var(--dm-color-primary-hover); margin-bottom: var(--dm-space-xs); }

/* ---- Topbar ------------------------------------------------------------ */
.bo-topbar { display: flex; align-items: center; gap: var(--dm-space-xl); height: 64px; padding: 0 var(--dm-space-lg); background: var(--dm-color-surface); border-bottom: 1px solid var(--dm-color-outline-variant); position: sticky; top: 0; z-index: 10; }
.bo-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--dm-color-on-surface); }
.bo-brand img { width: 36px; height: 36px; }
.bo-brand span { font: var(--dm-type-h4); font-family: var(--dm-font-display); font-size: 1.15rem; letter-spacing: .02em; }
.bo-nav { display: flex; gap: var(--dm-space-xs); }
.bo-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--dm-rounded-full); font: var(--dm-type-label-md); color: var(--dm-color-on-surface-variant); text-decoration: none; }
.bo-nav a .bo-icon { width: 18px; height: 18px; }
.bo-nav a:hover, .bo-nav a[aria-current="page"] { background: var(--dm-color-primary-subtle); color: var(--dm-color-on-primary-subtle); }
.bo-userbox { margin-left: auto; display: flex; align-items: center; gap: var(--dm-space-md); }
.bo-userbox__name { font: var(--dm-type-label-md); }
.bo-userbox form { margin: 0; }
.bo-logout { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--dm-color-outline); border-radius: var(--dm-rounded-full); padding: 7px 12px; font: var(--dm-type-label-md); color: var(--dm-color-on-surface-variant); cursor: pointer; }
.bo-logout .bo-icon { width: 18px; height: 18px; }
.bo-logout:hover { border-color: var(--dm-color-primary); color: var(--dm-color-primary-hover); }

/* ---- Flash ------------------------------------------------------------- */
.bo-flash { padding: 12px 16px; border-radius: var(--dm-rounded-md); margin-bottom: var(--dm-space-lg); font: var(--dm-type-body-sm); border: 1px solid transparent; }
.bo-flash--notice  { background: var(--dm-color-info-subtle); color: var(--dm-color-info); border-color: color-mix(in srgb, var(--dm-color-info) 25%, transparent); }
.bo-flash--success { background: var(--dm-color-success-subtle); color: var(--dm-color-success); border-color: color-mix(in srgb, var(--dm-color-success) 25%, transparent); }
.bo-flash--error   { background: var(--dm-color-error-subtle); color: var(--dm-color-error); border-color: color-mix(in srgb, var(--dm-color-error) 25%, transparent); }
body.bo--login .bo-flash { width: 100%; max-width: 440px; margin: 0 auto var(--dm-space-md); }
body.bo--login .bo-main { grid-auto-rows: max-content; align-content: center; }

/* ---- Login-Karte ------------------------------------------------------- */
.bo-login { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 var(--dm-space-md); }
.bo-login__card { background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-xl); box-shadow: var(--dm-shadow-lg); overflow: hidden; }
.bo-login__head { background: linear-gradient(135deg, #8f7443 0%, #bfa26e 60%, #d4bd8f 100%); padding: var(--dm-space-2xl) var(--dm-space-xl); text-align: center; }
.bo-login__head img { height: 30px; margin: 0 auto; }
.bo-login__brand { margin-top: var(--dm-space-md); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bo-login__brandname { font-family: var(--dm-font-display); font-size: 1.35rem; color: #fff; letter-spacing: .04em; }
.bo-login__brandsub { font: var(--dm-type-label-sm); letter-spacing: var(--dm-tracking-label-sm); text-transform: uppercase; color: #f5edd8; }
.bo-login__body { padding: var(--dm-space-xl); }
.bo-login__tool { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--dm-space-md); padding: 6px 12px 6px 8px; border-radius: var(--dm-rounded-full); background: var(--dm-color-primary-subtle); color: var(--dm-color-on-primary-subtle); font: var(--dm-type-body-sm); }
.bo-login__tool .bo-icon { width: 18px; height: 18px; }
.bo-login__title { font: var(--dm-type-h2); margin-bottom: var(--dm-space-xs); }
.bo-login__hint { color: var(--dm-color-on-surface-variant); margin-bottom: var(--dm-space-lg); font: var(--dm-type-body-sm); }
.bo-login__submit { width: 100%; margin-top: var(--dm-space-lg); }
.bo-login__actions { display: flex; justify-content: space-between; gap: var(--dm-space-md); margin-top: var(--dm-space-lg); }
.bo-login__actions form { margin: 0; }
.bo-linkbtn { background: none; border: 0; padding: 0; font: var(--dm-type-body-sm); color: var(--dm-color-primary-hover); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.bo-code { letter-spacing: .4em; font-variant-numeric: tabular-nums; text-align: center; font-size: 1.5rem; }

/* ---- Formularfelder ---------------------------------------------------- */
.bo-field { margin-bottom: var(--dm-space-md); }
.bo-field__label { display: block; font: var(--dm-type-label-md); margin-bottom: 6px; }
.bo-field .dm-field__control { position: relative; }
.bo-field .dm-field__input { padding-top: 12px; padding-bottom: 12px; }
.bo-field__hint { margin-top: 6px; font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.bo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-space-md) var(--dm-space-lg); }
.bo-fieldset { border: 0; padding: 0; margin: var(--dm-space-lg) 0 0; display: flex; flex-direction: column; gap: 4px; }
.bo-fieldset legend { font: var(--dm-type-label-sm); letter-spacing: var(--dm-tracking-label-sm); text-transform: uppercase; color: var(--dm-color-on-surface-variant); margin-bottom: var(--dm-space-sm); }
.bo-fieldset small { display: block; font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.bo-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-space-sm) var(--dm-space-lg); }
.bo-toolcheck { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-md); }
.bo-toolcheck:has(.dm-checkbox__input:checked) { border-color: var(--dm-color-primary); background: color-mix(in srgb, var(--dm-color-primary-subtle) 55%, #fff); }
.bo-toolcheck .dm-checkbox__box { margin-top: 2px; }
.bo-toolcheck__icon { color: var(--dm-color-primary-hover); margin-top: -1px; }
.bo-form-actions { display: flex; flex-wrap: wrap; gap: var(--dm-space-md); align-items: center; margin-top: var(--dm-space-xl); }
.bo-form-actions form { margin: 0; }
.dm-button .bo-icon { width: 18px; height: 18px; margin-right: 6px; }

/* ---- Karten / Kopf ----------------------------------------------------- */
.bo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dm-space-md); margin-bottom: var(--dm-space-lg); }
.bo-head h1 { font: var(--dm-type-h1); font-size: 2rem; }
.bo-card { background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); padding: var(--dm-space-xl); margin-bottom: var(--dm-space-lg); }
.bo-card--center { text-align: center; max-width: 520px; margin: var(--dm-space-2xl) auto; }
.bo-card--center p { margin: var(--dm-space-md) auto; }
.bo-card--meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dm-space-lg); }
.bo-card--meta .bo-form-actions { margin: 0; }
.bo-meta { display: grid; grid-template-columns: auto auto; gap: 6px var(--dm-space-lg); font: var(--dm-type-body-sm); }
.bo-meta dt { color: var(--dm-color-on-surface-variant); }
.bo-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--dm-space-md); font: var(--dm-type-label-md); text-decoration: none; }
.bo-back .bo-icon { width: 18px; height: 18px; }

/* ---- Startseite: Kacheln ---------------------------------------------- */
.bo-hero { margin: var(--dm-space-lg) 0 var(--dm-space-xl); }
.bo-hero h1 { font: var(--dm-type-display-lg); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--dm-space-sm); }
.bo-lead { font: var(--dm-type-body-lg); color: var(--dm-color-on-surface-variant); }
.bo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--dm-space-lg); }
.bo-tile { display: flex; align-items: center; gap: var(--dm-space-md); padding: var(--dm-space-lg); background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); text-decoration: none; color: var(--dm-color-on-surface); transition: transform var(--dm-duration-base) var(--dm-ease-emphasized), box-shadow var(--dm-duration-base) var(--dm-ease-standard), border-color var(--dm-duration-base); }
.bo-tile:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); border-color: var(--dm-color-primary); color: var(--dm-color-on-surface); }
.bo-tile__icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--dm-rounded-md); background: var(--dm-color-primary-subtle); color: var(--dm-color-primary-hover); }
.bo-tile__icon .bo-icon { width: 28px; height: 28px; }
.bo-tile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bo-tile__name { font: var(--dm-type-h3); font-size: 1.2rem; }
.bo-tile__desc { font: var(--dm-type-body-sm); color: var(--dm-color-on-surface-variant); }
.bo-tile__arrow { margin-left: auto; color: var(--dm-color-outline); transition: color var(--dm-duration-fast), transform var(--dm-duration-base) var(--dm-ease-emphasized); }
.bo-tile:hover .bo-tile__arrow { color: var(--dm-color-primary); transform: translate(2px, -2px); }
.bo-tile--admin { background: var(--dm-color-inverse-surface); color: var(--dm-color-inverse-on-surface); border-color: transparent; }
.bo-tile--admin:hover { color: var(--dm-color-inverse-on-surface); border-color: var(--dm-color-primary); }
.bo-tile--admin .bo-tile__icon { background: rgba(255,255,255,.1); color: var(--dm-color-primary); }
.bo-tile--admin .bo-tile__desc { color: rgba(244,241,234,.7); }
.bo-tile--admin .bo-tile__arrow { color: rgba(244,241,234,.4); }
.bo-empty { margin-top: var(--dm-space-lg); padding: var(--dm-space-xl); border: 1px dashed var(--dm-color-outline); border-radius: var(--dm-rounded-lg); text-align: center; color: var(--dm-color-on-surface-variant); }

/* ---- Tabelle ------------------------------------------------------------ */
.bo-table-wrap { overflow-x: auto; background: var(--dm-color-surface); border: 1px solid var(--dm-color-outline-variant); border-radius: var(--dm-rounded-lg); box-shadow: var(--dm-shadow-sm); }
.bo-table { width: 100%; border-collapse: collapse; font: var(--dm-type-body-sm); }
.bo-table th, .bo-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--dm-color-outline-variant); vertical-align: middle; }
.bo-table th { font: var(--dm-type-label-sm); letter-spacing: var(--dm-tracking-label-sm); text-transform: uppercase; color: var(--dm-color-on-surface-variant); white-space: nowrap; background: var(--dm-color-surface-variant); }
.bo-table tbody tr:last-child td { border-bottom: 0; }
.bo-table tbody tr:hover { background: color-mix(in srgb, var(--dm-color-primary-subtle) 40%, #fff); }
.bo-table tr.is-inactive td { color: var(--dm-color-on-surface-variant); }
.bo-table__name { font: var(--dm-type-label-md); color: var(--dm-color-on-surface); text-decoration: none; }
.bo-table__name:hover { color: var(--dm-color-primary-hover); }
.bo-table__sub { color: var(--dm-color-on-surface-variant); }
.bo-table__tools { display: flex; flex-wrap: wrap; gap: 4px; }
.bo-table__actions { text-align: right; white-space: nowrap; }
.bo-chip { display: inline-flex; padding: 3px 9px; border-radius: var(--dm-rounded-full); border: 1px solid var(--dm-color-outline); background: var(--dm-color-surface); font: 500 0.75rem/1.4 var(--dm-font-sans); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .bo-topbar { gap: var(--dm-space-md); height: auto; padding: 10px var(--dm-space-md); flex-wrap: wrap; }
  .bo-userbox { margin-left: auto; }
  .bo-userbox__name { display: none; }
  .bo-logout span { display: none; }
  .bo-form-grid, .bo-tools-grid { grid-template-columns: 1fr; }
  .bo-head { flex-direction: column; align-items: flex-start; }
  .bo-main { width: calc(100% - 2 * var(--dm-space-md)); }
}