/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 *
 * CONFIDENTIAL AND PROPRIETARY
 *
 * This file is part of the Paseo Platform software system and constitutes
 * proprietary trade secret information of Paseo Platform LLC. This source
 * code is protected under applicable trade secret laws and may not be
 * copied, modified, distributed, or disclosed without the express written
 * permission of Paseo Platform LLC.
 *
 * For licensing inquiries: www.paseoplatform.com
 * =============================================================================
 */

/**
 * Paseo Platform - Multi-Tenant Branding Styles
 * Section 4.5: White-Label Customization
 * Supports organization-specific color schemes and logos
 * Version: 3.0.0
 */

/* ===================================================================
   BRANDING CSS CUSTOM PROPERTIES
   Organizations can override these via inline styles or admin panel
   =================================================================== */

:root {
    /* Tenant branding variables - can be overridden per organization */
    --brand-primary: var(--color-primary, #4527a0);
    --brand-primary-light: var(--color-primary-light, #7c4dff);
    --brand-primary-dark: var(--color-primary-dark, #311b92);
    --brand-accent: var(--color-accent, #0288d1);
    --brand-accent-light: var(--color-accent-light, #4fc3f7);

    /* Logo dimensions */
    --brand-logo-height: 40px;
    --brand-logo-max-width: 200px;

    /* Custom fonts (if enabled) */
    --brand-font-primary: var(--font-family, 'Inter', sans-serif);
    --brand-font-heading: var(--font-family, 'Inter', sans-serif);
}

/* ===================================================================
   BRANDED SIDEBAR
   =================================================================== */

.sidebar.branded {
    background: var(--brand-primary-dark);
}

.sidebar.branded .sidebar-nav-link.active {
    background: var(--brand-primary);
    border-left-color: var(--brand-accent);
}

.sidebar.branded .sidebar-brand-text .highlight {
    color: var(--brand-accent);
}

/* ===================================================================
   BRANDED TOPBAR
   =================================================================== */

.topbar.branded .topbar-icon-btn .badge {
    background: var(--brand-accent);
    color: var(--brand-primary-dark);
}

.topbar.branded .topbar-context-btn:hover {
    border-color: var(--brand-primary);
}

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

.btn-brand-primary {
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md, 8px);
    font-weight: var(--font-semibold, 600);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease,
                transform var(--transition-fast, 0.15s) ease;
}

.btn-brand-primary:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-1px);
}

.btn-brand-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(69, 39, 160, 0.2);
}

.btn-brand-accent {
    background: var(--brand-accent);
    color: var(--brand-primary-dark);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md, 8px);
    font-weight: var(--font-semibold, 600);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease,
                transform var(--transition-fast, 0.15s) ease;
}

.btn-brand-accent:hover {
    background: var(--brand-accent-light);
    transform: translateY(-1px);
}

.btn-brand-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    padding: 10px 22px;
    border-radius: var(--radius-md, 8px);
    font-weight: var(--font-semibold, 600);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease,
                color var(--transition-fast, 0.15s) ease;
}

.btn-brand-secondary:hover {
    background: var(--brand-primary);
    color: white;
}

/* ===================================================================
   BRANDED CARDS
   =================================================================== */

.card-brand-header {
    background: var(--brand-primary);
    color: white;
    padding: 16px 20px;
}

.card-brand-accent-border {
    border-top: 4px solid var(--brand-accent);
}

.card-brand-highlight:hover {
    border-color: var(--brand-primary);
}

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

.link-brand {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition-fast, 0.15s) ease;
}

.link-brand:hover {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* ===================================================================
   BRANDED BADGES
   =================================================================== */

.badge-brand-primary {
    background: var(--brand-primary);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full, 9999px);
    font-size: 12px;
    font-weight: var(--font-semibold, 600);
}

.badge-brand-accent {
    background: var(--brand-accent);
    color: var(--brand-primary-dark);
    padding: 4px 12px;
    border-radius: var(--radius-full, 9999px);
    font-size: 12px;
    font-weight: var(--font-semibold, 600);
}

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

.input-brand:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(69, 39, 160, 0.1);
}

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

.radio-brand:checked {
    border-color: var(--brand-primary);
}

