/* Kutt Dark Mode – Patrick Edition (v4)
   Fokus: weniger "flach", mehr Tiefe & Kontrast
   Accent: #1D6397
*/
:root{
  --accent:#1D6397;

  /* neue, feinere Dunkeltöne */
  --bg:#0B0E13;          /* Seitenhintergrund */
  --bg-dim:#0F141A;      /* sehr dunkle Flächen */
  --bg-elev:#121821;     /* angehobene Flächen */
  --panel:#161D27;       /* Karten/Tabellenfläche */
  --panel-2:#1B2430;     /* Header/Foot der Tabelle */
  --bg-hover:#1F2A36;    /* Hover-Highlight */

  --text:#E8EAF0;
  --muted:#A6ADBB;

  --border:#283544;            /* normaler Rand */
  --border-strong:#33465A;     /* stärkerer Rand */
  --shadow:rgba(0,0,0,.45);

  --success:#2EA043;
  --warn:#C69026;
  --danger:#E5534B;
}

/* Global */
html,body{
  background:var(--bg) !important;
  color:var(--text) !important;
}
a{ color:var(--accent); }
a:hover{ opacity:.9; }

/* Subtile Akzent-Vignette im Hintergrund */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(29,99,151,.18), transparent 60%),
    radial-gradient(800px 400px at 10% 120%, rgba(29,99,151,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 120%, rgba(29,99,151,.08), transparent 55%);
}

/* Layout & Cards (Ant) */
[class*="ant-layout"]{ background:transparent !important; }
[class*="ant-layout-sider"]{ background:var(--bg-elev) !important; }

[class*="ant-card"]{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 10px 30px var(--shadow) !important;
  color:var(--text) !important;
  border-radius:12px !important;
}
[class*="ant-card"] .ant-card-head{
  background:var(--panel-2) !important;
  border-bottom:1px solid var(--border) !important;
  color:var(--text) !important;
  border-top-left-radius:12px; border-top-right-radius:12px;
}

/* Headings & text */
h1,h2,h3,h4,h5,h6{ color:var(--text) !important; }
p,span,small,li,dt,dd,th,td,label{ color:var(--text) !important; }
[class*="ant-typography"]{ color:var(--text) !important; }

/* Inputs */
input, textarea, [class*="ant-input"], [class*="ant-select-selector"], [class*="ant-picker"],
[class*="ant-select-dropdown"], [class*="ant-dropdown"], [class*="ant-modal"], [class*="ant-popover"] {
  background:var(--bg-dim) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}
[class*="ant-input"]::placeholder{ color:var(--muted) !important; }
[class*="ant-select-selection-placeholder"]{ color:var(--muted) !important; }
[class*="ant-picker"] .ant-picker-input > input::placeholder{ color:var(--muted) !important; }
:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px !important;
}

/* Buttons */
.ant-btn{
  background:var(--bg-dim) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
  padding:6px 14px !important;
  box-shadow:none !important;
}
.ant-btn:hover, .ant-btn:focus{
  background:var(--panel) !important;
  border-color:var(--accent) !important;
}
.ant-btn-primary{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}
.ant-btn-primary:hover, .ant-btn-primary:focus{ filter:brightness(1.08) !important; }

