/* ==========================================================================
   Kortli — visual theme

   The app is Tailwind v4 and drives every colour from custom properties
   (--color-lm-* for light, --color-dm-* for dark). So this restyles by
   redefining those tokens rather than fighting individual components, which
   means it keeps working when the app updates.

   One restrained palette, so every screen reads
   as one product rather than four bought-in tools.
   ========================================================================== */

:root {
  /* ---- light ---- */
  --color-lm-brand:            #17191b;   /* primary action: near-black, as dub */
  --color-lm-brand-dark:       #000000;
  --color-lm-main:             #17191b;   /* the top bar */
  --color-lm-primary:          #ffffff;   /* cards */
  --color-lm-secondary:        #f4f4f2;
  --color-lm-text:             #17191b;
  --color-lm-border:           #e3e3df;
  --color-lm-table-border:     #eeeeec;
  --color-lm-table-highlight:  #00000008;
  --color-lm-active:           #f0f0ee;
  --color-lm-input:            #f4f4f2;
  --color-lm-input-text:       #17191b;
  --color-lm-input-border:     #e3e3df;
  --color-lm-disabled-input:   #f0f0ee;

  /* ---- dark ---- */
  --color-dm-brand:            #f2f2f0;
  --color-dm-brand-dark:       #ffffff;
  --color-dm-main:             #101113;
  --color-dm-primary:          #1c1e21;
  --color-dm-secondary:        #141517;
  --color-dm-text:             #f2f2f0;
  --color-dm-border:           #2c2f33;
  --color-dm-table-border:     #2c2f33;
  --color-dm-table-highlight:  #ffffff0a;
  --color-dm-active:           #24272b;
  --color-dm-input:            #141517;
  --color-dm-input-text:       #f2f2f0;
  --color-dm-input-border:     #2c2f33;
  --color-dm-disabled-input:   #1a1c1f;

  /* ---- shape and rhythm ---- */
  --tl-radius:      12px;
  --tl-radius-sm:   9px;
  --tl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
             "Helvetica Neue", Arial, sans-serif;
}

