/* =========================================================
   Spwnedify — Theme tokens + dark mode overrides
   ========================================================= */

/* ----- Light tokens ----- */
.spwn-shell.light {
    --spwn-bg: #f4f4f6;
    --spwn-surface-1: #ffffff;
    --spwn-surface-2: #f0f0f4;
    --spwn-surface-hover: #e8e8f0;
    --spwn-border: #e4e4ea;
    --spwn-text-primary: #141416;
    --spwn-text-secondary: #55556a;
    --spwn-text-muted: #8888a0;
}

/* ----- Dark tokens ----- */
.spwn-shell.dark {
    --spwn-bg: #0f0f11;
    --spwn-surface-1: #141416;
    --spwn-surface-2: #1c1c22;
    --spwn-surface-hover: #1a1a20;
    --spwn-border: #222226;
    --spwn-text-primary: #e8e8ea;
    --spwn-text-secondary: #8888a0;
    --spwn-text-muted: #55556a;
}

/* =========================================================
   Shell layout
   ========================================================= */

.spwn-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--spwn-bg);
    color: var(--spwn-text-primary);
}

.spwn-main {
    flex: 1;
    padding: 24px 0;
    background: var(--spwn-bg);
}

/* =========================================================
   Topbar
   ========================================================= */

.spwn-topbar {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: var(--spwn-surface-1);
    border-bottom: 0.5px solid var(--spwn-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

@media (min-width: 576px) {
    .spwn-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .spwn-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .spwn-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .spwn-container {
        max-width: 1140px;
    }
}

.spwn-container {
    margin-right: auto;
    margin-left: auto;
    display: flex;
    width: 100%;
}

.spwn-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
}

.spwn-logo-icon {
    width: 28px;
    height: 28px;
    background: #fff; /* #c026d3 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spwn-logo-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--spwn-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

    .spwn-logo-text:hover {
        color: var(--spwn-text-primary);
        text-decoration: none;
    }

.spwn-search-wrap {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--spwn-surface-2);
    border: 0.5px solid var(--spwn-border);
    border-radius: 8px;
    padding: 0 12px;
    height: 34px;
    transition: border-color 0.15s;
}

    .spwn-search-wrap:focus-within {
        border-color: #c026d3;
    }

.spwn-search-icon {
    font-size: 16px !important;
    color: var(--spwn-text-muted);
    flex-shrink: 0;
}

.spwn-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--spwn-text-primary);
}

    .spwn-search-input::placeholder {
        color: var(--spwn-text-muted);
    }

.spwn-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   AdminLTE dark overrides (appliqués via .spwn-shell.dark)
   ========================================================= */

.spwn-shell.dark body,
.spwn-shell.dark {
    background-color: #0f0f11;
    color: #e8e8ea;
}

    .spwn-shell.dark .card {
        background-color: #141416;
        border: 0.5px solid #222226;
        color: #e8e8ea;
    }

    .spwn-shell.dark .card-header {
        background-color: #1a1a20;
        border-bottom: 0.5px solid #222226;
        color: #e8e8ea;
    }

    .spwn-shell.dark .card-footer {
        background-color: #1a1a20;
        border-top: 0.5px solid #222226;
    }

    .spwn-shell.dark .table {
        color: #e8e8ea;
    }

        .spwn-shell.dark .table thead th {
            border-bottom: 0.5px solid #222226;
            color: #55556a;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .spwn-shell.dark .table td,
        .spwn-shell.dark .table th {
            border-top: 0.5px solid #1a1a20;
        }

    .spwn-shell.dark .table-hover tbody tr:hover {
        background-color: #1a1a20;
        color: #e8e8ea;
    }

    .spwn-shell.dark .form-control {
        background-color: #1c1c22;
        border: 0.5px solid #2a2a2e;
        color: #e8e8ea;
    }

        .spwn-shell.dark .form-control:focus {
            background-color: #1c1c22;
            border-color: #c026d3;
            color: #e8e8ea;
            box-shadow: 0 0 0 2px rgba(192, 38, 211, 0.2);
        }

        .spwn-shell.dark .form-control::placeholder {
            color: #55556a;
        }

    .spwn-shell.dark .dropdown-menu {
        background-color: #1c1c22;
        border: 0.5px solid #2a2a2e;
    }

    .spwn-shell.dark .dropdown-item {
        color: #e8e8ea;
    }

        .spwn-shell.dark .dropdown-item:hover {
            background-color: #222228;
            color: #ffffff;
        }

    .spwn-shell.dark .main-footer {
        background-color: #141416;
        border-top: 0.5px solid #222226;
        color: #55556a;
    }

    .spwn-shell.dark ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .spwn-shell.dark ::-webkit-scrollbar-track {
        background: #0f0f11;
    }

    .spwn-shell.dark ::-webkit-scrollbar-thumb {
        background: #2a2a2e;
        border-radius: 3px;
    }

        .spwn-shell.dark ::-webkit-scrollbar-thumb:hover {
            background: #3a3a3e;
        }

    .spwn-shell.dark hr {
        border-color: #222226;
    }

    .spwn-shell.dark .text-muted {
        color: #55556a !important;
    }

    .spwn-shell.dark .border {
        border-color: #222226 !important;
    }

    .spwn-shell.dark .bg-white {
        background-color: #141416 !important;
    }

    .spwn-shell.dark .bg-light {
        background-color: #1a1a20 !important;
    }

/* =========================================================
   TracksGrid action buttons
   ========================================================= */

.spwn-cover {
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.spwn-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.spwn-action-dl {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid var(--spwn-border) !important;
    border-radius: 6px !important;
    color: var(--spwn-text-secondary) !important;
    background: var(--spwn-surface-2) !important;
}

    .spwn-action-dl:hover {
        background: #c026d3 !important;
        border-color: #c026d3 !important;
        color: #fff !important;
    }

.spwn-action-warn {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid #3a2e10 !important;
    border-radius: 6px !important;
    color: #ca8a04 !important;
    background: #1e1a10 !important;
}

.spwn-action-del {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid #3a1010 !important;
    border-radius: 6px !important;
    color: #dc2626 !important;
    background: #1e1010 !important;
}

.spwn-action-ok {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid #1a3a10 !important;
    border-radius: 6px !important;
    color: #22c55e !important;
    background: #101e10 !important;
}

.spwn-action-err {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid #3a1010 !important;
    border-radius: 6px !important;
    color: #ef4444 !important;
    background: #1e1010 !important;
}