/* =============================================================================
   TRIODOS TENANT STYLES
   Brand: Triodos Bank — Trust, Sustainability, Transparency
   Last updated: 2026-02-27
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================= */

:root {

  /* --- Typography --- */
  --default-font-family: "mmc-font", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font-family: "mmc-font-bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --line-height-base: 1.6;
  --letter-spacing: 0.01em;

  /* --- Brand Palette: Lupines --- */
  --primary-color: #8074EF;               /* Grounded Lupine: Innovation & Visionary */
  --primary-light: #C2CBFA;               /* Energized Lupine: Clarity & Collaboration */
  --primary-dark: #3D123E;                /* Principled Lupine: Depth & Reflection */

  /* --- Brand Palette: Greens --- */
  --secondary-color: #004B32;             /* Grounded Green: Trust & Stability */
  --accent-color: #DFFF57;                /* Energized Green: Optimism & Action (use sparingly) */
  --success-color: #98D39A;               /* Principled Green: Balance & Responsibility */
  --success-color--disabled: #98D39A4D;   /* Principled Green at 30% opacity */

  /* --- Semantic Colors --- */
  --warning-color: #B32424;               /* Error Red: Urgency & Attention */
  --warning-color--hover: #8A1B1B;        /* Error Red darkened for hover states */
  --warning-color--disabled: rgba(179, 36, 36, 0.6); /* Error Red at 60% for disabled */
  --warning-color--subtle: rgba(179, 36, 36, 0.05);  /* Error Red at 5% for invalid backgrounds */
  --warning-color--focus: rgba(179, 36, 36, 0.25);   /* Error Red at 25% for focus rings */

  /* --- Neutral Colors --- */
  --text-color: #222222;                  /* Charcoal Black: Professional & Timeless */
  --text-color-secondary: #222222;
  --background-color: #F3EDE4;            /* Birch Skin: Warmth & Softness */
  --white: #ffffff;

  /* --- Button Tokens --- */
  --button-background-color: var(--success-color);           /* Principled Green */
  --button-background-color--disabled: var(--success-color--disabled);
  --button-border-color: var(--success-color);
  --button-border-color--disabled: var(--success-color--disabled);
  --button-color: #3C132E;                                    /* Principled Lupine for button text */
  --button-color--disabled: #3C132E80;                        /* 50% opacity for disabled text */
  --button-see-through-background-color: var(--button-background-color);
  --button-see-through-color: var(--button-color);

  /* --- Form & Input Tokens --- */
  --input-background: rgba(128, 116, 239, 0.1);  /* 10% Grounded Lupine */
  --input-border: var(--primary-light);
  --input-disabled-background: #F5F5F5;
  --input-disabled-border: #CCCCCC;
  --input-disabled-color: #666666;
  --input-focus-shadow: rgba(128, 116, 239, 0.25);

  /* --- File Upload Tokens --- */
  --file-upload-background-color: var(--success-color);  /* Principled Green */
  --file-upload-color: var(--button-color);

  /* --- Layout Tokens --- */
  --home-border-color: #D3D3D3;
  --mortgage-selector-background-color: var(--primary-light);
  --mortgage-title-color: var(--white);
  --mortgage-title-secondary-color: var(--white);
  --back-to-overview-color: var(--white);
  --background-gradient-second-color: var(--background-color);

  /* --- Graph / Chart Colors --- */
  /* Donut charts: light = Principled Green, dark = Grounded Green */
  --home-graph-color-1: var(--success-color);       /* Principled Green #98D39A */
  --home-graph-color-2: var(--secondary-color);     /* Grounded Green  #004B32 */
  --home-graph-middle-color: var(--secondary-color);
  --mortgage-graph-color-1: var(--home-graph-color-1);
  --mortgage-graph-color-2: var(--home-graph-color-2);
  --mortgage-graph-middle-color: var(--home-graph-middle-color);
  --tranche-graph-color-1: var(--home-graph-color-1);
  --tranche-graph-color-2: var(--home-graph-color-2);
  --tranche-graph-middle-color: var(--home-graph-middle-color);

  /* --- Badge / Status Dot Colors --- */
  /* No Energized Green; use Grounded & Principled Green only */
  --dot-color-blue: var(--secondary-color);   /* Grounded Green  #004B32 */
  --dot-color-orange: var(--success-color);   /* Principled Green #98D39A */

  /* --- Step Indicator Colors --- */
  --inactive-step-color: var(--secondary-color);  /* Grounded Green #004B32 */

  /* --- Assets --- */
  --favicon: url(/assets/images/favicon.ico);
  --commercial-consent-display: none;

  /* --- Footer --- */
  --footer-background-color: var(--background-color);
  --footer-text-color: var(--text-color);
  --footer-link-color: var(--primary-color);
  --footer-link-hover-color: var(--secondary-color);
}


