/*this is our new css styles for ADA compliance changes*/

/* the following are existing classes within our theme. These are overring or exteneding existing classes. these need to be updated in the theme once were done testing*/

.wpthemeSecondaryBanner .wpthemeNavContainer1 {
    background: none!important;
}


.wpthemeBanner .wpthemePrimaryNav .wpthemeSelected a:link{

    /* border-bottom: 2px solid #073571!important;*/
    /* border-bottom-right-radius: 6px!important;*/
   /* border-bottom-left-radius: 6px!important;*/
}



.wpthemeNavListItem{
    padding-top: .15rem!important;
    padding-left: .15rem!important;
    padding-right: .15rem!important;
    color: #073571 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.wpthemePrimaryNav .wpthemeSelected {
    border-bottom-style: hidden !important;
    background: white !important;
}

.wpthemeBannerPrimaryNavigation .wpthemeBannerInner{
    background-color: rgb(183, 203, 231);
    background-image: none;
}

.wpthemeBanner .wpthemePrimaryNav .wpthemeSelected a:link, .wpthemeBanner .wpthemePrimaryNav .wpthemeSelected a:hover, .wpthemeBanner .wpthemePrimaryNav .wpthemeSelected a:active, .wpthemeBanner .wpthemePrimaryNav .wpthemeSelected a:focus {
    background-image: none !important;
}

.wpthemeBannerPrimaryNavigation ul {
    font-size: larger !important;
}

.wpthemeSecondaryNav ul {
    font-size: .85rem !important;
}

.wpthemeCrumbTrail {
    margin: 6px 0 0 20px;
    font-size: small !important;
}



.uspPageBar {
    font-size: 1em;
}

.uspPageBarSeparator {
    CLEAR: both;
    BORDER-TOP: #6d7e96 1px solid;
    WIDTH: 100%;
    BACKGROUND-COLOR: #e3e8f0;
    margin-bottom: 1em;
}


#content .boxContent :is(input, textarea, button, select) {
    line-height: 1.5em;
    margin-bottom: 6px;
}


#content .boxContent table td {
    padding: 6px;
    vertical-align: baseline;
}

body#content1 {
    /*update uspCustom remove backround color below*/
    /*background-color: #ededed;*/
    color: #222;
    font: 75%/1.1 Arial, Helvetica, sans-serif !important;
    margin: 0;
    padding: 0;
}

/*body {
    font: 75%/1.1  Arial, Helvetica, sans-serif!important;
}*/

/* new: add these to our theme css*/

/*table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
}
th, td {
 border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
//white-space: nowrap;
}
th {
    background-color: #f2f2f2;
}*/


.nowrap { white-space: nowrap; }

[class^="ada-layout-table"] tr td:not(.data-table td) {
    vertical-align: top;
    /* styles here */
}

.ada-layout-table-primary {
    width: 100%;
}

.ada-layout-table-secondary {
    width: 100%;
}

.width-auto {
    width: auto !important;
    min-width: auto!important;
    max-width: none!important;
}

.width-fit-content {
    width: fit-content !important;
}


.ada-layout-row-primary {

}

.ada-layout-row-secondary {

}

.ada-layout-column-primary {

}

.ada-layout-column-secondary {

}

.ada-layout-table-primary .ada-layout-column-primary .data-table {
   /* potential future*/

}

.content-main {
    display: flex;
    width: fit-content;
    /*future*/
}

.content-wrapper {
    /* Let the container fill this whole area */
    display: flex;
    flex-direction: column;
    height: 100%; /* or a fixed height, e.g. 420px */
   /* padding: 16px;*/
   /* border: 1px solid #ddd;*/
   /* border-radius: 8px;*/
}

.content-wrapper.no-border{
    border: none;
    padding: 0;
}

.content-wrapper .explanationText {
    color: #3161a5;
    font-size: small;
}


/*prev boxContet*/
.content-box {
    padding: .25em;
    margin-right: .5em;
    margin-bottom: 1em;
    background: url("/wps/contenthandler/!ut/p/digest!Dal1CObNXebH8jDfutHTCA/dav/fs-type1/themes/CustomTheme/css/images/a1.gif") repeat-x top;
    border: 1px solid #f2f2f2;
    margin-left: .25em;
    display: flex;
    flex-direction: column;
}

.content-box-header img {
    margin-right: 8px; /* Adds space between image and text */
    vertical-align: middle; /* Optional: helps with alignment */
}


/*prev .boxContent .boxHeader*/
.content-box .content-box-header {
    text-align: left;
    font-weight: bold;
    color: #073571;
    font-size: 1em;
    padding: .25em;
    margin-top: 0;
    margin-bottom: 0;
    align-items: center; /* Vertically centers items */

}

.content-box form {
    /* Remove default margins added by browsers */
    margin: 0;

    /* Ensure no extra padding inside the form */
    padding: 0;

    /* Ensure the form behaves inline if necessary */
    display: inline;
}


[hidden] {
    display: none !important;
}


.card {
    /* Let the container fill this whole area */
    display: flex;
    flex-direction: column;
    height: auto; /* or a fixed height, e.g. 420px */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* Card immediately following a <nav> */
nav ~ .card {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.data-table {
    width: 100%;
    border: 1px solid #ede9e9 !important;
   /* border-collapse: collapse;*/
    table-layout: auto;           /* consider 'fixed' if content is very wide */
   /* border-top-left-radius: 4px;*/
   /* border-top-right-radius: 4px;*/
}

/* Style applied when the mouse hovers over a table row */
.data-table tr:hover:not(thead tr, tfoot tr, #filterDetails tr) {
    background-color: white; /* A light gray background */
   /* cursor: pointer; !* Changes the cursor to a hand icon *!*/
   /* font-weight: bold; !* Makes the text bold *!*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /*Adds a subtle shadow for depth */
    /*transform: scale(1.01);*/ /* Slightly enlarges the row (optional, for effect) */
    /*transition: all 0.3s ease;*/ /* Smooth transition for the changes */
}

/* Style applied when the row itself or content within it has focus */
.data-table tr:focus-within:not(thead tr, tfoot tr, #filterDetails tr) {
    background-color: #e0e0e0; /* A slightly darker gray for focus */
    outline: 2px solid #007bff; /* Adds a blue outline for accessibility */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* A more prominent shadow */
}

.data-table thead th,
.data-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    /*vertical-align: top;*/
    border-bottom: 1px solid #eee;
}

.data-table tr:not(thead tr) {
   /* line-height: 3;*/
}

.data-table td span{
   /* display: inline-block;*/
}

.data-table caption {
    text-align: left;
}

.data-table-striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.data-table-striped tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}


.alignCenter {
    vertical-align: middle;
    text-align: center;
}

.touchAccessableSpacing {
    /* margin: 8px;*/
    line-height: 3;
}

.touchAccessableSpacing button {
    display: block;
    width: 100%;
    padding: 3px;

}


.checkbox-label {
    display: inline-block;
    padding: 4px 6px;
    margin: 3px 0;
    cursor: pointer;
    line-height: 1.5;
    background: #f9f9f9;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
}




/* Global defaults (optional) */
:root {
    --scale: 1; /* Change this to 0.9, 0.8, 1.2, etc. to resize everything */
}

/* Scope all styles to your main content wrapper */
.content-wrapper {
    /* Base dimensions (1rem assumed = 16px) */
    --base-font: 1rem;

    /* Base proportions (your requested ratios) */
    --font-scale-base: 0.75; /* 75% of base font size */
    --pad-scale-base: 0.25; /* 25% of base font size */

    /* Derived sizes (apply the single multiplier) */
    --control-font-size: calc(var(--base-font) * var(--font-scale-base) * var(--scale));
    --control-padding-y: calc(var(--base-font) * var(--pad-scale-base) * var(--scale));
    --control-padding-x: calc(var(--base-font) * var(--pad-scale-base) * var(--scale));

    /* Visual tokens */
    --control-border-radius: 4px; /* can also scale: calc(4px * var(--scale)) */
    --control-border-color: #ccc;
    --control-text-color: #333;
    --control-bg: #fff;

    --control-focus-color: #0078d4;
    --control-focus-ring: rgba(0, 120, 212, 0.2);
    --control-focus-ring-width: calc(3px * var(--scale)); /* 3px scaled */
    --control-bg-active: initial;
    --control-border-color-active: initial;
    --control-bg-hover:initial;
    --control-border-color-hover:initial;
}

/* Text inputs, selects, textarea: consistent compact styling */
.content-wrapper input[type="text"],
.content-wrapper input[type="email"],
.content-wrapper input[type="password"],
.content-wrapper input[type="number"],
.content-wrapper input[type="search"],
.content-wrapper input[type="tel"],
.content-wrapper input[type="url"],
.content-wrapper select,
.content-wrapper textarea { /* width: 100%;*/
    max-width: 100%;
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    color: var(--control-text-color);
    background-color: var(--control-bg);
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.25;
    /* this has to due with when place holder is used and the element has a size=. Use this inline style instead(determine the lenght of the place holder). style="width: 32ch;"*/
    /* as the style below clobbers dropdowns values as well as the element visable test etc.*/
    /* field-sizing: content;*/
}

/* Focus state */
.content-wrapper input:focus,
.content-wrapper select:focus,
.content-wrapper textarea:focus {
    border-color: var(--control-focus-color);
    box-shadow: 0 0 0 var(--control-focus-ring-width) var(--control-focus-ring);
    outline: none;
}

/* Disabled state */
.content-wrapper input:disabled,
.content-wrapper select:disabled,
.content-wrapper textarea:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Select: scaled effective height ≈ font-size + vertical padding */
.content-wrapper select {
    min-height: calc(var(--control-font-size) + (2 * var(--control-padding-y)));
    /* If you prefer a fixed height instead of min-height, use:
       height: calc(var(--control-font-size) + (2 * var(--control-padding-y)));
    */
}

