/* ==========================================================================
   CourseCloud modals (assets/css/cc-modal.css), driven by assets/js/cc-modal.js
   and framed by assets/f/modal_shell.php for new modals.

   The house style is Training Manager's modal shell (css/modal-shell.css, the
   Add person modal the product owner chose, 2026-10-09) in CourseCloud's own
   tokens: a soft 20px card, a clear title, roomy fields, and a footer with
   Close as a quiet link on the left and the action on the right. One look for
   every modal: the ccModal layers (and the old Magnific/showModal calls routed
   through them) and Bootstrap .modal dialogs.

   Markup contract (what ccModalOpen()/ccModalFoot() write; old files match it):
     <div class="modal__elm modal__md">          sm 420 / md 560 / lg 760 / xl 1080 / fullscreen
       <header>Title</header>                    or .ccm-head: kicker, .ccm-title, .ccm-sub
       <div class="modal__body"> ... </div>      scrolls when tall
       <footer>                                  first secondary button = quiet Close, on the left
         <button type="button" class="btn btn-outline-secondary" data-ccm-close>Close</button>
         <button type="button" class="btn btn-navy">Save</button>   btn-danger to delete/remove/archive
       </footer>
     </div>
   A modal never restyles .ccm-* or the frame itself; its own pieces go in its own namespace.
   ========================================================================== */

