@charset "UTF-8";

/* =========================================
   DESIGN TOKENS
   ========================================= */

:root {

  /* Brand */
  --app-primary-500: #2563EB;
  --app-primary-700: #1E40AF;

  /* Light mode surfaces */
  --app-navbar-bg-light: linear-gradient(90deg, #5f8ee6 0%, #1E40AF 100%);
  --app-drawer-bg-light: linear-gradient(180deg, #5f8ee6 0%, #1E40AF 100%);
  --app-content-bg-light: #eef7ff;

  /* Dark mode surfaces linear-gradient(180deg, #0f172a 0%, #020617 100%); */
  --app-navbar-bg-dark: linear-gradient(90deg, #0b265a 0%, #0f172a 100%);
  --app-drawer-bg-dark: linear-gradient(180deg, #0b265a 0%, #0f172a 100%);
  --app-content-bg-dark: #0f172a;

  /* Text */
  --app-text-light: #ffffff;
  --app-text-dark: #ffffff;
  
  --modra-50:  #e6f2ff;
  --modra-100: #d4e6ff;
  --modra-200: #b8d6ff;
  --modra-300: #9dc0fa;
  --modra-400: #7aa5f5;
  --modra-500: #5f8ee6;
  --modra-600: #3b72d2;
  --modra-700: #2b5bb3;
  --modra-800: #1d4a9e;
  --modra-900: #12387a;
  --modra-950: #0b265a;
  --modra-1000:#0f172a;
  
}

vaadin-button {
  font-weight: 600;
  text-transform: normal;
  letter-spacing: 0.5px;
}

.orbitala-button {
  background-color: #1976d2;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  padding: 0.5em 1.2em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  transition: background-color 0.2s ease-in-out;
}

.orbitala-button:hover {
  background-color: #125699;
}

/* =========================================
   LIGHT MODE
   ========================================= */

vaadin-app-layout::part(navbar) {
  background: var(--app-navbar-bg-light);
  color: var(--app-text-light);
}

vaadin-app-layout::part(drawer) {
  background: var(--app-drawer-bg-light);
  color: var(--app-text-light);
}

vaadin-app-layout::part(content) {
  background: var(--app-content-bg-light);
  color: #0f172a;
  min-height: 100vh;
}

/* Ensure text inside navbar & drawer is white */
vaadin-app-layout::part(navbar) *,
vaadin-app-layout::part(drawer) * {
  color: var(--app-text-light);
}

/* =========================================
   DARK MODE
   ========================================= */

html[theme~="dark"] vaadin-app-layout::part(navbar) {
  background: var(--app-navbar-bg-dark);
  color: var(--app-text-dark);
}

html[theme~="dark"] vaadin-app-layout::part(drawer) {
  background: var(--app-drawer-bg-dark);
  color: var(--app-text-dark);
}

html[theme~="dark"] vaadin-app-layout::part(content) {
  background: var(--app-content-bg-dark);
  color: #ffffff;
}

/* Ensure internal text is white */
html[theme~="dark"] vaadin-app-layout::part(navbar) *,
html[theme~="dark"] vaadin-app-layout::part(drawer) * {
  color: var(--app-text-dark);
}

/* =========================================
   SIDENAV ITEMS
   ========================================= */

vaadin-side-nav {
  background: transparent;
  padding: 0.75rem 0.5rem;
}

vaadin-side-nav-item::part(link) {
  color: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-weight: 500;
  transition: all 0.18s ease-in-out;
}

vaadin-side-nav-item::part(prefix) {
  color: rgba(255,255,255,0.75);
}

/* Hover */
vaadin-side-nav-item::part(link):hover {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
}

/* Active */
vaadin-side-nav-item[current]::part(link) {
  background-color: #ffffff;
  color: #1E40AF;
  font-weight: 600;
}

vaadin-side-nav-item[current]::part(prefix) {
  color: #1E40AF;
}

html[theme~="dark"] vaadin-side-nav-item[current]::part(link) {
  background-color: #ffffff;
  color: #0f172a;
}

html[theme~="dark"] vaadin-side-nav-item[current]::part(prefix) {
  color: #0f172a;
}

/* Modern style for Vaadin TextField */
vaadin-text-field {
    --vaadin-input-field-border-width: 2px;
    --vaadin-input-field-border-color: #d1d5db; /* neutral gray */
    --vaadin-input-field-border-radius: 8px;
    --vaadin-input-field-padding: 0.6rem 0.9rem;
    --vaadin-input-field-background: #ffffff;
    --vaadin-input-field-hover-border-color: #3b82f6; /* blue-500 */
    --vaadin-input-field-focus-border-color: #2563eb; /* blue-600 */
    --vaadin-input-field-value-color: #111827; /* gray-900 text */
    --vaadin-input-field-placeholder-color: #9ca3af; /* gray-400 */
    --vaadin-input-field-font-size: 1rem;
    --vaadin-input-field-font-weight: 400;
    transition: all 0.2s ease-in-out;
}

/* Add a subtle shadow on focus */
vaadin-text-field:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* blue glow */
}

/* Error state (when field is invalid) */
vaadin-text-field[invalid] {
    --vaadin-input-field-border-color: #dc2626; /* red-600 */
    --vaadin-input-field-focus-border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}