/*
 * Agency Overrides
 * Adapter für bestehende W3.CSS-Views, damit sie sich harmonisch in das
 * Freelancer-Design-System einfügen (gleiche Karten, Buttons, Pills, Tabellen).
 * Lädt nach freelancer.css + custom.css. Nutzt die --fl-* Variablen.
 */

/* Fonts & Typo */
body.theme-agency {
  font-family: var(--sans, "Montserrat", system-ui, sans-serif);
  background: var(--fl-bg);
  color: var(--fl-text);
  font-size: 15px;
}

/* Main-Spalte: füllt verbleibende Breite nach der 240px-Sidebar */
body.theme-agency .fl-main {
  padding: 20px 24px 56px 16px;
  max-width: none;
  margin-left: 240px;
}

/* Farbige Stat-Cards: pastel-getönte Karten mit großem Icon-Badge + farbiger Zahl */
body.theme-agency .fl-stats-colored .fl-stat {
  position: relative;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon label"
    "icon value"
    "icon delta";
  gap: 1px 14px;
  align-items: center;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  border-radius: var(--fl-radius);
  overflow: hidden;
}
body.theme-agency .fl-stats-colored .fl-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
body.theme-agency .fl-stats-colored .fl-stat-icon {
  grid-area: icon;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  align-self: center;
}
body.theme-agency .fl-stats-colored .fl-stat-label {
  grid-area: label;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--fl-muted);
}
body.theme-agency .fl-stats-colored .fl-stat-value {
  grid-area: value;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-feature-settings: "tnum","zero";
}
body.theme-agency .fl-stats-colored .fl-stat-delta {
  grid-area: delta;
  font-size: 11px;
  color: var(--fl-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* Farbpalette pro Karte */
body.theme-agency .fl-stat-blue    { background: linear-gradient(135deg,#eff6ff 0%, #ffffff 60%); }
body.theme-agency .fl-stat-blue::before    { background: #3b82f6; }
body.theme-agency .fl-stat-blue .fl-stat-icon   { background: linear-gradient(135deg,#60a5fa,#2563eb); }
body.theme-agency .fl-stat-blue .fl-stat-value  { color: #1d4ed8; }

body.theme-agency .fl-stat-emerald { background: linear-gradient(135deg,#ecfdf5 0%, #ffffff 60%); }
body.theme-agency .fl-stat-emerald::before { background: #10b981; }
body.theme-agency .fl-stat-emerald .fl-stat-icon { background: linear-gradient(135deg,#6ee7b7,#059669); }
body.theme-agency .fl-stat-emerald .fl-stat-value{ color: #047857; }

body.theme-agency .fl-stat-violet  { background: linear-gradient(135deg,#f5f3ff 0%, #ffffff 60%); }
body.theme-agency .fl-stat-violet::before  { background: #8b5cf6; }
body.theme-agency .fl-stat-violet .fl-stat-icon { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
body.theme-agency .fl-stat-violet .fl-stat-value{ color: #6d28d9; }

body.theme-agency .fl-stat-amber   { background: linear-gradient(135deg,#fffbeb 0%, #ffffff 60%); }
body.theme-agency .fl-stat-amber::before   { background: #f59e0b; }
body.theme-agency .fl-stat-amber .fl-stat-icon  { background: linear-gradient(135deg,#fbbf24,#d97706); }
body.theme-agency .fl-stat-amber .fl-stat-value { color: #b45309; }

body.theme-agency .fl-stat-rose    { background: linear-gradient(135deg,#fff1f2 0%, #ffffff 60%); }
body.theme-agency .fl-stat-rose::before    { background: #f43f5e; }
body.theme-agency .fl-stat-rose .fl-stat-icon   { background: linear-gradient(135deg,#fb7185,#e11d48); }
body.theme-agency .fl-stat-rose .fl-stat-value  { color: #be123c; }

/* Headings */
body.theme-agency h1, body.theme-agency h2, body.theme-agency h3, body.theme-agency h4 {
  color: var(--fl-text);
  letter-spacing: -0.01em;
  font-weight: 700;
}
body.theme-agency h1 { font-size: 26px; margin: 0 0 16px; }
body.theme-agency h2 { font-size: 20px; margin: 0 0 12px; }
body.theme-agency h3 { font-size: 17px; margin: 0 0 10px; }

/* W3-Karten → unsere Panels */
body.theme-agency .w3-card,
body.theme-agency .w3-card-2,
body.theme-agency .w3-card-4 {
  background: var(--fl-surface) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow: var(--fl-shadow-sm) !important;
  padding: 18px 20px;
}
body.theme-agency .w3-card.w3-padding,
body.theme-agency .w3-card-4.w3-padding { padding: 18px 22px !important; }

body.theme-agency .w3-round, body.theme-agency .w3-round-small,
body.theme-agency .w3-round-medium, body.theme-agency .w3-round-large,
body.theme-agency .w3-round-xlarge, body.theme-agency .w3-round-xxlarge {
  border-radius: var(--fl-radius) !important;
}

/* W3-Buttons → unsere Buttons */
body.theme-agency .w3-button {
  border-radius: 10px !important;
  font-weight: 600;
  padding: 8px 14px;
  font-size: 13px;
  transition: filter 150ms, transform 150ms;
}
body.theme-agency .w3-button:hover { filter: brightness(1.05); transform: none; }
body.theme-agency .w3-button.w3-tiny { padding: 4px 7px; font-size: 11px; line-height: 1.2; }
body.theme-agency .w3-button.w3-small { padding: 5px 9px; font-size: 12px; line-height: 1.2; }

/* W3 margin-right zwischen Tiny/Small-Buttons stark reduzieren */
body.theme-agency .w3-button.w3-tiny.w3-margin-right,
body.theme-agency .w3-button.w3-small.w3-margin-right { margin-right: 4px !important; }

/* Tabellen-Action-Buttons: einheitliche Höhe + einheitliche Icon-Größe,
   egal welche w3-tiny / w3-small / w3-button-Klasse oder welches FA-Icon */
body.theme-agency table .w3-button,
body.theme-agency table button,
body.theme-agency table a.w3-button {
  height: 28px !important;
  min-width: 28px;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 4px !important;
  vertical-align: middle;
}

body.theme-agency table .w3-button i.fa,
body.theme-agency table .w3-button i.fas,
body.theme-agency table .w3-button i.fab,
body.theme-agency table .w3-button i.far,
body.theme-agency table button i.fa,
body.theme-agency table a.w3-button i.fa {
  font-size: 13px !important;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 1 !important;
  display: inline-block;
}

/* W3 margin-right generell auf modernes Maß */
body.theme-agency .w3-margin-right { margin-right: 8px !important; }
body.theme-agency .w3-margin-left  { margin-left: 8px !important; }
body.theme-agency .w3-margin-top   { margin-top: 12px !important; }
body.theme-agency .w3-margin-bottom{ margin-bottom: 12px !important; }
body.theme-agency .w3-button.w3-large { padding: 11px 18px; font-size: 14px; }

/* Akzentfarben in Buttons sanft anpassen */
body.theme-agency .w3-blue,  body.theme-agency .w3-button.w3-blue,  body.theme-agency .w3-tag.w3-blue  { background: var(--fl-primary) !important; color: #fff !important; }
body.theme-agency .w3-green, body.theme-agency .w3-button.w3-green, body.theme-agency .w3-tag.w3-green { background: var(--fl-accent-emerald) !important; color: #fff !important; }
body.theme-agency .w3-red,   body.theme-agency .w3-button.w3-red,   body.theme-agency .w3-tag.w3-red   { background: #ef4444 !important; color: #fff !important; }
body.theme-agency .w3-amber, body.theme-agency .w3-button.w3-amber, body.theme-agency .w3-tag.w3-amber { background: #f59e0b !important; color: #fff !important; }
body.theme-agency .w3-teal,  body.theme-agency .w3-button.w3-teal,  body.theme-agency .w3-tag.w3-teal  { background: #0ea5e9 !important; color: #fff !important; }
body.theme-agency .w3-grey,  body.theme-agency .w3-button.w3-grey,  body.theme-agency .w3-tag.w3-grey  { background: #94a3b8 !important; color: #fff !important; }
body.theme-agency .w3-light-grey, body.theme-agency .w3-button.w3-light-grey { background: var(--fl-bg) !important; color: var(--fl-text) !important; }
body.theme-agency .w3-orange, body.theme-agency .w3-button.w3-orange, body.theme-agency .w3-tag.w3-orange { background: #f97316 !important; color: #fff !important; }
body.theme-agency .w3-purple, body.theme-agency .w3-button.w3-purple, body.theme-agency .w3-tag.w3-purple { background: var(--fl-accent-violet) !important; color: #fff !important; }

body.theme-agency .w3-text-blue   { color: var(--fl-primary) !important; }
body.theme-agency .w3-text-green  { color: var(--fl-accent-emerald) !important; }
body.theme-agency .w3-text-red    { color: #ef4444 !important; }
body.theme-agency .w3-text-amber  { color: #d97706 !important; }
body.theme-agency .w3-text-teal   { color: #0ea5e9 !important; }
body.theme-agency .w3-text-grey   { color: var(--fl-muted) !important; }
body.theme-agency .w3-text-orange { color: #f97316 !important; }

/* Tags / Badges → Pills */
body.theme-agency .w3-tag,
body.theme-agency .w3-badge {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Panels → Cards mit dezenter Färbung */
body.theme-agency .w3-panel {
  border-radius: var(--fl-radius) !important;
  padding: 14px 18px;
  border: 1px solid var(--fl-border);
  margin: 12px 0;
}
body.theme-agency .w3-panel.w3-green     { background: #ecfdf5 !important; border-color: #a7f3d0; color: #047857 !important; }
body.theme-agency .w3-panel.w3-red       { background: #fef2f2 !important; border-color: #fca5a5; color: #b91c1c !important; }
body.theme-agency .w3-panel.w3-amber,
body.theme-agency .w3-panel.w3-pale-yellow{ background: #fef3c7 !important; border-color: #fde68a; color: #92580d !important; }
body.theme-agency .w3-panel.w3-blue      { background: #dbeafe !important; border-color: #93c5fd; color: #1e40af !important; }
body.theme-agency .w3-panel.w3-pale-red  { background: #fef2f2 !important; border-color: #fca5a5; color: #b91c1c !important; }

/* Tabellen → fl-table-Look */
body.theme-agency .w3-table,
body.theme-agency .w3-table-all {
  border-collapse: collapse;
  font-size: 14px;
}
body.theme-agency .w3-table thead th,
body.theme-agency .w3-table-all thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--fl-muted);
  padding: 11px 14px;
  background: var(--fl-bg) !important;
  border-bottom: 1px solid var(--fl-border) !important;
}
body.theme-agency .w3-table tbody tr,
body.theme-agency .w3-table-all tbody tr {
  border-bottom: 1px solid var(--fl-border) !important;
}
body.theme-agency .w3-table td,
body.theme-agency .w3-table-all td {
  padding: 11px 15px !important;
  border-color: var(--fl-border) !important;
}
body.theme-agency .w3-hoverable tbody tr:hover {
  background: var(--fl-bg) !important;
}

/* Inputs */
body.theme-agency .w3-input,
body.theme-agency .w3-select,
body.theme-agency input[type="text"]:not(.w3-bar-item),
body.theme-agency input[type="email"],
body.theme-agency input[type="password"],
body.theme-agency input[type="number"],
body.theme-agency input[type="date"],
body.theme-agency input[type="time"],
body.theme-agency input[type="search"],
body.theme-agency textarea,
body.theme-agency select {
  border-radius: 10px !important;
  border: 1px solid var(--fl-border) !important;
  font: inherit;
  padding: 9px 12px !important;
}
body.theme-agency .w3-input:focus,
body.theme-agency textarea:focus,
body.theme-agency select:focus {
  outline: none;
  border-color: var(--fl-primary) !important;
  box-shadow: 0 0 0 3px var(--fl-primary-soft);
}

/* Bottom border for h1/h2 headings */
body.theme-agency .w3-border-bottom { border-bottom: 1px solid var(--fl-border) !important; }

/* Modal anpassen */
body.theme-agency .w3-modal-content { border-radius: var(--fl-radius) !important; overflow: hidden; }

/* Sidebar braucht keine W3-Margin mehr */
body.theme-agency #main { margin-left: 0 !important; padding: 0 !important; }

/* Inhalt-Wrapper, falls Views #main verwenden */
body.theme-agency #main > .w3-container.w3-padding-large {
  padding: 0 !important;
}

/* Mobile-Navbar verstecken (alte Implementierung) */
body.theme-agency #myNavbar { display: none !important; }

/* Action-Group + Kebab-Menü für Tabellen-Aktionen */
body.theme-agency .action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
body.theme-agency .action-group .action-primary { margin: 0 !important; }
body.theme-agency .action-kebab {
  position: relative;
  display: inline-block;
}
body.theme-agency .action-kebab-btn {
  background: var(--fl-surface) !important;
  color: var(--fl-text) !important;
  border: 1px solid var(--fl-border) !important;
  margin: 0 !important;
}
body.theme-agency .action-kebab-btn:hover { background: var(--fl-bg) !important; }
body.theme-agency .action-kebab-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  padding: 6px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
body.theme-agency .action-kebab-menu.open { display: block; }
body.theme-agency .action-kebab-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--fl-text) !important;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
body.theme-agency .action-kebab-menu a:hover {
  background: var(--fl-bg);
}
body.theme-agency .action-kebab-menu a i {
  width: 16px;
  text-align: center;
  color: var(--fl-muted);
}

/* Responsive tables: nur explizite Wrapper scrollen, damit Tooltips über die
   Card-Grenzen ragen dürfen (sonst clippt overflow:auto die Tooltip-Boxen). */
body.theme-agency .fl-main { min-width: 0; }
body.theme-agency .w3-card,
body.theme-agency .w3-card-2,
body.theme-agency .w3-card-4 {
  overflow: visible;
  max-width: 100%;
}
body.theme-agency .w3-responsive:not(.overflow-visible) {
  overflow-x: auto;
  max-width: 100%;
}
body.theme-agency .w3-responsive.overflow-visible { overflow: visible !important; }
body.theme-agency .fl-table-card {
  overflow: visible;
  max-width: 100%;
}

/* Tooltip-Wrapper: höherer z-index, Tooltip-Box kompakt + wrap-fähig,
   damit der lange Text nicht aus dem Sichtfeld läuft und die Mitte
   auf dem Icon liegt statt weit daneben. */
body.theme-agency .tooltip-wrapper {
  position: relative;
  display: inline-block;
}
body.theme-agency .tooltip-wrapper .tooltip-text {
  z-index: 10000 !important;
  min-width: 0 !important;
  max-width: 220px;
  width: max-content;
  white-space: normal !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  line-height: 1.35;
}

/* Header-Spalten, die nur ein Icon (im Tooltip-Wrapper) enthalten: zentrieren,
   damit der Tooltip mittig über dem Icon sitzt – Text-Header bleiben links */
body.theme-agency .w3-table thead th:has(.tooltip-wrapper) { text-align: center; }
body.theme-agency .w3-table thead th .tooltip-wrapper { display: inline-block; }

/* Mobile: margin-left weg, Padding für Hamburger oben + kompaktere Karten */
@media (max-width: 860px) {
  body.theme-agency .fl-main {
    margin-left: 0 !important;
    padding: 64px 16px 56px !important;
    overflow-x: hidden;
  }
  body.theme-agency .fl-stats-colored .fl-stat {
    padding: 12px 14px;
    grid-template-columns: 38px 1fr;
    gap: 1px 12px;
  }
  body.theme-agency .fl-stats-colored .fl-stat-icon {
    width: 38px; height: 38px; font-size: 15px;
  }
  body.theme-agency .fl-stats-colored .fl-stat-value { font-size: 22px; }
  body.theme-agency .w3-table thead th,
  body.theme-agency .w3-table-all thead th,
  body.theme-agency .w3-table td,
  body.theme-agency .w3-table-all td { padding: 9px 12px !important; }

  /* Auf Mobile MUSS .w3-responsive scrollen – auch wenn .overflow-visible
     drauf ist (Tooltips spielen auf Touch ohnehin kaum eine Rolle, und
     sonst sprengt eine breite Tabelle das ganze Layout). */
  body.theme-agency .w3-responsive,
  body.theme-agency .w3-responsive.overflow-visible {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* Cards mit großen Inhalten dürfen ihre Breite einschränken */
  body.theme-agency .w3-card,
  body.theme-agency .w3-card-2,
  body.theme-agency .w3-card-4 { max-width: 100%; overflow-x: auto; }
}