/* ==========================================================================
   Tradiant Links — 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.

   The palette is the same one Tradiant Forms uses, so the whole suite 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: .74;   /* was .58, which measured 3.8:1 -- under the floor */
  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 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;
}

/* ---- placeholder text ----------------------------------------------------
   The stock placeholder is #6c757d, which is a shade too faint to read at
   either end: 4.2:1 on the tinted input above in light, and 3.6:1 on the dark
   input in dark — both under the 4.5:1 floor for text, and placeholders are
   text. It is the same colour behind "Domain", "Add tags to the URL",
   "Short code length" and every other hint in the app, so one pair of values
   fixes the lot.

   The app sets it twice — a custom property AND a hard-coded hex in
   .text-placeholder — so both are overridden, along with the native
   ::placeholder used by real input boxes. Measured: 5.3:1 light, 5.7:1 dark. */
:root { --color-placeholder: #5f6368 !important; }
.text-placeholder, [class*="text-placeholder"] { color: #5f6368 !important; }
::placeholder { color: #5f6368 !important; opacity: 1 !important; }
:root[data-theme="dark"] { --color-placeholder: #8b9096 !important; }
:root[data-theme="dark"] .text-placeholder,
:root[data-theme="dark"] [class*="text-placeholder"] { color: #8b9096 !important; }
:root[data-theme="dark"] ::placeholder { color: #8b9096 !important; opacity: 1 !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;
}
/* The options menu opens inside the last cell. Clipping that cell hid the
   menu, so the three-dot button looked dead. */
body[data-tl-list] [data-tl-table] tbody td:last-child { overflow: visible; }
/* 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: #71757a; }
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. This is Tradiant
   Links, so it should wear Tradiant's.

   An inline <svg> cannot be swapped 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, keeping the size and position it already had.

   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%22-6%20-6%20119%20135%22%20width%3D%22512%22%20height%3D%22512%22%20role%3D%22img%22%20aria-label%3D%22Tradiant%22%3E%20%3Cpath%20d%3D%22M20.76%200.0Q24.4%200.24%2025.21%200.4Q26.01%200.57%2026.92%200.87Q27.82%201.17%2029.65%202.15Q31.49%203.13%2034.94%205.18Q38.39%207.23%2047.87%2013.08Q57.35%2018.94%2063.05%2022.61Q68.74%2026.28%2069.34%2026.73Q69.94%2027.18%2070.26%2027.65Q70.58%2028.12%2070.74%2028.68Q70.89%2029.24%2070.83%2029.73Q70.77%2030.23%2070.44%2030.79Q70.12%2031.36%2069.52%2031.89Q68.91%2032.42%2068.32%2032.63Q67.72%2032.85%2067.3%2032.71Q66.88%2032.57%2063.34%2030.55Q59.79%2028.53%2047.49%2020.95Q35.19%2013.36%2030.89%2010.84Q26.58%208.32%2025.78%207.93Q24.98%207.54%2024.06%207.33Q23.14%207.13%2022.04%207.06Q20.93%206.99%2020.02%207.09Q19.12%207.19%2017.46%207.78Q15.8%208.38%2014.96%208.81Q14.11%209.25%2013.33%209.78Q12.54%2010.31%2011.38%2011.45Q10.21%2012.6%209.67%2013.37Q9.12%2014.15%208.89%2014.68Q8.66%2015.21%208.28%2016.75Q7.9%2018.29%207.65%2020.48Q7.4%2022.66%207.18%2030.06Q6.96%2037.46%206.74%2040.33Q6.52%2043.19%206.41%2043.75Q6.3%2044.31%206.11%2044.78Q5.92%2045.24%205.61%2045.43Q5.29%2045.61%204.89%2045.67Q4.5%2045.74%203.47%2045.52Q2.45%2045.31%202.03%2044.98Q1.61%2044.65%201.29%2043.86Q0.96%2043.07%200.67%2041.3Q0.38%2039.53%200.25%2036.18Q0.12%2032.82%200.21%2028.77Q0.29%2024.72%200.47%2021.23Q0.66%2017.74%200.93%2015.87Q1.2%2014.0%201.76%2012.75Q2.32%2011.49%203.19%2010.15Q4.07%208.82%205.17%207.55Q6.27%206.27%207.48%205.22Q8.69%204.17%2010.5%203.05Q12.3%201.94%2014.64%200.98Q16.97%200.03%2018.63%200.01Q20.3%200.0%2020.53%200.0ZM95.17%2043.09Q96.56%2043.59%2097.66%2044.35Q98.76%2045.1%2099.58%2045.84Q100.4%2046.58%20101.22%2047.58Q102.04%2048.57%20102.84%2049.81Q103.65%2051.06%20104.42%2052.52Q105.19%2053.99%20105.65%2055.14Q106.1%2056.3%20106.45%2057.7Q106.8%2059.09%20106.9%2060.16Q107.0%2061.24%20106.97%2062.03Q106.94%2062.83%20106.75%2063.93Q106.57%2065.04%20106.21%2066.19Q105.86%2067.33%20105.34%2068.53Q104.83%2069.73%20104.01%2071.2Q103.19%2072.68%20102.53%2073.67Q101.88%2074.67%20101.06%2075.66Q100.24%2076.65%2099.59%2077.24Q98.94%2077.83%2097.76%2078.64Q96.58%2079.46%2088.34%2084.7Q80.1%2089.95%2064.26%2099.78Q48.43%20109.61%2039.38%20115.04Q30.33%20120.47%2028.88%20121.17Q27.43%20121.86%2025.78%20122.3Q24.14%20122.74%2022.65%20122.87Q21.16%20123.0%2019.26%20122.89Q17.37%20122.77%2016.19%20122.51Q15.01%20122.25%2013.97%20121.81Q12.92%20121.37%2011.92%20120.74Q10.91%20120.1%209.51%20119.01Q8.12%20117.91%206.89%20116.77Q5.65%20115.62%204.84%20114.65Q4.02%20113.69%203.36%20112.68Q2.7%20111.67%202.2%20110.62Q1.7%20109.57%201.34%20108.35Q0.98%20107.14%200.66%20105.08Q0.35%20103.03%200.19%20100.39Q0.04%2097.74%200.03%2095.26Q0.03%2092.78%200.15%2091.13Q0.27%2089.49%200.51%2088.15Q0.75%2086.81%201.12%2085.76Q1.48%2084.72%201.97%2083.97Q2.45%2083.23%203.06%2082.78Q3.67%2082.33%203.87%2082.27Q4.07%2082.21%204.44%2082.26Q4.8%2082.3%205.11%2082.56Q5.42%2082.82%205.79%2083.63Q6.16%2084.44%206.34%2085.25Q6.52%2086.06%206.69%2087.69Q6.85%2089.32%206.98%2094.14Q7.1%2098.96%207.34%20101.55Q7.57%20104.14%207.96%20105.86Q8.35%20107.57%209.35%20109.36Q10.35%20111.14%2010.91%20111.82Q11.48%20112.5%2012.06%20112.97Q12.64%20113.43%2013.63%20113.99Q14.62%20114.55%2015.54%20114.91Q16.46%20115.28%2017.41%20115.44Q18.35%20115.6%2019.48%20115.61Q20.61%20115.62%2021.64%20115.52Q22.67%20115.42%2023.57%20115.09Q24.47%20114.77%2026.72%20113.66Q28.97%20112.55%2033.65%20109.88Q38.33%20107.22%2043.11%20104.34Q47.89%20101.46%2055.94%2096.44Q63.99%2091.42%2069.79%2087.72Q75.58%2084.03%2081.47%2080.15Q87.36%2076.27%2090.39%2074.15Q93.43%2072.02%2095.64%2070.24Q97.86%2068.45%2098.08%2068.19Q98.31%2067.93%2098.72%2067.02Q99.13%2066.11%2099.5%2064.7Q99.86%2063.29%2099.87%2061.93Q99.89%2060.57%2099.61%2059.16Q99.33%2057.76%2098.92%2056.67Q98.5%2055.59%2097.95%2054.66Q97.39%2053.74%2096.61%2052.79Q95.84%2051.85%2094.11%2050.07Q92.38%2048.28%2092.0%2047.76Q91.63%2047.23%2091.47%2046.81Q91.31%2046.4%2091.43%2045.79Q91.56%2045.18%2091.97%2044.63Q92.38%2044.09%2093.12%2043.49Q93.85%2042.9%2094.43%2042.98Q95.01%2043.06%2095.09%2043.08Z%22%20fill%3D%22%239A0CE4%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* The header strip is dark whatever the theme, so its mark is always white. */
svg.w-7[viewBox="0 0 512 512"]:not(.svg-inline--fa),
: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%22-6%20-6%20119%20135%22%20width%3D%22512%22%20height%3D%22512%22%20role%3D%22img%22%20aria-label%3D%22Tradiant%22%3E%20%3Cpath%20d%3D%22M20.76%200.0Q24.4%200.24%2025.21%200.4Q26.01%200.57%2026.92%200.87Q27.82%201.17%2029.65%202.15Q31.49%203.13%2034.94%205.18Q38.39%207.23%2047.87%2013.08Q57.35%2018.94%2063.05%2022.61Q68.74%2026.28%2069.34%2026.73Q69.94%2027.18%2070.26%2027.65Q70.58%2028.12%2070.74%2028.68Q70.89%2029.24%2070.83%2029.73Q70.77%2030.23%2070.44%2030.79Q70.12%2031.36%2069.52%2031.89Q68.91%2032.42%2068.32%2032.63Q67.72%2032.85%2067.3%2032.71Q66.88%2032.57%2063.34%2030.55Q59.79%2028.53%2047.49%2020.95Q35.19%2013.36%2030.89%2010.84Q26.58%208.32%2025.78%207.93Q24.98%207.54%2024.06%207.33Q23.14%207.13%2022.04%207.06Q20.93%206.99%2020.02%207.09Q19.12%207.19%2017.46%207.78Q15.8%208.38%2014.96%208.81Q14.11%209.25%2013.33%209.78Q12.54%2010.31%2011.38%2011.45Q10.21%2012.6%209.67%2013.37Q9.12%2014.15%208.89%2014.68Q8.66%2015.21%208.28%2016.75Q7.9%2018.29%207.65%2020.48Q7.4%2022.66%207.18%2030.06Q6.96%2037.46%206.74%2040.33Q6.52%2043.19%206.41%2043.75Q6.3%2044.31%206.11%2044.78Q5.92%2045.24%205.61%2045.43Q5.29%2045.61%204.89%2045.67Q4.5%2045.74%203.47%2045.52Q2.45%2045.31%202.03%2044.98Q1.61%2044.65%201.29%2043.86Q0.96%2043.07%200.67%2041.3Q0.38%2039.53%200.25%2036.18Q0.12%2032.82%200.21%2028.77Q0.29%2024.72%200.47%2021.23Q0.66%2017.74%200.93%2015.87Q1.2%2014.0%201.76%2012.75Q2.32%2011.49%203.19%2010.15Q4.07%208.82%205.17%207.55Q6.27%206.27%207.48%205.22Q8.69%204.17%2010.5%203.05Q12.3%201.94%2014.64%200.98Q16.97%200.03%2018.63%200.01Q20.3%200.0%2020.53%200.0ZM95.17%2043.09Q96.56%2043.59%2097.66%2044.35Q98.76%2045.1%2099.58%2045.84Q100.4%2046.58%20101.22%2047.58Q102.04%2048.57%20102.84%2049.81Q103.65%2051.06%20104.42%2052.52Q105.19%2053.99%20105.65%2055.14Q106.1%2056.3%20106.45%2057.7Q106.8%2059.09%20106.9%2060.16Q107.0%2061.24%20106.97%2062.03Q106.94%2062.83%20106.75%2063.93Q106.57%2065.04%20106.21%2066.19Q105.86%2067.33%20105.34%2068.53Q104.83%2069.73%20104.01%2071.2Q103.19%2072.68%20102.53%2073.67Q101.88%2074.67%20101.06%2075.66Q100.24%2076.65%2099.59%2077.24Q98.94%2077.83%2097.76%2078.64Q96.58%2079.46%2088.34%2084.7Q80.1%2089.95%2064.26%2099.78Q48.43%20109.61%2039.38%20115.04Q30.33%20120.47%2028.88%20121.17Q27.43%20121.86%2025.78%20122.3Q24.14%20122.74%2022.65%20122.87Q21.16%20123.0%2019.26%20122.89Q17.37%20122.77%2016.19%20122.51Q15.01%20122.25%2013.97%20121.81Q12.92%20121.37%2011.92%20120.74Q10.91%20120.1%209.51%20119.01Q8.12%20117.91%206.89%20116.77Q5.65%20115.62%204.84%20114.65Q4.02%20113.69%203.36%20112.68Q2.7%20111.67%202.2%20110.62Q1.7%20109.57%201.34%20108.35Q0.98%20107.14%200.66%20105.08Q0.35%20103.03%200.19%20100.39Q0.04%2097.74%200.03%2095.26Q0.03%2092.78%200.15%2091.13Q0.27%2089.49%200.51%2088.15Q0.75%2086.81%201.12%2085.76Q1.48%2084.72%201.97%2083.97Q2.45%2083.23%203.06%2082.78Q3.67%2082.33%203.87%2082.27Q4.07%2082.21%204.44%2082.26Q4.8%2082.3%205.11%2082.56Q5.42%2082.82%205.79%2083.63Q6.16%2084.44%206.34%2085.25Q6.52%2086.06%206.69%2087.69Q6.85%2089.32%206.98%2094.14Q7.1%2098.96%207.34%20101.55Q7.57%20104.14%207.96%20105.86Q8.35%20107.57%209.35%20109.36Q10.35%20111.14%2010.91%20111.82Q11.48%20112.5%2012.06%20112.97Q12.64%20113.43%2013.63%20113.99Q14.62%20114.55%2015.54%20114.91Q16.46%20115.28%2017.41%20115.44Q18.35%20115.6%2019.48%20115.61Q20.61%20115.62%2021.64%20115.52Q22.67%20115.42%2023.57%20115.09Q24.47%20114.77%2026.72%20113.66Q28.97%20112.55%2033.65%20109.88Q38.33%20107.22%2043.11%20104.34Q47.89%20101.46%2055.94%2096.44Q63.99%2091.42%2069.79%2087.72Q75.58%2084.03%2081.47%2080.15Q87.36%2076.27%2090.39%2074.15Q93.43%2072.02%2095.64%2070.24Q97.86%2068.45%2098.08%2068.19Q98.31%2067.93%2098.72%2067.02Q99.13%2066.11%2099.5%2064.7Q99.86%2063.29%2099.87%2061.93Q99.89%2060.57%2099.61%2059.16Q99.33%2057.76%2098.92%2056.67Q98.5%2055.59%2097.95%2054.66Q97.39%2053.74%2096.61%2052.79Q95.84%2051.85%2094.11%2050.07Q92.38%2048.28%2092.0%2047.76Q91.63%2047.23%2091.47%2046.81Q91.31%2046.4%2091.43%2045.79Q91.56%2045.18%2091.97%2044.63Q92.38%2044.09%2093.12%2043.49Q93.85%2042.9%2094.43%2042.98Q95.01%2043.06%2095.09%2043.08Z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fsvg%3E");
}

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


/* ---- switches and tick boxes: put the on/off difference back -------------
   Two rules further up reach further than they look, and between them they
   made every switch identical whether it was on or off:

     * [class*="bg-lm-brand"] matches the Tailwind class NAME
       "checked:bg-lm-brand", which sits on the element at all times. So the
       "on" colour was painted on unconditionally.
     * [class*="bg-lm-primary"] { background-image: none } stripped the little
       circle that slides left-to-right, which is the other half of the signal.

   Net effect: a solid ink pill in both states, with no knob. There was no way
   to tell whether you had pressed it. Found on the create-link form, where
   three of them sit together.

   Both halves are restored below, with the state doing the work: a grey track
   with the knob on the left when off, an ink track with a white knob on the
   right when on. Element + attribute beats a bare attribute selector on
   specificity, so these win wherever they sit in the file.

   The switch is matched on "circle-grey-dark" and the tick box on "--tick",
   because those strings appear in their own class names and nowhere else. */

:root {
  /* The stock tick and knob are white, which vanishes on the light "on"
     colour used in dark mode. These are the same shapes drawn in ink. */
  --tl-circle-ink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2317191b'/></svg>");
  --tl-tick-ink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%2317191b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}

/* the sliding switch */
input[type="checkbox"][class*="circle-grey-dark"] {
  background-color: #e4e4e0 !important;
  background-image: var(--circle-grey-dark) !important;
  background-position: left center !important;
  border-color: #d2d2cd !important;
}
input[type="checkbox"][class*="circle-grey-dark"]:checked {
  background-color: #17191b !important;
  background-image: var(--circle-white) !important;
  background-position: right center !important;
  border-color: #17191b !important;
}
:root[data-theme="dark"] input[type="checkbox"][class*="circle-grey-dark"] {
  background-color: #2a2d31 !important;
  background-image: var(--circle-grey-light) !important;
  border-color: #3a3e43 !important;
}
:root[data-theme="dark"] input[type="checkbox"][class*="circle-grey-dark"]:checked {
  background-color: #f2f2f0 !important;
  background-image: var(--tl-circle-ink) !important;
  border-color: #f2f2f0 !important;
}

/* the tick box */
input[type="checkbox"][class*="--tick"] {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #cfcfca !important;
}
input[type="checkbox"][class*="--tick"]:checked {
  background-color: #17191b !important;
  background-image: var(--tick) !important;
  background-position: center !important;
  border-color: #17191b !important;
}
:root[data-theme="dark"] input[type="checkbox"][class*="--tick"] {
  background-color: #1c1e21 !important;
  border-color: #3a3e43 !important;
}
:root[data-theme="dark"] input[type="checkbox"][class*="--tick"]:checked {
  background-color: #f2f2f0 !important;
  background-image: var(--tl-tick-ink) !important;
  border-color: #f2f2f0 !important;
}