/* ============================================================================
   JACKSON AREA COMMUNITY BAND - ADMIN WARM THEME
   ============================================================================

   Professional, functional admin panel styling that incorporates the warm
   color palette while prioritizing usability and data clarity.

   Design Philosophy:
   - Professional aesthetic without excessive decoration
   - Warm color accents in headers, buttons, and highlights
   - Clear data tables with excellent readability
   - Coordinated with public theme but visually distinct
   - Usability > artistic flourish

   This file should be loaded AFTER app-warm.css for the admin panel.
   ============================================================================ */

/* ============================================================================
   1. ADMIN-SPECIFIC VARIABLES
   ============================================================================ */
:root {
    /* Admin color adjustments - more muted for professional look */
    --admin-warm-bg: #FDFCFA;
    --admin-warm-sidebar: #F8F5F0;
    --admin-warm-accent: var(--warm-burgundy-primary);
    --admin-warm-border: #E0D5C8;

    /* JACB theme color aliases for dashboard inline styles compatibility
       These variables are referenced in dashboard.blade.php inline styles.
       They map to the warm theme colors for visual consistency. */
    --jacb-primary: #6B4435;      /* Warm burgundy-brown for primary actions */
    --jacb-secondary: #8B7355;    /* Warm brown for secondary elements */
    --jacb-amber: #D87A2E;        /* Warm amber/orange for warnings/alerts */
    --jacb-orange: #D87A2E;       /* Alias for amber */
}

/* ============================================================================
   2. ADMIN DASHBOARD CONTAINER
   ============================================================================ */

.admin-dashboard {
    background-color: var(--admin-warm-bg);
    color: var(--warm-text-primary);
    min-height: 100vh;
}

.admin-dashboard .container-fluid,
.admin-dashboard .row,
.admin-dashboard .col-md-9 {
    color: var(--warm-text-primary);
}

/* ============================================================================
   3. ADMIN NAVIGATION & SIDEBAR
   ============================================================================ */

.admin-sidebar {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--admin-warm-sidebar) 0%, #F0EBE3 100%);
    border-right: 2px solid var(--admin-warm-border);
    padding: 1.5rem 1rem;
    box-shadow: 2px 0 12px rgba(45, 27, 20, 0.06);
}

.admin-nav-link {
    color: var(--warm-text-primary);
    padding: 0.875rem 1.25rem;
    display: block;
    border-radius: var(--warm-radius-md);
    margin-bottom: 0.5rem;
    transition: all var(--warm-transition-base);
    font-weight: 500;
    border-left: 3px solid transparent;
}

.admin-nav-link:hover,
.admin-nav-link.active {
    background-color: white;
    color: var(--warm-burgundy-primary);
    text-decoration: none;
    border-left-color: var(--warm-burgundy-primary);
    box-shadow: var(--warm-shadow-sm);
    transform: translateX(3px);
}

.admin-nav-link i {
    width: 24px;
    margin-right: 0.75rem;
    color: var(--warm-brown);
}

.admin-nav-link:hover i,
.admin-nav-link.active i {
    color: var(--warm-burgundy-primary);
}

/* ============================================================================
   4. ADMIN DASHBOARD CARDS
   ============================================================================ */

.admin-dashboard .card {
    background-color: white;
    border: 1px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-lg);
    color: var(--warm-text-primary);
    box-shadow: var(--warm-shadow-sm);
    transition: all var(--warm-transition-base);
}

.admin-dashboard .card:hover {
    box-shadow: var(--warm-shadow-md);
    border-color: var(--warm-gold-primary);
}

.admin-dashboard .card-header {
    background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
    border-bottom: 2px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-lg) var(--warm-radius-lg) 0 0 !important;
    color: var(--warm-text-primary);
    padding: 1.25rem 1.5rem;
    font-family: var(--warm-font-serif);
    font-weight: 600;
}

.admin-dashboard .card-body {
    color: var(--warm-text-primary);
    padding: 1.5rem;
}

.admin-dashboard .card-title {
    color: var(--warm-burgundy-primary) !important;
    font-family: var(--warm-font-serif);
    font-weight: 600;
}

.admin-dashboard .card-text {
    color: var(--warm-text-primary);
}

/* Statistics Cards with warm accents */
.admin-dashboard .card.border-left-primary {
    border-left: 4px solid var(--warm-burgundy-primary) !important;
}

.admin-dashboard .card.border-left-success {
    border-left: 4px solid var(--warm-success) !important;
}

.admin-dashboard .card.border-left-info {
    border-left: 4px solid var(--warm-info) !important;
}

.admin-dashboard .card.border-left-warning {
    border-left: 4px solid var(--warm-gold-primary) !important;
}

/* ============================================================================
   5. ADMIN TYPOGRAPHY & TEXT UTILITIES
   ============================================================================ */

.admin-dashboard h1,
.admin-dashboard h2,
.admin-dashboard h3,
.admin-dashboard h4,
.admin-dashboard h5,
.admin-dashboard h6 {
    color: var(--warm-text-primary);
    font-family: var(--warm-font-serif);
}

.admin-dashboard p,
.admin-dashboard span,
.admin-dashboard div:not(.card):not(.btn) {
    color: var(--warm-text-primary);
}

.admin-dashboard .text-muted {
    color: var(--warm-text-muted) !important;
}

.admin-dashboard .small {
    color: var(--warm-text-secondary);
}

/* Override Bootstrap utility classes for admin */
.text-gray-800 {
    color: var(--warm-text-primary) !important;
}

.text-gray-300 {
    color: var(--warm-text-muted) !important;
}

.text-xs {
    color: var(--warm-text-primary) !important;
    font-size: var(--warm-font-size-xs);
}

.font-weight-bold {
    color: var(--warm-text-primary) !important;
    font-weight: 700;
}

.h5.font-weight-bold,
.m-0.font-weight-bold {
    color: var(--warm-text-primary) !important;
}

/* Card header titles */
.card-header h6,
.card-header .font-weight-bold {
    color: var(--warm-burgundy-primary) !important;
}

/* Statistics numbers */
.card-body .h5 {
    color: var(--warm-burgundy-primary) !important;
    font-size: 2rem;
    font-weight: 700;
}

/* ============================================================================
   6. ADMIN BUTTONS
   ============================================================================ */

.admin-dashboard .btn-primary {
    background: var(--warm-gradient-primary);
    border: none;
    color: white;
    font-weight: 600;
}

.admin-dashboard .btn-primary:hover {
    background: linear-gradient(135deg, #6B1A28 0%, #8B2635 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(139, 38, 53, 0.3);
}

.admin-dashboard .btn-outline-primary {
    border: 2px solid var(--warm-burgundy-primary);
    color: var(--warm-burgundy-primary);
    background: transparent;
}

.admin-dashboard .btn-outline-primary:hover {
    background-color: var(--warm-burgundy-primary);
    color: white;
}

.admin-dashboard .btn-outline-secondary {
    border: 2px solid var(--warm-brown);
    color: var(--warm-brown);
    background: transparent;
}

.admin-dashboard .btn-outline-secondary:hover {
    background-color: var(--warm-brown);
    color: white;
}

.admin-dashboard .btn-outline-info {
    border: 2px solid var(--warm-info);
    color: var(--warm-info);
    background: transparent;
}

.admin-dashboard .btn-outline-info:hover {
    background-color: var(--warm-info);
    color: white;
}

/* Quick action buttons */
.admin-dashboard .btn-outline-primary i,
.admin-dashboard .btn-outline-secondary i,
.admin-dashboard .btn-outline-info i {
    color: inherit;
}

/* ============================================================================
   DASHBOARD CARD BUTTONS - Visibility & Contrast Fix
   ============================================================================

   ISSUE: Buttons in "Upcoming Events" and "Recent Articles" cards were
   invisible due to insufficient contrast. The inline styles in dashboard.blade.php
   use var(--jacb-primary) which was previously undefined, resulting in buttons
   with white text (.text-white class) on a white/transparent background.

   FIX:
   1. Added --jacb-* CSS variables above (lines 28-34)
   2. This section ensures buttons in dashboard cards always have proper contrast

   ACCESSIBILITY:
   - Burgundy background (#6B4435) with white text achieves 8.2:1 contrast (AAA)
   - Meets WCAG AAA standards for all text sizes
   - Hover state darkens background while maintaining AAA contrast (9.5:1)

   APPLIES TO:
   - "Add Event" button in empty Upcoming Events card state
   - "Write Article" button in empty Recent Articles card state
   - All buttons using .btn with inline style background-color: var(--jacb-primary)
   ============================================================================ */

/* Target buttons in card bodies with .text-white class and inline style
   These are dashboard card action buttons (Add Event, Write Article, etc.)
   Selector is specific enough to only affect admin dashboard, not public pages */
.card-body .btn.text-white[style*="background-color: var(--jacb-primary)"],
.card-body .btn.text-white[style*="background-color:var(--jacb-primary)"] {
    /* Ensure background color is applied from CSS variable */
    background-color: var(--jacb-primary) !important;
    border-color: var(--jacb-primary) !important;
    color: white !important;
    font-weight: 600;
    transition: all var(--warm-transition-base);
    /* Ensure button is visible with shadow */
    box-shadow: 0 2px 8px rgba(107, 68, 53, 0.25);
}

/* Hover state for dashboard card buttons */
.card-body .btn.text-white[style*="background-color: var(--jacb-primary)"]:hover,
.card-body .btn.text-white[style*="background-color:var(--jacb-primary)"]:hover {
    background-color: #5A3828 !important;  /* Darker burgundy for hover */
    border-color: #5A3828 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 68, 53, 0.35);
}

/* Active/focus states for better interactivity */
.card-body .btn.text-white[style*="background-color: var(--jacb-primary)"]:active,
.card-body .btn.text-white[style*="background-color:var(--jacb-primary)"]:active,
.card-body .btn.text-white[style*="background-color: var(--jacb-primary)"]:focus,
.card-body .btn.text-white[style*="background-color:var(--jacb-primary)"]:focus {
    background-color: var(--jacb-primary) !important;
    border-color: var(--jacb-primary) !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 53, 0.25);
}

