/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #A91523;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #A91523;
    --dt-color-secondary: #ACAEB0;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #4D5254;
    --dt-color-accent: #680D15;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #680D15;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
    --ms-fc-size: 350px;
    --ms-fc-editsize: 702px;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/


/*********************************************************************/
/***** BEGIN FONT IMPORT  *****************/
/*********************************************************************/

@import url("https://p.typekit.net/p.css?s=1&k=pkv7kab&ht=tk&f=6846.6847.6848.6851.24452.32115.50029.50031.50032.50033.50036.50038.50041.50042.50046&a=192074166&app=typekit&e=css");

@font-face {
    font-family: "myriad-pro";
    src: url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://use.typekit.net/af/2e2357/00000000000000000001709f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/2e2357/00000000000000000001709f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/2e2357/00000000000000000001709f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://use.typekit.net/af/d32e26/00000000000000000001709b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/d32e26/00000000000000000001709b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/d32e26/00000000000000000001709b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "myriad-pro";
    src: url("https://use.typekit.net/af/cafa63/00000000000000000001709a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/cafa63/00000000000000000001709a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/cafa63/00000000000000000001709a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "madre-script";
    src: url("https://use.typekit.net/af/7eb310/00000000000000007735a592/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/7eb310/00000000000000007735a592/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/7eb310/00000000000000007735a592/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "calder-lc-grit";
    src: url("https://use.typekit.net/af/7da9cf/00000000000000007753c370/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/7da9cf/00000000000000007753c370/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/7da9cf/00000000000000007753c370/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/598d82/00000000000000007735feba/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/598d82/00000000000000007735feba/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/598d82/00000000000000007735feba/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/766783/00000000000000007735fec5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/766783/00000000000000007735fec5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/766783/00000000000000007735fec5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/8046c1/00000000000000007735fec6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/8046c1/00000000000000007735fec6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/8046c1/00000000000000007735fec6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/0dd304/00000000000000007735feca/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/0dd304/00000000000000007735feca/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/0dd304/00000000000000007735feca/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 500;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/8cabcb/00000000000000007735febe/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"), url("https://use.typekit.net/af/8cabcb/00000000000000007735febe/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"), url("https://use.typekit.net/af/8cabcb/00000000000000007735febe/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 600;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/e82826/00000000000000007735febd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/e82826/00000000000000007735febd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/e82826/00000000000000007735febd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/ff5709/00000000000000007735fec9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/ff5709/00000000000000007735fec9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/ff5709/00000000000000007735fec9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/baf266/00000000000000007735fec3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/baf266/00000000000000007735fec3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/baf266/00000000000000007735fec3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}

@font-face {
    font-family: "new-hero";
    src: url("https://use.typekit.net/af/7cd3e2/00000000000000007735fec7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/7cd3e2/00000000000000007735fec7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/7cd3e2/00000000000000007735fec7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 100;
    font-stretch: normal;
}

.tk-myriad-pro {
    font-family: "myriad-pro", sans-serif;
}

.tk-madre-script {
    font-family: "madre-script", sans-serif;
}

.tk-calder-lc-grit {
    font-family: "calder-lc-grit", sans-serif;
}

.tk-new-hero {
    font-family: "new-hero", sans-serif;
}


/*********************************************************************/
/***** End Font Import  *****************/
/*********************************************************************/

/*

/* Custom CSS for removing external links 
- M.Seaman 5.2.24 */

.external_link_icon {
    display: none !important;
}

/* Usage Containers */

.entUsageCalloutContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dt-color-gray);
    border-radius: 5px;
    height: 50px;
    margin: 2px;
}

.entUsageCalloutIconContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 20%;
    background: var(--dt-color-primary);
    color: var(--dt-color-primary-contrast);
    border-radius: 5px 0px 0px 5px;

}

.entUsageCalloutIcon {
    font-size: 20px;
}

.entUsageCalloutText {
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    padding-left: 5px;
    width: 80%;
    line-height: 1.3;

}

/* Custom CSS for We Statement Callouts */
/*We Statement chip*/
.ent-we-chip-container {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
}

.ent-we-chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    margin: 5px;
}

.ent-we-chip img {
    float: left;
    /* margin: 0 10px 0 -25px; */
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
    transform: translate(-10%, -25%);
}

.ms-fc-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    --ms-fc-size: 350px;
    --ms-fc-editsize: 702px;
}