:root {
  --ccm-surface: var(--cc-surface, #ffffff);
  --ccm-sunken: var(--cc-surface-sunken, #f1f0f6);
  --ccm-line: var(--cc-line, #e6e4ed);
  --ccm-field-line: #dedae6;
  --ccm-ink: var(--cc-ink, #16141f);
  --ccm-ink-2: #3d3a4a;
  --ccm-muted: var(--cc-ink-muted, #5d5a6b);
  --ccm-faint: var(--cc-ink-subtle, #716d84);
  --ccm-focus: var(--cc-focus, #5a32e6);
  --ccm-brand: var(--cc-brand, #5a32e6);
  --ccm-brand-rgb: 90, 50, 230;
  --ccm-radius: 20px;
  --ccm-radius-field: 12px;
  --ccm-scrim: rgba(22, 20, 31, 0.46);
  --ccm-shadow: 0 1px 2px rgba(22, 20, 31, 0.04), 0 32px 80px -28px rgba(22, 20, 31, 0.45);
  --ccm-pad: 28px;
  --ccm-field-h: 44px;
  --ccm-top: clamp(16px, 7vh, 64px);
}

html.ccm-lock { overflow: hidden !important; }
.mfp-hide { display: none !important; }

/* ---------------------------------------------------------------- layer */

.ccm {
  position: fixed;
  inset: 0;
  z-index: 1101;
  outline: none;
}
.ccm__scrim,
.ccm-ghost {
  position: fixed;
  inset: 0;
  background: var(--ccm-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ccm__scrim { animation: ccm-fade 0.2s ease both; }
.ccm-ghost { z-index: 1101; pointer-events: none; animation: ccm-fade-out 0.18s ease forwards; }
/* Stacked layers dim what is under them once, not twice */
.ccm ~ .ccm .ccm__scrim { background: rgba(22, 20, 31, 0.22); }

.ccm__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--ccm-top) 16px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ccm__frame {
  flex: none;
  width: 100%;
  transition: opacity 0.15s ease;
}
.ccm__frame > * { animation: ccm-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ccm__frame.is-busy { opacity: 0.55; pointer-events: none; }
.ccm--full .ccm__viewport { padding: 0; }
/* Content with its own design (no .modal__elm panel, e.g. the sign-in screen) only fades in */
.ccm--custom .ccm__frame > * { animation-name: ccm-fade; }

/* Loading: a small card that only appears if the content takes a moment */
.ccm-loading {
  width: 56px;
  height: 56px;
  margin: 18vh auto 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--ccm-surface);
  box-shadow: var(--ccm-shadow);
}
.ccm__frame > .ccm-loading { animation: ccm-in 0.2s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ccm-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--ccm-line);
  border-top-color: var(--ccm-brand);
  animation: ccm-spin 0.7s linear infinite;
}

/* ---------------------------------------------------------------- the card */

.modal__elm {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: var(--ccm-surface);
  color: var(--ccm-ink);
  border-radius: var(--ccm-radius);
  box-shadow: var(--ccm-shadow);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  outline: none;
}
.modal__elm.is-nudge { animation: ccm-nudge 0.26s ease; }

.modal__sm { max-width: 420px; }
.modal__md { max-width: 560px; }
.modal__lg { max-width: 760px; }
.modal__xl { max-width: 1080px; }
.modal__fullscreen {
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.modal__fullscreen .modal__body { flex: 1; max-height: none; }

/* Title. A plain <header> is the title; ccModalOpen() writes .ccm-head with a kicker and a sub line. */
.modal__elm header:not(.modal__body header) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 24px 64px 6px var(--ccm-pad);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ccm-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.modal__elm header:not(.modal__body header) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.modal__elm.is-scrolled header:not(.modal__body header) { border-bottom-color: var(--ccm-line); padding-bottom: 14px; }
.modal__elm header.ccm-head:not(.modal__body header) { display: block; padding-top: 20px; }
.ccm-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ccm-muted);
}
.ccm-kicker i { color: var(--ccm-brand); }
.ccm-title { display: block; margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ccm-ink); }
.ccm-sub { margin: 6px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ccm-muted); max-width: 560px; }

/* The x: a quiet round button in the top-right corner */
.ccm-x,
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ccm-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.ccm-x:hover,
.modal__close:hover { background: var(--ccm-sunken); color: var(--ccm-ink); }
.ccm-x:focus-visible,
.modal__close:focus-visible { outline: 2px solid var(--ccm-focus); outline-offset: 2px; }
.ccm--custom .ccm-x--float {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(22, 20, 31, 0.16);
}

/* Body */
.modal__elm .modal__body {
  padding: 16px var(--ccm-pad) 12px;
  max-height: calc(100vh - 230px);
  max-height: calc(100dvh - 230px);
  overflow: auto;
  overscroll-behavior: contain;
}
.modal__elm .modal__body > fieldset > .row:last-child,
.modal__elm .modal__body > form > fieldset > .row:last-child { margin-bottom: 0 !important; }
.modal__elm .label,
.modal__elm .form-label,
.modal__elm .form-group-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ccm-ink-2);
}
.modal__elm .form-section-title {
  margin: 4px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ccm-faint);
}
.modal__elm .modal__body .form-section-title:not(:first-child) { margin-top: 22px; }

/* Fields: roomy, soft-cornered, a tinted ring on focus. Small (-sm) controls stay small. */
.modal__elm :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm):not([type=file]):not([type=color]) {
  min-height: var(--ccm-field-h);
  padding: 9px 14px;
  border: 1.5px solid var(--ccm-field-line);
  border-radius: var(--ccm-radius-field);
  font-size: 15px;
  box-shadow: none;
}
.modal__elm .form-select:not(.form-select-sm) { padding-right: 38px; }
.modal__elm textarea.form-control:not(.form-control-sm) { min-height: 96px; }
.modal__elm :is(.form-control, .form-select):focus {
  border-color: var(--ccm-brand) !important;
  box-shadow: 0 0 0 4px rgba(var(--ccm-brand-rgb), 0.12) !important;
  outline: 0;
}
.modal__elm .form-control[readonly],
.modal__elm .form-control:disabled,
.modal__elm .form-select:disabled { background-color: var(--ccm-sunken); color: var(--ccm-muted); }
.modal__elm .form-check-input:checked { background-color: var(--ccm-brand); border-color: var(--ccm-brand); }
.modal__elm .select2-container--default .select2-selection--single {
  height: var(--ccm-field-h);
  border: 1.5px solid var(--ccm-field-line);
  border-radius: var(--ccm-radius-field);
}
.modal__elm .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--ccm-field-h) - 3px); padding-left: 14px; font-size: 15px; }
.modal__elm .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--ccm-field-h) - 3px); right: 8px; }
.modal__elm .select2-container--default .select2-selection--multiple { min-height: var(--ccm-field-h); border: 1.5px solid var(--ccm-field-line); border-radius: var(--ccm-radius-field); }
.modal__elm .select2-container--focus .select2-selection,
.modal__elm .select2-container--open .select2-selection { border-color: var(--ccm-brand) !important; box-shadow: 0 0 0 4px rgba(var(--ccm-brand-rgb), 0.12); }

/* Footer: Close as a quiet link on the left, the action on the right. Bare <footer> and
   <footer class="modal-footer"> look the same; a line appears over it only while the body has more below. */
