/* === TEMPLATE CARDS === */

.bf-tpl-card{background:#fff;border-radius:12px;padding:18px;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all .2s;display:flex;flex-direction:column;gap:10px;}
.bf-tpl-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:rgba(0,102,0,.2);}
.bf-tpl-header{display:flex;align-items:flex-start;gap:12px;}
.bf-tpl-icon{font-size:28px;flex-shrink:0;}
.bf-tpl-meta{flex:1;}
.bf-tpl-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:#111;line-height:1.3;}
.bf-tpl-cat{font-size:10px;color:#94a3b8;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.bf-tpl-badge{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;border-radius:10px;padding:2px 8px;font-size:9px;font-weight:600;font-family:'Inter',sans-serif;white-space:nowrap;flex-shrink:0;}
.bf-tpl-desc{font-size:12px;color:#64748b;font-family:'Inter',sans-serif;line-height:1.6;flex:1;}
.bf-tpl-tags{display:flex;flex-wrap:wrap;gap:4px;}
.bf-tpl-tag{background:#f1f5f9;color:#64748b;border-radius:4px;padding:2px 8px;font-size:10px;font-family:'Inter',sans-serif;}
.bf-tpl-actions{display:flex;gap:6px;flex-wrap:wrap;padding-top:6px;border-top:1px solid #f8fafc;}

/* === VARIABLES === */

:root {
  --teal:#006633;
  --navy:#1a1a1a;
  --gold:#b8860b;
  --card:#ffffff;
  --card2:#f8faf8;
  --muted:#7a907a;
  --red:#b03034;
  --green:#006633;
  --amber:#d97706;
  --purple:#7c3aed;
  --blue:#0891b2;
  --wa:#25D366;
  --sms:#0891b2;
  --input-bg:#ffffff;
  --input-border:#dde5dd;
  --mono-legacy:'IBM Plex Mono', monospace;
  /* R13.21.0.10 — propBar left padding tracks the sidebar width so the
     band starts at the main-content column edge (no overlap with the
     sidebar's column underneath). toggleSidebar()/initSidebarState() in
     tenari2_nav.js flip this between 228px (expanded) and 48px (collapsed). */
  --bf-sidebar-width:228px;
  /* Mobile dispatch 2026-06-25 — canonical responsive breakpoints. These
     are documentation/grep-audit tokens: CSS @media queries cannot consume
     custom properties, so existing media blocks still carry literal px.
     Canonical set is {sm:480, md:768, lg:1024, xl:1280}; the mobile
     foundation engages below --bp-md (i.e. max-width:767px). */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;
  --k-black:#111111;
  --k-black2:#1a1a1a;
  --k-red:#b03034;
  --k-red-dark:#8c2124;
  --k-red-light:#fdf0f0;
  --k-red-mid:#f5d0d0;
  --k-green:#006633;
  --k-green-dark:#004d20;
  --k-green-light:#e8f5ee;
  --k-green-mid:#b8ddc8;
  --bg:#eef3ef;
  --surface:#ffffff;
  --surface2:#f8faf8;
  --surface3:#eff3ef;
  --border:#dde5dd;
  --border2:#c5d5c5;
  --text:#1a1a1a;
  --text2:#4a5a4a;
  --text3:#7a907a;
  --sidebar-bg:#004d20;
  --sidebar-hover:#006633;
  --sidebar-active:#007a30;
  --header-bg:#111111;
  --radius:8px;
  --radius2:5px;
  --shadow:0 1px 3px rgba(0, 0, 0, .07), 0 4px 12px rgba(0, 0, 0, .05);
  --shadow2:0 2px 8px rgba(0, 0, 0, .12);
  --font:'DM Sans', 'Inter', sans-serif;
  --font-heading:'Syne', 'DM Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --k-gold:#c8920a;
  --k-gold-dark:#a0720a;
  --k-gold-light:#fef3c7;
  --k-gold-mid:#f0c060
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  font-size:14px;
  background:var(--bg) !important
}

body {
  font-family:var(--font);
  background:var(--bg) !important;
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column
}

main.main-content {
  background-image:radial-gradient(circle, rgba(0, 102, 51, .035) 1px, transparent 1px);
  background-size:24px 24px
}

a {
  color:var(--k-green) e
}

button {
  cursor:pointer;
  font-family:var(--font)
}

::-webkit-scrollbar {
  width:5px;
  height:5px
}

::-webkit-scrollbar-thumb {
  background:var(--border2);
  border-radius:10px
}

.bf-attach-wrap {
  margin-top:10px;
  margin-bottom:4px
}

.bf-attach-label {
  font-size:.72rem;
  font-weight:600;
  color:var(--text2);
  margin-bottom:5px;
  display:block
}

.bf-attach-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 13px;
  border:1.5px dashed var(--border2);
  border-radius:7px;
  background:var(--surface2);
  color:var(--text2);
  font-size:.74rem;
  cursor:pointer;
  transition:.15s;
  position:relative;
  overflow:hidden
}

.bf-attach-btn:hover {
  border-color:var(--k-green);
  color:var(--k-green-dark);
  background:var(--k-green-light)
}

.bf-attach-btn input[type=file] {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  font-size:0
}

.bf-attach-preview {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px
}

.bf-attach-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--k-green-light);
  border:1px solid var(--k-green-mid);
  border-radius:20px;
  padding:3px 10px;
  font-size:.68rem;
  color:var(--k-green-dark);
  max-width:200px
}

.bf-attach-chip span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:140px
}

.bf-attach-chip button {
  background:0 0;
  border:none;
  color:var(--k-red);
  cursor:pointer;
  font-size:.85rem;
  padding:0;
  line-height:1;
  flex-shrink:0
}


/* === HEADER === */

header {
  background:linear-gradient(135deg, #0a1f0d 0, #0d2d12 40%, #111 100%);
  height:54px;
  max-height:54px;
  min-height:54px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  z-index:900;
  border-bottom:none;
  box-shadow:0 2px 20px rgba(0, 0, 0, .4);
  width:100%
}

header::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #063 33%, #1a1a1a 33%, #1a1a1a 50%, #b03034 50%, #b03034 67%, #1a1a1a 67%, #1a1a1a 75%, #c8920a 75%)
}

.hdr-wordmark {
  position:absolute;
  left:38%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  user-select:none
}

.hdr-wordmark-text {
  font-family:Georgia, 'Palatino Linotype', serif;
  font-style:italic;
  font-weight:700;
  font-size:clamp(31px, 3.36vw, 48px);
  color:#c8920a;
  letter-spacing:-.5px;
  line-height:1;
  text-shadow:0 0 20px rgba(200, 146, 10, .18), 0 1px 0 rgba(0, 0, 0, .5);
  display:flex;
  align-items:flex-start;
  gap:1px
}

.hdr-wordmark-reg {
  font-family:Syne, sans-serif;
  font-weight:800;
  font-size:clamp(4px, .43vw, 6px);
  color:#c8920a;
  border:1.5px solid #c8920a;
  border-radius:50%;
  width:clamp(12px, 1.3vw, 17px);
  height:clamp(12px, 1.3vw, 17px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin-top:2px;
  box-shadow:0 0 6px rgba(200, 146, 10, .2);
  flex-shrink:0
}

.hdr-wordmark-sub {
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(6px, .55vw, 8px);
  letter-spacing:3.5px;
  color:rgba(0, 163, 76, .4);
  text-transform:uppercase;
  margin-top:3px;
  white-space:nowrap
}

@media(max-width:900px) {
  .hdr-wordmark {
    display:none
  }

}

.header-brand {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  padding-left:20px
}

.header-brand h1 {
  font-size:.9rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.header-brand h1 span {
  color:#e87a7d
}

.header-logo {
  width:36px;
  height:auto;
  flex-shrink:0
}

.rib-lk {
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  padding:6px 0
}

.rib-lk-r1 {
  display:flex;
  align-items:center
}

.rib-lk-disc {
  width:34px;
  flex-shrink:0;
  display:block
}

.rib-bomaflow {
  display:flex;
  align-items:center;
  font-family:Syne, sans-serif;
  font-weight:900;
  font-size:21px;
  letter-spacing:-.01em;
  padding-left:7px;
  line-height:1
}

.rib-bomaflow .LL {
  display:inline-block
}

.rib-bomaflow .up {
  transform:translateY(-22%)
}

.rib-bomaflow .dn {
  transform:translateY(22%)
}

.ri-I {
  color:#00a34c
}

.ri-R {
  color:#e05050
}

.ri-P {
  color:#f0f0f0
}

.ri-M {
  color:#e0c04a
}

.ri-S {
  color:#4db87a
}

.rib-tag {
  font-family:Caveat, cursive;
  font-weight:600;
  font-size:9.5px;
  transform:rotate(-2.5deg);
  transform-origin:left top;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  padding-left:3px;
  margin-top:0
}

.rib-meaning {
  font-family:Inter, sans-serif;
  font-weight:500;
  font-size:7.7px;
  color:#fff;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
  padding-left:3px;
  margin-top:1px
}

.tc-b {
  color:#4db87a
}

.tc-y {
  color:#e05050
}

.tc-I2 {
  color:#e05050
}

.tc-n {
  color:#4db87a
}

.tc-f {
  color:#d0d0d0
}

.tc-r {
  color:#e0c04a
}

.tc-a {
  color:#e05050
}

.tc-W {
  color:#4db87a
}

.tc-a2 {
  color:#e05050
}

.tc-t {
  color:#e0c04a
}

.tc-c {
  color:#4db87a
}

.tc-h {
  color:#e0c04a
}

.tc-K {
  color:#e05050
}

.tc-e {
  color:#4db87a
}

.tc-n2 {
  color:#d0d0d0
}

.tc-y2 {
  color:#e0c04a
}

.tc-a3 {
  color:#4db87a
}

.header-right {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding-right:20px
}

.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#555;
  flex-shrink:0;
  transition:background .4s
}

.status-dot.connected {
  background:#22c55e;
  box-shadow:0 0 6px #22c55e
}

.status-dot.offline {
  background:var(--k-red)
}

.role-badge {
  font-size:.72rem;
  padding:3px 10px;
  border-radius:20px;
  font-weight:600;
  background:var(--k-green);
  color:#fff;
  white-space:nowrap
}


/* =================== */
/* === BUTTONS === */
/* =================== */


.btn-hdr {
  font-size:.74rem;
  padding:5px 11px;
  border-radius:var(--radius2);
  background:rgba(255, 255, 255, .1);
  border:1px solid rgba(255, 255, 255, .2);
  color:#fff;
  transition:.18s
}

.btn-hdr:hover {
  background:rgba(255, 255, 255, .2)
}

.btn-hdr-red {
  background:rgba(176, 48, 52, .25);
  border-color:rgba(176, 48, 52, .5);
  color:#f5a0a2
}

.btn-hdr-red:hover {
  background:var(--k-red);
  color:#fff;
  border-color:var(--k-red)
}

.hamburger {
  background:0 0;
  border:1px solid rgba(255, 255, 255, .25);
  color:#fff;
  padding:5px 9px;
  border-radius:var(--radius2);
  font-size:1.1rem;
  display:block
}



/* === DARK MODE === */

[data-theme=dark] {
  --bg:#111827;
  --surface:#1f2937;
  --surface2:#374151;
  --border:#374151;
  --text:#f9fafb;
  --text1:#f9fafb;
  --text2:#9ca3af;
  --text3:#6b7280;
  --k-black2:#f3f4f6;
  --shadow-sm:0 1px 3px rgba(0, 0, 0, .4);
  color-scheme:dark
}

[data-theme=dark] header {
  background:linear-gradient(135deg, #0a0f0a 0, #0d1a0d 40%, #0a0a0a 100%)
}

[data-theme=dark] 
/* =================== */
/* === CARDS === */
/* =================== */

.section-card {
  background:#1f2937;
  border-color:#374151
}

[data-theme=dark] table thead tr {
  background:#063!important
}

[data-theme=dark] tr {
  background:0 0!important
}

[data-theme=dark] tr:nth-child(2n) {
  background:rgba(255, 255, 255, .03)!important
}



/* === MODALS === */

[data-theme=dark] .modal-content {
  background:#1f2937;
  color:#f9fafb;
  border:1px solid #374151
}

[data-theme=dark] .modal-title {
  color:#f9fafb;
  border-bottom-color:#374151
}

[data-theme=dark] label {
  color:#d1d5db
}

[data-theme=dark] .section-card-title {
  color:#f9fafb;
  border-bottom-color:#374151
}

[data-theme=dark] .page-title {
  color:#f9fafb!important
}

[data-theme=dark] .page-subtitle {
  color:#9ca3af!important
}

[data-theme=dark] .kenya-stripe {
  opacity:.7
}

[data-theme=dark] input,
[data-theme=dark] select,
[data-theme=dark] textarea {
  background:#374151;
  color:#f9fafb;
  border-color:#4b5563
}

[data-theme=dark] .stat-card {
  background:#1f2937;
  border-color:#374151
}

[data-theme=dark] .nav-scroll-area {
  /* Goldish in dark theme too (canon — matches the portals). */
  scrollbar-color:rgba(245, 166, 35, .55) transparent
}

[data-theme=dark] #propBar {
  background:linear-gradient(135deg, #0a1f0d, #111);
  border-bottom-color:#1f2937
}

[data-theme=dark] .tab-panel,
[data-theme=dark] .tabs {
  background:0 0
}

[data-theme=dark] .badge-gray {
  background:#374151;
  color:#d1d5db
}

#propBar {
  background:linear-gradient(135deg, #004d20, #003a15);
  height:46px;
  /* R13.21.0.10 — left padding tracks sidebar width via --bf-sidebar-width
     (228px expanded, 48px collapsed) so the propBar content starts at the
     main-content column edge instead of overlapping the sidebar's column. */
  padding:0 20px 0 var(--bf-sidebar-width, 228px);
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  position:sticky;
  top:54px;
  z-index:850;
  border-bottom:1px solid #2e2e2e
}

#propBar::-webkit-scrollbar {
  display:none
}

.prop-tab {
  font-size:.76rem;
  padding:4px 14px;
  border-radius:20px;
  border:1px solid #3a3a3a;
  background:0 0;
  color:#999;
  white-space:nowrap;
  transition:.18s;
  font-family:var(--font)
}

.prop-tab:hover {
  border-color:var(--k-green);
  color:#fff
}

.prop-tab.active {
  background:var(--k-green);
  border-color:var(--k-green);
  color:#fff;
  font-weight:600
}

.prop-tab-add {
  font-size:.76rem;
  padding:4px 12px;
  border-radius:20px;
  border:1px dashed #444;
  background:0 0;
  color:#777;
  transition:.18s
}

.prop-tab-add:hover {
  border-color:#f5c842;
  color:#f5c842
}



/* === LAYOUT === */

.app-body {
  display:flex;
  flex:1;
  overflow:hidden
}



/* === SIDEBAR === */

nav.sidebar {
  width:228px;
  flex-shrink:0;
  background:linear-gradient(180deg, #003a15 0, #004d20 100%);
  padding:0;
  overflow:hidden;
  height:calc(100vh - 100px);
  position:sticky;
  top:100px;
  display:flex;
  flex-direction:column
}

.nav-scroll-area {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  padding-top:0;
  padding-bottom:0;
  /* Goldish thin sidebar scrollbar — canon size/thickness shared with the
     portals (DP 698), James 2026-06-21: "in the main app also let us have the
     scroll bar in goldish colour ... canon for size and thickness." 6px thumb,
     gold rgba(245,166,35,.55), matches platform/portal-shell.js .bf-portal-sidebar-inner. */
  scrollbar-width:thin;
  scrollbar-color:rgba(245, 166, 35, .55) transparent
}
.nav-scroll-area::-webkit-scrollbar { width:6px }
.nav-scroll-area::-webkit-scrollbar-track { background:rgba(255, 255, 255, .06) }
.nav-scroll-area::-webkit-scrollbar-thumb { background:rgba(245, 166, 35, .55); border-radius:4px }
.nav-scroll-area::-webkit-scrollbar-thumb:hover { background:rgba(245, 166, 35, 1) }

.sidebar-section-title {
  font-size:.65rem;
  font-weight:700;
  color:rgba(255, 255, 255, .5);
  padding:8px 16px 8px 14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  transition:background .15s, color .15s;
  border-left:3px solid transparent;
  font-family:var(--font-heading)
}

.sidebar-section-title:hover {
  background:rgba(255, 255, 255, .06);
  color:rgba(255, 255, 255, .85)
}

.sidebar-section-title.open {
  color:#fff;
  border-left-color:rgba(255, 255, 255, .35)
}

.sidebar-section-title .nav-chevron {
  font-size:.55rem;
  transition:transform .22s;
  display:inline-block;
  opacity:.6
}

.sidebar-section-title.open .nav-chevron {
  transform:rotate(90deg);
  opacity:1
}

.sidebar-group-body {
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease
}

.sidebar-group-body.open {
  max-height:2400px
}

.sidebar ul {
  list-style:none
}

.sidebar ul li a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  font-size:.81rem;
  color:rgba(255, 255, 255, .75);
  transition:.15s
}

.sidebar ul li a:hover {
  color:#fff;
  background:var(--sidebar-hover)
}

.sidebar ul li a.active {
  color:#fff;
  background:var(--sidebar-active);
  border-right:3px solid var(--k-gold);
  font-weight:700
}

.nav-icon {
  font-size:.88rem;
  width:18px;
  flex-shrink:0
}

.nav-divider {
  height:1px;
  background:rgba(255, 255, 255, .1);
  margin:6px 14px
}

main.main-content {
  flex:1;
  overflow-y:auto;
  padding:22px 24px;
  min-width:0
}

.app-section {
  display:none
}

.app-section.visible {
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
  height:calc(100vh - 160px);
  animation:fadeIn .2s ease
}



/* === ANIMATIONS === */

@keyframes fadeIn {
  from {
    opacity:0;
    transform:translateY(5px)
  }
to {
    opacity:1;
    transform:none
  }

}

.page-header {
  margin-bottom:18px
}

.page-title {
  font-size:1.25rem;
  font-weight:700;
  color:var(--k-black2);
  margin-bottom:2px;
  font-family:var(--font-heading)
}

.page-subtitle {
  font-size:.79rem;
  color:var(--text3)
}

.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
  gap:14px;
  margin-bottom:20px
}

.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  animation:fadeIn .25s ease
}

.stat-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:3px
}

.stat-card-green::before {
  background:var(--k-green)
}

.stat-card-red::before {
  background:var(--k-red)
}

.stat-card-black::before {
  background:var(--k-black)
}

.stat-card-teal::before {
  background:#0e7490
}

.stat-card-label {
  font-size:.73rem;
  font-weight:600;
  color:var(--text3);
  margin-bottom:6px
}

.stat-card-value {
  font-size:1.3rem;
  font-weight:700;
  font-family:var(--mono);
  color:var(--k-black2);
  margin-bottom:3px
}

.stat-card-sub {
  font-size:.71rem;
  color:var(--text3)
}

.section-card {
  background:#fff;
  border-radius:10px;
  border:1px solid #e0ebe0;
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:0 1px 4px rgba(0, 102, 51, .06), 0 4px 16px rgba(0, 102, 51, .04)
}

.section-card-title {
  font-size:.88rem;
  font-weight:700;
  color:var(--k-black2);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--k-green-light);
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading)
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  align-items:center
}

.btn-primary {
  background:var(--k-green);
  color:#fff;
  border:none;
  padding:7px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:600;
  transition:.18s;
  display:inline-flex;
  align-items:center;
  gap:5px;
  box-shadow:0 2px 8px rgba(0, 102, 51, .25)
}

.btn-primary:hover {
  background:#008040;
  box-shadow:0 2px 8px rgba(0, 102, 51, .25)
}

.btn-secondary {
  background:var(--surface);
  color:var(--text2);
  border:1px solid var(--border2);
  padding:7px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:500;
  transition:.18s;
  display:inline-flex;
  align-items:center;
  gap:5px
}

.btn-secondary:hover {
  border-color:var(--k-green);
  color:var(--k-green)
}

.btn-danger {
  background:var(--k-red-light);
  color:var(--k-red-dark);
  border:1px solid var(--k-red-mid);
  padding:5px 11px;
  border-radius:var(--radius2);
  font-size:.75rem;
  font-weight:600;
  transition:.18s
}

.btn-danger:hover {
  background:var(--k-red);
  color:#fff;
  border-color:var(--k-red)
}

.btn-sm {
  padding:4px 10px!important;
  font-size:.74rem!important
}

.badge {
  display:inline-block;
  padding:2px 9px;
  border-radius:20px;
  font-size:.69rem;
  font-weight:600
}


/* =================== */
/* === BADGES === */
/* =================== */


.badge-green {
  background:var(--k-green-light);
  color:var(--k-green);
  border:1px solid var(--k-green-mid)
}

.badge-red {
  background:var(--k-red-light);
  color:var(--k-red-dark);
  border:1px solid var(--k-red-mid)
}

.badge-yellow {
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a
}

.badge-blue {
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}

.badge-gray {
  background:var(--surface3);
  color:var(--text3);
  border:1px solid var(--border2)
}

.table-wrapper {
  overflow-x:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow)
}


/* === TABLES === */

table {
  width:100%;
  border-collapse:collapse;
  font-size:.8rem
}

thead {
  background:var(--k-black2)
}

th {
  padding:10px 14px;
  text-align:left;
  font-size:.69rem;
  font-weight:600;
  color:rgba(255, 255, 255, .7);
  letter-spacing:.07em;
  text-transform:uppercase;
  border-bottom:2px solid var(--k-green-dark)
}

td {
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  vertical-align:middle
}

tr:last-child td {
  border-bottom:none
}

tbody tr:hover td {
  background:var(--k-green-light)
}

.td-actions {
  display:flex;
  gap:5px;
  align-items:center
}



