:root {
  /* Rovex Construction Corporate Colors */
  --accent: #da3a3d; /* Rovex Rot */
  --accent-soft: rgba(218, 58, 61, 0.25);

  --bg: #202020; /* Anthrazit */
  --bg-elevated: #262626; /* etwas heller */
  --bg-elevated-soft: #2e2e2e;

  --border-subtle: #3a3a3a;

  --text-main: #ffffff;
  --text-muted: #bfbfbf;
  --text-soft: #8a8a8a;

  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 18px 30px rgba(0, 0, 0, 0.45);
  --transition-fast: 0.18s ease-out;
  --danger: #e84a4a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* Layout */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */

.sidebar {
  width: 270px;
  background: linear-gradient(180deg, #202020, #1c1c1c);
  border-right: 1px solid #3a3a3a;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* Logo */

.logo-wrap {
  width: 100%;
  height: auto;
  max-height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Navigation */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition-fast), color var(--transition-fast),
    transform var(--transition-fast);
}

.nav-item.small {
  font-size: 0.82rem;
  padding: 7px 10px;
}

.nav-item i {
  width: 18px;
}

.nav-item:hover {
  background: #2a2a2a;
  color: #ffffff;
  transform: translateY(-1px);
}

.nav-item.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* Sidebar Footer */

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid #3a3a3a;
  padding-top: 10px;
}

.small-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.14em;
}