/* =============================================================================
   2. FONT DECLARATIONS
   ============================================================================= */


/* Inter — registered at each weight used in styles.scss (400, 500, 600, 700)   */
/* Browser auto-selects the correct file; no font-weight overrides needed        */
@font-face {
  font-family: "mmc-font";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter Regular"),
       url("/assets/fonts/Inter-Regular.woff2") format("woff2"),
       url("/assets/fonts/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "mmc-font";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter Medium"),
       url("/assets/fonts/Inter-Medium.woff2") format("woff2"),
       url("/assets/fonts/Inter-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "mmc-font";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter SemiBold"),
       url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
       url("/assets/fonts/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "mmc-font";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter Bold"),
       url("/assets/fonts/Inter-Bold.woff2") format("woff2"),
       url("/assets/fonts/Inter-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "mmc-font-bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("RB Freigeist Neue Bold"),
       url("/assets/fonts/RBFreigeistNeue-Bold.woff2") format("woff2"),
       url("/assets/fonts/RBFreigeistNeue-Bold.ttf") format("truetype");
}


/* =============================================================================
   3. BASE / GLOBAL STYLES
   ============================================================================= */

body {
  color: var(--text-color);
  font-family: var(--default-font-family);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  line-height: 1.2;
  font-weight: 700;
}


/* =============================================================================
   4. BUTTONS
   ============================================================================= */

/* Primary buttons — Principled Green background, Principled Lupine text */
.btn-primary,
.btn-success,
.btn-next {
  background-color: var(--button-background-color) !important;
  border-color: var(--button-border-color) !important;
  color: var(--button-color) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-success:hover,
.btn-next:hover {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-success:disabled,
.btn-next:disabled {
  background-color: var(--button-background-color--disabled) !important;
  border-color: var(--button-border-color--disabled) !important;
  color: var(--button-color--disabled) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Danger buttons — Error Red (excludes file upload buttons) */
.btn-danger:not(.mobile-file-upload) {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: var(--white) !important;
  font-weight: 600;
}

.btn-danger:not(.mobile-file-upload):hover,
.btn-danger:not(.mobile-file-upload):active,
.btn-danger:not(.mobile-file-upload):focus {
  background-color: var(--warning-color--hover) !important;
  border-color: var(--warning-color--hover) !important;
  color: var(--white) !important;
}

.btn-danger:not(.mobile-file-upload):disabled,
.btn-danger:not(.mobile-file-upload)[disabled] {
  background-color: var(--warning-color--disabled) !important;
  border-color: var(--warning-color--disabled) !important;
  color: var(--white) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Delete/remove button in tranche payment form — override Bootstrap .btn-link blue bleed */
/* Use .btn.btn-link.delete-button (3-class specificity) to beat Bootstrap's .btn.btn-link tokens */
.btn.btn-link.delete-button {
  --bs-btn-color: var(--warning-color);
  --bs-btn-hover-color: var(--secondary-color);
  --bs-btn-active-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 0, 75, 50;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  color: var(--warning-color) !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.btn.btn-link.delete-button:hover,
.btn.btn-link.delete-button:focus,
.btn.btn-link.delete-button:focus-visible,
.btn.btn-link.delete-button:active {
  color: var(--secondary-color) !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  opacity: 1;
}

.delete-icon {
  fill: var(--warning-color) !important;
  transition: fill 0.15s ease;
}

.btn.btn-link.delete-button:hover .delete-icon,
.btn.btn-link.delete-button:focus .delete-icon {
  fill: var(--secondary-color) !important;
}

/* File upload buttons — match primary button styling regardless of btn-danger class */
.mobile-file-upload,
.file-upload-button,
.btn-upload,
.upload-trigger {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: var(--button-color) !important;
  font-weight: 600;
}

.mobile-file-upload:hover,
.file-upload-button:hover,
.btn-upload:hover,
.upload-trigger:hover {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.mobile-file-upload:disabled,
.mobile-file-upload[disabled],
.file-upload-button:disabled,
.file-upload-button[disabled] {
  background-color: var(--button-background-color--disabled) !important;
  border-color: var(--button-border-color--disabled) !important;
  color: var(--button-color--disabled) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}


/* =============================================================================
   5. FORM INPUTS
   ============================================================================= */

/* Standard form controls */
input.form-control,
select.form-control,
textarea.form-control,
.form-select,
input.custom-input,
select.custom-input,
textarea.custom-input {
  background-color: var(--white) !important;
  border: 2px solid var(--primary-light) !important;
  border-radius: 4px;
  color: var(--text-color) !important;
  font-size: 1rem;
  padding: 0.5rem 0.75rem !important;
  width: 100%;
}

input.form-control:hover:not(:disabled),
select.form-control:hover:not(:disabled),
textarea.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled),
input.custom-input:hover:not(:disabled),
select.custom-input:hover:not(:disabled),
textarea.custom-input:hover:not(:disabled) {
  border-color: var(--primary-color) !important;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-select:focus,
input.custom-input:focus,
select.custom-input:focus,
textarea.custom-input:focus {
  background-color: var(--white) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-shadow) !important;
  outline: 0 !important;
}

input.form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled,
.form-select:disabled,
input.custom-input:disabled,
select.custom-input:disabled,
textarea.custom-input:disabled {
  background-color: var(--input-disabled-background) !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-color) !important;
  cursor: not-allowed;
}

/* Validation states */
input.custom-input.is-valid,
select.custom-input.is-valid,
textarea.custom-input.is-valid {
  border-color: var(--primary-light) !important;
}

input.custom-input.is-invalid,
select.custom-input.is-invalid,
textarea.custom-input.is-invalid {
  background-color: var(--warning-color--subtle) !important;
  border-color: var(--warning-color) !important;
}

input.custom-input.is-invalid:focus,
select.custom-input.is-invalid:focus,
textarea.custom-input.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem var(--warning-color--focus) !important;
}

/* Error and required field labels */
.error-message,
.required-text,
.required::after {
  color: var(--warning-color) !important;
}


/* =============================================================================
   6. COMPONENTS
   ============================================================================= */

/* Progress bar — Grounded Green (overrides Bootstrap #0d6efd default) */
.progress-bar {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

/* Step indicator — Grounded Green (no Energized Green) */
.inactive-step {
  background-color: var(--inactive-step-color) !important;
}

/* Status dot fills — pierce Angular view encapsulation via global scope + !important */
/* .blue and .orange are legacy class names; colors are remapped to Triodos brand */
.blue {
  fill: var(--dot-color-blue) !important;   /* Grounded Green  #004B32 */
}

.orange {
  fill: var(--dot-color-orange) !important; /* Principled Green #98D39A */
}

/* Credit card hover */
.credit-card-button:focus {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px;
}

.credit-card-button:hover .mortgage,
.credit-card-button:hover .consumerCredit {
  background-color: var(--primary-light) !important;
  box-shadow: 0 2px 8px rgba(128, 116, 239, 0.2);
}

/* Status indicator */
.status-indicator--trusted {
  color: var(--secondary-color) !important;
}

/* Tranche payment warning banner */
.tranche-payment-warning.border-left {
  background-color: var(--white) !important;
  border: 2px solid var(--warning-color) !important;
  border-left: 6px solid var(--warning-color) !important;
}

.tranche-payment-warning .alert-icon {
  height: 36px !important;
  width: 36px !important;
}

.tranche-payment-warning .alert-icon svg,
.tranche-payment-warning .alert-icon svg path {
  fill: var(--warning-color) !important;
  height: 100%;
  width: 100%;
}