/* === FORMS === */
.form-group {
  margin-bottom:12px
}

.form-group label {
  display:block;
  font-size:.76rem;
  color:var(--text2);
  margin-bottom:4px;
  font-weight:500
}

.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius2);
  padding:7px 11px;
  color:var(--text);
  font-size:.82rem;
  font-family:var(--font);
  transition:.18s
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:0;
  border-color:var(--k-green);
  box-shadow:0 0 0 3px rgba(0, 102, 51, .1)
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.error-msg {
  font-size:.71rem;
  color:var(--k-red);
  display:none;
  margin-top:3px
}

.success-msg {
  font-size:.78rem;
  color:var(--k-green);
  display:none;
  margin-bottom:8px;
  padding:8px 12px;
  background:var(--k-green-light);
  border:1px solid var(--k-green-mid);
  border-radius:var(--radius2)
}

.muted-text {
  font-size:.78rem;
  color:var(--text3);
  line-height:1.5
}

.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, .45);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:16px
}

.modal.open {
  display:flex
}

.modal-content {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  width:100%;
  max-width:500px;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 20px 60px rgba(0, 0, 0, .18)
}

.modal-title {
  font-size:1rem;
  font-weight:700;
  color:var(--k-black2);
  margin-bottom:16px;
  padding-bottom:11px;
  border-bottom:2px solid var(--k-green)
}

.close-btn {
  position:absolute;
  top:14px;
  right:16px;
  font-size:1.2rem;
  color:var(--text3);
  background:0 0;
  border:none;
  cursor:pointer;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px
}

.close-btn:hover {
  background:var(--surface3);
  color:var(--text)
}

.tabs {
  display:flex;
  border-bottom:2px solid var(--border);
  margin-bottom:16px;
  overflow-x:auto
}

.tab-btn {
  padding:8px 16px;
  font-size:.8rem;
  color:var(--text3);
  background:0 0;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:.15s;
  font-family:var(--font);
  font-weight:500;
  white-space:nowrap;
  margin-bottom:-2px
}

.tab-btn.active {
  color:var(--k-green);
  border-bottom-color:var(--k-green);
  font-weight:700
}

.tab-btn:hover:not(.active) {
  color:var(--text)
}

.tab-panel {
  display:none
}

.tab-panel.active {
  display:block;
  animation:fadeIn .18s ease
}

.stats-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px
}

.stat-chip {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:6px 14px;
  font-size:.78rem;
  color:var(--text2);
  display:flex;
  align-items:center;
  gap:6px
}

.stat-chip strong {
  font-family:var(--mono);
  font-size:.88rem;
  color:var(--k-black2)
}

.meter-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0;
  box-shadow:var(--shadow);
  overflow:hidden
}

.meter-card-flag {
  height:5px;
  background:linear-gradient(to right, #060 33%, #b00 33%, #b00 67%, #000 67%)
}

.meter-card-inner {
  padding:12px 14px 14px
}

.meter-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}

.meter-unit-label {
  font-weight:700;
  font-size:.88rem;
  color:var(--k-black2)
}

.meter-type {
  font-size:.7rem;
  padding:2px 8px;
  border-radius:10px;
  font-weight:600
}

.meter-type.water {
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}

.meter-type.electricity {
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a
}

.meter-type.gas {
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca
}

.meter-row-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  margin-top:8px
}

.meter-prev-val {
  font-size:.68rem;
  color:var(--text3)
}

.meter-prev-zero {
  font-size:.68rem;
  color:#6b7280;
  font-style:italic
}

.meter-input-field {
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--radius2);
  padding:5px 9px;
  color:var(--text);
  font-size:.82rem;
  font-family:var(--mono)
}

.meter-input-field:focus {
  outline:0;
  border-color:var(--k-green)
}

.meter-edit-prev {
  font-size:.62rem;
  color:#92400e;
  cursor:pointer;
  background:#fef3c7;
  border:1px solid #fde68a;
  border-radius:4px;
  padding:2px 6px;
  margin-top:3px;
  display:inline-block;
  font-weight:600;
  transition:background .15s
}

.meter-edit-prev:hover {
  background:#fde68a
}

.util-billing-mode {
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap
}

.util-mode-btn {
  padding:6px 14px;
  border-radius:20px;
  border:1.5px solid var(--border2);
  background:var(--surface2);
  color:var(--text2);
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s
}

.util-mode-btn.active {
  background:var(--k-green);
  color:#fff;
  border-color:var(--k-green)
}

.ubill-badge-sep {
  background:#e0f2fe;
  color:#0369a1;
  border:1px solid #bae6fd;
  border-radius:10px;
  font-size:.65rem;
  padding:1px 7px;
  font-weight:600
}

.ubill-badge-bundled {
  background:#f0fdf4;
  color:#166534;
  border:1px solid #bbf7d0;
  border-radius:10px;
  font-size:.65rem;
  padding:1px 7px;
  font-weight:600
}

.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:12px
}

.team-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:.18s
}

.team-card:hover {
  border-color:var(--k-green-mid)
}

.team-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--k-green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
  font-size:.9rem;
  margin-bottom:10px
}

.team-name {
  font-weight:700;
  font-size:.86rem;
  color:var(--k-black2);
  margin-bottom:2px
}

.team-email {
  font-size:.72rem;
  color:var(--text3);
  margin-bottom:7px
}

.cs-section-label {
  font-size:.67rem;
  font-weight:700;
  color:var(--text3);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 0 8px;
  border-top:1px solid var(--border);
  margin-top:4px
}

.cs-section-label:first-child {
  border-top:none;
  padding-top:0;
  margin-top:0
}

.cs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
  margin-bottom:16px
}

.cs-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:.18s
}

.cs-card:hover {
  border-color:var(--k-green-mid);
  transform:translateY(-1px);
  box-shadow:var(--shadow2)
}

.cs-card-head {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px
}

.cs-icon {
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--k-green-light);
  border:1px solid var(--k-green-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0
}

.cs-title {
  font-weight:700;
  font-size:.85rem;
  color:var(--k-black2);
  margin-bottom:3px
}

.cs-desc {
  font-size:.74rem;
  color:var(--text3);
  line-height:1.5
}

.cs-eta {
  display:inline-block;
  font-size:.67rem;
  padding:2px 9px;
  border-radius:20px;
  margin-top:8px;
  font-weight:600
}

.cs-eta.q2 {
  background:var(--k-green-light);
  color:var(--k-green);
  border:1px solid var(--k-green-mid)
}

.cs-eta.q3 {
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a
}

.cs-eta.q4 {
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}

.cs-eta.later {
  background:var(--k-red-light);
  color:var(--k-red-dark);
  border:1px solid var(--k-red-mid)
}

.rbac-table th {
  padding:8px 10px
}

.rbac-table td {
  padding:7px 10px
}

.chk-yes {
  color:var(--k-green);
  font-weight:700
}

.chk-no {
  color:var(--border2)
}

.kenya-stripe {
  height:4px;
  background:linear-gradient(90deg, var(--k-black) 33.3%, var(--k-red) 33.3% 66.6%, var(--k-green) 66.6%);
  border-radius:2px;
  margin:16px 0
}

.loading-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(255, 255, 255, .75);
  z-index:1200;
  align-items:center;
  justify-content:center
}

.loading-overlay.show {
  display:flex
}

.loading-spinner {
  width:32px;
  height:32px;
  border:3px solid var(--border2);
  border-top-color:var(--k-green);
  border-radius:50%;
  animation:spin .65s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }

}

footer {
  background:var(--k-black2);
  color:rgba(255, 255, 255, .55);
  padding:12px 24px;
  font-size:.74rem;
  text-align:center;
  border-top:3px solid var(--k-red)
}

footer strong {
  color:#5fbd80
}

@media(max-width:768px) {
  body, html {
    overflow-x:hidden
  }
header {
    height:54px;
    min-height:54px;
    max-height:54px;
    padding:0 4px;
    gap:4px;
    overflow:hidden
  }
.rib-lk {
    gap:5px
  }
.rib-lk-disc {
    width:28px!important
  }
.rib-bomaflow {
    font-size:17px!important
  }
.rib-tag {
    font-size:7px!important
  }
.rib-meaning {
    font-size:5.8px!important;
    letter-spacing:0
  }
.header-right {
    gap:4px;
    padding-right:4px;
    overflow:hidden;
    flex-shrink:0;
    flex-wrap:nowrap
  }
.header-right .btn-ghost, .header-right .btn-secondary {
    display:none
  }
#autosave-indicator, #logoutBtn, #planBadge, #roleBadge, #statusDot, #storageHealthBadge, #switchRoleBtn, .header-right>div:has(#notif-dropdown) {
    display:none!important
  }
.hamburger {
    display:block!important;
    min-width:38px;
    min-height:38px;
    font-size:1.2rem;
    flex-shrink:0
  }
#darkModeToggle {
    flex-shrink:0
  }
.hdr-wordmark {
    display:none
  }
#headerBrand {
    flex-shrink:1;
    min-width:0;
    overflow:hidden
  }
#propBar {
    height:40px;
    padding:0 10px;
    top:54px;
    gap:5px
  }
#propBarProfitCard {
    display:none!important
  }
.prop-tab {
    font-size:.67rem;
    padding:4px 10px;
    min-height:30px
  }
.prop-tab-add {
    font-size:.67rem;
    padding:4px 9px
  }
nav.nav-scroll-area {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 0 0;
    min-height:0
  }
.sidebar-footer-brand {
    padding:14px 16px 16px;
    border-top:1px solid rgba(255, 255, 255, .12);
    background:rgba(0, 0, 0, .2);
    flex-shrink:0
  }
.sidebar-footer-brand .sfb-name {
    font-size:.62rem;
    font-weight:800;
    color:rgba(255, 255, 255, .5);
    letter-spacing:.08em;
    text-transform:uppercase
  }
.sidebar-footer-brand .sfb-ver {
    font-size:.58rem;
    color:rgba(255, 255, 255, .25);
    margin-top:2px
  }
.sidebar-footer-brand .sfb-ai {
    display:inline-block;
    font-size:.55rem;
    font-weight:700;
    background:var(--k-green);
    color:#fff;
    padding:1px 5px;
    border-radius:3px;
    margin-left:4px;
    letter-spacing:.04em;
    vertical-align:middle
  }
nav.sidebar {
    position:fixed!important;
    left:-270px;
    top:0;
    z-index:1100;
    height:100vh!important;
    width:260px;
    transition:left .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow:4px 0 32px rgba(0, 0, 0, .4);
    padding-top:60px;
    overflow-y:auto
  }
nav.sidebar.open {
    left:0!important
  }
#sidebarOverlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0, 0, 0, .45);
    z-index:1050;
    -webkit-tap-highlight-color:transparent
  }
#sidebarOverlay.show {
    display:block
  }
.sidebar ul li a {
    padding:11px 18px;
    font-size:.84rem;
    min-height:44px
  }
.sidebar-section-title {
    padding:12px 16px;
    font-size:.68rem;
    min-height:44px
  }
.nav-icon {
    font-size:1rem
  }
.app-body {
    flex-direction:column
  }
main.main-content {
    padding:12px 10px 80px;
    min-width:0;
    overflow-x:hidden;
    width:100%;
    box-sizing:border-box
  }
.page-title {
    font-size:1rem
  }
.page-subtitle {
    font-size:.71rem
  }
.page-header {
    margin-bottom:10px;
    flex-wrap:wrap;
    gap:6px
  }
.actions {
    gap:6px;
    flex-wrap:wrap
  }
.actions .btn-ghost, .actions .btn-primary, .actions .btn-secondary {
    font-size:.73rem;
    padding:8px 10px;
    min-height:40px;
    flex:1 1 auto;
    justify-content:center;
    text-align:center
  }
.dashboard-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
.stat-card {
    padding:12px 11px
  }
.stat-card-value {
    font-size:1.15rem
  }
.stat-card-label {
    font-size:.67rem
  }
.stat-card-sub {
    font-size:.64rem
  }
.table-wrapper {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:6px
  }
.table-wrapper table {
    font-size:.73rem;
    width:max-content;
    min-width:100%
  }
.table-wrapper td, .table-wrapper th {
    padding:8px 9px;
    white-space:nowrap
  }
.table-wrapper .td-actions {
    display:flex;
    gap:4px;
    flex-wrap:nowrap
  }
.btn-sm {
    font-size:.65rem!important;
    padding:5px 8px!important;
    min-height:32px!important
  }
.section-card {
    padding:13px;
    max-width:100%!important
  }
.section-card-title {
    font-size:.82rem
  }
.form-row {
    grid-template-columns:1fr
  }
.form-group {
    margin-bottom:10px
  }
.form-group label {
    font-size:.73rem
  }
.form-group input, .form-group select, .form-group textarea {
    font-size:.84rem;
    padding:9px 10px;
    min-height:42px
  }
.dep-field, .doc-upload-field, .pay-instr-field, .rc-section {
    padding:10px 11px
  }
.pay-panel-head {
    padding:12px 13px;
    min-height:44px
  }
.pay-panel-body.open {
    max-height:480px
  }
.modal {
    padding:0;
    align-items:flex-end
  }
.modal-content {
    max-width:100%!important;
    width:100%;
    border-radius:20px 20px 0 0;
    max-height:94vh;
    padding:20px 16px 36px;
    box-shadow:0 -8px 40px rgba(0, 0, 0, .22)
  }
.modal-content::before {
    content:'';
    display:block;
    width:40px;
    height:4px;
    background:rgba(0, 0, 0, .15);
    border-radius:2px;
    margin:-8px auto 14px
  }
.modal-title {
    font-size:.92rem
  }
.close-btn {
    top:16px;
    right:14px;
    width:32px;
    height:32px;
    font-size:1.1rem
  }
#csvImportModal .modal-content {
    border-radius:20px 20px 0 0;
    padding:0
  }
.csv-modal-head {
    padding:16px 16px 12px
  }
.csv-steps {
    gap:0;
    padding:0 8px;
    overflow-x:auto;
    scrollbar-width:none
  }
.csv-steps::-webkit-scrollbar {
    display:none
  }
.csv-step {
    font-size:.6rem;
    padding:9px 8px;
    white-space:nowrap
  }
.csv-step-num {
    width:16px;
    height:16px;
    font-size:.55rem
  }
.csv-body {
    padding:14px;
    min-height:200px
  }
.csv-footer {
    padding:10px 14px
  }
.csv-map-grid {
    grid-template-columns:1fr 18px 1fr;
    gap:4px
  }
.csv-map-label {
    font-size:.63rem;
    padding:5px 6px
  }
.csv-map-select {
    font-size:.63rem;
    padding:4px 6px
  }
.csv-stats {
    gap:7px
  }
.csv-stat {
    min-width:55px;
    font-size:.64rem;
    padding:6px 7px
  }
.csv-stat strong {
    font-size:.9rem
  }
.csv-mode-card {
    padding:12px
  }
.kpi-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
.kpi-value {
    font-size:1rem
  }
.kpi-label {
    font-size:.59rem
  }
.dash-grid {
    grid-template-columns:1fr!important;
    gap:10px
  }
.chart-grid {
    grid-template-columns:1fr
  }
.chart-wrap {
    height:180px
  }
.doc-layout {
    grid-template-columns:1fr!important
  }
.bc-layout {
    grid-template-columns:1fr!important
  }
.bulk-row {
    flex-wrap:wrap;
    gap:4px
  }
.meter-card-flag {
    height:4px
  }
.team-grid {
    grid-template-columns:1fr
  }
.cs-grid {
    grid-template-columns:1fr
  }
.tabs, .tpl-tabs {
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
.tabs::-webkit-scrollbar, .tpl-tabs::-webkit-scrollbar {
    display:none
  }
.tab-btn {
    padding:9px 12px;
    font-size:.74rem;
    white-space:nowrap
  }
.tpl-tab {
    padding:8px 12px;
    font-size:.7rem;
    white-space:nowrap
  }
.masterlist-hide {
    display:none
  }
.app-section {
    padding-bottom:72px
  }

}

#bf-mobile-nav {
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:56px;
  z-index:1200;
  background:linear-gradient(135deg, #0a1f0d, #0d2d12);
  border-top:1px solid rgba(255, 255, 255, .12);
  box-shadow:0 -4px 20px rgba(0, 0, 0, .35);
  align-items:stretch;
  -webkit-tap-highlight-color:transparent
}

.bf-mnav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:none;
  background:0 0;
  color:rgba(255, 255, 255, .45);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  padding:0;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  min-width:0
}

.bf-mnav-icon {
  font-size:1.2rem;
  line-height:1;
  transition:transform .15s
}

.bf-mnav-btn:active {
  background:rgba(255, 255, 255, .06)
}

.bf-mnav-btn.active {
  color:#00a34c
}

.bf-mnav-btn.active .bf-mnav-icon {
  transform:scale(1.12)
}

.bf-mnav-badge {
  position:absolute;
  top:5px;
  right:calc(50% - 16px);
  background:#ef4444;
  color:#fff;
  border-radius:50%;
  width:14px;
  height:14px;
  font-size:.5rem;
  font-weight:800;
  display:none;
  align-items:center;
  justify-content:center
}

@media(max-width:768px) {
  #bf-mobile-nav {
    display:flex!important;
    
  }

}