/* Fallback: Target ALL .btn.text-white in .card-body to ensure visibility
   This catches buttons even if inline styles are formatted differently */
.card .card-body .btn.text-white {
    /* Only apply if background isn't already set by more specific rule above */
    background-color: var(--jacb-primary);
    border-color: var(--jacb-primary);
    color: white;
    font-weight: 600;
}

.card .card-body .btn.text-white:hover {
    background-color: #5A3828;
    border-color: #5A3828;
    color: white;
}

/* Card header buttons (like "Manage" buttons in Upcoming Events and Recent Articles)
   These also use inline styles with var(--jacb-primary) */
.card-header .btn.text-white[style*="background-color: var(--jacb-primary)"],
.card-header .btn.text-white[style*="background-color:var(--jacb-primary)"],
.card-header .btn.text-white {
    background-color: var(--jacb-primary) !important;
    border-color: var(--jacb-primary) !important;
    color: white !important;
    font-weight: 600;
    transition: all var(--warm-transition-base);
}

.card-header .btn.text-white:hover {
    background-color: #5A3828 !important;
    border-color: #5A3828 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(107, 68, 53, 0.3);
}

/* ============================================================================
   7. ADMIN TABLES - Professional Data Display
   ============================================================================ */

.admin-dashboard .table {
    background-color: white;
    color: var(--warm-text-primary);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--warm-radius-md);
    overflow: hidden;
}

.admin-dashboard .table th {
    background: linear-gradient(135deg, var(--warm-cream-dark) 0%, var(--warm-cream) 100%);
    color: var(--warm-text-primary);
    font-weight: 700;
    font-family: var(--warm-font-sans);
    font-size: var(--warm-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
    border-bottom: 2px solid var(--warm-burgundy-primary);
}

.admin-dashboard .table td {
    border-bottom: 1px solid var(--admin-warm-border);
    color: var(--warm-text-primary);
    padding: 1rem;
    vertical-align: middle;
}

.admin-dashboard .table tbody tr {
    transition: background-color var(--warm-transition-fast);
}

.admin-dashboard .table tbody tr:hover {
    background-color: var(--warm-cream);
}

.admin-dashboard .table-hover tbody tr:hover {
    background-color: var(--warm-cream);
}

/* Striped tables */
.admin-dashboard .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(245, 241, 232, 0.3);
}

/* Table responsive wrapper */
.table-responsive {
    border-radius: var(--warm-radius-md);
    box-shadow: var(--warm-shadow-sm);
}

/* ============================================================================
   8. ADMIN FORMS
   ============================================================================ */

.admin-dashboard .form-control {
    background-color: white;
    border: 2px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-md);
    color: var(--warm-text-primary);
    padding: 0.75rem 1rem;
    font-family: var(--warm-font-sans);
}

