/* ============================================
   PASSPORT THEME - Clean & Modern
   A privacy-first identity portal aesthetic
   ============================================ */

/* CSS Variables */
:root, [data-theme="passport"] {
    /* Primary Colors - Trustworthy Cyan */
    --passport-primary: #0891B2;
    --passport-primary-light: #22D3EE;
    --passport-primary-dark: #0E7490;

    /* Security Status Colors */
    --passport-secure: #059669;
    --passport-warning: #D97706;
    --passport-danger: #DC2626;

    /* Surfaces - Light Theme */
    --passport-background: #F8FAFC;
    --passport-surface: #FFFFFF;
    --passport-surface-elevated: #FFFFFF;
    --passport-border: #E2E8F0;

    /* Text Colors */
    --passport-text: #1E293B;
    --passport-text-secondary: #64748B;
    --passport-text-muted: #94A3B8;

    /* Typography */
    --passport-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shadows */
    --passport-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --passport-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --passport-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --passport-radius-sm: 6px;
    --passport-radius: 8px;
    --passport-radius-lg: 12px;
}

/* Base Styles */
html, body {
    font-family: var(--passport-font);
    background: var(--passport-background);
    color: var(--passport-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Radzen defaults for Passport */
.rz-layout {
    background: var(--passport-background);
}

.rz-header {
    background: var(--passport-surface) !important;
    border-bottom: 1px solid var(--passport-border);
    box-shadow: var(--passport-shadow-sm);
    height: 60px;
}

.rz-sidebar {
    background: var(--passport-surface) !important;
    border-right: 1px solid var(--passport-border);
    width: 260px;
}

.rz-body {
    background: var(--passport-background);
}

.rz-footer {
    background: var(--passport-surface) !important;
    border-top: 1px solid var(--passport-border);
    height: 50px;
}

/* Panel Menu Styling */
.rz-panel-menu {
    background: transparent;
}

.rz-panel-menu-item-text {
    color: var(--passport-text);
    font-weight: 500;
}

.rz-panel-menu-item:hover {
    background: var(--passport-background);
}

.rz-panel-menu-item.rz-state-active,
.rz-panel-menu-item.rz-state-selected {
    background: rgba(8, 145, 178, 0.1);
    color: var(--passport-primary);
}

.rz-panel-menu-item.rz-state-active .rz-panel-menu-item-text,
.rz-panel-menu-item.rz-state-selected .rz-panel-menu-item-text {
    color: var(--passport-primary);
}

/* Cards */
.passport-card {
    background: var(--passport-surface);
    border: 1px solid var(--passport-border);
    border-radius: var(--passport-radius-lg);
    box-shadow: var(--passport-shadow);
    padding: 1.5rem;
}

/* Buttons */
.rz-button.rz-primary {
    background: var(--passport-primary);
    border-color: var(--passport-primary);
}

.rz-button.rz-primary:hover {
    background: var(--passport-primary-dark);
    border-color: var(--passport-primary-dark);
}

/* Progress Bar */
.rz-progressbar {
    background: var(--passport-border);
}

.rz-progressbar-value {
    background: var(--passport-primary);
}

/* Forms */
.rz-textbox {
    border-color: var(--passport-border);
    border-radius: var(--passport-radius);
}

.rz-textbox:focus {
    border-color: var(--passport-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

/* Links */
a {
    color: var(--passport-primary);
}

a:hover {
    color: var(--passport-primary-dark);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--passport-text);
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Profile Menu */
.rz-profile-menu .rz-button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* Utility Classes */
.text-secure { color: var(--passport-secure); }
.text-warning { color: var(--passport-warning); }
.text-danger { color: var(--passport-danger); }
.text-muted { color: var(--passport-text-muted); }

.bg-secure { background: var(--passport-secure); }
.bg-warning { background: var(--passport-warning); }
.bg-danger { background: var(--passport-danger); }

/* Animations */
@keyframes passport-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.passport-animate-in {
    animation: passport-fade-in 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .rz-sidebar {
        width: 100%;
    }

    .passport-header-content {
        padding: 0 1rem;
    }

    .passport-brand-name {
        display: none;
    }
}

/* Focus States for Accessibility */
*:focus-visible {
    outline: 2px solid var(--passport-primary);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
