/*
 * BIMS premium interface system
 * Last-loaded, token-driven component layer shared by staff, citizen,
 * MyDasma, authentication, print preview, offline, and landing surfaces.
 */

:root {
  --ui-font-sans: "Segoe UI Variable", "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --ui-canvas: #f3f6f4;
  --ui-canvas-tint: #edf4ef;
  --ui-surface: #ffffff;
  --ui-surface-raised: rgba(255, 255, 255, .96);
  --ui-surface-soft: #f7faf8;
  --ui-surface-inset: #f2f7f4;
  --ui-text: #14231b;
  --ui-text-strong: #071a11;
  --ui-text-muted: #52675b;
  --ui-text-subtle: #6b7d73;
  --ui-border: #d6e1da;
  --ui-border-strong: #b9cec1;
  --ui-brand: #0b7449;
  --ui-brand-hover: #075b39;
  --ui-brand-soft: #e8f5ed;
  --ui-accent: #bc8d16;
  --ui-accent-soft: #fff5d2;
  --ui-info: #1d64b7;
  --ui-info-soft: #eaf3ff;
  --ui-danger: #b9382f;
  --ui-danger-hover: #932b25;
  --ui-danger-soft: #fff0ee;
  --ui-control-md: 44px;
  --ui-control-sm: 36px;
  --ui-control-lg: 48px;
  --ui-radius-control: 12px;
  --ui-radius-card: 18px;
  --ui-radius-inset: 14px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-shadow-sm: 0 2px 5px rgba(13, 49, 29, .05), 0 1px 2px rgba(13, 49, 29, .04);
  --ui-shadow-card: 0 16px 40px rgba(18, 55, 34, .08), 0 2px 8px rgba(18, 55, 34, .04);
  --ui-shadow-float: 0 24px 64px rgba(9, 38, 22, .18), 0 6px 18px rgba(9, 38, 22, .08);
  --ui-focus: 0 0 0 4px rgba(27, 109, 224, .20);
}

html {
  scroll-padding-top: 96px;
}

body.bims-pro-shell,
body.landing-body {
  font-family: var(--ui-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.bims-pro-shell :is(h1, h2, h3, h4),
body.landing-body :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

body.bims-pro-shell :is(p, li, dd),
body.landing-body :is(p, li) {
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 12px;
  padding: 10px 14px;
  border: 2px solid #ffffff;
  border-radius: var(--ui-radius-control);
  background: var(--ui-text-strong);
  box-shadow: var(--ui-shadow-float);
  color: #ffffff;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  color: #ffffff;
  transform: translateY(0);
}

/* Canonical action system. Width remains semantic; geometry and states match. */
body.bims-pro-shell .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0;
  min-height: var(--ui-control-md) !important;
  height: auto !important;
  padding: 10px 16px !important;
  gap: 8px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  color: var(--ui-brand-hover) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .875rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: -.005em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary) {
  border-color: #086840 !important;
  background: linear-gradient(180deg, #16875a 0%, #0b7047 100%) !important;
  box-shadow: 0 8px 18px rgba(8, 104, 64, .22), inset 0 1px 0 rgba(255, 255, 255, .23) !important;
  color: #ffffff !important;
}

body.bims-pro-shell :is(.btn-light, .btn--secondary, .btn.ghost) {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-brand-hover) !important;
}

body.bims-pro-shell :is(.btn-danger, .btn--danger) {
  border-color: #efc2bd !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
}

body.bims-pro-shell :is(.btn-small, .btn--sm, .btn.small, .btn-sm),
body.bims-admin-shell .row-actions .btn {
  min-height: var(--ui-control-sm) !important;
  padding: 7px 11px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  font-size: .79rem !important;
}

body.bims-admin-shell table.bims-compact-table tbody td.row-actions .btn {
  min-height: var(--ui-control-sm) !important;
  padding: 7px 11px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  font-size: .79rem !important;
}

body.bims-pro-shell :is(.btn--lg, .btn-lg) {
  min-height: var(--ui-control-lg) !important;
  padding-inline: 20px !important;
}

body.bims-pro-shell :is(.btn-icon, .icon-btn) {
  width: var(--ui-control-md) !important;
  min-width: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  min-height: var(--ui-control-md) !important;
  padding: 0 !important;
}

body.bims-pro-shell :is(.btn-block, .btn.full, .btn--block) {
  width: 100% !important;
}

body.bims-pro-shell .btn :is(.bpw-icon, .ico, .action-auto-icon) {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
}

body.bims-pro-shell .btn :is(.bpw-icon, .ico, .action-auto-icon) svg {
  width: 12px !important;
  height: 12px !important;
}

body.bims-pro-shell .btn:disabled,
body.bims-pro-shell .btn[aria-disabled="true"] {
  border-color: var(--ui-border) !important;
  background: #edf1ee !important;
  box-shadow: none !important;
  color: #75847c !important;
  opacity: .72 !important;
  pointer-events: none;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  body.bims-pro-shell .btn:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px) !important;
    border-color: #8fb8a1 !important;
    box-shadow: 0 10px 22px rgba(18, 55, 34, .12), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  }

  body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary):not(:disabled):hover {
    border-color: var(--ui-brand-hover) !important;
    background: linear-gradient(180deg, #107b50 0%, #075b39 100%) !important;
    color: #ffffff !important;
  }

  body.bims-pro-shell :is(.btn-danger, .btn--danger):not(:disabled):hover {
    border-color: #dfa49e !important;
    background: #ffe5e2 !important;
    color: var(--ui-danger-hover) !important;
  }
}

body.bims-pro-shell .btn:not(:disabled):active {
  transform: translateY(0) scale(.985) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.bims-pro-shell :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.landing-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(27, 109, 224, .48) !important;
  outline-offset: 3px !important;
  box-shadow: var(--ui-focus) !important;
}

