@charset "UTF-8";
/*! Generated from resources/sass/cdp.scss — do not edit this file by hand.
 *  Rebuild with `npm run css` in apps/cdp (dart-sass). */
:root {
  --cdp-ink: #2b2430;
  --cdp-ink-2: #5c5265;
  --cdp-muted: #877c8b;
  --cdp-faint: #b3aab2;
  --cdp-bg: #f6f2f4;
  --cdp-surface: #fff;
  --cdp-surface-2: #faf7f8;
  --cdp-surface-3: #f2ecef;
  --cdp-border: #ece3e7;
  --cdp-border-strong: #dccfd5;
  --cdp-accent: #d2436e;
  --cdp-accent-ink: #a32651;
  --cdp-accent-weak: #fbe8ef;
  --cdp-brand: #e6007e;
  --cdp-pos: #1f9d63;
  --cdp-pos-weak: #e4f4ec;
  --cdp-neg: #d14733;
  --cdp-neg-weak: #fbe8e4;
  --cdp-warn: #b57500;
  --cdp-warn-weak: #fdf3e0;
  --cdp-info: #3b6fd6;
  --cdp-info-weak: #e8f0fe;
  --cdp-series-web: #d2436e;
  --cdp-series-lead: #e1913a;
  --cdp-series-yoomum: #2f9c9c;
  --cdp-series-other: #9487a0;
  --cdp-shell: #241d29;
  --cdp-shell-2: #322938;
  --cdp-shell-3: #3d3345;
  --cdp-shell-ink: #ece7ef;
  --cdp-shell-muted: #9d92a6;
  --cdp-r-sm: 6px;
  --cdp-r: 8px;
  --cdp-r-lg: 12px;
  --cdp-r-pill: 999px;
  --cdp-sidebar-w: 244px;
  --cdp-topbar-h: 60px;
  --cdp-shadow-1: 0 1px 2px rgba(43, 36, 48, 0.05);
  --cdp-shadow-2: 0 4px 16px rgba(43, 36, 48, 0.1);
  --cdp-shadow-3: 0 18px 48px rgba(43, 36, 48, 0.18);
  --cdp-ring: 0 0 0 3px var(--cdp-accent-weak);
}

/* ---------------------------------------------------------------- base ---- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cdp-bg);
  color: var(--cdp-ink);
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cdp-accent-ink);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--cdp-accent);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--cdp-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

hr {
  border-color: var(--cdp-border);
}

code,
kbd,
samp {
  font-size: 0.85em;
  background: var(--cdp-surface-3);
  border-radius: var(--cdp-r-sm);
  padding: 0.1em 0.35em;
  color: var(--cdp-accent-ink);
}

::selection {
  background: var(--cdp-accent-weak);
}

:focus-visible {
  outline: 2px solid var(--cdp-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- shell ---- */
.cdp-shell {
  min-height: 100vh;
}

/* Off-canvas state for narrow viewports. A checkbox rather than JS, so the
   sidebar has no dependency on jQuery having loaded. */
.cdp-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cdp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cdp-sidebar-w);
  background: var(--cdp-shell);
  color: var(--cdp-shell-ink);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cdp-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  color: var(--cdp-shell-ink);
  flex: none;
}

.cdp-brand:hover,
.cdp-brand:focus {
  color: #fff;
  text-decoration: none;
}

.cdp-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--cdp-r);
  flex: none;
  display: block;
}

.cdp-brand__name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cdp-brand__sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdp-shell-muted);
}

.cdp-nav {
  flex: 1 1 auto;
  padding: 0.35rem 0.6rem 1rem;
}

.cdp-nav__group + .cdp-nav__group {
  margin-top: 1.1rem;
}

.cdp-nav__label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7d7189;
  padding: 0 0.55rem 0.4rem;
}

.cdp-nav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.46rem 0.55rem;
  border-radius: var(--cdp-r);
  color: #cec4d6;
  font-size: 0.855rem;
  font-weight: 500;
  line-height: 1.3;
}

.cdp-nav__link + .cdp-nav__link {
  margin-top: 1px;
}

.cdp-nav__link:hover,
.cdp-nav__link:focus {
  background: var(--cdp-shell-2);
  color: #fff;
  text-decoration: none;
}