/* optional - aktuell im HTML kaum genutzt */
.role-toggle {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

.role-btn {
  flex: 1;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #202020;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 6px 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.role-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Main */

.main {
  flex: 1;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-left h1 {
  margin: 0;
  font-size: 1.4rem;
}

.topbar-subtitle {
  font-size: 0.85rem;
  color: var(--text-soft);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-date {
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* User Chip / Profile Button */

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #292929;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #3a3a3a;
  cursor: pointer;
  transition: var(--transition-fast);
}

.user-chip:hover {
  background: #333333;
}

.avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.user-name {
  font-size: 0.9rem;
  color: #da3a3d;

}

.user-role {
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* Views */

.views {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  flex: 1;
}

.view {
  display: none;
}

.view-active {
  display: block;
}

/* Section header */

.section-header h2 {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
}

.section-header p {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* Cards */

.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-subtle);
  padding: 12px 14px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-header span {
  color: #ffffff;
}

.card-body {
  font-size: 0.85rem;
}

/* Grid */

.grid {
  display: grid;
  row-gap: 22px;
  column-gap: 22px;
}

/* Spalten dürfen wirklich schrumpfen */
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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


/* 3 Karten in einer Reihe für das KPI-Grid */
.grid-4 {
  grid-template-columns: repeat(3, 1fr);
}

/* KPI Cards */


.kpi-label {
  font-size: 0.8rem;
  color: #ffdddd;
}

.kpi-value {
  margin-top: 4px;
  font-size: 1.6rem;
  font-weight: 700;
}

.kpi-footer {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #ffdcdc;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Forms */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  gap: 5px;
}

input,
select {
  border-radius: 10px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  color: #ffffff;
  padding: 7px 9px;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(218, 58, 61, 0.4);
  outline: none;
}

/* Buttons */

.btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 7px 13px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
  background: transparent;
}

.btn.primary {
  background: var(--accent);
  color: white;
}

.btn.primary:hover {
  background: #b6272a;
}

.btn.ghost {
    background: #da3a3d;
    border: 1px solid #555;
    color: #ddd;
}

.btn.ghost:hover {
  background: #2b2b2b;
}

/* Tables */

.table-wrapper {
  max-height: 260px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

th,
td {
  padding: 6px 8px;
  border-bottom: 1px solid #303030;
}

th {
  text-align: left;
  color: var(--text-soft);
  background: #1c1c1c;
}

/* Today List */

.today-item {
  background: #1c1c1c;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid #333;
  margin-bottom: 6px;
}

.today-item-main {
  display: flex;
  justify-content: space-between;
}

.today-item-sub {
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* Help Section */

.help-list {
  padding-left: 20px;
}

.muted {
  color: var(--text-soft);
  font-size: 0.78rem;
}

/* Notifications */

#notification-container {
  position: fixed;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.notification {
  min-width: 260px;
  max-width: 320px;
  background: #1c1c1c;
  border-radius: 14px;
  border: 1px solid #333;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
}

.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-icon i {
  color: var(--accent);
}

.notification-body {
  display: flex;
  flex-direction: column;
}

.notification-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-text {
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* Login Meldungen */

.login-status {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #4ade80;
}

.login-error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--danger);
}

/* Mitarbeiter-Tabelle: selektierte Zeile */

tr.employee-selected {
  background: #333333;
}

/* Delete-Button in Mitarbeiter-Tabelle */

.emp-delete-btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  background: transparent;
  color: #fca5a5;
  transition: var(--transition-fast);
}

.emp-delete-btn:hover {
  background: rgba(232, 74, 74, 0.15);
  color: #fecaca;
}

/* Topbar Burger Button */

.topbar-menu-btn {
  display: none;
  border: none;
  background: transparent;
  color: var(--text-main);
  padding: 6px 8px;
  border-radius: 10px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 1rem;
}

/* Sidebar Backdrop (Mobile) */

#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 900;
}

#sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Zustand: Sidebar geöffnet */

.sidebar.sidebar-open {
  transform: translateX(0);
}

/* Topbar Logo (Mobile) */

.topbar-title-wrap {
  display: flex;
  flex-direction: column;
}

.topbar-logo-mobile {
  display: none;
}

/* Hours-Section */

.hours-summary {
  margin-top: 10px;
  display: flex;
  gap: 16px;
}

.hours-total {
  font-size: 1.4rem;
  font-weight: 600;
}

/* Offer Summary */

.offer-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.offer-summary > div {
  background: #1c1c1c;
  border-radius: var(--radius-md);
  border: 1px solid #333;
  padding: 8px 10px;
}

.offer-summary div > div {
  font-weight: 600;
  margin-top: 4px;
}

/* Wochenplan – Kalender-Ansicht */

.schedule-week-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 gleich breite Spalten */
  gap: 8px;
  margin-bottom: 12px;
}
.schedule-week-tab {
  background: #1c1c1c;
  border-radius: var(--radius-md);
  border: 1px solid #333;
  padding: 6px 8px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
}

.schedule-week-tab span {
  display: block;
}
.schedule-layout {
  display: grid;
  gap: 16px;
  align-items: flex-start;
}

.schedule-employee-pool {
  background: #1c1c1c;
  border-radius: var(--radius-md);
  border: 1px solid #333;
  padding: 10px;
}

.schedule-employee-pool h3 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.schedule-employee-pool #schedule-employee-pool-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-emp-pill {
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px dashed #444;
  background: #252525;
  font-size: 0.8rem;
  cursor: grab;
  user-select: none;
}

.schedule-emp-pill:active {
  cursor: grabbing;
}

.schedule-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.schedule-day-column {
  background: #1c1c1c;
  border-radius: var(--radius-md);
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.schedule-day-header {
  padding: 6px 8px;
  border-bottom: 1px solid #333;
  font-size: 0.8rem;
  font-weight: 600;
}

.schedule-day-body {
  flex: 1;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-day-body:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Eintrag im Kalender */

.schedule-entry-pill {
  border-radius: 10px;
  border: 1px solid #444;
  background: #252525;
  padding: 5px 7px;
  font-size: 0.75rem;
}

.schedule-entry-pill .pill-main {
  font-weight: 600;
}

.schedule-entry-pill .pill-sub {
  color: var(--text-soft);
  font-size: 0.72rem;
}

.schedule-entry-pill .pill-time {
  margin-top: 2px;
  font-size: 0.72rem;
  color: #e5e5e5;
}

/* Profil-Modal */

#profile-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
}

.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.profile-modal-content {
  position: relative;
  max-width: 640px;
  margin: 60px auto;
  padding: 8px;
}

.profile-modal-content .card {
  margin-bottom: 0;
}

.admin-backup-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.admin-backup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Angebotsvorschau */

.offer-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.85rem;
}

.offer-preview-header {
  display: flex;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.offer-preview-logo img {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.offer-preview-meta h3 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
}

.offer-preview-meta p {
  margin: 2px 0;
}

.offer-preview-intro {
  margin-top: 6px;
}

.offer-preview-intro p {
  margin: 0;
}

.offer-preview-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.offer-preview-table th,
.offer-preview-table td {
  padding: 5px 6px;
  border-bottom: 1px solid #333;
}

.offer-preview-table th {
  background: #1c1c1c;
  color: var(--text-soft);
}

.offer-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.offer-preview-summary div {
  background: #1c1c1c;
  border-radius: var(--radius-md);
  border: 1px solid #333;
  padding: 8px 10px;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offer-preview-summary span {
  color: var(--text-soft);
}

.offer-preview-summary strong {
  font-size: 0.9rem;
}

.offer-preview-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.offer-preview-footer p {
  margin: 0;
}

/* Responsive */

@media (max-width: 1024px) {
  .schedule-layout {
    grid-template-columns: 1fr;
  }

  .schedule-week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .offer-preview-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  /* Sidebar als ausklappbares Menü von links */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
    z-index: 1000;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  .main {
    padding: 12px 10px;
    max-width: 100%;
  }

  /* Topbar: links Burger, Mitte Logo, rechts nur Avatar */
  .topbar-left {
    flex: 1;
  }

  .topbar-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .topbar-title-wrap {
    display: none;
  }

  .topbar-logo-mobile {
    display: flex;
    flex: 1;
    justify-content: center;
  }

  .topbar-logo-mobile img {
    height: 40px;
    width: auto;
  }

  .topbar-date {
    display: none;
  }

  .user-meta {
    display: none;
  }

  .user-chip {
    padding: 6px;
    border-radius: 999px;
  }

  /* Login-View soll fast den ganzen Screen füllen */
  #view-login {
    min-height: calc(100vh - 70px);
    padding-top: 12px;
  }

  /* NUR wenn die View aktiv ist, anzeigen & als Flex layouten */
  #view-login.view-active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #view-login .section-header h2 {
    text-align: center;
    font-size: 1.4rem;
    margin: 4px 0 12px;
  }

  #view-login .card {
    flex: 0;
    max-width: 420px;
    margin: 0 auto 24px;
    padding: 20px 18px 24px;
    border-radius: 22px;
  }

  #view-login .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Grids einspaltig */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Tabellen besser mobil scrollen */
  .table-wrapper {
    max-height: none;
    overflow-x: auto;
  }

  .offer-summary {
    grid-template-columns: 1fr;
  }

  .schedule-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-modal-content {
    margin: 40px 8px;
  }
}

