html { height: 100%; }
body { padding-top: 15px; color: #333; min-height: 100vh; display: flex; flex-direction: column; }
.report-page { max-width: 1400px; width: 100%; }
.page-body { flex: 1 0 auto; }
.page-footer { flex: 0 0 auto; border-top: 1px solid #e1e0d9; margin-top: 24px; padding-top: 10px; padding-bottom: 8px; }
.page-footer p { margin: 0; }
.report-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid #e1e0d9; }
.report-header h2 { margin: 0; color: #2c3e50; }
.report-header h2 small { display: block; margin-top: 4px; font-size: 60%; }
.date-form { display: flex; align-items: center; gap: 8px; }
.date-form label { margin: 0; font-weight: bold; white-space: nowrap; }
#txtDate { width: 230px; background-color: #fff; cursor: pointer; }
h3 { color: #2c3e50; margin-top: 24px; margin-bottom: 6px; }
.hero-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin-bottom: 8px; }
.hero-tile { min-width: 0; background: #fcfcfb; border: 1px solid rgba(11,11,11,0.10); border-left: 4px solid #2a78d6; border-radius: 4px; padding: 12px 14px 10px; }
.hero-label { font-size: 13px; font-weight: bold; color: #2c3e50; min-height: 34px; }
.hero-value { font-size: 28px; font-weight: bold; line-height: 1.15; color: #0b0b0b; margin: 4px 0 6px; white-space: nowrap; }
.hero-desc { color: #666; font-size: 12px; }
table.summary { width: 100%; table-layout: fixed; }
table.summary td.lbl { width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.summary td.value { width: 120px; text-align: right; font-weight: bold; white-space: nowrap; }
table.summary td.desc { color: #666; font-size: 12px; }
table.summary td.indent { padding-left: 32px; }
table.summary td.indent2 { padding-left: 56px; }
table.daily th, table.daily td { text-align: right; white-space: nowrap; }
table.daily th:first-child, table.daily td:first-child { text-align: left; }
table.daily thead th { background-color: #2c3e50; color: #fff; vertical-align: bottom; }
table.daily tfoot td { font-weight: bold; background-color: #f5f5f5; }
table.daily th.group { text-align: center; background-color: #3d566e; }
.muted { color: #666; font-size: 12px; }
.signed-in { text-align: right; color: #666; font-size: 12px; margin: -6px 0 6px; }
.signed-in a { color: #2a78d6; }
.login-page .page-body { display: flex; align-items: center; justify-content: center; }
.login-page .login-card { width: 100%; margin: 0 auto; }
.login-card { max-width: 380px; margin: 40px auto; background: #fcfcfb; border: 1px solid rgba(11,11,11,0.10); border-top: 4px solid #2a78d6; border-radius: 4px; padding: 22px 24px 20px; }
.login-card h2 { margin: 0 0 4px; font-size: 22px; color: #2c3e50; }
.login-card .muted { margin-bottom: 16px; }
.login-card .login-error { margin-bottom: 12px; }
.login-card .login-error ul { list-style: none; padding: 0; margin: 0; }

/* Phones and small tablets */
@media (max-width: 767px) {
    body { padding-top: 8px; }
    .report-header { margin-bottom: 18px; padding-bottom: 10px; }
    .report-header h2 { font-size: 22px; }
    .report-header h2 small { font-size: 65%; }
    .date-form { width: 100%; }
    #txtDate { flex: 1 1 auto; width: auto; }
    h3 { font-size: 20px; margin-top: 18px; }

    /* Summary tables: label and value on one line, description underneath, no fixed column widths. */
    table.summary { table-layout: auto; }
    table.summary tbody { display: block; }
    table.summary tr { display: flex; flex-wrap: wrap; align-items: baseline; padding: 6px 0; border-top: 1px solid #ddd; }
    table.summary td { display: block; border: 0 !important; padding: 1px 8px !important; width: auto !important; }
    table.summary td.lbl { flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip; }
    table.summary td.lbl.indent { padding-left: 20px !important; }
    table.summary td.lbl.indent2 { padding-left: 32px !important; }
    table.summary td.value { flex: 0 0 auto; text-align: right; }
    table.summary td.desc { flex: 0 0 100%; padding-top: 0 !important; }
    table.summary td.desc:empty { display: none; }

    /* Headline tiles two per row. */
    .hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hero-tile { padding: 10px 12px 8px; }
    .hero-label { font-size: 12px; min-height: 0; }
    .hero-value { font-size: 22px; }
    .hero-desc { font-size: 11px; }

    .chart-holder { height: 240px; }
    .chart-card { padding: 10px 10px 8px; }
    .login-card { padding: 18px 16px 16px; }
}

@media (max-width: 359px) {
    .hero-row { grid-template-columns: 1fr; }
}
.chart-card { background: #fcfcfb; border: 1px solid rgba(11,11,11,0.10); border-radius: 4px; padding: 12px 14px 10px; margin-bottom: 8px; }
.chart-toolbar { margin-bottom: 10px; }
.chart-toggle { display: flex; flex-wrap: wrap; }
.chart-toggle .btn { float: none; margin: 0 6px 6px 0; border-radius: 3px !important; }
.chart-toggle .btn.btn-default { color: #2c3e50; background: #fff; border-color: #c3c2b7; }
.chart-toggle .btn.btn-default:hover { background: #eef3fa; }
.chart-toggle .btn.btn-primary { background: #2a78d6; border-color: #2a78d6; box-shadow: none; }
.chart-card h4 { margin: 4px 0 8px; font-size: 15px; font-weight: bold; color: #2c3e50; }
.chart-holder { position: relative; height: 300px; }