/* Staff shell and primary surfaces. */
body.bims-admin-shell {
  --sidebar-width: 292px;
  --ios-control-h: var(--ui-control-md);
  --ios-radius-control: var(--ui-radius-control);
  --ios-radius-button: var(--ui-radius-control);
  --ios-radius-card: var(--ui-radius-card);
  --ios-text: var(--ui-text);
  --ios-secondary: var(--ui-text-muted);
  --ios-separator: rgba(36, 74, 51, .13);
  --ios-separator-strong: rgba(11, 116, 73, .30);
  background:
    radial-gradient(circle at 92% -8%, rgba(188, 141, 22, .11), transparent 31%),
    radial-gradient(circle at 14% 10%, rgba(11, 116, 73, .09), transparent 29%),
    linear-gradient(180deg, #f7f9f8 0%, var(--ui-canvas) 46%, #eef3f0 100%) !important;
  color: var(--ui-text);
  font-family: var(--ui-font-sans) !important;
  font-size: 15px;
}

body.bims-admin-shell .sidebar {
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
  background:
    radial-gradient(circle at 15% -2%, rgba(208, 163, 39, .20), transparent 27%),
    linear-gradient(168deg, #093f2c 0%, #062f22 48%, #031f17 100%) !important;
  box-shadow: 14px 0 38px rgba(4, 39, 26, .13) !important;
}

body.bims-admin-shell .brand {
  margin: 12px 10px 18px;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: var(--ui-radius-card) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 30px rgba(0, 0, 0, .10) !important;
}

body.bims-admin-shell .side-nav :is(summary, a) {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: .84rem !important;
  line-height: 1.25;
}

body.bims-admin-shell .side-nav a:is(.active, .is-active),
body.bims-admin-shell .side-nav details.active-group > summary {
  border-color: rgba(255, 255, 255, .16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .09)) !important;
  box-shadow: inset 3px 0 0 #e2b73f, inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .10) !important;
}

body.bims-admin-shell .topbar {
  justify-content: flex-start !important;
  min-height: 80px !important;
  padding-block: 12px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(249, 251, 250, .88) !important;
  box-shadow: 0 9px 30px rgba(18, 55, 34, .055) !important;
  backdrop-filter: saturate(165%) blur(22px);
  -webkit-backdrop-filter: saturate(165%) blur(22px);
}

body.bims-admin-shell .topbar > .topbar-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.bims-admin-shell .topbar-title h1 {
  color: var(--ui-text-strong) !important;
  font-size: clamp(1.12rem, 1.4vw, 1.38rem) !important;
  font-weight: 780 !important;
  letter-spacing: -.025em;
}

body.bims-admin-shell .topbar-title > small {
  color: var(--ui-text-muted) !important;
  font-size: .76rem !important;
}

body.bims-admin-shell .bpw-account-shell {
  flex: 0 0 auto !important;
  align-items: flex-end !important;
  margin-left: auto !important;
}

body.bims-admin-shell .bpw-account-shell :is(.barangay-switcher, .kld-nextly-profile) {
  flex: 0 1 270px !important;
  width: 270px !important;
  min-width: 210px !important;
  max-width: 270px !important;
}

body.bims-admin-shell .bpw-account-shell :is(
  .barangay-lookup > input,
  .kld-nextly-profile-button,
  .barangay-scope-pill
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  max-height: var(--ui-control-md) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.bims-admin-shell :is(
  .panel,
  .bpw-panel,
  .metric-card,
  .stat-card,
  .module-card,
  .module-card-pro,
  .portal-card-panel,
  .category-hero,
  .dashboard-welcome,
  .chart-panel,
  .ai-executive-panel,
  .area-dashboard-panel,
  .notification-inbox-panel,
  .reports-panel,
  .receipt-panel,
  .permission-matrix-panel
) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-card) !important;
  backdrop-filter: saturate(130%) blur(16px);
  -webkit-backdrop-filter: saturate(130%) blur(16px);
}

body.bims-admin-shell :is(
  .complaint-detail-card,
  .area-module-card,
  .breakdown-card,
  .workflow-status-note,
  .service-citizen-action-panel,
  .complaint-feedback-panel,
  .complaint-mode-actions-card
) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-inset) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.bims-admin-shell :is(.panel, .bpw-panel) {
  padding: clamp(18px, 2vw, 24px) !important;
}

body.bims-admin-shell :is(.panel-header, .bpw-panel-head, .dashboard-panel-header) {
  align-items: center !important;
  gap: var(--ui-space-4) !important;
  margin-bottom: var(--ui-space-4) !important;
}

body.bims-admin-shell :is(.panel-header h2, .bpw-panel-head h3, .dashboard-panel-header h2, .category-hero h1) {
  color: var(--ui-text-strong) !important;
  font-weight: 780 !important;
  letter-spacing: -.02em;
}

body.bims-admin-shell :is(.panel-header p, .bpw-panel-head p, .dashboard-panel-header p, .category-hero p, .dashboard-welcome p) {
  color: var(--ui-text-muted) !important;
  line-height: 1.5;
}

/* Staff form controls use the same 44px rhythm as standard actions. Semantic
   compact controls (such as the live-map priority picker) opt out below. */
body.bims-admin-shell .main > :not(.topbar) :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not(.barangay-select-search-native):not(.permission-account-search-input):not([data-map-search]),
  select:not([multiple]):not(.barangay-select-search-native):not([data-radar-priority-filter])
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), var(--ui-shadow-sm) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

body.bims-admin-shell .main > :not(.topbar) select:not([multiple]):not(.barangay-select-search-native):not([data-radar-priority-filter]) {
  padding-right: 34px !important;
}

body.bims-admin-shell .main > :not(.topbar) textarea {
  min-height: 124px !important;
  height: auto !important;
  padding: 12px 13px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

body.bims-admin-shell .main > :not(.topbar) input[type="file"] {
  min-height: var(--ui-control-md) !important;
  padding: 7px 10px !important;
  border: 1px dashed var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface-soft) !important;
}

body.bims-admin-shell :is(input[type="checkbox"], input[type="radio"]) {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  accent-color: var(--ui-brand);
}

body.bims-admin-shell label {
  gap: 7px !important;
  color: var(--ui-text) !important;
  font-size: .86rem;
  font-weight: 700 !important;
}

body.bims-admin-shell :is(label small, .help-text, .form-help-text) {
  color: var(--ui-text-muted) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  line-height: 1.45;
}

body.bims-admin-shell :is(.button-row, .row-actions, .form-actions, .bpw-map-actions, .portal-actions) {
  gap: 8px !important;
}

body.bims-admin-shell .form-actions {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border) !important;
}

/* Tables keep their existing semantic/scroll behavior with one visual recipe. */
body.bims-admin-shell .table-wrap {
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  scrollbar-color: #a8c2b2 transparent;
  scrollbar-width: thin;
}

body.bims-admin-shell th {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: #f1f6f3 !important;
  color: #485f52 !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  letter-spacing: .035em;
}

body.bims-admin-shell td {
  padding: 13px 14px !important;
  border-bottom-color: #e7eeea !important;
  color: var(--ui-text) !important;
  font-size: .86rem;
}

body.bims-admin-shell tbody tr:last-child td {
  border-bottom: 0 !important;
}

@media (hover: hover) {
  body.bims-admin-shell tbody tr:hover td {
    background: #f4faf6 !important;
  }
}

body.bims-pro-shell .badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.1;
}

body.bims-pro-shell .badge-info {
  border-color: #c9dcf6;
  background: var(--ui-info-soft);
  color: #18569b;
}

body.bims-pro-shell .badge-success {
  border-color: #bfe2cc;
  background: #eaf8ef;
  color: #087044;
}