@media (max-width: 600px) {
  .schedule-week-grid {
    grid-template-columns: 1fr;
  }
}
/* Edit-Modal für Wochenplan-Einträge */

#schedule-edit-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
}

.schedule-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.schedule-edit-content {
  position: relative;
  max-width: 420px;
  margin: 80px auto;
  padding: 8px;
}

@media (max-width: 840px) {
  .schedule-edit-content {
    margin: 40px 8px;
  }
}
/* Wochenplan – Kalender-Ansicht */

.schedule-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.schedule-week-label {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
}

.btn.icon-only {
  padding: 6px 9px;
  border-radius: 999px;
}
/* --- MOBILE FINETUNING LOGIN & TOPBAR --- */
@media (max-width: 840px) {

  /* Topbar: Logo + Icons größer */
  .topbar-menu-btn {
    font-size: 1.3rem;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .avatar-circle {
    width: 36px;
    height: 36px;
  }

  .avatar-circle i {
    font-size: 1rem;
  }

  .topbar-logo-mobile img {
    height: 50px;
    width: auto;
  }

  #view-login .card {
    flex: 0;                      /* nicht mehr strecken */
    max-width: 420px;
    margin: 0 auto 24px;
    padding: 20px 18px 24px;
    border-radius: 22px;
  }

  #view-login .card-header {
    justify-content: center;
    margin-bottom: 16px;
    padding-top: 2px;
  }

  #view-login .card-header span {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  #view-login .card-body {
    flex: 0;                      /* kein Vollbild mehr */
    display: block;
  }

  /* Formular: einspaltig, schöne Größen */
  #login-form.form-grid {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  #login-form label {
    font-size: 0.9rem;
  }

  #view-login input[type="text"],
  #view-login input[type="password"] {
    font-size: 1rem;
    padding: 11px 12px;
    border-radius: 12px;
  }

  /* Buttons: breite App-Buttons */
  #view-login .btn.primary#btn-login {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 0.95rem;
    margin-top: 8px;
  }

  #view-login #btn-logout {
    margin-top: 16px !important;
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }

  /* Status-/Fehlertexte */
  #view-login .login-status,
  #view-login .login-error {
    font-size: 0.82rem;
    margin-top: 10px;
  }
}
/* --- Dashboard Statistik-Reihen / Tabs --- */

