/**
 * Panel Component
 * ===============
 * Content containers using project naming convention.
 * 
 * Naming: panel, panel-header, panel-body, panel-footer
 * NO card, NO card-body, NO Bootstrap naming
 * 
 * All CSS custom properties include hardcoded fallbacks.
 * Dark theme supported via [data-theme="dark"] attribute.
 * 
 * Requirements: 5.1, 6.2, 6.3, 7.3
 */

/* ===========================================
   Base Panel
   =========================================== */

.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: var(--color-bg-elevated, #ffffff);
    background-clip: border-box;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-xl, 12px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all var(--transition-speed, 250ms) var(--transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Default hover effect — subtle lift on all panels */
.panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   Panel Header
   =========================================== */

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: var(--color-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.panel-header:first-child {
    border-top-left-radius: calc(var(--radius-xl, 12px) - 1px);
    border-top-right-radius: calc(var(--radius-xl, 12px) - 1px);
}

.panel-title {
    margin: 0;
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold, 600);
    line-height: var(--leading-tight, 1.25);
    color: var(--color-text, #1f2937);
}

.panel-subtitle {
    margin: var(--space-1, 0.25rem) 0 0 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-normal, 400);
    color: var(--color-text-muted, #9ca3af);
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

/* ===========================================
   Panel Body
   =========================================== */

.panel-body {
    flex: 1 1 auto;
    padding: var(--space-5, 1.25rem);
    color: var(--color-text, #1f2937);
}

.panel-body > *:last-child {
    margin-bottom: 0;
}

/* Panel body with no padding */
.panel-body-flush {
    padding: 0;
}

/* Panel body with extra padding */
.panel-body-spacious {
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
}

/* ===========================================
   Panel Footer
   =========================================== */

.panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: var(--color-bg-secondary, #f9fafb);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.panel-footer:last-child {
    border-bottom-left-radius: calc(var(--radius-xl, 12px) - 1px);
    border-bottom-right-radius: calc(var(--radius-xl, 12px) - 1px);
}

/* Footer alignment variants */
.panel-footer-start {
    justify-content: flex-start;
}

.panel-footer-center {
    justify-content: center;
}

.panel-footer-between {
    justify-content: space-between;
}

/* ===========================================
   Panel Variants
   =========================================== */

/* Primary variant */
.panel-primary {
    border-color: var(--color-primary, #6366f1);
}

.panel-primary .panel-header {
    background: var(--color-accent-muted, rgba(99, 102, 241, 0.15));
    border-bottom-color: var(--color-primary, #6366f1);
}

/* Success variant */
.panel-success {
    border-color: var(--color-success, #10b981);
}

.panel-success .panel-header {
    background: var(--color-success-bg, rgba(16, 185, 129, 0.12));
    border-bottom-color: var(--color-success, #10b981);
}

/* Warning variant */
.panel-warning {
    border-color: var(--color-warning, #f59e0b);
}

.panel-warning .panel-header {
    background: var(--color-warning-bg, rgba(245, 158, 11, 0.12));
    border-bottom-color: var(--color-warning, #f59e0b);
}

/* Danger variant */
.panel-danger {
    border-color: var(--color-danger, #ef4444);
}

.panel-danger .panel-header {
    background: var(--color-danger-bg, rgba(239, 68, 68, 0.12));
    border-bottom-color: var(--color-danger, #ef4444);
}

/* Info variant */
.panel-info {
    border-color: var(--color-info, #3b82f6);
}

.panel-info .panel-header {
    background: var(--color-info-bg, rgba(59, 130, 246, 0.12));
    border-bottom-color: var(--color-info, #3b82f6);
}

/* Borderless variant */
.panel-borderless {
    border: none;
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* Flat variant (no shadow) */
.panel-flat {
    box-shadow: none;
}

/* ===========================================
   Panel Sizes
   =========================================== */

/* Small panel */
.panel-small {
    font-size: var(--text-sm, 0.875rem);
}

.panel-small .panel-header,
.panel-small .panel-footer {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

.panel-small .panel-body {
    padding: var(--space-4, 1rem);
}

.panel-small .panel-title {
    font-size: var(--text-base, 1rem);
}

/* Large panel */
.panel-large {
    font-size: var(--text-lg, 1.125rem);
}

.panel-large .panel-header,
.panel-large .panel-footer {
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.panel-large .panel-body {
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
}

.panel-large .panel-title {
    font-size: var(--text-xl, 1.25rem);
}

/* ===========================================
   Interactive Panels
   =========================================== */

/* Hover effect */
.panel-hover {
    transition: transform var(--transition-fast, 150ms ease), 
                box-shadow var(--transition-fast, 150ms ease);
}

.panel-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* Clickable panel */
.panel-clickable {
    cursor: pointer;
    transition: transform var(--transition-fast, 150ms ease), 
                box-shadow var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease);
}

.panel-clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
    border-color: var(--color-primary, #6366f1);
}

.panel-clickable:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Selected state */
.panel-selected {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px var(--color-accent-muted, rgba(99, 102, 241, 0.15));
}

/* ===========================================
   Panel Layouts
   =========================================== */

/* Panel grid */
.panel-grid {
    display: grid;
    gap: var(--space-4, 1rem);
}

.panel-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.panel-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.panel-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
    .panel-grid-3,
    .panel-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .panel-grid-2,
    .panel-grid-3,
    .panel-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Panel stack (vertical list) */
.panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

/* ===========================================
   Panel Image
   =========================================== */

.panel-image {
    width: 100%;
    display: block;
}

.panel-image-top {
    border-top-left-radius: calc(var(--radius-xl, 12px) - 1px);
    border-top-right-radius: calc(var(--radius-xl, 12px) - 1px);
}

.panel-image-bottom {
    border-bottom-left-radius: calc(var(--radius-xl, 12px) - 1px);
    border-bottom-right-radius: calc(var(--radius-xl, 12px) - 1px);
}

/* Image overlay */
.panel-image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-5, 1.25rem);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    color: var(--color-text-inverse, #ffffff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: calc(var(--radius-xl, 12px) - 1px);
}

/* ===========================================
   Stats Panel
   =========================================== */

.panel-stats {
    text-align: center;
    padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem);
}

.panel-stats-value {
    font-size: var(--text-3xl, 1.875rem);
    font-weight: var(--weight-bold, 700);
    color: var(--color-text, #1f2937);
    margin-bottom: var(--space-2, 0.5rem);
    line-height: 1;
}

.panel-stats-label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-stats-change {
    margin-top: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
}

.panel-stats-change-positive {
    color: var(--color-success, #10b981);
}

.panel-stats-change-negative {
    color: var(--color-danger, #ef4444);
}

/* ===========================================
   Dark Theme Overrides
   =========================================== */

[data-theme="dark"] .panel {
    background: var(--color-bg-elevated, #1f2937);
    border-color: var(--color-border, #374151);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .panel:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .panel-header {
    background: var(--color-bg-secondary, #1f2937);
    border-bottom-color: var(--color-border, #374151);
}

[data-theme="dark"] .panel-title {
    color: var(--color-text, #f9fafb);
}

[data-theme="dark"] .panel-subtitle {
    color: var(--color-text-muted, #9ca3af);
}

[data-theme="dark"] .panel-body {
    color: var(--color-text, #f9fafb);
}

[data-theme="dark"] .panel-footer {
    background: var(--color-bg-secondary, #1f2937);
    border-top-color: var(--color-border, #374151);
}

/* Dark theme variant overrides */
[data-theme="dark"] .panel-primary .panel-header {
    background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .panel-success .panel-header {
    background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .panel-warning .panel-header {
    background: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .panel-danger .panel-header {
    background: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .panel-info .panel-header {
    background: rgba(59, 130, 246, 0.2);
}

/* Dark theme interactive states */
[data-theme="dark"] .panel-hover:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.35));
}

[data-theme="dark"] .panel-clickable:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.35));
}

[data-theme="dark"] .panel-selected {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Dark theme stats panel */
[data-theme="dark"] .panel-stats-value {
    color: var(--color-text, #f9fafb);
}