@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Brand Tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Primary brand color */
  --lumo-primary-color: #EC3934;
  --lumo-primary-text-color: #EC3934;
  --lumo-primary-color-50pct: rgba(236, 57, 52, 0.5);
  --lumo-primary-color-10pct: rgba(236, 57, 52, 0.1);

  /* Text colors */
  --lumo-body-text-color: #1C1F37;
  --lumo-secondary-text-color: #A9A9A9;
  --lumo-disabled-text-color: #D3D3D3;
  --lumo-tertiary-text-color: #92949F;

  /* Backgrounds */
  --lumo-base-color: #FFFFFF;
  --lumo-contrast-5pct: #EFEFEF;
  --lumo-contrast-10pct: #F8F9FF;
  --lumo-shade-5pct: #F7F9FD;

  /* Status colors */
  --lumo-error-color: #EB5757;
  --lumo-error-color-10pct: #fdebeb;
  --lumo-success-color: #27AE60;
  --lumo-success-color-10pct: #e6f2e6;

  /* Shape */
  --lumo-border-radius-m: 8px;
  --lumo-border-radius-l: 12px;

  /* Typography */
  --lumo-font-family: 'Mulish', sans-serif;
  --lumo-font-size-m: 14px;
  --lumo-font-size-s: 12px;
  --lumo-font-size-l: 16px;
  --lumo-font-size-xl: 20px;
  --lumo-font-size-2xl: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════════ */
vaadin-button[theme~="primary"] {
  background-color: #ec3934 !important;
  color: white !important;
  border: none !important;
}

vaadin-button[theme~="primary"]:hover {
  background-color: #d32f2a !important;
}

vaadin-button[theme~="primary"]:active {
  background-color: #b71c1c !important;
}

vaadin-button[theme~="secondary"] {
  color: #ec3934 !important;
  border-color: #ec3934 !important;
}

vaadin-button[theme~="secondary"]:hover {
  background-color: rgba(236, 57, 52, 0.1) !important;
}

vaadin-button[theme~="tertiary"] {
  color: #ec3934 !important;
}

vaadin-button[theme~="tertiary"]:hover {
  background-color: rgba(236, 57, 52, 0.1) !important;
}

vaadin-button:not([theme]) {
  background-color: #ec3934 !important;
  color: white !important;
}

vaadin-button:not([theme]):hover {
  background-color: #d32f2a !important;
}

