/* Public WASM Mobile-First Styles */
:root {
    /* Touch targets (mobile-first) */
    --sb-touch-target-min: 48px;
    --sb-tap-feedback-duration: 100ms;
    
    /* Public-specific colors */
    --sb-public-primary: var(--rz-primary, #4F46E5);
    --sb-public-accent: var(--rz-success, #10B981);
    
    /* Bottom nav height */
    --sb-bottom-nav-height: 56px;
    
    /* Layout spacing */
    --sb-spacing-2: 0.5rem;
    --sb-spacing-3: 0.75rem;
    --sb-spacing-4: 1rem;
    --sb-spacing-6: 1.5rem;
}

/* Mobile-first base layout */
body {
    padding-bottom: var(--sb-bottom-nav-height);
    font-size: 16px; /* Readable for all ages */
}

/* Touch-friendly buttons */
.rz-button, button {
    min-height: var(--sb-touch-target-min);
    min-width: var(--sb-touch-target-min);
}

/* ===== Bottom Navigation ===== */
.sb-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--sb-bottom-nav-height);
    background: white;
    border-top: 1px solid var(--rz-border-color, #E5E7EB);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.sb-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sb-spacing-2);
    min-width: var(--sb-touch-target-min);
    min-height: var(--sb-touch-target-min);
    color: var(--rz-text-secondary-color, #6B7280);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.1s ease;
    border-radius: 8px;
    gap: 2px;
}

.sb-bottom-nav-item span {
    font-size: 0.75rem;
    font-weight: 500;
}

.sb-bottom-nav-item .rzi {
    font-size: 1.5rem;
}

.sb-bottom-nav-item.active {
    color: var(--sb-public-primary);
    font-weight: 600;
}

.sb-bottom-nav-item:active {
    background-color: var(--rz-base-200, #F3F4F6);
}

/* Desktop overrides - hide bottom nav, use sidebar */
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
    
    .sb-bottom-nav {
        display: none;
    }
}

/* ===== Horizontal Scroll for Cards ===== */
.sb-horizontal-scroll {
    display: flex;
    gap: var(--sb-spacing-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--sb-spacing-2) 0;
    scrollbar-width: thin;
}

.sb-horizontal-scroll::-webkit-scrollbar {
    height: 6px;
}

.sb-horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: var(--rz-border-color, #E5E7EB);
    border-radius: 3px;
}

.sb-horizontal-scroll > * {
    scroll-snap-align: start;
    flex: 0 0 280px; /* Fixed width for consistency */
}

/* ===== Card Grid ===== */
.sb-card-grid {
    display: grid;
    gap: var(--sb-spacing-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .sb-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sb-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sb-horizontal-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        overflow-x: visible;
    }
}

/* ===== Review List ===== */
.sb-review-list {
    display: flex;
    flex-direction: column;
    gap: var(--sb-spacing-3);
}

/* ===== Requirements Tree ===== */
.sb-requirements-tree {
    padding: var(--sb-spacing-4);
}

.sb-requirement-node {
    padding: var(--sb-spacing-3);
    border-left: 2px solid var(--rz-border-color, #E5E7EB);
    margin-bottom: var(--sb-spacing-2);
}

.sb-requirement-header {
    display: flex;
    align-items: center;
    gap: var(--sb-spacing-2);
    cursor: pointer;
    padding: var(--sb-spacing-2);
    border-radius: 8px;
    transition: background-color 0.2s ease;
    min-height: var(--sb-touch-target-min);
}

.sb-requirement-header:hover {
    background-color: var(--rz-base-100, #F9FAFB);
}

.sb-requirement-actions {
    margin-top: var(--sb-spacing-2);
    margin-left: var(--sb-spacing-6);
}

/* ===== Form Fields ===== */
.sb-form-field {
    margin-bottom: var(--sb-spacing-4);
}

.sb-form-section {
    margin-bottom: var(--sb-spacing-6);
}

/* ===== Utility Classes ===== */
.sb-text-muted {
    color: var(--rz-text-secondary-color, #6B7280);
}

.sb-summary-section {
    margin-bottom: var(--sb-spacing-4);
    padding-bottom: var(--sb-spacing-4);
    border-bottom: 1px solid var(--rz-border-color, #E5E7EB);
}

.sb-summary-section:last-child {
    border-bottom: none;
}

/* ===== Search Bar ===== */
.sb-search-bar {
    display: flex;
    gap: var(--sb-spacing-2);
    margin-bottom: var(--sb-spacing-4);
}

.sb-search-bar > * {
    flex: 1;
}

.sb-search-bar > button,
.sb-search-bar > .rz-dropdown {
    flex: 0 0 auto;
}

/* ===== Custom Search Box (Reviews/Badges) ===== */
.sb-search-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-spacing-3);
    align-items: center;
    margin-bottom: var(--sb-spacing-3);
}

.sb-custom-input-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--rz-border-color, #d1d5db);
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-base-background-color, white);
    height: 36px; /* Explicit height to match sort button */
    padding: 0 var(--sb-spacing-2);
    flex: 1;
    min-width: 200px; /* Prevent crushing on mobile but allow wrap */
    transition: box-shadow 0.2s;
}

.sb-custom-input-group:focus-within {
    border-color: var(--sb-public-primary, #4338ca);
    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.2);
}

.sb-search-icon {
    color: var(--rz-text-tertiary-color, #9ca3af);
    font-size: 1.25rem;
    margin-right: var(--sb-spacing-2);
}

.sb-search-input-control.rz-textbox {
    border: none;
    box-shadow: none;
    background: transparent;
    height: 100%;
    padding: 0;
    flex: 1;
    min-width: 0;
    line-height: normal;
    font-size: 0.875rem;
}

.sb-search-input-control.rz-textbox:focus {
    box-shadow: none;
    outline: none;
}

.sb-search-clear {
    color: var(--rz-text-tertiary-color);
    margin-left: 4px;
}

.sb-search-clear:hover {
    color: var(--rz-text-secondary-color);
    background: transparent;
}

/* Sort button adjustments */
.sb-sort-button {
    flex: 0 0 auto;
}