/* Creative Technology design system tokens (light theme). Used by
   comments.css and page CSS as var(--ct-*). Source: the CT design system
   artifact (project/tokens.json); values marked Proposal there are UI
   starting points. Rules: square panels/cards, radius-sm on inputs and
   buttons, radius-md on menus, flat colour (no drop shadows), 2px solid
   focus ring with 2px offset, never ct-yellow text on white. */
:root {
  --ct-yellow: #ffc52f; /* accent: fills, bars, primary buttons, selected */
  --ct-slate: #333c42; /* dark brand panel; white or yellow on it */
  --ct-black: #231f20; /* ink, on-accent, focus ring */
  --ct-white: #ffffff;
  --ct-surface: #ffffff;
  --ct-surface-alt: #f4f5f6; /* raised panels, hover, card header bands */
  --ct-surface-sunken: #e6e9eb; /* behind white cards (modal bodies); not in the design system */
  --ct-ink: #231f20;
  --ct-ink-muted: #5b646a; /* secondary text only */
  --ct-border: #d5d9dc; /* hairline dividers */
  --ct-border-strong: #8c969c; /* input and control borders */
  --ct-error: #b00020; /* not in the design system yet */
  --ct-radius-sm: 2px;
  --ct-radius-md: 4px;
}

/* intl-tel-input (initPhoneInput in app.js): keep typed text clear of the flag dropdown -
   Tadabase's input padding overrides the library's own rule */
.iti--allow-dropdown input,
.iti--allow-dropdown input[type="text"],
.iti--allow-dropdown input[type="tel"] {
  padding-left: 52px !important;
}

/* Form Submit button: keep the "form-submit-right" class on the form's Submit
   button. In modals it is pinned to the bottom-right of the modal, level with
   the Close button, whatever the form's height (a fixed top offset drifted
   with form height, field errors and footer padding). */

/* Let the button position against .modal-content instead of the nearest
   positioned wrapper (modal-body, layout column, submit column) */
.modal-content:has(.form-submit-right) .modal-body,
.modal-content:has(.form-submit-right) .t-col,
.modal-content:has(.form-submit-right) .form-submit > [class*="col-"] {
  position: static !important;
}

