/* ============================================================
   LematCore — brand + layout theme for the modern web-app
   Distinct visual identity: deep emerald / gold, Ethiopian
   tri-color accent, Manrope type, dark sidebar, soft radii.
   Works WITH Material theming: no global background/layout
   overrides, so light/dark toggle and the responsive grid
   keep functioning. (Logo/favicon are swapped at the nginx
   asset layer, not here.)
   ============================================================ */
/* Manrope is SELF-HOSTED (/brand/fonts/) — never pull it from Google.
   fonts.gstatic.com hangs on some Ethiopian routes, which stalled first
   paint for minutes. Regenerate with setup/fetch-fonts.sh if the weights
   ever change. */
@import url("/brand/fonts/manrope-local.css");

:root {
  --lc-ink-900: #04180f;
  --lc-ink-800: #06281b;
  --lc-ink-700: #0b3b27;
  --lc-green-600: #0f5c38;
  --lc-green-500: #128a4c;
  --lc-green-400: #1fa860;
  --lc-gold: #f2b705;
  --lc-gold-soft: #ffd75e;
  --lc-red: #d94141;
  --lc-paper: #f2f7f4;
  --lc-mist: #cfe8da;
}

/* ---------- Typography: Manrope instead of Mifos' Roboto ---------- */
body,
.mat-typography,
.mat-toolbar,
.mat-card,
.mat-button, .mat-raised-button, .mat-flat-button, .mat-stroked-button,
.mat-table, .mat-form-field, .mat-select, .mat-menu-panel, .mat-list-item,
h1, h2, h3, h4, h5 {
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, .mat-display-1, .mat-headline {
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}

/* ============================================================
   HEADER — modern banking console: slim, near-black emerald,
   pill navigation, no Material "tab" underline.
   ============================================================ */
.mat-toolbar.mat-primary {
  background: #071f15 !important;
  color: var(--lc-paper) !important;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #1a8a4f, var(--lc-gold), var(--lc-red)) 1;
  box-shadow: 0 6px 24px rgba(2, 14, 8, 0.45);
}
.mat-toolbar-single-row {
  height: 60px !important;
  padding: 0 14px !important;
}
.mat-toolbar.mat-primary a,
.mat-toolbar.mat-primary button,
.mat-toolbar.mat-primary .mat-icon {
  color: var(--lc-paper) !important;
}

/* Header menus moved to the sidebar (lematx-nav.js) — hide the nav
   entirely; the hidden Configuration Wizard trigger is still clicked
   programmatically, which works on display:none elements. */
.mat-toolbar .mat-tab-nav-bar {
  display: none !important;
}

/* Nav: pills instead of tabs */
.mat-toolbar .mat-tab-link-container,
.mat-toolbar .mat-tab-links,
.mat-toolbar .mat-tab-header {
  background: transparent !important;
  border-bottom: none !important;
}
.mat-toolbar .mat-ink-bar {
  display: none !important;
}
.mat-toolbar .mat-tab-link {
  color: #cfe3d7 !important;
  opacity: 1 !important;
  height: 38px !important;
  min-width: 0 !important;
  margin: 0 3px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease;
}
.mat-toolbar .mat-tab-link:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
}
.mat-toolbar .mat-tab-link .ng-fa-icon {
  color: #7fbf9c;
  font-size: 0.9em;
}
.mat-toolbar .mat-tab-link:hover .ng-fa-icon {
  color: var(--lc-gold-soft);
}

/* Right-side controls: circular ghost buttons */
.mat-toolbar .mat-icon-button {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  margin: 0 3px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.mat-toolbar .mat-icon-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 215, 94, 0.45) !important;
}

/* Compact language-globe button duplicates the language pill on
   desktop (it exists for small screens) — hide it there */
@media (min-width: 960px) {
  .mat-toolbar button:has(.mat-icon.lg-icon) {
    display: none !important;
  }
}

/* Language selector: quiet pill, no Material underline/label */
.mat-toolbar .mat-form-field-underline,
.mat-toolbar .mat-form-field-label-wrapper,
.mat-toolbar .mat-form-field-subscript-wrapper {
  display: none !important;
}
.mat-toolbar .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}
.mat-toolbar .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 4px 16px !important;
  align-items: center;
}
.mat-toolbar .mat-form-field-infix {
  border-top: 0 !important;
  padding: 4px 0 !important;
  width: auto !important;
  min-width: 72px;
}
.mat-toolbar .mat-select-value,
.mat-toolbar .mat-select-arrow {
  color: var(--lc-paper) !important;
}

/* ============================================================
   DASHBOARD — KPI tiles + card grid (modern banking console).
   Upstream renders one 1558px-tall wrapper card holding an 861px
   chart, so the layout is rebuilt: wrapper loses its chrome and
   becomes a plain container, charts are capped, pies sit in a grid.
   ============================================================ */

