/* BIMS authoritative interface contract.
   This small final layer stays cache-isolated from the legacy theme stack. */

:root {
  --bims-topbar-control-width: 270px;
  --bims-topbar-control-height: 44px;
  --bims-direct-icon-size: 18px;
}

/* Every shared icon is the artwork itself: no tile, ring, border, or shadow. */
html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: var(--bims-direct-icon-size) !important;
  min-width: var(--bims-direct-icon-size) !important;
  height: var(--bims-direct-icon-size) !important;
  min-height: var(--bims-direct-icon-size) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body[class] .bpw-icon.ico[class*="ico-"][aria-hidden="true"] svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Remove the decorative ring from legacy cached CLEAR markup only. */
html body[class] .bpw-icon.ico.ico-clear circle.icon-shape-main {
  display: none !important;
  fill: none !important;
  stroke: 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
),
body.mydasma-body :is(
  .citizen-info-modal-close,
  .citizen-request-detail-modal-close,
  .citizen-mobile-header-theme
) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Staff header: title begins at the left content edge and the account pair is
   pinned to the right without a desktop drawer control consuming space. */
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;
  align-items: flex-start !important;
  text-align: left !important;
}

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

body.bims-admin-shell .topbar > .userbox.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,
  .barangay-scope-pill,
  .kld-nextly-profile
) {
  box-sizing: border-box !important;
  flex: 0 0 var(--bims-topbar-control-width) !important;
  width: var(--bims-topbar-control-width) !important;
  min-width: var(--bims-topbar-control-width) !important;
  max-width: var(--bims-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(--bims-topbar-control-height) !important;
  height: var(--bims-topbar-control-height) !important;
  max-height: var(--bims-topbar-control-height) !important;
  border-radius: 12px !important;
}

body.bims-admin-shell .bpw-account-shell .kld-nextly-profile-button {
  padding: 4px 8px 4px 4px !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,
  body.bims-admin-shell .sidebar > .sidebar-close {
    display: inline-grid !important;
  }

  body.bims-admin-shell .topbar {
    flex-wrap: wrap !important;
  }

  body.bims-admin-shell .topbar > .userbox.bpw-account-shell {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-inline-start: 0 !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: 760px) {
  body.bims-admin-shell .topbar > .topbar-title {
    flex: 1 1 calc(100% - 44px) !important;
  }
}

/* Main Admin Scope and Main Administrator stay together in one equal row on
   tablets and phones. The scope label sits above its field while the account
   button remains aligned with that field's baseline. */
@media (max-width: 1024px) {
  body.bims-admin-shell .bpw-account-shell > :is(
    .barangay-switcher,
    .barangay-scope-pill,
    .kld-nextly-profile
  ) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Login action stack: preserve the existing controls while giving each
   decision point a clear, consistent breathing space. */
body.auth-page.bims-pro-shell .auth-login-form {
  margin-bottom: 10px !important;
}

body.auth-page.bims-pro-shell .pwa-install-auth {
  margin-top: 0 !important;
}

body.auth-page.bims-pro-shell .portal-login-links {
  margin-top: 12px !important;
}

/* The map uses one direct native priority selector. No outer badge or label
   is rendered, so the control cannot overflow into a decorative container. */
body.bims-admin-shell .complaint-radar-toolbar {
  min-width: 0 !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
}

body.bims-admin-shell .complaint-radar-toolbar > select[data-radar-priority-filter] {
  box-sizing: border-box !important;
  width: 122px !important;
  min-width: 122px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 4px 26px 4px 9px !important;
  border: 1px solid #d7b35f !important;
  border-radius: 8px !important;
  background: #fffdf5 !important;
  color: #4c1d95 !important;
  font-size: .76rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.bims-admin-shell .complaint-radar-toolbar > select[data-radar-priority-filter]:focus {
  outline: 2px solid rgba(109, 40, 217, .34) !important;
  outline-offset: 2px !important;
}

/* The same single dropdown stays at the map's upper-right on phones. */
@media (max-width: 760px) {
  body.bims-admin-shell .complaint-radar-toolbar {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
  }

  body.bims-admin-shell .complaint-radar-toolbar > select[data-radar-priority-filter] {
    box-sizing: border-box !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: calc(100vw - 20px) !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 24px 3px 8px !important;
    border-radius: 7px !important;
    font-size: .72rem !important;
  }

  body.bims-admin-shell .bpw-account-shell .kld-nextly-profile-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 28px)) !important;
  }
}

/* Workflow scope tabs use their actual group icons. Keep each icon on the
   shared label baseline so the strip stays even at every viewport width. */
body.bims-admin-shell .area-report-tabs > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.bims-admin-shell .area-report-tabs > a > .area-report-tab-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
}

