/* NóminaSimple - Custom Styles */

/* Radzen Notification z-index fix */
.rz-notification {
    z-index: 9999 !important;
}

/* Paleta de colores corporativos - Basada en el logo */
:root {
    /* Colores del logo */
    --rz-primary: #00549F;        /* Azul de "Nomina" */
    --rz-primary-light: #0066CC;
    --rz-primary-dark: #003D7A;
    --rz-secondary: #5B9C3A;      /* Verde de "Simple" */
    --rz-secondary-light: #6FB847;
    --rz-secondary-dark: #4A7D2F;
    --rz-accent: #F7B731;         /* Amarillo del $ */

    /* Colores de estado */
    --rz-success: #5B9C3A;
    --rz-danger: #dc2626;
    --rz-warning: #F7B731;
    --rz-info: #00549F;

    /* Grises */
    --rz-gray-50: #f9fafb;
    --rz-gray-100: #f3f4f6;
    --rz-gray-200: #e5e7eb;
    --rz-gray-300: #d1d5db;
    --rz-gray-400: #9ca3af;
    --rz-gray-500: #6b7280;
    --rz-gray-600: #4b5563;
    --rz-gray-700: #374151;
    --rz-gray-900: #111827;

    /* Texto */
    --ns-heading: #1e3a5f;        /* Azul oscuro para títulos */
    --ns-heading-hover: #163352;

    /* Tonos de estado (backgrounds, borders, text) */
    --ns-success-bg: #f0fdf4;
    --ns-success-border: #bbf7d0;
    --ns-success-text: #15803d;

    --ns-warning-bg: #fffbeb;
    --ns-warning-border: #fde68a;
    --ns-warning-text: #92400e;

    --ns-info-bg: #eff6ff;
    --ns-info-border: #bfdbfe;

    --ns-danger-bg: #fef2f2;
    --ns-danger-border: #fecaca;
    --ns-danger-text: #991b1b;

    --ns-icon-bg: #e8f4fc;        /* Fondo para iconos destacados */

    /* Colores para Horas Extra (Sky/Cyan) */
    --ns-hours-bg: #f0f9ff;
    --ns-hours-bg-light: #e0f2fe;
    --ns-hours-border: #7dd3fc;
    --ns-hours-border-hover: #0ea5e9;
    --ns-hours-icon-bg: #bae6fd;
    --ns-hours-text: #0284c7;
    --ns-hours-shadow: rgba(14, 165, 233, 0.2);

    /* Colores Accent (Amber/Orange) */
    --ns-accent-bg: #fef3c7;
    --ns-accent-text: #d97706;
}

/* Estilos globales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--rz-gray-900);
    background-color: var(--rz-gray-50);
}

/* Tablas de nómina - mejor legibilidad */
.payroll-table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.payroll-table thead {
    background-color: var(--rz-gray-100);
    font-weight: 600;
}

.payroll-table tbody tr:hover {
    background-color: var(--rz-gray-50);
}

/* Montos - formato moneda */
.amount-positive {
    color: var(--rz-success);
    font-weight: 600;
}

.amount-negative {
    color: var(--rz-danger);
    font-weight: 600;
}

