/* ================================================================================
   SETTINGS.CSS - Settings screen
   Scoped to #settingsOverlay

   Replaces more-menu.css. Gone with the slide-up sheet: the overlay base
   positioning (the shared .overlay rule owns it now that this is a registered
   overlay), the backdrop, the pull handle, the slide-up/slide-down keyframes
   and the .closing state. No header either - the nav says where you are.
   ================================================================================ */

/* ================================
   LAYOUT
   ================================ */
#settingsOverlay {
    flex-direction: column;
}

#settingsOverlay .settings-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) var(--bg-section);
}

#settingsOverlay .settings-body::-webkit-scrollbar {
    width: 6px;
}

#settingsOverlay .settings-body::-webkit-scrollbar-track {
    background: transparent;
}

#settingsOverlay .settings-body::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

/* ================================
   USER BLOCK
   ================================ */
#settingsOverlay .settings-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-sm);
    background: var(--bg-purple);
}

#settingsOverlay .settings-user-avatar {
    font-size: 2.5rem;
    background: var(--primary-gradient);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#settingsOverlay .settings-user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#settingsOverlay .settings-user-nickname {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

#settingsOverlay .settings-user-points {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ================================
   SECTIONS
   ================================ */
#settingsOverlay .settings-section {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--divider-color);
}

#settingsOverlay .settings-section:first-of-type {
    border-top: none;
}

#settingsOverlay .settings-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md);
}

/* ================================
   ROW ITEMS
   Every row in the screen is this shape - theme, admin, app settings,
   community, legal, account. One row style, no panels.
   ================================ */
#settingsOverlay .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md);
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: var(--space-xs);
    text-decoration: none;
    font: inherit;
    text-align: left;
}

#settingsOverlay a.settings-item {
    text-decoration: none !important;
}

#settingsOverlay .settings-item:hover {
    background: var(--bg-section);
}

#settingsOverlay .settings-item:active {
    background: var(--bg-section);
    transform: scale(0.98);
}

#settingsOverlay .settings-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

#settingsOverlay .settings-icon {
    font-size: 1.5rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

#settingsOverlay .settings-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

#settingsOverlay .settings-label {
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-primary);
}

#settingsOverlay .settings-sublabel {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

#settingsOverlay .settings-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
    font-weight: 300;
    flex-shrink: 0;
}

/* ================================
   ROW VARIANTS
   ================================ */
#settingsOverlay .settings-item-primary {
    background: var(--bg-purple);
    border: 1px solid var(--border-purple);
}

#settingsOverlay .settings-item-danger .settings-label {
    color: var(--red);
}

#settingsOverlay .settings-item-danger:hover {
    background: var(--bg-red);
}

/* A row whose CONTROL is the interactive part, not the row - the proximity
   toggle. Same shape, but nothing about it should suggest the row is tappable,
   because it isn't. */
#settingsOverlay .settings-item-static {
    cursor: default;
}

#settingsOverlay .settings-item-static:hover {
    background: none;
}

#settingsOverlay .settings-item-static:active {
    background: none;
    transform: none;
}

#settingsOverlay .settings-item-static .toggle-switch {
    flex-shrink: 0;
}

/* ================================
   BADGES
   ================================ */
#settingsOverlay .settings-badge {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--bg-purple);
    color: var(--purple);
    flex-shrink: 0;
}

#settingsOverlay .settings-badge-important {
    background: var(--bg-red);
    color: var(--red);
}

/* ================================
   FOOTER
   ================================ */
#settingsOverlay .settings-footer {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    border-top: 1px solid var(--divider-color);
    margin-top: var(--space-sm);
}

#settingsOverlay .settings-version {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

#settingsOverlay .settings-tagline {
    opacity: 0.7;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 480px) {
    #settingsOverlay .settings-user {
        padding: var(--space-lg);
    }
}

/* ================================
   LEGAL OVERLAYS Z-INDEX
   Not settings styling - these three are their own overlays. Carried over
   from more-menu.css rather than silently relocated; belongs in legal.css.
   ================================ */
#privacyOverlay,
#termsOverlay,
#liabilityOverlay {
    z-index: var(--z-overlay-elevated);
}

/* ================================
   ADMIN CLAIMS OVERLAY
   Also not settings styling - carried over unchanged. Belongs in its own
   admin-claims.css alongside admin-inbox.css.
   ================================ */
#adminClaimsOverlay .admin-claims-header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}
#adminClaimsOverlay .admin-claims-header-inner {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}
#adminClaimsOverlay .admin-claims-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
#adminClaimsOverlay .admin-claims-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
#adminClaimsOverlay .admin-claims-body {
    padding: var(--space-lg) var(--space-xl);
}
#adminClaimsOverlay .admin-claims-loading,
#adminClaimsOverlay .admin-claims-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-2xl) 0;
}
#adminClaimsOverlay .admin-claim-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: rgba(255,255,255,0.02);
}
#adminClaimsOverlay .admin-claim-venue {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
}
#adminClaimsOverlay .admin-claim-where {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}
#adminClaimsOverlay .admin-claim-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}
#adminClaimsOverlay .admin-claim-name { color: var(--text-primary); font-weight: 600; }
#adminClaimsOverlay .admin-claim-email { color: var(--accent, #8b5cf6); text-decoration: none; }
#adminClaimsOverlay .admin-claim-actions {
    display: flex;
    gap: var(--space-md);
}
#adminClaimsOverlay .admin-claim-btn {
    flex: 1;
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
#adminClaimsOverlay .admin-claim-btn.approve { background: #4ade80; color: #052e16; }
#adminClaimsOverlay .admin-claim-btn.reject { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
#adminClaimsOverlay .admin-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }