/*@import url('themes5/cosmos-light-theme.css');*/
@import url('bootstrap.min.css');

@import url('Cosmos.Common.AspNetCore.Compact.css');

:root,
[data-bs-theme=dark],
[data-bs-theme=light] {
  /* Bootstrap surface bridge. Bootstrap 5.3 answers data-bs-theme with ITS OWN palette
     (#212529 / #343a40 / ...), which is not ours -- so without this block every
     Bootstrap-native surface the Cosmos CSS does not explicitly override (.card,
     .modal-content, .dropdown-menu, .list-group, .offcanvas, .nav-tabs, the accordion
     body) renders as a neutral charcoal panel sitting on the navy canvas. Mapping them
     onto the canonical slots makes every Bootstrap component theme-correct, including
     for a future fourth theme, because the slots are what change per theme. */
  --bs-body-bg:               var(--cosmos-canvas);
  --bs-body-color:            var(--cosmos-fg);
  --bs-secondary-bg:          var(--cosmos-surface);
  --bs-tertiary-bg:           var(--cosmos-surface-raised);
  --bs-border-color:          var(--cosmos-border);
  --bs-emphasis-color:        var(--cosmos-fg);
  --bs-secondary-color:       var(--cosmos-fg-muted);
  --bs-tertiary-color:        var(--cosmos-fg-subtle);

  --bs-body-font-family: "Segoe UI";
  --bs-breadcrumb-divider: '>';
  --bs-breadcrumb-margin-bottom: 0rem;
}

.accordion {
  /*--bs-accordion-active-bg: var(--cosmos-brand-soft);*/
  --bs-accordion-active-bg: color-mix(in srgb, var(--cosmos-fg) 25%, var(--cosmos-surface));
  --bs-accordion-active-color: var(--cosmos-fg);
}

.accordion-button {
  color: var(--cosmos-fg);
}

  .accordion-button.selected {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    /*box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);*/
  }

  .accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  }


.bg-primary {
  background-color: var(--cosmos-brand-soft) !important;
  color: var(--cosmos-fg);
}

.btn {
  --bs-btn-line-height: 1.3;
}

.btn-primary {
  --bs-btn-color: var(--cosmos-fg-on-accent);
  --bs-btn-bg: var(--cosmos-brand);
  --bs-btn-border-color: var(--cosmos-brand);
  --bs-btn-hover-color: var(--cosmos-fg-on-accent);
  --bs-btn-hover-bg: var(--cosmos-brand);
  --bs-btn-hover-border-color: var(--cosmos-brand);
  --bs-btn-focus-shadow: 0px 0px 8px var(--cosmos-brand);
  --bs-btn-active-color: var(--cosmos-fg-on-accent);
  --bs-btn-active-bg: var(--cosmos-brand);
  --bs-btn-active-border-color: var(--cosmos-brand);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cosmos-fg-on-accent);
  --bs-btn-disabled-bg: var(--cosmos-border-strong);
  --bs-btn-disabled-border-color: var(--cosmos-border-strong);
}

.btn-secondary {
  --bs-btn-color: var(--cosmos-brand);
  --bs-btn-bg: var(--cosmos-surface);
  --bs-btn-border-color: var(--cosmos-brand);
  --bs-btn-hover-color: var(--cosmos-brand);
  --bs-btn-hover-bg: var(--cosmos-brand-soft);
  --bs-btn-hover-border-color: var(--cosmos-brand);
  --bs-btn-focus-shadow: 0px 0px 8px var(--cosmos-brand);
  --bs-btn-active-color: var(--cosmos-fg-on-accent);
  --bs-btn-active-bg: var(--cosmos-brand);
  --bs-btn-active-border-color: var(--cosmos-brand);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--cosmos-fg-on-accent);
  --bs-btn-disabled-bg: var(--cosmos-border-strong);
  --bs-btn-disabled-border-color: var(--cosmos-border-strong);
}

.btn-link {
  --bs-btn-color: var(--cosmos-brand);
  --bs-btn-hover-color: var(--cosmos-brand);
  --bs-btn-active-color: var(--cosmos-brand);
  --bs-btn-disabled-color: var(--cosmos-border);
  text-decoration: none;
}

  .btn-link:hover {
    text-decoration: underline;
  }

.btn-outline-link {
  --bs-btn-color: var(--cosmos-brand);
  --bs-btn-hover-color: var(--cosmos-brand);
  --bs-btn-active-color: var(--cosmos-brand);
  --bs-btn-disabled-color: var(--cosmos-fg-on-accent);
  text-decoration: none;
}

.form-label {
  color: var(--cosmos-fg);
}