.cdp-nav__link.is-active {
  background: var(--cdp-shell-3);
  color: #fff;
  font-weight: 600;
}

.cdp-nav__link.is-active .cdp-nav__icon {
  color: var(--cdp-brand);
}

.cdp-nav__icon {
  width: 1.05rem;
  text-align: center;
  font-size: 0.85rem;
  color: #8d8197;
  flex: none;
}

.cdp-sidebar__foot {
  flex: none;
  padding: 0.75rem 0.9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
  color: #7d7189;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.cdp-env {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--cdp-r-pill);
  background: rgba(255, 255, 255, 0.07);
  color: #b3a7bc;
}

/* Main column */
.cdp-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Only a shell that actually renders a sidebar indents its content column. */
.cdp-shell--nav .cdp-main {
  margin-left: var(--cdp-sidebar-w);
}

.cdp-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--cdp-topbar-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cdp-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
}

.cdp-topbar__title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}

.cdp-topbar__spacer {
  flex: 1 1 auto;
}

.cdp-burger {
  display: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--cdp-r);
  border: 1px solid var(--cdp-border-strong);
  background: var(--cdp-surface);
  color: var(--cdp-ink-2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  margin: 0;
}

.cdp-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43, 36, 48, 0.45);
  z-index: 1035;
  margin: 0;
}

.cdp-content {
  flex: 1 1 auto;
  padding: 1.6rem 1.5rem 4rem;
}

.cdp-content--full {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* The account menu in the topbar reuses Bootstrap's dropdown plugin. */
.cdp-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.5rem 0.25rem 0.3rem;
  border-radius: var(--cdp-r-pill);
  color: var(--cdp-ink);
  font-size: 0.83rem;
  font-weight: 550;
  background: transparent;
  border: 1px solid transparent;
}

.cdp-user:hover,
.cdp-user:focus,
.cdp-user[aria-expanded=true] {
  background: var(--cdp-surface);
  border-color: var(--cdp-border);
  color: var(--cdp-ink);
  text-decoration: none;
}

.cdp-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--cdp-r-pill);
  background: var(--cdp-accent-weak);
  color: var(--cdp-accent-ink);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}

.cdp-user__meta {
  line-height: 1.15;
  text-align: left;
}

.cdp-user__role {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--cdp-muted);
}

@media (max-width: 991.98px) {
  .cdp-sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--cdp-shadow-3);
  }
  .cdp-nav-toggle:checked ~ .cdp-sidebar {
    transform: none;
  }
  .cdp-nav-toggle:checked ~ .cdp-scrim {
    display: block;
  }
  .cdp-shell--nav .cdp-main {
    margin-left: 0;
  }
  .cdp-burger {
    display: inline-flex;
  }
  .cdp-content {
    padding: 1.1rem 1rem 3rem;
  }
  .cdp-user__meta {
    display: none;
  }
}
/* ----------------------------------------------------------- page head ---- */
.page-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.page-head__text {
  min-width: 0;
}

.page-head__actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.15rem;
}

.page-sub,
.page-subtitle {
  color: var(--cdp-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* ------------------------------------------------------- content widths --- */
/* Reading measure for ordinary screens; the wide-table layout opts out. */
.cdp-content > .cdp-wrap,
.cdp-content > .container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.cdp-content--full > .cdp-wrap,
.cdp-content--full > .container {
  max-width: none;
}

.section + .section {
  margin-top: 1.75rem;
}

.card + .section__head {
  margin-top: 1.75rem;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.section__title {
  font-size: 1rem;
  font-weight: 650;
  margin: 0;
}

.section__actions {
  margin-left: auto;
}

/* ------------------------------------------------------- simple grids ----- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.15rem;
  align-items: start;
}

.grid-2 > * > .card + .card,
.grid-2 > .card + .card {
  margin-top: 1.15rem;
}

/* --------------------------------------------------------------- cards ---- */
.card {
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-1);
}

.card + .card {
  margin-top: 1.15rem;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cdp-border);
  padding: 0.9rem 1.15rem;
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--cdp-ink);
  border-radius: var(--cdp-r-lg) var(--cdp-r-lg) 0 0;
}

.card-body {
  padding: 1.15rem;
}

