/*
 * Impeleo Banking — Branding CSS v2.2
 * Dockerfile: Grok's version (LOCKED)
 */

/* ═══════════════════════════════════════
   CORPORATE COLOR
   Primary: #5B21B6  (Impeleo Purple)
   Light:   #7C3AED
   Dark:    #4C1D95
   ═══════════════════════════════════════ */

/* ── Angular Material CSS Variable Overrides ── */
html {
  --mat-form-field-filled-caret-color:                       #5B21B6 !important;
  --mat-form-field-filled-focus-active-indicator-color:      #5B21B6 !important;
  --mat-form-field-filled-focus-label-text-color:            rgba(91,33,182,.87) !important;
  --mat-form-field-outlined-caret-color:                     #5B21B6 !important;
  --mat-form-field-outlined-focus-outline-color:             #5B21B6 !important;
  --mat-form-field-outlined-focus-label-text-color:          rgba(91,33,182,.87) !important;
  --mat-form-field-focus-select-arrow-color:                 rgba(91,33,182,.87) !important;
  --mat-select-focused-arrow-color:                          #5B21B6 !important;
  --mat-option-selected-state-label-text-color:              #5B21B6 !important;
  --mat-progress-spinner-active-indicator-color:             #5B21B6 !important;
  --mat-badge-background-color:                              #5B21B6 !important;
  --mat-stepper-header-selected-state-icon-background-color: #5B21B6 !important;
  --mat-stepper-header-done-state-icon-background-color:     #5B21B6 !important;
  --mat-stepper-header-edit-state-icon-background-color:     #5B21B6 !important;
  --mat-slide-toggle-selected-handle-color:                  #5B21B6 !important;
  --mat-slide-toggle-selected-focus-handle-color:            #5B21B6 !important;
  --mat-slide-toggle-selected-hover-handle-color:            #5B21B6 !important;
  --mat-slide-toggle-selected-pressed-handle-color:          #5B21B6 !important;
  --mat-slide-toggle-selected-focus-state-layer-color:       #5B21B6 !important;
  --mat-slide-toggle-selected-hover-state-layer-color:       #5B21B6 !important;
  --mat-slide-toggle-selected-pressed-state-layer-color:     #5B21B6 !important;
  --mat-slider-active-track-color:                           #5B21B6 !important;
  --mat-slider-handle-color:                                 #5B21B6 !important;
  --mat-slider-focus-handle-color:                           #5B21B6 !important;
  --mat-slider-hover-handle-color:                           #5B21B6 !important;
  --mat-slider-ripple-color:                                 #5B21B6 !important;
  --mat-datepicker-toggle-active-state-icon-color:           #5B21B6 !important;
  --mat-datepicker-calendar-date-selected-state-background-color: #5B21B6 !important;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(91,33,182,.12) !important;
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(91,33,182,.04) !important;
  --mat-pseudo-checkbox-full-selected-icon-color:            #5B21B6 !important;
  --mat-pseudo-checkbox-minimal-selected-checkmark-color:    #5B21B6 !important;
  --mat-tab-active-indicator-color:                          #5B21B6 !important;
  --mat-checkbox-selected-icon-color:                        #5B21B6 !important;
  --mat-checkbox-selected-focus-icon-color:                  #5B21B6 !important;
  --mat-checkbox-selected-hover-icon-color:                  #5B21B6 !important;
}

/* MD Web Components */
md-filled-button, md-outlined-button, md-elevated-button, md-text-button, md-filled-tonal-button {
  --md-sys-color-primary:              #5B21B6 !important;
  --md-filled-button-container-color:  #5B21B6 !important;
  --md-outlined-button-label-text-color: #5B21B6 !important;
  --md-outlined-button-outline-color:  #5B21B6 !important;
  --md-elevated-button-label-text-color: #5B21B6 !important;
  --md-text-button-label-text-color:   #5B21B6 !important;
}

/* ── Toolbar ── */
#mifosx-toolbar,
mat-toolbar.mat-primary,
.mat-toolbar.mat-primary {
  background-color: #5B21B6 !important;
  color: #ffffff !important;
}