/* KPI tiles (injected by lematx-dashboard.js with live API figures) */
.lc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}
.lc-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid rgba(6, 40, 27, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(6, 40, 27, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.lc-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(6, 40, 27, 0.12);
}
.lc-kpi-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.lc-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lc-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lc-kpi-label {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
.lc-kpi-loading {
  width: 46px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(6, 40, 27, 0.10), rgba(6, 40, 27, 0.04), rgba(6, 40, 27, 0.10));
  background-size: 200% 100%;
  animation: lc-shimmer 1.1s linear infinite;
}
@keyframes lc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* tile accent tones */
.lc-tone-green .lc-kpi-ic { background: rgba(18, 138, 76, 0.12); color: #128a4c; }
.lc-tone-gold  .lc-kpi-ic { background: rgba(242, 183, 5, 0.16); color: #a67c00; }
.lc-tone-teal  .lc-kpi-ic { background: rgba(13, 148, 136, 0.12); color: #0d9488; }
.lc-tone-blue  .lc-kpi-ic { background: rgba(37, 99, 235, 0.12);  color: #2563eb; }
.lc-tone-plum  .lc-kpi-ic { background: rgba(147, 51, 234, 0.12); color: #9333ea; }

.dark-theme .lc-kpi {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.dark-theme .lc-kpi-loading {
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04), rgba(255,255,255,0.10));
  background-size: 200% 100%;
}

/* Wrapper card -> plain layout container */
mifosx-dashboard > .container > mat-card.card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Search row: compact, not a 110px band */
mifosx-dashboard .search {
  height: auto !important;
  margin-bottom: 18px;
}
mifosx-dashboard .search .mat-card-content {
  padding: 0 !important;
}
mifosx-dashboard .search .mat-form-field-flex {
  background: #ffffff;
  border: 1px solid rgba(6, 40, 27, 0.10);
  border-radius: 12px;
  padding: 6px 14px !important;
}
mifosx-dashboard .search .mat-form-field-underline {
  display: none !important;
}
mifosx-dashboard .search .mat-form-field-infix {
  border-top: 0 !important;
}
.dark-theme mifosx-dashboard .search .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Charts: cap the runaway heights */
mifosx-dashboard .top-card,
mifosx-dashboard .trends-bar,
mifosx-dashboard mifosx-client-trends-bar,
mifosx-dashboard .top-card mat-card.card {
  height: auto !important;
  max-height: none !important;
}
mifosx-dashboard canvas {
  max-height: 300px !important;
}
mifosx-dashboard .top-card {
  margin-bottom: 18px;
}

/* Pie cards side by side, stacking on narrow screens */
mifosx-dashboard .bottom-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  height: auto !important;
}
mifosx-dashboard .bottom-card > div,
mifosx-dashboard .amount-disbursed,
mifosx-dashboard .amount-collected {
  width: auto !important;
  height: auto !important;
}

/* Inner widget cards: modern surface */
mifosx-dashboard .top-card mat-card.card,
mifosx-dashboard .bottom-card mat-card.card {
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 0 12px !important;
  box-shadow: 0 6px 20px rgba(6, 40, 27, 0.07) !important;
  border: 1px solid rgba(6, 40, 27, 0.06) !important;
}
.dark-theme mifosx-dashboard .top-card mat-card.card,
.dark-theme mifosx-dashboard .bottom-card mat-card.card {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Widget headers: single compact bar — title left, control right.
   Upstream stacks the office selector under the title, making a ~140px
   colour block. */
mifosx-dashboard .mat-card-header.header {
  background: linear-gradient(100deg, var(--lc-green-600), var(--lc-green-500)) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 18px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px 18px;
}
mifosx-dashboard .mat-card-header.header .mat-card-title,
mifosx-dashboard .mat-card-header.header h3 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
/* The office selector is nested INSIDE the <h3> with inline fxflex
   styles, so the title row is rebuilt here: text left, control right.
   Inline styles need !important to override. */
mifosx-dashboard .mat-card-header.header h3 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
}
mifosx-dashboard .mat-card-header.header h3 > div {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
}
mifosx-dashboard .mat-card-header.header h3 mat-form-field {
  flex: 0 0 auto !important;
  width: 210px !important;
  max-width: 210px !important;
}
mifosx-dashboard .mat-card-header.header .ng-fa-icon {
  flex: 0 0 auto;
}
/* office / filter select: inline pill, no Material underline or label */
mifosx-dashboard .mat-card-header.header .mat-form-field {
  width: auto !important;
  max-width: 230px;
  margin: 0 !important;
  font-size: 0.85rem;
}
mifosx-dashboard .mat-card-header.header .mat-form-field-wrapper {
  padding-bottom: 0 !important;
  margin: 0 !important;
}
mifosx-dashboard .mat-card-header.header .mat-form-field-underline,
mifosx-dashboard .mat-card-header.header .mat-form-field-subscript-wrapper,
mifosx-dashboard .mat-card-header.header .mat-form-field-label-wrapper {
  display: none !important;
}
mifosx-dashboard .mat-card-header.header .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 2px 14px !important;
  align-items: center;
}
mifosx-dashboard .mat-card-header.header .mat-form-field-infix {
  border-top: 0 !important;
  padding: 4px 0 !important;
  width: auto !important;
  min-width: 120px;
}

/* Tighten the stack: upstream leaves ~100px of dead space here */
mifosx-dashboard .search {
  margin-bottom: 14px !important;
}
mifosx-dashboard .top-card,
mifosx-dashboard .trends-bar {
  padding: 0 !important;
}
mifosx-dashboard .top-card mat-card.card > .mat-card-content,
mifosx-dashboard .bottom-card mat-card.card > .mat-card-content {
  padding: 12px 16px !important;
  margin: 0 !important;
}
mifosx-dashboard .mat-card-header.header .mat-card-title,
mifosx-dashboard .mat-card-header.header .mat-icon,
mifosx-dashboard .mat-card-header.header .ng-fa-icon,
mifosx-dashboard .mat-card-header.header .mat-form-field-label,
mifosx-dashboard .mat-card-header.header .mat-select-value,
mifosx-dashboard .mat-card-header.header .mat-select-arrow {
  color: #ffffff !important;
}
mifosx-dashboard .mat-card-header.header .mat-form-field-underline {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

/* Home card: brand mark is square — keep it modest, not full-width */
mifosx-home img.mat-card-image {
  max-height: 140px !important;
  width: auto !important;
  display: block;
  margin: 1.25rem auto !important;
  object-fit: contain;
}

/* ============================================================
   SIDEBAR — modern banking panel: flat near-black, user card,
   overline section labels, gold active indicator.
   ============================================================ */
.mat-drawer, .mat-sidenav {
  background: #05170f !important;
  color: var(--lc-mist) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Brand block: single dense row (app ships a 2rem wordmark that eats
   ~126px of vertical space before the nav even starts) */
.mat-sidenav .app-brand {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  min-height: 0 !important;
  outline: none;
}
/* the block carries tabindex=0; show a brand-coloured ring only for
   keyboard focus instead of the default blue box on click */
.mat-sidenav .app-brand:focus-visible {
  outline: 2px solid var(--lc-gold);
  outline-offset: -2px;
  border-radius: 10px;
}
.mat-sidenav .app-logo {
  max-height: 34px;
  width: auto;
  margin: 0 !important;
  border-radius: 9px;
  flex: 0 0 auto;
}
.mat-sidenav .app-logo-text {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* User card: horizontal avatar + name + actions (the stacked default
   was 173px tall, which pushed navigation off-screen on phones) */
.mat-sidenav .app-user {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 4px 12px 10px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  text-align: left !important;
}
.mat-sidenav .app-user-photo {
  flex: 0 0 auto;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.mat-sidenav .app-user-photo img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--lc-gold);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.18);
}
.mat-sidenav .app-user-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: #eaf4ee !important;
  font-weight: 600;
  font-size: 0.75rem !important;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}
.mat-sidenav .app-user-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.mat-sidenav .app-user-controls .mat-icon-button {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.mat-sidenav .app-user-controls .ng-fa-icon {
  color: #9fceb4;
  font-size: 0.85em;
}

/* Compact rail: avatar only, centered */
.sidebar-compact .app-user {
  justify-content: center;
  padding: 8px 0 !important;
  margin: 4px 8px 10px !important;
}
.sidebar-compact .app-user-name,
.sidebar-compact .app-user-controls {
  display: none !important;
}
.sidebar-compact .app-brand {
  justify-content: center;
  padding: 12px 0 !important;
}

/* Section labels: overline style, no divider line */
.mat-sidenav .nav-item-sep .mat-divider {
  display: none !important;
}
.mat-sidenav .nav-item-sep span,
.mat-sidenav .icon-menu-title {
  color: #5f8f75 !important;
  font-size: 0.66rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0 16px;
}

/* Nav items: rounded rows, gold active bar */
.mat-sidenav .mat-nav-list .mat-list-item {
  color: #d7e9de !important;
  border-radius: 12px !important;
  margin: 3px 10px;
  width: auto !important;
  height: 42px !important;
  transition: background 0.16s ease;
}
.mat-sidenav .mat-nav-list .mat-list-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
.mat-sidenav .mat-nav-list .mat-list-item .mat-list-icon,
.mat-sidenav .mat-nav-list .mat-list-item .ng-fa-icon {
  color: #7fbf9c !important;
}
.mat-sidenav .mat-nav-list .mat-list-item:hover .ng-fa-icon {
  color: var(--lc-gold-soft) !important;
}
.mat-sidenav .mat-nav-list .mat-list-item.active-menu {
  background: linear-gradient(90deg, rgba(31, 168, 96, 0.28), rgba(31, 168, 96, 0.05)) !important;
  box-shadow: inset 3px 0 0 var(--lc-gold);
}
.mat-sidenav .mat-nav-list .mat-list-item.active-menu .ng-fa-icon {
  color: var(--lc-gold-soft) !important;
}

/* Icon-menu tiles (Frequently Accessed shortcuts) */
.mat-sidenav .icon-menu .mat-icon-button,
.mat-sidenav .icon-menu button {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cfe3d7 !important;
}

/* ------------------------------------------------------------
   Hover-to-open rail. In compact mode the panel is 64px and the
   content keeps a 64px margin, so widening the drawer overlays the
   content instead of pushing it — no layout shift. Native row labels
   are merely clipped at 64px, so they reappear on their own; only the
   brand text and our own labels need explicit re-showing.
   Guarded to real pointers so touch devices keep tap-to-toggle.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  mat-sidenav.sidebar-panel {
    transition: width 0.18s ease;
    will-change: width;
  }
  mat-sidenav.sidebar-compact:hover {
    width: 240px !important;
    z-index: 6;
    box-shadow: 8px 0 28px rgba(2, 12, 7, 0.45);
  }
  mat-sidenav.sidebar-compact:hover .app-logo-text {
    display: block !important;
  }
  mat-sidenav.sidebar-compact:hover .lc-sec-head {
    display: flex !important;
  }
  mat-sidenav.sidebar-compact:hover .lc-sec-body {
    display: none !important;
  }
  mat-sidenav.sidebar-compact:hover .lc-sec.lc-open .lc-sec-body {
    display: block !important;
    padding-left: 14px;
    margin: 2px 0 8px;
  }
  mat-sidenav.sidebar-compact:hover .lc-sec-body::before {
    display: block;
  }
  mat-sidenav.sidebar-compact:hover .lc-group-chev {
    display: grid !important;
  }
  mat-sidenav.sidebar-compact:hover .lc-kids {
    display: none !important;
    margin-left: 30px;
  }
  mat-sidenav.sidebar-compact:hover .lc-group.lc-open .lc-kids {
    display: block !important;
  }
  mat-sidenav.sidebar-compact:hover .lc-kids::before {
    display: block;
  }
  mat-sidenav.sidebar-compact:hover a.lc-subitem {
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }
  mat-sidenav.sidebar-compact:hover .app-user {
    justify-content: flex-start;
    padding: 8px 10px !important;
    margin: 4px 12px 10px !important;
  }
  mat-sidenav.sidebar-compact:hover .app-user-name,
  mat-sidenav.sidebar-compact:hover .app-user-controls {
    display: flex !important;
  }
  mat-sidenav.sidebar-compact:hover .app-brand {
    justify-content: flex-start;
    padding: 12px 14px !important;
  }
  mat-sidenav.sidebar-compact:hover a.lc-item {
    justify-content: flex-start !important;
    padding: 0 12px !important;
    margin: 3px 10px !important;
  }
  mat-sidenav.sidebar-compact:hover a.lc-item .lc-label {
    display: inline !important;
  }
  /* keep the user card and section text from being clipped mid-reveal */
  mat-sidenav.sidebar-compact:hover .app-user,
  mat-sidenav.sidebar-compact:hover .navigation-panel {
    overflow: visible;
  }
  /* Material's drawer container re-measures the drawer and pushes the
     content margin to 240px, which would make the page jump on every
     hover. Pin the margin to the rail width so the panel truly overlays.
     (!important beats the container's inline margin-left.) */
  mat-sidenav-container:has(mat-sidenav.sidebar-compact:hover) > .mat-drawer-content,
  .mat-drawer-container:has(mat-sidenav.sidebar-compact:hover) > .mat-drawer-content {
    margin-left: 64px !important;
    transition: none !important;
  }
}

/* The app's own "Main Items" list is now duplicated by our categories
   (Dashboard, Navigation, Notifications, Checker Inbox, Collection Sheet,
   Frequent Postings, Create Journal Entry, Chart of Accounts). Hide it —
   Keyboard Shortcuts and Help remain reachable because lematx-nav.js
   click-proxies those rows, which works on display:none elements. */
mifosx-sidenav .app-sidenav > div:first-child,
mifosx-sidenav .app-sidenav > .nav-item-sep,
mifosx-sidenav .app-sidenav > .icon-menu,
mifosx-sidenav .app-sidenav > mat-nav-list {
  display: none !important;
}

/* Injected category nav (lematx-nav.js): collapsible sections */
.lc-nav {
  padding-bottom: 18px;
}

/* Section header: the MAIN MENU level — big, bold, instantly scannable */
.lc-sec {
  margin: 1px 0;
}
.lc-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #e2f0e8;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.lc-sec-head:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
/* icon chip gives every category a strong visual anchor */
.lc-sec-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 16px;
  border-radius: 10px;
  color: #8fd0ab;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.lc-sec-head:hover .lc-sec-ic {
  color: var(--lc-gold-soft);
  border-color: rgba(255, 215, 94, 0.35);
}
.lc-sec-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-sec-count {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #b9d8c8;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lc-sec-chev {
  flex: 0 0 auto;
  font-size: 17px;
  color: #6fb392;
  transition: transform 0.18s ease;
}
.lc-sec.lc-open .lc-sec-chev {
  transform: rotate(180deg);
}
/* open section: emerald-tinted chip + gold hairline so the active
   area of the menu is obvious at a glance */
.lc-sec.lc-open > .lc-sec-head {
  color: #ffffff;
  background: rgba(31, 168, 96, 0.10);
}
.lc-sec.lc-open > .lc-sec-head .lc-sec-ic {
  background: rgba(31, 168, 96, 0.22);
  border-color: rgba(31, 168, 96, 0.40);
  color: var(--lc-gold-soft);
}
.lc-sec.lc-open > .lc-sec-head .lc-sec-count {
  background: rgba(31, 168, 96, 0.25);
  color: #d9f4e5;
}
/* items indent under the big header so the two levels read clearly */
.lc-sec-body {
  position: relative;
  margin: 2px 0 8px;
  padding-left: 14px;
}
.lc-sec-body::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 2px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgba(127, 191, 156, 0.16);
}
.lc-sec-body a.lc-item {
  font-size: 0.84rem;
}

/* Section body: collapsed by default */
.lc-sec-body {
  display: none;
}
.lc-sec.lc-open .lc-sec-body {
  display: block;
}
a.lc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d7e9de !important;
  text-decoration: none !important;
  border-radius: 12px;
  margin: 3px 10px;
  padding: 0 12px;
  height: 42px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.16s ease;
}
a.lc-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
a.lc-item .lc-ic {
  color: #7fbf9c;
  font-size: 19px;
  width: 22px;
  text-align: center;
}
a.lc-item:hover .lc-ic {
  color: var(--lc-gold-soft);
}
a.lc-item.lc-active {
  background: linear-gradient(90deg, rgba(31, 168, 96, 0.28), rgba(31, 168, 96, 0.05));
  box-shadow: inset 3px 0 0 var(--lc-gold);
}
a.lc-item.lc-active .lc-ic {
  color: var(--lc-gold-soft);
}