.card-footer {
  background: var(--cdp-surface-2);
  border-top: 1px solid var(--cdp-border);
  border-radius: 0 0 var(--cdp-r-lg) var(--cdp-r-lg);
  padding: 0.8rem 1.15rem;
}

/* A card whose body is a table: let the table meet the card edges. */
.card > .table,
.card > .table-responsive > .table,
.card > .cdp-tablewrap > .table {
  margin-bottom: 0;
}

.cdp-tablewrap {
  overflow-x: auto;
  border-radius: 0 0 var(--cdp-r-lg) var(--cdp-r-lg);
}

/* ---------------------------------------------------------------- stats --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-1);
  padding: 1rem 1.1rem;
}

.stat__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cdp-muted);
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.stat__value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0.5rem 0 0;
  font-variant-numeric: tabular-nums;
}

.stat__note {
  font-size: 0.74rem;
  color: var(--cdp-muted);
  margin: 0.3rem 0 0;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--cdp-r-pill);
  background: var(--cdp-surface-3);
  color: var(--cdp-muted);
}

.delta.up {
  color: var(--cdp-pos);
  background: var(--cdp-pos-weak);
}

.delta.down {
  color: var(--cdp-neg);
  background: var(--cdp-neg-weak);
}

/* -------------------------------------------------------------- buttons --- */
.btn {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--cdp-r);
  padding: 0.44rem 0.95rem;
  border: 1px solid transparent;
  line-height: 1.4;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.btn:focus,
.btn.focus {
  box-shadow: var(--cdp-ring);
}

.btn-primary {
  background: var(--cdp-accent);
  border-color: var(--cdp-accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--cdp-accent-ink);
  border-color: var(--cdp-accent-ink);
  color: #fff;
}

.btn-secondary,
.btn-default {
  background: var(--cdp-surface);
  border-color: var(--cdp-border-strong);
  color: var(--cdp-ink);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--cdp-surface-3);
  border-color: var(--cdp-border-strong);
  color: var(--cdp-ink);
}

.btn-danger {
  background: var(--cdp-neg);
  border-color: var(--cdp-neg);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
  background: #b13a29;
  border-color: #b13a29;
  color: #fff;
}

.btn-success {
  background: var(--cdp-pos);
  border-color: var(--cdp-pos);
  color: #fff;
}

.btn-success:hover,
.btn-success:focus {
  background: #197f50;
  border-color: #197f50;
  color: #fff;
}

.btn-link {
  color: var(--cdp-accent-ink);
  font-weight: 600;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.btn-outline-primary {
  color: var(--cdp-accent-ink);
  border-color: var(--cdp-border-strong);
  background: var(--cdp-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--cdp-accent-weak);
  border-color: var(--cdp-accent);
  color: var(--cdp-accent-ink);
}

.btn-sm {
  font-size: 0.78rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--cdp-r-sm);
}

.btn-lg {
  font-size: 0.95rem;
  padding: 0.6rem 1.3rem;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  box-shadow: none;
}

/* ---------------------------------------------------------------- forms --- */
label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cdp-ink-2);
  margin-bottom: 0.3rem;
}

.form-control,
.custom-select,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=date],
select,
textarea {
  background-color: var(--cdp-surface);
  border: 1px solid var(--cdp-border-strong);
  border-radius: var(--cdp-r);
  color: var(--cdp-ink);
  font-size: 0.875rem;
  padding: 0.42rem 0.7rem;
  height: auto;
  box-shadow: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

select,
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23877c8b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  cursor: pointer;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: var(--cdp-surface);
  border-color: var(--cdp-accent);
  box-shadow: var(--cdp-ring);
  color: var(--cdp-ink);
  outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--cdp-faint);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--cdp-surface-3);
  color: var(--cdp-ink-2);
}

.form-text,
small.form-text {
  color: var(--cdp-muted);
  font-size: 0.76rem;
}

.form-group {
  margin-bottom: 0.9rem;
}

.invalid-feedback,
.is-invalid ~ .invalid-feedback {
  color: var(--cdp-neg);
  font-size: 0.78rem;
}

.form-control.is-invalid,
.is-invalid {
  border-color: var(--cdp-neg);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--cdp-neg-weak);
}

.input-group-text {
  background: var(--cdp-surface-3);
  border-color: var(--cdp-border-strong);
  color: var(--cdp-ink-2);
  font-size: 0.85rem;
  border-radius: var(--cdp-r);
}