@media(max-width:400px) {
  header {
    min-height:65px;
    padding:0
  }
.rib-meaning {
    display:none
  }
.rib-tag {
    display:none
  }
.rib-bomaflow {
    font-size:15px!important
  }
.dashboard-grid {
    grid-template-columns:1fr
  }
.kpi-grid {
    grid-template-columns:1fr
  }
.actions .btn-ghost, .actions .btn-primary, .actions .btn-secondary {
    font-size:.69rem;
    padding:7px 8px
  }
.modal-content {
    padding:16px 13px 32px
  }
main.main-content {
    padding:10px 8px 80px
  }
[id^=section-hr-] [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns:repeat(2, 1fr)!important
  }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FOUNDATION — RN dispatch 2026-06-25 (+ Android patch)
   ────────────────────────────────────────────────────────────────────────
   ADDITIVE and MOBILE-ONLY. Everything here is gated to max-width:767px
   (below --bp-md), so desktop (>=1024px) and tablet (768-1023px) are
   byte-identical before/after. No existing rule is modified.

   Scope: this is shared shell chrome + shared content primitives, so it
   benefits all 7 plans' phone rendering — but it was authored and verified
   against the RN plan only (other plans deferred to a follow-up dispatch).

   Specificity note: the shell's inline <style> (tenari2_shell.html:522-574)
   pins #sidebar sticky + .app-body row at ALL widths with ID !important and
   loads AFTER this file. To re-assert the mobile drawer the selectors below
   must out-specify `.app-body > #sidebar` (1,0,1); we use `html .app-body
   #sidebar` (1,1,1). Do not "simplify" these selectors — they will lose.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. SHELL DRAWER — release the desktop layout-lock ──────────────────
     Without this the sidebar stays in-flow at 228px and squeezes the
     content column to ~147px (the dominant Phase-1 audit finding). */
  html .app-body {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html .app-body #sidebar,
  html .app-body #hr-nav,
  html .app-body #app-nav,
  html .app-body .bf-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -300px !important;
    width: 264px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;          /* Android keyboard-safe */
    align-self: auto !important;
    padding-top: 60px !important;
    z-index: 1100 !important;
    transition: left .28s cubic-bezier(.4, 0, .2, 1) !important;
  }
  html .app-body #sidebar.open,
  html .app-body .bf-sidebar.open,
  body.sidebar-open .app-body #sidebar {
    left: 0 !important;
  }
  html .app-body .main-content,
  html .app-body main.main-content,
  html .app-body [class*="main-content"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    overflow-x: hidden !important;
  }

  /* ── 2. TABLES — horizontal scroll instead of cut-off ──────────────────
     The canonical wrapper .tn-table-wrap currently has overflow-x:visible,
     so wide tables spill off the right edge with no scroller. */
  .tn-table-wrap,
  .table-wrap, .data-table-wrap,
  [class*="table-container"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tn-table-wrap > table,
  .tn-table { min-width: max-content; }
  .tn-table thead th:first-child,
  .tn-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface, var(--card, #fff));
    z-index: 2;
  }

  /* ── 3. KPI / STAT CARD GRIDS — stack 2-up instead of squeezing ───────────
     Covers the main shell (.kpi-grid) AND the shared portal/app component
     library (.tn-card-grid, platform/tn-card.js). Attribute selectors catch
     future tn-card-grid-* / *-card-grid variants automatically. */
  .kpi-grid,
  .tn-card-grid,
  [class*="kpi-grid"],
  [class*="kpi-strip"],
  [class*="card-grid"],
  [class*="tn-card-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* [class*="kpi-grid"] is the universal bridge: it matches the main shell's
     `.kpi-grid` AND every portal's `bf-<code>-kpi-grid` (caretaker bf-cp-,
     agent bf-ap-, accountant bf-acp-, owner/customer/accounts/tenant, and any
     FUTURE portal following the convention). Portals inherit the 2-col stack
     by simply linking tenari_theme.css — no portal CSS, no per-portal work;
     new portals adopt automatically. See audits/PORTAL-MOBILE-PARITY-GAPS.md. */

  /* ── 3b. Card component families — mobile sizing.
     tn-card (platform/tn-card.js, main app + most portals) AND tp-card (the
     self-service portals' flat card — owner/customer/tenant). Attribute
     selectors so any BEM child / future variant inherits. !important because
     tn-card.js injects its component styles at runtime (later in the cascade).
     tp-card added 2026-06-26 (PORTAL-MOBILE-PARITY-GAPS.md GAP-2): it was the
     one card family the §3b sizing did not reach. */
  [class*="tn-card"],
  [class*="tp-card"] {
    min-width: 0 !important;           /* prevent grid blow-out */
  }
  .tn-card,
  .tp-card {
    padding: 12px !important;          /* tighter than desktop default */
  }
  .tn-card__value {
    font-size: 1.5rem !important;      /* readable, not oversized */
    overflow-wrap: anywhere;           /* big KES amounts don't blow layout */
  }
  .tn-card__icon {
    font-size: 1.5rem !important;
  }

  /* ── 4. MODALS — full-screen, keyboard-safe (dvh) ─────────────────────── */
  .modal, .bf-modal-overlay { padding: 0 !important; }
  .modal-content, .bf-modal-card, [role="dialog"] {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;          /* vh declared first, dvh wins */
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* dvh-with-vh-fallback for modals / drawers / sticky surfaces. Android
     soft keyboard collapses the dynamic viewport on input focus; without
     dvh the submit button can be hidden under the keyboard. vh FIRST so
     dvh overrides on supporting browsers (iOS 15.4+, Chrome 108+,
     Samsung Internet 21+). */
  .modal, .bf-modal, [role="dialog"], nav.sidebar {
    max-height: 100vh;
    max-height: 100dvh;
  }

  /* ── 5. FORMS — touch targets + iOS zoom prevention ───────────────────
     48px satisfies BOTH Android Material 48dp and iOS HIG 44pt. 16px font
     prevents iOS Safari zoom-on-focus (Android-neutral). font-size carries
     !important because several form skins set a smaller size at higher
     specificity; without it iOS still zooms on focus. Checkbox/radio are
     excluded from min-height so the 48px target doesn't bloat the box. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  button, .btn, .btn-teal {
    min-height: 48px;
  }
  label { display: block; margin-bottom: 4px; }

  /* ── 6. propBar — single-row horizontal scroll (real-device QA 2026-06-26).
     Was flex-wrap:wrap (PR #801); James confirmed chips should SCROLL
     horizontally (the mobile-native chip-rail pattern) rather than wrap to
     multiple rows, since the rail already has a scroll affordance. Hide the
     scrollbar; momentum scroll on touch. */
  #propBar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: auto !important;
    min-height: 40px;
  }
  #propBar::-webkit-scrollbar { display: none; }
  #propBar > * { flex-shrink: 0 !important; }

  /* ── 7. Phase 3 — per-surface overflow guards (IRPMS family + universal) ──
     The Phase-1 audit's residual BROKEN surfaces (RN: wa-scheduler,
     broadcast, rent-escalation, maintenance, utilities-ledger,
     irpms-daily-pl) overflow from two inline-style patterns the renderers
     emit. Both fixes are universal + mobile-only, so they also harden every
     other plan + portal that emits the same patterns. */

  /* 7a. Inline multi-column / fixed-px grids -> single column on phone.
     IRPMS comms emit `grid-template-columns:300px 1fr` and `repeat(4,1fr)`
     inline, which push cards off the right edge. Card grids are handled in
     §3 (kept 2-col), so they are excluded here. */
  [style*="grid-template-columns"]:not(.tn-card-grid):not(.kpi-grid):not([class*="card-grid"]):not([class*="tn-card-grid"]):not(:has(> .dash-kpi)) {
    grid-template-columns: minmax(0, 1fr) !important;  /* minmax(0,..) lets the track shrink below a wide child's min-content (a bare 1fr would blow back out) */
  }
  /* Fix 5 (real-device QA 2026-06-26) — the dashboard KPI strip is a class-less
     inline `grid-template-columns:repeat(6,1fr)` holding .dash-kpi cards, so §3
     (keyed on kpi-grid/card-grid classes) missed it and the rule above forced
     it to ONE column. Give KPI strips 2-up on phone (3 rows of 2), readable
     and not crushed. Excluded from the 1-col rule above via :not(:has()). */
  [style*="grid-template-columns"]:has(> .dash-kpi) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Also catch grids set via a class, not inline style, that still overflow:
     any display:grid inside the content column gets the same shrink-safe
     single track on phone (card grids excluded — handled in §3). */
  main.main-content [style*="display:grid"]:not([class*="card-grid"]):not(.tn-card-grid):not(.kpi-grid) > *,
  main.main-content .tn-card-grid > * {
    min-width: 0;  /* grid/flex children default to min-width:auto; allow them to shrink so a wide child can't force the track wider than the viewport */
  }

  /* 7b. Bare tables (no .tn-table class, no .tn-table-wrap scroller) become
     their own horizontal scroller instead of cutting content off. .tn-table
     (handled in §2 via its wrap) is excluded. thead/tbody are restored to
     table display so column alignment survives the block switch. */
  .app-section table:not(.tn-table),
  main.main-content table:not(.tn-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-section table:not(.tn-table) > thead,
  .app-section table:not(.tn-table) > tbody,
  main.main-content table:not(.tn-table) > thead,
  main.main-content table:not(.tn-table) > tbody {
    display: table;
    width: 100%;
  }

  /* 7c. Inline min-width on form controls / form-groups exceeds the viewport
     (e.g. the comms search input's `min-width:240px`). Release it on phone. */
  input[style*="min-width"],
  select[style*="min-width"],
  textarea[style*="min-width"],
  .form-group[style*="min-width"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 7d. PM Console (.pmc) is a `display:flex; flex-wrap:nowrap` row of two
     children — the console nav + the body. On a phone it keeps them
     side-by-side, squeezing the body (.pmc-body) to ~135px and pushing its
     filter bar (.pmc-pf) ~78px past the right edge. Stack the row to a column
     (nav above body) so the body gets full width and the filter bar fits.
     Polish round 2026-06-26 — completes the .pmc-pf residual from PR #801. */
  .pmc {
    flex-direction: column !important;
  }
  .pmc-pf {
    flex-wrap: wrap !important;
  }
  .pmc-pf > * {
    max-width: 100% !important;
    min-width: 0 !important;   /* flex children default to min-width:auto; allow shrink */
  }
  .pmc-pf select, .pmc-pf input {
    flex: 1 1 auto;
  }

  /* ── 8. Mobile header — minimal, uniform (James real-device QA 2026-06-26) ─
     The desktop header crams ~592px of chrome (brand + plan zone + org zone +
     search + demo timer + avatar + print + Quick-Actions FAB + bell + sign-out
     + hamburger) into a 390px phone, pushing the hamburger off-screen. Also
     the brand/plan zone rendered inconsistently across plans (RN icon-only,
     HT icon + app name).
     James's rule: on mobile keep the GUARANTEED set — brand icon, Bell
     (notifications), Sign Out, Hamburger — and DROP everything else (plan/app
     name, org, search, demo timer, avatar, print, Quick Actions). Uniform on
     every plan, hamburger always reachable. */
  /* 8a (Fixes 1+2) + drop the space-consuming context chrome on mobile.
     2026-06-26 follow-up: KEEP the plan zone (#bfPlanZone / .bf-plan-zone) so
     its home icon still renders; only the plan-NAME wordmark is hidden (see
     8a-name below) — James wants the icon, not the "Rentals"/"Hotel & Resort"
     text, and uniform across plans (iOS was showing the wordmark, Android
     wasn't). Org/search/timer/avatar/print/Quick-Actions still drop. */
  .print-show,
  button[title*="Print" i],
  .bf-fab-main,
  [title="Quick Actions"],
  #bfOrgZone, .bf-org-zone,
  #bfSearchWrap, #bfSearchDrop, #bfSearchTrigger,
  #bf-demo-timer-display,
  #bfAvatarBtn {
    display: none !important;
  }
  /* 8a-name — hide the plan-name wordmark (span.bf-plan-name) on mobile for
     iOS/Android parity + to free header space; the parent .bf-plan-zone keeps
     rendering the home icon. Desktop (>=768px) unaffected. */
  .bf-plan-name {
    display: none !important;
  }
  /* 8b — header is a simple flex row; brand on the left, controls on the right.
     min-width:0 + flex-wrap:nowrap so it never overflows the viewport. */
  header {
    gap: 6px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  #headerBrand {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* 8c (Fix 3) — Bell + Sign Out + Hamburger sit together at the right edge,
     in that reading order; the hamburger is the last, anchored to the edge. */
  .header-right {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .header-right > * { flex-shrink: 0 !important; }
  /* Mobile ONLY: pin the hamburger to the EXTREME LEFT of the header so the main
     app matches the portals (hamburger LHS). Desktop keeps it on the right (this
     rule lives inside the <=767px media query). Absolute so the bell/sign-out/
     avatar group on the right is left untouched; header is position:sticky so it
     anchors here. The header gets a matching left pad below so the brand clears
     it. James 2026-06-26. */
  .hamburger {
    display: block !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    order: 0 !important;
    margin: 0 !important;
    z-index: 6 !important;
  }
  header {
    padding-left: 46px !important;   /* reserve the LHS slot for the hamburger */
  }

  /* ── 9. Breadcrumb suppression on mobile (James 2026-06-27) ──────────────
     Both breadcrumb rows — the "Recent sections" pills (#bf-recents) and the
     active-section trail (#bf-breadcrumb, e.g. "Overview › Dashboard") — are
     HIDDEN on mobile to reclaim ~120px of vertical space; the hamburger drawer
     provides navigation instead. Desktop is unchanged. Universal: every surface
     that loads tenari_theme.css inherits this — the main app (all 7 plans) AND
     the embedded PM console (the screenshot's source) AND any portal; the
     standalone PM console + portals render no breadcrumbs so it is a safe no-op
     there. High specificity (html body …) + !important to beat the competing
     bottom-nav layout rules that otherwise keep them visible. bfUpdateBreadcrumb
     stays active (desktop + any non-visual behaviour). CANON §Breadcrumb Mobile
     Suppression — audits/BREADCRUMB-MOBILE-HIDE-2026-06-27.md. */
  html body #bf-recents, html body .bf-recents,
  html body #bf-breadcrumb, html body .bf-breadcrumb {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PORTAL HOME — mobile-only app-feel landing (2026-06-26).
   6-zone universal pattern rendered by platform/portal-home-renderer.js.
   MOBILE-ONLY by construction: all visible styling is gated to
   max-width:767px; the Home nav sub-item is hidden on >=768px (desktop)
   below. Desktop Dashboard is untouched. Placed BEFORE the load-bearing
   line-5271 parse-break so these rules actually apply.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tn-home { padding: 12px 12px 28px; max-width: 560px; margin: 0 auto; }
  .tn-home__account-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; padding: 4px 2px 1px; }
  .tn-home__context { font-size: .72rem; color: #64748b; font-weight: 600; letter-spacing: .02em; padding: 2px 2px 10px; }
  .tn-home__context-unit { color: #006633; font-weight: 800; }
  .tn-home__hero { border-radius: 16px; padding: 22px 18px; text-align: center; margin-bottom: 16px; }
  .tn-home__hero-value { font-size: 2.4rem; font-weight: 800; line-height: 1.05; }
  .tn-home__hero-label { font-size: .9rem; font-weight: 700; color: #334155; margin-top: 4px; }
  .tn-home__hero-sub { font-size: .76rem; color: #64748b; margin-top: 3px; }
  .tn-home__hero-empty { font-size: .88rem; color: #475569; line-height: 1.5; }
  .tn-home__primary { width: 100%; min-height: 56px; border: none; border-radius: 14px; background: #006633; color: #fff; font-size: 1.02rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px rgba(0,102,51,.22); }
  .tn-home__primary:active { transform: translateY(1px); }
  .tn-home__primary-icon { font-size: 1.15rem; line-height: 1; }
  .tn-home__hint { font-size: .78rem; color: #64748b; text-align: center; padding: 10px 6px 2px; }
  .tn-home__action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
  .tn-home__action-card { min-height: 84px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; }
  .tn-home__action-card:active { background: #f8fafc; }
  .tn-home__action-icon { font-size: 1.5rem; line-height: 1; }
  .tn-home__action-label { font-size: .76rem; font-weight: 700; color: #0f172a; text-align: center; }
  .tn-home__recent { margin-top: 8px; }
  .tn-home__recent-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; padding: 4px 2px 8px; display: flex; align-items: center; justify-content: space-between; }
  .tn-home__seeall { font-size: .66rem; color: #006633; font-weight: 700; text-decoration: none; text-transform: none; letter-spacing: 0; }
  .tn-home__recent-empty { font-size: .82rem; color: #64748b; line-height: 1.5; padding: 6px 2px; }
  .tn-home__recent-list { display: flex; flex-direction: column; gap: 8px; }
  .tn-home__recent-item { width: 100%; border: 1px solid #eef2f6; border-radius: 12px; background: #fff; cursor: pointer; display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; text-align: left; }
  .tn-home__recent-item:active { background: #f8fafc; }
  .tn-home__recent-item.is-unread { background: #f0f9ff; border-color: #bae6fd; border-left: 3px solid #0284c7; }
  .tn-home__recent-icon { font-size: 1.1rem; line-height: 1.2; flex: 0 0 auto; }
  .tn-home__recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .tn-home__recent-primary { font-size: .85rem; font-weight: 700; color: #0f172a; }
  .tn-home__recent-secondary { font-size: .74rem; color: #64748b; }
  .tn-home__recent-time { font-size: .64rem; color: #94a3b8; white-space: nowrap; flex: 0 0 auto; padding-top: 2px; margin-left: auto; }
  .tn-home__desktop-note { padding: 28px; text-align: center; }
}
/* Desktop (>=768px): hide the Home nav sub-item entirely — Home is a
   mobile-only surface. The render gate in portal-home-renderer.js catches
   direct-URL access to section-home on desktop. */
@media (min-width: 768px) {
  [data-section="section-home"],
  .bf-cp-nav-link[data-cp-nav="home"],
  .bf-tp-nav-link[data-tp-section="home"] { display: none !important; }
}

/* table -> card-stack helper (opt-in: renderer adds class="... table-stack-mobile"
   and per-cell data-label attributes). Lets a surface prefer a stacked card
   list over horizontal scroll on phones. */
@media (max-width: 767px) {
  .table-stack-mobile thead { display: none; }
  .table-stack-mobile tr {
    display: block;
    padding: 8px;
    border: 1px solid var(--border, #e2e2e2);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .table-stack-mobile td {
    display: block;
    text-align: right;
    padding: 4px 0;
    border: none;
  }
  .table-stack-mobile td::before {
    content: attr(data-label);
    float: left;
    font-weight: 600;
    color: var(--text2, #666);
  }
}

[id^=section-hr-] [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns:repeat(3, 1fr)!important
  }
.kpi-grid-7 {
    grid-template-columns:repeat(2, 1fr)!important
  }

}

#sidebarOverlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, .45);
  z-index:799
}

@media(max-width:768px) {
  #sidebarOverlay.show {
    display:block
  }

}

@media(max-width:400px) {
  .rib-meaning {
    display:none
  }
.rib-tag {
    display:none
  }
.kpi-grid {
    grid-template-columns:1fr
  }
.actions .btn-primary, .actions .btn-secondary {
    font-size:.68rem;
    padding:5px 8px
  }

}

.section-card.card-green {
  border-left:3px solid var(--k-green)
}

.section-card.card-red {
  border-left:3px solid var(--k-red)
}

.section-card.card-gold {
  border-left:3px solid var(--k-gold)
}

.section-card.card-blue {
  border-left:3px solid #0891b2
}

.section-card.card-purple {
  border-left:3px solid #7c3aed
}

.stat-card-v2 {
  background:#fff;
  border-radius:10px;
  border:1px solid #e0ebe0;
  padding:14px 16px;
  box-shadow:0 1px 4px rgba(0, 102, 51, .06);
  position:relative;
  overflow:hidden
}

.stat-card-v2::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:3px
}

.stat-card-v2.scv-green::before {
  background:var(--k-green)
}

.stat-card-v2.scv-red::before {
  background:var(--k-red)
}

.stat-card-v2.scv-gold::before {
  background:var(--k-gold)
}

.stat-card-v2.scv-blue::before {
  background:#0891b2
}

.stat-card-v2 .scv-icon {
  position:absolute;
  top:12px;
  right:14px;
  font-size:1.4rem;
  opacity:.12
}

.stat-card-v2 .scv-label {
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text2);
  margin-bottom:6px
}

.stat-card-v2 .scv-val {
  font-size:1.3rem;
  font-weight:800;
  font-family:var(--mono);
  color:var(--text);
  line-height:1
}

.stat-card-v2 .scv-sub {
  font-size:.65rem;
  color:var(--text2);
  margin-top:5px
}

.stat-card-v2 .scv-trend {
  font-size:.62rem;
  margin-top:3px
}

.btn-wa {
  background:#25d366;
  color:#fff;
  border:none;
  padding:9px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.18s
}

.btn-wa:hover {
  background:#1da851
}

.btn-sms {
  background:#0891b2;
  color:#fff;
  border:none;
  padding:9px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.18s
}

.btn-sms:hover {
  background:#0369a1
}

.btn-teal {
  background:var(--k-green);
  color:#fff;
  border:none;
  padding:9px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.18s
}

.btn-teal:hover {
  background:var(--k-green-dark)
}

.btn-gold {
  background:#b8860b;
  color:#fff;
  border:none;
  padding:9px 16px;
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.18s
}

.btn-gold:hover {
  background:#9a710a
}

.btn-ghost {
  background:0 0;
  color:var(--text2);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:var(--radius2);
  font-size:.78rem;
  cursor:pointer;
  transition:.18s
}

.btn-ghost:hover {
  background:var(--surface2)
}

.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px
}

.kpi-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--k-green);
  border-radius:var(--radius);
  padding:14px 16px
}

.kpi-card.red {
  border-left-color:var(--k-red)
}

.kpi-card.gold {
  border-left-color:#b8860b
}

.kpi-label {
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--text3);
  margin-bottom:5px
}

.kpi-value {
  font-size:1.25rem;
  font-weight:700;
  font-family:var(--mono);
  color:var(--text)
}

.kpi-sub {
  font-size:.63rem;
  color:var(--text3);
  margin-top:2px
}

.chart-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px
}

@media(max-width:700px) {
  .chart-grid {
    grid-template-columns:1fr
  }

}

.chart-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px
}

.chart-wrap {
  height:220px;
  position:relative
}

.exec-bar {
  background:var(--k-green-light);
  border-radius:4px;
  height:8px;
  overflow:hidden
}

.exec-bar-fill {
  background:var(--k-red);
  height:8px;
  border-radius:4px;
  transition:width .4s
}

.bc-layout {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:16px
}

@media(max-width:800px) {
  .bc-layout {
    grid-template-columns:1fr
  }

}

.bc-list {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-height:420px;
  overflow-y:auto
}

.bc-item {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:.12s
}

.bc-item:hover {
  background:var(--surface2)
}

.bc-item.selected {
  background:var(--k-green-light)
}

.bc-chk {
  width:18px;
  height:18px;
  border:2px solid var(--border2);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  flex-shrink:0;
  color:var(--k-green);
  font-weight:700
}

.bc-chk.on {
  background:var(--k-green);
  border-color:var(--k-green);
  color:#fff
}

.bc-bubble {
  background:var(--k-green-light);
  border:1px solid var(--k-green-mid);
  border-radius:10px;
  border-top-left-radius:0;
  padding:12px 14px;
  margin-bottom:8px;
  cursor:pointer;
  transition:.12s
}

.bc-bubble:hover {
  background:var(--k-green-mid)
}

.bc-bubble-hdr {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  font-size:.7rem
}

.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius)
}

.panel-body {
  padding:10px 12px
}

.was-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px
}

.was-toggle {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border)
}

.was-switch {
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex-shrink:0
}

.was-switch input {
  opacity:0;
  width:0;
  height:0
}

.was-slider {
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--border2);
  border-radius:24px;
  transition:.3s
}

.was-slider:before {
  position:absolute;
  content:"";
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s
}

.was-switch input:checked+.was-slider {
  background:var(--k-green)
}

.was-switch input:checked+.was-slider:before {
  transform:translateX(20px)
}

.was-log {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:10px;
  max-height:160px;
  overflow-y:auto;
  font-size:.68rem;
  color:var(--text2)
}

.was-log-entry {
  padding:3px 0;
  border-bottom:1px solid var(--border);
  line-height:1.5
}

.info-bar {
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:3px solid var(--k-green);
  border-radius:var(--radius2);
  padding:11px 14px;
  font-size:.76rem;
  color:var(--text2);
  line-height:1.7;
  margin-bottom:16px
}

.sec-title {
  font-size:.82rem;
  font-weight:700;
  color:var(--k-black2);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.5px
}

.doc-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:4px;
  align-items:stretch
}

.doc-layout .panel {
  max-height:calc(100svh - 170px);
  min-height:500px;
  overflow-y:auto;
  box-sizing:border-box;
  scroll-behavior:smooth
}

@media(max-width:700px) {
  .doc-layout {
    grid-template-columns:1fr
  }
.doc-layout .panel {
    max-height:none;
    min-height:0
  }

}

.doc-type-btn {
  display:block;
  width:100%;
  text-align:left;
  padding:6px 10px;
  margin-bottom:4px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:var(--surface);
  color:var(--text);
  font-size:.78rem;
  cursor:pointer;
  font-weight:600;
  transition:.15s
}

.doc-type-btn.active {
  background:var(--k-green);
  color:#fff;
  border-color:var(--k-green)
}

.doc-type-btn:hover:not(.active) {
  background:var(--k-green-light);
  border-color:var(--k-green)
}

.field-label {
  display:block;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--text2);
  margin-bottom:3px
}

.field-input,
.field-select {
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:#fff;
  color:var(--text);
  font-size:.78rem;
  font-family:inherit;
  outline:0;
  box-sizing:border-box
}

.field-input:focus,
.field-select:focus {
  border-color:var(--k-green);
  box-shadow:0 0 0 2px rgba(0, 102, 51, .12)
}

#bf-dialog-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, .55);
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:20px
}

#bf-dialog-overlay.open {
  display:flex
}

#bf-dialog-box {
  background:var(--surface, #fff);
  border-radius:12px;
  width:min(420px, 100%);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0, 0, 0, .3)
}

