/*********************************************************************/
/***** 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;
}
*/
:root {
    --dt-color-primary: #291e47;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #291e47;
    --dt-color-secondary: #ece8e1;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #4D5254;
    --dt-color-accent: #017b84;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #017b84;
    --dt-color-gray: #e5e0d9;
    --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://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
    font-family: "Poppins", sans-serif;
}

/* Canvas's own bundles set "Lato Extended" on headings/buttons/inputs via
   class selectors, which outrank the plain `body` rule above - restate
   Poppins with matching specificity (kept tag-scoped so icon-font glyphs,
   which use their own classes, are left untouched). */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body div, body a, body li, body td, body th, body label,
body button, body input, body select, body textarea,
body .Button, body .ic-Button, body .btn {
    font-family: "Poppins", sans-serif !important;
}

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

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

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

.tk-new-hero {
    font-family: "Poppins", 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: "Poppins", 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: "Poppins", 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: "Poppins", 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%;
}
.ig-info{
    display: flex; 
    justify-content: space-between;
    margin-right: 0px;

}
.ig-admin{
    align-self: flex-end !important;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

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

/* Design tokens */
:root {
  --cag-primary: #017b84;
  --cag-primary-dark: #00a492;
  --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-concluded-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-family: var(--cag-font);
  color: var(--cag-text-light);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.cag-concluded-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
  cursor: pointer;
}

#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);
}

#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: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  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: compact padding; let Tabulator size grouped headers ── */
#cag-grid .tabulator-col .tabulator-col-content {
  padding: 4px 8px;
  box-sizing: border-box;
}

/* ── Bulk-Mark button inside column header ────────────────────────────── */
.cag-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  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);
}

/* ── Grade column: center the P/T/A badge in the cell ─────────────────── */
#cag-grid .tabulator-cell.cag-grade-col {
  text-align: center;
}

/* ── Assignment group header (spans the assignment's columns) ─────────── */
#cag-grid .tabulator-col.tabulator-col-group .tabulator-col-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cag-grid .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
  border-top: 1px solid var(--cag-border);
}

/* ── Per-assignment banding: make adjacent assignments distinguishable ── */
#cag-grid .tabulator-col.cag-assign-odd,
#cag-grid .tabulator-cell.cag-assign-odd {
  background: #f2f6fa;
}
#cag-grid .tabulator-col.cag-assign-even,
#cag-grid .tabulator-cell.cag-assign-even {
  background: var(--cag-white);
}
/* Boundary line at the start (grade column) of each assignment block */
#cag-grid .tabulator-col.cag-assign-start,
#cag-grid .tabulator-cell.cag-assign-start {
  border-left: 2px solid var(--cag-primary);
}

/* ── Take Attendance mode: make the single attendance column stand out ── */
.cag-take-mode #cag-grid .tabulator-col.cag-grade-col,
.cag-take-mode #cag-grid .tabulator-cell.cag-grade-col {
  background: #eef4fb;
  border-left: 2px solid var(--cag-primary);
  border-right: 2px solid 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;
  -webkit-user-select: none;
  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 input[type="radio"] {
  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;
}

/* Footer action pinned to the left (e.g. "New attendance assignment" / "Back") */
#cag-picker-footer .cag-picker-footer__left {
  margin-right: auto;
}

/* ── Create attendance assignment form ────────────────────────────────── */
#cag-create-body {
  padding: 14px 20px 4px;
  overflow-y: auto;
}

.cag-create-field {
  display: block;
  margin: 0 0 16px;
  border: none;
  padding: 0;
}

.cag-create-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cag-text);
  margin-bottom: 5px;
  padding: 0;
}

#cag-create-name {
  width: 100%;
  padding: 7px 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-create-name:focus {
  outline: 2px solid var(--cag-primary);
}

.cag-create-variant {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cag-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius);
  cursor: pointer;
  font-size: 13px;
}

.cag-radio-row:hover {
  border-color: var(--cag-primary);
}

.cag-radio-row input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
}

.cag-radio-row strong {
  display: block;
  line-height: 1.3;
}

.cag-radio-hint {
  display: block;
  font-size: 11px;
  color: var(--cag-text-light);
  margin-top: 2px;
}

.cag-create-error {
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid var(--cag-danger);
  border-radius: var(--cag-radius);
  background: #FDECEE;
  color: var(--cag-danger);
  font-size: 12px;
  line-height: 1.4;
}

/* ── 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;
}