#dashboard-stats {
  display: block;
  margin-bottom: 18px;
}

.dashboard-row {
  margin-bottom: 16px;
}

.dashboard-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.dashboard-row-title {
  font-size: 1rem;
  font-weight: 600;
}

.dashboard-row-subtitle {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.dashboard-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.card.dashboard-tab {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  /* statt grau: Rovex-Gradient wie bei .kpi-card */
  background: radial-gradient(circle at 10% 0, var(--accent), #8a2425);
}

.dashboard-tab-label {
  font-size: 0.8rem;
  color: #ffdddd;
}

.dashboard-tab-value {
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
}

.dashboard-tab-footer {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #ffdcdc;
}


/* mobil etwas luftiger */
@media (max-width: 840px) {
  .dashboard-tabs {
    grid-template-columns: 1fr;
  }
}
/* --- MOBILE FINETUNING: DASHBOARD --- */
@media (max-width: 840px) {
  /* allgemein etwas weniger Außenabstand */
  #view-dashboard .section-header {
    margin-bottom: 6px;
  }

  #view-dashboard .section-header h2 {
    font-size: 1.3rem;
  }

  #view-dashboard .section-header p {
    font-size: 0.8rem;
  }

  /* Reihen enger, damit nichts gequetscht wirkt */
  #dashboard-stats {
    margin-bottom: 12px;
  }

  .dashboard-row {
    margin-bottom: 12px;
  }

  .dashboard-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .dashboard-row-title {
    font-size: 0.95rem;
  }

  .dashboard-row-subtitle {
    font-size: 0.75rem;
  }

  /* Tabs: 1 Spalte, Karten etwas kompakter */
  .dashboard-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .card.dashboard-tab {
    padding: 10px 11px;
    border-radius: 14px;
    margin-bottom: 0;
  }

  .dashboard-tab-label {
    font-size: 0.78rem;
  }

  .dashboard-tab-value {
    font-size: 1.15rem;
  }

  .dashboard-tab-footer {
    font-size: 0.72rem;
  }

  /* Chart + Heute untereinander */
  #view-dashboard .grid.grid-2 {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  #mainChart {
    max-height: 180px;
  }

  /* Stunden-Karte enger */
  #worker-hours-section .form-grid {
    grid-template-columns: 1fr;
  }

  #worker-hours-section .card {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  /* auf ganz kleinen Screens noch etwas größerer Text */
  .dashboard-tab-value {
    font-size: 1.2rem;
  }

  #view-dashboard .card {
    padding: 10px 10px;
  }
}
/* --- MOBILE FINETUNING: GRIDS / CARDS --- */
@media (max-width: 840px) {
  /* Allgemeine Karten-Abstände */
  .card {
    margin-bottom: 14px;
  }

  /* Alle 2er/3er-Grids auf 1 Spalte */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  /* Formulare in Cards einspaltig */
  .card .form-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons in Formularen schön breit */
  .card .form-grid .btn.primary,
  .card .form-grid button[type="submit"] {
    justify-content: center;
  }
}
/* --- MOBILE FIXES: kein Abschneiden rechts, saubere Abstände --- */
@media (max-width: 840px) {
  /* Der gesamte App-Container darf nicht breiter als der Screen werden */
  .app-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hauptbereich mit gleichem Innenabstand links/rechts */
  .main {
    padding: 12px 14px 18px; /* oben, links/rechts, unten */
  }

  /* Karten füllen die Breite innerhalb des Main-Bereichs,
     aber nicht darüber hinaus */
  .card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;  /* nur unten Abstand */
  }

  /* Mitarbeiter-View: beide Cards einspaltig und mittig */
  #view-employees .grid.grid-2 {
    grid-template-columns: 1fr;
    justify-items: stretch;
    row-gap: 14px;
  }

  #view-employees .grid.grid-2 > .card {
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
  }

  /* Tabellen dürfen die Seite nicht breiter ziehen */
  .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .table-wrapper table {
    width: 100%;
    max-width: 100%;
  }
}


