/* =========================
   GROUPS ANALYTICS
========================= */

.hpc-ga-page{
    margin:24px 0;
    color:#171411;
}

/* =========================
   HERO
========================= */

.hpc-ga-hero{
    margin-bottom:22px;
    padding:28px;
    border:1px solid rgba(176,138,82,0.28);
    border-radius:14px;
    background:#FDFBF8;
    box-shadow:0 14px 34px rgba(0,0,0,0.04);
}

.hpc-ga-hero h1{
    margin:0 0 10px;
    color:#171411;
    font-family:"Libre Baskerville",serif;
    font-size:34px;
    font-weight:400;
    line-height:1.15;
}

.hpc-ga-hero p{
    max-width:620px;
    margin:0;
    color:#5E5A55;
    font-size:15px;
    line-height:1.55;
}

/* =========================
   OVERVIEW
========================= */

.hpc-ga-overview{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
    margin-bottom:24px;
}

.hpc-ga-card{
    padding:18px;
    border:1px solid rgba(176,138,82,0.28);
    border-radius:10px;
    background:#FFFDF9;
    box-shadow:0 8px 20px rgba(0,0,0,0.03);
}

.hpc-ga-card span{
    display:block;
    margin-bottom:8px;
    color:#5E5A55;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hpc-ga-card strong{
    display:block;
    color:#171411;
    font-size:22px;
    line-height:1.2;
}

.hpc-ga-card.positive{
    border-color:rgba(47,125,50,.30);
    background:#F5FBF5;
}

.hpc-ga-card.positive strong{
    color:#2F7D32;
}

.hpc-ga-card.negative{
    border-color:rgba(179,38,30,.30);
    background:#FFF5F3;
}

.hpc-ga-card.negative strong{
    color:#B3261E;
}

/* =========================
   SECTIONS
========================= */

.hpc-ga-section{
    margin-bottom:18px;
    border:1px solid rgba(176,138,82,0.22);
    border-radius:12px;
    background:#FFFDF9;
    box-shadow:0 10px 24px rgba(0,0,0,0.03);
    overflow:hidden;
}

.hpc-ga-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#FFFCF7;
}

.hpc-ga-section-head h2{
    margin:0;
    color:#171411;
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}

/* =========================
   BREAKDOWN
========================= */

.hpc-ga-breakdown-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    padding:20px;
}

.hpc-ga-breakdown-card{
    min-width:0;
    padding:16px;
    border:1px solid rgba(176,138,82,0.24);
    border-radius:10px;
    background:#fff;
}

.hpc-ga-breakdown-card h3{
    margin:0 0 12px;
    color:#171411;
    font-size:14px;
    line-height:1.25;
}

.hpc-ga-breakdown-list{
    border:1px solid rgba(176,138,82,0.18);
    border-radius:8px;
    overflow:hidden;
}

.hpc-ga-breakdown-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:9px 10px;
    border-bottom:1px solid rgba(176,138,82,0.12);
}

.hpc-ga-breakdown-row:last-child{
    border-bottom:none;
}

.hpc-ga-breakdown-row span{
    min-width:0;
    color:#5E5A55;
    font-size:12px;
    line-height:1.25;
}

.hpc-ga-breakdown-row span a{
    color:#171411;
    text-decoration:none;
    border-bottom:1px solid rgba(176,138,82,0.35);
}

.hpc-ga-breakdown-row span a:hover{
    color:#B08A52;
    border-bottom-color:#B08A52;
}

.hpc-ga-breakdown-row strong{
    color:#B08A52;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.hpc-ga-extra{
    display:none;
}

.hpc-ga-breakdown-section.is-expanded .hpc-ga-extra{
    display:grid;
}

.hpc-ga-breakdown-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid rgba(176,138,82,.35);
    border-radius:4px;
    background:#fff;
    color:#5E5A55;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.hpc-ga-breakdown-toggle:hover{
    border-color:#B08A52;
    background:#B08A52;
    color:#FDFBF8;
}

.hpc-ga-breakdown-toggle-icon{
    color:#B08A52;
    line-height:1;
}

.hpc-ga-breakdown-toggle:hover .hpc-ga-breakdown-toggle-icon{
    color:#FDFBF8;
}

.hpc-ga-breakdown-section.is-expanded .hpc-ga-breakdown-toggle-icon{
    transform:rotate(180deg);
}

/* =========================
   GROUP DETAILS + GROUP PENS
========================= */

.hpc-ga-two-column-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:stretch;
}

.hpc-ga-group-details-section,
.hpc-ga-group-pens-section{
    min-width:0;
}

.hpc-ga-group-details-scroll,
.hpc-ga-group-pens-wrap{
    height:520px;
    background:#fff;
}

.hpc-ga-group-details-scroll{
    overflow:auto;
}

.hpc-ga-group-pens-wrap{
    padding:20px;
    overflow:hidden;
}

.hpc-ga-group-details-table{
    min-width:0;
}

.hpc-ga-group-details-head,
.hpc-ga-group-details-row{
    display:grid;
    grid-template-columns:minmax(120px,1.55fr) 52px 72px 82px 82px 82px;
    gap:8px;
    align-items:center;
}

.hpc-ga-group-details-head{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px 12px;
    background:#F7F1E8;
    border-bottom:1px solid rgba(176,138,82,0.22);
}

.hpc-ga-group-details-row{
    padding:10px 12px;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#fff;
    color:#171411;
    font-size:12px;
    transition:background .16s ease;
}