/* Native checkboxes/radios tinted to the accent instead of system blue. */
input[type=checkbox],
input[type=radio] {
  accent-color: var(--cdp-accent);
}

/* Field label sitting above an input, small-caps style — used by the toolbars. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field > label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cdp-muted);
  font-weight: 650;
  margin: 0;
}

/* Segmented control (radio pills) */
.seg {
  display: inline-flex;
  background: var(--cdp-surface-3);
  border: 1px solid var(--cdp-border);
  border-radius: 9px;
  padding: 3px;
}

.seg label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--cdp-muted);
  padding: 0.35rem 0.75rem;
  border-radius: var(--cdp-r-sm);
  cursor: pointer;
  white-space: nowrap;
}

.seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.seg input:checked + label {
  background: var(--cdp-surface);
  color: var(--cdp-ink);
  box-shadow: var(--cdp-shadow-1);
}

/* A toolbar strip above content: filters, date ranges, market switches. */
.toolbar {
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-1);
  padding: 0.9rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  align-items: flex-end;
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------- tables --- */
.table {
  color: var(--cdp-ink);
  font-size: 0.85rem;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--cdp-surface-2);
  border-bottom: 1px solid var(--cdp-border);
  border-top: 0;
  color: var(--cdp-muted);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  border-top: 1px solid var(--cdp-border);
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
}

.table tbody tr:first-child td {
  border-top: 0;
}

.table tbody tr:hover {
  background: var(--cdp-surface-2);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}

.table-striped tbody tr:nth-of-type(even) {
  background: var(--cdp-surface-2);
}

.table-hover tbody tr:hover {
  background: var(--cdp-accent-weak);
}

/* Numeric columns line up; opt in per cell. */
.table .num,
.table .text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-sm td,
.table-sm th {
  padding: 0.35rem 0.6rem;
}

/* -------------------------------------------------------------- badges ---- */
.badge {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.22em 0.55em;
  border-radius: var(--cdp-r-pill);
}

.badge-primary {
  background: var(--cdp-accent-weak);
  color: var(--cdp-accent-ink);
}

.badge-secondary {
  background: var(--cdp-surface-3);
  color: var(--cdp-ink-2);
}

.badge-success {
  background: var(--cdp-pos-weak);
  color: var(--cdp-pos);
}

.badge-danger {
  background: var(--cdp-neg-weak);
  color: var(--cdp-neg);
}

.badge-warning {
  background: var(--cdp-warn-weak);
  color: var(--cdp-warn);
}

.badge-info {
  background: var(--cdp-info-weak);
  color: var(--cdp-info);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--cdp-r-pill);
  background: var(--cdp-surface-3);
  color: var(--cdp-ink-2);
  border: 1px solid var(--cdp-border);
}

/* --------------------------------------------------------------- alerts --- */
.alert {
  border-radius: var(--cdp-r-lg);
  border-width: 1px;
  font-size: 0.875rem;
  padding: 0.85rem 1.05rem;
}

.alert-success {
  background: var(--cdp-pos-weak);
  border-color: #bfe4d1;
  color: #14603d;
}

.alert-danger {
  background: var(--cdp-neg-weak);
  border-color: #f2c4ba;
  color: #8c2b1c;
}

.alert-warning {
  background: var(--cdp-warn-weak);
  border-color: #f0d9a8;
  color: #7a5300;
}

.alert-info {
  background: var(--cdp-info-weak);
  border-color: #c2d5f7;
  color: #1f4491;
}

/* --------------------------------------------------------------- modals --- */
.modal-content {
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-3);
}

.modal-header {
  border-bottom: 1px solid var(--cdp-border);
  padding: 0.95rem 1.15rem;
  align-items: center;
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
}

.modal-body {
  padding: 1.15rem;
}

.modal-footer {
  border-top: 1px solid var(--cdp-border);
  padding: 0.85rem 1.15rem;
  background: var(--cdp-surface-2);
  border-radius: 0 0 var(--cdp-r-lg) var(--cdp-r-lg);
}

.modal-backdrop {
  /* styles.css paints the backdrop white at full opacity, which reads as a
     blank page behind the dialog rather than a dimmed one. */
  background-color: var(--cdp-ink);
}

