/* ==========================================================================
   Spotify Theme for Bulma 1.x + Radio Portal Shell - MOBILE ENHANCED
   Scope: body.theme-spotify
   ========================================================================== */

body.theme-spotify {
    color-scheme: dark;
    --rk-logo-h: 42px;
    /* Desktop logo height fix */
    --rk-logo-h-mobile: 36px;
    /* Mobile logo height */
    --rk-sidebar-w: 260px;
    --rk-sidebar-w-compact: 76px;

    /* Mobile enhancements */
    --rk-header-h-mobile: 60px;
    --rk-player-h-mobile: 80px;

    /* Base palette (fallbacks) – will be overridden by --the-* when available */
    --spotify-bg: #121212;
    --spotify-surface: #181818;
    --spotify-ink: #e6e9ef;
    --spotify-muted: #b3b3b3;
    --spotify-line: #282828;
    --spotify-accent: #1DB954;
    --spotify-accent-hover: #f7faf8;
    --spotify-accent-dark: #1aa34a;

    /* Map to your admin theme variables when present */
    --bulma-body-background-color: var(--the-bg, var(--spotify-bg));
    --bulma-body-color: var(--the-ink, var(--spotify-ink));
    --bulma-text: var(--the-ink, var(--spotify-ink));
    --bulma-text-strong: #ffffff;
    --bulma-text-light: var(--the-muted, var(--spotify-muted));

    /* Links */
    --bulma-link: var(--the-brand, var(--spotify-accent));
    --bulma-link-hover: color-mix(in srgb, var(--bulma-link) 88%, white 12%);
    --bulma-link-focus: var(--bulma-link-hover);
    --bulma-link-active: color-mix(in srgb, var(--bulma-link) 85%, rgb(58, 242, 144) 15%);
    --bulma-link-visited: var(--bulma-link);

    /* Primary */
    --bulma-primary: var(--the-brand, var(--spotify-accent));
    --bulma-primary-light: var(--spotify-accent-hover);
    --bulma-primary-dark: var(--spotify-accent-dark);

    /* Status */
    --bulma-success: var(--bulma-primary);
    --bulma-warning: #ffa500;
    --bulma-danger: #e22134;
    --bulma-info: #2e77d0;

    /* Borders & surfaces */
    --bulma-border: var(--the-line, var(--spotify-line));
    --bulma-border-hover: #404040;
    --bulma-border-strong: #3e3e3e;

    --bulma-scheme-main: var(--bulma-body-background-color);
    --bulma-card-background-color: var(--the-surface, var(--spotify-surface));
    --bulma-card-color: var(--bulma-body-color);
    --bulma-card-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --bulma-box-background-color: var(--bulma-card-background-color);
    --bulma-box-color: var(--bulma-card-color);

    /* Inputs — high contrast for dark mode */
        --bulma-input-background-color: #141a16;
        --bulma-input-border-color: #314a37;
        --bulma-input-color: #e6f7ee;
        --bulma-input-hover-border-color: #3e6b49;
        --bulma-input-focus-border-color: #2ecc71;
        --bulma-input-placeholder-color: #9ec7ad;

    /* Dropdown */
    --bulma-dropdown-background-color: #1c1c1c;
    --bulma-dropdown-item-hover-background-color: #232323;
    --bulma-dropdown-item-active-background-color: var(--bulma-primary);

    /* Navbar/Header */
    --bulma-navbar-background-color: #000000;
    --bulma-navbar-item-color: #b3b3b3;
    --bulma-navbar-item-hover-color: #ffffff;
    --bulma-navbar-item-hover-background-color: #181818;
    --bulma-navbar-item-active-color: var(--bulma-primary);
}

/* Base body */
.theme-spotify {
    background-color: var(--bulma-body-background-color);
    color: var(--bulma-body-color);
}

/* Mobile body lock */
.theme-spotify.body-locked {
    overflow: hidden;
}

