/*
 * BIMS violet + gold theme
 *
 * This is intentionally the final visual layer.  It rethemes the shared
 * BIMS shell, citizen surfaces, MyDasma, landing, print preview, offline
 * screen, and PET speech surfaces without changing semantic record states.
 */

:root {
  --bims-violet-950: #24103f;
  --bims-violet-900: #35135d;
  --bims-violet-800: #4d1d83;
  --bims-violet-700: #6526a7;
  --bims-violet-600: #7c3aed;
  --bims-violet-500: #9364f4;
  --bims-lavender-100: #f7f1ff;
  --bims-lavender-200: #efe4ff;
  --bims-lavender-300: #dfc9f8;
  /* Retain the former variable names for compatibility; they now carry the
     gold accent used across the product. */
  --bims-blush-100: #fff8e1;
  --bims-blush-200: #ffedb0;
  --bims-blush-400: #e6b73d;
  --bims-blush-500: #ca9519;
  --bims-gold-100: #fff8e1;
  --bims-gold-200: #ffedb0;
  --bims-gold-400: #e6b73d;
  --bims-gold-500: #ca9519;

  --ui-canvas: #fbf8ff;
  --ui-canvas-tint: #f4edff;
  --ui-surface: #ffffff;
  --ui-surface-raised: rgba(255, 255, 255, .96);
  --ui-surface-soft: #faf5ff;
  --ui-surface-inset: #f5eeff;
  --ui-text: #2a1740;
  --ui-text-strong: #1e1033;
  --ui-text-muted: #705f7f;
  --ui-text-subtle: #87778f;
  --ui-border: #e7d9f3;
  --ui-border-strong: #cfb8e5;
  --ui-brand: #6d28d9;
  --ui-brand-hover: #5420ad;
  --ui-brand-soft: #f1e7ff;
  --ui-accent: #d7a323;
  --ui-accent-soft: #fff7dc;
  --ui-info: #5a42c8;
  --ui-info-soft: #efecff;
  --ui-danger: #bd315b;
  --ui-danger-hover: #982145;
  --ui-danger-soft: #fff0f5;
  --ui-shadow-sm: 0 2px 5px rgba(61, 24, 101, .06), 0 1px 2px rgba(61, 24, 101, .04);
  --ui-shadow-card: 0 16px 40px rgba(67, 28, 108, .10), 0 2px 8px rgba(67, 28, 108, .05);
  --ui-shadow-float: 0 24px 64px rgba(46, 16, 83, .20), 0 6px 18px rgba(46, 16, 83, .10);
  --ui-focus: 0 0 0 4px rgba(124, 58, 237, .22);

  --bg: #fbf8ff;
  --panel: #ffffff;
  --ink: #2a1740;
  --muted: #705f7f;
  --line: #e7d9f3;
  --nav: #35135d;
  --nav-soft: #5d218f;
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --accent: #d7a323;
  --accent-soft: #fff7dc;
  --shadow: 0 16px 40px rgba(67, 28, 108, .10);

  --md-ink: #2a1740;
  --md-muted: #75647f;
  --md-green: #7c3aed;
  --md-green-dark: #5420ad;
  --md-gold: #d7a323;
  --md-bg: #fbf8ff;
  --md-card: #ffffff;
  --md-line: #e7d9f3;
  --md-soft: #f4edff;
}

/* Brand-wide focus and browser chrome-adjacent surface language. */
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,
body.mydasma-body :is(a, button, input, select, textarea, [tabindex]):focus-visible,
body.public-service-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: rgba(124, 58, 237, .66) !important;
  box-shadow: var(--ui-focus) !important;
}