/* ---- Sub-groups (tab-like children: tax config, delinquency,
        external services) ---- */
.lc-group-head {
  display: flex;
  align-items: center;
}
.lc-group-head a.lc-item {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
}
.lc-group-chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6fb392;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.18s ease;
}
.lc-group-chev:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--lc-gold-soft);
}
.lc-group-chev .material-icons {
  font-size: 18px;
  transition: transform 0.18s ease;
}
.lc-group.lc-open .lc-group-chev .material-icons {
  transform: rotate(180deg);
}
.lc-kids {
  display: none;
  position: relative;
  margin-left: 30px;
  padding-left: 2px;
}
/* guide line for the sub-level */
.lc-kids::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: rgba(127, 191, 156, 0.25);
}
.lc-group.lc-open .lc-kids {
  display: block;
}
a.lc-subitem {
  height: 36px;
  font-size: 0.82rem;
  margin: 2px 10px 2px 0;
}
a.lc-subitem .lc-ic {
  font-size: 16px;
}

/* Compact (icon-only) rail: hide section headers, show every icon flat
   so nothing becomes unreachable while collapsed */
.sidebar-compact .lc-sec-head,
.sidebar-compact .lc-group-chev,
.sidebar-compact a.lc-item .lc-label {
  display: none;
}
.sidebar-compact .lc-sec-body,
.sidebar-compact .lc-kids {
  display: block !important;
}
.sidebar-compact .lc-sec-body {
  padding-left: 0;
  margin: 0;
}
.sidebar-compact .lc-sec-body::before {
  display: none;
}
.sidebar-compact .lc-kids {
  margin-left: 0;
  padding-left: 0;
}
.sidebar-compact .lc-kids::before {
  display: none;
}
.sidebar-compact a.lc-item,
.sidebar-compact a.lc-subitem {
  justify-content: center;
  padding: 0;
  margin: 3px 8px;
}