.radio-brand:checked::after {
    background: var(--brand-primary);
}

.toggle-brand:checked {
    background: var(--brand-primary);
}

/* ===================================================================
   BRANDED PROGRESS ELEMENTS
   =================================================================== */

.progress-brand .progress-fill {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.spinner-brand {
    border-top-color: var(--brand-primary);
}

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

.tabs-brand .tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.tabs-brand .tab:hover {
    color: var(--brand-primary);
}

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

.alert-brand {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
    color: white;
    border: none;
    padding: 16px 20px;
    border-radius: var(--radius-md, 8px);
}

.alert-brand-accent {
    background: var(--brand-accent);
    color: var(--brand-primary-dark);
    border: none;
    padding: 16px 20px;
    border-radius: var(--radius-md, 8px);
}

/* ===================================================================
   WHITE LABEL LOGIN PAGE
   =================================================================== */

.login-branded {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-branded-card {
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    max-width: 420px;
    width: 100%;
}

.login-branded-logo {
    display: block;
    max-height: var(--brand-logo-height);
    max-width: var(--brand-logo-max-width);
    margin: 0 auto 32px;
}

.login-branded-title {
    text-align: center;
    font-size: 24px;
    font-weight: var(--font-bold, 700);
    color: var(--brand-primary);
    margin-bottom: 8px;
}

.login-branded-subtitle {
    text-align: center;
    color: var(--color-gray-500, #6B7280);
    margin-bottom: 32px;
}

/* ===================================================================
   POWERED BY FOOTER
   For white-label partners showing "Powered by Paseo"
   =================================================================== */

.powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 12px;
    color: var(--color-gray-400, #9AA5B1);
}

.powered-by-logo {
    height: 16px;
    opacity: 0.6;
    transition: opacity var(--transition-fast, 0.15s) ease;
}

.powered-by:hover .powered-by-logo {
    opacity: 1;
}

/* ===================================================================
   ORGANIZATION HEADER
   =================================================================== */

.org-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: white;
    border-bottom: 1px solid var(--color-gray-200, #E1E7ED);
}

.org-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md, 8px);
    object-fit: contain;
    background: var(--color-gray-50, #F9FAFB);
    padding: 8px;
}

.org-info h1 {
    font-size: 24px;
    font-weight: var(--font-bold, 700);
    color: var(--brand-primary);
    margin-bottom: 4px;
}

.org-info p {
    font-size: 14px;
    color: var(--color-gray-500, #6B7280);
}

/* ===================================================================
   BRANDING PREVIEW COMPONENT
   Used in admin panel for live branding preview
   =================================================================== */

.branding-preview {
    border: 1px solid var(--color-gray-200, #E1E7ED);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--color-gray-100, #F0F3F6);
}

.branding-preview-header {
    background: var(--brand-primary);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.branding-preview-header .preview-logo {
    height: 32px;
    filter: brightness(0) invert(1);
}

.branding-preview-header .preview-title {
    color: white;
    font-weight: var(--font-semibold, 600);
}

.branding-preview-body {
    padding: 20px;
    background: white;
}

.branding-preview-swatch {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.branding-swatch {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm);
}

.branding-swatch.primary {
    background: var(--brand-primary);
}

.branding-swatch.primary-dark {
    background: var(--brand-primary-dark);
}

.branding-swatch.accent {
    background: var(--brand-accent);
}

.branding-preview-buttons {
    display: flex;
    gap: 12px;
}

/* ===================================================================
   DARK MODE BRANDED ELEMENTS
   =================================================================== */

[data-theme="dark"] .login-branded {
    background: linear-gradient(135deg, var(--dark-background) 0%, var(--brand-primary-dark) 100%);
}

[data-theme="dark"] .login-branded-card {
    background: var(--dark-surface, #1F2937);
}

[data-theme="dark"] .login-branded-title {
    color: var(--brand-accent);
}

[data-theme="dark"] .org-header {
    background: var(--dark-surface, #1F2937);
    border-color: var(--dark-border, #374151);
}

[data-theme="dark"] .org-info h1 {
    color: var(--dark-on-surface, #F9FAFB);
}