/* =============================================================
   GigVault — admin.css
   Sidebar menu styles for admin, venue and band dashboards
   ============================================================= */

   /* ── Design tokens ── */
:root {
    --bg-primary:    #181824;
    --bg-secondary:  #1e1f2e;
    --bg-card:       #24253a;
    --bg-card-hover: #2d2e47;
    --bg-elevated:   #2d2e47;
    --text-primary:  #f0f0fa;
    --text-secondary:#8e8da0;
    --text-muted:    #dbdbdd;
    --accent:        #f0f0fa;
    --primary:       #ffffff;
    --accent-glow:   rgba(255,58,39,0.25);
    --accent-hover:  #ff6652;
    --accent-2:      #4ae5ef;
    --accent-2-glow: rgba(74,229,239,0.2);
    --success:       #33b887;
    --warning:       #fbe74e;
    --danger:        #FF5722;
    --info:          #2590f1;
    --border:        rgba(255,255,255,0.07);
    --border-light:  rgba(255,255,255,0.11);
    --radius:        20px;
    --radius-sm:     10px;
    --radius-lg:     30px;
    --shadow:        0 8px 40px rgba(0,0,0,0.5);
    --theme:         #B38481;
    --font-theme:    #fff;
}

/* ── Light theme ── */
[data-theme="light"] {
    --bg-primary:    #f4f5fa;
    --bg-secondary:  #eaecf5;
    --bg-card:       #ffffff;
    --bg-card-hover: #f0f2fb;
    --bg-elevated:   #e8eaf3;
    --text-primary:  #0f0f1a;
    --text-secondary:#4a4860;
    --text-muted:    #6b6885;
    --accent:        #ef4444;
    --primary:       #000000;
    --accent-glow:   rgba(229,45,26,0.15);
    --accent-hover:  #c52010;
    --accent-2:      #0091a0;
    --accent-2-glow: rgba(0,145,160,0.15);
    --border:        rgba(0,0,0,0.08);
    --border-light:  rgba(0,0,0,0.13);
    --shadow:        0 8px 40px rgba(0,0,0,0.1);
    --warning:       var(--accent);
    --theme:         #B38481;
    --danger:        #ef4444;
    --font-theme:    #181824;
}