/* Textarea: compact baseline height, still resizable */
.content-wrapper textarea {
    resize: vertical;
    min-height: calc(6 * var(--control-font-size));
}

/* Radios & checkboxes: keep minimal, do not use text-input sizing */
.content-wrapper input[type="radio"],
.content-wrapper input[type="checkbox"] {
    margin-right: calc(0.5rem * var(--scale));
    accent-color: var(--control-focus-color); /* modern browsers */
}

/*

!* Buttons & submit inputs (scoped to your content wrapper) *!
.content-wrapper .button-link,
.content-wrapper button {
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    line-height: initial;
    color: var(--control-text-color);
    !* background-color: var(--control-bg);*!
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
    display: inline-flex; !* keeps icon+label alignment tidy *!
    justify-content: center;
    !* align-self: flex-start;*!
    align-self: auto;
    align-items: center;
    gap: calc(0.5rem * var(--scale)); !* space between icon and text, if any *!
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   width: 100%;
    height: 100%;
    background: buttonface;
}
*/


/* Buttons and class that = btn & submit inputs (scoped to your content wrapper) */
.content-wrapper button,
.content-wrapper .btn,
.content-wrapper input[type="submit"],
.content-wrapper input[type="button"]
{
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    color: var(--control-text-color);
   /* background-color: var(--control-bg);*/
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
    align-self: auto;
    align-items: center;
    height: 100%;
    cursor: pointer;  /* clear affordance */
    width: fit-content;
    display: inline-block;      /* enable text-overflow */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   }

/* Focus styles (match your inputs/selects/textarea) */
.content-wrapper button:focus-visible,
.content-wrapper input[type="submit"]:focus-visible,
.content-wrapper .button-link:focus-visible {
    outline: none;
    border-color: var(--control-focus-color);
    box-shadow: 0 0 0 var(--control-focus-ring-width) var(--control-focus-ring);
}

/* Disabled state */
.content-wrapper button:disabled,
.content-wrapper input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Optional: hover feedback (keeps accessible contrast; tweak as needed) */
.content-wrapper button:hover:not(:disabled,.toggle-btn),
.content-wrapper input[type="submit"]:hover:not(:disabled),
.content-wrapper .button-link:hover:not(:disabled) {
   /* background-color: color-mix(in srgb, var(--control-bg) 90%, var(--control-focus-color) 10%);*/
    background-color: #f5f5f5;
    /*font-weight: 600;*/
    border-bottom: 2px solid;
}

.form-group-container {
    display: flex;
    flex-wrap: wrap; /* allow wrapping for responsiveness */
    gap: .50rem; /* space between groups */
    align-items: stretch; /* make groups equal height in a row */
    justify-content: flex-start;
    width: 100%;
    flex: auto; /* grow to fill available vertical space in .card */
    min-height: 0; /* avoid overflow issues in some flex scenarios */

}

.form-group {
    display: flex;
    flex: auto;
    flex-direction: column;
    gap: .25rem;
}

/* OUTER two columns: side-by-side by default */
.outer-row > .form-group {
    flex: 1 1 0;
    min-width: var(--outer-min); /* makes them wrap sooner than inner columns */
}

/* INNER three columns: equal thirds by default, with natural wrap to 2 then 1 */
.inner-row > .form-group {
    flex: 1 1 0;
    min-width: var(--inner-min);
}

/* 1) Stack OUTER columns first */
@media (max-width: var(--bp-outer-stack)) {
    .outer-row > .form-group {
        flex-basis: 100%;
        min-width: 100%;
    }
}

/* 2) Stack INNER columns later */
@media (max-width: var(--bp-inner-stack)) {
    .inner-row > .form-group {
        flex-basis: 100%;
        min-width: 100%;
    }
}

label, .form-label, .data-table thead th {
    font-weight: bold;
    background-color: #f9f9f9;
  /*  background-color: #efefefad;*/
    border: #b0c4de 1px solid;
    padding: .25em;
    text-align: left;
    align-items: center;
    gap: 0.5rem;
    font-size: .80rem;
    white-space: nowrap;
    align-content: center;
   /* border-radius: .25rem;*/
    color: rgb(97 96 93);
}


.form-value-readonly {
    display: inline-block;
    /* margin-bottom: 4px; */
    font-weight: bold;
    background-color: #f9f9f98a;
    padding: .30rem;
    color: #666;
    border: 1px dotted #ccc;
    border-radius: 4px;
}


/*.form-value-readonly::before {
   !* content: "\00a0"; !* or '—' or '\00a0' *!*!
    content: attr(data-placeholder); !* or '—' or '\00a0' *!
    color: #888;                      !* style as placeholder *!
}*/



.form-group strong {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: bold;
    background-color: #efefef;
    border: #b0c4de 1px solid;
    padding: .25em;
}

.form-group span:not(label span) {
    /* background-color: #f5f5f5;*/
    /* padding: 4px;*/
}


.form-group button {
    /* align-self: flex-start;*/
    /* width: 100%;*/
    /* padding: 3px;*/
}

.form-instructions {

}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 4px;

}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    padding-right: 10px;
    background-color: initial;
    border: none;
}

.phone-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.visually-hidden {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}



.link-button {
    background: none;
    border: none;
    padding: 0;
    color: #0645AD;           /* typical link color */
    text-decoration: underline;
    cursor: pointer;
    font: inherit;            /* match surrounding text */
}

/* Visible focus indicator */
.link-button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}



.clickable-link {
    display: block !important;
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    /*line-height: 1.25;*/
    color: var(--control-text-color);
    /* background-color: var(--control-bg);*/
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
    justify-content: center;
    /* align-self: flex-start;*/
    align-self: auto;
    align-items: center;
    gap: calc(0.5rem * var(--scale)); /* space between icon and text, if any */
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    width: 100%;
    height: 100%;
    background: buttonface;
}


a.button-link {
    display: block !important; /* Makes the anchor a block-level element */
    text-align: center !important;
   /* width: auto !important;*/
    color: #00649d!important;
    text-decoration: unset!important;
    align-content:center;
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    color: var(--control-text-color);
    /* background-color: var(--control-bg); */
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
}

.clickable-link:focus,
.clickable-link:hover {
    color: #002752; /* Even darker on hover for clarity */
    outline: 2px solid #002752; /* Optional: visible focus ring */
    outline-offset: 2px;
}


.button-group {
    display: flex;
    align-items: center; /* Ensures equal height with the span */
    gap: .25rem;
    white-space: nowrap; /* Optional: keep them on one line */
    width: 100%; /* Key: stretch across the cell */

}


/* Keep the status text sized to its content only */
.button-group .form-value-readonly {
    flex: 0 0 auto; /* Do not grow, do not shrink */
}

/* Make the button take the remainder */
.button-group button {
    flex: 1 1 auto; /* Grow to fill remaining space */
    min-width: 0; /* Prevent overflow when space is tight */
}


.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important; /* avoid word wrapping */
    border: 0 !important;
}

.role-button {
    display: inline-block;
    padding: 4px 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
}

.role-button:focus {
    outline: 2px solid #333;
}

.touchable {

    min-height: 44px;
    min-width: 44px;
}

.touchable:hover,
.touchable:focus {
    background-color: #d0d0d0;
    outline: 2px solid #333;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none !important;
    border: 1px solid transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit;
    color: #3161a5 !important;
    justify-content: flex-start !important;
}

.toggle-btn:focus-visible {
    /* outline: 2px solid #005fcc!important;*/
    /* outline-offset: 2px;*/
}

.toggle-icon {
    width: 16px;
    height: 16px;
    background-image: url('/wps/PA_uspforms/images/1-expand.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.toggle-btn[aria-expanded="true"] .toggle-icon {
    background-image: url('/wps/PA_uspforms/images/1-collapse.gif');
}

/* Panel styling (optional) */
.collapsible-panel {
    border-left: 3px solid #e0e0e0;
    padding-left: 0.75rem;
    margin-bottom: 1rem;
}

/* Ensure visible focus (WCAG 2.4.7) */
#archiveToggle:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.list-separator {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    /* nudge vertically if your font sits the dot low if not already inside somthing that will align */
    /*transform: translateY(-0.05em);*/
    /* spacing around the dot for readability */
    margin: 0 0.25em;
}

.status-summary {
    display: inline-flex; /* Keeps the summary in line with the button */
    align-items: center; /* Vertically centers the text and dots */
    /* font-size: 0.9rem;*/ /* Optional: slightly smaller than button text */
    color: #555; /* Optional: I made this slightly subdued to not draw too much attention */
}


