/**
 * Custom Styles für kult.kino analytics
 */

:root {
  --color-primary:        #B28D76;
  --color-primary-dark:   #5C4033;

  --color-secondary:      #B5B7A4;
  --color-accent:         #CFB4A7;
  --color-soft:           #D8C0AC;

  --color-bg-app:         #EDE7DB;
  --color-bg-card:        #FAECDC;
  --color-border:         #DED8CB;

  --text-primary:         #5C4033;
  --text-muted:           #6C6C6C;
  --text-invert:          #FFFFFF;
  
  /* Kompatibilitätsvariablen für bestehende Styles */
  --color-bg-1:           var(--color-bg-card);
  --color-bg-2:           var(--color-bg-app);
    
    /* RGB-Varianten für rgba() Transparenz */
    --color-primary-rgb:        178, 141, 118;
    --color-primary-dark-rgb:   92, 64, 51;
    --color-secondary-rgb:      181, 183, 164;
    --color-accent-rgb:         207, 180, 167;
    --color-soft-rgb:           216, 192, 172;
    --color-bg-app-rgb:         237, 231, 219;
    --color-bg-card-rgb:        250, 236, 220;
    --color-border-rgb:         222, 216, 203;
    --text-primary-rgb:         92, 64, 51;
    --text-muted-rgb:           108, 108, 108;
    --text-invert-rgb:          255, 255, 255;
}

/* Parameter Cards */
.param-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

/* Dashboard Cards */
.dashboard-card-body {
    height: 25vh;
}

.dashboard-card {
    position: relative;
}

/* Total Cards - Einheitliches Design mit subtilem Glanz und Verlauf */
.total-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Responsive: Mobile Anpassungen (wird in main-styles.css überschrieben, aber für Konsistenz hier ebenfalls) */
@media (max-width: 991.98px) {
    .total-cards {
        grid-template-columns: 1fr !important;
        min-width: 0;
    }
}

.total-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
    border-radius: 12px;
    padding: 25px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hintergrund wird in main-styles.css gesetzt */
/* .total-card.takes-card,
.total-card.umsatz-card, */
.total-card.cinema-card.admissions-card,
.total-card.cinema-card.revenue-card,
.total-card.cinema-card.movies-card,
.total-card.cinema-card.projections-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.total-card-label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-card-value {
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

.total-card-compare {
    margin-top: 18px;
    font-size: 16px;
    gap: 8px;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    opacity: 0.9;
    font-weight: 600; /* Etwas fetter für bessere Lesbarkeit */
}

/* Chart Containers */
.chart-container {
    width: 100%;
    height: 100%;
}

.chart-container-56vh {
    height: 56vh;
}

.chart-container-50vh {
    height: 50vh;
}

/* Section Headers */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Content Sections */
.content-section {
    display: none !important;
}

.content-section.active {
    display: block !important;
}

/* Responsive Font Sizes */
.dashboard-title {
    font-size: clamp(14px, 2vw, 16px);
}

.dashboard-value {
    font-size: clamp(18px, 3vw, 18px);
}

.dashboard-text {
    font-size: clamp(17px, 1.5vw, 17px);
}

/* Button Overrides für das neue Farbschema */
.btn-primary {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--text-invert) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-invert) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary {
    color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--text-invert) !important;
}