/**
 * Eco Dashboard CI — Widget Styles
 * Flexbox only — no CSS Grid — maximum browser compatibility.
 */

/* ── Reset scoped to widget ────────────────────────────────────── */
.edci-dashboard,
.edci-dashboard *,
.edci-dashboard *::before,
.edci-dashboard *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

.edci-dashboard {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        line-height: 1.4;
        color: #1a1a2e;
        -webkit-font-smoothing: antialiased;
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS CONTAINER — FLEXBOX ONLY (no grid-template-columns)
   ══════════════════════════════════════════════════════════════════ */
.edci-cards {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 12px;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
}

/* Each card — desktop: fills 1/5 of the row */
.edci-card {
        position: relative;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 calc(20% - 10px);
        -ms-flex: 1 1 calc(20% - 10px);
        flex: 1 1 calc(20% - 10px);
        max-width: calc(20% - 10px);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── Responsive: 3 cards per row ──────────────────────────────── */
@media (max-width: 1100px) {
        .edci-card {
                -webkit-flex: 1 1 calc(33.333% - 8px);
                -ms-flex: 1 1 calc(33.333% - 8px);
                flex: 1 1 calc(33.333% - 8px);
                max-width: calc(33.333% - 8px);
        }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE (≤ 720px) — HORIZONTAL SCROLL CAROUSEL
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
        /* Dashboard: must not clip */
        .edci-dashboard {
                max-width: 100% !important;
                width: 100% !important;
                overflow: visible !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
        }

        /* Cards = horizontal scroll track */
        .edci-cards {
                -webkit-flex-wrap: nowrap !important;
                -ms-flex-wrap: nowrap !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                scroll-snap-type: x mandatory !important;
                scroll-behavior: smooth !important;
                padding: 8px 16px 16px 16px !important;
                gap: 12px !important;
                margin: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                scrollbar-width: thin !important;
                scrollbar-color: #d1d5db transparent !important;
        }

        /* Each card: fixed 275px, no shrink */
        .edci-card {
                -webkit-flex: 0 0 275px !important;
                -ms-flex: 0 0 275px !important;
                flex: 0 0 275px !important;
                min-width: 275px !important;
                max-width: 275px !important;
                width: 275px !important;
                scroll-snap-align: start !important;
        }

        /* Scrollbar */
        .edci-cards::-webkit-scrollbar {
                height: 4px !important;
        }
        .edci-cards::-webkit-scrollbar-track {
                background: transparent !important;
        }
        .edci-cards::-webkit-scrollbar-thumb {
                background: #d1d5db !important;
                border-radius: 10px !important;
        }
}

/* ── Card hover ────────────────────────────────────────────────── */
.edci-card:hover {
        box-shadow: 0 12px 28px -6px rgba(0,0,0,0.10);
        transform: translateY(-2px);
}

/* ── Accent bar ────────────────────────────────────────────────── */
.edci-card-accent {
        height: 3px;
        width: 100%;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* ── Card body ─────────────────────────────────────────────────── */
.edci-card-body {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 14px 14px 10px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        gap: 8px;
}

/* ── Header ────────────────────────────────────────────────────── */
.edci-card-header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 2px;
}

.edci-card-name {
        font-size: 13px;
        font-weight: 800;
        color: #1a1a2e;
        line-height: 1.25;
        letter-spacing: -0.01em;
}

.edci-card-logo {
        height: 36px;
        width: auto;
        /*max-width: 100%;*/
        border-radius: 6px;
}

.edci-card-subtitle {
        font-size: 11px;
        color: #9ca3af;
        font-weight: 500;
        line-height: 1.3;
}

/* ── Date separator ────────────────────────────────────────────── */
.edci-card-date {
        font-size: 10px;
        font-weight: 700;
        color: #d1d5db;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding-top: 4px;
        border-top: 1px dashed #f3f4f6;
}

/* ── Data items ────────────────────────────────────────────────── */
.edci-card-items {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 5px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
}

.edci-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 6px;
        background: #f9fafb;
        border-radius: 6px;
        padding: 7px 9px;
}

.edci-card-items-3 .edci-item {
        padding: 5px 8px;
}

.edci-item-label {
        font-size: 10px;
        font-weight: 600;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.edci-card-items-3 .edci-item-label {
        font-size: 11px;
}

.edci-item-value {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4px;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
}

.edci-item-number {
        font-size: 13px;
        font-weight: 700;
        color: #1a1a2e;
        font-variant-numeric: tabular-nums;
}

.edci-card-items-3 .edci-item-number {
        font-size: 12px;
}

.edci-item-unit {
        font-size: 11px;
        color: #9ca3af;
        font-weight: 500;
}

.edci-card-items-3 .edci-item-unit {
        font-size: 10px;
}

.edci-item-change {
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
}

.edci-card-items-3 .edci-item-change {
        display: none;
}

/* ── Trend arrows ──────────────────────────────────────────────── */
.edci-trend-up   { color: #10b981; }
.edci-trend-down { color: #ef4444; }
.edci-trend-stable { color: #9ca3af; }

.edci-change-up    { color: #10b981; }
.edci-change-down  { color: #ef4444; }
.edci-change-stable { color: #9ca3af; }

/* ── Source ─────────────────────────────────────────────────────── */
.edci-card-source {
        font-size: 9px;
        color: #d1d5db;
        text-align: right;
        margin-top: auto;
        font-weight: 500;
}

/* ── Status bar ────────────────────────────────────────────────── */
.edci-status {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 8px 2px 2px;
        gap: 8px;
}

.edci-status-left {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 5px;
}

.edci-status-text {
        font-size: 13px;
        color: #9ca3af;
}

.edci-status-text span {
        font-weight: 600;
        color: #6b7280;
}

.edci-status-right {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8px;
}

.edci-auto-label {
        font-size: 11px;
        color: #d1d5db;
        font-weight: 500;
}

.edci-refresh-btn {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid #e5e7eb;
        background: #fff;
        cursor: pointer;
        color: #9ca3af;
        transition: all 0.15s ease;
}

.edci-refresh-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #6b7280;
}

.edci-refresh-btn.spinning .edci-icon-refresh {
        animation: edci-spin 0.8s linear infinite;
        -webkit-animation: edci-spin 0.8s linear infinite;
}

.edci-icon-clock,
.edci-icon-refresh {
        display: block;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes edci-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
}
@-webkit-keyframes edci-spin {
        from { -webkit-transform: rotate(0deg); }
        to   { -webkit-transform: rotate(360deg); }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
        .edci-card:hover {
                box-shadow: none;
                transform: none;
        }
        .edci-status {
                display: none;
        }
}