/* ==========================================================================
   Gera Pub - Componentes Compartilhados (gp-components.css)
   Usado em: Dashboard, Publicações, Meta Ads Manager
   ========================================================================== */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    /* Gradients */
    --gp-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gp-gradient-meta: linear-gradient(135deg, #0668E1 0%, #1877F2 50%, #00C6FF 100%);
    --gp-gradient-pub: linear-gradient(135deg, #7367f0 0%, #9e95f5 100%);
    --gp-gradient-success: linear-gradient(135deg, #28c76f 0%, #48da89 100%);
    --gp-gradient-warning: linear-gradient(135deg, #ff9f43 0%, #ffb976 100%);
    --gp-gradient-danger: linear-gradient(135deg, #ea5455 0%, #f08182 100%);
    --gp-gradient-info: linear-gradient(135deg, #00cfe8 0%, #3dd5f3 100%);
    --gp-gradient-dark: linear-gradient(135deg, #4b4b4b 0%, #6e6e6e 100%);

    /* Shadows */
    --gp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --gp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --gp-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.1);

    /* Radius */
    --gp-radius: 14px;
    --gp-radius-sm: 10px;
    --gp-radius-xs: 6px;
}

/* ============================================
   GP Hero Banner
   Uso: <div class="gp-hero gp-hero--meta|pub|dash">
   ============================================ */
.gp-hero {
    border-radius: var(--gp-radius);
    padding: 1.25rem 1.75rem;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.gp-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.gp-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 5%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Variants */
.gp-hero--meta { background: var(--gp-gradient-meta); }
.gp-hero--pub  { background: var(--gp-gradient-pub); }
.gp-hero--dash { background: var(--gp-gradient-primary); }

/* Inner layout */
.gp-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.gp-hero__left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.gp-hero__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.gp-hero__title {
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.gp-hero__subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.8125rem;
    margin: 0;
}

.gp-hero__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Hero stats (dashboard) */
.gp-hero__stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.gp-hero__stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.gp-hero__stat-label {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Hero refresh button */
.gp-hero .btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.4rem 0.625rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.gp-hero .btn-glass:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border-color: white;
}

/* Period filter dropdown */
.gp-hero__filter {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gp-hero__filter:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.gp-hero__filter:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.3);
}

.gp-hero__filter option {
    background: #2f3349;
    color: #cfd3ec;
}

/* ============================================
   GP KPI Cards
   Uso: <div class="gp-kpi gp-kpi--primary|success|warning|danger|info|meta">
   ============================================ */
.gp-kpis {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Auto-fit grid: min 160px, max 1fr */
.gp-kpis--auto {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

/* Fixed column counts */
.gp-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.gp-kpis--6 { grid-template-columns: repeat(6, 1fr); }

.gp-kpi {
    background: white;
    border-radius: var(--gp-radius);
    padding: 1rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--gp-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.gp-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--gp-shadow-md);
}

.gp-kpi__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--gp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.gp-kpi__body {
    flex: 1;
    min-width: 0;
}

.gp-kpi__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-kpi__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-kpi__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    margin-top: 3px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-kpi__trend--up   { color: #28c76f; background: rgba(40,199,111,0.1); }
.gp-kpi__trend--down { color: #ea5455; background: rgba(234,84,85,0.1); }

/* KPI Variants (icon color only, no border decoration) */
.gp-kpi--primary .gp-kpi__icon { background: rgba(115,103,240,0.1); color: #7367f0; }
.gp-kpi--success .gp-kpi__icon { background: rgba(40,199,111,0.1); color: #28c76f; }
.gp-kpi--warning .gp-kpi__icon { background: rgba(255,159,67,0.1); color: #ff9f43; }
.gp-kpi--danger .gp-kpi__icon  { background: rgba(234,84,85,0.1); color: #ea5455; }
.gp-kpi--info .gp-kpi__icon    { background: rgba(0,207,232,0.1); color: #00cfe8; }
.gp-kpi--meta .gp-kpi__icon    { background: rgba(6,104,225,0.1); color: #0668E1; }
.gp-kpi--dark .gp-kpi__icon    { background: rgba(75,75,75,0.1); color: #4b4b4b; }
.gp-kpi--secondary .gp-kpi__icon { background: rgba(168,170,174,0.1); color: #a8aaae; }

/* ============================================
   GP Metrics Bar (compact horizontal)
   ============================================ */
.gp-metrics-bar {
    background: white;
    border-radius: var(--gp-radius);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: var(--gp-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.gp-metrics-bar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.375rem 0;
}

.gp-metrics-bar__item > i {
    font-size: 1.1rem;
    color: #94A3B8;
}

.gp-metrics-bar__data {
    display: flex;
    flex-direction: column;
}

.gp-metrics-bar__value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}

.gp-metrics-bar__label {
    font-size: 0.625rem;
    font-weight: 500;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gp-metrics-bar__divider {
    width: 1px;
    height: 28px;
    background: #E2E8F0;
}

.gp-metrics-bar__item--highlight > i,
.gp-metrics-bar__item--highlight .gp-metrics-bar__value {
    color: #28c76f;
}

/* ============================================
   GP Section Header
   ============================================ */
.gp-section {
    background: white;
    border-radius: var(--gp-radius);
    padding: 1.25rem;
    box-shadow: var(--gp-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.gp-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
}

.gp-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.gp-section__title > i {
    color: #7367f0;
    font-size: 1.125rem;
}

.gp-section__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gp-section__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
}
.gp-section__icon--primary { background: var(--gp-gradient-pub); }
.gp-section__icon--meta { background: var(--gp-gradient-meta); }
.gp-section__icon--success { background: var(--gp-gradient-success); }

/* Search & filter controls inside section */
.gp-search {
    position: relative;
}

.gp-search > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.875rem;
}

.gp-search > input {
    padding-left: 32px;
    border-radius: var(--gp-radius-xs);
    border: 1px solid #e7e7e8;
    background: #F8FAFC;
    font-size: 0.8125rem;
    height: 34px;
    width: 200px;
    transition: all 0.2s ease;
}

.gp-search > input:focus {
    border-color: #7367f0;
    background: white;
    width: 240px;
}

.gp-filter {
    height: 34px;
    border-radius: var(--gp-radius-xs);
    border: 1px solid #e7e7e8;
    background: #F8FAFC;
    font-size: 0.8125rem;
    padding: 0 2rem 0 0.75rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.gp-filter:focus {
    border-color: #7367f0;
    outline: none;
}

.gp-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--gp-radius-xs);
    border: 1px solid #e7e7e8;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748B;
    transition: all 0.2s ease;
}

.gp-btn-icon:hover {
    border-color: #ea5455;
    color: #ea5455;
    background: rgba(234,84,85,0.05);
}

/* ============================================
   DARK MODE
   ============================================ */
.dark-style .gp-kpi {
    background: #2f3349;
    border-color: #434968;
}

.dark-style .gp-kpi__value {
    color: #cfd3ec;
}

.dark-style .gp-kpi__label {
    color: #7983bb;
}

.dark-style .gp-metrics-bar {
    background: #2f3349;
    border-color: #434968;
}

.dark-style .gp-metrics-bar__value {
    color: #cfd3ec;
}

.dark-style .gp-metrics-bar__label {
    color: #7983bb;
}

.dark-style .gp-metrics-bar__divider {
    background: #434968;
}

.dark-style .gp-section {
    background: #2f3349;
    border-color: #434968;
}

.dark-style .gp-section__header {
    border-bottom-color: #434968;
}

.dark-style .gp-section__title {
    color: #cfd3ec;
}

.dark-style .gp-search > input,
.dark-style .gp-filter {
    background: #25293c;
    border-color: #434968;
    color: #b6bee3;
}

.dark-style .gp-btn-icon {
    background: #25293c;
    border-color: #434968;
    color: #b6bee3;
}

/* ============================================
   RESPONSIVE - Foco em 1200-1450px
   ============================================ */
@media (max-width: 1449px) and (min-width: 1200px) {
    .gp-kpis--4 { grid-template-columns: repeat(4, 1fr); }
    .gp-kpis--6 { grid-template-columns: repeat(3, 1fr); }

    .gp-kpi {
        padding: 0.75rem 0.875rem;
        gap: 0.625rem;
    }

    .gp-kpi__icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 1.1rem;
    }

    .gp-kpi__value {
        font-size: 1.125rem;
    }

    .gp-kpi__label {
        font-size: 0.625rem;
    }

    .gp-hero {
        padding: 1rem 1.5rem;
    }

    .gp-hero__icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 1.25rem;
    }

    .gp-hero__title {
        font-size: 1rem;
    }

    .gp-hero__subtitle {
        font-size: 0.75rem;
    }

    .gp-search > input {
        width: 160px;
    }

    .gp-search > input:focus {
        width: 200px;
    }

    .gp-hero__filter {
        font-size: 0.75rem;
        padding: 0.35rem 1.75rem 0.35rem 0.625rem;
    }
}

@media (max-width: 1199px) {
    .gp-kpis--4 { grid-template-columns: repeat(2, 1fr); }
    .gp-kpis--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .gp-hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .gp-hero__right {
        width: 100%;
    }

    .gp-kpis--4,
    .gp-kpis--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gp-kpi {
        padding: 0.75rem 0.875rem;
    }

    .gp-kpi__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
    }

    .gp-kpi__value {
        font-size: 1.0625rem;
    }

    .gp-section__header {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-section__actions {
        flex-wrap: wrap;
    }

    .gp-search > input {
        width: 100%;
    }

    .gp-search > input:focus {
        width: 100%;
    }

    .gp-metrics-bar {
        gap: 0.5rem;
    }

    .gp-metrics-bar__divider {
        display: none;
    }

    .gp-metrics-bar__item {
        flex: 1 1 45%;
    }
}

@media (max-width: 575px) {
    .gp-kpis--4,
    .gp-kpis--6,
    .gp-kpis--auto {
        grid-template-columns: repeat(2, 1fr);
    }

    .gp-hero__stats {
        flex-wrap: wrap;
        gap: 1rem;
    }
}