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

html {
  --frelimo-red: hsl(0, 96%, 47%);
  --frelimo-red-deep: hsl(0, 100%, 42%);
  --frelimo-red-soft: hsl(0, 81%, 50%);
  --frelimo-ink: #3d2020;

  --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(33, 33, 33, 0.05);
  --lumo-shade-10pct: rgba(33, 33, 33, 0.1);
  --lumo-shade-20pct: rgba(33, 33, 33, 0.2);
  --lumo-shade-30pct: rgba(33, 33, 33, 0.3);
  --lumo-shade-40pct: rgba(33, 33, 33, 0.4);
  --lumo-shade-50pct: rgba(33, 33, 33, 0.5);
  --lumo-shade-60pct: rgba(33, 33, 33, 0.6);
  --lumo-shade-70pct: rgba(33, 33, 33, 0.7);
  --lumo-shade-80pct: rgba(33, 33, 33, 0.8);
  --lumo-shade-90pct: rgba(33, 33, 33, 0.9);
  --lumo-shade: hsl(0, 0%, 13%);
  --lumo-primary-color: var(--frelimo-red);
  --lumo-primary-color-50pct: hsla(0, 96%, 47%, 0.5);
  --lumo-primary-color-10pct: hsla(0, 96%, 47%, 0.1);
  --lumo-primary-text-color: var(--frelimo-red-deep);
  --lumo-success-color: hsl(159, 76%, 57%);
  --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
  --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
  --lumo-success-contrast-color: hsl(159, 29%, 10%);
  --lumo-success-text-color: hsl(159, 61%, 40%);
  --lumo-error-color: var(--frelimo-red-soft);
  --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
  --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
  --lumo-error-text-color: hsl(0, 86%, 45%);
  --lumo-header-text-color: var(--frelimo-ink);
  --lumo-body-text-color: #4a3030;
  --lumo-secondary-text-color: #765c5c;
  --lumo-tertiary-text-color: #967f7f;
  --lumo-contrast: rgb(61, 32, 32);
  --lumo-contrast-10pct: rgba(61, 32, 32, 0.1);
  --lumo-contrast-20pct: rgba(61, 32, 32, 0.2);
  --lumo-contrast-80pct: rgba(61, 32, 32, 0.8);
  --lumo-border-radius-l: 20px;
  --lumo-border-radius-m: 14px;
  --lumo-border-radius-s: 10px;
  background:
    radial-gradient(circle at top left, hsla(0, 96%, 47%, 0.07), transparent 28%),
    radial-gradient(circle at top right, hsla(0, 96%, 47%, 0.11), transparent 34%),
    linear-gradient(180deg, #fffdfd 0%, #fff6f6 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(--frelimo-red), var(--frelimo-red-deep));
  --vaadin-button-text-color: #ffffff;
  box-shadow: 0 12px 30px hsla(0, 96%, 47%, 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: hsla(0, 96%, 47%, 0.18);
  --vaadin-input-field-hover-highlight: hsla(0, 96%, 47%, 0.06);
  --vaadin-input-field-value-color: var(--frelimo-ink);
  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
  --vaadin-input-field-border-radius: 14px;
}

.frelimo-login-overlay {
  --lumo-primary-color: hsl(0, 96%, 47%);
  --lumo-primary-color-50pct: hsla(0, 96%, 47%, 0.5);
  --lumo-primary-color-10pct: hsla(0, 96%, 47%, 0.1);
  --lumo-primary-text-color: hsl(0, 100%, 42%);
  --lumo-error-color: hsl(0, 81%, 50%);
  --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
  --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
  --lumo-error-text-color: hsl(0, 86%, 45%);
  --lumo-success-color: hsl(159, 76%, 57%);
  --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
  --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
  --lumo-success-contrast-color: hsl(159, 29%, 10%);
  --lumo-success-text-color: hsl(159, 61%, 40%);
}

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

vaadin-login-overlay::part(backdrop) {
  background: var(--lumo-base-color);
}

vaadin-login-overlay-wrapper::part(card) {
  background: var(--lumo-base-color);
  border: none;
  border-radius: var(--lumo-border-radius-l);
  box-shadow: var(--lumo-box-shadow-l);
}

vaadin-login-form-wrapper::part(footer) {
  margin-top: -1rem;
}

@media (max-height: 760px) {
  vaadin-login-overlay-wrapper::part(content) {
    align-items: flex-start;
    overflow-y: auto;
  }

  vaadin-login-overlay-wrapper::part(card) {
    flex-shrink: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

vaadin-login-form-wrapper {
  color: inherit;
}

vaadin-login-form vaadin-button[theme~="submit"] {
  background: var(--lumo-primary-color);
  border-radius: var(--lumo-border-radius-m);
  box-shadow: none;
}

vaadin-login-form vaadin-text-field::part(input-field),
vaadin-login-form vaadin-password-field::part(input-field) {
  background: #ffffff;
  border: 1px solid hsla(0, 96%, 47%, 0.16);
  border-radius: var(--lumo-border-radius-m);
}

vaadin-login-form vaadin-text-field,
vaadin-login-form vaadin-password-field {
  --vaadin-input-field-background: #ffffff;
  --vaadin-input-field-hover-highlight: hsla(0, 96%, 47%, 0.06);
}

vaadin-login-form input:-webkit-autofill,
vaadin-login-form input:-webkit-autofill:hover,
vaadin-login-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
}

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

.login-view .criar-conta-btn {
  background: hsl(0, 96%, 47%);
  color: #ffffff;
  box-shadow: none;
}

.login-view .doacoes-btn {
  background: hsla(0, 96%, 47%, 0.1);
  color: hsl(0, 100%, 42%);
  border: 1px solid hsla(0, 96%, 47%, 0.2);
}

.login-view a {
  color: hsl(0, 100%, 42%);
}