/* Milligram overrides */
:root {
    /* The following are official CakePHP colors */
    --color-cakephp-red: #d33c43;
    --color-cakephp-gray: #404041;
    --color-cakephp-blue: #2f85ae;
    --color-cakephp-lightblue: #34bdd7;

    /* These are additional colors */
    --color-lightgray: #606c76;
    --color-white: #fff;

    --color-main-bg: #f5f7fa;
    --color-links: var(--color-cakephp-blue);
    --color-links-active: #2a6496;
    --color-headings: #363637;

    --color-message-success-bg: #e3fcec;
    --color-message-success-text: #1f9d55;
    --color-message-success-border: #51d88a;

    --color-message-warning-bg: #fffabc;
    --color-message-warning-text: #8d7b00;
    --color-message-warning-border: #d3b800;

    --color-message-error-bg: #fcebea;
    --color-message-error-text: #cc1f1a;
    --color-message-error-border: #ef5753;

    --color-message-info-bg: #eff8ff;
    --color-message-info-text: #2779bd;
    --color-message-info-border: #6cb2eb;

    /* Clean Flow brand colors, used site-wide for buttons */
    --color-brand-navy: #12466f;
    --color-brand-navy-mid: #1b5e96;
    --color-brand-navy-pale: #eaf2f8;
    --color-brand-yellow: #f2c230;
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}
.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover,
.button:focus, button:focus, input[type='button']:focus, input[type='reset']:focus, input[type='submit']:focus {
    background-color: var(--color-brand-navy-mid);
    border-color: var(--color-brand-navy-mid);
}
.button:focus-visible, button:focus-visible, input[type='button']:focus-visible, input[type='reset']:focus-visible, input[type='submit']:focus-visible {
    outline: 3px solid var(--color-brand-yellow);
    outline-offset: 2px;
}
.button.button-outline {
    background-color: transparent;
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}
.button.button-outline:hover,
.button.button-outline:focus {
    background-color: var(--color-brand-navy-pale);
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    background: var(--color-main-bg);
}

.top-nav-links,
.side-nav,
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    color: var(--color-headings);
}

a {
    color: var(--color-links);
    transition: color 0.2s linear;
}

a:hover,
a:focus,
a:active {
    color: var(--color-links-active);
    transition: color 0.2s ease-out;
}

.side-nav a,
.top-nav-links a,
th a,
.actions a {
    color: var(--color-lightgray);
}

.side-nav a:hover,
.side-nav a:focus,
.actions a:hover,
.actions a:focus {
    color: var(--color-links-active);
}

