/*
 * CAGD Verification — application styles.
 *
 * Carbon (carbon.min.css) supplies every component: buttons, inputs,
 * tables, tags, notifications, the header and the side menu. This file
 * only does what Carbon has no component for:
 *
 *   1. lays out the header / menu / content shell,
 *   2. adds the dashboard figures, the result banner and the sign-in
 *      page,
 *   3. keeps everything usable on a small screen.
 *
 * Colours come from Carbon's own theme tokens (the --cds-* variables),
 * so the whole interface follows Carbon rather than inventing a
 * second palette. Spacing uses Carbon's scale (0.5 / 1 / 1.5 / 2rem).
 */

:root {
    --header-height: 3rem;   /* Carbon's header is 48px tall */
    --menu-width: 16rem;     /* Carbon's side nav, expanded */
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--cds-background, #ffffff);
    color: var(--cds-text-primary, #161616);
}

/* ================================================================
   Header and menu
   ============================================================= */

.cagd-header-right {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
}

.cagd-mode-tag {
    margin-right: 1rem;
}

.cagd-whoami {
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    line-height: 1.2;
    text-align: right;
}

.cagd-whoami__name {
    font-size: 0.875rem;
    color: var(--cds-text-primary, #f4f4f4);
}

.cagd-whoami__role {
    font-size: 0.75rem;
    color: var(--cds-text-secondary, #c6c6c6);
}

@media (min-width: 42rem) {
    .cagd-whoami { display: flex; }
}

.cagd-menu {
    border-right: 1px solid var(--cds-border-subtle, #e0e0e0);
}

/* Section headings inside the menu. */
.cagd-menu__heading {
    padding: 1rem 1rem 0.25rem 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary, #525252);
}

.cds--side-nav__divider {
    margin: 0.5rem 0;
}

/* Carbon draws a divider after each group; the last one is redundant. */
.cds--side-nav__items > .cds--side-nav__divider:last-child {
    display: none;
}

.cagd-menu-cover {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(22, 22, 22, 0.5);
    z-index: 7000;
}

.cagd-menu-cover[hidden] {
    display: none;
}

.cagd-main {
    margin-top: var(--header-height);
    padding: 2rem 1rem;
    min-height: calc(100vh - var(--header-height) - 5rem);
}

.cagd-footer {
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-footer p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cds-text-secondary, #525252);
}

.cagd-footer__note {
    margin-top: 0.25rem !important;
    color: var(--cds-text-helper, #6f6f6f) !important;
}

/* On a narrow screen the menu slides in over the page. On a wide one
   it is always there and the content sits beside it. */
@media (max-width: 65.98rem) {
    .cagd-menu {
        transform: translateX(-100%);
    }

    .cagd-menu.cagd-menu--open {
        transform: translateX(0);
    }
}

@media (min-width: 66rem) {
    .cagd-menu-button { display: none; }
    .cagd-menu-cover { display: none; }

    .cagd-main,
    .cagd-footer {
        margin-left: var(--menu-width);
    }

    .cagd-main { padding: 2rem; }
}

/* ================================================================
   Page furniture
   ============================================================= */

.cagd-page {
    max-width: 66rem;
}

.cagd-page--narrow {
    max-width: 40rem;
}

.cagd-heading {
    margin-bottom: 2rem;
}

.cagd-heading__above {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary, #525252);
}

.cagd-heading__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.28;
}

.cagd-heading__text {
    margin: 0.5rem 0 0;
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cds-text-secondary, #525252);
}

.cagd-block {
    margin-top: 2.5rem;
}

.cagd-block__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
}

.cagd-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.cagd-buttons--top {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.cagd-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.33;
    color: var(--cds-text-helper, #6f6f6f);
}

.cagd-note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
    font-size: 0.75rem;
    color: var(--cds-text-helper, #6f6f6f);
}

.cagd-muted {
    color: var(--cds-text-secondary, #525252);
}

.cagd-nowrap {
    white-space: nowrap;
}

.cagd-code {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    letter-spacing: 0.32px;
}

.cagd-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   Forms
   ============================================================= */

.cagd-form {
    max-width: 32rem;
}

.cds--form-item {
    margin-bottom: 1.5rem;
}

.cagd-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cagd-filters__item {
    margin-bottom: 0;
    min-width: 11rem;
}

.cagd-check {
    margin-bottom: 0.5rem;
}

.cagd-check label {
    font-size: 0.875rem;
    cursor: pointer;
}

.cagd-message {
    max-width: 66rem;
    margin-bottom: 1.5rem;
}

/* Carbon's notification is built for one line; the error list grows. */
.cagd-message .cds--inline-notification__text-wrapper {
    padding: 0.75rem 0;
}

.cagd-message__list {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
    font-size: 0.875rem;
    line-height: 1.43;
}

/* ================================================================
   Dashboard figures
   ============================================================= */

.cagd-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background-color: var(--cds-border-subtle, #e0e0e0);
    border: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.cagd-figure {
    padding: 1.5rem;
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-figure__label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cds-text-secondary, #525252);
}

.cagd-figure__number {
    margin: 0.5rem 0 0;
    font-size: 2.625rem;
    font-weight: 300;
    line-height: 1.2;
}

.cagd-figure__number--good { color: var(--cds-support-success, #24a148); }
.cagd-figure__number--bad  { color: var(--cds-support-error, #da1e28); }

/* ================================================================
   Verification result
   ============================================================= */

.cagd-result {
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 4px solid var(--cds-border-subtle, #e0e0e0);
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-result--yes    { border-left-color: var(--cds-support-success, #24a148); }
.cagd-result--no     { border-left-color: var(--cds-support-error, #da1e28); }
.cagd-result--unsure { border-left-color: var(--cds-support-warning, #f1c21b); }

.cagd-result__word {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
}

.cagd-result--yes .cagd-result__word { color: var(--cds-support-success, #24a148); }
.cagd-result--no  .cagd-result__word { color: var(--cds-support-error, #da1e28); }

.cagd-result__text {
    margin: 0.75rem 0 0;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.5;
}

.cagd-result__ref {
    margin: 1.5rem 0 0;
}

.cagd-result__ref-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary, #525252);
}

.cagd-result__ref-number {
    display: block;
    margin-top: 0.25rem;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.32px;
}

/* The YES/NO application answers one question, so the answer is the
   whole page. */
.cagd-answer {
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    background-color: var(--cds-layer-01, #f4f4f4);
    border-top: 4px solid var(--cds-border-subtle, #e0e0e0);
}

.cagd-answer--yes    { border-top-color: var(--cds-support-success, #24a148); }
.cagd-answer--no     { border-top-color: var(--cds-support-error, #da1e28); }
.cagd-answer--unsure { border-top-color: var(--cds-support-warning, #f1c21b); }

.cagd-answer__word {
    margin: 0;
    font-size: 4.25rem;
    font-weight: 300;
    line-height: 1.15;
}

.cagd-answer--yes .cagd-answer__word { color: var(--cds-support-success, #24a148); }
.cagd-answer--no  .cagd-answer__word { color: var(--cds-support-error, #da1e28); }

.cagd-answer__text {
    margin: 0.75rem auto 0;
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cds-text-secondary, #525252);
}

/* ================================================================
   Detail lists
   ============================================================= */

.cagd-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 1.5rem;
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-details dt {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary, #525252);
}

.cagd-details dd {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

/* ================================================================
   Tables
   ============================================================= */

.cagd-table {
    overflow-x: auto;
    border: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.cagd-table__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cds-text-secondary, #525252);
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
}

.cagd-pager p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cds-text-secondary, #525252);
}

.cagd-pager__links {
    display: flex;
    gap: 1px;
}

/* ================================================================
   Sign-in and setup pages
   ============================================================= */

body.cagd-plain {
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-signin-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.cagd-signin {
    width: 100%;
    max-width: 25rem;
    padding: 2.5rem 2rem;
    background-color: var(--cds-background, #ffffff);
    border: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.cagd-signin--wide {
    max-width: 34rem;
}

.cagd-signin__above {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-secondary, #525252);
}

.cagd-signin__title {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.28;
}

.cagd-signin__text {
    margin: 0 0 2rem;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--cds-text-secondary, #525252);
}

.cagd-signin__button {
    width: 100%;
    max-width: none;
}

.cagd-signin__foot {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
    font-size: 0.75rem;
    color: var(--cds-text-helper, #6f6f6f);
}

.cagd-steps {
    font-size: 0.875rem;
    line-height: 1.5;
}

.cagd-steps code {
    padding: 0.125rem 0.25rem;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    background-color: var(--cds-layer-01, #f4f4f4);
}

.cagd-pre {
    padding: 1rem;
    overflow-x: auto;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background-color: var(--cds-layer-01, #f4f4f4);
    border-left: 3px solid var(--cds-border-subtle, #e0e0e0);
}

/* ================================================================
   Error page
   ============================================================= */

.cagd-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.cagd-error__box {
    max-width: 32rem;
    padding: 2rem;
}

.cagd-error__code {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: var(--cds-text-secondary, #525252);
}

.cagd-error__title {
    margin: 0.5rem 0 1rem;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.25;
}

.cagd-error__text {
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* ================================================================
   Printing a result
   ============================================================= */

@media print {
    .cds--header,
    .cagd-menu,
    .cagd-footer,
    .cagd-buttons,
    .cagd-menu-cover {
        display: none !important;
    }

    .cagd-main {
        margin: 0 !important;
        padding: 0 !important;
    }
}