body.bims-admin-shell .area-report-tabs > a > .area-report-tab-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}

/* Confirmation is a focused decision, not a full record workspace. Keep it
   compact even though the premium modal geometry intentionally favors forms. */
body.bims-pro-shell .bims-modal-root.is-confirming .bims-modal-card {
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(calc(100dvh - 32px), 620px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.bims-pro-shell .bims-modal-root.is-confirming .bims-modal-body {
  overflow: auto !important;
  background: #ffffff !important;
}

body.bims-pro-shell .bims-modal-root.is-confirming .bims-confirm-panel {
  justify-items: stretch !important;
  gap: 16px !important;
  padding: 22px 24px 24px !important;
  text-align: left !important;
  background: #ffffff !important;
}

body.bims-pro-shell .bims-confirm-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

body.bims-pro-shell .bims-confirm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  margin-top: 2px;
}

body.bims-pro-shell .bims-confirm-mark > .bims-confirm-alert-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

body.bims-pro-shell .bims-confirm-eyebrow {
  margin: 0 0 4px !important;
  color: #087044;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

body.bims-pro-shell .bims-confirm-copy h3 {
  margin: 0 !important;
  color: #13271b;
  font-size: 1.18rem;
  line-height: 1.25;
}

body.bims-pro-shell .bims-confirm-message {
  margin: 5px 0 0 !important;
  color: #607468;
  font-size: .92rem;
  line-height: 1.5;
}

body.bims-pro-shell .bims-confirm-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d9e4dc;
  border-radius: 14px;
  background: #f7faf8;
}

body.bims-pro-shell .bims-confirm-details > div {
  min-width: 0;
}

body.bims-pro-shell .bims-confirm-details > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

body.bims-pro-shell .bims-confirm-details dt {
  color: #6a7c71;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

body.bims-pro-shell .bims-confirm-details dd {
  margin: 3px 0 0;
  color: #173523;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.bims-pro-shell .bims-confirm-impact {
  margin: 0 !important;
  color: #51675a;
  font-size: .86rem;
  line-height: 1.45;
}

body.bims-pro-shell .bims-confirm-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #ebdca8;
  border-radius: 12px;
  background: #fff9e8;
  color: #5d4811;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.45;
  cursor: pointer;
}

body.bims-pro-shell .bims-confirm-ack input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: #087044;
}

body.bims-pro-shell .bims-modal-root.is-confirming .bims-confirm-actions {
  justify-content: flex-end !important;
  margin-top: 0 !important;
}

body.bims-pro-shell [data-bims-confirm-action-icon] > .bpw-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
}

body.bims-pro-shell [data-bims-confirm-yes][disabled] {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  body.bims-pro-shell .bims-modal-root.is-confirming .bims-modal-card {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  body.bims-pro-shell .bims-modal-root.is-confirming .bims-confirm-panel {
    padding: 20px !important;
  }

  body.bims-pro-shell .bims-confirm-details {
    grid-template-columns: minmax(0, 1fr);
  }

  body.bims-pro-shell .bims-confirm-details > div:last-child:nth-child(odd) {
    grid-column: auto;
  }

  body.bims-pro-shell .bims-modal-root.is-confirming .bims-confirm-actions > .btn {
    flex: 1 1 auto;
  }
}

/* List filters are compact actions, so their fields use the exact same visual
   height as the Search and Reset controls beside them. Data-entry forms stay
   on the roomier 44px field rhythm. */
body.bims-admin-shell .main > :not(.topbar) .filter-bar {
  /* The older professional sheet expresses field height through this custom
     property. Set it at the filter container so its high-specificity field
     rule resolves to the shared 30px action height instead of 44px. */
  --ios-control-h: var(--ui-action-height);
}

body.bims-admin-shell .main > :not(.topbar) .filter-bar :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)
) {
  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: 4px 10px !important;
  line-height: 1.2 !important;
}

body.bims-admin-shell .main > :not(.topbar) .filter-bar select:not([multiple]):not(.barangay-select-search-native) {
  padding: 4px 28px 4px 10px !important;
}