/**
 * HomeOS AI — sidebar.css
 * Sidebar nawigacyjny Material Design 3
 * ============================================================
 */

/* ============================================================
   Sidebar — struktura
   ============================================================ */
.sidebar {
    position:      fixed;
    top:           0;
    left:          0;
    width:         var(--sidebar-width);
    height:        100vh;
    background:    var(--sidebar-bg);
    border-right:  1px solid var(--sidebar-border);
    display:       flex;
    flex-direction: column;
    z-index:       var(--z-sidebar);
    overflow:      hidden;
    transition:    transform  var(--md-motion-medium3) var(--md-easing-standard),
                   width      var(--md-motion-medium3) var(--md-easing-standard);
    overscroll-behavior: contain;
}

/* Overlay ciemny dla mobile */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--md-scrim);
    z-index:    calc(var(--z-sidebar) - 1);
    animation:  fadeIn var(--md-motion-medium2) var(--md-easing-standard);
}

/* ============================================================
   Logo / Header
   ============================================================ */
.sidebar__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1rem 1rem 1.25rem;
    height:          var(--topbar-height);
    flex-shrink:     0;
}

.sidebar__logo {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    text-decoration: none;
    color:       var(--md-on-surface);
    overflow:    hidden;
}
.sidebar__logo:hover { text-decoration: none; }

.sidebar__logo-icon {
    width:         40px;
    height:        40px;
    border-radius: var(--md-shape-small);
    background:    var(--md-primary);
    color:         var(--md-on-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    transform var(--md-motion-short2) var(--md-easing-standard);
}
.sidebar__logo:hover .sidebar__logo-icon { transform: scale(1.05); }
.sidebar__logo-icon .material-symbols-rounded { font-size: 22px; }

.sidebar__logo-text {
    display:     flex;
    align-items: baseline;
    gap:         .25rem;
    white-space: nowrap;
}
.sidebar__logo-name {
    font-size:   var(--md-title-large);
    font-weight: 500;
    color:       var(--md-on-surface);
    letter-spacing: -.5px;
}
.sidebar__logo-badge {
    font-size:     var(--md-label-small);
    font-weight:   500;
    background:    var(--md-primary);
    color:         var(--md-on-primary);
    padding:       .15em .5em;
    border-radius: var(--md-shape-full);
    letter-spacing: .5px;
}

.sidebar__close-btn {
    display: none;
    flex-shrink: 0;
}

/* ============================================================
   Search
   ============================================================ */
.sidebar__search {
    padding: .5rem 1rem;
    flex-shrink: 0;
}

.sidebar__search-btn {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    width:         100%;
    padding:       .625rem .875rem;
    border-radius: var(--md-shape-full);
    background:    var(--md-surface-variant);
    color:         var(--md-on-surface-variant);
    border:        none;
    cursor:        pointer;
    font-size:     var(--md-body-medium);
    font-family:   var(--font-family);
    transition:    background var(--md-motion-short2);
    text-decoration: none;
    overflow:      hidden;
}
.sidebar__search-btn:hover { background: var(--md-surface-4); text-decoration: none; }
.sidebar__search-btn .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }
.sidebar__search-label {
    flex:       1;
    text-align: left;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}
.sidebar__search-kbd {
    font-size:     var(--md-label-small);
    background:    var(--md-surface-3);
    border-radius: var(--md-shape-extra-small);
    padding:       .15em .5em;
    font-family:   var(--font-family-mono);
    flex-shrink:   0;
    opacity: .7;
}

/* ============================================================
   Navigation Items
   ============================================================ */
.sidebar__nav {
    flex:       1;
    overflow-y: auto;
    padding:    .5rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--md-outline-variant) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 2px; }

.sidebar__group-label {
    font-size:      var(--md-label-small);
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--md-on-surface-variant);
    padding:        .75rem 1.5rem .25rem;
    white-space:    nowrap;
    overflow:       hidden;
}

.sidebar__nav-item {
    display:       flex;
    align-items:   center;
    gap:           .875rem;
    padding:       .625rem 1rem .625rem 1.25rem;
    margin:        .125rem .5rem;
    border-radius: var(--md-shape-full);
    color:         var(--md-nav-item-fg);
    font-size:     var(--md-label-large);
    font-weight:   500;
    text-decoration: none;
    cursor:        pointer;
    position:      relative;
    overflow:      hidden;
    transition:    background   var(--md-motion-short2) var(--md-easing-standard),
                   color        var(--md-motion-short2) var(--md-easing-standard);
    white-space:   nowrap;
}