#bf-dialog-header {
  background:linear-gradient(135deg, #003a15, #052);
  padding:13px 18px;
  display:flex;
  align-items:center;
  gap:10px
}

#bf-dialog-header em {
  font-family:Georgia, 'Palatino Linotype', serif;
  font-style:italic;
  font-weight:700;
  color:#c8920a;
  font-size:.95rem
}

#bf-dialog-header span {
  font-size:.72rem;
  color:rgba(255, 255, 255, .5);
  margin-left:4px
}

#bf-dialog-body {
  padding:18px 20px;
  font-size:.84rem;
  color:var(--text, #111);
  line-height:1.6;
  white-space:pre-wrap
}

#bf-dialog-footer {
  padding:10px 18px 14px;
  display:flex;
  justify-content:flex-end;
  gap:8px
}

#bf-dialog-cancel {
  background:0 0;
  border:1.5px solid var(--border2, #ccc);
  color:var(--text2);
  padding:8px 20px;
  border-radius:7px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:600
}

#bf-dialog-ok {
  background:#063;
  color:#fff;
  border:none;
  padding:8px 24px;
  border-radius:7px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:700
}

#bf-dialog-ok:hover {
  background:#004d20
}

.rc-section {
  background:var(--k-green-light);
  border:1px solid rgba(0, 102, 51, .2);
  border-radius:var(--radius2);
  padding:12px 14px;
  margin-top:10px
}

.rc-title {
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--k-green-dark);
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.rc-row {
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:6px
}

.rc-row input {
  flex:1;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:.78rem;
  background:#fff;
  color:var(--text);
  font-family:inherit
}

.rc-row input:focus {
  outline:0;
  border-color:var(--k-green)
}

.rc-row .rc-amt {
  flex:0 0 110px;
  font-family:var(--mono)
}

.rc-row .rc-del {
  flex:0 0 26px;
  background:0 0;
  border:1px solid var(--k-red);
  color:var(--k-red);
  border-radius:4px;
  cursor:pointer;
  font-size:.8rem;
  padding:3px 6px;
  line-height:1
}

.rc-row .rc-del:hover {
  background:var(--k-red-light)
}

.rc-add-btn {
  font-size:.72rem;
  color:var(--k-green);
  background:0 0;
  border:1px dashed var(--k-green);
  border-radius:4px;
  padding:4px 10px;
  cursor:pointer;
  font-weight:600;
  width:100%
}

.rc-add-btn:hover {
  background:rgba(0, 102, 51, .08)
}

.rc-total {
  font-size:.72rem;
  color:var(--k-green-dark);
  font-weight:700;
  text-align:right;
  margin-top:4px;
  font-family:var(--mono)
}

.charges-badge {
  display:inline-block;
  background:var(--k-green-light);
  color:var(--k-green-dark);
  font-size:.62rem;
  font-weight:700;
  border-radius:10px;
  padding:1px 7px;
  margin-left:4px;
  border:1px solid rgba(0, 102, 51, .2)
}

.dep-badge {
  display:inline-block;
  background:#fef3c7;
  color:#92400e;
  font-size:.62rem;
  font-weight:700;
  border-radius:10px;
  padding:1px 7px;
  margin-left:3px;
  border:1px solid #fcd34d
}

.dep-field {
  background:#fffbeb;
  border:1.5px solid #fcd34d;
  border-radius:var(--radius2);
  padding:11px 14px;
  margin-top:10px
}

.dep-field label {
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#92400e;
  display:block;
  margin-bottom:5px
}

.dep-field input {
  width:100%;
  padding:7px 10px;
  border:1px solid #fde68a;
  border-radius:4px;
  font-size:.85rem;
  background:#fff;
  font-family:var(--mono);
  box-sizing:border-box;
  color:var(--text)
}

.dep-field input:focus {
  outline:0;
  border-color:#d97706;
  box-shadow:0 0 0 2px rgba(217, 119, 6, .1)
}

.pay-instr-field {
  background:#eef6ff;
  border:1.5px solid #93c5fd;
  border-radius:var(--radius2);
  padding:11px 14px;
  margin-top:10px
}

.pay-instr-field label {
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#1e40af;
  display:block;
  margin-bottom:5px
}

.pay-instr-field textarea {
  width:100%;
  padding:7px 10px;
  border:1px solid #bfdbfe;
  border-radius:4px;
  font-size:.8rem;
  background:#fff;
  font-family:var(--font);
  box-sizing:border-box;
  color:var(--text);
  resize:vertical;
  min-height:72px;
  line-height:1.5
}

.pay-instr-field textarea:focus {
  outline:0;
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59, 130, 246, .12)
}

.pay-instr-field .pi-hint {
  font-size:.63rem;
  color:#3b82f6;
  margin-top:4px
}

.doc-upload-field {
  background:#f5f3ff;
  border:1.5px solid #c4b5fd;
  border-radius:var(--radius2);
  padding:11px 14px;
  margin-top:10px
}

.doc-upload-field label.doc-upload-label {
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#5b21b6;
  display:block;
  margin-bottom:8px
}

.doc-drop-zone {
  border:2px dashed #c4b5fd;
  border-radius:7px;
  padding:16px 12px;
  cursor:pointer;
  transition:.18s;
  position:relative;
  background:#faf8ff
}

.doc-drop-zone.over,
.doc-drop-zone:hover {
  border-color:#7c3aed;
  background:#ede9fe
}

.doc-drop-zone input[type=file] {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%
}

.doc-drop-zone .dz-icon {
  font-size:1.4rem;
  margin-bottom:4px
}

.doc-drop-zone .dz-text {
  font-size:.72rem;
  color:#5b21b6;
  font-weight:600
}

.doc-drop-zone .dz-sub {
  font-size:.63rem;
  color:#7c3aed;
  margin-top:2px
}

.doc-file-list {
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:5px
}

.doc-file-item {
  display:flex;
  align-items:center;
  gap:8px;
  background:#ede9fe;
  border-radius:5px;
  padding:5px 9px;
  font-size:.71rem;
  color:#3730a3
}

.doc-file-item .dfi-icon {
  font-size:.95rem;
  flex-shrink:0
}

.doc-file-item .dfi-name {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600
}

.doc-file-item .dfi-size {
  color:#7c3aed;
  font-size:.63rem;
  white-space:nowrap
}

.doc-file-item .dfi-del {
  cursor:pointer;
  color:#7c3aed;
  font-size:.9rem;
  flex-shrink:0;
  opacity:.7;
  transition:.15s;
  background:0 0;
  border:none;
  padding:0
}

.doc-file-item .dfi-del:hover {
  opacity:1;
  color:#dc2626
}

.refund-calc {
  background:#f0fdf4;
  border:1px solid rgba(0, 102, 51, .2);
  border-radius:8px;
  padding:12px 14px;
  margin-top:10px
}

.refund-calc .rch {
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--k-green-dark);
  margin-bottom:8px
}

.refund-calc .rr {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
  font-size:.78rem;
  border-bottom:1px solid rgba(0, 102, 51, .08)
}

.refund-calc .rr:last-child {
  border-bottom:none
}

.refund-calc .rl {
  color:var(--text2)
}

.refund-calc .rv {
  font-family:var(--mono);
  font-weight:700
}

.refund-net {
  background:var(--k-green);
  color:#fff;
  border-radius:6px;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px
}

.refund-net .rnl {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:1px;
  opacity:.8
}

.refund-net .rnv {
  font-size:1.05rem;
  font-weight:700;
  font-family:var(--mono)
}

.inv-table {
  width:100%;
  border-collapse:collapse;
  font-size:.78rem;
  margin:8px 0
}

.inv-table th {
  background:var(--k-green);
  color:#fff;
  padding:6px 10px;
  text-align:left;
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.8px
}

.inv-table td {
  padding:6px 10px;
  border-bottom:1px solid var(--border2)
}

.inv-table .td-amt {
  text-align:right;
  font-family:var(--mono);
  font-weight:700
}

.inv-table .inv-sub {
  background:var(--k-green-light);
  font-weight:700;
  color:var(--k-green-dark)
}

.inv-table .inv-cf {
  background:#fef3c7;
  font-weight:700;
  color:#92400e
}

.inv-table .inv-total {
  background:var(--k-green);
  color:#fff;
  font-weight:700;
  font-size:.82rem
}

.inv-table .inv-paid {
  background:#f0fdf4;
  color:var(--k-green-dark)
}

.inv-table .inv-bal {
  background:#fef2f2;
  color:var(--k-red);
  font-weight:700;
  font-size:.82rem
}

.inv-table .inv-nil {
  background:#f0fdf4;
  color:var(--k-green-dark);
  font-weight:700
}

.bulk-panel {
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:14px;
  margin-top:16px
}

.bulk-hdr {
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--k-green-dark);
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.bulk-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid var(--border2);
  font-size:.76rem
}

.bulk-row:last-child {
  border-bottom:none
}

.bulk-row .br-unit {
  font-weight:700;
  color:var(--text);
  min-width:55px;
  font-family:var(--mono)
}

.bulk-row .bulk-row .br-amt {
  font-family:var(--mono);
  font-weight:700;
  color:var(--text);
  min-width:80px;
  text-align:right
}

.bulk-row .br-cf {
  font-size:.65rem;
  color:#d97706;
  font-weight:700
}

.bulk-btns {
  display:flex;
  gap:4px;
  flex-shrink:0
}

.bulk-btns button {
  font-size:.65rem;
  padding:3px 7px;
  border-radius:3px;
  border:1px solid;
  cursor:pointer;
  font-weight:600
}

.b-wa {
  background:#f0fdf4;
  border-color:#22c55e;
  color:#166534
}

.b-wa:hover {
  background:#dcfce7
}

.b-sms {
  background:#eff6ff;
  border-color:#3b82f6;
  color:#1d4ed8
}

.b-sms:hover {
  background:#dbeafe
}

.b-print {
  background:var(--k-green-light);
  border-color:var(--k-green);
  color:var(--k-green-dark)
}

.b-print:hover {
  background:rgba(0, 102, 51, .15)
}

.blast-btn {
  display:block;
  width:100%;
  padding:9px;
  margin-top:8px;
  border-radius:var(--radius2);
  border:none;
  font-weight:700;
  font-size:.78rem;
  cursor:pointer;
  transition:.15s
}

.blast-wa {
  background:#25d366;
  color:#fff
}

.blast-wa:hover {
  background:#1da854
}

.blast-sms {
  background:#3b82f6;
  color:#fff;
  margin-top:4px
}

.blast-sms:hover {
  background:#2563eb
}

.blast-print {
  background:var(--k-green);
  color:#fff;
  margin-top:4px
}

.blast-print:hover {
  background:var(--k-green-dark)
}

#csvImportModal .modal-content {
  max-width:780px;
  padding:0
}

.csv-modal-head {
  padding:20px 24px 16px;
  border-bottom:2px solid var(--k-green);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.csv-modal-head .modal-title {
  margin:0;
  padding:0;
  border:none
}

.csv-steps {
  display:flex;
  gap:0;
  padding:0 24px;
  background:var(--surface2);
  border-bottom:1px solid var(--border)
}

.csv-step {
  padding:10px 18px;
  font-size:.72rem;
  font-weight:600;
  color:var(--text2);
  border-bottom:2px solid transparent;
  transition:.18s;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.csv-step.active {
  color:var(--k-green);
  border-bottom-color:var(--k-green)
}

.csv-step.done {
  color:var(--text2);
  opacity:.7
}

.csv-step-num {
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--border2);
  font-size:.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-weight:700
}

.csv-step.active .csv-step-num {
  background:var(--k-green);
  color:#fff
}

.csv-step.done .csv-step-num {
  background:var(--text2);
  color:#fff
}

.csv-body {
  padding:20px 24px;
  min-height:260px
}

.csv-footer {
  padding:14px 24px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface2)
}

.csv-drop {
  border:2px dashed var(--border2);
  border-radius:10px;
  padding:40px 20px;
  cursor:pointer;
  transition:.2s;
  position:relative
}

.csv-drop.over,
.csv-drop:hover {
  border-color:var(--k-green);
  background:var(--k-green-light)
}

.csv-drop input[type=file] {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%
}

.csv-drop-icon {
  font-size:2.2rem;
  margin-bottom:10px
}

.csv-drop-title {
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:5px
}

.csv-drop-sub {
  font-size:.72rem;
  color:var(--text2)
}

.csv-map-grid {
  display:grid;
  grid-template-columns:1fr 32px 1fr;
  gap:6px 8px;
  align-items:center;
  margin-bottom:4px
}

.csv-map-label {
  font-size:.7rem;
  font-weight:600;
  color:var(--text);
  padding:6px 10px;
  background:var(--surface2);
  border-radius:5px;
  border:1px solid var(--border)
}

.csv-map-arrow {
  color:var(--k-green);
  font-size:.85rem;
  text-align:center
}

.csv-map-select {
  font-size:.7rem;
  padding:5px 8px;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:5px;
  color:var(--text);
  font-family:var(--font);
  width:100%
}

.csv-map-select.matched {
  border-color:var(--k-green);
  color:var(--k-green)
}

.csv-map-req {
  color:var(--k-red);
  font-size:.6rem;
  margin-left:3px
}

.csv-section-head {
  font-size:.65rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text2);
  margin:14px 0 8px;
  padding-bottom:4px;
  border-bottom:1px solid var(--border)
}

.csv-preview-wrap {
  overflow-x:auto;
  max-height:300px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:6px
}

.csv-preview-table {
  width:100%;
  border-collapse:collapse;
  font-size:.68rem
}

.csv-preview-table th {
  background:var(--k-green);
  color:#fff;
  padding:5px 8px;
  text-align:left;
  font-size:.62rem;
  position:sticky;
  top:0;
  white-space:nowrap
}

.csv-preview-table td {
  padding:4px 8px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis
}

.csv-preview-table tr:nth-child(2n) td {
  background:var(--surface2)
}

.csv-preview-table .ok {
  color:var(--k-green)
}

.csv-preview-table .err {
  color:var(--k-red);
  font-weight:700
}

.csv-preview-table .warn {
  color:#b8860b
}

.csv-stats {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px
}

.csv-stat {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 14px;
  font-size:.72rem;
  text-align:center;
  flex:1;
  min-width:80px
}

.csv-stat strong {
  display:block;
  font-size:1.1rem;
  font-weight:800;
  color:var(--k-green);
  font-family:var(--mono)
}

.csv-stat.err strong {
  color:var(--k-red)
}

.csv-stat.warn strong {
  color:#b8860b
}

.csv-result {
  text-align:center;
  padding:28px 0
}

.csv-result-icon {
  font-size:2.8rem;
  margin-bottom:12px
}

.csv-result-title {
  font-size:1.1rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px
}

.csv-result-sub {
  font-size:.78rem;
  color:var(--text2);
  line-height:1.7
}

#csvTemplateModal .modal-content {
  max-width:680px
}

.tpl-tabs {
  display:flex;
  gap:0;
  border-bottom:2px solid var(--border);
  margin-bottom:16px
}

.tpl-tab {
  padding:7px 18px;
  font-size:.74rem;
  font-weight:600;
  color:var(--text2);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:.15s
}

.tpl-tab.active {
  color:var(--k-green);
  border-bottom-color:var(--k-green)
}

.tpl-panel {
  display:none
}

.tpl-panel.active {
  display:block
}

.tpl-table-wrap {
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:12px
}

.tpl-table {
  width:100%;
  border-collapse:collapse;
  font-size:.68rem
}

.tpl-table th {
  background:var(--k-green);
  color:#fff;
  padding:5px 8px;
  text-align:left;
  white-space:nowrap;
  font-size:.62rem
}

.tpl-table td {
  padding:4px 8px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  font-family:var(--mono)
}

.tpl-table td.req {
  color:var(--k-green);
  font-weight:700
}

.tpl-table td.opt {
  color:var(--text2)
}

.tpl-table tr:nth-child(2n) td {
  background:var(--surface2)
}

.tpl-note {
  font-size:.68rem;
  color:var(--text2);
  line-height:1.7;
  background:var(--k-green-light);
  padding:9px 12px;
  border-radius:6px;
  border-left:3px solid var(--k-green);
  margin-bottom:12px
}

.tpl-csv-preview {
  font-family:var(--mono);
  font-size:.63rem;
  background:var(--surface2);
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--border);
  overflow-x:auto;
  white-space:pre;
  color:var(--text2);
  line-height:1.8;
  margin-bottom:12px
}

.tpl-csv-preview span.h {
  color:var(--k-green);
  font-weight:700
}

.pay-panel {
  border:1.5px solid var(--border2);
  border-radius:var(--radius2);
  margin-top:14px;
  overflow:hidden
}

.pay-panel-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  cursor:pointer;
  user-select:none;
  background:var(--surface2);
  transition:background .15s
}

.pay-panel-head:hover {
  background:var(--surface)
}

.pay-panel-head input[type=checkbox] {
  width:16px;
  height:16px;
  accent-color:var(--k-green);
  cursor:pointer;
  flex-shrink:0
}

.pay-panel-head .pp-icon {
  font-size:1.05rem;
  flex-shrink:0
}

.pay-panel-head .pp-title {
  font-size:.78rem;
  font-weight:700;
  color:var(--text);
  flex:1
}

.pay-panel-head .pp-badge {
  font-size:.6rem;
  background:var(--k-green-light);
  color:var(--k-green-dark);
  border-radius:10px;
  padding:1px 8px;
  font-weight:700;
  border:1px solid rgba(0, 102, 51, .2)
}

.pay-panel-head .pp-chevron {
  font-size:.55rem;
  color:var(--text2);
  transition:transform .22s
}

.pay-panel-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  padding:0 14px
}

.pay-panel-body.open {
  max-height:320px;
  padding:12px 14px 14px
}

.pay-panel.active .pay-panel-head {
  background:var(--k-green-light)
}

.pay-panel.active .pay-panel-head .pp-title {
  color:var(--k-green-dark)
}

.pay-panel.active .pp-chevron {
  transform:rotate(90deg)
}

.settings-divider {
  font-size:.65rem;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text2);
  margin:18px 0 10px;
  display:flex;
  align-items:center;
  gap:8px
}

.settings-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border)
}

@media(max-width:768px) {
  #floatPrintBtn {
    bottom:20px!important;
    right:14px!important;
    width:42px!important;
    height:42px!important;
    font-size:1rem!important
  }
[style*="minmax(220px"], [style*="minmax(240px"], [style*="minmax(300px"] {
    grid-template-columns:1fr!important
  }
#section-arrears-board .section-card, #section-collection-board .section-card, #section-portfolio .section-card {
    overflow-x:auto
  }
#section-collection-board .section-card>div[style*=grid] {
    grid-template-columns:1fr!important
  }
#section-arrears-board .section-card>div[style*=grid] {
    grid-template-columns:1fr!important
  }
#section-bulk-rent .section-card>div:first-child {
    flex-wrap:wrap;
    gap:8px
  }
#section-bulk-expense table, #section-bulk-rent table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    width:100%
  }
#section-bulk-expense .section-card>div[style*=flex] {
    flex-wrap:wrap;
    gap:8px
  }
#bexpTable, #bexpTable tbody, #bexpTable thead, #bexpTable tr {
    display:block;
    width:100%
  }
#bexpTable th {
    display:none
  }
#bexpTable td {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px!important;
    border-bottom:none!important;
    font-size:.8rem;
    white-space:normal
  }
#bexpTable td:last-child {
    border-bottom:1px solid var(--border)!important;
    padding-bottom:10px!important
  }
#bexpTable select, .bexp-cat, .bexp-prop {
    width:100%!important;
    max-width:100%
  }
#bexpTable input.bexp-amt, #bexpTable input.bexp-desc {
    width:100%!important
  }
#section-rent-escalation .section-card+.section-card, #section-rent-escalation>div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr!important;
    display:grid
  }
#section-budget-tracker table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap
  }
#section-rent-statements .section-card>div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns:1fr!important;
    display:grid
  }
#stmtOutput [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr!important;
    display:grid
  }
#stmtOutput table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap
  }
#section-comm-log .section-card>div[style*="grid-template-columns:1fr 1fr 1fr"], #section-comm-log .section-card>div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr!important;
    display:grid
  }
#section-comm-log table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap
  }
#section-rpt-comp-dash table, #section-rpt-dep-liability table, #section-rpt-expense-unit table, #section-rpt-lease-cal table, #section-rpt-maint-ratio table, #section-rpt-profitability table, #section-rpt-relet table, #section-rpt-tenure table {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    width:100%
  }
#section-rpt-comp-dash .dashboard-grid, #section-rpt-lease-cal .dashboard-grid, #section-rpt-profitability .dashboard-grid, #section-rpt-tenure .dashboard-grid {
    grid-template-columns:1fr 1fr!important
  }
#section-coming-soon .section-card>div[style*="minmax(270px"] {
    grid-template-columns:1fr!important;
    display:grid
  }
#print-brand-header>div:first-child {
    flex-direction:column;
    gap:8px;
    align-items:flex-start
  }
#print-brand-header>div:first-child>div:last-child {
    text-align:left
  }
.page-header {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px
  }
.page-header .btn-outline {
    font-size:.72rem;
    padding:5px 10px
  }

}

@media(max-width:480px) {
  #section-arrears-board .dashboard-grid, #section-collection-board .dashboard-grid, #section-portfolio .dashboard-grid {
    grid-template-columns:1fr!important
  }
#section-collection-board [style*="border-left:4px solid"] {
    min-width:0;
    width:100%;
    box-sizing:border-box
  }
#section-budget-tracker td:last-child, #section-budget-tracker th:last-child {
    display:none
  }
#stmtOutput>.section-card>div:last-child {
    flex-direction:column
  }
#stmtOutput>.section-card>div:last-child .btn-teal {
    width:100%;
    justify-content:center
  }