body.bims-pro-shell .badge-warning {
  border-color: #ecd99e;
  background: var(--ui-accent-soft);
  color: #805b00;
}

body.bims-pro-shell .badge-danger {
  border-color: #efc7c2;
  background: var(--ui-danger-soft);
  color: #a83129;
}

body.bims-pro-shell .badge-muted {
  border-color: #d9e1dc;
  background: #f0f3f1;
  color: #5b6c62;
}

/* Modal geometry stays usable in short and keyboard-constrained viewports. */
body.bims-admin-shell .bims-modal-root {
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

body.bims-admin-shell .bims-modal-card {
  width: min(1040px, calc(100vw - 28px)) !important;
  max-height: min(calc(100dvh - 28px), 900px) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 22px !important;
  background: rgba(250, 252, 251, .97) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

body.bims-admin-shell .bims-modal-body {
  min-height: 0 !important;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ui-canvas) !important;
}

body.bims-admin-shell .bims-modal-frame {
  height: min(76dvh, 760px) !important;
  min-height: min(440px, calc(100dvh - 128px)) !important;
  background: var(--ui-canvas) !important;
}

body.bims-admin-shell :is(.sidebar-close, .bims-modal-close, .menu-btn) {
  box-sizing: border-box !important;
  width: var(--ui-control-md) !important;
  min-width: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  min-height: var(--ui-control-md) !important;
  padding: 0 !important;
  border-radius: var(--ui-radius-control) !important;
}

body.bims-admin-shell select.barangay-select-search-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
}

body.bims-admin-shell :is(
  .barangay-select-search-option,
  .resident-bpw-autocomplete-choice,
  .permission-account-search-option,
  .bpw-map-filter,
  .bpw-map-search-choice,
  .bpw-map-reset
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-md) !important;
  padding-block: 9px !important;
  border-radius: 10px !important;
  font-size: .8rem !important;
}

.citizen-image-lightbox-close {
  box-sizing: border-box !important;
  width: var(--ui-control-md) !important;
  min-width: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  min-height: var(--ui-control-md) !important;
}

/* Citizen website and authentication surfaces. */
body.public-service-body,
body.auth-page,
body.print-page {
  color: var(--ui-text);
  font-family: var(--ui-font-sans) !important;
}

html:not([data-citizen-theme="dark"]) body.public-service-body {
  background:
    radial-gradient(circle at 90% -10%, rgba(188, 141, 22, .12), transparent 30%),
    radial-gradient(circle at 12% 8%, rgba(11, 116, 73, .10), transparent 28%),
    linear-gradient(180deg, #f8faf9, #f0f5f2) !important;
}

html:not([data-citizen-theme="dark"]) body.public-service-body :is(
  .public-hero-panel,
  .public-service-card,
  .public-combo-panel,
  .citizen-access-card,
  .citizen-access-hero,
  .citizen-account-hero,
  .citizen-account-panel,
  .citizen-account-profile,
  .citizen-news-card,
  .citizen-news-panel,
  .portal-card-panel,
  .citizen-action-card,
  .citizen-request-detail-modal-card
) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

body.public-service-body :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.barangay-select-search-native),
  select:not([multiple]):not(.barangay-select-search-native)
) {
  box-sizing: border-box;
  min-height: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border-radius: var(--ui-radius-control) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .9rem !important;
  line-height: 1.2 !important;
}

body.public-service-body textarea {
  min-height: 124px !important;
  height: auto !important;
  padding: 12px 13px !important;
  border-radius: var(--ui-radius-control) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

body.public-service-body input[type="file"] {
  min-height: var(--ui-control-md) !important;
  border-radius: var(--ui-radius-control) !important;
}

body.public-service-body :is(input[type="checkbox"], input[type="radio"]) {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  accent-color: var(--ui-brand);
}

body.public-service-body :is(.public-hero-actions, .citizen-access-form-actions, .button-row, .form-actions) {
  gap: 9px !important;
}

body.public-service-body :is(.citizen-public-menu-toggle, .citizen-desktop-account, .citizen-desktop-signout) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-md) !important;
  padding: 9px 12px !important;
  gap: 7px;
  border: 1px solid rgba(11, 116, 73, .18);
  border-radius: var(--ui-radius-control) !important;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-brand-hover);
  font: inherit;
  font-size: .8rem !important;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.citizen-desktop-signout-form {
  display: contents;
  margin: 0;
}

body.public-service-body :is(
  .help-text,
  .form-help-text,
  label > small,
  .citizen-menu-account-copy small,
  .citizen-notification-item-copy small,
  .citizen-notification-item-copy time,
  .citizen-notification-popover-head small
) {
  color: var(--ui-text-muted) !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
}

.citizen-notification-toggle {
  box-sizing: border-box !important;
  width: var(--ui-control-md) !important;
  min-width: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  min-height: var(--ui-control-md) !important;
}

.citizen-public-menu :is(a:not(.citizen-menu-account), .citizen-menu-signout) {
  min-height: var(--ui-control-md) !important;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
  .citizen-public-menu-toggle,
  .citizen-desktop-account,
  .citizen-desktop-signout
) {
  border-color: #385145 !important;
  background: #17261e !important;
  color: #d9efe0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
}

html[data-citizen-theme="dark"] body.public-service-body :is(
  .help-text,
  .form-help-text,
  label > small,
  .citizen-menu-account-copy small,
  .citizen-notification-item-copy small,
  .citizen-notification-item-copy time,
  .citizen-notification-popover-head small
) {
  color: #b7cabd !important;
}

html[data-citizen-theme="dark"] body.public-service-body :is(.btn-light, .btn--secondary, .btn.ghost) {
  border-color: #385145 !important;
  background: #17261e !important;
  color: #d9efe0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
}

html[data-citizen-theme="dark"] body.public-service-body :is(.btn-danger, .btn--danger) {
  border-color: #69413b !important;
  background: #321d1a !important;
  color: #ffaaa2 !important;
}

/* Shared service-location options; intentionally not promoted to .btn. */
.public-location-combo,
.mydasma-request-location,
.mydasma-combo {
  position: relative;
  display: block;
}

.public-location-combo input,
.mydasma-request-location input {
  box-sizing: border-box;
  width: 100%;
  padding-right: 38px !important;
}

:is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) {
  position: absolute;
  z-index: 55;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 3px;
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-float);
}

:is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel)[hidden] {
  display: none;
}

:is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) button {
  box-sizing: border-box;
  min-height: var(--ui-control-md) !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #174b32 !important;
  font: inherit;
  font-size: .82rem !important;
  font-weight: 750 !important;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

:is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) button:is(:hover, .active) {
  background: var(--ui-brand-soft) !important;
  color: var(--ui-brand-hover) !important;
}

:is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) small {
  padding: 9px;
  color: var(--ui-text-muted);
  font-size: .76rem !important;
  font-weight: 650;
  line-height: 1.4;
}