/* Thin scrollbar inside the drawer */
.mat-drawer-inner-container::-webkit-scrollbar {
  width: 6px;
}
.mat-drawer-inner-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
}

/* ---------- Buttons: emerald, softly rounded ---------- */
.mat-raised-button, .mat-flat-button, .mat-stroked-button {
  border-radius: 10px !important;
}
.mat-raised-button.mat-primary, .mat-flat-button.mat-primary,
.mat-fab.mat-primary, .mat-mini-fab.mat-primary {
  background-color: var(--lc-green-600) !important;
  color: #ffffff !important;
}
.mat-raised-button.mat-primary:hover, .mat-flat-button.mat-primary:hover {
  background-color: var(--lc-green-500) !important;
}
.mat-button.mat-primary, .mat-stroked-button.mat-primary,
.mat-icon-button.mat-primary {
  color: var(--lc-green-500) !important;
}
.mat-stroked-button.mat-primary {
  border-color: var(--lc-green-500) !important;
}

/* ---------- Form controls & indicators: emerald instead of Mifos blue ---------- */
.mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: var(--lc-green-500) !important;
}
.mat-form-field.mat-focused .mat-form-field-label,
.mat-form-field.mat-focused .mat-form-field-prefix,
.mat-select-focused .mat-select-arrow {
  color: var(--lc-green-500) !important;
}
.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: var(--lc-green-500) !important;
}
.mat-radio-button .mat-radio-inner-circle {
  background-color: var(--lc-green-500) !important;
}
.mat-radio-checked .mat-radio-outer-circle {
  border-color: var(--lc-green-500) !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: var(--lc-green-500) !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(18, 138, 76, 0.45) !important;
}
.mat-progress-spinner circle, .mat-spinner circle {
  stroke: var(--lc-green-500) !important;
}
.mat-progress-bar-fill::after {
  background-color: var(--lc-green-500) !important;
}
.mat-tab-group .mat-ink-bar, .mat-tab-nav-bar .mat-ink-bar {
  background-color: var(--lc-gold) !important;
  height: 3px !important;
}
.mat-tab-label-active {
  opacity: 1 !important;
}
.mat-badge-content {
  background: var(--lc-red) !important;
}