vaadin-button[disabled],
vaadin-button[disabled]:hover {
  background-color: #D3D3D3 !important;
  color: #9e9e9e !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Login View
   ═══════════════════════════════════════════════════════════════════════════ */
.login-split-layout {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.login-left-panel {
  width: 50%;
  min-height: 100vh;
  background-color: #EC3934;
  border-radius: 0 100px 100px 0;
  padding: 50px 90px;
  gap: var(--lumo-space-l);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-logo {
  max-width: 240px;
  height: auto;
}

.login-tagline {
  color: #FFFFFF;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  margin-top: var(--lumo-space-l);
}

.login-copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: auto;
  padding-top: var(--lumo-space-xl);
}

.login-contact-link {
  color: #ffffff;
}

.login-error-panel {
  background-color: var(--lumo-error-color-10pct);
  border-left: 3px solid var(--lumo-error-color);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login-error-title {
  font-weight: 600;
  color: var(--lumo-error-text-color);
  font-size: 0.9em;
}

.login-error-description {
  color: var(--lumo-error-text-color);
  font-size: 0.85em;
}

.login-forgot-link {
  font-size: 0.85em;
  align-self: flex-end;
  margin-top: 2px;
  margin-bottom: 4px;
}

.login-right-panel {
  width: 50%;
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main View — Header
   ═══════════════════════════════════════════════════════════════════════════ */
.jmix-main-view-header {
  box-sizing: border-box;
  display: flex;
  height: var(--lumo-size-xl);
  align-items: center;
  width: 100%;
  background-color: #ec3934;
  color: white;
}

.jmix-main-view-header * {
  color: white !important;
}

.jmix-main-view-drawer-toggle {
  color: white !important;
}

.jmix-main-view-title {
  margin: 0;
  font-size: var(--lumo-font-size-l);
  color: white !important;
}

vaadin-avatar.user-header-avatar {
  background-color: white;
  cursor: pointer;
}

vaadin-avatar.user-header-avatar::part(abbr) {
  color: #ec3934;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main View — Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */
.jmix-main-view-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 100%;
  min-height: 100%;
  background-color: #ec3934;
  color: white;
}

.jmix-main-view-section *:not([selected]):not([selected] *) {
  color: white;
}

.jmix-main-view-section [selected],
.jmix-main-view-section vaadin-item[selected] {
  background-color: white !important;
  color: #ec3934 !important;
  border-radius: 8px;
  margin: 4px 8px;
}

.jmix-main-view-section [selected] *,
.jmix-main-view-section vaadin-item[selected] * {
  color: #ec3934 !important;
}

.jmix-main-view-application-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 120px;
  margin: 0;
  padding: var(--lumo-space-m);
  font-size: var(--lumo-font-size-m);
  color: white;
  overflow: visible;
}

.sidebar-logo,
.jmix-sidebar-logo {
  max-width: 140px;
  height: 90px;
  width: auto;
  padding: var(--lumo-space-m);
  display: block;
  object-fit: contain;
}

.jmix-main-view-application-title-base-link {
  display: none;
  color: white !important;
}

.jmix-main-view-application-title-base-link:hover {
  text-decoration: none;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main View — Navigation
   ═══════════════════════════════════════════════════════════════════════════ */
.jmix-main-view-navigation {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  flex-grow: 1;
  overflow: auto;
}

.jmix-main-view-navigation vaadin-side-nav-item {
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
}

.jmix-main-view-navigation vaadin-side-nav-item::part(link) {
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
}

.jmix-main-view-navigation vaadin-side-nav-item::part(label) {
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
}

.jmix-main-view-navigation vaadin-side-nav-item[selected]::part(link) {
  background-color: rgba(255, 255, 255, 0.2);
  color: white !important;
}

.jmix-main-view-navigation vaadin-side-nav-item:hover::part(link) {
  background-color: rgba(255, 255, 255, 0.1);
  color: white !important;
}

.jmix-main-view-navigation vaadin-list-box {
  color: white;
  background-color: transparent;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item {
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px 12px;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item::part(content) {
  color: white !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item[selected] {
  background-color: white !important;
  color: #ec3934 !important;
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px 12px;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item[selected]::part(content) {
  color: #ec3934 !important;
}

.jmix-main-view-navigation vaadin-list-box vaadin-item[selected] * {
  color: #ec3934 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main View — Footer / User Menu
   ═══════════════════════════════════════════════════════════════════════════ */
.jmix-main-view-footer {
  display: flex;
  align-items: center;
  margin-bottom: var(--lumo-space-s);
  margin-top: var(--lumo-space-s);
  padding: var(--lumo-space-xs) var(--lumo-space-m);
  gap: var(--lumo-space-m);
}

.jmix-main-view-footer .jmix-user-indicator {
  flex-grow: 1;
}

.jmix-main-view-footer :is(.jmix-user-menu-button-content, .user-menu-button-content) {
  width: calc(var(--vaadin-app-layout-drawer-width, 16em) - var(--lumo-space-m) * 2);
}

.user-menu-button-content,
.user-menu-header-content {
  display: grid;
  grid-template: "avatar text"
                 "avatar subtext";
  grid-template-columns: auto 1fr;
  column-gap: var(--lumo-space-s);
  width: max-content;
  box-sizing: border-box;
  color: white !important;
  padding: var(--lumo-space-xs) var(--lumo-space-s);
}

.user-menu-header-content {
  width: 100%;
  padding-inline-end: var(--lumo-space-l);
}

.user-menu-button-content > .user-menu-avatar,
.user-menu-header-content > .user-menu-avatar {
  grid-area: avatar;
  align-self: center;
}

.user-menu-button-content > .user-menu-text {
  grid-row: text / subtext;
}

vaadin-menu-bar[jmix-role='jmix-user-menu'][theme~='substituted'] .user-menu-button-content > .user-menu-text {
  grid-row: text;
}

.user-menu-header-content > .user-menu-text {
  grid-area: text;
  color: white !important;
  font-weight: 700;
  font-size: var(--lumo-font-size-m);
}

.user-menu-header-content > .user-menu-text-subtext {
  grid-row: text / subtext;
}

.user-menu-button-content > .user-menu-text,
.user-menu-header-content > .user-menu-text {
  align-self: center;
  text-align: start;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white !important;
}

.user-menu-button-content > .user-menu-subtext,
.user-menu-header-content > .user-menu-subtext {
  grid-area: subtext;
  align-self: center;
  text-align: start;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: var(--lumo-font-size-xs);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

vaadin-menu-bar[jmix-role='jmix-user-menu']:not([theme~='substituted']) .user-menu-button-content > .user-menu-subtext {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main View — Initial Layout
   ═══════════════════════════════════════════════════════════════════════════ */
.jmix-initial-layout {
  --title-size: var(--lumo-font-size-xxxl);
  --title-color: var(--lumo-secondary-text-color);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  container-name: jmix-initial-layout;
}

.jmix-initial-layout-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 50rem;
  padding: var(--lumo-space-xl);
  box-sizing: border-box;
}

.jmix-initial-layout-title {
  position: relative;
  color: var(--title-color);
  font-size: var(--title-size);
  line-height: calc(4 * var(--title-size));
  box-sizing: border-box;
}

.jmix-initial-layout-title:after {
  position: absolute;
  width: 100%;
  height: 0.3rem;
  content: '';
  background: var(--title-color);
  top: 0;
  left: 0;
}

.jmix-initial-layout-logo {
  --logo-size: calc(2.5 * var(--title-size));
  width: var(--logo-size);
  height: var(--logo-size);
}

@container jmix-initial-layout (max-width: 45rem) {
  .jmix-initial-layout-content {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--lumo-space-l);
  }

  .jmix-initial-layout-title {
    padding-top: var(--lumo-space-m);
    line-height: var(--lumo-line-height-m);
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Transaction View
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab Bar ──────────────────────────────────────────────────────────────── */
.tab-bar {
  width: 100%;
  max-width: 900px;
  border-bottom: 2px solid var(--lumo-contrast-10pct);
  padding: 0 var(--lumo-space-s);
  margin-bottom: var(--lumo-space-l);
  box-sizing: border-box;
}

.tab-bar vaadin-button {
  border-radius: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: var(--lumo-font-size-m);
  font-weight: 500;
  color: var(--lumo-secondary-text-color) !important;
  background: transparent !important;
  transition: color 0.2s, border-bottom-color 0.2s;
}

.tab-bar vaadin-button:hover {
  color: #ec3934 !important;
  border-bottom-color: rgba(236, 57, 52, 0.4);
  background: transparent !important;
}

.tab-bar vaadin-button:focus,
.tab-bar vaadin-button::part(label):focus,
.tab-bar vaadin-button::part(button):focus {
  outline: none !important;
  box-shadow: none !important;
}

.tab-bar vaadin-button.tab-active {
  color: #ec3934 !important;
  border-bottom-color: #ec3934;
}

/* ── Transaction Card ─────────────────────────────────────────────────────── */
.transaction-card {
  background: var(--lumo-base-color);
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  margin-top: var(--lumo-space-m);
  margin-bottom: var(--lumo-space-l);
}

/* ── Section Titles ───────────────────────────────────────────────────────── */
.section-title {
  display: block;
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
  color: var(--lumo-secondary-text-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--lumo-space-s);
  margin-bottom: var(--lumo-space-xs);
}

/* ── Add Payee Form ───────────────────────────────────────────────────────── */
#addPayeeForm {
  background: var(--lumo-contrast-5pct);
  border-radius: var(--lumo-border-radius-m);
  border-left: 3px solid #ec3934;
}

/* ── Recent Transactions Card ─────────────────────────────────────────────── */
.recent-transactions-card {
  background: var(--lumo-base-color);
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--lumo-space-xl);
}

.recent-transactions-card .section-title {
  font-size: var(--lumo-font-size-s);
  margin-bottom: var(--lumo-space-s);
}

/* ── Balance Panel ────────────────────────────────────────────────────────── */
.balance-panel {
  background: #ec3934;
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 0 2px 16px rgba(236, 57, 52, 0.35);
  padding: var(--lumo-space-l);
  margin-top: var(--lumo-space-m);
  margin-bottom: var(--lumo-space-l);
  align-items: flex-start;
}

.balance-panel .section-title {
  color: rgba(255, 255, 255, 0.8) !important;
}

.balance-panel vaadin-button {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}

.balance-panel vaadin-button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.balance-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: var(--lumo-space-xs) 0;
}

.balance-amount {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-top: var(--lumo-space-s);
}

.balance-currency {
  display: block;
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}