.form-control,
.form-select {
  background-color: var(--cosmos-brand-soft);
  border-color: var(--cosmos-brand);
  color: var(--cosmos-brand);
  border-radius: var(--cosmos-radius-sm);
  outline: none;
}

  .form-control:hover,
  .form-select:hover {
    background-color: var(--cosmos-brand-soft);
    border-color: var(--cosmos-fg);
    color: var(--cosmos-fg);
    border-radius: var(--cosmos-radius-sm);
  }

  .form-control:active,
  .form-select:active {
    background-color: var(--cosmos-brand-soft);
    border-color: var(--cosmos-brand);
    color: var(--cosmos-fg);
    border-radius: var(--cosmos-radius-sm);
    outline: none;
  }

  .form-control:disabled,
  .form-select:disabled {
    background-color: var(--cosmos-border);
    border-color: var(--cosmos-brand-muted);
    color: var(--cosmos-fg-subtle);
    border-radius: var(--cosmos-radius-sm);
    outline: none;
  }

  .form-control:read-only,
  .form-select:disabled {
    background-color: var(--cosmos-surface);
    border-color: var(--cosmos-brand);
    /*color: var(--cosmos-fg);*/
    /*font-weight: bold;*/
    /*border: none;*/
    outline: none;
  }

    /* FIX: was missing comma — was an invalid descendant selector, never matched */
    .form-control:read-only::placeholder,
    .form-select:read-only::placeholder {
      background-color: var(--cosmos-surface);
      color: var(--cosmos-fg);
      font-weight: bold;
      border: none;
      outline: none;
    }

/* Placeholder text visibility - applies to all input fields in all themes */
.form-control::placeholder,
.form-select::placeholder {
  color: color-mix(in srgb, var(--cosmos-fg) 50%, var(--cosmos-surface));
  opacity: 1; /* Prevent browser from applying additional opacity on top */
  /*font-style: italic;*/
}

/*
.navbar-nav span {
  color: var(--cosmos-fg);
  cursor: pointer;
}
*/

.nav-link {
  --bs-nav-link-color: var(--cosmos-fg);
  --bs-nav-link-hover-color: var(--cosmos-brand);
  --bs-nav-link-disabled-color: var(--cosmos-fg-subtle);
}

  .nav-link.otk-custom-nav-horizontal:hover, .nav-link.otk-custom-nav-horizontal:active {
    background-color: var(--cosmos-brand-soft);
    border-left: 3px solid var(--cosmos-brand-muted);
    padding-left: 5px;
  }

.page-link.active {
  --bs-pagination-active-bg: var(--cosmos-brand);
}

.page-link {
  --bs-pagination-color: var(--cosmos-brand);
}

footer {
  background-color: var(--cosmos-brand-soft);
  color: var(--cosmos-fg);
  font-size: 12px;
}

.table > thead > tr > th {
  background-color: var(--cosmos-brand-soft);
  color: var(--cosmos-fg);
}

html,
body {
  font-family: 'Segoe UI';
}


.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem var(--cosmos-fg-subtle) !important
}

/* FINDING (2026-08-10): these four are literal `yellow` and appear to be debugging
   leftovers, not intent. Pinned unchanged during the theme migration per the
   characterization rule in .claude/rules/architecture/testing.md — see open
   question 3 in .docs/specs/2026-08-10-cosmos-theme-system-design.md. */
.gridRowYellow {
  background-color: yellow !important;
  --bs-table-active-color: yellow;
  --bs-table-hover-bg: yellow;
  --bs-table-active-bg: yellow !important;
  --bs-table-bg-state: yellow !important;
}

.spinner {
  border: 16px solid var(--cosmos-border);
  border-top: 16px solid var(--cosmos-brand);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 700ms linear infinite;
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
}


.position {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: #87ceeb1f;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

/* === Redesign additions === */

/* Status chip — semantic status pill used across all lists */
.cosmos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.cosmos-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.cosmos-chip.good {
  color: var(--cosmos-status-good);
  background: var(--cosmos-status-good-soft);
}
.cosmos-chip.warn {
  color: var(--cosmos-status-warn);
  background: var(--cosmos-status-warn-soft);
}
.cosmos-chip.bad {
  color: var(--cosmos-status-bad);
  background: color-mix(in srgb, var(--cosmos-status-bad) 12%, var(--cosmos-surface));
}
.cosmos-chip.info {
  color: var(--cosmos-brand);
  background: var(--cosmos-brand-soft);
}
.cosmos-chip.neutral {
  color: var(--cosmos-fg);
  background: var(--cosmos-canvas);
}

/* Tabular numerics (ACTT, dates, serial numbers, registration) */
.cosmos-num {
  font-family: var(--cosmos-font-code);
  font-variant-numeric: tabular-nums;
}

/* Filter pill — dashed-border rounded pill above DataGrids */
.cosmos-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--cosmos-border-strong);
  font-size: .75rem;
  background: var(--cosmos-surface);
  color: var(--cosmos-fg);
  cursor: pointer;
  user-select: none;
}
.cosmos-filter-pill .label {
  color: var(--cosmos-fg-subtle);
}
.cosmos-filter-pill .value {
  font-weight: 600;
}
.cosmos-filter-pill.active {
  border-color: var(--cosmos-brand);
  background: var(--cosmos-brand-soft);
}

/* Dialog layout helpers — used by SlideOverDialog body content */
.cosmos-dialog-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cosmos-dialog-sections {
  flex: 1;
  overflow-y: auto;
  padding: 1.125rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}