/* ========================================
   Admin Shared Styles
   Purpose: Shared styles for Admin pages
   Version: 1.0.0
   Created: Phase 1 - Foundation
   ======================================== */

/* ========================================
   CSS Custom Properties (Theme Variables)
   ======================================== */

:root {
    /* Spacing Scale */
    --admin-spacing-xs: 0.25rem;      /* 4px */
    --admin-spacing-sm: 0.5rem;       /* 8px */
    --admin-spacing-md: 0.75rem;      /* 12px */
    --admin-spacing-lg: 1rem;         /* 16px */
    --admin-spacing-xl: 1.25rem;      /* 20px */
    --admin-spacing-2xl: 1.5rem;      /* 24px */
    
    /* Border Radius */
    --admin-radius-sm: 0.25rem;       /* 4px */
    --admin-radius-md: 0.5rem;        /* 8px */
    --admin-radius-lg: 0.75rem;       /* 12px */
    
    /* Shadows */
    --admin-shadow-sm: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.08);
    --admin-shadow-md: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
    --admin-shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --admin-font-size-xs: 0.625rem;   /* 10px */
    --admin-font-size-sm: 0.6875rem;  /* 11px */
    --admin-font-size-base: 0.75rem;  /* 12px */
    --admin-font-size-md: 0.8125rem;  /* 13px */
    --admin-font-size-lg: 0.875rem;   /* 14px */
    --admin-font-size-xl: 1rem;       /* 16px */
    --admin-font-size-2xl: 1.25rem;   /* 20px */
    --admin-font-size-3xl: 1.5rem;    /* 24px */
    
    /* Common Colors */
    --admin-text-primary: #2d3748;
    --admin-text-secondary: #718096;
    --admin-text-muted: #a0aec0;
    --admin-success: #48bb78;
    --admin-warning: #f6ad55;
    --admin-danger: #f56565;
    --admin-info: #4299e1;
    
    /* Default Theme (Tenant) */
    --admin-primary: #38b2ac;
    --admin-primary-dark: #319795;
    --admin-primary-light: #e6fffa;
}

/* ========================================
   Theme Classes
   ======================================== */

/* Tenant Theme (Teal/Turquoise) */
.admin-theme-tenant {
    --admin-primary: #38b2ac;
    --admin-primary-dark: #319795;
    --admin-primary-light: #e6fffa;
    --admin-primary-border: #81e6d9;
}

/* Site Theme (Orange) */
.admin-theme-site {
    --admin-primary: #ed8936;
    --admin-primary-dark: #dd6b20;
    --admin-primary-light: #fffaf0;
    --admin-primary-border: #fbd38d;
}

/* Group Theme (Purple) */
.admin-theme-group {
    --admin-primary: #9f7aea;
    --admin-primary-dark: #805ad5;
    --admin-primary-light: #faf5ff;
    --admin-primary-border: #d6bcfa;
}

/* ========================================
   Modern Header
   ======================================== */

.modern-header {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%);
    color: white;
    padding: var(--admin-spacing-lg) var(--admin-spacing-xl);
    border-radius: var(--admin-radius-md);
    margin-bottom: var(--admin-spacing-lg);
    box-shadow: var(--admin-shadow-md);
}

.modern-header h3 {
    margin: 0;
    font-weight: 600;
    font-size: var(--admin-font-size-3xl);
}

.modern-header .breadcrumb {
    font-size: var(--admin-font-size-base);
    opacity: 0.9;
    margin-top: var(--admin-spacing-xs);
    margin-bottom: 0;
}

.modern-header .breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.modern-header .breadcrumb a:hover {
    opacity: 0.8;
}

/* Compact Header Variant */
.modern-header.compact {
    padding: var(--admin-spacing-md) var(--admin-spacing-lg);
}

.modern-header.compact h3 {
    font-size: var(--admin-font-size-2xl);
}

.modern-header.compact .breadcrumb {
    font-size: var(--admin-font-size-sm);
}

/* ========================================
   Action Toolbar
   ======================================== */

