/* Google Fonts - Bebas Neue */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Alapszín (gombok, linkek) */
:root {
    --color-primary: #ce100a;
    --brand-secondary: #222222;
    --color-secondary: #222222;
    --color-white: #ffffff;
    --send-icon-color: #222222;
    --send-icon-hover-color: #ce100a;
    --checkbox-bg-color: #ce100a;
    --button-bg-primary: #ce100a;
    --button-bg-primary-box-shadow-color: #222222;
    --button-bg-secondary: #222222;
    --button-bg-secondary-box-shadow-color: #ce100a;
    --text-color: #222222;
    --button-bg: #ffffff;
    --button-bg-box-shadow-color: #222222;
    --button-border-radius: 5px;
}

.logo.nav,
h1,
h2,
th.original-url,
th.created-at,
th.short-link,
th.views,
th.actions {
    font-family: 'Bebas Neue', sans-serif;
}

body h1 span {
  border-bottom: 1px dotted var(--text-color);
}

select,
input,
a.button,
button {
    border-radius: var(--button-border-radius) !important;
}


.chartjs-tooltip *,
.chartist-tooltip *,
.chart-tooltip *,
div[id*="tooltip"] * {
    color: var(--color-primary) !important;
}

svg.map path.active {
  stroke: var(--color-secondary);
}
svg.map path:not(.color-0) {
  fill: var(--color-primary) !important;
}

a.button, button {
  color: var(--text-color);
  background: var(--button-bg);
  box-shadow: 5px 10px 1px var(--button-bg-box-shadow-color);
  border: solid 1px var(--button-bg-box-shadow-color);
}
a.button:focus, a.button:hover, button:focus, button:hover {
  box-shadow: none;
}
.button.action,
button.action,
a.action {
    border: none;
}
a.button.primary, button.primary {
  box-shadow: 5px 10px 1px var(--button-bg-primary-box-shadow-color);
  border: solid 1px var(--color-primary);
}
a.button.primary:focus, a.button.primary:hover, button.primary:focus, button.primary:hover {
  box-shadow: none;
}
a.button.secondary, button.secondary {
  box-shadow: 5px 10px 1px var(--button-bg-secondary-box-shadow-color);
}
a.button.secondary:focus, a.button.secondary:hover, button.secondary:focus, button.secondary:hover {
  box-shadow: none;
}
a.button.danger, button.danger {
  color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 5px 10px 1px var(--color-primary);
  border: solid 1px var(--color-primary);
}
a.button.danger:focus, a.button.danger:hover, button.danger:focus, button.danger:hover {
  box-shadow: none;
}
a.button.danger svg, button.danger svg {
  stroke: var(--color-primary);
}

footer a {
    color: var(--text-color);
}
footer a:hover {
    border-bottom-color: var(--text-color);
}

.logo.nav:hover {
  color: var(--color-primary);
}

a, button.link {
  color: var(--color-primary);
}

main form button.submit svg.send {
  fill: var(--send-icon-color);
}

#advanced {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.short-link.right-fade,
.original-url.right-fade {
  white-space: wrap;
  text-align: left;
}
.short-link.right-fade a,
.original-url.right-fade a {
  word-break: break-word;
}
#main-table-wrapper table tbody td.right-fade::after {
  display: none;
}

.button {
  font-weight: bold !important;
}

/* Fejléc logó méret */
header img, nav img {
  max-height: 50px !important;
  width: auto;
}

/* Tooltip */
.has-tooltip {
  display: inline-block;
  position: relative;
  z-index: 1000;
  cursor: default;
}

a.has-tooltip,
button.has-tooltip,
.button.has-tooltip{
  cursor: pointer !important;
}

.actions, .actions *,
.right-fade {
  overflow: visible !important;
}

.has-tooltip svg {
  pointer-events: none;
}

.has-tooltip::before {
  top: -1px;
  border-top-color: var(--text-color);
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 150%;
  background: var(--text-color);
  transform: translateX(-50%);
  padding: 6px 8px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease;
  height: max-content;
}

.has-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -4px);
}

/* ===== UTM builder – panel ===== */
.wm-utm-panel {
    margin-top: 2rem;
    border: 1px solid #e3e3e7;
    border-radius: var(--button-border-radius);
    background: #fff;
}
.wm-utm-inner { padding: .75rem; }
.wm-utm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; }
@media (max-width: 700px) { .wm-utm-grid { grid-template-columns: 1fr; } }
.wm-utm-label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; margin-top: 0.5rem; }
.wm-utm-label > span { color: #333; font-weight: 600; }
.wm-utm-input {
    border: 1px solid #d7d7dc;
    border-radius: var(--button-border-radius);
    padding: .5rem .6rem;
    font-size: .95rem;
    width: 100%;
}
.wm-utm-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}
.wm-utm-actions button:not(:last-of-type) {
  margin-right: 1rem;
}
.wm-utm-btn {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    border-radius: var(--button-border-radius);
    padding: .45rem .75rem;
    font-weight: bold;
    cursor: pointer; }
.wm-utm-btn:hover {
    filter: brightness(.95);
}
.wm-utm-btn-line {
    background: transparent;
    border: 1px solid #d7d7dc;
    color: #222;
}
.wm-utm-hint {
    margin-top: 1.5rem;
    color: #777;
    font-size: .8rem;
}
.wm-utm-preview {
    margin-top: 1.5rem;
    font-size: .85rem;
    color: var(--text-color);
    word-break: break-all;
}

/* ===== Egyszerű modal a hibákhoz ===== */
#wm-utm-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}
#wm-utm-modal.open {
    display: block;
}
#wm-utm-modal .wm-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#wm-utm-modal .wm-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 2rem));
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.wm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    border-bottom: 1px solid #eee;
}
.wm-modal-title { font-weight: 700; }
.wm-modal-x {
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.25rem;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
.wm-modal-body { padding: 1rem; color: #333; }
.wm-modal-footer {
    padding: .75rem 1rem 2rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}
.wm-modal-btn { background: var(--color-primary); color:#fff; border:1px solid var(--color-primary); border-radius: 6px; padding:.45rem .8rem; font-weight:600; cursor:pointer; }
.wm-modal-btn:hover { filter: brightness(.95); }
#wm-utm-modal ul { margin: .5rem 0 0 1rem; }