/* CASTRUM - Unified Button System
========================================
* All button styles consolidated in one place
* Professional, minimalistic design
* Windows-inspired flat appearance
*/

/* ========================================
   BASE BUTTON STYLES
   ======================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.calculate-changes-btn,
.calculate-btn,
button:not(.modal-close):not(.close-panel-btn):not(.remove-category):not(.remove-object-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-buttons);
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border-radius: 0;
    box-shadow: none;
    padding: 5px 5px;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.1s, border-color 0.1s;
}

/* Button states */
.btn:hover,
button:not(.modal-close):not(.close-panel-btn):not(.remove-category):not(.remove-object-btn):hover {
    background-color: #d0d0d0;
    border-color: #707070;
}

.btn:active,
button:not(.modal-close):not(.close-panel-btn):not(.remove-category):not(.remove-object-btn):active {
    background-color: #c0c0c0;
}

.btn:focus,
button:not(.modal-close):not(.close-panel-btn):not(.remove-category):not(.remove-object-btn):focus {
    outline: 1px dotted var(--text-color);
    outline-offset: -4px;
}

.btn:disabled,
button:disabled {
    background-color: var(--input-bg-disabled, #f5f5f5);
    color: var(--text-color-muted, #999);
    border-color: var(--border-color, #ccc);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary Button */
#logout-btn {

    color: #fff;


}



/* Secondary Button */
.btn-secondary {
    background-color: var(--card-background, #f5f5f5);
    color: var(--text-color, #000);
    border-color: var(--border-color, #8a8a8a);
}

.btn-secondary:hover {
    background-color: #e0e0e0;
}

/* Success Button */
.btn-success {
    background-color: var(--btn-success-bg, #107c10);
    color: #ffffff;
    border-color: var(--btn-success-bg, #107c10);
}

.btn-success:hover {
    background-color: #0e6b0e;
    border-color: #0e6b0e;
}

/* Danger Button */
.btn-danger {
    background-color: var(--btn-danger-bg, #d13438);
    color: #ffffff;
    border-color: var(--btn-danger-bg, #d13438);
}

.btn-danger:hover {
    background-color: #b52b2f;
    border-color: #b52b2f;
}

/* Warning Button */
.btn-warning {
    background-color: #ff8c00;
    color: #ffffff;
    border-color: #ff8c00;
}

.btn-warning:hover {
    background-color: #e67e00;
    border-color: #e67e00;
}

/* ========================================
   BUTTON SIZES
   ======================================== */
.btn-sm,
.btn-small {
    padding: 4px 8px;
    font-size: 12px;
}

.btn-lg {
    padding: 8px 16px;
    font-size: 14px;
}

/* Button groups */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group .btn:first-child {
    margin-left: 0;
}

.btn-group .btn:hover,
.btn-group .btn:focus {
    z-index: 1;
}

/* Toolbar buttons */
.confirm-btn,
.toolbar-btn {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast),
      border-color var(--transition-fast);
    background-color: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--button-border);
    font-family: inherit;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-xs);
    background-color: #fcfcff;
  }


.toolbar-btn:hover {
    background-color: #d0d0d0;
    border-color: #707070;
}

.toolbar-btn:active {
    background-color: #c0c0c0;
}

.toolbar-btn-primary {
    background-color: #0078d4;
    color: #ffffff;
    border-color: #0078d4;
}

.toolbar-btn-primary:hover {
    background-color: #106ebe;
    border-color: #106ebe;
}

.toolbar-btn-primary:active {
    background-color: #005a9e;
}

/* Icon in buttons */
.btn-icon {
    font-size: 14px;
    line-height: 1;
}

/* Block button */
.btn-block {
    display: flex;
    width: 100%;
}

/* Link button */
.btn-link {
    background: transparent;
    border: none;
    color: var(--color-secondary);
    text-decoration: underline;
    padding: 0;
}

.btn-link:hover {
    background: transparent;
    color: var(--color-secondary-dark);
}

/* ========================================
   SPECIFIC BUTTON CLASSES
   ======================================== */

/* Calculate Button */
.calculate-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 12px;
    border: 1px solid var(--color-secondary);
    font-size: 13px;
    background-color: var(--color-secondary);
}

.calculate-btn:hover:not(:disabled) {
    background: var(--color-primary, #2c3e50);
    border-color: var(--color-primary, #2c3e50);
}

.calculate-btn .btn-icon {
    font-size: 1.1rem;
}

.calculate-btn .btn-text {
    font-size: 0.9rem;
}

.calculate-changes-btn {
    position: relative;
}

.calculate-changes-btn:hover:not(:disabled) {
}

/* Changes Badge */
.changes-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #e74c3c;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Session Action Buttons */
.session-action-btn {
    padding: 6px 12px;
    font-size: 13px;
}

.session-action-btn.primary {
    background-color: var(--color-primary, #2c3e50);
    color: var(--text-color-inverse, #fff);
    border-color: var(--color-primary, #2c3e50);
}

.session-action-btn.primary:hover {
    background-color: var(--color-primary-dark, #1a252f);
}

.session-action-btn.danger {
    background-color: var(--color-danger, #f44336);
    color: var(--text-color-inverse, #fff);
    border-color: var(--color-danger, #f44336);
}

.session-action-btn.danger:hover {
    background-color: #d32f2f;
}

/* New Session Button */
.new-session-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--color-primary, #2c3e50);
    color: var(--text-color-inverse, #fff);
    border: none;
    font-size: 14px;
    font-weight: 500;
}

.new-session-btn:hover {
    background-color: var(--color-primary-dark, #1a252f);
}

/* Options Page Buttons */


/* Card Action Buttons */
.card-action-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    font-size: 12px;
}

.card-action-btn:hover {
    background: var(--table-hover-bg, #f5f5f5);
}

.card-action-btn.delete {
    color: var(--color-danger, #d13438);
    border-color: var(--color-danger, #d13438);
}

.card-action-btn.delete:hover {
    background: var(--color-danger, #d13438);
    color: white;
}

/* Side Bar Footer Buttons */
.side-bar-footer .btn-cancel {
    background-color: var(--btn-secondary-bg, #95a5a6);
    color: var(--btn-secondary-text, #ffffff);
}

.side-bar-footer .btn-cancel:hover {
    opacity: 0.8;
}

.side-bar-footer .btn-submit {
    background-color: var(--btn-primary-bg, #3498db);
    color: var(--btn-primary-text, #ffffff);
}

.side-bar-footer .btn-submit:hover {
    opacity: 0.9;
}

.side-bar-footer .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Confirm Button */
.confirm-btn {
    background-color: var(--button-bg, #e1e1e1);
    color: var(--text-color, #000);
    border: 1px solid var(--button-border, #8a8a8a);
    padding: 4px 8px;
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */
[data-theme="dark"] .toolbar-btn,
[data-theme="dark"] .btn {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555555;
}

[data-theme="dark"] .toolbar-btn:hover,
[data-theme="dark"] .btn:hover {
    background-color: #4a4a4a;
    border-color: #666666;
}

[data-theme="dark"] .toolbar-btn:active,
[data-theme="dark"] .btn:active {
    background-color: #2a2a2a;
}

[data-theme="dark"] .session-action-btn {
    background-color: var(--card-background, #333);
    color: var(--text-color, #e0e0e0);
    border-color: var(--border-color, #555);
}

[data-theme="dark"] .session-action-btn:hover {
    background-color: var(--hover-color, #444);
}