:root { --sidebar-w: 260px; }

body { background: #f6f7fb; }

/* Sidebar layout */
.sidebar { width: var(--sidebar-w); background:#0b1220; color:#c9d2e3; }
.sidebar a { color:#c9d2e3; text-decoration:none; }
.sidebar a.active, .sidebar a:hover { color:#fff; }

.content { margin-left: var(--sidebar-w); padding:24px; }

@media (max-width: 992px){
  .sidebar { position:fixed; left:-260px; top:0; height:100vh; z-index:1040; transition:left .2s; }
  .sidebar.open { left:0; }
  .content { margin-left:0; }
}

/* Global card */
.card { border:0; box-shadow: 0 10px 30px rgba(16,24,40,.06); border-radius:14px; }

/* Tables (light touch) */
.table thead th { color:#667085; font-weight:600; }
.table.align-items-center td,
.table.align-items-center th { vertical-align: middle; }
.table thead th { border-bottom: 1px solid #e9ecef; white-space: nowrap; }
.table tbody tr:hover { background-color: rgba(0,0,0,.02); }

/* Monospace helper */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Inactive rows */
.table tr.row-inactive {
  opacity: 0.5;
  background-color: #f8f9fa;
}

/* =========================================================
   Material Dashboard-like Helpers (scoped-ish)
   ========================================================= */

/* Header gradients */
.bg-gradient-dark {
  background: linear-gradient(195deg, #42424a, #191919);
}
.bg-gradient-success {
  background: linear-gradient(195deg, #66bb6a, #43a047);
  color: #fff;
}
.bg-gradient-secondary {
  background: linear-gradient(195deg, #747b8a, #495361);
  color: #fff;
}
.bg-gradient-warning {
  background: linear-gradient(195deg, #ffa726, #fb8c00);
  color: #fff;
}
.bg-gradient-danger {
  background: linear-gradient(195deg, #ef5350, #e53935);
  color: #fff;
}
.bg-gradient-info {
  background: linear-gradient(195deg, #49a3f1, #1a73e8);
  color: #fff;
}

/* Shadows & radius used by the "header band" */
.shadow-dark {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),
              0 7px 10px -5px rgba(0,0,0,.4);
}
.border-radius-lg { border-radius: .75rem; }

/* Utility helpers used by the header-band markup */
.mt-n4 { margin-top: -1.5rem !important; }
.z-index-2 { z-index: 2 !important; }
.opacity-7 { opacity: .7; }

/* Typography helpers used by the Material table header */
.text-xxs { font-size: .65rem !important; }
.text-xs  { font-size: .75rem !important; }
.text-sm  { font-size: .875rem !important; }
.font-weight-bold   { font-weight: 600 !important; }
.font-weight-bolder { font-weight: 700 !important; }

/* Avatar (used in Material table example) */
.avatar {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: .875rem; }

/* Badges: keep them visible and compatible with gradients */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: .45em .65em;
  font-size: .65rem;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-sm { font-size: .6rem; padding: .35em .55em; }

/* =========================================================
   Material-like Dashboard Cards (md-card)
   ========================================================= */
.md-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);
  height: 100%;
}
.md-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.card.with-md-header {
  position: relative;
  z-index: 1;           /* sicher unter header */
  padding-top: 3.5rem;
}

.md-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 10px 20px rgba(0, 0, 0, 0.06);
}
.md-icon.success { background: rgba(25,135,84,.15); color: #198754; }
.md-icon.info    { background: rgba(13,110,253,.15); color: #0d6efd; }
.md-icon.warning { background: rgba(255,193,7,.2);  color: #ffc107; }
.md-icon.danger  { background: rgba(220,53,69,.15); color: #dc3545; }

.md-label { font-size: 0.9rem; color: #6c757d; }
.md-value { font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.md-divider { border-top: 1px solid #e9ecef; margin: 14px 0; }
.md-footer { font-size: 0.85rem; color: #6c757d; display: flex; align-items: center; gap: 6px; }

/* =========================================================
   Material-like Chart Card Template
   ========================================================= */
.md-chart-card {
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 10px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.md-chart-header {
  background: linear-gradient(180deg, #f9fafb 0%, #f4f6f9 100%);
  border-bottom: 1px solid #e9edf2;
  padding: 16px 18px 10px 18px;
}

.md-chart-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f2937;
}

.md-chart-subtitle {
  margin: 0;
  font-size: 13px;
  opacity: 1;
  color: #6b7280;
}

.md-chart-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.md-chart-actions .btn { border-radius: 10px; }

.md-chart-body { padding: 10px 14px 10px 14px; flex: 1 1 auto; }
.md-chart-canvas-wrap { height: 190px; position: relative; }
.md-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.md-chart-footer {
  padding: 8px 14px;
  border-top: 1px solid #f1f3f5;
  color: #6b7280;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.md-chart-footer .md-foot-left { display: flex; align-items: center; gap: 6px; }
.md-chart-footer .md-foot-right { display: flex; align-items: center; gap: 8px; }

/* =========================================================
   Material-style Table Card (calls.php version)
   ========================================================= */
.md-table-card {
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 10px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Material table header wrapper */
.md-table-header-wrap {
  position: relative;
  display: flex;
  z-index: 50;
  justify-content: center;
  margin-bottom: -58px; /* zieht Header optisch an die Card */
  pointer-events: auto;
}

/* Actual header band */
.md-table-header {
  position: relative;
  width: calc(100% - 2.5rem); /* schmaler als Tabelle */
  max-width: 1200px;          /* optional, falls Container sehr breit */
  padding: 18px 18px;
  z-index: 51; 
  color: #fff;
  background: linear-gradient(135deg, #ff9800, #fb8c00);
  /*box-shadow: 0 10px 20px rgba(251, 140, 0, 0.25);*/
}

.md-table-title { font-size: 18px; font-weight: 500; margin: 0; line-height: 1.2; }
.md-table-subtitle { margin: 0; opacity: 0.9; font-size: 14px; font-weight: 400; }

.md-table-body { padding: 12px 18px 18px 18px; }
.md-table { width: 100%; border-collapse: collapse; }

.md-table thead th {
  font-weight: 500;
  color: #fb8c00;
  font-size: 16px;
  padding: 18px 10px;
  border-bottom: 2px solid #e9ecef;
}

.md-table tbody td {
  padding: 8px 8px;
  font-size: 14px;
  color: #495057;
  border-bottom: 1px solid #e9ecef;
}

.md-table tbody tr:last-child td { border-bottom: none; }
.md-table tbody tr:hover td { background: rgba(0,0,0,0.02); }
.md-table .md-action-btn { border-radius: 10px; }

.md-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 18px 18px;
  color: #6c757d;
  font-size: 14px;
  border-top: 1px solid #f1f3f5;
}

/* ================================
   Table row hover with focus (Material-like)
   ================================ */

.table tbody tr {
  position: relative;
  transition: background-color .15s ease;
}

.table tbody tr:hover td {
  background: rgba(13,110,253,0.04); /* very light primary */
}

/* IMPORTANT:
   Removed the old "Material-style Status Badges" section that overwrote Bootstrap
   bg-* badge colors with !important and caused gradient badges to appear invisible. */

   /* ================================
   Material-like action icon buttons
   ================================ */

.md-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  text-decoration: none;
  transition: all .15s ease;
}

.md-action:hover {
  color: #111827;
  border-color: #d1d5db;
  box-shadow: 0 8px 18px rgba(16,24,40,.08);
  transform: translateY(-1px);
}

.md-action.primary { color: #0d6efd; border-color: rgba(13,110,253,.25); }
.md-action.primary:hover { border-color: rgba(13,110,253,.45); }

.md-action.success { color: #16a34a; border-color: rgba(22,163,74,.25); }
.md-action.success:hover { border-color: rgba(22,163,74,.45); }

.md-action.disabled {
  opacity: .45;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Material Avatar */
.md-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(195deg, #42424a, #191919);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.md-avatar.inactive {
  opacity: 0.4;
}

.md-header-input {
  background: rgba(255,255,255,.50);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
}

.md-header-input::placeholder {
  color: rgba(255,255,255,.75);
}

.md-header-input:focus {
  background: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.45);
  box-shadow: none;
  color: #000;
}

.md-header-input option { color: #111827; }

/* ================================
   Material-like Filter Chips
   ================================ */

.md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}

.md-chip:hover {
  border-color: #d1d5db;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
  transform: translateY(-1px);
  color: #111827;
}

.md-chip.active {
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.10);
  color: #0d6efd;
}

.md-chip .md-chip-x {
  font-size: 14px;
  line-height: 1;
  opacity: .7;
}

.md-chip.active .md-chip-x {
  opacity: 1;
}

/* Optional: label text */
.md-chip-label {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}

/* ================================
   Timeline (Material-style like screenshot)
   ================================ */

.md-timeline {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Vertical line */
.md-timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e5e7eb;
}

.md-timeline-item {
  position: relative;
  padding-left: 54px; /* space for icon + line */
  margin-bottom: 18px;
}

.md-timeline-item:last-child {
  margin-bottom: 0;
}

/* Icon sits ON the line */
.md-timeline-step {
  position: absolute;
  left: 22px;                 /* same as line */
  top: 2px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(16,24,40,.10);
  border: 1px solid #eef1f4;
}

.md-timeline-step i {
  font-size: 18px;
  line-height: 1;
}

/* Color variants (icon color) */
.md-step-success i { color: #2e7d32; }  /* green */
.md-step-danger  i { color: #d32f2f; }  /* red */
.md-step-info    i { color: #1976d2; }  /* blue */
.md-step-warning i { color: #fb8c00; }  /* orange */
.md-step-muted   i { color: #6b7280; }  /* gray */

/* Content */
.md-timeline-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 2px 6px;
  border-radius: 10px;
  transition: background-color .15s ease;
}

.md-timeline-link:hover {
  background: rgba(0,0,0,.02);
}

.md-timeline-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.md-timeline-meta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.md-timeline-excerpt {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}

/* Timeline cost badge */
.md-cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13,110,253,0.10);
  border: 1px solid rgba(13,110,253,0.18);
  color: #0d6efd;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   Material Kit input-group-static (SCOPED)
   Applies only inside .mk-form (e.g. customer_detail.php)
   Source logic adapted from material-kit.css
   ========================================================= */

/* Base transition + remove borders like Material Kit */
.mk-form .input-group,
.mk-form .input-group .input-group-text {
  transition: 0.2s ease;
  border: none;
}

.mk-form .input-group > :not(:first-child):not(.dropdown-menu) {
  margin-left: 2px;
}

.mk-form .input-group label {
  transition: all 0.3s ease;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 6px 0;
}

/* Underline background trick (static) */
.mk-form .input-group.input-group-static .form-control {
  background: no-repeat bottom, 50% calc(100% - 1px);
  background-size: 0 100%, 100% 100%;
  transition: 0.2s ease;

  /* keep Material look */
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  box-shadow: none !important;
}

/* If input is not first/last in group */
.mk-form .input-group.input-group-static .form-control:not(:first-child) {
  border-left: 0;
  padding-left: 0;
}

.mk-form .input-group.input-group-static .form-control:not(:last-child) {
  border-right: 0;
  padding-right: 0;
}

/* The actual underline gradients (default + focus) */
.mk-form .input-group.input-group-static .form-control,
.mk-form .input-group.input-group-static .form-control:focus {
  background-image:
    linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0),
    linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
}

/* Focus expands the colored underline */
.mk-form .input-group.input-group-static .form-control:focus {
  outline: none;
  background-size: 100% 100%, 100% 100%;
}

/* Disabled state */
.mk-form .input-group.input-group-static .form-control[disabled],
.mk-form .input-group.input-group-static .form-control:disabled {
  cursor: not-allowed;
  background-image:
    linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0),
    linear-gradient(0deg, #e5e5e5 1px, hsla(0, 0%, 82%, 0) 0) !important;
  opacity: 0.75;
}

/* ---------- Fix alignment & focus label color (scoped) ---------- */

/* Make static input-groups behave like a proper block */
.mk-form .input-group.input-group-static {
  display: block;
  width: 100%;
  margin-bottom: 1rem; /* consistent spacing */
}

/* Label sits above input, aligned left */
.mk-form .input-group.input-group-static > label {
  display: block;
  margin: 0 0 6px 0;
  padding: 0;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

/* Input should not look offset */
.mk-form .input-group.input-group-static .form-control,
.mk-form .input-group.input-group-static select.form-control,
.mk-form .input-group.input-group-static textarea.form-control {
  display: block;
  width: 100%;
  margin: 0;                 /* remove any inherited offsets */
  padding: 8px 0 10px 0 !important;
  line-height: 1.35;
  border-radius: 0 !important;
}

/* Label becomes colored on focus within the group */
.mk-form .input-group.input-group-static:focus-within > label {
  color: #e91e63; /* Material Kit pink */
}

/* Underline behavior: keep default grey, expand pink on focus */
.mk-form .input-group.input-group-static .form-control {
  background-size: 0 100%, 100% 100%;
}

.mk-form .input-group.input-group-static:focus-within .form-control {
  background-size: 100% 100%, 100% 100%;
}

/* ===============================
   Material Kit – Input = Label
   =============================== */

.mk-form .input-group-static label {
  font-size: 0.95rem;       /* <- DAS ist die Referenz */
  font-weight: 500;
}

/* Input exakt gleich groß wie Label */
.mk-form .input-group-static .form-control {
  font-size: 0.85rem;       /* IDENTISCH */
  font-weight: 400;
  line-height: 1.6;
}

/* Fokus: Label-Farbe korrekt übernehmen */
.mk-form .input-group-static.is-focused label,
.mk-form .input-group-static:focus-within label {
  color: #e91e63; /* Material Pink */
}

/* ===============================
   Material Kit – Toggle Switch
   =============================== */

.mk-switch .form-check-input {
  width: 2.2rem;
  height: 1.1rem;
  background-color: #e9ecef;
  border-radius: 2rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Knopf */
.mk-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 0.9rem;
  height: 0.9rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

/* Checked */
.mk-switch .form-check-input:checked {
  background-color: #e91e63; /* Material Pink */
}

/* Knopf verschieben */
.mk-switch .form-check-input:checked::before {
  transform: translateX(1.1rem);
}

/* Focus */
.mk-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(233, 30, 99, 0.25);
}

/* Disabled */
.mk-switch .form-check-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===============================
   Material Kit – Navigation Tabs
   =============================== */
.nav-tabs .nav-link {
  font-size: .875rem;
  font-weight: 600;
  color: #6b7280;
}

.nav-tabs .nav-link.active {
  color: #111827;
  border-color: transparent transparent #fb8c00;
  border-bottom-width: 2px;
}

.nav-tabs {
  border-bottom: 1px solid #e5e7eb;
}

.tab-pane {
  padding-top: .75rem;
}

/* Fix: gleichmäßiger Start aller Tab-Inhalte */
.tab-pane > :first-child {
  margin-top: 0 !important;
}

/* Customer detail tabs: align content flush across panes */
#customerTabsContent .tab-pane {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#customerTabsContent .tab-pane > * {
  margin-top: 0;
}

#customerTabsContent .tab-pane > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#customerTabsContent .tab-pane form:first-child {
  margin-top: 0 !important;
}


/* Material-style divider */
.md-divider {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0)
  );
}
.md-divider-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: #6b7280;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.md-divider-label::before,
.md-divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ===============================
   Material Kit – Buttons
   =============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 0;
  border-radius: .5rem;
  transition: all .15s ease-in;
}
.btn-sm {
  padding: .4rem .75rem;
  font-size: .75rem;
  border-radius: .375rem;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon i,
.btn-icon svg {
  font-size: 1rem;
  line-height: 1;
}
.bg-gradient-dark {
  background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
  color: #fff;
}
.bg-gradient-dark:hover {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),
              0 5px 8px rgba(0,0,0,.14),
              0 1px 14px rgba(0,0,0,.12);
}
.btn-sm.btn-icon {
  gap: .35rem;
}
/* Normalzustand: 100% Weiß */
.btn.bg-gradient-dark,
.btn.bg-gradient-dark .material-symbols-rounded {
  color: rgba(255, 255, 255, 1) !important;
}

/* Hover / Focus / Active: 75% Weiß */
.btn.bg-gradient-dark:hover,
.btn.bg-gradient-dark:focus,
.btn.bg-gradient-dark:active {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Icons beim Hover ebenfalls abdunkeln */
.btn.bg-gradient-dark:hover .material-symbols-rounded,
.btn.bg-gradient-dark:focus .material-symbols-rounded,
.btn.bg-gradient-dark:active .material-symbols-rounded {
  color: rgba(255, 255, 255, 0.75) !important;
}

.material-symbols-rounded {
  font-variation-settings:
    'FILL' 0,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;
}

/* Scoped header fix: costs.php */
/* costs.php: header WITHOUT overlap */
.md-table-header-wrap--costs {
  margin-bottom: 1.5rem !important; /* Abstand nach unten */
  z-index: auto !important;
}

/* Falls irgendwo Overlap/negative margins aktiv sind, hier neutralisieren */
.md-table-header-wrap--costs {
  margin-top: 0 !important;
  transform: none !important;
  top: auto !important;
}

/* Card/Elemente direkt danach nicht hochziehen lassen */
.md-table-header-wrap--costs + .card,
.md-table-header-wrap--costs + .row {
  margin-top: 0 !important;
}

/* ================================
   Login Page (Material-like)
   ================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  position: relative;
  overflow: hidden;
}

/* Background image + dark overlay */
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  /*  background:
    linear-gradient(rgba(16,24,40,.55), rgba(16,24,40,.55));*/
  background:
    linear-gradient(rgba(16,24,40,.55), rgba(16,24,40,.55)),
    url("/voice-crm/public/assets/img/login-bg.png") center/cover no-repeat;
  filter: saturate(1.05);
  transform: scale(1.02);
  z-index: 0;
}

.login-box {
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 1;
}

.login-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.login-card-header {
  background: linear-gradient(195deg, #42424a 0%, #191919 100%);
  color: #fff;
  padding: 18px 20px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
}

.login-card-body {
  padding: 18px 20px 20px 20px;
}

.login-input {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  font-size: 14px;
}

.login-input:focus {
  box-shadow: none;
  border-color: rgba(13,110,253,.5);
}

.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
}

/* Make the sign-in button span full width like screenshot */
.login-submit {
  width: 100%;
  border-radius: 10px;
}

/* Remember me switch aligned */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  font-size: 13px;
}

/* ================================
   Login micro animations
   ================================ */
@media (prefers-reduced-motion: no-preference) {
  .login-card {
    animation: loginPop .45s ease-out both;
  }
  @keyframes loginPop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .login-page::before {
    animation: loginBg 1.2s ease-out both;
  }
  @keyframes loginBg {
    from { transform: scale(1.06); }
    to   { transform: scale(1.02); }
  }

  .login-submit {
    transition: transform .15s ease, filter .15s ease;
  }
  .login-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
}

/* Fix: header input-group must not collapse */
.md-header-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 220px; /* fallback if inline style removed */
}

.md-header-field .form-control,
.md-header-field select.form-control {
  width: 100% !important;
  min-width: 0 !important;   /* allows flex item to shrink correctly */
  flex: 1 1 auto !important; /* prevent tiny pill */
}

.md-header-label {
  margin-bottom: 6px;
  line-height: 1.2;
}
.md-table-header .mk-form .input-group {
  width: auto !important;
}
/* Toggle alignment inside header */
.md-header-toggle .form-check-input {
  margin-top: 0; /* prevents vertical drift */
}
.md-header-controls {
  padding-left: 10px;   /* verhindert "abgeschnitten" links */
  padding-right: 6px;
}

.md-header-input {
  padding-left: 12px !important;
}

.md-table-header,
.md-table-header-wrap {
  z-index: 20;
}

/***********************
 *** NEU UI-2 START ***
 ***********************/
/* ---------- UI2 Header Band (Filter Header) ---------- */
.ui2-headerWrap {
  margin-bottom: 1rem;
}

.ui2-headerBand {
  background: linear-gradient(195deg, #42424a 0%, #191919 100%);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16,24,40,.18);
  padding: 12px 14px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .ui2-headerBand {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.ui2-headerTitle {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ui2-headerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Field = label above input */
.ui2-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.ui2-field--wide { min-width: 220px; }
.ui2-field--narrow { min-width: 90px; }

.ui2-label {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.2;
}

/* Dark input/select on header */
/* ---------- UI2 Input: Underline Focus ---------- */
/* UI2 dark header input (single source of truth) */
/***********************
 UI-2 · Material Static Input (dark, underline only)
 ***********************/

.ui2-input {
  width: 100%;
  min-width: 0;

  background: transparent;
  color: #fff;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.35);
  border-radius: 0;

  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;

  transition: border-color .15s ease;
}

/* Placeholder */
.ui2-input::placeholder {
  color: rgba(255,255,255,.45);
}

/* Hover (optional, very subtle) */
.ui2-input:hover:not(:focus) {
  border-bottom-color: rgba(255,255,255,.55);
}

/* FOCUS = exakt Material-Rot */
.ui2-input:focus {
  outline: none;
  border-bottom: 2px solid #f44336;
}

/* Disabled */
.ui2-input:disabled {
  border-bottom-style: dashed;
  color: rgba(255,255,255,.4);
}

/* Select reset */
select.ui2-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}

/* Toggle alignment */
.ui2-toggleSlot {
  height: 38px;
  display:flex;
  align-items:center;
}

/***********************
 UI-2 Switch (Header)
***********************/
.ui2-switch .ui2-switch-input {
  width: 2.4em;
  height: 1.0em;
  background-color: rgba(255,255,255,.25);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.ui2-switch .ui2-switch-input:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

.ui2-switch .ui2-switch-input:checked {
  background-color: #e53935; /* UI-2 Rot (wie Underline) */
}

.ui2-switch .ui2-switch-input:checked:focus {
  box-shadow: 0 0 0 2px rgba(229,57,53,.35);
}
/***********************
 Primary button in header
***********************/
.ui2-btn {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(195deg, #42424a 0%, #191919 100%);
  box-shadow: 0 10px 20px rgba(16,24,40,.22);
  padding: .42rem .8rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,1);
  transition: transform .15s ease, color .15s ease;
}

.ui2-btn:hover { color: rgba(255,255,255,.75); transform: translateY(-1px); }
.ui2-btn:active { transform: translateY(0); }

/***********************
 *** NEU UI-2 END (for this header) ***
 ***********************/

 /***********************
 *** CampaignStatus ***
 ***********************/
 /* Campaign status dot */
.camp-dot{
  width:10px; height:10px; border-radius:999px;
  display:inline-block;
  margin-right:10px;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}

.camp-dot--active{ background:#22c55e; }      /* grün */
.camp-dot--onhold{ background:#9ca3af; }      /* grau */
.camp-dot--created{ background:#3b82f6; }     /* blau */
.camp-dot--configuring{ background:#f59e0b; } /* orange */
.camp-dot--completed{ background:#06b6d4; }   /* cyan */
.camp-dot--stopped{ background:#ef4444; }     /* rot */

/* Ensure Bootstrap modals are always on top */
.modal {
  z-index: 2000 !important;
}

.modal-backdrop {
  z-index: 1990 !important;
}

body.modal-open .content {
  transform: none !important;
}

/* Sidebar Basis */
.sidebar {
  width: var(--sidebar-w, 260px);
  transition: transform .25s ease, width .25s ease;
  will-change: transform;
}

/* Desktop: eingeklappt */
body.sidebar-collapsed .sidebar {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}

/* Content reagiert */
.content {
  margin-left: var(--sidebar-w, 260px);
  transition: margin-left .25s ease;
}

body.sidebar-collapsed .content {
  margin-left: 0;
}

@media (max-width: 992px) {

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
  }

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

  .content {
    margin-left: 0 !important;
  }

  /* dunkles Overlay */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1030;
    display: none;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}
/* Sidebar collapse + mobile overlay */
:root {
  --sidebar-w: 260px;
}

/* Sidebar base */
#sidebar.sidebar {
  width: var(--sidebar-w);
  transition: transform .25s ease;
  will-change: transform;
}

/* Content base */
.content {
  margin-left: var(--sidebar-w);
  transition: margin-left .25s ease;
}

/* Desktop collapsed */
body.sidebar-collapsed #sidebar {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}
body.sidebar-collapsed .content {
  margin-left: 0;
}

/* Backdrop */
.sidebar-backdrop {
  display: none;
}

/* Mobile overlay behavior */
@media (max-width: 992px) {
  .content {
    margin-left: 0 !important;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    background: inherit;
    /* Glass layer */
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Border & depth */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);

    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }

/* Fallback für Browser ohne backdrop-filter */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #sidebar {
    background: rgba(16, 24, 40, 0.85);
  }
}

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

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.40);
    z-index: 1030;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}

/* ===============================
   SIDEBAR – MAIN MENU
================================= */

#sidebar > nav > button.nav-link {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .2s ease;
  border-radius: 8px;
}

/* Hover */
#sidebar > nav > button.nav-link:hover {
  background: rgba(255,255,255,0.06);
  transform: translateX(2px);
}

/* Aktiver / geöffneter Bereich */
#sidebar > nav > button.nav-link[aria-expanded="true"] {
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* Chevron Icon */
#sidebar > nav > button.nav-link i {
  transition: transform .2s ease;
}

/* Chevron Rotation */
#sidebar > nav > button.nav-link[aria-expanded="true"] i {
  transform: rotate(180deg);
}


/* ===============================
   SUB MENU LINKS
================================= */

#sidebar .collapse .nav-link {
  padding-left: 2.2rem;
  font-size: 0.92rem;
  opacity: 0.85;
  border-radius: 6px;
  transition: all .2s ease;
}

/* Sub Hover */
#sidebar .collapse .nav-link:hover {
  opacity: 1;
  background: rgba(255,255,255,0.05);
  transform: translateX(3px);
}

/* Sub Active */
#sidebar .collapse .nav-link.active {
  background: rgba(255,255,255,0.12);
  opacity: 1;
  font-weight: 500;
}


#sidebar .nav-link {
  border-radius: 10px;
}

#sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
}

#sidebar .mb-4 {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-subsection{
  border-left: 4px solid rgba(13,110,253,.35);
  padding-left: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* WICHTIG */
}

th, td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  word-wrap: break-word;       /* WICHTIG */
  overflow-wrap: break-word;   /* WICHTIG */
}

@page { margin: 18mm 14mm 18mm 14mm; }

.pdf-header {
  position: fixed;
  top: -12mm;
  left: 0; right: 0;
  height: 12mm;
  font-size: 10px;
  color: #444;
}

.pdf-header .bar {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 3mm;
}

.pdf-header table {
  width: 100%;
  border-collapse: collapse;
}

.pdf-header td {
  vertical-align: middle;
  border: none;
  padding: 0;
}

.pdf-header .title {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

.pdf-header .subtitle {
  font-size: 10px;
  color: #666;
}

.pdf-header .right {
  text-align: right;
  font-size: 10px;
  color: #666;
}

.pdf-footer {
  position: fixed;
  bottom: -10mm;
  left: 0; right: 0;
  height: 10mm;
  font-size: 10px;
  color: #666;
}

.pdf-footer .page:after { content: counter(page); }

.content { margin-top: 4mm; margin-bottom: 6mm; }

.sticky-tabs { position: sticky; top: 0; z-index: 50; background: #fff; padding-top: .5rem; }
  .nav-tabs .nav-link { border-top-left-radius: .75rem; border-top-right-radius: .75rem; }

  .nav-pills .nav-link {
    padding: .45rem .75rem;
    border-radius: 999px;
  }
  .nav-pills .nav-link.active {
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }

  .customer-sidepanel-sticky {
  position: sticky;
  top: 1rem;
}

@media (max-width: 1199.98px) {
  .customer-sidepanel-sticky {
    position: static;
    top: auto;
  }
}

.cursor-pointer {
  cursor: pointer;
}

#customerStammdatenChevron {
  font-size: 18px;
  color: #6c757d;
  transition: 0.15s;
}

.cursor-pointer:hover #customerStammdatenChevron {
  color: #111;
  transform: scale(1.08);
}

#customerPhoneChevron,
#customerStammdatenChevron {
  font-size: 18px;
  color: #6c757d;
  transition: 0.15s;
}

.cursor-pointer:hover #customerPhoneChevron,
.cursor-pointer:hover #customerStammdatenChevron {
  color: #111;
  transform: scale(1.08);
}

.customer-edit-form {
  max-width: 520px;
}

@media (max-width: 1199.98px) {
  .customer-edit-form {
    max-width: 100%;
  }
}

.cost-row-link {
  cursor: pointer;
}

.cost-row-link:hover td {
  background-color: rgba(0, 0, 0, 0.03);
}

/* klickbare Tabellenzeilen */
tr.cost-row-link {
  cursor: pointer;
}

tr.cost-row-link:hover td {
  background-color: rgba(0,0,0,0.03);
}

.is-clickable {
  cursor: pointer;
}

.is-clickable:hover {
  opacity: 0.96;
}

tr.is-clickable:hover {
  transform: scale(1.002);
}

.cursor-pointer {
  cursor: pointer;
}

#createSystemUserChevron {
  font-size: 18px;
  color: #6c757d;
  transition: 0.15s;
}

.cursor-pointer:hover #createSystemUserChevron {
  color: #111;
  transform: scale(1.08);
}

.cost-inline-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.cost-inline-stat {
  padding: 0.9rem 1rem;
  min-width: 0;
}

.cost-inline-stat + .cost-inline-stat {
  border-left: 1px solid rgba(0,0,0,0.08);
}

.cost-inline-label {
  font-size: 0.78rem;
  color: #6c757d;
  margin-bottom: 0.2rem;
}

.cost-inline-value {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.25;
}

.cost-inline-meta {
  font-size: 0.78rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

#costStatsChevron {
  font-size: 18px;
  color: #6c757d;
  transition: 0.15s;
}

.cursor-pointer:hover #costStatsChevron {
  color: #111;
  transform: scale(1.08);
}

@media (max-width: 991.98px) {
  .cost-inline-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-inline-stat:nth-child(3),
  .cost-inline-stat:nth-child(4) {
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .cost-inline-stat:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 575.98px) {
  .cost-inline-stats {
    grid-template-columns: 1fr;
  }

  .cost-inline-stat + .cost-inline-stat {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
}

.cost-alert-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
  margin-bottom: 0;
}

.cost-alert-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(33, 37, 41, 0.65);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: transparent;
}

.cost-alert-table tbody td {
  font-size: 0.78rem;
  color: #212529;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-color: rgba(0, 0, 0, 0.06);
  background: transparent;
}

.cost-alert-table .mono {
  font-variant-numeric: tabular-nums;
}

.cost-alert-table tbody tr:last-child td {
  border-bottom: 0;
}

.calls-inline-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.calls-inline-stat {
  padding: 0.75rem 0.9rem;
  min-width: 0;
}

.calls-inline-stat + .calls-inline-stat {
  border-left: 1px solid rgba(0,0,0,0.08);
}

.calls-inline-label {
  font-size: 0.74rem;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.calls-inline-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
}

.calls-inline-meta {
  font-size: 0.74rem;
  color: #6c757d;
  margin-top: 0.2rem;
}

#callsStatsChevron {
  font-size: 18px;
  color: #6c757d;
  transition: 0.15s;
}

.cursor-pointer:hover #callsStatsChevron {
  color: #111;
  transform: scale(1.08);
}

@media (max-width: 991.98px) {
  .calls-inline-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calls-inline-stat {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .calls-inline-stat:nth-child(1),
  .calls-inline-stat:nth-child(2) {
    border-top: none;
  }

  .calls-inline-stat:nth-child(2n) {
    border-left: 1px solid rgba(0,0,0,0.08);
  }
}

@media (max-width: 575.98px) {
  .calls-inline-stats {
    grid-template-columns: 1fr;
  }

  .calls-inline-stat {
    border-left: none !important;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .calls-inline-stat:first-child {
    border-top: none;
  }
}

/* kompaktere Charts in calls.php */
.calls-compact-charts .md-chart-body {
  padding: 0.75rem 0.9rem 0.65rem;
}

.calls-compact-charts .md-chart-canvas-wrap {
  height: 190px;
}

.calls-compact-charts .md-chart-header {
  padding: 0.9rem 1rem 0.75rem;
}

.calls-compact-charts .md-chart-title {
  font-size: 0.98rem;
  margin-bottom: 0.15rem;
}

.calls-compact-charts .md-chart-subtitle {
  font-size: 0.78rem;
  margin-bottom: 0;
}

.calls-compact-charts .md-chart-footer {
  padding: 0.65rem 1rem 0.75rem;
}

.calls-compact-charts .md-foot-left,
.calls-compact-charts .md-foot-right {
  font-size: 0.78rem;
}