html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background: radial-gradient(circle at top right, #2b2b2b, #202020);
  color: var(--text-main);
  max-width: 100%;
  overflow-x: hidden; /* horizontales Scrollen aus */
}
/* --- MOBILE FIX: Mitarbeiter-Ansicht (Form + Tabelle) --- */
@media (max-width: 840px) {
  /* Grid der Mitarbeiter-View: einspaltig untereinander */
  #view-employees .grid.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
  }

  /* Karten in der Mitarbeiter-View dürfen nie breiter als der Screen sein */
  #view-employees .card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
  }

  /* Tabellen-Karte: Inhalt soll scrollen, nicht die ganze Seite */
  #view-employees .card-body.table-wrapper {
    padding: 0;
  }

  #view-employees .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;   /* horizontal scrollen innerhalb der Karte */
  }

  #view-employees .table-wrapper table {
    width: 100%;
    max-width: 100%;
  }
}
/* --- SPEZIAL-FIX: Mitarbeiter & Angebote Layout --- */

/* Bis 1024px: Form + rechts daneben als Einspalter untereinander */
@media (max-width: 1024px) {
  #view-employees .grid.grid-2,
  #view-offers .grid.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
  }

  #view-employees .grid.grid-2 > .card,
  #view-offers .grid.grid-2 > .card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
  }
}

/* Allgemein: Tabellen in diesen Views sollen innen scrollen,
   nicht die Seite nach rechts rausziehen */
@media (max-width: 1024px) {
  #view-employees .table-wrapper,
  #view-offers .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  #view-employees .table-wrapper table,
  #view-offers .table-wrapper table {
    width: 100%;
    max-width: 100%;
  }
}
/* --- LAYOUT FIX: Mitarbeiter & Angebote --- */

/* 2 Spalten: beide dürfen schrumpfen, ziehen nichts nach rechts raus */
#view-employees .grid.grid-2,
#view-offers .grid.grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Karten innerhalb des Grids dürfen kleiner als ihr Inhalt werden */
#view-employees .grid.grid-2 > .card,
#view-offers .grid.grid-2 > .card {
  min-width: 0;
}

/* Auf kleineren Screens die beiden Karten untereinander */
@media (max-width: 900px) {
  #view-employees .grid.grid-2,
  #view-offers .grid.grid-2 {
    grid-template-columns: 1fr;
  }
}
/* --- Worker-Hours Card --- */

#worker-hours-section {
  margin-top: 1.5rem;
}

.hours-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.hours-header-title {
  font-weight: 600;
  font-size: 1rem;
}

.hours-header-subtitle {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Timer-Block */

.hours-timer {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hours-timer-meta {
  text-align: right;
}

.hours-timer-display {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 600;
}

.hours-timer-status {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.1rem;
}

.hours-timer-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Timer-Buttons */

.timer-btn-start {
  background: #16a34a;
  color: #fff;
  border: none;
}

.timer-btn-start:hover {
  background: #15803d;
}

.timer-btn-stop {
  background: #ef4444;
  color: #fff;
  border: none;
}

.timer-btn-stop:hover {
  background: #dc2626;
}

/* Stunden-Übersicht */

.hours-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.2rem 0 0.8rem;
}

.hours-summary-card {
  flex: 0 0 auto;
  min-width: 180px;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #111827;
  border: 1px solid #1f2937;
}

.hours-summary-card .muted {
  font-size: 0.75rem;
}

.hours-total {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.hours-credit {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Mobile: Timer untereinander */

@media (max-width: 768px) {
  .hours-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hours-timer {
    width: 100%;
    justify-content: space-between;
  }

  .hours-timer-meta {
    text-align: left;
  }

  .hours-timer-buttons {
    flex-direction: row;
  }
}

/* Profil-Logout-Button in Rot */

#profile-logout-btn {
  background: #ef4444;
  color: #fff;
  border: none;
}

#profile-logout-btn:hover {
  background: #dc2626;
}
/* ===========================
   WORKER HOURS – DASHBOARD
   =========================== */

#worker-hours-section {
  margin-top: 1.5rem;
}

/* Header mit Titel links, Timer rechts */
#worker-hours-section .card-header.hours-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.hours-header-title {
  font-weight: 600;
  font-size: 1rem;
}