.badge {
    /*display: inline-block;*/
    background-color: #e2e8f0; /* light gray */
    color: #334155; /* dark slate */
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge:hover {
    background-color: #cbd5e1; /* slightly darker */
    color: #1e293b;            /* slightly darker text */
    font-weight: 600;          /* subtle emphasis */
}

/* Make the entire label a generous click/tap target */
.checkbox-target {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* increases hit area to meet WCAG target size */
    cursor: pointer;
}

/* Optional: enlarge the visual checkbox a bit, but keep native control */
.checkbox-target input[type="checkbox"] {
    transform: scale(1.15); /* minor visual boost; target size comes from label padding */
    accent-color: #0067b8; /* adjust to brand color if desired */
}

/* Visible focus for keyboard users when the checkbox inside gets focus */
.checkbox-target:focus-within {
    outline: 3px solid #005a9e; /* high contrast focus indicator */
    outline-offset: 2px;
}

.checkbox-cell {
    position: relative; /* ensures label can size relative to cell */
    padding: 0; /* remove default padding if any */
}

.checkbox-target.full-cell {
    display: flex; /* allows alignment inside */
    align-items: center; /* vertically center checkbox */
    justify-content: center; /* horizontally center checkbox */
    width: 100%; /* fill entire cell width */
    height: 100%; /* fill entire cell height */
    padding: 0.5rem; /* optional: extra clickable area */
    cursor: pointer;
}

.checkbox-target.full-cell:focus-within {
    outline: 3px solid #005a9e;
    outline-offset: -3px; /* keeps outline inside cell */
}

/*utilities*/

.margin-top-1, .margin-bottom-1, .padding-top-1, .padding-bottom-1 {
    margin: 1em;
}


/* Clears padding */
.u-no-padding {
    padding: 0 !important;
}

/* Clears margin */
.u-no-margin {
    margin: 0 !important;
}

/* Clears both */
.u-reset-styles {
    all: revert !important;
}


/* navigation*/
.pagination-container {
    margin: .5rem;
    white-space: nowrap;
}

.pagination-container nav ul li a {
    text-decoration: none; /* Removes underline from links */
    /* padding: 0.5rem 0.5rem; !* Adds clickable area *!*/
    font-weight: bold;
}


.pagination-container nav {
    display: flex; /* Align children horizontally */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 1rem; /* Space between items */
    align-items: center; /* Vertically center items */
    justify-content: space-between;
}

.pagination-container nav ul {
    display: flex; /* Horizontal list */
    list-style: none; /* Remove bullets */
    padding: 0;
    margin: 0;
}

.pagination-container nav ul li {
    padding-right: 0.5rem; /* Adds clickable area */
    display: inline; /* Optional */
}

.pagination-container nav ul li span {
    font-weight: bold; /* Optional */
}

.pagination-container nav div {
    display: flex;
    align-items: center; /* Align label and select nicely */
    gap: 0.5rem;
}

.pagination-container label {
    all: unset;
    font-weight: bold /* Optional */
}


/* --------------- Reduced motion etc start -------------------------- */
/*
:root {
    !* Theme tokens – customize to your brand *!
    --secondary-nav-bg: #0b1f33;          !* Dark blue background *!
    --secondary-nav-text: #ffffff;        !* White text *!
    --secondary-nav-muted: #bcd4ff;       !* Muted/hover text *!
    --secondary-nav-accent: #66c2ff;      !* Accent for active/focus *!
    --secondary-nav-border: #0d2a47;      !* Bottom border color *!
    --focus-outline: #ffcc00;             !* High-contrast focus indicator *!

    --container-max: 1200px;
    --gap: 0.5rem;                        !* spacing between items *!
    --pad-y: 0.5rem;
    --pad-x: 1rem;

    !* Ensure comfortable touch target sizes *!
    --min-hit-size: 44px;

    !* Sticky offset if you have a primary header above (update as needed) *!
    --sticky-offset: 0;
}

!* Reduced motion for ADA/WCAG preference *!
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

!* High contrast / Windows forced colors support *!
@media (forced-colors: active) {
    .secondary-nav {
        background: Canvas;
        color: CanvasText;
        border-color: GrayText;
    }
    .secondary-nav__link {
        color: LinkText;
        border: 1px solid transparent; !* so focus outline is visible *!
    }
    .secondary-nav__link:focus-visible {
        outline-color: Highlight;
    }
    .secondary-nav__link[aria-current="page"] {
        border-bottom: 3px solid Highlight;
    }
}

!* Optional dark mode: if your app supports it *!
@media (prefers-color-scheme: dark) {
    :root {
        --secondary-nav-bg: #0a1626;
        --secondary-nav-border: #0e223b;
        --secondary-nav-muted: #cfe4ff;
        --secondary-nav-accent: #4db3ff;
        --focus-outline: #ffd54f;
    }
}

*/
/* -------------- Reduced motion etc end -----------------*/

/*


!* ------------- secodary navigation Option 1 button feel start -----------------*!

.secondary-nav {
    z-index: 1000;
    background-color: #ffffff;      !* Assume light theme for tabs; change as needed *!
    color: #0f172a;                !*  Slate-ish text color *!
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
}


!* Contain content to a centered width *!
.secondary-nav-inner {
    position: relative; !* enables pseudo-element positioning *!
    margin: 0 auto;
}

!* Draw the global underline using a pseudo-element *!
.secondary-nav-inner::after {

}

!* Horizontal list *!
.secondary-nav-list {
    display: flex;
    align-items: stretch;
    gap: 8px; !* 0.5rem ~ 8px *!
    padding: .25rem 0.5rem; !* y x *!
    margin: 0;
    list-style: none;
    !* Allow horizontal scroll on small screens, default scrollbars *!
    overflow-x: auto;
}

.secondary-nav-item {
    flex: 0 0 auto;
}

!* Make each item a comfortable touch target *!
.secondary-nav-link {
    display: block;
    padding: 8px 12px;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 2;
   !* set the border, other classes can assign color when needed*!
    border: 1px solid transparent;
}

!* Active tab cover: hides the underline directly beneath the active tab *!
.secondary-nav-link[aria-current="page"]::after {

}

.secondary-nav-link:hover {
    outline: 1px solid #ccc!important;
    background-color: #f8fafc;      !* very light tint *!
    text-decoration: none!important;
}

!* Focus: visible ring for keyboard users (ADA) *!
.secondary-nav-link:focus-visible {
    outline: 3px solid #ffcc00;     !* high-contrast focus color *!
    outline-offset: 2px;
    text-decoration: none!important;
}

!* Current page: underline/border for clear affordance *!
.secondary-nav-link[aria-current="page"] {
    border-color: #ccc;
    background-color: #f5f5f5;
    position: relative;
    z-index: 2;                     !* sit above the underline *!
    font-weight: 600;
    border-bottom: 3px solid #073571!important; !* Accent underline *!
}

.secondary-nav-link:not([aria-current="page"]) {
    border: none;
}

!*.secondary-nav-link:not([aria-current="page"]) {
     border: none;
     !*   Draw top + left + right via inset shadows *!
     box-shadow:
     inset 0 1px 0 #e2e8f0,   !* top line *!
     inset 1px 0 0 #e2e8f0,  !*  left line *!
     inset -1px 0 0 #e2e8f0;  !* right line *!

 }*!

!* --------------- secodary navigation Option 1 End ----------------*!




!* ---------------- secondary navigation Option 2 start nav looks like tabs -----------------*!

.secondary-nav {
    z-index: 1000;
    background-color: #ffffff;      !* Assume light theme for tabs; change as needed *!
    color: #0f172a;                !*  Slate-ish text color *!
  }

!* Constrain width (optional; align to your content container) *!
 Constrain width and host the underline pseudo-element *!
.secondary-nav-inner {
    position: relative;       !* enables pseudo-element positioning *!
    margin: 0 auto;
}

!* Draw the global underline using a pseudo-element *!
.secondary-nav-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;               !*  sits at the bottom of the inner container *!
    height: 1px;              !* thickness of underline *!
    background-color: #ccc; !* underline color *!
   !* background-color: #6d7e96;*! !* underline color *!
    z-index: 0;               !* behind the tabs *!

}

!* Horizontal list of tabs *!
.secondary-nav-list {
    display: flex;
    align-items: stretch;
    gap: 4px;                       !* Small gap between tabs *!
    padding: 0 16px;                !* x padding; no extra top/bottom so underline is tight *!
    margin: 0;
    list-style: none;
    !* Allow horizontal scroll on small screens, default scrollbars *!
    overflow-x: auto;
}

!* Items don't shrink *!
.secondary-nav-item {
    flex: 0 0 auto;
}

!* Base tab appearance *!
.secondary-nav-link {
    display: block;
    padding: 10px 14px;
    line-height: 1;
    text-decoration: none!important;
    white-space: nowrap;
    z-index: 2;
    !* set the border, other classes can assign color when needed*!
    border: 1px solid transparent;
    !*  Tab border on top/left/right; no bottom border *!
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
                  !* above parent underline *!
}
!* Active tab cover: hides the underline directly beneath the active tab *!
.secondary-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -1px; !* covers side borders alignment *!
    right: -1px;
    bottom: -1px; !* sits just below the tab box *!
    height: 2px; !* slightly larger than the 1px underline *!
    background: #ffffff; !* MUST match .secondary-nav background *!
    z-index: 3; !* above the underline *!
    pointer-events: none;
}


!* Hover: subtle visual cue without breaking the underline *!
.secondary-nav-link:hover {
    outline: 1px solid #ccc!important;
    background-color: #f8fafc;      !* very light tint *!
    text-decoration: none!important;

}

!* Focus: visible ring for keyboard users (ADA) *!
.secondary-nav-link:focus-visible {
    outline: 3px solid #ffcc00;     !* high-contrast focus color *!
    outline-offset: 2px;
    text-decoration: none!important;
}

!* Active tab: thin border on top/left/right, no bottom; remove the nav underline beneath it *!
.secondary-nav-link[aria-current="page"] {
    border-color: #ccc;          !* thin neutral border around active tab *!
    background-color: #ffffff;
    position: relative;
    z-index: 2;                     !* sit above the underline *!
    font-weight: 600;
    margin-bottom: -1px;           !*  overlap the container underline by 1px *!
}

!* Remove physical borders on inactive tabs *!
.secondary-nav-link:not([aria-current="page"]) {
    border: none;
}

!*.secondary-nav-link:not([aria-current="page"]) {
    border: none;
    !*   Draw top + left + right via inset shadows *!
    box-shadow:
            inset 0 1px 0 #e2e8f0,   !* top line *!
            inset 1px 0 0 #e2e8f0,  !*  left line *!
            inset -1px 0 0 #e2e8f0;  !* right line *!

}*!

!* ----------------- secodary navigation Option 2 end -------------------- *!
*/


/* ------------------------------------------------------------------
   Base: Secondary Nav (Tabs are the default visual)
------------------------------------------------------------------- */

.secondary-nav {
    z-index: 1000;
    background-color: #ffffff; /* Tabs container background */
    color: #0f172a; /* Slate-ish text color */
    /* No outer borders in Tabs variant */
}

/* Inner wrapper hosts the underline for Tabs */
.secondary-nav-inner {
    position: relative; /* enables pseudo-element positioning */
    margin: 0 auto;
}

/* Global underline for Tabs */
.secondary-nav-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* sits at bottom of the inner container */
    height: 1px; /* thickness of underline */
    background-color: #ccc; /* underline color */
    z-index: 0; /* behind tabs */
}