#escPreview {
    font-size:.76rem
  }
#floatPrintBtn {
    bottom:20px!important
  }

}

@keyframes slideUpFade {
  from {
    opacity:0;
    transform:translateX(-50%) translateY(24px)
  }
to {
    opacity:1;
    transform:translateX(-50%) translateY(0)
  }

}

@keyframes gridDrift {
  from {
    background-position:0 0
  }
to {
    background-position:52px 52px
  }

}

@keyframes lglow1 {
  0%, 100% {
    opacity:.7;
    transform:scale(1)
  }
50% {
    opacity:1;
    transform:scale(1.12)
  }

}

@keyframes lglow2 {
  0%, 100% {
    opacity:.5;
    transform:scale(1)
  }
50% {
    opacity:.9;
    transform:scale(1.08)
  }

}

@keyframes lFadeUp {
  from {
    opacity:0;
    transform:translateY(14px)
  }
to {
    opacity:1;
    transform:translateY(0)
  }

}

@media(max-width:768px) {
  #betaGate {
    flex-direction:column!important
  }
#betaGate>div:first-child {
    flex:none!important;
    min-height:200px!important;
    padding:28px 22px 20px!important
  }
#betaGate>div:first-child>div:nth-child(4) {
    display:none!important
  }
#betaGate>div:first-child>div:last-child {
    display:none!important
  }
#betaGate>div:last-child {
    width:100%!important;
    border-left:none!important;
    border-top:1px solid rgba(0, 163, 76, .15)!important
  }
#betaGate>div:last-child>div {
    padding:28px 22px 24px!important
  }

}

.table-wrapper {
  position:relative
}

.table-wrapper::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:32px;
  background:linear-gradient(to right, transparent, rgba(255, 255, 255, .85));
  pointer-events:none;
  border-radius:0 var(--radius, 8px) var(--radius, 8px) 0;
  opacity:0;
  transition:opacity .25s
}

.table-wrapper.can-scroll::after {
  opacity:1
}



/* === RESPONSIVE === */

@media (max-width:768px) {
  .btn, .qa-chip, button.btn-danger, button.btn-ghost, button.btn-primary, button.btn-secondary, button.btn-sm {
    min-height:44px;
    min-width:44px
  }
.qa-chip {
    padding:10px 14px!important;
    font-size:.78rem!important
  }

}

@media (max-width:400px) {
  #bfSetupSteps {
    flex-direction:column;
    gap:4px!important
  }
#bfSetupSteps span {
    width:100%;
    justify-content:flex-start!important
  }
#notif-dropdown {
    width:100vw!important;
    right:0!important;
    left:0!important;
    border-radius:0 0 12px 12px!important
  }
input[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea {
    font-size:16px!important;
    min-height:44px
  }
.app-section {
    padding:8px 6px!important
  }

}

#bfOfflineBanner {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, opacity .35s ease;
  background:#b45309;
  color:#fff;
  font-size:13px;
  font-family:var(--font-sans,  sans-serif);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  position:relative;
  z-index:9990;
  width:100%;
  box-sizing:border-box
}

#bf-suite-picker {
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  background:#0d1f0d;
  font-family:'Segoe UI', system-ui, sans-serif;
  transition:opacity .45s ease
}

#bf-suite-picker.hidden {
  opacity:0;
  pointer-events:none
}

.bfsp-left {
  width:30%;
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}

.bfsp-mid {
  width:35%;
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid rgba(255, 255, 255, .07);
  border-right:1px solid rgba(255, 255, 255, .07)
}

.bfsp-right {
  width:35%;
  padding:36px 32px;
  background:rgba(0, 0, 0, .38);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid rgba(255, 255, 255, .08)
}

.bfsp-deco {
  position:absolute;
  border-radius:50%;
  pointer-events:none
}

.bfsp-deco-1 {
  top:-80px;
  left:-80px;
  width:320px;
  height:320px;
  background:rgba(0, 163, 76, .06)
}

.bfsp-deco-2 {
  bottom:-60px;
  left:80px;
  width:240px;
  height:240px;
  background:rgba(0, 163, 76, .04)
}

.bfsp-brand-name {
  font-family:Georgia, 'Times New Roman', serif;
  font-size:36px;
  font-weight:700;
  font-style:italic;
  color:#d4a017;
  letter-spacing:-.5px;
  line-height:1
}

.bfsp-by {
  font-size:9px;
  letter-spacing:.18em;
  color:#5a8a5a;
  text-transform:uppercase;
  margin-top:5px
}

.bfsp-suite {
  font-size:8px;
  letter-spacing:.15em;
  color:#4a7a4a;
  text-transform:uppercase;
  margin-top:2px
}

.bfsp-divider {
  display:flex;
  gap:3px;
  margin:12px 0
}

.bfsp-bar {
  height:3px;
  border-radius:2px
}

.bfsp-loc-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap
}

.bfsp-loc {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:#5a9a6a;
  text-transform:uppercase
}

.bfsp-headline {
  font-size:26px;
  font-weight:900;
  line-height:1.25;
  color:#fff;
  margin-bottom:10px
}

.bfsp-headline span {
  color:#d4a017;
  font-style:italic;
  font-family:Georgia, serif
}

.bfsp-sub {
  font-size:12px;
  color:rgba(255, 255, 255, .52);
  line-height:1.75;
  margin-bottom:16px
}

.bfsp-pills {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:18px
}

.bfsp-pill {
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 10px;
  border-radius:100px;
  border:1px solid rgba(255, 255, 255, .12);
  font-size:10.5px;
  color:rgba(255, 255, 255, .7)
}

.bfsp-pill b {
  color:#fff;
  font-weight:700
}

.bfsp-testi {
  background:rgba(255, 255, 255, .05);
  border:1px solid rgba(255, 255, 255, .1);
  border-radius:10px;
  padding:14px;
  margin-bottom:16px
}

.bfsp-testi p {
  font-size:11.5px;
  color:rgba(255, 255, 255, .65);
  font-style:italic;
  line-height:1.7;
  margin-bottom:7px
}

.bfsp-testi footer {
  font-size:10px;
  color:rgba(255, 255, 255, .3)
}

.bfsp-pwrow {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:auto
}

.bfsp-pwlab {
  font-size:9px;
  letter-spacing:.12em;
  color:rgba(255, 255, 255, .22);
  text-transform:uppercase
}

.bfsp-badge {
  padding:3px 9px;
  border-radius:4px;
  font-size:9.5px;
  font-weight:700
}

.bfsp-mid-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255, 255, 255, .3);
  text-transform:uppercase;
  margin-bottom:6px
}

.bfsp-mid-text {
  font-size:14px;
  font-weight:600;
  color:rgba(255, 255, 255, .8);
  line-height:1.5;
  text-align:center;
  margin-bottom:10px
}

@keyframes bfsp-drop {
  0%, 100% {
    opacity:1;
    transform:translateY(0)
  }
50% {
    opacity:.3;
    transform:translateY(6px)
  }

}

.bfsp-start-here {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-bottom:16px
}

.bfsp-start-txt {
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:#00a34c;
  text-transform:uppercase
}

.bfsp-start-arrow {
  animation:bfsp-drop 1.1s ease-in-out infinite
}

#bfsp-remembered {
  display:none;
  margin-bottom:12px;
  padding:5px 12px;
  background:rgba(0, 163, 76, .15);
  border:1px solid rgba(0, 163, 76, .28);
  border-radius:100px;
  font-size:10px;
  color:#4ade80;
  text-align:center
}

.bfsp-mod-card {
  border-radius:11px;
  border:1.5px solid rgba(255, 255, 255, .1);
  background:rgba(255, 255, 255, .04);
  cursor:pointer;
  transition:border-color .15s, background .15s, transform .12s;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px
}

.bfsp-mod-card:last-child {
  margin-bottom:0
}

.bfsp-mod-card:hover {
  background:rgba(255, 255, 255, .09);
  transform:translateX(3px);
  border-color:rgba(255, 255, 255, .22)
}

.bfsp-mod-card.bfsp-active {
  border-color:var(--bfmc);
  background:rgba(255, 255, 255, .07)
}

.bfsp-mod-ico {
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:3px
}

.bfsp-mod-name {
  font-size:14px;
  font-weight:700;
  color:#fff;
  line-height:1.2
}

.bfsp-mod-sub {
  font-size:10px;
  color:rgba(255, 255, 255, .4);
  margin-top:2px
}

.bfsp-mod-chk {
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid rgba(255, 255, 255, .2);
  margin-left:auto;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s
}

.bfsp-hint {
  text-align:center;
  font-size:10px;
  color:rgba(255, 255, 255, .22);
  line-height:1.65;
  padding:0 6px;
  margin-top:14px
}

.bfsp-sec-label {
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.2em;
  color:rgba(255, 255, 255, .28);
  text-transform:uppercase;
  margin-bottom:12px
}

.bfsp-welcome {
  font-size:28px;
  font-weight:900;
  color:#fff;
  margin-bottom:4px
}

#bfsp-rp-sub {
  font-size:13px;
  color:rgba(255, 255, 255, .4);
  margin-bottom:26px;
  transition:color .2s;
  min-height:20px
}

.bfsp-field-lbl {
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.15em;
  color:rgba(255, 255, 255, .3);
  text-transform:uppercase;
  margin-bottom:8px
}

.bfsp-inp-wrap {
  position:relative;
  margin-bottom:16px
}

.bfsp-inp-icon {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255, 255, 255, .28);
  pointer-events:none;
  display:flex
}

.bfsp-inp {
  width:100%;
  padding:12px 14px 12px 42px;
  background:rgba(255, 255, 255, .07);
  border:1.5px solid rgba(255, 255, 255, .1);
  border-radius:10px;
  font-size:13.5px;
  color:#fff;
  outline:0;
  transition:border-color .15s;
  font-family:inherit
}

.bfsp-inp::placeholder {
  color:rgba(255, 255, 255, .2)
}

.bfsp-inp:focus {
  border-color:var(--bfac, #00a34c)
}

.bfsp-pw-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px
}

#bfsp-forgot {
  font-size:12px;
  color:#00a34c;
  cursor:pointer;
  font-weight:600
}

.bfsp-rem-row {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px
}

#bfsp-chkbox {
  width:19px;
  height:19px;
  border-radius:5px;
  background:rgba(0, 163, 76, .25);
  border:1.5px solid #00a34c;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .15s
}

.bfsp-sign-btn {
  width:100%;
  padding:13px;
  border:none;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  letter-spacing:.03em;
  transition:opacity .15s, background .25s;
  font-family:inherit;
  background:#00a34c
}

.bfsp-sign-btn:hover {
  opacity:.88
}

.bfsp-sign-btn:disabled {
  opacity:.5;
  cursor:default
}

#bfsp-mod-warn {
  display:none;
  margin-top:10px;
  padding:9px 13px;
  background:rgba(239, 159, 39, .1);
  border:1px solid rgba(239, 159, 39, .3);
  border-radius:8px;
  font-size:11.5px;
  color:#fbbf24;
  text-align:center
}

.bfsp-or-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0
}

.bfsp-or-line {
  flex:1;
  height:1px;
  background:rgba(255, 255, 255, .1)
}

.bfsp-or-txt {
  font-size:11px;
  color:rgba(255, 255, 255, .28)
}

.bfsp-invite {
  width:100%;
  padding:12px;
  background:rgba(255, 255, 255, .06);
  border:1.5px solid rgba(255, 255, 255, .1);
  border-radius:10px;
  font-size:13px;
  color:rgba(255, 255, 255, .62);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s;
  font-family:inherit
}

.bfsp-invite:hover {
  background:rgba(255, 255, 255, .11)
}

.bfsp-req-row {
  text-align:center;
  margin-top:10px;
  font-size:12px;
  color:rgba(255, 255, 255, .3)
}

.bfsp-req-row a {
  color:#00a34c;
  cursor:pointer;
  font-weight:600;
  cursor:pointer
}

.bfsp-sec-row {
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:14px
}

.bfsp-sec-item {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:rgba(255, 255, 255, .3)
}

/* §AL GLASS — canonical recipe (R13.28). Browse/list overlays ONLY.
   NEVER add <input>/<select>/<textarea> inside .tn-glass (§V CI lock enforces).
   Opaque modals (data commit / destructive confirm) use a solid scrim, NOT this class.
   Glass is colorless — ivory base only, no brand tint, no scrim behind it.
   First surface: the top-bar profile dropdown (#bfProfileMenu). */
.tn-glass {
  background: rgba(245, 241, 232, 0.22);            /* ivory @ 22% */
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);      /* white hairline */
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,         /* top inner highlight */
    0 12px 36px rgba(10, 22, 40, 0.22);              /* soft navy drop */
}
/* Legibility on glass — navy text (the profile dropdown was built for a dark opaque bg). */
.tn-glass .bf-pm-header { border-bottom: 1px solid rgba(10, 22, 40, 0.10); }
.tn-glass .bf-pm-name { color: #0A1628; }
.tn-glass .bf-pm-role { color: rgba(10, 22, 40, 0.65); }
.tn-glass .bf-pm-item { color: #0A1628; font-weight: 500; }
.tn-glass .bf-pm-item:hover, .tn-glass .bf-pm-item:focus-visible {
  background: rgba(255, 255, 255, 0.40); border-radius: 8px; color: #0A1628; outline: none;
}
.tn-glass .bf-pm-divider { background: rgba(10, 22, 40, 0.10); }
.tn-glass .bf-pm-item-danger { color: #b91c1c; }
.tn-glass .bf-pm-item-danger:hover { background: rgba(185, 28, 28, 0.10); color: #7f1d1d; }
/* Fallback — mid-range Android / browsers without backdrop-filter: near-opaque ivory,
   fully legible with zero blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tn-glass { background: rgba(245, 241, 232, 0.96); }
}

.bf-mod-hidden {
  display:none!important
}

/* ============================================================================
   DO NOT "FIX" THE NEWLINE-IN-STRING SELECTORS BELOW. THIS IS LOAD-BEARING.
   ----------------------------------------------------------------------------
   The `[id^=section-hr-] [style*="grid-template-columns:repeat(N,<newline>1fr)"]`
   selectors below contain a literal newline inside the attribute-value string.
   Chromium treats that as a bad-string token and its error recovery DROPS EVERY
   RULE FROM HERE TO EOF (~485 rules). Those dropped rules are superseded
   pre-TN-unification styles that STILL MATCH live DOM. Repairing the selectors
   (so the file parses fully) revives them and regresses ALL 113 RN sections
   7-20% on desktop (verified 2026-06-26, max 20.36% @ 1280; full pixel-diff in
   audits/CSS-RULE-DROP-ANALYSIS-2026-06-26.md). The parse-break is the only
   thing keeping those rules dormant — the app's correct desktop appearance
   depends on it. Removing it safely is a dedicated multi-PR restyle-
   reconciliation round, NOT a one-line selector fix. Leave it alone.
   ============================================================================ */
[id^=section-hr-] [style*="grid-template-columns:repeat(3,
 1fr)"],
[id^=section-hr-] [style*="grid-template-columns:repeat(3,
1fr)"] {
  grid-template-columns:repeat(3, 1fr)!important;
  display:grid!important
}

[id^=section-hr-] [style*="grid-template-columns:repeat(4,
1fr)"] {
  grid-template-columns:repeat(4, 1fr)!important;
  display:grid!important
}

[id^=section-hr-] [style*="grid-template-columns:repeat(5,
1fr)"],
[id^=section-hr-] [style*="grid-template-columns:repeat(6,
1fr)"],
[id^=section-hr-] [style*="grid-template-columns:repeat(7,
1fr)"] {
  grid-template-columns:repeat(3, 1fr)!important;
  display:grid!important
}

.kpi-grid-7 {
  grid-template-columns:repeat(4, 1fr)!important
}

.dash-row-2 {
  grid-template-columns:1fr!important
}

[id^=section-hr-] [style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns:1fr 1fr!important;
  display:grid!important
}

[id^=section-hr-] [style*="grid-template-columns:200px"],
[id^=section-hr-] [style*="grid-template-columns:220px"],
[id^=section-hr-] [style*="grid-template-columns:240px"],
[id^=section-hr-] [style*="grid-template-columns:300px"] {
  grid-template-columns:1fr!important;
  display:grid!important
}

[id^=section-hr-] table {
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  width:100%
}

[id^=section-hr-] .table-wrapper {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}

[id^=section-hr-].visible {
  padding:10px 8px 72px!important
}

#section-hr-team-chat .visible>div,
#section-hr-team-chat>div {
  flex-direction:column!important
}

#section-hr-team-chat [style*="width:190px"] {
  width:100%!important;
  flex-direction:row!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border-right:none!important;
  border-bottom:1px solid var(--border)!important;
  flex-shrink:0!important;
  min-height:0!important
}

#section-hr-team-chat [style*="width:190px"]>div:first-child {
  display:none!important
}

#section-hr-team-chat [style*="width:190px"]>div:last-child {
  display:flex!important;
  flex-direction:row!important;
  padding:6px 8px!important;
  gap:4px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  white-space:nowrap!important
}

#section-hr-team-chat [style*="width:190px"]>div:last-child::-webkit-scrollbar {
  display:none
}

#section-hr-team-chat [data-action=hr-chat-room] {
  white-space:nowrap!important;
  border-radius:20px!important;
  flex-shrink:0!important;
  padding:6px 14px!important;
  font-size:.75rem!important
}

#section-hr-pos [style*=grid-template-columns] {
  grid-template-columns:1fr 1fr!important;
  display:grid!important
}

.kpi-grid-7 {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
  margin-bottom:14px
}

@media(max-width:900px) {
  .kpi-grid-7 {
    grid-template-columns:repeat(4, 1fr)
  }

}

@media(max-width:540px) {
  .kpi-grid-7 {
    grid-template-columns:repeat(2, 1fr)
  }

}

.dash-row-2 {
  display:grid;
  grid-template-columns:220px 1fr 260px;
  gap:12px;
  margin-bottom:14px
}

@media(max-width:900px) {
  .dash-row-2 {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:600px) {
  .dash-row-2 {
    grid-template-columns:1fr
  }

}

.hr-nav-ul {
  list-style:none;
  margin:0;
  padding:0 6px 4px;
  display:block
}

/* ── Premium sidebar nav — hospitality-grade design ─────── */


/* Group wrapper */
.nav-group {
  margin-bottom:0
}

/* Group section divider line above headers */
.nav-group + .nav-group > .hr-nav-hdr,
.nav-group + .nav-group > .nav-group-header {
  border-top:1px solid rgba(255,255,255,.04)
}

/* Group headers — gold-tinted uppercase labels */
.hr-nav-hdr,
.nav-group-header {
  display:block;
  padding:16px 18px 5px 18px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(200, 146, 10, .5);
  margin-top:0;
  cursor:pointer;
  user-select:none;
  transition:color .15s
}

.hr-nav-hdr:hover,
.nav-group-header:hover {
  color:rgba(200, 146, 10, .8)
}

/* Chevron — minimal, rotates on open */
.nav-chevron {
  display:inline-block;
  margin-left:5px;
  font-size:7px;
  vertical-align:middle;
  opacity:.45;
  transform:rotate(-90deg);
  transition:transform .22s ease, opacity .18s
}

/* Group items collapse container */
.nav-group-items {
  overflow:hidden;
  transition:max-height .28s ease
}

/* Item list */
.hr-nav-ul {
  list-style:none;
  margin:0;
  padding:1px 0 4px;
  display:block
}

/* Nav item links — clean, restrained */
.nav-item-link,
.hr-nav-ul li a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 18px 6px 22px;
  font-size:12px;
  font-weight:400;
  color:rgba(255, 255, 255, .5);
  text-decoration:none;
  border-left:2px solid transparent;
  border-radius:0 3px 3px 0;
  letter-spacing:.01em;
  line-height:1.35;
  transition:color .15s, background .15s, border-color .15s
}

.nav-item-link:hover,
.hr-nav-ul li a:hover {
  color:rgba(255, 255, 255, .82);
  background:rgba(255, 255, 255, .04)
}

/* Active item — warm gold treatment */
.nav-item-link.active,
.hr-nav-ul li a.active {
  color:#f0d585;
  background:linear-gradient(90deg, rgba(200,146,10,.13) 0%, rgba(200,146,10,.04) 100%);
  border-left:2px solid #c8920a;
  font-weight:500
}

/* Icon column — subtle, consistent */
.nav-item-icon {
  font-size:12px;
  width:15px;
  flex-shrink:0;
  text-align:center;
  opacity:.82;
  line-height:1;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif
}

.nav-item-link.active .nav-item-icon,
.hr-nav-ul li a.active .nav-item-icon {
  opacity:1
}

body.bf-printing>:not(#bf-print-area) {
  display:none!important
}

body.bf-printing #bf-print-area {
  display:block!important
}

@media print {
  body>:not(#bf-print-area) {
    display:none!important
  }
#bf-print-area {
    display:block!important;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10.5pt;
    color:#111;
    line-height:1.5;
    padding:0;
    margin:0
  }
.bf-ph-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:6px
  }
.bf-ph-name {
    font-size:17pt;
    font-weight:900;
    color:#063;
    font-family:Georgia, serif;
    letter-spacing:-.3px
  }
.bf-ph-sub {
    font-size:7.5pt;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#888;
    margin-top:1px
  }
.bf-ph-meta {
    font-size:8pt;
    color:#555;
    margin-top:3px;
    line-height:1.6
  }
.bf-ph-doc {
    font-size:12pt;
    font-weight:700;
    color:#111;
    margin-bottom:2px
  }
.bf-ph-date {
    font-size:8.5pt;
    color:#666
  }
