:root {
    color-scheme: light dark;
    --accent-color: #74A9F6;
    --bg-color: light-dark(#ffffff, #1a1a1a);
    --text-color: light-dark(#000000, #ffffff);
    --card-bg: light-dark(#f5f5f5, #2a2a2a);
    --card-border: light-dark(#e0e0e0, #3a3a3a);
    --card-hover: light-dark(#e8e8e8, #333333);
    --btn-bg: light-dark(#000000, #ffffff);
    --btn-color: light-dark(#ffffff, #000000);
    --input-bg: light-dark(#ffffff, #2a2a2a);
    --input-border: light-dark(#cccccc, #3a3a3a);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

header {
    text-align: center;
    margin-bottom: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

@media (min-width: 768px) {
    header {
        flex-direction: row;
        justify-content: space-between;
        gap: 2em;
    }
}

.clock {
    font-family: 'Consolas', 'Monaco', monospace, 'Courier New';
    font-size: 3em;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-color);
}

/* Search Container */
.search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.search-input {
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1em;
    background-color: transparent;
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--card-border);
    outline: none;
    transition: border-color 0.2s ease;

    &:focus {
        border-color: var(--text-color);
    }

    &::placeholder {
        opacity: 0.5;
    }
}

.search-results {
    position: absolute;
    top: calc(100% + 0.5em);
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    transition-duration: 0.2s;
    transition-property: opacity, translate, display;
    transition-behavior: allow-discrete;
    opacity: 1;
    translate: 0 0;

    &[hidden] {
        display: none;
        opacity: 0;
        translate: 0 -1em;
    }
}

@starting-style {
    .search-results {
        opacity: 0;
        translate: 0 -1em;
    }
}

.search-result-item {
    padding: 0.75em 1em;
    transition-property: background-color, border-left-color;
    transition-duration: 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75em;
    border-bottom: 1px solid var(--card-border);
    border-left: 2px solid transparent;
    text-decoration: none;
    color: inherit;

    &:last-child {
        border-bottom: none;
    }

    &:hover, &.highlighted {
        background-color: var(--card-hover);
    }

    &.highlighted {
        border-left-color: var(--accent-color);
    }

    .result-icon {
        width: 1.5em;
        height: 1.5em;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .result-info {
        flex: 1;
        min-width: 0;
    }

    .result-name {
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .result-url {
        font-size: 0.85em;
        opacity: 0.7;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fixed Button Group - Bottom Right Corner */
.btn-group {
    position: fixed;
    bottom: 1em;
    right: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    z-index: 100;

    &:hover .action-btn {
        opacity: 1;
        translate: 0 0;
        pointer-events: auto;
    }
}

.action-btn {
    width: 2em;
    height: 2em;
    font-size: 1.5em;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    transition-property: background-color, border-color, translate, scale, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    translate: 0 1em;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        background-color: var(--card-hover);
        border-color: var(--text-color);
        translate: 0 0;
        scale: 1.1;
    }

    &:nth-child(1) {
        transition-delay: 0.05s;
    }

    &:nth-child(2) {
        transition-delay: 0.03s;
    }

    &:nth-child(3) {
        transition-delay: 0.01s;
    }

    span {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.primary-action-btn {
    width: 2em;
    height: 2em;
    font-size: 2em;
    background-color: var(--accent-color);
    color: var(--btn-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition-property: background-color, scale;
    transition-duration: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        background-color: color-mix(in oklch, var(--accent-color) 85%, var(--btn-bg));
        scale: 1.1;
    }
}

/* Sites Container */
.sites-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;

    &:empty::before {
        content: "No sites yet. Click the + button to add your first site!";
        opacity: 0.6;
    }
}

/* Site Card */
.site-card {
    position: relative;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1em;
    cursor: pointer;
    transition-property: background-color, transform, border-left-color;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75em;
    max-width: 16em;
    border-left: 2px solid transparent;

    &:hover {
        /* Only transform when not editing */
        &:not(.editing) {
            background-color: var(--card-hover);
            transform: translateY(-2px); /* transform: rotate(3deg); */
        }

        .card-actions, .drag-handle {
            opacity: 0.8;
        }
    }

    &.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }

    &.drag-over {
        border-left-color: var(--text-color);
    }

    &.editing {
        cursor: default;

        .site-name, .site-url {
            border-bottom: 1px solid var(--input-border);
            cursor: text;

            &:focus {
                border-color: var(--text-color);
            }
        }

        .site-icon {
            cursor: pointer;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 0.7;
            }
        }
    }

    .site-icon {
        width: 2.5em;
        height: 2.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .site-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        min-width: 0;
    }

    .site-name, .site-url {
        outline: none;
        transition: border-color 0.2s ease;
        border: none;
        border-bottom: 1px solid transparent;
        background-color: transparent;
        color: inherit;
        cursor: inherit;
        text-align: left;
        text-overflow: ellipsis;
    }

    .site-name {
        font-size: 1.1em;
        font-weight: 500;
        word-break: break-word;
    }

    .site-url {
        font-size: 0.85em;
        opacity: 0.7;
        word-break: break-all;
    }

    .card-actions {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        display: flex;
        gap: 0.25em;
        opacity: 0;
        transition: all 0.2s ease;
    }

    .drag-handle {
        position: absolute;
        top: 0.5em;
        left: 0.5em;
        width: 28px;
        height: 28px;
        background-color: var(--card-bg);
        color: var(--text-color);
        border: 1px solid var(--card-border);
        border-radius: 4px;
        cursor: grab;
        font-size: 1em;
        line-height: 1;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;

        &:hover {
            background-color: var(--card-hover);
            border-color: var(--text-color);
        }

        &:active {
            cursor: grabbing;
        }
    }

    .edit-btn, .delete-btn {
        width: 28px;
        height: 28px;
        background-color: var(--card-bg);
        color: var(--text-color);
        border: 1px solid var(--card-border);
        border-radius: 4px;
        cursor: pointer;
        font-size: 1em;
        line-height: 1;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background-color: var(--card-hover);
            border-color: var(--text-color);
        }
    }

    .delete-btn.delete-confirm {
        background-color: #ff4444;
        color: white;
        border-color: #cc0000;

        &:hover {
            background-color: #cc0000;
        }
    }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3em;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 1em;
    }

    h1 {
        font-size: 2em;
    }

    .sites-container {
        gap: 1em;
    }

    .site-card {
        min-height: 6em;
    }

    .btn-group {
        bottom: 0.8em;
        right: 0.8em;
    }

    .primary-action-btn {
        width: 1.8em;
        height: 1.8em;
    }

    .action-btn {
        width: 46px;
        height: 46px;
        font-size: 1.3em;
    }
}