/**
 * HomeOS AI — topbar.css
 * Górna belka nawigacyjna Material Design 3
 * ============================================================
 */

.topbar {
    position:        fixed;
    top:             0;
    left:            var(--sidebar-width);
    right:           0;
    height:          var(--topbar-height);
    background:      var(--topbar-bg);
    border-bottom:   1px solid var(--md-outline-variant);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 1.25rem 0 1rem;
    z-index:         var(--z-topbar);
    gap:             .5rem;
    transition:      left var(--md-motion-medium3) var(--md-easing-standard),
                     background var(--md-motion-short2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   Start section (hamburger + title)
   ============================================================ */
.topbar__start {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    overflow:    hidden;
    flex:        1;
    min-width:   0;
}

.topbar__menu-btn {
    flex-shrink: 0;
}

.topbar__title-wrap {
    overflow:   hidden;
    min-width:  0;
}

.topbar__title {
    font-size:     var(--md-title-large);
    font-weight:   500;
    color:         var(--md-on-surface);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.topbar__subtitle {
    display:       block;
    font-size:     var(--md-body-small);
    color:         var(--md-on-surface-variant);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   End section (search, theme, notifications, user)
   ============================================================ */
.topbar__end {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    flex-shrink: 0;
}

/* ---- Search ---- */
.topbar__search-btn {}

/* ---- Theme toggle ---- */
.topbar__theme-btn {}

/* ---- Notifications ---- */
.topbar__notifications {
    position: relative;
}

.topbar__notifications-btn {
    position: relative;
}

.topbar__badge {
    position:    absolute;
    top:         4px;
    right:       4px;
    min-width:   18px;
    height:      18px;
    background:  var(--md-error);
    color:       var(--md-on-error);
    border-radius: var(--md-shape-full);
    font-size:   var(--md-label-small);
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 .3em;
    line-height: 1;
    pointer-events: none;
    border:      2px solid var(--topbar-bg);
    animation:   scaleIn var(--md-motion-short3) var(--md-easing-decelerate);
}

/* ---- User menu ---- */
.topbar__user {
    position: relative;
    margin-left: .25rem;
}

.topbar__user-btn {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    padding:       .375rem .625rem .375rem .375rem;
    border-radius: var(--md-shape-full);
    background:    transparent;
    border:        none;
    cursor:        pointer;
    color:         var(--md-on-surface-variant);
    font-size:     var(--md-label-large);
    font-weight:   500;
    font-family:   var(--font-family);
    transition:    background var(--md-motion-short2);
}
.topbar__user-btn:hover { background: var(--md-state-hover); color: var(--md-on-surface); }

.topbar__user-avatar {
    width:         32px;
    height:        32px;
    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;
}
.topbar__user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar__user-avatar .material-symbols-rounded { font-size: 20px; }

.topbar__user-name {
    max-width:     120px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.topbar__user-chevron {
    font-size:  18px;
    transition: transform var(--md-motion-short2) var(--md-easing-standard);
}
.topbar__user-btn[aria-expanded="true"] .topbar__user-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   Notifications dropdown
   ============================================================ */
#notificationsDropdown {
    width: 380px;
    right: 0;
    left:  auto;
}

.notification-item {
    display:     flex;
    align-items: flex-start;
    gap:         .75rem;
    padding:     .875rem 1rem;
    cursor:      pointer;
    transition:  background var(--md-motion-short1);
    text-decoration: none;
    color:       var(--md-on-surface);
    border-bottom: 1px solid var(--md-outline-variant);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--md-state-hover); text-decoration: none; }
.notification-item--unread { background: var(--md-state-hover); }

.notification-item__icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--md-secondary-container);
    color:           var(--md-on-secondary-container);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.notification-item__icon .material-symbols-rounded { font-size: 18px; }
.notification-item__body { flex: 1; min-width: 0; }
.notification-item__title {
    font-size:     var(--md-label-large);
    font-weight:   500;
    color:         var(--md-on-surface);
    margin-bottom: .2rem;
}
.notification-item__message {
    font-size:     var(--md-body-small);
    color:         var(--md-on-surface-variant);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.notification-item__time {
    font-size:   var(--md-label-small);
    color:       var(--md-on-surface-variant);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .topbar {
        left: 0;
    }
}

@media (max-width: 640px) {
    .topbar__user-name { display: none; }
    .topbar__user-chevron { display: none; }
    .topbar__search-btn { display: none; }

    #notificationsDropdown {
        width:  calc(100vw - 2rem);
        right:  -1rem;
    }

    #userDropdown {
        right:  -1rem;
    }
}