/* Design System Variables */
:root {
    --background: hsl(210, 20%, 98%);
    --foreground: hsl(220, 20%, 10%);
    --muted-foreground: hsl(220, 10%, 46%);
    --border: hsl(220, 13%, 91%);
    --ring: hsl(220, 70%, 50%);
    --radius: 0.75rem;
    /* Panel specific tokens */
    --panel-bg: hsl(0, 0%, 100%);
    --panel-header-bg: hsl(220, 14%, 97%);
    --panel-header-hover: hsl(220, 14%, 94%);
    --panel-border: hsl(220, 13%, 90%);
    --panel-shadow: hsl(220, 30%, 80%);
    --panel-icon: hsl(220, 10%, 50%);
    --panel-title: hsl(220, 20%, 20%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: hsl(220, 20%, 10%);
        --foreground: hsl(210, 20%, 98%);
        --muted-foreground: hsl(220, 10%, 60%);
        --border: hsl(220, 15%, 20%);
        --ring: hsl(220, 70%, 60%);
        /* Panel specific tokens - dark */
        --panel-bg: hsl(220, 18%, 16%);
        --panel-header-bg: hsl(220, 18%, 16%);
        --panel-header-hover: hsl(220, 18%, 20%);
        --panel-border: hsl(220, 15%, 22%);
        --panel-shadow: hsl(220, 30%, 5%);
        --panel-icon: hsl(220, 10%, 60%);
        --panel-title: hsl(210, 20%, 95%);
        --metric-card-bg: hsl(112, 0%, 100%);
        --metric-card-foreground: hsl(220, 70%, 50%);
        --metric-positive: hsl(120, 93%, 39%);
        --metric-negative: hsl(0, 97%, 50%);
    }
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /*background: var(--background);*/
    color: var(--foreground);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* Page container styles */
.page-container {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

.panels-wrapper {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Panel Styles */
.panel-container {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px -2px hsl(220 30% 80% / 0.15), 0 4px 16px -4px hsl(220 30% 80% / 0.1);
    transition: box-shadow 0.2s ease;
    margin-bottom:1.0em;
    margin-left:-1em;
    margin-right:1em;
/*    width:110%;*/
}

    .panel-container:hover {
        box-shadow: 0 4px 12px -2px hsl(220 30% 80% / 0.2), 0 8px 24px -4px hsl(220 30% 80% / 0.15);
    }

.panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--panel-header-bg);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .panel-header:hover {
        background: var(--panel-header-hover);
    }

    .panel-header:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--ring);
    }

.panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--panel-title);
    text-align: left;
}

.panel-icon {
    color: var(--panel-icon);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.panel-icon-open {
    transform: rotate(180deg);
}

.panel-content-wrapper {
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-content {
    padding: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.925rem;
    line-height: 1.6;
    border-top: 1px solid var(--panel-border);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .page-container {
        padding: 1rem;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .panel-header {
        padding: 0.875rem 1rem;
    }

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