/* Staff shell ------------------------------------------------------------ */
body.bims-admin-shell {
  --ios-separator: rgba(84, 32, 173, .15);
  --ios-separator-strong: rgba(124, 58, 237, .35);
  background:
    radial-gradient(circle at 92% -8%, rgba(215, 163, 35, .18), transparent 32%),
    radial-gradient(circle at 12% 9%, rgba(124, 58, 237, .13), transparent 30%),
    linear-gradient(180deg, #fdfaff 0%, var(--ui-canvas) 48%, #f6efff 100%) !important;
  color: var(--ui-text) !important;
}

body.bims-admin-shell .sidebar {
  border-right-color: rgba(255, 255, 255, .13) !important;
  background:
    radial-gradient(circle at 13% -4%, rgba(238, 194, 77, .26), transparent 29%),
    radial-gradient(circle at 98% 16%, rgba(167, 139, 250, .20), transparent 30%),
    linear-gradient(168deg, #491a7c 0%, #2e1054 48%, #1c0a35 100%) !important;
  box-shadow: 14px 0 38px rgba(38, 11, 69, .18) !important;
}

body.bims-admin-shell .brand {
  border-color: rgba(255, 255, 255, .14) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(244, 218, 241, .07)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(19, 4, 38, .16) !important;
}

body.bims-admin-shell .brand-mark,
body.bims-admin-shell .logo-mark {
  background: linear-gradient(135deg, #fffdf5 0%, #fff0bd 50%, #e8d8ff 100%) !important;
  color: #5420ad !important;
  box-shadow: 0 10px 24px rgba(27, 8, 54, .20) !important;
}

body.bims-admin-shell .side-nav :is(summary, a) {
  color: rgba(255, 250, 255, .88) !important;
}

body.bims-admin-shell .side-nav :is(summary, a):hover,
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, .20) !important;
  background: linear-gradient(135deg, rgba(239, 194, 77, .23), rgba(198, 164, 255, .14)) !important;
  box-shadow: inset 3px 0 0 #e4b33a, inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px rgba(15, 3, 31, .14) !important;
  color: #ffffff !important;
}

body.bims-admin-shell .side-nav .nav-step {
  background: linear-gradient(135deg, #fffdf5, #f5e8ba) !important;
  color: #5b21b6 !important;
  box-shadow: inset 0 0 0 1px rgba(215, 163, 35, .48) !important;
}

body.bims-admin-shell .topbar {
  border-bottom-color: var(--ui-border) !important;
  background: rgba(253, 250, 255, .90) !important;
  box-shadow: 0 9px 30px rgba(67, 28, 108, .08) !important;
}

body.bims-admin-shell .topbar-title h1,
body.bims-admin-shell .topbar-title h1 :is(.bpw-icon, .ico) {
  color: var(--ui-text-strong) !important;
}

body.bims-admin-shell .topbar-title > small,
body.bims-admin-shell .topbar :is(.barangay-lookup-label, .barangay-scope-label) {
  color: var(--ui-text-muted) !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),
  .kld-nextly-profile-button,
  .barangay-scope-pill
) {
  border-color: var(--ui-border-strong) !important;
  background: rgba(255, 252, 255, .97) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  color: var(--ui-text) !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-color: var(--ui-border) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

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,
  .dashboard-summary-card,
  .metric-card-inner
) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.bims-admin-shell :is(
  .panel-header h2,
  .bpw-panel-head h3,
  .dashboard-panel-header h2,
  .category-hero h1,
  .dashboard-welcome h1,
  .area-dashboard-panel h2
) {
  color: var(--ui-text-strong) !important;
}

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

/* Brand actions stay violet. Semantic success, warning, and danger actions
   retain their actual status colors elsewhere in the design system. */
body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary),
body.public-service-body :is(.btn-primary, .btn--primary, .btn.primary),
body.mydasma-body :is(.mydasma-user, .mydasma-install, .mydasma-form button, .mydasma-verify button) {
  border-color: #6424bf !important;
  background: linear-gradient(180deg, #9364f4 0%, #6d28d9 100%) !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, .25), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  body.bims-pro-shell :is(.btn-primary, .btn--primary, .btn.primary):not(:disabled):hover,
  body.public-service-body :is(.btn-primary, .btn--primary, .btn.primary):not(:disabled):hover,
  body.mydasma-body :is(.mydasma-user, .mydasma-install, .mydasma-form button, .mydasma-verify button):hover {
    border-color: #4c1d95 !important;
    background: linear-gradient(180deg, #7f3be3 0%, #5420ad 100%) !important;
  }
}

body.bims-pro-shell :is(.btn-light, .btn--secondary, .btn.ghost),
body.public-service-body :is(.btn-light, .btn--secondary, .btn.ghost) {
  border-color: var(--ui-border-strong) !important;
  background: rgba(255, 252, 255, .96) !important;
  color: var(--ui-brand-hover) !important;
}

body.bims-pro-shell :is(.btn-light, .btn--secondary, .btn.ghost):hover,
body.public-service-body :is(.btn-light, .btn--secondary, .btn.ghost):hover {
  border-color: #d7a323 !important;
  background: #fff9e7 !important;
  color: #4c1d95 !important;
}

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"]),
  select:not([multiple]),
  textarea
) {
  border-color: var(--ui-border-strong) !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), var(--ui-shadow-sm) !important;
}