.admin-dashboard .form-control:focus {
    background-color: white;
    border-color: var(--warm-burgundy-primary);
    color: var(--warm-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(139, 38, 53, 0.15);
}

.admin-dashboard .form-control::placeholder {
    color: var(--warm-text-muted);
}

.admin-dashboard .form-label {
    color: var(--warm-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Form select dropdowns */
.admin-dashboard .form-select {
    background-color: white;
    border: 2px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-md);
    color: var(--warm-text-primary);
}

.admin-dashboard .form-select:focus {
    border-color: var(--warm-burgundy-primary);
    box-shadow: 0 0 0 0.25rem rgba(139, 38, 53, 0.15);
}

/* Form check (checkboxes and radios) */
.admin-dashboard .form-check-input:checked {
    background-color: var(--warm-burgundy-primary);
    border-color: var(--warm-burgundy-primary);
}

.admin-dashboard .form-check-input:focus {
    border-color: var(--warm-burgundy-primary);
    box-shadow: 0 0 0 0.25rem rgba(139, 38, 53, 0.15);
}

/* ============================================================================
   9. ADMIN ALERTS
   ============================================================================ */

.admin-dashboard .alert {
    border: none;
    border-left: 4px solid;
    border-radius: var(--warm-radius-md);
    box-shadow: var(--warm-shadow-sm);
}

.admin-dashboard .alert-success {
    background-color: #F0F5EB;
    border-left-color: var(--warm-success);
    color: #3D5A25;
}

.admin-dashboard .alert-danger {
    background-color: #FBEEED;
    border-left-color: var(--warm-danger);
    color: #8B2A27;
}

.admin-dashboard .alert-info {
    background-color: #EEF1F5;
    border-left-color: var(--warm-info);
    color: #4A5668;
}

.admin-dashboard .alert-warning {
    background-color: #FDF5EB;
    border-left-color: var(--warm-warning);
    color: #A0591F;
}

/* ============================================================================
   10. ADMIN BADGES & LABELS
   ============================================================================ */

.admin-dashboard .badge {
    font-weight: 600;
    padding: 0.4em 0.75em;
    border-radius: var(--warm-radius-sm);
    font-size: var(--warm-font-size-xs);
}

.admin-dashboard .badge-primary {
    background-color: var(--warm-burgundy-primary);
    color: white;
}

.admin-dashboard .badge-success {
    background-color: var(--warm-success);
    color: white;
}

.admin-dashboard .badge-warning {
    background-color: var(--warm-gold-primary);
    color: var(--warm-espresso);
}

.admin-dashboard .badge-info {
    background-color: var(--warm-info);
    color: white;
}

/* ============================================================================
   11. ADMIN ICONS
   ============================================================================ */

.admin-dashboard .fas,
.admin-dashboard .fab,
.admin-dashboard .far {
    color: var(--warm-brown);
}

/* Icon colors in specific contexts */
.admin-dashboard .card-header .fas,
.admin-dashboard .card-header .fab,
.admin-dashboard .card-header .far {
    color: var(--warm-burgundy-primary);
}

.admin-dashboard .btn .fas,
.admin-dashboard .btn .fab,
.admin-dashboard .btn .far {
    color: inherit;
}

/* Large decorative icons */
.admin-dashboard .fa-2x {
    font-size: 2em;
}

.admin-dashboard .fa-3x {
    font-size: 3em;
}

.admin-dashboard .fa-4x {
    font-size: 4em;
}

/* ============================================================================
   12. ADMIN DROPDOWNS
   ============================================================================ */

.admin-dashboard .dropdown-menu {
    background-color: white;
    border: 1px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-md);
    box-shadow: var(--warm-shadow-md);
}

.admin-dashboard .dropdown-item {
    color: var(--warm-text-primary);
    transition: background-color var(--warm-transition-fast);
}

.admin-dashboard .dropdown-item:hover {
    background-color: var(--warm-cream);
    color: var(--warm-burgundy-primary);
}

.admin-dashboard .dropdown-item:active {
    background-color: var(--warm-burgundy-primary);
    color: white;
}

/* ============================================================================
   13. ADMIN BREADCRUMBS
   ============================================================================ */

.admin-dashboard .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.admin-dashboard .breadcrumb-item {
    color: var(--warm-text-secondary);
    font-size: var(--warm-font-size-sm);
}

.admin-dashboard .breadcrumb-item.active {
    color: var(--warm-burgundy-primary);
    font-weight: 600;
}

.admin-dashboard .breadcrumb-item + .breadcrumb-item::before {
    color: var(--warm-text-muted);
}

/* ============================================================================
   14. ADMIN PAGINATION
   ============================================================================ */

.admin-dashboard .pagination {
    margin-top: 1.5rem;
}

.admin-dashboard .page-link {
    color: var(--warm-burgundy-primary);
    background-color: white;
    border: 1px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-sm);
    margin: 0 0.25rem;
}

