/*─────────────────────────────────────────────────────────────────
  © 2025 Prometo AS. All rights reserved.

  This file is part of the “EDEL” software package
  and is proprietary material protected by copyright law and
  international treaties.  Unauthorized reproduction or
  distribution of this file, or any portion of it, may result
  in severe civil and criminal penalties and will be prosecuted
  to the maximum extent possible under law.

  Use of this file is governed by the Proprietary Software
  License Agreement accompanying the package in which this file
  is distributed.  Unless you have entered into a valid signed
  license agreement with Prometo AS, you may not
  exercise any of the rights to this file other than those
  granted in that agreement.

  Contact: bjorn.espen@prometo.no
─────────────────────────────────────────────────────────────────*/
@font-face {
  font-family: 'Roboto';
  src: url('../../fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

:root {
  /* Harmonised colour system shared with the public marketing site. */
  --background: 214 69% 97%;
  --foreground: 208 62% 16%;
  --card: 0 0% 100%;
  --card-foreground: 208 62% 16%;
  --border: 214 15% 83%;
  --input: 214 15% 83%;
  --primary: 208 62% 16%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 60% 43%;
  --secondary-hover: 174 60% 38%;
  --secondary-foreground: 0 0% 100%;
  --muted: 214 15% 83%;
  --muted-foreground: 0 0% 31%;
  --accent: 214 58% 92%;
  --accent-foreground: 208 62% 16%;
  --ring: 208 62% 16%;
  --radius: 0.5rem;
  --card-shadow: 0 1px 3px 0 rgba(16, 42, 66, 0.1), 0 1px 2px -1px rgba(16, 42, 66, 0.1);
  --card-shadow-hover: 0 10px 25px -3px rgba(16, 42, 66, 0.15),
    0 4px 6px -4px rgba(16, 42, 66, 0.15);
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Prevent the hamburger menu's light DOM links from flashing before the
   custom element definition hydrates and moves them into the shadow DOM. */
app-menu {
  display: block;
}

app-menu:not(:defined) {
  visibility: hidden;
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

#appContainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#mainArea {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

#topPanel {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
  position: relative;
}


#userArea {
  display: flex;
  align-items: center;
}

.beta-badge {
  margin-right: 0.75rem;
  padding: 0.1rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.beta-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.35);
}

.beta-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(13, 148, 136, 0.35);
}

dialog::backdrop {
  background: rgba(16, 42, 66, 0.4);
}

.user-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7aa7c7;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}

pre {
  background: #f4f4f4;
  padding: 0.5em;
  overflow-x: auto;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #e2e8f0;
  color: #0b1224;
  padding: 0.1em 0.4em;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

dialog {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.welcome-dialog {
  padding: 0;
  border: none;
  max-width: min(90vw, 720px);
  width: min(92vw, 720px);
  box-shadow: var(--card-shadow-hover);
}

.welcome-dialog__content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(135deg, rgba(236, 246, 255, 0.95), rgba(214, 228, 255, 0.9));
  color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * 2);
  min-width: min(90vw, 640px);
  box-sizing: border-box;
  max-height: 85vh;
  overflow: auto;
}

.welcome-dialog__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.welcome-dialog__eyebrow {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--secondary));
}

.welcome-dialog__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
}

.welcome-dialog__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.welcome-dialog__tile {
  position: relative;
  border-radius: calc(var(--radius) * 1.5);
  aspect-ratio: 5 / 3;
  background: linear-gradient(135deg, rgba(76, 132, 255, 0.12), rgba(13, 148, 136, 0.12));
  border: 1px dashed rgba(15, 23, 42, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.welcome-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 1rem;
  line-height: 1.6;
}

.welcome-dialog__body p {
  margin: 0;
}

.welcome-dialog__link {
  font-weight: 600;
  color: hsl(var(--secondary));
}

.welcome-dialog__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
}

.welcome-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.welcome-dialog__actions .button-10.button-secondary {
  color: hsl(var(--foreground));
}

@media (max-width: 720px) {
  .welcome-dialog__content {
    min-width: auto;
  }

  .welcome-dialog__actions {
    flex-direction: column;
  }

  .welcome-dialog__actions .button-10 {
    width: 100%;
  }
}

@media (max-width: 540px) {
  .welcome-dialog {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .welcome-dialog__content {
    min-width: 0;
    padding: clamp(1.25rem, 5vw, 1.5rem);
    gap: 1.25rem;
    border-radius: calc(var(--radius) * 1.5);
  }

  .welcome-dialog__header {
    align-items: flex-start;
  }

  .welcome-dialog__title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .welcome-dialog__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-card--page,
  .auth-card--dialog {
    width: min(90vw, 400px);
    padding: 1.5rem;
    margin-inline: auto;
  }

  .auth-card__title {
    font-size: 1.5rem;
  }

  .auth-card__subtitle {
    font-size: 0.95rem;
  }
}

.warn {
  color: red;
  font-size: 0.8rem;
}

.auth-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
}

.auth-card--page {
  width: min(100%, 420px);
  padding: 2rem;
  margin: 0 auto;
}

.auth-card--dialog {
  padding: 2rem;
  width: min(90vw, 420px);
  margin: 1.25rem auto;
}

.auth-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-card__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.auth-card__subtitle {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
}

.auth-card__oauth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: hsl(var(--border));
}

.auth-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.auth-form label {
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.auth-input {
  width: 100%;
  /* Mirror the marketing site's form control proportions and prevent padding overflow. */
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.auth-input:focus,
.auth-input:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
  outline: none;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-helper {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.auth-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.auth-message {
  font-size: 0.9rem;
  color: #c02626;
  background-color: rgba(192, 38, 38, 0.08);
  border: 1px solid rgba(192, 38, 38, 0.2);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  text-align: center;
}

#profileDialog {
  padding: 1rem;
}

#profileDialog .profile-name {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

#profileDialog .profile-email {
  color: #555;
}

#profileDialog .button-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  #appContainer {
    height: auto;
    min-height: 100vh;
  }

  #mainArea {
    flex-direction: column;
    overflow: auto;
  }
}