/* ==========================================
   Buttons - Dark Theme (Square Full Height)
   ========================================== */

/* Toolbar Buttons - Vuông, chiếm trọn chiều cao, không viền */
.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
    background: transparent;
    color: #cccccc;
    border: none; /* Không viền */
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: #37373d;
    border-color: #4e4e52;
    color: #ffffff;
}

.toolbar-btn:active {
    background: #2d2d30;
}

.toolbar-btn.primary {
    background: #0e639c;
    border: none;
    color: white;
}

.toolbar-btn.primary:hover {
    background: #1177bb;
    border: none;
}

.toolbar-btn.active {
    background: #094771;
    border: none;
    color: white;
}

/* Sidebar Toggle Button - Vuông hoàn toàn */
.sidebar-toggle-btn {
    padding: 0;
    width: 48px;
    min-width: 48px;
    font-size: 20px;
    border-radius: 0;
}

/* Highlight toggle when sidebar is collapsed */
body.sidebar-collapsed .sidebar-toggle-btn {
    background: #094771;
    border: none;
    color: white;
}

/* Button Icons */
.toolbar-btn span:first-child {
    font-size: 18px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .toolbar-btn {
        padding: 0 12px;
        font-size: 12px;
        gap: 6px;
    }
    
    .toolbar-btn span:last-child {
        display: none;
    }
    
    .toolbar-btn span:first-child {
        font-size: 20px;
    }
    
    .sidebar-toggle-btn {
        width: 44px;
        min-width: 44px;
    }
}