.ms-fc-sm {
    --ms-fc-size: 200px;
    --ms-fc-editsize: 402px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-fc-md {
    --ms-fc-size: 270px;
    --ms-fc-editsize: 542px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-fc-lg {
    --ms-fc-size: 300px;
    --ms-fc-editsize: 602px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-flip-card-container {
    position: relative;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);

    display: inline-block;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    margin: 5px;

}

.ms-flip-card-container-edit {
    position: relative;
    width: var(--ms-fc-editsize);
    height: var(--ms-fc-size);
    margin: 5px;
    border: 1px dotted purple;
    padding: 2px;
    display: flex;
    flex-direction: row;
}

.ms-flip-card-front {
    position: absolute;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: white;
    border: 1px solid var(--dt-color-gray);
    border-top: 2px solid var(--dt-color-primary);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ms-flip-card-front-text {
    font-family: new-hero, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 30px;
    color: var(--dt-color-primary);
}

.ms-flip-card-back {
    position: absolute;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: var(--dt-color-graybg);
    border: 1px solid var(--dt-color-gray);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: rotateY(180deg);
}

.ms-flip-card-back-edit {
    position: absolute;
    left: var(--ms-fc-size);
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: var(--dt-color-graybg);
    border: 1px solid var(--dt-color-gray);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.ms-flip-card-back-text {
    margin: 5px;
    font-size: 22px;
    font-family: new-hero, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
}

.ms-flip-card-info-container {
    position: absolute;
    width: var(--ms-fc-size);
    bottom: 0;
    display: flex;
    /*Ensures that the text and icon are side by side*/
    justify-content: flex-end;
    /*Makes the content go to the far right of the container*/
    align-items: center;
    margin: 2px;
    margin-bottom: 0px;
    font-family: new-hero, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;

}

.ms-fc-ic-bg {
    background-color: rgba(255, 255, 255, 0.5);
}

.ms-flip-card-info-text {
    font-size: 12px;
    margin-right: 5px;
}

.ms-flip-card-info-icon {
    margin-right: 5px;
    font-size: medium;
}

.ms-flip-card-flip {
    transform: rotateY(180deg);
}

.ms-flip-card-img {
    width: 100%;
    height: 100%;
}

/* ── Canvas Attendance Grid ─────────────────────────────────────────────── */

/* Design tokens */
:root {
    --cag-primary: #E66000;
    --cag-primary-dark: #C55300;
    --cag-white: #FFFFFF;
    --cag-bg: #F5F5F5;
    --cag-border: #C7CDD1;
    --cag-text: #2D3B45;
    --cag-text-light: #6B7780;
    --cag-radius: 4px;
    --cag-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    --cag-font: 'Lato', 'LatoWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cag-danger: #D0021B;
}

/* ── Launch button (injected into Canvas header bar) ──────────────────── */
#cag-launch-btn,
#cag-take-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 34px;
    font-family: var(--cag-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cag-white);
    background: var(--cag-primary);
    border: 1px solid var(--cag-primary-dark);
    border-radius: var(--cag-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

#cag-launch-btn:hover,
#cag-take-btn:hover {
    background: var(--cag-primary-dark);
}

#cag-launch-btn:focus,
#cag-take-btn:focus {
    outline: 2px solid var(--cag-primary);
    outline-offset: 2px;
}

/* ── Full-screen overlay ──────────────────────────────────────────────── */
#cag-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: var(--cag-bg);
    font-family: var(--cag-font);
    color: var(--cag-text);
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
#cag-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--cag-white);
    border-bottom: 1px solid var(--cag-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

#cag-toolbar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--cag-text);
    flex: 1;
}

#cag-settings-hint {
    font-size: 12px;
    color: var(--cag-text-light);
    font-style: italic;
    margin-right: 4px;
}

#cag-toolbar .cag-status {
    font-size: 13px;
    color: var(--cag-text-light);
    min-width: 120px;
    text-align: right;
}

/* ── Shared button base ───────────────────────────────────────────────── */
.cag-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 32px;
    font-family: var(--cag-font);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--cag-radius);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.cag-btn:focus {
    outline: 2px solid var(--cag-primary);
    outline-offset: 2px;
}

.cag-btn--primary {
    background: var(--cag-primary);
    border-color: var(--cag-primary-dark);
    color: var(--cag-white);
}

.cag-btn--primary:hover {
    background: var(--cag-primary-dark);
}

.cag-btn--secondary {
    background: var(--cag-white);
    border-color: var(--cag-border);
    color: var(--cag-text);
}

.cag-btn--secondary:hover {
    background: var(--cag-bg);
}

.cag-btn--danger {
    background: var(--cag-white);
    border-color: var(--cag-danger);
    color: var(--cag-danger);
}

.cag-btn--danger:hover {
    background: #fce8eb;
}

/* ── Grid container ───────────────────────────────────────────────────── */
#cag-grid-container {
    flex: 1;
    overflow: hidden;
    padding: 0 12px 12px;
}

