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

html {
  --sintrat-red: #c4161c;
  --sintrat-red-deep: #941116;
  --sintrat-red-accent: #a81218;
  --sintrat-red-dark: #7d0e12;
  --sintrat-ink: #302729;

  --lumo-base-color: #fffafa;
  --lumo-tint-5pct: rgba(255, 255, 255, 0.75);
  --lumo-tint-10pct: rgba(255, 255, 255, 0.9);
  --lumo-shade-5pct: rgba(48, 39, 41, 0.05);
  --lumo-shade-10pct: rgba(48, 39, 41, 0.1);
  --lumo-shade-20pct: rgba(48, 39, 41, 0.2);
  --lumo-shade-30pct: rgba(48, 39, 41, 0.3);
  --lumo-shade-40pct: rgba(48, 39, 41, 0.4);
  --lumo-shade-50pct: rgba(48, 39, 41, 0.5);
  --lumo-shade-60pct: rgba(48, 39, 41, 0.6);
  --lumo-shade-70pct: rgba(48, 39, 41, 0.7);
  --lumo-shade-80pct: rgba(48, 39, 41, 0.8);
  --lumo-shade-90pct: rgba(48, 39, 41, 0.9);
  --lumo-shade: hsl(347, 10%, 17%);
  --lumo-primary-contrast-color: #ffffff;
  --lumo-primary-color: var(--sintrat-red);
  --lumo-primary-color-50pct: rgba(196, 22, 28, 0.5);
  --lumo-primary-color-10pct: rgba(196, 22, 28, 0.1);
  --lumo-primary-text-color: var(--sintrat-red-deep);
  --lumo-success-color: #16803c;
  --lumo-success-color-50pct: rgba(22, 128, 60, 0.5);
  --lumo-success-color-10pct: rgba(22, 128, 60, 0.1);
  --lumo-success-contrast-color: #ffffff;
  --lumo-success-text-color: #116530;
  --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(--sintrat-ink);
  --lumo-body-text-color: #463a3d;
  --lumo-secondary-text-color: #736267;
  --lumo-tertiary-text-color: #87777b;
  --lumo-contrast: rgb(48, 39, 41);
  --lumo-contrast-10pct: rgba(48, 39, 41, 0.1);
  --lumo-contrast-20pct: rgba(48, 39, 41, 0.2);
  --lumo-contrast-80pct: rgba(48, 39, 41, 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(168, 18, 24, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(196, 22, 28, 0.12), transparent 34%),
    linear-gradient(180deg, #fffdfd 0%, #fff5f5 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(--sintrat-red), var(--sintrat-red-accent));
  --vaadin-button-text-color: #ffffff;
  box-shadow: 0 12px 30px rgba(196, 22, 28, 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(196, 22, 28, 0.18);
  --vaadin-input-field-hover-highlight: rgba(196, 22, 28, 0.06);
  --vaadin-input-field-value-color: var(--sintrat-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(168, 18, 24, 0.18), transparent 22%),
    radial-gradient(circle at 80% 10%, rgba(196, 22, 28, 0.22), transparent 30%),
    linear-gradient(145deg, #fffafa 0%, #fff0f0 45%, #fff7f7 100%);
}

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

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

vaadin-login-form vaadin-button[theme~="submit"] {
  background: linear-gradient(135deg, var(--sintrat-red), var(--sintrat-red-accent));
  border: none;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(125, 14, 18, 0.24);
}

vaadin-login-form vaadin-text-field::part(input-field),
vaadin-login-form vaadin-password-field::part(input-field) {
  background: rgba(255, 247, 247, 0.95);
  border: 1px solid rgba(196, 22, 28, 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(--sintrat-red-accent), var(--sintrat-red-dark));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(168, 18, 24, 0.2);
}

.login-view .doacoes-btn {
  background: rgba(196, 22, 28, 0.08);
  color: var(--sintrat-red-deep);
  border: 1px solid rgba(196, 22, 28, 0.16);
}

.login-view a {
  color: var(--sintrat-red-deep);
}

.sintrat-login-brand {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff;
  object-fit: contain;
}