/* ── Sidebar layout ── */
.layout-sidebar { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 64px); }
.sidebar { background: var(--bg-secondary); border-right: 1px solid var(--border); padding: 1.5rem 0; position: relative; z-index: 1; }
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-title {
    font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0 1.5rem; margin-bottom: 0.4rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 1.5rem; color: var(--text-secondary);
    font-size: 0.875rem; font-weight: 500; transition: all 0.15s;
}
.sidebar-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.sidebar-link.active { color: var(--accent); background: rgba(255,58,39,0.08); border-right: 2px solid var(--accent); }
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
[data-theme="light"] .sidebar-link:hover { background: rgba(0,0,0,0.04); }
.sidebar-link--notify { position: relative; color: var(--text-primary); background: rgba(239,68,68,0.06); }
.sidebar-link--notify::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:0 2px 2px 0; background:var(--danger,#ef4444); }
.sidebar-link--notify:hover { background: rgba(239,68,68,0.10); }
[data-theme="light"] .sidebar-link--notify { background: rgba(239,68,68,0.07); }
[data-theme="light"] .sidebar-link--notify:hover { background: rgba(239,68,68,0.12); }

.main-content { padding: 0 2rem 3rem; position: relative; z-index: 1; }
.main-content .container .card { box-shadow: none; margin-bottom: 30px; }

/* Sidebar completion bar */
.sidebar-completion-bar {
    margin: 0.5rem 0.75rem 0.75rem;
    border: 1px solid rgba(255,58,39,0.3);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(255,58,39,0.05);
}
.sidebar-completion-inner { padding: 0.65rem 0.75rem; }
.sidebar-completion-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.45rem;
}
.sidebar-completion-label {
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sidebar-completion-pct { font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.sidebar-completion-track {
    height: 3px; background: var(--bg-elevated);
    border-radius: 999px; margin-bottom: 0.55rem;
}
.sidebar-completion-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.sidebar-completion-link { font-size: 0.75rem; color: var(--accent); font-weight: 600; text-decoration: none; }

/* =============================================================
   1024px — Sidebar collapses to icon-only rail
   ============================================================= */
@media (max-width: 1024px) {
    .layout-sidebar {
        display: grid;
        grid-template-columns: 60px 1fr;
        min-height: calc(100vh - 64px);
    }
    .sidebar {
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        padding: 0.75rem 0;
    }
    .sidebar-profile-card { display: none !important; }
    .sidebar-completion-bar { display: none; }
    .sidebar-title { display: none; }
    .sidebar-section { margin-bottom: 0; }
    .sidebar-link {
        justify-content: center;
        padding: 0.75rem 0;
        gap: 0;
        border-right: none;
        font-size: 0; /* hides text nodes; SVGs with explicit px dimensions are unaffected */
    }
    .sidebar-link svg { width: 18px; height: 18px; opacity: 1; flex-shrink: 0; }
    .sidebar-link .notif-count { display: none; }
    .sidebar-link.active {
        background: rgba(255,58,39,0.1);
        border-right: 2px solid var(--accent);
    }
    /* CSS tooltip — appears to the right of the icon rail */
    .sidebar-link[data-tip] { position: relative; }
    .sidebar-link[data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-elevated);
        border: 1px solid var(--border-light);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        padding: 0.35rem 0.65rem;
        border-radius: 6px;
        z-index: 200;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .main-content { padding: 0.5rem 1.5rem 2rem; }
}

/* =============================================================
   768px — Sidebar becomes a horizontal icon strip at the top
   ============================================================= */
@media (max-width: 768px) {
    .layout-sidebar {
        display: block;
        min-height: auto;
    }
    .sidebar {
        display: flex !important;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        height: auto;
        min-height: 0;
        padding: 0.35rem 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar-section { display: contents; }
    .sidebar-link {
        flex-direction: column;
        flex-shrink: 0;
        padding: 0.5rem 0.8rem;
        border-right: none !important;
        border-radius: var(--radius-sm);
        gap: 0;
        font-size: 0;
    }
    .sidebar-link.active {
        border-right: none !important;
        border-bottom: 2px solid var(--accent);
        background: rgba(255,58,39,0.1);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .sidebar-link--notify::before { display: none; }
    .sidebar-link--notify { border-top: 2px solid var(--danger,#ef4444); border-radius: 0; }
    .sidebar-link svg { width: 18px; height: 18px; }
    /* No tooltip on top bar — too cramped */
    .sidebar-link[data-tip]::after { display: none !important; }
    .main-content { padding: 0.5rem 1rem 2rem; }
}

/* User Profile */

details[open] > summary svg:last-child { transform: rotate(180deg); }

    .genre-tag-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.5rem;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        background: var(--input-bg, var(--surface));
        cursor: text;
        transition: border-color 0.15s;
    }
    .genre-tag-wrap:focus-within { border-color: var(--primary); }
    .genre-tags { display: contents; }
    .genre-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.5rem;
        background: var(--bg-secondary);
        color: var(--font-theme);
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .genre-tag-remove {
        background: none;
        border: none;
        color: var(--font-theme);
        font-size: 1rem;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .genre-tag-remove:hover { opacity: 0.7; }
    .genre-text-input {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text);
        font-size: 0.95rem;
        min-width: 120px;
        flex: 1;
        padding: 0;
    }
    .genre-add-btn {
        background: none;
        border: 1.5px solid var(--border);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 1.1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-muted);
        flex-shrink: 0;
        transition: border-color 0.15s, color 0.15s;
    }
    .genre-add-btn:hover { border-color: var(--primary); color: var(--primary); }