body.bims-admin-shell .main > :not(.topbar) :is(input, select, textarea):focus {
  border-color: #9364f4 !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

body.bims-admin-shell :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #7c3aed !important;
}

body.bims-admin-shell .table-wrap {
  border-color: var(--ui-border) !important;
  background: #ffffff !important;
  box-shadow: var(--ui-shadow-sm) !important;
  scrollbar-color: #b996df transparent;
}

body.bims-admin-shell th,
body.bims-admin-shell .table-wrap thead th {
  border-bottom-color: var(--ui-border) !important;
  background: linear-gradient(180deg, #fbf7ff 0%, #f4ecff 100%) !important;
  color: #59436c !important;
}

body.bims-admin-shell td,
body.bims-admin-shell .table-wrap tbody td {
  border-bottom-color: #eee5f6 !important;
  color: var(--ui-text) !important;
}

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

body.bims-pro-shell .badge-info {
  border-color: #d8ceff !important;
  background: #f0edff !important;
  color: #5a42c8 !important;
}

body.bims-pro-shell .badge-muted {
  border-color: #e3d9ea !important;
  background: #f7f2f8 !important;
  color: #725f78 !important;
}

body.bims-admin-shell :is(.filter-chip, .segmented-control button, .area-report-tabs > a, .page-link, .page-number, .page-control) {
  border-color: var(--ui-border-strong) !important;
  background: rgba(255, 252, 255, .94) !important;
  color: #5b21b6 !important;
}

body.bims-admin-shell :is(.filter-chip.is-active, .segmented-control button.is-active, .area-report-tabs > a.is-active, .area-report-tabs > a.active, .page-link.is-current, .page-number.is-current) {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(109, 40, 217, .22) !important;
}

body.bims-admin-shell :is(.bims-modal-card, .modal-card) {
  border-color: rgba(231, 217, 243, .92) !important;
  background: rgba(254, 251, 255, .98) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

body.bims-admin-shell :is(.bims-modal-body, .bims-modal-frame, .modal-body) {
  background: var(--ui-canvas) !important;
}

body.bims-admin-shell :is(.modal-header, .bims-modal-header) {
  border-bottom-color: var(--ui-border) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(215, 163, 35, .16)) !important;
}

body.bims-admin-shell :is(.pagination-pro, .pagination-shell, .pagination-wrap) {
  border-color: var(--ui-border) !important;
  background: linear-gradient(180deg, #fffaff, #f8f1ff) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

/* Landing, auth, print, and offline ------------------------------------ */
body.landing-body {
  background:
    radial-gradient(circle at 86% -8%, rgba(231, 185, 57, .32), transparent 31%),
    radial-gradient(circle at 10% 14%, rgba(139, 92, 246, .22), transparent 30%),
    linear-gradient(180deg, #fcf9ff, #f4edff) !important;
  color: var(--ui-text) !important;
}

body.landing-body .landing-hero {
  border-color: rgba(236, 212, 248, .92) !important;
  background: linear-gradient(138deg, #4b197d 0%, #6d28d9 56%, #ce9818 135%) !important;
  box-shadow: 0 20px 46px rgba(67, 28, 108, .24) !important;
}

body.landing-body .landing-badge,
body.landing-body .landing-title-accent {
  color: #ffedaf !important;
}

body.landing-body :is(.demo-card, .landing-tile, .credential-box, .landing-account-note) {
  border-color: var(--ui-border) !important;
  background: rgba(255, 253, 255, .95) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

body.landing-body :is(.landing-account-link, .landing-tile a) {
  color: #6424bf !important;
}

body.bims-pro-shell.auth-page,
body.bims-pro-shell.print-page {
  background:
    radial-gradient(circle at 92% -6%, rgba(215, 163, 35, .20), transparent 30%),
    radial-gradient(circle at 8% 8%, rgba(124, 58, 237, .14), transparent 28%),
    var(--ui-canvas) !important;
  color: var(--ui-text) !important;
}

body.bims-pro-shell.auth-page :is(.login-card, .login-panel, .auth-card, .install-card),
body.bims-pro-shell.print-page :is(.panel, .document-sheet) {
  border-color: var(--ui-border) !important;
  background: rgba(255, 253, 255, .97) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

body.bims-pro-shell.auth-page .bpw-login-brand .brand-mark,
body.bims-pro-shell.auth-page .auth-logo {
  background: linear-gradient(135deg, #7c3aed, #d7a323) !important;
  color: #ffffff !important;
}

/* Citizen portal: use light lavender in light mode and deep plum in dark
   mode, keeping both modes deliberately related to the same BIMS brand. */
html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body),
html:not([data-citizen-theme="dark"]) body.public-service-body:not(.mydasma-body) {
  background: #fbf8ff !important;
  color: var(--ui-text) !important;
}

html[data-citizen-theme="light"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-portal-top,
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-access-hero,
  .citizen-access-card,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-action-card,
  .citizen-feature-card
) {
  border-color: var(--ui-border) !important;
  background: rgba(255, 253, 255, .97) !important;
  box-shadow: var(--ui-shadow-card) !important;
  color: var(--ui-text) !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body),
html:not([data-citizen-theme="light"]) body.public-service-body:not(.mydasma-body) {
  background:
    radial-gradient(circle at 88% -8%, rgba(223, 95, 163, .22), transparent 29%),
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, .18), transparent 27%),
    #180c2d !important;
  color: #fbf7ff !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-portal-top,
  .public-hero-panel,
  .public-service-card,
  .public-flow-strip article,
  .citizen-access-hero,
  .citizen-access-card,
  .citizen-account-profile,
  .citizen-account-panel,
  .citizen-action-card,
  .citizen-feature-card,
  .citizen-mobile-primary-module-grid > a
) {
  border-color: rgba(223, 201, 248, .18) !important;
  background: rgba(47, 24, 79, .94) !important;
  box-shadow: 0 12px 28px rgba(11, 3, 24, .24) !important;
  color: #fbf7ff !important;
}

body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account,
  .citizen-mobile-header-theme,
  .citizen-menu-account,
  .citizen-mobile-primary-module-icon,
  .citizen-menu-avatar
) {
  color: #7c3aed !important;
}

body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account,
  .citizen-menu-account:hover,
  .citizen-menu-account:focus-visible,
  .citizen-mobile-primary-module-grid > a.is-active
) {
  background: linear-gradient(135deg, #f3e7ff, #fff8df) !important;
  color: #5b21b6 !important;
}

html[data-citizen-theme="dark"] body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account,
  .citizen-menu-account:hover,
  .citizen-menu-account:focus-visible,
  .citizen-mobile-primary-module-grid > a.is-active
) {
  background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(215, 163, 35, .24)) !important;
  color: #fff1bd !important;
}

body.public-service-body:not(.mydasma-body) :is(input, select, textarea) {
  border-color: var(--ui-border-strong) !important;
}

body.public-service-body:not(.mydasma-body) :is(input, select, textarea):focus {
  border-color: #9364f4 !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .16) !important;
}

/* MyDasma --------------------------------------------------------------- */
body.mydasma-body {
  background:
    radial-gradient(circle at 82% 0, rgba(241, 195, 75, .42), transparent 34%),
    radial-gradient(circle at 8% 12%, rgba(183, 148, 250, .22), transparent 28%),
    var(--md-bg) !important;
  color: var(--md-ink) !important;
}

body.mydasma-body .mydasma-brand span {
  background: #f3e7ff !important;
  color: #6d28d9 !important;
}

body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) {
  background: linear-gradient(135deg, #4b197d 0%, #7627b4 62%, #d7a323 128%) !important;
  box-shadow: 0 18px 44px rgba(70, 24, 116, .25) !important;
}

body.mydasma-body :is(.mydasma-kicker, .mydasma-welcome > span) {
  color: #fff0bd !important;
}

body.mydasma-body :is(.mydasma-guest-actions a, .mydasma-welcome .mydasma-install) {
  color: #5b21b6 !important;
}

body.mydasma-body :is(
  .mydasma-auth-card,
  .mydasma-section,
  .mydasma-verify,
  .mydasma-guest-options a,
  .mydasma-quick a,
  .mydasma-nav
) {
  border-color: var(--md-line) !important;
  background: rgba(255, 253, 255, .96) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

body.mydasma-body :is(
  .mydasma-guest-options > a > .bpw-icon:first-child,
  .mydasma-quick .bpw-icon,
  .mydasma-auth-card-head > span,
  .mydasma-history a > span:first-child,
  .mydasma-news a > span:first-child
) {
  background: #f3e7ff !important;
  color: #6d28d9 !important;
}

body.mydasma-body :is(.mydasma-section-head > a, .mydasma-profile) {
  background: #f7efff !important;
  color: #6424bf !important;
}

body.mydasma-body :is(.mydasma-history a, .mydasma-news a) {
  background: #fcf9ff !important;
  color: #322044 !important;
}

body.mydasma-body :is(.mydasma-form input, .mydasma-form select) {
  border-color: var(--md-line) !important;
  background: #ffffff !important;
  color: var(--md-ink) !important;
}

body.mydasma-body :is(.mydasma-form input, .mydasma-form select):focus {
  border-color: #9364f4 !important;
  outline-color: rgba(124, 58, 237, .18) !important;
}

body.mydasma-body .mydasma-alert:not(.error) {
  background: #f3e7ff !important;
  color: #5b21b6 !important;
}

body.mydasma-body .mydasma-verify {
  background: #fff8e1 !important;
}

body.mydasma-body .mydasma-verify p {
  color: #80611d !important;
}

body.mydasma-body .mydasma-nav {
  border-top-color: var(--md-line) !important;
  background: rgba(255, 252, 255, .96) !important;
  box-shadow: 0 -8px 24px rgba(67, 28, 108, .10) !important;
}

body.mydasma-body .mydasma-nav a.active,
body.mydasma-body :is(.mydasma-guest-note a, .mydasma-form-switch a, .mydasma-profile small) {
  color: #6d28d9 !important;
}

/* PET companion --------------------------------------------------------- */
.bims-pet-stage {
  filter: drop-shadow(0 12px 24px rgba(26, 54, 138, .18)) !important;
}

.bims-pet-stage.is-dragging {
  filter: drop-shadow(0 18px 28px rgba(26, 54, 138, .30)) !important;
}

.bims-pet-stage::before {
  background: repeating-linear-gradient(90deg, rgba(87, 128, 255, 0) 0 5px, rgba(84, 128, 255, .92) 5px 11px, rgba(142, 210, 255, .20) 11px 15px) !important;
  filter: drop-shadow(0 0 5px rgba(71, 142, 255, .36)) !important;
}

.bims-pet-stage::after {
  background: radial-gradient(ellipse at 25% 50%, rgba(32, 64, 155, .43) 0 22%, transparent 25%), radial-gradient(ellipse at 75% 50%, rgba(32, 64, 155, .28) 0 22%, transparent 25%) !important;
}

.bims-pet-character::before {
  background: radial-gradient(ellipse at 50% 70%, rgba(100, 180, 255, .30), rgba(52, 92, 208, 0) 67%) !important;
}

.bims-pet-character::after {
  border-color: rgba(236, 249, 255, .98) !important;
  background: #6397ff !important;
  box-shadow: 0 0 0 0 rgba(99, 151, 255, .48) !important;
}

.bims-pet-stage[data-bims-pet-target-state="reach"] .bims-pet-character {
  filter: drop-shadow(0 7px 10px rgba(62, 119, 225, .30)) !important;
}

.bims-pet-context-menu {
  border-color: rgba(124, 58, 237, .30) !important;
  background: rgba(255, 251, 255, .98) !important;
  box-shadow: 0 12px 28px rgba(55, 16, 99, .24) !important;
}

.bims-pet-greeting,
.bims-pet-stage .bims-toast {
  border-color: rgba(124, 58, 237, .22) !important;
  background: rgba(255, 251, 255, .98) !important;
  box-shadow: 0 10px 24px rgba(72, 24, 124, .16) !important;
  color: #3d1d64 !important;
}

.bims-pet-greeting strong,
.bims-pet-stage .bims-pet-alert-title {
  color: #6424bf !important;
}

.bims-pet-greeting span,
.bims-pet-stage .bims-toast-content {
  color: #765e85 !important;
}

.bims-pet-stage .bims-toast-info {
  --bims-pet-alert-accent: #7c3aed;
  --bims-pet-alert-mark-bg: #f1e7ff;
}

.bims-pet-stage .bims-toast-success {
  --bims-pet-alert-accent: #138a70;
  --bims-pet-alert-mark-bg: #e7f8ef;
}

.bims-pet-stage .bims-toast-warning {
  --bims-pet-alert-accent: #ad7600;
  --bims-pet-alert-mark-bg: #fff7df;
}

.bims-pet-stage .bims-toast-danger {
  --bims-pet-alert-accent: #c23a69;
  --bims-pet-alert-mark-bg: #fff0f5;
}

.bims-pet-stage .bims-toast-content a,
.bims-pet-typewriter::after {
  color: #6d28d9 !important;
}

@media print {
  body.bims-pro-shell.print-page,
  body.bims-pro-shell.print-page :is(.panel, .document-sheet) {
    background: #ffffff !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bims-admin-shell,
  body.landing-body,
  body.mydasma-body,
  body.public-service-body {
    scroll-behavior: auto;
  }
}

/* Purple is the primary action colour; gold is reserved for emphasis and
   secondary highlights.  These dashboard rules deliberately come last so
   older green map-dashboard skins cannot take over the active controls. */
body.bims-admin-shell .bpw-map-actions .btn.primary,
body.bims-admin-shell .bpw-map-filter.active,
body.bims-admin-shell .bpw-map-legend b {
  border-color: #5b21b6 !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(91, 33, 182, .22) !important;
}

body.bims-admin-shell .bpw-map-filter:hover,
body.bims-admin-shell .bpw-map-filter:focus-visible {
  border-color: #d7a323 !important;
  background: #fff8df !important;
  color: #5420ad !important;
}

body.bims-admin-shell .bpw-map-legend {
  border-top-color: rgba(215, 163, 35, .42) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 248, 225, .96)) !important;
}

body.bims-admin-shell .complaint-radar-map .leaflet-control-container .leaflet-control {
  border-color: rgba(215, 163, 35, .60) !important;
  box-shadow: 0 8px 18px rgba(56, 20, 103, .24) !important;
}

body.bims-admin-shell .complaint-radar-map .leaflet-control-zoom a {
  border-bottom-color: rgba(215, 163, 35, .36) !important;
  background: rgba(76, 29, 149, .96) !important;
  color: #ffe8a3 !important;
}

body.bims-admin-shell .complaint-radar-summary b {
  color: #6d28d9 !important;
}

/* The dashboard's two Leaflet maps use the same violet zoom control. */
body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom {
  overflow: hidden !important;
  border: 1px solid #6d28d9 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(76, 29, 149, .22) !important;
}

body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
  background: #6d28d9 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a:last-child {
  border-bottom: 0 !important;
}

body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a:hover,
body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a:focus-visible {
  background: #5b21b6 !important;
  color: #fff8d6 !important;
}

/* Required map credits are kept inside the map as a small glass label so they
   remain easy to find without looking like a loose footer. */
body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-attribution {
  display: block !important;
  max-width: calc(100% - 70px);
  margin: 0 10px 10px 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 5px 16px rgba(41, 24, 72, .13) !important;
  color: #6f5a79 !important;
  font-size: .61rem !important;
  line-height: 1.2 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-attribution a {
  color: #5b21b6 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-attribution a:hover,
body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-attribution a:focus-visible {
  color: #3b0764 !important;
  text-decoration: underline !important;
}

@media (max-width: 680px) {
  body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-attribution {
    max-width: calc(100% - 58px);
    margin: 0 7px 7px 0 !important;
    padding: 4px 6px !important;
    font-size: .55rem !important;
  }
}

/* On phones, the scope field and account picker need their own full rows.
   This prevents the account name from being squeezed or truncated. */
@media (max-width: 760px) {
  body.bims-admin-shell .bpw-account-shell {
    align-items: stretch !important;
    gap: 8px !important;
  }

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

/* Public Information Hub: a View action lets staff inspect the exact public
   content without changing its publish state or opening another page. */
body.bims-admin-shell .citizen-admin-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

body.bims-admin-shell .citizen-admin-record-actions form {
  margin: 0;
}

body.bims-admin-shell .citizen-public-record-view-modal {
  width: min(700px, calc(100vw - 28px));
}

body.bims-admin-shell dialog.citizen-public-record-view-modal[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(820px, calc(100dvh - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  overflow: hidden;
}

/* This preview uses one direct X only. It deliberately does not use the
   generic citizen-info close class, which legacy UI enhancement also decorates. */
body.bims-admin-shell .citizen-public-record-view-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d03d32;
}

body.bims-admin-shell .citizen-public-record-view-close:hover,
body.bims-admin-shell .citizen-public-record-view-close:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #a82720;
  transform: none;
}

body.bims-admin-shell .citizen-public-record-view-close .bpw-icon {
  width: 18px !important;
  height: 18px !important;
}

body.bims-admin-shell .citizen-public-record-view-body {
  min-height: 0;
  max-height: none;
  padding: 20px 22px 0;
  overflow: auto;
  background: linear-gradient(180deg, #fff, #fffdf8);
}

body.bims-admin-shell .citizen-public-record-view-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 14px 22px 20px;
  margin: 0;
  border-top: 1px solid rgba(109, 40, 217, .14);
  background: #fff;
}

body.bims-admin-shell .citizen-public-view-card {
  display: grid;
  gap: 16px;
  color: #35224d;
}

body.bims-admin-shell .citizen-public-view-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(109, 40, 217, .16);
  border-radius: 14px;
  background: linear-gradient(135deg, #faf6ff, #fff9e8);
}

body.bims-admin-shell .citizen-public-view-hero > span {
  display: grid;
  place-items: center;
  color: #6d28d9;
}

body.bims-admin-shell .citizen-public-view-hero > span .bpw-icon,
body.bims-admin-shell .citizen-public-view-hero > .bpw-icon {
  color: #6d28d9 !important;
  font-size: 1.3rem;
}

body.bims-admin-shell .citizen-public-view-hero h3 {
  margin: 3px 0 0;
  color: #311251 !important;
  font-size: 1.08rem;
  line-height: 1.28;
}

body.bims-admin-shell .citizen-public-view-hero .eyebrow {
  color: #806192 !important;
}

body.bims-admin-shell .citizen-public-visibility {
  padding: 5px 9px;
  border: 1px solid rgba(138, 75, 28, .24);
  border-radius: 999px;
  background: #fff5df;
  color: #8a4b1c !important;
  font-size: .72rem;
  white-space: nowrap;
}

body.bims-admin-shell .citizen-public-visibility.is-public {
  border-color: rgba(18, 126, 86, .25);
  background: #e9f9ee;
  color: #08724c !important;
}

body.bims-admin-shell .citizen-public-view-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

body.bims-admin-shell .citizen-public-view-details > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(109, 40, 217, .13);
  border-radius: 11px;
  background: #fff;
}

body.bims-admin-shell .citizen-public-view-details dt {
  margin: 0 0 4px;
  color: #806192;
  font-size: .72rem;
  font-weight: 800;
}

body.bims-admin-shell .citizen-public-view-details dd {
  margin: 0;
  color: #311251;
  font-size: .84rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.bims-admin-shell .citizen-public-view-copy {
  padding: 13px 14px;
  border-left: 3px solid #d7a323;
  border-radius: 0 11px 11px 0;
  background: #fffdf7;
}

body.bims-admin-shell .citizen-public-view-copy h4 {
  margin: 0 0 6px;
  color: #5b21b6 !important;
  font-size: .83rem;
}

body.bims-admin-shell .citizen-public-view-copy p {
  margin: 0;
  color: #4d3d5f;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.bims-admin-shell .citizen-public-view-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(109, 40, 217, .17);
  border-radius: 13px;
  background: #f8f5ff;
}

body.bims-admin-shell .citizen-public-view-image img {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
  background: #f5f0ff;
}

body.bims-admin-shell .citizen-public-view-image figcaption {
  padding: 8px 11px;
  color: #765e85;
  font-size: .75rem;
  overflow-wrap: anywhere;
}

body.bims-admin-shell .citizen-public-view-progress {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid rgba(109, 40, 217, .13);
  border-radius: 12px;
  background: #fbf9ff;
}

body.bims-admin-shell .citizen-public-view-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #4d2579;
}

body.bims-admin-shell .citizen-public-view-progress progress {
  width: 100%;
  height: 9px;
  accent-color: #6d28d9;
}

body.bims-admin-shell .citizen-public-view-link {
  justify-self: start;
}

/* Keep subdivision lookup as the page's primary task; create entries in a focused dialog. */
body.bims-admin-shell .subdivision-master-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

body.bims-admin-shell .bims-subdivision-modal {
  width: min(640px, calc(100vw - 28px));
}

body.bims-admin-shell .bims-subdivision-modal .citizen-info-modal-head {
  background: linear-gradient(115deg, #faf6ff, #fff8e5);
}

body.bims-admin-shell .bims-subdivision-modal .citizen-info-modal-form {
  max-height: min(500px, calc(100dvh - 148px));
}

body.bims-admin-shell .bims-subdivision-modal .citizen-info-modal-actions {
  justify-content: flex-end;
  padding-top: 4px;
}

/* Normal admin pages share the full-width workspace used by workflow groups.
   The old max-panel cap left Settings, Permissions, Backup, and access pages
   visibly narrower than Documents & Clearances on wide desktops. */
body.bims-admin-shell:not(.modal-frame-page) .main > .panel.max-panel {
  width: 100%;
  max-width: none;
}

/* The dashboard is a preview: keep three complaint cards visible and route
   staff to the workspace instead of creating a nested scrolling area. */
body.bims-admin-shell .complaint-radar-feed {
  max-height: none !important;
  overflow: visible !important;
}

body.bims-admin-shell .complaint-radar-feed a.complaint-radar-feed-view-all {
  min-height: 40px;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  border-color: #d7c3ff !important;
  background: linear-gradient(135deg, #f7f1ff, #fff8e9) !important;
  color: #5620a9 !important;
  font-weight: 850;
  text-align: center;
}

body.bims-admin-shell .complaint-radar-feed a.complaint-radar-feed-view-all:hover {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, #eee3ff, #fff0c9) !important;
}

body.bims-admin-shell .complaint-radar-feed-view-all i {
  font-size: 1.1em;
  font-style: normal;
  line-height: 1;
}

@media (max-width: 620px) {
  body.bims-admin-shell .citizen-admin-record-actions {
    gap: 5px;
  }

  body.bims-admin-shell .citizen-admin-record-actions .btn {
    padding-inline: 8px !important;
  }

  body.bims-admin-shell .citizen-public-record-view-body {
    padding: 14px 14px 0;
  }

  body.bims-admin-shell .citizen-public-record-view-actions {
    padding: 12px 14px 14px;
  }

  body.bims-admin-shell .citizen-public-view-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.bims-admin-shell .citizen-public-visibility {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body.bims-admin-shell .citizen-public-view-details {
    grid-template-columns: 1fr;
  }

  body.bims-admin-shell .subdivision-master-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.bims-admin-shell .bims-subdivision-modal {
    width: min(100vw - 12px, 640px);
  }

  body.bims-admin-shell .bims-subdivision-modal .citizen-info-modal-actions {
    justify-content: stretch;
  }
}