/* Ripple-like indicator for active */
.sidebar__nav-item-indicator {
    position:       absolute;
    left:           0;
    top:            50%;
    transform:      translateY(-50%);
    width:          4px;
    height:         0;
    border-radius:  0 2px 2px 0;
    background:     var(--md-primary);
    transition:     height var(--md-motion-medium2) var(--md-easing-decelerate);
}

.sidebar__nav-item:hover {
    background:  var(--md-state-hover);
    color:       var(--md-on-surface);
    text-decoration: none;
}
.sidebar__nav-item:hover .sidebar__nav-item-indicator { height: 60%; }

.sidebar__nav-item--active {
    background:  var(--md-nav-indicator);
    color:       var(--md-nav-item-active-fg);
}
.sidebar__nav-item--active .sidebar__nav-item-indicator { height: 70%; }
.sidebar__nav-item--active:hover { background: var(--md-nav-indicator); }

.sidebar__nav-item-icon .material-symbols-rounded {
    font-size: 22px;
    flex-shrink: 0;
    transition: font-variation-settings var(--md-motion-short2);
}
.sidebar__nav-item--active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar__nav-item-label {
    flex:           1;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    transition:     opacity var(--md-motion-medium2) var(--md-easing-standard);
}

.sidebar__nav-item-badge {
    background:    var(--md-error);
    color:         var(--md-on-error);
    font-size:     var(--md-label-small);
    font-weight:   500;
    border-radius: var(--md-shape-full);
    padding:       .1em .5em;
    min-width:     20px;
    text-align:    center;
    flex-shrink:   0;
}

/* ============================================================
   Footer / Profil
   ============================================================ */
.sidebar__footer {
    flex-shrink:    0;
    padding:        .75rem .5rem;
    border-top:     1px solid var(--sidebar-border);
}

.sidebar__user {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    padding:       .625rem .75rem;
    border-radius: var(--md-shape-large);
    color:         var(--md-on-surface-variant);
    text-decoration: none;
    transition:    background var(--md-motion-short2);
    overflow:      hidden;
}
.sidebar__user:hover { background: var(--md-state-hover); text-decoration: none; color: var(--md-on-surface); }

.sidebar__user-avatar {
    width:       40px;
    height:      40px;
    border-radius: 50%;
    background:  var(--md-primary-container);
    color:       var(--md-on-primary-container);
    display:     flex;
    align-items: center;
    justify-content: center;
    overflow:    hidden;
    flex-shrink: 0;
}
.sidebar__user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar__user-avatar .material-symbols-rounded { font-size: 28px; }

.sidebar__user-info {
    flex:     1;
    overflow: hidden;
    display:  flex;
    flex-direction: column;
    min-width: 0;
}
.sidebar__user-name {
    font-size:     var(--md-label-large);
    font-weight:   500;
    color:         var(--md-on-surface);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.sidebar__user-role {
    font-size: var(--md-label-small);
    color:     var(--md-on-surface-variant);
}
.sidebar__user-chevron { font-size: 18px; flex-shrink: 0; }

/* ============================================================
   Sidebar — tryb zwinięty (collapsed)
   ============================================================ */
.sidebar--collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar--collapsed .sidebar__logo-text,
.sidebar--collapsed .sidebar__search-label,
.sidebar--collapsed .sidebar__search-kbd,
.sidebar--collapsed .sidebar__group-label,
.sidebar--collapsed .sidebar__nav-item-label,
.sidebar--collapsed .sidebar__nav-item-badge,
.sidebar--collapsed .sidebar__user-info,
.sidebar--collapsed .sidebar__user-chevron {
    opacity: 0;
    width:   0;
    overflow: hidden;
}

.sidebar--collapsed .sidebar__nav-item {
    justify-content: center;
    padding: .625rem;
    margin:  .125rem;
    border-radius: var(--md-shape-medium);
}

.sidebar--collapsed .sidebar__user {
    justify-content: center;
    padding: .625rem;
}

.sidebar--collapsed + .main-wrapper {
    margin-left: var(--sidebar-collapsed-width);
}

/* ============================================================
   Responsive — mobile drawer
   ============================================================ */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width:     var(--sidebar-width);
        box-shadow: var(--md-elevation-5);
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .sidebar--open + .main-wrapper { }

    .sidebar-overlay--visible {
        display: block;
    }

    .sidebar__close-btn {
        display: flex;
    }

    .main-wrapper {
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 100vw;
    }
}