@import url('./main-layout.css');
@import url('./views/entidades-view.css');
@import url('./views/master-detail-view.css');

html {
  --sinpeoc-blue: #0f5636;
  --sinpeoc-blue-deep: #083d27;
  --sinpeoc-green: #b78618;
  --sinpeoc-green-deep: #7f5b0d;
  --sinpeoc-ink: #16251c;

  --lumo-base-color: #f5faff;
  --lumo-tint-5pct: rgba(255, 255, 255, 0.75);
  --lumo-tint-10pct: rgba(255, 255, 255, 0.9);
  --lumo-shade-5pct: rgba(23, 50, 77, 0.05);
  --lumo-shade-10pct: rgba(23, 50, 77, 0.1);
  --lumo-shade-20pct: rgba(23, 50, 77, 0.2);
  --lumo-shade-30pct: rgba(23, 50, 77, 0.3);
  --lumo-shade-40pct: rgba(23, 50, 77, 0.4);
  --lumo-shade-50pct: rgba(23, 50, 77, 0.5);
  --lumo-shade-60pct: rgba(23, 50, 77, 0.6);
  --lumo-shade-70pct: rgba(23, 50, 77, 0.7);
  --lumo-shade-80pct: rgba(23, 50, 77, 0.8);
  --lumo-shade-90pct: rgba(23, 50, 77, 0.9);
  --lumo-shade: hsl(209, 54%, 20%);
  --lumo-primary-color: var(--sinpeoc-blue);
  --lumo-primary-color-50pct: rgba(24, 88, 215, 0.5);
  --lumo-primary-color-10pct: rgba(24, 88, 215, 0.1);
  --lumo-primary-text-color: var(--sinpeoc-blue-deep);
  --lumo-success-color: var(--sinpeoc-green);
  --lumo-success-color-50pct: rgba(8, 165, 42, 0.5);
  --lumo-success-color-10pct: rgba(8, 165, 42, 0.1);
  --lumo-success-contrast-color: #ffffff;
  --lumo-success-text-color: var(--sinpeoc-green-deep);
  --lumo-error-color: #cc2f2f;
  --lumo-error-color-50pct: rgba(204, 47, 47, 0.5);
  --lumo-error-color-10pct: rgba(204, 47, 47, 0.1);
  --lumo-error-text-color: #a31c1c;
  --lumo-header-text-color: var(--sinpeoc-ink);
  --lumo-body-text-color: #28425e;
  --lumo-secondary-text-color: #5f7995;
  --lumo-tertiary-text-color: #8095ac;
  --lumo-contrast: rgb(23, 50, 77);
  --lumo-contrast-10pct: rgba(23, 50, 77, 0.1);
  --lumo-contrast-20pct: rgba(23, 50, 77, 0.2);
  --lumo-contrast-80pct: rgba(23, 50, 77, 0.8);
  --lumo-border-radius-l: 20px;
  --lumo-border-radius-m: 14px;
  --lumo-border-radius-s: 10px;
  background:
    radial-gradient(circle at top left, rgba(183, 134, 24, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(15, 86, 54, 0.13), transparent 34%),
    linear-gradient(180deg, #fffdf7 0%, #f4f7f0 100%);
}

body,
[theme~="light"] {
  color: var(--lumo-body-text-color);
}

vaadin-app-layout::part(drawer),
vaadin-app-layout::part(navbar) {
  background: transparent;
}

vaadin-button {
  font-weight: 600;
}

vaadin-button[theme~="primary"] {
  --vaadin-button-background: linear-gradient(135deg, var(--sinpeoc-blue), var(--sinpeoc-green));
  --vaadin-button-text-color: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 88, 215, 0.2);
}

vaadin-text-field,
vaadin-password-field,
vaadin-email-field,
vaadin-combo-box,
vaadin-date-picker,
vaadin-select,
vaadin-text-area {
  --vaadin-input-field-background: rgba(255, 255, 255, 0.96);
  --vaadin-input-field-border-color: rgba(24, 88, 215, 0.18);
  --vaadin-input-field-hover-highlight: rgba(24, 88, 215, 0.06);
  --vaadin-input-field-value-color: var(--sinpeoc-ink);
  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
  --vaadin-input-field-border-radius: 14px;
}

vaadin-login-overlay::part(description) {
  text-align: center;
  width: 100%;
  display: block;
  color: var(--lumo-secondary-text-color);
}

vaadin-login-overlay::part(backdrop) {
  background:
    radial-gradient(circle at 20% 20%, rgba(8, 165, 42, 0.18), transparent 22%),
    radial-gradient(circle at 80% 10%, rgba(24, 88, 215, 0.22), transparent 30%),
    linear-gradient(145deg, #f4fbff 0%, #edf7ff 45%, #f7fff8 100%);
}

vaadin-login-overlay-wrapper::part(card) {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(24, 88, 215, 0.14);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(14, 61, 159, 0.18);
}

vaadin-login-form-wrapper {
  color: var(--lumo-body-text-color);
}

vaadin-login-form vaadin-button[theme~="submit"] {
  background: linear-gradient(135deg, var(--sinpeoc-blue), var(--sinpeoc-green));
  border: none;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(14, 61, 159, 0.24);
}

vaadin-login-form vaadin-text-field::part(input-field),
vaadin-login-form vaadin-password-field::part(input-field) {
  background: rgba(245, 250, 255, 0.95);
  border: 1px solid rgba(24, 88, 215, 0.14);
  border-radius: 16px;
}

.login-view .criar-conta-btn,
.login-view .doacoes-btn {
  border-radius: 999px;
  font-weight: 700;
  min-width: 180px;
}

.login-view .criar-conta-btn {
  background: linear-gradient(135deg, var(--sinpeoc-green), var(--sinpeoc-green-deep));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 165, 42, 0.2);
}

.login-view .doacoes-btn {
  background: rgba(24, 88, 215, 0.08);
  color: var(--sinpeoc-blue-deep);
  border: 1px solid rgba(24, 88, 215, 0.16);
}

.login-view a {
  color: var(--sinpeoc-blue-deep);
}