/* ============================================
   Settings Page Styles
   ============================================ */

/* Settings Container */
.settings-container {
    margin-top: 16px;
}

/* ============================================
   Sidebar Styles
   ============================================ */

.settings-sidebar-paper {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* Custom scrollbar for sidebar */
.settings-sidebar-paper::-webkit-scrollbar {
    width: 8px;
}

.settings-sidebar-paper::-webkit-scrollbar-track {
    background: var(--mud-palette-action-disabled-background);
    border-radius: 4px;
}

.settings-sidebar-paper::-webkit-scrollbar-thumb {
    background: var(--mud-palette-action-disabled);
    border-radius: 4px;
}

.settings-sidebar-paper::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-disabled-opacity);
}

/* Navigation Groups */
.settings-nav-group {
    margin-bottom: 8px;
}

.settings-nav-group .mud-nav-item {
    padding-left: 16px;
}

.settings-nav-group .mud-nav-link {
    min-height: 40px;
}

.settings-nav-group .mud-nav-link .mud-nav-link-icon {
    margin-right: 8px;
    font-size: 1.25rem;
}

/* ============================================
   Content Area Styles
   ============================================ */

.settings-content {
    min-height: 400px;
}

/* ============================================
   Search Bar Styles
   ============================================ */

.settings-search-bar {
    max-width: 600px;
}

/* Search autocomplete item styling */
.settings-search-bar .mud-list-item {
    padding: 8px 12px;
}

.settings-search-bar .mud-paper {
    background-color: transparent;
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Small devices (landscape phones, less than 600px) */
@media (max-width: 599.95px) {
    /* Stack sidebar on top on mobile */
    .settings-sidebar {
        order: 1;
        margin-bottom: 16px;
    }

    .settings-content {
        order: 2;
    }

    /* Make sidebar full width on mobile */
    .settings-sidebar .mud-paper {
        width: 100%;
    }

    /* Full width search bar on mobile */
    .settings-search-bar {
        width: 100%;
        max-width: 100%;
    }

    /* Reduce padding on mobile */
    .settings-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Small devices (portrait tablets, large phones, 600px and up) */
@media (min-width: 600px) and (max-width: 959.95px) {
    /* Sidebar takes up 4 columns, content takes up 8 columns */
    .settings-sidebar {
        order: 1;
    }

    .settings-content {
        order: 2;
    }

    /* Adjust sidebar position */
    .settings-sidebar-paper {
        position: relative;
        top: 0;
    }
}

/* Medium devices (landscape tablets, 960px and up) */
@media (min-width: 960px) {
    /* Sidebar is sticky on desktop */
    .settings-sidebar-paper {
        position: sticky;
        top: 16px;
    }

    /* Add subtle shadow to sidebar on desktop */
    .settings-sidebar-paper {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Better spacing on desktop */
    .settings-content {
        padding-left: 16px;
    }
}

/* Large devices (desktops, 1280px and up) */
@media (min-width: 1280px) {
    /* Max width for content on large screens */
    .settings-content {
        max-width: 1200px;
    }
}

/* ============================================
   Card and Grid Styles
   ============================================ */

/* Settings cards */
.settings-content .mud-card {
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-content .mud-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Grid adjustments for different screen sizes */
@media (max-width: 599.95px) {
    /* Single column on mobile */
    .settings-content .mud-grid > .mud-item {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ============================================
   Loading and Empty States
   ============================================ */

.settings-content .mud-progress-circular {
    display: block;
    margin: 48px auto;
}

.settings-content .text-center {
    text-align: center;
}

/* ============================================
   Form Styles
   ============================================ */

.settings-content .mud-form {
    padding: 16px 0;
}

.settings-content .mud-input-control {
    margin-bottom: 16px;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Truncate text with ellipsis */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flex utilities */
.flex-grow-1 {
    flex-grow: 1;
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-space-between {
    justify-content: space-between;
}

/* Gap utilities */
.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

/* Margin utilities */
.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.ml-8 {
    margin-left: 32px;
}

.mr-2 {
    margin-right: 8px;
}

.mr-3 {
    margin-right: 12px;
}

/* Padding utilities */
.pa-2 {
    padding: 8px;
}

.pa-3 {
    padding: 12px;
}

.pa-4 {
    padding: 16px;
}

.pa-8 {
    padding: 32px;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .settings-sidebar {
        display: none;
    }

    .settings-content {
        width: 100%;
    }

    .settings-search-bar {
        display: none;
    }

    .mud-button {
        display: none;
    }
}