.hours-header-subtitle {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Timer-Block rechts oben */
.hours-timer {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hours-timer-meta {
  text-align: right;
}

.hours-timer-meta .muted {
  font-size: 0.75rem;
}

.hours-timer-display {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 600;
}

.hours-timer-status {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.1rem;
}

.hours-timer-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Timer-Buttons (eigenes Styling, damit du die globalen .btn-Klassen nicht zerstörst) */

.btn.timer-btn-start,
.btn.timer-btn-stop {
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Grün = Start */
.btn.timer-btn-start {
  background: #16a34a;
  color: #fff;
}

.btn.timer-btn-start:hover {
  background: #15803d;
}

/* Rot = Stop */
.btn.timer-btn-stop {
  background: #ef4444;
  color: #fff;
}

.btn.timer-btn-stop:hover {
  background: #dc2626;
}

/* Kleine "Info-Karten" für Stunden & Guthaben */

.hours-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.2rem 0 0.8rem;
}

.hours-summary-card {
  flex: 0 0 auto;
  min-width: 180px;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #111827;
  border: 1px solid #1f2937;
}

.hours-summary-card .muted {
  font-size: 0.75rem;
}

.hours-total {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.hours-credit {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Tabelle im Stundenbereich etwas enger machen */
#worker-hours-section .table-wrapper table th,
#worker-hours-section .table-wrapper table td {
  font-size: 0.85rem;
}

/* Mobile-Layout für Timer & Header */

@media (max-width: 768px) {
  #worker-hours-section .card-header.hours-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hours-timer {
    width: 100%;
    justify-content: space-between;
  }

  .hours-timer-meta {
    text-align: left;
  }

  .hours-timer-buttons {
    flex-direction: row;
  }
}

/* ===========================
   PROFIL-LOGOUT (ROT)
   =========================== */

#profile-logout-btn {
  background: #ef4444;
  color: #fff;
  border: none;
}

#profile-logout-btn:hover {
  background: #dc2626;
}
/* =======================================
   DARK MODE FORMULAR-FIELDS (global)
   ======================================= */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
textarea,
select {
  background: #262626 !important;
  border: 1px solid #ffffff !important;
  color: #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: all 0.2s ease;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: #ffffff !important;
  opacity: 0.8;
}

/* Hover */
input:hover,
textarea:hover,
select:hover {
  border-color: #ffffff !important;
}

/* Fokus */
input:focus,
textarea:focus,
select:focus {
  border-color: #ef4444 !important;     /* Rot passend zu deinem Theme */
  box-shadow: 0 0 0 1px #ef4444;
  outline: none;
}

/* Dropdown Pfeil */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23aaa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  appearance: none;
  padding-right: 32px !important;
}

/* Textareas */
textarea {
  resize: vertical;
  min-height: 80px;
}
/* Standard: Desktop – Tabs ausblenden */
.schedule-week-tabs {
  display: none;
}

/* Mobile: Tabs einblenden */
@media (max-width: 840px) {
  .schedule-week-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }
}
/* Größe des Buchhaltungs-Charts reduzieren */
.card-body #accountingChart {
    max-height: 220px !important;
    height: 220px !important;
}
#pdf-preview-modal,
#pdf-preview-modal #pdf-preview-backdrop,
#pdf-preview-modal .pdf-preview-content {
  box-sizing: border-box;
}

#pdf-preview-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1200;
}
.pdf-modal-backdrop,
#pdf-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.pdf-modal-content,
.pdf-preview-content {
  position: relative;
  max-width: 980px;
  margin: 40px auto;
  padding: 8px;
}
.invoice-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #d1d5db;
  font-size: 11px;
  color: #111111;
}
.invoice-footer table { width: 100%; border-collapse: collapse; }
.invoice-footer td { vertical-align: top; padding-right: 14px; }
.invoice-footer .title { font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.invoice-footer .line { margin: 2px 0; color: #111111; }
#btn-create-invoice-from-offer {
  min-width: 220px;
  justify-content: center;
}
/* ---------------------------------------------------------
   Mobile-Optimierung: Rechnungen (Invoicing)
   --------------------------------------------------------- */
@media (max-width: 720px) {
  /* Header: Filter + Buttons untereinander / sauber umbrechen */
  #view-invoices .card-header > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    width: 100%;
  }

  #invoice-filter-status {
    width: 100% !important;
    min-width: 0 !important;
  }

  #btn-create-invoice-from-offer,
  #btn-create-invoice-manual {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Modal: volle Breite, weniger Rand */
  #invoice-manual-modal .modal-content {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 10px auto !important;
  }

  /* Formular: 2 Spalten -> 1 Spalte */
  #invoice-manual-modal .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tabellen: horizontal scrollbar statt Layout sprengen */
  #invoice-manual-modal .table-wrap,
  #view-invoices .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #invoice-manual-modal table,
  #view-invoices table {
    min-width: 680px; /* sorgt für sauberen Scroll statt gequetschten Zellen */
  }

  /* Summen: untereinander, besser lesbar */
  #invoice-manual-modal [id^="invoice-sum-"] {
    display: inline-block;
    min-width: 90px;
    text-align: right;
  }
}

