/* ==========================================================
   CIBM Studio Pro
   Status Bar
   Version 9.1
========================================================== */

/* ----------------------------------------------------------
   Status Bar Container
---------------------------------------------------------- */

#statusBar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: var(--surface);

    border-top: 1px solid var(--border);

    height: var(--status-height);

    padding: 0 10px;

    font-size: 12px;

    overflow: hidden;

}

/* ----------------------------------------------------------
   Sections
---------------------------------------------------------- */

.status-left,
.status-center,
.status-right {

    display: flex;

    align-items: center;

    gap: 12px;

}

.status-center {

    flex: 1;

    justify-content: center;

}

.status-right {

    justify-content: flex-end;

}

/* ----------------------------------------------------------
   Status Item
---------------------------------------------------------- */

.status-item {

    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    color: var(--text);

}

.status-item.clickable {

    cursor: pointer;

    border-radius: 4px;

    padding: 2px 6px;

    transition: background .15s ease;

}

.status-item.clickable:hover {

    background: rgba(0,0,0,.08);

}

/* ----------------------------------------------------------
   Status Icon
---------------------------------------------------------- */

.status-icon {

    width: 16px;

    text-align: center;

    opacity: .8;

}

/* ----------------------------------------------------------
   Indicators
---------------------------------------------------------- */

.status-indicator {

    width: 8px;

    height: 8px;

    border-radius: 50%;

}

.status-indicator.online {

    background: #2ecc71;

}

.status-indicator.busy {

    background: #f39c12;

}

.status-indicator.offline {

    background: #95a5a6;

}

.status-indicator.error {

    background: #e74c3c;

}

/* ----------------------------------------------------------
   Zoom Control
---------------------------------------------------------- */

.status-zoom {

    display: flex;

    align-items: center;

    gap: 6px;

}

.status-zoom input[type=range] {

    width: 90px;

}

/* ----------------------------------------------------------
   Progress
---------------------------------------------------------- */

.status-progress {

    width: 120px;

    height: 6px;

    background: rgba(0,0,0,.12);

    border-radius: 4px;

    overflow: hidden;

}

.status-progress-bar {

    height: 100%;

    width: 0%;

    background: var(--accent);

    transition: width .2s ease;

}

/* ----------------------------------------------------------
   Notifications
---------------------------------------------------------- */

.status-badge {

    min-width: 16px;

    height: 16px;

    padding: 0 4px;

    border-radius: 8px;

    background: var(--accent);

    color: #fff;

    font-size: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width: 900px) {

    .status-center {

        display: none;

    }

    #statusBar {

        font-size: 11px;

    }

}