/* OnlinePlaner24 — Planer-2-inspirierter Modern Look (Tailwind/shadcn-Style mit OCD-Branding)
   Inter Font, helles Card-Design, subtile Schatten, weiße Sidebar mit grünen Akzenten */

/* ===== Inter Font (wie Planer 2) ===== */
@import url('https://rsms.me/inter/inter.css');

/* ===== CSS Variables (shadcn-inspired) ===== */
/* =============================================================
 * Phase 57 — Design-Token-Konsolidierung
 * Single source of truth für Farben, Typografie, Abstände, Schatten.
 * Alle neuen Komponenten sollen diese Tokens verwenden.
 * ============================================================= */
:root {
  /* === Brand (OCD Online Cargo Green) === */
  --op-primary: #8db951;
  --op-primary-dark: #6f9a3c;
  --op-primary-light: #a9cc78;
  --op-primary-rgb: 141, 185, 81;

  /* === Status Colors (Phase 57.1) === */
  --op-success: #16a34a;
  --op-success-bg: rgba(34, 197, 94, 0.1);
  --op-warning: #d97706;        /* contrast-fixed: war #f59e0b → 4.5:1 OK */
  --op-warning-bg: rgba(245, 158, 11, 0.1);
  --op-danger: #dc2626;
  --op-danger-bg: rgba(231, 76, 60, 0.1);
  --op-info: #0284c7;           /* contrast-fixed: war #0ea5e9 → 4.5:1 OK */
  --op-info-bg: rgba(14, 165, 233, 0.08);

  /* === Surface (Layered Backgrounds) === */
  --op-bg: #f9fafb;
  --op-surface: #ffffff;
  --op-surface-elevated: #fafbfc;
  --op-backdrop: rgba(15, 23, 42, 0.55);

  /* === Borders === */
  --op-border: #e5e7eb;
  --op-border-light: #f3f4f6;
  --op-border-strong: #cbd5e1;

  /* === Text (alle WCAG AA gegen weißen BG) === */
  --op-text: #111827;            /* primary, > 12:1 */
  --op-text-muted: #475569;      /* secondary, ~7:1 — war #6b7280 ~5:1 */
  --op-text-subtle: #64748b;     /* tertiary, ~4.6:1 — war #9ca3af ~3:1 (FAIL) */

  /* === Spacing Scale (4pt base) === */
  --op-space-0: 0;
  --op-space-1: 4px;
  --op-space-2: 8px;
  --op-space-3: 12px;
  --op-space-4: 16px;
  --op-space-5: 20px;
  --op-space-6: 24px;
  --op-space-8: 32px;
  --op-space-10: 40px;
  --op-space-12: 48px;

  /* === Typography Scale === */
  --op-text-xs: 11px;
  --op-text-sm: 12.5px;
  --op-text-base: 14px;
  --op-text-md: 15px;
  --op-text-lg: 17px;
  --op-text-xl: 20px;
  --op-text-2xl: 24px;
  --op-text-3xl: 30px;
  --op-leading-tight: 1.2;
  --op-leading-normal: 1.5;
  --op-leading-relaxed: 1.7;

  /* === Radius Scale === */
  --op-radius-sm: 4px;
  --op-radius: 8px;
  --op-radius-lg: 12px;
  --op-radius-xl: 16px;
  --op-radius-pill: 999px;

  /* === Shadow Scale === */
  --op-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --op-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --op-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --op-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 3px 8px rgba(0, 0, 0, 0.06);
  --op-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.08);

  /* === Z-Index Scale === */
  --op-z-base: 1;
  --op-z-sticky: 50;
  --op-z-fab: 1050;
  --op-z-modal: 1055;
  --op-z-modal-backdrop: 1050;
  --op-z-toast: 1080;
  --op-z-search: 1100;

  /* === Legacy aliases (deprecated, behalte rückwärtskompatibel) === */
  --bg: var(--op-bg);
  --card: var(--op-surface);
  --border: var(--op-border);
  --border-light: var(--op-border-light);
  --text: var(--op-text);
  --text-muted: var(--op-text-muted);
  --text-faint: var(--op-text-subtle);

  /* Brand-aligned BS5 overrides */
  --bs-primary: var(--op-primary);
  --bs-primary-rgb: var(--op-primary-rgb);
  --bs-link-color: var(--op-primary-dark);
  --bs-link-hover-color: var(--op-primary);
  --bs-body-bg: var(--op-bg);
  --bs-body-color: var(--op-text);
  --bs-border-color: var(--op-border);
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================================
 * Phase 57.2 — Utility-Klassen (Type + Spacing)
 * ============================================================= */
.op-text-xs   { font-size: var(--op-text-xs)   !important; line-height: var(--op-leading-normal); }
.op-text-sm   { font-size: var(--op-text-sm)   !important; line-height: var(--op-leading-normal); }
.op-text-base { font-size: var(--op-text-base) !important; line-height: var(--op-leading-normal); }
.op-text-md   { font-size: var(--op-text-md)   !important; line-height: var(--op-leading-normal); }
.op-text-lg   { font-size: var(--op-text-lg)   !important; line-height: var(--op-leading-normal); }
.op-text-xl   { font-size: var(--op-text-xl)   !important; line-height: var(--op-leading-tight); }
.op-text-2xl  { font-size: var(--op-text-2xl)  !important; line-height: var(--op-leading-tight); }
.op-text-3xl  { font-size: var(--op-text-3xl)  !important; line-height: var(--op-leading-tight); }
.op-text-muted   { color: var(--op-text-muted)   !important; }
.op-text-subtle  { color: var(--op-text-subtle)  !important; }
.op-text-success { color: var(--op-success) !important; }
.op-text-warning { color: var(--op-warning) !important; }
.op-text-danger  { color: var(--op-danger)  !important; }
.op-text-info    { color: var(--op-info)    !important; }

/* =============================================================
 * Phase 58 — Accessibility-Pass
 * ============================================================= */
/* 58.2 Focus-Rings konsistent — sichtbar für Keyboard-User */
*:focus-visible {
  outline: 2px solid var(--op-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--op-radius-sm);
}
.btn:focus-visible,
button:focus-visible,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--op-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(141, 185, 81, 0.18) !important;
}
/* Maus-Klicks bekommen keinen Focus-Ring (nur Keyboard) */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* 58.3 prefers-reduced-motion — alle Animationen praktisch instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Spezifisch: Toast erscheint sofort statt slide-in */
  .SmallBox.op-toast { animation: none !important; }
  /* Skeleton-Pulse abgeschaltet (nur statisches Grau) */
  table.dataTable .datatable-empty-row td { animation: none !important; background: var(--op-border-light) !important; }
  /* FAB-Hover-Scale aus */
  .op-fab:hover, .op-fab:focus { transform: none !important; }
}

/* ===== Body & Typography ===== */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg) !important;
  color: var(--text);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
* { font-family: inherit; }

/* ===== KEINE Underlines ===== */
a, a:visited, a:hover, a:focus { text-decoration: none !important; }

/* ===== Sidebar weiß, modern (ersetzt SmartAdmin's dunkles Theme) ===== */
aside, #left-panel {
  background: var(--card) !important;
  border-right: 1px solid var(--border);
}
aside *, #left-panel * { color: var(--text) !important; }
aside a, #left-panel a {
  color: var(--text) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 12px !important;
  border-radius: 6px;
  margin: 1px 6px;
  transition: all 0.12s ease;
}
aside a:hover, #left-panel a:hover {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
}
aside li.active > a, #left-panel li.active > a, aside .active > a {
  background: var(--op-primary) !important;
  color: white !important;
  font-weight: 600;
}
aside li.active > a *, #left-panel li.active > a * { color: white !important; }
aside h6, #left-panel h6 {
  color: var(--text-faint) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 18px 6px;
  font-weight: 600;
}

/* ===== Top header weiß, schmal ===== */
#header, .navbar {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  height: 54px;
}

/* ===== Ribbon / Breadcrumb-Bar ===== */
#ribbon {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
}
#ribbon ol.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
}

/* ===== Body Content ===== */
#main, #content, .content {
  background: var(--bg) !important;
}

/* ===== Buttons (shadcn-style: kompakt, subtle, primary deutlich) ===== */
.btn, .button {
  font-size: 13px !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.12s ease;
  border-width: 1px;
}
.btn-sm { font-size: 12px !important; padding: 4px 8px !important; }
.btn-lg { font-size: 14px !important; padding: 9px 16px !important; }

.btn-primary {
  background: var(--op-primary) !important;
  border-color: var(--op-primary) !important;
  color: white !important;
}
.btn-primary:hover {
  background: var(--op-primary-dark) !important;
  border-color: var(--op-primary-dark) !important;
}

.btn-default, .btn-secondary {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--border-light) !important;
  border-color: var(--text-faint) !important;
}

.btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: white !important;
}
.btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: white !important;
}

/* ===== Cards (shadcn-style) ===== */
.card, .panel, .jarviswidget {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: 16px !important;
  overflow: hidden;
}
.card-header, .panel-heading, .jarviswidget header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.card-body, .panel-body {
  padding: 16px !important;
  background: var(--card);
}

/* ===== Tables (clean Tailwind-Style) ===== */
.table {
  font-size: 13px;
  background: var(--card);
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--bg) !important;
  font-size: 11.5px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: 10px 12px !important;
  border-top: 1px solid var(--border-light);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover {
  background: var(--bg) !important;
}

/* ===== Datatables Wrapper ===== */
.dataTables_wrapper {
  font-size: 13px;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  height: 32px;
  font-size: 13px;
}

/* ===== Tabs (clean BS5/shadcn-Style) ===== */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
}
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link {
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.nav-tabs .nav-link:hover {
  color: var(--text) !important;
  background: transparent;
  border-color: transparent !important;
  border-bottom-color: var(--border) !important;
}
.nav-tabs .nav-link.active {
  color: var(--op-primary-dark) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--op-primary) !important;
  font-weight: 600;
}

/* Status-Pills (für die grüne Pill-Tab-Reihe wie Planer 2 Auftrags-Status) */
.nav-pills .nav-link {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  border-radius: 999px !important;
  background: var(--card) !important;
  border: 1px solid var(--border);
  color: var(--text-muted) !important;
  margin-right: 6px;
}
.nav-pills .nav-link.active {
  background: var(--op-primary) !important;
  border-color: var(--op-primary);
  color: white !important;
}

/* ===== Form Elements ===== */
.form-control, .form-select, input.form-control, select.form-control, textarea.form-control {
  font-size: 13px !important;
  padding: 6px 10px !important;
  height: 34px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea.form-control { height: auto !important; min-height: 80px; }
.form-control:focus, .form-select:focus {
  border-color: var(--op-primary) !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.15) !important;
  outline: none;
}
label, .control-label {
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 5px;
}

/* ===== Badges (Pill-Style) ===== */
.badge, .label {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  letter-spacing: 0.2px;
}

/* ===== Dropdown (clean) ===== */
.dropdown-menu {
  font-size: 13px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  background: var(--card);
}
.dropdown-item {
  padding: 7px 12px !important;
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  transition: background 0.1s ease;
}
.dropdown-item:hover {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
}

/* ===== Modals (shadcn-Style) ===== */
.modal-content {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.modal-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
}
.modal-body { padding: 18px; }
.modal-footer { border-top: 1px solid var(--border); padding: 12px 18px; }

/* ===== Alerts ===== */
.alert {
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid transparent;
  font-size: 13px;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ===== Pagination ===== */
.pagination .page-link {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  margin: 0 2px;
}
.pagination .page-item.active .page-link {
  background: var(--op-primary);
  border-color: var(--op-primary);
  color: white;
}

/* ===== Logo/Brand ===== */
#logo a, .navbar-brand {
  font-weight: 600;
  color: var(--op-primary) !important;
}

/* ===== Specific cleanups ===== */
.hr-line-dashed { border-top: 1px dashed var(--border); }
hr { border-color: var(--border); }
.text-muted { color: var(--text-muted) !important; }

/* SmartAdmin's well */
.well, .p-3.bg-light.rounded {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  padding: 14px !important;
}
/* ===== SmartAdmin Spacing Helpers wieder zur Verfügung stellen ===== */
.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 5px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-15 { margin-top: 15px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-5 { margin-bottom: 5px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-left-0 { margin-left: 0 !important; }
.margin-left-5 { margin-left: 5px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-right-0 { margin-right: 0 !important; }
.margin-right-5 { margin-right: 5px !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-15 { margin-right: 15px !important; }

.padding-0 { padding: 0 !important; }
.padding-5 { padding: 5px !important; }
.padding-10 { padding: 10px !important; }
.padding-15 { padding: 15px !important; }
.padding-20 { padding: 20px !important; }

/* center-block (BS3) */
.center-block {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* font helpers (SmartAdmin) */
.font-xs { font-size: 11px !important; }
.font-sm { font-size: 12.5px !important; }
.font-md { font-size: 14px !important; }
.font-lg { font-size: 16px !important; }
.font-xl { font-size: 18px !important; }
.font-weight-bold { font-weight: 600 !important; }

/* ===== Sidebar (jarvis) - SmartAdmin specific ===== */
#left-panel ul.navigation,
nav ul.navigation {
  background: var(--card) !important;
  padding: 8px 4px;
}
#left-panel ul.navigation li a,
nav ul.navigation li a {
  font-size: 13.5px;
  padding: 8px 14px;
  color: var(--text) !important;
  border-radius: 6px;
  margin: 1px 4px;
}
#left-panel ul.navigation li a:hover,
nav ul.navigation li a:hover {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
}
#left-panel ul.navigation li.active > a,
nav ul.navigation li.active > a {
  background: var(--op-primary) !important;
  color: white !important;
  font-weight: 600;
}
#left-panel ul.navigation li.active > a > i,
#left-panel ul.navigation li.active > a > span {
  color: white !important;
}

/* Submenu (eingeklappt) */
#left-panel ul.navigation ul {
  background: var(--bg) !important;
  border-radius: 6px;
  margin: 2px 8px;
}
#left-panel ul.navigation ul li a {
  padding: 6px 12px 6px 36px;
  font-size: 12.5px;
}

/* Sidebar Section-Titel */
#left-panel ul.navigation li.header-title,
#left-panel .menu-item-parent {
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 16px 4px;
}

/* ===== Top-Header (Logo + User) ===== */
#header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 54px !important;
  box-shadow: none;
}
#logo-group {
  background: var(--card) !important;
  border-right: 1px solid var(--border);
  height: 54px !important;
}
#logo {
  padding-top: 12px;
}

/* Project-context (User-dropdown im Header) */
.project-context {
  border: none !important;
  background: transparent !important;
  padding: 12px 16px;
}
.project-context .label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.project-context .project-selector {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

/* ===== Ribbon (zweites Menü unten am Header) ===== */
#ribbon {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 16px !important;
  height: auto !important;
  min-height: 36px;
}
.breadcrumb {
  font-size: 12.5px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--text-faint);
}

/* ===== Content-Bereich ===== */
#main, #content {
  background: var(--bg) !important;
  padding: 16px 20px !important;
}

/* ===== Page-title section ===== */
.page-title, h1.page-title {
  font-size: 22px !important;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 16px 0;
  letter-spacing: -0.3px;
}
.page-title small {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: normal;
}

/* ===== JarvisWidget (SmartAdmin Card) ===== */
.jarviswidget {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: 16px;
  background: var(--card);
}
.jarviswidget header {
  background: var(--card) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 600;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.jarviswidget header h2 {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--text) !important;
  margin: 0;
}
.jarviswidget > div {
  padding: 16px !important;
  background: var(--card);
  border-radius: 0 0 10px 10px;
}

/* ===== well overschreiben ===== */
.well, .p-3.bg-light, .p-2.bg-light, .p-4.bg-light {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 14px !important;
}

/* ===== Smart-Form Fixes ===== */
fieldset {
  background: transparent;
  padding: 0;
}
fieldset > legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* Smart-form section */
section {
  margin-bottom: 14px;
}

/* ===== Spacing zwischen .row containern ===== */
.row + .row {
  margin-top: 8px;
}

/* ===== Tab-Inhalt ===== */
.tab-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
}
.tab-content > .tab-pane {
  padding: 0;
}
/* ===== DataTables: Moderne Toolbar (Buttons, Length-Selector, Search) ===== */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 13px;
  margin-bottom: 12px;
}

/* DataTables-Buttons (Plus, Excel, PDF etc.) */
.dt-buttons .dt-button,
.dt-buttons button.btn,
.dataTables_wrapper button.btn-default {
  font-size: 12px !important;
  padding: 5px 10px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  margin-right: 4px;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dt-buttons .dt-button:hover,
.dt-buttons button.btn:hover {
  background: var(--border-light) !important;
  border-color: var(--text-faint) !important;
  color: var(--op-primary-dark) !important;
}
.dt-buttons .dt-button.active {
  background: var(--op-primary) !important;
  color: white !important;
  border-color: var(--op-primary) !important;
}

/* DataTables Length-Selector */
.dataTables_length select {
  display: inline-block;
  width: auto;
  margin: 0 6px;
}

/* DataTables Search-Input */
.dataTables_filter input[type="search"] {
  width: 220px;
  display: inline-block;
}

/* DataTables Info-Footer */
.dataTables_wrapper .dataTables_info {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 12px 0;
}

/* DataTables Pagination */
.dataTables_paginate .paginate_button {
  font-size: 12.5px;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  margin: 0 1px;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--border-light) !important;
  border-color: var(--text-faint) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--op-primary) !important;
  border-color: var(--op-primary) !important;
  color: white !important;
}
.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
}

/* ===== Empty-State (DataTables "Keine Daten") ===== */
.dataTables_empty,
td.dataTables_empty {
  padding: 30px !important;
  color: var(--text-faint) !important;
  font-size: 14px;
  font-style: normal !important;
  background: var(--bg) !important;
  text-align: center;
}

/* ===== Filter-Bar (Date-Picker zwischen Form-Controls) ===== */
.smart-form .row,
form .row {
  align-items: end;
}

/* DateRangePicker (SmartAdmin) */
.daterangepicker, .input-daterange {
  font-size: 13px;
}
.input-daterange .input-group-addon,
.input-daterange .input-group-text {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ===== Tooltip-Buttons (DataTables Toolbar mit nur Icons) ===== */
.dt-buttons .dt-button > i,
.dt-buttons button > i {
  font-size: 14px;
}

/* ===== Status-Pills (Auftragsstatus-Filter wie auf der Orders-Seite) ===== */
.btn-group-status,
ul.nav-pills.status-filter,
.status-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.btn-group-status .btn,
ul.nav-pills.status-filter .nav-link {
  border-radius: 999px !important;
  font-size: 12.5px !important;
  padding: 5px 14px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-group-status .btn.active,
ul.nav-pills.status-filter .nav-link.active {
  background: var(--op-primary) !important;
  border-color: var(--op-primary) !important;
  color: white !important;
}

/* ===== Action Bar (Header mit Title + Buttons) ===== */
.page-header,
.action-bar,
.row.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.page-header > h1,
.action-bar > h1,
.action-bar > .title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* ===== Page-Container ===== */
#main, #content {
  padding: 18px 24px !important;
}

/* ===== "DEV"-Indicator (auf Header) ===== */
.dev-indicator,
.app-version,
[class*="dev-"] {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* ===== Forms / Inputs Compact ===== */
.input-group {
  border-radius: 6px;
}
.input-group > .form-control,
.input-group > .form-select {
  height: 34px;
}

/* ===== Toolbar in Card-Header ===== */
.card-header.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Datatable-Empty-Row (gibt es als App-Klasse) ===== */
.datatable-empty-row {
  padding: 30px;
  color: var(--text-faint);
  font-style: normal;
}

/* ===== Misc cleanups ===== */
.smart-form .input input { height: 34px; }

/* ===== Header-Logo / Brand: Compact ===== */
#logo-group {
  width: 220px;
  border-right: 1px solid var(--border);
}
#logo img {
  max-height: 32px;
}

/* User-Display oben rechts */
#header .project-context {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}

/* ===== Drop-shadow für floating elements (popovers, dropdowns) ===== */
.popover, .tooltip-inner {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.tooltip-inner {
  background: var(--text);
  color: white;
  padding: 6px 10px;
}

/* ===== Smaller text-muted helper ===== */
small, .small {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== Action-Buttons (z.B. Edit/Löschen icons in Tabellen) ===== */
.btn-action,
td .btn-icon {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  padding: 4px 6px !important;
  border-radius: 6px;
}
.btn-action:hover,
td .btn-icon:hover {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
}
/* ===== FIX: card-header NUR in echten cards, nicht in #left-panel ===== */
#left-panel .card-header,
aside .card-header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}
#left-panel .card-info {
  font-weight: 600;
  color: var(--text) !important;
}

/* ===== FIX: Sidebar Nested Active States ===== */
/* Parent (Planung) dezent gehighlighted */
#left-panel nav > ul > li.active > a,
aside nav > ul > li.active > a {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
  border-left: 3px solid var(--op-primary);
  font-weight: 600;
}
#left-panel nav > ul > li.active > a > i,
aside nav > ul > li.active > a > i {
  color: var(--op-primary) !important;
}

/* Sub-item (Aufträge) — wenn aktiv: voller grün-fill */
#left-panel nav > ul > li > ul > li.active > a,
aside nav > ul > li > ul > li.active > a {
  background: var(--op-primary) !important;
  color: white !important;
  border-radius: 6px;
  margin: 2px 8px;
}

/* Sub-menu Container (eingerückt) */
#left-panel nav > ul > li > ul,
aside nav > ul > li > ul {
  background: var(--bg);
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
#left-panel nav > ul > li > ul > li > a,
aside nav > ul > li > ul > li > a {
  padding: 7px 14px 7px 38px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  display: block;
}
#left-panel nav > ul > li > ul > li > a:hover,
aside nav > ul > li > ul > li > a:hover {
  background: var(--border-light) !important;
  color: var(--op-primary-dark) !important;
}

/* Top-level menu items */
#left-panel nav > ul > li > a,
aside nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--text) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: all 0.12s ease;
}
#left-panel nav > ul > li > a:hover,
aside nav > ul > li > a:hover {
  background: var(--border-light) !important;
}
#left-panel nav > ul > li > a > i,
aside nav > ul > li > a > i {
  font-size: 15px;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
}
#left-panel nav > ul > li > a > .menu-item-parent,
aside nav > ul > li > a > .menu-item-parent {
  font-weight: 500;
}

/* Reset list-styles für nav-uls */
#left-panel nav ul,
aside nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===== Widgets in Sidebar nicht modifizieren (nur app-content) ===== */
#left-panel .card-info,
#left-panel .card-timer,
#left-panel .card-message {
  color: var(--text-muted) !important;
}

/* ===== Status-Tabs Pills Container Layout (visible auf Orders-Page) ===== */
.btn-toolbar.justify-content-center,
.text-center > .btn-group {
  justify-content: flex-start !important;
  margin: 12px 0;
}

/* ===== Footer / Pagination-Bar konsistent ===== */
.dataTables_wrapper .row.bottom {
  align-items: center;
  margin-top: 16px;
}

/* ===== Fix: Page-Title Section Layout ===== */
.subheader-title,
h1.page-title {
  margin: 16px 0 6px;
}

/* ===== Toolbar: Left + Right Buttons Layout ===== */
.toolbar-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Tabelle: Volle Card-Optik (overflow visible — sonst werden Bootstrap-Dropdowns aus Tabellenzellen abgeschnitten) ===== */
.dataTables_wrapper .table {
  border: 1px solid var(--border);
  border-radius: 8px;
}
table.dataTable thead th {
  border-bottom-width: 1px !important;
}

/* ===== Filter-Buttons + Date-Pickers Layout ===== */
.well.smart-form,
.well form,
form .row.smart-form {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 16px !important;
}

/* ===== Body smart-style override ===== */
body.smart-style-4 {
  background: var(--bg) !important;
}

/* ===== Smarter Top Header (das oben steht "OnlinePlaner24 GmbH") ===== */
#header h1, #header .header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding: 0 16px;
}

/* ===== "smart-form" widget cards ===== */
.smart-form > header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px !important;
  font-size: 13.5px;
  font-weight: 600;
}
.smart-form > fieldset {
  background: var(--card);
  border: none;
  padding: 14px;
}

/* ===== Fix: alle BS5 form-control radius leichter ===== */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], select, textarea {
  border-radius: 6px !important;
}
/* =============================================================
 * op-theme.css — FINAL DESIGN FIXES (2026-04-25 Spätschicht)
 * Higher-specificity overrides to make the OnlinePlaner-2-style
 * coherent across all pages. Appended to op-theme.css.
 * ============================================================= */

/* ===== Sidebar — STRONGER Active Parent State =====
 * The user perceived the previous "rgb(243,244,246)" tint as plain white.
 * New: greenish tint background + thicker left border + bolder text. */
