/* ================= HEADER ================= */
.header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; margin-bottom: 20px; border-bottom: 1px solid #2a2a2a; }
.header-title { display: flex; align-items: center; gap: 8px; }
.header-title .v4 { color: #ff0000; font-weight: 700; font-size: 22px; }
.header-title .company { color: #666; font-weight: 400; font-size: 22px; }
.header-title .separator { color: #ff0000; margin: 0 10px; }
.header-title .monitor { color: #fff; font-weight: 600; font-size: 22px; letter-spacing: 1px; }
.header-date { color: #888; font-size: 14px; }

/* ================= FILTERS ================= */
.filters-container { display: flex; gap: 20px; margin-bottom: 25px; align-items: flex-end; background: #141414; padding: 15px 20px; border-radius: 6px; border: 1px solid #2a2a2a; position: relative; z-index: 50; }
.filter-wrapper { display: flex; flex-direction: column; gap: 6px; position: relative; }
.filter-label { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.filter-select { background: #0d0d0d; border: 1px solid #333; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; min-width: 200px; height: 38px; }
.filter-select:focus { outline: none; border-color: #ff0000; }

/* ================= DATE PICKER ================= */
.date-display { background: #0d0d0d; border: 1px solid #333; border-radius: 4px; padding: 8px 12px; color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 260px; height: 38px; user-select: none; transition: border-color 0.2s; }
.date-display:hover, .date-display.active { border-color: #ff0000; }
.calendar-icon { color: #888; }
.arrow-icon { margin-left: auto; font-size: 10px; color: #666; }

.date-popover { display: none; position: absolute; top: 100%; left: 0; margin-top: 5px; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.95); z-index: 1000; flex-direction: row; width: auto; }
.date-presets { display: flex; flex-direction: column; width: 140px; min-width: 140px; border-right: 1px solid #2a2a2a; background: #141414; padding: 10px 0; }
.preset-btn { background: transparent; border: none; color: #ccc; text-align: left; padding: 10px 15px; font-size: 13px; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s; font-family: inherit; }
.preset-btn:hover { background: #222; color: #fff; }
.preset-btn.active { background: rgba(255, 0, 0, 0.1); color: #ff0000; border-left-color: #ff0000; font-weight: 600; }
.date-calendar-container { padding: 15px; background: #1a1a1a; display: flex; flex-direction: column; min-width: 320px; }
.popover-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #2a2a2a; }
#selectionInfo { font-size: 12px; color: #888; }
.filter-btn.apply-btn { background: #ff0000; color: #fff; border: none; border-radius: 4px; padding: 8px 20px; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; }
.filter-btn.apply-btn:hover { background: #cc0000; }

/* ================= FLATPICKR OVERRIDES ================= */
.flatpickr-calendar { background: transparent !important; box-shadow: none !important; border: none !important; width: 100% !important; padding: 0 !important; }
.flatpickr-innerContainer { display: block !important; width: 100% !important; }
.flatpickr-rContainer { display: inline-block; padding: 0; width: 100%; }
.flatpickr-months { background: transparent !important; padding-bottom: 10px; align-items: center; display: flex; }
.flatpickr-month { background: transparent !important; color: #fff !important; fill: #fff !important; height: 40px; overflow: hidden; flex: 1; }
.flatpickr-current-month { padding-top: 0 !important; font-size: 110% !important; left: 0 !important; width: 100% !important; }
.flatpickr-current-month span.cur-month { font-weight: 700; color: #fff !important; margin-left: 0 !important; cursor: default !important; }
.flatpickr-current-month span.cur-month:hover { background: transparent !important; }
.flatpickr-current-month input.cur-year { font-weight: 700; color: #fff !important; }
.flatpickr-weekdays { background: transparent !important; height: 28px !important; display: flex !important; width: 100% !important; align-items: center !important; }
span.flatpickr-weekday { background: transparent !important; color: #888 !important; font-weight: 600 !important; font-size: 12px !important; flex: 1 !important; display: flex; justify-content: center; align-items: center; }
.flatpickr-days { width: 100% !important; }
.dayContainer { padding: 0 !important; outline: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; }

/* CÉLULA DO DIA (CORRIGIDA) */
.flatpickr-day {
    color: #ccc !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    flex-basis: 14.2857% !important; /* GRID PERFEITO */
    max-width: 14.2857% !important;
    width: 14.2857% !important;
    height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: #2a2a2a !important; border-color: #2a2a2a !important; color: #fff !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #ff0000 !important; border-color: #ff0000 !important; color: #fff !important; font-weight: 700; z-index: 2; }
.flatpickr-day.inRange { background: rgba(255, 0, 0, 0.15) !important; border-color: transparent !important; color: #fff !important; box-shadow: none !important; border-radius: 0 !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #333 !important; cursor: default !important; visibility: visible !important; display: flex !important; }
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: transparent !important; color: #333 !important; border-color: transparent !important; }
.flatpickr-prev-month, .flatpickr-next-month { fill: #fff !important; color: #fff !important; padding: 10px !important; z-index: 3 !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { width: 14px !important; height: 14px !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #ff0000 !important; }

/* ================= COMPONENTES GERAIS ================= */
/* AUMENTO DA FONTE TÍTULOS (PDF PG 1) */
.section-title { font-size: 14px; color: #ccc; text-transform: uppercase; letter-spacing: 2px; margin: 30px 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.section-title::before { content: ''; width: 4px; height: 20px; background: #ff0000; border-radius: 2px; }

.card { background: #141414; border: 1px solid #2a2a2a; border-radius: 6px; padding: 20px; }
/* AUMENTO DA FONTE CARD TITLE (PDF PG 1) */
.card-title { font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; font-weight: 700; }

.meta-card { background: #141414; border: 1px solid #2a2a2a; border-radius: 6px; padding: 20px; position: relative; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; justify-content: center; }
.meta-card.highlight { border-color: #ff0000; border-width: 2px; }
/* AUMENTO DA FONTE LABELS (PDF PG 1) */
.meta-label { font-size: 12px; color: #888; text-transform: uppercase; position: absolute; top: 18px; left: 20px; font-weight: 600; }
/* AUMENTO SIGNIFICATIVO KPI (PDF PG 1) */
.meta-value { font-size: 48px; font-weight: 800; margin-top: 15px; line-height: 1.1; }
.meta-value.red { color: #ff0000; }
.meta-value.green { color: #22c55e; }
.meta-value.yellow { color: #fbbf24; }
.meta-value.white { color: #fff; }
.meta-sub { font-size: 12px; color: #888; margin-top: 8px; }

.meta-progress-bar { position: absolute; bottom: 0; left: 0; height: 4px; }
.meta-progress-bar.green { background: #22c55e; }
.meta-progress-bar.yellow { background: #fbbf24; }
.meta-progress-bar.red { background: #ef4444; }

.pace-badge { display: inline-flex; gap: 5px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; margin-top: 8px; width: fit-content; }
.pace-badge.ahead { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.pace-badge.behind { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

.status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.status-dot.yellow { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }
.status-dot.red { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }

.badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge.green { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.badge.yellow { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.badge.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.burnup-container { height: 220px; width: 100%; } 
.table-scroll { overflow-x: auto; }
.filter-select-small { background: #0d0d0d; border: 1px solid #2a2a2a; color: #ccc; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; margin-left: 5px; }
.filter-select-small:focus { border-color: #ff0000; }
.control-label { font-size: 11px; color: #888; font-weight: 500; }

/* ================= TOGGLE BUTTON (KOMMO STYLE) ================= */
.toggle-group {
    display: flex;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    height: 38px;
}
.toggle-btn {
    background: transparent;
    color: #888;
    border: none;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}
.toggle-btn:hover {
    color: #ccc;
}
.toggle-btn.active {
    background: #2a2a2a;
    color: #fff;
}

/* ================= DRILLDOWN ================= */
.expand-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 10px;
    color: #888;
    margin-right: 6px;
    width: 12px;
    text-align: center;
}
.drilldown-parent:hover .expand-icon {
    color: #fff;
}