/* Modern Theme - Dark Modern UI */

[data-theme="modern"] {
    /* Modern-specific component overrides */

    /* Body and base styles */
    body {
        font-family: var(--font-family-base);
        background-color: var(--color-background);
        color: var(--color-text);
    }

    /* Modern link styles */
    a.linklog {
        color: var(--color-link);
        font-size: var(--font-size-base);
        font-family: var(--font-family-base);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    a.linklog:hover {
        color: var(--color-link-hover);
    }

    a.enlace {
        color: var(--color-link);
        font-size: var(--font-size-base);
        transition: color var(--transition-fast);
    }

    a.enlace:hover {
        color: var(--color-link-hover);
    }

    a.comentarios {
        color: var(--color-comment-link);
        font-size: var(--font-size-sm);
        font-weight: 600;
        transition: color var(--transition-fast);
    }

    a.comentarios:hover {
        color: var(--color-comment-link-hover);
    }

    /* Modern form styles */
    .form-input,
    .form-textarea {
        background-color: var(--color-form-background);
        border: var(--border-width) var(--border-style) var(--color-form-border);
        border-radius: var(--border-radius);
        color: var(--color-form-text);
        transition: border-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .form-input:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }

    /* Modern button styles */
    .btn {
        background-color: var(--color-button);
        color: var(--color-button-text);
        border: var(--border-width) var(--border-style) var(--color-button);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        transition: background-color var(--transition-fast),
            box-shadow var(--transition-fast), transform var(--transition-fast);
    }

    .btn:hover {
        background-color: var(--color-button-hover);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .btn:active {
        background-color: var(--color-button-active);
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    /* Modern card styles */
    .link-card {
        background-color: var(--color-background-secondary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition-base);
    }

    .link-card:hover {
        box-shadow: var(--shadow-md);
    }

    .comment-card {
        background-color: var(--color-background-secondary);
        border-left: 3px solid var(--color-primary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        margin-left: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        box-shadow: var(--shadow-sm);
    }

    /* Modern sidebar styles */
    .sidebar {
        background-color: var(--color-background-secondary);
        border: var(--border-width-thin) solid var(--color-form-border);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }

    /* Modern navigation styles */
    .sidebar-nav-links {
        list-style: none;
        padding-left: 0;
    }

    .sidebar-nav-links li {
        position: relative;
        padding-left: var(--spacing-md);
    }

    .sidebar-nav-links li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 3px;
        background-color: var(--color-text-muted);
        border-radius: 50%;
        display: none;
    }

    .sidebar-nav-links a {
        transition: color var(--transition-fast),
            padding-left var(--transition-fast);
    }

    .sidebar-nav-links a:hover {
        padding-left: var(--spacing-xs);
    }

    /* Modern input styles */
    .sidebar-search-input,
    .sidebar-form-input {
        border-radius: var(--border-radius);
        transition: border-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .sidebar-search-input:focus,
    .sidebar-form-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }

    /* Modern comment form */
    .comment-form {
        background-color: var(--color-background-secondary);
        border-radius: var(--border-radius);
        padding: var(--spacing-md);
        box-shadow: var(--shadow-sm);
    }

    .comment-form textarea {
        border-radius: var(--border-radius);
        transition: border-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .comment-form textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }

    /* Modern media thumbnails */
    .media-thumbnail {
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition-base),
            transform var(--transition-base);
    }

    .media-thumbnail:hover {
        box-shadow: var(--shadow-md);
        transform: scale(1.02);
    }

    /* Modern date header */
    .date-header {
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--color-form-border);
        margin-bottom: var(--spacing-md);
    }

    /* Modern list styles - replace large bullets with small lines */
    ul:not(.sidebar-nav-links):not(.sublog-moderators-list):not(
            .sublog-moderators
        ),
    ol {
        list-style: none;
        padding-left: 0;
    }

    ul:not(.sidebar-nav-links):not(.sublog-moderators-list):not(
            .sublog-moderators
        )
        li,
    ol li {
        position: relative;
        padding-left: var(--spacing-md);
    }

    ul:not(.sidebar-nav-links):not(.sublog-moderators-list):not(
            .sublog-moderators
        )
        li::before {
        content: "—";
        position: absolute;
        left: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        line-height: 1;
    }

    ol li {
        counter-increment: list-counter;
    }

    ol {
        counter-reset: list-counter;
    }

    ol li::before {
        content: counter(list-counter) ".";
        position: absolute;
        left: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: normal;
    }

    /* Smooth transitions for all interactive elements */
    a,
    button,
    .btn,
    input,
    textarea,
    select {
        transition: all var(--transition-fast);
    }

    /* Banner filters - darker and more desaturated for modern theme */
    .page-header-retro img {
        filter: brightness(0.7) saturate(0.5) contrast(1.2);
        transition: filter var(--transition-base);
    }

    .page-header-retro img:hover {
        filter: brightness(0.75) saturate(0.55) contrast(1.2);
    }
}