/* ========================================
   ATSK TRANSPORT WEB - UNIFIED BUTTON SYSTEM

   This file provides standardized button styles using
   design tokens from _design-tokens.css

   PRIMARY COLOR: #1A7CCA (ATSK Blue)
   - Used for all primary action buttons
   - Consistent across the entire application

   Button Classes:
   - .btn-primary      - Main CTA buttons (blue)
   - .btn-secondary    - Outline/ghost buttons
   - .btn-tertiary     - Subtle/gray buttons
   - .btn-danger       - Destructive actions (red)
   - .btn-success      - Positive actions (green)

   Size Modifiers:
   - .btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl

   Shape Modifiers:
   - .btn-pill         - Fully rounded (100px radius)
   - .btn-rounded      - Standard rounded (12px radius)
   - .btn-square       - Minimal radius (6px)
   - .btn-circle       - Circular button (50%)

   Legacy classes are preserved for backward compatibility
   but should be migrated to the new system.
   ======================================== */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.btn,
[class*="btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
    border: none;
    outline: none;
    white-space: nowrap;
    user-select: none;
}

.btn:focus-visible,
[class*="btn-"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(26, 124, 202, 0.2));
}

/* ========================================
   PRIMARY BUTTON
   Main CTA - ATSK Blue (#1A7CCA)
   ======================================== */