/* Horizontal list of tabs */
.secondary-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px; /* Tabs default gap */
    padding: 0 16px; /* x padding; underline stays tight vertically */
    margin: 0;
    list-style: none;
   /* overflow-x: auto;*/ /* allow horizontal scroll on small screens */
}

/* Items don't shrink */
.secondary-nav-item {
    flex: 0 0 auto;
    font-size: .80rem !important;
}

/* Base tab appearance */
.secondary-nav-link {
    display: block;
    padding: 10px 14px; /* Tabs default spacing */
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    z-index: 2;
    border: 1px solid transparent;

    /* Tabs shape */
    border-bottom: none; /* no bottom border (merged with underline) */
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/* Hover: subtle visual cue */
.secondary-nav-link:hover {
    outline: 1px solid #ccc !important;
    background-color: #f8fafc; /* very light tint */
    text-decoration: none !important;
}

/* Focus: visible ring for keyboard users (ADA) */
.secondary-nav-link:focus-visible {
    outline: 3px solid #ffcc00; /* high-contrast focus color */
    outline-offset: 2px;
    text-decoration: none !important;
}

/* Active tab: thin border on top/left/right, no bottom; overlap underline */
.secondary-nav-link[aria-current="page"] {
    border-color: #ccc; /* thin neutral border around active tab */
    background-color: #ffffff;
    position: relative;
    z-index: 2; /* sit above the underline */
    font-weight: 600;
   /* margin-bottom: -1px;*/ /* overlap the container underline by 1px */
}

/* Active tab cover: hides the underline directly beneath the active tab */
.secondary-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -1px; /* covers side borders alignment */
    right: -1px;
    bottom: -1px; /* sits just below the tab box */
    height: 2px; /* slightly larger than 1px underline */
    background: #ffffff; /* MUST match .secondary-nav background */
    z-index: 3; /* above the underline */
    pointer-events: none;
}

/* Inactive tabs: no physical borders */
.secondary-nav-link:not([aria-current="page"]) {
    border: none;
}

/* ------------------------------------------------------------------
   Modifier: Plain variant (non-tabs look)
   Apply by adding 'nav-plain' alongside 'secondary-nav':
   <nav class="secondary-nav nav-plain"> … </nav>
------------------------------------------------------------------- */

.secondary-nav.nav-plain {
    /* Plain variant adds an outer frame */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Remove the global underline in Plain variant */
.secondary-nav.nav-plain .secondary-nav-inner::after {
    content: none;
}

/* Spacing differences for Plain variant */
.secondary-nav.nav-plain .secondary-nav-list {
    gap: 8px; /* wider gap than Tabs */
    padding: .25rem .5rem; /* y x */
}

/* Link spacing and shape differences */
.secondary-nav.nav-plain .secondary-nav-link {
    padding: 8px 12px;
    /* remove tab-like rounding */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* keep border-bottom: none; active state sets accent underline */
}

/* Active in Plain variant: bottom accent underline and subtle bg */
.secondary-nav.nav-plain .secondary-nav-link[aria-current="page"] {
    border-color: #ccc;
    background-color: #f5f5f5;
    position: relative;
    z-index: 2;
    font-weight: 600;
    border-bottom: 2px solid #073571 !important; /* accent underline */
    margin-bottom: 0;
    color: #073571;
    border-radius: 4px;

}

/* No cover pseudo-element needed in Plain variant */
.secondary-nav.nav-plain .secondary-nav-link[aria-current="page"]::after {
    content: none;
}


/* skip links */
/* Skip link: hidden until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    z-index: 2000;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Fieldset styling */

fieldset {
    /* display: inline-block;*/ /* shrink-wrap contents */
    border: 1px solid var(--border);
    border-radius: 6px;
    /*padding: 1rem 1rem 1.25rem;*/
    min-width: 0; /* avoid overflow in flex contexts */
   /* width: 100%;*/ /* modern: content-based width */
    max-width: 100%; /* avoid overflow in narrow screens/containers */
    box-sizing: border-box;
    /*height: -webkit-fill-available;*/
    /* margin: 0;*/ /* remove default margins if undesired */
}

fieldset legend {
    font-weight: bold;
    padding: 0 0.5rem;
     color:#00649d;
   /* color: rgb(97 96 93);*/
    font-size: .8rem;
    margin-bottom: .5rem;
}

.data-section {
    padding: .5rem;
    /* margin-bottom: .75rem;*/
    border: 1px solid #ccc; /* Keep a clear boundary */
    border-radius: 4px;
    /* background-color: #f9f9f9;*/ /* Light background for contrast */
}




/*breadcrumbs*/
/* Breadcrumb container — visually consistent with .secondary-nav */
.breadcrumb {
    z-index: 1000;
    background-color: #ffffff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #0f172a; /* Slate-ish text color */
}

/* Keep content contained to a centered width, similar to .secondary-nav-inner */
.breadcrumb-inner {
    position: relative; /* enables pseudo-element positioning if needed */
    margin: 0 auto;
    padding: .25rem .5rem; /* small vertical/horizontal padding for breathing room */
}

/* Ordered list for breadcrumb (semantic + A11y) */
.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px; /* match secondary nav spacing */
    margin: 0;
    padding: 0;
    list-style: none;
    /* Allow horizontal scroll on very small screens; default scrollbars */
    overflow-x: auto;
    white-space: nowrap;
}

/* Each item in the trail */
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    min-height: 32px; /* comfortable click/tap target height */
    font-size: .85rem!important;
}

/* Links match secondary nav link treatment */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* space between icon and text (if using an icon) */
    padding: 8px 12px;
    line-height: 1;
    color: #10498F;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: 2px; /* slight rounding to mirror focus outline nicely */
}

/* Hover outline for clear affordance (consistent with .secondary-nav-link:hover) */
.breadcrumb-link:hover {
    outline: 1px solid #073571;
}

/* Focus: visible outline for keyboard users (consistent with .secondary-nav-link:focus) */
.breadcrumb-link:focus {
    outline: 2px solid #073571; /* High-contrast focus color */
    outline-offset: 2px;
}