/* Links */
.theme-spotify a {
    color: var(--bulma-link);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.theme-spotify a:hover {
    color: var(--bulma-link-hover);
}

.theme-spotify a:focus {
    color: var(--bulma-link-focus);
}

/* Focus ring (accessible) */
.theme-spotify :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bulma-primary) 70%, white 30%);
    outline-offset: 2px;
}

/* Scrollbars (WebKit) */
.theme-spotify *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.theme-spotify *::-webkit-scrollbar-track {
    background: #0b0b0b;
}

.theme-spotify *::-webkit-scrollbar-thumb {
    background: #2b2b2b;
    border-radius: 8px;
    border: 2px solid #0b0b0b;
}

.theme-spotify *::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* Mobile scrollbar */
@media (max-width: 768px) {
    .theme-spotify *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* Cards, panels, modal sections */
.theme-spotify .card,
.theme-spotify .box,
.theme-spotify .panel,
.theme-spotify .dropdown-content,
.theme-spotify .modal-card-head,
.theme-spotify .modal-card-foot,
.theme-spotify .modal-card-body {
    background-color: var(--bulma-card-background-color) !important;
    color: var(--bulma-card-color) !important;
    border-color: var(--bulma-border) !important;
}

.theme-spotify .card,
.theme-spotify .box {
    border: 1px solid var(--bulma-border);
    border-radius: 12px;
    box-shadow: var(--bulma-card-shadow);
}

.theme-spotify .card-header,
.theme-spotify .modal-card-head,
.theme-spotify .modal-card-foot {
    background-color: var(--bulma-card-background-color);
    border-color: var(--bulma-border);
}

/* Mobile card adjustments */
@media (max-width: 768px) {

    .theme-spotify .card,
    .theme-spotify .box {
        border-radius: 10px;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .theme-spotify .card .card-content,
    .theme-spotify .box {
        padding: 1rem;
    }
}

/* Forms */
.theme-spotify .input,
.theme-spotify .textarea,
.theme-spotify .select select {
    background-color: var(--bulma-input-background-color);
    color: var(--bulma-input-color);
    border-color: var(--bulma-input-border-color);
    transition: all .2s ease;
}

.theme-spotify .input::placeholder,
.theme-spotify .textarea::placeholder {
    color: var(--bulma-input-placeholder-color);
}

.theme-spotify .input:hover,
.theme-spotify .textarea:hover,
.theme-spotify .select select:hover {
    border-color: var(--bulma-input-hover-border-color);
}

.theme-spotify .input:focus,
.theme-spotify .textarea:focus,
.theme-spotify .select select:focus {
    border-color: var(--bulma-input-focus-border-color);
    box-shadow: 0 0 0 .125em color-mix(in srgb, var(--bulma-primary) 30%, transparent);
}

/* Mobile form adjustments */
@media (max-width: 768px) {

    .theme-spotify .input,
    .theme-spotify .textarea,
    .theme-spotify .select select {
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    .theme-spotify .field-label {
        flex-basis: 100%;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .theme-spotify .field-body {
        flex-basis: 100%;
    }
}

/* Checkboxes/radios/switches */
.theme-spotify .checkbox input:checked+span,
.theme-spotify .radio input:checked+span,
.theme-spotify .switch input:checked+span {
    background-color: var(--bulma-primary);
    border-color: var(--bulma-primary);
}

/* Buttons */
.theme-spotify .button.is-primary {
    background-color: var(--bulma-button-background-color, var(--bulma-primary));
    border-color: var(--bulma-button-border-color, var(--bulma-primary));
    color: var(--bulma-button-color, #191414);
    font-weight: 600;
    transition: all .2s ease;
}

.theme-spotify .button.is-primary:hover {
    background-color: var(--bulma-button-hover-background-color, color-mix(in srgb, var(--bulma-primary) 88%, white 12%));
    border-color: var(--bulma-button-hover-border-color, var(--bulma-link-hover));
    color: var(--bulma-button-hover-color, #191414);
    transform: translateY(-1px);
}

.theme-spotify .button.is-primary:focus {
    border-color: var(--bulma-button-focus-border-color, var(--bulma-primary));
    box-shadow: 0 0 0 .125em color-mix(in srgb, var(--bulma-primary) 25%, transparent);
}

.theme-spotify .button.is-text {
    color: var(--bulma-button-text-color, #b3b3b3);
}

.theme-spotify .button.is-text:hover {
    background-color: var(--bulma-button-text-hover-background-color, #222);
    color: var(--bulma-button-text-hover-color, #fff);
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    .theme-spotify .button {
        min-height: 44px;
        /* Minimum touch target */
        padding: 0.75em 1em;
    }

    .theme-spotify .buttons .button {
        margin-bottom: 0.5rem;
    }

    .theme-spotify .buttons.are-small .button {
        min-height: 36px;
    }
}

/* Navbar / Header (top bar when not using sidebar shell) */
.theme-spotify .navbar {
    background: var(--the-headerBg, var(--bulma-navbar-background-color));
    border-bottom: 1px solid var(--bulma-border);
    color: var(--the-headerInk, var(--bulma-navbar-item-color));
}

.theme-spotify .navbar-item {
    color: var(--the-headerInk, var(--bulma-navbar-item-color));
    transition: all .2s ease;
}

.theme-spotify .navbar-item:hover {
    background: var(--bulma-navbar-item-hover-background-color);
    color: var(--bulma-navbar-item-hover-color);
}

.theme-spotify .navbar-item.is-active {
    color: var(--bulma-navbar-item-active-color);
}

/* Mobile navbar */
@media (max-width: 1024px) {
    .theme-spotify .navbar-menu {
        background-color: var(--bulma-navbar-background-color);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
}

/* Tags / Pills */
.theme-spotify .tag {
    background: var(--bulma-tag-background-color, #232323);
    color: var(--bulma-tag-color, var(--bulma-text-light));
    border: 1px solid var(--bulma-border);
    border-radius: 999px;
}

.theme-spotify .tag.is-primary {
    background: var(--bulma-primary);
    color: #191414;
    border-color: var(--bulma-primary);
}

/* Tables */
.theme-spotify table.table {
    background: var(--bulma-table-background-color, var(--bulma-card-background-color));
    color: var(--bulma-table-color, var(--bulma-card-color));
    border-color: var(--bulma-border);
}

.theme-spotify table.table th,
.theme-spotify table.table td {
    border-color: var(--bulma-border) !important;
}

.theme-spotify table.table tr:hover {
    background: var(--bulma-table-row-hover-background-color, #1f1f1f);
}

.theme-spotify table.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--bulma-table-striped-row-even-background-color, #1a1a1a);
}

/* Mobile table adjustments */
@media (max-width: 768px) {
    .theme-spotify table.table {
        font-size: 0.9rem;
    }

    .theme-spotify table.table th,
    .theme-spotify table.table td {
        padding: 0.5em 0.75em;
    }

    .theme-spotify .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Pagination */
.theme-spotify .pagination-link.is-current {
    background: var(--bulma-primary);
    border-color: var(--bulma-primary);
    color: #191414;
}

.theme-spotify .pagination-link:focus {
    border-color: var(--bulma-primary);
}

/* Mobile pagination */
@media (max-width: 768px) {
    .theme-spotify .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .theme-spotify .pagination-list {
        flex-grow: 1;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

/* Helpers */
.theme-spotify .help {
    color: var(--bulma-text-light);
}

/* Notification / Message (base) */
.theme-spotify .notification {
    background-color: var(--bulma-card-background-color);
    color: var(--bulma-card-color);
    border: 1px solid var(--bulma-border);
}

.theme-spotify .message {
    background-color: color-mix(in srgb, var(--bulma-card-background-color) 92%, black 8%);
    color: var(--bulma-card-color);
    border: 1px solid var(--bulma-border);
}

.theme-spotify .message-header {
    background-color: var(--bulma-message-header-background-color, #1f1f1f);
    color: var(--bulma-message-header-color, #fff);
    border-bottom: 1px solid var(--bulma-border);
}

/* Progress */
.theme-spotify .progress {
    background-color: var(--bulma-border);
}

.theme-spotify .progress::-webkit-progress-value {
    background-color: var(--bulma-primary);
}

.theme-spotify .progress::-moz-progress-bar {
    background-color: var(--bulma-primary);
}

/* Dropdowns */
.theme-spotify .dropdown-content {
    background: var(--bulma-dropdown-background-color);
    border: 1px solid var(--bulma-border);
}

.theme-spotify .dropdown-item.is-active,
.theme-spotify .dropdown-item:active {
    background: var(--bulma-dropdown-item-active-background-color);
    color: #191414;
}

.theme-spotify .dropdown-item:hover {
    background: var(--bulma-dropdown-item-hover-background-color);
}

/* Mobile dropdown adjustments */
@media (max-width: 768px) {
    .theme-spotify .dropdown-content {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 300px;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Tabs / Breadcrumb / Chips feel */
.theme-spotify .tabs a {
    color: var(--bulma-text-light);
    border-bottom-color: transparent;
}

.theme-spotify .tabs a:hover {
    color: #fff;
}

.theme-spotify .tabs li.is-active a {
    color: #fff;
    border-bottom-color: var(--bulma-primary);
}

.theme-spotify .breadcrumb a {
    color: var(--bulma-text-light);
}

.theme-spotify .breadcrumb a:hover {
    color: #fff;
}

/* Mobile tabs */
@media (max-width: 768px) {
    .theme-spotify .tabs ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .theme-spotify .tabs li {
        flex-shrink: 0;
    }
}

/* Header component from your app */
.theme-spotify .rp-header {
    background: var(--the-headerBg, #000) !important;
    color: var(--the-headerInk, #fff) !important;
    border-bottom: 1px solid var(--bulma-border);
}

.theme-spotify .rp-nav-link,
.theme-spotify .rp-user-btn {
    color: var(--the-headerInk, #fff);
}

.theme-spotify .rp-nav-link.active {
    color: var(--bulma-primary);
}

.theme-spotify .rp-logo-img {
    height: var(--rk-logo-h);
    max-height: var(--rk-logo-h);
    width: auto;
    object-fit: contain;
}

/* Sidebar shell (rk-) */
.theme-spotify .rk-sidebar {
    background: #000;
    color: #fff;
    border-right: 1px solid var(--bulma-border);
}

.theme-spotify .rk-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: #fff;
}

.theme-spotify .rk-brand img {
    height: var(--rk-logo-h);
    max-height: var(--rk-logo-h);
    width: auto;
    object-fit: contain;
}

.theme-spotify .rk-brand .rk-brand-dot {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bulma-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bulma-primary) 40%, transparent);
}

.theme-spotify .rk-brand-title {
    font-weight: 800;
    font-size: 1.02rem;
}

.theme-spotify .rk-navrail {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 4px;
}

.theme-spotify .rk-navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d1d5db;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
}

.theme-spotify .rk-navlink:hover {
    background: #161616;
    color: #fff;
}

.theme-spotify .rk-navlink.active {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #2a2a2a;
}

/* Content column */
.theme-spotify .rk-content {
    background: var(--bulma-body-background-color);
    color: var(--bulma-body-color);
}

/* Mobile content adjustments */
@media (max-width: 768px) {
    .theme-spotify .rk-content .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .theme-spotify .rk-content .section {
        padding: 1.5rem 0;
    }

    .theme-spotify .rk-content .title {
        font-size: 1.5rem !important;
    }

    .theme-spotify .rk-content .subtitle {
        font-size: 1.1rem !important;
    }
}

/* Mini player footer bar (optional) */
.theme-spotify .rk-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rk-player-h-mobile, 80px);
    background: #0a0a0a;
    color: #e6edf7;
    border-top: 1px solid var(--bulma-border);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    z-index: 50;
}

/* Desktop player */
@media (min-width: 1025px) {
    .theme-spotify .rk-player {
        left: var(--rk-sidebar-w);
        grid-template-columns: 1fr max(360px, 26%) 1fr;
        height: var(--rk-player-height, 90px);
    }
}

@media (max-width: 1024px) {

    .theme-spotify .rk-logo-img,
    .theme-spotify .rk-brand img {
        height: var(--rk-logo-h-mobile);
        max-height: var(--rk-logo-h-mobile);
    }
}

/* Chips: filters, small pills */
.theme-spotify .rk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a1a;
    color: #cbd5e1;
    border: 1px solid #2a2a2a;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
}

.theme-spotify .rk-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--bulma-primary);
}

/* Tooltips (basic) */
.theme-spotify [data-tooltip] {
    position: relative;
}

.theme-spotify [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    border: 1px solid #2a2a2a;
    padding: .25rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: .75rem;
    opacity: .95;
}

/* Table density helper */
.theme-spotify .table.is-compact td,
.theme-spotify .table.is-compact th {
    padding: .5rem .65rem;
}

/* Utility borders */
.theme-spotify .has-border {
    border: 1px solid var(--bulma-border) !important;
}

.theme-spotify .has-border-top {
    border-top: 1px solid var(--bulma-border) !important;
}

.theme-spotify .has-border-bottom {
    border-bottom: 1px solid var(--bulma-border) !important;
}

/* Buttons: subtle variants */
.theme-spotify .button.is-dark {
    background: #1a1a1a;
    color: #e6e9ef;
    border: 1px solid #2a2a2a;
}

.theme-spotify .button.is-dark:hover {
    background: #232323;
}

/* Code blocks / pre */
.theme-spotify pre,
.theme-spotify code,
.theme-spotify kbd,
.theme-spotify samp {
    background: #111;
    color: #e6e9ef;
    border-radius: 8px;
}

.theme-spotify pre {
    padding: 12px;
    border: 1px solid #1f1f1f;
}

/* Mobile code blocks */
@media (max-width: 768px) {
    .theme-spotify pre {
        padding: 1rem;
        font-size: 0.9rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Forms: file input label consistency */
.theme-spotify .file-cta {
    background: #1a1a1a;
    color: #e6e9ef;
    border-color: #2a2a2a;
}

.theme-spotify .file-cta:hover {
    background: #232323;
}

/* Hero / sections */
.theme-spotify .hero {
    background: linear-gradient(180deg, #0b0b0b, #111);
}

.theme-spotify .section {
    background: transparent;
}

/* Mobile hero/sections */
@media (max-width: 768px) {
    .theme-spotify .hero-body {
        padding: 2rem 1rem;
    }

    .theme-spotify .section {
        padding: 2rem 0;
    }
}

/* PJAX neon hover alignment */
.theme-spotify .rp-nav-link.neon-active {
    color: var(--bulma-primary) !important;
    text-shadow: 0 0 10px color-mix(in srgb, var(--bulma-primary) 65%, #00ffff 35%);
}

.theme-spotify .rp-nav-link:hover {
    color: var(--bulma-primary) !important;
}

/* Mobile fixes */
@media (max-width: 968px) {
    .theme-spotify .rp-mobile-menu {
        color: #fff;
    }

    .theme-spotify .rp-header-container {
        padding: 0 1rem;
    }
}

/* Optional glass mode if your theme toggles it */
.theme-spotify.the-glass-on .rp-header {
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    background: color-mix(in srgb, var(--the-headerBg, #000) 80%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--bulma-border) 60%, transparent);
}

.theme-spotify.the-glass-on .card,
.theme-spotify.the-glass-on .box {
    background: color-mix(in srgb, var(--bulma-card-background-color) 80%, transparent) !important;
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border: 1px solid color-mix(in srgb, var(--bulma-border) 70%, transparent) !important;
}

/* ==========================================================================
   Dark patch for Bulma `.is-light` variants (messages, notifications, buttons)
   Ensures "Please log in to comment" etc. match the Spotify dark theme.
   ========================================================================== */

.theme-spotify .message.is-light,
.theme-spotify .message.is-info.is-light,
.theme-spotify .message.is-success.is-light,
.theme-spotify .message.is-warning.is-light,
.theme-spotify .message.is-danger.is-light {
    background: color-mix(in srgb, var(--bulma-card-background-color) 96%, black 4%) !important;
    color: var(--bulma-card-color) !important;
    border: 1px solid var(--bulma-border) !important;
    border-left-width: 3px !important;
    /* status accent */
}

.theme-spotify .message.is-info.is-light {
    border-left-color: var(--bulma-info);
}

.theme-spotify .message.is-success.is-light {
    border-left-color: var(--bulma-success);
}

.theme-spotify .message.is-warning.is-light {
    border-left-color: var(--bulma-warning);
}

.theme-spotify .message.is-danger.is-light {
    border-left-color: var(--bulma-danger);
}

/* Inner body stays dark & clean */
.theme-spotify .message.is-light .message-body {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
}

/* Notifications in light modifiers */
.theme-spotify .notification.is-light,
.theme-spotify .notification.is-info.is-light,
.theme-spotify .notification.is-success.is-light,
.theme-spotify .notification.is-warning.is-light,
.theme-spotify .notification.is-danger.is-light {
    background: color-mix(in srgb, var(--bulma-card-background-color) 96%, black 4%) !important;
    color: var(--bulma-card-color) !important;
    border: 1px solid var(--bulma-border) !important;
}

/* Light buttons become subtle-dark */
.theme-spotify .button.is-light {
    background: #1a1a1a !important;
    color: var(--bulma-card-color) !important;
    border: 1px solid var(--bulma-border) !important;
}

.theme-spotify .button.is-light:hover {
    background: #232323 !important;
    border-color: var(--bulma-border-hover) !important;
}

/* Ensure links look themed inside messages/toasts */
.theme-spotify .message a {
    color: var(--bulma-link);
}

.theme-spotify .message a:hover {
    color: var(--bulma-link-hover);
}

.theme-spotify .rp-toast a {
    color: var(--bulma-link);
    text-decoration: underline;
}

.theme-spotify .rp-toast a:hover {
    color: var(--bulma-link-hover);
}

/* ==========================================================================
   MOBILE SPECIFIC ENHANCEMENTS
   ========================================================================== */

/* Safe area insets support */
@supports(padding: max(0px)) {
    .theme-spotify .rk-mobile-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
        height: calc(var(--rk-header-h-mobile) + env(safe-area-inset-top));
    }

    .theme-spotify .rk-content {
        padding-top: calc(var(--rk-header-h-mobile) + env(safe-area-inset-top));
    }

    .theme-spotify .rk-player {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--rk-player-h-mobile, 80px) + env(safe-area-inset-bottom));
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    .theme-spotify .rk-sidebar {
        will-change: transform;
    }

    .theme-spotify * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Improve scrolling performance */
    .theme-spotify .rk-content,
    .theme-spotify .rk-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .theme-spotify .rk-sidebar,
    .theme-spotify .rk-navlink,
    .theme-spotify .rk-brand,
    .theme-spotify .rk-mobile-scrim,
    .theme-spotify .button,
    .theme-spotify .card,
    .theme-spotify .box {
        transition: none !important;
    }
}