.bf-ph-stripe {
    height:4px;
    background:linear-gradient(90deg, #000 33.3%, #c22 33.3% 66.6%, #063 66.6%);
    margin:8px 0 18px
  }
.bf-ph-stripe-foot {
    height:3px;
    background:linear-gradient(90deg, #000 33.3%, #c22 33.3% 66.6%, #063 66.6%);
    margin-top:6px
  }
.bf-ph-body h2 {
    font-size:11.5pt;
    font-weight:700;
    margin:14px 0 7px;
    color:#063;
    border-bottom:1px solid #e0ebe0;
    padding-bottom:3px
  }
.bf-ph-body h3 {
    font-size:10pt;
    font-weight:700;
    margin:10px 0 5px
  }
.bf-ph-body table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:12px;
    font-size:9pt
  }
.bf-ph-body th {
    background:#f3f9f3;
    color:#004d20;
    font-weight:700;
    padding:6px 9px;
    text-align:left;
    border-bottom:2px solid #063;
    font-size:8.5pt
  }
.bf-ph-body td {
    padding:5px 9px;
    border-bottom:1px solid #e0ebe0
  }
.bf-ph-body tr:nth-child(2n) td {
    background:#fafffe
  }
.bf-ph-body p {
    margin:5px 0
  }
.bf-ph-body .kpi-card {
    border:1px solid #e0ebe0;
    border-top:3px solid #063;
    padding:8px 12px
  }
.bf-ph-footer {
    margin-top:24px;
    padding-top:10px;
    border-top:1px solid #e0ebe0;
    display:flex;
    justify-content:center;
    font-size:8pt;
    color:#999
  }
.bf-ph-body .btn-primary, .bf-ph-body .btn-secondary, .bf-ph-body .no-print, .bf-ph-body .page-header .actions, .bf-ph-body button {
    display:none!important
  }
@page {
    margin:16mm 14mm
  }

}

[contenteditable=true]:focus {
  box-shadow:0 0 0 2px rgba(0, 102, 51, .3)!important
}

[contenteditable=true] {
  cursor:text
}

/* ================================================================
 * IPRMS-GRADE UI — Category 3
 * Supersedes BomaFlow defaults where they conflict.
 * ================================================================ */

/* ── ITEM 1: Typography ─────────────────────────────────────────── */
h1,h2,h3,.page-title,.section-title,.module-title {
  font-family:'Plus Jakarta Sans',sans-serif;
}
body,.nav-label,label,p,span,td,th {
  font-family:'Inter',sans-serif;
}
.amount,.kpi-value,.kpi-val,
[class*="amount"],[class*="revenue"],
.money,td.num {
  font-family:'JetBrains Mono',monospace;
}

/* ── ITEM 2: Card System ────────────────────────────────────────── */
.card,.module-card,.stat-card,.kpi-card {
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.08),
             0 4px 16px rgba(0,0,0,.04);
  transition:transform .15s,box-shadow .15s;
}
.card:hover,.module-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}

