/* ============================================
   SHARED LAYOUTS (Date: 2025-11-10)
   ============================================

   Scope: Common layout patterns used across multiple pages
   Related JS: N/A (structural CSS)
   Related Pages: All pages

   BEFORE EDITING:
   - Only SHARED layout patterns belong here
   - Page-specific layouts belong in feature files
   - Components belong in components/
   - Check CLAUDE.md Section 2d for architecture

   ============================================ */

/* Content Sections and Containers */


/* Flexbox and Grid Layouts */


/* Spacing and Alignment Utilities */


/* Responsive Layout Patterns */
/* Unified View Tabs - Base class for all tab containers */
.view-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4px;
    row-gap: 0;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 0 0 3px 0; /* Increased from 2px to 3px to push border down */
    margin: 0;
    justify-content: flex-start;
    overflow: visible; /* Changed from hidden - allow underline animation to show */
    background: var(--theme-bg-primary); /* Solid background for sticky positioning */
    border-bottom: 1px solid var(--color-gray-300);
}

/* Override removed - .view-tabs no longer has left/right padding */

/* Admin tabs spacing wrapper - only for positioning, not layout control */
.admin-tabs-spacing-wrapper {
    display: inline-flex;
    gap: 0; /* No gap - tabs have their own padding */
    margin-left: auto; /* Push to right */
    margin-right: -40px; /* Pull to edge (compensate for .content-section 40px right padding) */
    padding-right: 0;
    align-items: center;
}

/* Toggle button group (My/All toggle) */
.toggle-button-group {
    display: flex !important;
    align-items: center;
    align-self: center;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 30px 0 4px; /* Add horizontal spacing to separate from admin tabs */
}

.toggle-btn {
    padding: 0 4px; /* Match .menu-base padding */
    font-size: 14px; /* Match .menu-base font-size */
    font-weight: 500;
    border: none;
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid var(--theme-border-light);
    min-width: 28px;
    height: 18px;
    text-align: center;
    line-height: 1.4; /* Match .menu-base line-height */
}

.toggle-btn:last-child {
    border-right: none;
}

/* Pressed down state (active/selected) */
.toggle-btn.active {
    background: var(--theme-btn-primary-bg);
    box-shadow: inset 0 2px 4px var(--theme-shadow);
    color: var(--theme-text-on-primary);
    transform: translateY(1px);
}

/* "All" toggle button - red when active */
#admin-mode-all.toggle-btn.active {
    background: var(--color-red-600);
    color: white;
}

/* Pushed up state (inactive) */
.toggle-btn:not(.active) {
    background: var(--theme-btn-primary-bg);
    box-shadow: 0 1px 2px var(--theme-shadow);
    color: var(--theme-text-on-primary);
}

/* "All" toggle button - red when inactive too */
#admin-mode-all.toggle-btn:not(.active) {
    background: var(--color-red-600);
    color: white;
}

.toggle-btn:not(.active):hover {
    background: var(--theme-btn-primary-hover-bg);
}

/* Scope badges in menu items */
.scope-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
    background: var(--theme-btn-primary-bg);
    color: white;
}

/* Messages page: "All" scope badge - red-600 */
#messages-content .staff-only .scope-badge {
    background: var(--color-red-600);
    color: white;
}

/* Messages page: "My" scope badge - blue (default, no override needed) */

/* Fixed widths for admin tabs to prevent shifting when labels change */
/* Forum content - disable parent scroll, only child scrolls */
#forum-content {
    overflow: hidden;
    height: 100%;
}

/* Forum posts container - scrollable */
#forum-posts {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-top: 0;
}

/* Forum container needs to be flex to allow forum-posts to grow */
#forum-content .forum-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Messages content - disable parent scroll, only child scrolls */
#messages-content {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Messages container needs to be flex */
#messages-content .messages-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Messages list container - scrollable (CONSOLIDATED from forum.css and messages.css) */
#messages-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-top: 8px;
}

/* Support content - disable parent scroll, only child scrolls */
#support-content {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Support container needs to be flex */
#support-content > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Support tickets list container - scrollable */
#support-tickets-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Admin View Tabs - Same style as forum tabs */
/* Admin View Tabs - Now uses unified .view-tabs definition above */

/* Admin tab styling */
.admin-tab {
    /* Inherits from .menu-base */
    /* Color controlled by colorSchemeManager.js to match nav menu */
}

.admin-tab:hover {
    /* Inherits from .menu-base - blue hover color and underline */
}

.admin-tab.active {
    text-shadow: none !important;
}

.admin-tab.active:hover {
    text-shadow: none !important;
}

/* Admin tab icon */
.admin-tab .admin-icon {
    padding: 0;
}

/* Admin tab separator (vertical line) */
.admin-tab-separator {
    width: 3px;
    height: 20px;
    background-color: var(--theme-shadow-medium-dark);
    margin: 0 8px;
    align-self: center;
}

/* Admin container - padding removed, inherits from .content-section */
.admin-container {
    margin: 0;
    /* Padding removed - inherits from .content-section */
}

/* Remove bottom padding from admin page content */
#admin-content {
    padding-bottom: 0 !important;
}

#admin-content.page-content {
    padding-bottom: 0 !important;
}

/* Override any inherited padding for admin page */
.page-content#admin-content {
    padding-bottom: 0 !important;
}

/* Padding-bottom removed - now handled by unified .content-section padding in core.css */