.amount-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Badges de estado */
.badge-active {
    background-color: var(--rz-success);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.badge-inactive {
    background-color: var(--rz-gray-600);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.badge-pending {
    background-color: var(--rz-warning);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.badge-approved {
    background-color: var(--rz-success);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.badge-rejected {
    background-color: var(--rz-danger);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .rz-datatable {
        font-size: 0.875rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-hidden {
        display: none !important;
    }
}

/* PWA - Better mobile experience */
@media (display-mode: standalone) {
    body {
        user-select: none;
        -webkit-user-select: none;
    }

    input, textarea, select {
        user-select: auto;
        -webkit-user-select: auto;
    }
}

/* ========================================
   FORM COMPONENTS - Global Styles
   ======================================== */

/* Card Container */
.ns-card {
    background: white;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.ns-card-sm {
    padding: 1.5rem;
    border-radius: 16px;
}

.ns-card-flat {
    box-shadow: none;
    border: 1px solid var(--rz-gray-200);
}

/* Form Labels */
.ns-form-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rz-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.ns-required {
    color: var(--rz-danger);
    margin-right: 0.25rem;
}

/* Form Groups */
.ns-form-group {
    margin-bottom: 1.25rem;
}

.ns-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ns-form-row > * {
    min-width: 0;
}

@media (max-width: 480px) {
    .ns-form-row {
        grid-template-columns: 1fr;
    }
}

/* Input with Icon */
.ns-input-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--rz-gray-100);
    border-radius: 12px;
    padding: 0 1rem;
    height: 52px;
    transition: all 0.2s;
    overflow: hidden;
    min-width: 0;
}

.ns-input-icon:focus-within {
    background: #e8f4fc;
    box-shadow: 0 0 0 2px rgba(0, 84, 159, 0.15);
}

.ns-input-icon.invalid {
    background: var(--ns-danger-bg);
    border: 1px solid var(--ns-danger-border);
}

.ns-input-icon.invalid:focus-within {
    background: var(--ns-danger-bg);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.ns-input-icon .rz-icon {
    color: var(--rz-gray-400);
    font-size: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.ns-input-icon .rz-textbox,
.ns-input-icon input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100% !important;
    flex: 1;
    font-size: 0.95rem;
    color: var(--rz-gray-900);
}

.ns-input-icon .rz-textbox::placeholder,
.ns-input-icon input::placeholder {
    color: var(--rz-gray-400);
}

/* Password toggle icon */
.ns-input-toggle {
    color: var(--rz-gray-400);
    cursor: pointer;
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: color 0.2s;
}

.ns-input-toggle:hover {
    color: var(--rz-gray-600);
}

/* Step Icons (for wizards) */
.ns-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    background: var(--ns-icon-bg);
    color: var(--ns-heading);
}

/* Section Headers */
.ns-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ns-heading);
    text-align: center;
    margin-bottom: 0.35rem;
}

.ns-section-subtitle {
    font-size: 0.95rem;
    color: var(--rz-gray-500);
    text-align: center;
    margin-bottom: 2rem;
}

/* Info Boxes */
.ns-info-box {
    background: var(--ns-success-bg);
    border: 1px solid var(--ns-success-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.ns-info-box.warning {
    background: var(--ns-warning-bg);
    border-color: var(--ns-warning-border);
}

.ns-info-box.info {
    background: var(--ns-info-bg);
    border-color: var(--ns-info-border);
}

.ns-info-box .rz-icon {
    color: var(--rz-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ns-info-box.warning .rz-icon {
    color: var(--rz-warning);
}

.ns-info-box.info .rz-icon {
    color: var(--rz-primary);
}

.ns-info-box-text {
    font-size: 0.8rem;
    color: var(--ns-success-text);
    line-height: 1.5;
}

.ns-info-box.warning .ns-info-box-text {
    color: var(--ns-warning-text);
}

.ns-info-box.info .ns-info-box-text {
    color: var(--rz-primary-dark);
}

/* Button Styles */
.ns-btn-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ns-btn-primary {
    width: 100%;
    height: 52px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 14px;
    text-transform: uppercase;
    background: var(--ns-heading) !important;
    border: none !important;
}

.ns-btn-primary:hover {
    background: var(--ns-heading-hover) !important;
}

.ns-btn-secondary {
    height: 52px;
    font-weight: 600;
    border-radius: 14px;
    text-transform: uppercase;
    background: var(--rz-gray-100) !important;
    color: var(--rz-gray-500) !important;
    border: none !important;
}

.ns-btn-secondary:hover {
    background: var(--rz-gray-200) !important;
}

.ns-btn-success {
    background: var(--rz-secondary) !important;
}

.ns-btn-success:hover {
    filter: brightness(0.95);
}

/* Progress Indicators */
.ns-progress-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.ns-progress-dot {
    width: 32px;
    height: 8px;
    border-radius: 4px;
    background: var(--rz-gray-200);
    transition: all 0.3s;
}

.ns-progress-dot.active {
    background: var(--rz-primary);
}

/* Validation Messages */
.validation-message,
.ns-validation-message,
.ns-field-error {
    color: var(--rz-danger);
    font-size: 0.8rem;
    margin-top: 0.35rem;
    display: block;
    line-height: 1.3;
}

/* Global override for all ValidationMessage components */
.ns-form-group .validation-message {
    color: var(--rz-danger);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* Error summary box */
.ns-error-box {
    background: var(--ns-danger-bg);
    border: 1px solid var(--ns-danger-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ns-error-box .rz-icon {
    color: var(--rz-danger);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ns-error-box-text {
    font-size: 0.875rem;
    color: var(--ns-danger-text);
    line-height: 1.5;
    flex: 1;
}

/* ========================================
   SIDEBAR & NAVIGATION - Global Styles
   ======================================== */

/* Light Sidebar */
.sidebar-light {
    background: #fafafa !important;
    border-right: 1px solid var(--rz-gray-200) !important;
    transition: width 0.2s ease !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-light.expanded {
    width: 250px !important;
    min-width: 250px !important;
}

.sidebar-light.collapsed {
    width: 70px !important;
    min-width: 70px !important;
}

/* Responsive sidebar - collapse on small screens */
@media (max-width: 768px) {
    .sidebar-light {
        position: fixed !important;
        z-index: 1100;
        height: 100vh;
    }

    .sidebar-light.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .sidebar-light.collapsed * {
        display: none !important;
    }

}

.sidebar-light .rz-sidebar-toggle {
    color: var(--rz-gray-600);
}

/* Sidebar Header */
.sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
}

.sidebar-light.collapsed .sidebar-header {
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 1;
}

.sidebar-logo-full {
    max-width: 160px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sidebar-logo-small {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.sidebar-logo-collapsed {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rz-gray-200);
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.125rem;
}

.nav-menu .nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--rz-gray-700);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.nav-menu .nav-item:hover {
    background: var(--rz-gray-200);
    color: var(--rz-gray-900);
}

.nav-menu .nav-item.active {
    background: var(--rz-gray-200);
    color: var(--rz-primary);
    font-weight: 600;
}

.nav-menu .nav-item.active .nav-icon {
    color: var(--rz-primary);
}

.nav-menu .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--rz-gray-500);
}

.nav-menu .nav-item:hover .nav-icon {
    color: var(--rz-gray-700);
}

.nav-menu .nav-icon .rz-icon {
    font-size: 1.2rem;
}

.nav-menu .nav-text {
    flex: 1;
}

/* Collapsed Menu State */
.nav-menu.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
}

.nav-menu.collapsed .nav-icon {
    width: 28px;
    height: 28px;
}

.nav-menu.collapsed .nav-icon .rz-icon {
    font-size: 1.35rem;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--rz-gray-500);
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: var(--rz-gray-200);
    color: var(--rz-gray-700);
}

.sidebar-toggle-btn .rz-icon {
    font-size: 1.35rem;
}

/* Mobile floating toggle button */
.mobile-toggle-btn {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1050;
    background: white;
    border: 1px solid var(--rz-gray-200);
    padding: 0.75rem;
    cursor: pointer;
    color: var(--rz-gray-700);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
}

.mobile-toggle-btn:hover {
    background: var(--rz-gray-100);
}

.mobile-toggle-btn .rz-icon {
    font-size: 1.5rem;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1099;
    }

    .mobile-toggle-btn {
        display: flex;
    }
}

/* Main Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    background: white;
    border-bottom: 1px solid var(--rz-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    min-height: 60px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ns-heading);
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.company-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 1rem;
    border-right: 1px solid var(--rz-gray-200);
}

.company-logo-header {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--rz-gray-200);
}

.company-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.company-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--rz-gray-400);
    letter-spacing: 0.5px;
}

.company-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ns-heading);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.2s;
}

.user-profile:hover {
    background: var(--rz-gray-100);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ns-heading);
}

.user-role {
    font-size: 0.7rem;
    color: var(--rz-gray-500);
}

/* Override Radzen Profile Menu styles */
.header-right .rz-profile-menu,
.header-right .rz-profile-menu .rz-navigation-item,
.header-right .rz-profile-menu .rz-navigation-item-wrapper,
.header-right .rz-profile-menu .rz-navigation-item-link,
.header-right .rz-profile-menu .rz-navigation-item-link-active,
.header-right .rz-menu .rz-navigation-item-link {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.header-right .rz-profile-menu .rz-navigation-item-link {
    padding: 0.5rem !important;
    border-radius: 8px !important;
}

.header-right .rz-profile-menu .rz-navigation-item-link:hover {
    background-color: var(--rz-gray-100) !important;
}

/* Profile menu chevron */
.header-right .rz-profile-menu .rz-navigation-item-icon-children {
    color: var(--rz-gray-600) !important;
}

/* User Menu Dropdown Styles */
.user-menu-header {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}

.user-menu-name {
    font-weight: 600;
    color: var(--ns-heading);
    font-size: 0.95rem;
}

.user-menu-email {
    font-size: 0.8rem;
    color: var(--rz-gray-500);
}

.user-menu-divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--rz-gray-200);
}

.logout-menu-form {
    margin: 0;
}

.logout-menu-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-danger);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s;
    text-align: left;
}

.logout-menu-btn:hover {
    background: var(--ns-danger-bg);
}

.logout-menu-btn .rz-icon {
    font-size: 1.25rem;
}

/* Main Content Area */
.main-content {
    padding: 1.5rem;
    background: var(--rz-gray-50);
    min-height: calc(100vh - 60px);
}

/* Logout Button */
.logout-form {
    display: flex;
    margin: 0;
}

.logout-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--rz-gray-500);
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-btn:hover {
    background: var(--ns-danger-bg);
    color: var(--rz-danger);
}

.logout-btn .rz-icon {
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .company-selector,
    .user-info {
        display: none;
    }

    .main-content {
        padding: 1rem;
    }
}

/* ========================================
   ACCOUNT MANAGEMENT PAGES
   ======================================== */

.manage-account-container {
    max-width: 1000px;
    margin: 0 auto;
}

.manage-account-header {
    margin-bottom: 1.5rem;
}

.manage-account-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ns-heading);
    margin: 0 0 0.25rem 0;
}