.modal-backdrop.show {
  opacity: 0.45;
}

.close {
  color: var(--cdp-muted);
  text-shadow: none;
  opacity: 1;
  font-weight: 400;
}

.close:hover {
  color: var(--cdp-ink);
}

/* ------------------------------------------------------------- dropdown --- */
.dropdown-menu {
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-2);
  padding: 0.35rem;
  font-size: 0.85rem;
  color: var(--cdp-ink);
  min-width: 11rem;
}

.dropdown-item {
  border-radius: var(--cdp-r-sm);
  padding: 0.42rem 0.6rem;
  color: var(--cdp-ink);
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--cdp-surface-3);
  color: var(--cdp-ink);
}

.dropdown-divider {
  border-color: var(--cdp-border);
  margin: 0.35rem 0;
}

.dropdown-header {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cdp-muted);
  font-weight: 650;
  padding: 0.45rem 0.6rem 0.25rem;
}

/* ---------------------------------------------------------- empty state --- */
.empty {
  text-align: center;
  color: var(--cdp-muted);
  padding: 2.4rem 1rem;
  font-size: 0.875rem;
}

.empty__title {
  color: var(--cdp-ink);
  font-weight: 650;
  margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------- pagination --- */
.pagination {
  font-size: 0.85rem;
}

.page-link {
  color: var(--cdp-ink);
  border-color: var(--cdp-border);
}

.page-link:hover {
  background: var(--cdp-surface-3);
  border-color: var(--cdp-border);
  color: var(--cdp-ink);
}

.page-item.active .page-link {
  background: var(--cdp-accent);
  border-color: var(--cdp-accent);
  color: #fff;
}

/* ============================================================ user filter ===
   The database screen. styles.css still carries the .filters / .styled_checkbox
   markup contract (custom.js depends on those class names), so the rules below
   re-dress it rather than replace it.
   ========================================================================== */
.filters {
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  overflow: hidden;
  box-shadow: var(--cdp-shadow-1);
  display: block;
  margin: 0 0 1.5rem;
  max-height: none;
  transition: none;
  font-size: 0.875rem;
}

.filters__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--cdp-border);
}

.filters__title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filters__count::before {
  content: "aktivní: ";
  font-weight: 500;
}

/* The "you changed the filters" bar. custom.js drops .invisible from it on the
   first edit; it is a normal-flow strip now, not an absolutely placed overlay,
   so .filters--padded has nothing left to compensate for. */
.filters__apply {
  /* styles.css pins this to the viewport as a full-width blue bar; it belongs
     inside the panel it acts on. */
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.15rem;
  background: var(--cdp-accent-weak);
  border-bottom: 1px solid var(--cdp-border);
  color: var(--cdp-accent-ink);
  font-weight: 600;
}

.filters__apply p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cdp-accent-ink);
  margin-right: auto;
}

.filters__apply .btn {
  background: var(--cdp-accent);
  border-color: var(--cdp-accent);
  color: #fff;
}

.filters__apply .btn:hover,
.filters__apply .btn:focus,
.filters__apply .btn:active {
  background: var(--cdp-accent-ink);
  border-color: var(--cdp-accent-ink);
  color: #fff;
}

.filters__apply.invisible {
  display: none;
}

.filters--padded {
  padding-top: 0;
}

/* Column flow, not a grid. The groups are wildly different heights — two chips
   for Země, forty for Zdroj — and in a grid every row stretched to its tallest
   cell, so the panel was mostly holes. Columns let each group take the height it
   needs and pack the next one under it. */
.filters__content {
  columns: 17rem;
  column-gap: 2.25rem;
  padding: 1.15rem 1.15rem 0.35rem;
  margin: 0;
}

/* Collapsed shows the first couple of groups. */
.filters--collapsed .filters__content {
  max-height: 11rem;
  overflow: hidden;
  position: relative;
}

.filters--collapsed .filters__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cdp-surface) 88%);
  pointer-events: none;
}