.hpc-ga-group-details-row:hover{
    background:#FFF8EC;
}

.hpc-ga-group-details-row.is-active{
    background:#F7F1E8;
}

.hpc-ga-group-details-head div,
.hpc-ga-group-details-row div{
    min-width:0;
}

.hpc-ga-group-details-head div:not(:first-child),
.hpc-ga-group-details-row div:not(:first-child){
    text-align:right;
    white-space:nowrap;
}

.hpc-ga-group-details-head button{
    width:100%;
    display:block;
    padding:0;
    margin:0;
    border:0;
    background:transparent !important;
    box-shadow:none !important;
    color:#5E5A55 !important;
    font-size:10px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
}

.hpc-ga-group-details-head div:first-child button{
    text-align:left;
}

.hpc-ga-group-details-head div:not(:first-child) button{
    text-align:right;
}

.hpc-ga-group-details-head button:hover,
.hpc-ga-group-details-head button:focus,
.hpc-ga-group-details-head button.is-active{
    background:transparent !important;
    box-shadow:none !important;
    color:#B08A52 !important;
    outline:none;
}

.hpc-ga-group-name-cell{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    gap:8px;
    align-items:center;
    min-width:0;
}

.hpc-ga-group-open-link{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(176,138,82,0.35);
    border-radius:4px;
    background:#fff;
    color:#B08A52;
    font-size:12px;
    line-height:1;
    text-decoration:none;
}

.hpc-ga-group-open-link:hover{
    border-color:#B08A52;
    background:#B08A52;
    color:#FDFBF8;
}

.hpc-ga-group-select{
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    background:transparent !important;
    box-shadow:none !important;
    color:#171411 !important;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    text-align:left;
    cursor:pointer;
}

.hpc-ga-group-select:hover,
.hpc-ga-group-select:focus{
    background:transparent !important;
    box-shadow:none !important;
    color:#B08A52 !important;
    outline:none;
}

.hpc-ga-group-details-row.is-active .hpc-ga-group-select{
    color:#171411 !important;
}

.hpc-ga-group-details-row .positive,
.hpc-ga-group-pens-row .positive{
    color:#2F7D32;
    font-weight:700;
}

.hpc-ga-group-details-row .negative,
.hpc-ga-group-pens-row .negative{
    color:#B3261E;
    font-weight:700;
}

.hpc-ga-group-pens-panel{
    display:none;
}

.hpc-ga-group-pens-panel.is-active{
    display:block;
}

.hpc-ga-group-pens-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.hpc-ga-group-pens-title span{
    color:#171411;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
}

.hpc-ga-group-pens-title strong{
    color:#B08A52;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.hpc-ga-group-pens-table{
    max-height:430px;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid rgba(176,138,82,0.18);
    border-radius:8px;
    background:#fff;
}

.hpc-ga-group-pens-head,
.hpc-ga-group-pens-row{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) 64px 78px 78px 78px;
    gap:8px;
    align-items:center;
}

.hpc-ga-group-pens-head{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px 12px;
    border-bottom:1px solid rgba(176,138,82,0.22);
    background:#F7F1E8;
    color:#5E5A55;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.hpc-ga-group-pens-row{
    padding:10px 12px;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#fff;
    color:#171411;
    font-size:12px;
    transition:background .16s ease;
}

.hpc-ga-group-pens-row:hover{
    background:#FFF8EC;
}

.hpc-ga-group-pens-head div:not(:first-child),
.hpc-ga-group-pens-row div:not(:first-child){
    text-align:right;
    white-space:nowrap;
}

.hpc-ga-group-pens-row a{
    color:#171411;
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid rgba(176,138,82,0.35);
}

.hpc-ga-group-pens-row a:hover{
    color:#B08A52;
    border-bottom-color:#B08A52;
}

.hpc-ga-group-details-scroll::-webkit-scrollbar,
.hpc-ga-group-pens-table::-webkit-scrollbar{
    width:8px;
    height:8px;
}

.hpc-ga-group-details-scroll::-webkit-scrollbar-thumb,
.hpc-ga-group-pens-table::-webkit-scrollbar-thumb{
    background:rgba(176,138,82,.35);
    border-radius:999px;
}

/* =========================
   EMPTY
========================= */

.hpc-ga-empty{
    padding:22px;
    border:1px dotted #B08A52;
    border-radius:10px;
    background:#FDFBF8;
    color:#5E5A55;
    font-size:14px;
    text-align:center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1300px){

    .hpc-ga-breakdown-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:1200px){

    .hpc-ga-overview{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:1100px){

    .hpc-ga-two-column-row{
        grid-template-columns:1fr;
    }

    .hpc-ga-group-details-scroll,
    .hpc-ga-group-pens-wrap{
        height:auto;
        max-height:none;
    }
}

@media (max-width:760px){

    .hpc-ga-overview,
    .hpc-ga-breakdown-grid{
        grid-template-columns:1fr;
    }

    .hpc-ga-hero{
        padding:22px;
    }

    .hpc-ga-hero h1{
        font-size:28px;
    }

    .hpc-ga-group-details-head,
    .hpc-ga-group-details-row{
        grid-template-columns:minmax(120px,1fr) 48px 64px 72px 72px 72px;
    }

    .hpc-ga-group-pens-head,
    .hpc-ga-group-pens-row{
        grid-template-columns:minmax(0,1.35fr) 58px 70px 70px 70px;
    }
}