/* Current page: underline + emphasis (consistent with aria-current styling) */
.breadcrumb-link[aria-current="page"],
.breadcrumb-current {
    border-bottom: 1px solid; /* Accent underline */
    font-weight: 600;
    /*background-color: #f5f5f5;*/
    color: #073571 !important;
    padding: 2px 8px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

/* Separator between items: visually present, hidden from screen readers */
.breadcrumb-separator {
    color: #64748b; /* subtle slate-ish separator */
    margin: 0 4px;
    user-select: none;
}

.breadcrumb-separator[aria-hidden="true"] {
    /* ensure separator is ignored by AT */
}

/* Truncation helpers for long labels (optional) */
.breadcrumb-clip {
   /* max-width: 18ch;*/ /* roughly 18 characters */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*//Rules for remediation, to help you debug markup issues*/


/* =============== Debug Remediation — Base ===============
   Conventions:
   - Violations only (red ring) — no green "pass" indicators
   - Labels are inline (not absolute) + always visible
   - Labels are non-interactive; clicking selects the underlying element
   - Rings use box-shadow with !important for visibility
   - Uses modern selectors; global by default; dev-only toggle via html.debug
   ====================================================== */
/*


:root {
    --debug-red: #ef4444;       !* red-500 *!
    --debug-ring: 2px;
    --debug-font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

!* =========================================================
   Debug Remediation — Rule Index (violations only)
   Toggle: add <html class="debug"> to enable
   ---------------------------------------------------------
   Rule 1 – All <table> must have role="presentation" or role="table"
   Rule 2A – role="presentation": must contain ada-layout-table* (substring)
            Exception: class 'component-container' suppresses violation
   Rule 2B – role="presentation": must NOT contain class 'data-table'
            Exception: class 'component-container' suppresses violation
   Rule 3A – role="table": must include class 'data-table'
   Rule 3B – role="table": must NOT contain ada-layout-table* (substring)
   ========================================================= *!


!* Rule 1 — All <table> must have role="presentation" or role="table"
   Violation: <table> missing both roles
   Exceptions: none
*!
.wpthemeMainContent table:not([role="presentation"]):not([role="table"]) {
    box-shadow: 0 0 0 var(--debug-ring) var(--debug-red) !important;
}
.wpthemeMainContent table:not([role="presentation"]):not([role="table"])::before {
    display: inline-block;
    content: "Rule 1: <table> must have role='presentation' or role='table'";
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font: var(--debug-font);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;  !* ensures clicking selects the table in Inspect *!
    white-space: nowrap;
}



!* Rule 2A — If role="presentation": must contain ada-layout-table*
   Violation: role="presentation" missing ada-layout-table*
   Exception: class~="component-container" suppresses violation
*!
.wpthemeMainContent table[role="presentation"]:not([class*="ada-layout-table"]):not([class~="component-container"]) {
    box-shadow: 0 0 0 var(--debug-ring) var(--debug-red) !important;
}
.wpthemeMainContent table[role="presentation"]:not([class*="ada-layout-table"]):not([class~="component-container"])::before {
    display: inline-block;
    content: "Rule 2A: role='presentation' requires ada-layout-table*";
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font: var(--debug-font);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    white-space: nowrap;
}

!* Rule 2B — If role="presentation": must NOT have class 'data-table'
   Violation: role="presentation" includes data-table (forbidden)
   Exception: class~="component-container" suppresses violation
*!
.wpthemeMainContent table[role="presentation"][class~="data-table"]:not([class~="component-container"]) {
    box-shadow: 0 0 0 var(--debug-ring) var(--debug-red) !important;
}
.wpthemeMainContent table[role="presentation"][class~="data-table"]:not([class~="component-container"])::before {
    display: inline-block;
    content: "Rule 2B: role='presentation' must NOT have class 'data-table'";
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font: var(--debug-font);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    white-space: nowrap;
}

!* Rule 3A — If role="table": must have class 'data-table'
   Violation: role="table" missing class 'data-table'
   Exceptions: none
*!
.wpthemeMainContent table[role="table"]:not([class~="data-table"]) {
    box-shadow: 0 0 0 var(--debug-ring) var(--debug-red) !important;
}
.wpthemeMainContent table[role="table"]:not([class~="data-table"])::before {
    display: inline-block;
    content: "Rule 3A: role='table' requires class 'data-table'";
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font: var(--debug-font);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    white-space: nowrap;
}

!* Rule 3B — If role="table": must NOT contain ada-layout-table*
   Violation: role="table" contains ada-layout-table* (substring)
   Exceptions: none
*!
.wpthemeMainContent table[role="table"][class*="ada-layout-table"] {
    box-shadow: 0 0 0 var(--debug-ring) var(--debug-red) !important;
}
.wpthemeMainContent table[role="table"][class*="ada-layout-table"]::before {
    display: inline-block;
    content: "Rule 3B: role='table' must NOT contain ada-layout-table*";
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font: var(--debug-font);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 4px;
    pointer-events: none;
    white-space: nowrap;
}




!* Red outline remains for unlabeled controls *!
td:has(:is(input, select, textarea, [contenteditable="true"])):not(:has(label))
:is(input, select, textarea, [contenteditable="true"]) {
    outline: 2px solid red;
    outline-offset: 2px;
}

!* Show a content badge when the cell contains a control but no <label> *!
td:has(:is(input, select, textarea, [contenteditable="true"])):not(:has(label))::after {
    content: "Missing label";
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: #fff3f3;
    color: #b00020;
    border: 1px solid #f5b2b2;
    border-radius: 4px;
    padding: 2px 6px;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}

*/


/*#content .boxContent{
    border-color: coral;
}*/


/* ==========================================================================
   Spacing Scale
   Edit these values to change the entire spacing system for margins and padding.
   Using rem keeps spacing accessible and consistent.
   ========================================================================== */
:root {
    --space-0: 0; /* 0px */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.5rem; /* 24px */
    --space-6: 2rem; /* 32px */
    --space-7: 3rem; /* 48px */
    --space-8: 4rem; /* 64px */
}

/* ==========================================================================
   MARGINS — All sides
   Applies the same margin to top, right, bottom, and left.
   ========================================================================== */
.m-0 {
    margin: var(--space-0);
}

/* margin all sides = 0 */
.m-1 {
    margin: var(--space-1);
}

/* margin all sides = 0.25rem */
.m-2 {
    margin: var(--space-2);
}

/* margin all sides = 0.5rem */
.m-3 {
    margin: var(--space-3);
}

/* margin all sides = 0.75rem */
.m-4 {
    margin: var(--space-4);
}

/* margin all sides = 1rem */
.m-5 {
    margin: var(--space-5);
}

/* margin all sides = 1.5rem */
.m-6 {
    margin: var(--space-6);
}

/* margin all sides = 2rem */
.m-7 {
    margin: var(--space-7);
}

/* margin all sides = 3rem */
.m-8 {
    margin: var(--space-8);
}

/* margin all sides = 4rem */

.m-auto {
    margin: auto;
}

/* margin all sides = auto (rare; use .mx-auto for centering) */

/* ==========================================================================
   MARGINS — Axes (x = left & right, y = top & bottom)
   Useful for horizontal or vertical spacing.
   ========================================================================== */
.mx-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
}

/* horizontal margins = 0 */
.mx-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
}

/* horizontal margins = 0.25rem */
.mx-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

/* horizontal margins = 0.5rem */
.mx-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
}

/* horizontal margins = 0.75rem */
.mx-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

/* horizontal margins = 1rem */
.mx-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
}

/* horizontal margins = 1.5rem */
.mx-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
}

/* horizontal margins = 2rem */
.mx-7 {
    margin-left: var(--space-7);
    margin-right: var(--space-7);
}

/* horizontal margins = 3rem */
.mx-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
}

/* horizontal margins = 4rem */

.my-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
}

/* vertical margins = 0 */
.my-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

/* vertical margins = 0.25rem */
.my-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

/* vertical margins = 0.5rem */
.my-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

/* vertical margins = 0.75rem */
.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

/* vertical margins = 1rem */
.my-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

/* vertical margins = 1.5rem */
.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

/* vertical margins = 2rem */
.my-7 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
}

/* vertical margins = 3rem */
.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

/* vertical margins = 4rem */

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* center a block horizontally */

/* ==========================================================================
   MARGINS — Individual sides (t = top, r = right, b = bottom, l = left)
   Target a single side.
   ========================================================================== */
/* Top */
.mt-0 {
    margin-top: var(--space-0);
}

/* margin-top = 0 */
.mt-1 {
    margin-top: var(--space-1);
}

/* margin-top = 0.25rem */
.mt-2 {
    margin-top: var(--space-2);
}

/* margin-top = 0.5rem */
.mt-3 {
    margin-top: var(--space-3);
}

/* margin-top = 0.75rem */
.mt-4 {
    margin-top: var(--space-4);
}

/* margin-top = 1rem */
.mt-5 {
    margin-top: var(--space-5);
}

/* margin-top = 1.5rem */
.mt-6 {
    margin-top: var(--space-6);
}

/* margin-top = 2rem */
.mt-7 {
    margin-top: var(--space-7);
}

/* margin-top = 3rem */
.mt-8 {
    margin-top: var(--space-8);
}

/* margin-top = 4rem */

/* Right */
.mr-0 {
    margin-right: var(--space-0);
}

/* margin-right = 0 */
.mr-1 {
    margin-right: var(--space-1);
}

/* margin-right = 0.25rem */
.mr-2 {
    margin-right: var(--space-2);
}

/* margin-right = 0.5rem */
.mr-3 {
    margin-right: var(--space-3);
}

/* margin-right = 0.75rem */
.mr-4 {
    margin-right: var(--space-4);
}

/* margin-right = 1rem */
.mr-5 {
    margin-right: var(--space-5);
}

/* margin-right = 1.5rem */
.mr-6 {
    margin-right: var(--space-6);
}

/* margin-right = 2rem */
.mr-7 {
    margin-right: var(--space-7);
}

/* margin-right = 3rem */
.mr-8 {
    margin-right: var(--space-8);
}

/* margin-right = 4rem */

/* Bottom */
.mb-0 {
    margin-bottom: var(--space-0);
}

/* margin-bottom = 0 */
.mb-1 {
    margin-bottom: var(--space-1);
}

/* margin-bottom = 0.25rem */
.mb-2 {
    margin-bottom: var(--space-2);
}

/* margin-bottom = 0.5rem */
.mb-3 {
    margin-bottom: var(--space-3);
}

/* margin-bottom = 0.75rem */
.mb-4 {
    margin-bottom: var(--space-4);
}

/* margin-bottom = 1rem */
.mb-5 {
    margin-bottom: var(--space-5);
}

/* margin-bottom = 1.5rem */
.mb-6 {
    margin-bottom: var(--space-6);
}

/* margin-bottom = 2rem */
.mb-7 {
    margin-bottom: var(--space-7);
}

/* margin-bottom = 3rem */
.mb-8 {
    margin-bottom: var(--space-8);
}

/* margin-bottom = 4rem */

/* Left */
.ml-0 {
    margin-left: var(--space-0);
}

/* margin-left = 0 */
.ml-1 {
    margin-left: var(--space-1);
}

/* margin-left = 0.25rem */
.ml-2 {
    margin-left: var(--space-2);
}

/* margin-left = 0.5rem */
.ml-3 {
    margin-left: var(--space-3);
}

/* margin-left = 0.75rem */
.ml-4 {
    margin-left: var(--space-4);
}

/* margin-left = 1rem */
.ml-5 {
    margin-left: var(--space-5);
}

/* margin-left = 1.5rem */
.ml-6 {
    margin-left: var(--space-6);
}

/* margin-left = 2rem */
.ml-7 {
    margin-left: var(--space-7);
}

/* margin-left = 3rem */
.ml-8 {
    margin-left: var(--space-8);
}

/* margin-left = 4rem */

/* ==========================================================================
   NEGATIVE MARGINS — All/axes/sides
   Use with care: helpful for overlaps and fine adjustments.
   Note: there is NO negative padding in CSS.
   ========================================================================== */
/* All sides (no -m-0 because -0 is the same as 0) */
.-m-1 {
    margin: calc(var(--space-1) * -1);
}

/* negative margin all sides = -0.25rem */
.-m-2 {
    margin: calc(var(--space-2) * -1);
}

/* negative margin all sides = -0.5rem */
.-m-3 {
    margin: calc(var(--space-3) * -1);
}

/* negative margin all sides = -0.75rem */
.-m-4 {
    margin: calc(var(--space-4) * -1);
}

/* negative margin all sides = -1rem */
.-m-5 {
    margin: calc(var(--space-5) * -1);
}

/* negative margin all sides = -1.5rem */
.-m-6 {
    margin: calc(var(--space-6) * -1);
}

/* negative margin all sides = -2rem */
.-m-7 {
    margin: calc(var(--space-7) * -1);
}

/* negative margin all sides = -3rem */
.-m-8 {
    margin: calc(var(--space-8) * -1);
}

/* negative margin all sides = -4rem */

/* Axes */
.-mx-1 {
    margin-left: calc(var(--space-1) * -1);
    margin-right: calc(var(--space-1) * -1);
}

/* horizontal negative margins = -0.25rem */
.-mx-2 {
    margin-left: calc(var(--space-2) * -1);
    margin-right: calc(var(--space-2) * -1);
}