/* The now-empty submit row takes no space */
.modal-content:has(.form-submit-right) .form-submit {
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Pin to the footer row, matching the footer's 15px padding */
.modal .form-submit-right {
  position: absolute !important;
  top: auto !important;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  float: none !important;
  margin: 0 !important;
}

/* Outside modals (full-page forms): simple right alignment */
.form-submit-right {
  float: right;
}

/* Inline add forms (add the inline-form class to the form component):
   fields and submit button on one row */
.inline-form form > div:has(> .form-pages) {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.inline-form .form-pages {
  flex: 0 1 auto;
  min-width: 0;
}
.inline-form .form-pages > .row {
  display: flex;
  align-items: flex-end;
}
.inline-form .form-pages > .row > .ctrl-col {
  float: none;
  flex: 0 1 auto;
  width: 240px;
  min-width: 160px;
}
/* drop empty layout columns (e.g. unused 3rd col on Add Car) */
.inline-form .form-pages > .row > .ctrl-col:not(:has(.form-group)) {
  display: none;
}
/* title column sizes to its text, centered vertically */
.inline-form .form-pages > .row > .ctrl-col:first-child {
  display: block;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  align-self: center;
}
.inline-form .form-submit {
  flex: 0 0 auto;
  margin: 0 0 15px 0;
}
.inline-form .form-submit > div {
  padding: 0;
}

/* =====================================================================
   File & Documents field restyle (pairs with attachment.js)
   Scope: Tadabase multi-file uploads (.hit-tb-file-upload), detail lists
          (.tb-multi-type-link / .tb-multi-type-img) and custom .file-item galleries
   ===================================================================== */

/* ---------- Upload widget (forms / edit modals) ---------- */
.hit-tb-file-upload {
  flex-direction: column !important;
  align-items: stretch !important;
}
.hit-tb-file-upload .hit-tb-files {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
}
.hit-tb-file-upload .hit-tb-files.ng-hide {
  display: none !important;
}
/* Keep the list and chips within the field column */
.hit-tb-file-upload,
.hit-tb-files,
.hit-tb-file {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

/* One row per file: [icon] filename ........ [open] [delete] */
.hit-tb-file-upload .hit-tb-file {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  height: auto !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 6px 8px !important;
  float: none !important;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.hit-tb-file-upload .hit-tb-file:hover {
  border-color: #9fb3c8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Icon / thumbnail tile */
.hit-tb-file-upload .hit-tb-file > .img,
.hit-tb-file-upload .hit-tb-file > .icn {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #f3f5f8;
  overflow: hidden;
}
.hit-tb-file-upload .hit-tb-file > .img img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.hit-tb-file-upload .hit-tb-file > .icn i,
.hit-tb-file-upload .hit-tb-file > .img i {
  font-size: 18px !important;
  color: #64748b;
}

/* Type colors (class added by attachment.js) */
.hit-tb-file-upload .hit-tb-file.ct-ext-pdf > .icn i {
  color: #c0392b;
}
.hit-tb-file-upload .hit-tb-file.ct-ext-doc > .icn i {
  color: #2b579a;
}
.hit-tb-file-upload .hit-tb-file.ct-ext-xls > .icn i {
  color: #217346;
}
.hit-tb-file-upload .hit-tb-file.ct-ext-img > .img i,
.hit-tb-file-upload .hit-tb-file.ct-ext-img > .icn i {
  color: #7c3aed;
}

/* Actions bar becomes the rest of the row; filename is visible (Tadabase hides it) */
.hit-tb-file-upload .hit-tb-file .actions {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  position: static !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.hit-tb-file-upload .hit-tb-file .actions .t1 {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 13px;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hit-tb-file-upload .hit-tb-file .actions .icn {
  flex: 0 0 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  border-radius: 4px;
  color: #64748b;
  cursor: pointer;
}
.hit-tb-file-upload .hit-tb-file .actions .icn:hover {
  background: #eef2f6;
  color: #1e293b;
}
.hit-tb-file-upload .hit-tb-file .actions span.icn:hover {
  background: #fdecea;
  color: #c0392b;
}

/* Drop zone: compact dashed strip instead of a giant empty box */
.hit-tb-file-upload .dropzone {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 10px !important;
  border: 1.5px dashed #b8c4d2 !important;
  border-radius: 6px;
  background: #f8fafc !important;
  transition: all 0.15s;
}
.hit-tb-file-upload .dropzone:hover,
.hit-tb-file-upload .dropzone.dz-drag-hover {
  border-color: #2b6cb0 !important;
  background: #ebf4ff !important;
}
.hit-tb-file-upload .dropzone .dz-message {
  margin: 0 !important;
}
.hit-tb-file-upload .dropzone .dz-button {
  font-size: 13px !important;
  color: #4a5568 !important;
  white-space: nowrap;
}
.hit-tb-file-upload .dropzone .dz-button:before {
  content: "\f0ee"; /* cloud-upload */
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-right: 8px;
  color: #2b6cb0;
}

/* ---------- Detail / read-only view: file-type lists (ul.tb-multi-type-link) ---------- */
ul.tb-multi-file.tb-multi-type-link {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
ul.tb-multi-file.tb-multi-type-link li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  background: #f8fafc;
  font-size: 13px;
  color: #2b6cb0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.tb-multi-file.tb-multi-type-link li a:hover {
  background: #ebf4ff;
  border-color: #9fb3c8;
}
ul.tb-multi-file.tb-multi-type-link li a:before {
  content: "\f15b"; /* generic file */
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  color: #64748b;
}
ul.tb-multi-file.tb-multi-type-link li a.ct-ext-pdf:before {
  content: "\f1c1";
  color: #c0392b;
}
ul.tb-multi-file.tb-multi-type-link li a.ct-ext-doc:before {
  content: "\f1c2";
  color: #2b579a;
}
ul.tb-multi-file.tb-multi-type-link li a.ct-ext-xls:before {
  content: "\f1c3";
  color: #217346;
}
ul.tb-multi-file.tb-multi-type-link li a.ct-ext-img:before {
  content: "\f1c5";
  color: #7c3aed;
}

/* ---------- Detail / read-only view: image-type lists + custom galleries ----------
   Same pill style as file-type lists, with a small thumbnail (or type icon) in
   the pill. Hovering a pill with a viewable image shows a preview (JS). */
ul.tb-multi-file.tb-multi-type-img,
#load-photo-container,
#bol-container,
#manifest-container,
div:has(> .file-item) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 4px;
}
ul.tb-multi-file.tb-multi-type-img li,
.file-item {
  display: block;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
ul.tb-multi-file.tb-multi-type-img li a,
.file-item > a {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  width: auto !important;
  box-sizing: border-box;
  padding: 3px 10px 3px 3px !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 14px;
  background: #f8fafc !important;
  font-size: 13px;
  line-height: 1.3;
  color: #2b6cb0 !important;
  text-decoration: none !important;
  cursor: pointer;
}
ul.tb-multi-file.tb-multi-type-img li a:hover,
.file-item > a:hover {
  background: #ebf4ff !important;
  border-color: #9fb3c8 !important;
}

/* Thumbnail / icon chip at the start of the pill */
ul.tb-multi-file.tb-multi-type-img .thumb-wrap,
.file-item img.thumbnail,
.file-item .file-icon {
  flex: 0 0 22px;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e8edf3;
  object-fit: cover;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap i.thumb-i {
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #64748b;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap i.fa-file-pdf {
  color: #c0392b !important;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap i.fa-file-word {
  color: #2b579a !important;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap i.fa-file-excel {
  color: #217346 !important;
}
ul.tb-multi-file.tb-multi-type-img .thumb-wrap i.fa-file-image {
  color: #7c3aed !important;
}
.file-item .file-icon {
  font-size: 0 !important;
} /* hides the emoji */
.file-item .file-icon:before {
  content: "\f15b";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 13px;
  line-height: 1;
  color: #64748b;
}
.file-item.ct-ext-pdf .file-icon:before {
  content: "\f1c1";
  color: #c0392b;
}
.file-item.ct-ext-doc .file-icon:before {
  content: "\f1c2";
  color: #2b579a;
}
.file-item.ct-ext-xls .file-icon:before {
  content: "\f1c3";
  color: #217346;
}
.file-item.ct-ext-img .file-icon:before {
  content: "\f1c5";
  color: #7c3aed;
}

/* Filename */
ul.tb-multi-file.tb-multi-type-img .ct-cap,
.file-item .file-name {
  display: block;
  min-width: 0;
  width: auto;
  margin: 0;
  font-size: 13px;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Hover preview card (positioned by JS) ---------- */
#ct-file-preview {
  position: fixed;
  z-index: 3000;
  display: none;
  padding: 6px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}
#ct-file-preview.on {
  display: block;
}
#ct-file-preview img {
  display: block;
  max-width: 320px;
  max-height: 260px;
  border-radius: 4px;
  object-fit: contain;
  background: #f3f5f8;
}
#ct-file-preview .cap {
  max-width: 320px;
  margin-top: 5px;
  font-size: 12px;
  color: #4a5568;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Fix: hidden pending rows were forced visible ---------- */
.hit-tb-file-upload .hit-tb-file.ng-hide {
  display: none !important;
}

/* ---------- Drop zone after files are added (Dropzone previews) ---------- */
.hit-tb-file-upload .dropzone.dz-started {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px;
  padding: 8px !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Keep the drop prompt visible so more files can be added */
.hit-tb-file-upload .dropzone.dz-started .dz-message {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  order: 99;
  margin: 2px 0 0 !important;
  text-align: center;
}
.hit-tb-file-upload .dropzone.dz-started .dz-message .dz-button:after {
  content: " (add more)";
  color: #94a3b8;
}
/* Single-file uploads: hide "add more" once the limit is reached */
.hit-tb-file-upload .dropzone.dz-started.dz-max-files-reached .dz-message {
  display: none !important;
}
/* Block click and drag-drop on the zone, keep the file's remove (x) clickable */
.hit-tb-file-upload .dropzone.dz-max-files-reached {
  pointer-events: none;
}
.hit-tb-file-upload .dropzone.dz-max-files-reached .dz-preview {
  pointer-events: auto;
}

/* Each queued/uploaded file: [thumb] name  size  [status] [x] */
.hit-tb-file-upload .dropzone .dz-preview {
  position: relative !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 6px 58px 10px 8px !important;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #fff;
}
.hit-tb-file-upload .dropzone .dz-preview:hover .dz-image img {
  transform: none !important;
  filter: none !important;
}

.hit-tb-file-upload .dropzone .dz-preview .dz-image {
  position: static !important;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px !important;
  overflow: hidden;
  background: #f3f5f8;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-image img {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover;
}
.hit-tb-file-upload .dropzone .dz-preview.dz-file-preview .dz-image:before {
  content: "\f15b";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 18px;
  color: #64748b;
}
.hit-tb-file-upload .dropzone .dz-preview.ct-ext-pdf .dz-image:before {
  content: "\f1c1";
  color: #c0392b;
}
.hit-tb-file-upload .dropzone .dz-preview.ct-ext-doc .dz-image:before {
  content: "\f1c2";
  color: #2b579a;
}
.hit-tb-file-upload .dropzone .dz-preview.ct-ext-xls .dz-image:before {
  content: "\f1c3";
  color: #217346;
}
.hit-tb-file-upload .dropzone .dz-preview.ct-ext-img .dz-image:before {
  content: "\f1c5";
  color: #7c3aed;
}

.hit-tb-file-upload .dropzone .dz-preview .dz-details {
  position: static !important;
  opacity: 1 !important;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 !important;
  background: none !important;
  text-align: left !important;
  line-height: 1.3;
  color: #2d3748;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-details .dz-filename {
  order: 1;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-details .dz-filename span {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-details .dz-size {
  order: 2;
  display: block !important;
  margin: 0 !important;
  font-size: 11px !important;
  color: #94a3b8;
  white-space: nowrap;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-details .dz-size span {
  background: none !important;
  padding: 0 !important;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-details .dz-size strong {
  font-weight: 400;
}

/* Thin progress bar along the bottom of the row */
.hit-tb-file-upload .dropzone .dz-preview .dz-progress {
  position: absolute !important;
  top: auto !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 4px !important;
  width: auto !important;
  height: 3px !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 2px;
  background: #e2e8f0 !important;
  opacity: 1;
  overflow: hidden;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-progress .dz-upload {
  background: #2b6cb0 !important;
  height: 100%;
}
.hit-tb-file-upload .dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0 !important;
  transition: opacity 0.4s 0.3s;
}

/* Status icons replace the giant SVG check / X overlays */
.hit-tb-file-upload .dropzone .dz-preview .dz-success-mark,
.hit-tb-file-upload .dropzone .dz-preview .dz-error-mark {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: 34px !important;
  width: 18px !important;
  height: 18px !important;
  margin: -9px 0 0 !important;
  opacity: 0;
  animation: none !important;
  pointer-events: none;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-success-mark svg,
.hit-tb-file-upload .dropzone .dz-preview .dz-error-mark svg {
  display: none;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-success-mark:before,
.hit-tb-file-upload .dropzone .dz-preview .dz-error-mark:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 15px;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-success-mark:before {
  content: "\f058";
  color: #2f855a;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-error-mark:before {
  content: "\f06a";
  color: #c0392b;
}
.hit-tb-file-upload .dropzone .dz-preview.dz-success .dz-success-mark {
  opacity: 1 !important;
}
.hit-tb-file-upload .dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1 !important;
}

/* Error state: tinted row, message on a second line */
.hit-tb-file-upload .dropzone .dz-preview.dz-error {
  padding-bottom: 20px !important;
  border-color: #f5c2c0;
  background: #fff8f7;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-error-message {
  position: static !important;
  display: none;
  opacity: 1 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #c0392b !important;
  font-size: 12px;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-error-message:after {
  display: none !important;
}
.hit-tb-file-upload .dropzone .dz-preview.dz-error .dz-error-message {
  display: block !important;
  position: absolute !important;
  left: 50px;
  right: 36px;
  bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Remove file" text link becomes an X button */
.hit-tb-file-upload .dropzone .dz-preview .dz-remove {
  position: absolute !important;
  top: 50%;
  right: 6px;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 4px;
  background: #fff;
  font-size: 0 !important;
  color: #64748b !important;
  text-decoration: none !important;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-remove:before {
  content: "\f00d";
  display: inline-block !important;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-style: normal;
  font-size: 14px !important;
  line-height: 24px !important;
}
.hit-tb-file-upload .dropzone .dz-preview .dz-remove:hover {
  background: #fdecea;
  color: #c0392b !important;
}

/* =====================================================================
   Calendar events (.fc-event): readable text on light status colors
   ===================================================================== */

/* Accepted, New, Request: dark text on light event backgrounds */
.fc-event[style*="#c8f8b7" i],
.fc-event[style*="#5bc0de" i],
.fc-event[style*="#cdcdcd" i] {
  color: #1a1a1a !important;
}
.fc-event[style*="#c8f8b7" i] *,
.fc-event[style*="#5bc0de" i] *,
.fc-event[style*="#cdcdcd" i] * {
  color: inherit !important;
}