.action-toolbar {
    background: white;
    border-radius: var(--admin-radius-md);
    padding: var(--admin-spacing-md);
    margin-bottom: var(--admin-spacing-md);
    box-shadow: var(--admin-shadow-sm);
    display: flex;
    gap: var(--admin-spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* Compact Toolbar Variant */
.action-toolbar.compact {
    padding: var(--admin-spacing-sm);
    gap: var(--admin-spacing-xs);
}

/* ========================================
   Stats Bar
   ======================================== */

.stats-bar {
    background: white;
    border-radius: var(--admin-radius-md);
    padding: var(--admin-spacing-md);
    margin-bottom: var(--admin-spacing-md);
    box-shadow: var(--admin-shadow-sm);
    display: flex;
    gap: var(--admin-spacing-2xl);
    align-items: center;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-md);
}

.stat-icon {
    font-size: var(--admin-font-size-3xl);
    color: var(--admin-primary);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: var(--admin-font-size-sm);
    color: var(--admin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.stat-value {
    font-size: var(--admin-font-size-2xl);
    font-weight: 700;
    color: var(--admin-text-primary);
    line-height: 1.2;
}

/* Compact Stats Variant */
.stats-bar.compact {
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    gap: var(--admin-spacing-lg);
}

.stats-bar.compact .stat-icon {
    font-size: var(--admin-font-size-2xl);
}

.stats-bar.compact .stat-value {
    font-size: var(--admin-font-size-xl);
}

/* ========================================
   Grid Container
   ======================================== */

.grid-container {
    background: white;
    border-radius: var(--admin-radius-md);
    padding: var(--admin-spacing-md);
    box-shadow: var(--admin-shadow-sm);
}

/* Compact Grid Variant */
.grid-container.compact {
    padding: var(--admin-spacing-sm);
}

/* ========================================
   Selected Info Bar
   ======================================== */

.selected-info {
    background: var(--admin-primary-light);
    border-left: 0.25rem solid var(--admin-primary);
    padding: var(--admin-spacing-md);
    margin-bottom: var(--admin-spacing-md);
    border-radius: var(--admin-radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-info-content {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-md);
    flex-wrap: wrap;
}

.selected-badge {
    background: var(--admin-primary);
    color: white;
    padding: var(--admin-spacing-xs) var(--admin-spacing-md);
    border-radius: var(--admin-radius-lg);
    font-size: var(--admin-font-size-sm);
    font-weight: 600;
}

/* Compact Selected Info */
.selected-info.compact {
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
}

/* ========================================
   Modern Buttons
   ======================================== */

.btn-modern {
    border-radius: var(--admin-radius-sm);
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    font-weight: 500;
    font-size: var(--admin-font-size-md);
    transition: all 0.2s ease;
}

.btn-modern:hover {
    transform: translateY(-0.0625rem);
    box-shadow: var(--admin-shadow-lg);
}

/* Syncfusion Button Integration */
.e-btn.btn-modern {
    height: auto;
    line-height: 1.2;
}

.e-btn.btn-modern .e-btn-icon {
    font-size: var(--admin-font-size-lg);
}

/* Compact Button Variant */
.btn-modern.compact {
    padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
    font-size: var(--admin-font-size-base);
}

/* ========================================
   Readonly Box
   ======================================== */

.readonly-box {
    background: #f3f3f3;
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    border-radius: var(--admin-radius-sm);
    border: 0.0625rem solid #ddd;
    font-size: var(--admin-font-size-lg);
}

/* ========================================
   Alert Variants
   ======================================== */

.alert-compact {
    padding: var(--admin-spacing-sm);
    margin-bottom: var(--admin-spacing-sm);
    font-size: var(--admin-font-size-sm);
    line-height: 1.2;
    border-width: 1px;
}

.alert-compact i {
    font-size: var(--admin-font-size-sm);
    margin-right: var(--admin-spacing-xs);
    vertical-align: middle;
}

.alert-compact .btn-close {
    padding: 0.1rem;
    font-size: var(--admin-font-size-xs);
    width: 0.9rem;
    height: 0.9rem;
}

/* ========================================
   Loading Spinner Container
   ======================================== */

.loading-spinner-container {
    padding: var(--admin-spacing-2xl) 0;
}

.loading-spinner-container .spinner-border {
    color: var(--admin-primary);
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
    text-align: center;
    padding: var(--admin-spacing-2xl) 0;
    color: var(--admin-text-muted);
}

.empty-state i {
    font-size: 3rem;
    opacity: 0.3;
}

.empty-state p {
    margin-top: var(--admin-spacing-lg);
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .modern-header {
        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
    }
    
    .modern-header h3 {
        font-size: var(--admin-font-size-2xl);
    }
    
    .stats-bar {
        gap: var(--admin-spacing-lg);
    }
    
    .stat-icon {
        font-size: var(--admin-font-size-2xl);
    }
    
    .stat-value {
        font-size: var(--admin-font-size-xl);
    }
    
    .action-toolbar {
        gap: var(--admin-spacing-xs);
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .modern-header {
        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    }
    
    .modern-header h3 {
        font-size: var(--admin-font-size-xl);
    }
    
    .modern-header .breadcrumb {
        font-size: var(--admin-font-size-xs);
    }
    
    .stats-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--admin-spacing-md);
    }
    
    .selected-info-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   Utility Classes
   ======================================== */

/* Spacing Utilities */
.admin-mb-sm { margin-bottom: var(--admin-spacing-sm); }
.admin-mb-md { margin-bottom: var(--admin-spacing-md); }
.admin-mb-lg { margin-bottom: var(--admin-spacing-lg); }

.admin-mt-sm { margin-top: var(--admin-spacing-sm); }
.admin-mt-md { margin-top: var(--admin-spacing-md); }
.admin-mt-lg { margin-top: var(--admin-spacing-lg); }

.admin-p-sm { padding: var(--admin-spacing-sm); }
.admin-p-md { padding: var(--admin-spacing-md); }
.admin-p-lg { padding: var(--admin-spacing-lg); }

/* Text Utilities */
.admin-text-primary { color: var(--admin-text-primary); }
.admin-text-secondary { color: var(--admin-text-secondary); }
.admin-text-muted { color: var(--admin-text-muted); }

/* Theme Color Utilities */
.admin-bg-primary { background-color: var(--admin-primary); }
.admin-bg-primary-light { background-color: var(--admin-primary-light); }
.admin-text-primary-color { color: var(--admin-primary); }
.admin-border-primary { border-color: var(--admin-primary); }

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .modern-header,
    .action-toolbar,
    .btn-modern {
        box-shadow: none;
    }
    
    .modern-header {
        background: white;
        color: black;
        border: 1px solid #ddd;
    }
}

/* ========================================
   Dark Mode Support (Future Enhancement)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here in future */
}

/* ========================================
   End of Admin Shared Styles
   ======================================== */