/* Independent public mobile theme. Initial appearance preserved. */
/* Structural adapters for application content; colours belong in theme.css. */
.skip-link { position: fixed; z-index: 2000; padding: 1rem; background: var(--tblr-bg-surface); }
.app-logo { display: block; width: 157px; height: 91px; object-fit: cover; }
.app-sidebar { --tblr-offcanvas-width: min(20rem, 90vw); --bs-offcanvas-width: min(20rem, 90vw); background: var(--tblr-bg-surface); }
.app-sidebar .offcanvas-body { display: block; padding: 1rem; overflow-y: auto; }
.sidebar-brand { margin: 0 auto 1.5rem; width: fit-content; }
.app-sidebar .nav-link { min-height: 44px; white-space: normal; border-radius: var(--tblr-border-radius); }
.app-sidebar .nav-link.active { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .1); font-weight: 600; }
.app-sidebar .accordion-button { padding: .875rem .75rem; font-size: .875rem; min-height: 48px; }
.app-sidebar .accordion-body { padding: .25rem 0 .75rem .75rem; }
.app-sidebar .accordion-item { background: transparent; }
.app-sidebar .nav-icon { width: 24px; height: 24px; margin-right: .5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.app-content { max-width: 1440px; }
.app-header .navbar-brand { margin: 0; }
.header-user { min-width: 0; }
.header-greeting { max-width: 20rem; overflow-wrap: anywhere; }
.narrow { max-width: 640px; margin: 1rem auto; }
.card { margin-bottom: 1.5rem; }
.card h1 { font-size: 1.5rem; }
.card h2 { font-size: 1.25rem; }
.form-label { margin-top: 1rem; }
form > .btn { margin-top: 1rem; }
.app-header form > .btn, td form > .btn { margin-top: 0; }
.form-control, .form-select { min-width: 0; }
.inline { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.inline > div { flex: 1 1 12rem; }
.table-responsive { margin-bottom: 1.5rem; }
.table td { overflow-wrap: anywhere; max-width: 30rem; }
.table td form { display: flex; gap: .5rem; flex-wrap: wrap; }
.record, .secret-value { overflow-wrap: anywhere; }
.settings-back { display: inline-block; margin-bottom: 1rem; }
.settings-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.settings-title .nav-icon, .sysadmin-entry .nav-icon, .settings-card .nav-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.settings-grid, .group-catalogue { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.settings-card, .group-card { margin: 0; display: flex; flex-direction: row; align-items: start; gap: 1rem; text-decoration: none; }
.settings-card p, .group-card p { color: var(--tblr-secondary); margin: 0; }
.group-card h3 { margin-bottom: .5rem; }
.group-icon { width: 24px; height: 24px; flex: none; }
.group-scope { font-size: .75rem; }
.invitation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.profile-picture-fields { min-width: 0; padding: 1rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); margin-top: 1.5rem; }
.profile-picture-fields legend { float: none; width: auto; font-size: 1rem; }
.password-checklist { background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); padding: 1rem; margin-top: 1rem; font-size: .875rem; }
.password-checklist ul { list-style: none; margin: 0; padding: 0; }
.password-checklist li { margin: .25rem 0; }
.password-checklist .met { color: var(--tblr-success); }
.password-checklist-title { font-weight: 600; }
.rule-state { font-size: .75rem; }
.password-summary:empty { display: none; }
.login-wrapper { width: min(100%, 430px); margin: 0 auto; }
.brand-name { width: 100%; max-width: 360px; aspect-ratio: 3/2; margin: 0 auto; }
.brand-name img { width: 100%; height: 100%; object-fit: cover; }
.google-signin-button { padding: 0; background: transparent; border: 0; }
.google-signin-button img { max-width: 100%; height: 40px; }
details.card > summary { cursor: pointer; font-weight: 600; }
@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: 0; flex: 0 0 var(--sm-sidebar-width); width: var(--sm-sidebar-width); height: 100dvh; border-right: 1px solid var(--tblr-border-color); }
  .app-sidebar .offcanvas-body { height: 100%; }
  .app-shell { display: flex; flex-direction: row; align-items: flex-start; }
  .app-shell > .page-wrapper { flex: 1; min-width: 0; min-height: 100dvh; margin-left: 0; }
}
@media (max-width: 991.98px) {
  .app-logo { width: 99px; height: 59px; }
  .app-content { padding-left: 1rem; padding-right: 1rem; }
  .app-header .container-fluid { flex-wrap: nowrap; }

  .form-control, .form-select { font-size: 16px; }
  .btn { min-height: 44px; }
}
@media (max-width: 760px) { .brand-name { max-width: 230px; } }