.filters fieldset {
  font-size: 0.875rem;
  display: block;
  min-height: 0;
  margin: 0 0 1.15rem;
  padding: 0 0 0 0.6rem;
  box-shadow: none;
  border: 0;
  position: relative;
  /* A group split across two columns is unreadable — the legend ends up in one
     column and its chips in the next. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.filters fieldset legend {
  position: static;
  display: block;
  float: none;
  width: auto;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cdp-muted);
  padding: 0;
  margin: 0 0 0.5rem;
  white-space: normal;
}

.filters fieldset.has-active-filters legend {
  color: var(--cdp-accent-ink);
}

/* The rail marks a group that is actually filtering something. It replaces the
   cell borders the grid layout used, which now have nothing to divide. */
.filters fieldset.has-active-filters {
  box-shadow: inset 2px 0 0 var(--cdp-accent);
}

/* A from/to range is a pair of rows — label in the first column, control in the
   second — rather than one line that wraps wherever it runs out of room, which
   is what split "Do:" from its own input. The markup is a flat sequence of
   label, control, label, control, so the grid does the pairing on its own. */
.filters fieldset:has(.filters__like-label) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.filters fieldset:has(.filters__like-label) legend,
.filters fieldset legend + .filters__group {
  grid-column: 1/-1;
}

.filters__like-label {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--cdp-muted);
  line-height: 1.2;
  white-space: nowrap;
}

.filters__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.875rem;
  vertical-align: middle;
}

.filters__group--block {
  display: block;
}

/* Zdroj lists every source ever recorded — dozens of `wpforms:NNNNN` among them
   — and Nahazovačka every operator. Left to grow they were taller than the rest
   of the panel put together, so they get a box of their own to scroll in and a
   box to search in. */
.filters__group--scroll {
  display: flex;
  max-height: 11rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: flex-start;
  padding: 0.3rem;
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r);
  background: var(--cdp-surface-2);
  /* Fade the last row out so a box cut off mid-chip reads as "there is more
     below" rather than as a clipping bug. macOS hides the scrollbar until you
     touch it, so the scrollbar alone is not the cue. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent 100%);
}

/* Once it is scrolled to the end there is nothing left to hint at. */
.filters__group--scroll:hover,
.filters__group--scroll:focus-within {
  mask-image: none;
  -webkit-mask-image: none;
}

.filters__find {
  width: 100%;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--cdp-border-strong);
  border-radius: var(--cdp-r-sm);
  background: var(--cdp-surface);
  color: var(--cdp-ink);
}

.filters__find:focus {
  outline: none;
  border-color: var(--cdp-accent);
  box-shadow: var(--cdp-ring);
}

/* Hidden by the search box. A checked chip is never hidden — you have to be able
   to see, and clear, what the filter is actually applying. */
.filters .styled_checkbox + label.is-filtered-out {
  display: none;
}

.filters__no-match {
  font-size: 0.76rem;
  color: var(--cdp-muted);
  padding: 0.35rem 0.4rem;
}

.filters__group--input_select {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  white-space: nowrap;
}

.filters__group--input_select .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1px;
}

.filters__group--input_select select.form-control {
  border-radius: 0 var(--cdp-r) var(--cdp-r) 0;
}

.filters__units-holder {
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--cdp-border-strong);
  background: var(--cdp-surface-3);
  color: var(--cdp-ink-2);
  border-radius: 0 var(--cdp-r) var(--cdp-r) 0;
  height: 2.1rem;
}

.filters .form-control {
  height: 2.1rem;
  font-size: 0.85rem;
}

/* Chip toggles: the hidden checkbox + label pattern from styles.css. Every rule
   here is scoped under .filters because that is how styles.css scopes its own —
   an unscoped override loses the specificity contest and the chips stay in the
   old joined-blue-segment style. */
.filters .styled_checkbox + label {
  margin: 0;
}

.filters .styled_checkbox + label .styled_checkbox__btn-desc {
  min-width: 0;
  line-height: 1;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--cdp-border-strong);
  border-radius: var(--cdp-r-pill);
  background: var(--cdp-surface);
  color: var(--cdp-ink-2);
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 0;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.filters .styled_checkbox + label:hover .styled_checkbox__btn-desc {
  border-color: var(--cdp-accent);
  color: var(--cdp-accent-ink);
}

.filters .styled_checkbox:checked + label .styled_checkbox__btn-desc {
  background: var(--cdp-accent);
  border-color: var(--cdp-accent);
  color: #fff;
}

.filters .styled_checkbox:focus-visible + label .styled_checkbox__btn-desc {
  outline: 2px solid var(--cdp-accent);
  outline-offset: 2px;
}