/* horizontal negative margins = -0.5rem */
.-mx-3 {
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
}

/* horizontal negative margins = -0.75rem */
.-mx-4 {
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
}

/* horizontal negative margins = -1rem */
.-mx-5 {
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
}

/* horizontal negative margins = -1.5rem */
.-mx-6 {
    margin-left: calc(var(--space-6) * -1);
    margin-right: calc(var(--space-6) * -1);
}

/* horizontal negative margins = -2rem */
.-mx-7 {
    margin-left: calc(var(--space-7) * -1);
    margin-right: calc(var(--space-7) * -1);
}

/* horizontal negative margins = -3rem */
.-mx-8 {
    margin-left: calc(var(--space-8) * -1);
    margin-right: calc(var(--space-8) * -1);
}

/* horizontal negative margins = -4rem */

.-my-1 {
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: calc(var(--space-1) * -1);
}

/* vertical negative margins = -0.25rem */
.-my-2 {
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: calc(var(--space-2) * -1);
}

/* vertical negative margins = -0.5rem */
.-my-3 {
    margin-top: calc(var(--space-3) * -1);
    margin-bottom: calc(var(--space-3) * -1);
}

/* vertical negative margins = -0.75rem */
.-my-4 {
    margin-top: calc(var(--space-4) * -1);
    margin-bottom: calc(var(--space-4) * -1);
}

/* vertical negative margins = -1rem */
.-my-5 {
    margin-top: calc(var(--space-5) * -1);
    margin-bottom: calc(var(--space-5) * -1);
}

/* vertical negative margins = -1.5rem */
.-my-6 {
    margin-top: calc(var(--space-6) * -1);
    margin-bottom: calc(var(--space-6) * -1);
}

/* vertical negative margins = -2rem */
.-my-7 {
    margin-top: calc(var(--space-7) * -1);
    margin-bottom: calc(var(--space-7) * -1);
}

/* vertical negative margins = -3rem */
.-my-8 {
    margin-top: calc(var(--space-8) * -1);
    margin-bottom: calc(var(--space-8) * -1);
}

/* vertical negative margins = -4rem */

/* Individual sides */
.-mt-1 {
    margin-top: calc(var(--space-1) * -1);
}

/* margin-top = -0.25rem */
.-mt-2 {
    margin-top: calc(var(--space-2) * -1);
}

/* margin-top = -0.5rem */
.-mt-3 {
    margin-top: calc(var(--space-3) * -1);
}

/* margin-top = -0.75rem */
.-mt-4 {
    margin-top: calc(var(--space-4) * -1);
}

/* margin-top = -1rem */
.-mt-5 {
    margin-top: calc(var(--space-5) * -1);
}

/* margin-top = -1.5rem */
.-mt-6 {
    margin-top: calc(var(--space-6) * -1);
}

/* margin-top = -2rem */
.-mt-7 {
    margin-top: calc(var(--space-7) * -1);
}

/* margin-top = -3rem */
.-mt-8 {
    margin-top: calc(var(--space-8) * -1);
}

/* margin-top = -4rem */

.-mr-1 {
    margin-right: calc(var(--space-1) * -1);
}

/* margin-right = -0.25rem */
.-mr-2 {
    margin-right: calc(var(--space-2) * -1);
}

/* margin-right = -0.5rem */
.-mr-3 {
    margin-right: calc(var(--space-3) * -1);
}

/* margin-right = -0.75rem */
.-mr-4 {
    margin-right: calc(var(--space-4) * -1);
}

/* margin-right = -1rem */
.-mr-5 {
    margin-right: calc(var(--space-5) * -1);
}

/* margin-right = -1.5rem */
.-mr-6 {
    margin-right: calc(var(--space-6) * -1);
}

/* margin-right = -2rem */
.-mr-7 {
    margin-right: calc(var(--space-7) * -1);
}

/* margin-right = -3rem */
.-mr-8 {
    margin-right: calc(var(--space-8) * -1);
}

/* margin-right = -4rem */

.-mb-1 {
    margin-bottom: calc(var(--space-1) * -1);
}

/* margin-bottom = -0.25rem */
.-mb-2 {
    margin-bottom: calc(var(--space-2) * -1);
}

/* margin-bottom = -0.5rem */
.-mb-3 {
    margin-bottom: calc(var(--space-3) * -1);
}

/* margin-bottom = -0.75rem */
.-mb-4 {
    margin-bottom: calc(var(--space-4) * -1);
}

/* margin-bottom = -1rem */
.-mb-5 {
    margin-bottom: calc(var(--space-5) * -1);
}

/* margin-bottom = -1.5rem */
.-mb-6 {
    margin-bottom: calc(var(--space-6) * -1);
}

/* margin-bottom = -2rem */
.-mb-7 {
    margin-bottom: calc(var(--space-7) * -1);
}

/* margin-bottom = -3rem */
.-mb-8 {
    margin-bottom: calc(var(--space-8) * -1);
}

/* margin-bottom = -4rem */

.-ml-1 {
    margin-left: calc(var(--space-1) * -1);
}

/* margin-left = -0.25rem */
.-ml-2 {
    margin-left: calc(var(--space-2) * -1);
}

/* margin-left = -0.5rem */
.-ml-3 {
    margin-left: calc(var(--space-3) * -1);
}

/* margin-left = -0.75rem */
.-ml-4 {
    margin-left: calc(var(--space-4) * -1);
}

/* margin-left = -1rem */
.-ml-5 {
    margin-left: calc(var(--space-5) * -1);
}

/* margin-left = -1.5rem */
.-ml-6 {
    margin-left: calc(var(--space-6) * -1);
}

/* margin-left = -2rem */
.-ml-7 {
    margin-left: calc(var(--space-7) * -1);
}

/* margin-left = -3rem */
.-ml-8 {
    margin-left: calc(var(--space-8) * -1);
}

/* margin-left = -4rem */

/* ==========================================================================
   PADDING — All sides
   Applies the same padding to top, right, bottom, and left.
   ========================================================================== */
.p-0 {
    padding: var(--space-0);
}

/* padding all sides = 0 */
.p-1 {
    padding: var(--space-1);
}

/* padding all sides = 0.25rem */
.p-2 {
    padding: var(--space-2);
}

/* padding all sides = 0.5rem */
.p-3 {
    padding: var(--space-3);
}

/* padding all sides = 0.75rem */
.p-4 {
    padding: var(--space-4);
}

/* padding all sides = 1rem */
.p-5 {
    padding: var(--space-5);
}

/* padding all sides = 1.5rem */
.p-6 {
    padding: var(--space-6);
}

/* padding all sides = 2rem */
.p-7 {
    padding: var(--space-7);
}

/* padding all sides = 3rem */
.p-8 {
    padding: var(--space-8);
}

/* padding all sides = 4rem */

/* ==========================================================================
   PADDING — Axes (x = left & right, y = top & bottom)
   Useful for horizontal or vertical inner spacing.
   ========================================================================== */
.px-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
}

/* horizontal padding = 0 */
.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

/* horizontal padding = 0.25rem */
.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/* horizontal padding = 0.5rem */
.px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* horizontal padding = 0.75rem */
.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* horizontal padding = 1rem */
.px-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* horizontal padding = 1.5rem */
.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* horizontal padding = 2rem */
.px-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
}

/* horizontal padding = 3rem */
.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

/* horizontal padding = 4rem */

.py-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
}

/* vertical padding = 0 */
.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

/* vertical padding = 0.25rem */
.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* vertical padding = 0.5rem */
.py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* vertical padding = 0.75rem */
.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

/* vertical padding = 1rem */
.py-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

/* vertical padding = 1.5rem */
.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* vertical padding = 2rem */
.py-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

/* vertical padding = 3rem */
.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* vertical padding = 4rem */

/* ==========================================================================
   PADDING — Individual sides (t = top, r = right, b = bottom, l = left)
   Target a single side of inner spacing.
   ========================================================================== */
/* Top */
.pt-0 {
    padding-top: var(--space-0);
}

/* padding-top = 0 */
.pt-1 {
    padding-top: var(--space-1);
}

/* padding-top = 0.25rem */
.pt-2 {
    padding-top: var(--space-2);
}

/* padding-top = 0.5rem */
.pt-3 {
    padding-top: var(--space-3);
}

/* padding-top = 0.75rem */
.pt-4 {
    padding-top: var(--space-4);
}

/* padding-top = 1rem */
.pt-5 {
    padding-top: var(--space-5);
}

/* padding-top = 1.5rem */
.pt-6 {
    padding-top: var(--space-6);
}

/* padding-top = 2rem */
.pt-7 {
    padding-top: var(--space-7);
}

/* padding-top = 3rem */
.pt-8 {
    padding-top: var(--space-8);
}

/* padding-top = 4rem */

/* Right */
.pr-0 {
    padding-right: var(--space-0);
}

/* padding-right = 0 */
.pr-1 {
    padding-right: var(--space-1);
}

/* padding-right = 0.25rem */
.pr-2 {
    padding-right: var(--space-2);
}

/* padding-right = 0.5rem */
.pr-3 {
    padding-right: var(--space-3);
}

/* padding-right = 0.75rem */
.pr-4 {
    padding-right: var(--space-4);
}

/* padding-right = 1rem */
.pr-5 {
    padding-right: var(--space-5);
}

/* padding-right = 1.5rem */
.pr-6 {
    padding-right: var(--space-6);
}

/* padding-right = 2rem */
.pr-7 {
    padding-right: var(--space-7);
}

/* padding-right = 3rem */
.pr-8 {
    padding-right: var(--space-8);
}

/* padding-right = 4rem */

/* Bottom */
.pb-0 {
    padding-bottom: var(--space-0);
}

/* padding-bottom = 0 */
.pb-1 {
    padding-bottom: var(--space-1);
}

/* padding-bottom = 0.25rem */
.pb-2 {
    padding-bottom: var(--space-2);
}

