mkdir -p ~/mifos-stack/branding-assets
cat > ~/mifos-stack/branding-assets/fanos-modern.css << 'FANOS_END'
/* =====================================================================
   Fanos Modern — design layer for Fanos Solutions (Mifos X web app)

   Design intent
   - A calm, neutral working surface for staff who spend all day in it.
   - Yellow is reserved for actions and focus, so it always means "do this".
   - One signature element: page titles set in Cormorant Garamond,
     the Fanos brand serif. Everything else stays quiet and data-first.
   - Tabular numbers everywhere money and counts appear.
   - Radius follows hierarchy: containers 12px, controls 8px, chips round.

   Safe by design: no layout rewiring, no changes to icon fonts.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --fx-ink:        #17130e;
  --fx-ink-2:      #4a4238;
  --fx-muted:      #7a7064;
  --fx-canvas:     #f2f1ee;
  --fx-surface:    #ffffff;
  --fx-sunken:     #f8f7f5;
  --fx-line:       #e3dfd8;
  --fx-gold:       #F0B90B;   /* primary: Binance yellow */
  --fx-gold-deep:  #8A6A00;   /* yellow is unreadable as text on white; use this amber for text/links */
  --fx-on-gold:    #181A20;   /* text on yellow fills */
  --fx-gold-wash:  rgba(240, 185, 11, 0.14);
  --fx-night:      #0a0805;

  --fx-font:    "IBM Plex Sans", "Noto Sans Ethiopic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-display: "Cormorant Garamond", "Noto Serif Ethiopic", Georgia, serif;

  --fx-r-lg: 12px;
  --fx-r-md: 8px;
  --fx-shadow-pop: 0 14px 36px rgba(23, 19, 14, 0.16), 0 2px 6px rgba(23, 19, 14, 0.08);

  /* Angular Material component tokens */
  --mdc-filled-button-container-color:      var(--fx-gold);
  --mdc-filled-button-label-text-color:     var(--fx-on-gold);
  --mdc-protected-button-container-color:   var(--fx-gold);
  --mdc-protected-button-label-text-color:  var(--fx-on-gold);
  --mdc-outlined-button-outline-color:      var(--fx-line);
  --mdc-outlined-button-label-text-color:   var(--fx-ink);
  --mdc-text-button-label-text-color:       var(--fx-gold-deep);

  --mdc-filled-text-field-container-color:            var(--fx-sunken);
  --mdc-filled-text-field-focus-active-indicator-color: var(--fx-gold-deep);
  --mdc-filled-text-field-focus-label-text-color:     var(--fx-gold-deep);
  --mdc-filled-text-field-caret-color:                var(--fx-gold-deep);
  --mdc-outlined-text-field-focus-outline-color:      var(--fx-gold-deep);
  --mdc-outlined-text-field-focus-label-text-color:   var(--fx-gold-deep);
  --mdc-outlined-text-field-caret-color:              var(--fx-gold-deep);
  --mat-select-focused-arrow-color:                   var(--fx-gold-deep);
  --mat-option-selected-state-label-text-color:       var(--fx-gold-deep);

  --mdc-tab-indicator-active-indicator-color:         var(--fx-gold-deep);
  --mat-tab-header-active-label-text-color:           var(--fx-ink);
  --mat-tab-header-active-focus-label-text-color:     var(--fx-ink);
  --mat-tab-header-active-hover-label-text-color:     var(--fx-ink);

  --mdc-checkbox-selected-icon-color:        var(--fx-gold-deep);
  --mdc-checkbox-selected-focus-icon-color:  var(--fx-gold-deep);
  --mdc-checkbox-selected-hover-icon-color:  var(--fx-gold-deep);
  --mdc-radio-selected-icon-color:           var(--fx-gold-deep);
  --mdc-switch-selected-handle-color:        var(--fx-gold-deep);
  --mdc-switch-selected-track-color:         var(--fx-gold);
  --mdc-circular-progress-active-indicator-color: var(--fx-gold-deep);
}

/* Dark mode (the app adds a dark-theme class when switched) */
body.dark-theme, .dark-theme {
  --fx-ink:        #f1ebe2;
  --fx-ink-2:      #cfc6b8;
  --fx-muted:      #9a9083;
  --fx-canvas:     #12100d;
  --fx-surface:    #1b1814;
  --fx-sunken:     #221e19;
  --fx-line:       #302a23;
  --fx-gold-wash:  rgba(240, 185, 11, 0.16);
  --fx-gold-deep:  #F0B90B;   /* on dark backgrounds the yellow itself is readable */

  --mdc-filled-button-container-color:     var(--fx-gold);
  --mdc-filled-button-label-text-color:    var(--fx-on-gold);
  --mdc-protected-button-container-color:  var(--fx-gold);
  --mdc-protected-button-label-text-color: var(--fx-on-gold);
  --mdc-text-button-label-text-color:      var(--fx-gold);
  --mdc-outlined-button-label-text-color:  var(--fx-ink);
  --mdc-filled-text-field-focus-active-indicator-color: var(--fx-gold);
  --mdc-filled-text-field-focus-label-text-color:       var(--fx-gold);
  --mdc-outlined-text-field-focus-outline-color:        var(--fx-gold);
  --mdc-tab-indicator-active-indicator-color:           var(--fx-gold);
}

