/********** Template CSS **********
    
d7863b - orange
70c3c9 - teal
    
Original   
     --primary: #5b66eb;
    --secondary: #181d2e;
    --light: #70c3c9;
    --dark: #141414;
    --dark-color: #141414;
    --white:#ffffff;
    --black:#000000;
    --primary-color: #5b66eb;
    --secondary-color: #181d2e;
    --success-color:#38ef7d;
    --danger-color:#e52d27;
    --warning-color:#FFD200;
    --info-color:#6dd5ed;
    
    
    */




/* MENU ADJUSTMENTS*/
/* --- Sidebar submenu polish (keeps Bootstrap hide/show working) --- */

/* Keep dropdown-menu hidden by Bootstrap unless .show is applied */
.sidebar .navbar-nav .dropdown-menu {
    padding: .15rem 0 .25rem 0;
    margin: .15rem 0 0 0;
    background: transparent !important;
    border: 0 !important;
    /* nested look */
    padding-left: 1.5rem;
    border-left: 2px solid rgba(255,255,255,.12);
}

    /* tighter submenu items */
    .sidebar .navbar-nav .dropdown-menu .dropdown-item {
        padding: .30rem .55rem;
        margin: 0;
        border-radius: .45rem;
        font-size: .9rem;
        line-height: 1.15;
        color: rgba(255,255,255,.85);
        background: transparent;
        transition: background-color .15s ease, color .15s ease, transform .15s ease;
    }

        /* hover */
        .sidebar .navbar-nav .dropdown-menu .dropdown-item:hover,
        .sidebar .navbar-nav .dropdown-menu .dropdown-item:focus {
            background: rgba(255,255,255,.12);
            color: #fff;
            transform: translateX(2px);
        }