/* CHECKBOXES & SWITCHES */
.ant-checkbox-inner{
  background:var(--bg-dim) !important;
  border:2px solid var(--border) !important;
  box-shadow:none !important;
  border-radius:4px !important;
}
.ant-checkbox:hover .ant-checkbox-inner{ border-color:var(--accent) !important; }
.ant-checkbox-input:focus + .ant-checkbox-inner{
  box-shadow:0 0 0 2px rgba(29,99,151,.35) !important;
}
.ant-checkbox-checked .ant-checkbox-inner{
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.ant-checkbox-checked .ant-checkbox-inner::after{ border-color:#fff !important; }
.ant-checkbox + span{ color:var(--text) !important; }

/* Fallback native Checkbox (für "Show advanced options") */
input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:16px; height:16px; margin:0 8px 0 0;
  background:var(--bg-dim); border:2px solid var(--border); border-radius:4px;
  position:relative; vertical-align:middle;
}
input[type="checkbox"]:hover{ border-color:var(--accent); }
input[type="checkbox"]:focus{ outline:2px solid var(--accent); outline-offset:2px; }
input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
input[type="checkbox"]:checked::after{
  content:""; position:absolute; top:1px; left:4px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* Radios & Switches */
.ant-switch{ background:var(--border) !important; }
.ant-switch-checked{ background:var(--accent) !important; }
.ant-radio-inner{ background:var(--bg-dim) !important; border-color:var(--border) !important; }
.ant-radio-checked .ant-radio-inner{ border-color:var(--accent) !important; }
.ant-radio-checked .ant-radio-inner::after{ background:var(--accent) !important; }

/* ANT-Table (falls irgendwo genutzt) */
.ant-table-wrapper, .ant-table, .ant-table-container, .ant-table-content, .ant-table-body,
.ant-table-thead, .ant-table-tbody, .ant-table-footer, .ant-table-summary, .ant-table-pagination {
  background:var(--panel) !important;
}
.ant-table, .ant-table-container{ border-color:var(--border) !important; }
.ant-table-thead > tr > th{
  background:var(--panel-2) !important;
  color:var(--muted) !important;
  border-bottom:1px solid var(--border) !important;
}
.ant-table-tbody > tr > td{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
}
.ant-table-row:hover > td{
  background:var(--bg-hover) !important;
  box-shadow:inset 2px 0 0 var(--accent);
}
.ant-table-placeholder{ background:var(--panel) !important; }
.ant-table-cell{ background:var(--panel) !important; color:var(--text) !important; }

/* Menus & sider */
.ant-menu, .ant-menu-sub, .ant-menu-item, .ant-menu-submenu{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
.ant-menu-item-selected, .ant-menu-item-active{
  background:var(--bg-hover) !important; color:var(--accent) !important;
}

/* Overlays */
.ant-modal-content, .ant-popover-inner, .ant-dropdown-menu, .ant-notification-notice{
  background:var(--panel) !important; color:var(--text) !important; border:1px solid var(--border) !important;
  border-radius:12px !important;
}
.ant-tooltip-inner{ background:var(--panel-2) !important; color:var(--text) !important; }
.ant-tooltip-arrow::before{ background:var(--panel-2) !important; }

/* Tags, badges, alerts */
.ant-tag{ background:var(--bg-dim) !important; color:var(--text) !important; border-color:var(--border) !important; }
.ant-badge-count{ background:var(--accent) !important; color:#fff !important; }
.ant-alert-success{ background:rgba(46,160,67,.14) !important; border-color:rgba(46,160,67,.35) !important; color:var(--text) !important; }
.ant-alert-warning{ background:rgba(198,144,38,.14) !important; border-color:rgba(198,144,38,.35) !important; }
.ant-alert-error{ background:rgba(229,83,75,.14) !important; border-color:rgba(229,83,75,.35) !important; }

/* Forms layout lines */
.ant-form-item-label > label{ color:var(--muted) !important; }
.ant-divider, .ant-form-item{ border-color:var(--border) !important; }

/* Pagination */
.ant-pagination-item{ background:var(--bg-dim) !important; border-color:var(--border) !important; border-radius:8px !important; }
.ant-pagination-item a{ color:var(--text) !important; }
.ant-pagination-item-active{ border-color:var(--accent) !important; }
.ant-pagination-item-active a{ color:var(--accent) !important; }
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link{
  background:var(--bg-dim) !important; border-color:var(--border) !important; color:var(--text) !important; border-radius:8px !important;
}

/* Code blocks */
pre, code{ background:var(--bg-dim) !important; color:var(--text) !important; border:1px solid var(--border) !important; border-radius:10px !important; }

/* Scrollbars (webkit) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:var(--bg-dim); }
*::-webkit-scrollbar-thumb{ background:var(--panel-2); border:2px solid var(--bg-dim); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Login page guesses */
.login, [class*="login"], [class*="auth"], [class*="signin"]{ background:var(--bg) !important; color:var(--text) !important; }
.login input, .login .ant-input, .login .ant-btn{ border-color:var(--border) !important; }

/* Links styled as buttons */
a.ant-btn{ color:#fff !important; }

/* Chips for link states */
.status-success{ color:var(--success) !important; }
.status-warn{ color:var(--warn) !important; }
.status-danger{ color:var(--danger) !important; }

/* --- HTMX Tabelle (Links-Übersicht) --- */

/* Table shell */
table{
  background:var(--panel) !important;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px var(--shadow);
}

/* Controls */
table thead tr.controls,
table tfoot tr.controls{
  background:var(--panel-2) !important;
}
table thead tr.controls th,
table tfoot tr.controls th{
  color:var(--text) !important;
  border-bottom:1px solid var(--border);
  padding:12px 16px;
}

/* Header */
table thead tr:not(.controls) th{
  background:var(--panel-2) !important;
  color:var(--muted) !important;
  text-align:left;
  font-weight:600;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}

/* Body + Zebra + Hover-Akzentkante */
table tbody tr:nth-child(even) td{ background:var(--panel) !important; }
table tbody tr:nth-child(odd) td{ background:var(--bg-dim) !important; }
table tbody td{
  color:var(--text) !important;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
table tbody tr:hover td{
  background:var(--bg-hover) !important;
  box-shadow:inset 4px 0 0 var(--accent);
}

/* Search input */
table .table-input.search{
  background:var(--bg-dim) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:10px;
  padding:8px 10px;
}
table .table-input.search::placeholder{ color:var(--muted) !important; }

/* Buttons in Controls/Actions */
table .limit button.nav,
table .pagination button.nav,
table .actions .action,
table .button.action{
  background:var(--bg-dim) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:10px;
  padding:6px 10px;
}
table .limit button.nav[disabled],
table .pagination button.nav[disabled]{ opacity:.55; }
table .pagination button.nav:hover{ border-color:var(--accent) !important; }

/* Divider in controls */
table .nav-divider{
  width:1px; height:28px;
  background:var(--border);
  margin:0 12px;
}

/* Icons sichtbar machen */
table svg{ color:var(--text) !important; }
table svg[stroke="#000"]{ stroke:var(--text) !important; }
table svg[fill="#000"]{ fill:var(--text) !important; }

/* Right-fade in dunkler Optik */
.right-fade{ position:relative; }
.right-fade::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:48px;
  background:linear-gradient(90deg, rgba(18,24,33,0) 0%, rgba(18,24,33,1) 75%);
  pointer-events:none;
}

/* Actions Spalte */
td.actions{ display:flex; gap:8px; align-items:center; }
td.actions .action{ display:inline-flex; align-items:center; justify-content:center; }

/* Clipboard Gruppe */
.clipboard.small{ display:inline-flex; align-items:center; gap:6px; }
.clipboard.small button{ background:var(--bg-dim) !important; border:1px solid var(--border) !important; }

/* Meta-Spalten etwas dezenter */
td.created-at, td.views{ color:var(--muted) !important; }

/* Links in Zellen */
td a{ color:var(--text) !important; }
td a:hover{ color:var(--accent) !important; }

/* System prefers dark */
@media (prefers-color-scheme: dark){
  html, body{ background:var(--bg) !important; color:var(--text) !important; }
}

.site-footer {
  margin-top: 3rem;
  text-align: center;
}

.site-footer p {
  color: var(--muted);
  font-size: 1rem; /* Grundgröße */
}

.site-footer a {
  color: var(--text);
  font-weight: 600; /* macht sie fett */
  font-size: 1.05rem; /* leicht größer als Standardtext */
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer span[aria-hidden="true"] {
  opacity: .5;
  margin: 0 .5rem;
}

.site-footer .link {
  background: none;
  border: none;
  font-weight: 600;  /* jetzt gleich wie die Links */
  font-size: 1.05rem;
  color: var(--accent);
  cursor: pointer;
}

.site-footer .link:hover {
  text-decoration: underline;
}

/* --- Fix: remove bright middle stripes --- */
.right-fade::after {
  content: none !important; /* blendet das Fade-Overlay komplett aus */
}

/* --- Clean Table Look: keine Linien zwischen Spalten/Zeilen --- */
table td,
table th {
  border: none !important;
}

/* --- Fix: make action icons visible in dark mode --- */
table .actions svg,
table .actions svg path,
table .actions svg rect,
table .actions svg circle {
  stroke: var(--text) !important;
  fill: none !important;
}

table .actions svg[fill],
table .actions svg[fill="currentColor"] {
  fill: var(--text) !important;
}

table .actions .delete svg { stroke: var(--danger) !important; }
table .actions .edit svg   { stroke: var(--accent) !important; }
table .actions .stats svg  { stroke: var(--accent) !important; }
table .actions .qrcode svg { stroke: var(--text) !important; }

/* Optional: Hover-Effekte für Icons */
table .actions button:hover svg,
table .actions a:hover svg {
  stroke: var(--accent) !important;
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* --- Icon-Fix global (Tabelle, Clipboard, Pagination, Actions) --- */

/* 1) Elternfarben setzen, damit currentColor funktioniert */
table .actions .action,
table .pagination button.nav,
td.short-link .clipboard.small button,
td.short-link .clipboard.small,
td a,
table .button.action {
  color: var(--text) !important;   /* Grundfarbe für Icons */
  opacity: 1 !important;
}

/* 2) SVGs in der Tabelle sichtbar machen (stroke/fill überschreiben) */
table svg,
table svg * {
  stroke: var(--text) !important;  /* überschreibt stroke="#000" etc. */
  fill: none !important;           /* Standard: Konturlinien */
  stroke-width: 1.6 !important;    /* leicht kräftiger */
}

/* 3) Fälle, in denen das SVG flächig gefüllt sein soll */
table svg[fill],
table svg[fill="currentColor"],
table .qrcode svg {
  fill: var(--text) !important;
  stroke: none !important;
}

/* 4) Aktionen farblich differenzieren (über currentColor) */
table .actions .delete { color: var(--danger) !important; }
table .actions .edit,
table .actions .stats { color: var(--accent) !important; }
table .actions .qrcode { color: var(--text) !important; }

/* 5) Clipboard-Icons (Copy/Check) */
td.short-link .clipboard.small .copy { color: var(--text) !important; }
td.short-link .clipboard.small .check { color: var(--success) !important; }
td.short-link .clipboard.small svg,
td.short-link .clipboard.small svg * {
  stroke: currentColor !important;
  fill: none !important;
}

/* 6) Pagination-Pfeile */
table .pagination svg,
table .pagination svg * {
  stroke: currentColor !important;
  fill: none !important;
}

/* 7) Falls irgendwo inline style="opacity:0" gesetzt ist */
table .actions svg { opacity: 1 !important; }


/* --- Actions-Icons sichtbar & farblich differenziert --- */

/* 1) Grundfarbe je Aktion über currentColor steuern */
table .actions .action { color: var(--text) !important; }
table .actions .stats   { color: var(--accent) !important; }  /* Diagramm */
table .actions .edit    { color: var(--accent) !important; }  /* Stift   */
table .actions .delete  { color: var(--danger) !important; }  /* Mülleimer */
table .actions .qrcode  { color: var(--text) !important; }    /* QR */
table .actions .password{ color: var(--warn) !important; }    /* Schloss */

/* 2) Alle Linien-Icons: stroke an currentColor binden (überschreibt stroke="#000") */
table .actions svg,
table .actions svg * {
  stroke: currentColor !important;
  fill: none !important;     /* Standard: nur Kontur */
  stroke-width: 1.6 !important;
  opacity: 1 !important;
}

/* 3) QR-Icon ist flächig: fill benutzen, keinen stroke */
table .actions .qrcode svg,
table .actions .qrcode svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* 4) Größe & Alignment (optional) */
table .actions svg { width: 18px; height: 18px; vertical-align: middle; }

/* 5) Disabled-Buttons nicht unsichtbar werden lassen */
table .actions .action[disabled],
table .actions .action[disabled] svg { opacity: .55 !important; }

/* 6) Clipboard-Icons im "Short link" Feld ebenfalls sichtbar machen */
td.short-link .clipboard.small,
td.short-link .clipboard.small button { color: var(--text) !important; }
td.short-link .clipboard.small svg,
td.short-link .clipboard.small svg * { stroke: currentColor !important; fill: none !important; }

/* 7) Pagination-Pfeile auf currentColor setzen */
table .pagination { color: var(--text) !important; }
table .pagination svg,
table .pagination svg * { stroke: currentColor !important; fill: none !important; }


/* === FINAL ICON FIX (maximale Spezifität) === */

/* Basis: Elternfarbe je Aktion (steuert currentColor) */
td.actions a.button.action,
td.actions button.action { color: var(--text) !important; }

td.actions a.button.action.stats { color: var(--accent) !important; }   /* Diagramm */
td.actions button.action.edit    { color: var(--accent) !important; }   /* Stift    */
td.actions button.action.delete  { color: var(--danger) !important; }   /* Müll     */
td.actions button.action.qrcode  { color: var(--text) !important; }     /* QR       */
td.actions button.action.password{ color: var(--warn) !important; }     /* Schloss  */

/* HARD RESET aller SVGs in Actions: kein Filter, volle Deckkraft */
td.actions svg,
td.actions svg * {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  stroke-opacity: 1 !important;
  fill-opacity: 1 !important;
}

/* Linien-Icons (Stats, Edit, Delete, Password) – Kontur sichtbar machen */
td.actions a.button.action.stats svg,
td.actions a.button.action.stats svg *,
td.actions button.action.edit    svg,
td.actions button.action.edit    svg *,
td.actions button.action.delete  svg,
td.actions button.action.delete  svg *,
td.actions button.action.password svg,
td.actions button.action.password svg * {
  stroke: currentColor !important;   /* überstimmt stroke="#000"/#5c666b */
  fill: none !important;             /* nur Kontur zeichnen */
  stroke-width: 1.75 !important;
}

/* QR-Icon ist flächig – Füllung benutzen */
td.actions button.action.qrcode svg,
td.actions button.action.qrcode svg * {
  fill: currentColor !important;     /* überstimmt fill="currentColor" auf hell */
  stroke: none !important;
}

/* Größen/Alignment (optional) */
td.actions svg { width: 18px !important; height: 18px !important; vertical-align: middle !important; }

/* Hover: Icons leicht betonen */
td.actions a.button.action:hover,
td.actions button.action:hover { color: var(--accent) !important; }

/* Logo fixen: macht es quadratisch */
img[src*="logo"] {
  width: 30px !important;   /* oder auto für Breite */
  height: 30px !important;
  object-fit: contain !important;
}

/* Select (Dropdown) optisch wie die anderen Inputs machen */
.ant-select,
.ant-select-single .ant-select-selector,
.ant-select-single .ant-select-selector:hover,
.ant-select-single.ant-select-open .ant-select-selector,
.ant-select-single.ant-select-focused .ant-select-selector {
  background: var(--bg-dim) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important; /* wie die anderen Felder */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Inhalt im Select (Text/Suchinput) angleichen */
.ant-select-selection-item,
.ant-select-selection-search-input {
  border-radius: 10px !important;
}

/* Dropdown-Popup ebenfalls abrunden */
.ant-select-dropdown {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden; /* saubere Ecken */
}

/* Optionale Details: Pfeilfarbe und Hover/Fokus */
.ant-select-arrow { color: var(--text) !important; }
.ant-select-focused .ant-select-selector,
.ant-select-selector:hover {
  border-color: var(--accent) !important;
}

select {
  background: var(--bg-dim) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}