/* The page itself, rather than the brand colour, is the backdrop. */
body { background: #f0f0ee !important; font-family: var(--tl-font) !important;
       -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] body { background: #141517 !important; }

/* -------------------------------------------------------------- typography */
body, button, input, select, textarea, .btn, table, h1, h2, h3, h4, h5 {
  font-family: var(--tl-font) !important;
  letter-spacing: -0.006em;
}
h1, h2, h3, .h1, .h2, .h3 { font-weight: 640 !important; letter-spacing: -0.018em; }

/* ------------------------------------------------------------------ header */
header, .navbar, nav[class*="bg-lm-main"], [class*="bg-lm-main"]:not(td):not(tr) {
  box-shadow: none !important;
  border-bottom: 1px solid transparent;
}

/* ------------------------------------------------------------------- cards */
[class*="rounded"], .card, .modal-content, .dropdown-menu {
  border-radius: var(--tl-radius) !important;
}
.card, [class*="bg-lm-primary"], [class*="bg-dm-primary"] {
  border: 1px solid var(--color-lm-border);
  box-shadow: none !important;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] [class*="bg-lm-primary"] { border-color: var(--color-dm-border); }

/* ----------------------------------------------------------------- buttons */
.btn, button[class*="rounded"], [type="submit"] {
  border-radius: var(--tl-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.004em;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:focus, .btn:active, button:focus { box-shadow: none !important; outline: none !important; }

/* ------------------------------------------------------------------ inputs */
input, select, textarea, .form-control, .input-group > * {
  border-radius: var(--tl-radius-sm) !important;
  font-size: 14.5px !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  box-shadow: none !important;
  border-color: #a2a6ab !important;
}

/* ------------------------------------------------------------------ tables */
table { font-size: 14.5px !important; }
table thead th {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 650 !important;
  opacity: .58;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}
table tbody td { padding-top: 14px !important; padding-bottom: 14px !important; }
table tbody tr { transition: background .1s ease; }

/* --------------------------------------------------------------- side menu */
aside a, nav a, [class*="aside"] a {
  border-radius: var(--tl-radius-sm);
  margin: 1px 8px;
  padding-left: 12px !important;
  font-weight: 520;
}

/* ------------------------------------------------------- small refinements */
.badge, .pill, [class*="badge"] { border-radius: 999px !important; font-weight: 600 !important; }
hr { opacity: .5; }
a { text-underline-offset: 2px; }
/* Dim the footer -- but ONLY a real footer.
   [class*="footer"] also matched the welcome screen, whose wrapper carries the
   class pb-[calc(var(--footer-height)+var(--footer-margin))]. That merely
   MENTIONS the footer, and the whole first screen a new customer sees was
   being drawn at half strength because of it. */
footer, .footer { opacity: .5; font-size: 12px; }

/* ==========================================================================
   The utilities themselves

   Tailwind compiled bg-lm-main and friends to literal colours at build time,
   so redefining the variables above does not reach them. These target the
   compiled classes directly. Verified against the running app rather than
   guessed — each selector below was read off a real element.
   ========================================================================== */

/* ---- the top bar ---- */
[class*="bg-lm-main"] { background-color: #17191b !important; }
:root[data-theme="dark"] [class*="bg-lm-main"] { background-color: #101113 !important; }

/* ---- side menu and cards ---- */
[class*="bg-lm-primary"] { background-color: #ffffff !important; }
:root[data-theme="dark"] [class*="bg-lm-primary"] { background-color: #1c1e21 !important; }

/* ---- the page behind everything ---- */
body, #root, #root > div { background-color: #f0f0ee !important; }
:root[data-theme="dark"] body,
:root[data-theme="dark"] #root,
:root[data-theme="dark"] #root > div { background-color: #141517 !important; }
[class*="bg-lm-main"], [class*="bg-lm-primary"] { background-image: none !important; }

/* ---- borders ---- */
[class*="border-lm-"], [class*="border-dm-"] { border-color: #e3e3df !important; }
:root[data-theme="dark"] [class*="border-lm-"],
:root[data-theme="dark"] [class*="border-dm-"] { border-color: #2c2f33 !important; }

/* ---- inputs ---- */
input, select, textarea { background-color: #f4f4f2 !important; color: #17191b !important; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: #141517 !important; color: #f2f2f0 !important;
}

/* ---- accents: the stock blue is replaced by ink, as dub does ---- */
[class*="text-lm-brand"], [class*="text-dm-brand"],
a:not([class*="btn"]):not([class*="text-white"]) { color: #17191b !important; }
:root[data-theme="dark"] [class*="text-lm-brand"],
:root[data-theme="dark"] [class*="text-dm-brand"],
:root[data-theme="dark"] a:not([class*="btn"]):not([class*="text-white"]) {
  color: #e8e8e6 !important;
}
[class*="border-lm-brand"], [class*="border-dm-brand"] {
  border-color: #17191b !important;
}
:root[data-theme="dark"] [class*="border-lm-brand"],
:root[data-theme="dark"] [class*="border-dm-brand"] { border-color: #e8e8e6 !important; }

/* ---- the side menu reads as navigation, not as a second page ---- */
aside { border-right: 1px solid #e3e3df !important; }
:root[data-theme="dark"] aside { border-right-color: #2c2f33 !important; }
aside a { transition: background .12s ease; }
aside a:hover { background-color: #f0f0ee !important; }
:root[data-theme="dark"] aside a:hover { background-color: #24272b !important; }

/* ---- the list of links: the short link is the thing that matters ---- */
table tbody tr:hover { background-color: #00000006 !important; }
:root[data-theme="dark"] table tbody tr:hover { background-color: #ffffff08 !important; }
table tbody td:nth-child(2) a { font-weight: 600 !important; }

/* ---- keep the top bar's own text legible against the new dark bar ---- */
[class*="bg-lm-main"] a, [class*="bg-lm-main"] h4,
[class*="bg-lm-main"] [class*="text-white"] { color: #ffffff !important; }

/* ---- primary buttons -----------------------------------------------------
   The stock brand blue (#4696e5) filled every primary button. dub uses a solid
   near-black in light, and a light button with dark text in dark. Covers the
   fill, the border and the hover state, which are separate utilities. */
[class*="bg-lm-brand"], [class*="bg-dm-brand"] {
  background-color: #17191b !important;
  color: #ffffff !important;
  border-color: #17191b !important;
}
[class*="bg-lm-brand"]:hover, [class*="bg-dm-brand"]:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}
:root[data-theme="dark"] [class*="bg-lm-brand"],
:root[data-theme="dark"] [class*="bg-dm-brand"] {
  background-color: #f2f2f0 !important;
  color: #17191b !important;
  border-color: #f2f2f0 !important;
}
:root[data-theme="dark"] [class*="bg-lm-brand"]:hover,
:root[data-theme="dark"] [class*="bg-dm-brand"]:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Outline buttons: ink outline rather than blue. */
[class*="border-lm-brand"]:not([class*="bg-lm-brand"]),
[class*="border-dm-brand"]:not([class*="bg-dm-brand"]) {
  color: #17191b !important;
}
:root[data-theme="dark"] [class*="border-lm-brand"]:not([class*="bg-lm-brand"]),
:root[data-theme="dark"] [class*="border-dm-brand"]:not([class*="bg-dm-brand"]) {
  color: #e8e8e6 !important;
}

/* Focus rings picked up the blue too. */
*:focus-visible { outline: 2px solid #17191b !important; outline-offset: 1px; }
:root[data-theme="dark"] *:focus-visible { outline-color: #e8e8e6 !important; }

/* Panel headings inside the create/edit forms. */
[class*="rounded"] > h5, [class*="rounded"] > h4, [class*="rounded"] > h3 {
  font-size: 15px !important;
  font-weight: 640 !important;
  letter-spacing: -0.01em;
}

/* ---- directional border utilities ---------------------------------------
   Tailwind has border-b-*, border-t-* and so on as separate classes, so the
   active tab underline kept its blue after the plain border-* rule above.
   These catch the directional variants. */
[class*="border-b-lm-brand"], [class*="border-b-dm-brand"] { border-bottom-color: #17191b !important; }
[class*="border-t-lm-brand"], [class*="border-t-dm-brand"] { border-top-color: #17191b !important; }
[class*="border-l-lm-brand"], [class*="border-l-dm-brand"] { border-left-color: #17191b !important; }
[class*="border-r-lm-brand"], [class*="border-r-dm-brand"] { border-right-color: #17191b !important; }
:root[data-theme="dark"] [class*="border-b-lm-brand"],
:root[data-theme="dark"] [class*="border-b-dm-brand"] { border-bottom-color: #e8e8e6 !important; }
:root[data-theme="dark"] [class*="border-t-lm-brand"],
:root[data-theme="dark"] [class*="border-t-dm-brand"] { border-top-color: #e8e8e6 !important; }
:root[data-theme="dark"] [class*="border-l-lm-brand"],
:root[data-theme="dark"] [class*="border-l-dm-brand"] { border-left-color: #e8e8e6 !important; }
:root[data-theme="dark"] [class*="border-r-lm-brand"],
:root[data-theme="dark"] [class*="border-r-dm-brand"] { border-right-color: #e8e8e6 !important; }

/* Toggles and progress bars also used the blue. */
input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: #17191b !important; }
:root[data-theme="dark"] input[type="checkbox"]:checked,
:root[data-theme="dark"] input[type="radio"]:checked { accent-color: #e8e8e6 !important; }

/* ---- two stubborn spots --------------------------------------------------
   The active menu item and the visit counter kept the stock blue: their own
   utility classes were winning over the plain attribute selectors above.
   Element + attribute raises specificity enough without resorting to
   anything fragile. */
nav a[class*="bg-lm-main"], aside a[class*="bg-lm-main"] {
  /* A soft pill rather than a solid black block. dub marks the current page
     quietly; a full-strength black bar in a white sidebar shouts. */
  background-color: #e9e9e5 !important;
  color: #17191b !important;
  font-weight: 620 !important;
}
:root[data-theme="dark"] nav a[class*="bg-lm-main"],
:root[data-theme="dark"] aside a[class*="bg-lm-main"] {
  background-color: #2a2d31 !important;
  color: #ffffff !important;
}

/* The visit count and any other brand-coloured inline emphasis. */
td strong, td a strong, td a, table a[class*="text-lm-brand"] { color: inherit !important; }
td a { color: #17191b !important; font-weight: 600; }
:root[data-theme="dark"] td a { color: #e8e8e6 !important; }
td strong { color: inherit !important; }

/* ======================================================================
   The links list, in the style of dub and Rebrandly.

   The stock list is a spreadsheet: a header row and six columns. This turns
   every row into its own card -- the destination site's icon, the short link
   in bold, and where it goes on the line underneath -- and puts the controls
   into a small toolbar with a Filter and a Display button.

   Nothing here removes a feature. The original controls are still the real
   ones; they have been tucked into the Filter panel rather than replaced, so
   they keep working and keep working after an update.
   ====================================================================== */

/* ---- toolbar --------------------------------------------------------- */
[data-tl-toolbar] {
  position: relative;
  display: flex;
  /* The element already carries a "stack downwards" class of its own, which
     turned the toolbar into a column and stretched the search box to 420px
     TALL. Say the direction out loud. */
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

#tl-bar { display: flex; gap: 8px; }

.tl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  font: 600 13.5px/1 inherit;
  color: #17191b; background: #fff;
  border: 1px solid #e3e3df; border-radius: 10px;
  cursor: pointer;
}
.tl-btn:hover { background: #f7f7f5; }
.tl-btn[aria-expanded="true"] { border-color: #17191b; }
.tl-btn svg { width: 15px; height: 15px; opacity: .75; }
.tl-btn .tl-dot {
  width: 7px; height: 7px; border-radius: 99px; background: #2f6fed;
  margin-left: -2px;
}

/* The search box moves to the right and calms down; it was heading-sized. */
[data-tl-search] {
  margin-left: auto;
  flex: 0 1 420px;
  min-width: 200px;
  align-self: center;
}
[data-tl-search] input {
  font-size: 13.5px !important;
  padding: 9px 12px 9px 36px !important;
  border-radius: 10px !important;
  height: 38px;
}
[data-tl-search] svg { opacity: .5; }

/* The original controls become the Filter panel. They are not copies -- they
   are the same controls, shown in a panel instead of a row. */
[data-tl-filters] {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid #e3e3df; border-radius: 12px;
  padding: 14px; box-shadow: 0 10px 30px #17191b1f;
}
body:not([data-tl-filter]) [data-tl-filters] { display: none; }
/* The row was built to read right-to-left on wide screens, which put Export
   first once it sat in a panel. Left to right, and let it wrap. */
[data-tl-filters] > div,
[data-tl-filters] > div > div { flex-direction: row !important; flex-wrap: wrap; }
[data-tl-filters] { display: flex; flex-direction: column; gap: 10px; }

/* ---- the Display panel ----------------------------------------------- */
#tl-display {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
  width: 300px; background: #fff;
  border: 1px solid #e3e3df; border-radius: 12px;
  box-shadow: 0 10px 30px #17191b1f;
  font-size: 13.5px;
}
body:not([data-tl-display]) #tl-display { display: none; }
#tl-display .sec { padding: 14px; border-bottom: 1px solid #eeeeec; }
#tl-display .sec:last-child { border-bottom: 0; }
#tl-display .lbl {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #71757a; font-weight: 600; margin-bottom: 9px;
}
#tl-display .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tl-display .mode {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; font-weight: 600;
  border: 1px solid #e3e3df; border-radius: 10px; background: #f7f7f5;
  cursor: pointer; color: #17191b;
}
#tl-display .mode[aria-pressed="true"] { border-color: #2f6fed; background: #fff; }
#tl-display .mode svg { width: 17px; height: 17px; }
#tl-display .chips { display: flex; flex-wrap: wrap; gap: 7px; }
#tl-display .chip {
  padding: 6px 11px; border-radius: 8px; font-weight: 600; cursor: pointer;
  background: #f0f0ee; color: #45484c; border: 1px solid transparent;
}
#tl-display .chip[aria-pressed="true"] { background: #17191b; color: #fff; }
#tl-display .chip[disabled] { opacity: .45; cursor: default; }
#tl-display .foot { display: flex; justify-content: flex-end; padding: 12px 14px; }
#tl-display .reset {
  background: none; border: 0; color: #71757a; font: 600 13px/1 inherit;
  cursor: pointer; padding: 6px 4px;
}

/* ---- the rows become cards ------------------------------------------- */
/* The wrapper around the table carried the card look. Each row owns it now. */
body[data-tl-list] [data-tl-card] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-tl-list] [data-tl-card] > div { padding: 0 !important; background: transparent !important; }
body[data-tl-list] [data-tl-card] > div:empty { display: none; }
body[data-tl-list] [data-tl-table] tbody tr:last-child { margin-bottom: 0; }
body[data-tl-list] [data-tl-table] { display: block; }
body[data-tl-list] [data-tl-table] thead { display: none; }
body[data-tl-list] [data-tl-table] tbody { display: block; }

body[data-tl-list] [data-tl-table] tbody tr {
  display: grid;
  grid-template-columns: 34px auto auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e3e3df !important;
  border-radius: 12px;
}
body[data-tl-list] [data-tl-table] tbody tr:hover { border-color: #d3d3ce !important; }

/* The destination site's own icon, drawn from a custom property the script
   sets per row. No third-party icon service is involved. */
body[data-tl-list] [data-tl-table] tbody tr::before {
  /* Falls back to the first letter of the destination when a site has no
     icon of its own -- plenty do not, and an empty grey disc looks broken. */
  content: var(--tl-letter, "");
  grid-row: 1 / span 2; grid-column: 1;
  display: flex !important; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 99px;
  font: 700 12px/1 inherit; color: #8b9096;
  background: #f0f0ee var(--tl-icon, none) center / 17px 17px no-repeat;
  border: 1px solid #e9e9e5;
}

body[data-tl-list] [data-tl-table] tbody td {
  display: block; border: 0 !important; padding: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 1 created  2 short link  3 title  4 destination  5 tags  6 visits  7 tick  8 menu */
body[data-tl-list] [data-tl-table] tbody td:nth-child(2) {
  grid-row: 1; grid-column: 2 / span 3;
  font-weight: 600; font-size: 14.5px;
}
body[data-tl-list] [data-tl-table] tbody td:nth-child(3) { grid-row: 1; grid-column: 5; font-size: 13px; color: #71757a; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(4) { grid-row: 2; grid-column: 2; font-size: 13px; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(4) a { color: #71757a; }
/* The stock stylesheet hides every cell's ::before on wide screens (it is how
   the mobile column labels are turned off), so this has to say display out loud. */
body[data-tl-list] [data-tl-table] tbody td:nth-child(4)::before {
  content: "\21B3"; display: inline !important; color: #a4a8ac; margin-right: 6px;
}
body[data-tl-list] [data-tl-table] tbody td:nth-child(1) { grid-row: 2; grid-column: 3; font-size: 12.5px; color: #9aa0a6; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(5) { grid-row: 1 / span 2; grid-column: 6; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(6) { grid-row: 1 / span 2; grid-column: 7; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(7) { grid-row: 1 / span 2; grid-column: 8; }
body[data-tl-list] [data-tl-table] tbody td:nth-child(8) { grid-row: 1 / span 2; grid-column: 9; }

/* "No results found" is a row with one cell. It should not be given a site
   icon and squeezed into the first column. */
body[data-tl-list] [data-tl-table] tbody tr:has(td:only-child)::before { display: none !important; }
body[data-tl-list] [data-tl-table] tbody tr:has(td:only-child) td {
  grid-column: 1 / -1; text-align: center; color: #71757a; padding: 10px 0 !important;
}

/* The click count gets the pill dub gives it. */
body[data-tl-list] [data-tl-table] tbody td:nth-child(6) a {
  display: inline-block; padding: 5px 11px; border-radius: 99px;
  background: #f4f4f2; color: #17191b; font-size: 12.5px; text-decoration: none;
}
body[data-tl-list] [data-tl-table] tbody td:nth-child(6) a::after { content: " clicks"; color: #71757a; }

/* Rows mode: the same cards, one line each. */
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody tr { padding: 8px 14px; }
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody tr::before {
  grid-row: 1; width: 22px; height: 22px; background-size: 13px 13px;
}
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody td { grid-row: 1 !important; }
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody td:nth-child(2) { grid-column: 2; }
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody td:nth-child(4) { grid-column: 3; }
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody td:nth-child(3) { grid-column: 4; }
body[data-tl-list][data-tl-mode="rows"] [data-tl-table] tbody td:nth-child(1) { grid-column: 5; text-align: right; }

/* Which details are shown is up to the Display panel. */
body[data-tl-off~="date"]  [data-tl-table] tbody td:nth-child(1),
body[data-tl-off~="title"] [data-tl-table] tbody td:nth-child(3),
body[data-tl-off~="dest"]  [data-tl-table] tbody td:nth-child(4),
body[data-tl-off~="tags"]  [data-tl-table] tbody td:nth-child(5),
body[data-tl-off~="clicks"] [data-tl-table] tbody td:nth-child(6) { display: none !important; }

/* ---- the same, in the dark theme ------------------------------------- */
:root[data-theme="dark"] .tl-btn { background: #1b1d1f; color: #e6e7e8; border-color: #33373b; }
:root[data-theme="dark"] .tl-btn:hover { background: #232629; }
:root[data-theme="dark"] .tl-btn[aria-expanded="true"] { border-color: #e6e7e8; }
:root[data-theme="dark"] [data-tl-filters],
:root[data-theme="dark"] #tl-display { background: #1b1d1f; border-color: #33373b; box-shadow: 0 10px 30px #0006; }
:root[data-theme="dark"] #tl-display .sec { border-bottom-color: #2a2d30; }
:root[data-theme="dark"] #tl-display .mode { background: #232629; border-color: #33373b; color: #e6e7e8; }
:root[data-theme="dark"] #tl-display .mode[aria-pressed="true"] { background: #1b1d1f; border-color: #6ea0ff; }
:root[data-theme="dark"] #tl-display .chip { background: #232629; color: #cfd3d6; }
:root[data-theme="dark"] #tl-display .chip[aria-pressed="true"] { background: #e6e7e8; color: #17191b; }
:root[data-theme="dark"] body[data-tl-list] [data-tl-table] tbody tr,
:root[data-theme="dark"][data-tl-list] [data-tl-table] tbody tr { background: #1b1d1f; border-color: #2a2d30 !important; }
:root[data-theme="dark"] body[data-tl-list] [data-tl-table] tbody tr::before { background-color: #232629; border-color: #33373b; }
:root[data-theme="dark"] body[data-tl-list] [data-tl-table] tbody td:nth-child(6) a { background: #232629; color: #e6e7e8; }


/* ---------------------------------------------------------------------------
   The badge on the product.

   The stock screen draws Shlink's own mark, in the header and on the welcome
   card. Kortli is built on Shlink and says so plainly in the README and in
   THIRD-PARTY-NOTICES.md -- but a product somebody paid for should not wear
   another product's badge in its own window.

   An inline <svg> cannot be swapped out by CSS alone: `content: url()` does
   not replace it. So the drawing inside is hidden and ours is painted on the
   same element as a background. The size and position it already had are kept.

   Every Font Awesome icon also uses a 512 viewBox, which is why the
   :not(.svg-inline--fa) part matters -- without it, every icon on the screen
   would turn into the logo.
--------------------------------------------------------------------------- */
svg[viewBox="0 0 512 512"]:not(.svg-inline--fa) > * { display: none; }

svg[viewBox="0 0 512 512"]:not(.svg-inline--fa) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2044%2088%2056%22%3E%3Cpath%20d%3D%22M38%2084%20Q64%2030%2090%2084%22%20fill%3D%22none%22%20stroke%3D%22%2317191b%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%2317191b%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%23FF5A36%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:root[data-theme="dark"] svg[viewBox="0 0 512 512"]:not(.svg-inline--fa) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2044%2088%2056%22%3E%3Cpath%20d%3D%22M38%2084%20Q64%2030%2090%2084%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%23FF5A36%22%2F%3E%3C%2Fsvg%3E");
}

/* The header strip is dark whatever the theme, so its mark is always the
   white one. */
svg.w-7[viewBox="0 0 512 512"]:not(.svg-inline--fa),
:root[data-theme="dark"] svg.w-7[viewBox="0 0 512 512"]:not(.svg-inline--fa) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2044%2088%2056%22%3E%3Cpath%20d%3D%22M38%2084%20Q64%2030%2090%2084%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2284%22%20r%3D%2211%22%20fill%3D%22%23FF5A36%22%2F%3E%3C%2Fsvg%3E");
}

/* "Learn more about Shlink" on the welcome card. The credit belongs in the
   README and the notices file, not as a link out of the product. */
a[href*="shlink.io"] { display: none !important; }

/* The footer read "Server: v5.1.6 - Client: v4.8.1" -- the engine's version
   numbers, which mean nothing to the owner and contradict the Kortli version.
   The real version is on the Settings page, under About. */
small.text-gray-500:has(a b) { display: none !important; }