/* parent items: tighten spacing too */
.sidebar .navbar-nav .nav-link {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

    .sidebar .navbar-nav .nav-link.dropdown-toggle {
        font-weight: 600;
    }








/* kill the inner scroll area created by ScrollBars/Height on TabContainer */
.ajax__tab_body,
.ajax__tab_panel {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* keep horizontal scroll for long tab headers only */
.ajax__tab_header {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .ajax__tab_header::-webkit-scrollbar {
        width: 0;
        height: 0;
    }


/* Keep the page from horizontal scrolling. html only - overflow-x:hidden on
   BODY makes body the containing scroll context while html stays the actual
   scroller, which silently disables every page-level position:sticky
   (e.g. the admin_staffer_application decision rail). html's clip alone
   prevents the horizontal scrollbar just the same. */
html {
    overflow-x: hidden;
}

/* 1) Fix �row hangs outside� when container has px-2 but rows use g-4 */
.container-fluid.px-2 > .row,
.container-fluid.pt-2.px-2 > .row,
.container-fluid.pt-4.px-4 > .row {
    /* make row gutters smaller so the negative margins fit inside container padding */
    --bs-gutter-x: 1rem; /* half of this (0.5rem) matches px-2 padding */
}

/* Ensure any tab container/body can't create horizontal overflow */
.ajax__tab_container,
.ajax__tab_panel,
.ajax__tab_body {
    width: 100% !important;
    max-width: 100%;
    overflow-x: hidden;
}

/* Hide the tiny horizontal scrollbar in the tab header but keep sideways scroll if needed */
.ajax__tab_header {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .ajax__tab_header::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* 2) If your template keeps a left sidebar margin on mobile, remove it */
@media (max-width: 991.98px) {
    .content {
        margin-left: 0 !important;
    }
    /* or whatever your main wrapper class is */
    /* if you have a fixed/vertical nav, keep it off-canvas on mobile */
    .sidebar, .navbar-vertical {
        left: -260px;
        position: fixed;
    }
}

/* Tables: allow horizontal scroll inside the table wrapper only (prevents page overflow) */
.table-responsive {
    overflow-x: auto;
}





/* Card polish */
.section-card {
    box-shadow: 0 1px 2px rgba(33,37,41,.06);
    border: 1px solid #e9ecef;
}

/* Inline groups for address and phone */
.triple-inline, .phone-group {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

    .triple-inline > .form-control {
        flex: 1 1 0;
        min-width: 0;
    }

    .phone-group .form-control {
        flex: 0 0 auto;
    }

        .phone-group .form-control.ac {
            width: 4.5rem;
            text-align: center;
        }

        .phone-group .form-control.first {
            width: 5.25rem;
            text-align: center;
        }

        .phone-group .form-control.last {
            width: 6.5rem;
            text-align: center;
        }

.input-link {
    margin-left: .5rem;
    font-size: .875rem;
}

/* Labels above grouped inputs */
.label-above {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .25rem;
    display: block;
    color: #495057;
}

/* Tidy buttons in header */
.inline-actions .btn {
    min-width: 9rem;
}

/* Keep floating labels visible when used */
.form-floating > label {
    z-index: 3;
}

/* Small helper notes */
.field-note {
    font-size: .8rem;
    color: #6c757d;
}

/* Tighten grid gutters slightly on very small screens */
@media (max-width: 576px) {
    .phone-group {
        gap: .4rem;
    }
}


































:root {
    --primary: #d7863b; /* orange (repointed to teal in the design-system block below) */
    --secondary: #0C3A3D; /* deep pine - chrome surfaces (sidebar/top bar/badges). Was #70c3c9 light teal, which put white nav text at ~2:1 contrast on every page */
    --light: #eeeeee; /* light grey */
    --dark: #444444; /* dark grey */
    --dark-color: #141414; /* dark grey 2 */
    --white: #ffffff; /* white */
    --black: #000000; /* black */
    --primary-color: #444444; /* grey */
    --secondary-color: #181d2e; /* dark blue??? */
    --success-color: var(--chq-good); /* AA green (was neon #5ad98a) */
    --danger-color: var(--chq-bad); /* AA red (was #e52d27) */
    --warning-color: var(--chq-sun); /* amber FILL; .text-warning uses --chq-warn for AA text */
    --info-color: var(--chq-teal-600); /* teal (was #6dd5ed) */
}
a {
    color: var(--primary);
    text-decoration: none;
}

.bg-primary{
    background-color: var(--primary)!important;
}

.bg-secondary{
    background-color: var(--secondary)!important;
}

.bg-white{
    background-color: var(--white);
}

.bg-light {
    background-color: var(--light);
}

.bg-dark {
    background-color: var(--dark);
}

.bg-dark2 {
    background-color: var(--dark);
}

.text-primary{
    color: var(--primary-color)!important;
}

.text-success{color: var(--success-color)!important;}
.text-danger{color: var(--danger-color)!important;}
.text-warning{color: var(--chq-warn)!important;} /* AA dark amber for TEXT (fill amber fails as text) */
.text-info{color: var(--info-color)!important;}
.text-dark{color: var(--dark-color)!important;}
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
body{
    font-family: "Inter", sans-serif;
    /* Match the content canvas so page load and overscroll never flash near-black
       behind the light app (was var(--dark-color) #141414). */
    background-color: var(--chq-canvas);
}

/*** Sidebar Panel ***/
.header-left-profile h6{
    color: var(--white);
}
.header-left-profile img{
    width: 40px;
    height: 40px;
    border:2px solid var(--primary);
}
.header-left-profile span{
    color: var(--light);
}
.logo-main h3, .logo-main .h3{padding-top: 10px;padding-bottom: 1px;text-transform: uppercase;font-weight: 600;transition: .5s;}
.logo-main .logo-sub{padding-bottom: 14px;text-transform: uppercase;font-weight: 500;font-size: .8rem;letter-spacing: 1px;opacity: .85;line-height: 1;}
/* No letter-spacing grow on hover: it widened the wordmark past the sidebar
   and clipped the trailing letters. */
.dropdown-item {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    transition: background-color var(--chq-dur-2, .16s) ease, color var(--chq-dur-2, .16s) ease;
}
/*** Top Bar ***/
.top-search .form-control{
    background-color: var(--white);
}

/*** Main Content ***/
.card-default p, .card-default .small, small, .card-default span{color: var(--dark);}
.smalllight, smalllight span{color: var(--light);}
.card-default h1, .card-default h2, .card-default h3, .card-default h4, .card-default h5, .card-default h6, .card-default dl, ol, ul, .card-default .list-group-item, .card-default .form-label, .card-default label, .col-form-label{color: var(--dark);}
.card-default h4{font-weight: 600;}
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(34,128,138,0.045);   /* faint teal wash, not grey */
    --bs-table-active-bg: rgba(34,128,138,0.09);
    --bs-table-hover-bg: rgba(34,128,138,0.075);      /* teal-wash hover */
    width: 100%;
    margin-bottom: 1rem;
    color: var(--chq-body);
    vertical-align: top;
    border-color: var(--chq-line);                    /* hairline, not black */
}
.table>:not(caption)>*>*{color:var(--chq-ink)!important;}


/*** Buttons ***/
.btn-success{background-color: var(--chq-good); border-color: var(--chq-good); color: #fff;}
.btn-success:hover, .btn-success:focus{background-color: #126A33; border-color: #126A33; color: #fff;}

.btn-danger{background-color: var(--chq-bad); border-color: var(--chq-bad); color: #fff;}
.btn-danger:hover, .btn-danger:focus{background-color: #8C1C12; border-color: #8C1C12; color: #fff;}

.btn-warning{background-color: var(--chq-sun); border-color: var(--chq-sun); color: #3d2708;} /* dark text on amber */
.btn-warning:hover, .btn-warning:focus{background-color: #CE8B24; border-color: #CE8B24; color: #3d2708;}

.btn-info{background-color: var(--chq-teal-600); border-color: var(--chq-teal-600); color: #fff;}
.btn-info:hover, .btn-info:focus{background-color: var(--chq-teal-700); border-color: var(--chq-teal-700); color: #fff;}

/*** BG Colors ***/
.bg-success{background-color: var(--success-color)!important;}
.bg-danger{background-color: var(--danger-color)!important;}
.bg-warning{background-color: var(--warning-color)!important;}
.bg-info{background-color: var(--info-color)!important;}
.bg-dark{background-color: var(--dark-color)!important;}

/*** Calender ***/
.bootstrap-datetimepicker-widget table th, .bootstrap-datetimepicker-widget table td.day{
    height: 30px;
    line-height: 30px;
    width: 30px;
    transition: .5s;
}
    .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover, .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
        background-color: rgba(109, 213, 237, .7);
    }

/*** Accordions ***/
.accordion{border-color: var(--primary);--bs-accordion-border-color:var(--dark);--bs-accordion-color:var(--white);--bs-accordion-btn-icon:url('../images/arrow-down.svg');--bs-accordion-btn-active-icon:url('../images/arrow-down-active.svg');}
.accordion-button{background-color: var(--primary);border-color: var(--primary);color: var(--white);}
.accordion-button:not(.collapsed){background-color: var(--primary);color: var(--white);box-shadow: none;}
.accordion-button::after{color: var(--white);}
.accordion-button:focus{box-shadow: none;}

/*** Helper Classes ***/
.border-bottom {
    border-bottom: solid 1px var(--light) !important;
}
.color-primary {
  color: var(--primary-color)!important;
}

.color-secondary {
  color: var(--secondary-color) !important;
}

.color-white {
  color: var(--white)!important;
}

.color-black {
  color: var(--black)!important;
}

/* .btn-primary is fully defined via Bootstrap variables in the design-system
   section at the end of this file (covers hover/active/focus/disabled). */

.z-index-1{z-index: 1;}
.z-index-2{z-index: 2;}
.z-index-3{z-index: 3;}
.z-index-4{z-index: 4;}
.z-index-5{z-index: 5;}
/*-------------------------------------------------
    [ ## Font Size ]
*/
.fts-13 {
  font-size: 13px;
}

.fts-15 {
  font-size: 15px;
}

.fts-18 {
  font-size: 18px;
}

.fts-20 {
  font-size: 20px;
}

.fts-25 {
  font-size: 25px;
}

.fts-30 {
  font-size: 30px;
}

.fts-35 {
  font-size: 35px;
}

.fts-40 {
  font-size: 40px;
}

.fts-45 {
  font-size: 45px;
}

.fts-50 {
  font-size: 50px;
}

.fts-60 {
  font-size: 60px;
}

.fts-65 {
  font-size: 65px;
}

.fts-70 {
  font-size: 70px;
}

.fts-75 {
  font-size: 75px;
}

/*--------------------------------------------------------------
# Text Alignment
--------------------------------------------------------------*/
.txt-left{text-align: left;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}

/*--------------------------------------------------------------
# Heights and Widths
--------------------------------------------------------------*/

/* Width Pixels */

.width-1px {width: 1px}
.width-2px {width: 2px}
.width-3px {width: 3px}
.width-4px {width: 4px}
.width-5px {width: 5px}
.width-6px {width: 6px}
.width-7px {width: 7px}
.width-8px {width: 8px}
.width-9px {width: 9px}
.width-10px {width: 10px}
.width-80px {width: 80px}
.width-90px {width: 90px}
.width-100px {width: 100px}
.width-150px {width: 150px}
.width-200px {width: 200px}
.width-250px {width: 250px}
.width-300px {width: 300px}
.width-350px {width: 350px}
.width-400px {width: 400px}
.width-450px {width: 450px}
.width-500px {width: 500px!important}
.width-550px {width: 550px}
.width-600px {width: 600px}
.width-650px {width: 650px!important}
.width-700px {width: 700px}
.width-800px {width: 800px}

/* Width Percentage */

.width-10-percent {width: 10% !important}
.width-20-percent {width: 20% !important}
.width-30-percent {width: 30% !important}
.width-40-percent {width: 40% !important}
.width-50-percent {width: 50% !important}
.width-60-percent {width: 60% !important}
.width-70-percent {width: 70% !important}
.width-80-percent {width: 80% !important}
.width-90-percent {width: 90% !important}
.width-100-percent {width: 100% !important}
.width-auto {width:auto !important}
.max-width-100 {max-width: 100%}

/* Minimum Width */

.min-width-100px {min-height: 100px}
.min-width-200px {min-height: 200px}
.min-width-300px {min-height: 300px}
.min-width-400px {min-height: 400px}
.min-width-500px {min-height: 500px}
.min-width-600px {min-height: 600px}
.min-width-700px {min-height: 700px}

/* View Width */

.view-width-100vh{width: 100vh;}

/* Height Pixels */

.height-1px {height: 1px!important}
.height-2px {height: 2px!important}
.height-3px {height: 3px!important}
.height-4px {height: 4px!important}
.height-5px {height: 5px!important}
.height-6px {height: 6px!important}
.height-7px {height: 7px!important}
.height-8px {height: 8px!important}
.height-9px {height: 9px!important}
.height-10px {height: 10px!important}
.height-80px {height: 80px}
.height-90px {height: 90px}
.height-100px {height: 100px}
.height-150px {height: 150px}
.height-200px {height: 200px}
.height-250px {height: 250px}
.height-300px {height: 300px;}
.height-350px {height: 350px}
.height-400px {height: 400px}
.height-450px {height: 450px}
.height-500px {height: 500px!important;}
.height-550px {height: 550px}
.height-600px {height: 600px}
.height-650px {height: 650px!important;}
.height-700px {height: 700px}
.height-800px {height: 800px}

/* Height Percentage */

.height-10-percent {height: 10%}
.height-20-percent {height: 20%}
.height-30-percent {height: 30%}
.height-40-percent {height: 40%}
.height-50-percent {height: 50%}
.height-60-percent {height: 60%}
.height-70-percent {height: 70%}
.height-80-percent {height: 80%}
.height-90-percent {height: 90%}
.height-100-percent {height: 100% !important}
.height-auto {height:auto !important}
.max-height-100 {max-height: 100%}

/* Minimum Heights */

.min-height-100px {min-height: 100px}
.min-height-200px {min-height: 200px}
.min-height-300px {min-height: 300px!important;}
.min-height-400px {min-height: 400px}
.min-height-500px {min-height: 500px}
.min-height-600px {min-height: 600px}
.min-height-700px {min-height: 700px}
.min-height-800px {min-height: 800px}
.min-height-900px {min-height: 900px}
.min-height-100vh {min-height: 100vh}

/* Hero Heights  */

.xs-screen {height:300px;}
.sm-screen {height:400px;}
.md-screen {height:600px;}
.lg-screen {height:700px;}
.xl-screen {height:800px;}
.xxl-screen{height: 1000px;}

/* View Heights */

.view-height-100vh{height: 100vh!important;}

/* Borders */

.br-0{border: 0!important;}


/*-------------------------------------------------
    [ ## Margin Element ]
*/
.mr-0 {
  margin: 0;
}

.mrt-0 {
  margin-top: 0;
}

.mrb-0 {
  margin-bottom: 0!important;
}

.mrl-0 {
  margin-left: 0;
}

.mrr-0 {
  margin-right: 0;
}

.mrt-5 {
  margin-top: 5px;
}

.mrb-5 {
  margin-bottom: 5px;
}

.mrl-5 {
  margin-left: 5px;
}

.mrr-5 {
  margin-right: 5px;
}

.mrt-10 {
  margin-top: 10px;
}

.mrb-10 {
  margin-bottom: 10px;
}

.mrl-10 {
  margin-left: 10px;
}

.mrr-10 {
  margin-right: 10px;
}

.mrt-15 {
  margin-top: 15px;
}

.mrb-15 {
  margin-bottom: 15px!important;
}

.mrl-15 {
  margin-left: 15px;
}

.mrr-15 {
  margin-right: 15px;
}

.mrt-20 {
  margin-top: 20px;
}

.mrb-20 {
  margin-bottom: 20px!important;
}

.mrl-20 {
  margin-left: 20px;
}

.mrr-20 {
  margin-right: 20px;
}

.mrt-25 {
  margin-top: 25px;
}

.mrb-25 {
  margin-bottom: 25px;
}

.mrl-25 {
  margin-left: 25px;
}

.mrr-25 {
  margin-right: 25px;
}

.mrt-30 {
  margin-top: 30px!important;
}

.mrb-30 {
  margin-bottom: 30px;
}

.mrl-30 {
  margin-left: 30px;
}

.mrr-30 {
  margin-right: 30px;
}

.mrt-35 {
  margin-top: 35px;
}

.mrb-35 {
  margin-bottom: 35px;
}

.mrl-35 {
  margin-left: 35px;
}

.mrr-35 {
  margin-right: 35px;
}

.mrt-40 {
  margin-top: 40px;
}

.mrb-40 {
  margin-bottom: 40px;
}

.mrl-40 {
  margin-left: 40px;
}

.mrr-40 {
  margin-right: 40px;
}

.mrt-45 {
  margin-top: 45px;
}

.mrb-45 {
  margin-bottom: 45px;
}

.mrl-45 {
  margin-left: 45px;
}

.mrr-45 {
  margin-right: 45px;
}

.mrt-50 {
  margin-top: 50px;
}

.mrb-50 {
  margin-bottom: 50px;
}

.mrl-50 {
  margin-left: 50px;
}

.mrr-50 {
  margin-right: 50px;
}

.mrt-55 {
  margin-top: 55px;
}

.mrb-55 {
  margin-bottom: 55px;
}

.mrl-55 {
  margin-left: 55px;
}

.mrr-55 {
  margin-right: 55px;
}

.mrt-60 {
  margin-top: 60px;
}

.mrb-60 {
  margin-bottom: 60px;
}

.mrl-60 {
  margin-left: 60px;
}

.mrr-60 {
  margin-right: 60px;
}

.mrt-75 {
  margin-top: 75px;
}

.mrt-65 {
  margin-top: 65px;
}

.mrb-65 {
  margin-bottom: 65px;
}

.mrl-65 {
  margin-left: 65px;
}

.mrr-65 {
  margin-right: 60px;
}

.mrt-70 {
  margin-top: 70px;
}

.mrb-70 {
  margin-bottom: 70px;
}

.mrl-70 {
  margin-left: 70px;
}

.mrr-70 {
  margin-right: 70px;
}

.mrt-75 {
  margin-top: 75px;
}

.mrb-75 {
  margin-bottom: 75px;
}

.mrl-75 {
  margin-left: 75px;
}

.mrr-75 {
  margin-right: 75px;
}

.mrt-80 {
  margin-top: 80px;
}

.mrb-80 {
  margin-bottom: 80px;
}

.mrb-85 {
  margin-bottom: 85px;
}

.mrl-80 {
  margin-left: 80px;
}

.mrr-80 {
  margin-right: 80px;
}

.mrt-90 {
  margin-top: 90px;
}

.mrb-90 {
  margin-bottom: 90px;
}

.mrl-90 {
  margin-left: 90px;
}

.mrr-90 {
  margin-right: 90px;
}

.mrt-100 {
  margin-top: 100px;
}
.mrt-150 {
  margin-top: 150px;
}

.mrb-100 {
  margin-bottom: 100px;
}

.mrl-100 {
  margin-left: 100px;
}

.mrr-100 {
  margin-right: 100px;
}

.mrt-105 {
  margin-top: 105px;
}

.mrb-105 {
  margin-bottom: 105px;
}

.mrl-105 {
  margin-left: 105px;
}

.mrr-105 {
  margin-right: 105px;
}

.mrt-120 {
  margin-top: 120px;
}

.mrb-120 {
  margin-bottom: 120px;
}
@media only screen and (max-width: 991px) {
  .mrb-120 {
    margin-bottom: 100px;
  }
}

.mrl-120 {
  margin-left: 120px;
}

.mrr-120 {
  margin-right: 120px;
}

.mrb-145 {
  margin-bottom: 145px;
}

.mrt-150 {
  margin-top: 150px;
}

.mrt-200 {
  margin-top: 200px;
}

.mrb-150 {
  margin-bottom: 150px;
}

.mrb-155 {
  margin-bottom: 155px;
}

.mrb-170 {
  margin-bottom: 170px;
}

.mrb-175 {
  margin-bottom: 175px;
}

.mrl-150 {
  margin-left: 150px;
}

.mrr-150 {
  margin-right: 150px;
}

.mrb-185 {
  margin-bottom: 185px;
}

.mrb-190 {
  margin-bottom: 190px;
}

.mrb-195 {
  margin-bottom: 195px;
}

.mrb-200 {
  margin-bottom: 200px;
}

@media only screen and (max-width: 991px) {
  .md-mrt-60 {
    margin-top: 60px;
  }

  .md-mrb-60 {
    margin-bottom: 60px;
  }

  .md-mrt-55 {
    margin-top: 55px;
  }

  .md-mrb-55 {
    margin-bottom: 55px;
  }

  .md-mrt-50 {
    margin-top: 50px;
  }

  .md-mrb-50 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .ms-mrt-60 {
    margin-top: 60px;
  }

  .ms-mrb-60 {
    margin-bottom: 60px;
  }

  .ms-mrt-55 {
    margin-top: 55px;
  }

  .ms-mrb-55 {
    margin-bottom: 55px;
  }

  .ms-mrt-50 {
    margin-top: 50px;
  }

  .ms-mrb-50 {
    margin-bottom: 50px;
  }
}
/* Margin Top Negative Value */
.ml-t-5 {
  margin-top: -5px;
}

.ml-t-8 {
  margin-top: -8px;
}

.ml-t-058p {
  margin-top: -0.58%;
}

.ml-t-10 {
  margin-top: -10px;
}

.ml-t-15 {
  margin-top: -15px;
}

.ml-t-20 {
  margin-top: -20px;
}

.ml-t-25 {
  margin-top: -25px;
}

.ml-t-30 {
  margin-top: -30px;
}

.ml-t-35 {
  margin-top: -35px;
}

.ml-t-40 {
  margin-top: -40px;
}

.ml-t-45 {
  margin-top: -45px;
}

.ml-t-50 {
  margin-top: -50px;
}

.ml-t-55 {
  margin-top: -55px;
}

.ml-t-60 {
  margin-top: -60px;
}

.ml-t-75 {
  margin-top: -75px;
}

.ml-t-90 {
  margin-top: -90px;
}

.ml-t-105 {
  margin-top: -105px;
}

.ml-t-120 {
  margin-top: -120px;
}

.ml-t-135 {
  margin-top: -135px;
}

.ml-t-150 {
  margin-top: -150px;
}

.ml-t-165 {
  margin-top: -165px;
}

.ml-t-180 {
  margin-top: -180px;
}

.ml-t-195 {
  margin-top: -195px;
}

.ml-t-210 {
  margin-top: -210px;
}

.ml-t-225 {
  margin-top: -225px;
}

/* Margin bottom Negtive value */
.ml-b-5 {
  margin-bottom: -5px;
}

.ml-b-10 {
  margin-bottom: -10px;
}

.ml-b-15 {
  margin-bottom: -15px;
}

.ml-b-20 {
  margin-bottom: -20px;
}

.ml-b-25 {
  margin-bottom: -25px;
}

.ml-b-30 {
  margin-bottom: -30px;
}

.ml-b-35 {
  margin-bottom: -35px;
}

.ml-b-40 {
  margin-bottom: -40px;
}

.ml-b-45 {
  margin-bottom: -45px;
}

.ml-b-50 {
  margin-bottom: -50px;
}

.ml-b-55 {
  margin-bottom: -55px;
}

.ml-b-60 {
  margin-bottom: -60px;
}

.ml-b-75 {
  margin-bottom: -75px;
}

.ml-b-80 {
  margin-bottom: -80px;
}

.ml-b-90 {
  margin-bottom: -90px;
}

.ml-b-105 {
  margin-bottom: -105px;
}

.ml-b-120 {
  margin-bottom: -120px;
}

.ml-b-135 {
  margin-bottom: -135px;
}

.ml-bp-0933 {
  margin-bottom: -0.933%;
}

/*-------------------------------------------------
    [ ## Padding Element ]
*/
.pd-0 {
  padding: 0!important;
}

.pd-t-0 {
  padding-top: 0!important;
}

.pd-b-0 {
  padding-bottom: 0!important;
}

.pd-l-0 {
  padding-left: 0!important;
}

.pd-r-0 {
  padding-right: 0!important;
}

.pd-t-5 {
  padding-top: 5px;
}

.pd-b-5 {
  padding-bottom: 5px;
}

.pd-l-5 {
  padding-left: 5px;
}

.pd-r-5 {
  padding-right: 5px;
}

.pd-t-10 {
  padding-top: 10px;
}

.pd-b-10 {
  padding-bottom: 10px;
}

.pd-l-10 {
  padding-left: 10px;
}

.pd-r-10 {
  padding-right: 10px;
}

.pd-t-15 {
  padding-top: 15px;
}

.pd-b-15 {
  padding-bottom: 15px;
}

.pd-l-15 {
  padding-left: 15px;
}

.pd-r-15 {
  padding-right: 15px;
}

.pd-t-20 {
  padding-top: 20px;
}

.pd-b-20 {
  padding-bottom: 20px;
}

.pd-l-20 {
  padding-left: 20px;
}

.pd-r-20 {
  padding-right: 20px;
}

.pd-t-25 {
  padding-top: 25px;
}

.pd-b-25 {
  padding-bottom: 25px;
}

.pd-l-25 {
  padding-left: 25px;
}

.pd-r-25 {
  padding-right: 25px;
}

.pd-t-30 {
  padding-top: 30px;
}

.pd-b-30 {
  padding-bottom: 30px;
}

.pd-l-30 {
  padding-left: 30px;
}

.pd-r-30 {
  padding-right: 30px;
}

.pd-t-35 {
  padding-top: 35px;
}

.pd-b-35 {
  padding-bottom: 35px;
}

.pd-l-35 {
  padding-left: 35px;
}

.pd-r-35 {
  padding-right: 35px;
}

.pd-t-40 {
  padding-top: 40px;
}

.pd-b-40 {
  padding-bottom: 40px;
}

.pd-l-40 {
  padding-left: 40px;
}

.pd-r-40 {
  padding-right: 40px;
}

.pd-t-45 {
  padding-top: 45px;
}

.pd-b-45 {
  padding-bottom: 45px;
}

.pd-l-45 {
  padding-left: 45px;
}

.pd-r-45 {
  padding-right: 45px;
}

.pd-t-50 {
  padding-top: 50px;
}

.pd-b-50 {
  padding-bottom: 50px;
}

.pd-l-50 {
  padding-left: 50px;
}

.pd-r-50 {
  padding-right: 50px;
}

.pd-t-60 {
  padding-top: 60px;
}

.pd-b-60 {
  padding-bottom: 60px;
}

.pd-l-60 {
  padding-left: 60px;
}

.pd-r-60 {
  padding-right: 60px;
}

.pd-t-70 {
  padding-top: 70px;
}

.pd-b-70 {
  padding-bottom: 70px;
}

.pd-l-70 {
  padding-left: 70px;
}

.pd-r-70 {
  padding-right: 70px;
}

.pd-t-75 {
  padding-top: 75px;
}

.pd-b-75 {
  padding-bottom: 75px;
}

.pd-l-75 {
  padding-left: 75px;
}

.pd-r-75 {
  padding-right: 75px;
}

.ptb-80 {
  padding: 80px 0;
}

.pd-t-80 {
  padding-top: 80px;
}

@media (min-width:430px) and (max-width:932px) {
  .xs-pd-t-80{padding-top: 80px;}
  .xs-pd-b-80{padding-bottom: 80px;}
}

.pd-b-80 {
  padding-bottom: 80px;
}

.pd-l-80 {
  padding-left: 80px;
}

.pd-r-80 {
  padding-right: 80px;
}

.pd-t-90 {
  padding-top: 90px;
}

.pd-b-90 {
  padding-bottom: 90px;
}

.pd-l-90 {
  padding-left: 90px;
}

.pd-r-90 {
  padding-right: 90px;
}

.pd-t-100 {
  padding-top: 100px;
}

.pd-l-100 {
  padding-left: 100px;
}

.pd-r-100 {
  padding-right: 100px;
}

.pd-t-105 {
  padding-top: 105px;
}

.pd-b-105 {
  padding-bottom: 105px;
}

.pd-l-105 {
  padding-left: 105px;
}

.pd-r-105 {
  padding-right: 105px;
}

.pd-t-130 {
  padding-top: 130px;
}

.pd-b-130 {
  padding-bottom: 130px;
}

.pd-l-130 {
  padding-left: 130px;
}

.pd-r-130 {
  padding-right: 130px;
}

.ptb-130 {
  padding: 130px 0;
}

.pd-t-135 {
  padding-top: 135px;
}

.pd-b-135 {
  padding-bottom: 135px;
}

.pd-l-135 {
  padding-left: 135px;
}

.pd-r-135 {
  padding-right: 135px;
}

.pd-t-140 {
  padding-top: 140px;
}

.pd-b-140 {
  padding-bottom: 140px;
}

.pd-l-140 {
  padding-left: 140px;
}

.pd-r-140 {
  padding-right: 140px;
}

.pd-t-150 {
  padding-top: 150px;
}

.pd-b-150 {
  padding-bottom: 150px;
}

.pd-l-150 {
  padding-left: 150px;
}

.pd-r-150 {
  padding-right: 150px;
}

.pd-t-165 {
  padding-top: 165px;
}

.pd-b-165 {
  padding-bottom: 165px;
}

.pd-l-165 {
  padding-left: 165px;
}

.pd-r-165 {
  padding-right: 165px;
}

.pd-t-180 {
  padding-top: 180px;
}

.pd-b-170 {
  padding-bottom: 170px;
}

.pd-b-180 {
  padding-bottom: 180px;
}

.pd-l-180 {
  padding-left: 180px;
}

.pd-r-180 {
  padding-right: 180px;
}

.pd-t-195 {
  padding-top: 195px;
}

.pd-b-195 {
  padding-bottom: 195px;
}

.pd-l-195 {
  padding-left: 195px;
}

.pd-r-195 {
  padding-right: 195px;
}

.pd-t-200 {
  padding-top: 200px;
}

.pd-b-200 {
  padding-bottom: 200px!important;
}

.pd-l-200 {
  padding-left: 200px;
}

.pd-r-200 {
  padding-right: 200px;
}

.pd-t-205 {
  padding-top: 205px;
}

.pd-b-205 {
  padding-bottom: 205px;
}

.pd-l-205 {
  padding-left: 205px;
}

.pd-r-205 {
  padding-right: 205px;
}

.pd-t-210 {
  padding-top: 210px;
}

.pd-t-220 {
  padding-top: 220px;
}

.pd-b-220 {
  padding-bottom: 220px;
}

.pd-l-220 {
  padding-left: 220px;
}

.pd-r-220 {
  padding-right: 220px;
}

.pd-t-225 {
  padding-top: 225px;
}

.pd-b-225 {
  padding-bottom: 225px;
}

.pd-l-225 {
  padding-left: 225px;
}

.pd-r-225 {
  padding-right: 225px;
}

.pd-t-235 {
  padding-top: 235px;
}

.pd-b-235 {
  padding-bottom: 235px;
}

.pd-l-235 {
  padding-left: 235px;
}

.pd-r-235 {
  padding-right: 220px;
}

.pd-t-240 {
  padding-top: 240px;
}

.pd-t-255 {
  padding-top: 255px;
}

.pd-10{
  padding: 10px;
}
.pd-20{
  padding: 20px;
}
.pd-30{
  padding: 30px;
}
.pd-40{
  padding: 40px;
}
.pd-50{
  padding: 50px;
}
.pd-60{
  padding: 60px;
}
.pd-70{
  padding: 70px;
}
.pd-80{
  padding: 80px;
}
.pd-90{
  padding: 90px;
}
.pd-100{
  padding: 100px;
}
.help-block{display: block;}
.help-block.with-errors{
  padding-top: 0px;
  padding-bottom: 15px;
  color: #ff7575;
  text-align: left;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

/*** Top progress bar (shows only while navigating away — no full-screen flash) ***/
#ss-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--chq-teal-600), var(--chq-teal-500));
    box-shadow: 0 0 8px rgba(34, 128, 138, .5);
    z-index: 100000;
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
}
#ss-progress.active { opacity: 1; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-family: "Poppins", sans-serif;}


/*** Button ***/
.btn {
    /* was a sluggish blanket .5s on every property — snappy + only the props that change */
    transition: color var(--chq-dur-2, .16s) ease, background-color var(--chq-dur-2, .16s) ease,
                border-color var(--chq-dur-2, .16s) ease, box-shadow var(--chq-dur-2, .16s) ease,
                transform var(--chq-dur-1, .12s) ease;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Layout ***/

/*** Form Placeholder ***/

/* Placeholders: readable muted teal-grey (was var(--light) #eeeeee, which was
   nearly invisible on white inputs) */
::placeholder {
  color: var(--chq-muted);
  font-size: 14px;
  opacity: .75;
}

/* For Firefox */
input:-moz-placeholder {
  color: var(--chq-muted);
  font-size: 14px;
  opacity: .75;
}

textarea:-moz-placeholder {
  color: var(--chq-muted);
  font-size: 14px;
  opacity: .75;
}

/* For Internet Explorer (optional/legacy support) */
input:-ms-input-placeholder {
  color: var(--chq-muted);
  font-size: 14px;
  opacity: .75;
}

/* Quiet scrollbar that matches the light canvas (was dark navy + template orange) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--chq-canvas);
}

::-webkit-scrollbar-thumb {
    background-color: #A9C0BE; /* muted teal-grey */
    border-radius: 10px;
    border: 2px solid var(--chq-canvas);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #7D9C99;
    }

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background: var(--secondary);
    transition: 0.3s;
    z-index: 999;
    scrollbar-color: rgba(255,255,255,.35) transparent;
    scrollbar-width: thin;
}

/* Nudge the whole sidebar menu (wordmark + nav) left a few px so the
   "SUPER SUMMER" wordmark sits centered. Without this the brand's mx-4
   left margin left it ~24px from the left but only ~13px from the right
   (leaning right); -6px evens the gaps to ~18/19px. */
.sidebar .navbar {
    margin-left: -6px;
}

/* Webkit Browsers */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.28);
        border-radius: 10px;
    }

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.45);
}

.content {
    margin-left: 250px;
    min-height: 100vh;
    background: var(--chq-canvas);   /* light canvas (was the muddy #444 grey) */
    transition: 0.5s;
    /* Flex column so the footer can be pinned to the bottom on short pages
       instead of floating mid-viewport (see .site-footer margin-top:auto). */
    display: flex;
    flex-direction: column;
}

/* Pin the footer to the bottom of the content area. On pages tall enough to
   scroll it sits naturally after the content; on short pages the auto margin
   soaks up the leftover height so the grey footer bar rests at the bottom. */
.site-footer {
    margin-top: auto;
}

@media (min-width: 992px) {
    .sidebar {
        margin-left: 0;
    }

    .sidebar.open {
        margin-left: -250px;
    }

    .content {
        width: calc(100% - 250px);
    }

    .content.open {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        margin-left: -250px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    /* Off-canvas menu backdrop (mobile pass 2026-09-05). Before this the open
       menu covered the toggler and there was no way to dismiss it short of
       picking a page. master.js inserts .sidebar-backdrop while the menu is
       open; tapping it (or Escape) closes the menu. */
    .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 998;
        background: rgba(12, 58, 61, .45);
        opacity: 0; transition: opacity .25s ease;
    }
    .sidebar-backdrop.show { opacity: 1; }

    .content {
        width: 100%;
        margin-left: 0;
    }
}


/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
    padding: 7px 20px;
    color: rgba(255,255,255,.92);
    font-weight: 500;
    border-left: 3px solid transparent;
    border-radius: 0 30px 30px 0;
    margin-bottom: 10px;
}

/* Hover: a soft translucent wash rather than a hard bright-teal block.
   Active: keeps the solid teal so the current page still stands out. */
.sidebar .navbar .navbar-nav .nav-link:hover {
    color: var(--white);
    background: rgba(255,255,255,.10);
    border-color: var(--chq-sun);
}
.sidebar .navbar .navbar-nav .nav-link.active {
    color: var(--white);
    background: var(--chq-teal-600);
    border-color: var(--chq-sun);
}

.sidebar .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 40px;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
    background: rgba(255,255,255,.16);
}

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
    padding-left: 15px;
    border-radius: 0 5px 5px 0;
    color: var(--light);
}

.sidebar .navbar .dropdown-item:hover,
.sidebar .navbar .dropdown-item.active {
    background: rgba(255,255,255,.12);
    color: var(--white);
}

.content .navbar .navbar-nav .nav-link {
    margin-left: 25px;
    padding: 12px 0;
    color: var(--light);
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 40px;
}

.content .navbar .dropdown-item {
    color: var(--light);
}

.content .navbar .dropdown-item:hover,
.content .navbar .dropdown-item.active {
    background: rgba(255,255,255,.12);
    color: var(--white);
}

.content .navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 15px;
    }
}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
    transition: .5s;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}