/* ---------- Surfaces: softer, rounder ---------- */
.mat-card {
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(6, 40, 27, 0.10) !important;
}
.mat-menu-panel, .mat-select-panel, .mat-dialog-container {
  border-radius: 12px !important;
}
.mat-table {
  border-radius: 12px;
  overflow: hidden;
}
.mat-header-cell {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* ---------- Bootstrap splash: LematCore mark, not the Mifos diamond ---------- */
mifosx-web-app > .loader-wrapper {
  background: url("/brand/lemat-mark-192.png") center / 120px 120px no-repeat;
  animation: lemat-pulse 1.2s ease-in-out infinite;
}
mifosx-web-app > .loader-wrapper .triangle {
  display: none !important;
}
@keyframes lemat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================================
   LOGIN — modern split screen: image panel + clean sign-in card
   ============================================================ */

/* Split proportions: give the form column more breathing room */
mifosx-login .cover {
  flex: 1 1 60% !important;
  max-width: 60% !important;
  background: url("/brand/cover-ethiopia.png") center 62% / cover no-repeat !important;
  position: relative;
}
/* Scrim so the wordmark stays legible over any part of the photo */
mifosx-login .cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 18, 11, 0.72), rgba(3, 18, 11, 0.28) 55%, rgba(3, 18, 11, 0.55));
}
mifosx-login .cover-content {
  position: relative;
  z-index: 1;
  padding: 0 clamp(2rem, 6vw, 6rem);
}