/* Ensure all admin content respects container width */
/* Unified Controls Bar */
.controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 24px;
    left: 0;
    right: 0;
    background: var(--theme-bg-primary);
    z-index: 89; /* Below tabs but above content */
    padding: 0;
    margin: 0;
    border-bottom: 0;
    font-size: 14px;
    overflow: visible;
}

/* Group left buttons together so they don't affect filter position */
.controls > button {
    flex-shrink: 0; /* Prevent buttons from shrinking */
}


/* Search filters container */
.search-filters-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0;
    flex-shrink: 0;
    min-width: fit-content;
    height: 18px;
}

.search-input-group {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
    height: 18px;
}

/* Clear buttons in filter controls - match 18px height */
.search-input-group .btn {
    height: 18px;
    margin: 0;
    padding: 0 8px;
    line-height: 1;
    font-size: 16px;
    box-sizing: border-box;
}

.search-filter-input {
    margin: 0 !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    font-size: 13px;
    width: 150px !important;
    background: var(--theme-overlay-lightest);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-text-on-primary);
    transition: all 0.2s;
    height: 18px !important;
    min-height: 18px !important;
    line-height: 22px;
    box-sizing: border-box;
}

/* Timespan dropdown styling to match filter inputs */
.timespan-dropdown {
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    font-size: 13px;
    background: var(--theme-overlay-lightest);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-text-primary);
    transition: all 0.2s;
    height: 18px !important;
    min-height: 18px !important;
    line-height: 16px;
    box-sizing: border-box;
    cursor: pointer;
    width: auto !important;
}

/* Dropdown options have black text on white background */
.timespan-dropdown option {
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* Support date filter - removed forced black text to inherit from theme */

.leaderboard-timespan-dropdown:focus {
    outline: none;
    border-color: var(--theme-badge-warning-bg);
    box-shadow: 0 0 0 2px var(--theme-purple-overlay-light);
}

/* Light red tint when input has text - keep transparent */
.search-filter-input:not(:placeholder-shown) {
    background: var(--theme-danger-overlay-red-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: var(--theme-danger-overlay-red-medium);
}

/* Override browser autofill styling to maintain transparency */
.search-filter-input:-webkit-autofill,
.search-filter-input:-webkit-autofill:hover,
.search-filter-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--theme-text-on-primary) !important;
    border-color: var(--theme-border-light) !important;
    background-color: var(--theme-overlay-lightest) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.search-filter-input:focus {
    outline: none;
    border-color: var(--theme-badge-warning-bg);
    box-shadow: 0 0 0 2px var(--theme-purple-overlay-light);
    background: var(--theme-overlay-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Keep red tint when focused if has text - keep transparent */
.search-filter-input:focus:not(:placeholder-shown) {
    background: var(--theme-danger-overlay-red-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-filter-input::placeholder {
    color: var(--theme-overlay-medium-strong);
}

/* Clear button for search inputs */
.search-clear-btn {
    position: absolute;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--theme-border-light);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.search-clear-btn:hover {
    color: var(--theme-text-secondary);
}

/* Custom user filter dropdown */
.user-filter-dropdown {
    position: fixed;
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    box-shadow: 0 4px 6px var(--theme-shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    width: max-content; /* Auto-size to fit longest username */
    min-width: 150px; /* Minimum width for very short usernames */
    max-width: 400px; /* Maximum width to prevent excessive width */
}

.user-filter-dropdown.active {
    display: block;
}

.user-filter-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--theme-bg-secondary);
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap; /* Prevent text wrapping - keep username on one line */
}

.user-filter-dropdown-item:last-child {
    border-bottom: none;
}

.user-filter-dropdown-item:hover {
    background: var(--theme-bg-secondary);
}

.user-filter-dropdown-item .username {
    font-weight: 500;
    color: var(--theme-text-primary);
}

.user-filter-dropdown-item .role {
    color: var(--theme-text-secondary);
    font-size: 11px;
    margin-left: 6px;
}

.search-input-group {
    position: relative;
}

/* Make filter inputs flexible in subtabs to prevent wrapping */
.view-tabs.subtabs .search-input-group {
    flex-shrink: 1; /* Allow shrinking when space is tight */
    min-width: 120px; /* Minimum usable width */
}

.view-tabs.subtabs .search-input-group .input {
    width: 100%; /* Fill available space */
    min-width: 120px; /* Minimum usable input width */
}

/* Allow timespan dropdown to shrink in subtabs */
.view-tabs.subtabs .timespan-dropdown {
    flex-shrink: 1; /* Allow shrinking */
    min-width: 90px; /* Minimum to show "📅 All Time" */
}

/* Filter status - grows to fill space between buttons and filters */
.filter-status-center {
    flex: 1; /* Grow to fill available space */
    text-align: center; /* Center the text within the space */
    font-size: 13px;
    color: var(--theme-text-secondary);
    padding: 0 10px;
    min-width: 0; /* Allow shrinking below content size if needed */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ... if text is too long */
    min-height: 1em; /* Reserve vertical space even when empty */
}

/* Remove the old filter status message bar */
.filter-status-message {
    display: none !important;
}

/* Context Indicator Top - Shared UI element (CONSOLIDATED from forum.css and leaderboard.css) */
.context-indicator-top {
    background: var(--theme-badge-warning-bg) !important; /* Light yellow */
    color: var(--theme-btn-warning-bg) !important; /* Dark amber text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important; /* Changed from absolute */
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important; /* Changed from center to left */
    border-bottom: 1px solid var(--theme-btn-warning-bg) !important; /* Add subtle bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}