.manage-account-subtitle {
    font-size: 0.95rem;
    color: var(--rz-gray-500);
    margin: 0;
}

.manage-account-content {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .manage-account-content {
        grid-template-columns: 1fr;
    }
}

/* Navigation Menu */
.manage-nav {
    background: white;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

.manage-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--rz-gray-600);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.manage-nav-item:hover {
    background: var(--rz-gray-100);
    color: var(--rz-gray-900);
}

.manage-nav-item.active {
    background: var(--rz-primary);
    color: white;
}

.manage-nav-item .rz-icon {
    font-size: 1.25rem;
}

/* Content Cards */
.manage-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.manage-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ns-heading);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manage-card-title .rz-icon {
    color: var(--rz-primary);
}

.manage-card-description {
    font-size: 0.875rem;
    color: var(--rz-gray-500);
    margin: 0 0 1.5rem 0;
}

/* Form Elements for Manage Pages */
.manage-form-group {
    margin-bottom: 1.25rem;
}

.manage-form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.manage-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--rz-gray-200);
    border-radius: 8px;
    background: var(--rz-gray-50);
    color: var(--rz-gray-900);
    transition: all 0.2s;
}

.manage-form-input:focus {
    outline: none;
    border-color: var(--rz-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 84, 159, 0.1);
}

