/* --------------------------------------------------------------------------
   15. Chart printout  (HdrPrint chunk)
   The printout normally opens in a new tab that carries its own styles.
   These rules are the fallback for when the browser blocks the new tab: the
   printout is then added to the end of the page as a .print-view, never
   shown on screen, and is the only thing on the paper while printing.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Nav pill link  (.nav-pills-link)
   Used by the logged-in links in the header menu.
   -------------------------------------------------------------------------- */
.nav-pills-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    min-height: 38px;
    padding: 8px 0;
    border-radius: 24px;
    border: 1px solid var(--gm-border);
    background-color: var(--gm-white);
    color: var(--gm-slate);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.nav-pills-link:hover {
    background-color: var(--gm-surface-hover);
    border-color: var(--gm-border-strong);
    color: var(--gm-slate-dark);
}

.nav-pills-link:active {
    transform: scale(0.98);
}

/* Dimmed while the next page is loading */
.nav-pills-link.link-loading {
    opacity: 0.25;
    cursor: progress;
}

/* --------------------------------------------------------------------------
   2. Pill button  (.btn-pill)
   Used by the page header and footer links, view toggle, date navigator
   and print button.
   -------------------------------------------------------------------------- */
.btn-pill,
.btn-pill-disabled {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--gm-border);
    border-radius: 24px;
    background-color: var(--gm-white);
    color: var(--gm-slate);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.btn-pill:hover {
    background-color: var(--gm-surface-hover);
    border-color: var(--gm-border-strong);
    color: var(--gm-slate-dark);
}

.btn-pill:focus-visible {
    outline: 2px solid var(--gm-green);
    outline-offset: 2px;
}

/* Selected pill, e.g. the current Daily / 7-Day view */
.btn-pill.active {
    background-color: var(--gm-green-dark);
    border-color: var(--gm-green-dark);
    color: var(--gm-white);
}

/* Disabled pills: .btn-pill-disabled is used on its own,
   .disabled is added to a .btn-pill by the date navigator.
   Opacity is 0.5 to match the inline style the date navigator snippet
   puts on the Today button. */
.btn-pill-disabled,
.btn-pill.disabled {
    background-color: var(--gm-surface-hover);
    border-color: var(--gm-border);
    color: var(--gm-border-strong);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Date navigator  (DateNavigator chunk)
   -------------------------------------------------------------------------- */
.date-navigator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Arrow buttons - used with .btn-pill */
.btn-nav {
    padding: 0.3rem 0.6rem;
    font-size: 1.225rem;   /* larger arrows; with line-height 1 this equals the .btn-pill text height */
    line-height: 1;
}

/* Fixed width so the buttons do not move when the day name changes */
.date-navigator-day-label {
    min-width: 2.5em;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gm-slate);
}

/* Calendar input, sized to match the pills */
.active-date-input {
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gm-border);
    border-radius: 24px;
    background-color: var(--gm-white);
    color: var(--gm-slate);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
}

.active-date-input:focus-visible {
    outline: 2px solid var(--gm-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. View toggle  (HdrViewToggle chunk)
   -------------------------------------------------------------------------- */
.view-toggle-container {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   5. Page header  (ChartPageHeader chunk)
   Top row: date navigator, view toggle, print. Second row: page links.
   -------------------------------------------------------------------------- */
.chart_page_header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gm-divider);
}

/* Phone and tablet: the three pieces stack */
.chart_page_header_top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.5rem;
}

.chart_page_header_links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

/* Desktop: left, centre and right columns */
@media (min-width: 1024px) {
    .chart_page_header_top {
        grid-template-columns: 1fr auto 1fr;
    }

    .chart_page_header_top > div:last-child {
        justify-self: end;
    }
}

/* --------------------------------------------------------------------------
   6. Page footer  (ChartPageFooter chunk)
   -------------------------------------------------------------------------- */
.chart_page_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
    margin-top: 1rem;
}

/* Pushes one link (Resources) to the right-hand side */
.chart_page_footer_right {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   7. Tabs
   A row of .btn-pill buttons; the selected one has .active.
   Each .tab-panel is shown or hidden with the hidden attribute.
   -------------------------------------------------------------------------- */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.tab-panel[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-panel {
    max-width: 34rem;
}

.form-heading {
    margin: 1.75rem 0 0.75rem;
    font-family: var(--gm-font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gm-heading);
}

.form-field {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gm-slate);
}

/* Text boxes, number boxes, date, time and drop-down lists.
   16px text stops phones zooming in when a box is tapped. */
.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gm-border);
    border-radius: 8px;
    background-color: var(--gm-white);
    color: var(--gm-heading);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

.form-control:focus-visible {
    outline: 2px solid var(--gm-green);
    outline-offset: 1px;
}