/* MyDasma now consumes the same tokens while retaining its app navigation. */
.mydasma-barangay-picker {
  display: grid;
  gap: 7px;
}

.mydasma-barangay-picker > span:first-child {
  color: var(--ui-text);
  font-size: .82rem;
  font-weight: 750;
}

.mydasma-barangay-picker .citizen-scope-search {
  position: relative;
  display: block;
}

.mydasma-barangay-picker input[type="search"] {
  width: 100%;
  min-height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font: inherit;
  font-weight: 650;
  outline: 0;
}

.mydasma-barangay-picker .citizen-scope-results {
  z-index: 30;
}

.mydasma-barangay-picker > small {
  color: var(--ui-text-muted);
  font-size: .75rem;
  font-weight: 600;
}

.mydasma-history article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-inset);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
}

.mydasma-history article > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}

.mydasma-history article > span:first-child .bpw-icon {
  width: 19px;
  height: 19px;
}

body.mydasma-body {
  background:
    radial-gradient(circle at 88% -7%, rgba(188, 141, 22, .14), transparent 30%),
    radial-gradient(circle at 10% 8%, rgba(11, 116, 73, .12), transparent 27%),
    linear-gradient(180deg, #f9fbf9, #eef5f0) !important;
  color: var(--ui-text);
}

.mydasma-public-shell .mydasma-app {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0 0 98px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mydasma-public-shell :is(.mydasma-guest, .mydasma-welcome, .mydasma-section, .mydasma-auth-card) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-card) !important;
  color: var(--ui-text) !important;
}

.mydasma-public-shell :is(.mydasma-guest, .mydasma-welcome) {
  padding: 24px !important;
}

.mydasma-public-shell :is(.mydasma-kicker, .mydasma-welcome > span) {
  color: var(--ui-brand);
}

.mydasma-public-shell :is(.mydasma-guest h1, .mydasma-welcome h1) {
  color: var(--ui-text-strong);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.mydasma-public-shell :is(.mydasma-guest p, .mydasma-welcome p) {
  color: var(--ui-text-muted);
}

.mydasma-public-shell .mydasma-guest-actions a {
  box-sizing: border-box;
  min-height: var(--ui-control-md) !important;
  border-radius: var(--ui-radius-control) !important;
}

.mydasma-public-shell .mydasma-guest-actions a:first-child,
.mydasma-public-shell :is(.mydasma-guest-install, .mydasma-welcome .mydasma-install) {
  background: linear-gradient(180deg, #16875a, #0b7047) !important;
  color: #ffffff !important;
}

.mydasma-public-shell .mydasma-guest-actions a + a {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-brand-hover) !important;
}

.mydasma-public-shell .mydasma-guest-install {
  margin-top: 10px;
}

.mydasma-public-shell .mydasma-guest-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mydasma-public-shell .mydasma-guest-options a {
  min-height: 104px;
  border-radius: var(--ui-radius-inset) !important;
}

.mydasma-public-shell .mydasma-nav {
  max-width: 1180px;
}

.mydasma-form button[type="submit"],
.mydasma-verify button[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-md) !important;
  padding: 10px 16px !important;
  gap: 8px;
  border: 1px solid #086840 !important;
  border-radius: var(--ui-radius-control) !important;
  background: linear-gradient(180deg, #16875a, #0b7047) !important;
  box-shadow: 0 8px 18px rgba(8, 104, 64, .20) !important;
  color: #ffffff !important;
  font: inherit;
  font-size: .875rem !important;
  font-weight: 750 !important;
  cursor: pointer;
}

.mydasma-profile-photo-remove button[type="submit"] {
  border-color: #efc2bd !important;
  background: var(--ui-danger-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  color: var(--ui-danger) !important;
}

.mydasma-complaint-page {
  padding-bottom: 104px;
}

.mydasma-complaint-hero {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: var(--ui-radius-card);
  background:
    radial-gradient(circle at 94% 4%, rgba(255, 217, 106, .28), transparent 30%),
    linear-gradient(135deg, #086f48 0%, #118357 66%, #9f7611 120%);
  box-shadow: 0 20px 44px rgba(8, 83, 48, .20);
  color: #ffffff;
}

.mydasma-complaint-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #effaf2;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mydasma-complaint-hero__eyebrow .bpw-icon {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .17);
}

.mydasma-complaint-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  letter-spacing: -.04em;
  line-height: 1.07;
}

.mydasma-complaint-hero p {
  margin: 0;
  color: #eef9f1;
  font-size: .9rem;
  line-height: 1.5;
}

.mydasma-complaint-hero a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: var(--ui-control-md);
  padding: 9px 13px;
  gap: 7px;
  border-radius: var(--ui-radius-control);
  background: #ffffff;
  box-shadow: var(--ui-shadow-sm);
  color: #9c3927;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}

.mydasma-complaint-card {
  gap: 16px;
}

.mydasma-complaint-card .mydasma-section-head {
  align-items: center;
}

.mydasma-complaint-card .mydasma-section-head h2 {
  font-size: 1.16rem;
}

.mydasma-complaint-card .mydasma-section-head p {
  max-width: 540px;
}

.mydasma-complaint-form {
  gap: 14px;
  margin: 0;
  padding: 0;
}

.mydasma-complaint-form .hp-field {
  display: none;
}

.mydasma-complaint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mydasma-complaint-grid > label {
  display: grid;
  gap: 7px;
  color: var(--ui-text);
  font-size: .82rem;
  font-weight: 750;
}

.mydasma-complaint-grid > label > small {
  color: var(--ui-text-muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

.mydasma-complaint-grid .span-two {
  grid-column: 1 / -1;
}

.mydasma-complaint-grid :is(input, select, textarea) {
  width: 100%;
  min-height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font: inherit;
}

.mydasma-complaint-grid textarea {
  min-height: 126px !important;
  resize: vertical;
  line-height: 1.5;
}

.mydasma-photo-field {
  padding: 12px;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
}

.mydasma-photo-field input {
  min-height: auto !important;
  padding: 5px !important;
  border: 0 !important;
  background: transparent !important;
}

.mydasma-consent {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 12px !important;
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand-soft);
  color: #315b43 !important;
  line-height: 1.45;
}

.mydasma-consent input {
  width: 19px !important;
  min-height: 19px !important;
  height: 19px !important;
  margin: 1px 0 0;
  padding: 0 !important;
  accent-color: var(--ui-brand);
}

.mydasma-complaint-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.mydasma-complaint-actions :is(button, a) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-md) !important;
  padding: 10px 14px !important;
  gap: 7px;
  border-radius: var(--ui-radius-control) !important;
  font: inherit;
  font-size: .84rem !important;
  font-weight: 800 !important;
  text-decoration: none;
}