.manage-form-input:disabled {
    background: var(--rz-gray-100);
    color: var(--rz-gray-500);
    cursor: not-allowed;
}

.manage-form-input-icon {
    position: relative;
}

.manage-form-input-icon .rz-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rz-gray-400);
}

.manage-form-input-icon .manage-form-input {
    padding-left: 2.75rem;
}

/* Buttons */
.manage-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: var(--rz-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.manage-btn-primary:hover {
    background: var(--rz-primary-dark);
}

.manage-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-gray-700);
    background: var(--rz-gray-100);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.manage-btn-secondary:hover {
    background: var(--rz-gray-200);
}

.manage-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: var(--rz-danger);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.manage-btn-danger:hover {
    filter: brightness(0.9);
}

.manage-btn-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Status Messages */
.manage-status {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manage-status-success {
    background: var(--ns-success-bg);
    color: var(--ns-success-text);
    border: 1px solid var(--ns-success-border);
}

.manage-status-error {
    background: var(--ns-danger-bg);
    color: var(--ns-danger-text);
    border: 1px solid var(--ns-danger-border);
}

.manage-status-warning {
    background: var(--ns-warning-bg);
    color: var(--ns-warning-text);
    border: 1px solid var(--ns-warning-border);
}

/* Info Boxes */
.manage-info-box {
    padding: 1rem;
    border-radius: 8px;
    background: var(--ns-info-bg);
    border: 1px solid var(--ns-info-border);
    margin-bottom: 1rem;
}

.manage-info-box p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-primary-dark);
}

