/* ============================================================
   AHC Pro Modern Redesign — Phase A
   Boxes + Main Traffic Chart only
   ============================================================ */

/* ----- Page background (subtle) ----- */
#ahc_main_container {
    background: #f7f8fa;
}

/* ============================================================
   CARD WRAPPER (.panel) — Modern white card style
   ============================================================ */
.ahc-pro-redesign .panel,
#ahc_main_container .panel {
    background: #ffffff !important;
    border: 1px solid #e9ecf2 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    padding: 18px 20px !important;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

#ahc_main_container .panel:hover {
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06) !important;
}

/* ============================================================
   CARD HEADERS — bullet dot + title style
   ============================================================ */
#ahc_main_container .panel > .box-heading,
#ahc_main_container .panel > h2.box-heading {
    background: transparent !important;
    color: #101828 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 0 16px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

/* Add purple bullet before each card title */
#ahc_main_container .panel > .box-heading::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c3aed;
    flex-shrink: 0;
}

/* ============================================================
   TRAFFIC REPORT CHART
   ============================================================ */
.hits_duration_select {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hits_duration_select select,
.hits_duration_select input {
    background: #fff !important;
    border: 1px solid #e9ecf2 !important;
    border-radius: 8px !important;
    color: #344054 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    height: 34px !important;
    box-shadow: none !important;
    outline: none !important;
}

.hits_duration_select select:focus,
.hits_duration_select input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

#visitors_graph_stats {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

#visitscount {
    background: transparent !important;
}

/* ============================================================
   ENHANCED TOP BOXES (already redesigned, just refine)
   ============================================================ */
.ahcpro-mbox {
    border-radius: 14px !important;
    border: 1px solid #e9ecf2 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    padding: 16px 18px 14px !important;
}

.ahcpro-mbox-title {
    font-size: 13px !important;
    color: #475467 !important;
    font-weight: 600 !important;
}

.ahcpro-mbox-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #101828 !important;
    line-height: 1.1 !important;
    margin: 4px 0 10px !important;
}

.ahcpro-mbox-icon {
    background: #f5f6fa !important;
    color: #667085 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
}

.ahcpro-mbox-spark {
    height: 40px !important;
    margin-top: 8px !important;
}

/* Hide old image-based "live" indicator (now we have our own dot) */
.ahcpro-mbox img[src*="live.gif"] {
    display: none !important;
}