.mydasma-complaint-actions button {
  border: 1px solid #086840 !important;
  background: linear-gradient(180deg, #16875a, #0b7047) !important;
  color: #ffffff !important;
  cursor: pointer;
}

.mydasma-complaint-actions a {
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-brand-hover) !important;
}

html[data-citizen-theme="dark"] body.mydasma-body {
  --ui-text: #eef8f1;
  --ui-text-strong: #ffffff;
  --ui-text-muted: #b7cabd;
  --ui-border: #2d4939;
  --ui-border-strong: #3a5c48;
  --ui-surface: #0d1b13;
  --ui-surface-raised: #11251a;
  --ui-surface-soft: #142b1e;
  --ui-brand-soft: #183b28;
  background: #08140e !important;
}

html[data-citizen-theme="dark"] .mydasma-public-shell :is(.mydasma-guest, .mydasma-welcome, .mydasma-section, .mydasma-auth-card),
html[data-citizen-theme="dark"] .mydasma-complaint-card {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30) !important;
}

html[data-citizen-theme="dark"] .mydasma-complaint-grid > label {
  color: var(--ui-text);
}

html[data-citizen-theme="dark"] .mydasma-complaint-grid > label > small {
  color: var(--ui-text-muted);
}

html[data-citizen-theme="dark"] .mydasma-complaint-grid :is(input, select, textarea),
html[data-citizen-theme="dark"] .mydasma-barangay-picker input[type="search"] {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

html[data-citizen-theme="dark"] :is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
}

html[data-citizen-theme="dark"] :is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) button {
  color: var(--ui-text) !important;
}

html[data-citizen-theme="dark"] .mydasma-photo-field {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-soft);
}

html[data-citizen-theme="dark"] .mydasma-consent {
  background: #173825;
  color: #d7ebdd !important;
}

html[data-citizen-theme="dark"] .mydasma-complaint-actions a {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-raised) !important;
  color: #d9efe0 !important;
}

/* Root landing follows the same material, spacing, and action language. */
body.landing-body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 92% -8%, rgba(188, 141, 22, .16), transparent 34%),
    radial-gradient(circle at 8% 4%, rgba(11, 116, 73, .15), transparent 30%),
    linear-gradient(180deg, #f8faf8, #edf3ef) !important;
  color: var(--ui-text);
}

body.landing-body .landing-wrap {
  width: min(1240px, calc(100% - 32px));
}

body.landing-body :is(.landing-hero, .demo-card, .landing-tile) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

body.landing-body .landing-hero {
  background:
    radial-gradient(circle at 92% 5%, rgba(188, 141, 22, .15), transparent 28%),
    linear-gradient(145deg, #ffffff, #f3f9f5) !important;
}

body.landing-body .demo-card {
  border-color: #d6dfc5 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 183, 57, .15), transparent 32%),
    var(--ui-surface-raised) !important;
}

body.landing-body .landing-account-link,
body.landing-body .pwa-install-landing {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-md) !important;
  padding: 10px 16px !important;
  border: 1px solid #086840 !important;
  border-radius: var(--ui-radius-control) !important;
  background: linear-gradient(180deg, #16875a, #0b7047) !important;
  box-shadow: 0 8px 18px rgba(8, 104, 64, .20) !important;
  color: #ffffff !important;
  font: inherit;
  font-size: .875rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

body.landing-body .landing-tile > a {
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--ui-brand-soft);
  color: var(--ui-brand-hover);
  font-weight: 700;
}

body.auth-page :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
  select:not([multiple])
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border-radius: var(--ui-radius-control) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: .9rem !important;
}

body.auth-page .auth-account-results button.auth-account-result {
  min-height: var(--ui-control-md) !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-family: var(--ui-font-sans) !important;
}

body.bims-admin-shell :is(.page-number, .page-control) {
  box-sizing: border-box !important;
  min-width: var(--ui-control-sm) !important;
  min-height: var(--ui-control-sm) !important;
  border-radius: 10px !important;
}

body.bims-admin-shell .premium-trend-period button {
  box-sizing: border-box !important;
  min-width: var(--ui-control-sm) !important;
  min-height: var(--ui-control-sm) !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: .78rem !important;
}

body.bims-admin-shell [data-map-subdivision-clear] {
  min-width: var(--ui-control-md) !important;
  min-height: 32px !important;
}

body.public-service-body [data-citizen-ask-suggestion] {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: .8rem !important;
}