/* Verification Badge */
.manage-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-success);
    font-weight: 500;
}

.manage-unverified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-warning);
    font-weight: 500;
}

/* Authenticator Steps */
.authenticator-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.authenticator-step {
    display: flex;
    gap: 1rem;
}

.step-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--rz-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ns-heading);
    margin: 0 0 0.5rem 0;
}

.step-content p {
    font-size: 0.875rem;
    color: var(--rz-gray-600);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.step-content a {
    color: var(--rz-primary);
    text-decoration: none;
}

.step-content a:hover {
    text-decoration: underline;
}

.shared-key {
    background: var(--rz-gray-100);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--ns-heading);
    display: inline-block;
}

/* QR Code Container */
.qr-code-container {
    background: white;
    border: 2px solid var(--rz-gray-200);
    border-radius: 12px;
    padding: 1rem;
    display: inline-block;
    margin: 0.5rem 0;
}

.qr-code-container #qrCode {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-code-container #qrCode img {
    border-radius: 4px;
}

#qrCodeData {
    display: none;
}

/* Passkeys List */
.passkeys-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.passkey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--rz-gray-50);
    border: 1px solid var(--rz-gray-200);
    border-radius: 8px;
    gap: 1rem;
}

.passkey-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.passkey-icon {
    color: var(--rz-primary);
    font-size: 1.25rem;
}

.passkey-name {
    font-weight: 500;
    color: var(--ns-heading);
}

.passkey-actions {
    display: flex;
    gap: 0.5rem;
}

/* Small Button Variant */
.manage-btn-sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* Recovery Codes Container */
.recovery-codes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.recovery-code-item {
    background: var(--rz-gray-100);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    color: var(--ns-heading);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.recovery-code-item code {
    background: transparent;
    color: inherit;
}

/* Manage Status Info */
.manage-status-info {
    background: var(--ns-info-bg);
    color: var(--rz-primary-dark);
    border: 1px solid var(--ns-info-border);
}

/* Manage Link */
.manage-link {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.manage-link:hover {
    text-decoration: underline;
}

/* External Logins List */
.external-logins-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.external-login-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--rz-gray-50);
    border: 1px solid var(--rz-gray-200);
    border-radius: 8px;
    gap: 1rem;
}

.external-login-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.external-login-icon {
    color: var(--rz-primary);
    font-size: 1.5rem;
}

.external-login-name {
    font-weight: 500;
    color: var(--ns-heading);
}

.external-login-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Responsive adjustments for passkeys and external logins */
@media (max-width: 576px) {
    .passkey-item,
    .external-login-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .passkey-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .recovery-codes-container {
        grid-template-columns: 1fr 1fr;
    }

    .external-login-providers {
        flex-direction: column;
        width: 100%;
    }

    .external-login-providers button {
        width: 100%;
    }
}

/* ========================================
   ERROR BOUNDARY - Error Display
   ======================================== */

.error-boundary-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
}

.error-boundary-content {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    max-width: 480px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.error-boundary-content .error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ns-danger-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.error-boundary-content .error-icon .rzi {
    font-size: 2.5rem;
    color: var(--rz-danger);
}

.error-boundary-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ns-heading);
    margin: 0 0 0.75rem 0;
}

.error-boundary-content p {
    font-size: 1rem;
    color: var(--rz-gray-600);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.error-details {
    text-align: left;
    margin-bottom: 1.5rem;
}

.error-details summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-gray-500);
    padding: 0.5rem 0;
}

.error-details summary:hover {
    color: var(--rz-gray-700);
}

.error-details pre {
    background: var(--rz-gray-100);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.75rem;
    overflow-x: auto;
    margin-top: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
    color: var(--rz-gray-700);
    white-space: pre-wrap;
    word-break: break-word;
}

.error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ===========================================
   BANNERS (Warning & Trial)
   =========================================== */

.warning-banner,
.trial-banner,
.grace-period-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.warning-banner {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-bottom: 2px solid #f59e0b;
}

.trial-banner {
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-bottom: 2px solid #3b82f6;
}

.grace-period-banner {
    background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-bottom: 2px solid #dc2626;
}

.grace-period-banner strong {
    font-weight: 700;
}

.banner-icon {
    font-size: 20px;
}

.banner-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}

.banner-link:hover {
    opacity: 0.8;
}

