/* ═══════════════════════════════════════════════════════════════════════════
   STR Software — Cloud License Service theme
   Primary brand colour: #002776 (STR navy)
   Matches the visual language of the AventX application.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lumo token overrides ─────────────────────────────────────────────────── */
html {
  --lumo-primary-color:         #002776;
  --lumo-primary-color-50pct:   rgba(0, 39, 118, 0.5);
  --lumo-primary-color-10pct:   rgba(0, 39, 118, 0.1);
  --lumo-primary-text-color:    #002776;
  --lumo-primary-contrast-color:#ffffff;

  /* Slightly softer body text */
  --lumo-body-text-color: #1a1a2e;

  /* Tighter border radius for a professional look */
  --lumo-border-radius-m: 4px;
  --lumo-border-radius-s: 3px;
  --lumo-border-radius-l: 6px;
}

/* ── Top navbar ───────────────────────────────────────────────────────────── */
/* Critical navbar colour is applied inline via Java getStyle() in MainLayout.
   These selectors are fallback / reinforcement only. */
vaadin-app-layout::part(navbar) {
  background-color: #002776;
  padding: 0;
}

/* ── Left sidebar / drawer ────────────────────────────────────────────────── */
vaadin-app-layout::part(drawer) {
  background-color: #ffffff;
  border-right: 1px solid var(--lumo-contrast-10pct);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  width: 220px;
}

/* ── Sidebar logo header ──────────────────────────────────────────────────── */
.cls-drawer-header {
  background-color: #002776;
  padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lumo-space-xs);
}

.cls-drawer-header img {
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* make logo white on navy */
}

.cls-drawer-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
}

/* ── Nav items ────────────────────────────────────────────────────────────── */
vaadin-side-nav {
  padding: var(--lumo-space-s) 0;
}

vaadin-side-nav-item::part(item) {
  font-size: 0.85rem;
  font-weight: 500;
  color: #2c3e50;
  padding: var(--lumo-space-s) var(--lumo-space-m);
  border-radius: 0;
  margin: 1px 0;
  transition: background-color 0.15s, color 0.15s;
}

vaadin-side-nav-item::part(item):hover {
  background-color: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-color);
}

vaadin-side-nav-item[active]::part(item) {
  background-color: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-color);
  font-weight: 700;
  border-left: 3px solid var(--lumo-primary-color);
}

/* ── Page content area ────────────────────────────────────────────────────── */
vaadin-app-layout::part(content) {
  background-color: #f5f7fa;
}

/* ── Page headings ────────────────────────────────────────────────────────── */
h3 {
  color: #002776;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 var(--lumo-space-s);
  padding-bottom: var(--lumo-space-xs);
  border-bottom: 2px solid var(--lumo-primary-color-10pct);
}

h4 {
  color: #2c3e50;
  font-size: 0.95rem;
  font-weight: 600;
  margin: var(--lumo-space-m) 0 var(--lumo-space-xs);
}

/* ── Cards / panels ───────────────────────────────────────────────────────── */
vaadin-form-layout,
.cls-card {
  background-color: #ffffff;
  border-radius: var(--lumo-border-radius-m);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: var(--lumo-space-m);
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
vaadin-grid {
  border-radius: var(--lumo-border-radius-m);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

vaadin-grid::part(header-cell) {
  background-color: #f0f3f8;
  color: #002776;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

vaadin-grid::part(row):hover vaadin-grid-cell-content {
  background-color: var(--lumo-primary-color-10pct);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
vaadin-button[theme~="primary"] {
  background-color: #002776;
  color: #ffffff;
}
vaadin-button[theme~="primary"]:hover {
  background-color: #003399;
}

/* ── Login page ───────────────────────────────────────────────────────────── */
vaadin-login-overlay-wrapper::part(overlay-content) {
  background-color: #002776;
}
vaadin-login-form {
  --lumo-primary-color: #002776;
}

/* ── Status badges ────────────────────────────────────────────────────────── */
span[theme~="badge"] {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
  padding: 2px 7px;
}

span[theme~="badge"][theme~="success"] {
  background-color: #e6f4ea;
  color: #1e7e34;
}

span[theme~="badge"][theme~="error"] {
  background-color: #fce8e8;
  color: #c0392b;
}

span[theme~="badge"][theme~="contrast"] {
  background-color: #eef0f5;
  color: #495057;
}

/* ── Deprecated feature badge ─────────────────────────────────────────────── */
.cls-deprecated-badge {
  background-color: #fff3cd;
  color: #856404;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Text field / combo helper text ──────────────────────────────────────── */
vaadin-text-area[helper-above-field]::part(helper-text) {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-xs);
}

/* ── Global label utility ─────────────────────────────────────────────────── */
.label {
  align-self: flex-start;
  color: var(--lumo-secondary-text-color);
  font-weight: 500;
  font-size: var(--lumo-font-size-s);
}