/* ===== POG BUTTON STYLES - OFFICE RIBBON STYLE ===== */

/* ===== BASE BUTTON STYLES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    user-select: none;
    white-space: nowrap;
    min-height: 32px;
    gap: 6px;
}

.btn:focus {
    outline: 2px solid #005a9e;
    outline-offset: 1px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== BUTTON VARIANTS ===== */
.btn-primary {
    background-color: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background-color: #106ebe;
    border-color: #106ebe;
}

.btn-primary:active:not(:disabled) {
    background-color: #005a9e;
    border-color: #005a9e;
}

.btn-secondary {
    background-color: #ffffff;
    border-color: #8a8886;
    color: #323130;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #f3f2f1;
    border-color: #605e5c;
}

.btn-secondary:active:not(:disabled) {
    background-color: #edebe9;
    border-color: #323130;
}

.btn-success {
    background-color: #107c10;
    border-color: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled) {
    background-color: #0e6e0e;
    border-color: #0e6e0e;
}

.btn-success:active:not(:disabled) {
    background-color: #0c5e0c;
    border-color: #0c5e0c;
}

.btn-danger {
    background-color: #d13438;
    border-color: #d13438;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
    background-color: #b92b2b;
    border-color: #b92b2b;
}

.btn-danger:active:not(:disabled) {
    background-color: #a12424;
    border-color: #a12424;
}

.btn-warning {
    background-color: #ffd23f;
    border-color: #ffd23f;
    color: #323130;
}

.btn-warning:hover:not(:disabled) {
    background-color: #ffcb1f;
    border-color: #ffcb1f;
}

.btn-warning:active:not(:disabled) {
    background-color: #ffc700;
    border-color: #ffc700;
}

/* ===== BUTTON SIZES ===== */
.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    min-height: 24px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    min-height: 40px;
}

/* ===== RIBBON BUTTONS - OFFICE STYLE ===== */

/* Original square ribbon button (like before) */
.ribbon-btn {
    min-width: 64px;
    max-width: 96px;
    height: 64px;
    flex-direction: column;
    padding: 4px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    gap: 2px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid transparent;
    color: #323130;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon-btn:hover {
    background-color: rgba(0, 120, 212, 0.1);
    border-color: rgba(0, 120, 212, 0.3);
}

.ribbon-btn.active {
    background-color: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.ribbon-btn::before {
    content: '';
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Excel-style small stacked button - More specific selectors */
.ribbon-content .ribbon-btn-small,
.ribbon-group .ribbon-btn-small {
    min-width: 80px !important;
    height: 20px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: left !important;
    gap: 4px !important;
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #323130 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    flex-direction: row !important;
}

.ribbon-content .ribbon-btn-small:hover,
.ribbon-group .ribbon-btn-small:hover {
    background-color: rgba(0, 120, 212, 0.1) !important;
    border-color: rgba(0, 120, 212, 0.3) !important;
}

.ribbon-content .ribbon-btn-small.active,
.ribbon-group .ribbon-btn-small.active {
    background-color: #0078d4 !important;
    border-color: #0078d4 !important;
    color: #ffffff !important;
}

.ribbon-content .ribbon-btn-small::before,
.ribbon-group .ribbon-btn-small::before {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
    display: inline-block !important;
}

/* Ribbon button column for stacked small buttons */
.ribbon-btn-column {
    display: flex;
    flex-direction: column;
    gap: 1px;
    height: 64px;
    min-width: 120px;
    justify-content: center;
}

/* ===== RIBBON BUTTON ICONS ===== */
#new-layout-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

#save-layout-btn::before, #save-as-layout-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
}

#open-layout-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

#undo-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E");
}

#redo-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.06-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3E%3C/svg%3E");
}

#delete-selected-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

#new-sku-btn::before, #add-sku-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3s-3 1.34-3 3c0 .35.07.69.18 1H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM11 16H9v2H7v-2H5v-2h2v-2h2v2h2v2z'/%3E%3C/svg%3E");
}

#new-category-btn::before, #add-category-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2zm2 9h3v2h-3v3h-2v-3H7v-2h3V10h2v3z'/%3E%3C/svg%3E");
}

#zoom-in-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z'/%3E%3C/svg%3E");
}

#zoom-out-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M7 9v1h5V9H7z'/%3E%3C/svg%3E");
}

/* ===== TOGGLE BUTTONS ===== */
.toggle-btn {
    position: relative;
}

.toggle-btn.active {
    background-color: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.toggle-btn.active:hover:not(:disabled) {
    background-color: #106ebe;
    border-color: #106ebe;
}

/* ===== LOGOUT BUTTON ===== */
.logout-btn {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.logout-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* ===== ICON BUTTONS ===== */
.btn-icon {
    padding: 8px;
    min-width: 32px;
    min-height: 32px;
}

.btn-icon-sm {
    padding: 4px;
    min-width: 24px;
    min-height: 24px;
}

/* ===== CLOSE BUTTONS ===== */
.close-btn {
    background: none;
    border: none;
    color: #605e5c;
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    font-size: 16px;
    line-height: 1;
    transition: all 0.1s ease;
}

.close-btn:hover {
    background-color: #f3f2f1;
    color: #323130;
}

.close-btn:active {
    background-color: #edebe9;
}