/* Responsive and input-mode safeguards. */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 82px;
  }

  body.bims-admin-shell.sidebar-open,
  body.bims-admin-shell.bims-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.bims-admin-shell .side-nav :is(summary, a) {
    min-height: var(--ui-control-md) !important;
  }

  body.bims-admin-shell .userbox {
    flex-wrap: wrap;
  }

  body.bims-admin-shell .bpw-account-shell :is(.barangay-switcher, .kld-nextly-profile) {
    flex: 1 1 220px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  body.bims-admin-shell .main {
    padding: 14px !important;
  }

  body.bims-admin-shell .topbar {
    margin: -14px -14px 14px !important;
    padding-inline: 14px !important;
  }

  body.bims-admin-shell :is(.panel, .bpw-panel) {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  body.bims-admin-shell :is(.panel-header, .bpw-panel-head, .dashboard-panel-header) {
    align-items: stretch !important;
  }

  body.bims-admin-shell .form-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.bims-admin-shell .form-actions .btn,
  body.public-service-body .citizen-access-form-actions .btn {
    width: 100% !important;
  }

  body.bims-admin-shell .bims-modal-root {
    padding: 8px;
  }

  body.bims-admin-shell .bims-modal-card {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 17px !important;
  }

  body.bims-admin-shell .bims-modal-frame {
    height: calc(100dvh - 84px) !important;
    min-height: 0 !important;
  }

  .mydasma-public-shell .mydasma-app {
    padding-bottom: 90px;
  }

  .mydasma-public-shell :is(.mydasma-guest, .mydasma-welcome) {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .mydasma-public-shell .mydasma-guest-options {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 11px;
  }

  .mydasma-public-shell .mydasma-guest-options a {
    min-height: 68px;
    padding: 11px 13px;
  }

  .mydasma-public-shell :is(.mydasma-guest h1, .mydasma-welcome h1) {
    font-size: 1.45rem;
  }
}

@media (max-width: 580px) {
  .mydasma-history article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .mydasma-history article .badge {
    grid-column: 2;
    justify-self: start;
  }

  .mydasma-complaint-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .mydasma-complaint-hero {
    padding: 18px;
    border-radius: 16px;
  }

  .mydasma-complaint-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mydasma-complaint-grid .span-two,
  .mydasma-consent {
    grid-column: auto;
  }

  .mydasma-complaint-actions {
    grid-template-columns: 1fr;
  }

  .mydasma-complaint-actions a {
    order: 2;
  }

  :is(.public-location-panel, .mydasma-request-location-panel, .mydasma-combo-panel) {
    max-height: 190px;
  }
}

@media (pointer: coarse) {
  body.bims-pro-shell .btn {
    min-height: var(--ui-control-lg) !important;
  }

  body.bims-pro-shell :is(.btn-small, .btn--sm, .btn.small, .btn-sm),
  body.bims-admin-shell .row-actions .btn {
    min-height: 40px !important;
  }

  body.bims-admin-shell table.bims-compact-table tbody td.row-actions .btn {
    min-height: 40px !important;
  }

  body.bims-admin-shell :is(.page-number, .page-control, .premium-trend-period button),
  body.public-service-body [data-citizen-ask-suggestion] {
    min-height: var(--ui-control-md) !important;
  }

  body.bims-pro-shell .btn:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.bims-pro-shell .btn:hover,
  body.landing-body :is(a, button):hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Compact actions + direct-color icons

   Ordinary actions intentionally share one compact visual height. Composite
   choice cards, search/listbox results, image triggers, backdrops, and bottom
   navigation keep their content-driven geometry.
   -------------------------------------------------------------------------- */

:root {
  --ui-action-height: 30px;
  --ui-action-radius: 9px;
  --ui-action-padding-x: 10px;
  --ui-action-icon-size: 16px;
}

body.bims-pro-shell :is(
  .btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
),
body.bims-admin-shell :is(
  .bpw-map-filter,
  .bpw-map-reset,
  .premium-trend-period button,
  [data-map-subdivision-clear],
  .account-action,
  .kld-nextly-profile-action
),
body.public-service-body :is(
  .citizen-public-menu-toggle,
  .citizen-desktop-account,
  .citizen-desktop-signout,
  .citizen-menu-signout,
  .citizen-news-tab,
  .citizen-news-see-more,
  .citizen-news-load-more,
  .citizen-news-card-footer a,
  .citizen-ask-send,
  .citizen-feature-details,
  .citizen-mobile-request-toggle,
  .citizen-mobile-request-view,
  .citizen-request-detail-modal-dismiss,
  .account-action,
  .pwa-install-button
),
body.mydasma-body :is(
  .mydasma-install,
  .mydasma-logout,
  .mydasma-reset-settings,
  .mydasma-action-link,
  .mydasma-guest-actions a,
  .mydasma-form button[type="submit"],
  .mydasma-verify button[type="submit"],
  .mydasma-profile-photo-remove button[type="submit"],
  .mydasma-complaint-actions button,
  .mydasma-complaint-actions a,
  .mydasma-complaint-hero a
),
body.landing-body :is(
  .btn,
  .landing-account-link,
  .pwa-install-landing,
  .landing-tile > a,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
) {
  box-sizing: border-box !important;
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  max-height: var(--ui-action-height) !important;
  padding: 0 var(--ui-action-padding-x) !important;
  gap: 5px !important;
  border-radius: var(--ui-action-radius) !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* High-specificity legacy modal and table recipes must resolve to the same
   visual action height as the shared component. */
body.bims-admin-shell.modal-frame-page :is(.button-row, .form-actions) :is(
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
),
body.bims-admin-shell table.bims-compact-table tbody td.row-actions :is(.btn, button),
body.bims-admin-shell .row-actions :is(.btn, button) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  max-height: var(--ui-action-height) !important;
  padding: 0 var(--ui-action-padding-x) !important;
  gap: 5px !important;
  border-radius: var(--ui-action-radius) !important;
  font-size: .76rem !important;
  line-height: 1 !important;
}

body.bims-pro-shell :is(.btn-small, .btn--sm, .btn.small, .btn-sm, .btn--lg, .btn-lg),
body.bims-admin-shell :is(.page-number, .page-control) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  max-height: var(--ui-action-height) !important;
  padding: 0 var(--ui-action-padding-x) !important;
  border-radius: var(--ui-action-radius) !important;
  font-size: .76rem !important;
}

body.bims-admin-shell :is(.page-number, .page-control) {
  min-width: var(--ui-action-height) !important;
}

/* The two-line account picker uses the same canonical 44px control height as
   the scope field so the paired topbar controls remain visually identical. */
body.bims-admin-shell .bpw-account-shell .kld-nextly-profile-button,
body.bims-admin-shell .kld-nextly-profile > .kld-nextly-profile-button,
body.bims-admin-shell .bpw-account-shell .kld-nextly-profile > .kld-nextly-profile-button {
  min-height: var(--ui-control-md) !important;
  height: var(--ui-control-md) !important;
  max-height: var(--ui-control-md) !important;
  padding: 4px 8px 4px 4px !important;
  border-radius: var(--ui-radius-control) !important;
}

/* Every SVG icon is a direct glyph: no tile, outline, wash, or drop shadow. */
body.bims-pro-shell .bpw-icon.ico,
body.mydasma-body .bpw-icon.ico,
body.landing-body .bpw-icon.ico {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--icon-ink, #0b7449) !important;
}

body.bims-pro-shell .bpw-icon.ico svg,
body.mydasma-body .bpw-icon.ico svg,
body.landing-body .bpw-icon.ico svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  overflow: visible !important;
}

body.bims-pro-shell .bpw-icon.ico svg *,
body.mydasma-body .bpw-icon.ico svg *,
body.landing-body .bpw-icon.ico svg * {
  fill: none !important;
  stroke: var(--icon-ink, #0b7449) !important;
}

body.bims-pro-shell .bpw-icon.ico svg > :nth-child(2n),
body.bims-pro-shell .bpw-icon.ico svg .icon-shape-accent,
body.mydasma-body .bpw-icon.ico svg > :nth-child(2n),
body.mydasma-body .bpw-icon.ico svg .icon-shape-accent,
body.landing-body .bpw-icon.ico svg > :nth-child(2n),
body.landing-body .bpw-icon.ico svg .icon-shape-accent {
  stroke: var(--icon-accent, #d99c00) !important;
}

body.bims-pro-shell .bpw-icon.ico svg > :nth-child(3n),
body.bims-pro-shell .bpw-icon.ico svg .icon-shape-detail,
body.mydasma-body .bpw-icon.ico svg > :nth-child(3n),
body.mydasma-body .bpw-icon.ico svg .icon-shape-detail,
body.landing-body .bpw-icon.ico svg > :nth-child(3n),
body.landing-body .bpw-icon.ico svg .icon-shape-detail {
  stroke: var(--icon-detail, #176b85) !important;
}

body.bims-pro-shell .bpw-icon.ico svg :is(circle, rect),
body.mydasma-body .bpw-icon.ico svg :is(circle, rect),
body.landing-body .bpw-icon.ico svg :is(circle, rect) {
  fill: var(--icon-wash, rgba(11, 116, 73, .10)) !important;
}

/* A wrapper whose only job is to hold one icon is flattened as well. */
body.bims-pro-shell :is(span, div):has(> .bpw-icon.ico:only-child),
body.mydasma-body :is(span, div):has(> .bpw-icon.ico:only-child),
body.landing-body :is(span, div):has(> .bpw-icon.ico:only-child) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.bims-pro-shell :is(
  .metric-icon.bpw-icon,
  .category-hero-icon.bpw-icon,
  .module-icon.bpw-icon,
  .workflow-icon.bpw-icon,
  .health-check-icon.bpw-icon,
  .health-section-icon.bpw-icon
) {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

body.bims-pro-shell :is(
  .metric-icon.bpw-icon,
  .category-hero-icon.bpw-icon,
  .module-icon.bpw-icon,
  .workflow-icon.bpw-icon,
  .health-check-icon.bpw-icon,
  .health-section-icon.bpw-icon
) svg {
  width: 26px !important;
  height: 26px !important;
}

body.bims-admin-shell .side-nav .bpw-icon.ico,
body.bims-admin-shell :is(.field-auto-icon, .bims-form-step-icon, .bims-form-guide-icon, .heading-auto-icon),
body.bims-pro-shell :is(.citizen-news-type, .eyebrow, .field-title) .bpw-icon.ico {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}

body.bims-admin-shell .side-nav .bpw-icon.ico svg,
body.bims-admin-shell :is(.field-auto-icon, .bims-form-step-icon, .bims-form-guide-icon, .heading-auto-icon) svg,
body.bims-pro-shell :is(.citizen-news-type, .eyebrow, .field-title) .bpw-icon.ico svg {
  width: 18px !important;
  height: 18px !important;
}

body.bims-admin-shell :is(.btn, button, input[type="submit"], input[type="button"], input[type="reset"]) :is(.bpw-icon.ico, .action-auto-icon),
body.public-service-body :is(.btn, button, .citizen-desktop-account) :is(.bpw-icon.ico, .action-auto-icon),
body.mydasma-body :is(button, .mydasma-action-link, .mydasma-guest-actions a, .mydasma-complaint-actions a) .bpw-icon.ico,
body.landing-body :is(.btn, button, a) .bpw-icon.ico {
  width: var(--ui-action-icon-size) !important;
  min-width: var(--ui-action-icon-size) !important;
  height: var(--ui-action-icon-size) !important;
  min-height: var(--ui-action-icon-size) !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.bims-admin-shell :is(.btn, button, input[type="submit"], input[type="button"], input[type="reset"]) :is(.bpw-icon.ico, .action-auto-icon) svg,
body.public-service-body :is(.btn, button, .citizen-desktop-account) :is(.bpw-icon.ico, .action-auto-icon) svg,
body.mydasma-body :is(button, .mydasma-action-link, .mydasma-guest-actions a, .mydasma-complaint-actions a) .bpw-icon.ico svg,
body.landing-body :is(.btn, button, a) .bpw-icon.ico svg {
  width: var(--ui-action-icon-size) !important;
  height: var(--ui-action-icon-size) !important;
}

/* Primary actions retain readable multicolor artwork on a dark green fill. */
body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary) .bpw-icon.ico,
body.mydasma-body :is(.mydasma-form button[type="submit"], .mydasma-verify button[type="submit"], .mydasma-complaint-actions button) .bpw-icon.ico,
body.landing-body :is(.landing-account-link, .pwa-install-landing) .bpw-icon.ico {
  --icon-ink: #ffffff;
  --icon-accent: #ffd452;
  --icon-detail: #8ee8ff;
  --icon-wash: rgba(255, 255, 255, .13);
}

/* Icon-only controls are transparent glyph buttons, including the modal close
   control highlighted in the reference screenshot. */
body.bims-pro-shell :is(
  .btn-icon,
  .icon-btn,
  .bims-modal-close,
  .bims-toast-close,
  .citizen-info-modal-close,
  .citizen-feature-detail-close,
  .citizen-request-detail-modal-close,
  .citizen-notification-toggle,
  .citizen-mobile-header-theme,
  .citizen-image-lightbox-close
),
body.mydasma-body :is(
  .citizen-info-modal-close,
  .citizen-request-detail-modal-close,
  .citizen-mobile-header-theme
) {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--ui-action-height) !important;
  min-width: var(--ui-action-height) !important;
  max-width: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  min-height: var(--ui-action-height) !important;
  max-height: var(--ui-action-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline-offset: 3px;
  background: none !important;
  box-shadow: none !important;
  color: #d03d32 !important;
}

/* Responsive navigation controls keep their original display contract. Their
   appearance is direct and borderless, but this rule never forces them visible
   on desktop. */
body.bims-pro-shell :is(.sidebar-close, .menu-btn) {
  box-sizing: border-box !important;
  place-items: center !important;
  width: var(--ui-action-height) !important;
  min-width: var(--ui-action-height) !important;
  max-width: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  min-height: var(--ui-action-height) !important;
  max-height: var(--ui-action-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline-offset: 3px;
  background: none !important;
  box-shadow: none !important;
}

body.bims-pro-shell :is(
  .btn-icon,
  .icon-btn,
  .sidebar-close,
  .bims-modal-close,
  .bims-toast-close,
  .menu-btn,
  .citizen-info-modal-close,
  .citizen-feature-detail-close,
  .citizen-request-detail-modal-close,
  .citizen-notification-toggle,
  .citizen-mobile-header-theme,
  .citizen-image-lightbox-close
):is(:hover, :active),
body.mydasma-body :is(
  .citizen-info-modal-close,
  .citizen-request-detail-modal-close,
  .citizen-mobile-header-theme
):is(:hover, :active) {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Retire the legacy boxed fallback field icon. JavaScript enhances these
   labels with the same direct, colored SVG system used everywhere else. */
body.bims-admin-shell main label:has(:is(input:not([type="hidden"]), select, textarea)):not(:has(.field-title)):not(:has(input[type="checkbox"], input[type="radio"], input[type="file"], input[type="range"], input[type="color"])):not(.public-consent):not(.barangay-lookup-label):not([data-no-field-guide])::before,
body.bims-admin-shell :is(.record-form, .form-stack, .filter-bar, .dashboard-period-form, .bpw-map-subdivision-filter) label:not(:has(.field-title))::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Final specificity guard: citizen and MyDasma legacy layers previously used
   deeply nested !important rules for saturated icon tiles. Only shared BIMS
   SVG icons match this contract, so widget markers, badges, logos, and photos
   remain untouched. */
html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  --icon-ink: #0b7449 !important;
  --icon-accent: #d99c00 !important;
  --icon-detail: #176b85 !important;
  --icon-wash: rgba(11, 116, 73, .10) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--icon-ink) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-home,
  .ico-map,
  .ico-menu,
  .ico-wifi,
  .ico-srch,
  .ico-phone
) {
  --icon-ink: #087f99 !important;
  --icon-accent: #0b8a57 !important;
  --icon-detail: #dda400 !important;
  --icon-wash: rgba(8, 127, 153, .10) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-doc,
  .ico-rep,
  .ico-log,
  .ico-cal,
  .ico-id,
  .ico-cht,
  .ico-mail
) {
  --icon-ink: #2563d9 !important;
  --icon-accent: #dda400 !important;
  --icon-detail: #0b8a57 !important;
  --icon-wash: rgba(37, 99, 217, .10) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-edit,
  .ico-print,
  .ico-filter,
  .ico-view
) {
  --icon-ink: #2563d9 !important;
  --icon-accent: #dda400 !important;
  --icon-detail: #0b8a57 !important;
  --icon-wash: rgba(37, 99, 217, .10) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-pay,
  .ico-money,
  .ico-gift
) {
  --icon-ink: #a36c00 !important;
  --icon-accent: #0b8a57 !important;
  --icon-detail: #2563d9 !important;
  --icon-wash: rgba(218, 160, 0, .13) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-alert,
  .ico-stop,
  .ico-qual,
  .ico-sec,
  .ico-lock,
  .ico-key,
  .ico-out,
  .ico-gavel,
  .ico-delete,
  .ico-clear
) {
  --icon-ink: #d63f35 !important;
  --icon-accent: #e49a00 !important;
  --icon-detail: #7b4bc2 !important;
  --icon-wash: rgba(214, 63, 53, .10) !important;
}

/* Legacy/cached close markup included a decorative ring. Hide only that ring;
   the shared current icon source below emits the plain X path directly. */
html body[class] .bpw-icon.ico.ico-clear circle.icon-shape-main {
  display: none !important;
  fill: none !important;
  stroke: none !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"]:is(
  .ico-fp,
  .ico-wra,
  .ico-mom,
  .ico-sen,
  .ico-yth,
  .ico-pwd,
  .ico-health,
  .ico-cam
) {
  --icon-ink: #9a3fc0 !important;
  --icon-accent: #e05491 !important;
  --icon-detail: #0b8a57 !important;
  --icon-wash: rgba(154, 63, 192, .10) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"].ico-set {
  --icon-ink: #536778 !important;
  --icon-accent: #0b8a57 !important;
  --icon-detail: #dda400 !important;
  --icon-wash: rgba(83, 103, 120, .10) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"].ico-sun {
  --icon-ink: #d88700 !important;
  --icon-accent: #ef513f !important;
  --icon-detail: #2563d9 !important;
  --icon-wash: rgba(216, 135, 0, .12) !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"].ico-moon {
  --icon-ink: #6657cc !important;
  --icon-accent: #168ea7 !important;
  --icon-detail: #dda400 !important;
  --icon-wash: rgba(102, 87, 204, .11) !important;
}

html body.bims-admin-shell .sidebar .bpw-icon.ico[class*="ico-"][aria-hidden="true"],
html body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary) .bpw-icon.ico[class*="ico-"][aria-hidden="true"],
html body.mydasma-body :is(.mydasma-form button[type="submit"], .mydasma-verify button[type="submit"], .mydasma-complaint-actions button, .mydasma-complaint-hero) .bpw-icon.ico[class*="ico-"][aria-hidden="true"],
html body.landing-body :is(.landing-account-link, .pwa-install-landing) .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  --icon-ink: #baf5d2 !important;
  --icon-accent: #ffd452 !important;
  --icon-detail: #8ee8ff !important;
  --icon-wash: rgba(255, 255, 255, .13) !important;
}

body.mydasma-body .mydasma-auth-card-head > a[aria-label*="Close"] {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--ui-action-height) !important;
  min-width: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  min-height: var(--ui-action-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #d03d32 !important;
}

body.bims-pro-shell .bims-toast-mark {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Staff topbar alignment + paired-control parity

   The desktop drawer toggle is hidden once the sidebar is permanently visible,
   allowing the page identity to start at the main content edge. The scope and
   account selectors are one visual pair and therefore share exact geometry.
   -------------------------------------------------------------------------- */

body.bims-admin-shell {
  --ui-topbar-control-width: 270px;
  --ui-topbar-control-height: var(--ui-control-md);
}

body.bims-admin-shell .topbar {
  justify-content: flex-start !important;
}

body.bims-admin-shell .topbar > .topbar-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.bims-admin-shell .topbar > .userbox.bpw-account-shell {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.bims-admin-shell .bpw-account-shell > :is(
  .barangay-switcher,
  .barangay-scope-pill,
  .kld-nextly-profile
) {
  box-sizing: border-box !important;
  flex: 0 0 var(--ui-topbar-control-width) !important;
  width: var(--ui-topbar-control-width) !important;
  min-width: var(--ui-topbar-control-width) !important;
  max-width: var(--ui-topbar-control-width) !important;
}

body.bims-admin-shell .bpw-account-shell :is(
  .barangay-lookup,
  .barangay-lookup > input,
  .barangay-select-search,
  .barangay-select-search-input,
  .barangay-lookup-label > select:not(.barangay-select-search-native),
  .barangay-scope-pill,
  .kld-nextly-profile-button
) {
  box-sizing: border-box !important;
  width: 100% !important;
}

body.bims-admin-shell .bpw-account-shell :is(
  .barangay-lookup > input,
  .barangay-select-search-input,
  .barangay-lookup-label > select:not(.barangay-select-search-native),
  .barangay-scope-pill,
  .kld-nextly-profile-button
) {
  min-height: var(--ui-topbar-control-height) !important;
  height: var(--ui-topbar-control-height) !important;
  max-height: var(--ui-topbar-control-height) !important;
  border-radius: var(--ui-radius-control) !important;
}

@media (min-width: 1025px) {
  body.bims-admin-shell .topbar > .menu-btn,
  body.bims-admin-shell .sidebar > .sidebar-close {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body.bims-admin-shell .topbar > .menu-btn {
    display: inline-grid !important;
  }

  body.bims-admin-shell .bpw-account-shell > :is(
    .barangay-switcher,
    .barangay-scope-pill,
    .kld-nextly-profile
  ) {
    flex: 1 1 220px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  body.bims-admin-shell .bpw-account-shell > :is(
    .barangay-switcher,
    .barangay-scope-pill,
    .kld-nextly-profile
  ) {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.bims-admin-shell .topbar > .topbar-title {
    flex: 1 1 calc(100% - 44px) !important;
  }

  body.bims-admin-shell .topbar > .userbox.bpw-account-shell {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-inline-start: 0 !important;
  }
}