.admin-dashboard .page-link:hover {
    background-color: var(--warm-cream);
    border-color: var(--warm-burgundy-primary);
    color: var(--warm-burgundy-dark);
}

.admin-dashboard .page-item.active .page-link {
    background-color: var(--warm-burgundy-primary);
    border-color: var(--warm-burgundy-primary);
    color: white;
}

.admin-dashboard .page-item.disabled .page-link {
    color: var(--warm-text-muted);
    background-color: var(--warm-cream);
}

/* ============================================================================
   15. ADMIN DASHBOARD WIDGETS
   ============================================================================ */

/* Statistics widget */
.stat-card {
    background: white;
    border: 1px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all var(--warm-transition-base);
}

.stat-card:hover {
    box-shadow: var(--warm-shadow-md);
    transform: translateY(-2px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 38, 53, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: rotate(45deg);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--warm-burgundy-primary);
    position: relative;
    z-index: 1;
    font-family: var(--warm-font-serif);
}

/* Recent activity list */
.admin-dashboard .border-bottom {
    border-bottom: 1px solid var(--admin-warm-border) !important;
}

/* Date badge in events */
.admin-dashboard .text-center.text-white {
    background-color: var(--warm-burgundy-primary);
    border-radius: var(--warm-radius-sm);
}

/* ============================================================================
   16. ADMIN MODAL DIALOGS
   ============================================================================ */

.admin-dashboard .modal-content {
    border: none;
    border-radius: var(--warm-radius-lg);
    box-shadow: var(--warm-shadow-xl);
}

.admin-dashboard .modal-header {
    background: var(--warm-gradient-subtle);
    border-bottom: 2px solid var(--admin-warm-border);
    border-radius: var(--warm-radius-lg) var(--warm-radius-lg) 0 0;
    padding: 1.5rem;
}

.admin-dashboard .modal-title {
    color: var(--warm-burgundy-primary);
    font-family: var(--warm-font-serif);
    font-weight: 600;
}

.admin-dashboard .modal-body {
    padding: 1.5rem;
}

.admin-dashboard .modal-footer {
    background-color: var(--warm-cream);
    border-top: 1px solid var(--admin-warm-border);
    border-radius: 0 0 var(--warm-radius-lg) var(--warm-radius-lg);
    padding: 1rem 1.5rem;
}

/* ============================================================================
   17. ADMIN LOADING & PROGRESS
   ============================================================================ */

.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 38, 53, 0.2), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Progress bar */
.admin-dashboard .progress {
    background-color: var(--warm-cream-dark);
    border-radius: var(--warm-radius-sm);
    height: 1.25rem;
}

.admin-dashboard .progress-bar {
    background: var(--warm-gradient-primary);
    border-radius: var(--warm-radius-sm);
}

/* ============================================================================
   18. ADMIN RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 992px) {
    .admin-sidebar {
        border-right: none;
        border-bottom: 2px solid var(--admin-warm-border);
        min-height: auto;
    }

    .admin-nav-link {
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .admin-nav-link:hover,
    .admin-nav-link.active {
        border-left: none;
        border-bottom-color: var(--warm-burgundy-primary);
        transform: translateY(-2px);
    }
}

@media (max-width: 768px) {
    .admin-dashboard .card-body {
        padding: 1rem;
    }

    .admin-dashboard .table th,
    .admin-dashboard .table td {
        padding: 0.75rem 0.5rem;
        font-size: var(--warm-font-size-sm);
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* ============================================================================
   19. ADMIN PRINT STYLES
   ============================================================================ */

@media print {
    .admin-sidebar,
    .admin-nav-link,
    .btn,
    .navbar {
        display: none !important;
    }

    .admin-dashboard {
        background: white;
    }

    .admin-dashboard .card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .admin-dashboard .table {
        border: 1px solid #ddd;
    }
}