.testimonial-carousel img{
  width: 100px!important;
  height: 100px;
}

.avatar-wrap img{
  width: 40px;
  height: 40px;
}

/*** Forms ***/

.authentication-form label{color: var(--dark)!important;}

/* ---- ASP.NET WebForms checkbox/radio shim --------------------------------
   <asp:CheckBox CssClass="form-check-input"> renders the class onto a wrapping
   <span> (ASP.NET puts CssClass on a span when set), so Bootstrap styles the
   span (an empty box) instead of the real <input> -- giving doubled / misaligned
   boxes. This neutralizes the wrapper span and applies the checkbox look to the
   actual <input> inside it, so every asp:CheckBox renders correctly site-wide.
   Plain <input class="form-check-input"> controls are untouched (input, not span). */
span.form-check-input {
    display: contents;          /* wrapper span no longer participates in layout */
    width: auto; height: auto;
    border: 0; background: none; box-shadow: none;
}
.form-check span.form-check-input > input[type="checkbox"],
.form-check span.form-check-input > input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
    float: left; margin-left: -1.5em; margin-top: .25em;
    width: 1em; height: 1em; vertical-align: top; cursor: pointer;
    background-color: #fff; background-repeat: no-repeat;
    background-position: center; background-size: contain;
    border: 1px solid rgba(0,0,0,.25); border-radius: .25em;
    print-color-adjust: exact;
}
.form-check span.form-check-input > input[type="radio"] { border-radius: 50%; }
.form-check span.form-check-input > input[type="checkbox"]:checked {
    background-color: var(--primary); border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check span.form-check-input > input[type="radio"]:checked {
    background-color: var(--primary); border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check span.form-check-input > input:focus {
    outline: 0; border-color: var(--chq-teal-500); box-shadow: 0 0 0 .25rem rgba(27,122,130,.25);
}

.form-check-input:checked{background-color: var(--primary);border-color: var(--primary);}

/* ====================================================================
   Site-wide: render EVERY checkbox as a toggle SWITCH (not a square box).
   The bare input[type="checkbox"] selector catches asp:CheckBox controls
   rendered with no CssClass (ASP.NET emits a bare <input>, so no class
   hook exists); the span selector keeps specificity over the shim rules
   above for asp:CheckBox with CssClass="form-check-input". Radios are
   intentionally untouched. Appended last so it overrides the
   checkbox-box rules above. */
input[type="checkbox"],
.form-check span.form-check-input > input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
    display: inline-block; float: none;
    width: 2em; height: 1.15em;
    margin: 0.1em 0.5em 0.1em 0;
    vertical-align: -0.2em;
    background-color: #cbd5e1;
    border: 0; border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.15em 1.15em;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    cursor: pointer;
}
input[type="checkbox"]:checked,
.form-check span.form-check-input > input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
input[type="checkbox"]:focus,
.form-check span.form-check-input > input[type="checkbox"]:focus {
    outline: 0; box-shadow: 0 0 0 .2rem rgba(27,122,130,.25);
}
input[type="checkbox"]:disabled,
.form-check span.form-check-input > input[type="checkbox"]:disabled {
    opacity: .45; cursor: not-allowed;
}
/* Switches do not need the extra Bootstrap form-switch left gutter now that the
   control carries its own width; keep label spacing tidy where form-switch is used. */
.form-switch .form-check-input { margin-left: 0; }
.form-switch { padding-left: 0; }


/* ============================================================================
   CampHQ Design System  (appended 2026-07 — loads last so it wins the cascade)
   ----------------------------------------------------------------------------
   "Water, Pine, Sun, Sand" — an evolution of the existing teal, deepened for
   contrast and warmed at the edges. See the published design direction.
   These --chq-* tokens are additive; components below are opt-in (.chq-*).
   The one global change is repointing --primary from the template's leftover
   orange (#d7863b) to an accessible teal, unifying the previously split
   teal-header / orange-body look through the variable the whole theme already
   reads. Revert by deleting this block.
   ========================================================================== */

/* TYPE SCALE (the law):
   Fraunces 600, sentence case, never uppercase:
     greeting title 1.65rem / section title 1.15rem / card heading 1.05rem
   Everything else Inter. Small caps labels: Inter 600 .72-.78rem uppercase.
   Numbers that align (counts, money, tables): font-variant-numeric: tabular-nums.
   Fraunces NAMES things; Inter OPERATES things; numbers never wobble. */

:root {
    /* Teal scale — anchors on the brand #4BAAB2, extends for depth + contrast */
    --chq-pine:      #0C3A3D; /* headings / ink */
    --chq-teal-700:  #155E63;
    --chq-teal-600:  #1B7A82; /* interactive fill — SAME value as --primary so there is exactly one primary teal (was #22808A, which competed with #1B7A82) */
    --chq-teal-500:  #2F98A0;
    --chq-brand:     #4BAAB2; /* existing brand teal — large fills / badges only */
    --chq-teal-100:  #DCEDED;
    --chq-teal-050:  #EEF6F5;
    /* Warm secondaries — Arkansas sun + sand, used sparingly */
    --chq-sun:       #E39A2E;
    --chq-sun-050:   #FBEFDA;
    --chq-coral:     #D9694A;
    /* Neutrals — biased warm-teal, never pure grey */
    --chq-sand:      #F4F0E8;
    --chq-linen:     #FBF9F4;
    --chq-ink:       #152C2B;
    --chq-body:      #33514F;
    --chq-muted:     #57726F;  /* AA (4.5:1) on white AND the warm linen/sand card surfaces */
    --chq-line:      #E4E6DF;
    --chq-canvas:    #ECF2F1;  /* light watery teal-grey — the content-area canvas (was dark #444) */
    /* Semantic — kept distinct from the accent */
    --chq-good:      #146C35; --chq-good-bg: #E7F4EC;  /* 5.75:1 on its -bg, 6.5:1 on white (review 2, R2-81) */
    --chq-warn:      #A64A08; --chq-warn-bg: #FBF0DA;  /* dark amber for text, 5.15:1 on its -bg (R2-81); --chq-sun is the fill */
    --chq-bad:       #B42318; --chq-bad-bg:  #F9E9E7;
    --chq-cancel:    #6D28D9; --chq-cancel-bg: #EDE9FE; /* cancelled / withdrawn (replaces per-page #7c3aed sets) */
    --chq-done:      #075985; --chq-done-bg:   #E0F2FE; /* complete / processed (replaces per-page #0ea5e9 sets) */
    /* Elevation + shape */
    --chq-shadow-sm: 0 1px 2px rgba(12,58,61,.06), 0 1px 3px rgba(12,58,61,.05);
    --chq-shadow-md: 0 6px 20px rgba(12,58,61,.09), 0 2px 6px rgba(12,58,61,.06);
    --chq-shadow-lg: 0 22px 50px rgba(12,58,61,.16), 0 6px 16px rgba(12,58,61,.08);
    --chq-r-sm: 8px; --chq-r: 12px; --chq-r-lg: 18px;
    /* Motion durations (replace the template's blanket .5s) */
    --chq-dur-1: 120ms; --chq-dur-2: 160ms; --chq-dur-3: 240ms;
    /* Type roles */
    --chq-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

    /* --- global accent shift: teal replaces the template's orange --- */
    --primary: #1B7A82;        /* accessible teal for shared link/button role */
    --primary-color: #152C2B;  /* headings/ink — deep pine instead of flat grey */

    /* Density tokens (Field Guide II C1). COMPACT is the default (office/admin);
       body[data-density="cozy"] below relaxes them for family-facing pages. */
    --chq-pad-card: 1.5rem;
    --chq-fs-ui: .95rem;
    --chq-pad-control: .55rem .75rem;
}
body[data-density="cozy"] {
    --chq-pad-card: 1.85rem;
    --chq-fs-ui: 1rem;
}

/* Display headings adopt the warm serif (was Poppins) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--chq-serif);
    letter-spacing: -.005em;
}

/* Canonical primary button. The compiled bootstrap.min.css still ships the old
   template's .btn-primary (orange bg with STOCK BLUE hover/active), so define
   every Bootstrap button variable here — this fixes hover, active, focus and
   disabled in one place and removes the old !important patchwork. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--chq-teal-700);
    --bs-btn-hover-border-color: var(--chq-teal-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--chq-pine);
    --bs-btn-active-border-color: var(--chq-pine);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 27, 122, 130;
    box-shadow: var(--chq-shadow-sm);
    transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    box-shadow: var(--chq-shadow-md);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Outline-primary buttons pull from Bootstrap's own --bs-primary (still the
   template orange), so repoint them to teal explicitly to match .btn-primary */
.btn-outline-primary {
    color: var(--chq-teal-700);
    border-color: var(--chq-teal-600);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--chq-teal-600) !important;
    border-color: var(--chq-teal-600) !important;
    color: #fff !important;
}