#left-panel nav > ul > li.active > a,
#left-panel nav > ul > li.active.open > a,
#left-panel nav > ul > li.open > a,
aside nav > ul > li.active > a,
aside nav > ul > li.active.open > a,
aside nav > ul > li.open > a {
  background: rgba(141, 185, 81, 0.14) !important;          /* green-tint, clearly visible */
  background-image: none !important;                        /* kill SmartAdmin gradients */
  color: var(--op-primary-dark, #6f9a3c) !important;
  border-left: 4px solid var(--op-primary, #8db951) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
#left-panel nav > ul > li.active > a > i,
#left-panel nav > ul > li.active.open > a > i,
#left-panel nav > ul > li.open > a > i,
aside nav > ul > li.active > a > i,
aside nav > ul > li.active.open > a > i,
aside nav > ul > li.open > a > i,
#left-panel nav > ul > li.active > a > .menu-item-parent,
#left-panel nav > ul > li.open > a > .menu-item-parent,
aside nav > ul > li.active > a > .menu-item-parent,
aside nav > ul > li.open > a > .menu-item-parent {
  color: var(--op-primary, #8db951) !important;
}

/* Sub-item active pill — keep green-fill but more compact */
#left-panel nav > ul > li > ul > li.active > a,
aside nav > ul > li > ul > li.active > a {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border-radius: 6px;
  margin: 2px 8px;
  font-weight: 600 !important;
}
#left-panel nav > ul > li > ul > li.active > a *,
aside nav > ul > li > ul > li.active > a * {
  color: white !important;
}

/* ===== Brand Buttons — UNIFIED OCD-Green =====
 * Treat .btn-primary, .btn-success, .btn-info, .btn-default-as-primary
 * all as the OCD-green primary action color. Use .btn-secondary for the
 * neutral gray, and .btn-outline-* for outlined variants. */
.btn-primary,
.btn-success,
.btn-info,
.btn-default.btn-primary,
button.btn-success,
a.btn-success,
button.btn-info,
a.btn-info {
  background: var(--op-primary, #8db951) !important;
  background-image: none !important;
  border: 1px solid var(--op-primary, #8db951) !important;
  color: white !important;
  text-shadow: none !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
button.btn-success:hover,
a.btn-success:hover,
button.btn-info:hover,
a.btn-info:hover {
  background: var(--op-primary-dark, #6f9a3c) !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
  color: white !important;
}

/* Secondary / neutral action button (e.g. "PDF exportieren") */
.btn-secondary,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) {
  background: white !important;
  color: var(--text, #111827) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
}
.btn-secondary:hover,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* ===== Tab Status-Bar — fix the floating badge "1" =====
 * The badge for "Storniert 1" was rendering loose below the tab row.
 * Dock it inline next to the tab title. */
ul.nav-tabs li.nav-item .nav-link .badge,
.nav-tabs > li > a .badge,
.nav.nav-tabs .badge {
  position: static !important;
  display: inline-block !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
}

/* Tab row spacing */
.nav-tabs,
ul.nav-tabs {
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
  margin-right: 4px !important;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
  color: var(--text, #111827) !important;
  border-bottom-color: var(--border, #e5e7eb) !important;
  background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs .nav-link.active {
  color: var(--op-primary-dark, #6f9a3c) !important;
  border-bottom: 2px solid var(--op-primary, #8db951) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ===== DataTable Filter-Row spacing =====
 * The per-column filter input row sits flush against the column-headers,
 * making them feel overlapping. Add separation. */
.dataTables_wrapper table.dataTable thead tr.filter-row,
table.dataTable thead tr:has(input.column_filter),
table.dataTable thead tr:first-child:has(input) {
  background: var(--bg, #f9fafb) !important;
}
.dataTables_wrapper table.dataTable thead tr.filter-row th,
table.dataTable thead tr:has(input.column_filter) th,
table.dataTable thead tr:first-child:has(input) th {
  padding: 8px 6px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
table.dataTable thead tr th input[type="text"],
table.dataTable thead tr th input[type="search"],
table.dataTable thead tr th input.form-control {
  width: 100% !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
}
table.dataTable thead th {
  padding: 10px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--text-muted, #6b7280) !important;
  background: var(--card, #ffffff) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}

/* ===== Page header — breathing room around title + actions ===== */
.page-header,
.subheader,
.row.page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 18px 0 16px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
.page-header h1,
.subheader h1,
h1.page-title {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
}
.page-header h1 small,
.subheader h1 small {
  font-size: 14px !important;
  color: var(--text-muted, #6b7280) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

/* The action-button cluster on top right */
.page-header > div,
.subheader > div,
.btn-toolbar.pull-right {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ===== Top header (banner) — better spacing ===== */
#header,
header[role="banner"] {
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
}
#header .project-context,
header[role="banner"] .project-context {
  padding: 8px 14px !important;
  gap: 8px !important;
}

/* ===== Card / Article general spacing ===== */
.card, article {
  background: var(--card, #ffffff) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px !important;
}
.card > .card-header,
article > header,
article > .card-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: var(--bg, #f9fafb) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.card > .card-body,
article > .card-body {
  padding: 16px !important;
}

/* Filter / form rows in cards */
.card form > .row,
article form > .row,
.smart-form .row {
  align-items: end !important;
  margin-bottom: 8px !important;
}
.card form .form-group,
article form .form-group {
  margin-bottom: 12px !important;
}

/* ===== Status-Filter pills (Buchhaltung > Rechnungen) =====
 * "Alle" / "Zahlungsziel überschritten" / "offene Rechnungen" / "bezahlte Rechnungen" */
.btn-toolbar > .btn-group > .btn,
form .btn-toolbar > .btn,
.status-filters .btn,
.btn-group-toggle > .btn {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: white !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  margin-right: 6px !important;
}
.btn-toolbar > .btn-group > .btn.active,
.btn-toolbar > .btn-group > .btn.btn-primary,
form .btn-toolbar > .btn.active,
.btn-group-toggle > .btn.active {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border-color: var(--op-primary, #8db951) !important;
}
.btn-toolbar > .btn-group > .btn:hover:not(.active) {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
}

/* ===== Body left/right padding ===== */
#main, #content, .page-content {
  padding: 18px 28px !important;
}

/* ===== Final cleanup: kill any remaining SmartAdmin gradients in nav ===== */
#left-panel nav,
#left-panel nav *,
aside nav,
aside nav * {
  background-image: none !important;
  text-shadow: none !important;
}

/* But keep the green sub-item pill background-color (image: none doesn't kill bg-color) */
#left-panel nav > ul > li > ul > li.active > a,
aside nav > ul > li > ul > li.active > a {
  background: var(--op-primary, #8db951) !important;
}


/* ===== Fix regression: H1 page titles must NOT be flexed ===== */
h1.page-title,
.subheader > h1,
.page-header > h1,
.row.page-header > h1,
h1.page-title.subheader-title {
  display: block !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
}
h1.page-title > *,
.subheader > h1 > *,
.page-header > h1 > * {
  display: inline !important;
}
h1.page-title small,
.subheader > h1 small,
.page-header > h1 small {
  font-size: 14px !important;
  color: var(--text-muted, #6b7280) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
  display: inline !important;
}

/* ===== SmartAdmin .label badge in nav-tabs (Storniert "1" floating fix) ===== */
ul.nav-tabs .nav-item .nav-link .label,
.nav-tabs > li > a .label,
.nav.nav-tabs .label,
ul.nav-tabs li a span.label {
  position: static !important;
  display: inline-block !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  line-height: 1.6 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* SmartAdmin status-tabs use icons stacked on top of label-text. Compact. */
ul.nav-tabs li.nav-item > a > i,
.nav-tabs > li > a > i {
  display: block !important;
  margin: 0 auto 4px auto !important;
  font-size: 16px !important;
  text-align: center !important;
}


/* ===== Final position fix for tab status-badges (.label in nav-tabs) =====
 * The tab content is flex column (icon top, text bottom), so static label
 * lands as a third row. Absolute-position it top-right of the tab. */
ul.nav-tabs li.nav-item,
.nav-tabs > li {
  position: relative !important;
}
ul.nav-tabs li.nav-item .nav-link .label,
.nav-tabs > li > a .label,
ul.nav-tabs li a span.label {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* =============================================================
 * UI/UX Overhaul — Planer-2/shadcn-inspired refinement
 * Phase 1: typography hierarchy, spacing, refined surfaces
 * Appended to op-theme.css after the design-fixes block.
 * ============================================================= */

/* ===== Top Bar (Header banner) ===== */
#header,
header[role="banner"] {
  background: white !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 0 !important;
}
#header > *,
#header .menu-left-pane,
#header .menu-right-pane {
  height: 56px !important;
  align-items: center !important;
}

/* User info pill in top bar */
#header .project-context,
header[role="banner"] .project-context {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px !important;
  background: white !important;
}
#header .project-context::before,
header[role="banner"] .project-context::before {
  content: "" !important;
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--op-primary, #8db951) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
}

/* "BENUTZER" label tone-down */
#header .project-context > div:first-child,
header[role="banner"] .project-context > div:first-child {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: var(--text-faint, #9ca3af) !important;
  text-transform: uppercase !important;
}

/* Top-bar action icons (refresh / fullscreen / hamburger / star) */
#header .menu-left-pane > a,
#header .menu-right-pane > a,
#header .header-btn,
#header .btn-header,
#shortcut > .smart-toggle,
.header-search-icons > a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid transparent !important;
  margin: 0 2px !important;
  background: transparent !important;
}
#header .menu-left-pane > a:hover,
#header .menu-right-pane > a:hover,
#header .header-btn:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* Schnellzugriff bookmark menu */
#shortcut.dropdown-shortcut,
.dropdown-shortcut {
  border-radius: 8px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
}

/* ===== Sidebar (#left-panel) refinement ===== */
#left-panel {
  background: white !important;
  border-right: 1px solid var(--border, #e5e7eb) !important;
  width: 220px !important;
}
#left-panel #logo-group,
aside #logo-group {
  padding: 16px 14px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  border-right: none !important;
  width: auto !important;
}
#left-panel #logo img,
aside #logo img {
  max-height: 40px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* "OnlinePlaner24 00:00:00 ⚠ Wartungsarbeiten" widget — compact */
#left-panel .login-info,
aside .login-info,
#left-panel > div:first-child > .login-info {
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  color: var(--text-muted, #6b7280) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: var(--bg, #f9fafb) !important;
}
#left-panel .login-info span,
aside .login-info span {
  color: var(--text, #111827) !important;
  font-weight: 500 !important;
}

/* Top-level menu items — lighter, less aggressive */
#left-panel nav > ul > li > a,
aside nav > ul > li > a {
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;          /* NO uppercase on top-level */
  letter-spacing: 0 !important;
  color: var(--text, #111827) !important;
  border-left: 3px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
#left-panel nav > ul > li > a > i,
aside nav > ul > li > a > i {
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  color: var(--text-muted, #6b7280) !important;
}
#left-panel nav > ul > li > a > .menu-item-parent,
aside nav > ul > li > a > .menu-item-parent {
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Top-level hover */
#left-panel nav > ul > li > a:hover,
aside nav > ul > li > a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* Sub-menu container */
#left-panel nav > ul > li > ul,
aside nav > ul > li > ul {
  background: white !important;
  padding: 4px 0 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Sub-items — indent + smaller */
#left-panel nav > ul > li > ul > li > a,
aside nav > ul > li > ul > li > a {
  padding: 7px 14px 7px 47px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--text-muted, #6b7280) !important;
  display: block !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  margin: 0 !important;
}
#left-panel nav > ul > li > ul > li > a:hover,
aside nav > ul > li > ul > li > a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* Sub-item ACTIVE — pill style refined */
#left-panel nav > ul > li > ul > li.active > a,
aside nav > ul > li > ul > li.active > a {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border-radius: 8px !important;
  margin: 1px 10px 1px 38px !important;
  padding: 7px 12px !important;
  font-weight: 600 !important;
  border-left: none !important;
}

/* ===== Page Title — bigger H1, breadcrumb above ===== */
h1.page-title,
.subheader > h1,
.page-header > h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 4px 0 0 0 !important;
  color: var(--text, #111827) !important;
}

/* Convert ">" breadcrumb spans to muted prefix */
h1.page-title > span,
h1.page-title > i + span,
.subheader > h1 > span,
.page-header > h1 > span,
h1.page-title > .breadcrumb,
h1.page-title small {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6b7280) !important;
  display: block !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Top page-header container — more breathing room */
.subheader,
.page-header,
.row.page-header {
  padding: 18px 0 18px 0 !important;
  margin: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: transparent !important;
}

/* ===== Cards — refined shadows + padding ===== */
.card,
article.jarviswidget,
.well {
  background: white !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

/* Card headers — proper padding + flex layout for actions */
.card > .card-header,
article > header,
article > .card-header,
.card > header[class*="header"] {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text, #111827) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.card > .card-body,
article > .card-body,
article > .widget-body {
  padding: 18px !important;
}

/* "📊Rechnungen" header label — tighten icon spacing */
article > header > h2,
article > .card-header > h2,
article > header.card-header,
.smart-form > header {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ===== DataTables — modern + integrated filter row ===== */
.dataTables_wrapper {
  padding: 0 !important;
}

/* The wrapper-level toolbar (length selector + search field on top) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 12px 14px !important;
  background: white !important;
  margin: 0 !important;
}

/* DataTable */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Table-level filter row (the column-search inputs ABOVE the headers) — distinct band */
table.dataTable thead tr:has(input.column_filter),
table.dataTable thead tr:first-child:has(input.form-control),
table.dataTable thead tr.filter-row {
  background: var(--bg, #f9fafb) !important;
}
table.dataTable thead tr:has(input.column_filter) th,
table.dataTable thead tr:first-child:has(input.form-control) th,
table.dataTable thead tr.filter-row th {
  padding: 10px 8px 10px 8px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: var(--bg, #f9fafb) !important;
}
table.dataTable thead th input[type="text"],
table.dataTable thead th input[type="search"],
table.dataTable thead th input.form-control {
  width: 100% !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  height: 30px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  color: var(--text, #111827) !important;
}
table.dataTable thead th input:focus {
  outline: 2px solid var(--op-primary, #8db951) !important;
  outline-offset: -1px !important;
  border-color: var(--op-primary, #8db951) !important;
}

/* Real column-headers (NAME, DATUM, etc.) */
table.dataTable thead tr:not(:has(input)) th,
table.dataTable thead tr:not(:first-child) th {
  padding: 12px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted, #6b7280) !important;
  background: white !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
}

/* Body rows */
table.dataTable tbody td {
  padding: 14px 12px !important;
  font-size: 13px !important;
  color: var(--text, #111827) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  vertical-align: middle !important;
}
table.dataTable tbody tr:hover td {
  background: var(--bg, #f9fafb) !important;
}

/* Empty state row */
table.dataTable tbody td.dataTables_empty,
table.dataTable tbody tr td[colspan]:only-child {
  text-align: center !important;
  padding: 50px 20px !important;
  color: var(--text-faint, #9ca3af) !important;
  font-size: 14px !important;
  font-style: normal !important;
  background: white !important;
}

/* Footer info + pagination row */
.dataTables_wrapper .dataTables_info {
  padding: 14px 16px !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #6b7280) !important;
  font-style: normal !important;
}
.dataTables_wrapper .dataTables_paginate {
  padding: 14px 16px !important;
}
.dataTables_paginate .paginate_button {
  padding: 6px 11px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  margin: 0 1px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  color: var(--text, #111827) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border-color: var(--op-primary, #8db951) !important;
  font-weight: 600 !important;
}
.dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ===== Buttons sizing + focus ===== */
.btn,
button.btn,
a.btn {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  transition: all 0.12s ease !important;
}
.btn-sm,
button.btn-sm,
a.btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.btn-lg,
button.btn-lg,
a.btn-lg {
  padding: 10px 18px !important;
  font-size: 14px !important;
}

/* Focus ring */
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--op-primary, #8db951) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ===== Form inputs unified ===== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  padding: 8px 11px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  color: var(--text, #111827) !important;
  line-height: 1.4 !important;
  height: auto !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.15) !important;
}

/* Form labels */
label,
.smart-form label,
.form-label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text, #111827) !important;
  margin-bottom: 5px !important;
  display: block; /* nicht !important — sonst überschreibt es Vue's v-show */
}

/* ===== Badges — pill style consistent ===== */
.badge,
span.badge,
.label,
span.label {
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  display: inline-block !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  line-height: 1.5 !important;
}

/* Status semantic colors */
.label.bg-color-green,
.badge-success,
.bg-success {
  background: rgba(141, 185, 81, 0.15) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
.label.bg-color-red,
.badge-danger,
.bg-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
}
.label.bg-color-orange,
.badge-warning,
.bg-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #b45309 !important;
}
.label.bg-color-blue,
.label.bg-color-blueLight,
.badge-info,
.bg-info {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1d4ed8 !important;
}

/* ===== Page main content padding ===== */
#main, #content, .page-content, .ribbon, .container-fluid > .row {
  padding: 22px 28px !important;
}

/* ===== Tabs (sub-page tabs like Allgemein/Zahlungsdaten) ===== */
ul.nav-tabs,
.nav-tabs {
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  gap: 4px !important;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 80px !important;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
  color: var(--text, #111827) !important;
  border-bottom-color: var(--border, #e5e7eb) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs .nav-link.active {
  color: var(--op-primary-dark, #6f9a3c) !important;
  border-bottom: 2px solid var(--op-primary, #8db951) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* Body background */
body,
body.smart-style-4 {
  background: var(--bg, #f9fafb) !important;
}

/* ===== Footer ===== */
.page-footer,
#footer {
  background: white !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  padding: 12px 28px !important;
  font-size: 12px !important;
  color: var(--text-muted, #6b7280) !important;
}
/* =============================================================
 * UI/UX Overhaul Phase 2 — finishing touches
 * Status badges, widget headers, empty states, sidebar widget,
 * tab refinement, table-cell badges.
 * ============================================================= */

/* ===== Status badges in DataTable cells (Storniert/Altschaden/etc.) =====
 * SmartAdmin templates use <button class="btn btn-default disabled"> for
 * read-only status indicators in row cells. Make them proper pills. */
table.dataTable tbody td button.btn.disabled,
table.dataTable tbody td .btn.disabled,
table.dataTable tbody td button[disabled].btn {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* Detect status text and tint accordingly via attribute or class */
table.dataTable tbody td button.btn-default[data-status="canceled"],
table.dataTable tbody td .btn[data-status="canceled"],
table.dataTable tbody td .label[data-status="canceled"] {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* ===== Widget headers (Dashboard cards) =====
 * Icons before titles like "📊Aktuelle Aufträge" — give them air */
.jarviswidget > header,
.widget-header,
article > header.jarviswidget-header {
  background: white !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.jarviswidget > header > h2,
.widget-header > h2,
.jarviswidget-header > h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}
.jarviswidget > header > h2 > i,
.widget-header > h2 > i,
.jarviswidget-header > h2 > i {
  font-size: 16px !important;
  color: var(--op-primary, #8db951) !important;
  margin-right: 0 !important;
}

/* Widget header right-side controls (minimize/maximize) */
.jarviswidget-ctrls,
.widget-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.jarviswidget-ctrls > a,
.widget-controls > a {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
}
.jarviswidget-ctrls > a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* Widget body */
.jarviswidget > div,
.widget-body {
  padding: 16px 18px !important;
}

/* ===== "Anzeigen" / "Alle anzeigen" inline buttons in widget headers ===== */
.jarviswidget > header .btn,
.widget-header .btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ===== Sidebar "Wartungsarbeiten" widget — compact ===== */
#left-panel .login-info,
aside .login-info {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: var(--bg, #f9fafb) !important;
  font-size: 11.5px !important;
  text-align: left !important;
}
#left-panel .login-info > a,
aside .login-info > a {
  display: block !important;
  color: var(--text-muted, #6b7280) !important;
}
#left-panel .login-info span,
aside .login-info span {
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  display: block !important;
  margin-bottom: 2px !important;
  font-size: 12.5px !important;
}
#left-panel .login-info i.text-warning,
aside .login-info i.text-warning {
  color: #f59e0b !important;
  margin-right: 4px !important;
}

/* ===== Empty states — illustrated + airy =====
 * The "Keine Datensätze gefunden" cell becomes a friendly empty state */
table.dataTable tbody td.dataTables_empty {
  position: relative !important;
}
table.dataTable tbody td.dataTables_empty::before {
  content: "📭" !important;
  display: block !important;
  font-size: 32px !important;
  margin-bottom: 10px !important;
  opacity: 0.5 !important;
}

/* "0 Datensätze (Filter ist aktiv!)" footer info */
.dataTables_info {
  font-style: normal !important;
  color: var(--text-muted, #6b7280) !important;
  font-weight: 400 !important;
}
.dataTables_info i,
.dataTables_info em {
  font-style: normal !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* ===== Tabs — horizontal icon+text option for forms ===== */
/* Customer Edit tabs (Allgemein/Zahlungsdaten/Leistungen/etc.) get
 * horizontal layout instead of stacked when there's enough room. */
.smart-form > .tab-content + ul.nav-tabs,
.smart-form ul.nav-tabs,
form ul.nav-tabs,
.tab-pane + ul.nav-tabs {
  flex-wrap: wrap !important;
}

/* Tabs with icon stacked above text — keep vertical for status filters,
 * but make the icon area a bit more polished */
.nav-tabs > li > a > i:first-child,
.nav-tabs .nav-link > i:first-child {
  display: block !important;
  font-size: 16px !important;
  margin: 0 auto 5px !important;
  text-align: center !important;
  width: auto !important;
  color: inherit !important;
}

/* ===== Pagination input box "10" — match button styling ===== */
.dataTables_length > label > select,
.dataTables_length select {
  height: 32px !important;
  padding: 4px 26px 4px 10px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  margin: 0 6px !important;
}
.dataTables_filter input[type="search"],
.dataTables_filter input.form-control {
  height: 32px !important;
  padding: 4px 11px !important;
  font-size: 12.5px !important;
  width: 240px !important;
}

/* ===== Form section dividers (h2/h3 inside forms) ===== */
.smart-form > fieldset > section > legend,
form > fieldset > legend,
form .form-section,
section.form-section h2,
section.form-section h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 22px 0 10px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
/* First section header has less top margin */
form > section.form-section:first-child h2,
form > section:first-child > h2 {
  margin-top: 0 !important;
}

/* ===== Date range picker / input-group ===== */
.input-daterange {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.input-group {
  border-radius: 8px !important;
}
.input-group > .input-group-addon,
.input-group > .input-group-text {
  background: white !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  padding: 8px 11px !important;
  border-radius: 8px !important;
  color: var(--text-muted, #6b7280) !important;
}

/* ===== Action-icon clusters in table cells (gear/trash/edit) ===== */
table.dataTable tbody td .btn-action,
table.dataTable tbody td .btn-icon,
table.dataTable tbody td .btn-link {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
table.dataTable tbody td .btn-action:hover,
table.dataTable tbody td .btn-icon:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* ===== Action-Dropdown gear in table rows ===== */
table.dataTable tbody td > .btn-group > .btn,
table.dataTable tbody td > .dropdown > .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

/* ===== Tooltip ===== */
.tooltip {
  font-size: 11.5px !important;
}
.tooltip-inner {
  background: var(--text, #111827) !important;
  color: white !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.tooltip-arrow,
.tooltip > .arrow::before {
  border-top-color: var(--text, #111827) !important;
}

/* ===== Modal dialog ===== */
.modal-content {
  border-radius: 12px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
.modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
.modal-header h4,
.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.modal-body {
  padding: 20px !important;
}
.modal-footer {
  padding: 14px 20px !important;
  background: var(--bg, #f9fafb) !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 0 0 12px 12px !important;
}

/* ===== Notifications / Alerts ===== */
.alert {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}
.alert-success,
.alert-success.alert {
  background: rgba(141, 185, 81, 0.08) !important;
  border-color: rgba(141, 185, 81, 0.2) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
.alert-danger,
.alert-error {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #b91c1c !important;
}
.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #92400e !important;
}
.alert-info {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #1e40af !important;
}

/* ===== Select2 dropdowns — match brand styling ===== */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
  border-radius: 8px !important;
  border-color: var(--border, #e5e7eb) !important;
  height: 38px !important;
  padding: 6px 10px !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.15) !important;
}
.select2-results__option--highlighted {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
}

/* ===== Calendar tabs (Monatsansicht/Wochenansicht/Tagesansicht) =====
 * Prevent ugly word-breaking by giving more horizontal space */
.fc-button,
.fc-button-group .fc-button,
.btn-group .btn[name*="ansicht"] {
  white-space: nowrap !important;
  min-width: 100px !important;
  padding: 6px 14px !important;
}

/* ===== Date/time relative timestamps (vor 2 Jahren) ===== */
.timeago,
small.text-muted,
.text-muted small,
table.dataTable tbody td small {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--text-faint, #9ca3af) !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

/* ===== Calendar widget tab-buttons — prevent ugly word-wrap ===== */
.jarviswidget header + div .btn-group .btn,
.widget-body > .btn-group > .btn,
.btn-group > .btn.btn-xs {
  white-space: nowrap !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
}
.jarviswidget .btn-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
}

/* =============================================================
 * UI/UX Overhaul Phase 3 — Header, Sidebar, Tabs, Footer, Buttons
 * Focused polish on these specific surfaces.
 * ============================================================= */

/* =====================================================================
 * SIDEBAR — branded header, refined widget, section labels
 * ===================================================================== */

/* Sidebar overall */
#left-panel,
aside.notebook,
aside {
  background: white !important;
  border-right: 1px solid var(--border, #e5e7eb) !important;
  width: 220px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) !important;
}

/* Sidebar brand-area: logo + product name */
#left-panel #logo-group,
#left-panel > a:first-child,
aside #logo-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  height: auto !important;
  min-height: 56px !important;
}
#left-panel #logo,
aside #logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#left-panel #logo img,
aside #logo img {
  max-height: 32px !important;
  width: auto !important;
}
/* Inject brand name beside logo via ::after */
#left-panel #logo::after,
aside #logo::after {
  content: "OnlinePlaner24" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  letter-spacing: -0.2px !important;
}

/* Wartungsarbeiten widget — refined card */
#left-panel .login-info,
aside .login-info {
  margin: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 10px !important;
  background: var(--bg, #f9fafb) !important;
  font-size: 11.5px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#left-panel .login-info > a,
aside .login-info > a {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-decoration: none !important;
  color: var(--text-muted, #6b7280) !important;
}
#left-panel .login-info span:first-child,
aside .login-info span:first-child {
  font-size: 11px !important;
  color: var(--text-muted, #6b7280) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#left-panel .login-info span:not(:first-child),
aside .login-info > span:nth-child(2),
#left-panel .login-info span.text-warning {
  font-size: 11px !important;
  color: #b45309 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#left-panel .login-info i.fa-warning,
aside .login-info i.fa-warning {
  color: #f59e0b !important;
}

/* Sidebar nav top spacing */
#left-panel nav,
aside nav {
  padding: 8px 0 16px 0 !important;
}

/* Sidebar collapsed-arrow indicator (>) on parent items */
#left-panel nav > ul > li > a > .collapse-sign,
#left-panel nav > ul > li > a:has(+ ul) > b,
#left-panel nav > ul > li > a > b.fa-chevron-left,
#left-panel nav > ul > li > a > b {
  font-size: 10px !important;
  color: var(--text-faint, #9ca3af) !important;
  margin-left: auto !important;
  transition: transform 0.15s ease !important;
}
#left-panel nav > ul > li.open > a > b,
#left-panel nav > ul > li.active.open > a > b {
  transform: rotate(-90deg) !important;
}

/* =====================================================================
 * HEADER — refined top bar with avatar, search hint, action buttons
 * ===================================================================== */

#header,
header[role="banner"] {
  background: white !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* User-info pill area (left) */
#header .project-context {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
}
#header .project-context::before {
  content: attr(data-initials) !important;             /* user initials baked in for OCD24 admin */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* "Benutzer" label (small caps muted) */
#header .project-context > div:first-child,
#header .project-context > div.col-xs-12:first-of-type {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: var(--text-faint, #9ca3af) !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
/* User name + role */
#header .project-context > div:not(:first-child),
#header .project-context > div.col-xs-12:not(:first-of-type) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  line-height: 1.3 !important;
}
#header .project-context small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--text-muted, #6b7280) !important;
}

/* Header right cluster (icons + Schnellzugriff) */
#header .menu-right-pane,
#header > ul.header-dropdown-list,
#header .header-search-icons,
#header > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Header buttons (refresh / fullscreen / hamburger) */
#header a[href*="javascript:void"],
#header .header-btn,
#header > a > i.fa,
.header-search-icons > a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: background 0.12s ease !important;
}
#header a[href*="javascript:void"]:hover,
#header .header-btn:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text, #111827) !important;
}

/* Schnellzugriff (bookmarks dropdown) — refined pill */
#header #shortcut,
#header .ajax-dropdown {
  border-radius: 10px !important;
}
#shortcut > .smart-toggle,
.btn-shortcut,
.dropdown.dropdown-shortcut > .btn,
.btn.dropdown-toggle.shortcut-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text, #111827) !important;
  background: var(--bg, #f9fafb) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 999px !important;
}
#shortcut > .smart-toggle:hover,
.btn.dropdown-toggle.shortcut-btn:hover {
  background: var(--border-light, #f3f4f6) !important;
}

/* Star icon inside Schnellzugriff */
#header [class*="schnellzugriff"] i.fa-star,
.dropdown-shortcut i.fa-star {
  color: #fbbf24 !important;
  font-size: 13px !important;
}

/* Mobile hamburger / left toggle */
#header > .hamburger,
#header .menu-left-pane > .toggle-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

/* =====================================================================
 * PAGE HEAD (subheader / title + actions row)
 * ===================================================================== */

.subheader,
.row.subheader,
.page-header,
.row.page-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 0 18px 0 !important;
  margin: 0 0 18px 0 !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  flex-wrap: wrap !important;
}

/* Page header right-side actions cluster */
.subheader > div:last-child:not(h1):not([class*="title"]),
.page-header > div:last-child:not(h1):not([class*="title"]),
.subheader > .ribbon-button-alignment,
.btn-toolbar.pull-right,
.subheader > .col-xs-12:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

/* "zurücksetzen" reset link top of dashboard — make it a soft button */
.well-tip a,
a.reset-page,
a[href*="javascript"]:has(> i.fa-refresh):not(#header *):not(.jarviswidget-ctrls *):not(.dataTables_paginate *) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: white !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  color: var(--text-muted, #6b7280) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* =====================================================================
 * TABS — refined for both icon-stack and horizontal-text variants
 * ===================================================================== */

ul.nav-tabs,
.nav-tabs {
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 2px !important;
  list-style: none !important;
}

ul.nav-tabs > li,
.nav-tabs .nav-item {
  margin: 0 !important;
  position: relative !important;
}

/* Default tab look */
ul.nav-tabs > li > a,
.nav-tabs > li > a,
.nav-tabs .nav-link {
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  transition: color 0.12s ease, border-color 0.12s ease !important;
}

ul.nav-tabs > li > a:hover,
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
  color: var(--text, #111827) !important;
  border-bottom-color: var(--border, #e5e7eb) !important;
  background: transparent !important;
}

ul.nav-tabs > li.active > a,
ul.nav-tabs > li > a.active,
.nav-tabs > li.active > a,
.nav-tabs .nav-link.active {
  color: var(--op-primary-dark, #6f9a3c) !important;
  border-bottom: 2px solid var(--op-primary, #8db951) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* Icon inside tab */
ul.nav-tabs > li > a > i,
.nav-tabs .nav-link > i {
  display: block !important;
  font-size: 16px !important;
  margin: 0 !important;
  text-align: center !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Horizontal mode tabs (without icon stack, just inline icon+text) */
ul.nav-tabs.nav-tabs-horizontal > li > a,
ul.nav-tabs.tabs-pills > li > a {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* tab-pane content area */
.tab-content {
  padding: 0 !important;
}

/* Pill-style tabs (Bootstrap nav-pills) — used by some filter sets */
.nav-pills > li > a,
.nav-pills .nav-link {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  margin: 0 4px 0 0 !important;
  background: white !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
}
.nav-pills > li.active > a,
.nav-pills .nav-link.active {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border-color: var(--op-primary, #8db951) !important;
}

/* =====================================================================
 * BUTTONS — comprehensive button system
 * ===================================================================== */

/* Base button reset */
.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Sizes */
.btn-xs,
button.btn-xs,
a.btn-xs {
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
  gap: 5px !important;
}
.btn-sm,
button.btn-sm,
a.btn-sm {
  padding: 6px 11px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.btn-lg,
button.btn-lg,
a.btn-lg {
  padding: 11px 20px !important;
  font-size: 14px !important;
}

/* Primary variant (OCD-Grün) */
.btn-primary,
.btn-success,
button.btn-success,
a.btn-success,
button.btn-primary,
a.btn-primary {
  background: var(--op-primary, #8db951) !important;
  border-color: var(--op-primary, #8db951) !important;
  color: white !important;
}
.btn-primary:hover,
.btn-success:hover {
  background: var(--op-primary-dark, #6f9a3c) !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
}
.btn-primary:active,
.btn-success:active {
  transform: translateY(1px) !important;
}

/* Info variant (also brand green to keep one accent) */
.btn-info,
button.btn-info,
a.btn-info {
  background: var(--op-primary, #8db951) !important;
  border-color: var(--op-primary, #8db951) !important;
  color: white !important;
}
.btn-info:hover {
  background: var(--op-primary-dark, #6f9a3c) !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
}

/* Secondary / default variant */
.btn-secondary,
.btn-default {
  background: white !important;
  border-color: var(--border, #e5e7eb) !important;
  color: var(--text, #111827) !important;
}
.btn-default.btn-primary,
.btn-default.btn-success,
.btn-default.btn-info {
  /* Override: when btn-default has primary color modifier, treat as primary */
  background: var(--op-primary, #8db951) !important;
  border-color: var(--op-primary, #8db951) !important;
  color: white !important;
}
.btn-secondary:hover,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* Warning */
.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: white !important;
}
.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

/* Danger */
.btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: white !important;
}
.btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-success {
  background: transparent !important;
  border-color: var(--op-primary, #8db951) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
}

/* Disabled state */
.btn:disabled,
.btn.disabled,
button.btn[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Focus ring */
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--op-primary, #8db951) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Button groups — segmented control look (no overflow:hidden / isolation — would clip or stack-trap Bootstrap dropdowns) */
.btn-group {
  display: inline-flex !important;
  border-radius: 8px !important;
}
.btn-group > .btn {
  border-radius: 0 !important;
  margin: 0 !important;
  border-right-width: 0 !important;
  white-space: nowrap !important;
}
.btn-group > .btn:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-right-width: 1px !important;
}
.btn-group > .btn.active,
.btn-group > .btn-primary {
  z-index: 1 !important;
}

/* Icon-only square buttons (used for table-row actions) */
.btn-icon,
.btn.btn-icon,
button.btn-icon-only {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  gap: 0 !important;
}

/* =====================================================================
 * FOOTER — proper styled footer
 * ===================================================================== */

.page-footer,
#footer,
.smart-footer,
footer.page-footer {
  background: white !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  padding: 14px 28px !important;
  font-size: 12px !important;
  color: var(--text-muted, #6b7280) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}
.page-footer a,
#footer a {
  color: var(--text, #111827) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.page-footer a:hover,
#footer a:hover {
  color: var(--op-primary-dark, #6f9a3c) !important;
}
/* Version label (e.g. "OnlinePlaner24 | DEV v1.9.4") */
.page-footer .version,
#footer .version,
.page-footer span:has(+ small),
.page-footer > span:first-child {
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
}

/* "DEV" environment badge in footer/header */
.page-footer .badge-dev,
.dev-indicator,
[class*="dev-environment"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  margin: 0 4px !important;
  display: inline-block !important;
}

/* =============================================================
 * Phase 4 — User pill ALL THE WAY RIGHT + modernized
 * ============================================================= */

/* Header layout: flex row, push user pill to far right */
#header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Order header children: logo first, then everything else, user-pill LAST */
#header > #logo-group,
#header > .menu-left-pane {
  order: 1 !important;
  flex-shrink: 0 !important;
}
/* All middle utility cluster (search, refresh, fullscreen, hamburger) */
#header > .menu-right-pane,
#header > .header-search-icons,
#header > nav.menu-left-pane,
#header > ul {
  order: 2 !important;
  margin-left: auto !important;          /* push these to the right */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* Project-context (the user pill) — far right, after the icons */
#header .project-context,
#header > .project-context {
  order: 3 !important;
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 14px 5px 5px !important;
  background: var(--bg, #f9fafb) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
  min-height: 40px !important;
}
#header .project-context:hover {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
}

/* Avatar inside the user pill */
#header .project-context::before {
  content: attr(data-initials) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  flex-shrink: 0 !important;
}

/* Hide the "Benutzer" tiny caps label — name + role are enough now */
#header .project-context > div:first-child,
#header .project-context > div.col-xs-12:first-of-type {
  display: none !important;
}

/* Name + role styling inside pill */
#header .project-context > div:not(:first-child) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  text-align: left !important;
  white-space: nowrap !important;
}
#header .project-context > div:not(:first-child) > * {
  display: block !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
#header .project-context small,
#header .project-context > div small {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6b7280) !important;
  display: block !important;
  margin-top: 1px !important;
}

/* Add chevron-down indicator at end of pill */
#header .project-context::after {
  content: "▾" !important;
  font-size: 10px !important;
  color: var(--text-muted, #6b7280) !important;
  margin-left: 6px !important;
  transition: transform 0.15s ease !important;
}
#header .project-context:hover::after {
  color: var(--text, #111827) !important;
}

/* Modernize the action icon buttons — give them a subtle hover-circle */
#header > a > i.fa,
#header .header-btn,
#header a[href*="javascript:void"] {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #6b7280) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}
#header > a > i.fa:hover,
#header .header-btn:hover,
#header a[href*="javascript:void"]:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* Schnellzugriff sits between icons and user-pill */
#header #shortcut,
.dropdown-shortcut {
  margin-right: 8px !important;
}


/* =============================================================
 * Phase 5 — Replace logo image with text "Online Planer V1"
 * ============================================================= */

/* Hide the logo image */
#left-panel #logo img,
aside #logo img,
#logo-group img {
  display: none !important;
}

/* Reset previous ::after that injected "OnlinePlaner24" */
#left-panel #logo::after,
aside #logo::after {
  content: none !important;
}

/* Make #logo display the brand text directly */
#left-panel #logo,
aside #logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  width: 100% !important;
}
#left-panel #logo::before,
aside #logo::before {
  content: "Online Planer" !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
}
#left-panel #logo::after,
aside #logo::after {
  content: "V1" !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  background: rgba(141, 185, 81, 0.14) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
}

/* Tighten logo-group container around the new text logo */
#left-panel #logo-group,
aside #logo-group {
  padding: 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
}


/* =============================================================
 * Phase 6 — Fix: text logo in header + user-pill FAR RIGHT
 * The actual #logo lives in #header (not #left-panel), and the
 * SmartAdmin uses .float-end which loses meaning under flex.
 * ============================================================= */

/* Real header layout */
#header {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  padding: 0 16px 0 0 !important;
  gap: 8px !important;
}

/* Logo group leftmost — match sidebar width so it aligns */
#header > #logo-group,
header[role="banner"] > #logo-group {
  width: 220px !important;
  flex: 0 0 220px !important;
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 56px !important;
  background: white !important;
  border-right: 1px solid var(--border, #e5e7eb) !important;
  margin: 0 !important;
}
#header #logo-group > a,
#header #logo-group > a.display-inline {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  width: 100% !important;
  gap: 8px !important;
}
#header #logo-group #logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide the actual logo image */
#header #logo img,
#logo-group img,
header #logo img {
  display: none !important;
}

/* Inject "Online Planer" + "V1" pill badge as the new logo */
#header #logo::before {
  content: "Online Planer" !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
}
#header #logo::after {
  content: "V1" !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  background: rgba(141, 185, 81, 0.14) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
  margin-left: 4px !important;
}

/* Float-end (icons cluster) — push to far right with margin-left: auto */
#header > .float-end,
#header > .menu-right-pane,
#header > nav.menu-left-pane:last-of-type {
  order: 2 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

/* User-pill last (rightmost) */
#header > .project-context,
#header .project-context {
  order: 3 !important;
  margin-left: 8px !important;
}

/* Reset earlier ::after that was on left-panel #logo (no-op now) */
#left-panel #logo::after,
#left-panel #logo::before,
aside #logo::after,
aside #logo::before {
  content: none !important;
}


/* =============================================================
 * Phase 7 — User pill collapsed to just the avatar
 * Click on avatar opens the existing dropdown (Profil/Abmelden)
 * ============================================================= */

/* Shrink the project-context to just the avatar */
#header > .project-context,
#header .project-context {
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  min-height: 0 !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

#header > .project-context:hover,
#header .project-context:hover {
  background: var(--border-light, #f3f4f6) !important;
  border: none !important;
}

/* Hide everything except the avatar */
#header .project-context > *,
#header .project-context > div,
#header .project-context > div > *,
#header .project-context small {
  display: none !important;
}

/* Kill the chevron */
#header .project-context::after {
  content: none !important;
  display: none !important;
}

/* Avatar stays as the only visible element, slightly larger */
#header .project-context::before {
  content: attr(data-initials) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 2px white, 0 0 0 3px transparent !important;
  transition: box-shadow 0.15s ease !important;
}

#header .project-context:hover::before {
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--op-primary, #8db951) !important;
}


/* =============================================================
 * Phase 7b — Keep dropdown-toggle clickable for the avatar
 * ============================================================= */

/* Restore display on the dropdown-toggle (the actual click trigger),
 * but make it fill the whole pill and visually disappear */
#header .project-context > .dropdown-toggle,
#header .project-context > .project-selector,
#header .project-context > span.dropdown-toggle,
#header .project-context > span.project-selector {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  font-size: 0 !important;             /* hide any text inside */
  color: transparent !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 5 !important;
}
#header .project-context > .dropdown-toggle::before,
#header .project-context > .dropdown-toggle::after,
#header .project-context > .project-selector::before,
#header .project-context > .project-selector::after {
  display: none !important;
}

/* Make the project-context container positioning context for absolute toggle */
#header .project-context {
  position: relative !important;
}

/* Dropdown menu — modernize styling */
#header .project-context .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px !important;
  padding: 6px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
  background: white !important;
  z-index: 1050 !important;
}
#header .project-context .dropdown-menu.show,
#header .project-context.open .dropdown-menu {
  display: block !important;
}
#header .project-context .dropdown-menu > li {
  list-style: none !important;
  display: block !important;
}
#header .project-context .dropdown-menu > li > a,
#header .project-context .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  color: var(--text, #111827) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
#header .project-context .dropdown-menu li a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
#header .project-context .dropdown-menu li a > i {
  width: 16px !important;
  text-align: center !important;
  color: var(--text-muted, #6b7280) !important;
}

/* Optional dropdown header showing user name (header/info row) */
#header .project-context .dropdown-menu::before {
  content: "OCD24" attr(data-username);
  display: block !important;
  padding: 8px 12px 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  margin-bottom: 4px !important;
}


/* =============================================================
 * Phase 8 — Header element height alignment + dropdown unification
 * All header pill-buttons must be 40x40 (or 40 tall) and vertically
 * centered. Dropdowns share the same offset + style.
 * ============================================================= */

/* The float-end container is the icons+schnellzugriff cluster */
#header > .float-end,
#header .float-end {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* All three action buttons (refresh / fullscreen / hamburger) — 40x40 */
#header .btn-header,
#header .btn-header.transparent,
#header > .float-end > div.btn-header,
#header > .float-end > div.btn-header.transparent {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted, #6b7280) !important;
  flex-shrink: 0 !important;
  float: none !important;
  transition: all 0.15s ease !important;
}
#header .btn-header > a,
#header .btn-header > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  color: inherit !important;
  text-decoration: none !important;
}
#header .btn-header:hover,
#header .btn-header.transparent:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
#header .btn-header > a > i,
#header .btn-header > span > i,
#header .btn-header i {
  font-size: 14px !important;
  color: inherit !important;
}

/* Schnellzugriff bookmark dropdown UL — match 40px height pill */
#header .header-dropdown-list,
#header ul.header-dropdown-list,
#header > .float-end > ul.header-dropdown-list {
  height: 40px !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
#header .header-dropdown-list > li,
#header .header-dropdown-list > li.dropdown {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#header .header-dropdown-list > li > a,
#header .header-dropdown-list > li.dropdown > a,
#header .header-dropdown-list > li > .dropdown-toggle,
#header .header-dropdown-list a.dropdown-toggle {
  height: 40px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text, #111827) !important;
  background: var(--bg, #f9fafb) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
#header .header-dropdown-list > li > a:hover,
#header .header-dropdown-list a.dropdown-toggle:hover {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
}

/* Yellow star icon in Schnellzugriff label */
#header .header-dropdown-list i.fa-star,
#header .header-dropdown-list .fa-star {
  color: #fbbf24 !important;
  font-size: 12px !important;
}

/* Avatar — same 40 height, no extra padding/margin */
#header > .project-context,
#header .project-context {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* All header dropdowns — consistent appearance + offset */
#header .dropdown-menu,
#header .header-dropdown-list .dropdown-menu,
#header .project-context .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px !important;
  padding: 6px !important;
  margin: 0 !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
  background: white !important;
  z-index: 1050 !important;
  font-size: 13px !important;
}
#header .dropdown-menu.show,
#header .dropdown-menu.dropdown-open,
#header .open > .dropdown-menu,
#header li.open > .dropdown-menu {
  display: block !important;
}

/* Dropdown-menu items consistent */
#header .dropdown-menu li,
#header .dropdown-menu > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#header .dropdown-menu li > a,
#header .dropdown-menu > li > a,
#header .dropdown-menu a:not(.btn) {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  color: var(--text, #111827) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  white-space: nowrap !important;
}
#header .dropdown-menu li > a:hover,
#header .dropdown-menu a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
#header .dropdown-menu li > a > i,
#header .dropdown-menu a > i {
  width: 16px !important;
  text-align: center !important;
  color: var(--text-muted, #6b7280) !important;
  font-size: 13px !important;
}


/* =============================================================
 * Phase 8b — Force vertical dropdown menus in header
 * ============================================================= */

/* Override .float-end on dropdown-menu (it was making it horizontal) */
#header .dropdown-menu,
#header .dropdown-menu.float-end,
#header ul.dropdown-menu {
  display: none !important;
  flex-direction: column !important;
  flex: none !important;
  float: none !important;
  width: auto !important;
}

/* Show only when .show is applied (Bootstrap 5 dropdown state) */
#header .dropdown-menu.show,
#header li.show > .dropdown-menu,
#header li.open > .dropdown-menu,
#header .open > .dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
}

/* Each dropdown item as a block */
#header .dropdown-menu > li,
#header ul.dropdown-menu > li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Dropdown-toggle: kill margin-top-10 inherited from old layout */
#header .header-dropdown-list > li > a.dropdown-toggle,
#header a.dropdown-toggle.margin-top-10,
#header .dropdown-toggle.margin-top-10 {
  margin-top: 0 !important;
}

/* Ensure schnellzugriff dropdown opens RIGHT-aligned (anchored right) */
#header .header-dropdown-list .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}


/* =============================================================
 * Phase 8c — Restore right-alignment for header right-cluster
 * (Phase 8 nuked margin-left: auto via margin: 0 !important)
 * ============================================================= */
#header > .float-end {
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 2 !important;
}
#header > .project-context {
  margin-left: 4px !important;
  order: 3 !important;
}


/* =============================================================
 * Phase 8d — Force dropdown menu auto-height + clean items
 * ============================================================= */

/* Header dropdown menu must size to content, not inherit 40/56 */
#header .dropdown-menu,
#header ul.dropdown-menu,
#header .header-dropdown-list .dropdown-menu,
#header .project-context .dropdown-menu {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  min-width: 240px !important;
  overflow: visible !important;
  display: none !important;        /* hidden by default, shown via .show */
  flex: none !important;
}
#header .dropdown-menu.show,
#header li.show > .dropdown-menu,
#header .open > .dropdown-menu,
#header li.open > .dropdown-menu,
#header [aria-expanded="true"] + .dropdown-menu {
  display: block !important;       /* simple block stacking */
}

/* Reset any inline padding on dropdown anchor links via specificity */
#header .dropdown-menu li > a[style*="padding"],
#header .dropdown-menu a {
  padding: 9px 12px !important;
}

/* Each <li> as block, full width */
#header .dropdown-menu > li {
  display: block !important;
  width: 100% !important;
  list-style: none !important;
}

/* Each <a> inside as full-width flex */
#header .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text, #111827) !important;
  background: transparent !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#header .dropdown-menu > li > a:hover {
  background: var(--border-light, #f3f4f6) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
#header .dropdown-menu > li > a > i {
  width: 18px !important;
  text-align: center !important;
  color: var(--op-primary, #8db951) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Schnellzugriff-specific dropdown — anchor right */
#header .header-dropdown-list .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

/* Profile dropdown — anchor right */
#header .project-context .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}


/* =============================================================
 * Phase 9 — Move hamburger / fullscreen / refresh to LEFT side
 * ============================================================= */

/* Make .float-end "transparent" in flex layout so its children
 * (icons + Schnellzugriff) become direct flex items of #header */
#header > .float-end {
  display: contents !important;
}

/* Logo-group stays leftmost */
#header > #logo-group {
  order: 1 !important;
}

/* The 3 utility icons (hamburger, fullscreen, refresh) — order 2,
 * sit next to logo on the LEFT */
#header > .float-end > .btn-header,
#header > .float-end > .btn-header.transparent {
  order: 2 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  float: none !important;
}
/* Add a small gap from the logo for the first icon */
#header > .float-end > .btn-header:first-of-type {
  margin-left: 8px !important;
}

/* Schnellzugriff (header-dropdown-list) — order 3, pushed RIGHT
 * via margin-left: auto. This is the only auto-margin in the row. */
#header > .float-end > .header-dropdown-list,
#header > .float-end > ul.header-dropdown-list {
  order: 3 !important;
  margin-left: auto !important;   /* push everything from here to the right */
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* Avatar (project-context) — order 4, last, far right */
#header > .project-context {
  order: 4 !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
  float: none !important;
}


/* =============================================================
 * Phase 9b — Higher specificity override for icon-left layout
 * Use display: contents on .float-end to dissolve it and let its
 * children (icons + Schnellzugriff) participate in #header flex.
 * ============================================================= */

/* Higher specificity: header-tag + id chain + .float-end class */
header#header > div.float-end,
#header > div.float-end {
  display: contents !important;
}

/* The icons (now direct flex items via display:contents on parent) */
#header > div.float-end > .btn-header,
#header > .float-end > .btn-header,
#header > .float-end > div.btn-header {
  order: 2 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  float: none !important;
}
#header > div.float-end > .btn-header:first-of-type,
#header > .float-end > .btn-header:first-of-type {
  margin-left: 8px !important;
}

/* Schnellzugriff list — pushed to right */
#header > div.float-end > .header-dropdown-list,
#header > .float-end > .header-dropdown-list,
#header > div.float-end > ul.header-dropdown-list {
  order: 3 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* Avatar last */
header#header > div.project-context,
#header > .project-context {
  order: 4 !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* =============================================================
 * Phase 10 — TABLE + DETAIL VIEW REFINEMENT
 * Make DataTables and form pages more scannable.
 * ============================================================= */

/* ===== DataTable container ===== */
.dataTables_wrapper {
  background: white !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Top toolbar (length + search) — single inline row */
.dataTables_wrapper > .row:first-of-type,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 12px 16px !important;
  background: white !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #6b7280) !important;
}

/* ===== Table base ===== */
table.dataTable {
  border: none !important;
  margin: 0 !important;
  font-size: 13px !important;
}

/* ===== Filter row above headers — softer, narrower, clearly secondary ===== */
table.dataTable thead tr:has(input.column_filter),
table.dataTable thead tr:has(input.form-control):first-child,
table.dataTable thead tr.filter-row,
table.dataTable thead > tr:nth-child(1):has(input) {
  background: var(--bg, #f9fafb) !important;
}
table.dataTable thead tr:has(input.column_filter) th,
table.dataTable thead tr.filter-row th,
table.dataTable thead > tr:nth-child(1):has(input) th {
  padding: 6px 6px 6px 6px !important;
  border: none !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  background: var(--bg, #f9fafb) !important;
}
table.dataTable thead th input[type="text"],
table.dataTable thead th input[type="search"],
table.dataTable thead th input.form-control,
table.dataTable thead th input.column_filter {
  width: 100% !important;
  padding: 4px 8px !important;
  font-size: 11.5px !important;
  height: 26px !important;
  border-radius: 5px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  color: var(--text, #111827) !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
table.dataTable thead th input:focus {
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 2px rgba(141, 185, 81, 0.18) !important;
  outline: none !important;
}
/* Add a tiny "filter" icon hint on filter-row inputs (optional, via :placeholder-shown) */
table.dataTable thead th input::placeholder {
  color: var(--text-faint, #9ca3af) !important;
  font-style: normal !important;
  font-size: 11.5px !important;
}

/* ===== Column headers (NR / STATUS / DATUM ...) ===== */
table.dataTable thead tr:not(:has(input)) th,
table.dataTable thead tr:not(.filter-row):not(:first-child) th,
table.dataTable thead tr:nth-child(2) th {
  padding: 10px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.55px !important;
  color: var(--text-muted, #6b7280) !important;
  background: white !important;
  border: none !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: "FontAwesome" !important;
  margin-left: 5px !important;
  color: var(--text-faint, #9ca3af) !important;
  font-size: 10px !important;
}
table.dataTable thead th.sorting_asc::after {
  content: "\f0d8" !important;
  color: var(--op-primary, #8db951) !important;
}
table.dataTable thead th.sorting_desc::after {
  content: "\f0d7" !important;
  color: var(--op-primary, #8db951) !important;
}

/* ===== Body rows — clean, top-aligned, hover highlight ===== */
table.dataTable tbody tr {
  background: white !important;
  transition: background 0.1s ease !important;
}
table.dataTable tbody tr:hover {
  background: var(--bg, #f9fafb) !important;
}
table.dataTable tbody tr:hover td {
  background: transparent !important;
}
table.dataTable tbody td {
  padding: 12px 12px !important;
  font-size: 12.5px !important;
  color: var(--text, #111827) !important;
  border: none !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  vertical-align: top !important;        /* top-align so multi-line cells flow naturally */
  background: white !important;
  line-height: 1.45 !important;
}
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Multi-line content in cells: primary line + muted secondary */
table.dataTable tbody td > div:first-child:not(:only-child),
table.dataTable tbody td a:first-child:not(:only-child) {
  font-weight: 500 !important;
  color: var(--text, #111827) !important;
}
table.dataTable tbody td small,
table.dataTable tbody td .text-muted,
table.dataTable tbody td > div + div,
table.dataTable tbody td .secondary {
  font-size: 11.5px !important;
  color: var(--text-muted, #6b7280) !important;
  font-weight: 400 !important;
}

/* "Storniert", "Altschaden", etc. — semantic status pills inside rows */
table.dataTable tbody td button.btn[disabled],
table.dataTable tbody td button.btn.disabled,
table.dataTable tbody td .btn[disabled],
table.dataTable tbody td span.badge,
table.dataTable tbody td span.label {
  display: inline-block !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: var(--border-light, #f3f4f6) !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  cursor: default !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Specific status colorings — matches by content text */
table.dataTable tbody td button.btn[disabled]:has(span:contains("Storniert")),
table.dataTable tbody td button.btn[disabled].btn-default {
  /* Cannot use :contains, fallback: use specific id/class if present */
}

/* Action cell (last column with gear / edit / trash) — separate visual zone */
table.dataTable tbody td:last-child,
table.dataTable tbody td.actions {
  text-align: right !important;
  white-space: nowrap !important;
  width: 1% !important;          /* shrink to content */
}
table.dataTable tbody td .btn-group .btn,
table.dataTable tbody td > .btn-group > .btn,
table.dataTable tbody td > .btn,
table.dataTable tbody td > a.btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
/* Gear/dropdown action button — looks like a tertiary action */
table.dataTable tbody td > .dropdown > .btn.dropdown-toggle,
table.dataTable tbody td .btn-group > .btn-success.dropdown-toggle {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* Footer row (totals like "= 0 € (0 € gesamt)") */
table.dataTable tfoot {
  background: var(--bg, #f9fafb) !important;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  border-bottom: none !important;
  background: var(--bg, #f9fafb) !important;
}

/* Empty state */
table.dataTable tbody td.dataTables_empty {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--text-muted, #6b7280) !important;
  font-size: 13px !important;
  font-style: normal !important;
  background: white !important;
}

/* ===== Pagination — cleaner, more compact ===== */
.dataTables_wrapper .row.bottom,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 12px 16px !important;
}
.dataTables_paginate .pagination > li,
.dataTables_paginate .paginate_button {
  margin: 0 2px !important;
}
.dataTables_paginate .paginate_button {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
  color: var(--text, #111827) !important;
  min-width: 32px !important;
  text-align: center !important;
}
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--border-light, #f3f4f6) !important;
  border-color: var(--text-faint, #9ca3af) !important;
}

/* ===== Table card wrapping ===== */
.card > .dataTables_wrapper,
article.jarviswidget > .dataTables_wrapper {
  margin: 0 !important;
}
article.jarviswidget {
  overflow: hidden !important;
}

/* ===== Form pages (Customer Edit etc.) ===== */
/* Section header inside forms — cleaner divider */
form > section,
form > fieldset,
.smart-form > fieldset > section {
  padding: 8px 0 !important;
  margin: 0 !important;
}

/* Section title */
form section > h2,
form section > h3,
form > fieldset > legend,
form .form-section > h2,
.smart-form section > h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 24px 0 14px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
form > section:first-of-type > h2,
form > section:first-of-type > h3 {
  margin-top: 0 !important;
}

/* Form rows / 2-col layout */
form .row,
.smart-form .row,
form.smart-form .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 0 14px 0 !important;
}
form .row > [class*="col-"],
.smart-form .row > [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Form field group */
.form-group,
.smart-form .form-group,
.smart-form section,
.form-field {
  margin-bottom: 14px !important;
}

/* Label for form field */
.form-group > label,
.smart-form label.label,
form label,
.form-label {
  display: block; /* kein !important — sonst zerstört es v-show=display:none auf Vue-labels */
  margin-bottom: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Required asterisk */
label.required::after,
label[for$="_required"]::after {
  content: " *" !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Inputs already styled in earlier phases — just ensure consistent height */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.smart-form .input input,
.smart-form .select select {
  height: 38px !important;
  padding: 7px 11px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  background: white !important;
}
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  line-height: 1.5 !important;
}

/* Help text below input */
.form-text,
.help-block,
.smart-form .note {
  font-size: 11.5px !important;
  color: var(--text-muted, #6b7280) !important;
  margin-top: 4px !important;
}

/* Form footer with submit/cancel buttons — sticky at bottom of card */
form > footer,
.form-actions,
.smart-form > footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 18px !important;
  margin: 18px -18px -18px !important;       /* extend to card edges */
  background: var(--bg, #f9fafb) !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
}
form > footer > .btn,
.form-actions > .btn {
  padding: 8px 16px !important;
}

/* ===== Detail-page tabs (Customer Edit /Allgemein, Zahlungsdaten...) ===== */
/* Tabs already styled in earlier phases. Reinforce: */
.tab-content {
  padding: 18px !important;
  background: white !important;
  border-radius: 0 0 10px 10px !important;
}

/* Edit-form text/value pairs (in show pages) */
.detail-row,
dl.dl-horizontal {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 6px 14px !important;
  margin: 0 0 12px 0 !important;
}
dl.dl-horizontal > dt {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #6b7280) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
dl.dl-horizontal > dd {
  font-size: 13px !important;
  color: var(--text, #111827) !important;
  margin: 0 !important;
}
/* =============================================================
 * Phase 11 — Color depth + shadow elevation
 * Cards lifted with shadows (no border), more green accent,
 * subtle surface tints, status-aware row backgrounds.
 * ============================================================= */

/* ===== Page background — softer tint with hint of warmth ===== */
body,
body.smart-style-4,
.page-content {
  background: #f5f7f4 !important;          /* very subtle green-tinted gray */
}

/* ===== CARDS: NO BORDER, STRONGER SHADOWS ===== */
.card,
article.jarviswidget,
.well,
.smart-form,
section.card {
  background: white !important;
  border: none !important;                 /* drop the border */
  border-radius: 14px !important;
  /* Two-layer shadow for proper elevation */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px -2px rgba(15, 23, 42, 0.06),
    0 8px 24px -4px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

/* On hover, card lifts a tiny bit more */
.card:hover,
article:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 16px -2px rgba(15, 23, 42, 0.08),
    0 12px 32px -6px rgba(15, 23, 42, 0.06) !important;
}

/* Card header — softer gradient toward green */
.card > .card-header,
article > header,
article > .card-header,
.jarviswidget > header {
  background: linear-gradient(180deg, #fafcf9 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #ecf0e7 !important;          /* very subtle green-tint border */
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text, #111827) !important;
}

/* ===== Sidebar — soft elevated surface ===== */
#left-panel,
aside.notebook,
aside {
  background: white !important;
  border-right: none !important;                     /* drop the border */
  box-shadow: 1px 0 3px rgba(15, 23, 42, 0.03) !important;
}

/* Sidebar logo group — subtle green-tint band */
#header > #logo-group,
header[role="banner"] > #logo-group {
  background: linear-gradient(135deg, #f8fbf5 0%, #ffffff 50%) !important;
  border-right: 1px solid #ecf0e7 !important;
}

/* Wartungsarbeiten widget — warmer warning tint */
#left-panel .login-info,
aside .login-info {
  background: linear-gradient(135deg, #fef9eb 0%, #fffbf0 100%) !important;
  border: 1px solid #f5e6c2 !important;
  border-radius: 10px !important;
  margin: 12px !important;
  padding: 10px 12px !important;
}
#left-panel .login-info i.fa-warning,
aside .login-info i.fa-warning {
  color: #f59e0b !important;
}

/* ===== Header — subtle bottom shadow instead of border ===== */
#header,
header[role="banner"] {
  background: white !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* ===== Sidebar nav — active items have a soft green halo ===== */
#left-panel nav > ul > li.active > a,
#left-panel nav > ul > li.active.open > a,
#left-panel nav > ul > li.open > a,
aside nav > ul > li.active > a {
  background: linear-gradient(90deg, rgba(141, 185, 81, 0.18), rgba(141, 185, 81, 0.06)) !important;
  background-image: linear-gradient(90deg, rgba(141, 185, 81, 0.18), rgba(141, 185, 81, 0.06)) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  border-left: 4px solid var(--op-primary, #8db951) !important;
  font-weight: 600 !important;
}

/* Active sub-item pill — slight gradient + shadow */
#left-panel nav > ul > li > ul > li.active > a,
aside nav > ul > li > ul > li.active > a {
  background: linear-gradient(135deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  color: white !important;
  border-radius: 8px !important;
  margin: 1px 10px 1px 38px !important;
  padding: 7px 12px !important;
  font-weight: 600 !important;
  border-left: none !important;
  box-shadow: 0 2px 6px rgba(141, 185, 81, 0.35) !important;
}

/* Sidebar item hover — subtle green-tint */
#left-panel nav > ul > li > a:hover,
#left-panel nav > ul > li > ul > li > a:hover {
  background: rgba(141, 185, 81, 0.08) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* ===== Buttons — primary actions get gradient + shadow ===== */
.btn-primary,
.btn-success,
button.btn-success,
a.btn-success,
button.btn-primary,
a.btn-primary,
.btn-info,
button.btn-info,
a.btn-info {
  background: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  background-image: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  border: 1px solid var(--op-primary-dark, #6f9a3c) !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(141, 185, 81, 0.25) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: linear-gradient(180deg, var(--op-primary-dark, #6f9a3c) 0%, #5d8431 100%) !important;
  background-image: linear-gradient(180deg, var(--op-primary-dark, #6f9a3c) 0%, #5d8431 100%) !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1), 0 3px 10px rgba(141, 185, 81, 0.35) !important;
  transform: translateY(-0.5px) !important;
}
.btn-primary:active,
.btn-success:active {
  transform: translateY(0.5px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1) !important;
}

/* Secondary button: subtle background, NOT pure white */
.btn-secondary,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) {
  background: white !important;
  background-image: none !important;
  border: 1px solid #d1d5db !important;
  color: var(--text, #111827) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn-secondary:hover,
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
  background: #f8faf6 !important;
  border-color: var(--op-primary, #8db951) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(141, 185, 81, 0.1) !important;
}

/* Danger gradient */
.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  background-image: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}
.btn-danger:hover {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  background-image: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* Warning gradient */
.btn-warning {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  background-image: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #b45309 !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}

/* ===== DataTables — alternating row tint + status-aware ===== */
table.dataTable tbody tr:nth-child(even) {
  background: #fafbf9 !important;          /* very subtle off-white */
}
table.dataTable tbody tr:nth-child(odd) {
  background: white !important;
}
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover td {
  background: rgba(141, 185, 81, 0.06) !important;
}

/* Sticky header on scroll */
.dataTables_scrollHead,
table.dataTable.no-footer thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: white !important;
}

/* ===== Status badge color variants — semantic ===== */
/* Default = neutral slate */
table.dataTable tbody td button.btn[disabled],
table.dataTable tbody td .btn.disabled {
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  background-image: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
}

/* "Storniert", canceled status — subtle red */
table.dataTable tbody td button[disabled].btn-danger,
table.dataTable tbody td button[disabled][data-status="canceled"],
table.dataTable tbody td .label.bg-color-red,
table.dataTable tbody td .badge-danger {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
  background-image: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Accepted / im Lager / Veröffentlicht — green soft */
table.dataTable tbody td .label.bg-color-green,
table.dataTable tbody td .badge-success,
.bg-color-green {
  background: linear-gradient(180deg, rgba(141, 185, 81, 0.18) 0%, rgba(141, 185, 81, 0.1) 100%) !important;
  background-image: linear-gradient(180deg, rgba(141, 185, 81, 0.18) 0%, rgba(141, 185, 81, 0.1) 100%) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  border: 1px solid rgba(141, 185, 81, 0.3) !important;
}

/* Warning / Pending — amber soft */
.label.bg-color-orange,
.badge-warning,
.bg-color-orange {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  background-image: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}

/* Info / In progress — soft blue */
.label.bg-color-blue,
.label.bg-color-blueLight,
.badge-info,
.bg-color-blue {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
  background-image: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
}

/* ===== Dashboard Widgets get tinted gradient backgrounds ===== */
.jarviswidget {
  background: white !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 14px -3px rgba(15, 23, 42, 0.07) !important;
}

/* Widget-specific accent colors based on icon */
.jarviswidget > header {
  position: relative !important;
  padding-left: 18px !important;
}
.jarviswidget > header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 28px !important;
  background: var(--op-primary, #8db951) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* ===== Form inputs — slight inner shadow for depth ===== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  background: #fafbf9 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background: white !important;
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(141, 185, 81, 0.18) !important;
}

/* ===== Pagination active page gradient ===== */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  background-image: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  color: white !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
  box-shadow: 0 1px 3px rgba(141, 185, 81, 0.3) !important;
}

/* ===== Status-Filter pills (Buchhaltung > Rechnungen) — colored ===== */
.btn-toolbar > .btn-group > .btn,
form .btn-toolbar > .btn,
.status-filters .btn {
  background: white !important;
  background-image: none !important;
  color: var(--text-muted, #6b7280) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
.btn-toolbar > .btn-group > .btn.active,
.btn-toolbar > .btn-group > .btn.btn-primary {
  background: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  background-image: linear-gradient(180deg, var(--op-primary, #8db951) 0%, var(--op-primary-dark, #6f9a3c) 100%) !important;
  color: white !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
  box-shadow: 0 2px 5px rgba(141, 185, 81, 0.25) !important;
}

/* ===== Tab content area — soft separation from tabs above ===== */
.tab-content {
  background: white !important;
  padding: 22px 24px !important;
  border-radius: 0 0 14px 14px !important;
}

/* ===== Modals — stronger elevation ===== */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow:
    0 25px 50px -12px rgba(15, 23, 42, 0.25),
    0 10px 20px -5px rgba(15, 23, 42, 0.08) !important;
}

/* ===== Page-header divider — softer ===== */
.subheader,
.page-header,
.row.page-header {
  border-bottom: 1px solid #ecf0e7 !important;
}

/* ===== Footer — subtle gradient ===== */
.page-footer,
#footer {
  background: linear-gradient(180deg, #ffffff 0%, #fafbf9 100%) !important;
  border-top: 1px solid #ecf0e7 !important;
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.02) !important;
}

/* ===== Avatars / icon-circles get subtle outer ring ===== */
#header .project-context::before {
  box-shadow: 0 0 0 2px white, 0 1px 4px rgba(15, 23, 42, 0.15) !important;
}
/* =============================================================
 * Phase 11b — EMERGENCY FIX for over-aggressive global rules
 * Order detail had layout collapse because:
 * 1. display: contents on .float-end matched any .float-end (incl. inside cards)
 * 2. form .row { flex: 1 1 0%; min-width: 0 } collapsed nested cols to 0px
 * 3. overflow: hidden on article clipped content
 * ============================================================= */

/* RESTORE display:block on .float-end OUTSIDE the header */
.smart-form .float-end,
form .float-end,
.tab-content .float-end,
.tab-pane .float-end,
article .float-end,
.card .float-end,
section .float-end,
.widget-body .float-end,
.jarviswidget-body .float-end {
  display: block !important;
}

/* The header float-end keeps display: contents */
#header > div.float-end {
  display: contents !important;
}

/* RESTORE proper Bootstrap row behavior in tab/form bodies (NOT inside <form>'s own .row) */
.tab-content > .row,
.tab-pane > .row,
.tab-content .row:not(.page-header):not(.subheader),
.tab-pane .row:not(.page-header):not(.subheader),
article > .row,
.card > .row,
.smart-form > section > .row,
.smart-form section .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 -8px !important;
}
.tab-content > .row > [class*="col-"],
.tab-pane > .row > [class*="col-"],
.tab-content .row > [class*="col-"],
.tab-pane .row > [class*="col-"],
article > .row > [class*="col-"],
.card > .row > [class*="col-"],
.smart-form > section > .row > [class*="col-"],
.smart-form section .row > [class*="col-"] {
  padding: 0 8px !important;
  flex: initial !important;
  min-width: auto !important;
}

/* Top-level form rows for the simple Customer Edit pattern still get flex 1 1 0 */
form > .row,
.smart-form > .row,
.smart-form > fieldset > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 0 14px 0 !important;
}
form > .row > [class*="col-"],
.smart-form > .row > [class*="col-"],
.smart-form > fieldset > .row > [class*="col-"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* RESTORE article overflow visible — only datatable wrappers stay hidden */
article.jarviswidget,
section.card,
.card,
.smart-form,
.well {
  overflow: visible !important;
}
/* dataTables_wrapper: overflow-x für horizontales Scrolling der Tabelle, overflow-y visible für Dropdowns */
.dataTables_wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Smart-form sections need proper width / display */
.smart-form section,
.smart-form > section {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Order-detail-style sub-card grids inside tab-content */
.tab-content .smart-form .row,
.tab-pane .smart-form .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 -8px !important;
  align-items: stretch !important;
}
/* =============================================================
 * Phase 12 (safe) — Detail page polish — STYLING ONLY, no layout changes
 * Just visual improvements that don't override Bootstrap col widths.
 * ============================================================= */

/* Section headers in tab content */
.tab-content h3,
.tab-content h4,
.tab-pane h3,
.tab-pane h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text, #111827) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin: 26px 0 14px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid #ecf0e7 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.tab-content h3:first-of-type,
.tab-content h4:first-of-type {
  margin-top: 0 !important;
}

/* Phone link styling */
.tab-content a[href^="tel:"],
.tab-content a[href^="https://wa.me"] {
  color: var(--op-primary-dark, #6f9a3c) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.tab-content a[href^="tel:"]:hover {
  color: var(--op-primary, #8db951) !important;
}

/* Status icons (check-circle / times-circle) */
.tab-content i.fa-check-circle,
.tab-content i.fa-check-circle.text-success {
  color: var(--op-primary, #8db951) !important;
}
.tab-content i.fa-times-circle,
.tab-content i.fa-times-circle.text-danger {
  color: #ef4444 !important;
}

/* Phone number text colors */
.tab-content .text-success {
  color: var(--op-primary-dark, #6f9a3c) !important;
  font-weight: 600 !important;
}
.tab-content .text-danger {
  color: #b91c1c !important;
  font-weight: 600 !important;
}

/* Bemerkungen warning area (red text) — give it a proper card look */
.tab-content > div h4:has(> .fa-warning),
.tab-pane > div h4:has(> .fa-warning),
.tab-content h4 > i.fa-warning {
  color: #b91c1c !important;
}

/* Customer info "Kunden-Nr / 0014 / Name / Centralbahn GmbH" — already centered,
 * just clean up the typography */
.tab-content .text-center {
  /* keep center if existing, just refine the children */
}
.tab-content .text-center > strong,
.tab-content .text-center > b,
.tab-content .text-center a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* Empty state placeholders — give them a clear "empty" look */
.tab-content > div > .text-muted:only-child,
.tab-pane > div > .text-muted:only-child {
  text-align: center !important;
  padding: 16px !important;
  color: var(--text-faint, #9ca3af) !important;
  font-size: 12.5px !important;
  background: #fafbf9 !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
}

/* Sub-page tables (status box / preisberechnung table) — softer */
.tab-content table {
  width: 100% !important;
  font-size: 12.5px !important;
}
.tab-content table tr td {
  padding: 7px 10px !important;
  border-bottom: 1px solid #ecf0e7 !important;
}
.tab-content table tr:last-child td {
  border-bottom: none !important;
}
.tab-content table tr td:last-child:not(:only-child) {
  text-align: right !important;
  font-weight: 600 !important;
}

/* Floating scroll-to-top button (the green "+" at bottom-left of sidebar) */
.scroll-to-top,
[class*="scroll-top"],
a.btn-success.btn-sm.scroll-up,
.scroll-up {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  background-image: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c)) !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px rgba(141, 185, 81, 0.4) !important;
  border: none !important;
  z-index: 100 !important;
}

/* =============================================================
 * Phase 13 — De-nest: remove card styling from nested elements
 * Cards inside cards = double shadow = visual overlap. Strip
 * card-styling from nested .smart-form / .well / .card.
 * ============================================================= */

/* When .smart-form is nested inside another card, drop its own card style */
.card .smart-form,
article .smart-form,
.jarviswidget .smart-form,
section.card .smart-form,
.well .smart-form {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* Same for nested .well */
.card .well,
article .well,
.jarviswidget .well,
section.card .well {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Nested .card inside another .card — only outer keeps shadow */
.card .card,
article .card,
.jarviswidget .card,
.card article,
article article {
  box-shadow: none !important;
  border: 1px solid #ecf0e7 !important;
  background: white !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

/* fieldset always plain inside any card */
.card fieldset,
article fieldset,
.smart-form fieldset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* =============================================================
 * Phase 15 — Login page redesign (2-column with OCD branding)
 * ============================================================= */

/* Login page-shell takes full viewport */
body.auth-login {
  background: linear-gradient(135deg, #f8fbf5 0%, #f1f5ec 50%, #e8efe0 100%) !important;
  margin: 0 !important;
  min-height: 100vh !important;
}

.login-shell {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Phase 62 — Login-Card 2-Column-Layout neu balanciert.
   Vorher: brand-Panel auf 308px gequetscht durch Phase-30+ Body-Width-Override.
   Jetzt: explizit 50/50 grid mit min-content overrides für beide Spalten. */
.login-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 1080px !important;
  background: var(--op-surface) !important;
  border-radius: var(--op-radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--op-shadow-xl) !important;
}
.login-card > * {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  .login-card {
    grid-template-columns: 1fr !important;
  }
}

/* ===== LEFT: Brand panel ===== */
.login-brand {
  background:
    radial-gradient(circle at 100% 0%, rgba(141, 185, 81, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(111, 154, 60, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #6f9a3c 0%, #8db951 50%, #b3d077 100%);
  color: white;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}
.login-brand::after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 350px;
  height: 350px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.login-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 22px;
}

/* Logo block */
.login-brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.login-brand-mark {
  width: 56px;
  height: 56px;
  background: white;
  color: #6f9a3c;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.login-brand-name {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 700;
  color: white;
  line-height: 1.25;
}
.login-brand-name small {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* Title */
.login-brand-title {
  font-size: 32px;
  font-weight: 800;
  color: white;
  margin: 6px 0 0;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.1;
}
.login-brand-title .version-badge {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Tagline */
.login-brand-tagline {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.5;
  max-width: 90%;
}

/* Feature list */
.login-features {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13.5px;
  line-height: 1.45;
}
.login-features li > i {
  font-size: 16px;
  margin-top: 2px;
  color: white;
  opacity: 0.95;
  flex-shrink: 0;
}
.login-features li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.login-features li strong {
  font-weight: 700;
  font-size: 14px;
  color: white;
}
.login-features li span {
  font-weight: 400;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.95);
}

/* Customer-only note */
.login-customer-note {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  backdrop-filter: blur(4px);
}
.login-customer-note > i {
  font-size: 18px;
  color: white;
  margin-top: 1px;
}
.login-customer-note > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.login-customer-note strong {
  font-size: 13.5px;
  font-weight: 700;
  color: white;
}
.login-customer-note span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}
.login-customer-note em {
  font-style: normal;
  font-weight: 600;
  color: white;
}

/* Trust badges */
.login-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.login-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  border-radius: 999px;
}
.login-trust-badge > i {
  font-size: 11px;
}

/* ===== RIGHT: Form panel ===== */
.login-form-panel {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form-inner {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.login-form-head {
  margin-bottom: 22px;
}
.login-form-head h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.login-form-head p {
  font-size: 13.5px;
  color: #6b7280;
  margin: 0;
}

/* Inputs polish — override smart-form default */
.login-smart-form .input {
  display: block !important;
  position: relative !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: white !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.login-smart-form .input:focus-within {
  border-color: #8db951 !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.18) !important;
}
.login-smart-form .input.state-error {
  border-color: #ef4444 !important;
}
.login-smart-form .input > i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9ca3af !important;
  font-size: 14px !important;
}
.login-smart-form .input > input {
  width: 100% !important;
  padding: 11px 14px 11px 38px !important;
  border: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  outline: none !important;
  border-radius: 10px !important;
  height: auto !important;
  box-shadow: none !important;
}
.login-smart-form .input > input::placeholder {
  color: #9ca3af !important;
}
.login-smart-form section {
  margin-bottom: 16px !important;
}
.login-smart-form section > label.label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Forgot password link */
.login-forgot {
  text-align: right;
  margin-top: 6px;
  font-size: 12.5px;
}
.login-forgot a {
  color: #6f9a3c !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.login-forgot a:hover {
  color: #8db951 !important;
  text-decoration: underline !important;
}

/* Remember me row */
.login-remember-row {
  display: flex !important;
  align-items: center !important;
  margin-top: 4px !important;
}
.login-remember-row .checkbox {
  font-size: 13px !important;
  color: #4b5563 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* Submit button */
.login-form-actions {
  margin-top: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.login-submit {
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #8db951 0%, #6f9a3c 100%) !important;
  background-image: linear-gradient(180deg, #8db951 0%, #6f9a3c 100%) !important;
  border: 1px solid #6f9a3c !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(141, 185, 81, 0.3) !important;
  transition: all 0.15s ease !important;
}
.login-submit:hover {
  background: linear-gradient(180deg, #6f9a3c 0%, #5d8431 100%) !important;
  box-shadow: 0 4px 12px rgba(141, 185, 81, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Legal info section */
.login-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.login-legal p {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 0 0 10px;
  line-height: 1.5;
}
.login-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.login-legal-links a {
  color: #6b7280 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.login-legal-links a:hover {
  color: #6f9a3c !important;
  text-decoration: underline !important;
}
.login-legal-links .dot {
  color: #d1d5db;
}

/* Page footer outside the card */
.login-page-footer {
  margin-top: 24px;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-page-footer a {
  color: #6f9a3c !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.login-page-footer a:hover {
  text-decoration: underline !important;
}
.login-page-footer .dot {
  color: #d1d5db;
}

/* Hide the original SmartAdmin login wrapper if remnants remain */
body.auth-login #header,
body.auth-login #left-panel,
body.auth-login #footer,
body.auth-login .page-footer {
  display: none !important;
}

/* =============================================================
 * Phase 15b - higher-specificity Login Brand panel
 * ============================================================= */
html body .login-shell .login-card .login-brand,
html body .login-card aside.login-brand,
.login-shell aside.login-brand {
  background: linear-gradient(135deg, #6f9a3c 0%, #8db951 50%, #b3d077 100%) !important;
  background-image: linear-gradient(135deg, #6f9a3c 0%, #8db951 50%, #b3d077 100%) !important;
  color: white !important;
  padding: 48px 44px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 600px !important;
}

html body .login-brand *,
html body .login-brand h1,
html body .login-brand p,
html body .login-brand span,
html body .login-brand strong,
html body .login-brand small,
html body .login-brand em,
html body .login-brand i {
  color: white !important;
}
html body .login-brand small,
html body .login-brand .login-features li span {
  color: rgba(255, 255, 255, 0.78) !important;
}
html body .login-brand .login-customer-note span {
  color: rgba(255, 255, 255, 0.85) !important;
}
html body .login-brand .login-brand-mark {
  background: white !important;
  color: #6f9a3c !important;
}


/* Login V2 teaser card */
.login-v2-teaser {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
.login-v2-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #6f9a3c !important;
  background: white !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
.login-v2-pill i {
  color: #6f9a3c !important;
  font-size: 10px !important;
}
.login-v2-teaser strong {
  color: white !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.login-v2-teaser span {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

/* Fix login-brand-mark to display image */
.login-brand-mark {
  width: 56px !important;
  height: 56px !important;
  background: white !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  padding: 8px !important;
  overflow: hidden !important;
}
.login-brand-mark img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

/* =============================================================
 * Legal pages (Nutzungsbedingungen, etc.)
 * ============================================================= */
body.auth-legal {
  background: linear-gradient(135deg, #f8fbf5 0%, #f1f5ec 50%, #e8efe0 100%) !important;
  margin: 0 !important;
  min-height: 100vh !important;
}
.legal-shell {
  min-height: 100vh !important;
  padding: 32px 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.legal-card {
  width: 100% !important;
  max-width: 820px !important;
  background: white !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.08) !important;
}
.legal-head {
  background: linear-gradient(135deg, #6f9a3c 0%, #8db951 50%, #b3d077 100%) !important;
  padding: 32px 40px !important;
  color: white !important;
  position: relative !important;
}
.legal-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-bottom: 18px !important;
}
.legal-back:hover {
  color: white !important;
}
.legal-eyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 6px !important;
}
.legal-head h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: white !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.5px !important;
}
.legal-subtitle {
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 !important;
}
.legal-body {
  padding: 32px 40px !important;
}
.legal-body section {
  margin-bottom: 26px !important;
}
.legal-body section:last-child {
  margin-bottom: 0 !important;
}
.legal-body h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.2px !important;
}
.legal-body p,
.legal-body li {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #374151 !important;
}
.legal-body ul {
  padding-left: 20px !important;
  margin: 6px 0 !important;
}
.legal-body ul li {
  margin-bottom: 4px !important;
}
.legal-body a {
  color: #6f9a3c !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.legal-body a:hover {
  color: #8db951 !important;
  text-decoration: underline !important;
}
.legal-body strong {
  color: #111827 !important;
}
.legal-contact {
  background: #f8fbf5 !important;
  border: 1px solid #ecf0e7 !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
}
.legal-contact h2 {
  margin-top: 0 !important;
}
.legal-foot {
  padding: 20px 40px !important;
  background: #fafbf9 !important;
  border-top: 1px solid #ecf0e7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.legal-foot-links {
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.legal-foot-links a {
  color: #6b7280 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.legal-foot-links .dot {
  color: #d1d5db !important;
}

/* =============================================================
 * Phase 17 - Login + Legal page polish
 * Wider, cleaner backgrounds, hide top auth-layout strip
 * ============================================================= */

/* HIDE the auth-layout top header (#header) on login + legal pages.
 * Use both `body:has` AND a body-class fallback for browser support. */
body.auth-login #header,
body.auth-login > #header,
body.auth-legal #header,
body.auth-legal > #header {
  display: none !important;
}

/* Wider card on both login and legal pages */
html body .login-shell .login-card {
  max-width: 1240px !important;
  grid-template-columns: 1.05fr 1fr !important;
}
@media (max-width: 1100px) {
  html body .login-shell .login-card {
    grid-template-columns: 1fr !important;
  }
}

/* Wider legal page card */
html body .legal-shell .legal-card {
  max-width: 960px !important;
}

/* REMOVE decorative circle blobs (the "weird backgrounds" the user noticed) */
html body .login-brand::before,
html body .login-brand::after {
  display: none !important;
  content: none !important;
}

/* Cleaner solid green panel without busy circles, but with subtle pattern */
html body .login-brand {
  background: linear-gradient(135deg, #6f9a3c 0%, #8db951 60%, #a3c761 100%) !important;
  background-image: linear-gradient(135deg, #6f9a3c 0%, #8db951 60%, #a3c761 100%) !important;
}

/* Body background a tad cleaner — single subtle wash */
html body.auth-login,
html body.auth-legal {
  background: #f5f7f4 !important;
  background-image: none !important;
}

/* Logo-mark sized properly for icon-only logo */
html body .login-brand-mark {
  width: 64px !important;
  height: 64px !important;
  background: white !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
html body .login-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Brand name beside logo: ONE line "Online Cargo" instead of two */
html body .login-brand-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: white !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}
html body .login-brand-name small {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.78) !important;
  margin-top: 2px !important;
}

/* Brand panel padding (form-panel + form-inner moved to Phase 22 consolidated block) */
html body .login-brand {
  padding: 56px 50px !important;
}


/* =============================================================
 * Phase 18 - Login fits in viewport without scrolling
 * ============================================================= */

html body.auth-login {
  height: 100vh !important;
  overflow: hidden !important;
}
html body .login-shell {
  height: 100vh !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Card sized to fit viewport */
html body .login-shell .login-card {
  max-width: 1240px !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  margin: 0 !important;
}

/* Compact left brand panel */
html body .login-brand {
  padding: 26px 30px !important;
  overflow-y: auto !important;
}
html body .login-brand-inner {
  gap: 14px !important;
}

/* Smaller logo + title */
html body .login-brand-mark {
  width: 50px !important;
  height: 50px !important;
  padding: 6px !important;
}
html body .login-brand-name {
  font-size: 16px !important;
}
html body .login-brand-name small {
  font-size: 11px !important;
}
html body .login-brand-title {
  font-size: 26px !important;
  margin: 0 !important;
}
html body .login-brand-tagline {
  font-size: 13.5px !important;
  margin: 0 !important;
}

/* Compact features */
html body .login-features {
  gap: 8px !important;
  margin: 0 !important;
}
html body .login-features li {
  font-size: 12.5px !important;
  gap: 10px !important;
}
html body .login-features li > i {
  font-size: 14px !important;
  margin-top: 1px !important;
}
html body .login-features li strong {
  font-size: 13px !important;
}
html body .login-features li span {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* Compact customer note */
html body .login-customer-note {
  padding: 10px 13px !important;
  margin: 0 !important;
}
html body .login-customer-note strong {
  font-size: 12.5px !important;
}
html body .login-customer-note span {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* Compact V2 teaser */
html body .login-v2-teaser {
  padding: 10px 13px !important;
  margin: 0 !important;
}
html body .login-v2-teaser strong {
  font-size: 13px !important;
}
html body .login-v2-teaser span {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* Compact trust badges */
html body .login-trust-badges {
  gap: 6px !important;
  padding-top: 4px !important;
}
html body .login-trust-badge {
  font-size: 10.5px !important;
  padding: 4px 9px !important;
}

/* (form-panel padding/overflow-y moved to Phase 22 consolidated block) */
html body .login-form-head {
  margin-bottom: 16px !important;
}
html body .login-form-head h2 {
  font-size: 22px !important;
  margin: 0 0 4px !important;
}
html body .login-form-head p {
  font-size: 12.5px !important;
}

/* Smaller form sections */
html body .login-smart-form section {
  margin-bottom: 12px !important;
}
html body .login-smart-form .input > input {
  padding: 9px 14px 9px 36px !important;
}
html body .login-smart-form section > label.label {
  font-size: 12px !important;
  margin-bottom: 4px !important;
}
html body .login-form-actions {
  margin-top: 16px !important;
}
html body .login-submit {
  padding: 11px 20px !important;
  font-size: 13.5px !important;
}

/* Legal section compact */
html body .login-legal {
  margin-top: 20px !important;
  padding-top: 14px !important;
}
html body .login-legal p {
  font-size: 11px !important;
  margin-bottom: 8px !important;
}

/* Page footer compact */
html body .login-page-footer {
  margin-top: 0 !important;
  font-size: 11.5px !important;
}


/* Phase 18b - Coming Soon pill must remain green-on-white, not white-on-white */
html body .login-brand .login-v2-pill,
html body .login-brand .login-v2-pill * {
  color: #6f9a3c !important;
  background: white !important;
}
html body .login-brand .login-v2-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
html body .login-brand .login-v2-pill i {
  color: #6f9a3c !important;
  font-size: 10px !important;
}

/* =============================================================
 * Phase 19 - Clean login input fields, kill Chrome autofill blue
 * Input was rgb(232,240,254) Chrome-autofill blue inside white
 * label-wrapper -> double-box look. Force input transparent.
 * ============================================================= */

/* Login input fields - one clean pill, no nested boxes */
html body .login-smart-form .input {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  position: relative !important;
  height: 42px !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
html body .login-smart-form .input > i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9ca3af !important;
  font-size: 14px !important;
  z-index: 2 !important;
}
html body .login-smart-form .input > input {
  width: 100% !important;
  height: 100% !important;
  padding: 0 14px 0 38px !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  margin: 0 !important;
  line-height: 42px !important;
}

/* KILL Chrome auto-fill background-color override */
html body .login-smart-form input:-webkit-autofill,
html body .login-smart-form input:-webkit-autofill:hover,
html body .login-smart-form input:-webkit-autofill:focus,
html body .login-smart-form input:-webkit-autofill:active {
  -webkit-text-fill-color: #111827 !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  caret-color: #111827 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Focus state on the wrapper */
html body .login-smart-form .input:focus-within {
  border-color: #8db951 !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.18) !important;
}

/* Hide the smart-form tooltip <b> that takes layout space */
html body .login-smart-form .input > b.tooltip {
  display: none !important;
}

/* Remove any inherited smart-form section padding that adds space */
html body .login-smart-form section {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 14px !important;
}


/* Phase 19b - login form footer must be transparent (no gray strip) */
html body .login-smart-form > footer,
html body .login-form-actions,
html body .login-form-panel form > footer,
html body .login-form-panel footer.smart-form,
html body .login-form-panel footer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
}

/* Same for the remember-me row -> ensure no inherited bg */
html body .login-remember-row,
html body .login-smart-form .login-remember-row {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 6px !important;
}


/* =============================================================
 * Phase 19c - Kill SmartAdmin smart-form bg colors on login
 * SmartAdmin .smart-form fieldset has blue bg, .smart-form footer
 * has different bg. Make EVERYTHING transparent on login.
 * ============================================================= */

html body .login-smart-form,
html body .login-smart-form *,
html body .login-smart-form fieldset,
html body .login-smart-form section,
html body .login-smart-form footer,
html body form.login-smart-form > fieldset,
html body form.login-smart-form > footer,
html body form.login-smart-form .input {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Restore: only the input-wrapper pill is white */
html body .login-smart-form .input {
  background: white !important;
  background-color: white !important;
  border: 1px solid #d1d5db !important;
}

/* Reset fieldset and footer wrapper styling */
html body form.login-smart-form > fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body form.login-smart-form > footer.login-form-actions,
html body form.login-smart-form > footer {
  border: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  background: transparent !important;
}

/* Each section wrapper has no border/padding */
html body .login-smart-form section {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
}


/* Phase 19d - more breathing room in login form */
html body .login-form-head {
  margin-bottom: 22px !important;
}

/* Larger gap between form sections (email -> passwort -> remember) */
html body .login-smart-form section {
  margin-bottom: 18px !important;
}
html body .login-smart-form section.login-remember-row {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding: 4px 0 !important;
}

/* Bigger gap between checkbox row and the Anmelden button */
html body form.login-smart-form > footer.login-form-actions,
html body form.login-smart-form > footer {
  margin: 26px 0 0 !important;
}

/* (form-panel/form-inner padding moved to Phase 22 consolidated block) */

/* Slightly taller inputs for nicer touch target + breathing */
html body .login-smart-form .input {
  height: 46px !important;
}
html body .login-smart-form .input > input {
  line-height: 46px !important;
}

/* Tighter forgot link to its passwort field */
html body .login-forgot {
  margin-top: 8px !important;
}

/* Legal section gets a proper gap above */
html body .login-legal {
  margin-top: 26px !important;
  padding-top: 18px !important;
}


/* Phase 19e - RESTORE Anmelden button gradient */
html body .login-smart-form .login-submit,
html body form.login-smart-form button.login-submit,
html body form.login-smart-form .btn.login-submit {
  background: linear-gradient(180deg, #8db951 0%, #6f9a3c 100%) !important;
  background-image: linear-gradient(180deg, #8db951 0%, #6f9a3c 100%) !important;
  background-color: #8db951 !important;
  border: 1px solid #6f9a3c !important;
  color: white !important;
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(141, 185, 81, 0.3) !important;
  cursor: pointer !important;
}
html body .login-smart-form .login-submit:hover {
  background: linear-gradient(180deg, #6f9a3c 0%, #5d8431 100%) !important;
  background-image: linear-gradient(180deg, #6f9a3c 0%, #5d8431 100%) !important;
  background-color: #6f9a3c !important;
  box-shadow: 0 4px 12px rgba(141, 185, 81, 0.4) !important;
  transform: translateY(-1px) !important;
}
html body .login-smart-form .login-submit i,
html body .login-smart-form .login-submit * {
  color: white !important;
  background: transparent !important;
}


/* Phase 20b - wider left brand column */
/* Phase 62b — Designer-Empfehlung: balanced 1.05fr/1fr statt 1.35fr/1fr.
   Vorher: brand-Panel zu dominant, form-Panel gequetscht. */
html body .login-shell .login-card {
  grid-template-columns: 1.05fr 1fr !important;
}
@media (max-width: 1100px) {
  html body .login-shell .login-card {
    grid-template-columns: 1fr !important;
  }
}
/* Phase 62b Bugfix — SmartAdmin's `aside { width: 220px }` (sidebar default)
   trifft fälschlich `aside.login-brand`. Brand-Panel zwingen, Grid-Cell zu füllen. */
html body .login-shell .login-card > aside.login-brand,
html body .login-shell .login-card > section.login-form-panel {
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

/* Phase 20c entirely superseded by Phase 22 — removed */

/* Phase 20d — only flex-centering retained; padding/max-width consolidated into Phase 22 */
html body .login-form-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}

/* =============================================================
 * Phase 22 - Final login spacing rhythm
 * Root-cause fix: SmartAdmin label.label has padding 3px 9px with
 * content-box sizing -> overflows parent by 18px on each side. Plus
 * vertical rhythm was uneven (4px label->input, 36px effective btn gap).
 * ============================================================= */

/* 1. FIX: label.label must not overflow parent */
html body .login-smart-form section > label.label {
  padding: 0 !important;
  width: auto !important;
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 0 8px 0 !important;
  box-sizing: border-box !important;
}

/* 2. Unify vertical rhythm between sections */
html body .login-smart-form section {
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
}
html body .login-smart-form section.login-remember-row {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}
html body .login-smart-form .login-forgot {
  margin-top: 10px !important;
}

/* 3. Single margin source for submit button */
html body .login-smart-form .login-submit,
html body form.login-smart-form button.login-submit,
html body form.login-smart-form .btn.login-submit {
  margin: 0 !important;
}
html body form.login-smart-form > footer.login-form-actions,
html body form.login-smart-form > footer {
  margin: 28px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 4. Wider form-inner + balanced panel padding */
html body .login-form-inner {
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
html body .login-form-panel {
  padding: 56px 64px !important;
  overflow-y: auto !important;
}
@media (max-width: 1100px) {
  html body .login-form-panel {
    padding: 38px 28px !important;
  }
  html body .login-form-inner {
    max-width: 100% !important;
  }
}

/* 5. Legal block clearly separated */
html body .login-legal {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e5e7eb !important;
}

/* =============================================================
 * Phase 28 — Dashboard "Was ist neu?"-Update-Karte
 * ============================================================= */
.op-update-card {
  background: linear-gradient(135deg, #ffffff 0%, #f7faf2 100%);
  border: 1px solid #d6e4c2;
  border-left: 4px solid var(--op-primary, #8db951);
  border-radius: 12px;
  padding: 22px 26px 18px;
  margin: 0 0 18px;
  position: relative;
  box-shadow: 0 2px 10px rgba(141, 185, 81, 0.06);
}
.op-update-card__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(141, 185, 81, 0.1);
  color: #6f9a3c;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.op-update-card__close:hover {
  background: rgba(141, 185, 81, 0.22);
  color: #4d6e2a;
}
.op-update-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding-right: 36px;
}
.op-update-card__badge {
  background: var(--op-primary, #8db951);
  color: white !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  display: inline-block;
}
.op-update-card__title {
  margin: 0;
  font-size: 17px !important;
  font-weight: 700;
  color: #111827;
  flex: 0 1 auto;
}
.op-update-card__date {
  font-size: 11.5px;
  color: #6b7280;
  margin-left: auto;
  font-weight: 500;
}
.op-update-card__intro {
  font-size: 13px;
  color: #4b5563;
  margin: 0 0 16px;
  line-height: 1.55;
}
.op-update-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 16px;
}
.op-update-section h4 {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.op-update-section h4 i {
  color: var(--op-primary, #8db951);
  font-size: 13px;
}
.op-update-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.op-update-section li {
  font-size: 12.5px;
  color: #374151;
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.5;
}
.op-update-section li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--op-primary, #8db951);
  font-weight: 700;
}
.op-update-section li strong {
  color: #111827;
  font-weight: 600;
}
.op-update-card__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.op-update-card__foot .btn {
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
}
.op-update-card__small {
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}
@media (max-width: 768px) {
  .op-update-card { padding: 16px 18px 14px; }
  .op-update-card__date { margin-left: 0; flex-basis: 100%; }
  .op-update-card__grid { grid-template-columns: 1fr; gap: 14px; }
  .op-update-card__foot { flex-direction: column; align-items: stretch; }
  .op-update-card__foot .btn { justify-content: center; }
}

/* =============================================================
 * Phase 27 — Aufträge: saubere Filter-Toolbar (Zeitraum-Vorlage,
 *           von, bis, Filter-anwenden + Zurücksetzen in einer Zeile)
 * ============================================================= */
.orders-filter-form {
  margin: 0;
}
.orders-filter-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 4px 0;
}
.orders-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
}
.orders-filter-field--zeitraum {
  flex: 0 1 200px;
}
.orders-filter-field--actions {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding-bottom: 0;
}
.orders-filter-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  padding: 0 !important;
}
.orders-filter-field .btn-group,
.orders-filter-field .form-control,
.orders-filter-dropdown-btn {
  width: 100% !important;
}
.orders-filter-field .form-control {
  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
}
.orders-filter-dropdown-btn {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: white !important;
  color: #374151 !important;
  text-align: left !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.orders-filter-dropdown-btn:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}
.orders-filter-apply {
  height: 38px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.orders-filter-reset {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.orders-filter-reset:hover {
  color: #dc2626 !important;
  background: #fef2f2 !important;
}

/* =============================================================
 * Phase 26 — Aufträge / Listings: kompakte Filter-Toolbar +
 *           per-column Filter dezenter, Tabellen-Footer enger
 * ============================================================= */

/* Per-column Filter-Inputs (Zeile direkt über dem Header) — leiser */
table.dataTable thead tr.filter-row,
table.dataTable thead tr:has(input.column_filter),
table.dataTable thead tr:first-child:has(input.form-control) {
  background: #fafbfc !important;
}
table.dataTable thead tr.filter-row th,
table.dataTable thead tr:has(input.column_filter) th,
table.dataTable thead tr:first-child:has(input.form-control) th {
  padding: 6px 8px !important;
}
table.dataTable thead th input[type="text"],
table.dataTable thead th input[type="search"],
table.dataTable thead th input.form-control {
  height: 26px !important;
  padding: 3px 8px !important;
  font-size: 11.5px !important;
  background: white !important;
  border: 1px solid #e5e7eb !important;
}
table.dataTable thead th input::placeholder {
  color: #9ca3af !important;
  font-size: 11px !important;
}

/* Top-Toolbar (Search + Length) auf eine Zeile, weniger Vertical-Padding */
.dataTables_wrapper > .row:first-of-type {
  padding: 8px 14px !important;
  align-items: center !important;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  padding: 4px 8px !important;
  margin: 0 !important;
}

/* Footer (Info + Pagination) enger an die letzte Tabellenzeile */
.dataTables_wrapper .row.bottom {
  margin-top: 0 !important;
  padding: 4px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 8px 14px !important;
}

/* =============================================================
 * Phase 24 — Auth helper classes (replaces inline-style hacks
 *           in email.blade.php / reset.blade.php)
 * ============================================================= */
.auth-login .login-form-status {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(141, 185, 81, 0.12);
  border: 1px solid rgba(141, 185, 81, 0.3);
  color: #6f9a3c;
  font-size: 13px;
}
.auth-login em.invalid {
  color: #dc2626;
  font-size: 12px;
}
.auth-login .login-form-help {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 8px;
  line-height: 1.5;
}
.auth-login .login-back-link {
  text-align: center;
  margin: 0 0 12px;
}
.auth-login .login-back-link a {
  color: #6f9a3c;
  font-weight: 500;
  text-decoration: none;
}
.auth-login .login-back-link a:hover {
  text-decoration: underline;
}

/* =============================================================
 * Phase 29 — Mobile-Login: Brand-Panel auf kleinen Screens dezent,
 *           Form bekommt vollen Platz, kein 100vh-Card-Lock
 * Vorher: Brand-Panel füllte den ganzen Mobile-Viewport, Form lag
 *         unter dem Fold und User konnten sich nicht einloggen.
 * ============================================================= */
@media (max-width: 768px) {
  /* Shell darf wachsen, kein 100vh-Lock auf Mobile */
  html body.auth-login,
  html body.auth-legal {
    height: auto !important;
    overflow: auto !important;
  }
  html body .login-shell,
  body .login-shell {
    height: auto !important;
    min-height: 100vh !important;
    padding: 12px !important;
    align-items: flex-start !important;
  }

  /* Card volle Breite, eine Spalte, dynamische Höhe */
  html body .login-shell .login-card,
  .login-shell .login-card {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Brand-Panel kompakter Header — nur Logo + Marke + 1-Liner */
  /* High-specificity Override gegen Phase 15b html body .login-shell .login-card .login-brand */
  html body .login-shell .login-card .login-brand,
  html body .login-card aside.login-brand,
  .login-shell aside.login-brand,
  .login-brand {
    padding: 24px 22px !important;
    min-height: 0 !important;
    text-align: center;
  }
  .login-brand-inner {
    gap: 8px !important;
  }
  .login-brand-logo {
    justify-content: center !important;
  }
  .login-brand-title {
    font-size: 22px !important;
    margin: 4px 0 6px !important;
    justify-content: center;
  }
  .login-brand-tagline {
    font-size: 13px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Sekundäre Marketing-Inhalte auf Mobile ausblenden — sonst kein Platz für Login */
  .login-brand .login-features,
  .login-brand .login-customer-note,
  .login-brand .login-trust-badges,
  .login-brand .login-coming-soon,
  .login-brand .login-v2-teaser {
    display: none !important;
  }

  /* Form-Panel: prominent, mit komfortablem Padding */
  html body .login-form-panel,
  .login-form-panel {
    padding: 28px 22px !important;
    overflow: visible !important;
    display: block !important;
  }
  html body .login-form-inner,
  .login-form-inner {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Inputs für Touch grösser, sodass Daumen nicht daneben tippen */
  .login-smart-form .input,
  .login-smart-form .input > input {
    height: 48px !important;
    font-size: 16px !important; /* 16px verhindert iOS Auto-Zoom */
  }
  .login-smart-form .login-submit {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* Page-Footer: kompakter, unter Card */
  .login-page-footer {
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 14px !important;
    font-size: 11.5px !important;
  }
  .login-page-footer .dot {
    display: none !important;
  }

  /* Legal-Pages (Datenschutz/Impressum/Nutzungsbedingungen) auf Mobile */
  .legal-shell {
    padding: 12px !important;
  }
  .legal-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .legal-head {
    padding: 22px 20px !important;
  }
  .legal-head h1 {
    font-size: 22px !important;
  }
  .legal-body {
    padding: 22px 20px !important;
  }
}

/* =============================================================
 * Phase 61 — Print-Stylesheet
 *
 * Optimiert für Browser-Print: Sidebar/Topbar/Footer/FAB/Search weg.
 * Inhalt füllt A4, schwarzer Text auf weißem Hintergrund.
 * Avoid Page-Breaks innerhalb wichtiger Blocks.
 * ============================================================= */
@media print {
  /* Hide non-content chrome */
  #header,
  #left-panel,
  aside,
  .page-footer,
  .op-fab,
  #op-search-wrap,
  .header-dropdown-list,
  .subheader-actions-top,
  .btn-primary,
  .btn-secondary,
  .btn-info,
  .btn-warning,
  .btn-danger,
  .jarviswidget-ctrls,
  .widget-toolbar,
  .dataTables_filter,
  .dataTables_length,
  .dataTables_paginate,
  .dt-toolbar,
  .nav-tabs,
  .op-greeting,
  .op-info-banner,
  .op-update-card,
  .op-validation-alert,
  #ribbon,
  .modal,
  .dropdown,
  [data-action] {
    display: none !important;
  }

  /* Reset body chrome */
  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
  }
  body.fixed-header.fixed-navigation {
    padding: 0 !important;
  }

  /* Content nimmt vollen Platz, kein left-margin für Sidebar */
  #main, #content {
    margin-left: 0 !important;
    padding: 12pt !important;
    width: 100% !important;
  }

  /* Cards ohne Schatten/Border-Effekt */
  .jarviswidget,
  .card,
  .widget-body {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .jarviswidget header h2 {
    color: #000 !important;
    font-weight: 700 !important;
  }

  /* Tables sauber drucken */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  table.dataTable th,
  table.dataTable td,
  table.table th,
  table.table td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
    color: #000 !important;
    background: #fff !important;
  }
  table.dataTable thead th {
    background: #f0f0f0 !important;
    font-weight: 700 !important;
  }
  /* Card-View aufheben — auf Druck wieder echte Tabelle */
  table.table-datatable, table.dataTable {
    display: table !important;
  }
  table.table-datatable thead, table.dataTable thead {
    display: table-header-group !important;
  }
  table.table-datatable tbody, table.dataTable tbody {
    display: table-row-group !important;
  }
  table.table-datatable tbody tr, table.dataTable tbody tr {
    display: table-row !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  table.table-datatable tbody td, table.dataTable tbody td {
    display: table-cell !important;
    text-align: left !important;
  }
  table.table-datatable tbody td::before, table.dataTable tbody td::before {
    display: none !important;
  }

  /* URLs nach jedem Link (klassisches Print-Pattern) */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Print-Header mit Firma-Branding */
  body::before {
    content: "OCD Online Cargo GmbH · OnlinePlaner24";
    display: block;
    font-size: 9pt;
    color: #666;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4pt;
    margin-bottom: 12pt;
  }
}

/* Sehr schmale Geräte (iPhone SE 375 etc.) */
@media (max-width: 400px) {
  .login-brand {
    padding: 18px 16px !important;
  }
  .login-brand-title {
    font-size: 20px !important;
  }
  html body .login-form-panel,
  .login-form-panel {
    padding: 22px 16px !important;
  }
}

/* =============================================================
 * Phase 30 — Mobile-UX für eingeloggte Bereiche
 *
 * Vorher: Profil-Dropdown (.project-context) lag bei x=471 px
 *         (Viewport 390 px) — User konnten sich auf dem Handy
 *         weder ausloggen noch das Profil öffnen.
 *         Widget-Header zerquetschte den Titel auf ~15 px.
 *         Cards hatten 67 px Ränder links/rechts statt Full-Width.
 *
 * Nachher: Topbar mobil = Logo | Hamburger | Schnellzugriff |
 *          Profil-Avatar (Initialen-Kreis, klickbar → Dropdown).
 *          Widget-Header zweizeilig: Titel oben, Toolbar unten.
 *          Cards 100 % breit, kompaktes Padding.
 * ============================================================= */
@media (max-width: 768px) {
  /* --- Topbar: Layout neu ordnen --- */
  body #header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 8px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  body #header #logo-group {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Profil-Avatar rechts (statt off-screen bei x=471) */
  body #header .project-context {
    order: 2 !important;
    flex: 0 0 40px !important;
    margin-left: auto !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    align-self: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  /* Initialen-Kreis aus data-initials (Fallback wenn kein Profilbild) */
  body #header .project-context::before {
    content: attr(data-initials);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    pointer-events: none !important;
  }
  /* Wenn echtes Profilbild gerendert ist (project-context-avatar) →
     Initialen-::before ausblenden, Bild zeigt sich */
  body #header .project-context:has(.project-context-avatar)::before {
    display: none !important;
  }
  /* Avatar-Bild auf Mobile: voller Kreis im project-context-Slot */
  body #header .project-context .project-context-avatar {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    background: #fff !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  /* "Benutzer"-Label ausblenden, .project-selector als unsichtbarer Klick-Trigger */
  body #header .project-context .label {
    display: none !important;
  }
  body #header .project-context .project-selector {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 40px !important;
    height: 40px !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
  }
  body #header .project-context .project-selector i,
  body #header .project-context .project-selector .d-none {
    display: none !important;
  }
  /* Dropdown rechts ausgerichtet, nicht zentriert */
  body #header .project-context .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
    min-width: 200px !important;
  }

  /* float-end auflösen, einzelne Buttons platzieren */
  body #header > .float-end {
    display: contents !important;
  }
  body #header #hide-menu {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  /* Vollbild-Button auf Touch-Geräten sinnlos → ausblenden */
  body #header #fullscreen {
    display: none !important;
  }
  /* Cache-Refresh-Button verbraucht Platz, im Sidebar-Menü erreichbar */
  body #header > .float-end > .btn-header.transparent.float-end:not(#fullscreen):not(#hide-menu) {
    display: none !important;
  }
  /* Visitenkarte-Icon auf Mobile aus — ist im Schnellzugriff-Menü */
  body #header > .float-end > .btn-header.float-end:has(a[href*="vcard"]) {
    display: none !important;
  }
  /* Schnellzugriff (Stern) bleibt sichtbar — wertvoll auf Mobile */

  /* --- Content: weniger Padding, Cards Full-Width --- */
  body #main {
    padding: 12px 8px !important;
  }
  body #content {
    padding: 8px !important;
    margin: 0 !important;
  }
  body #main .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  body #main .row > [class*="col-"],
  body #main .row > .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* --- Widget-Header (jarviswidget): Titel Zeile 1, Toolbar Zeile 2 --- */
  .jarviswidget > header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .jarviswidget > header .jarviswidget-ctrls {
    order: 4 !important;
    position: static !important;
    margin: 0 0 0 auto !important;
  }
  .jarviswidget > header .widget-icon {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    margin: 0 !important;
  }
  .jarviswidget > header h2 {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #2c3e50 !important;
  }
  .jarviswidget > header .widget-toolbar {
    order: 5 !important;
    flex: 0 0 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .jarviswidget > header .widget-toolbar .btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* iPhone SE / 360-er Android: noch knapper */
@media (max-width: 400px) {
  body #main {
    padding: 10px 4px !important;
  }
  body #header {
    padding: 0 4px !important;
    gap: 4px !important;
  }
  .jarviswidget > header h2 {
    font-size: 13px !important;
  }
}

/* =============================================================
 * Phase 48 — Edit-Form Label/Input-Layout
 *
 * Alte SmartAdmin-Pattern: Label und Input in 2 separaten
 * <section class="col col-12">. Im flex-row werden sie als 2
 * Spalten gerendert (Label links 96px, Input rechts) — sieht
 * "verschoben" aus.
 * Fix: bei Rows mit ≥2 consecutive col-12 sections vertikal
 * stapeln, Label oben, Input darunter (full-width).
 * ============================================================= */
/* WICHTIG: Selektor enger gefasst, sonst kollabiert er auch auf
   Detail-Forms wie /admin/employee/{id}, die ebenfalls
   id="checkout-form" benutzen — und dort sind regulaere col-lg-6-
   Layouts vorhanden, die nicht column-stack werden duerfen. Hier
   nur greifen wenn die erste col-12 ein Label-only-Container ist
   (das ist das spezifische Order-Edit-Form-Pattern). */
form#checkout-form .row:has(> section.col.col-12.margin-bottom-10:has(> label:only-child) + section.col.col-12) {
  flex-direction: column !important;
}
form#checkout-form .row:has(> section.col.col-12.margin-bottom-10:has(> label:only-child) + section.col.col-12) > section.col.col-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 4px !important;
}
/* Label-Section (Top) — kompakter Spacing */
form#checkout-form .row > section.col.col-12.margin-bottom-10:has(> label:only-child) {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}
form#checkout-form .row > section.col.col-12.margin-bottom-10:has(> label:only-child) > label {
  margin: 0 !important;
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13px !important;
}
/* Input/Textarea darunter full-width */
form#checkout-form .row > section.col.col-12 > .textarea,
form#checkout-form .row > section.col.col-12 > .input {
  width: 100% !important;
}

/* =============================================================
 * Phase 47 — Auftrag-Edit Tabs + Action-Buttons (Mobile)
 *
 * - Tab-Underline (active) wird auf eigene Tab beschränkt, nicht
 *   bis zum linken Container-Rand.
 * - Action-Buttons (Alle Aufträge / Übernehmen / Speichern) auf
 *   Mobile als full-width-Stack.
 * - Form-Spalten gleichmäßig vertikal auf Mobile.
 * ============================================================= */
@media (max-width: 768px) {
  /* Auftrag-Edit Action-Buttons als 3 full-width Pills */
  .form-action-buttons,
  body #main .smart-form > footer,
  body #main .smart-form footer.smart-form-footer,
  body #main .subheader-actions-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .form-action-buttons .btn,
  body #main .smart-form > footer .btn,
  body #main .smart-form footer .btn,
  body #main .subheader-actions-top .btn,
  body #main .subheader-actions-top a.btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Form-Row col-md-6 auf Mobile vertikal stacken (default Bootstrap macht das, aber Jarvis-Form hat manchmal width-Overrides) */
  .smart-form .row > .col,
  .smart-form .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }
}

/* Generelle nav-tabs underline auf eigene Tab beschränken (nicht
   bis zum Rand). Greift überall — auch Bestellungs-Edit-Tabs. */
.nav-tabs .nav-link.active {
  position: relative;
}

/* =============================================================
 * Phase 45 — Generischer Info-Banner (.op-info-banner)
 * für Status-Hinweise wie FiSaLis-Prüfung etc.
 * ============================================================= */
.op-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #8bc34a;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #475569;
}
.op-info-banner i.fa {
  font-size: 16px;
  flex: 0 0 auto;
}
.op-info-banner strong {
  color: #2c3e50;
}
.op-info-banner .op-info-meta {
  margin-left: auto;
  color: #94a3b8;
  font-size: 12px;
}
@media (max-width: 768px) {
  .op-info-banner {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12.5px;
    padding: 10px 12px;
  }
  .op-info-banner .op-info-meta {
    margin-left: 0;
    flex: 0 0 100%;
    margin-top: 2px;
  }
}

/* =============================================================
 * Bootstrap-Modal-Fix: .modal.show muss opacity:1 haben
 *
 * Bug: Bei Klick auf "Mitarbeiter freigeben" (oder andere Modals)
 *      wurde das Modal zwar mit class="modal fade show" + display:block
 *      gerendert, hatte aber computed opacity:0 → Modal-Inhalt war
 *      unsichtbar, nur der dunkle Backdrop erschien.
 *      Bootstrap-5-Modal-Transition-Regel war nicht final aktiv.
 * Fix:  Explizit `.modal.show { opacity: 1 }`.
 * ============================================================= */
.modal.fade {
  transition: opacity 0.15s linear;
}
.modal.show {
  opacity: 1 !important;
}

/* =============================================================
 * Phase 54.1 — Globale Suche im Header
 * ============================================================= */
#op-search-wrap {
  position: relative;
  flex: 1 1 auto;
  max-width: 380px;
  margin: 0 12px;
  align-self: center;
}
.op-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.op-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  font-size: 13px;
  pointer-events: none;
}
#op-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
  color: #1e293b;
  transition: border-color 0.15s, background 0.15s;
  height: 36px;
}
#op-search-input:focus {
  outline: none;
  background: #fff;
  border-color: #8bc34a;
  box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.15);
}
.op-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  max-height: 480px;
  overflow-y: auto;
  display: none;
  z-index: 1100;
}
.op-search-results--open {
  display: block;
}
.op-search-hint {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
}
.op-search-group-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #94a3b8;
  background: #f8fafc;
}
.op-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none !important;
  color: #1e293b !important;
  border-top: 1px solid #f1f5f9;
  transition: background 0.1s;
}
.op-search-result:first-of-type {
  border-top: none;
}
.op-search-result:hover,
.op-search-result--selected {
  background: rgba(139, 195, 74, 0.08);
  color: #2c3e50 !important;
}
.op-search-result i.fa {
  width: 24px;
  height: 24px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: 0 0 24px;
}
.op-search-result--selected i.fa {
  background: #8bc34a;
  color: #fff;
}
.op-search-result-text {
  flex: 1 1 auto;
  min-width: 0;
}
.op-search-result-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-search-result-sublabel {
  font-size: 11px;
  color: var(--op-text-subtle);  /* Phase 58.4 contrast-fix */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-search-mobile-trigger {
  display: none;
}
.op-search-mobile-close {
  display: none;
}

/* Mobile: Suche als Overlay */
@media (max-width: 768px) {
  #op-search-wrap {
    margin: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    position: static !important;
  }
  .op-search-mobile-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #475569;
    text-decoration: none !important;
    border-radius: 8px;
  }
  .op-search-mobile-trigger:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  .op-search-inner {
    display: none !important;
  }
  #op-search-wrap.op-search-wrap--mobile-open .op-search-inner {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    background: #fff !important;
    z-index: 1100 !important;
    padding: 12px 12px 0 12px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  #op-search-wrap.op-search-wrap--mobile-open .op-search-mobile-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #475569;
    text-decoration: none !important;
    flex: 0 0 36px;
    margin-right: 4px;
  }
  #op-search-wrap.op-search-wrap--mobile-open .op-search-icon {
    left: 56px !important;
  }
  #op-search-wrap.op-search-wrap--mobile-open #op-search-input {
    flex: 1 1 auto !important;
    height: 40px !important;
    padding-left: 36px !important;
  }
  #op-search-wrap.op-search-wrap--mobile-open .op-search-results {
    position: static !important;
    flex: 1 1 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 12px !important;
    max-height: calc(100vh - 80px) !important;
  }
}

/* =============================================================
 * Phase 56.1 — Draft-Recovery-Banner (Auto-Save)
 *
 * Wird oben im Form gerendert wenn ein Auto-Saved Draft existiert.
 * "Wiederherstellen / Verwerfen" Buttons.
 * ============================================================= */
.op-draft-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff8e1 0%, #fffbeb 100%);
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #78350f;
  flex-wrap: wrap;
}
.op-draft-banner i.fa {
  font-size: 18px;
  color: #d97706;
  flex: 0 0 auto;
}
.op-draft-banner > div:first-of-type {
  flex: 1 1 240px;
}
.op-draft-banner strong {
  color: #92400e;
}
.op-draft-banner-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.op-draft-banner-actions .btn {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
}
@media (max-width: 768px) {
  .op-draft-banner {
    padding: 10px 12px;
    font-size: 12px;
  }
  .op-draft-banner-actions {
    flex: 1 1 100%;
    margin-top: 4px;
    justify-content: flex-end;
  }
}

/* =============================================================
 * Phase 53.2 — Sticky Action-Buttons auf Mobile
 *
 * Beim Scroll bleiben die Action-Buttons (Neuer Auftrag etc.) im
 * Header oben kleben. Greift nur Mobile.
 * ============================================================= */
@media (max-width: 768px) {
  body #main .row > [class*="col-"].text-end:has(> .btn),
  body #main .subheader-actions-top {
    position: sticky !important;
    top: 50px !important; /* unter Topbar */
    z-index: 50 !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(248, 250, 252, 0.85) 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px !important;
    margin: 0 -8px 8px -8px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  }
}

/* =============================================================
 * Phase 53.3 — Breadcrumb-Pill auf Mobile
 *
 * Page-Title Subtitle als horizontale Pill-Chain mit Back-Pfeil.
 * ============================================================= */
@media (max-width: 768px) {
  body #main .page-title small,
  body #main .page-title-subtitle,
  body #main .breadcrumb-page-subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: rgba(139, 195, 74, 0.1);
    color: #689f38 !important;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px !important;
    font-weight: 500;
    margin: 4px 0 0 0 !important;
    text-transform: none;
    letter-spacing: normal;
  }
  /* Breadcrumb mit Trennern in subtitles als > separator */
  body #main .page-title > small > br,
  body #main .page-title small + small {
    display: none;
  }
}

/* =============================================================
 * Phase 53.1 — Floating Action Button (Mobile)
 *
 * Sichtbar nur ≤768 px, fixed unten rechts. Context-aware (Layout
 * setzt Ziel-URL je nach Page).
 * ============================================================= */
.op-fab {
  display: none !important;
}
@media (max-width: 768px) {
  .op-fab {
    display: flex !important;
    position: fixed !important;
    right: 16px !important;
    bottom: 88px !important; /* über dem Footer */
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(104, 159, 56, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    z-index: 1050 !important;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
  }
  .op-fab:hover, .op-fab:focus {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 22px rgba(104, 159, 56, 0.55), 0 3px 8px rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
  }
  .op-fab:active {
    transform: scale(0.96) !important;
  }
  .op-fab i.fa {
    font-size: 22px !important;
  }
}

/* =============================================================
 * Phase 55.1 — Dashboard Greeting + KPI-Pillen
 * ============================================================= */
.op-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--op-space-3) var(--op-space-5);
  background: linear-gradient(135deg, var(--op-surface) 0%, var(--op-surface-elevated) 100%);
  border: 1px solid var(--op-border);
  border-left: 4px solid var(--op-primary);
  border-radius: var(--op-radius-lg);
  padding: var(--op-space-5) var(--op-space-6);
  margin: 0 0 var(--op-space-4) 0;
  box-shadow: var(--op-shadow-sm);
}
.op-greeting-text {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-1);
}
.op-greeting-hello {
  font-size: var(--op-text-xl);
  font-weight: 700;
  color: var(--op-text);
  line-height: var(--op-leading-tight);
}
.op-greeting-meta {
  font-size: var(--op-text-sm);
  color: var(--op-text-muted);
  font-variant-numeric: tabular-nums;
}
.op-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-2);
}
.op-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-2);
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-pill);
  padding: var(--op-space-2) var(--op-space-4);
  font-size: var(--op-text-sm);
  color: var(--op-text-muted);
  box-shadow: var(--op-shadow-sm);
  white-space: nowrap;
}
.op-kpi-pill i.fa {
  font-size: 13px;
  color: var(--op-text-subtle);
}
.op-kpi-pill .op-kpi-value {
  font-weight: 700;
  color: var(--op-text);
  font-size: var(--op-text-md);
  font-variant-numeric: tabular-nums;
}
.op-kpi-pill .op-kpi-label {
  color: var(--op-text-muted);
}
.op-kpi-pill--primary { border-color: rgba(139, 195, 74, 0.4); background: rgba(139, 195, 74, 0.08); }
.op-kpi-pill--primary i.fa, .op-kpi-pill--primary .op-kpi-value { color: #689f38; }
.op-kpi-pill--info { border-color: rgba(14, 165, 233, 0.35); background: rgba(14, 165, 233, 0.06); }
.op-kpi-pill--info i.fa, .op-kpi-pill--info .op-kpi-value { color: #0284c7; }
.op-kpi-pill--warning { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); }
.op-kpi-pill--warning i.fa, .op-kpi-pill--warning .op-kpi-value { color: #c2710c; }
.op-kpi-pill--success { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.op-kpi-pill--success i.fa, .op-kpi-pill--success .op-kpi-value { color: #16a34a; }
.op-kpi-pill--danger { border-color: rgba(231, 76, 60, 0.4); background: rgba(231, 76, 60, 0.08); }
.op-kpi-pill--danger i.fa, .op-kpi-pill--danger .op-kpi-value { color: #dc2626; }

@media (max-width: 768px) {
  .op-greeting {
    padding: 12px 14px;
    gap: 8px;
  }
  .op-greeting-text {
    flex: 1 1 100%;
  }
  .op-greeting-hello {
    font-size: 15px;
  }
  .op-kpi-row {
    flex: 1 1 100%;
  }
  .op-kpi-pill {
    padding: 5px 10px;
    font-size: 12px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =============================================================
 * Phase 52.1 — Toast-Notifications (op-toast)
 *
 * SmartNotification SmallBox standardmäßig links unten — wir
 * positionieren oben rechts mit Slide-in von rechts.
 * ============================================================= */
.SmallBox.op-toast {
  position: fixed !important;
  top: 70px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 12px 16px !important;
  z-index: 1080 !important;
  animation: op-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #fff !important;
}
.SmallBox.op-toast h4,
.SmallBox.op-toast .title {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #fff !important;
}
.SmallBox.op-toast p,
.SmallBox.op-toast .content {
  font-size: 12.5px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.SmallBox.op-toast i.fa {
  margin-right: 6px !important;
}
@keyframes op-toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 768px) {
  .SmallBox.op-toast {
    top: 60px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* =============================================================
 * Phase 52.2 — Skeleton-Loading-Animation
 *
 * Greift auf .dataTables_processing UND auf eine "Lade Daten…"
 * Empty-Row während der DataTable noch im Initial-Loading ist.
 * ============================================================= */
@keyframes op-skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.dataTables_processing {
  display: none !important;  /* DataTables-internes "Verarbeite…" weg, wir nutzen Skeleton */
}
table.dataTable .datatable-empty-row {
  position: relative !important;
  overflow: hidden !important;
}
/* Shimmer-Effect über Lade-Row */
table.dataTable .datatable-empty-row td {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%) !important;
  background-size: 200% 100% !important;
  animation: op-skeleton-shimmer 1.4s ease-in-out infinite !important;
  color: transparent !important;
  height: 56px !important;
  border-radius: 4px !important;
}
table.dataTable .datatable-empty-row td * {
  visibility: hidden !important;
}
@keyframes op-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================
 * Phase 52.3 — Empty-State-Component
 * ============================================================= */
.op-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 220px;
  color: #64748b;
}
.op-empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.op-empty-state-icon i.fa {
  font-size: 32px;
  color: #94a3b8;
}
.op-empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 6px 0;
}
.op-empty-state-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px 0;
  max-width: 380px;
  line-height: 1.5;
}
.op-empty-state-action {
  margin-top: 4px;
}
@media (max-width: 768px) {
  .op-empty-state {
    padding: 28px 16px;
    min-height: 180px;
  }
  .op-empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }
  .op-empty-state-icon i.fa {
    font-size: 26px;
  }
  .op-empty-state-title {
    font-size: 14px;
  }
}

/* =============================================================
 * Phase 51 — Footer schlanker, eine Zeile auf Mobile.
 * ============================================================= */
.page-footer {
  background: #fafbfc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 0 !important;
  position: static !important;
  margin-top: 24px !important;
}
body {
  padding-bottom: 0 !important;
}
.page-footer .op-footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  color: var(--op-text-muted) !important;  /* WCAG AA — war #64748b ~5:1, jetzt #475569 ~7:1 */
  line-height: 1.5 !important;
}
.page-footer .op-footer-initials {
  width: 22px !important;
  height: 22px !important;
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
}
.page-footer .op-footer-company {
  font-weight: 600 !important;
  color: #475569 !important;
}
.page-footer .op-footer-sep {
  color: #cbd5e1 !important;
  margin: 0 2px !important;
}
.page-footer .txt-footer {
  color: var(--op-text-subtle) !important;  /* WCAG AA — Phase 58.4 contrast-fix */
}
.page-footer .op-footer-link {
  color: #689f38 !important;
  text-decoration: none !important;
}
.page-footer .op-footer-link:hover {
  text-decoration: underline !important;
}
/* Desktop: Sidebar 220px links — Footer-Inhalt rechts daneben zentrieren */
@media (min-width: 992px) {
  body.fixed-navigation:not(.minified):not(.menu-on-top) .page-footer .op-footer-inner {
    padding-left: 230px !important;
  }
}
.page-footer .op-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
}
.page-footer .op-footer-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.page-footer .op-footer-company {
  color: #475569 !important;
  font-weight: 600 !important;
}
.page-footer .op-footer-sep {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}
.page-footer .txt-footer {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
}
.page-footer .op-footer-link {
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 11.5px !important;
  transition: color 0.15s;
}
.page-footer .op-footer-link:hover {
  color: #689f38 !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .page-footer .op-footer-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }
  .page-footer .op-footer-brand {
    flex: 1 1 100% !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
  }
  .page-footer .op-footer-sep {
    display: inline !important;
  }
  .page-footer .op-footer-initials {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
  }
  .page-footer .op-footer-company {
    font-size: 11.5px !important;
  }
}
/* Sehr schmale Geräte: Brand in eigene Zeile, Rest in einer */
@media (max-width: 360px) {
  .page-footer .op-footer-inner {
    font-size: 10.5px !important;
  }
}

/* =============================================================
 * Phase 38 — Aufträge-Seite Mobile übersichtlicher
 *
 * Vorher Mobile (390px):
 * - Header-Action-Buttons (DB Trassenfinder, PDF, Neuen Auftrag)
 *   inline-block + margin-* → seltsam zentriert auf 2 Zeilen
 * - Status-Tabs zeigen nur Icons (Labels via d-none d-md-block weg),
 *   User weiß nicht was ⏳/✏/✓/✋ bedeutet
 * - Filter-Toolbar Zeitraum-Label hängt isoliert
 * ============================================================= */
@media (max-width: 768px) {
  /* Header: Action-Buttons-Spalte (text-end text-sm-left) auf Mobile
     als saubere vertikale Stapel-Reihenfolge */
  body #main .row > [class*="col-"].text-end {
    text-align: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
  }
  body #main .row > [class*="col-"].text-end > .btn,
  body #main .row > [class*="col-"].text-end > form,
  body #main .row > [class*="col-"].text-end > a.btn {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body #main .row > [class*="col-"].text-end > form > button {
    width: 100% !important;
  }
  /* btn-secondary ist auf SmartAdmin transparent — hier mit grauem
     Background sichtbar machen (DB Trassenfinder etc.) */
  body #main .row > [class*="col-"].text-end > a.btn-secondary {
    background: #6c757d !important;
    color: #fff !important;
    border: 1px solid #6c757d !important;
  }
  body #main .row > [class*="col-"].text-end > a.btn-secondary:hover {
    background: #5a6268 !important;
  }

  /* Status-Tabs (.nav-tabs.js-filter-state): Labels auf Mobile zeigen,
     Tabs horizontal scrollbar mit klar sichtbaren Pills */
  .nav-tabs.js-filter-state {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e0e6ed !important;
    padding: 4px 4px 0 4px !important;
    gap: 2px !important;
  }
  .nav-tabs.js-filter-state::-webkit-scrollbar {
    height: 3px;
  }
  .nav-tabs.js-filter-state::-webkit-scrollbar-thumb {
    background: rgba(139, 195, 74, 0.4);
    border-radius: 2px;
  }
  .nav-tabs.js-filter-state .nav-item {
    flex: 0 0 auto !important;
  }
  .nav-tabs.js-filter-state .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #475569 !important;
  }
  .nav-tabs.js-filter-state .nav-link.active {
    color: #689f38 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #8bc34a !important;
  }
  /* d-none Labels innerhalb der Status-Tabs auf Mobile sichtbar machen */
  .nav-tabs.js-filter-state .nav-link span.d-none.d-md-block,
  .nav-tabs.js-filter-state .nav-link span.d-none.d-lg-block {
    display: inline !important;
  }
  /* Counter-Label kompakter */
  .nav-tabs.js-filter-state .nav-link span.label {
    background: #8bc34a !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 1px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-left: 4px !important;
    display: inline-block !important;
  }

  /* Filter-Form (orders-filter-row) kompakter */
  .orders-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    align-items: stretch !important;
  }
  .orders-filter-field {
    width: 100% !important;
    flex: 0 0 auto !important; /* kein flex-basis = Höhe in column-flex */
  }
  .orders-filter-field--zeitraum {
    flex: 0 0 auto !important; /* überschreibt 0 1 200px aus Phase 27 */
  }
  .orders-filter-field--zeitraum .btn-group,
  .orders-filter-field--zeitraum .btn-group .btn {
    width: 100% !important;
  }
  /* Vorlage-Button sichtbar machen (btn-secondary war transparent) */
  .orders-filter-field--zeitraum .btn-group .btn.btn-secondary {
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    border: 1px solid #dee2e6 !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 8px 12px !important;
  }
  .orders-filter-field--zeitraum .btn-group .btn.btn-secondary:hover {
    background: #e9ecef !important;
  }
  .orders-filter-field input[type=date] {
    width: 100% !important;
  }
  .orders-filter-field--actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .orders-filter-field--actions .btn {
    width: 100% !important;
  }
  /* "von" / "bis" — Labels auf eine Zeile mit dem Input */
  .orders-filter-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #64748b !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
  }
}

/* =============================================================
 * Phase 40 — Dienstplan-Seite Mobile + Desktop
 *
 * Wochen-Navigation als horizontale Pill-Group statt 3 einzelne
 * Buttons, "Dienstplan exportieren" als grüner Action-Button
 * (konsistent mit PDF-Export auf Aufträge), Tages-Cards mit
 * "Keine Aufträge" kompakter (nicht 200px Whitespace).
 * ============================================================= */

/* Wochen-Navigation: horizontale Pill-Group auf allen Größen */
.col.col-12.col-sm-12.text-sm-center > a.btn-secondary[href*="weekview"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* "Dienstplan exportieren" als grüner Export-Button */
body #main .row > [class*="col-"].text-end > a[href*="dienstplan"],
body #main .row > [class*="col-"].text-end > a[href*="weekview"][href*="export"] {
  background: #689f38 !important;
  color: #fff !important;
  border: 1px solid #689f38 !important;
}

/* Tages-Cards mit "Keine Aufträge" kompakter */
.jarviswidget header h2 + .widget-body,
.jarviswidget .widget-body:has(> :only-child) {
  min-height: 0 !important;
}
.jarviswidget .widget-body > p:only-child,
.jarviswidget .widget-body > div:only-child > p:only-child {
  padding: 16px 12px !important;
  margin: 0 !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-style: italic;
}

/* Hinweis: Aggressive Wochen-Nav-3er-Pill-Reihe auf Mobile war zu
   aggressiv und hat andere col-12-Sections in anderen Cards
   beschädigt. Stattdessen behalten wir den vertikalen Stack — funktional. */

/* Sehr schmale Geräte (≤380 px): Schnellzugriff im Header weg,
   damit Profil-Avatar nicht von der rechten Kante abgeschnitten wird.
   Items sind weiterhin über die Sidebar / Hauptmenü erreichbar.
   Selektor muss spezifischer sein als #header > .float-end > .header-dropdown-list. */
@media (max-width: 380px) {
  body #header > .float-end > .header-dropdown-list,
  body #header > .float-end > ul.header-dropdown-list,
  body #header .header-dropdown-list {
    display: none !important;
  }
}

/* =============================================================
 * Phase 31 — DataTables Toolbar + Calendar Polish
 * ============================================================= */

/* DataTables Search-Input bändigen — auf Mobile + Desktop */
.dt-toolbar .float-start input[type=search],
.dataTables_filter input[type=search] {
  max-width: 240px !important;
  width: 100% !important;
}
.dt-toolbar .float-end select,
.dataTables_length select {
  min-width: 70px !important;
}

/* FullCalendar: Sa + So gleichberechtigt mit den anderen 5 Tagen
   (vorher So Mega-Spalte, Sa schmal — flex-basis war ungleich) */
.fc-row .fc-content-skeleton table,
.fc-row .fc-bg table,
.fc-row .fc-helper-skeleton table {
  table-layout: fixed !important;
}
.fc-row .fc-bg td,
.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
  width: 14.2857% !important; /* 100 / 7 */
}
.fc-row .fc-bg .fc-day-header,
.fc-row .fc-content-skeleton .fc-day-header {
  text-align: center !important;
}

/* =============================================================
 * Phase 32 → 67a — DataTables Card-View (überall, nicht nur Mobile)
 *
 * Phase 32 (Mobile-only) ursprünglich: ResponsiveHelper auf ≤768px deaktiviert,
 *   op-mobile-cards.js setzt data-label, CSS rendert <tr> als Cards.
 *
 * Phase 67a (User-Wunsch 2026-04-26): Card-View jetzt für ALLE Viewports.
 *   Desktop bekommt zusätzlich Grid-Layout (auto-fill, minmax 320px) —
 *   2-4 Cards pro Reihe je nach Breite. Mobile bleibt single-column.
 *
 * Card-Basis-Styling (gilt alle Viewports — keine Media-Query mehr):
 * ============================================================= */
  /* Wrapper / Container */
  .dataTables_wrapper {
    overflow: visible !important;
  }
  table.table-datatable,
  table.dataTable,
  table.op-mobile-cards-target {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }
  /* Filter-thead-Row und Title-thead-Row visuell verstecken
     (hasinput-Filter-Inputs sind selten auf Mobile genutzt) */
  table.table-datatable > thead,
  table.dataTable > thead,
  table.op-mobile-cards-target > thead {
    display: block !important;
    border: none !important;
  }
  table.table-datatable > thead > tr.hasinput,
  table.dataTable > thead > tr.hasinput,
  table.table-datatable > thead > tr:first-child,
  table.dataTable > thead > tr:first-child,
  table.op-mobile-cards-target > thead > tr.hasinput {
    display: none !important;
  }
  /* Titel-tr ebenfalls verstecken — Labels sind auf den Cells via ::before */
  table.table-datatable > thead > tr:last-child,
  table.dataTable > thead > tr:last-child,
  table.op-mobile-cards-target > thead > tr {
    display: none !important;
  }

  table.table-datatable > tbody,
  table.dataTable > tbody,
  table.op-mobile-cards-target > tbody {
    display: block !important;
  }
  /* Jede Zeile = Card */
  table.table-datatable > tbody > tr,
  table.dataTable > tbody > tr,
  table.op-mobile-cards-target > tbody > tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 10px !important;
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  table.table-datatable > tbody > tr.even,
  table.table-datatable > tbody > tr.odd {
    background: #fff !important;
  }
  table.table-datatable > tbody > tr:hover,
  table.dataTable > tbody > tr:hover,
  table.op-mobile-cards-target > tbody > tr:hover {
    background: #f9fafb !important;
  }
  /* Status-Zeilen (success / danger / warning) als Linker Border */
  table.table-datatable > tbody > tr.is-running,
  table.table-datatable > tbody > tr.success {
    border-left: 4px solid #8bc34a !important;
  }
  table.table-datatable > tbody > tr.danger,
  table.table-datatable > tbody > tr.error {
    border-left: 4px solid #e74c3c !important;
  }

  /* Cells als Label-Value-Reihen */
  table.table-datatable > tbody > tr > td,
  table.dataTable > tbody > tr > td,
  table.op-mobile-cards-target > tbody > tr > td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f3f5 !important;
    text-align: right !important;
    word-break: break-word !important;
    min-height: 0 !important;
  }
  table.table-datatable > tbody > tr > td:last-child,
  table.dataTable > tbody > tr > td:last-child,
  table.op-mobile-cards-target > tbody > tr > td:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  /* Label aus data-label attribute */
  table.table-datatable > tbody > tr > td::before,
  table.dataTable > tbody > tr > td::before,
  table.op-mobile-cards-target > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-weight: 600;
    color: #6c757d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
    padding-top: 2px;
  }
  /* Cells ohne data-label (z.B. Action-Buttons) verbrauchen volle Breite */
  table.table-datatable > tbody > tr > td:not([data-label])::before,
  table.dataTable > tbody > tr > td:not([data-label])::before,
  table.op-mobile-cards-target > tbody > tr > td:not([data-label])::before,
  table.table-datatable > tbody > tr > td[data-label=""]::before,
  table.dataTable > tbody > tr > td[data-label=""]::before,
  table.op-mobile-cards-target > tbody > tr > td[data-label=""]::before {
    display: none !important;
  }
  table.table-datatable > tbody > tr > td:not([data-label]),
  table.dataTable > tbody > tr > td:not([data-label]),
  table.op-mobile-cards-target > tbody > tr > td:not([data-label]),
  table.table-datatable > tbody > tr > td[data-label=""],
  table.dataTable > tbody > tr > td[data-label=""],
  table.op-mobile-cards-target > tbody > tr > td[data-label=""] {
    justify-content: flex-end !important;
    text-align: right !important;
    border-top: 1px solid #f1f3f5 !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  /* Action-Buttons (.btn-group, .dropdown im td) immer rechts ausrichten */
  table.table-datatable > tbody > tr > td .btn-group,
  table.dataTable > tbody > tr > td .btn-group,
  table.op-mobile-cards-target > tbody > tr > td .btn-group {
    margin-left: auto !important;
  }

  /* Empty-row colspan-Zelle nicht als Cards rendern */
  table.table-datatable > tbody > tr > td[colspan]:only-child,
  table.dataTable > tbody > tr > td[colspan]:only-child,
  table.op-mobile-cards-target > tbody > tr > td[colspan]:only-child {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
  }
  table.table-datatable > tbody > tr > td[colspan]:only-child::before,
  table.dataTable > tbody > tr > td[colspan]:only-child::before,
  table.op-mobile-cards-target > tbody > tr > td[colspan]:only-child::before {
    display: none !important;
  }

  /* Pagination + Info kompakter — Mobile-only-Adjustment */
@media (max-width: 768px) {
  .dt-toolbar-footer {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
  .dataTables_info {
    font-size: 12px !important;
    text-align: center !important;
  }
  .dataTables_paginate {
    text-align: center !important;
  }
}

/* =============================================================
 * Phase 67a — Desktop Grid-Layout für Card-View
 *
 * Auf >768px werden die Cards in mehrspaltiger Auto-Fill-Grid arrangiert:
 * minmax(320px, 1fr) → 2 Cards bei 800px, 3 bei 1200px, 4 bei 1600px+.
 * Mobile bleibt single-column block-layout (das Phase-32-Pattern).
 * ============================================================= */
@media (min-width: 769px) {
  /* tbody wird Grid-Container, jede tr (Card) wird Grid-Item.
     Phase 80: minmax 480px statt 320px — bei wenigen Aufträgen volle Breite,
     bei vielen 2 Spalten ab ~960px. Mehr Platz pro Card → 3-Spalten-Inner-Grid lesbar. */
  /* Phase 86: tbody zurück auf normales table-row-group — kein Auto-Fit-Card-Grid mehr.
     Das macht den Container zu einer einheitlichen Card und Rows zu Zeilen. */
  html body table.table-datatable > tbody,
  html body table.dataTable > tbody,
  html body table.op-mobile-cards-target > tbody {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  /* Cards keinen bottom-margin mehr — gap übernimmt */
  html body table.table-datatable > tbody > tr,
  html body table.dataTable > tbody > tr,
  html body table.op-mobile-cards-target > tbody > tr {
    margin: 0 !important;
    height: fit-content !important;
  }
  /* Empty-state-Row über volle Grid-Breite */
  html body table.table-datatable > tbody > tr > td[colspan]:only-child,
  html body table.dataTable > tbody > tr > td[colspan]:only-child,
  html body table.op-mobile-cards-target > tbody > tr > td[colspan]:only-child {
    grid-column: 1 / -1;
  }
  html body table.table-datatable > tbody > tr:has(> td[colspan]:only-child),
  html body table.dataTable > tbody > tr:has(> td[colspan]:only-child),
  html body table.op-mobile-cards-target > tbody > tr:has(> td[colspan]:only-child) {
    grid-column: 1 / -1 !important;
  }
}

/* =============================================================
 * Phase 33 — Validation-Error Visibility
 *
 * Vorher: Beim Speichern eines Mitarbeiters gab Server 422 zurück
 *         (daily/monthly_working_hours required), Errors waren im
 *         DOM (.state-error + .note-error), aber visuell unsichtbar:
 *         Border 0px, Note grau, kein globaler Alert, keine
 *         Scroll-To-Error. User dachte "Speichern macht nichts".
 *
 * Nachher: rote 2px-Border auf .state-error, .note-error rot+bold,
 *          globaler Alert via JS, Auto-Scroll (siehe init-scripts).
 * ============================================================= */
.input.state-error,
.input.state-error > input,
.input.state-error > textarea,
.input.state-error > select,
label.input.state-error {
  border: 2px solid #e74c3c !important;
  background: rgba(231, 76, 60, 0.05) !important;
}
.note.note-error {
  color: #e74c3c !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  margin-top: 4px !important;
  display: block !important;
}
/* Globaler Validation-Alert (von init-scripts.blade.php injiziert) */
.op-validation-alert {
  background: linear-gradient(135deg, #fff5f5 0%, #fee 100%);
  border: 1px solid #f5b7b1;
  border-left: 4px solid #e74c3c;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 16px 0;
  color: #c0392b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.08);
}
.op-validation-alert::before {
  content: "\f071"; /* fa-warning */
  font-family: FontAwesome;
  font-size: 18px;
  color: #e74c3c;
}
.op-validation-alert strong {
  color: #a93226;
}

/* =============================================================
 * Phase 34 — Calendar Mobile Polish
 *
 * Auf ≤768 px startet der Kalender bereits in agendaWeek statt
 * month (manager/calendar.blade.php). Hier zusätzlich CSS, damit
 * 7 Tage + KW-Spalte nicht zerquetschen: KW-Spalte ausblenden,
 * Tages-Header kompakter, Time-Column schmaler.
 * ============================================================= */
@media (max-width: 768px) {
  /* KW-Spalte (week number) auf Mobile ausblenden — spart ~32px */
  #calendar .fc-week-number,
  #calendar th.fc-week-number,
  #calendar td.fc-week-number {
    display: none !important;
  }

  /* Time-Spalte (06:00 etc.) etwas schmaler */
  #calendar .fc-axis,
  #calendar th.fc-axis,
  #calendar td.fc-axis {
    width: 38px !important;
    min-width: 38px !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  /* Tages-Header kompakter (Mo. / 20.04 untereinander) */
  #calendar .fc-day-header {
    font-size: 11px !important;
    padding: 4px 0 !important;
    line-height: 1.2 !important;
  }

  /* Calendar-Container darf horizontal scrollen falls Inhalt zu breit */
  #calendar .fc-view-container,
  .jarviswidget [id^="calendar"] .fc-view-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Title (z.B. "20 - 26. Apr. 2026") kleiner */
  #calendar .fc-toolbar h2,
  #calendar .fc-toolbar-title {
    font-size: 14px !important;
  }

  /* Buttons in der Calendar-Toolbar kompakter */
  #calendar .fc-button {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
}

/* DataTables Toolbar (Search + Length) auf Mobile zweizeilig */
@media (max-width: 768px) {
  .dt-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .dt-toolbar > .float-start,
  .dt-toolbar > .float-end {
    float: none !important;
    flex: 1 1 100% !important;
  }
  .dt-toolbar .dataTables_filter,
  .dt-toolbar .dataTables_length {
    width: 100% !important;
  }
  .dt-toolbar .dataTables_filter label,
  .dt-toolbar .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .dt-toolbar .dataTables_filter input[type=search] {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
}

/* =============================================================
 * Phase 62b — Login Password-Toggle (UX-Empfehlung)
 * ============================================================= */
html body .login-smart-form .login-password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--op-text-muted) !important;
  cursor: pointer !important;
  border-radius: var(--op-radius) !important;
  padding: 0 !important;
  z-index: 2 !important;
}
html body .login-smart-form .login-password-toggle:hover {
  color: var(--op-text) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
html body .login-smart-form .login-password-toggle:focus-visible {
  outline: 2px solid var(--op-primary) !important;
  outline-offset: 2px !important;
}
html body .login-smart-form label.input {
  position: relative !important;
}
/* Padding-right damit Text nicht unter den Toggle-Button läuft */
html body .login-smart-form #password {
  padding-right: 44px !important;
}

/* =============================================================
 * Phase 63 — Tables-Modernisierung (Designer-Pass)
 *
 * Ziele:
 * - Klare Header (mehr Contrast, lesbar)
 * - Sichtbare Sort-Indikatoren (FA-Chevrons statt Mini-Triangles)
 * - Subtile Zebra-Streifen für Scan-Bar-keit
 * - Hover-State auf Rows (alle Tabellen, nicht nur DataTables)
 * - Konsistente Cell-Padding-Höhe (44px Touch-Target)
 * - Cleanerer Filter-Toolbar (DataTables-Search/Length)
 * ============================================================= */

/* Header: stärker, dunkler, mit Bottom-Border */
html body table.dataTable thead th,
html body table.table thead th,
html body .table > thead > tr > th {
  background-color: var(--op-bg, #f8fafc) !important;
  color: var(--op-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  border-bottom: 2px solid var(--op-border-strong, #cbd5e1) !important;
  border-top: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Sort-Indikatoren: FontAwesome-Chevrons rechts, größer & sichtbar */
html body table.dataTable thead th.sorting,
html body table.dataTable thead th.sorting_asc,
html body table.dataTable thead th.sorting_desc {
  cursor: pointer !important;
  position: relative !important;
  padding-right: 28px !important;
  transition: background-color 0.12s ease !important;
}
html body table.dataTable thead th.sorting:hover {
  background-color: var(--op-border-light, #e2e8f0) !important;
}
html body table.dataTable thead th.sorting::after,
html body table.dataTable thead th.sorting_asc::after,
html body table.dataTable thead th.sorting_desc::after {
  font-family: 'FontAwesome' !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  opacity: 0.4 !important;
  transition: opacity 0.12s ease, color 0.12s ease !important;
}
html body table.dataTable thead th.sorting::after {
  content: "\f0dc" !important;  /* fa-sort */
}
html body table.dataTable thead th.sorting_asc::after {
  content: "\f0de" !important;  /* fa-sort-asc */
  opacity: 1 !important;
  color: var(--op-primary, #8db951) !important;
}
html body table.dataTable thead th.sorting_desc::after {
  content: "\f0dd" !important;  /* fa-sort-desc */
  opacity: 1 !important;
  color: var(--op-primary, #8db951) !important;
}

/* DataTables-eigene Sort-Pseudo-Elemente verstecken (vermeidet Doppel-Icons) */
html body table.dataTable thead .sorting::before,
html body table.dataTable thead .sorting_asc::before,
html body table.dataTable thead .sorting_desc::before,
html body table.dataTable thead .sorting_asc_disabled::before,
html body table.dataTable thead .sorting_desc_disabled::before {
  display: none !important;
}

/* Body-Cells: konsistente Höhe, vertikal mittig */
html body table.dataTable tbody td,
html body table.table tbody td,
html body .table > tbody > tr > td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--op-border-light, #e2e8f0) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Subtile Zebra-Streifen — nicht zu hart, sonst wird's unruhig.
   Nur im echten Tabellen-Modus: sobald JS Card-Roles vergibt
   (data-card-role auf td), greift die Hybrid-Card-View und Zebra
   sieht aus wie "graue Felder zwischen weissen". */
html body table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > td:not([data-card-role]),
html body table.table-striped > tbody > tr:nth-of-type(odd) > td:not([data-card-role]) {
  background-color: rgba(248, 250, 252, 0.6) !important;
}

/* BS5 verwendet zusätzlich box-shadow inset 0 0 0 9999px var(--bs-table-bg-…)
   für Tabellen-Hintergrundfarben (striped/hover/active). Im Card-Mode
   produziert das unerwünschte graue Felder. Box-shadow auf Card-Cells
   nullen, damit nur unser eigenes Card-CSS die Optik bestimmt. */
html body table.dataTable > tbody > tr > td[data-card-role],
html body table.table-datatable > tbody > tr > td[data-card-role],
html body table.op-mobile-cards-target > tbody > tr > td[data-card-role] {
  box-shadow: none !important;
}

/* Hover-State: deutlich aber dezent */
html body table.dataTable.table-hover > tbody > tr:hover > td,
html body table.table-hover > tbody > tr:hover > td,
html body table.dataTable > tbody > tr:hover > td,
html body table.table > tbody > tr:hover > td {
  background-color: rgba(141, 185, 81, 0.06) !important;
  cursor: default;
}

/* Row mit Klickfunktion: cursor-Pointer */
html body table.dataTable > tbody > tr.clickable > td,
html body table.dataTable > tbody > tr[data-href] > td,
html body table tr[onclick] > td {
  cursor: pointer !important;
}

/* DataTables-Filter & Length-Toolbar polish */
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter {
  margin-bottom: 16px !important;
}
html body .dataTables_wrapper .dataTables_length label,
html body .dataTables_wrapper .dataTables_filter label {
  font-size: 13px !important;
  color: var(--op-text-muted, #64748b) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input[type=search] {
  border: 1px solid var(--op-border, #d1d5db) !important;
  border-radius: var(--op-radius, 8px) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  background-color: white !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}
html body .dataTables_wrapper .dataTables_length select:focus,
html body .dataTables_wrapper .dataTables_filter input[type=search]:focus {
  outline: 0 !important;
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.15) !important;
}

/* Per-Column-Filter-Inputs (die zweite Header-Reihe) */
html body table.dataTable thead tr.column-filter-row th,
html body table.dataTable thead tr:nth-child(2) th input,
html body table.dataTable thead tr:nth-child(2) th select {
  padding: 6px 8px !important;
}
html body table.dataTable thead tr:nth-child(2) th {
  background-color: var(--op-surface, #fff) !important;
  border-bottom: 1px solid var(--op-border-light, #e2e8f0) !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
html body table.dataTable thead tr:nth-child(2) th input,
html body table.dataTable thead tr:nth-child(2) th select {
  width: 100% !important;
  border: 1px solid var(--op-border, #d1d5db) !important;
  border-radius: var(--op-radius-sm, 4px) !important;
  font-size: 12px !important;
  background: white !important;
}

/* Pagination: cleaner Buttons */
html body .dataTables_wrapper .dataTables_paginate {
  margin-top: 16px !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  margin: 0 2px !important;
  border-radius: var(--op-radius, 8px) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--op-text-muted, #475569) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
  cursor: pointer !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background-color: var(--op-border-light, #f1f5f9) !important;
  color: var(--op-text, #0f172a) !important;
  border-color: var(--op-border, #e2e8f0) !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background-color: var(--op-primary, #8db951) !important;
  color: white !important;
  border-color: var(--op-primary, #8db951) !important;
  font-weight: 600 !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.active:hover {
  background-color: var(--op-primary-dark, #6f9a3c) !important;
  color: white !important;
  border-color: var(--op-primary-dark, #6f9a3c) !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5 !important;
  cursor: default !important;
  color: var(--op-text-subtle, #94a3b8) !important;
}
/* Length-Select größer + lesbarer (war 75px×32px, oft "10" / "Alle" abgeschnitten) */
html body .dataTables_wrapper .dataTables_length select {
  min-width: 80px !important;
  height: 36px !important;
  padding: 6px 28px 6px 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  /* native dropdown-arrow zeigen */
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
html body .dataTables_wrapper .dataTables_length label {
  color: var(--op-text, #1e293b) !important;
  font-weight: 500 !important;
}

/* =============================================================
 * Phase 65 — Header-Brand "Online Planer V1" + Search Icon-only
 *
 * User wollte: kein langes Suchfeld mehr ganz links — stattdessen
 * "Online Planer V1" als Brand-Text dort, Suche wird zum Icon-Button.
 * ============================================================= */
html body #header .op-brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 54px;
  font-weight: 700;
  font-size: 17px;
  color: var(--op-text, #0f172a);
  letter-spacing: -0.2px;
  flex: 0 0 auto;
  white-space: nowrap;
  user-select: none;
}
html body #header .op-brand-title .op-brand-name {
  color: var(--op-text, #0f172a);
}
html body #header .op-brand-title .op-brand-version {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--op-primary, #8db951), var(--op-primary-dark, #6f9a3c));
  color: white;
  border-radius: 999px;
  text-transform: uppercase;
}
@media (max-width: 991px) {
  html body #header .op-brand-title {
    padding: 0 10px;
    font-size: 15px;
  }
}

/* Search wird Desktop-weit zum Icon-only Button — Inline-Input weg.
 * Phase 65b: Search-Include sitzt jetzt INSIDE .float-end nach #hide-menu mit
 * Klasse btn-header.float-end (matcht andere Toolbar-Items) → natürliches
 * float:right-Geschwister-Verhalten. SmartAdmin's .btn-header default ist
 * 40px breit aber ohne fixe Width, deshalb explizit setzen. */
html body #op-search-wrap.btn-header,
html body #header #op-search-wrap.btn-header {
  width: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
}
html body #op-search-wrap.btn-header .op-search-mobile-trigger {
  width: 100% !important;
  height: 100% !important;
}
html body .op-search-mobile-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  color: var(--op-text-muted, #475569) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}
html body .op-search-mobile-trigger:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--op-text, #0f172a) !important;
}
html body .op-search-inner {
  display: none !important;
}
/* Wenn Mobile-Open Klasse aktiv: Overlay anzeigen — gilt jetzt auch auf Desktop */
html body #op-search-wrap.op-search-wrap--mobile-open .op-search-inner {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 1100 !important;
  padding: 80px 16px 16px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
html body #op-search-wrap.op-search-wrap--mobile-open .op-search-mobile-close {
  display: flex !important;
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  background: white !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  color: var(--op-text, #0f172a) !important;
  text-decoration: none !important;
  z-index: 1101 !important;
}
html body #op-search-wrap.op-search-wrap--mobile-open .op-search-icon {
  position: absolute !important;
  left: calc(50% - 280px) !important;
  top: 96px !important;
  color: var(--op-text-muted, #64748b) !important;
  z-index: 1102 !important;
}
html body #op-search-wrap.op-search-wrap--mobile-open #op-search-input {
  flex: 0 0 600px !important;
  max-width: 600px !important;
  height: 48px !important;
  padding: 0 16px 0 44px !important;
  font-size: 15px !important;
  background: white !important;
  border: 1px solid var(--op-border, #e2e8f0) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
html body #op-search-wrap.op-search-wrap--mobile-open #op-search-input:focus {
  outline: none !important;
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
html body #op-search-wrap.op-search-wrap--mobile-open .op-search-results {
  position: absolute !important;
  top: 156px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  max-width: calc(100vw - 32px) !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
  max-height: calc(100vh - 180px) !important;
  z-index: 1102 !important;
}
@media (max-width: 600px) {
  html body #op-search-wrap.op-search-wrap--mobile-open .op-search-icon {
    left: 28px !important;
  }
  html body #op-search-wrap.op-search-wrap--mobile-open #op-search-input {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  html body #op-search-wrap.op-search-wrap--mobile-open .op-search-results {
    width: calc(100% - 32px) !important;
    transform: none !important;
    left: 16px !important;
  }
}

/* Row-Selection (DataTables-Select Plugin) */
html body table.dataTable tr.selected td,
html body table.dataTable tr.selected:hover td {
  background-color: rgba(141, 185, 81, 0.12) !important;
  border-color: var(--op-primary-light, #b3d077) !important;
}

/* "Keine Daten" / leere Tabelle */
html body table.dataTable tbody td.dataTables_empty {
  padding: 36px !important;
  text-align: center !important;
  color: var(--op-text-muted, #64748b) !important;
  font-size: 14px !important;
  font-style: italic;
}

/* Action-Cell (typisch letzte Spalte mit Edit/Delete-Buttons) */
html body table.dataTable tbody td.actions,
html body table tbody td:last-child .btn-group {
  white-space: nowrap !important;
}

/* Mobile: Tabellen werden eh zu Cards via op-mobile-cards.js,
   aber für Tabellen ohne Mobile-Card-Mode (z.B. Detail-Pages):
   horizontal scrollen statt zerbrechen */
@media (max-width: 767px) {
  html body .dataTables_wrapper {
    overflow-x: auto !important;
  }
  html body table.dataTable thead th,
  html body table.dataTable tbody td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
}

/* =============================================================
 * Phase 64 — Card-Doppelung beseitigen (User-Feedback 2026-04-26)
 *
 * Drei Ursachen für visuell verschachtelte/doppelte Cards:
 *
 * (a) Page-Title-Row ist via SmartAdmin-Skin
 *     `.smart-style-4 #content > .row:first-child` mit pure white background +
 *     border-bottom belegt. Wirkt wie eigene Card oberhalb der eigentlichen
 *     Content-Card. Modern: Page-Heading sitzt direkt auf Page-Background.
 *
 * (b) Phase-X-Regel `.card, article` machte JEDES <article>-Element zur Card
 *     (white bg + radius + shadow). Wenn ein <article> einen <.jarviswidget>
 *     wrappt — Standard-Pattern in vielen pages/*.blade.php — entstand
 *     Card-in-Card.
 *
 * (c) Filter-Toolbar in <article>-Wrapper (z.B. orders.blade.php Z.335) hatte
 *     eigene Card-Optik trotz inhaltlicher Zugehörigkeit zur Table-Card drunter.
 * ============================================================= */

/* (a) Page-Title-Row entkartet — sitzt auf Page-Background, behält nur Padding-Rhythmus */
html body.smart-style-4 #content > .row:first-child,
html body #content > .row:first-child {
  background: transparent !important;
  border-bottom: 0 !important;
  margin: 0 -12px 16px !important;
  padding: 6px 0 !important;
}

/* (b) <article> hat per default KEINE Card-Optik mehr — egal mit welchen Bootstrap-
 *     col-*-Klassen. SmartAdmin-Markup nutzt <article> als generischer Layout-Container
 *     (1-Spalten, 2-Spalten, 3-Spalten Dashboards), nie als visuelle Card.
 *     Card-Optik kommt vom inneren .jarviswidget oder explizitem .card. */
html body article {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* (b1) Phase 78: <article> als Bootstrap-Column-Wrapper braucht Gutter-Padding,
 *      sonst kleben die Spalten horizontal aneinander (0px Lücke).
 *      Stellt das Bootstrap-Standard-Gutter (12px je Seite = 24px Gap) wieder her. */
html body .row > article[class*="col-"],
html body .row > article.col {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

/* Filter-Toolbar (article ohne jarviswidget drin) bekommt schlanken Frame
 * — visuell weniger dominant als eine vollwertige Card */
html body article.col-sm-12:has(form.orders-filter-form),
html body article.col-md-12:has(form.orders-filter-form),
html body article:has(.orders-filter-form),
html body article:has(> form):not(:has(.jarviswidget)) {
  background: var(--op-surface, #fff) !important;
  border: 1px solid var(--op-border-light, #f1f5f9) !important;
  border-radius: var(--op-radius, 10px) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}

/* (c) Wenn article direkt jarviswidget enthält → article komplett transparent,
 *     jarviswidget ist die einzige Card. Spacing zwischen gestackten Widgets:
 *     margin-bottom (Phase 78). Letztes Widget: kein Bottom-Gap. */
html body article > .jarviswidget,
html body article > div > .jarviswidget {
  margin: 0 0 var(--op-space-5) 0 !important;
}
html body article > .jarviswidget:last-child,
html body article > div > .jarviswidget:last-child {
  margin-bottom: 0 !important;
}

/* (e) widget-body (= direktes <div> Kind von .jarviswidget unterhalb des Headers)
 *     hatte eigenes background:white + radius 0/0/10/10 + borders → Card-in-Card
 *     Innerhalb jarviswidget: transparenter BG, keine Borders, kein Radius. */
html body .jarviswidget > div:not(header):not(.jarviswidget-editbox):not(.jarviswidget-loader),
html body .jarviswidget > .widget-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Falls trotzdem doppelter Frame entsteht (jarviswidget mit eigenem Border
 * innerhalb einer .card oder eines anderen jarviswidget): inneren entkleiden */
html body .jarviswidget .jarviswidget,
html body .card .jarviswidget,
html body .tab-content .jarviswidget {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* DataTables-Wrapper (oft nested in jarviswidget) niemals als eigene Card rendern */
html body .jarviswidget .dataTables_wrapper,
html body article .dataTables_wrapper,
html body .card .dataTables_wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* (d) tab-content innerhalb von jarviswidget hat eigene Borders + bottom-radius
 *     gehabt → wirkte wie 2. Card unter den Tabs. Eingebettet in den
 *     jarviswidget-Frame: keine eigenen Borders, transparenter BG (jarviswidget-BG
 *     scheint durch), kein bottom-radius. Tabs und Content sind eine Card. */
html body .jarviswidget .tab-content,
html body article .tab-content,
html body .card .tab-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* nav-tabs margin-bottom reduzieren — kein visueller Spalt zwischen
 * Tabs und Content innerhalb derselben Card */
html body .jarviswidget > .nav-tabs,
html body .jarviswidget .nav-tabs,
html body article .nav-tabs,
html body .card .nav-tabs {
  margin-bottom: 0 !important;
}

/* =============================================================
 * Phase 66 — Wagenliste/Triebfahrzeuge Editor-Tables Mobile-Fix
 *
 * Diese 2 Tabellen (#railcars-table + #wagons-table in
 * partials/order/fieldset-train.blade.php) sind Editor-Tabellen mit
 * Multi-Row-Headers + Inline-Inputs, NICHT Daten-Display-Tables. Mobile-
 * Card-Transformation (op-mobile-cards.js) erzeugte überlappende Anzeigen.
 * Lösung: op-skip-cards-Class auf Tabellen + Mobile horizontal-scroll
 * mit Schatten-Cue als Hinweis auf scroll-Möglichkeit.
 * ============================================================= */
@media (max-width: 768px) {
  html body #railcars-table .table-responsive,
  html body #wagons-table .table-responsive,
  html body #railcars-table .railcars,
  html body #wagons-table .wagons {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Schatten-Cue: zeigt visuell dass es horizontal scrollbar ist */
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), transparent) 100% 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: local, local, scroll, scroll !important;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  }
  html body #railcars-table table.table,
  html body #wagons-table table.table {
    min-width: 800px !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  html body #railcars-table table.table th,
  html body #railcars-table table.table td,
  html body #wagons-table table.table th,
  html body #wagons-table table.table td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  /* Add-Row-Buttons unter der Tabelle volle Breite, nicht in scroll-Bereich */
  html body #railcars-table fieldset > .btn,
  html body #wagons-table fieldset > .btn,
  html body #railcars-table .add-row-buttons,
  html body #wagons-table .add-row-buttons {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  /* Sicherstellen dass op-skip-cards-Tables nicht display:block werden
   * (op-mobile-cards.css könnte das forcieren) */
  html body table.op-skip-cards {
    display: table !important;
  }
  html body table.op-skip-cards thead {
    display: table-header-group !important;
  }
  html body table.op-skip-cards tbody {
    display: table-row-group !important;
  }
  html body table.op-skip-cards tr {
    display: table-row !important;
  }
  html body table.op-skip-cards th,
  html body table.op-skip-cards td {
    display: table-cell !important;
  }
}

/* =============================================================
 * Phase 67-Polish — Card-View Cleanup
 *
 * Fix 2: Hidden cells (DataTables-Sort-Hilfen, Timestamps in span.hidden)
 * Fix 3: Action-Buttons als Card-Footer
 * Fix 4: Status-Pills nebeneinander statt gestackt
 * Fix 6: Per-Column-Filter-Row immer hidden in Card-View
 * Fix 8: Empty-Header-Cells (#, ?, *) hidden
 * ============================================================= */

/* Fix 2 + 8: Cells mit op-card-hidden (durch JS markiert) komplett aus Card raus */
html body table.dataTable > tbody > tr > td.op-card-hidden,
html body table.table-datatable > tbody > tr > td.op-card-hidden,
html body table.op-mobile-cards-target > tbody > tr > td.op-card-hidden {
  display: none !important;
}

/* Fix 3: Action-Buttons-Cell als Card-Footer */
html body table.dataTable > tbody > tr > td.op-card-actions,
html body table.table-datatable > tbody > tr > td.op-card-actions,
html body table.op-mobile-cards-target > tbody > tr > td.op-card-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 12px 0 0 0 !important;
  margin-top: 10px !important;
  border-top: 1px solid var(--op-border-light, #f1f5f9) !important;
  border-bottom: 0 !important;
  text-align: right !important;
  min-height: 0 !important;
}
html body table.dataTable > tbody > tr > td.op-card-actions::before,
html body table.table-datatable > tbody > tr > td.op-card-actions::before,
html body table.op-mobile-cards-target > tbody > tr > td.op-card-actions::before {
  display: none !important;
}
/* Action-Buttons sollen sich nicht stretchen */
html body table.dataTable > tbody > tr > td.op-card-actions .btn,
html body table.dataTable > tbody > tr > td.op-card-actions .btn-group,
html body table.dataTable > tbody > tr > td.op-card-actions .dropdown {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Fix 4: Status-Pills (mehrere Buttons in einer cell) nebeneinander, nicht stacked */
html body table.dataTable > tbody > tr > td:has(> .btn + .btn),
html body table.table-datatable > tbody > tr > td:has(> .btn + .btn),
html body table.op-mobile-cards-target > tbody > tr > td:has(> .btn + .btn) {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
html body table.dataTable > tbody > tr > td:has(> .btn + .btn) > .btn,
html body table.table-datatable > tbody > tr > td:has(> .btn + .btn) > .btn,
html body table.op-mobile-cards-target > tbody > tr > td:has(> .btn + .btn) > .btn {
  flex: 0 0 auto !important;
  margin: 0 4px 4px 0 !important;
}

/* Fix 6: Per-Column-Filter-Inputs (tr.hasinput) UND erste thead-row (Sammelauftrag-Title)
   immer hidden in Card-View — nicht nur ≤768px */
html body table.dataTable > thead > tr.hasinput,
html body table.dataTable > thead > tr:first-child:not(:last-child),
html body table.table-datatable > thead > tr.hasinput,
html body table.table-datatable > thead > tr:first-child:not(:last-child),
html body table.op-mobile-cards-target > thead > tr.hasinput,
html body table.op-mobile-cards-target > thead > tr:first-child:not(:last-child) {
  display: none !important;
}
/* Letzte thead-row (Labels) ebenfalls hidden — Labels sind via data-label auf cells */
html body table.dataTable > thead > tr:last-child,
html body table.table-datatable > thead > tr:last-child,
html body table.op-mobile-cards-target > thead > tr:last-child {
  display: none !important;
}

/* Card-Heights gleich-richten (Grid auto-rows max-content statt 1fr) */
@media (min-width: 769px) {
  html body table.dataTable > tbody,
  html body table.table-datatable > tbody,
  html body table.op-mobile-cards-target > tbody {
    align-items: start !important;
    grid-auto-rows: max-content !important;
  }
}

/* Card padding/margin konsistent */
html body table.dataTable > tbody > tr,
html body table.table-datatable > tbody > tr,
html body table.op-mobile-cards-target > tbody > tr {
  padding: 14px 16px !important;
  border-radius: 12px !important;
}
/* Cell-Padding kompakter, weniger Höhe pro Reihe */
html body table.dataTable > tbody > tr > td:not(.op-card-actions):not(.op-card-hidden),
html body table.table-datatable > tbody > tr > td:not(.op-card-actions):not(.op-card-hidden),
html body table.op-mobile-cards-target > tbody > tr > td:not(.op-card-actions):not(.op-card-hidden) {
  padding: 6px 0 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}

/* =============================================================
 * Phase 68b — P1 Accessibility (CRITICAL pro UI/UX-Pro-Max §1)
 *
 * Findings aus AUDIT-FINDINGS.md:
 * - P1-1 Focus-Rings konsistent (WCAG 2.4.7)
 * - P1-3 prefers-reduced-motion (WCAG 2.3.3)
 * - P1-4 Color-Contrast 4.5:1 (WCAG 1.4.3)
 * - P1-5 Skip-to-Main-Content (WCAG 2.4.1)
 * (P1-2 aria-labels in Blade-Templates separat)
 * ============================================================= */

/* P1-1 — Focus-Rings konsistent für alle interaktiven Elemente.
 * Bootstrap 5 + SmartAdmin removen Default-Outline auf vielen Elementen.
 * Wir bringen es zurück mit Brand-Grün, 2px, offset 2px. */
html body *:focus-visible {
  outline: 2px solid var(--op-primary, #8db951) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
html body .btn:focus-visible,
html body .form-control:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body a:focus-visible,
html body button:focus-visible {
  outline: 2px solid var(--op-primary, #8db951) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(141, 185, 81, 0.15) !important;
}

/* P1-3 — prefers-reduced-motion: User-System-Setting respektieren.
 * Animations + Transitions auf quasi-instant setzen, scroll-behavior auf auto. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html body .toast,
  html body .modal,
  html body .op-fab,
  html body .skeleton-loader {
    animation: none !important;
    transition: none !important;
  }
}

/* P1-4 — Color-Contrast: muted-text-color auf 4.5:1 bringen.
 * Vorher #94a3b8 auf weiß = 3.2:1 (FAIL).
 * Nachher #64748b auf weiß = 5.2:1 (PASS WCAG AA Body).
 * Der Token --op-text-subtle wird in :root überschrieben + alle hardcoded Stellen. */
html body {
  --op-text-subtle: #64748b;  /* override des Phase-57-Tokens (war #94a3b8) */
}
/* Hardcoded Werte die noch in op-theme.css liegen (von früheren Phasen) — alle
 * Stellen die für TEXT verwendet wurden bekommen den besseren Kontrast: */
html body .footer-text,
html body .op-search-result-sublabel,
html body .breadcrumb-page-subtitle,
html body .op-card-meta {
  color: #64748b !important;  /* statt #94a3b8 */
}

/* P1-5 — Skip-to-Main-Content Link (CSS).
 * HTML in layout.blade.php als erstes body-Element. Default unsichtbar,
 * wird beim Tab-Focus visible (top-left, hoher Kontrast). */
html body .op-skip-link {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  padding: 12px 20px !important;
  background: var(--op-primary-dark, #6f9a3c) !important;
  color: white !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  z-index: 9999 !important;
  border-radius: 0 0 8px 0 !important;
  transition: top 0.2s ease !important;
}
html body .op-skip-link:focus,
html body .op-skip-link:focus-visible {
  top: 0 !important;
}

/* =============================================================
 * Phase 69 — Visual System (Color, Typography, Spacing-Polish)
 *
 * P3-3 Required-Indicators, P3-7 Spacing-Scale konsistent,
 * P3-8 Tabular-Numbers für Daten-Cells, P2-5 Status-Pills consistency
 * ============================================================= */

/* P3-8 — Tabular-Numbers für Geld-/Zähler-Spalten.
 * font-variant-numeric: tabular-nums verhindert Layout-Shift bei
 * verschieden langen Zahlen (z.B. "1.000,00 €" vs "999,00 €"). */
html body td[data-label*="msatz"],
html body td[data-label*="reis"],
html body td[data-label*="etrag"],
html body td[data-label*="hl"],
html body td[data-label*="atum"],
html body td[data-label*="hrzeit"],
html body td[data-label*="elefon"],
html body .op-tabular-nums,
html body table.dataTable > tbody > tr > td:not(.op-card-actions)::after {
  font-variant-numeric: tabular-nums !important;
}
/* DataTables-Cells generell für numerische Werte */
html body table.dataTable.text-tabular > tbody > tr > td {
  font-variant-numeric: tabular-nums !important;
}

/* P3-3 — Required-Indicator: pflicht-Felder mit rotem Stern nach Label */
html body label.required::after,
html body label.label.required::after,
html body .form-group.required > label::after {
  content: " *";
  color: var(--op-danger, #dc2626);
  font-weight: 700;
}

/* P2-5 — Status-Pills (mehrere btn-Pills in einer Cell): einheitliches
 * inline-flex layout, gleichmäßiges Wrap. Konsistente Größen. */
html body td .btn,
html body td .badge,
html body .op-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* P3-7 — Spacing-Scale konsolidiert. Pre-existing Phase 57.2 Tokens nutzen.
 * Keine direkten Hardcodes mehr für padding/margin in neuen Sektionen. */
:root {
  --op-space-xs: 4px;
  --op-space-sm: 8px;
  --op-space-md: 16px;
  --op-space-lg: 24px;
  --op-space-xl: 32px;
  --op-space-2xl: 48px;
}

/* =============================================================
 * Phase 70 — Forms & Feedback Polish
 *
 * P2-1 Touch-Targets ≥44px Mobile, P3-3 Required, P3-4 Success-Toast,
 * P3-5 Empty-States, P3-6 Confirmation-Dialogs (CSS), Helper-Text
 * ============================================================= */

/* P2-1 — Mobile Touch-Targets ≥44px (BS5-Default 38px ist zu klein) */
@media (max-width: 768px) {
  html body .form-control,
  html body .form-select,
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="number"],
  html body input[type="password"],
  html body input[type="date"],
  html body input[type="datetime-local"],
  html body select,
  html body textarea,
  html body .btn:not(.btn-sm):not(.btn-xs) {
    min-height: 44px !important;
    font-size: 16px !important;  /* verhindert iOS-Auto-Zoom */
  }
  html body .btn-sm {
    min-height: 38px !important;
  }
}

/* Helper-Text-Style (für inline-Hint unter Inputs) */
html body .form-helper-text,
html body .input-helper {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--op-text-muted, #475569);
  line-height: 1.4;
}

/* Read-Only-Distinction (vs Disabled) */
html body input[readonly],
html body textarea[readonly],
html body .form-control[readonly] {
  background-color: var(--op-bg, #f8fafc) !important;
  color: var(--op-text, #1e293b) !important;
  cursor: text !important;
  border-color: var(--op-border-light, #f1f5f9) !important;
}
html body input[disabled],
html body .form-control:disabled,
html body .btn:disabled,
html body .btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* P3-5 — Empty-States Polish */
html body .op-empty-state,
html body .empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--op-text-muted, #475569);
}
html body .op-empty-state-icon,
html body .empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--op-bg, #f8fafc) 0%, var(--op-border-light, #e2e8f0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-text-subtle, #64748b);
  font-size: 28px;
}
html body .op-empty-state-title,
html body .empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--op-text, #0f172a);
  margin-bottom: 6px;
}
html body .op-empty-state-subtitle,
html body .empty-state-subtitle {
  font-size: 14px;
  color: var(--op-text-muted, #475569);
  margin-bottom: 16px;
}

/* Loading-State Indicator auf Submit-Buttons */
html body .btn.is-loading,
html body button[type="submit"].is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
html body .btn.is-loading::after,
html body button[type="submit"].is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: op-spin 0.6s linear infinite;
  color: white;
}
@keyframes op-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================
 * Phase 71 — Navigation & IA
 *
 * P2-6 Sidebar-Active-Parent, P2-7 Search-clarity
 * ============================================================= */

/* P2-6 — Sidebar Parent-Item-Indicator wenn Sub-Item aktiv */
html body nav ul li.has-active-child > a,
html body nav ul li:has(> ul li.active) > a {
  color: var(--op-primary, #8db951) !important;
  font-weight: 600 !important;
}
html body nav ul li:has(> ul li.active) > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--op-primary, #8db951);
  border-radius: 0 2px 2px 0;
}

/* P2-7 — Search-Input-Clarity: bessere Placeholder + Icon-Hint */
html body .dataTables_filter input[type=search]::placeholder {
  color: var(--op-text-subtle, #64748b);
  font-style: italic;
  font-size: 13px;
}
html body .dataTables_filter::before {
  content: "\f002";  /* fa-search */
  font-family: 'FontAwesome';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--op-text-subtle, #64748b);
  pointer-events: none;
  z-index: 1;
}
html body .dataTables_filter {
  position: relative;
}
html body .dataTables_filter input[type=search] {
  padding-left: 32px !important;
}

/* Modal-Escape: visuell klar dass ESC schließt + click-outside */
html body .modal-dialog .modal-header .btn-close,
html body .modal-dialog .modal-header [data-bs-dismiss="modal"] {
  cursor: pointer !important;
}
html body .modal-backdrop {
  cursor: pointer;
}

/* =============================================================
 * Phase 72 — Performance & Animation
 *
 * P4-3 Spring-Easing, P4-5 Scale-Feedback auf Press, P4-4 Stagger
 * ============================================================= */

/* P4-3 — Easing-Curves: ease-out für Enter, ease-in für Exit */
html body .btn,
html body .card,
html body .nav-link,
html body input,
html body select,
html body .form-control,
html body .dropdown-item {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;  /* ease-out-expo, natural feel */
}
html body .modal,
html body .toast,
html body .dropdown-menu {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;  /* ease-in-out */
}

/* P4-5 — Scale-Feedback auf Press (subtle, 0.97 — kein Layout-Shift) */
html body .btn:active:not(:disabled):not(.disabled),
html body button:active:not(:disabled),
html body a.btn:active,
html body table.dataTable > tbody > tr:active {
  transform: scale(0.97);
  transition-duration: 75ms;
}

/* P4-4 — Stagger-Animation für Card-Entrance (subtle) */
@keyframes op-card-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  html body table.dataTable > tbody > tr:not(.op-card-hidden) {
    animation: op-card-fade-in 0.3s ease-out backwards;
  }
  html body table.dataTable > tbody > tr:nth-child(1) { animation-delay: 0ms; }
  html body table.dataTable > tbody > tr:nth-child(2) { animation-delay: 30ms; }
  html body table.dataTable > tbody > tr:nth-child(3) { animation-delay: 60ms; }
  html body table.dataTable > tbody > tr:nth-child(4) { animation-delay: 90ms; }
  html body table.dataTable > tbody > tr:nth-child(5) { animation-delay: 120ms; }
  html body table.dataTable > tbody > tr:nth-child(6) { animation-delay: 150ms; }
  html body table.dataTable > tbody > tr:nth-child(7) { animation-delay: 180ms; }
  html body table.dataTable > tbody > tr:nth-child(8) { animation-delay: 210ms; }
  html body table.dataTable > tbody > tr:nth-child(9) { animation-delay: 240ms; }
  html body table.dataTable > tbody > tr:nth-child(n+10) { animation-delay: 270ms; }
}

/* =============================================================
 * Phase 73 — Charts & Data Light Polish
 *
 * P4-6 Tooltips/Legends/Empty-States für Chart.js v2.
 * Tiefere Updates blockt Phase 9 (chart.js 2→4).
 * ============================================================= */

/* Chart-Container mit Empty-State */
html body .op-chart-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--op-text-subtle, #64748b);
  border: 1px dashed var(--op-border, #e2e8f0);
  border-radius: var(--op-radius, 8px);
  background: var(--op-bg, #f8fafc);
}

/* Number-Format-Hint für Chart-Tooltips (CSS-only Polish) */
html body .chartjs-tooltip,
html body .chartjs-tooltip-key,
html body .chartjs-tooltip-value {
  font-variant-numeric: tabular-nums !important;
}

/* Loading-Skeleton für Charts */
html body .op-chart-skeleton {
  background: linear-gradient(
    90deg,
    var(--op-border-light, #f1f5f9) 0%,
    var(--op-bg, #f8fafc) 50%,
    var(--op-border-light, #f1f5f9) 100%
  );
  background-size: 200% 100%;
  animation: op-skeleton-pulse 1.5s ease-in-out infinite;
  height: 200px;
  border-radius: var(--op-radius, 8px);
}
@keyframes op-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================
 * Phase 60 — Bulk-Actions auf Card-Listen
 *
 * Checkbox-Overlay pro Card (top-left, leicht versetzt) + Sticky-
 * Toolbar oben am Container. Aktiv für .table-datatable + .dataTable
 * (alle Listen-Tables, NICHT Editor-Tables mit op-skip-cards).
 * ============================================================= */

/* Card-Position: relative damit Checkbox absolute kann */
html body table.dataTable > tbody > tr,
html body table.table-datatable > tbody > tr {
  position: relative !important;
}

/* Checkbox-Overlay top-left auf jeder Card */
html body .op-bulk-checkbox {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .op-bulk-checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
html body .op-bulk-checkbox-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--op-border-strong, #cbd5e1);
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body .op-bulk-checkbox:hover .op-bulk-checkbox-mark {
  border-color: var(--op-primary, #8db951);
  background: rgba(141, 185, 81, 0.05);
}
html body .op-bulk-checkbox input:checked + .op-bulk-checkbox-mark {
  background: var(--op-primary, #8db951);
  border-color: var(--op-primary, #8db951);
}
html body .op-bulk-checkbox input:checked + .op-bulk-checkbox-mark::after {
  content: "\f00c"; /* fa-check */
  font-family: "FontAwesome";
  color: white;
  font-size: 12px;
  font-weight: 700;
}
html body .op-bulk-checkbox input:focus-visible + .op-bulk-checkbox-mark {
  outline: 2px solid var(--op-primary, #8db951);
  outline-offset: 2px;
}

/* Selected card highlight */
html body table.dataTable > tbody > tr.op-bulk-selected,
html body table.table-datatable > tbody > tr.op-bulk-selected {
  background: rgba(141, 185, 81, 0.04) !important;
  border-color: var(--op-primary, #8db951) !important;
  box-shadow: 0 0 0 2px rgba(141, 185, 81, 0.15) !important;
}

/* Card-Padding-left rückt rein damit Checkbox nicht überlappt mit Inhalt */
html body table.dataTable > tbody > tr:has(> .op-bulk-checkbox),
html body table.table-datatable > tbody > tr:has(> .op-bulk-checkbox) {
  padding-left: 44px !important;
}

/* Sticky Bulk-Toolbar — kollabiert wenn keine Auswahl (Phase 79) */
html body .op-bulk-toolbar {
  position: sticky;
  top: 60px;  /* unter dem fixed-Header (54-60px) */
  z-index: 90;
  background: white;
  border: 1px solid var(--op-border, #e5e7eb);
  border-radius: var(--op-radius, 10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease-out, transform 200ms ease-out,
              max-height 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out,
              visibility 0s linear 200ms;
}
html body .op-bulk-toolbar.op-bulk-toolbar--active {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  overflow: visible;
  margin-bottom: 12px;
  padding: 10px 14px;
  transform: translateY(0);
  transition-delay: 0s;
}
html body .op-bulk-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
html body .op-bulk-toolbar .op-bulk-count {
  font-weight: 600;
  font-size: 13px;
  color: var(--op-text, #1e293b);
  font-variant-numeric: tabular-nums;
}
html body .op-bulk-toolbar .op-bulk-deselect {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--op-border-light, #f1f5f9);
  border: 0;
  border-radius: 50%;
  color: var(--op-text-muted, #475569);
  cursor: pointer;
}
html body .op-bulk-toolbar .op-bulk-deselect:hover {
  background: var(--op-border, #e5e7eb);
}
html body .op-bulk-toolbar .op-bulk-select-all {
  background: transparent;
  border: 1px solid var(--op-border, #e5e7eb);
  color: var(--op-text-muted, #475569);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--op-radius, 8px);
}
html body .op-bulk-toolbar .op-bulk-actions-spacer {
  flex: 1 1 auto;
}
html body .op-bulk-toolbar .op-bulk-action {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
}
html body .op-bulk-toolbar .op-bulk-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile: weniger sticky-padding */
@media (max-width: 768px) {
  html body .op-bulk-toolbar {
    top: 56px;
    margin: 0 -8px 12px;
    border-radius: 0;
  }
  html body .op-bulk-toolbar .op-bulk-action {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =============================================================
 * Phase 74 — Hybrid Card-View (Config-Driven Layout)
 *
 * Greift NUR wenn op-mobile-cards.js Cells mit data-card-role
 * markiert hat. Tabellen ohne Klassifizierung bleiben auf
 * Phase-67a-Verhalten (kein Bruch).
 * ============================================================= */

/* tr wird interner Grid-Container statt block-stack */
html body table.dataTable > tbody > tr:has(td[data-card-role]),
html body table.table-datatable > tbody > tr:has(td[data-card-role]),
html body table.op-mobile-cards-target > tbody > tr:has(td[data-card-role]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 12px !important;
  align-items: start !important;
}

/* Title — groß, fett, oben über volle Breite, ohne Label */
html body td[data-card-role="title"] {
  grid-column: 1 / -1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--op-text-strong, #0f172a) !important;
  border-bottom: 0 !important;
  padding: 0 0 2px 0 !important;
  text-align: left !important;
  display: block !important;
}
html body td[data-card-role="title"]::before { display: none !important; }

/* Subtitle — grau, klein, unter Title über volle Breite */
html body td[data-card-role="subtitle"] {
  grid-column: 1 / -1 !important;
  font-size: 12px !important;
  color: var(--op-text-subtle, #64748b) !important;
  border-bottom: 1px solid var(--op-border-light, #f1f3f5) !important;
  padding: 0 0 8px 0 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  display: block !important;
}
html body td[data-card-role="subtitle"]::before { display: none !important; }

/* Short — Label oben, Value drunter, 2-spaltig (auto-fill via grid) */
html body td[data-card-role="short"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  border-bottom: 0 !important;
  padding: 4px 0 !important;
}
html body td[data-card-role="short"]::before {
  content: attr(data-label) !important;
  flex: none !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--op-text-muted, #6c757d) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
}

/* Wide — Label oben, Value drunter, volle Breite */
html body td[data-card-role="wide"] {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  border-top: 1px solid var(--op-border-light, #f1f3f5) !important;
  padding: 6px 0 0 0 !important;
  margin-top: 4px !important;
}
html body td[data-card-role="wide"]::before {
  content: attr(data-label) !important;
  flex: none !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--op-text-muted, #6c757d) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
}

/* Wide-aufeinanderfolgende: nur die erste behält den border-top, weitere ohne */
html body td[data-card-role="wide"] + td[data-card-role="wide"] {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Skip — komplett raus. Spezifitaet erhoeht damit display:flex aus
   table.table-datatable > tbody > tr > td (Phase 74) nicht gewinnt. */
html body table.table-datatable > tbody > tr > td[data-card-role="skip"],
html body table.dataTable > tbody > tr > td[data-card-role="skip"],
html body table.op-mobile-cards-target > tbody > tr > td[data-card-role="skip"] {
  display: none !important;
}

/* Card-View: THEAD ausblenden wenn eine card_config aktiv ist
   (Hybrid-Card-View ist immer aktiv, Header-Spalten bringen nichts
   und stapeln sich gestackt rechts oben - sieht falsch aus).
   Doppelt qualifiziert: matcht die existierende
   "table.table-datatable > thead { display:block !important }" Rule
   plus card_config-Attribute fuer hoehere Spezifitaet. */
html body table.dataTable[data-card-config] > thead,
html body table.table-datatable[data-card-config] > thead,
html body table.op-mobile-cards-target[data-card-config] > thead,
html body table.dataTable[data-card-config] > thead > tr,
html body table.table-datatable[data-card-config] > thead > tr,
html body table.op-mobile-cards-target[data-card-config] > thead > tr {
  display: none !important;
}

/* Card-View: kein Hover-Hintergrund. Mehrere fruehere Rules
   (table.dataTable tr:hover, .dv2-tbl tr:hover, .jarviswidget [data-card-config]
   tr:has(td[data-card-role]):hover) malen sonst alle einen leichten
   gruenen oder grauen BG beim Drueberfahren. Im Card-Layout will der
   User keinen sichtbaren Hover-Block. */
html body table.dataTable > tbody > tr:has(td[data-card-role]):hover,
html body table.dataTable > tbody > tr:has(td[data-card-role]):hover > td,
html body table.table-datatable > tbody > tr:has(td[data-card-role]):hover,
html body table.table-datatable > tbody > tr:has(td[data-card-role]):hover > td,
html body table.op-mobile-cards-target > tbody > tr:has(td[data-card-role]):hover,
html body table.op-mobile-cards-target > tbody > tr:has(td[data-card-role]):hover > td {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Mobile (≤768px): alles single-column */
@media (max-width: 768px) {
  html body table.dataTable > tbody > tr:has(td[data-card-role]),
  html body table.table-datatable > tbody > tr:has(td[data-card-role]),
  html body table.op-mobile-cards-target > tbody > tr:has(td[data-card-role]) {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
 * Phase 75 — Dashboard Redesign Tokens
 * Status-Badges, List-Rows, Meta-Text, Avatar-Pills.
 * Re-uses existing --op-space-*, --op-primary-*, --op-text-* tokens.
 * ============================================================= */

/* Tabular-numbers shorthand (alias to existing .op-tabular-nums) */
.op-num { font-variant-numeric: tabular-nums; }

/* Sekundärer Meta-Text (Datum, Distanz, Ref-Nr.) */
.op-meta {
  color: var(--op-text-subtle);
  font-size: var(--op-text-sm);
  line-height: var(--op-leading-normal);
}

/* Status-Badge (kleines Pill für Auftrag/Tauglichkeit/Worktime-Status) */
.op-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--op-radius-pill);
  font-size: var(--op-text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.op-badge i { font-size: 10px; }
.op-badge--running {
  background: var(--op-primary);
  color: #fff;
  border-color: var(--op-primary-dark);
}
.op-badge--running .op-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  animation: opPulse 1.4s ease-in-out infinite;
}
.op-badge--accepted {
  background: var(--op-warning-bg);
  color: var(--op-warning);
  border-color: rgba(217, 119, 6, 0.25);
}
.op-badge--completed {
  background: var(--op-success-bg);
  color: var(--op-success);
  border-color: rgba(22, 163, 74, 0.25);
}
.op-badge--info {
  background: var(--op-info-bg);
  color: var(--op-info);
  border-color: rgba(2, 132, 199, 0.25);
}
.op-badge--warning {
  background: var(--op-warning-bg);
  color: var(--op-warning);
  border-color: rgba(217, 119, 6, 0.25);
}
.op-badge--danger {
  background: var(--op-danger-bg);
  color: var(--op-danger);
  border-color: rgba(220, 38, 38, 0.25);
}
.op-badge--muted {
  background: var(--op-border-light);
  color: var(--op-text-muted);
  border-color: var(--op-border);
}

@keyframes opPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .op-badge--running .op-badge__dot { animation: none; }
}

/* Avatar-Pill (Initials, Brand-Tint) */
.op-avatar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(var(--op-primary-rgb), 0.15);
  color: var(--op-primary-dark);
  font-size: var(--op-text-sm);
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.op-avatar-pill--sm { width: 24px; height: 24px; font-size: var(--op-text-xs); }

/* List-Row Pattern für Sidebar-Widgets */
.op-list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-3);
  padding: var(--op-space-3) 0;
  border-bottom: 1px solid var(--op-border-light);
}
.op-list-row:last-child { border-bottom: 0; }
.op-list-row__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius);
  background: var(--op-border-light);
  color: var(--op-text-muted);
  flex-shrink: 0;
  font-size: 13px;
}
.op-list-row__icon--success { background: var(--op-success-bg); color: var(--op-success); }
.op-list-row__icon--warning { background: var(--op-warning-bg); color: var(--op-warning); }
.op-list-row__icon--danger  { background: var(--op-danger-bg);  color: var(--op-danger); }
.op-list-row__icon--info    { background: var(--op-info-bg);    color: var(--op-info); }
.op-list-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.op-list-row__title {
  font-size: var(--op-text-base);
  font-weight: 600;
  color: var(--op-text);
  line-height: var(--op-leading-tight);
}
.op-list-row__title a { color: inherit; }
.op-list-row__meta {
  font-size: var(--op-text-sm);
  color: var(--op-text-subtle);
  line-height: var(--op-leading-tight);
}
.op-list-row__aside {
  flex-shrink: 0;
  text-align: right;
  font-size: var(--op-text-sm);
  color: var(--op-text-muted);
  white-space: nowrap;
}

/* Card-Row für Auftrags-Karten in Dashboard-Tabellen
   (jeder TR rendert wie eine vertikale Karte mit Header + Meta + Body) */
.op-order-card {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2);
}
.op-order-card__head {
  display: flex;
  align-items: center;
  gap: var(--op-space-2);
  flex-wrap: wrap;
}
.op-order-card__id {
  font-size: var(--op-text-md);
  font-weight: 700;
  color: var(--op-text);
  text-decoration: none;
}
.op-order-card__id:hover { color: var(--op-primary-dark); }
.op-order-card__station {
  font-weight: 600;
  color: var(--op-text);
  font-size: var(--op-text-base);
}
.op-order-card__customer {
  font-weight: 600;
  color: var(--op-text);
  font-size: var(--op-text-base);
}
.op-order-card__map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--op-text-subtle);
  font-size: var(--op-text-sm);
  text-decoration: none;
}
.op-order-card__map-link:hover { color: var(--op-info); }

/* Date-Block (Ankunft/Abfahrt) */
.op-date-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.op-date-block__weekday {
  font-size: var(--op-text-sm);
  color: var(--op-text-muted);
  font-weight: 500;
}
.op-date-block__datetime {
  font-size: var(--op-text-base);
  font-weight: 600;
  color: var(--op-text);
  font-variant-numeric: tabular-nums;
}
.op-date-block__relative {
  font-size: var(--op-text-xs);
  color: var(--op-text-subtle);
}
.op-date-range {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2);
}
.op-date-range__sep {
  font-size: var(--op-text-xs);
  color: var(--op-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Aktivitäten-Icon-Container (farbcodiert je nach Typ) */
.op-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  background: var(--op-border-light);
  color: var(--op-text-muted);
}
.op-activity-icon--login   { background: var(--op-info-bg);    color: var(--op-info); }
.op-activity-icon--create  { background: var(--op-success-bg); color: var(--op-success); }
.op-activity-icon--update  { background: var(--op-warning-bg); color: var(--op-warning); }
.op-activity-icon--delete  { background: var(--op-danger-bg);  color: var(--op-danger); }

/* Fix Bootstrap d-md-block at table cells (legacy bug)
   d-block on <td>/<th> destroys table layout — recover via override.
   Preferred fix: replace d-md-block with d-md-table-cell in templates.
   This rule is a safety net during migration. */
.table > thead > tr > th.d-md-block,
.table > thead > tr > th.d-lg-block,
.table > tbody > tr > td.d-md-block,
.table > tbody > tr > td.d-lg-block {
  display: table-cell !important;
}
@media (max-width: 767.98px) {
  .table > thead > tr > th.d-none.d-md-block,
  .table > thead > tr > th.d-none.d-lg-block,
  .table > tbody > tr > td.d-none.d-md-block,
  .table > tbody > tr > td.d-none.d-lg-block {
    display: none !important;
  }
}

/* Dashboard-Tabellen: Tabelle auf Desktop, gestackte Karten auf Mobile.
   Aktiviert via class="op-dashboard-table" auf <table>.
   Section-Headers über jedem Block via data-mobile-label="Label". */
.op-dashboard-table {
  margin-bottom: 0;
}
.op-dashboard-table > thead > tr > th {
  font-size: var(--op-text-xs);
  font-weight: 600;
  color: var(--op-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--op-border);
  padding: var(--op-space-3) var(--op-space-4);
  background: var(--op-surface-elevated);
}
.op-dashboard-table > tbody > tr > td {
  padding: var(--op-space-4);
  vertical-align: top;
  border-bottom: 1px solid var(--op-border-light);
}
.op-dashboard-table > tbody > tr:last-child > td { border-bottom: 0; }
.op-dashboard-table > tbody > tr:hover > td { background: var(--op-surface-elevated); }

@media (max-width: 767.98px) {
  .op-dashboard-table > thead { display: none; }
  .op-dashboard-table,
  .op-dashboard-table > tbody,
  .op-dashboard-table > tbody > tr,
  .op-dashboard-table > tbody > tr > td {
    display: block;
    width: 100%;
  }
  .op-dashboard-table > tbody > tr {
    padding: var(--op-space-4);
    border-bottom: 1px solid var(--op-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3);
  }
  .op-dashboard-table > tbody > tr:last-child { border-bottom: 0; }
  .op-dashboard-table > tbody > tr > td {
    padding: 0;
    border: 0;
    width: 100%;
  }
  .op-dashboard-table > tbody > tr > td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    display: block;
    font-size: var(--op-text-xs);
    font-weight: 600;
    color: var(--op-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--op-space-1);
  }
  /* Sichtbarkeits-Override: auf Mobile alle Cells zeigen, auch d-none d-md-* */
  .op-dashboard-table > tbody > tr > td.d-none.d-md-block,
  .op-dashboard-table > tbody > tr > td.d-none.d-md-table-cell,
  .op-dashboard-table > tbody > tr > td.d-none.d-lg-block,
  .op-dashboard-table > tbody > tr > td.d-none.d-lg-table-cell {
    display: block !important;
  }
}

/* Empty-State innerhalb Dashboard-Tabellen / Widget-Bodies (Phase 78: kompakter) */
.op-dashboard-table .op-empty,
.widget-body > .op-empty {
  text-align: center;
  padding: var(--op-space-3) var(--op-space-4);
  color: var(--op-text-subtle);
  font-size: var(--op-text-sm);
}

/* News-Date-Pill (Monat oben klein, Tag groß) */
.op-news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  padding: var(--op-space-1) var(--op-space-2);
  background: rgba(var(--op-primary-rgb), 0.12);
  color: var(--op-primary-dark);
  border-radius: var(--op-radius);
  flex-shrink: 0;
}
.op-news-date strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  line-height: 1;
}
.op-news-date span {
  font-size: var(--op-text-xl);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
}

/* op-meta links: subtle hover, inline icons */
a.op-meta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
a.op-meta:hover { color: var(--op-text); }

/* Stock-Widget */
.op-stock-card {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-4);
}
.op-stock-card__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-2);
  padding: var(--op-space-4);
  background: rgba(var(--op-primary-rgb), 0.08);
  border: 1px solid rgba(var(--op-primary-rgb), 0.2);
  border-radius: var(--op-radius-lg);
}
.op-stock-card__pin-label {
  font-size: var(--op-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--op-text-muted);
  font-weight: 600;
}
.op-stock-card__pin-value {
  font-size: var(--op-text-3xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--op-primary-dark);
  font-family: 'JetBrains Mono', 'Menlo', monospace;
}
.op-stock-card__address {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-1);
  text-align: center;
  font-size: var(--op-text-sm);
}
.op-stock-card__address strong {
  color: var(--op-text);
  font-size: var(--op-text-base);
}

/* Period-Bar (Monatsanzeige in Sidebar-Widgets) */
.op-period-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-2);
  padding: var(--op-space-2) var(--op-space-4);
  background: var(--op-surface-elevated);
  border-bottom: 1px solid var(--op-border-light);
  font-size: var(--op-text-sm);
  font-weight: 600;
  color: var(--op-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.op-period-bar i { color: var(--op-text-subtle); }

/* Totals-Bar (tfoot-Ersatz für Sidebar-Listen) */
.op-totals-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--op-space-3);
  padding: var(--op-space-3) var(--op-space-4);
  background: var(--op-surface-elevated);
  border-top: 1px solid var(--op-border);
  font-size: var(--op-text-sm);
}
.op-totals-bar__label {
  font-weight: 700;
  color: var(--op-text);
}
.op-totals-bar__sub {
  font-size: var(--op-text-xs);
  color: var(--op-text-subtle);
}


/* =============================================================
 * Phase 76 — Login-Page Cleanup
 *  (1) Doppelte Card entfernen: das <form class="smart-form login-smart-form">
 *      darf KEINE eigene Card-Optik haben (Shadow/Radius/Margin werden von
 *      der globalen .smart-form-Card-Regel auf Zeile ~4527 vererbt).
 *  (2) Mobile-Footer (.login-page-footer) sauber zentrieren / stacken,
 *      damit "© 2026 OCD ... · Online Planer V1 · Impressum" nicht
 *      mit Orphan-Dots kollabiert.
 *  (3) Body-Overflow + 100vh-Fix nur auf Desktop, damit auf Mobile
 *      gescrollt werden kann und die Card nicht abgeschnitten wird.
 * ============================================================= */

/* (1) Login-Form NICHT als Card rendern */
html body form.login-smart-form,
html body form.smart-form.login-smart-form {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* (2) Page-Footer: zentriert + sauberes Wrap-Verhalten */
html body .login-page-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  width: 100% !important;
}

/* (2b) Auf Mobile sauber stapeln, Trenner-Dots verstecken */
@media (max-width: 700px) {
  html body .login-page-footer {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 12px 16px 4px !important;
    line-height: 1.6 !important;
  }
  html body .login-page-footer .dot {
    display: none !important;
  }
}

/* (3) Mobile darf scrollen — der Phase-18-Lock auf 100vh gilt nur Desktop */
@media (max-width: 1100px) {
  html body.auth-login {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }
  html body .login-shell {
    height: auto !important;
    min-height: 100vh !important;
    padding: 16px !important;
  }
  html body .login-shell .login-card {
    max-height: none !important;
  }
  html body .login-brand {
    overflow-y: visible !important;
  }
  html body .login-form-panel {
    overflow-y: visible !important;
  }
}


/* =============================================================
 * Phase 77 — Dashboard-Widget Spacing Cleanup
 *  (1) `.widget-body` hatte ein Erbstück-Margin `-13px -13px 0` aus
 *      SmartAdmin, das den Body links/rechts überlappen ließ.
 *  (2) Header + Body bekommen einheitliche horizontale Paddings,
 *      damit Tabellen-Spalten flush mit Header-Titel sitzen.
 *  (3) `.op-order-card` children: mehr Atemraum (8px → 12px).
 *  (4) `.op-date-range__sep` ("BIS") als zentrierter Trenner mit
 *      feiner Linie statt einsam stehender Text.
 *  (5) Dashboard-Table Cells: konsistentere vertikale Paddings.
 *  (6) Mobile: Card-Stack Gaps sauber.
 * ============================================================= */

/* (1) + (2) Widget-Body & Header — saubere Margins/Paddings */
html body .jarviswidget > div,
html body .jarviswidget .widget-body,
html body article.jarviswidget > .widget-body {
  margin: 0 !important;
}
html body .jarviswidget > header {
  padding: var(--op-space-3) var(--op-space-5) !important;
}
html body .jarviswidget > div,
html body .jarviswidget .widget-body {
  padding: var(--op-space-4) var(--op-space-5) !important;
}
/* `.widget-body.no-padding` darf weiterhin no-padding sein, aber ohne Negative-Margin */
html body .jarviswidget .widget-body.no-padding {
  padding: 0 !important;
}

/* Header-Title vertikal mittig + sauberes Spacing zwischen Icon + H2 + Toolbar */
html body .jarviswidget > header {
  display: flex !important;
  align-items: center !important;
  gap: var(--op-space-2) !important;
  min-height: 0 !important;
}
html body .jarviswidget > header > h2 {
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-size: var(--op-text-md, 15px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  line-height: 1.3 !important;
}
html body .jarviswidget > header .widget-icon {
  margin: 0 !important;
}
html body .jarviswidget > header .widget-toolbar {
  margin-left: auto !important;
  padding: 0 !important;
  border: none !important;
}

/* (3) Order-Card Atemraum */
.op-order-card {
  gap: var(--op-space-3) !important;
}
.op-order-card__head {
  gap: var(--op-space-2) !important;
}

/* (4) Date-Range Separator — zentriert mit feinen Linien */
.op-date-range {
  gap: var(--op-space-2) !important;
}
.op-date-range__sep {
  display: flex !important;
  align-items: center !important;
  gap: var(--op-space-2) !important;
  color: var(--op-text-subtle) !important;
  font-size: var(--op-text-xs, 11px) !important;
}
.op-date-range__sep::before,
.op-date-range__sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--op-border-light, #eef0f2);
}

/* (5) Tabellen-Cell-Spacing harmonisieren */
.op-dashboard-table > tbody > tr > td {
  padding: var(--op-space-4) var(--op-space-4) !important;
  vertical-align: top !important;
}
.op-dashboard-table > thead > tr > th {
  padding: var(--op-space-3) var(--op-space-4) !important;
}
/* Erste Spalte etwas mehr links-Padding, damit Inhalt flush mit Header sitzt */
.op-dashboard-table > thead > tr > th:first-child,
.op-dashboard-table > tbody > tr > td:first-child {
  padding-left: var(--op-space-5) !important;
}
.op-dashboard-table > thead > tr > th:last-child,
.op-dashboard-table > tbody > tr > td:last-child {
  padding-right: var(--op-space-5) !important;
}

/* (6) Mobile: Card-Stack — konsistente Gaps */
@media (max-width: 767.98px) {
  .op-dashboard-table > tbody > tr {
    padding: var(--op-space-4) var(--op-space-5) !important;
    gap: var(--op-space-3) !important;
  }
  .op-dashboard-table > tbody > tr > td[data-mobile-label]::before {
    margin-bottom: var(--op-space-2) !important;
  }
}


/* =============================================================
 * Phase 78 — Dashboard Operations-Cockpit
 *  Neue Klassen für KPI-Strip, Section-Header, Update-Pill +
 *  Drawer. Greift auf bestehende --op-Tokens zurück, keine neuen
 *  Farben/Schatten erfunden.
 * ============================================================= */

/* ---------- KPI-Strip (Hero) ---------- */
.op-greeting-hero {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3);
  padding: var(--op-space-5) var(--op-space-5) var(--op-space-3);
  margin-bottom: var(--op-space-4);
}
.op-greeting-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-3);
  flex-wrap: wrap;
}
.op-greeting-hero__text {
  display: flex;
  align-items: baseline;
  gap: var(--op-space-3);
  flex-wrap: wrap;
}
.op-greeting-hero__hello {
  font-size: 20px;
  font-weight: 700;
  color: var(--op-text);
  letter-spacing: -0.2px;
}
.op-greeting-hero__meta {
  font-size: 13px;
  color: var(--op-text-muted);
  font-variant-numeric: tabular-nums;
}
.op-greeting-hero__tools {
  display: flex;
  align-items: center;
  gap: var(--op-space-2);
  flex-shrink: 0;
}

.op-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--op-space-3);
}
.op-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--op-space-3) var(--op-space-4);
  background: white;
  border: 1px solid var(--op-border-light, #eef0f2);
  border-radius: var(--op-radius, 12px);
  text-decoration: none !important;
  color: var(--op-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  min-height: 64px;
}
.op-kpi-card:hover {
  border-color: var(--op-border, #d6dbe1);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.op-kpi-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--op-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.op-kpi-card__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--op-text);
  font-variant-numeric: tabular-nums;
}
/* Accent-Varianten */
.op-kpi-card--primary .op-kpi-card__value { color: var(--op-primary-dark, #6f9a3c); }
.op-kpi-card--warning {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}
.op-kpi-card--warning .op-kpi-card__value { color: var(--op-warning, #b45309); }
.op-kpi-card--danger {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.22);
}
.op-kpi-card--danger .op-kpi-card__value { color: var(--op-danger, #b91c1c); }

/* Mobile: Horizontal-Scroll mit Snap */
@media (max-width: 767.98px) {
  .op-greeting-hero {
    padding: var(--op-space-4) var(--op-space-3) var(--op-space-3);
    margin-bottom: var(--op-space-3);
  }
  .op-greeting-hero__hello { font-size: 18px; }
  .op-kpi-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--op-space-3));
    padding: 4px var(--op-space-3) var(--op-space-2);
    gap: var(--op-space-2);
    scrollbar-width: none;
  }
  .op-kpi-strip::-webkit-scrollbar { display: none; }
  .op-kpi-card {
    flex: 0 0 auto;
    width: 46vw;
    min-width: 140px;
    scroll-snap-align: start;
  }
}

/* ---------- Section-Container (vereinheitlichte Widget-Header) ---------- */
.op-section__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--op-primary-dark, #6f9a3c) !important;
  background: rgba(141, 185, 81, 0.08);
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.12s ease, border-color 0.12s ease;
  min-height: 32px;
}
.op-section__action:hover {
  background: rgba(141, 185, 81, 0.16);
  border-color: rgba(141, 185, 81, 0.35);
  text-decoration: none !important;
}
.op-section__action i { font-size: 11px; }

/* In-Card Empty-State ist `.op-empty` (existiert). Hier zusätzlich:
   `.op-section--empty` als gesamte Section auf 1 Zeile in einem schmalen
   Bar-Look — ersetzt eine ganze leere Card. */
.op-section--empty {
  display: flex;
  align-items: center;
  gap: var(--op-space-3);
  padding: var(--op-space-3) var(--op-space-5);
  background: var(--op-surface-elevated, #fafbfc);
  border: 1px solid var(--op-border-light, #eef0f2);
  border-radius: var(--op-radius, 12px);
  margin-bottom: var(--op-space-4);
  font-size: 13px;
  color: var(--op-text-muted);
}
.op-section--empty__title {
  font-weight: 600;
  color: var(--op-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.op-section--empty__title i { color: var(--op-success, #16a34a); }
.op-section--empty__sub { margin-left: auto; font-size: 12px; }

/* ---------- Update-Pill + Drawer ---------- */
.op-update-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--op-primary-dark, #6f9a3c) !important;
  background: rgba(141, 185, 81, 0.10);
  border: 1px solid rgba(141, 185, 81, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  min-height: 32px;
}
.op-update-pill:hover {
  background: rgba(141, 185, 81, 0.18);
  border-color: rgba(141, 185, 81, 0.45);
}
.op-update-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--op-primary, #8db951);
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.2);
  animation: opPulse 2.4s ease-in-out infinite;
}
@keyframes opPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(141, 185, 81, 0.05); }
}

/* Drawer (rechts einfahrend) */
.op-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
}
.op-drawer.is-open { display: block; }
.op-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.op-drawer.is-open .op-drawer__backdrop { opacity: 1; }
.op-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  background: white;
  box-shadow: -16px 0 48px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow: hidden;
}
.op-drawer.is-open .op-drawer__panel { transform: translateX(0); }
.op-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--op-space-3);
  padding: var(--op-space-4) var(--op-space-5);
  border-bottom: 1px solid var(--op-border-light, #eef0f2);
}
.op-drawer__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--op-text);
  flex: 1;
}
.op-drawer__sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--op-text-subtle);
  margin-top: 2px;
}
.op-drawer__close {
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--op-text-muted);
  font-size: 16px;
}
.op-drawer__close:hover {
  background: var(--op-surface-elevated, #fafbfc);
  color: var(--op-text);
}
.op-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--op-space-5);
}
.op-drawer__body h4 {
  margin: var(--op-space-4) 0 var(--op-space-2);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--op-text-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-drawer__body h4:first-child { margin-top: 0; }
.op-drawer__body h4 i { color: var(--op-primary, #8db951); }
.op-drawer__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2);
}
.op-drawer__body li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--op-text-muted);
  line-height: 1.5;
}
.op-drawer__body li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--op-primary, #8db951);
  margin-top: 8px;
}
.op-drawer__body li strong { color: var(--op-text); font-weight: 600; }
.op-drawer__foot {
  border-top: 1px solid var(--op-border-light, #eef0f2);
  padding: var(--op-space-3) var(--op-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-3);
}

/* ---------- Tools-Menu (Overflow für Dashboard-Aktionen) ---------- */
.op-tools-menu {
  position: relative;
}
.op-tools-menu__btn {
  background: transparent;
  border: 1px solid var(--op-border-light, #eef0f2);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--op-text-muted);
}
.op-tools-menu__btn:hover {
  background: var(--op-surface-elevated, #fafbfc);
  color: var(--op-text);
}
.op-tools-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: white;
  border: 1px solid var(--op-border-light, #eef0f2);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
  z-index: 100;
}
.op-tools-menu.is-open .op-tools-menu__list { display: block; }
.op-tools-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--op-text-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
.op-tools-menu__item:hover {
  background: var(--op-surface-elevated, #fafbfc);
  color: var(--op-text) !important;
}
.op-tools-menu__item i { width: 16px; color: var(--op-text-subtle); }


/* =============================================================
 * Phase 78c — Borderless Cards & Widgets (User-Vorgabe)
 *  Keine Rahmen mehr auf Cards, Widgets, Sections, Wells, Panels.
 *  Visuelle Abgrenzung kommt ausschließlich über Background +
 *  Box-Shadow. Inputs/Tables behalten ihre Borders.
 * ============================================================= */
html body .jarviswidget,
html body article.jarviswidget,
html body .card,
html body .panel,
html body .well,
html body section.card,
html body .smart-form,
html body .login-card,
html body .op-kpi-card,
html body .op-section,
html body .op-mini-card,
html body .op-stock-card,
html body .op-update-card,
html body .op-period-bar,
html body .op-totals-bar,
html body .op-section--empty,
html body .op-empty {
  border: 0 !important;
  border-color: transparent !important;
}

/* Header-Trenner ebenfalls weg — alle 4 Seiten (war u.a. 1px solid #C2C2C2 top/left/right) */
html body .jarviswidget > header,
html body .jarviswidget header,
html body article.jarviswidget > header,
html body .card > .card-header,
html body .panel > .panel-heading,
html body section.card > header,
html body .op-section__header {
  border: 0 !important;
}

/* Dashboard-Tabellen: keine sichtbaren Row-Trenner mehr */
html body .op-dashboard-table > thead > tr > th,
html body .op-dashboard-table > tbody > tr > td,
html body .op-dashboard-table > tbody > tr,
html body .op-dashboard-table {
  border: 0 !important;
}

/* Generische Tabellen innerhalb von Widgets: keine sichtbaren Borders */
html body .jarviswidget .table > thead > tr > th,
html body .jarviswidget .table > tbody > tr > td,
html body .jarviswidget .table > tbody > tr,
html body .jarviswidget .table {
  border: 0 !important;
}

/* KPI-Card Hover: Border-Effekt durch Schatten-Lift ersetzen */
html body .op-kpi-card:hover {
  border: 0 !important;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.10) !important;
}

/* Drawer-Header / -Footer Trenner bleiben (innen, kein Card-Rahmen) — unverändert */


/* =============================================================
 * Phase 78d — Patterns von Planer 2 (Light-Mode-Adaption)
 *  (1) Section-Pill: kleines Uppercase-Label über Headlines
 *  (2) KPI-Trend-Slot: optional +12% ↑ / -5% ↓
 *  (3) Card-Padding luftiger, Schatten softer
 * ============================================================= */

/* (1) Section-Pill */
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-primary-dark, #6f9a3c);
  background: rgba(141, 185, 81, 0.12);
  border-radius: 999px;
}
.op-pill i { font-size: 10px; }

/* Hero-Pill direkt über dem Greeting */
.op-greeting-hero__pill {
  margin-bottom: 6px;
}

/* (2) KPI-Trend-Slot */
.op-kpi-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
}
.op-kpi-card__trend--up   { color: #16a34a; background: rgba(22, 163, 74, 0.10); }
.op-kpi-card__trend--down { color: #b91c1c; background: rgba(185, 28, 28, 0.10); }
.op-kpi-card__trend--flat { color: var(--op-text-subtle); background: var(--op-surface-elevated, #fafbfc); }
.op-kpi-card__trend i { font-size: 9px; }

/* Value-Zeile: Wert + Trend nebeneinander */
.op-kpi-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* (3) Card-Padding luftiger + softerer Schatten (Planer-2-Anlehnung) */
html body .jarviswidget {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -4px rgba(15, 23, 42, 0.08) !important;
}
html body .jarviswidget > header {
  padding: var(--op-space-4) var(--op-space-5) !important;
}
html body .jarviswidget > div,
html body .jarviswidget .widget-body {
  padding: var(--op-space-5) var(--op-space-5) !important;
}
html body .jarviswidget .widget-body.no-padding {
  padding: 0 !important;
}

/* Tabellen-Header und -Cells in Dashboard-Tables: mehr Atemraum */
.op-dashboard-table > thead > tr > th {
  padding: var(--op-space-3) var(--op-space-5) !important;
}
.op-dashboard-table > tbody > tr > td {
  padding: var(--op-space-4) var(--op-space-5) !important;
}


/* =============================================================
 * Phase 79 — Listen-Seiten (orders, customers, employees, …)
 *  • Compact Page-Header mit Pill + Title + Primary + Kebab
 *  • Tab-Bar: gefüllter Pill-Active-State statt dünner Linie
 *  • Tab-Bar mobile: horizontal scroll
 *  • Filter-Toolbar: full-width-balanced, sauberer Footer
 * ============================================================= */

.op-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--op-space-3);
  flex-wrap: wrap;
  /* Phase 89: kein Padding-Left/Right — H1 ist bündig mit Widget-Edge unten */
  padding: var(--op-space-4) 0 var(--op-space-3) 0;
  margin-bottom: var(--op-space-3);
}
.op-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.op-page-header__h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--op-text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.op-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-2);
  flex-shrink: 0;
}
.op-page-header__primary.btn,
.op-page-header__primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

@media (max-width: 767.98px) {
  .op-page-header {
    padding: var(--op-space-3) var(--op-space-3) var(--op-space-3);
    align-items: stretch;
    flex-direction: column;
  }
  .op-page-header__actions {
    justify-content: space-between;
  }
  .op-page-header__primary {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* ---- Tab-Bar (nav-tabs) — Pill-Active-State ---- */
html body .jarviswidget > header.default-nav,
html body .jarviswidget > header:has(.nav-tabs) {
  padding: var(--op-space-2) var(--op-space-3) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  background: transparent !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
  align-items: center !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state::-webkit-scrollbar { display: none; }
html body .jarviswidget > header > .nav-tabs.js-filter-state > li {
  border: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--op-text-muted) !important;
  background: transparent !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link:hover {
  background: var(--op-surface-elevated, #fafbfc) !important;
  color: var(--op-text) !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li.active > a.nav-link,
html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link.active {
  background: rgba(141, 185, 81, 0.14) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  font-weight: 700 !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link i.fa {
  font-size: 14px !important;
  color: inherit !important;
}
/* Tab-Labels: eigene Klasse statt Bootstrap d-none/d-md-block.
   Auf Mobile (≤767) ausgeblendet, sonst inline. */
.op-tab-label {
  display: inline !important;
  font-weight: inherit;
}
@media (max-width: 767.98px) {
  .op-tab-label { display: none !important; }
}
html body .jarviswidget > header > .nav-tabs.js-filter-state .label.badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  background: var(--op-surface-elevated, #f1f5f9) !important;
  color: var(--op-text-subtle) !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li.active .label.badge,
html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link.active .label.badge {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
}

/* Auf Mobile: Icons anzeigen, Labels mit kleinerem Padding */
@media (max-width: 767.98px) {
  html body .jarviswidget > header > .nav-tabs.js-filter-state > li > a.nav-link {
    padding: 8px 10px !important;
  }
}

/* ---- Filter-Toolbar (orders-filter-form) ---- */
.orders-filter-form {
  margin: 0 !important;
}
.orders-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--op-space-3) !important;
  padding: var(--op-space-4) var(--op-space-5) !important;
  background: white;
  border-radius: var(--op-radius, 12px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -4px rgba(15, 23, 42, 0.08);
  margin-bottom: var(--op-space-3) !important;
}
.orders-filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 160px !important;
  flex: 1 1 auto !important;
}
.orders-filter-field--zeitraum { max-width: 220px; }
.orders-filter-field--actions {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--op-space-2) !important;
  margin-left: auto !important;
}
.orders-filter-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--op-text-subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
.orders-filter-apply.btn {
  height: 38px !important;
  padding: 0 18px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.orders-filter-reset.btn-link {
  color: var(--op-text-subtle) !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
}
.orders-filter-reset.btn-link:hover { color: var(--op-danger, #b91c1c) !important; }

/* Filter-Date-Inputs konsistent mit Höhe + Radius */
.orders-filter-row input[type="date"] {
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--op-border, #e5e7eb) !important;
  background: white !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
.orders-filter-dropdown-btn.btn {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--op-border, #e5e7eb) !important;
  background: white !important;
  color: var(--op-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  justify-content: space-between !important;
}

@media (max-width: 767.98px) {
  .orders-filter-row {
    padding: var(--op-space-3) !important;
  }
  .orders-filter-field { min-width: 100% !important; }
  .orders-filter-field--actions {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap;
  }
  .orders-filter-apply.btn { flex: 1; }
}


/* =============================================================
 * Phase 80 — Listen-Seiten Cleanup (orders et al.)
 *  (1) Tab-Counter-Badge: war position:absolute → überlappte Label.
 *  (2) Doppelte Card-Optik: Tabelle (radius), THEAD (weiß), TR
 *      (leicht grau) entfernen — Card kommt nur vom Widget.
 *  (3) Alignment: filter-row, tab-bar, search-bar, table-rows
 *      auf einer linken Linie statt 5 verschiedene x-Positions.
 * ============================================================= */

/* (1) Tab-Counter inline neben Label, nicht overlap */
html body .jarviswidget > header > .nav-tabs.js-filter-state .label,
html body .jarviswidget > header > .nav-tabs.js-filter-state .badge,
html body .jarviswidget > header > .nav-tabs.js-filter-state .label.badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* (2) Tabelle innerhalb Widget-Body: keine eigene Card-Optik */
html body .jarviswidget table.table,
html body .jarviswidget table.table-datatable,
html body .jarviswidget table.table-bordered {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
}
html body .jarviswidget table.table > thead,
html body .jarviswidget table.table > thead > tr,
html body .jarviswidget table.table > thead > tr > th {
  background: transparent !important;
  border: 0 !important;
}
html body .jarviswidget table.table > tbody > tr,
html body .jarviswidget table.table > tbody > tr > td {
  background: transparent !important;
  border: 0 !important;
}
/* Hover-Highlight bleibt sehr dezent */
html body .jarviswidget table.table > tbody > tr:hover > td {
  background: rgba(141, 185, 81, 0.04) !important;
}

/* (3) Alignment: alles im Widget-Body landet auf gleicher linken Kante */
html body .jarviswidget > div,
html body .jarviswidget > div > .widget-body {
  padding-left: var(--op-space-5) !important;
  padding-right: var(--op-space-5) !important;
}
/* DataTables-Kontrollen (search/length): inneres Padding 0,
   damit sie auf der gleichen Linie wie der Body sitzen */
html body .jarviswidget .dataTables_wrapper {
  padding: 0 !important;
}
html body .jarviswidget .dataTables_filter,
html body .jarviswidget .dataTables_length,
html body .jarviswidget .dataTables_info,
html body .jarviswidget .dataTables_paginate {
  padding: 0 !important;
  margin: 0 !important;
}
/* Suchfeld + Per-Page-Select Row: gemeinsamer Container, sauberer Spacing */
html body .jarviswidget .dataTables_wrapper > .row:first-child {
  padding: var(--op-space-3) 0 !important;
  margin: 0 !important;
}
html body .jarviswidget .dataTables_wrapper > .row:last-child {
  padding: var(--op-space-3) 0 0 !important;
  margin: 0 !important;
}
/* Kein Card-Hintergrund auf der DataTables-Wrapper-Box */
html body .jarviswidget .dataTables_wrapper,
html body .jarviswidget .dataTables_wrapper > .row {
  background: transparent !important;
}

/* Tabellen-Cells: konsistentes horizontales Padding */
html body .jarviswidget table.table > thead > tr > th,
html body .jarviswidget table.table > tbody > tr > td {
  padding: var(--op-space-3) var(--op-space-4) !important;
}
/* Erste/letzte Spalte flush mit Widget-Body-Padding */
html body .jarviswidget table.table > thead > tr > th:first-child,
html body .jarviswidget table.table > tbody > tr > td:first-child {
  padding-left: 0 !important;
}
html body .jarviswidget table.table > thead > tr > th:last-child,
html body .jarviswidget table.table > tbody > tr > td:last-child {
  padding-right: 0 !important;
}

/* Tab-Bar flush mit Widget-Body */
html body .jarviswidget > header.default-nav,
html body .jarviswidget > header:has(.nav-tabs) {
  padding-left: var(--op-space-5) !important;
  padding-right: var(--op-space-5) !important;
}
html body .jarviswidget > header > .nav-tabs.js-filter-state > li:first-child > a.nav-link {
  margin-left: -10px !important;  /* erster Tab-Pill flush mit Body */
}


/* =============================================================
 * Phase 80b — DOPPELTE CARD beim Filter-Toolbar entfernen
 *  Ursache: Phase-67-Regel gibt jedem ARTICLE mit .orders-filter-form
 *  drin eigene Card-Optik (BG/Border/Radius/Padding). Plus
 *  .orders-filter-row ist selbst eine Card. → Card-in-Card.
 *  Fix: ARTICLE bleibt transparent, nur .orders-filter-row trägt Card.
 * ============================================================= */
html body article:has(.orders-filter-form),
html body article.col-sm-12:has(form.orders-filter-form),
html body article.col-md-12:has(form.orders-filter-form),
html body article:has(> form):not(:has(.jarviswidget)) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px !important;     /* nur Bootstrap-Gutter */
  margin-bottom: 0 !important;
}


/* Phase 80c entfernt — durch Phase 82 ersetzt (war 3-Spalten-Grid mit Konflikten zur Listen-Karte) */


/* =============================================================
 * Phase 80d — Bulk-Checkbox kollidiert mit Title
 *  Checkbox sitzt absolute top:12 left:12 — überlappt das ID-Feld.
 *  Fix: TR bekommt links Padding-Reserve für Checkbox.
 * ============================================================= */
@media (min-width: 769px) {
  html body table.dataTable > tbody > tr:has(.op-bulk-checkbox),
  html body table.table-datatable > tbody > tr:has(.op-bulk-checkbox) {
    padding-left: 44px !important;
  }
}


/* =============================================================
 * Phase 81 (trimmed in Phase 86) — Color-Strip + position:relative
 *  Card-Optik (background, radius, shadow) entfernt — Phase 86 sorgt
 *  dafür, dass nur die jarviswidget eine Card ist (nicht jede Zeile).
 *  TR braucht trotzdem position:relative für das ::before-Color-Strip.
 * ============================================================= */

@media (min-width: 769px) {
  html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role]),
  html body .jarviswidget table.table-datatable > tbody > tr:has(td[data-card-role]) {
    position: relative !important;
  }

  /* Color-Strip links (4px) — Status-First */
  html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role])::before,
  html body .jarviswidget table.table-datatable > tbody > tr:has(td[data-card-role])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--op-border, #cbd5e1);
    z-index: 1;
  }
  html body table tbody tr.is-running::before,
  html body table tbody tr.success::before          { background: var(--op-primary, #8db951) !important; }
  html body table tbody tr.warning::before,
  html body table tbody tr.is-accepted::before      { background: var(--op-warning, #f59e0b) !important; }
  html body table tbody tr.info::before,
  html body table tbody tr.is-submitted::before     { background: var(--op-info, #3b82f6) !important; }
  html body table tbody tr.danger::before,
  html body table tbody tr.error::before,
  html body table tbody tr.is-rejected::before      { background: var(--op-danger, #b91c1c) !important; }
  html body table tbody tr.is-completed::before     { background: var(--op-text-subtle, #64748b) !important; }
}

/* "—" Empty-Dash für leere Werte (statt "unbekannt") */
.op-empty-dash {
  color: var(--op-text-subtle, #94a3b8);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Telefon-Link mit Icon, neben Mitarbeiter-Name */
.op-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--op-text-muted, #64748b);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.op-phone-link:hover {
  color: var(--op-primary-dark, #6f9a3c);
}
.op-phone-link i {
  font-size: 11px;
  color: var(--op-text-subtle, #94a3b8);
}

/* Numerische Werte: tabular-nums + leichte mono-Anmutung */
.op-num {
  font-variant-numeric: tabular-nums;
}

/* Phase 81 Hover-Lift entfernt in Phase 86 — Hover ist jetzt bg-only (siehe Phase 86) */


/* Phase 81b entfernt — durch Phase 82 ersetzt (war 6-Spalten-Grid mit display:none auf 3 Datenfeldern) */


/* =============================================================
 * Phase 82 — Orders-Liste 4-Spalten-Layout (Dashboard-Style)
 *
 * Mappt die 13 DataTables-TDs visuell auf 5 Bereiche:
 *   1) AUFTRAG  : Nr + Status + Bahnhof + Kunde + RefNr + Sammelauftrag + Zug-Nr
 *   2) DATUM    : Datum (oben) + Uhrzeit (unten)
 *   3) LEISTUNG : Leistungen (oben) + Umsatz (unten)
 *   4) MITARBEI : Mitarbeiter (Avatar + Name + Phone + running)
 *   5) ACTIONS  : Cog-Menü
 *
 * KEIN display:none auf Datenfeldern — alle 13 sichtbar.
 * Greift NUR für tables mit data-card-config="orders.index".
 * ============================================================= */

/* ---------- DESKTOP (≥992px) ---------- */
@media (min-width: 992px) {
  html body .jarviswidget table[data-card-config="orders.index"] > tbody > tr:has(td[data-card-role]) {
    display: grid !important;
    grid-template-columns:
      minmax(70px, auto)         /* col1: Nr */
      minmax(160px, 1.4fr)       /* col2: Auftrag-Wide (Bahnhof/Kunde/Ref/Sammel/Zug) */
      minmax(170px, 1.3fr)       /* col3: Datum / Uhrzeit */
      minmax(140px, 1fr)         /* col4: Leistungen / Umsatz */
      minmax(160px, 1.2fr)       /* col5: Mitarbeiter */
      auto !important;           /* col6: Actions */
    grid-template-areas:
      "id      status        datum    leistungen mitarbeiter actions"
      "bahn    bahn          datum    leistungen mitarbeiter actions"
      "kunde   kunde         uhrzeit  umsatz     mitarbeiter actions"
      "ref     ref           uhrzeit  umsatz     mitarbeiter actions"
      "sammel  zug           uhrzeit  umsatz     mitarbeiter actions" !important;
    gap: 4px 24px !important;
    padding: 16px 18px 16px 56px !important;
    align-items: start !important;
  }

  /* TD-Bereich-Mapping — alle 13 Felder explizit positioniert */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Nr"]              { grid-area: id !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Status"]          { grid-area: status !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Sammelauftrag"]   { grid-area: sammel !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Einsatzbahnhof"]  { grid-area: bahn !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Kunde"]           { grid-area: kunde !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Referenz-Nr"]     { grid-area: ref !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Zug-Nr"]          { grid-area: zug !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Datum"]           { grid-area: datum !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Uhrzeit"]         { grid-area: uhrzeit !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Leistungen"]      { grid-area: leistungen !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Umsatz"],
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Kosten"]          { grid-area: umsatz !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Mitarbeiter"]     { grid-area: mitarbeiter !important; }
  html body .jarviswidget table[data-card-config="orders.index"] td.op-card-actions              { grid-area: actions !important; }

  /* Cell-Reset: kein eigenes Padding/Border, kein ::before-Label */
  html body .jarviswidget table[data-card-config="orders.index"] tbody tr td[data-label] {
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] tbody tr td[data-label]::before {
    display: none !important;
  }

  /* === Spalte 1: AUFTRAG === */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Nr"] {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--op-text, #0f172a) !important;
    line-height: 1.2 !important;
    align-self: center !important;
    text-align: left !important;
  }
  /* Mobile-only-Pille im Desktop verstecken */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Nr"] .hidden-desktop {
    display: none !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Status"] {
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Status"] .label.badge,
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Status"] .center-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Einsatzbahnhof"] a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--op-text, #0f172a) !important;
    text-decoration: none !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Einsatzbahnhof"] .text-muted {
    font-size: 11.5px !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Kunde"] a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-primary-dark, #6f9a3c) !important;
    text-decoration: none !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Referenz-Nr"] {
    font-size: 11.5px !important;
    color: var(--op-text-subtle, #94a3b8) !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Sammelauftrag"] {
    font-size: 11px !important;
    align-self: center !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Sammelauftrag"] .label.badge {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
  }

  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Zug-Nr"] {
    font-size: 11.5px !important;
    color: var(--op-text-subtle, #94a3b8) !important;
    align-self: center !important;
    justify-self: end !important;
  }

  /* === Spalte 2: DATUM / UHRZEIT === */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Datum"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-text, #0f172a) !important;
    align-self: end !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Datum"] small {
    display: block !important;
    font-size: 11px !important;
    color: var(--op-text-subtle, #94a3b8) !important;
    font-style: normal !important;
    margin-top: 2px !important;
    font-weight: 500 !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Uhrzeit"] {
    font-size: 13px !important;
    color: var(--op-text-muted, #475569) !important;
    font-variant-numeric: tabular-nums;
    align-self: start !important;
    padding-top: 4px !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Uhrzeit"] .font-xs.text-muted,
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Uhrzeit"] .op-meta {
    font-size: 10.5px !important;
    color: var(--op-text-subtle, #94a3b8) !important;
  }

  /* === Spalte 3: LEISTUNGEN / UMSATZ === */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Leistungen"] {
    align-self: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Leistungen"] .label.badge {
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Umsatz"],
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Kosten"] {
    font-size: 12px !important;
    color: var(--op-text-muted, #475569) !important;
    font-variant-numeric: tabular-nums;
    align-self: start !important;
    padding-top: 4px !important;
    font-weight: 500 !important;
  }

  /* === Spalte 4: MITARBEITER === */
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Mitarbeiter"] {
    align-self: center !important;
  }
  html body .jarviswidget table[data-card-config="orders.index"] td[data-label="Mitarbeiter"] a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-text, #0f172a) !important;
    text-decoration: none !important;
  }

  /* === Spalte 5: ACTIONS === */
  html body .jarviswidget table[data-card-config="orders.index"] td.op-card-actions {
    align-self: center !important;
  }

  /* Hover entfernt in Phase 86 — siehe Phase-86-Block am Datei-Ende für bg-only Hover */
}

/* ---------- TABLET (769–991px): kompaktere Variante mit allen Feldern ---------- */
@media (min-width: 769px) and (max-width: 991.98px) {
  html body .jarviswidget table[data-card-config="orders.index"] > tbody > tr:has(td[data-card-role]) {
    display: grid !important;
    grid-template-columns:
      minmax(60px, auto) minmax(120px, 1.2fr) minmax(150px, 1.2fr) minmax(140px, 1fr) auto !important;
    grid-template-areas:
      "id    status        datum    mitarbeiter actions"
      "bahn  bahn          datum    mitarbeiter actions"
      "kunde kunde         uhrzeit  mitarbeiter actions"
      "ref   ref           uhrzeit  leistungen  actions"
      "sammel zug          umsatz   leistungen  actions" !important;
    gap: 3px 14px !important;
    padding: 14px 14px 14px 48px !important;
    align-items: start !important;
  }
}

/* ---------- MOBILE (≤768px): bestehendes Phase-74-Stack-Layout bleibt ---------- */


/* Phase 85 — page-header__sub (für Breadcrumb-Reste in alten Detail-Pages) */
.op-page-header__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--op-text-subtle, #94a3b8);
  margin-top: 2px;
}
.op-page-header__sub > span:not(:first-child)::before {
  content: "›";
  margin-right: 6px;
  color: var(--op-text-subtle, #94a3b8);
}
.op-page-header__h1 i.fa {
  font-size: 18px;
  color: var(--op-primary, #8db951);
  margin-right: 8px;
}


/* =============================================================
 * Phase 83 — Generic List Card-Pattern (NICHT orders.index)
 *
 * Greift für jede Tabelle mit data-card-config="*" außer orders.index.
 * Liefert ein universelles 4-Bereich-Layout (title/subtitle/short/wide):
 *
 *   [▌] Title                            [Subtitle (right end)]
 *   ──────────────────────────────────────────────────────────
 *   short-1  short-2  short-3  short-4   [⚙]
 *   ──────────────────────────────────────────────────────────
 *   [wide content full width]
 *
 * Zusatz: Card-Optik (white bg, radius, shadow, color-strip) wird
 * von Phase 81 vererbt (gilt für alle data-card-role-Tables).
 * ============================================================= */

@media (min-width: 769px) {
  /* Generisches Grid für ALLE Listen-Tables — überschrieben durch Phase 82
     (orders.index) und 80c-Tablet (768-991) wo Spezifischer ist. */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) > tbody > tr:has(td[data-card-role]) {
    display: grid !important;
    grid-template-columns:
      minmax(80px, auto)                                    /* title */
      minmax(120px, 1fr)                                    /* subtitle (rechts) */
      auto !important;                                      /* actions */
    grid-template-areas:
      "title    subtitle  actions"
      "shorts   shorts    actions"
      "wides    wides     actions" !important;
    gap: 6px 20px !important;
    padding: 14px 16px 14px 56px !important;
    align-items: start !important;
  }

  /* Title — groß, fett, links */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="title"] {
    grid-area: title !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--op-text, #0f172a) !important;
    line-height: 1.25 !important;
    text-align: left !important;
    align-self: center !important;
  }
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="title"]::before {
    display: none !important;
  }

  /* Subtitle — rechts ausgerichtet, etwas leiser */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="subtitle"] {
    grid-area: subtitle !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-primary-dark, #6f9a3c) !important;
    text-align: right !important;
    align-self: center !important;
    justify-self: end !important;
  }
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="subtitle"]::before {
    display: none !important;
  }

  /* Short Cells — flex-row untereinander, Label oben klein, Wert größer */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="short"] {
    grid-area: shorts !important;
    display: inline-flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    min-width: 100px !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--op-text-muted, #475569) !important;
  }
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="short"]::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--op-text-subtle, #94a3b8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
  }
  /* Multi-short: stack horizontally with gap (CSS Grid sub-area approach via 'shorts' area + flex-wrap) */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) > tbody > tr:has(td[data-card-role]) {
    /* via grid-auto-flow + named area — but we use simpler approach:
       multiple TD's in 'shorts' area stack horizontally because we wrap them in flex-row inside */
  }
  /* Workaround: TDs cannot share area without overlap. So shorts use grid-row: 2 with auto-columns */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="short"] {
    grid-area: auto !important;
    grid-row: 2 !important;
  }

  /* Wide Cells — full width row */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="wide"] {
    grid-area: wides !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    color: var(--op-text-muted, #475569) !important;
  }
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="wide"]::before {
    content: attr(data-label) !important;
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--op-text-subtle, #94a3b8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-right: 8px !important;
  }
  /* Multiple wide cells stack via grid-row auto-flow */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td[data-card-role="wide"] ~ td[data-card-role="wide"] {
    grid-row: auto !important;
  }

  /* Actions — right column, vertically centered */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td.op-card-actions {
    grid-area: actions !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Hidden cells (sort-helpers) bleiben unsichtbar */
  html body .jarviswidget table[data-card-config]:not([data-card-config="orders.index"]) td.op-card-hidden {
    display: none !important;
  }

  /* Hover entfernt in Phase 86 — siehe Phase-86-Block am Datei-Ende */
}



/* =============================================================
 * Phase 86 — Single-Card-Layout für Listen-Widgets
 *
 * Card-Optik (background, radius, shadow) gehört NUR auf .jarviswidget,
 * nie auf TR. TRs sind transparente Zeilen mit Inhalts-Layout (Phase 82/83
 * grid-template-areas) + feinem Trenner + dezentem Hover.
 *
 * Behält:
 *  - Phase 81 ::before-Color-Strip (Status-Indikator pro Row)
 *  - Phase 82 grid-template-areas für orders.index
 *  - Phase 83 generic grid für andere data-card-config-Tables
 * ============================================================= */

/* Empty <div role="content">-Wrapper unschädlich machen (SmartAdmin-Erbe) */
html body .jarviswidget > div[role="content"] {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

/* TR transparent — keine eigene Card-Optik */
html body .jarviswidget table[data-card-config] > tbody > tr:has(td[data-card-role]),
html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role]),
html body .jarviswidget table.table-datatable > tbody > tr:has(td[data-card-role]) {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Row-Separator: feiner Trenner zwischen Rows (statt eigener Card-Margin) */
@media (min-width: 769px) {
  html body .jarviswidget table[data-card-config] > tbody > tr:has(td[data-card-role]) + tr:has(td[data-card-role]),
  html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role]) + tr:has(td[data-card-role]) {
    border-top: 1px solid var(--op-border-light, #f1f3f5) !important;
  }
}

/* Hover: subtile Background-Änderung, kein Schatten/Lift */
html body .jarviswidget table[data-card-config] > tbody > tr:has(td[data-card-role]):hover,
html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role]):hover,
html body .jarviswidget table.table-datatable > tbody > tr:has(td[data-card-role]):hover {
  background: var(--op-surface-elevated, #fafbfc) !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background 120ms ease;
}



/* =============================================================
 * Phase 87 — Kill ALL Hover-Effekte auf Karten / Reihen
 *
 * User-Vorgabe: kein Hintergrund-Wechsel, kein Schatten-Lift, kein
 * Transform beim Hovern über Cards/KPI-Cards/Listen-Zeilen.
 * Calendar verhält sich schon korrekt (keine Hover-Animation),
 * Aufträge / Dashboard sollen genauso ruhig sein.
 * ============================================================= */

html body .card:hover,
html body article:hover,
html body article.jarviswidget:hover,
html body .jarviswidget:hover,
html body .op-kpi-card:hover,
html body .op-update-card:hover,
html body .op-section:hover,
html body .op-mini-card:hover,
html body .jarviswidget table[data-card-config] > tbody > tr:has(td[data-card-role]):hover,
html body .jarviswidget table.dataTable > tbody > tr:has(td[data-card-role]):hover,
html body .jarviswidget table.table-datatable > tbody > tr:has(td[data-card-role]):hover {
  background: inherit !important;
  box-shadow: inherit !important;
  transform: none !important;
  transition: none !important;
}

/* Spezifisch für KPI-Cards: Inherit funktioniert nicht weil sie eigenes BG haben.
   Stattdessen explizit auf den Default-State zurück. */
html body .op-kpi-card:hover {
  border-color: var(--op-border-light, #eef0f2) !important;
  box-shadow: none !important;
  transform: none !important;
}



/* =============================================================
 * Phase 88 — Footer ausblenden (User-Vorgabe)
 * Layout-Footer mit "© OCD Online Cargo · v1.10.x · Impressum · Datenschutz"
 * wird auf allen Seiten visuell entfernt. Markup bleibt für SEO/A11y.
 * ============================================================= */
html body .page-footer {
  display: none !important;
}



/* =============================================================
 * Phase 89 — Pagination-Active sichtbar + Suche/Tabelle feiner
 *  Bug: aktiver Pagination-Button hat Text in Background-Farbe (grün auf grün) → unsichtbar.
 *  Außerdem: Suche und Tabelle dichter / feiner.
 * ============================================================= */

/* (1) Pagination Active — Text WEISS auf Primary-Background */
html body .dataTables_paginate ul.pagination li.active > a,
html body .dataTables_paginate ul.pagination li.paginate_button.active > a,
html body .pagination li.active > a {
  background: var(--op-primary, #8db951) !important;
  color: white !important;
  border: 0 !important;
  font-weight: 700 !important;
}

/* Pagination Hover (non-active) */
html body .dataTables_paginate ul.pagination li:not(.active):not(.disabled) > a {
  color: var(--op-text, #0f172a) !important;
  background: white !important;
  border: 1px solid var(--op-border-light, #eef0f2) !important;
}
html body .dataTables_paginate ul.pagination li:not(.active):not(.disabled) > a:hover {
  background: var(--op-surface-elevated, #fafbfc) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}
html body .dataTables_paginate ul.pagination li.disabled > a {
  color: var(--op-text-subtle, #cbd5e1) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: default;
}
/* Pagination Buttons als runde Pills */
html body .dataTables_paginate ul.pagination > li > a {
  border-radius: 8px !important;
  min-width: 32px;
  height: 32px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}

/* (2) Suche feiner — kompakter, dezenter Border */
html body .dataTables_filter input[type="search"],
html body .dataTables_filter input.form-control {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--op-border-light, #eef0f2) !important;
  background: var(--op-surface-elevated, #fafbfc) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease;
}
html body .dataTables_filter input[type="search"]:focus {
  border-color: var(--op-primary, #8db951) !important;
  outline: 0 !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.12) !important;
}
html body .dataTables_filter .input-group-addon {
  background: transparent !important;
  border: 0 !important;
  padding: 0 6px 0 0 !important;
  color: var(--op-text-subtle, #94a3b8) !important;
}
html body .dataTables_filter .glyphicon-search::before {
  content: "002";
  font-family: FontAwesome;
  font-size: 12px;
}
html body .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Per-Page-Select feiner */
html body .dataTables_length select.form-control {
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--op-border-light, #eef0f2) !important;
  background: var(--op-surface-elevated, #fafbfc) !important;
  font-size: 13px !important;
  padding: 0 28px 0 10px !important;
  box-shadow: none !important;
}

/* (3) Tabelle feiner — Listen-Rows dichter */
html body .jarviswidget table[data-card-config] > tbody > tr:has(td[data-card-role]) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* dt-toolbar (Search-Row) kompakter */
html body .dt-toolbar {
  padding: 8px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* dt-toolbar-footer (Pagination-Row) feiner */
html body .dt-toolbar-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--op-text-muted, #475569);
}
html body .dt-toolbar-footer .dataTables_info {
  padding: 0 !important;
}



/* =============================================================
 * Phase 90 — Dashboard-Widget-Innenabstand verbessern
 *  User sieht zu enge Stack-Items in op-order-card + op-dashboard-table.
 *  Gap auf 14px, Cell-Padding +4px vertikal.
 * ============================================================= */

html body .op-order-card {
  gap: 14px !important;
}
html body .op-order-card__head {
  gap: 10px !important;
}
html body .op-date-range {
  gap: 10px !important;
}

/* Dashboard-Table Cells: mehr Atemraum vertikal */
html body .op-dashboard-table > tbody > tr > td {
  padding: 18px 16px !important;
  vertical-align: top !important;
}
html body .op-dashboard-table > thead > tr > th {
  padding: 14px 16px !important;
}



/* =============================================================
 * Phase 91 — Order /tab/train Wagenzug + Triebfahrzeuge Tabellen
 *  Modernisiert die Form-Tables im Train-Tab (op-skip-cards):
 *  weniger Borders, bessere Spacing, modernere Inputs.
 * ============================================================= */

html body fieldset#railcars-table > table.table.op-skip-cards,
html body fieldset#wagons-table > table.table.op-skip-cards {
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Header */
html body fieldset#railcars-table > table.table.op-skip-cards > thead > tr > th,
html body fieldset#wagons-table > table.table.op-skip-cards > thead > tr > th {
  background: var(--op-surface-elevated, #fafbfc) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--op-border-light, #eef0f2) !important;
  padding: 10px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--op-text-subtle, #94a3b8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Rows: nur subtile horizontale Trennlinie */
html body fieldset#railcars-table > table.table.op-skip-cards > tbody > tr,
html body fieldset#wagons-table > table.table.op-skip-cards > tbody > tr {
  background: transparent !important;
  border: 0 !important;
}
html body fieldset#railcars-table > table.table.op-skip-cards > tbody > tr + tr,
html body fieldset#wagons-table > table.table.op-skip-cards > tbody > tr + tr {
  border-top: 1px solid var(--op-border-light, #eef0f2) !important;
}

/* Cells: weniger Padding-Vertikal, mehr Atemraum */
html body fieldset#railcars-table > table.table.op-skip-cards > tbody > tr > td,
html body fieldset#wagons-table > table.table.op-skip-cards > tbody > tr > td {
  background: transparent !important;
  border: 0 !important;
  padding: 12px 8px !important;
  vertical-align: middle !important;
}

/* Footer (Add-Button-Row) */
html body fieldset#railcars-table > table.table.op-skip-cards > tfoot > tr,
html body fieldset#wagons-table > table.table.op-skip-cards > tfoot > tr {
  background: transparent !important;
  border: 0 !important;
}
html body fieldset#railcars-table > table.table.op-skip-cards > tfoot > tr > th,
html body fieldset#wagons-table > table.table.op-skip-cards > tfoot > tr > th {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--op-border-light, #eef0f2) !important;
  padding: 12px 8px !important;
  font-size: 12px !important;
  color: var(--op-text-muted, #475569) !important;
}

/* Add-Button-Look */
html body fieldset#railcars-table button.btn-link.btn-block,
html body fieldset#wagons-table button.btn-link.btn-block {
  width: 100% !important;
  background: var(--op-surface-elevated, #fafbfc) !important;
  border: 1px dashed var(--op-border, #cbd5e1) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}
html body fieldset#railcars-table button.btn-link.btn-block:hover,
html body fieldset#wagons-table button.btn-link.btn-block:hover {
  background: rgba(141, 185, 81, 0.06) !important;
  border-color: var(--op-primary, #8db951) !important;
  color: var(--op-primary-dark, #6f9a3c) !important;
}

/* Input-Felder in Form-Tables: dezent */
html body fieldset#railcars-table input[type="text"],
html body fieldset#railcars-table input[type="number"],
html body fieldset#wagons-table input[type="text"],
html body fieldset#wagons-table input[type="number"] {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--op-border-light, #eef0f2) !important;
  background: white !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
html body fieldset#railcars-table input:focus,
html body fieldset#wagons-table input:focus {
  border-color: var(--op-primary, #8db951) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(141, 185, 81, 0.10) !important;
}

/* Select feiner */
html body fieldset#railcars-table .form-control[size],
html body fieldset#wagons-table .form-control[size],
html body fieldset#wagons-table select.form-control,
html body fieldset#railcars-table select.form-control {
  height: 32px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

/* Legend = Sektion-Title */
html body fieldset#railcars-table > legend,
html body fieldset#wagons-table > legend {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--op-text, #0f172a) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "3 Wagen unvollständig" — Warning-Banner */
html body fieldset#wagons-table .alert,
html body fieldset#wagons-table > div.text-center.text-danger,
html body fieldset#wagons-table .text-danger:has(.fa-warning) {
  background: rgba(220, 38, 38, 0.06) !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 8px 0 !important;
  font-weight: 600 !important;
}

/* =============================================================
 * PHASE 92 — UI-Audit Sweep (2026-04-27)
 * Folge-Fixes aus systematischem Audit über DEV.
 * Findings: AUDIT-FINDINGS-2026-04-27.md
 * ============================================================= */

/* F-03 / strukturell — d-md-block-Misuse in inline-Kontexten.
 * Bootstrap d-md-block setzt display:block ab ≥768px. Wenn das innerhalb
 * eines Buttons/Tab-Links/Badge steht, bricht der Inhalt um — sichtbar
 * z.B. als "Monat sansicht" auf dem Dashboard-Calendar-Toolbar.
 * Hier: in inline-Kontexten zwingen wir das wieder auf inline.
 * Touched ohne Blade-Edit den 152er-Pool an d-md-block-Spans im Code. */
.btn span.d-md-block,
.btn-group .btn span.d-md-block,
.nav-link span.d-md-block,
.nav-tabs span.d-md-block,
.nav-pills span.d-md-block,
.label span.d-md-block,
.badge span.d-md-block,
button span.d-md-block,
a.btn span.d-md-block {
  display: inline !important;
}

/* F-01 — Honeypot-Input final wegnageln (defensive Backstop).
 * Blade-Files setzen jetzt style="display:none", aber falls künftige
 * Templates es vergessen: jeder input[value="username"] ohne name-Attr
 * ist ein vestigialer Honeypot-Rest. */
input[type="text"][value="username"]:not([name]),
input[data-honeypot] {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

/* F-13 — Filename-Wrap: lange unterstrich-getrennte Filenames sollen
 * an Wort-Grenzen brechen, nicht je Token zerlegt werden.
 * Trifft Cards/Tabellen-Cells in /admin/documents und Order-Documents-Tab. */
.op-card-title,
.op-card-cell,
[data-card-config] td,
[data-card-config] .op-card-row,
table.dataTable td.filename,
.attachment-card .filename,
.document-card .filename {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* F-17 — Empty-Cell-Placeholder für Card-View-Tabellen.
 * Card-Cells ohne Inhalt zeigen jetzt einen "—" statt vermeintlich
 * defektem Render. Greift nur in Card-Layout (data-card-config).
 * NICHT in Header/Footer-Cells. */
[data-card-config] .op-card-row td:empty::before,
[data-card-config] .op-card-cell:empty::before,
[data-card-config] td.op-card-cell-value:empty::before {
  content: "—";
  color: var(--text-faint, #9ca3af);
  font-style: normal;
  opacity: 0.6;
}

/* F-25 — Mobile Filter-Toolbar auf /admin/orders kompakter.
 * Zeitraum-Vorlage + VON + BIS + Filter-Button waren 4 Zeilen, jetzt
 * 2-spaltiges Grid mit Filter-Button vollbreit unten. */
@media (max-width: 767.98px) {
  .filter-toolbar,
  form.filter-toolbar,
  .op-filter-toolbar,
  .js-filter-toolbar,
  .widget-body-toolbar > form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .filter-toolbar > .btn-primary,
  .filter-toolbar > button[type="submit"],
  .op-filter-toolbar > .btn-primary,
  .op-filter-toolbar > button[type="submit"],
  .js-filter-toolbar > button[type="submit"],
  .widget-body-toolbar > form > button[type="submit"] {
    grid-column: 1 / -1 !important;
  }
  .filter-toolbar label,
  .op-filter-toolbar label,
  .js-filter-toolbar label {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--op-text-subtle, #64748b) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Date-Input-Pairs nebeneinander statt untereinander */
  .filter-toolbar input[type="date"],
  .op-filter-toolbar input[type="date"],
  .js-filter-toolbar input[type="date"] {
    width: 100% !important;
    font-size: 13px !important;
  }
}

/* F-29 — Pagination-Pfeile als saubere Chevron-Buttons.
 * DataTables liefert "<" und ">" als Plain-Text. Wir ersetzen sie via
 * CSS durch Chevron-Glyphen (font-family unicode) ohne JS-Eingriff. */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next,
.dataTables_paginate a.paginate_button.previous,
.dataTables_paginate a.paginate_button.next,
ul.pagination .page-link {
  font-variant-numeric: tabular-nums;
}
.dataTables_paginate .paginate_button.previous {
  font-size: 0 !important;
}
.dataTables_paginate .paginate_button.previous::before {
  content: "‹";
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  font-weight: 600;
}
.dataTables_paginate .paginate_button.next {
  font-size: 0 !important;
}
.dataTables_paginate .paginate_button.next::before {
  content: "›";
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  font-weight: 600;
}

/* F-04 / F-05 — aria-label-getriebene Tab-Links: visuelle Hover-Tooltip-
 * Verstärkung auf Mobile, sodass Sehende das Label per Tap-Hold sehen
 * (Browser-Default). Außerdem icon-only-Tabs etwas größer machen für Touch. */
@media (max-width: 767.98px) {
  .nav-tabs.js-filter-state .nav-link,
  .order-tabs .nav-link,
  .nav-tabs .nav-link:has(> i.fa) {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Polish: Calendar-Widget-Toolbar auf Dashboard — Buttons in einer Zeile,
 * keine Block-Brüche durch d-md-block. Phase 76+ macht Buttons display:flex
 * mit gap:5px — der Gap erzeugt einen sichtbaren Space zwischen Text-Node
 * "Monat" und dem `<span>sansicht</span>`, was als "Monat sansicht" liest.
 * Lösung: Calendar-Toolbar-Buttons als inline-block, gap:0. */
#wid-id-2 .widget-toolbar .btn-group .btn,
.jarviswidget .widget-toolbar .btn-group .btn#mt,
.jarviswidget .widget-toolbar .btn-group .btn#ag,
.jarviswidget .widget-toolbar .btn-group .btn#td {
  display: inline-block !important;
  gap: 0 !important;
  white-space: nowrap !important;
}
.jarviswidget .widget-toolbar .btn-group .btn#mt span,
.jarviswidget .widget-toolbar .btn-group .btn#ag span,
.jarviswidget .widget-toolbar .btn-group .btn#td span {
  display: inline !important;
  margin: 0 !important;
}

/* PHASE 92.1 — Page-Header-Title links statt zentriert.
 * Bug live festgestellt am 2026-04-27 auf /admin/order/1532/tab/train:
 * `.op-page-header__title` ist `flex-direction: column` und sollte standardmäßig
 * `align-items: stretch` haben, computed war aber `center` → Pill+H1 zentriert.
 * Hartes flex-start erzwingen, damit Pill + h1 + Subtitles links beginnen. */
.op-page-header__title {
  align-items: flex-start !important;
}