/* styles.css rounds the first/last chip of a group into a joined segmented bar;
   these are separate pills now. */
.filters .styled_checkbox + label:last-child .styled_checkbox__btn-desc,
.filters .styled_checkbox:first-child + label .styled_checkbox__btn-desc {
  border-radius: var(--cdp-r-pill);
  margin-left: 0;
}

.filters__show_more {
  /* styles.css absolutely positions this over the filter grid. */
  position: static;
  transform: none;
  color: var(--cdp-ink);
}

.filters__foot {
  padding: 0.7rem 1.15rem;
  border-top: 1px solid var(--cdp-border);
  background: var(--cdp-surface-2);
  border-radius: 0 0 var(--cdp-r-lg) var(--cdp-r-lg);
}

/* ---- results ---- */
.user_table {
  margin: 0;
}

.results-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.results-bar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.results-bar .form_direct_search {
  margin: 0;
  min-width: min(24rem, 100%);
}

.user_table__returned {
  float: none;
  margin: 0;
}

.user_table__btns {
  float: none;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user_table__result_info {
  color: var(--cdp-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.exports-card {
  margin-bottom: 1.15rem;
}

/* The users table is 19 columns wide: scroll it inside its own box rather than
   pushing the whole page sideways, and keep the header visible while scrolling.
   Both axes have to be scrollable here for position:sticky to have a container
   to stick to. */
.user_table .card > .table_wrap {
  overflow: auto;
  max-height: calc(100vh - var(--cdp-topbar-h) - 11rem);
  border-radius: 0 0 var(--cdp-r-lg) var(--cdp-r-lg);
}

.user_table table {
  margin: 0;
}

.user_table table th {
  background: var(--cdp-surface-2);
  top: 0;
  z-index: 2;
}

.user_table table tr.to-delete td {
  background-color: var(--cdp-neg-weak);
}

.load-more {
  margin-top: 1.15rem;
  text-align: center;
}

/* styles.css hangs its own fade off .filters--collapsed, positioned against the
   whole panel; ours sits on .filters__content, which is what actually clips. */
.filters--collapsed::after {
  content: none;
}

/* An empty-state row spans every column of a wide table, so content centred in
   the cell lands off-screen to the right. Pin a fixed-width block to the scroll
   container's left edge instead. */
.cdp-tablewrap .empty {
  position: sticky;
  left: 0;
  width: 42rem;
  max-width: 100%;
}

/* ------------------------------------------------------------ nav tiles --- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.85rem;
}

.tile {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-1);
  padding: 1rem 1.1rem;
  color: var(--cdp-ink);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.tile:hover,
.tile:focus {
  text-decoration: none;
  color: var(--cdp-ink);
  border-color: var(--cdp-border-strong);
  box-shadow: var(--cdp-shadow-2);
  transform: translateY(-1px);
}

.tile__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--cdp-r);
  background: var(--cdp-accent-weak);
  color: var(--cdp-accent-ink);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex: none;
}

.tile > span:last-child {
  min-width: 0;
}

.tile__title {
  display: block;
  font-weight: 650;
  font-size: 0.9rem;
  margin: 0 0 0.1rem;
}

.tile__desc {
  display: block;
  color: var(--cdp-muted);
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
}

/* ---------------------------------------------------------- file lists ---- */
.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 1.15rem;
  border-top: 1px solid var(--cdp-border);
  font-size: 0.85rem;
}

.file-list__item:first-child {
  border-top: 0;
}

.file-list__icon {
  color: var(--cdp-muted);
  margin-top: 0.15rem;
  flex: none;
}

.file-list__meta {
  display: block;
  color: var(--cdp-muted);
  font-size: 0.75rem;
  word-break: break-all;
}

/* -------------------------------------------------------- notice cards ---- */
.notice-card {
  margin-bottom: 1.75rem;
  text-align: center;
}

.notice-card .card-body {
  padding: 2.25rem 1.5rem;
}

.notice-card__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
  border-radius: var(--cdp-r-pill);
  background: var(--cdp-accent-weak);
  color: var(--cdp-accent-ink);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.notice-card__title {
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}

.notice-card__text {
  color: var(--cdp-muted);
  margin: 0 auto;
  max-width: 44ch;
}

.cdp-content > .cdp-wrap--narrow {
  max-width: 720px;
}

.form-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.form-check {
  padding-left: 1.5rem;
}

.form-check + .form-check {
  margin-top: 0.45rem;
}

.form-check-label {
  font-weight: 500;
  color: var(--cdp-ink);
  margin: 0;
}

.form-control--qty {
  max-width: 7rem;
}

/* Bootstrap utility classes, retinted. */
.border {
  border-color: var(--cdp-border) !important;
}

.rounded {
  border-radius: var(--cdp-r) !important;
}

.bg-light {
  background-color: var(--cdp-surface-2) !important;
}

/* ------------------------------------------------------- signed-out page --- */
.cdp-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.cdp-auth__aside {
  background: var(--cdp-shell);
  color: var(--cdp-shell-ink);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
  /* Deep enough that the copy at the foot always has dark photo under it, even
     on a short viewport where the panel cannot give the scrim much room. */
  min-height: 32rem;
}

/* The photo behind the panel. Absolutely placed rather than a background-image
   so it can carry its own object-position and an empty alt, and so the layout
   still works when public/img/login is empty and no <img> is rendered at all. */
.cdp-auth__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The faces sit in the upper half of every photo; keep them out of the crop
     whatever the panel's aspect ratio turns out to be. */
  object-position: center 28%;
}

/* Scrim. Dark at the top and bottom where the brand and the copy sit, and much
   lighter across the middle band the faces occupy — a flat overlay heavy enough
   to make white text legible would have left the photo as grey mush. */
.cdp-auth__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(36, 29, 41, 0.8) 0%, rgba(36, 29, 41, 0.26) 20%, rgba(36, 29, 41, 0.2) 42%, rgba(36, 29, 41, 0.74) 70%, rgba(36, 29, 41, 0.95) 100%), linear-gradient(to bottom right, rgba(230, 0, 126, 0.18) 0%, rgba(230, 0, 126, 0) 60%);
  pointer-events: none;
}