/* padding-bottom = 0.5rem */
.pb-3 {
    padding-bottom: var(--space-3);
}

/* padding-bottom = 0.75rem */
.pb-4 {
    padding-bottom: var(--space-4);
}

/* padding-bottom = 1rem */
.pb-5 {
    padding-bottom: var(--space-5);
}

/* padding-bottom = 1.5rem */
.pb-6 {
    padding-bottom: var(--space-6);
}

/* padding-bottom = 2rem */
.pb-7 {
    padding-bottom: var(--space-7);
}

/* padding-bottom = 3rem */
.pb-8 {
    padding-bottom: var(--space-8);
}

/* padding-bottom = 4rem */

/* Left */
.pl-0 {
    padding-left: var(--space-0);
}

/* padding-left = 0 */
.pl-1 {
    padding-left: var(--space-1);
}

/* padding-left = 0.25rem */
.pl-2 {
    padding-left: var(--space-2);
}

/* padding-left = 0.5rem */
.pl-3 {
    padding-left: var(--space-3);
}

/* padding-left = 0.75rem */
.pl-4 {
    padding-left: var(--space-4);
}

/* padding-left = 1rem */
.pl-5 {
    padding-left: var(--space-5);
}

/* padding-left = 1.5rem */
.pl-6 {
    padding-left: var(--space-6);
}

/* padding-left = 2rem */
.pl-7 {
    padding-left: var(--space-7);
}

/* padding-left = 3rem */
.pl-8 {
    padding-left: var(--space-8);
}

/* padding-left = 4rem */


/* ==========================================================================
   FLEX — Display utilities
   Use these to enable flex formatting context on a container.
   ========================================================================== */
.flex {
    display: flex;
}

/* Block-level flex container */
.inline-flex {
    display: inline-flex;
}

/* Inline-level flex container */

/* ==========================================================================
   FLEX — Shorthand on flex items (child elements inside a flex container)
   Shorthand form: flex: <grow> <shrink> <basis>;
   These classes default to 'flex-basis: auto' per your request.
   ========================================================================== */

/* Common presets */
.flex-auto {
    flex: 1 1 auto!important;
}

/* Default: grow and shrink as needed, basis auto */
.flex-none {
    flex: 0 0 auto!important;
}

/* Do not grow or shrink, size from content/width, basis auto */

/* Additional useful presets (still basis:auto) */
.flex-grow-only {
    flex: 1 0 auto;
}

/* Grow to fill space, do NOT shrink */
.flex-shrink-only {
    flex: 0 1 auto;
}

/* Do NOT grow, but allow shrinking to fit */

/* ==========================================================================
   FLEX — Granular controls (combine to compose your desired behavior)
   These target individual flex components; basis defaults to auto if not set.
   Combine (e.g., .flex-grow-0 .flex-shrink-0 .basis-auto) for clarity.
   ========================================================================== */

/* Flex-grow (how much the item expands relative to others) */
.flex-grow-0 {
    flex-grow: 0;
}

/* Item will NOT grow */
.flex-grow-1 {
    flex-grow: 1;
}

/* Item can grow (default in many designs) */

/* Flex-shrink (how much the item shrinks relative to others) */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Item will NOT shrink */
.flex-shrink-1 {
    flex-shrink: 1;
}

/* Item can shrink (default behavior) */

/* Flex-basis (starting size before grow/shrink; your variants use auto) */
.basis-auto {
    flex-basis: auto;
}

/* Size based on content or width; allows grow/shrink */
.basis-0 {
    flex-basis: 0;
}

/* Optional: start at 0 width; often used with grow:1 */
.basis-100-px {
    flex-basis: 100px;
}

/* Optional: start at 100px width; */
.basis-200-px {
    flex-basis: 200px;
}

/* Optional: start at 200px width; */
.basis-300-px {
    flex-basis: 300px;
}

/* Optional: start at 300px width;*/
.basis-400-px {
    flex-basis: 400px;
}

/* Optional: start at 400px width; */
.basis-500-px {
    flex-basis: 500px;
}

/* Optional: start at 500px width; */
.basis-33-prcnt {
    flex-basis: 33%;
}

/* Optional: start at 33% width; */
.basis-25-prcnt {
    flex-basis: 25%;
}

/* Optional: start at 25% width; */


/* ==========================================================================
   FLEX — Container direction & wrap (optional quality-of-life utilities)
   Helpful when you’re already working with flex containers.
   ========================================================================== */

/* Direction */
.flex-row {
    flex-direction: row;
}

/* Horizontal (default) */
.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

/* Vertical stack */
.flex-col-reverse {
    flex-direction: column-reverse;
}

/* Wrapping */
.flex-nowrap {
    flex-wrap: nowrap;
}

/* Single line */
.flex-wrap {
    flex-wrap: wrap;
}

/* Wrap onto multiple lines */
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Alignment (container-level) */
.items-start {
    align-items: flex-start;
}

/* Cross-axis start */
.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

/* Main-axis alignment */
.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Alignment (item-level) */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}


/*down and dirty modal*/

#myDialog {
    width: min(90vw, 520px);
    border: none;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.08);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#myDialog h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

#myDialog .actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

#myDialog .primary {
    background: #005bd1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
}

#myDialog .secondary {
    background: transparent;
    border: 1px solid #c7c7c7;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
}

#myDialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: saturate(120%) blur(2px);
}

@media (prefers-reduced-motion: no-preference) {
    #myDialog {
        transition: transform 160ms ease, opacity 160ms ease;
        transform: translateY(-6px);
        opacity: 0;
    }

    #myDialog[open] {
        transform: translateY(0);
        opacity: 1;
    }
}

#myDialog :focus {
    outline: 3px solid #005bd1;
    outline-offset: 2px;
}


/*template styling temporary*/

/* Base variables for easy tuning */
:root {
    --gap: 1rem; /* space between columns/rows */
    --outer-min: 420px; /* min width for outer columns before they wrap */
    --inner-min: 240px; /* min width for inner columns before they wrap */
    --bp-outer-stack: 900px; /* viewport where the outer columns go full width */
    --bp-inner-stack: 600px; /* viewport where inner columns go full width */
    --border: #d0d7de;
}

/* Ensure layouts are predictable */
* {
    box-sizing: border-box;
}

/* Generic flex row */

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
    /*padding: .25rem;*/
   /* border: 1px solid red;*/
}

/* Generic column: stack its children (label over input) */
.column {
    flex: 1 1 0;
    /*min-width: 0;*/ /* allows flex children to shrink evenly */
    display: flex;
    flex-direction: column;
    gap: var(--gap);
   /* padding: .25rem;*/
   /* border: 1px solid green;*/
}

/* OUTER two columns: side-by-side by default */
.outer-row > .column {
    flex: 1 1 0;
    min-width: var(--outer-min); /* makes them wrap sooner than inner columns */
}

/* INNER three columns: equal thirds by default, with natural wrap to 2 then 1 */
.inner-row > .column {
    flex: 1 1 0;
    min-width: var(--inner-min);
}


/* Form controls */
/*label {
    font-size: 0.9rem;
}*/

/*input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}*/

/* --- Responsive Stacking Rules --- */

/* 1) Stack OUTER columns first */
@media (max-width: var(--bp-outer-stack)) {
    .outer-row > .column {
        flex-basis: 100%;
        min-width: 100%;
    }
}

/* 2) Stack INNER columns later */
@media (max-width: var(--bp-inner-stack)) {
    .inner-row > .column {
        flex-basis: 100%;
        min-width: 100%;
    }
}


th[scope="row"] {
    font-weight: normal;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
}



/*button utils testing*/
.btn-primary {
    background-color: #4CAF50; /* Verdant Green */
    color: #FFFFFF;            /* Accessible white text */
    padding: 12px 24px;
    border-radius: 8px;        /* Modern rounded look */
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;     /* Smooth hover effect */
}

.btn-primary:hover {
    background-color: #388E3C; /* Slightly darker on hover */
}


button[data-accordion] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*width: 100%;*/
    padding: 15px 20px;
    background-color: #f4f4f4; /* Light gray background */
    color: #333;
    cursor: pointer;
    /*font-size: 16px;*/
    font-weight: normal;
    text-align: left;
    transition: background-color 0.3s ease;
    outline: none;
    border: transparent!important;
}

/* Hover and Focus States */
button[data-accordion]:hover,
button[data-accordion]:focus {
    background-color: #e0e0e0; /* Slightly darker on hover */
    border-color: #ccc;
}

/* Add a plus/minus or caret icon indicator */
button[data-accordion]::before {
    content: '+'; /* Or unicode: \25BC for caret down */
    font-size: 1rem;
    font-weight: bold;
}

/* Active State (When the panel is open) */
button[data-accordion][aria-expanded="true"] {
    background-color: #e0e0e0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Change icon to minus when active */
button[data-accordion][aria-expanded="true"]::before {
    content: '\2212'; /* Unicode for minus sign */
}



/* Responsive table wrapper */
.table-responsive {
    width: 100%;
    overflow-x: auto;             /* horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    border: 1px solid #ddd;       /* optional: visual boundary */
    border-radius: 4px;           /* optional */
}

/* Table layout optimizations */



/* Optional: keep certain headers from wrapping */
.nowrap { white-space: nowrap; }

/* Optional: sticky header on scroll (works within .table-responsive) */
@supports (position: sticky) {
    .data-table thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
        box-shadow: 0 1px 0 #eee;
    }
}



/* Container base */
.page-message {
    display: block;
    padding: .75rem;
    margin: .75rem 0;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 500;
    background-color: initial;
    border: 1px solid #ddd;
    color: black;
}

/* Message text helper */
.message-text {
    display: inline-block;
    color: inherit; /* inherits from container */
}

/* Variants for status */
.page-message.success {
    background-color: #e6f4ea; /* light green */
    border: 1px solid #34a853; /* green border */
    color: #1e7e34; /* dark green text */
}

