/* Basic dark‑mode styling for LyrikOS */
/*
 * Global stil. Vi använder en mörk bakgrund med en accentfärg för
 * interaktiva element. Appen försöker ge en "native" känsla med kort
 * och skugga. Justera variablerna för att förändra temat.
 */
:root {
  --background-color: #10142c;
  --surface-color: #1e2345;
  --card-color: #232a52;
  --accent-color: #6c63ff;
  --text-color: #f5f5f5;
  --muted-color: #9aa2c1;
  /* Lägg till en subtil gradient för bakgrunden för mer djup */
  --background-gradient: linear-gradient(180deg, #0e153a 0%, #1a2150 50%, #232a52 100%);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--background-gradient);
  color: var(--text-color);
  min-height: 100vh;
}

header {
  background: rgba(20, 26, 58, 0.8);
  padding: 0.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}

nav {
  /* nav styles moved to .nav-buttons for better control */
}

nav button {
  background: rgba(35, 42, 82, 0.8);
  color: var(--text-color);
  border: 1px solid var(--accent-color);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.12s ease;
  backdrop-filter: blur(4px);
}

nav button:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
}

main {
  padding: 2rem;
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

footer {
  background: rgba(20, 26, 58, 0.8);
  padding: 0.8rem;
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid #2d3569;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}

/* Korthållare för alla vyer */
.view-card {
  width: 100%;
  max-width: 900px;
  background: rgba(35, 42, 82, 0.85);
  border-radius: 12px;
  padding: 2rem 3rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

/* Utility styles for forms and tables */
.hidden {
  display: none;
}

/* Formulärstilar */
.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted-color);
  font-size: 0.9rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--surface-color);
  border: 1px solid #3c4588;
  color: var(--text-color);
  border-radius: 6px;
  font-size: 1rem;
}
.form-group button {
  margin-top: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--accent-color);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.form-group button:hover {
  background: #8077ff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}
th, td {
  border-bottom: 1px solid #2d3569;
  padding: 0.6rem 0.5rem;
}
th {
  background: var(--surface-color);
  color: var(--text-color);
  text-align: left;
}
tr:nth-child(even) {
  background: #1a1f3a;
}
tr:hover {
  background: #2e386d;
}

/* Wizard buttons */
.wizard-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.wizard-buttons button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  background: var(--surface-color);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  flex: 1 0 calc(50% - 0.5rem);
  min-width: 120px;
}
.wizard-buttons button:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
}

/* ----- Ny design för topbar, logo och nav-knappar ----- */
.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.app-name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  color: var(--text-color);
}
.nav-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.nav-buttons button {
  background: rgba(35, 42, 82, 0.8);
  color: var(--text-color);
  border: 1px solid var(--accent-color);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.12s ease;
  backdrop-filter: blur(4px);
}
.nav-buttons button:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
}