/* Global Tenant Theme Stylesheet */
/* All tenant-specific styling is centralized here */
/* Components inherit these styles automatically */

:root {
    /* Default fallback colors */
    --tenant-primary-color: #3b82f6;
    --tenant-secondary-color: #6b7280;
    --tenant-text-color: #ffffff;
}

/* ==================== BACKGROUNDS ==================== */

.bg-tenant-primary {
    background-color: var(--tenant-primary-color) !important;
}

.bg-tenant-secondary {
    background-color: var(--tenant-secondary-color) !important;
}

/* ==================== TEXT COLORS ==================== */

.text-tenant-primary {
    color: var(--tenant-primary-color) !important;
}

.text-tenant-secondary {
    color: var(--tenant-secondary-color) !important;
}

.text-tenant-light {
    color: var(--tenant-text-color) !important;
}

/* ==================== BORDERS ==================== */

.border-tenant-primary {
    border-color: var(--tenant-primary-color) !important;
}

.border-tenant-secondary {
    border-color: var(--tenant-secondary-color) !important;
}

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

/* Primary buttons - use tenant SECONDARY color */
.btn-primary,
.btn-tenant-primary {
    background-color: var(--tenant-secondary-color) !important;
    color: white !important;
    border: none !important;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled),
.btn-tenant-primary:hover:not(:disabled) {
    filter: brightness(0.9);
}

.btn-primary:disabled,
.btn-tenant-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Outline buttons - also use secondary */
.btn-outline,
.btn-tenant-outline {
    background-color: transparent !important;
    color: var(--tenant-secondary-color) !important;
    border: 1px solid var(--tenant-secondary-color) !important;
    transition: all 0.2s;
}

.btn-outline:hover:not(:disabled),
.btn-tenant-outline:hover:not(:disabled) {
    background-color: var(--tenant-secondary-color) !important;
    color: white !important;
}

/* Filled buttons (alternative primary style) - also use secondary */
.btn-filled {
    background-color: var(--tenant-secondary-color) !important;
    color: white !important;
}

/* ==================== PAGINATION ==================== */

/* Active pagination button - use tenant SECONDARY color */
.pagination-button.active {
    background-color: var(--tenant-secondary-color) !important;
    color: white !important;
    border-color: var(--tenant-secondary-color) !important;
}

.pagination-button.active:hover {
    filter: brightness(0.9);
}

/* ==================== LINKS ==================== */

a.tenant-link,
.tenant-link {
    color: var(--tenant-primary-color);
    text-decoration: none;
    transition: all 0.2s;
}

a.tenant-link:hover,
.tenant-link:hover {
    filter: brightness(0.85);
}

/* ==================== FORM ELEMENTS ==================== */