.btn-primary,
.primary-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    background: var(--btn-primary-bg, #1A7CCA);
    color: var(--btn-primary-text, #FFFFFF);
    box-shadow: var(--btn-primary-shadow, 0 4px 14px rgba(26, 124, 202, 0.25));
    border-radius: var(--radius-pill, 100px);
    height: var(--btn-height-lg, 48px);
    border: none;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.btn-primary:hover,
.btn-primary:active,
.primary-button:hover,
.primary-button:active {
    background: var(--btn-primary-bg-hover, #1568A8);
    color: var(--btn-primary-text, #FFFFFF);
    box-shadow: var(--btn-primary-shadow-hover, 0 6px 20px rgba(26, 124, 202, 0.35));
    border: none;
    transform: translateY(-1px);
}

.btn-primary:disabled,
.primary-button:disabled {
    background: var(--btn-primary-bg, #1A7CCA);
    color: var(--btn-primary-text, #FFFFFF);
    border: none;
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.primary-button.left-image {
    padding-left: 20px;
    padding-right: 24px;
}

.primary-button.right-image {
    padding-left: 24px;
    padding-right: 20px;
}

/* ========================================
   SECONDARY BUTTON
   Outline style with primary color border
   ======================================== */

.btn-secondary,
.secondary-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    background: var(--btn-secondary-bg, #FFFFFF);
    color: var(--btn-secondary-text, #1A7CCA);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-pill, 100px);
    height: var(--btn-height-lg, 48px);
    border: 1px solid var(--btn-secondary-border, #1A7CCA);
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.btn-secondary:hover,
.btn-secondary:active,
.secondary-button:hover,
.secondary-button:active {
    background: var(--btn-secondary-bg-hover, #EBF5FF);
    color: var(--btn-secondary-text, #1A7CCA);
    border: 1px solid var(--btn-secondary-border-hover, #1568A8);
}

.btn-secondary:disabled,
.secondary-button:disabled {
    background: var(--btn-secondary-bg, #FFFFFF);
    color: var(--btn-secondary-text, #1A7CCA);
    border: 1px solid var(--btn-secondary-border, #1A7CCA);
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.secondary-button.left-image {
    padding-left: 20px;
    padding-right: 24px;
}

.secondary-button.right-image {
    padding-left: 24px;
    padding-right: 20px;
}

.secondary-button.noshadow {
    box-shadow: none;
}

/* ========================================
   TERTIARY BUTTON
   Subtle/ghost style for less prominent actions
   ======================================== */

.btn-tertiary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    background: var(--btn-tertiary-bg, transparent);
    color: var(--btn-tertiary-text, #64748B);
    border-radius: var(--radius-pill, 100px);
    height: var(--btn-height-lg, 48px);
    border: 1px solid var(--btn-tertiary-border, #E2E8F0);
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.btn-tertiary:hover,
.btn-tertiary:active {
    background: var(--btn-tertiary-bg-hover, #F1F5F9);
    color: var(--btn-tertiary-text-hover, #0F172A);
    border-color: var(--color-border-secondary, #CBD5E1);
}

.btn-tertiary:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* ========================================
   DANGER BUTTON
   For destructive actions
   ======================================== */

.btn-danger {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    background: var(--btn-danger-bg, #DC2626);
    color: var(--btn-danger-text, #FFFFFF);
    box-shadow: var(--btn-danger-shadow, 0 4px 14px rgba(220, 38, 38, 0.25));
    border-radius: var(--radius-pill, 100px);
    height: var(--btn-height-lg, 48px);
    border: none;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.btn-danger:hover,
.btn-danger:active {
    background: var(--btn-danger-bg-hover, #B91C1C);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.btn-danger:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========================================
   SUCCESS BUTTON
   For positive/confirmation actions
   ======================================== */

.btn-success {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    background: var(--btn-success-bg, #059669);
    color: var(--btn-success-text, #FFFFFF);
    box-shadow: var(--btn-success-shadow, 0 4px 14px rgba(5, 150, 105, 0.25));
    border-radius: var(--radius-pill, 100px);
    height: var(--btn-height-lg, 48px);
    border: none;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.btn-success:hover,
.btn-success:active {
    background: var(--btn-success-bg-hover, #047857);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
}

.btn-success:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========================================
   BUTTON SIZE MODIFIERS
   ======================================== */

.btn-xs {
    height: var(--btn-height-xs, 32px);
    padding: 0 10px;
    font-size: 12px;
    line-height: 14px;
}

.btn-sm {
    height: var(--btn-height-sm, 36px);
    padding: 0 14px;
    font-size: 13px;
    line-height: 16px;
}

.btn-md {
    height: var(--btn-height-md, 44px);
    padding: 0 18px;
    font-size: 14px;
    line-height: 20px;
}

.btn-lg {
    height: var(--btn-height-lg, 48px);
    padding: 0 20px;
    font-size: 14px;
    line-height: 20px;
}

.btn-xl {
    height: var(--btn-height-xl, 52px);
    padding: 0 24px;
    font-size: 15px;
    line-height: 22px;
}

/* ========================================
   BUTTON SHAPE MODIFIERS
   ======================================== */

.btn-pill {
    border-radius: var(--radius-pill, 100px);
}

.btn-rounded {
    border-radius: var(--radius-lg, 12px);
}

.btn-square {
    border-radius: var(--radius-sm, 6px);
}

.btn-circle {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
}

.btn-circle.btn-xs {
    width: 32px;
    height: 32px;
}

.btn-circle.btn-sm {
    width: 40px;
    height: 40px;
}

.btn-circle.btn-lg {
    width: 48px;
    height: 48px;
}

.btn-circle.btn-xl {
    width: 56px;
    height: 56px;
}

/* ========================================
   ICON BUTTONS
   ======================================== */

.icon-button-s,
.icon-btn-s {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.icon-button-s:hover,
.icon-btn-s:hover {
    border: 2px solid var(--color-primary, #1A7CCA);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
}

.icon-button-s:disabled,
.icon-btn-s:disabled {
    border: 1px solid var(--color-border-primary, #E2E8F0);
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.icon-button-s.disabled:hover:before,
.icon-button-s.disabled:hover:after {
    visibility: hidden;
}

.icon-btn-long {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    gap: 4px;
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-full, 32px);
    height: 32px;
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    font-size: 12px;
    line-height: 14.52px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.icon-btn-long:hover,
.icon-btn-long:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-primary, #1A7CCA);
}

.icon-btn-long:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.icon-btn-long-dark {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    gap: 4px;
    background: var(--btn-primary-bg, #1A7CCA);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-full, 32px);
    height: 32px;
    color: #FFFFFF;
    border: none;
    font-size: 12px;
    line-height: 14.52px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.icon-btn-long-dark:hover,
.icon-btn-long-dark:active {
    background: var(--btn-primary-bg-hover, #1568A8);
    color: #FFFFFF;
    border: none;
}

.icon-btn-long-dark:disabled {
    background: var(--btn-primary-bg, #1A7CCA);
    color: #FFFFFF;
    border: none;
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* ========================================
   ROUND BUTTONS
   ======================================== */

.round-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-pill, 100px);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.round-button:hover,
.round-button:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-primary, #1A7CCA);
}

.round-button:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.round-button.noshadow {
    box-shadow: none;
}

.round-button-s {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-pill, 100px);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.round-button-s:hover,
.round-button-s:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-primary, #1A7CCA);
}

.round-button-s:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.round-button-s.noshadow {
    box-shadow: none;
}

.round-button-32 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: 32px;
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-pill, 100px);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.round-button-32:hover,
.round-button-32:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-primary, #1A7CCA);
}

.round-button-32:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

.round-button-32.noshadow {
    box-shadow: none;
}

.round-button-gray {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    border: none;
    border-radius: var(--radius-pill, 100px);
    background: var(--color-bg-tertiary, #F1F5F9);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.round-button-gray:active,
.round-button-gray:hover {
    background: var(--color-border-secondary, #CBD5E1);
}

.round-button-gray:disabled {
    background: var(--color-bg-tertiary, #F1F5F9);
    opacity: var(--btn-disabled-opacity, 0.5);
    border: none;
    cursor: not-allowed;
}

.round-button-gray-s {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: var(--radius-pill, 100px);
    background: var(--color-bg-tertiary, #F1F5F9);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.round-button-gray-s:active,
.round-button-gray-s:hover {
    background: var(--color-border-secondary, #CBD5E1);
}

.round-button-gray-s:disabled {
    background: var(--color-bg-tertiary, #F1F5F9);
    opacity: var(--btn-disabled-opacity, 0.5);
    border: none;
    cursor: not-allowed;
}

/* ========================================
   LEGACY BUTTON STYLES
   Preserved for backward compatibility
   Migrate to .btn-primary, .btn-secondary, etc.
   ======================================== */

.custom-button-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    height: 48px;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.custom-modal-footer .custom-button-ellipsis {
    box-shadow: none;
    line-height: 20px;
}

.custom-button-square {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    height: 32px;
    width: 32px;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.custom-button-square:hover,
.custom-button-square:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 2px solid var(--color-primary, #1A7CCA);
}

.custom-button-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.top-container .custom-button-circle,
.custom-button-container-mobile .custom-button-circle {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.custom-button-circle-small {
    height: 40px;
    width: 40px;
}

.custom-button-circle-big {
    height: 48px;
    width: 48px;
    flex: 0 0 48px;
}

/* Black button - NOW USES PRIMARY COLOR */
.black-button {
    background: var(--btn-primary-bg, #1A7CCA);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.black-button:hover,
.black-button:active {
    background: var(--btn-primary-bg-hover, #1568A8);
    color: #FFFFFF;
    border: none;
}

.black-button:disabled {
    background: var(--btn-primary-bg, #1A7CCA);
    color: #FFFFFF;
    border: none;
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* White button */
.white-button {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.white-button:hover,
.white-button:active {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-primary, #1A7CCA);
}

.white-button:disabled {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* Gray button */
.gray-button {
    background: var(--color-bg-tertiary, #F1F5F9);
    color: var(--color-text-primary, #0F172A);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.gray-button:hover,
.gray-button:active {
    background: var(--color-border-secondary, #CBD5E1);
    color: var(--color-text-primary, #0F172A);
    border: none;
}

.gray-button:disabled {
    background: var(--color-bg-tertiary, #F1F5F9);
    color: var(--color-text-primary, #0F172A);
    border: none;
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* Details button */
.details-button {
    background: var(--color-bg-secondary, #F8FAFC);
    color: var(--color-text-primary, #0F172A);
    border: none;
    width: 100px;
    height: 48px;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

/* Button image positioning */
.custom-button-left-image {
    padding-left: 20px;
    padding-right: 24px;
}

.custom-button-right-image {
    padding-left: 24px;
    padding-right: 20px;
}

.custom-button-text-only {
    padding-left: 20px;
    padding-right: 20px;
}

.custom-button-icon-only {
    height: 48px;
    width: 48px;
}

.custom-button-left-image img {
    margin-right: 8px;
}

.custom-button-right-image img {
    margin-left: 8px;
}

.custom-button-ellipsis-small {
    height: 32px;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
}

/* Working days button */
.working-days-button {
    padding: 10px 20px;
    border-radius: var(--radius-lg, 10px);
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.working-days-button:hover {
    border: 2px solid var(--color-primary, #1A7CCA);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
}

/* Grid button */
.grid-button {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.grid-button img {
    top: 1.33px;
    left: 2px;
    gap: 0;
    vertical-align: super;
}

.grid-button:hover {
    border: 2px solid var(--color-primary, #1A7CCA);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
}

.grid-button:disabled {
    border: 1px solid var(--color-border-primary, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    cursor: not-allowed;
}

.grid-button title {
    width: 54px;
    height: 27px;
    border-radius: 4px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-normal, 400);
    font-size: 12px;
}

/* Matrix button */
.matrix-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Calendar button */
.calendar-button {
    background: var(--color-error, #DC2626);
    border-radius: 50px;
}

/* Matrix menu button */
.matrixMenuButton {
    display: flex;
    align-items: center;
    justify-content: start;
    background: var(--color-bg-secondary, #F8FAFC);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-primary, #0F172A);
    border: none;
    width: 100%;
    padding: 14px 10px;
    gap: 8px;
    font-size: 14px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.matrixMenuButton:hover {
    background: var(--color-warning-light);
}

.matrixMenuButton:disabled {
    opacity: var(--btn-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* Dropdown actions */
.dropdownActions {
    margin-left: -80px !important;
}

/* Info number round */
.info-number-round {
    width: 24px;
    height: 24px;
    background: var(--color-warning-border, #FBE64E);
    border-radius: 52px;
    flex: none;
    order: 2;
    flex-grow: 0;
    position: relative;
}

.info-number {
    position: absolute;
    width: 8px;
    height: 15px;
    left: calc(50% - 8px / 2);
    top: calc(50% - 15px / 2 + 0.5px);
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    font-size: 12px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-text-primary, #0F172A);
}

/* Matrix colored buttons */
.matrix-green-button {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color-success-light, #ECFDF5);
    border: 1px solid var(--color-bg-primary, #FFFFFF);
    border-radius: var(--radius-sm, 6px);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.matrix-red-button {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color-error-light, #FEF2F2);
    border: 1px solid var(--color-bg-primary, #FFFFFF);
    border-radius: var(--radius-sm, 6px);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal, 0.15s ease);
}

.matrix-green-button:disabled,
.matrix-red-button:disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* ========================================
   MODAL BUTTON SYSTEM
   Modern enterprise modal buttons
   Used in Modal.razor and all modal footers
   ======================================== */

.modal-button-primary,
.modal-button-secondary,
.modal-button-danger,
.modal-button-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border-radius: 12px;
    padding: 0 24px;
    height: 48px;
    min-width: 120px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Primary Modal Button - Main CTA */
.modal-button-primary {
    background: var(--btn-primary-bg, #1A7CCA);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(26, 124, 202, 0.25);
}

.modal-button-primary:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover, #1568A8);
    box-shadow: 0 6px 20px rgba(26, 124, 202, 0.35);
    transform: translateY(-1px);
}

.modal-button-primary:active:not(:disabled) {
    background: var(--btn-primary-bg-active, #0F4F7F);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-button-primary:focus-visible {
    outline: none;
    box-shadow: 0 4px 14px rgba(26, 124, 202, 0.25), 0 0 0 3px rgba(26, 124, 202, 0.2);
}

.modal-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Secondary Modal Button - Cancel/Back actions */
.modal-button-secondary {
    background: var(--color-bg-primary, #FFFFFF);
    color: var(--color-text-primary, #0F172A);
    border: 1px solid var(--color-border-secondary, #CBD5E1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.modal-button-secondary:hover:not(:disabled) {
    background: var(--color-bg-tertiary, #F1F5F9);
    border-color: var(--color-text-muted, #94A3B8);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.modal-button-secondary:active:not(:disabled) {
    background: var(--color-bg-secondary, #F8FAFC);
    transform: translateY(0);
}

.modal-button-secondary:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(26, 124, 202, 0.2);
}

.modal-button-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Danger Modal Button - Delete/Destructive actions */
.modal-button-danger {
    background: var(--btn-danger-bg, #DC2626);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.modal-button-danger:hover:not(:disabled) {
    background: var(--btn-danger-bg-hover, #B91C1C);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.modal-button-danger:active:not(:disabled) {
    background: var(--color-error-dark, #991B1B);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-button-danger:focus-visible {
    outline: none;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25), 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.modal-button-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Success Modal Button */
.modal-button-success {
    background: var(--btn-success-bg, #059669);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.modal-button-success:hover:not(:disabled) {
    background: var(--btn-success-bg-hover, #047857);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.modal-button-success:active:not(:disabled) {
    background: #047857;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-button-success:focus-visible {
    outline: none;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25), 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.modal-button-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Icon support in modal buttons */
.modal-button-primary svg,
.modal-button-secondary svg,
.modal-button-danger svg,
.modal-button-success svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 480px) {
    .custom-button-avatar {
        height: 32px;
        font-size: 12px;
        padding-left: 8px;
        padding-right: 10px;
    }

    .custom-button-modal {
        height: 40px;
        width: 40px;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .btn,
    [class*="btn-"],
    .primary-button,
    .secondary-button,
    .black-button,
    .white-button,
    .gray-button,
    .round-button,
    .round-button-s,
    .round-button-32,
    .round-button-gray,
    .round-button-gray-s,
    .icon-button-s,
    .icon-btn-long,
    .icon-btn-long-dark,
    .grid-button,
    .working-days-button,
    .custom-button-square,
    .modal-button-primary,
    .modal-button-secondary,
    .modal-button-danger,
    .modal-button-success {
        transition: none;
    }

    .btn-primary:hover,
    .btn-danger:hover,
    .btn-success:hover,
    .primary-button:hover,
    .modal-button-primary:hover,
    .modal-button-danger:hover,
    .modal-button-success:hover {
        transform: none;
    }
}