#cag-grid {
    height: 100%;
}

/* ── Tabulator overrides — match Canvas UI ────────────────────────────── */
#cag-grid .tabulator {
    border: 1px solid var(--cag-border);
    border-radius: 0 0 var(--cag-radius) var(--cag-radius);
    font-family: var(--cag-font);
    font-size: 13px;
}

#cag-grid .tabulator-header {
    background: var(--cag-white);
    border-bottom: 2px solid var(--cag-border);
}

#cag-grid .tabulator-col-title {
    font-weight: 700;
    color: var(--cag-text);
    height: 60px;
}

#cag-grid .tabulator-row:nth-child(even) {
    background: #FAFAFA;
}

#cag-grid .tabulator-row:hover {
    background: #EEF7FF !important;
}

#cag-grid .tabulator-cell {
    border-right: 1px solid var(--cag-border);
    padding: 4px 8px;
}

#cag-grid .tabulator-cell.tabulator-editing {
    border: 2px solid var(--cag-primary) !important;
    padding: 2px 6px;
}

/* Unsaved (dirty) cells get a subtle yellow tint */
#cag-grid .tabulator-cell.cag-dirty {
    background: #fffbe6 !important;
}

/* ── Grade badge (click-to-cycle) ────────────────────────────────────── */
.cag-grade-badge {
    display: inline-block;
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.03em;
}

.cag-grade--P {
    background: #d4edda;
    color: #1a5c2a;
}

.cag-grade--T {
    background: #fff3cd;
    color: #7d5a00;
}

.cag-grade--A {
    background: #f8d7da;
    color: #7d1a20;
}

.cag-grade--empty {
    color: var(--cag-text-light);
    font-weight: 400;
}

#cag-grid .tabulator-cell[data-grade-col="true"] {
    cursor: pointer;
    text-align: center;
}

/* ── Column header: allow two-row (title+arrow / P↓) layout ────────────── */
#cag-grid .tabulator-col {
    height: auto !important;
    min-height: 40px;
}

#cag-grid .tabulator-col .tabulator-col-content {
    height: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    align-items: flex-start;
}

#cag-grid .tabulator-col-sorter {
    align-items: start !important;
    padding-top: 3px !important;
}

/* ── Bulk-Mark button inside column header ────────────────────────────── */
.cag-bulk-btn {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--cag-border);
    border-radius: 3px;
    background: var(--cag-white);
    color: var(--cag-text-light);
    cursor: pointer;
}

.cag-bulk-btn:hover {
    background: var(--cag-bg);
    color: var(--cag-text);
}

/* ── Expand/collapse detail columns arrow button ─────────────────────── */
.cag-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 10px;
    border: 1px solid var(--cag-border);
    border-radius: 3px;
    background: var(--cag-white);
    color: var(--cag-text-light);
    cursor: pointer;
    line-height: 1;
}

.cag-expand-btn:hover {
    background: var(--cag-bg);
    color: var(--cag-primary);
    border-color: var(--cag-primary);
}

/* ── Assignment Picker Modal ──────────────────────────────────────────── */
#cag-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cag-picker-modal {
    background: var(--cag-white);
    border-radius: 6px;
    box-shadow: var(--cag-shadow);
    width: min(520px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cag-picker-modal header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--cag-border);
    display: flex;
    align-items: center;
}

#cag-picker-modal header h3 {
    margin: 0;
    flex: 1;
    font-size: 17px;
    font-weight: 700;
}

#cag-picker-search {
    width: 100%;
    margin: 10px 0 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--cag-font);
    border: 1px solid var(--cag-border);
    border-radius: var(--cag-radius);
    box-sizing: border-box;
}

#cag-picker-search:focus {
    outline: 2px solid var(--cag-primary);
}

#cag-picker-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 8px;
}

.cag-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.cag-picker-item:last-child {
    border-bottom: none;
}

.cag-picker-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cag-primary);
    flex-shrink: 0;
}

.cag-picker-item label {
    cursor: pointer;
    line-height: 1.3;
}

.cag-picker-item label .cag-assign-due {
    display: block;
    font-size: 11px;
    color: var(--cag-text-light);
    margin-top: 1px;
}

#cag-picker-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--cag-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Loading / empty states ───────────────────────────────────────────── */
.cag-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 15px;
    color: var(--cag-text-light);
    gap: 10px;
}

.cag-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--cag-border);
    border-top-color: var(--cag-primary);
    border-radius: 50%;
    animation: cag-spin 0.7s linear infinite;
}

@keyframes cag-spin {
    to {
        transform: rotate(360deg);
    }
}

.cag-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--cag-text-light);
    font-size: 14px;
}