/* Shared dashboard layout; density continues to come from the theme. */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: calc(var(--sm-space) * var(--sm-box-gap-scale)); margin-bottom: var(--sm-space); }
.dashboard-grid > .card { margin-bottom: 0; min-width: 0; }
/* Keep summary numbers aligned below headings and their optional more buttons. */
.dashboard-stat { display: grid; grid-template-rows: 1fr auto; gap: .25rem; }
.dashboard-stat-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.dashboard-card-actions { display: inline-flex; flex-shrink: 0; gap: .25rem; }
.dashboard-card-actions .btn { width: 32px; height: 32px; padding: 0; }
.dashboard-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .75rem 1.5rem; margin: 0 0 .75rem; }
.dashboard-detail-stats dt { font-weight: 400; color: var(--tblr-secondary-color, #667382); }
.dashboard-detail-stats dd { margin: .25rem 0 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .dashboard-card-actions .btn { width: 44px; height: 44px; } }
.metric-chart { width: 100%; height: 70px; overflow: hidden; }
.disk-breakdown { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: center; max-width: 780px; }
.disk-breakdown[hidden] { display: none; }
.disk-pie { display: block; width: 200px; height: 200px; max-width: 100%; margin: auto; }
.disk-pie path, .disk-pie circle { stroke: var(--tblr-bg-surface, white); stroke-width: 1; }
.disk-swatch { width: 12px; height: 12px; margin-right: .5rem; vertical-align: -1px; }
.disk-breakdown .disk-legend td, .disk-breakdown .disk-legend th { padding: .25rem .5rem; }
.disk-breakdown .table-responsive { margin-bottom: 0; }
@media (max-width: 575.98px) { .disk-breakdown { grid-template-columns: minmax(0, 1fr); gap: .75rem; } }
.metric-chart polyline { fill: none; stroke: var(--tblr-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
#owner-dashboard td { white-space: normal; }

.dashboard-counts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* CMS content follows the shared theme; authored HTML cannot supply styles. */
.cms-page { max-width: 70rem; margin-inline: auto; }
.cms-content { overflow-wrap: anywhere; }
.cms-content > :last-child { margin-bottom: 0; }
#content-editor .ql-editor { min-height: 20rem; font: inherit; }
#content-editor, .ql-toolbar { background: var(--tblr-bg-surface, white); }
.ql-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; }
@media (max-width: 991px) { .ql-toolbar.ql-snow button { width: 36px; height: 44px; } }

/* Notification entry stays visible on phones, with a 44px tap target. */
.notification-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; text-decoration: none; }
.notification-toggle .avatar { display: inline-flex; width: 40px; height: 40px; }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 1px 4px; border-radius: 12px; font-size: 10px; line-height: 16px; text-align: center; }
.notification-count[hidden] { display: none; }
.notice-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-panel { --tblr-offcanvas-width: min(26rem, 100vw); --bs-offcanvas-width: min(26rem, 100vw); }
#notification-list a { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .header-signout { display: none; } }

.dashboard-card-actions [aria-expanded="true"] .dashboard-details-chevron { transform: rotate(180deg); }

.portal-time-wheel { max-width: 16rem; margin-inline: auto; text-align: center; padding: .5rem; font-size: 1.15rem; }
.portal-time-wheel option { padding: .6rem; }

#disk-location, .disk-legend td { overflow-wrap: anywhere; }
.disk-pie [role="button"] { cursor: pointer; }
.disk-pie [role="button"]:hover, .disk-pie [role="button"]:focus { opacity: .8; stroke: var(--tblr-body-color); stroke-width: 3; }
.disk-folder { background: none; border: 0; padding: 0; color: var(--tblr-link-color, #206bc4); text-align: left; text-decoration: underline; overflow-wrap: anywhere; }
.disk-folder:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.disk-chart-column { align-self: stretch; display: flex; flex-direction: column; gap: .75rem; }
.disk-chart-graphic { flex: 1; display: flex; align-items: center; }

.disk-breakdown > .table-responsive { align-self: end; }

/* Brand and density theme. Loaded after structural layout adapters. */
:root {
  --tblr-primary: #206bc4;
  --tblr-primary-rgb: 32, 107, 196;
  --tblr-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-body-bg: #f6f8fb;
  --tblr-body-color: #182433;
  --tblr-border-radius: .375rem;
  --sm-chart-background: #f9fafb;
  --sm-chart-grid: #c4cbd3;
  --sm-sidebar-width: 17rem;
  --sm-density: .75;
  --sm-box-gap-scale: .5;
  --sm-space: calc(1rem * var(--sm-density));
  --tblr-page-padding-y: calc(1.5rem * var(--sm-density));
}

/* Compact pass 1: reduce surrounding space, keeping type and artwork sizes. */
.card {
  --tblr-card-spacer-x: calc(1.25rem * var(--sm-density));
  --tblr-card-spacer-y: calc(1.25rem * var(--sm-density));
  margin-bottom: calc(1.5rem * var(--sm-density) * var(--sm-box-gap-scale));
}
.narrow { margin-top: var(--sm-space); }
.app-content p { margin-bottom: var(--sm-space); }
.app-content h1, .app-content h2, .app-content h3 { margin-bottom: calc(.75rem * var(--sm-density)); }
.form-label { margin-top: var(--sm-space); margin-bottom: calc(.5rem * var(--sm-density)); }
form > .btn { margin-top: var(--sm-space); }
.app-header form > .btn, td form > .btn { margin-top: 0; }
.inline, .settings-card, .group-card, .invitation { gap: var(--sm-space); }
.settings-back, .settings-title, .invitation { margin-bottom: var(--sm-space); }
.settings-grid, .group-catalogue { gap: calc(var(--sm-space) * var(--sm-box-gap-scale)); margin-block: calc(1.5rem * var(--sm-density) * var(--sm-box-gap-scale)); }
.settings-card, .group-card { margin-bottom: 0; }
.settings-card p, .group-card p { margin-bottom: 0; }
.profile-picture-fields { padding: var(--sm-space); margin-top: calc(1.5rem * var(--sm-density)); }
.profile-picture-fields > :last-child { margin-bottom: 0; }
.password-checklist { padding: var(--sm-space); margin-top: var(--sm-space); }
.table-responsive { margin-bottom: calc(1.5rem * var(--sm-density)); }
.table > :not(caption) > * > * { padding: calc(.75rem * var(--sm-density)); }
.app-sidebar .offcanvas-body { padding: var(--sm-space); }
.sidebar-brand { margin-bottom: calc(1.5rem * var(--sm-density)); }
.app-sidebar .accordion-body { padding-bottom: calc(.75rem * var(--sm-density)); }
.footer { padding-block: calc(2rem * var(--sm-density)); }
@media (min-width: 992px) {
  .app-sidebar .nav-link { min-height: 36px; padding-block: .375rem; }
  .app-sidebar .accordion-button { min-height: 40px; padding-block: .625rem; }
}

/* Quarter-scale guides share the trend chart’s 0–100% plotting range. */
.metric-chart { background: var(--sm-chart-background); }
.metric-grid path { fill: none; stroke: var(--sm-chart-grid); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

.notification-count { background: var(--tblr-danger, #d63939); color: white; }
.notification-toggle:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 3px; border-radius: 50%; }

/* Desktop actions: compact whitespace, readable labels, and separated controls. */
@media (min-width: 992px) {
  .btn {
    --tblr-btn-padding-y: .1875rem;
    --tblr-btn-padding-x: .625rem;
    padding: .1875rem .625rem;
    min-height: 28px;
  }
  .button-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px !important;
    max-width: 100%;
  }
  form > .button-row { margin-top: var(--sm-space); }
  .button-row > .btn { margin: 0; }
  .table td form { gap: 10px; }
  .table td form > .button-row { margin-top: 0; }
  .dashboard-card-actions { gap: 10px; }
  .dashboard-card-actions .btn {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
  }
}
/* Retain the previous spacing above form actions on touch layouts. */
@media (max-width: 991.98px) {
  form > .button-row > .btn { margin-top: var(--sm-space); }
  td form > .button-row > .btn { margin-top: 0; }
}

/* Test identities remain visibly distinct, including linked names and logs. */
.test-user, .test-user a { color: #c62828 !important; }

/* Selected summary cards join the detail panel beneath their responsive row. */
.ui-card-tab { cursor: pointer; position: relative; }
.ui-card-tab-grid > .ui-card-tab:hover { border-color: var(--tblr-primary); }
.ui-card-tab-grid > .ui-card-tab-active { border-color: var(--tblr-primary); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; z-index: 1; }
.ui-card-tab-active::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); height: var(--ui-tab-bridge-height, calc(var(--sm-space) * var(--sm-box-gap-scale) + 4px)); background: var(--tblr-bg-surface, #fff); border-left: 1px solid var(--tblr-primary); border-right: 1px solid var(--tblr-primary); z-index: 2; }
.ui-card-tab-panel { grid-column: 1 / -1; min-width: 0; }
.ui-card-tab-panel > .card { margin-bottom: 0; border-color: var(--tblr-primary); }
.ui-card-tab-active [aria-expanded="true"] svg { transform: rotate(180deg); }

.ui-card-tab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: calc(var(--sm-space) * var(--sm-box-gap-scale)); margin-bottom: var(--sm-space); }
.ui-card-tab-grid > .card { margin-bottom: 0; min-width: 0; }

/* A flush outer edge must not keep the panel's rounded corner under the join. */
.ui-card-tab-at-start > .card { border-top-left-radius: 0; }
.ui-card-tab-at-end > .card { border-top-right-radius: 0; }
.ui-card-tab-active { box-shadow: none; }

/* Cut the panel border at the selected tab itself, avoiding a seam at browser
   zoom levels where the card and grid gap land on fractional pixels. */
.ui-card-tab-panel.show > .card::before {
  content: "";
  position: absolute;
  left: var(--ui-tab-join-left, 0px);
  width: var(--ui-tab-join-width, 0px);
  top: -1px;
  height: 2px;
  background: var(--tblr-card-bg, #fff);
  pointer-events: none;
  z-index: 1;
}
.dashboard-grid, .ui-card-tab-grid {
  --sm-card-gap: calc(var(--sm-space) * var(--sm-box-gap-scale));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(230px, calc((100% - 3 * var(--sm-card-gap)) / 4))), 1fr));
}

/* Page menus use connected tabs, with the selected page's controls inside. */
.ui-menu-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; position: relative; z-index: 1; }
.ui-menu-tab { display: flex; align-items: center; padding: 1rem; min-width: 0; color: var(--tblr-body-color); background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius, .375rem) var(--tblr-border-radius, .375rem) 0 0; font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.ui-menu-tab:hover { color: var(--tblr-primary); border-color: var(--tblr-primary); text-decoration: none; }
.ui-menu-tab:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -4px; }
.ui-menu-tab.is-active { position: relative; margin-bottom: -1px; border-color: var(--tblr-primary); border-bottom-color: var(--tblr-bg-surface, #fff); color: var(--tblr-body-color); }
.ui-menu-panel { padding: 1rem; border: 1px solid var(--tblr-primary); border-radius: 0 0 var(--tblr-border-radius, .375rem) var(--tblr-border-radius, .375rem); background: var(--tblr-bg-surface, #fff); min-width: 0; }
@media (max-width: 575.98px) { .ui-menu-tab { padding: .75rem; font-size: 1rem; } .ui-menu-panel { padding: .5rem; } }

/* Small, non-interactive theme identifier, visible on every application page. */
.theme-label { position: fixed; right: max(.5rem, env(safe-area-inset-right)); bottom: max(.25rem, env(safe-area-inset-bottom)); z-index: 1020; padding: .125rem .25rem; font-size: 11px; line-height: 1.4; color: var(--tblr-secondary, #667382); background: var(--tblr-body-bg, #f6f8fb); border-radius: .2rem; cursor: default; }
body { padding-bottom: 1.5rem; }
@media print { .theme-label { display: none; } }

.theme-tooltip { display: none; position: absolute; bottom: 100%; right: 0; white-space: nowrap; padding: .25rem .5rem; border: 1px solid var(--tblr-border-color); border-radius: .2rem; background: var(--tblr-body-bg); color: var(--tblr-body-color); }
.theme-label:hover .theme-tooltip, .theme-label:focus-visible .theme-tooltip { display: block; }

/* Forms and direct links in an action row share the same baseline. */
.button-row > form { margin: 0; }
.button-row > form > .btn { margin-top: 0; }

/* Form actions keep their natural width instead of stretching with flex cards. */
.card > .btn:not(.w-100):not(.btn-icon),
.card-body > .btn:not(.w-100):not(.btn-icon) {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.button-row > .btn { flex: 0 0 auto; max-width: 100%; }
.button-row > form { margin: 0; }
.button-row > form > .btn { margin-top: 0; }

@media (min-width: 992px) { .dashboard-card-actions .btn { min-width: 24px; } }

/* Anonymous onboarding: one centred, phone-sized column on every viewport. */
body { text-align: center; }
body > .page > .page-wrapper {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 100%; min-height: 100dvh; margin: 0;
  gap: 1rem; padding-block: 1.5rem;
}
.app-header { width: 100%; padding: 0 1rem; background: transparent; border: 0; box-shadow: none; }
.app-header .container-fluid { flex-direction: column; justify-content: center; padding: 0; }
.app-header .navbar-brand, .app-header .btn.ms-auto { margin-inline: auto !important; }
.app-header .app-logo { width: 157px; height: 91px; }
.page-body { flex: 0 0 auto; width: 100%; margin: 0; padding: 0 1rem; }
.app-content { width: 100%; max-width: 430px; min-width: 0; margin-inline: auto; padding: 0; }
.narrow { width: 100%; max-width: 100%; margin: 0 auto; }
.card { text-align: center; }
.card form > .btn, .card form > .button-row { margin-inline: auto; }
.card .button-row { justify-content: center; }
.form-control, .form-select { text-align: center; }
.brand-name { max-width: 230px; }
#sm-footer { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 1rem; }
#sm-footer .container-fluid { padding: 0; }
nav[aria-label="Policies"] { justify-content: center; }

/* Email verification uses the public theme's reusable verification card. */
.sm-verification { width: 100%; max-width: 460px; margin: 2rem auto; }
.sm-verification-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.sm-verification-brand .app-logo { width: 157px; height: 91px; }
.sm-verification-card.card { padding: clamp(1.25rem, 6vw, 2rem); text-align: left; border-radius: .5rem; box-shadow: none; }
.sm-verification-card h1 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.3; }
.sm-verification-card p { margin: 0 0 1rem; }
.sm-verification-hint { padding: .875rem 1rem; background: #f5f5f5; border: 1px solid var(--tblr-border-color); border-radius: .375rem; }
.sm-verification-card .form-label { text-align: left; margin-bottom: .5rem; }
.sm-verification-code.form-control { min-height: 44px; text-align: center; letter-spacing: .3em; font-size: 1.125rem; font-weight: 600; border-radius: .5rem; }
.sm-verification-code::placeholder { color: #929ba5; opacity: 1; }
.sm-verification-card .btn-primary { min-height: 44px; margin-top: .75rem; border-radius: .5rem; }
.sm-verification-card .sm-verification-resend { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: .5rem 0 0; color: var(--tblr-secondary); }
.sm-verification-card .sm-verification-resend .btn-link { padding: .5rem .125rem; min-height: 44px; margin: 0; border: 0; font-weight: 400; }
.sm-verification-restart { align-self: flex-start; padding-block: .5rem; }