@media (max-width: 420px) {
  /* Noch kompaktere Buttons/Schriften im Invoice-Modal */
  #invoice-manual-modal .card-header span {
    font-size: 14px;
  }

  #invoice-manual-modal .btn {
    padding: 10px 12px;
  }

  #invoice-manual-modal table {
    font-size: 12px;
  }
}
/* Nur Mitarbeiter-Tabelle */
#view-employees .table-wrapper {
  flex: 1;
  max-height: none;      /* <<< ENTSCHEIDEND */
  overflow-y: auto;
}
.btn.btn-small{
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.12);
    background:#111827;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    font-size:12px;
  }
.btn.btn-small[disabled]{opacity:.6;cursor:not-allowed;}
.hours-summary-bar{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.hsb-left{
  min-width: 260px;
}

.hsb-title{
  font-weight: 700;
  font-size: 14px;
}

.hsb-sub{
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
}

.hsb-metrics{
  flex: 1;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, minmax(140px, 1fr));
  align-items: end;
}

.hsb-item .hsb-label{
  font-size: 11px;
  opacity: 0.75;
}

.hsb-item .hsb-value{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hsb-strong .hsb-value{
  font-size: 14px;
  font-weight: 800;
}

.hsb-icon-ok{ color: #4ade80; }
.hsb-icon-no{ color: #f97373; }

/* Inquiries detail layout */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Accounting Tabs */
.accounting-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.accounting-tab {
  border: 1px solid #2e2e2e;
  background: #1c1c1c;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.accounting-tab:hover {
  transform: translateY(-1px);
  color: #ffffff;
}

.accounting-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.accounting-tab-panel {
  display: none;
}

.accounting-tab-panel.active {
  display: block;
}

.table-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-soft);
}
/* Contabilidade – Abschluss/Summary-Bar unter Stunden-Tabelle */
.hours-final-bar{
  margin-top: 12px;
  background: #1c1c1c;
  border: 1px solid #333;
  border-radius: 14px;
  padding: 12px 14px;
}

.hours-final-bar .hsb-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hours-final-bar .hsb-item{
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 10px 10px;
  font-size: 0.82rem;
}

.hours-final-bar .hsb-label{
  color: var(--text-soft);
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.hours-final-bar .hsb-value{
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hours-final-bar .hsb-ok{
  color: #4ade80;
}
.hours-final-bar .hsb-no{
  color: #f97373;
}

@media (max-width: 1024px){
  .hours-final-bar .hsb-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .hours-final-bar .hsb-grid{
    grid-template-columns: 1fr;
  }
}
/* 2-spaltiges Layout (dein Wunsch) */
#view-employees .grid.grid-2,
#view-offers .grid.grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Wenn im Grid nur 1 Card existiert -> 100% Breite */
#view-employees .grid.grid-2:not(:has(> .card:nth-child(2))),
#view-offers .grid.grid-2:not(:has(> .card:nth-child(2))) {
  grid-template-columns: 1fr !important;
}
#view-offers .grid.grid-2 > .card.span-2{
  grid-column: 1 / -1;
}

@media (max-width: 840px) {
  .form-grid,
  .form-grid[style],
  .form-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .form-grid > * {
    min-width: 0;
  }

  .offer-preview-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .offer-preview-logo img {
    width: 100px;
  }

  .offer-preview-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .offer-preview-table table {
    min-width: 560px;
  }

  .profile-modal-content,
  .pdf-modal-content,
  .pdf-preview-content {
    width: calc(100% - 16px);
    margin: 24px auto;
  }

  #pdf-preview-frame {
    height: 70vh !important;
  }
}

@media (max-width: 900px) {
  #view-employees .grid.grid-2,
  #view-offers .grid.grid-2 {
    grid-template-columns: 1fr !important;
  }

  #view-employees .grid.grid-2 > .card,
  #view-offers .grid.grid-2 > .card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .table-wrapper table {
    font-size: 0.72rem;
  }

  th,
  td {
    padding: 5px 6px;
  }
}

@media (max-width: 840px) {
  input[type="date"] {
    font-size: 0.85rem !important;
    padding: 8px 10px !important;
  }
}