/* On phones, the -sm form variants (.875rem = 14px) sit under iOS Safari's
   16px focus-zoom threshold, so tapping any small field zooms the whole page.
   Bump them to 16px on small screens only; desktop keeps the compact size. */
@media (max-width: 767.98px) {
    .form-control-sm,
    .form-select-sm {
        font-size: 1rem;
    }
}

/* Phone card-stack tables (promoted from admin_commandcenter's local pattern,
   audit S10/BB2): put .chq-cardstack on a table and stamp each td with a
   data-label (GridViews: in RowDataBound) and, under 576px, every row renders
   as a labeled card instead of a sideways-scrolling grid. Desktop unchanged. */
@media (max-width: 575.98px) {
    table.chq-cardstack thead { display: none; }
    table.chq-cardstack tr {
        display: block;
        border: 1px solid var(--chq-line);
        border-radius: 10px;
        margin-bottom: .55rem;
        padding: .3rem .7rem;
    }
    table.chq-cardstack td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        padding: .3rem 0;
        text-align: right;
    }
    table.chq-cardstack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--chq-muted);
        text-align: left;
    }
    table.chq-cardstack td:first-child { font-weight: 600; }
    table.chq-cardstack tr:hover td { background: transparent; }
}

/* ---- Opt-in components (adopt page by page) ---- */