/* A value that is shown but cannot be typed into. Lines up with .form-control */
.form-static {
    display: block;
    padding: 0.5rem 0;
    border: 1px solid transparent;
    color: var(--gm-heading);
    font-size: 1rem;
    line-height: 1.4;
}

/* Two fields side by side */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 0 1rem;
}

.form-total {
    margin: 0 0 1rem;
    color: var(--gm-slate);
}

.form-total strong {
    color: var(--gm-heading);
}

.form-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gm-slate-light);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Main action button - used with .btn-pill */
.btn-pill.btn-primary {
    background-color: var(--gm-green-dark);
    border-color: var(--gm-green-dark);
    color: var(--gm-white);
}

.btn-pill.btn-primary:hover {
    background-color: var(--gm-slate-dark);
    border-color: var(--gm-slate-dark);
    color: var(--gm-white);
}

/* Delete button - used with .btn-pill */
.btn-pill.btn-danger {
    color: var(--gm-alert);
}

.btn-pill.btn-danger:hover {
    border-color: var(--gm-alert);
    color: var(--gm-alert);
}

/* Pick-one buttons: a radio input inside a label, shown as a pill */
.choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice-pill span {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--gm-border);
    border-radius: 24px;
    background-color: var(--gm-white);
    color: var(--gm-slate);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.choice-pill span:hover {
    background-color: var(--gm-surface-hover);
    border-color: var(--gm-border-strong);
}

.choice-pill input:checked + span {
    background-color: var(--gm-green-dark);
    border-color: var(--gm-green-dark);
    color: var(--gm-white);
}

.choice-pill input:focus-visible + span {
    outline: 2px solid var(--gm-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. Messages
   -------------------------------------------------------------------------- */
.msg {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--gm-border-strong);
    background-color: var(--gm-surface-hover);
    color: var(--gm-heading);
    font-size: 0.9rem;
}

.msg-error {
    border-left-color: var(--gm-alert);
    color: var(--gm-alert);
}

.msg-success {
    border-left-color: var(--gm-green-dark);
}

/* --------------------------------------------------------------------------
   10. Editable list
   One .edit-row per item: a name box, a number box, then its buttons.
   -------------------------------------------------------------------------- */
.edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--gm-divider);
}

.edit-row:last-child {
    border-bottom: 1px solid var(--gm-divider);
}

.edit-row-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--gm-slate-light);
}

.edit-row-unit .form-control {
    width: 5.5rem;
}

/* Phone: the name takes the first line, the rest sits beneath it */
@media (max-width: 479.98px) {
    .edit-row {
        grid-template-columns: auto auto auto;
        justify-content: start;
    }

    .edit-row-name {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   11. Data tables  (DataTables, loaded by the DataTablesAssets chunk)
   The selectors start with .data-table-wrap or .data-toolbar so they win
   over the DataTables stylesheet, which loads after this file.
   -------------------------------------------------------------------------- */

/* From / To boxes and range buttons above the table */
.data-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.data-toolbar .form-field {
    margin-bottom: 0;
}

.data-toolbar .form-control {
    width: auto;
}

.data-toolbar .btn-pill {
    margin-bottom: 0.35rem;
}

.data-toolbar-hint {
    margin: 0.4rem 0 1rem;
}

/* The table scrolls sideways on its own if a phone is too narrow for it */
.data-table-wrap {
    overflow-x: auto;
    font-size: 0.9rem;
    color: var(--gm-heading);
}

.data-table-wrap table.dataTable > thead > tr > th {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--gm-border-strong);
    color: var(--gm-slate);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
}

.data-table-wrap table.dataTable > tbody > tr > td {
    padding: 0.45rem 0.6rem;
    border-top: 0;
    border-bottom: 1px solid var(--gm-divider);
    vertical-align: top;
    text-align: left;
}

.data-table-wrap table.dataTable > thead > tr > th.num,
.data-table-wrap table.dataTable > tbody > tr > td.num {
    text-align: right;
    white-space: nowrap;
}

/* Heading row for each day */
.data-table-wrap table.dataTable > tbody > tr.data-group > td {
    padding-top: 0.6rem;
    background-color: var(--gm-surface-hover);
    border-bottom: 1px solid var(--gm-border);
}

.data-group-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 1.25rem;
}

.data-group-link {
    margin-left: auto;
    color: var(--gm-green-dark);
    font-size: 0.85rem;
}

/* Search box, rows-per-page list, page numbers and count */
.data-table-wrap div.dt-container div.dt-layout-row {
    margin: 0 0 0.6rem;
}