.page-message.warn {
    background-color: #fff8e1; /* light yellow */
    border: 1px solid #fbbc04; /* yellow border */
    color: #8a6d3b; /* dark amber text */
}

.page-message.error {
    background-color: #fdecea; /* light red */
    border: 1px solid #d93025; /* red border */
    color: #a94442; /* dark red text */
}

/*

!* Base: buttons and .btn under your content wrapper *!
.content-wrapper button,
.content-wrapper .btn {
    !* Your existing tokens *!
    font-size: var(--control-font-size);
    padding: var(--control-padding-y) var(--control-padding-x);
    color: var(--control-text-color);
    !*background-color: var(--control-bg);*! !* re-enabled for clarity *!
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-border-radius);
    box-sizing: border-box;
    align-items: center;
    align-self: auto;
    height: 100%;
    background-color: -moz-buttondefault;
    !* width: fit-content; *! !* optional *!

    !* Accessibility & usability hygiene *!
    display: inline-flex;                !* ensures vertical centering *!
    gap: 0.5em;                          !* space between icon & label *!
    justify-content: center;
    text-decoration: none;               !* reset for non-link variants *!
    line-height: 1.25;                   !* improves readability *!
    cursor: pointer;                     !* clear affordance *!
    user-select: none;

    !* Motion: safe default transition *!
    transition:
            background-color 150ms ease,
            color 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease,
            transform 100ms ease;              !* used on :active *!
}
!*

!* Ensure min target size per WCAG best practice (aim for ~44x44 CSS pixels) *!
.content-wrapper button,
.content-wrapper .btn {
    min-height: 44px;
    min-width: 44px; !* consider removing if you want tighter widths *!
}
*!

!* Disabled (native) + ARIA-disabled *!
.content-wrapper button:disabled,
.content-wrapper .btn[aria-disabled="true"] {
    opacity: 0.55;                       !* communicates disabled—not only via color *!
    cursor: not-allowed;
    pointer-events: none;                !* prevent clicks when aria-disabled *!
}

!* Hover: do not rely on color alone—also adjust border for tactile feel *!
.content-wrapper button:hover:not(:disabled),
.content-wrapper .btn:hover:not([aria-disabled="true"]) {
    background-color: var(--control-bg-hover);
    border-color: var(--control-border-color-hover);
}

!* Active/pressed: small transform + stronger border *!
.content-wrapper button:active:not(:disabled),
.content-wrapper .btn:active:not([aria-disabled="true"]) {
    background-color: var(--control-bg-active);
    border-color: var(--control-border-color-active);
    transform: translateY(0.5px);
}

!* Focus ring (keyboard only) *!
.content-wrapper button:focus-visible,
.content-wrapper .btn:focus-visible {
    outline: 3px solid var(--focus-ring-color, #1a73e8);
    outline-offset: 2px;
    !* optional shadow halo to improve contrast on busy backgrounds *!
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring-color, #1a73e8) 25%, transparent);
}

!* Remove default outline when focus came from mouse (not keyboard) *!
.content-wrapper button:focus:not(:focus-visible),
.content-wrapper .btn:focus:not(:focus-visible) {
    outline: none;
}

!* Icon alignment helper *!
.content-wrapper .btn__icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
}

!* Variants
   ------------------------------------------------------------------ *!

!* Primary: solid background *!
.content-wrapper .btn--primary {
    color: var(--btn-primary-text, #fff);
    background-color: var(--btn-primary-bg, #0b5fff);
    border-color: var(--btn-primary-border, #0b5fff);
}
.content-wrapper .btn--primary:hover:not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-hover, #084bd6);
    border-color: var(--btn-primary-border-hover, #084bd6);
}
.content-wrapper .btn--primary:active:not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-active, #073eb1);
    border-color: var(--btn-primary-border-active, #073eb1);
}

!* Secondary: subtle background *!
.content-wrapper .btn--secondary {
    color: var(--btn-secondary-text, #17324a);
    background-color: var(--btn-secondary-bg, #f0f4f8);
    border-color: var(--btn-secondary-border, #d0dae4);
}
.content-wrapper .btn--secondary:hover:not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-hover, #e6edf4);
    border-color: var(--btn-secondary-border-hover, #c3cfdb);
}

!* Outline: transparent bg + stronger border *!
.content-wrapper .btn--outline {
    color: var(--btn-outline-text, #0b5fff);
    background-color: transparent;
    border-color: var(--btn-outline-border, currentColor);
}
.content-wrapper .btn--outline:hover:not([aria-disabled="true"]) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

!* Danger: destructive actions *!
.content-wrapper .btn--danger {
    color: var(--btn-danger-text, #fff);
    background-color: var(--btn-danger-bg, #c62828);
    border-color: var(--btn-danger-border, #c62828);
}
.content-wrapper .btn--danger:hover:not([aria-disabled="true"]) {
    background-color: var(--btn-danger-bg-hover, #a61717);
    border-color: var(--btn-danger-border-hover, #a61717);
}

!* Link-style button: looks like a link but behaves like a button *!
.content-wrapper .btn--link {
    color: var(--btn-link-text, #0b5fff);
    background-color: transparent;
    border-color: transparent;
    padding: 0;                          !* link buttons often have tighter padding *!
    text-decoration: underline;          !* non-color cue *!
}
.content-wrapper .btn--link:hover:not([aria-disabled="true"]) {
    text-decoration-thickness: 2px;      !* tactile *!
}

!* Sizes *!
.content-wrapper .btn--sm {
    font-size: calc(var(--control-font-size) * 0.875);
    padding: calc(var(--control-padding-y) * 0.75) calc(var(--control-padding-x) * 0.75);
    min-height: 36px;
}
.content-wrapper .btn--lg {
    font-size: calc(var(--control-font-size) * 1.125);
    padding: calc(var(--control-padding-y) * 1.25) calc(var(--control-padding-x) * 1.25);
    min-height: 48px;
}

!* Reduced Motion *!
@media (prefers-reduced-motion: reduce) {
    .content-wrapper button,
    .content-wrapper .btn {
        transition: none;
        transform: none;
    }
}

!* High Contrast / Forced Colors (Windows High Contrast mode) *!
@media (forced-colors: active) {
    .content-wrapper button,
    .content-wrapper .btn {
        !* Let the OS pick readable colors *!
        color: ButtonText;
        background-color: ButtonFace;
        border-color: ButtonText;
    }
    .content-wrapper button:focus-visible,
    .content-wrapper .btn:focus-visible {
        outline-color: Highlight;
    }
    .content-wrapper .btn--link {
        color: LinkText;
        text-decoration: underline;
    }
}

!* Optional: dark theme tokens *!
@media (prefers-color-scheme: dark) {
    .content-wrapper {
        --control-bg: #1f2937;
        --control-text-color: #f8fafc;
        --control-border-color: #334155;
        --control-bg-hover: #0f172a;
        --control-border-color-hover: #3b82f6;

        --btn-primary-bg: #2563eb;
        --btn-primary-text: #fff;
        --btn-primary-border: #2563eb;
        !* ... add other dark variants as needed *!
    }
}

*/


/* Container for read only data after search */
.data-grid {
    display: grid;
    grid-template-columns: max-content 1fr; /* label column fits content, value takes the rest */
    gap: 4px 12px; /* row gap / column gap */
    align-items: start;
    font-size: 0.9rem;         /* slightly smaller footprint */
    line-height: 1.3;
}

/* Label + value styling */
.data-label {
    color: #333;
    font-weight: 600;
}

.data-value {
    color: #222;
}

/* Make values compact and ellipsize when too long */
.data-value.truncate {
    display: inline-block;      /* needed for text-overflow */
    max-width: 100%;            /* respect grid width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: a subtle divider between rows */
.data-grid-row {
    display: contents;          /* each row uses the grid columns without extra wrappers */
}

/* Optional: keyboard copy-friendly focus for values (if tabindex added) */
.data-value[tabindex="0"]:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 2px;
}



.compact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.9rem;
    line-height: 1.3;
}

.chip {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}

.chip .chip-label {
    color: #666;
    font-weight: 600;
}

.chip .chip-value {
    color: #222;
}

.chip .chip-value.truncate {
    max-width: 20ch;         /* tune per layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.data-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 0.9rem;
    line-height: 1.3;
}

.data-dl dt {
    font-weight: 600;
    color: #333;
}

.data-dl dd {
    margin: 0;
    color: #222;
}

.data-dl dd.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Container holds rows stacked vertically */
.data-flex {
    display: flex;
    flex-direction: column;
    gap: 6px;               /* space between rows */
    font-size: 0.8rem;      /* compact */
    line-height: 1.3;
}

/* One row: label + value */
.data-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Label column: fixed-ish width; tune with the variable below */
.data-label {
    flex: 0 0 var(--label-width, 220px); /* no grow, no shrink, fixed basis */
    color: #333;
    font-weight: 600;
}

/* Value column: take remaining space */
.data-value {
    flex: 1 1 auto;
    color: #222;
}

/* Truncate long values when space is tight */
.data-value.truncate,
.data-value .truncate {
    display: inline-block;      /* enable text-overflow */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make readonly inputs visually match text */
/*.form-value-readonly {
    border: none;
    background: transparent;
    padding: 0;
    color: #222;
    width: 100%;
}*/

/* Optional: keyboard copy-friendly focus style */
[data-focusable="true"]:focus,
.data-value [tabindex="0"]:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Responsive: stack label above value on narrow screens */
@media (max-width: 600px) {
    .data-row {
        flex-direction: column;
        gap: 4px;
    }
    .data-label {
        flex: none; /* stop fixed width in stacked layout */
    }
}




/*Login page future*/

.login-container {
    max-width: 750px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.login-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #0369a1;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(3,105,161,0.3);
}

.login-btn:hover {
    background-color: #075985;
}

.login-btn:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

.disclaimer {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #374151;
}

.disclaimer-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}