/* Everything except the photo and the scrim sits above both. */
.cdp-auth__brand,
.cdp-auth__copy {
  position: relative;
  z-index: 1;
}

.cdp-auth__copy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cdp-auth__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.cdp-auth__claim {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.6rem;
  position: relative;
  max-width: 18ch;
}

.cdp-auth__lede {
  color: #d3c9da;
  font-size: 0.95rem;
  margin: 0;
  max-width: 34ch;
  position: relative;
}

.cdp-auth__foot {
  color: #9d92a6;
  font-size: 0.76rem;
  margin: 0.55rem 0 0;
  position: relative;
}

.cdp-auth__pane {
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem;
  background: var(--cdp-bg);
}

.cdp-auth__card {
  width: 100%;
  max-width: 25rem;
  background: var(--cdp-surface);
  border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-r-lg);
  box-shadow: var(--cdp-shadow-2);
  padding: 1.9rem;
}

.cdp-auth__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
}

.cdp-auth__sub {
  color: var(--cdp-muted);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.cdp-auth__submit {
  width: 100%;
  margin-top: 1.15rem;
}

.cdp-auth__links {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--cdp-border);
  font-size: 0.82rem;
  color: var(--cdp-muted);
  text-align: center;
}

@media (max-width: 850px) {
  .cdp-auth {
    grid-template-columns: 1fr;
  }
  .cdp-auth__aside {
    padding: 1.75rem;
    gap: 1.25rem;
    /* A banner, not half the screen: at the desktop min-height it pushed the
       sign-in form below the fold on a phone. */
    min-height: 0;
    height: 15rem;
  }
  .cdp-auth__photo {
    object-position: center 24%;
  }
  .cdp-auth__claim {
    font-size: 1.35rem;
  }
  .cdp-auth__lede,
  .cdp-auth__foot {
    display: none;
  }
}
/* -------------------------------------------------------------- utility --- */
.text-muted {
  color: var(--cdp-muted) !important;
}

.text-danger {
  color: var(--cdp-neg) !important;
}

.text-success {
  color: var(--cdp-pos) !important;
}

.text-primary {
  color: var(--cdp-accent-ink) !important;
}

.cdp-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
}

.cdp-nums {
  font-variant-numeric: tabular-nums;
}