/* ---------- 2. Base ---------- */
html, body {
  background: var(--fx-canvas) !important;
  color: var(--fx-ink);
}
body, .mat-typography,
.mdc-button__label, .mdc-tab__text-label,
.mat-mdc-form-field, .mdc-text-field__input, .mat-mdc-select,
.mat-mdc-option, .mat-mdc-menu-item, .mdc-list-item__primary-text,
.mat-mdc-table, .mat-mdc-card, .mat-mdc-dialog-container,
input, textarea, select {
  font-family: var(--fx-font) !important;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--fx-gold-wash); }
:focus-visible {
  outline: 2px solid var(--fx-gold) !important;
  outline-offset: 2px;
}

/* ---------- 3. Signature: page titles ---------- */
.mat-sidenav-content h1,
.mat-drawer-content h1 {
  font-family: var(--fx-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem) !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--fx-ink) !important;
  border-left-color: var(--fx-gold) !important;
}

/* ---------- 4. Top bar and side navigation ---------- */
.mat-toolbar {
  background: var(--fx-night) !important;
  border-bottom: 2px solid var(--fx-gold) !important;
  box-shadow: none !important;
}
.mat-sidenav, .mat-drawer {
  background: var(--fx-surface) !important;
  border-right: 1px solid var(--fx-line) !important;
}
.mat-sidenav .mat-mdc-list-item.active,
.mat-sidenav a.active,
.mat-drawer .mat-mdc-list-item.active {
  background: var(--fx-gold-wash) !important;
  border-radius: var(--fx-r-md);
}

/* ---------- 5. Containers ---------- */
.mat-mdc-card {
  background: var(--fx-surface) !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-r-lg) !important;
  box-shadow: none !important;
}