.modal__elm footer:not(.modal__body footer) {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 14px var(--ccm-pad) 22px;
  background: var(--ccm-surface);
  border-top: 1px solid transparent;
  border-radius: 0 0 var(--ccm-radius) var(--ccm-radius);
  transition: border-color 0.15s ease;
}
.modal__elm.has-more footer:not(.modal__body footer) { border-top-color: var(--ccm-line); }
.modal__elm footer:not(.modal__body footer) > * { margin: 0; }
.modal__elm footer:not(.modal__body footer) .btn:not(.btn-sm) {
  min-height: 42px;
  padding: 9px 20px;
  border-radius: var(--ccm-radius-field);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Footers that group their buttons in <div>s: the first group goes left, the rest right */
.modal__elm footer:not(.modal__body footer) > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modal__elm footer:not(.modal__body footer) > div:first-child:not(:last-child) { margin-right: auto; }
.modal__elm footer:not(.modal__body footer) > div > * { margin: 0; }
.modal__elm footer:not(.modal__body footer) > div:empty { display: none; }
/* The first secondary button is the way out: a quiet link, pushed left */
.modal__elm footer:not(.modal__body footer) > div:first-child:not(:last-child) > :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-link, [data-ccm-close]):first-child,
.modal__elm footer:not(.modal__body footer) > :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-link, [data-ccm-close]):first-child {
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  border-color: transparent;
  background: transparent;
  color: var(--ccm-muted);
  text-decoration: none;
  box-shadow: none;
}
.modal__elm footer:not(.modal__body footer) > div:first-child:not(:last-child) > :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-link, [data-ccm-close]):first-child:hover,
.modal__elm footer:not(.modal__body footer) > :is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-link, [data-ccm-close]):first-child:hover {
  background: var(--ccm-sunken);
  color: var(--ccm-ink);
}
.modal__elm footer .btn.is-busy { pointer-events: none; opacity: 0.75; }

/* Error and confirm panels made by ccModal itself */
.ccm-error .modal__body,
.ccm-confirm .modal__body { color: var(--ccm-muted); }

.ccm-image { text-align: center; }
.ccm-image img { max-width: 100%; max-height: calc(100vh - 2 * var(--ccm-top)); border-radius: var(--ccm-radius); box-shadow: var(--ccm-shadow); }
.ccm-iframe { overflow: hidden; }
.ccm-iframe iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------------------------------------------------------------- phones: a sheet from the bottom */

@media (max-width: 575.98px) {
  :root { --ccm-pad: 20px; }
  .ccm__viewport { padding: 24px 0 0; }
  .ccm__frame { margin-top: auto; }
  .ccm__frame > .modal__elm { animation-name: ccm-sheet; }
  .modal__elm:not(.modal__fullscreen) { max-width: none; border-radius: 22px 22px 0 0; }
  .modal__elm header:not(.modal__body header) { padding-top: 20px; }
  .modal__elm .modal__body { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); }
  .modal__elm footer:not(.modal__body footer) {
    border-radius: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .ccm-loading { margin: auto auto 40vh; }
}

/* ---------------------------------------------------------------- Bootstrap .modal: the same look */