.form-input:focus {
    border-color: var(--tenant-primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-checkbox:checked {
    background-color: var(--tenant-primary-color);
    border-color: var(--tenant-primary-color);
}

/* ==================== HEADER & NAVIGATION ==================== */

.app-header {
    /* Use 'background' instead of 'background-color' to support gradients */
    background: var(--tenant-primary-color);
    color: var(--tenant-text-color);
}

.app-sidebar {
    /* Use 'background' instead of 'background-color' to support gradients */
    background: var(--tenant-primary-color);
    color: var(--tenant-text-color);
}

/* ==================== LOGIN PAGE ==================== */
/* Only the background uses tenant colors - everything else uses default styling */
/* This ensures buttons, text, and links are always visible and readable */

/* ==================== NAVIGATION LINKS ==================== */

.custom-nav-link {
    color: var(--tenant-text-color);
}

.custom-nav-link.active-page .custom-nav-icon {
    color: var(--tenant-text-color);
}

/* ==================== BADGES & TAGS ==================== */

.badge-tenant-primary {
    background-color: var(--tenant-primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-tenant-outline {
    background-color: transparent;
    color: var(--tenant-primary-color);
    border: 1px solid var(--tenant-primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ==================== CARDS & CONTAINERS ==================== */

.card-tenant-header {
    background-color: var(--tenant-primary-color);
    color: var(--tenant-text-color);
}

.card-tenant-border {
    border-color: var(--tenant-primary-color);
}

/* ==================== LOADING & SPINNERS ==================== */

.spinner-tenant {
    border-color: var(--tenant-primary-color);
    border-right-color: transparent;
}

/* ==================== PROGRESS BARS ==================== */

.progress-bar-tenant {
    background-color: var(--tenant-primary-color);
}

/* ==================== ALERTS ==================== */

.alert-tenant {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--tenant-primary-color);
    color: var(--tenant-primary-color);
}

/* ==================== TABS ==================== */

.tab-tenant-active {
    border-bottom: 2px solid var(--tenant-primary-color);
    color: var(--tenant-primary-color);
}

/* ==================== UTILITY CLASSES ==================== */

.hover-tenant-primary:hover {
    background-color: var(--tenant-primary-color);
    color: white;
}

.hover-tenant-brightness:hover {
    filter: brightness(0.9);
}

/* ==================== GRADIENTS ==================== */

.gradient-tenant-primary {
    background: linear-gradient(135deg, var(--tenant-primary-color) 0%, var(--tenant-secondary-color) 100%);
}

.gradient-tenant-overlay {
    background: linear-gradient(to bottom, transparent, var(--tenant-primary-color));
}

/* ==================== SHADOWS ==================== */

.shadow-tenant {
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
}

.shadow-tenant-lg {
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
}

/* ==================== ANIMATIONS ==================== */

@keyframes tenant-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-tenant-pulse {
    animation: tenant-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==================== RESPONSIVE OVERRIDES ==================== */

@media (max-width: 768px) {
    .app-header,
    .app-sidebar {
        /* Use 'background' instead of 'background-color' to support gradients */
        background: var(--tenant-primary-color);
        color: var(--tenant-text-color);
    }
}

/* ==================== DARK MODE SUPPORT ==================== */

@media (prefers-color-scheme: dark) {
    .login-title,
    .login-logo {
        color: var(--tenant-primary-color);
    }
}

/* ==================== MAIN OUTLINED BUTTON - FORCE OVERRIDE ==================== */
/* This MUST be at the end to override all other styles including scoped CSS */

button.main-outlined-btn,
.main-outlined-btn,
button[class*="main-outlined-btn"],
.action-controls .main-outlined-btn,
.action-controls button.main-outlined-btn,
button[class*="main-outlined-btn"][class*="btn-sm"],
button[class*="main-outlined-btn"][class*="btn-lg"],
button[class*="main-outlined-btn"][class*="btn-block"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--tenant-secondary-color) !important;
    border: 1px solid var(--tenant-secondary-color) !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    font-family: inherit !important;
}

button.main-outlined-btn:active,
.main-outlined-btn:active,
button[class*="main-outlined-btn"]:active,
.action-controls .main-outlined-btn:active,
.action-controls button.main-outlined-btn:active {
    background-color: var(--tenant-secondary-color) !important;
    background-image: none !important;
    color: white !important;
    border-color: var(--tenant-secondary-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
}

button.main-outlined-btn:hover:not(:disabled),
.main-outlined-btn:hover:not(:disabled),
button[class*="main-outlined-btn"]:hover:not(:disabled),
.action-controls .main-outlined-btn:hover:not(:disabled),
.action-controls button.main-outlined-btn:hover:not(:disabled) {
    background-color: var(--tenant-secondary-color) !important;
    background-image: none !important;
    color: white !important;
    border-color: var(--tenant-secondary-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 1 !important;
}

button.main-outlined-btn:focus,
.main-outlined-btn:focus,
button[class*="main-outlined-btn"]:focus,
.action-controls .main-outlined-btn:focus,
.action-controls button.main-outlined-btn:focus {
    outline: 2px solid var(--tenant-secondary-color) !important;
    outline-offset: 2px !important;
    background-color: transparent !important;
    color: var(--tenant-secondary-color) !important;
    border-color: var(--tenant-secondary-color) !important;
}

button.main-outlined-btn:disabled,
.main-outlined-btn:disabled,
button[class*="main-outlined-btn"]:disabled,
.action-controls .main-outlined-btn:disabled,
.action-controls button.main-outlined-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    color: var(--tenant-secondary-color) !important;
    border-color: var(--tenant-secondary-color) !important;
}

button.main-outlined-btn.btn-sm,
.main-outlined-btn.btn-sm,
button[class*="main-outlined-btn"][class*="btn-sm"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
}

button.main-outlined-btn.btn-lg,
.main-outlined-btn.btn-lg,
button[class*="main-outlined-btn"][class*="btn-lg"] {
    padding: 14px 28px !important;
    font-size: 16px !important;
    min-height: 48px !important;
}

button.main-outlined-btn.btn-block,
.main-outlined-btn.btn-block,
button[class*="main-outlined-btn"][class*="btn-block"] {
    width: 100% !important;
    display: flex !important;
}