/**
 * ION Toggle Buttons - Reusable Component
 * Version: 1.0.0
 * 
 * Universal toggle button styles for:
 * - Sort controls (Newest/Oldest/Popular)
 * - Search mode controls (Precise/Balanced/Broad)
 * - View controls (Cards/List/Grid)
 * - Any custom toggle groups
 * 
 * Usage:
 *   <link href="/includes/toggle-buttons.css" rel="stylesheet">
 *   
 *   <div class="ion-toggle-group">
 *     <button class="ion-toggle-btn active">Option 1</button>
 *     <button class="ion-toggle-btn">Option 2</button>
 *     <button class="ion-toggle-btn">Option 3</button>
 *   </div>
 * 
 * Features:
 * - Theme-aware (Light/Dark mode support via data-theme attribute)
 * - Accessible
 * - Responsive
 * - Consistent styling across all pages
 */

/* ===========================
   THEME VARIABLES (if not already defined)
   =========================== */

/* Default Theme Variables - Dark Mode */
:root {
    --ion-toggle-bg-dark: rgba(55, 65, 81, 0.5);
    --ion-toggle-border-dark: rgba(55, 65, 81, 0.8);
    --ion-toggle-text-dark: #9ca3af;
    --ion-toggle-text-hover-dark: #e2e8f0;
    --ion-toggle-active-bg: #b28254;
    --ion-toggle-active-text-dark: #0f172a;
    --ion-toggle-hover-bg-dark: rgba(178, 130, 84, 0.15);
    
    --ion-toggle-bg-light: rgba(233, 236, 239, 0.7);
    --ion-toggle-border-light: #dee2e6;
    --ion-toggle-text-light: #64748b;
    --ion-toggle-text-hover-light: #0f172a;
    --ion-toggle-active-text-light: #ffffff;
    --ion-toggle-hover-bg-light: rgba(178, 130, 84, 0.15);
}

/* ===========================
   TOGGLE GROUP CONTAINER
   =========================== */

.ion-toggle-group,
.sort-toggle,
.search-mode-buttons,
.search-view-toggle,
.profile-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--ion-toggle-bg-dark);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--ion-toggle-border-dark);
    width: fit-content;
}

/* Light Mode - Container */
body[data-theme="light"] .ion-toggle-group,
body[data-theme="light"] .sort-toggle,
body[data-theme="light"] .search-mode-buttons,
body[data-theme="light"] .search-view-toggle,
body[data-theme="light"] .profile-view-toggle {
    background: var(--ion-toggle-bg-light);
    border-color: var(--ion-toggle-border-light);
}

/* ===========================
   TOGGLE BUTTONS
   =========================== */

.ion-toggle-btn,
.sort-btn,
.search-mode-btn,
.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--ion-toggle-text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    min-width: 90px;
}

/* Hover State */
.ion-toggle-btn:hover,
.sort-btn:hover,
.search-mode-btn:hover,
.view-toggle-btn:hover {
    color: var(--ion-toggle-text-hover-dark);
    background: var(--ion-toggle-hover-bg-dark);
}

/* Active State */
.ion-toggle-btn.active,
.sort-btn.active,
.search-mode-btn.active,
.view-toggle-btn.active {
    background: var(--ion-toggle-active-bg) !important;
    color: var(--ion-toggle-active-text-dark) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(178, 130, 84, 0.3);
}

/* Active State - SVG Icons */
.ion-toggle-btn.active svg,
.sort-btn.active svg,
.search-mode-btn.active svg,
.view-toggle-btn.active svg {
    color: var(--ion-toggle-active-text-dark);
}

/* ===========================
   LIGHT MODE OVERRIDES
   =========================== */

/* Light Mode - Buttons */
body[data-theme="light"] .ion-toggle-btn,
body[data-theme="light"] .sort-btn,
body[data-theme="light"] .search-mode-btn,
body[data-theme="light"] .view-toggle-btn {
    color: var(--ion-toggle-text-light);
}

/* Light Mode - Hover */
body[data-theme="light"] .ion-toggle-btn:hover,
body[data-theme="light"] .sort-btn:hover,
body[data-theme="light"] .search-mode-btn:hover,
body[data-theme="light"] .view-toggle-btn:hover {
    color: var(--ion-toggle-text-hover-light);
    background: var(--ion-toggle-hover-bg-light);
}

/* Light Mode - Active */
body[data-theme="light"] .ion-toggle-btn.active,
body[data-theme="light"] .sort-btn.active,
body[data-theme="light"] .search-mode-btn.active,
body[data-theme="light"] .view-toggle-btn.active {
    background: var(--ion-toggle-active-bg) !important;
    color: var(--ion-toggle-active-text-light) !important;
    box-shadow: 0 2px 8px rgba(178, 130, 84, 0.3);
}

/* Light Mode - Active SVG Icons */
body[data-theme="light"] .ion-toggle-btn.active svg,
body[data-theme="light"] .sort-btn.active svg,
body[data-theme="light"] .search-mode-btn.active svg,
body[data-theme="light"] .view-toggle-btn.active svg {
    color: var(--ion-toggle-active-text-light);
}

/* ===========================
   SVG ICON SIZING
   =========================== */

.ion-toggle-btn svg,
.sort-btn svg,
.search-mode-btn svg,
.view-toggle-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===========================
   SIZE VARIANTS
   =========================== */

/* Small Toggle Buttons */
.ion-toggle-btn.sm,
.ion-toggle-group.sm .ion-toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    min-width: 70px;
}

/* Large Toggle Buttons */
.ion-toggle-btn.lg,
.ion-toggle-group.lg .ion-toggle-btn {
    padding: 0.75rem 2rem;
    font-size: 0.9375rem;
    min-width: 110px;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 768px) {
    .ion-toggle-group,
    .sort-toggle,
    .search-mode-buttons,
    .search-view-toggle,
    .profile-view-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .ion-toggle-btn,
    .sort-btn,
    .search-mode-btn,
    .view-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 1rem;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .ion-toggle-btn,
    .sort-btn,
    .search-mode-btn,
    .view-toggle-btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
    }
    
    .ion-toggle-btn svg,
    .sort-btn svg,
    .search-mode-btn svg,
    .view-toggle-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ===========================
   DISABLED STATE
   =========================== */

.ion-toggle-btn:disabled,
.sort-btn:disabled,
.search-mode-btn:disabled,
.view-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================
   ACCESSIBILITY
   =========================== */

.ion-toggle-btn:focus-visible,
.sort-btn:focus-visible,
.search-mode-btn:focus-visible,
.view-toggle-btn:focus-visible {
    outline: 2px solid var(--ion-toggle-active-bg);
    outline-offset: 2px;
}

/* Reduce motion for users with accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    .ion-toggle-btn,
    .sort-btn,
    .search-mode-btn,
    .view-toggle-btn {
        transition: none;
    }
}