/* Utility */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Main */
.content {
    padding: 2rem;
    background: var(--color-white);
    border-radius: 0.4rem;
    /* Thanks Stripe */
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
        0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.content form {
    margin: 0;
}
.actions a {
    font-weight: bold;
    padding: 0 0.4rem;
}
.actions a:first-child {
    padding-left: 0;
}
th {
    white-space: nowrap;
}

/* Nav bar */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 2rem;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(18, 70, 111, 0.10);
    box-shadow: 0 8px 24px rgba(6, 28, 44, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.top-nav-title {
    flex-shrink: 0;
    text-align: left;
}
.top-nav-title a {
    font-size: 2.4rem;
    color: var(--color-cakephp-red);
}
.top-nav-title span {
    color: var(--color-cakephp-gray);
}
.top-nav-title .brand-logo {
    display: block;
    height: 5.5rem;
    width: auto;
}
.top-nav-links {
    display: flex;
    align-items: center;
}
.top-nav-links a {
    margin: 0 0 0 1.6rem;
}
.top-nav-links a.button {
    color: var(--color-white);
    margin-left: 2rem;
}
.top-nav-title a {
    font-weight: bold;
}

/* Every plain nav item - including the "Customer" menu trigger, which is a
   <summary> element rather than an <a> and so never matched the shared
   a{color:...} rule - gets the same colour, weight and hover treatment.
   Without this the summary fell back to the browser's default black text
   while the real links used the blue link colour, so "Customer" looked like
   it belonged to a different menu. */
.top-nav-links a:not(.button),
.top-nav-links .customer-menu summary {
    position: relative;
    color: var(--color-lightgray);
    font-weight: 600;
    transition: color 0.2s ease;
}
.top-nav-links a:not(.button):hover,
.top-nav-links a:not(.button):focus,
.top-nav-links .customer-menu summary:hover,
.top-nav-links .customer-menu[open] summary {
    color: var(--color-brand-navy);
}

/* An animated underline on hover for the plain links - the button and the
   dropdown trigger opt out, since a sliding underline under a CTA or a
   toggle control reads as broken rather than polished. */
.top-nav-links a:not(.button)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.4rem;
    height: 0.2rem;
    background: var(--color-brand-navy);
    border-radius: 0.2rem;
    transition: right 0.25s ease;
}
.top-nav-links a:not(.button):hover::after,
.top-nav-links a:not(.button):focus::after {
    right: 0;
}

/* Everything above tried to make <summary> match the <a> tags by copying
   flexbox tricks onto it (display:flex, align-items:center, a manually
   centered inner span). None of it held up - <summary>/<details> carry
   enough browser-specific internal box behaviour that fighting it with more
   flex layers kept producing a slightly-off result somewhere.

   This instead removes every element-specific centering rule from summary
   and its wrapper, so there is exactly ONE thing centering every item in
   this row: .top-nav-links's own align-items:center, acting on plain
   inline-level boxes with the page's ordinary line-height - the same as
   every <a> tag next to it. No competing centering logic left to disagree. */
.top-nav-links .customer-menu,
.top-nav-links .customer-menu summary,
.top-nav-links .customer-menu__label {
    display: inline;
}
.top-nav-links .customer-menu summary {
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* Measured as aligned to sub-pixel precision in both testing browsers used
   while building this, but it still reads as sitting a little high in
   practice - so a direct, deliberate nudge rather than more box-model
   archaeology. Adjust this value first if it still looks off. */
.top-nav-links .customer-menu__label {
    position: relative;
    top: 0.5px;
}
.top-nav-links .customer-menu summary:hover {
    background: var(--color-brand-navy-pale);
}

.top-nav-links a.button {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.top-nav-links a.button:hover,
.top-nav-links a.button:focus {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 1.8rem rgba(18, 70, 111, 0.28);
}
.side-nav-item {
    display: block;
    padding: 0.5rem 0;
}

@media (max-width: 64rem) {
    .top-nav {
        position: relative;
        flex-direction: column;
        gap: 1rem;
    }
    .top-nav-title {
        text-align: center;
    }
    .top-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem 1.4rem;
    }
    .top-nav-links a,
    .top-nav-links a.button {
        margin-left: 0;
    }
}

/* View action */
.view.content .text {
    margin-top: 1.2rem;
}
.related {
    margin-top: 2rem;
}

/* Flash messages */
.message {
    padding: .5rem 1rem;
    background: var(--color-message-info-bg);
    color: var(--color-message-info-text);
    border-color: var(--color-message-info-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 1rem;
    cursor: pointer;
}
.message.hidden {
    display: none;
}
.message.success {
    background: var(--color-message-success-bg);
    color: var(--color-message-success-text);
    border-color: var(--color-message-success-border);
}
.message.warning {
    background: var(--color-message-warning-bg);
    color: var(--color-message-warning-text);
    border-color: var(--color-message-warning-border);
}
.message.error {
    background: var(--color-message-error-bg);
    color: var(--color-message-error-text);
    border-color: var(--color-message-error-border);
}

/* Forms */
.input {
    margin-bottom: 1.5rem;
}
.input input,
.input select,
.input textarea {
    margin-bottom: 0;
}
.input label:has(input[type='checkbox']),
.input label:has(input[type='radio']) {
    display: flex;
    align-items: center;
}
.input label:has(~ label),
.input label:has(input[type='radio']) {
    margin-bottom: 0;
}
.input label > input[type='checkbox'],
.input label > input[type='radio'] {
    margin-right: 1.0rem;
}
input[type='color'] {
    max-width: 4rem;
    padding: 0.3rem .5rem 0.3rem;
}
.error-message {
    color: var(--color-message-error-text);
}

/* Paginator */
.paginator {
    text-align: right;
}
.paginator p {
    margin-bottom: 0;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}
.pagination li {
    display: inline-block;
    margin: 0.25em;
    text-align: center;
}
.pagination a {
    color: var(--color-cakephp-blue);
    display: inline-block;
    font-size: 1.25rem;
    line-height: 3rem;
    min-width: 3rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: background .3s,color .3s;
}
.pagination li.active a,
.pagination a:hover {
    text-decoration: underline;
}
.pagination .disabled a {
    cursor: not-allowed;
    color: var(--color-lightgray);
    text-decoration: none;
}
.first a,
.prev a,
.next a,
.last a {
    padding: 0 .75rem;
}
.disabled a:hover {
    background: initial;
    color: initial;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

/* Error in non debug mode */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

@media screen and (max-width: 640px) {
    /* Fix milligram not having a responsive column system */
    .row .column[class*='column-'] {
        flex: 0 0 100%;
        max-width: 100%
    }
    .top-nav {
        margin: 0 auto;
    }
    .side-nav {
        margin-bottom: 1rem;
    }
    .heading {
        margin-bottom: 1rem;
    }
    .side-nav-item {
        display: inline;
        margin: 0 1.5rem 0 0;
    }
    .asc:after {
        content: " \2192";
    }
    .desc:after {
        content: " \2190";
    }
}