/* ── Primary Buttons ── */
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary {
  background-color: #5B21B6 !important;
  --mdc-protected-button-container-color: #5B21B6 !important;
  --mdc-filled-button-container-color:    #5B21B6 !important;
}
.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-unelevated-button.mat-primary:hover {
  background-color: #4C1D95 !important;
}

/* ── Breadcrumb ── */
.breadcrumb-title { border-left-color: #5B21B6 !important; }
.breadcrumb-link  { color: #5B21B6 !important; }
.breadcrumb-link:hover {
  color: #4C1D95 !important;
  background-color: rgba(91,33,182,.08) !important;
}

/* ── Sidebar active state ── */
.mat-mdc-nav-list .mat-mdc-list-item.mdc-list-item--activated {
  background-color: rgba(91,33,182,.12) !important;
}

/* ── App-wide: replace #4461e2 indigo/blue accents ── */
.linked, .fa-question { color: #5B21B6 !important; }
.status-approved      { color: #5B21B6 !important; }
.amount-minus         { color: #5B21B6 !important; }
.loading { background: linear-gradient(125deg, #fff, #5B21B6, #fff) !important; }

/* ── Dark mode ── */
.dark-theme md-filled-button,
.dark-theme md-outlined-button,
.dark-theme md-elevated-button,
.dark-theme md-text-button {
  --md-sys-color-primary: #A78BFA !important;
  --md-text-button-label-text-color:     #A78BFA !important;
  --md-outlined-button-label-text-color: #A78BFA !important;
  --md-outlined-button-outline-color:    #A78BFA !important;
}
.dark-theme html,
.dark-theme {
  --mat-form-field-filled-caret-color:                  #A78BFA !important;
  --mat-form-field-filled-focus-active-indicator-color: #A78BFA !important;
  --mat-option-selected-state-label-text-color:         #A78BFA !important;
  --mat-select-focused-arrow-color:                     #A78BFA !important;
  --mat-badge-background-color:                         #7C3AED !important;
}

/* ═══════════════════════════════════════
   LOGIN PAGE — HERO PANEL
   ═══════════════════════════════════════ */

.hero-panel {
  background-image: url('/assets/images/custom/background.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

h1.hero-title {
  visibility: hidden !important;
  position: relative !important;
  display: block !important;
  min-height: 1.2em !important;
}
h1.hero-title::after {
  content: 'Impeleo Banking' !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  color: #ffffff !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  font-family: Roboto, sans-serif !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2) !important;
}

.feature-icon { color: #7C3AED !important; }
.dark-theme .feature-icon { color: #A78BFA !important; }

/* ═══════════════════════════════════════
   LOGIN PAGE — RIGHT PANEL
   ═══════════════════════════════════════ */

img.logo-image {
  content: url('/assets/images/custom/logo.png') !important;
  max-height: 80px !important;
  max-width: 85% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 8px auto !important;
}

mifosx-server-selector { display: none !important; }
.resource-button { cursor: default !important; pointer-events: none !important; }
.resources-branding { display: none !important; }

.impeleo-branding a {
  color: #7C3AED !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.dark-theme .impeleo-branding a { color: #A78BFA !important; }

/* ═══════════════════════════════════════
   SIDEBAR — LOGO ONLY (no text)
   ═══════════════════════════════════════ */

img.app-logo {
  content: url('/assets/images/custom/logo.png') !important;
  max-height: 48px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Hide sidebar "Mifos® X WebApp" / "Impeleo Banking" text — LOGO ONLY */
span.app-logo-text {
  display: none !important;
}

/* ═══════════════════════════════════════
   DASHBOARD HOME
   ═══════════════════════════════════════ */

/* Replace Mifos home card image with Impeleo logo */
mifosx-home img[mat-card-image],
mifosx-home .mat-mdc-card-image {
  content: url('/assets/images/custom/logo.png') !important;
  max-height: 160px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 16px auto !important;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */

p.footer-content {
  visibility: hidden !important;
  position: relative !important;
}
p.footer-content::after {
  content: 'Impeleo Banking Powered by Mifos' !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════
   PRELOADER
   ═══════════════════════════════════════ */

lottie-player, .lottie-spinner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.loader-wrapper { background: #ffffff !important; position: relative !important; }
.dark-theme .loader-wrapper { background: #121212 !important; }
.loader-wrapper::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 130px !important; height: 130px !important;
  background: url('/assets/images/custom/preloader.png') no-repeat center / contain !important;
  animation: brandPulse 1.6s ease-in-out infinite !important;
}
@keyframes brandPulse {
  0%,100% { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1.06); }
}

/* ═══════════════════════════════════════
   DARK MODE — text visibility
   ═══════════════════════════════════════ */

.dark-theme h1.hero-title::after { color: #ffffff !important; }
.dark-theme .hero-subtitle,
.dark-theme .feature-text,
.dark-theme .hero-subtitle * {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}
.dark-theme p.footer-content::after { color: rgba(255,255,255,.7) !important; }
.dark-theme .impeleo-branding,
.dark-theme .impeleo-branding * { color: rgba(255,255,255,.7) !important; }

/* ═══════════════════════════════════════
   TOOLBAR ICONS — always white on purple
   ═══════════════════════════════════════ */

/* Override the MD icon color variable in toolbar context */
#mifosx-toolbar {
  --md-icon-prefix-label-text-color: rgba(255,255,255,0.85) !important;
}

/* Target every icon type used in the toolbar */
#mifosx-toolbar mat-icon,
#mifosx-toolbar .mat-icon,
#mifosx-toolbar mifosx-m3-icon span,
#mifosx-toolbar .material-symbols-outlined,
#mifosx-toolbar .material-symbols-filled,
#mifosx-toolbar .m3-icon span {
  color: rgba(255,255,255,0.85) !important;
}

/* Icon buttons themselves */
#mifosx-toolbar .mat-mdc-icon-button,
#mifosx-toolbar .mdc-icon-button {
  color: rgba(255,255,255,0.85) !important;
}
#mifosx-toolbar .mat-mdc-icon-button:hover,
#mifosx-toolbar .mdc-icon-button:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.12) !important;
}

/* FA icons in toolbar (bars, chevron, etc.) */
#mifosx-toolbar .ng-fa-icon svg {
  fill: rgba(255,255,255,0.85) !important;
}

/* ═══════════════════════════════════════
   DARK MODE — preserve original Mifos
   dark theme for all non-toolbar areas.
   Only override toolbar + accent colours.
   ═══════════════════════════════════════ */

/* Toolbar stays purple in dark mode */
.dark-theme #mifosx-toolbar,
.dark-theme mat-toolbar.mat-primary {
  background-color: #4C1D95 !important; /* slightly darker purple in dark mode */
}

/* Keep dark mode icons white in dark toolbar */
.dark-theme #mifosx-toolbar mat-icon,
.dark-theme #mifosx-toolbar .material-symbols-outlined,
.dark-theme #mifosx-toolbar mifosx-m3-icon span,
.dark-theme #mifosx-toolbar .ng-fa-icon svg {
  color: rgba(255,255,255,0.9) !important;
  fill: rgba(255,255,255,0.9) !important;
}

/* Dark mode accent purple (lighter for visibility on dark backgrounds) */
.dark-theme .breadcrumb-title { border-left-color: #A78BFA !important; }
.dark-theme .breadcrumb-link  { color: #A78BFA !important; }
.dark-theme .mat-mdc-raised-button.mat-primary,
.dark-theme .mat-mdc-unelevated-button.mat-primary {
  background-color: #7C3AED !important;
}
.dark-theme .mat-mdc-nav-list .mat-mdc-list-item.mdc-list-item--activated {
  background-color: rgba(167,139,250,.15) !important;
}

/* ═══════════════════════════════════════
   FONT FALLBACK — render immediately
   while Google Fonts load from CDN
   ═══════════════════════════════════════ */
body, html, .mat-body, .mat-typography {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif !important;
}