/* Remove upstream community copy and links — pure LematCore brand */
mifosx-login .cover-description,
mifosx-login .login-container mat-list,
a[href*="mifos" i],
a[href*="openmf" i] {
  display: none !important;
}

mifosx-login .cover-title {
  color: #ffffff;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}
/* Tri-color rule under the wordmark */
mifosx-login .cover-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #1a8a4f, var(--lc-gold), var(--lc-red));
}
mifosx-login .cover-content::after {
  content: "Modern core banking, built for Ethiopia.";
  display: block;
  margin-top: 1.1rem;
  max-width: 30ch;
  color: #e4f0e9;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* ---------- Form column ---------- */
mifosx-login .login-container {
  flex: 1 0 40% !important;
  max-width: 40% !important;
  padding: 0 clamp(1.5rem, 3.5vw, 3.25rem);
  justify-content: center !important;
}
/* Top-right controls: compact, quiet */
mifosx-login .login-container > div:first-child {
  flex: 0 0 auto !important;
  padding-top: 0.5rem;
}
mifosx-login mifosx-language-selector .mat-form-field-underline,
mifosx-login mifosx-language-selector .mat-form-field-subscript-wrapper,
mifosx-login mifosx-language-selector .mat-form-field-label-wrapper {
  display: none !important;
}
mifosx-login mifosx-language-selector .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}
mifosx-login mifosx-language-selector .mat-form-field-infix {
  border-top: 0 !important;
  padding: 6px 0 !important;
  width: auto !important;
  min-width: 68px;
}

/* Logo block */
mifosx-login .login-container > div:nth-child(2) {
  flex: 0 0 auto !important;
  margin: 0.5rem 0 1.5rem;
}
mifosx-login img.img-container {
  max-height: 72px;
  width: auto;
  border-radius: 16px;
}

/* Sign-in heading, injected above the form */
mifosx-login mifosx-login-form {
  display: block;
  width: 100%;
  max-width: 380px;
}
mifosx-login mifosx-login-form::before {
  content: "Welcome back";
  display: block;
  margin: 0.5rem 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
mifosx-login #login-form {
  width: 100%;
}
mifosx-login .login-container > div:nth-child(4) {
  flex: 0 1 auto !important;
}

/* Tenant selector: quiet, secondary */
mifosx-login mifosx-tenant-selector {
  width: 100%;
  max-width: 380px;
}
mifosx-login mifosx-tenant-selector .mat-form-field {
  width: 100%;
}

/* Filled, rounded fields (tenant + username + password) */
mifosx-login mifosx-tenant-selector .mat-form-field-flex,
mifosx-login .login-input .mat-form-field-flex {
  background: rgba(16, 92, 58, 0.06);
  border: 1px solid rgba(16, 92, 58, 0.18);
  border-radius: 12px;
  padding: 14px 14px 4px !important;
  align-items: center;
  transition: border-color 0.16s ease, background 0.16s ease;
}
mifosx-login mifosx-tenant-selector .mat-form-field-flex:hover,
mifosx-login .login-input .mat-form-field-flex:hover {
  border-color: rgba(16, 92, 58, 0.34);
}
mifosx-login .mat-focused .mat-form-field-flex {
  border-color: var(--lc-green-500) !important;
  background: rgba(16, 92, 58, 0.09);
  box-shadow: 0 0 0 3px rgba(18, 138, 76, 0.14);
}
mifosx-login mifosx-tenant-selector .mat-form-field-underline,
mifosx-login .login-input .mat-form-field-underline {
  display: none !important;
}
mifosx-login mifosx-tenant-selector .mat-form-field-infix,
mifosx-login .login-input .mat-form-field-infix {
  border-top: 0 !important;
  padding: 2px 0 8px !important;
}
mifosx-login .login-input,
mifosx-login mifosx-tenant-selector .mat-form-field {
  width: 100% !important;
  max-width: 380px;
  margin-bottom: 0.35rem;
}
/* Material fixes a 180px infix width, which pushes the select arrow
   outside our rounded box — let it size to the field instead. */
mifosx-login .mat-form-field-infix {
  width: auto !important;
}
mifosx-login .mat-form-field-flex {
  box-sizing: border-box;
}
/* Tighten the stacked flex rows the app spaces with fxflex */
mifosx-login .login-container > div:nth-child(3) {
  flex: 0 0 auto !important;
  margin-bottom: 0.25rem;
}
mifosx-login .mat-form-field-prefix .ng-fa-icon {
  color: var(--lc-green-500);
}

