@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root {
  --app-accent: #0f766e;
  --app-accent-strong: #0b5d57;
  --app-accent-soft: rgba(15, 118, 110, 0.15);
  --app-surface: rgba(255, 255, 255, 0.82);
  --app-surface-strong: #ffffff;
  --app-border: #d7deea;
  --app-title: #0f172a;

  --lumo-font-family: "IBM Plex Sans", "Segoe UI", "Tahoma", sans-serif;
  --lumo-primary-color: var(--app-accent);
  --lumo-primary-color-10pct: var(--app-accent-soft);
  --lumo-primary-color-50pct: rgba(15, 118, 110, 0.5);
  --lumo-primary-text-color: var(--app-accent);
  --lumo-header-text-color: var(--app-title);
  --lumo-body-text-color: #1f2937;
  --lumo-border-radius-s: 10px;
  --lumo-border-radius-m: 14px;
  --lumo-border-radius-l: 18px;
}

html,
body {
  background:
    radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.13), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(30, 64, 175, 0.12), transparent 30%),
    linear-gradient(160deg, #eef3f8 0%, #f8fbfd 56%, #f1f6fb 100%);
}

h1 {
  font-family: "Manrope", "IBM Plex Sans", "Segoe UI", "Tahoma", sans-serif;
  letter-spacing: -0.02em;
}

.app-layout-shell::part(drawer) {
  background: rgba(248, 252, 255, 0.88);
  border-right: 1px solid var(--app-border);
  backdrop-filter: blur(7px);
}

.app-layout-shell::part(navbar) {
  background: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(10px);
}

.main-navbar {
  min-height: 64px;
}

.drawer-brand {
  justify-content: center;
  border-bottom: 1px solid var(--app-border);
  padding-bottom: var(--lumo-space-s);
}

.drawer-brand .app-title {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
}

.main-nav {
  padding: var(--lumo-space-s);
}

.main-nav vaadin-side-nav-item::part(link) {
  border-radius: 12px;
  font-weight: 600;
  margin: 2px 0;
}

.main-nav vaadin-side-nav-item[current]::part(link) {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.24);
}

.page-title {
  font-size: 1.25rem;
  margin: 0;
}

.view-shell {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.actions-bar {
  width: 100%;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--lumo-border-radius-m);
  padding: var(--lumo-space-s);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.actions-bar vaadin-button {
  font-weight: 600;
  border-radius: 10px;
}

.actions-bar vaadin-button[theme~="primary"] {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.3);
}

.modern-grid {
  border: 1px solid var(--app-border);
  border-radius: var(--lumo-border-radius-m);
  overflow: hidden;
  --vaadin-grid-cell-padding: 0.72rem 0.85rem;
  --vaadin-grid-header-cell-background: #f4f8fc;
  --vaadin-grid-row-hover-cell-background: rgba(15, 118, 110, 0.07);
}

.modern-grid::part(header-cell) {
  color: #334155;
  font-weight: 700;
}

.modern-grid::part(row) {
  min-height: 46px;
}

vaadin-text-field::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-big-decimal-field::part(input-field),
vaadin-text-area::part(input-field) {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #d7deea;
}

vaadin-dialog-overlay::part(content) {
  border-radius: var(--lumo-border-radius-l);
  border: 1px solid var(--app-border);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.18);
}

@media (max-width: 960px) {
  .view-shell {
    border-radius: var(--lumo-border-radius-m);
    margin: var(--lumo-space-xs);
  }

  .actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
  }
}