/* ===========================
   Reset / Basis
=========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --list-item-gap: 0.25rem; /* ← HIER Abstand zwischen Items steuern */
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    padding: 2rem 1rem;
    background: #fff;
}

/* ===========================
   Zentrales Layout
=========================== */
main {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

/* ===========================
   Überschriften
=========================== */
h1, h2, h3 {
    margin: 0 0 1.5rem 0;
}


/* ===========================
   Login
=========================== */
#loginForm {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
    align-items: stretch; /* gleiche Höhe */
}

#loginForm input[type="password"] {
    flex: 1;
    padding: 0.35rem 0.5rem; /* weniger Höhe */
    font-size: 0.95rem;
    height: 100%;
    box-sizing: border-box;
}

#loginForm button {
    padding: 0.35rem 0.75rem; /* flacher */
    font-size: 0.95rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* hellgrün / dunkelgrün */
    background-color: #d8f5d8;
    color: #156615;
    border: 1px solid #156615;
    border-radius: 4px;
}



/* ===========================
   Form (Dashboard)
=========================== */
#createForm {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 2rem;
}

#createForm input[type="url"] {
    flex: 1;
    padding: 0.6rem;
    font-size: 1rem;
}

#createForm button {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    background-color: #fff7e6;
    color: #cc8800;
    border: 1px solid #cc8800;
}

/* ===========================
   Ergebnis
=========================== */
#result {
    margin-bottom: 2rem;
}

#result a {
    font-weight: 600;
}

/* ===========================
   Liste – Grundstruktur
=========================== */
#list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Abstand zwischen Items → weißer Hintergrund sichtbar */
#list li {
    margin-bottom: var(--list-item-gap);
}

/* Letztes Element ohne Extra-Abstand */
#list li:last-child {
    margin-bottom: 0;
}

.list-item {
    background: #f2f2f2;
    padding: 0.75rem 1rem;
    border-radius: 10px;
}


/* ================================
   LISTE – ZEILE 1 (Short-Url)
================================ */

.list-row.first-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
}

/* Gruppe: Short-URL + Copy-Button + Hint */
.shortlink-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* definierbarer Abstand */
}

/* Short-URL */
.short-url a {
    color: #0052cc;
    text-decoration: none;
    word-break: break-all;
    flex-shrink: 1;
}

/* Gemeinsame Basis für beide Chips */
.copy-short-btn,
.copy-hint-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 1.25rem;          /* exakt gleiche Höhe */
    padding: 0 0.45rem;       /* horizontales Padding */
    line-height: 1;           /* verhindert Text-Verschiebung */
    border-radius: 3px;
    font-size: 0.65rem;
    white-space: nowrap;
}

/* Copy-Button */
.copy-short-btn {
    background: #f2f2f2;
    color: #1a75ff;
    border: none;
    cursor: pointer;
}

/* Kopiert-Hinweis */
.copy-hint-short {
    background: #f2f2f2;
    color: #009933;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.copy-hint-short.show {
    opacity: 1;
}

/* Age immer ganz rechts */
.age {
    font-size: 0.85rem;
    color: #52527a;
    white-space: nowrap;
    margin-left: 1rem;
}

/* ================================
   LISTE – ZEILE 2 (Org-Url)
================================ */
.list-row.second-row {
    position: relative;
    margin-top: 0.35rem;
    padding-right: 4rem; /* Platz für Copy-Hint */
    cursor: pointer;
    font-size: 75%;
}

/* Unsichtbares Input */
.original-url {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;

    font: inherit;
    color: #9494b8;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}

/* Hover */
.list-row.second-row:hover .original-url {
    color: #52527a;
}

/* ===========================
   Copy-Hint Check
=========================== */
.copy-hint {
    position: absolute;
    right: -0.4rem;
    top: 50%;
    transform: translateY(-50%);

    font-size: 0.75rem;
    color: #009933;
    background: #f2f2f2;

    padding: 0.2rem 0.45rem;
    border-radius: 4px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.copy-hint.show {
    opacity: 1;
}

.text-danger {
	color: #b00020;
}

/* Logout-Badge rechts oben im Container */
.logout-badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #d1e3fa;
    color: #1566d1;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #fff; /* Border definieren + Farbe */
}

.logout-badge:hover {
	border: 1px solid #1566d1; /* Border definieren + Farbe */
}

/* Container für Überschrift + Logout */
.header-container {
    position: relative;
    margin-bottom: 1.5rem;
}


/* ===========================
   Responsive
=========================== */
@media (max-width: 600px) {
    #createForm {
        flex-direction: column;
    }

    #createForm button {
        width: 100%;
    }
}

/* Del-Button */
.delete-btn {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #cc0000;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem;
}

.delete-btn:hover {
    color: #ff0000;
}