.data-table-wrap div.dt-container .dt-search input,
.data-table-wrap div.dt-container .dt-length select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gm-border);
    border-radius: 8px;
    background-color: var(--gm-white);
    color: var(--gm-heading);
    font: inherit;
}

.data-table-wrap div.dt-container .dt-search label,
.data-table-wrap div.dt-container .dt-length label,
.data-table-wrap div.dt-container .dt-info {
    color: var(--gm-slate-light);
    font-size: 0.85rem;
}

.data-table-wrap div.dt-container div.dt-layout-cell.dt-layout-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
}

.data-table-wrap div.dt-container .dt-buttons {
    margin: 0;
}

/* Note shown in place of a row's Edit button when the row cannot be edited */
.data-locked {
    color: var(--gm-slate-light);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Small pill, for a button inside a table row - used with .btn-pill */
.btn-pill.btn-small {
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   12. Dialog  (a pop-up form, e.g. Edit entry)
   -------------------------------------------------------------------------- */
.dialog {
    width: min(32rem, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 1.25rem;
    border: 1px solid var(--gm-border);
    border-radius: 12px;
    background-color: var(--gm-white);
    color: var(--gm-heading);
}

.dialog::backdrop {
    background-color: var(--gm-overlay);
}

.dialog .form-heading {
    margin-top: 0;
}

/* Pushes a button (Delete) to the right-hand end of .form-actions */
.dialog-end {
    margin-left: auto;
}


/* --------------------------------------------------------------------------
   13. Link table  (Resources page)
   Adds to section 11: category headings that open and close, and the look
   of the links themselves.
   -------------------------------------------------------------------------- */

/* Page heading sitting in the toolbar beside the buttons */
.data-toolbar .link-heading {
    margin: 0 auto 0.35rem 0;
}

/* A heading row that can be clicked to open or close its group */
.data-table-wrap table.dataTable > tbody > tr.data-group-toggle > td {
    cursor: pointer;
}

.data-group-toggle td::before {
    content: "\25B8";
    display: inline-block;
    width: 1.1em;
    color: var(--gm-slate-light);
}

.data-group-toggle.is-open td::before {
    content: "\25BE";
}

.link-title {
    color: var(--gm-green-dark);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Line breaks typed into a description are kept */
.link-desc {
    color: var(--gm-slate);
    white-space: pre-line;
}


/* --------------------------------------------------------------------------
   14. Chart notes  (ChartNotes chunk, at the bottom of a chart page)
   -------------------------------------------------------------------------- */
.chart-notes {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gm-divider);
}

/* Title on the left, buttons on the right */
.chart-notes-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.chart-notes-title {
    font-family: var(--gm-font-ui);
    font-weight: 700;
    color: var(--gm-heading);
}

.chart-notes-msg {
    color: var(--gm-green-dark);
    font-size: 0.875rem;
}

.chart-notes-msg.is-error {
    color: var(--gm-alert);
}

.chart-notes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* The box can be dragged taller, not wider */
.chart-notes-box {
    min-height: 6rem;
    resize: vertical;
}

/* Read-only note. Line breaks typed into the note are kept */
.chart-notes-text {
    margin: 0;
    color: var(--gm-heading);
    white-space: pre-line;
}


/* --------------------------------------------------------------------------
   15. Chart printout  (HdrPrint chunk)
   The Print chart button builds a .print-view at the end of the page. It is
   never shown on screen. While printing, it is the only thing on the paper.
   -------------------------------------------------------------------------- */
.print-view {
    display: none;
}

@media print {
    @page {
        margin: 15mm;
    }

    body.is-printing-chart {
        display: block;
        min-height: 0;
        background: #ffffff;
    }

    body.is-printing-chart > *:not(.print-view) {
        display: none !important;
    }

    body.is-printing-chart .print-view {
        display: block;
        color: #000000;
        font-family: var(--gm-font-ui);
        font-size: 11pt;
    }

    .print-view-title {
        margin: 0;
        font-size: 18pt;
    }

    .print-view-name,
    .print-view-date {
        margin: 2pt 0 0;
    }

    .print-view-date {
        padding-bottom: 8pt;
        border-bottom: 1pt solid #000000;
    }

    .print-view-summary {
        margin: 10pt 0 0;
        font-weight: 700;
    }

    .print-view-chart {
        display: block;
        width: 100%;
        height: auto;
        margin: 10pt 0 0;
        break-inside: avoid;
    }

    .print-view-heading {
        margin: 14pt 0 0;
        font-size: 12pt;
    }

    /* Line breaks typed into the note are kept */
    .print-view-note {
        margin: 4pt 0 0;
        white-space: pre-line;
    }

    .print-view-foot {
        margin: 16pt 0 0;
        color: #555555;
        font-size: 9pt;
    }
}