/* ---------- 6. Tables: built for reading numbers ---------- */
.mat-mdc-table {
  background: var(--fx-surface) !important;
}
.mat-mdc-header-row {
  background: var(--fx-sunken) !important;
}
.mat-mdc-header-cell {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: var(--fx-ink-2) !important;
  border-bottom: 1px solid var(--fx-line) !important;
}
.mat-mdc-cell {
  color: var(--fx-ink) !important;
  border-bottom: 1px solid var(--fx-line) !important;
  font-variant-numeric: tabular-nums;
}
.mat-mdc-row:hover .mat-mdc-cell {
  background: var(--fx-gold-wash);
}
.mat-mdc-paginator {
  background: var(--fx-surface) !important;
  color: var(--fx-ink-2) !important;
  border-top: 1px solid var(--fx-line);
}
input, .mdc-text-field__input {
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. Buttons ---------- */
.mat-mdc-button, .mat-mdc-raised-button,
.mat-mdc-unelevated-button, .mat-mdc-outlined-button {
  border-radius: var(--fx-r-md) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
.mat-mdc-raised-button {
  box-shadow: none !important;
}
/* Primary actions: yellow fill, dark text (white on yellow is unreadable) */
.mat-mdc-unelevated-button.mat-primary:not([disabled]),
.mat-mdc-raised-button.mat-primary:not([disabled]),
.mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary,
button.mat-primary:not([disabled]) {
  background-color: var(--fx-gold) !important;
  color: var(--fx-on-gold) !important;
  --mdc-filled-button-container-color: var(--fx-gold);
  --mdc-filled-button-label-text-color: var(--fx-on-gold);
  --mdc-protected-button-container-color: var(--fx-gold);
  --mdc-protected-button-label-text-color: var(--fx-on-gold);
}
.mat-mdc-unelevated-button.mat-primary:not([disabled]):hover,
.mat-mdc-raised-button.mat-primary:not([disabled]):hover {
  background-color: #FCD535 !important;
}
.mat-mdc-raised-button:not([disabled]):active,
.mat-mdc-unelevated-button:not([disabled]):active {
  transform: translateY(1px);
}

/* ---------- 8. Form fields ---------- */
.mdc-text-field--filled {
  border-radius: var(--fx-r-md) var(--fx-r-md) 0 0 !important;
}
.mdc-text-field--outlined .mdc-notched-outline__leading {
  border-radius: var(--fx-r-md) 0 0 var(--fx-r-md) !important;
}
.mdc-text-field--outlined .mdc-notched-outline__trailing {
  border-radius: 0 var(--fx-r-md) var(--fx-r-md) 0 !important;
}
.mat-mdc-form-field-error {
  font-size: 0.8rem;
}

/* ---------- 9. Tabs, chips ---------- */
.mat-mdc-tab-header {
  border-bottom: 1px solid var(--fx-line);
}
.mdc-tab__text-label {
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.mat-mdc-chip {
  border-radius: 999px !important;
}

/* ---------- 10. Floating layers ---------- */
.mat-mdc-menu-panel,
.mat-mdc-select-panel,
.mat-mdc-autocomplete-panel {
  border-radius: var(--fx-r-md) !important;
  border: 1px solid var(--fx-line);
  box-shadow: var(--fx-shadow-pop) !important;
}
.mat-mdc-dialog-surface, .mdc-dialog__surface {
  border-radius: 16px !important;
}
.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  background: var(--fx-night) !important;
  color: #f1ebe2 !important;
  border-left: 3px solid var(--fx-gold);
  border-radius: var(--fx-r-md) !important;
}

/* ---------- 11. Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--fx-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--fx-line);
  border-radius: 999px;
  border: 2px solid var(--fx-canvas);
}

/* ---------- 12. Home image: always the Fanos logo (light and dark) ---------- */
img[src*="default_home"],
img[src*="white-mifos"] {
  content: url("images/fanos-home.png") !important;
  filter: none !important;
  object-fit: contain;
}
[style*="white-mifos"] {
  background-image: url("images/fanos-home.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ---------- 13. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------- 14. Text on yellow is always black ---------- */
:root { --brand-primary-500: #F0B90B; }
mifosx-account-header .header,
mifosx-account-header .header *:not([class*="status"]):not([class*="pill"]):not([class*="badge"]),
.account-card .header,
.account-card .header *:not([class*="status"]):not([class*="pill"]):not([class*="badge"]),
.card .header, .card .header *,
.recent-activities .header, .recent-activities .header *,
.frequent-activities .header, .frequent-activities .header *,
.shares-account-card .header, .shares-account-card .table-headers,
.signature, .signature * {
  color: #181A20 !important;
}
/* Icons in the white buttons under the client photo */
.profile-image-container button,
.profile-image-container button *,
.profile-image-container .mat-icon,
.profile-image-container fa-icon {
  color: #181A20 !important;
}

/* ---------- 15. Filled buttons (login and other m3 buttons): yellow, black text ---------- */
mifosx-m3-button[variant="filled"] button:not([disabled]) {
  background: #F0B90B !important;
  color: #181A20 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
mifosx-m3-button[variant="filled"] button:not([disabled]) * {
  color: #181A20 !important;
}
mifosx-m3-button[variant="filled"] button:not([disabled]):hover {
  background: #FCD535 !important;
}
mifosx-m3-button[variant="filled"] button[disabled],
mifosx-m3-button[variant="filled"] button[disabled] * {
  background: #e3dfd8 !important;
  color: #7a7064 !important;
}

:root { --fx-gold-text: #8A6A00; }
body.dark-theme, .dark-theme { --fx-gold-text: #F0B90B; }

/* ---------- 16. Account-type tabs (All / Loan / Savings...) ---------- */
.at-tab.active {
  background: #F0B90B !important;
  color: #181A20 !important;
  border-color: #F0B90B !important;
}
.at-tab.active .at-count {
  background: rgba(24, 26, 32, 0.14) !important;
  color: #181A20 !important;
}

/* ---------- 17. One font everywhere (with a built-in fallback, icons excluded) ---------- */
body :where(*):not(mat-icon):not([class*="material-icons"]):not([class*="material-symbols"]):not(.fa):not([class*="fa-"]):not(i) {
  font-family: "IBM Plex Sans", "Noto Sans Ethiopic", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.mat-sidenav-content h1, .mat-drawer-content h1 {
  font-family: "Cormorant Garamond", "Noto Serif Ethiopic", Georgia, serif !important;
}

/* ---------- 18. Login background photo with a dark overlay ---------- */
.hero-panel.hide-lt-lg, .hero-panel {
  background:
    linear-gradient(135deg, rgba(10, 8, 5, 0.82) 0%, rgba(10, 8, 5, 0.55) 100%),
    url("images/fanos-login-bg.jpg") center / cover no-repeat !important;
}
.hero-panel::before, .hero-panel::after { background: none !important; }

/* ---------- 19. Pop-up messages (snackbars): dark, readable ---------- */
.mat-mdc-snack-bar-container,
.mat-mdc-snack-bar-container .mdc-snackbar__surface,
.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface,
[class*="snack-bar"] .mdc-snackbar__surface,
[class*="snackbar"] .mdc-snackbar__surface {
  background: #181A20 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}
.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  border-left: 4px solid #F0B90B !important;
}
.mat-mdc-snack-bar-container,
.mat-mdc-snack-bar-container .mdc-snackbar__label,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-label,
.mat-mdc-snack-bar-container .mdc-snackbar__label * {
  color: #F5F5F5 !important;
}
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-action,
.mat-mdc-snack-bar-container .mdc-snackbar__actions button,
.mat-mdc-snack-bar-container .mdc-snackbar__actions button * {
  color: #F0B90B !important;
  font-weight: 600 !important;
}