/* ===========================================
   SUSPENDED LAYOUT
   =========================================== */

.suspended-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    padding: 20px;
}

.suspended-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.suspended-icon {
    margin-bottom: 20px;
}

.suspended-title {
    color: #dc2626;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.suspension-reason {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    color: #991b1b;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.suspended-message {
    color: #374151;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #4b5563;
}

.contact-item a {
    color: #00549F;
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

.suspended-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 24px 0;
}

.export-section {
    text-align: center;
}

.export-section h3 {
    color: #374151;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.export-section p {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.export-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.logout-section {
    margin-top: 24px;
}

/* ===========================================
   ADMIN TENANTS PAGE
   =========================================== */

.admin-tenants-page {
    padding: 24px;
}

.admin-tenants-page .page-header h2 {
    color: var(--ns-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 140px;
    text-align: center;
    border-left: 4px solid var(--rz-gray-300);
}

.stat-card.stat-active {
    border-left-color: var(--rz-success);
}

.stat-card.stat-trial {
    border-left-color: var(--rz-info);
}

.stat-card.stat-suspended {
    border-left-color: var(--rz-danger);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ns-heading);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--rz-gray-500);
    margin-top: 4px;
}

.filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-active {
    background: var(--ns-success-bg);
    color: var(--ns-success-text);
}

.status-badge.status-trial {
    background: var(--ns-info-bg);
    color: var(--rz-info);
}

.status-badge.status-suspended {
    background: #fef2f2;
    color: #dc2626;
}

.trial-days {
    color: var(--rz-info);
    font-weight: 500;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    background: var(--rz-gray-50);
    border-radius: 8px;
}

/* Admin dialogs */
.suspend-dialog,
.banner-dialog,
.tenant-details-dialog {
    padding: 8px;
}

.suspend-dialog p,
.banner-dialog p {
    margin-bottom: 12px;
    color: var(--rz-gray-700);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--rz-gray-700);
}

.form-group small {
    display: block;
    margin-top: 4px;
}

.dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rz-gray-200);
}

/* Tenant details dialog */
.tenant-details-dialog .detail-section {
    margin-bottom: 20px;
}

.tenant-details-dialog .detail-section h4 {
    color: var(--ns-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rz-primary);
}

.tenant-details-dialog .detail-row {
    display: flex;
    margin-bottom: 8px;
}

.tenant-details-dialog .detail-label {
    width: 140px;
    font-weight: 500;
    color: var(--rz-gray-600);
}

.tenant-details-dialog .detail-value {
    flex: 1;
    color: var(--rz-gray-900);
}

/* Nav menu admin styling */
.nav-divider {
    height: 1px;
    background: var(--rz-gray-300);
    margin: 12px 16px;
}

.nav-item.nav-admin {
    background: rgba(220, 38, 38, 0.1);
}

.nav-item.nav-admin:hover {
    background: rgba(220, 38, 38, 0.2);
}

.nav-item.nav-admin .nav-icon {
    color: #dc2626;
}

/* ===========================================
   SETUP PAGE
   =========================================== */

.setup-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #00549F 0%, #003D7A 100%);
    padding: 20px;
}

.setup-loading {
    text-align: center;
    color: white;
}

.setup-loading p {
    margin-top: 16px;
    font-size: 1.1rem;
}

.setup-completed {
    background: white;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.setup-completed h2 {
    color: var(--ns-heading);
    margin: 16px 0 8px;
}

.setup-completed p {
    color: var(--rz-gray-600);
    margin-bottom: 24px;
}

.setup-container {
    background: white;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.setup-header {
    text-align: center;
    margin-bottom: 32px;
}

.setup-logo {
    height: 60px;
    margin-bottom: 16px;
}

.setup-header h1 {
    color: var(--ns-heading);
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.setup-header p {
    color: var(--rz-gray-600);
    font-size: 0.95rem;
}

.setup-container .form-group {
    margin-bottom: 20px;
}

.setup-container .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--rz-gray-700);
}

.setup-container .error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.9rem;
    margin-top: 16px;
}

.setup-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 24px;
    padding: 12px;
    background: var(--ns-info-bg);
    border-radius: 8px;
    color: var(--rz-info);
    font-size: 0.85rem;
}

.setup-note .rzi {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Row actions in data grid */
.row-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}