/* Remember me + login button */
mifosx-login .mat-checkbox {
  margin: 0.35rem 0 1.1rem;
}
mifosx-login #login-form button[type="submit"],
mifosx-login #login-form .mat-raised-button,
mifosx-login #login-form .mat-flat-button {
  width: 100% !important;
  height: 48px;
  border-radius: 12px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--lc-green-600), var(--lc-green-500)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 92, 58, 0.28) !important;
}
mifosx-login #login-form button[disabled] {
  background: rgba(16, 92, 58, 0.18) !important;
  color: rgba(4, 24, 15, 0.45) !important;
  box-shadow: none !important;
}
mifosx-login #login-form .mat-button {
  margin-top: 0.5rem;
  font-weight: 600 !important;
  color: var(--lc-green-500) !important;
}

/* Version/build footer belongs in-app, not on the sign-in screen */
mifosx-login mifosx-footer {
  display: none !important;
}

/* Small screens: cover hides, so show the brand name in the form column */
@media (max-width: 599px) {
  mifosx-login .login-container {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  mifosx-login .login-container > div:nth-child(2)::after {
    content: "LematCore";
    display: block;
    margin-left: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
}

/* Dark theme: app sets .dark-theme on <body> and on mifosx-web-app */
.dark-theme mifosx-login mifosx-tenant-selector .mat-form-field-flex,
.dark-theme mifosx-login .login-input .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.dark-theme mifosx-login mifosx-tenant-selector .mat-form-field-flex:hover,
.dark-theme mifosx-login .login-input .mat-form-field-flex:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.dark-theme mifosx-login .mat-focused .mat-form-field-flex {
  background: rgba(31, 168, 96, 0.14);
  box-shadow: 0 0 0 3px rgba(31, 168, 96, 0.20);
}
/* Links and secondary actions need a lighter green on dark */
.dark-theme mifosx-login #login-form .mat-button,
.dark-theme .mat-button.mat-primary,
.dark-theme .mat-stroked-button.mat-primary,
.dark-theme .mat-icon-button.mat-primary {
  color: var(--lc-green-400) !important;
}
.dark-theme mifosx-login #login-form button[disabled] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.42) !important;
}

/* ============================================================
   STICKY FOOTER — the scrolling shell container is display:block, so
   on short pages the footer sat directly under the content with dead
   space beneath it. Turn the container into a flex column and push the
   footer to the bottom; on tall pages it simply scrolls below content.
   ============================================================ */
mat-sidenav-content.mat-drawer-content {
  display: flex !important;
  flex-direction: column !important;
}
/* never let flex shrink page content when it overflows */
mat-sidenav-content.mat-drawer-content > * {
  flex: 0 0 auto;
}
mat-sidenav-content.mat-drawer-content > mifosx-footer {
  margin-top: auto !important;
  padding-top: 20px;
}

/* ============================================================
   FOOTER — aligned two-column meta block.
   Upstream renders an unaligned table whose rows mix left/right/
   centre cells, and hardcodes "Mifos"/"Fineract" version rows in the
   compiled template. Row 2 (Fineract) is removed, row 1 is relabelled
   to the product name, and the whole block is laid out on a grid so
   labels and values line up.
   ============================================================ */
mifosx-footer #footer {
  margin-bottom: 16px !important;
}
mifosx-footer .content {
  margin-bottom: 12px !important;
}
mifosx-footer table.versions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 18px;
  justify-content: center;
  align-items: baseline;
  margin: 0 auto;
  font-size: 0.78rem;
}
mifosx-footer table.versions tbody {
  display: contents;
}
mifosx-footer table.versions tr {
  display: contents;
}
mifosx-footer table.versions td {
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap;
}
/* labels right-aligned, values left-aligned => a clean centre gutter */
mifosx-footer table.versions td:first-child {
  text-align: right !important;
  opacity: 0.65;
}
mifosx-footer table.versions td:last-child,
mifosx-footer table.versions td.right,
mifosx-footer table.versions td.center {
  text-align: left !important;
  font-weight: 600;
}
/* row 2 is the hardcoded "Fineract <version>" row — remove it */
mifosx-footer table.versions tr:nth-child(2) {
  display: none !important;
}
/* row 1 label is the hardcoded "Mifos" string — relabel to the product */
mifosx-footer table.versions tr:nth-child(1) td:first-child {
  font-size: 0 !important;
}
mifosx-footer table.versions tr:nth-child(1) td:first-child::after {
  content: "LematCore version";
  font-size: 0.78rem;
}
/* the URL row spans both columns and should stay centred */
mifosx-footer table.versions tr:nth-child(3) td {
  grid-column: 1 / -1;
  text-align: center !important;
  opacity: 0.8;
}
mifosx-footer .business-date b {
  color: var(--lc-green-500);
}
.dark-theme mifosx-footer .business-date b {
  color: var(--lc-green-400);
}
/* credit line: "LematCore by Mifos" is hardcoded — replace the text */
mifosx-footer p.footer-content {
  font-size: 0 !important;
  line-height: 0;
  margin: 0 !important;
}
mifosx-footer p.footer-content::after {
  content: "LematCore — Core Banking Platform";
  font-size: 0.76rem;
  line-height: normal;
  opacity: 0.7;
}
mifosx-footer .divider {
  width: min(420px, 80%);
  opacity: 0.5;
}