/* ── ITEM 3: KPI Cards ──────────────────────────────────────────── */
.kpi-card {
  background:#fff;
  border-radius:12px;
  padding:14px 16px;
  border-left:3px solid #006600;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.kpi-card.red   { border-left-color:#dc2626; }
.kpi-card.amber { border-left-color:#d97706; }
.kpi-card.blue  { border-left-color:#2563eb; }
.kpi-card .kpi-label {
  font-size:10px;font-weight:600;
  color:#64748b;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:6px;
  font-family:'Inter',sans-serif;
}
.kpi-card .kpi-value {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px;font-weight:800;color:#006600;
}
.kpi-card.red   .kpi-value { color:#dc2626; }
.kpi-card.amber .kpi-value { color:#d97706; }
.kpi-card.blue  .kpi-value { color:#2563eb; }
.kpi-card .kpi-trend {
  font-size:11px;margin-top:4px;
  font-family:'Inter',sans-serif;
}
.kpi-card .kpi-trend.up   { color:#16a34a; }
.kpi-card .kpi-trend.down { color:#dc2626; }

/* ── ITEM 4: Three-Tier Table Layout ───────────────────────────── */
.section-tier1 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:16px;
}
.section-tier2 {
  background:#fff;border-radius:12px;
  padding:16px;margin-bottom:16px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.breakdown-row {
  display:flex;align-items:center;
  gap:12px;padding:8px 0;
  border-bottom:1px solid #f8fafc;
  cursor:pointer;
  transition:background .1s;
}
.breakdown-row:hover {
  background:#f8fafc;
  border-radius:6px;
  padding-left:8px;
}
.section-tier3 {
  background:#fff;border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

/* ── ITEM 5: YM Filters ─────────────────────────────────────────── */
.table-filter-bar {
  display:flex;align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:#f8fafc;
  border-bottom:1px solid #f0f0f0;
  border-top:1px solid #f0f0f0;
}
.ym-select {
  padding:5px 10px;border-radius:6px;
  border:1px solid #e2e8f0;
  font-size:12px;font-family:'Inter',sans-serif;
  background:#fff;cursor:pointer;
  margin-right:6px;color:#374151;
  outline:none;
}
.ym-select:focus { border-color:#006600; }
.entries-counter {
  font-size:11px;font-weight:500;
  color:#94a3b8;
  font-family:'Inter',sans-serif;
  white-space:nowrap;
}

/* ── ITEM 6: Table Styles ───────────────────────────────────────── */
.data-table {
  width:100%;border-collapse:collapse;
}
.data-table thead tr {
  background:var(--surface2);
}
.data-table thead th {
  padding:11px 14px;text-align:left;
  color:var(--text2);font-size:11px;
  font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
  border-bottom:1px solid var(--border);
}
.data-table tbody tr {
  border-bottom:1px solid #f0f0f0;
  min-height:52px;
  transition:background .1s;
}
.data-table tbody tr:nth-child(odd) {
  background:#fafbfc;
}
.data-table tbody tr:hover {
  background:#f0fdf4;cursor:pointer;
}
.data-table tbody tr:last-child {
  border-bottom:none;
}
.data-table td {
  padding:11px 14px;
  font-size:13px;color:#374151;
  font-family:'Inter',sans-serif;
}
.data-table td.amount,
.data-table td.num {
  text-align:right;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;color:#15803d;
}
.data-table td.amount.negative {
  color:#dc2626;
}

/* ── ITEM 7: Status Badges ──────────────────────────────────────── */
.badge {
  display:inline-block;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;
  font-family:'Inter',sans-serif;
}
.badge-paid {
  background:#dcfce7;color:#166534;
  border:1px solid #86efac;
}
.badge-pending {
  background:#fef3c7;color:#92400e;
  border:1px solid #fcd34d;
}
.badge-overdue {
  background:#fee2e2;color:#991b1b;
  border:1px solid #fca5a5;
}
.badge-active {
  background:#dbeafe;color:#1e40af;
  border:1px solid #93c5fd;
}
.badge-inactive {
  background:#f3f4f6;color:#6b7280;
  border:1px solid #d1d5db;
}
.badge-open {
  background:#fef3c7;color:#92400e;
  border:1px solid #fcd34d;
}
.badge-done {
  background:#dcfce7;color:#166534;
  border:1px solid #86efac;
}

/* ── ITEM 8: Button System ──────────────────────────────────────── */
.btn {
  font-family:'Inter',sans-serif;
  font-weight:600;border-radius:8px;
  padding:8px 18px;font-size:13px;
  cursor:pointer;transition:all .15s;
  border:none;
}
.btn:active { transform:scale(0.97); }
.btn-primary {
  background:#006600;color:#fff;
}
.btn-primary:hover { background:#004d00; }
.btn-secondary {
  background:#fff;color:#006600;
  border:1.5px solid #006600;
}
.btn-secondary:hover { background:#f0fdf4; }
.btn-danger {
  background:#fff;color:#dc2626;
  border:1.5px solid #dc2626;
}
.btn-danger:hover { background:#fff5f5; }
.btn-sm {
  padding:5px 12px;font-size:11px;
}

/* ── ITEM 9: Page Background & Layout ──────────────────────────── */
.app-content,.main-content,
.section-content,body {
  background:#f8fafc;
}
.section-wrapper {
  padding:20px 24px;
  max-width:1400px;
}
.section-header {
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.section-header h2 {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;font-weight:700;
  color:#111;
}

/* ── Toast Notifications ────────────────────────────────────────── */
.toast-container {
  position:fixed;top:16px;right:16px;
  z-index:99999;display:flex;
  flex-direction:column;gap:8px;
}
.toast {
  background:#fff;border-radius:10px;
  padding:12px 16px;min-width:280px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  border-left:4px solid #006600;
  font-family:'Inter',sans-serif;
  font-size:13px;color:#111;
  animation:slideIn .3s ease;
}
.toast.error   { border-left-color:#dc2626; }
.toast.warning { border-left-color:#d97706; }
.toast.info    { border-left-color:#2563eb; }
.toast.posted  { background:#f0fdf4;border-left-color:#4ade80;color:#166534; }
.toast.saved   { background:#f0fdfa;border-left-color:#2dd4bf;color:#134e4a; }
@keyframes slideIn {
  from { transform:translateX(120%); opacity:0; }
  to   { transform:translateX(0);   opacity:1; }
}

/* ── Admin Panel (7 tabs) ───────────────────────────────────────── */
.admin-tabs {
  display:flex;align-items:center;gap:4px;padding:16px 20px 0;
  border-bottom:2px solid #e2e8f0;background:#fff;
  flex-wrap:wrap;flex-shrink:0;
}
.admin-tab {
  padding:9px 16px;border-radius:8px 8px 0 0;border:1.5px solid #bbf7d0;
  font-size:12px;font-weight:600;font-family:'Inter',sans-serif;
  color:#166534;cursor:pointer;background:#f0fdf4;
  transition:all .15s;border-bottom:none;position:relative;top:2px;
}
.admin-tab:hover { color:#14532d;background:#dcfce7;border-color:#86efac; }
.admin-tab.active { background:#006600;color:#fff;border-color:#006600;border-bottom:none; }
.admin-panel-body { padding:20px;flex:1;overflow-y:auto;min-height:0; }

/* Plan cards */
.plan-card {
  border-radius:14px;padding:24px;border:2px solid #e2e8f0;
  transition:all .2s;position:relative;overflow:hidden;
}
.plan-card.current { border-color:#006600;box-shadow:0 0 0 4px rgba(0,102,0,.08); }
.plan-card.popular { border-color:#F5A623; }
.plan-card.popular::before {
  content:'Most Popular';position:absolute;top:12px;right:-28px;
  background:#F5A623;color:#fff;font-size:10px;font-weight:700;
  padding:4px 36px;transform:rotate(45deg);font-family:'Inter',sans-serif;
}
.plan-price { font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:800;color:#006600; }
.plan-period { font-size:12px;color:#94a3b8;font-family:'Inter',sans-serif; }
.plan-feature {
  display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;
  padding:5px 0;font-family:'Inter',sans-serif;border-bottom:1px solid #f8fafc;
}
.plan-feature::before { content:'✓';color:#006600;font-weight:700;flex-shrink:0; }

/* Dustbin items */
.dustbin-item {
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid #f8fafc;transition:background .1s;
}
.dustbin-item:hover { background:#fafbfc; }
.days-left-badge { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;font-family:'Inter',sans-serif; }
.days-left-badge.safe { background:#dcfce7;color:#166534; }
.days-left-badge.warn  { background:#fef3c7;color:#92400e; }
.days-left-badge.danger{ background:#fee2e2;color:#991b1b; }

/* File upload zone */
.bf-upload-zone {
  border:2px dashed #e2e8f0;border-radius:12px;padding:32px;text-align:center;
  cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;
}
.bf-upload-zone:hover,.bf-upload-zone.drag-over { border-color:#006600;background:#f0fdf4; }
.bf-upload-zone-icon { font-size:36px;margin-bottom:10px; }
.bf-upload-zone-text { font-size:14px;font-weight:600;color:#374151;margin-bottom:4px; }
.bf-upload-zone-sub  { font-size:12px;color:#94a3b8; }
.bf-file-card {
  background:#fff;border-radius:10px;padding:14px;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all .15s;
}
.bf-file-card:hover { transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1); }
.bf-file-icon { font-size:28px;margin-bottom:8px; }
.bf-file-name { font-size:12px;font-weight:600;color:#374151;word-break:break-all;font-family:'Inter',sans-serif; }
.bf-file-meta { font-size:10px;color:#94a3b8;margin-top:4px;font-family:'Inter',sans-serif; }

/* Access matrix */
.access-matrix { border-collapse:collapse;width:100%;font-size:11px; }
.access-matrix th {
  background:#f8fafc;padding:8px;text-align:center;
  font-family:'Inter',sans-serif;font-weight:600;color:#64748b;
  font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  position:sticky;top:0;z-index:1;
}
.access-matrix td { padding:8px;text-align:center;border-bottom:1px solid #f8fafc; }
.access-matrix tr:hover td { background:#f0fdf4; }
.access-check { color:#16a34a;font-size:14px; }
.access-cross { color:#dc2626;font-size:14px; }
.access-part  { color:#d97706;font-size:14px; }

/* Audit diff */
.audit-diff { font-family:'JetBrains Mono',monospace;font-size:11px;padding:10px 14px;background:#f8fafc;border-radius:6px;margin-top:6px; }
.audit-diff-old { color:#dc2626;text-decoration:line-through; }
.audit-diff-new { color:#16a34a; }

/* ── Column Drag Reorder (Feature 20) ──────────────────────────── */
.data-table th.col-draggable { cursor:grab;user-select:none;position:relative; }
.data-table th.col-draggable:active { cursor:grabbing; }
.data-table th.col-drag-over { background:#004d00 !important;border-right:2px solid #F5A623; }
.data-table th.col-dragging { opacity:.5; }
.col-drag-hint {
  position:absolute;top:2px;right:4px;font-size:9px;
  color:rgba(255,255,255,.3);pointer-events:none;
}

/* ── Font Size Preference (Feature 19) ─────────────────────────── */
body.text-sm { font-size:12px; }
body.text-md { font-size:14px; }
body.text-lg { font-size:16px; }
body.text-xl { font-size:18px; }
body.text-sm .nav-item,body.text-sm .nav-group-header,
body.text-sm td,body.text-sm .kpi-card .kpi-label { font-size:.85em; }
body.text-lg .nav-item,body.text-lg .nav-group-header,
body.text-lg td,body.text-lg .kpi-card .kpi-label { font-size:1.1em; }
body.text-xl .nav-item,body.text-xl .nav-group-header,
body.text-xl td,body.text-xl .kpi-card .kpi-label { font-size:1.2em; }
.bf-font-toggle {
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.06);border-radius:8px;padding:3px;flex-shrink:0;
}
.bf-font-btn {
  padding:3px 7px;border-radius:6px;border:none;background:transparent;
  color:rgba(255,255,255,.45);cursor:pointer;font-family:'Inter',sans-serif;
  font-weight:600;transition:all .15s;line-height:1;
}
.bf-font-btn.active { background:rgba(255,255,255,.12);color:#fff; }
.bf-font-btn:hover:not(.active) { color:rgba(255,255,255,.7); }

/* ── Last Sync Indicator (Feature 18) ──────────────────────────── */
#bf-sync-indicator {
  font-size:10px;color:rgba(255,255,255,.25);
  font-family:'Inter',sans-serif;white-space:nowrap;
  flex-shrink:0;transition:color .3s;
}
#bf-sync-indicator.just-saved { color:#4ade80; }
#bf-sync-indicator.warning { color:#fbbf24; }

/* ── Network Retry Banner (Feature 17) ─────────────────────────── */
.bf-retry-banner {
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;border-radius:10px;
  padding:10px 20px;font-size:12px;font-family:'Inter',sans-serif;
  display:flex;align-items:center;gap:10px;z-index:9990;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:bfSlideUp .3s ease;
  border-top:3px solid #F5A623;white-space:nowrap;
}
@keyframes bfSlideUp {
  from { transform:translateX(-50%) translateY(20px);opacity:0; }
  to   { transform:translateX(-50%) translateY(0);opacity:1; }
}
.bf-retry-spinner {
  width:14px;height:14px;border:2px solid rgba(255,255,255,.2);
  border-top-color:#F5A623;border-radius:50%;
  animation:spin .8s linear infinite;flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }
.bf-retry-cancel {
  background:none;border:none;color:rgba(255,255,255,.4);
  cursor:pointer;font-size:14px;padding:0;line-height:1;
}
.bf-retry-cancel:hover { color:#fff; }

/* ── Drag to Reorder (Feature 15) ──────────────────────────────── */
.bf-draggable { cursor:grab;user-select:none; }
.bf-draggable:active { cursor:grabbing; }
.bf-draggable[draggable="true"] { transition:opacity .15s,box-shadow .15s; }
.bf-drag-handle {
  opacity:0;color:#94a3b8;font-size:12px;cursor:grab;
  padding:0 4px;transition:opacity .15s;flex-shrink:0;
}
.bf-draggable:hover .bf-drag-handle { opacity:1; }
.bf-drag-over { border-top:2px solid #006600 !important;background:rgba(0,102,0,.04); }
.bf-dragging { opacity:.4;box-shadow:0 8px 24px rgba(0,0,0,.15); }

/* ── Right-Click Context Menu (Feature 14) ─────────────────────── */
#bf-context-menu {
  position:fixed;z-index:99999;background:#fff;border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);
  border-top:3px solid #ce1126;border-bottom:2px solid #000;
  overflow:hidden;min-width:160px;
  animation:bfContextIn .15s ease;
}
@keyframes bfContextIn {
  from { opacity:0;transform:scale(.95); }
  to   { opacity:1;transform:scale(1); }
}
.bf-ctx-item {
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  font-size:13px;color:#374151;font-family:'Inter',sans-serif;
  cursor:pointer;transition:background .1s;border-bottom:1px solid #f8fafc;
}
.bf-ctx-item:last-child { border-bottom:none; }
.bf-ctx-item:hover { background:#f0fdf4;color:#006600; }
.bf-ctx-item.danger { color:#dc2626; }
.bf-ctx-item.danger:hover { background:#fff5f5;color:#dc2626; }
.bf-ctx-item-icon { font-size:14px;width:16px;flex-shrink:0;text-align:center; }
.bf-ctx-sep { height:1px;background:#f0f0f0;margin:2px 0; }

/* ── Tooltips on Icon Buttons (Feature 13) ─────────────────────── */
.bf-tooltip-wrap { position:relative;display:inline-flex; }
[data-tooltip] { position:relative; }
[data-tooltip]::after {
  content:attr(data-tooltip);position:absolute;
  bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;font-size:11px;font-family:'Inter',sans-serif;
  padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s;z-index:9999;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
[data-tooltip]::before {
  content:'';position:absolute;bottom:calc(100% + 1px);left:50%;
  transform:translateX(-50%);border:4px solid transparent;
  border-top-color:#1e293b;pointer-events:none;opacity:0;
  transition:opacity .15s;z-index:9999;
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before { opacity:1; }
[data-tooltip-pos="right"]::after {
  bottom:auto;top:50%;left:calc(100% + 6px);transform:translateY(-50%);
}
[data-tooltip-pos="right"]::before {
  bottom:auto;top:50%;left:calc(100% + 1px);
  transform:translateY(-50%) rotate(90deg);border-top-color:#1e293b;
}
[data-tooltip-pos="left"]::after {
  bottom:auto;top:50%;left:auto;right:calc(100% + 6px);transform:translateY(-50%);
}
[data-tooltip-pos="bottom"]::after { bottom:auto;top:calc(100% + 6px); }

/* ── Breadcrumb Navigation (Feature 11) ────────────────────────── */
.bf-breadcrumb {
  background:#0a1628;padding:5px 16px;
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;
  border-bottom:1px solid rgba(255,255,255,.04);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-height:28px;
}
#bf-rvb-strip-bar {
  display:none;align-items:center;gap:6px;
  padding:5px 16px;min-height:28px;
  background:#fff;border-bottom:1px solid #e2e8f0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-wrap:nowrap;
}
#bf-rvb-strip-bar.active { display:flex; }
#bf-rvb-strip-bar::-webkit-scrollbar { display:none; }
.bf-breadcrumb::-webkit-scrollbar { display:none; }
.bf-breadcrumb:empty { display:none; }
.bf-crumb { display:flex;align-items:center;gap:0;white-space:nowrap; }
.bf-crumb-link {
  font-family:'Inter',sans-serif;font-size:11px;
  color:rgba(255,255,255,.4);cursor:pointer;padding:2px 6px;
  border-radius:4px;transition:all .15s;border:none;background:none;
}
.bf-crumb-link:hover { color:rgba(255,255,255,.8);background:rgba(255,255,255,.06); }
.bf-crumb-link.active { color:#F5A623;font-weight:600;cursor:default; }
.bf-crumb-link.active:hover { background:none; }
.bf-crumb-sep { color:rgba(255,255,255,.2);font-size:10px;padding:0 2px;user-select:none; }

/* ── Transition Animations (Feature 10) ─────────────────────────── */
.app-section { animation:none; }
.app-section.visible { animation:bfSectionIn .2s ease both; }
@keyframes bfSectionIn {
  from { opacity:0;transform:translateX(12px); }
  to   { opacity:1;transform:translateX(0); }
}
.card.bf-animate,.kpi-card.bf-animate,.module-card.bf-animate {
  animation:bfCardUp .3s ease both;
}
@keyframes bfCardUp {
  from { opacity:0;transform:translateY(10px); }
  to   { opacity:1;transform:translateY(0); }
}
.bf-animate:nth-child(1){ animation-delay:.00s; }
.bf-animate:nth-child(2){ animation-delay:.05s; }
.bf-animate:nth-child(3){ animation-delay:.10s; }
.bf-animate:nth-child(4){ animation-delay:.15s; }
.bf-animate:nth-child(5){ animation-delay:.20s; }
.bf-animate:nth-child(6){ animation-delay:.25s; }
[id*="modal"]>div,.bf-modal-content {
  animation:bfModalUp .25s ease both;
}
@keyframes bfModalUp {
  from { opacity:0;transform:translateY(20px) scale(.98); }
  to   { opacity:1;transform:translateY(0) scale(1); }
}
.bf-ai-panel.open { animation:bfSlideInRight .3s ease both; }
#bf-notes-panel  { animation:bfSlideInRight .25s ease both; }
@keyframes bfSlideInRight {
  from { right:-400px;opacity:0; }
  to   { right:0;opacity:1; }
}
@keyframes slideIn {
  from { transform:translateX(120%);opacity:0; }
  to   { transform:translateX(0);opacity:1; }
}
@keyframes fadeUp {
  from { opacity:0;transform:translateY(8px); }
  to   { opacity:1;transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .app-section.visible,.card.bf-animate,.kpi-card.bf-animate,
  [id*="modal"]>div,.bf-ai-panel.open,#bf-notes-panel {
    animation:none !important;
  }
}

/* ── Copy to Clipboard (Feature 9) ─────────────────────────────── */
.bf-copy-wrap { display:inline-flex;align-items:center;gap:4px;position:relative; }
.bf-copy-btn {
  opacity:0;background:none;border:none;cursor:pointer;padding:2px;
  color:#94a3b8;font-size:11px;line-height:1;border-radius:4px;
  transition:all .15s;flex-shrink:0;
}
.bf-copy-wrap:hover .bf-copy-btn { opacity:1; }
.bf-copy-btn:hover { color:#006600;background:rgba(0,102,0,.08); }
.bf-copy-btn.copied { color:#16a34a;opacity:1; }
.bf-copy-tooltip {
  position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;font-size:10px;padding:3px 8px;border-radius:4px;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;
  font-family:'Inter',sans-serif;z-index:9999;
}
.bf-copy-tooltip.show { opacity:1; }
td .bf-copy-wrap { gap:6px; }

/* ── Error Boundaries (Feature 8) ──────────────────────────────── */
.bf-error-boundary {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;min-height:280px;
}
.bf-error-icon { font-size:40px;margin-bottom:14px;opacity:.7; }
.bf-error-title {
  font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;
  color:#dc2626;margin-bottom:6px;
}
.bf-error-msg {
  font-family:'Inter',sans-serif;font-size:12px;color:#94a3b8;
  line-height:1.6;max-width:300px;margin-bottom:20px;
}
.bf-error-code {
  font-family:'JetBrains Mono',monospace;font-size:10px;color:#dc2626;
  background:#fff5f5;padding:6px 12px;border-radius:6px;margin-bottom:16px;
  max-width:320px;word-break:break-all;text-align:left;
}

/* ── Pagination (Feature 7) ─────────────────────────────────────── */
.bf-pagination {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-top:1px solid #f0f0f0;
  background:#fafbfc;border-radius:0 0 12px 12px;flex-wrap:wrap;gap:8px;
}
.bf-page-info { font-size:12px;color:#64748b;font-family:'Inter',sans-serif; }
.bf-page-controls { display:flex;align-items:center;gap:4px; }
.bf-page-btn {
  width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;
  background:#fff;color:#374151;font-size:13px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.bf-page-btn:hover:not(:disabled) { border-color:#006600;color:#006600;background:#f0fdf4; }
.bf-page-btn.active { background:#006600;color:#fff;border-color:#006600; }
.bf-page-btn:disabled { opacity:.4;cursor:not-allowed; }
.bf-page-size {
  padding:5px 8px;border-radius:6px;border:1px solid #e2e8f0;
  font-size:12px;background:#fff;font-family:'Inter',sans-serif;cursor:pointer;color:#374151;
}
.bf-page-size:focus { border-color:#006600;outline:none; }

/* ── Inline Table Search (Feature 6) ───────────────────────────── */
.bf-table-search-wrap {
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:#f8fafc;border-bottom:1px solid #f0f0f0;
}
.bf-table-search {
  flex:1;padding:7px 12px 7px 32px;
  border:1.5px solid #e2e8f0;border-radius:20px;
  font-size:12px;font-family:'Inter',sans-serif;color:#374151;
  background:#fff;outline:none;transition:border-color .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;
}
.bf-table-search:focus { border-color:#006600;box-shadow:0 0 0 3px rgba(0,102,0,.08); }
.bf-table-search.active { border-color:#006600;background-color:#f0fdf4; }
.bf-table-search-clear {
  background:none;border:none;color:#94a3b8;cursor:pointer;
  font-size:16px;padding:0;line-height:1;transition:color .15s;flex-shrink:0;
}
.bf-table-search-clear:hover { color:#dc2626; }
.bf-no-results {
  text-align:center;padding:32px;color:#94a3b8;
  font-size:13px;font-family:'Inter',sans-serif;
}

/* ── Undo Toast (Feature 5) ─────────────────────────────────────── */
#_bfUndoToast { pointer-events:auto; }
#_bfUndoBtn:hover { background:#004d00 !important; }

/* ── Skeleton Loading (Feature 1) ───────────────────────────────── */
@keyframes skeleton-pulse {
  0%,100% { background:#f1f5f9; }
  50%     { background:#e2e8f0; }
}
.skeleton-wrapper { padding:16px; }
.skeleton-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-bottom:16px;
}
.skeleton-card {
  height:80px;border-radius:10px;
  animation:skeleton-pulse 1.5s ease infinite;
  margin-bottom:12px;
}
.skeleton-text {
  height:12px;border-radius:6px;
  animation:skeleton-pulse 1.5s ease infinite;
  background:#f1f5f9;
}
.skeleton-text.w30 { width:30%; }
.skeleton-text.w50 { width:50%; }

/* ── Empty State Illustrations (Feature 2) ──────────────────────── */
.bf-empty-state {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 24px;text-align:center;
}
.bf-empty-icon { font-size:56px;margin-bottom:16px;opacity:.7; }
.bf-empty-title {
  font-size:18px;font-weight:600;color:#1e293b;margin-bottom:8px;
}
.bf-empty-sub {
  font-size:13px;color:#94a3b8;max-width:320px;line-height:1.6;margin-bottom:20px;
}
.bf-empty-cta {
  background:#006600;color:#fff;border:none;border-radius:8px;
  padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s;
}
.bf-empty-cta:hover { background:#004d00; }

/* ── Sticky Table Headers (Feature 4) ───────────────────────────── */
.data-table thead th {
  position:sticky;top:0;z-index:2;
  background:#f8fafc;
}
.bf-scroll-table { overflow-x:auto;max-height:480px;overflow-y:auto; }
.bf-scroll-table thead th {
  position:sticky;top:0;z-index:2;
  background:#f8fafc;box-shadow:0 1px 0 #e2e8f0;
}

/* ── Dark Mode ──────────────────────────────────────────────────── */
body.dark-mode {
  --bg-primary:#0f172a;
  --bg-card:#1e293b;
  --text-primary:#f1f5f9;
  --text-secondary:#94a3b8;
  --border:#334155;
}
body.dark-mode .card,
body.dark-mode .module-card,
body.dark-mode .stat-card,
body.dark-mode .kpi-card {
  background:var(--bg-card);
  border-color:var(--border);
  color:var(--text-primary);
}
body.dark-mode .section-tier2,
body.dark-mode .section-tier3,
body.dark-mode .data-table tbody tr:nth-child(odd) {
  background:var(--bg-card);
}
body.dark-mode .data-table tbody tr:hover {
  background:rgba(0,102,0,.18);
}
body.dark-mode .data-table td {
  color:var(--text-primary);
  border-color:var(--border);
}
body.dark-mode .table-filter-bar {
  background:#0f172a;
  border-color:var(--border);
}
body.dark-mode .ym-select {
  background:#1e293b;
  color:var(--text-primary);
  border-color:var(--border);
}


/* === FEATURE 1: QUICK ACTION FAB === */
.bf-fab {
  position:fixed;bottom:24px;right:24px;
  z-index:9000;display:flex;
  flex-direction:column-reverse;
  align-items:center;gap:10px;
}
.bf-fab-main {
  width:52px;height:52px;border-radius:50%;
  background:#006600;color:#fff;
  border:none;font-size:24px;font-weight:300;
  cursor:pointer;box-shadow:0 4px 12px rgba(0,102,0,.4);
  transition:all .2s;z-index:9001;
}
.bf-fab-main:hover {
  background:#004d00;transform:scale(1.08);
}
.bf-fab-main.open {
  transform:rotate(45deg);background:#dc2626;
}
.bf-fab-menu {
  display:flex;flex-direction:column-reverse;
  align-items:center;gap:8px;
  opacity:0;pointer-events:none;
  transform:translateY(10px);transition:all .2s ease;
}
.bf-fab-menu.open {
  opacity:1;pointer-events:all;transform:translateY(0);
}
.bf-fab-item {
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:none;font-size:16px;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:all .15s;display:flex;
  align-items:center;justify-content:center;
}
.bf-fab-item:hover {
  transform:scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* === FEATURE 2: RECENTLY VISITED BREADCRUMB === */
.bf-recents {
  background:#0a1628;
  padding:4px 16px;
  display:flex;align-items:center;
  gap:6px;min-height:28px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.bf-recents:empty { display:none; }
.recent-label {
  font-size:9px;color:rgba(255,255,255,.25);
  text-transform:uppercase;letter-spacing:.06em;
  font-family:'Inter',sans-serif;
  margin-right:4px;flex-shrink:0;
}
.recent-pill {
  padding:2px 10px;border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.5);
  font-size:10px;font-family:'Inter',sans-serif;
  cursor:pointer;border:none;
  transition:all .15s;white-space:nowrap;
}
.recent-pill:hover {
  background:rgba(255,255,255,.12);color:#fff;
}

/* === FEATURE 3: SIDEBAR COLLAPSE === */
.sidebar-toggle {
  position:absolute;right:-12px;top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:#1e3a5f;
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  cursor:pointer;font-size:12px;
  z-index:100;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-toggle:hover { background:#006600;color:#fff; }
.sidebar { position:relative;transition:width .25s ease; }
.sidebar.collapsed { width:48px!important; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-group-header,
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-ai-label,
.sidebar.collapsed .sidebar-logo-name,
.sidebar.collapsed .sidebar-logo-sub { display:none; }
.sidebar.collapsed .nav-item-link { justify-content:center;padding:8px 0; }
.sidebar.collapsed .nav-icon { font-size:16px;opacity:1; }

/* === FEATURE 4: TABLE EXPORT BUTTON === */
.table-export-btn {
  padding:4px 12px;border-radius:6px;
  border:1px solid #e2e8f0;
  background:#fff;color:#374151;
  font-size:11px;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .15s;margin-left:8px;
}
.table-export-btn:hover { border-color:#006600;color:#006600; }

/* === FEATURE 1: COMMAND PALETTE === */
.bf-cmd-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:99999;display:none;
  align-items:flex-start;justify-content:center;padding-top:15vh;
}
.bf-cmd-overlay.open { display:flex;animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.bf-cmd-box {
  background:#fff;border-radius:16px;
  width:100%;max-width:560px;
  box-shadow:0 24px 80px rgba(0,0,0,.3);overflow:hidden;
}
.bf-cmd-search-row {
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid #f0f0f0;
}
.bf-cmd-icon { font-size:16px;color:#94a3b8;flex-shrink:0; }
.bf-cmd-input {
  flex:1;border:none;outline:none;
  font-size:16px;font-family:'Inter',sans-serif;
  color:#111;background:transparent;
}
.bf-cmd-input::placeholder { color:#94a3b8; }
.bf-cmd-esc {
  font-size:10px;color:#94a3b8;border:1px solid #e2e8f0;
  border-radius:4px;padding:2px 6px;cursor:pointer;
  font-family:monospace;flex-shrink:0;
}
.bf-cmd-results { max-height:360px;overflow-y:auto;padding:8px; }
.bf-cmd-group-label {
  font-size:9px;font-weight:600;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.08em;
  padding:8px 10px 4px;font-family:'Inter',sans-serif;
}
.bf-cmd-item {
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;
  cursor:pointer;transition:background .1s;font-family:'Inter',sans-serif;
}
.bf-cmd-item:hover,.bf-cmd-item.active { background:#f0fdf4; }
.bf-cmd-item-icon { font-size:16px;width:20px;text-align:center;flex-shrink:0; }
.bf-cmd-item-label { font-size:14px;color:#111;flex:1; }
.bf-cmd-item-badge {
  font-size:10px;color:#94a3b8;background:#f1f5f9;
  border-radius:4px;padding:2px 6px;font-weight:500;
}
.bf-cmd-footer {
  display:flex;gap:16px;padding:10px 18px;
  border-top:1px solid #f0f0f0;
  font-size:10px;color:#94a3b8;font-family:'Inter',sans-serif;
}

/* === FEATURE 2: AI ASSISTANT PANEL === */
.bf-ai-panel {
  position:fixed;right:-400px;top:0;bottom:0;
  width:380px;background:#fff;z-index:9990;
  box-shadow:-4px 0 32px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  transition:right .3s ease;font-family:'Inter',sans-serif;
}
.bf-ai-panel.open { right:0; }
.bf-ai-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:9989;display:none; }
.bf-ai-backdrop.open { display:block; }
.bf-ai-header {
  background:#006600;padding:16px;
  display:flex;align-items:center;justify-content:space-between;
}
.bf-ai-avatar {
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.bf-ai-title { color:#fff;font-weight:700;font-size:14px; }
.bf-ai-sub { color:rgba(255,255,255,.7);font-size:11px;margin-top:1px; }
.bf-ai-close {
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;
}
.bf-ai-messages {
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.bf-ai-welcome { text-align:center;padding:20px 0; }
.bf-ai-suggestions {
  display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;justify-content:center;
}
.bf-ai-suggest {
  padding:6px 12px;border-radius:16px;border:1px solid #e2e8f0;
  background:#f8fafc;color:#374151;font-size:12px;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all .15s;
}
.bf-ai-suggest:hover { border-color:#006600;color:#006600;background:#f0fdf4; }
.bf-ai-msg { display:flex;gap:8px;animation:fadeUp .2s ease; }
.bf-ai-msg.user { flex-direction:row-reverse; }
.bf-ai-bubble {
  max-width:80%;padding:10px 14px;border-radius:12px;
  font-size:13px;line-height:1.6;
}
.bf-ai-msg.user .bf-ai-bubble {
  background:#006600;color:#fff;border-radius:12px 12px 2px 12px;
}
.bf-ai-msg.ai .bf-ai-bubble {
  background:#f1f5f9;color:#374151;border-radius:12px 12px 12px 2px;
}
.bf-ai-msg.ai .bf-ai-bubble.loading { color:#94a3b8;font-style:italic; }
.bf-ai-input-row {
  padding:12px 16px;border-top:1px solid #f0f0f0;display:flex;gap:8px;
}
.bf-ai-input {
  flex:1;padding:9px 14px;border:1px solid #e2e8f0;
  border-radius:20px;font-size:13px;
  font-family:'Inter',sans-serif;outline:none;color:#374151;
}
.bf-ai-input:focus { border-color:#006600; }
.bf-ai-send {
  width:36px;height:36px;border-radius:50%;background:#006600;
  color:#fff;border:none;cursor:pointer;font-size:16px;
  transition:all .15s;display:flex;align-items:center;justify-content:center;
}
.bf-ai-send:hover { background:#004d00; }
@keyframes fadeUp {
  from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)}
}

/* === FEATURE 6: OFFLINE INDICATOR === */
.bf-offline-bar {
  background:#fef3c7;color:#92400e;
  text-align:center;padding:6px 16px;
  font-size:12px;font-family:'Inter',sans-serif;
  font-weight:500;border-bottom:1px solid #fcd34d;
  animation:slideDown .3s ease;
}
@keyframes slideDown {
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* === FEATURE 1: CONTEXTUAL HELP BUTTON === */
.bf-help-btn {
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,102,0,.1);border:1px solid rgba(0,102,0,.2);
  color:#006600;font-size:11px;font-weight:700;cursor:pointer;
  margin-left:8px;vertical-align:middle;
  transition:all .15s;font-family:monospace;flex-shrink:0;
}
.bf-help-btn:hover { background:#006600;color:#fff; }

/* === FEATURE 2: RESPONSIVE MOBILE LAYOUT === */
@media (max-width: 768px) {
  #sb-nav, .sidebar {
    position:fixed !important;bottom:0 !important;left:0 !important;
    right:0 !important;top:auto !important;width:100% !important;
    height:56px !important;flex-direction:row !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    z-index:8000;padding:0 !important;
    border-top:1px solid rgba(255,255,255,.1) !important;
    border-right:none !important;
  }
  .nav-group-header,.nav-group-items,.sidebar-brand,
  .sidebar-logo,#bf-recents { display:none !important; }
  .nav-item {
    flex-direction:column !important;align-items:center !important;
    justify-content:center !important;padding:6px 14px !important;
    min-width:60px !important;border-left:none !important;
    border-top:2px solid transparent;font-size:9px !important;
    gap:2px !important;height:56px;white-space:nowrap;
  }
  .nav-item.active {
    border-top-color:#F5A623 !important;border-left:none !important;
    background:rgba(245,166,35,.08) !important;
  }
  .nav-icon { font-size:18px !important;opacity:1 !important; }
  .nav-label { font-size:9px !important; }
  .app-body,.app-content { flex-direction:column !important; }
  .main-content,.section-content,[class*="main"] {
    margin-bottom:56px !important;width:100% !important;
  }
  .header-inner { padding:4px 10px !important;height:48px !important; }
  .h-right .badge-plan,.h-right .badge-role { display:none !important; }
  .combined-bar,.kpi-bar {
    overflow-x:auto !important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .combined-bar::-webkit-scrollbar,.kpi-bar::-webkit-scrollbar { display:none; }
  .data-table {
    display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch;white-space:nowrap;
  }
  .section-tier1 { grid-template-columns:repeat(2,1fr) !important; }
  .card,.module-card,.kpi-card { width:100% !important; }
  .bf-fab { bottom:68px !important; }
  .bf-cmd-box { width:95% !important;margin:0 auto; }
  .bf-ai-panel { width:100% !important;right:-100% !important; }
  .bf-ai-panel.open { right:0 !important; }
  .bf-notes-panel,#bf-notes-panel { width:100% !important; }
  [id*="modal"] > div,.modal-content {
    width:95% !important;margin:10px auto !important;
    max-height:90vh;overflow-y:auto;
  }
  .section-wrapper { padding:12px !important; }
}

@media (max-width: 480px) {
  .section-tier1 { grid-template-columns:1fr !important; }
  .kpi-card .kpi-value { font-size:18px !important; }
  .ghost-T { font-size:32px !important; }
}

/* === FEATURE 3: PRINT STYLESHEET === */
@media print {
  @page { margin:12mm;size:A4 portrait; }

  #sb-nav,.sidebar,.header,.app-header,
  .combined-bar,.kpi-bar,.bf-fab,.bf-recents,
  .bf-ai-panel,.bf-ai-backdrop,#bf-offline-bar,
  #bf-cmd-overlay,#bf-timeout-modal,
  #bf-alerts-panel,#bf-notes-panel,
  #bf-guest-card,#bf-help-card,.sidebar-toggle,
  .btn-print,.table-filter-bar,.table-export-btn,
  .bf-col-toggle-btn,.bf-bulk-bar,
  [class*="btn"]:not(.print-show),
  nav,header,footer { display:none !important; }

  body,.app-body,.app-content,
  .main-content,.section-content {
    width:100% !important;margin:0 !important;
    padding:0 !important;background:#fff !important;
    box-shadow:none !important;
  }
  .card,.module-card,.kpi-card,
  .section-tier2,.section-tier3 {
    box-shadow:none !important;border:1px solid #e2e8f0 !important;
  }
  .app-section.visible::before {
    content:attr(data-print-title);display:block;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px;font-weight:700;color:#111;margin-bottom:4px;
  }
  .data-table { overflow:visible !important;white-space:normal !important; }
  .data-table thead { display:table-header-group; }
  .data-table tr { page-break-inside:avoid; }
  .data-table thead tr {
    background:#006600 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .app-section.visible::after {
    content:'Powered by TENari';display:block;
    text-align:center;font-size:10px;color:#94a3b8;
    margin-top:20px;font-family:Inter,sans-serif;
  }
  .section-tier1 { page-break-after:avoid; }
  .section-tier3 { page-break-before:avoid; }
  h2,h3,.section-title { page-break-after:avoid; }
  * { -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important; }
}


/* === FEATURE 1: VIP STAR === */
.vip-star {
  font-size:11px;margin-left:4px;cursor:pointer;
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{filter:drop-shadow(0 0 2px #d97706)}
  50%{filter:drop-shadow(0 0 6px #d97706)}
}

/* === FEATURE 3: BRANDED FOOTER === */
.bf-footer {
  background:#0a1628;
  flex-shrink:0;
}
.bf-footer-stripe-red {
  height:3px;background:#ce1126;
}
.bf-footer-stripe-black {
  height:2px;background:#000;
}
.bf-footer-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 24px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}
.bf-footer-brand {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:700;
  color:rgba(255,255,255,.75);
  letter-spacing:.02em;
}
.bf-footer-tagline {
  font-family:'Inter',sans-serif;
  font-size:10px;
  color:rgba(255,255,255,.35);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.bf-footer-phone {
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:500;
  color:rgba(255,255,255,.75);
  letter-spacing:.1em;
}
.bf-footer-dot {
  color:rgba(255,255,255,.2);
  font-size:14px;flex-shrink:0;
}

@media (max-width:600px){
  .bf-footer-tagline,
  .bf-footer-dot:nth-child(4){
    display:none;
  }
  .bf-footer-inner {
    justify-content:space-between;
  }
}

/* ── UI FOOTER QUICK-ACTIONS (2026-08-13, centered brand) — the footer is ONE horizontal row:
   brand words CENTERED across the full footer width (the theme's original design), the five per-plan
   icons + the "+" pinned to the FAR-RIGHT edge as an ABSOLUTE overlay on the same line. Absolute (not
   margin-left:auto) because an in-flow auto-margin cluster steals flex space and shifts the centered
   text left of true center. Selectors are anchored on #bf-footer with !important so this layout wins
   over any legacy footer rule. Buttons are TEXT-HEIGHT so the footer height stays a single line. ── */
#bf-footer .bf-footer-inner {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;  /* brand text truly centered across the footer */
  flex-wrap:nowrap !important;
  position:relative !important;       /* anchor for the absolute action cluster */
}
#bf-footer .bf-footer-actions {
  position:absolute !important;       /* out of flow — never skews the centered text */
  right:24px !important;              /* matches .bf-footer-inner horizontal padding */
  top:50% !important;
  transform:translateY(-50%) !important;
  margin-left:0 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;        /* single row — never wrap */
  gap:2px !important;
  flex-shrink:0 !important;
}
#bf-footer .bf-footer-acts {
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:2px !important;
}
#bf-footer .bf-footer-act {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:1px 4px !important;
  border:none !important;
  border-radius:6px;
  background:transparent !important;
  color:#fff !important;
  font-size:13px !important;          /* matches the flag-SVG height (~14px) — no footer growth */
  line-height:1 !important;
  cursor:pointer;
  flex-shrink:0 !important;
  transition:background .15s ease;
}
#bf-footer .bf-footer-act:hover {
  background:rgba(255,255,255,.14) !important;
}
#bf-footer .bf-footer-act:focus-visible {
  outline:2px solid #F5A623;
  outline-offset:1px;
}
#bf-footer .bf-footer-plus {
  font-size:15px !important;
  font-weight:700 !important;
}
/* Hide the whole footer action cluster on MOBILE (minimise congestion) and in PRINT (not printable). */
@media (max-width:600px){
  #bf-footer .bf-footer-actions { display:none !important; }
}
@media print {
  #bf-footer .bf-footer-actions { display:none !important; }
}

/* ── Feature 6: Kenya Flag Themed Dropdowns & Popups ──────────────── */
/* Red top stripe + black bottom stripe on all modals, panels, dropdowns */
.bf-cmd-box,
#bf-alerts-panel,
#bf-help-card,
#bf-ai-panel,
[id*="modal"] > div,
.bf-modal-inner,
.bf-panel,
.dropdown-panel,
#bfPropDrop {
  border-top:3px solid #ce1126 !important;
  border-bottom:2px solid #111 !important;
}

/* Property pill: green bg + red top stripe */
#bfPropPill {
  background:#006600 !important;
  border-top:3px solid #ce1126 !important;
  border-bottom:2px solid #111 !important;
  border-left:none !important;
  border-right:none !important;
  border-radius:8px !important;
}
#bfPropDrop {
  background:#0a2e0a;
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* Context menus and select-type dropdowns */
.bf-context-menu,
.bf-dropdown-list {
  border-top:3px solid #ce1126;
  border-bottom:2px solid #111;
}


/* Tooltip bubble */
.bf-tooltip-bubble {
  border-top:2px solid #ce1126;
}

/* ================================================================
   VALIDATION CSS — Field states, error/warning messages, shake
   Added by Batch 4 (Data Validation)
   ================================================================ */

/* Field wrapper */
.bf-field { position:relative; margin-bottom:16px; }
.bf-field label {
  display:block;font-size:11px;font-weight:600;
  color:#64748b;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:5px;
  font-family:'Inter',sans-serif;
  transition:color .15s;
}
.bf-field input,
.bf-field select,
.bf-field textarea {
  width:100%;padding:9px 12px;
  border:1.5px solid #e2e8f0;
  border-radius:8px;font-size:13px;
  font-family:'Inter',sans-serif;
  color:#374151;background:#fff;
  outline:none;transition:all .15s;
  box-sizing:border-box;
}

/* Focus state */
.bf-field input:focus,
.bf-field select:focus,
.bf-field textarea:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
.bf-field.focused label { color:#2563eb; }

/* Valid state */
.bf-field.valid input,
.bf-field.valid select,
.bf-field.valid textarea {
  border-color:#16a34a;
  background:#f0fdf4;
}
.bf-field.valid label { color:#16a34a; }
.bf-field.valid::after {
  content:'¹3';
  position:absolute;right:12px;top:34px;
  color:#16a34a;font-size:14px;font-weight:700;
  pointer-events:none;
}

/* Error state */
.bf-field.error input,
.bf-field.error select,
.bf-field.error textarea {
  border-color:#dc2626;
  background:#fff5f5;
  animation:bfShake .3s ease;
}
.bf-field.error label { color:#dc2626; }

/* Warning state */
.bf-field.warning input,
.bf-field.warning select,
.bf-field.warning textarea {
  border-color:#d97706;
  background:#fffbeb;
}
.bf-field.warning label { color:#d97706; }

/* Error message */
.bf-field-error {
  font-size:11px;color:#dc2626;
  font-family:'Inter',sans-serif;
  margin-top:4px;display:none;padding-left:2px;
}
.bf-field.error .bf-field-error { display:block;animation:fadeUp .2s ease; }

/* Warning message */
.bf-field-warning {
  font-size:11px;color:#d97706;
  font-family:'Inter',sans-serif;
  margin-top:4px;display:none;padding-left:2px;
}
.bf-field.warning .bf-field-warning { display:block; }

/* Shake animation */
@keyframes bfShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* Required indicator */
.bf-field.required label::after { content:' *';color:#dc2626; }

/* Amount field */
.bf-field.amount-field input {
  text-align:right;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
}

/* Submit disabled */
.btn-primary:disabled,
.btn-primary[disabled] {
  background:#94a3b8;cursor:not-allowed;transform:none;
}

/* The .bf-duplicate-warning and .bf-amount-warning banner styles were deleted here 2026-08-16
   with the two dormant helpers they dressed (bfCheckDuplicate / bfCheckLargeAmount, tenari2_nav.js).
   Nothing ever carried either class: the JS looked up getElementById('bf-dup-warning') while the
   CSS defined .bf-duplicate-warning, so even a rendered banner would not have matched. Their
   successor is a HARD STOP that refuses the save (dal.money.guardEntry) and surfaces through the
   standard toast, so no inline banner is needed. A fix deletes the workaround it replaces (§DU). */

/* === PROP PILL CHIP === */
.prop-pill-chip {
  position:relative;
  cursor:pointer;
  padding:0 14px;
  border-right:1px solid rgba(255,255,255,.1);
  height:100%;
  display:flex;align-items:center;
  gap:6px;
}
.prop-pill-chip:hover {
  background:rgba(255,255,255,.06);
}
.prop-dropdown-item {
  padding:10px 16px;
  font-size:12px;
  font-family:'Inter',sans-serif;
  color:#374151;cursor:pointer;
  border-bottom:1px solid #f0f0f0;
  display:flex;align-items:center;
  gap:8px;
}
.prop-dropdown-item:last-child {
  border-bottom:none;
}
.prop-dropdown-item:hover {
  background:#f0fdf4;color:#006600;
}
.prop-dropdown-item.active {
  color:#006600;font-weight:600;
  background:#f0fdf4;
}
.prop-dropdown-item.active::after {
  content:'\2713';margin-left:auto;
  color:#006600;font-size:11px;
}

/* === CHAT MODULE === */
.bf-chat-layout{display:flex;height:calc(100vh - 120px);min-height:520px;background:#f8fafc;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.07);}
.bf-chat-sidebar{width:240px;flex-shrink:0;background:#fff;border-right:1px solid #f0f0f0;display:flex;flex-direction:column;overflow:hidden;}
.bf-chat-sidebar-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid #f0f0f0;}
.bf-chat-user-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #f5f5f5;}
.bf-chat-room-item{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;border-radius:0;transition:background .15s;position:relative;}
.bf-chat-room-item:hover{background:#f0fdf4;}
.bf-chat-room-item.active{background:#f0fdf4;border-left:3px solid #006600;}
.bf-chat-room-icon{font-size:18px;flex-shrink:0;}
.bf-chat-room-meta{flex:1;min-width:0;}
.bf-chat-room-name{font-size:13px;font-weight:600;color:#111;font-family:'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bf-chat-room-desc{font-size:11px;color:#94a3b8;font-family:'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bf-chat-unread-badge{background:#dc2626;color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;font-family:'Inter',sans-serif;flex-shrink:0;}
.bf-chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#f8fafc;}
.bf-chat-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;min-height:54px;}
.bf-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;}
.bf-chat-input-area{padding:12px 16px;background:#fff;border-top:1px solid #f0f0f0;}
.bf-chat-textarea{width:100%;resize:none;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:13px;font-family:'Inter',sans-serif;color:#111;background:#fff;transition:border-color .2s;box-sizing:border-box;}
.bf-chat-textarea:focus{outline:none;border-color:#006600;}
.bf-chat-hint{font-size:11px;color:#94a3b8;font-family:'Inter',sans-serif;margin-bottom:6px;}
.bf-chat-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;flex-shrink:0;}
.bf-chat-msg{display:flex;gap:8px;align-items:flex-end;}
.bf-chat-msg.mine{flex-direction:row-reverse;}
.bf-chat-bubble-wrap{display:flex;flex-direction:column;max-width:70%;gap:3px;}
.bf-chat-bubble-meta{display:flex;align-items:center;gap:8px;padding:0 4px;}
.bf-chat-sender{font-size:11px;font-weight:600;color:#374151;font-family:'Inter',sans-serif;}
.bf-chat-time{font-size:10px;color:#94a3b8;font-family:'Inter',sans-serif;}
.bf-chat-bubble{background:#fff;border-radius:14px 14px 14px 2px;padding:10px 14px;font-size:13px;font-family:'Inter',sans-serif;color:#111;line-height:1.55;border:1px solid rgba(0,0,0,.06);word-break:break-word;}
.bf-chat-bubble.mine{background:#006600;color:#fff;border-radius:14px 14px 2px 14px;border:none;}
.bf-chat-mention{color:#2563eb;font-weight:600;}
.bf-chat-xroom{color:#16a34a;font-weight:600;}
.bf-chat-xmention-note{font-size:10px;color:#64748b;font-family:'Inter',sans-serif;padding:2px 4px;}
.bf-chat-date-divider{display:flex;align-items:center;gap:12px;margin:8px 0;color:#94a3b8;font-size:11px;font-family:'Inter',sans-serif;}
.bf-chat-date-divider::before,.bf-chat-date-divider::after{content:'';flex:1;height:1px;background:#e2e8f0;}
@media(max-width:640px){
  .bf-chat-sidebar{width:180px;}
  .bf-chat-room-desc{display:none;}
  .bf-chat-layout{height:calc(100vh - 80px);}
}

/* === SEARCH HIGHLIGHT === */
.bf-search-highlight {
  background:#fef9c3 !important;
  outline:2px solid #eab308;
  outline-offset:-2px;
  animation:bfHighlightPulse 1s ease 3;
}
@keyframes bfHighlightPulse {
  0%,100%{background:#fef9c3}
  50%{background:#fde047}
}

/* === WHATSAPP SHARE BUTTON === */
.bf-wa-btn {
  background:#25D366 !important;
  color:#fff !important;
  border:none !important;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  font-size:12px;
}
.bf-wa-btn:hover {
  background:#128C7E !important;
  color:#fff !important;
}

/* === DASHBOARD DATE RANGE PICKER === */
.bf-range-btn {
  padding:6px 14px;
  border-radius:20px;
  border:1.5px solid #e2e8f0;
  background:#fff;
  font-size:12px;
  font-family:'Inter',sans-serif;
  font-weight:500;
  color:#475569;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.bf-range-btn:hover {
  border-color:#006600;
  color:#006600;
  background:#f0fdf4;
}
.bf-range-btn.active {
  background:#006600;
  border-color:#006600;
  color:#fff;
  font-weight:600;
}
.bf-range-picker {
  margin-bottom:16px;
}

/* === HEADER HEIGHT CONSTRAINT (Split 06) === */
.header-inner,
.topbar-inner,
[class*="header"] > div:first-child {
  height:54px !important;
  max-height:54px !important;
  align-items:center !important;
  overflow:hidden !important;
  flex-wrap:nowrap !important;
}

/* Suppress old wordmark class — replaced by Split 06 markup */
.hdr-wordmark-text {
  display:none !important;
}

/* === F11: CONFLICT BAR SLIDE-DOWN === */
@keyframes slideDown {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}

/* === F13: TABLE KEYBOARD NAVIGATION === */
.bf-row-focused {
  background:#f0fdf4 !important;
  outline:2px solid #006600 !important;
  outline-offset:-2px;
}
.data-table tbody tr:focus {
  background:#f0fdf4;
  outline:2px solid #006600;
  outline-offset:-2px;
}

/* === F14: VOICE INPUT BUTTON === */
@keyframes voicePulse {
  0%,100% { opacity:0.65; transform:translateY(-50%) scale(1);   }
  50%      { opacity:1;    transform:translateY(-50%) scale(1.2); }
}
.bf-voice-btn {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  padding:2px;
  line-height:1;
  opacity:0.65;
  transition:opacity .15s;
  z-index:1;
}
.bf-voice-btn:hover {
  opacity:1;
}

/* === F17: SHARED DASHBOARD OVERLAY === */
/* (no extra CSS needed — all inline) */

/* === F19: BULK PASTE MODAL === */
/* (no extra CSS needed — all inline) */

/* === F20: QR CODE ON RECEIPT === */
#bf-receipt-qr img,
#bf-receipt-qr canvas {
  display:block;
  margin:0 auto;
}

/* ════════════════════════════════════════════════════════════
 * PER-PLAN THEME TOKENS
 * Activated by document.body.dataset.plan = planCode (set in bfLoadApp).
 * Used by per-plan dashboards (modules/dashboards/dashboard-<PLAN>.js)
 * for brand-pill colour, accent strip, KPI top-borders.
 * ════════════════════════════════════════════════════════════ */

body[data-plan="HT"] {
  --plan-accent:    #7c3aed;   /* purple/violet — Hotels & Resorts */
  --plan-header:    #0a1e2e;   /* dark navy */
  --plan-pill-bg:   #7c3aed;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #f5a623;   /* gold accent */
}

body[data-plan="HL"] {
  --plan-accent:    #10b981;   /* forest green — Hotels & Guest Houses */
  --plan-header:    #0d2818;
  --plan-pill-bg:   #10b981;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #16a34a;
}

body[data-plan="RN"] {
  --plan-accent:    #16a34a;   /* green — Rentals */
  --plan-header:    #0d2818;
  --plan-pill-bg:   #10b981;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #15803d;
}

body[data-plan="SC"] {
  --plan-accent:    #f5a623;   /* amber/gold — Service Charge / Estates */
  --plan-header:    #0a0907;
  --plan-pill-bg:   #f5a623;
  --plan-pill-fg:   #1a0f00;
  --plan-icon-tint: #d97706;
}

body[data-plan="UT"] {
  --plan-accent:    #0ea5e9;   /* blue — Utilities */
  --plan-header:    #0a1830;
  --plan-pill-bg:   #0ea5e9;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #06b6d4;
}

body[data-plan="SS"] {
  --plan-accent:    #dc2626;   /* crimson — Serviced Apartments */
  --plan-header:    #0a0808;
  --plan-pill-bg:   #dc2626;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #b91c1c;
}

body[data-plan="SA"] {
  --plan-accent:    #ef4444;   /* red/coral — Airbnb & Short Stays */
  --plan-header:    #0a0808;
  --plan-pill-bg:   #ef4444;
  --plan-pill-fg:   #ffffff;
  --plan-icon-tint: #f97316;
}

/* ================================================================
 * TENari unified card/table track (.tn-*)
 *
 * One canonical surface family for every form's KPI band + data
 * table across all 7 plans (HT/HL/RN/SC/UT/SS/SA). The HT
 * Income-Ledger inline pattern in modules/ihpms/ihpms-revenue.js is
 * the source of truth — these classes encode the same visual
 * (surface2 background, LHS 3px accent, uppercase muted label, large
 * coloured value, light brand table header). Authored fresh; the
 * generic .card / .module-card classes are deliberately left
 * untouched so non-KPI containers (modals, panels, login card,
 * page-shell frames, the canonical HT table frame) keep their
 * existing behaviour while KPI/table surfaces migrate onto .tn-*.
 *
 * Accent: --tn-accent inline override, falling back to the active
 * plan accent and then the brand green — never a hard-coded hue.
 *
 * Grid: count-driven. bfCardGrid() sets `style="grid-template-columns
 * :repeat(min(N,6),1fr)"` inline from the rendered card count.
 * ≤6 cards fill the row; 7th wraps to row 2 at 1/6 width aligned-left
 * (no balloon); 1 card spans full width. auto-fit/auto-fill are
 * deliberately NOT used (both produce wrong behaviour for ≤6).
 *
 * Mobile breakpoints override inline columns: ≤720px collapses to 2,
 * ≤480px to 1.
 *
 * Table: .tn-table-wrap is the framed surface; .tn-table styles the
 * table itself; .tn-entries-count is the top-right "N entries" pill
 * rendered once per data table inside .tn-section-head.
 *
 * HR/Staff: .tn-card--hr inherits the canonical surface2 + LHS accent
 * + label/value treatment but is rendered outside .tn-card-grid; the
 * HR module owns its bespoke row layout (staff cards have different
 * width semantics from KPI cards).
 * ================================================================ */

.tn-card,
.tn-card--hr {
  background: var(--surface2);
  border-left: 3px solid var(--tn-accent, var(--plan-accent, var(--k-green)));
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 0;
  /* Lift off the form's surface2 bg so the card extent (right/bottom
     edges and rounded corners) reads as a distinct box even when the
     page background is var(--surface2). James 2026-05-30 sign-off
     pilot. Values match the inline fallback in platform/tn-card.js. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ─────────────────────────────────────────────────────────────────
   .tn-form-surface — canonical branded form wrapper.

   Renderers' outermost div carries this class so the form area itself
   reads as the canonical var(--surface2) bg (HT Income-Ledger parity).
   The inline `style="padding:20px;background:var(--surface2);
   min-height:100%"` is kept on the helper output as a belt-and-
   suspenders fallback for stale-CSS cache state, identical to the
   .tn-card pattern.

   The scoped neutralizers below are the key — they make any legacy
   .card / .section-card / .module-card nested INSIDE a branded form
   surface go transparent (no white panel, no border, no shadow), so
   renderer-body content frames (e.g. inline `<div class="card"
   style="padding:16px">…</div>` panels in irpms-comms / -documents /
   -main / shared-admin) stop showing white. The GLOBAL .card rule at
   line 5293 is untouched — modals, the login card, the HT table
   frame, and every other .card OUTSIDE a .tn-form-surface remain
   white as before. James 2026-05-30 directive: "DO NOT mutate generic
   .card / .module-card globally" — this scoped override honours that.

   The `border-radius:14px` from the global .card rule is preserved
   so a .card wrapping a table (e.g. `<div class="card"
   style="padding:0;overflow:hidden">`) still clips its corners.
   ───────────────────────────────────────────────────────────────── */
.tn-form-surface {
  padding: 20px;
  background: var(--surface2);
  min-height: 100%;
}

.tn-form-surface .card,
.tn-form-surface .module-card,
.tn-form-surface .section-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

.tn-form-surface .card:hover,
.tn-form-surface .module-card:hover {
  transform: none;
  box-shadow: none;
}

/* .section-card-title rule from the IRPMS-grade block (line ~974)
   provides bold copy with a bottom margin; preserve it inside form
   surfaces but drop the .section-card panel's visual frame. */
.tn-form-surface .section-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.tn-card__label {
  font-size: .68rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 4px;
}

.tn-card__value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tn-accent, var(--plan-accent, var(--k-green)));
}

.tn-card__sub {
  margin-top: 3px;
  font-size: .62rem;
  color: var(--text2);
}

.tn-card--centered {
  text-align: center;
}

.tn-card--icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tn-card--icon .tn-card__icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.tn-card--icon .tn-card__body {
  min-width: 0;
  flex: 1;
}

.tn-card-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  /* grid-template-columns is set INLINE by bfCardGrid() based on
     count — repeat(min(count,6), 1fr). Do NOT set a default here. */
}

/* Batch G (G-5) — click-through affordance for KPI chips that opt in via
   opts.onClick (bfCard) / 5th-arg opts.onClick (_dashKpiCard). Pointer +
   subtle lift + accent focus ring so the interactivity is discoverable and
   keyboard-accessible. Non-clickable cards are unaffected. Cross-app. */
.tn-card--click,
.dash-kpi--click {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.tn-card--click:hover,
.dash-kpi--click:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .06);
  filter: brightness(1.02);
}
.tn-card--click:focus-visible,
.dash-kpi--click:focus-visible {
  outline: 2px solid var(--plan-accent, #2563eb);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tn-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tn-card-grid {
    grid-template-columns: 1fr !important;
  }
}

.tn-table-wrap {
  background: var(--surface2);
  border-radius: 8px;
  overflow-x: auto;
}

/* Legacy nested form: <div class="tn-table-wrap"><div class="tn-table-scroll">
   …</div></div> remains supported (Batch 1 migrations used it before the
   simplification). The inner .tn-table-scroll is a no-op overflow-x:auto
   so both nesting styles render identically. New migrations should use
   the single-level form: <div class="tn-table-wrap"><table class="tn-table">…</table></div>. */
.tn-table-wrap > .tn-table-scroll {
  overflow-x: auto;
}

.tn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.tn-table thead tr {
  background: var(--surface2);
}

.tn-table thead th {
  padding: 9px 12px;
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}

.tn-table tbody td {
  padding: 8px 12px;
}

.tn-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.tn-table tbody tr:last-child {
  border-bottom: 0;
}

.tn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tn-entries-count {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .04em;
  white-space: nowrap;
}