.modal {
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--ccm-radius);
  --bs-modal-inner-border-radius: var(--ccm-radius);
  --bs-modal-box-shadow: var(--ccm-shadow);
  --bs-modal-header-padding: 22px 18px 6px var(--ccm-pad);
  --bs-modal-header-border-color: transparent;
  --bs-modal-footer-border-color: transparent;
  --bs-modal-padding: 16px var(--ccm-pad);
  --bs-modal-title-line-height: 1.3;
}
.modal-backdrop { --bs-backdrop-bg: rgb(22, 20, 31); --bs-backdrop-opacity: 0.46; }
.modal-content { box-shadow: var(--ccm-shadow); color: var(--ccm-ink); }
.modal-title { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.modal-footer { padding: 14px var(--ccm-pad) 22px; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-header .btn-close { width: 34px; height: 34px; padding: 0; margin: -6px -4px -6px auto; border-radius: 50%; background-size: 12px; opacity: 0.55; }
.modal-header .btn-close:hover { background-color: var(--ccm-sunken); opacity: 1; }
.modal.fade .modal-dialog { transform: translateY(8px) scale(0.985); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal.show .modal-dialog { transform: none; }

/* ---------------------------------------------------------------- motion */

/* ---------------------------------------------------------------- a window that loads in its own shape
   (cc-modal.js SHAPES, 'workspace'): the filling card appears at once with its title, step bar and body
   shimmering, and the real content fades into the same frame instead of a second card rising. */
.ccm-shell.modal__fullscreen { --ccm-shell-gut: var(--ccm-pad); position: fixed; inset: 16px; width: auto; max-width: 1440px; height: auto; min-height: 0; margin: 0 auto;
  border-radius: var(--ccm-radius); box-shadow: 0 1px 2px rgba(28, 26, 36, .04), 0 32px 80px -28px rgba(28, 26, 36, .45); overflow: hidden; display: flex; flex-direction: column;
  animation: ccm-rise .38s cubic-bezier(.2, .8, .2, 1) both; }
.ccm-shell i { display: block; border-radius: 8px; background: linear-gradient(90deg, #f1eff6, #f8f7fb, #f1eff6); background-size: 200% 100%; animation: ccm-shimmer 1.3s ease-in-out infinite; }
.ccm-shell-head { display: grid; gap: 10px; padding: 26px var(--ccm-shell-gut) 0; }
.ccm-shell-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 22px var(--ccm-shell-gut) 18px; border-bottom: 1px solid var(--ccm-line); }
.ccm-shell-steps i { height: 3px; border-radius: 2px; }
.ccm-shell-steps i:first-child { background: rgba(var(--ccm-brand-rgb), .55); animation: none; }
.ccm-shell-body { flex: 1 1 auto; display: grid; align-content: start; gap: 16px; padding: 24px var(--ccm-shell-gut); }
.ccm-shell-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ccm-shell-row i { height: 120px; border-radius: 16px; }
.ccm-shell-foot { display: flex; justify-content: flex-end; padding: 14px var(--ccm-shell-gut); border-top: 1px solid var(--ccm-line); }
.ccm--shaped .ccm__frame > .modal__elm:not(.ccm-shell) { animation: none; }
@keyframes ccm-rise { from { opacity: 0; transform: translateY(18px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes ccm-shimmer { to { background-position: -200% 0; } }
@media (max-width: 640px) { .ccm-shell.modal__fullscreen { inset: 0; border-radius: 0; } .ccm-shell-row { grid-template-columns: minmax(0, 1fr); } .ccm-shell-row i:nth-child(n+2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ccm-shell, .ccm-shell i { animation: none; } }

@keyframes ccm-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ccm-sheet { from { opacity: 0.6; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ccm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ccm-spin { to { transform: rotate(360deg); } }
@keyframes ccm-nudge { 0%, 100% { transform: none; } 40% { transform: scale(1.012); } }

@media (prefers-reduced-motion: reduce) {
  .ccm *, .ccm-ghost, .modal.fade .modal-dialog { animation: none !important; transition: none !important; }
  .ccm-spinner { animation: ccm-spin 1.4s linear infinite !important; }
}

/* ---------------------------------------------------------------- ccCombo: a <select> with a search box (assets/js/cc-combo.js)
   The field shows the choice; its list opens in a panel fixed to the viewport (on <body>, so a
   scrolling modal body cannot clip it) with a search box at the top. Replaces select2 in modals. */

.cc-combo-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.cc-combo { position: relative; width: 100%; }
.cc-combo-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ccm-field-h);
  text-align: left;
  cursor: pointer;
  background-color: var(--ccm-surface);
}
.cc-combo .cc-combo-field:not(.form-control-sm) { border: 1.5px solid var(--ccm-field-line); border-radius: var(--ccm-radius-field); font-size: 15px; padding-left: 14px; }
.cc-combo-field.is-disabled { background-color: var(--ccm-sunken); color: var(--ccm-muted); cursor: not-allowed; }
.cc-combo.is-open .cc-combo-field,
.cc-combo-field:focus-visible { border-color: var(--ccm-brand) !important; box-shadow: 0 0 0 4px rgba(var(--ccm-brand-rgb), 0.12) !important; outline: 0; }
.cc-combo.is-invalid .cc-combo-field { border-color: var(--cc-danger, #c0322a) !important; }
.cc-combo-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ccm-ink); }
.cc-combo-placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ccm-faint); }

.cc-combo--multi .cc-combo-field { flex-wrap: wrap; gap: 6px; height: auto; padding: 6px 36px 6px 8px; cursor: text;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23716d84' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 10px; }
.cc-combo--multi .cc-combo-placeholder { padding-left: 6px; }
.cc-combo-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--cc-brand-soft, #efebfe); color: var(--cc-brand-ink, #4a25cf); font-size: 13px; font-weight: 500; line-height: 1.3; }
.cc-combo-chip-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.cc-combo-chip-x:hover { background: rgba(var(--ccm-brand-rgb), 0.14); }

.cc-combo-panel {
  position: fixed;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  max-height: min(340px, 60vh);
  padding: 8px;
  background: var(--ccm-surface);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(22, 20, 31, 0.07), 0 18px 40px -12px rgba(22, 20, 31, 0.28);
  color: var(--ccm-ink);
  font-size: 14px;
  animation: ccm-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cc-combo-panel[hidden] { display: none; }
.cc-combo-searchbar { flex: none; padding: 0 0 8px; border-bottom: 1px solid var(--ccm-line); }
.cc-combo-panel .cc-combo-search { height: 38px; min-height: 0; padding: 6px 12px 6px 34px; border: 1.5px solid var(--ccm-field-line); border-radius: 10px; font-size: 14px;
  background: var(--ccm-sunken) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716d84' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e") no-repeat 11px center / 15px; }
.cc-combo-panel .cc-combo-search:focus { border-color: var(--ccm-brand); background-color: var(--ccm-surface); box-shadow: 0 0 0 3px rgba(var(--ccm-brand-rgb), 0.12); outline: 0; }
.cc-combo-action { flex: none; padding: 8px 2px 0; }
.cc-combo-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.cc-combo-list li[role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.cc-combo-list li[role=option].is-active { background: var(--ccm-sunken); }
.cc-combo-list li[role=option].is-chosen { font-weight: 600; }
.cc-combo-list li[role=option].is-none { color: var(--ccm-muted); }
.cc-combo-list li[role=option] > span { flex: 1 1 auto; min-width: 0; }
.cc-combo-tick { flex: none; margin-left: auto; font-size: 12px; color: var(--ccm-brand); visibility: hidden; }
.cc-combo-list li[role=option].is-chosen .cc-combo-tick { visibility: visible; }
.cc-combo-list mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.cc-combo-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ccm-faint); }
.cc-combo-empty, .cc-combo-more { padding: 10px; font-size: 13px; color: var(--ccm-faint); }

/* ---------------------------------------------------------------- ccTime: any time of day, typed or from a list (assets/js/cc-time.js)
   The list is a .cc-combo-panel; the field is a text box with a clock. */
.cc-time { position: relative; display: inline-block; width: 104px; max-width: 100%; vertical-align: middle; }
.cc-time .cc-time-field { width: 100%; min-height: 36px; padding: 5px 30px 5px 10px; border: 1.5px solid var(--ccm-field-line, #dcd9e5); border-radius: 10px;
  background: var(--ccm-surface, #fff); color: var(--ccm-ink, #16141f); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cc-time .cc-time-field:focus { cursor: text; }
.cc-time.is-open .cc-time-field,
.cc-time .cc-time-field:focus { border-color: var(--ccm-brand, #5b34e6); box-shadow: 0 0 0 4px rgba(var(--ccm-brand-rgb, 91, 52, 230), 0.12); outline: 0; }
.cc-time.is-invalid .cc-time-field { border-color: var(--cc-danger, #c0322a) !important; animation: cc-time-shake 0.3s; }
.cc-time .cc-time-field:disabled { background: var(--ccm-sunken, #f5f4f8); color: var(--ccm-muted, #716d84); cursor: not-allowed; }
.cc-time-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ccm-faint, #9a96ab); pointer-events: none; }
.cc-time-panel { max-height: min(300px, 50vh); }
.cc-time-hint { flex: none; padding: 2px 6px 8px; border-bottom: 1px solid var(--ccm-line, #eceaf2); font-size: 12px; color: var(--ccm-muted, #716d84); }
.cc-time-hint strong { color: var(--ccm-ink, #16141f); }
.cc-time-list li[role=option] { padding: 6px 10px; font-variant-numeric: tabular-nums; }
@keyframes cc-time-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .cc-time.is-invalid .cc-time-field { animation: none; } }