/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
   }

.body-content {
display: flex;
background-color: #f7f7f7;
height: 100vh;
max-height: 100%;
}

aside {
width: 15rem;
height: 100vh;
display: flex;
flex-direction: column;
}

aside .logout-bar {
margin-top: auto;
padding: 1rem;
border-top: 1px solid #e6e6e6;
}

aside ul {
padding: 0.5rem;
list-style: none;
}

aside ul li {
margin: 0.5rem 0;
padding: 1rem 1.5rem;
}

aside ul li.active {
border-radius: 0.5rem;
color: #e6e6e6;
background-color: black;
}

.app-name {
font-size: 1.5rem;
font-weight: bold;
padding: 1rem;
color: #0b5e85;
}

header {
padding: 1rem;
display: flex;
justify-content: flex-end;
}

.avatar {
font-size: 0.7rem;
text-align: center;
display: inline-block;
width: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
border-radius: 50%;
background-color: #0b5e85;
color: #f7f7f7;
}

.overview {
flex-grow: 1;
display: flex;
flex-direction: column;
}

main {
background-color: #e6e6e6;
border-top-left-radius: 2rem;
padding: 2rem;
flex-grow: 1;
}

h2 {
margin-bottom: 2rem;
}

.grid-stack-item-content {
cursor: grab;
display: flex;
flex-basis: auto;
flex-direction: column;
justify-content: center;
background-color: #f7f7f7;
border-radius: 0.5rem;
padding: 1rem;
box-shadow:
  0 1px 3px #0000001f,
  0 1px 2px #0000003d;
background-color: var(--color-background-primary);
}


.customer-overview {
color: #660f7c;
}

.growth {
background-color: #e3eeea;
color: #008000;
}

.description {
text-align: center;
margin: 1rem 0 0.3rem;
}

.metric-value {
font-size: 2.2rem;
text-align: center;
}

.metric-value.profit i {
color: #008000;
}

.transactions-overview {
color: #660f7c;
}

table {
margin: 1rem 0;
width: 100%;
border-collapse: collapse;
}

th,
td {
padding: 0.4rem 0;
border-bottom: 1px solid #e6e6e6;
}

tr:nth-child(even) {
background-color: #eeeef7;
}

thead th {
font-weight: normal;
text-align: left;
}

.top-customers ul {
list-style: none;
}

.top-customers ul li {
text-align: center;
margin: 0.2rem 0;
}

.top-customers ul li i {
color: #daa520;
}

.test {
  overflow-x: scroll;
  height: 100vh;
}

/* x-ski header */
.header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background-color: #ff7b00;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo {
  height: 56px;
  display: block;
}

.header-right {
  display: grid;
  row-gap: 4px;
  line-height: 1.2;
  min-width: 0;
}

.user-name {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.user-meta {
  font-size: 16px;
  opacity: 0.95;
  white-space: nowrap;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gear {
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
  color: white;
}

.gear:hover {
  transform: rotate(-10deg);
  opacity: 0.9;
}

.gear-active {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}
/* Navigation im Kopfbereich (Training / Strecke) */
.header-actions .nav-link { color: inherit; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); }
.header-actions .nav-link.nav-active { background: rgba(255, 255, 255, 0.25); }

/* Kopfzeile: Kacheln in Touch-Grösse. Mass und Form gemeinsam, damit Profil, Beenden,
   Neu starten und Ausschalten gleich gross sind; die Farbe unterscheidet den Zweck. */
.header-actions .quit-tile,
.header-actions .nav-tile { font: inherit; font-size: 20px; font-weight: 800; min-height: 60px;
  padding: 8px 22px; border-radius: 14px; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.header-actions .quit-tile { background: #fff; color: #b91c1c; }
.header-actions .quit-tile:active { background: #fde8e8; }
/* Profil führt nur auf eine Seite – darum nicht rot, sondern wie die Kopfzeile selbst */
.header-actions .nav-tile { background: rgba(255, 255, 255, 0.15); color: inherit; text-decoration: none; }
.header-actions .nav-tile.nav-active { background: rgba(255, 255, 255, 0.3); }
/* Anzeigegrösse pro Gerät (static/js/zoom.js). Klein gehalten: man braucht sie selten,
   aber genau dann, wenn man auf die Seite schaut – darum hier und nicht in einem Formular. */
.header-actions .zoom-tile { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 700; color: inherit; opacity: .85; }
.header-actions .zoom-tile button { font: inherit; font-size: 15px; font-weight: 800; min-width: 30px;
  min-height: 30px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px;
  background: rgba(255, 255, 255, 0.12); color: inherit; cursor: pointer; }
.header-actions .zoom-tile button:active { background: rgba(255, 255, 255, 0.3); }
.header-actions .zoom-tile span { min-width: 42px; text-align: center; }
.header-actions .nav-tile:active { background: rgba(255, 255, 255, 0.35); }