/* Password rule checklist on the Create/Edit User form (lematx-nav.js).
   The app's own error text omits the 12-char minimum and the
   no-adjacent-repeats rule, which is what actually blocks people. */
.lc-pw-rules {
  margin: 2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(6, 40, 27, 0.10);
  border-radius: 10px;
  background: rgba(18, 138, 76, 0.04);
  font-size: 0.78rem;
  line-height: 1.5;
}
.lc-pw-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.7;
}
.lc-pw-rule .material-icons {
  font-size: 15px;
  color: #98a7b5;
}
.lc-pw-rule.lc-pw-ok {
  opacity: 1;
  color: var(--lc-green-500);
  font-weight: 600;
}
.lc-pw-rule.lc-pw-ok .material-icons {
  color: var(--lc-green-500);
}
.dark-theme .lc-pw-rules {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.dark-theme .lc-pw-rule.lc-pw-ok,
.dark-theme .lc-pw-rule.lc-pw-ok .material-icons {
  color: var(--lc-green-400);
}

/* ============================================================
   GLOBAL SEARCH (header) — the app hides the field behind an icon and
   gives it no label. lematx-nav.js opens it and adds a placeholder;
   this styles it as a proper, obvious search box.
   ============================================================ */
mifosx-search-tool {
  display: flex !important;
  align-items: center;
}
mifosx-search-tool .search-bar {
  align-items: center;
}
mifosx-search-tool .mat-form-field {
  width: clamp(190px, 26vw, 340px);
  margin-right: 6px !important;
}
mifosx-search-tool .mat-form-field-wrapper {
  padding-bottom: 0 !important;
  margin: 0 !important;
}
mifosx-search-tool .mat-form-field-underline,
mifosx-search-tool .mat-form-field-subscript-wrapper,
mifosx-search-tool .mat-form-field-label-wrapper {
  display: none !important;
}
mifosx-search-tool .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 3px 14px !important;
  align-items: center;
  transition: background 0.16s ease, border-color 0.16s ease;
}
mifosx-search-tool .mat-form-field-flex:hover {
  background: rgba(255, 255, 255, 0.14);
}
mifosx-search-tool .mat-focused .mat-form-field-flex {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 215, 94, 0.5);
}
mifosx-search-tool .mat-form-field-infix {
  border-top: 0 !important;
  padding: 5px 0 !important;
}
mifosx-search-tool input {
  color: var(--lc-paper) !important;
  caret-color: var(--lc-gold-soft);
  font-size: 0.85rem;
}
mifosx-search-tool input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.82rem;
}
/* the trailing icon buttons inside the tool stay compact */
mifosx-search-tool button {
  flex: 0 0 auto;
}
/* narrow screens: let the toolbar breathe, search collapses to its icon */
@media (max-width: 700px) {
  mifosx-search-tool .mat-form-field {
    width: 150px;
  }
}

/* Language selector: only one locale is configured, so the control is
   informational — keep it quiet rather than looking interactive. */
.mat-toolbar mifosx-language-selector .mat-select-arrow {
  opacity: 0.35;
}

/* ============================================================
   DASHBOARD FINANCIAL WIDGETS (lematx-widgets.js)
   Money tiles + portfolio donut + ledger bars. All values are live
   from the API; charts are inline SVG/CSS with no external library.
   ============================================================ */
.lc-fin {
  margin: 0 0 22px;
}

/* ---- currency tiles ---- */
.lc-mtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.lc-mtile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgba(6, 40, 27, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(6, 40, 27, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.lc-mtile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(6, 40, 27, 0.12);
}
.lc-mtile-ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
}
.lc-mtile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lc-mtile-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.lc-mtile-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.lc-mtile-num {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lc-mtile-unit {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.55;
}
.lc-mtile-note {
  margin-top: 3px;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* ---- widget cards ---- */
.lc-wrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
}
.lc-wcard {
  background: #ffffff;
  border: 1px solid rgba(6, 40, 27, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(6, 40, 27, 0.07);
  padding: 16px 18px 20px;
}
.lc-wcard-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lc-wcard-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lc-wcard-sub {
  font-size: 0.72rem;
  opacity: 0.55;
}
.lc-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.5;
}

/* ---- donut ---- */
.lc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lc-donut {
  position: relative;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
}
.lc-chart-svg {
  width: 168px;
  height: 168px;
  display: block;
}
.lc-donut-track {
  stroke: rgba(6, 40, 27, 0.07);
}
.lc-donut-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lc-donut-total {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.lc-donut-cur {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.55;
}
.lc-legend {
  flex: 1 1 160px;
  min-width: 0;
}
.lc-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.8rem;
}
.lc-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.lc-legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
}
.lc-legend-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- horizontal bars ---- */
.lc-bars {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lc-bar-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}
.lc-bar-label {
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(6, 40, 27, 0.07);
  overflow: hidden;
}
.lc-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.lc-bar-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- dark theme ---- */
.dark-theme .lc-mtile,
.dark-theme .lc-wcard {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.dark-theme .lc-donut-track,
.dark-theme .lc-bar-track {
  stroke: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.10);
}