/* -------------------------------------------------------------------------- */
/* Base layout and typography                                                 */
/* -------------------------------------------------------------------------- */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Exo 2', sans-serif;
    margin: 0;
    /* padding: 1rem 2rem; */
    background: #2f2f2f;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}


/* -------------------------------------------------------------------------- */
/* Header styling                                                             */
/* -------------------------------------------------------------------------- */

header {
    padding: 12px 20px;
    background: #2f2f2f;
    color: #ffffff;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}


/* -------------------------------------------------------------------------- */
/* Controls / filter bar                                                      */
/* -------------------------------------------------------------------------- */

#controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 20px 4px 20px;
    background: #454545;
    border-bottom: 1px solid #000000;
    align-items: center;
    font-size: 1.2rem;
}

#controls > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.picker-row {
    line-height: 2.5;      /* taller line */
    padding-top: 0.5rem;   /* optional */
    padding-bottom: 0.5rem;
}


/* -------------------------------------------------------------------------- */
/* Panels and content                                                         */
/* -------------------------------------------------------------------------- */

.panel {
    background: #454545;
    border-radius: 10px;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); */
    padding: 10px 12px 8px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#mini-map-container {
    /* background: #454545; */
    overflow: hidden;
}

#summary {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #454545;
    font-size: 1.2rem;
}

#trend-container {
    margin-top: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
}

/* #pie-category,
#pie-method {
  overflow: visible;
} */

#debug {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #fff;
}


/* -------------------------------------------------------------------------- */
/* Tooltip for D3 charts                                                      */
/* -------------------------------------------------------------------------- */

.chart-tooltip {
    position: absolute;        /* Essential for following the mouse */
    background-color: #2f2f2f; /* Or dark grey */
    color: #fff;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    pointer-events: none;      /* Essential to prevent the tooltip from capturing the mouse */
    z-index: 9999;             /* Ensure it sits on top of everything */
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

footer h6 {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

footer p {
    font-size: 0.8rem;
}


/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

a {
    color: #4da3ff;
    text-decoration: none;
}

a:hover {
    color: #8cc7ff;
    text-decoration: underline;
}