/* Card: warm surface, soft shadow that deepens on hover */
.chq-card {
    background: #fff;
    border: 1px solid var(--chq-line);
    border-radius: var(--chq-r);
    box-shadow: var(--chq-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease;
}
.chq-card.chq-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--chq-shadow-lg);
}

/* Buttons */
.chq-btn {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: var(--chq-fs-ui);
    line-height: 1.2;
    border-radius: 10px;
    padding: .7rem 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chq-btn:active { transform: translateY(1px); }
.chq-btn-primary   { background: var(--chq-teal-600); color: #fff; box-shadow: var(--chq-shadow-sm); }
.chq-btn-primary:hover   { background: var(--chq-teal-700); box-shadow: var(--chq-shadow-md); transform: translateY(-1px); color:#fff; }
.chq-btn-secondary { background: #fff; color: var(--chq-ink); border-color: var(--chq-line); box-shadow: var(--chq-shadow-sm); }
.chq-btn-secondary:hover { border-color: var(--chq-teal-600); color: var(--chq-teal-700); }
.chq-btn-ghost     { background: transparent; color: var(--chq-teal-700); }
.chq-btn-ghost:hover     { background: var(--chq-teal-050); }
.chq-btn-sun       { background: var(--chq-sun); color: #3d2708; }
.chq-btn-sun:hover       { filter: brightness(1.05); box-shadow: var(--chq-shadow-md); }

/* Status pills — colour + a leading dot so status reads without relying on hue alone */
.chq-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 600;
    padding: .28rem .65rem; border-radius: 99px;
}
.chq-pill::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.chq-pill-good    { background: var(--chq-good-bg); color: var(--chq-good); }
.chq-pill-warn    { background: var(--chq-warn-bg); color: var(--chq-warn); }
.chq-pill-bad     { background: var(--chq-bad-bg);  color: var(--chq-bad); }
.chq-pill-info    { background: var(--chq-teal-050); color: var(--chq-teal-600); }
.chq-pill-neutral { background: var(--chq-sand);    color: var(--chq-muted); }

/* Stat tile */
.chq-stat {
    background: #fff; border: 1px solid var(--chq-line); border-radius: var(--chq-r);
    padding: 1.1rem 1.2rem; box-shadow: var(--chq-shadow-sm);
}
.chq-stat .chq-stat-lab { font-size: .78rem; color: var(--chq-muted); }
.chq-stat .chq-stat-val {
    font-family: var(--chq-serif); font-size: 2.1rem; color: var(--chq-ink);
    line-height: 1; margin: .35rem 0 .15rem; font-variant-numeric: tabular-nums;
}

/* All form controls focus with the calm teal ring (the compiled Bootstrap
   still ships its stock blue #86b7fe border + blue shadow) */
.form-control:focus,
.form-select:focus {
    border-color: var(--chq-teal-500);
    box-shadow: 0 0 0 .25rem rgba(27,122,130,.18);
}

/* Calm teal focus ring for inputs that opt in */
.chq-focus:focus,
.chq-field:focus {
    outline: none;
    border-color: var(--chq-teal-600);
    box-shadow: 0 0 0 3px rgba(27,122,130,.22);
}

/* ---- Canonical dashboard shell (W2 dedupe) ----
   These were duplicated (and drifted) across ~55 pages' inline <style> blocks.
   Defined once here so every page's markup resolves to the SAME shell; the local
   copies are being removed page-by-page. `.dash-page-wrap` is intentionally NOT
   hoisted (its max-width legitimately varies per page). */
.dash-greeting {
    background: linear-gradient(135deg, var(--chq-linen) 0%, var(--chq-teal-050) 100%);
    border: 1px solid var(--chq-line);
    border-radius: var(--chq-r-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    box-shadow: var(--chq-shadow-sm);
}
.dash-greeting-title {
    font-family: var(--chq-serif); font-size: 1.65rem; font-weight: 600;
    letter-spacing: -.01em; margin-bottom: .15rem; color: var(--chq-pine);
}
.dash-greeting-meta { color: var(--chq-muted); font-size: .92rem; margin: 0; }
.dash-greeting-meta span + span::before { content: "\00B7"; margin: 0 .5rem; color: var(--chq-line); }
.dash-quicknav { display: flex; gap: .5rem; flex-wrap: wrap; }
.dash-quicknav a {
    font-size: .88rem; font-weight: 600; color: var(--chq-body); text-decoration: none;
    padding: .4rem .75rem; border-radius: var(--chq-r-sm); transition: all .15s ease-in-out;
}
.dash-quicknav a:hover { background: #fff; color: var(--chq-pine); box-shadow: var(--chq-shadow-sm); }
.dash-quicknav a i { margin-right: .35rem; color: var(--chq-teal-500); }
.dash-section {
    background: #fff;
    border: 1px solid var(--chq-line);
    border-radius: var(--chq-r-lg);
    padding: var(--chq-pad-card);
    margin-bottom: 1.25rem;
    box-shadow: var(--chq-shadow-sm);
}
.dash-section-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.dash-section-title {
    font-family: var(--chq-serif); font-size: 1.15rem; font-weight: 600; margin: 0;
    color: var(--chq-pine); display: flex; align-items: center; gap: .55rem;
}
.dash-section-title i { color: var(--chq-teal-500); font-size: .95em; }
.dash-section-subtitle { color: var(--chq-muted); font-size: .9rem; margin: .15rem 0 0 0; }

/* ---- Dashboard entrance: a quiet 6px rise on first paint. Scoped inside
   no-preference so reduced-motion users never see it; short and staggered so
   it reads as settling, not showing off. The body:not(.chq-postback) guard
   confines it to fresh arrivals - header.ascx tags the body .chq-postback on
   full postbacks so pressing Save does not replay the entrance. ---- */
@media (prefers-reduced-motion: no-preference) {
    body:not(.chq-postback) .dash-greeting,
    body:not(.chq-postback) .dash-section {
        animation: chq-rise .38s cubic-bezier(.16, 1, .3, 1) both;
    }
    body:not(.chq-postback) .dash-section { animation-delay: 60ms; }
    body:not(.chq-postback) .dash-section:nth-of-type(3) { animation-delay: 120ms; }
    body:not(.chq-postback) .dash-section:nth-of-type(n+4) { animation-delay: 160ms; }
}
@keyframes chq-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Badges keep light-on-fill text ----
   The template's `.card-default span { color: var(--dark) }` rule paints badge
   text dark grey, unreadable on filled badges (e.g. the pine bg-secondary
   "Admin" pill). .card-default span.badge out-specifies it; badges that WANT
   dark text carry .text-dark, whose !important still wins. ---- */
.badge,
.card-default span.badge {
    color: #fff;
}

/* ---- One visible focus ring, keyboard only ----
   :focus-visible fires for keyboard/AT focus but not mouse clicks, so this adds
   an unmissable ring for keyboard users without flashing rings on every click.
   Pages must NOT set outline:none on focusable elements — this is the standard. */
:focus-visible {
    outline: 3px solid var(--chq-teal-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Page width tiers ----
   Bootstrap's .container-fluid is 100% of the viewport, so a page using it with
   no inner wrapper runs edge to edge on a wide monitor while its neighbours sit
   at a fixed width. `.dash-page-wrap` solved that per page, but it is declared
   in ~59 separate inline <style> blocks at 16 different max-widths.

   These three tiers are the shared version: put one directly on the
   .container-fluid element (every such element on the page, or the sections
   will not line up). Boards and very wide grids stay unconstrained on purpose.
     sm  forms and single-column editors
     md  standard lists and grids up to about 9 columns
     lg  wide grids (10+ columns) and tile dashboards                         */
.chq-wrap-sm, .chq-wrap-md, .chq-wrap-lg { margin-left: auto; margin-right: auto; }
.chq-wrap-sm { max-width: 900px; }
.chq-wrap-md { max-width: 1200px; }
.chq-wrap-lg { max-width: 1400px; }

/* ---- Sticky table headers for long admin lists (add .table-sticky to the
   table; the scroll container is the page or a .table-responsive wrapper) ---- */
.table-sticky thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    box-shadow: 0 1px 0 var(--chq-line);
}

/* ---- Canonical status badge (replaces the per-page .s-appr/.camper-status-badge
   copies that drifted from the tokens). Pair a tone class with the base. ---- */
.chq-status-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: "Inter", sans-serif; font-size: .75rem; font-weight: 600;
    padding: .22rem .6rem; border-radius: 99px; white-space: nowrap;
}
.chq-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.chq-status-good    { background: var(--chq-good-bg);   color: var(--chq-good); }
.chq-status-warn    { background: var(--chq-warn-bg);   color: var(--chq-warn); }
.chq-status-bad     { background: var(--chq-bad-bg);    color: var(--chq-bad); }
.chq-status-cancel  { background: var(--chq-cancel-bg); color: var(--chq-cancel); }
.chq-status-done    { background: var(--chq-done-bg);   color: var(--chq-done); }
.chq-status-info    { background: var(--chq-teal-050);  color: var(--chq-teal-700); }
.chq-status-neutral { background: var(--chq-sand);      color: var(--chq-muted); }

/* ---- Busy state for submit buttons: add .btn-busy on click for long postbacks ---- */
.btn-busy {
    pointer-events: none;
    opacity: .75;
    position: relative;
}
.btn-busy::after {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    margin-left: .5em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: chq-spin .6s linear infinite;
}
@keyframes chq-spin { to { transform: rotate(360deg); } }

/* ---------- Type-to-search combobox ----------
   Progressive enhancement over a real <select> (which stays in the DOM and keeps
   posting its value, so server-side selection logic is untouched). Markup:

     <div class="chq-combo" data-chq-combo>
       <select class="chq-combo-native" ...>          <- real control, visually hidden
       <input type="text" class="form-control chq-combo-input" ...>
       <ul class="chq-combo-menu list-unstyled" role="listbox"></ul>
     </div>

   Wired up by the chqCombo component in master.js. */
.chq-combo { position: relative; }
.chq-combo-native {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; border: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
.chq-combo-menu {
    position: absolute; z-index: 1050; top: 100%; left: 0; right: 0;
    margin-top: .25rem; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid var(--chq-line);
    border-radius: var(--chq-r-sm); box-shadow: var(--chq-shadow-md);
    display: none;
}
.chq-combo-menu.show { display: block; }
/* Combo inside a floating-label field (put the .chq-combo-input in its own
   .form-floating so it stands the same height as the fields beside it).
   Bootstrap paints placeholder text transparent inside .form-floating, which
   would silently swallow the "type to search" hint, so bring it back on focus -
   the moment it is useful, and the moment the label has floated out of its way. */
.form-floating > .chq-combo-input:focus::placeholder { color: var(--chq-muted); opacity: 1; }
.chq-combo-menu li { padding: .5rem .75rem; cursor: pointer; font-size: .9rem; color: var(--chq-body); }
.chq-combo-menu li[data-value]:hover,
.chq-combo-menu li[data-value].active { background: var(--chq-teal-050); color: var(--chq-pine); }
.chq-combo-menu li.none { color: var(--chq-muted); cursor: default; }

/* Global reduced-motion guard — neutralizes transitions/animations site-wide
   for users who ask their OS to reduce motion (replaces the component-scoped rule). */
/* ---- Promoted patterns (Field Guide II, Pass B). These replace the
   per-page hand-rolled copies as pages are migrated; names match the
   existing .chq-* idiom. ---- */

/* Desk/list table - replaces per-page `table.grid` copies */
.chq-table { width: 100%; border-collapse: collapse; }
.chq-table th, .chq-table td { padding: .5rem .5rem; border-bottom: 1px solid var(--chq-line); text-align: left; font-size: .9rem; }
.chq-table th { color: var(--chq-muted); font-weight: 700; font-size: .76rem; text-transform: uppercase; }
.chq-table td { font-variant-numeric: tabular-nums; }

/* Mobile fallback for wide data tables that aren't wrapped in .table-responsive:
   on phones the table becomes a horizontally-scrollable block instead of pushing the
   whole page wider than the viewport. Desktop layout is untouched. Covers every
   .chq-table (admin repeaters) and the visitor grid in one place. */
@media (max-width: 767.98px) {
    .chq-table, table.visitor-grid, .cc-list-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Label-above field - replaces per-page `.fld` / `label.cap` copies */
.chq-fld { margin-bottom: .7rem; }
.chq-cap { display: block; font-weight: 600; color: var(--chq-body); margin-bottom: .3rem; font-size: .85rem; }

/* Filter row of dropdowns/inputs above a list */
.chq-filterbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

/* Canonical empty state: one icon, one Fraunces sentence naming the state,
   at most one action link. */
.chq-empty { text-align: center; color: var(--chq-muted); padding: 2.6rem 1rem; }
.chq-empty i { font-size: 1.9rem; color: var(--chq-teal-500); display: block; margin-bottom: .6rem; }
.chq-empty .chq-empty-title { font-family: var(--chq-serif); font-size: 1.05rem; color: var(--chq-ink); margin-bottom: .25rem; }

/* Saved-state button morph: server sets the label + adds .btn-saved on a
   successful full-postback save; master.js restores the original after 1.6s. */
.btn-saved { background: var(--chq-good) !important; border-color: var(--chq-good) !important; }

/* Provenance line ("Updated Jul 12 by Paul") under office-tended content. */
.chq-provenance { font-size: .8rem; color: var(--chq-muted); }

/* Privacy microcopy under forms that collect sensitive data. Names WHO can
   see it, never a generic "your data is safe". */
.chq-privacy { font-size: .82rem; color: var(--chq-muted); }

/* Contour motif (Field Guide II C2). Subtle topographic backdrop for THRESHOLDS
   and empty moments only - login / role pick / kiosk pick / empty states. Never
   behind data. The SVG strokes are already low-alpha so it stays a whisper. */
.chq-contours { background-image: url(../images/chq-contours.svg); background-size: cover; background-position: center top; }
/* Empty-state watermark: same asset, anchored low and quiet. */
.chq-empty.chq-contours { background-position: center bottom; background-size: 150% auto; }

/* Duotone photography (Field Guide II C3). Policy: ONE photo max, on the
   camper_main / church_main welcome areas ONLY - never admin, kiosk, or print.
   Real camp photography, re-treated each year, max 1600px / under 200KB / .webp.
   No image editing needed - the pine->teal wash is done here in CSS. */
.chq-duotone { position: relative; }
.chq-duotone img { filter: grayscale(1) contrast(1.05); display: block; width: 100%; }
.chq-duotone::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(12,58,61,.55), rgba(27,122,130,.35));
    mix-blend-mode: color; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Soft crossfade between same-origin page navigations (cross-document View
   Transitions). Progressive enhancement: Chromium + Safari 18 animate,
   Firefox ignores. 150ms so it reads as continuity, not a transition. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 150ms; }
/* The global * reduced-motion guard does not reach these pseudo-elements. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}
/* ===================== Accessibility + polish foundation (2026-07-19) =====
   Global, do-once pieces for the #5 sweep. Per-page work just applies these
   classes; nothing here changes existing layout on its own. */

/* -- Spacing + type scale tokens (formalized; complements the density tokens
      above). Use var(--chq-space-*) / var(--chq-fs-*) on new work instead of
      one-off pixel values. */
:root {
    --chq-space-1: .25rem; --chq-space-2: .5rem; --chq-space-3: .75rem;
    --chq-space-4: 1rem;   --chq-space-5: 1.5rem; --chq-space-6: 2rem;
    --chq-fs-xs: .75rem; --chq-fs-sm: .85rem; --chq-fs-md: .95rem;
    --chq-fs-lg: 1.1rem; --chq-fs-xl: 1.35rem; --chq-fs-2xl: 1.75rem;
}

/* -- B3: skip-to-content link (markup already in header.ascx). Off-screen
      until it receives keyboard focus, then it drops into view. z-index sits
      above the confirm modal (20000) and command palette (19000) so it is
      always the first reachable control. */
.skip-to-content {
    position: absolute; left: .5rem; top: -3.5rem; z-index: 20001;
    background: var(--chq-teal-700, #0C3A3D); color: #fff;
    padding: .5rem .9rem; border-radius: 0 0 8px 8px; text-decoration: none;
    box-shadow: var(--chq-shadow-md); transition: top var(--chq-dur-2, .16s) ease;
}
.skip-to-content:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; color: #fff; }

/* -- B5: focus-not-obscured (WCAG 2.4.11). Keep focused/anchored elements from
      hiding under the sticky top navbar when scrolled to. Zero-specificity so
      it never overrides a page's own rule. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])),
[id] { scroll-margin-top: 5rem; }

/* -- A1: skeleton loading placeholders. Apply .chq-skel-line for text rows /
      .chq-skeleton for blocks while data loads. Shimmer only when motion is
      allowed; reduced-motion users get static gray bars. */
.chq-skeleton, .chq-skel-line {
    background: var(--chq-line, #e5e7eb); border-radius: 6px;
}
.chq-skeleton { position: relative; overflow: hidden; min-height: 1em; }
.chq-skel-line { height: .9em; margin: .4rem 0; }
.chq-skel-row { display: flex; gap: .75rem; padding: .5rem 0; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
    .chq-skeleton, .chq-skel-line { position: relative; overflow: hidden; }
    .chq-skeleton::after, .chq-skel-line::after {
        content: ""; position: absolute; inset: 0; transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
        animation: chqShimmer 1.2s infinite;
    }
    @keyframes chqShimmer { 100% { transform: translateX(100%); } }
}

/* -- A2: teaching empty states. The .chq-empty component already exists above
      (canonical Field Guide II block: centered, one Fraunces title via
      .chq-empty-title, one icon via `.chq-empty i`, at most one action). The
      2026-07-19 sweep reuses it as-is and only adds paragraph sizing for the
      one-sentence explainer the new empty states carry. */
/* text-wrap: pretty stops the measure leaving a single word stranded on the
   last line ("...will appear / here."), which the 32rem cap was producing on
   several of these. Browsers without it just wrap as before. */
.chq-empty p { margin: 0 auto .9rem; max-width: 32rem; font-size: var(--chq-fs-md, .95rem); text-wrap: pretty; }
.chq-empty .chq-empty-title { text-wrap: balance; }

/* -- B4: target-size helper (WCAG 2.5.8). Wrap dense row actions in
      .chq-actions so each control clears 24x24 and neighbors don't crowd. */
.chq-actions { display: inline-flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.chq-actions > a, .chq-actions > button { min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; padding: .25rem .5rem; }

/* -- B9: footer utility links. The standard interactive teal (--chq-teal-600,
      #1B7A82) on the footer's light bg-dark-subtle panel measures only 3.4:1;
      the one darker step (--chq-teal-700, #155E63) clears AA at 4.7:1. */
.site-footer a { color: var(--chq-teal-700); }
.site-footer a:hover, .site-footer a:focus { color: var(--chq-pine); }

/* ---- Staffer application read-only view (shared by admin_staffer_application,
   the Application tab on admin_staffer_edit, and admin_interview's context
   panel). Sectioned layout: jump chips, titled sections, a responsive facts
   grid for short answers, full-width capped-measure essays, and a sand box
   for the medical block. ---- */
.chq-app-jump { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chq-app-jump a {
    font-size: .74rem; font-weight: 600; padding: .2rem .65rem; border-radius: 99px;
    border: 1px solid var(--chq-line); background: var(--chq-sand);
    color: var(--chq-teal-700); text-decoration: none;
}
.chq-app-jump a:hover, .chq-app-jump a:focus-visible { border-color: var(--chq-teal-600); }
.chq-app-sect { border-top: 1px solid var(--chq-line); padding-top: 1rem; margin-top: 1.25rem; }
.chq-app-sect-title {
    font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--chq-teal-700);
    margin-bottom: .8rem;
}
.chq-app-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem 1.5rem; }
.chq-app-fact-label {
    font-size: .65rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--chq-muted);
}
.chq-app-fact-val { font-size: .86rem; overflow-wrap: break-word; }
/* Essays run the full width of the card. They used to be capped at a 62ch
   reading measure, which on a wide screen left every answer ragged in a narrow
   column with most of the card empty beside it. */
.chq-app-essay { margin-bottom: .9rem; }
.chq-app-essay:last-child { margin-bottom: 0; }
.chq-app-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chq-app-note { font-size: .76rem; color: var(--chq-muted); margin-top: .45rem; }
.chq-app-med {
    background: var(--chq-sand); border: 1px solid var(--chq-line);
    border-radius: var(--chq-r); padding: .8rem .9rem;
}

/* ===================== end CampHQ Design System ===================== */
/* =====================================================================
   PRINT
   ---------------------------------------------------------------------
   Every printable page in CampHQ (reports, camp packet, emergency
   contacts, statements, rosters) used to print the sidebar, the sticky
   top bar and the site footer, then scatter the actual content over
   two or three sheets. There were no print rules at all before this.

   The rules below strip the site chrome, collapse the Bootstrap grid to
   a single full-width column, and tighten type so a report fits the
   page. Anything that should not print carries .d-print-none.
   ===================================================================== */
@media print {

    @page { margin: 0.45in; }

    /* --- site chrome --- */
    .sidebar,
    .site-footer,
    .skip-to-content,
    .navbar.sticky-top,
    nav.navbar,
    .chq-cmdk,
    .gs-wrap,
    .d-print-none,
    .btn,
    .btn-close,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    html, body {
        background: #fff !important;
        font-size: 10pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- let the content span the sheet --- */
    .content,
    .container-fluid,
    .chq-wrap-md,
    .dash-page-wrap {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .row { margin: 0 !important; }

    [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* --- strip card decoration; it only wastes millimetres on paper --- */
    .card,
    .card-body,
    .card-default,
    .bg-white,
    .bg-light,
    .shadow-sm,
    .rounded {
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- tables --- */
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }   /* repeat headings on every sheet */
    tfoot { display: table-row-group; }
    tr, img { page-break-inside: avoid; break-inside: avoid; }
    th, td { padding: .15rem .3rem !important; font-size: 9pt; }
    th { background: #eee !important; border-bottom: 1px solid #999 !important; }

    /* Bootstrap zebra striping costs toner and reads worse on paper. */
    .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent !important; }

    /* --- links: do not append the raw URL after every anchor --- */
    a[href]:after { content: "" !important; }
    a { color: #000 !important; text-decoration: none !important; }

    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; break-after: avoid; }
    h1 { font-size: 15pt; } h2 { font-size: 13pt; } h3 { font-size: 11pt; }
}

/* =====================================================================
   Forms to sign (in-house e-signature, migration 122). Shared by the
   parent and staffer dashboards; markup comes from
   SignatureHelpers.RenderDashboardSection. Bump header.ascx ?v= on change.
   ===================================================================== */
.sigf-camper { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .55rem; }
.sigf-camper:first-of-type { margin-top: 0; }
.sigf-camper b { color: var(--chq-ink); font-weight: 600; display: block; }
.sigf-camper small { color: var(--chq-muted); font-size: .8rem; }
.sigf-avatar { width: 34px; height: 34px; border-radius: 99px; background: var(--chq-teal-100); color: var(--chq-teal-700);
               font-weight: 700; display: grid; place-items: center; font-size: .85rem; flex: none; }
.sigf-list { display: grid; gap: .6rem; }
.sigf-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem 1rem; align-items: center; padding: .85rem 1rem;
            border: 1px solid var(--chq-line); border-radius: var(--chq-r); background: var(--chq-linen); }
.sigf-row.sigf-done { background: #fff; }
.sigf-title { font-weight: 600; color: var(--chq-ink); }
.sigf-meta { font-size: .8rem; color: var(--chq-muted); margin-top: .1rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.sigf-meta span + span::before { content: "\00b7"; margin-right: .4rem; color: var(--chq-brand); }
.sigf-due { color: var(--chq-warn); font-weight: 600; }
.sigf-overdue { color: var(--chq-bad); font-weight: 600; }
.sigf-act { white-space: nowrap; }
@media (max-width: 600px) {
    .sigf-row { grid-template-columns: 1fr; }
    .sigf-row .chq-pill { justify-self: start; }
}

/* Compact "Forms to sign" strip (2026-09-05): rows for what still needs a
   signature, optional church-wide line underneath. */
.sigf-for { font-weight: 500; color: var(--chq-body); }
.sigf-extra { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--chq-line); font-size: .86rem; color: var(--chq-body); }
.sigf-extra i { color: var(--chq-teal-500); }
.sigf-strip .sigf-list + .sigf-extra { margin-top: 1rem; }

/* Signed Forms table (individual_edit): stacked cards on phones. */
@media (max-width: 640px) {
    .sigf-table thead { display: none; }
    .sigf-table, .sigf-table tbody, .sigf-table tr, .sigf-table td { display: block; width: 100%; }
    .sigf-table tr { padding: .75rem .9rem; border: 1px solid var(--chq-line); border-radius: var(--chq-r-sm); margin-bottom: .6rem; background: #fff !important; }
    .sigf-table td { border: 0 !important; padding: .12rem 0 !important; white-space: normal !important; background: transparent !important; box-shadow: none !important; }
    .sigf-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 5.5rem; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--chq-muted); font-weight: 600; }
    .sigf-table td.sigf-td-form { font-weight: 600; color: var(--chq-ink); padding-bottom: .35rem !important; }
    .sigf-table td.sigf-td-form .small { display: block; font-weight: 400; }
    .sigf-table td.sigf-td-status { padding-top: .4rem !important; }
    .sigf-table td.sigf-td-act { text-align: left !important; padding-top: .35rem !important; }
}