/* =============================================================================
   oneDesk 공통 컴포넌트 (oneDesk-management app-pages-common.css에서 추출)
   - Pretendard 폰트, 공통 유틸리티/테이블 시스템, 컴포넌트 베이스라인
   ============================================================================= */

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  /* 늦게 도착한 웹폰트로 화면 중간에 글꼴이 바뀌는 FOUT을 막는다. */
  font-display: optional;
  src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2");
}

/* =============================================================================
   OneDesk shared utilities and table system
   ============================================================================= */

.app-loader-shell {
  display: none;
}

.app-loader-overlay {
  z-index: 1050;
  background-color: transparent;
}

.app-loader-spinner {
  width: 2rem;
  height: 2rem;
}

.app-alert-container,
.od-toast-container {
  z-index: var(--od-z-toast);
  width: min(var(--od-toast-max-width), calc(100vw - 32px));
  max-width: min(var(--od-toast-max-width), calc(100vw - 32px));
  pointer-events: none;
}

.app-alert-container > *,
.app-alert-container .alert,
.od-toast-container > *,
.od-toast-container .od-toast {
  pointer-events: auto;
}

.app-alert-container .alert,
.od-toast-container .od-toast {
  margin-bottom: 0;
}

.app-alert-container .alert + .alert,
.od-toast-container .od-toast + .od-toast {
  margin-top: var(--od-toast-gap);
}

.header-shell .header-shell__menu-button {
  margin-left: 10px;
}

.header-shell .header-shell__breadcrumb-wrap[hidden] {
  display: none !important;
}

.icon-size-1 {
  width: 1rem;
  height: 1rem;
}

.is-clickable {
  cursor: pointer;
}

.max-w-520 {
  max-width: 520px;
}

.app-help-text {
  color: var(--app-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.my-profile-hero__top--spaced {
  margin-bottom: 15px;
}

.tool-status-rank__bar--zero {
  --bar-width: 0%;
}

.infra-trend__bar {
  height: var(--infra-trend-height, 18px);
}

.col-w-64 { width: 64px !important; min-width: 64px; }
.col-w-80 { width: 80px !important; min-width: 80px; }
.col-w-100 { width: 100px !important; min-width: 100px; }
.col-w-110 { width: 110px !important; min-width: 110px; }
.col-w-120 { width: 120px !important; min-width: 120px; }
.col-w-130 { width: 130px !important; min-width: 130px; }
.col-w-140 { width: 140px !important; min-width: 140px; }
.col-w-150 { width: 150px !important; min-width: 150px; }
.col-w-160 { width: 160px !important; min-width: 160px; }
.col-w-170 { width: 170px !important; min-width: 170px; }
.col-w-180 { width: 180px !important; min-width: 180px; }
.col-w-420 { width: 420px !important; min-width: 320px; }
.col-w-33p { width: 33% !important; }

.textarea-h-380 {
  height: 380px !important;
  min-height: 380px !important;
}

.textarea-h-560 {
  height: 560px !important;
  min-height: 560px !important;
}

.textarea-h-620 {
  height: 620px !important;
  min-height: 620px !important;
}

.shell-skeleton {
  min-height: 280px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(226, 234, 244, 0.92), rgba(248, 251, 255, 0.98), rgba(226, 234, 244, 0.92));
  background-size: 200% 100%;
  animation: onedesk-skeleton-sheen 1.1s ease-in-out infinite;
}

.shell-skeleton--compact { min-height: 72px; }
.shell-skeleton--toolbar { min-height: 120px; }
.shell-skeleton--summary { min-height: 140px; }
.shell-skeleton--page { min-height: 280px; }
.shell-skeleton--list { min-height: 320px; }
.shell-skeleton--wide { min-height: 360px; }
.shell-skeleton--tall { min-height: 420px; }


.shell-page-skeleton {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-strong);
  overflow: hidden;
}

.shell-page-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.56) 46%, rgba(255, 255, 255, 0) 78%);
  transform: translateX(-100%);
  animation: onedesk-skeleton-sheen 1.2s ease-in-out infinite;
  pointer-events: none;
}

.shell-page-skeleton__line,
.shell-page-skeleton__block {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(226, 234, 244, 0.9), rgba(237, 243, 251, 0.98));
}

.shell-page-skeleton__line { height: 16px; }
.shell-page-skeleton__line.is-sm { height: 12px; border-radius: 999px; }
.shell-page-skeleton__line.is-w-20 { width: 20%; }
.shell-page-skeleton__line.is-w-30 { width: 30%; }
.shell-page-skeleton__line.is-w-40 { width: 40%; }
.shell-page-skeleton__line.is-w-50 { width: 50%; }
.shell-page-skeleton__line.is-w-60 { width: 60%; }
.shell-page-skeleton__line.is-w-70 { width: 70%; }
.shell-page-skeleton__line.is-w-80 { width: 80%; }
.shell-page-skeleton__line.is-w-100 { width: 100%; }

.shell-page-skeleton__grid {
  display: grid;
  gap: 10px;
}

.shell-page-skeleton__grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shell-page-skeleton__grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell-page-skeleton__grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shell-page-skeleton__grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.shell-page-skeleton__block.is-h-36 { min-height: 36px; }
.shell-page-skeleton__block.is-h-44 { min-height: 44px; }
.shell-page-skeleton__block.is-h-56 { min-height: 56px; }
.shell-page-skeleton__block.is-h-84 { min-height: 84px; }
.shell-page-skeleton__block.is-h-120 { min-height: 120px; }
.shell-page-skeleton__block.is-h-160 { min-height: 160px; }
.shell-page-skeleton__block.is-h-220 { min-height: 220px; }
.shell-page-skeleton__block.is-h-300 { min-height: 300px; }




@media (max-width: 991px) {
  .shell-page-skeleton__grid.cols-6,
  .shell-page-skeleton__grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .shell-page-skeleton {
    padding: 12px;
    gap: 10px;
  }
  .shell-page-skeleton__grid.cols-3,
  .shell-page-skeleton__grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

@keyframes onedesk-skeleton-sheen {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.app-content .table-responsive,
.modal .table-responsive,
.onedesk_table-card,
.report-log-table {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-strong);
  box-shadow: var(--app-shadow-sm);
}

.app-content .table-responsive,
.modal .table-responsive,
.report-log-table {
  overflow-x: auto;
  overflow-y: hidden;
}

.onedesk_table-card {
  overflow: hidden;
}

.onedesk_table-card > .table-responsive,
.modal .report-log-table {
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.app-content table.table,
.modal table.table,
.onedesk_table {
  width: 100%;
  margin-bottom: 0;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}

.app-content table.table > :not(caption) > * > *,
.modal table.table > :not(caption) > * > *,
.onedesk_table > :not(caption) > * > * {
  padding: 13px 14px;
  border-color: var(--app-border);
  background-color: transparent;
  color: var(--app-text);
  vertical-align: middle;
}

.app-content table.table thead th,
.modal table.table thead th,
.onedesk_table thead th,
.report-log-table th {
  min-height: 42px;
  border-bottom: 1px solid var(--app-border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--app-surface-strong) 94%, white), var(--app-surface-strong)) !important;
  color: var(--app-text-secondary) !important;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  white-space: nowrap;
}

.app-content table.table tbody td,
.modal table.table tbody td,
.onedesk_table tbody td,
.report-log-table td {
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.48;
}

.app-content table.table tbody tr:last-child > *,
.modal table.table tbody tr:last-child > *,
.onedesk_table tbody tr:last-child > * {
  border-bottom: 0;
}

.app-content table.table tbody tr:nth-child(even) > *,
.modal table.table tbody tr:nth-child(even) > *,
.onedesk_table tbody tr:nth-child(even) > * {
  background-color: color-mix(in srgb, var(--app-surface-muted) 18%, transparent);
}

.app-content table.table tbody tr:hover > *,
.modal table.table tbody tr:hover > *,
.onedesk_table tbody tr:hover > * {
  background-color: color-mix(in srgb, #2f80ed 8%, transparent);
  color: var(--app-text);
}

.onedesk_table-sort {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.onedesk_table-sort:hover,
.onedesk_table-sort:focus-visible {
  color: var(--app-text);
}

.onedesk_table-empty,
.app-content table.table td[colspan],
.modal table.table td[colspan] {
  color: var(--app-text-secondary);
  font-weight: 750;
}








@media (max-width: 767px) {
  .app-alert-container {
    right: 0 !important;
    left: 0 !important;
    width: auto;
    max-width: none;
  }

  .textarea-h-560,
  .textarea-h-620 {
    height: min(70vh, 460px) !important;
    min-height: 320px !important;
  }

  .textarea-h-380 {
    height: min(62vh, 360px) !important;
    min-height: 260px !important;
  }

  .app-content table.table > :not(caption) > * > *,
  .modal table.table > :not(caption) > * > *,
  .onedesk_table > :not(caption) > * > * {
    padding: 11px 12px;
  }
}


/* ---- Legacy layout primitives (token-based) ---- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--od-space-20);
  padding: 6px 4px 0;
}

.page-header__title {
  margin: 0;
  color: var(--od-text);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.page-header__description {
  margin: 10px 0 0;
  max-width: 840px;
  color: var(--od-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.onedesk-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--od-border);
  border-radius: var(--od-radius-panel);
  background: var(--od-surface);
  overflow-x: auto;
}

.onedesk-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--od-radius-control);
  background: transparent;
  color: var(--od-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.onedesk-tab:hover,
.onedesk-tab:focus-visible {
  color: var(--od-text);
  text-decoration: none;
}

.onedesk-tab.is-active,
.onedesk-tab.active {
  background: var(--od-primary);
  color: #ffffff;
}

/* ---- Legacy search filter layout (migrating to .od-filter-bar) ---- */
.perf-filter {
  display: grid;
  grid-template-columns: var(--perf-filter-columns, repeat(auto-fit, minmax(150px, 1fr)));
  gap: var(--od-space-12);
  align-items: end;
  width: 100%;
  padding: var(--od-space-16);
  border: 1px solid var(--od-border);
  border-radius: var(--od-radius-panel);
  background: var(--od-surface);
  box-shadow: var(--od-shadow-card);
}

.perf-filter--monitoring { --perf-filter-columns: repeat(4, minmax(140px, 1fr)) 96px; }
.perf-filter--api { --perf-filter-columns: repeat(3, minmax(150px, 0.9fr)) minmax(260px, 1.3fr) 132px; }
.perf-filter--tool { --perf-filter-columns: minmax(200px, 1fr) minmax(170px, 0.9fr) minmax(150px, 0.85fr) minmax(320px, 1.45fr) 132px; }
.perf-filter--history-query { --perf-filter-columns: repeat(4, minmax(150px, 1fr)) minmax(180px, 1.35fr) 124px; }
.perf-filter--history-error { --perf-filter-columns: repeat(5, minmax(150px, 1fr)) minmax(180px, 1.35fr) 124px; }
.perf-filter--report { --perf-filter-columns: minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(130px, 0.8fr) minmax(150px, 0.85fr) minmax(190px, 1fr) auto; }
.perf-filter--user { --perf-filter-columns: minmax(260px, 1.4fr) repeat(2, minmax(150px, 0.9fr)) 132px 148px; }

.perf-field { min-width: 0; }

.perf-field label {
  display: block;
  margin-bottom: var(--od-space-8);
  color: var(--od-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.perf-field .form-control,
.perf-field .form-select {
  height: var(--od-control-height);
  min-height: var(--od-control-height);
  border-color: var(--od-border);
  border-radius: var(--od-radius-control);
  background-color: var(--od-surface);
  color: var(--od-text);
  font-size: 14px;
  font-weight: 700;
}

.perf-field .form-control { padding: 0 var(--od-control-padding-x); }

.perf-select-wrap { position: relative; }

.perf-filter__action {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
}

.perf-filter .btn {
  height: var(--od-control-height);
  min-height: var(--od-control-height);
  border-radius: var(--od-radius-control);
  font-weight: 800;
  white-space: nowrap;
}

.perf-filter__action .btn,
.perf-filter > .btn { width: 100%; }

@media (max-width: 1100px) {
  .perf-filter { --perf-filter-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .perf-filter { --perf-filter-columns: 1fr; }
}

/* ---- oneDesk component baseline: opt-in primitives for product UI ---- */
.od-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    padding: 18px 20px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-panel);
    background: var(--od-surface);
    color: var(--od-text);
    box-shadow: var(--od-shadow-card);
}

.od-page-header__eyebrow {
    margin-bottom: 5px;
    color: var(--od-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.od-page-header__title {
    margin: 0;
    color: var(--od-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
}

.od-filter-bar {
    --od-filter-columns: repeat(auto-fit, minmax(160px, 1fr));
    --od-filter-action-width: 132px;
    display: grid;
    grid-template-columns: var(--od-filter-columns);
    gap: var(--od-space-12);
    align-items: end;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-panel);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-card);
}

.od-filter-bar__fields,
.api-filter-fields {
    display: grid;
    grid-column: 1 / -2;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--od-space-12);
    min-width: 0;
}

.od-filter-bar__field,
.perf-field,
.tool-status-field,
.usage-field,
.llm-management-field {
    min-width: 0;
}

.od-filter-bar__actions,
.perf-filter__action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--od-space-8);
    min-width: 0;
}

.od-filter-bar > .od-button,
.od-filter-bar > .btn,
.od-filter-bar__actions > .od-button,
.od-filter-bar__actions > .btn,
.perf-filter__action > .od-button,
.perf-filter__action > .btn {
    min-width: var(--od-filter-action-width);
    min-height: var(--od-control-height);
    white-space: nowrap;
}

.od-filter-bar__reset {
    --bs-btn-color: var(--od-text-muted);
    --bs-btn-bg: var(--od-surface);
    --bs-btn-border-color: var(--od-border);
    --bs-btn-hover-color: var(--od-primary);
    --bs-btn-hover-bg: var(--od-primary-soft);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--od-primary) 28%, var(--od-border));
}

.od-filter-bar__reset.od-button--secondary {
    border-color: var(--od-border) !important;
    background: var(--od-surface) !important;
    color: var(--od-text-muted) !important;
}

.od-filter-bar__reset.od-button--secondary:hover,
.od-filter-bar__reset.od-button--secondary:focus-visible {
    border-color: color-mix(in srgb, var(--od-primary) 28%, var(--od-border)) !important;
    background: var(--od-primary-soft) !important;
    color: var(--od-primary) !important;
}

@media (max-width: 991.98px) {
    .od-filter-bar__fields,
    .api-filter-fields {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .od-filter-bar__fields,
    .api-filter-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .od-filter-bar__actions,
    .perf-filter__action {
        justify-content: stretch;
    }

    .od-filter-bar > .od-button,
    .od-filter-bar > .btn,
    .od-filter-bar__actions > .od-button,
    .od-filter-bar__actions > .btn,
    .perf-filter__action > .od-button,
    .perf-filter__action > .btn {
        width: 100%;
    }
}

.od-field {
    display: flex;
    flex-direction: column;
    gap: var(--od-space-8);
    min-width: 0;
}

.od-field > label,
.od-label {
    display: block;
    margin: 0;
    color: var(--od-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
}

.od-field--required > label::after,
.od-label--required::after,
.od-field--required .od-label::after {
    content: " *";
    color: var(--od-danger);
    font-weight: 600;
}

.od-density-control {
    color: var(--od-text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
}

.od-control.form-control,
.od-control.form-select,
textarea.od-control.form-control,
.form-control.od-control,
.form-select.od-control {
    min-height: var(--od-control-height);
    padding: var(--od-control-padding-y) var(--od-control-padding-x);
    border: var(--od-control-border-width) solid var(--od-border) !important;
    border-radius: var(--od-radius-control) !important;
    background: var(--od-surface) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
    font-family: var(--od-shell-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: none !important;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

textarea.od-control.form-control,
textarea.form-control.od-control {
    min-height: var(--od-textarea-min-height);
    resize: vertical;
}

.od-control--sm.form-control,
.od-control--sm.form-select,
.form-control.od-control--sm,
.form-select.od-control--sm {
    min-height: var(--od-control-height-sm);
    padding: 4px var(--od-space-8);
    font-size: 12px;
    line-height: 16px;
}

.od-control--lg.form-control,
.od-control--lg.form-select,
.form-control.od-control--lg,
.form-select.od-control--lg {
    min-height: var(--od-control-height-lg);
    padding: 12px var(--od-space-16);
    font-size: 15px;
    line-height: 22px;
}

.od-control.form-control::placeholder,
.form-control.od-control::placeholder,
textarea.od-control.form-control::placeholder {
    color: var(--od-text-subtle);
    opacity: 1;
}

.od-control.form-control:focus,
.od-control.form-select:focus,
textarea.od-control.form-control:focus,
.form-control.od-control:focus,
.form-select.od-control:focus {
    border-color: var(--od-primary) !important;
    background: var(--od-surface) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
    box-shadow: 0 0 0 3px var(--od-primary-soft) !important;
    outline: none;
}

.od-control.form-control:focus-visible,
.od-control.form-select:focus-visible,
textarea.od-control.form-control:focus-visible,
.form-control.od-control:focus-visible,
.form-select.od-control:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 1px;
}

.od-control.form-control:disabled,
.od-control.form-select:disabled,
textarea.od-control.form-control:disabled,
.form-control.od-control:disabled,
.form-select.od-control:disabled {
    border-color: var(--od-border) !important;
    background: var(--od-surface-subtle) !important;
    background-color: var(--od-surface-subtle) !important;
    color: var(--od-text-subtle) !important;
    opacity: 1;
    cursor: not-allowed;
}

.od-control.form-control:read-only,
.od-control.form-control[readonly],
textarea.od-control.form-control:read-only,
textarea.od-control.form-control[readonly],
.form-control.od-control:read-only,
.form-control.od-control[readonly] {
    border-color: var(--od-border) !important;
    background: var(--od-bg) !important;
    background-color: var(--od-bg) !important;
    color: var(--od-text) !important;
    cursor: default;
}

.od-field--error > label,
.od-field--error .od-label {
    color: var(--od-danger);
}

.od-field--error .od-control.form-control,
.od-field--error .od-control.form-select,
.od-field--error textarea.od-control.form-control,
.od-field--error .form-control.od-control,
.od-field--error .form-select.od-control {
    border-color: var(--od-danger) !important;
    background: var(--od-surface) !important;
    background-color: var(--od-surface) !important;
}

.od-field--error .od-control.form-control:focus,
.od-field--error .od-control.form-select:focus,
.od-field--error textarea.od-control.form-control:focus,
.od-field--error .form-control.od-control:focus,
.od-field--error .form-select.od-control:focus {
    border-color: var(--od-danger) !important;
    box-shadow: 0 0 0 3px var(--od-danger-soft) !important;
}

.od-field__error,
.od-help--error {
    margin: 0;
    color: var(--od-danger);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.od-control.form-select,
.form-select.od-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: var(--od-select-padding-end);
    background-image: var(--od-select-chevron-bg) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--od-control-padding-x) center !important;
    background-size: var(--od-select-chevron-size) var(--od-select-chevron-size) !important;
    cursor: pointer;
}

.od-control--sm.form-select,
.form-select.od-control--sm {
    --od-select-chevron-size: 16px;
    --od-select-padding-end: 36px;
}

.od-control--lg.form-select,
.form-select.od-control--lg {
    --od-select-chevron-size: 24px;
    --od-select-padding-end: 44px;
}

.od-select-wrap:has(.od-control--sm),
.perf-select-wrap:has(.od-control--sm) {
    --od-select-chevron-size: 16px;
    --od-select-padding-end: 36px;
}

.od-select-wrap:has(.od-control--lg),
.perf-select-wrap:has(.od-control--lg) {
    --od-select-chevron-size: 24px;
    --od-select-padding-end: 44px;
}

.od-control.form-select:disabled,
.form-select.od-control:disabled {
    background-image: var(--od-select-chevron-bg) !important;
    cursor: not-allowed;
}

.od-select-wrap,
.perf-select-wrap,
.usage-select-wrap,
.history-select-wrap,
.api-status-select-wrap,
.tool-status-select-wrap,
.report-template-select-wrap,
.api-form-select-wrap,
.solution-env-page__select-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.od-select-wrap::after,
.perf-select-wrap::after,
.usage-select-wrap::after,
.history-select-wrap::after,
.api-status-select-wrap::after,
.tool-status-select-wrap::after,
.report-template-select-wrap::after,
.api-form-select-wrap::after,
.solution-env-page__select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--od-control-padding-x);
    width: var(--od-select-chevron-size);
    height: var(--od-select-chevron-size);
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--od-text-subtle);
    -webkit-mask: var(--od-select-chevron-mask) center / contain no-repeat;
    mask: var(--od-select-chevron-mask) center / contain no-repeat;
}

.od-select-wrap .od-control.form-select,
.od-select-wrap .form-select.od-control,
.perf-select-wrap .od-control.form-select,
.perf-select-wrap .form-select.od-control,
.usage-select-wrap .od-control.form-select,
.usage-select-wrap .form-select.od-control,
.history-select-wrap .od-control.form-select,
.history-select-wrap .form-select.od-control,
.api-status-select-wrap .od-control.form-select,
.api-status-select-wrap .form-select.od-control,
.tool-status-select-wrap .od-control.form-select,
.tool-status-select-wrap .form-select.od-control,
.report-template-select-wrap .od-control.form-select,
.report-template-select-wrap .form-select.od-control,
.api-form-select-wrap .od-control.form-select,
.api-form-select-wrap .form-select.od-control,
.solution-env-page__select-wrap .od-control.form-select,
.solution-env-page__select-wrap .form-select.od-control {
    width: 100%;
    padding-right: var(--od-select-padding-end);
    background-image: none !important;
}

.od-select-wrap:has(.od-control:disabled)::after,
.od-select-wrap:has(.form-select:disabled)::after,
.perf-select-wrap:has(.od-control:disabled)::after,
.perf-select-wrap:has(.form-select:disabled)::after,
.od-select-wrap--disabled::after,
.perf-select-wrap--disabled::after,
.report-template-select-wrap--disabled::after {
    opacity: 0.45;
}

.od-field--error .od-select-wrap::after,
.od-field--error .perf-select-wrap::after {
    background-color: var(--od-danger);
}

.od-check,
.form-check.od-check,
.od-radio,
.form-check.od-radio {
    display: flex;
    align-items: center;
    gap: var(--od-space-8);
    min-height: 0;
    margin: 0;
    padding: 0;
    padding-left: 0 !important;
}

.od-check-group,
.od-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--od-space-8);
    min-width: 0;
}

.od-check-group--inline,
.od-radio-group--inline,
.od-check-group.od-check-group--inline,
.od-radio-group.od-radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--od-space-16);
}

.od-check .form-check-input,
.od-check__input {
    --cui-form-check-bg: var(--od-surface);
    --bs-form-check-bg: var(--od-surface);
    flex: 0 0 var(--od-check-size);
    width: var(--od-check-size);
    height: var(--od-check-size);
    min-width: var(--od-check-size);
    min-height: var(--od-check-size);
    margin: 0 !important;
    border: var(--od-control-border-width) solid var(--od-border) !important;
    border-radius: var(--od-check-radius) !important;
    background-color: var(--od-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    float: none !important;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

.od-check .form-check-input:checked,
.od-check__input:checked {
    border-color: var(--od-primary) !important;
    background-color: var(--od-primary) !important;
    background-image: var(--od-check-checkmark-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 10px !important;
}

.od-check .form-check-input:indeterminate,
.od-check__input:indeterminate {
    border-color: var(--od-primary) !important;
    background-color: var(--od-primary) !important;
    background-image: var(--od-check-indeterminate-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

.od-check .form-check-input:focus,
.od-check__input:focus {
    border-color: var(--od-primary) !important;
    box-shadow: 0 0 0 3px var(--od-primary-soft) !important;
    outline: none;
}

.od-check .form-check-input:focus-visible,
.od-check__input:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 1px;
}

.od-check .form-check-input:disabled,
.od-check__input:disabled {
    border-color: var(--od-border) !important;
    background-color: var(--od-surface-subtle) !important;
    opacity: 1;
    cursor: not-allowed;
}

.od-check .form-check-input:disabled:checked,
.od-check .form-check-input:disabled:indeterminate,
.od-check__input:disabled:checked,
.od-check__input:disabled:indeterminate {
    border-color: color-mix(in srgb, var(--od-primary) 45%, var(--od-border)) !important;
    background-color: color-mix(in srgb, var(--od-primary) 45%, var(--od-surface-subtle)) !important;
}

.od-check .form-check-label,
.od-check__label {
    margin: 0 !important;
    color: var(--od-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.od-check .form-check-input:disabled ~ .form-check-label,
.od-check__input:disabled ~ .od-check__label,
.od-check:has(.form-check-input:disabled) .form-check-label,
.od-check:has(.od-check__input:disabled) .od-check__label {
    color: var(--od-text-subtle);
    cursor: not-allowed;
}

.od-radio .form-check-input,
.od-radio__input {
    --cui-form-check-bg: var(--od-surface);
    --bs-form-check-bg: var(--od-surface);
    flex: 0 0 var(--od-radio-size);
    width: var(--od-radio-size);
    height: var(--od-radio-size);
    min-width: var(--od-radio-size);
    min-height: var(--od-radio-size);
    margin: 0 !important;
    border: var(--od-control-border-width) solid var(--od-border) !important;
    border-radius: 50% !important;
    background-color: var(--od-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    float: none !important;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

.od-radio .form-check-input:checked,
.od-radio__input:checked {
    border-color: var(--od-primary) !important;
    background-color: var(--od-surface) !important;
    background-image: var(--od-radio-dot-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: var(--od-radio-size) var(--od-radio-size) !important;
}

.od-radio .form-check-input:focus,
.od-radio__input:focus {
    border-color: var(--od-primary) !important;
    box-shadow: 0 0 0 3px var(--od-primary-soft) !important;
    outline: none;
}

.od-radio .form-check-input:focus-visible,
.od-radio__input:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 1px;
}

.od-radio .form-check-input:disabled,
.od-radio__input:disabled {
    border-color: var(--od-border) !important;
    background-color: var(--od-surface-subtle) !important;
    opacity: 1;
    cursor: not-allowed;
}

.od-radio .form-check-input:disabled:checked,
.od-radio__input:disabled:checked {
    border-color: color-mix(in srgb, var(--od-primary) 45%, var(--od-border)) !important;
    background-color: var(--od-surface-subtle) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4.5' fill='%239ea2ae'/%3E%3C/svg%3E") !important;
}

.od-radio .form-check-label,
.od-radio__label {
    margin: 0 !important;
    color: var(--od-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.od-radio .form-check-input:disabled ~ .form-check-label,
.od-radio__input:disabled ~ .od-radio__label,
.od-radio:has(.form-check-input:disabled) .form-check-label,
.od-radio:has(.od-radio__input:disabled) .od-radio__label {
    color: var(--od-text-subtle);
    cursor: not-allowed;
}

.od-field--error .od-check .form-check-input,
.od-field--error .od-check__input,
.od-field--error .od-radio .form-check-input,
.od-field--error .od-radio__input {
    border-color: var(--od-danger) !important;
}

.od-field--error .od-check .form-check-input:checked,
.od-field--error .od-check__input:checked,
.od-field--error .od-check .form-check-input:indeterminate,
.od-field--error .od-check__input:indeterminate {
    border-color: var(--od-danger) !important;
    background-color: var(--od-danger) !important;
}

.od-field--error .od-radio .form-check-input:checked,
.od-field--error .od-radio__input:checked {
    border-color: var(--od-danger) !important;
    background-color: var(--od-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4.5' fill='%23ee443f'/%3E%3C/svg%3E") !important;
}

.od-button,
.btn.od-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--od-space-8);
    min-height: var(--od-button-height-md);
    padding: var(--od-space-12) var(--od-space-16);
    border: 1px solid transparent;
    border-radius: var(--od-radius-control) !important;
    background-image: none !important;
    font-family: var(--od-shell-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease;
}

.od-button svg,
.btn.od-button svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.od-button--sm,
.btn.od-button.od-button--sm {
    min-height: var(--od-button-height-sm);
    padding: var(--od-space-8) var(--od-space-12);
    font-size: 12px;
    line-height: 16px;
}

.od-button--lg,
.btn.od-button.od-button--lg {
    min-height: var(--od-button-height-lg);
    padding: 14px var(--od-space-20);
    font-size: 15px;
    line-height: 22px;
}

.od-button--icon-only,
.btn.od-button.od-button--icon-only {
    width: var(--od-button-height-md);
    min-width: var(--od-button-height-md);
    padding: 0;
}

.od-button--icon-only.od-button--sm,
.btn.od-button.od-button--icon-only.od-button--sm {
    width: var(--od-button-height-sm);
    min-width: var(--od-button-height-sm);
}

.od-button--icon-only.od-button--lg,
.btn.od-button.od-button--icon-only.od-button--lg {
    width: var(--od-button-height-lg);
    min-width: var(--od-button-height-lg);
}

.od-button--primary,
.btn.od-button.od-button--primary,
.btn-primary.od-button--primary {
    border-color: var(--od-primary) !important;
    background: var(--od-primary) !important;
    background-color: var(--od-primary) !important;
    color: #ffffff !important;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--od-primary);
    --bs-btn-border-color: var(--od-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--od-primary-hover);
    --bs-btn-hover-border-color: var(--od-primary-hover);
    --bs-btn-focus-shadow-rgb: 78, 97, 246;
}

.od-button--primary:hover,
.od-button--primary:focus-visible,
.btn.od-button.od-button--primary:hover,
.btn.od-button.od-button--primary:focus-visible,
.btn-primary.od-button--primary:hover,
.btn-primary.od-button--primary:focus-visible {
    border-color: var(--od-primary-hover) !important;
    background: var(--od-primary-hover) !important;
    background-color: var(--od-primary-hover) !important;
    color: #ffffff !important;
}

.od-button--secondary,
.btn.od-button.od-button--secondary,
.btn-secondary.od-button--secondary {
    border-color: var(--od-border) !important;
    background: var(--od-surface-muted) !important;
    background-color: var(--od-surface-muted) !important;
    color: var(--od-text) !important;
    --bs-btn-color: var(--od-text);
    --bs-btn-bg: var(--od-surface-muted);
    --bs-btn-border-color: var(--od-border);
    --bs-btn-hover-color: var(--od-text);
    --bs-btn-hover-bg: var(--od-surface);
    --bs-btn-hover-border-color: var(--od-border-strong);
}

.od-button--secondary:hover,
.od-button--secondary:focus-visible,
.btn.od-button.od-button--secondary:hover,
.btn.od-button.od-button--secondary:focus-visible {
    border-color: var(--od-border-strong) !important;
    background: var(--od-surface) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
}

.od-button--outline,
.btn.od-button.od-button--outline,
.btn-outline-primary.od-button--outline {
    border: 1.5px solid var(--od-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--od-primary) !important;
    --bs-btn-color: var(--od-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--od-primary);
    --bs-btn-hover-color: var(--od-primary-hover);
    --bs-btn-hover-bg: var(--od-primary-soft);
    --bs-btn-hover-border-color: var(--od-primary-hover);
}

.od-button--outline:hover,
.od-button--outline:focus-visible,
.btn.od-button.od-button--outline:hover,
.btn.od-button.od-button--outline:focus-visible {
    border-color: var(--od-primary-hover) !important;
    background: var(--od-primary-soft) !important;
    background-color: var(--od-primary-soft) !important;
    color: var(--od-primary-hover) !important;
}

.od-button--ghost,
.btn.od-button.od-button--ghost {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--od-text-muted) !important;
    --bs-btn-color: var(--od-text-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--od-text);
    --bs-btn-hover-bg: var(--od-surface-subtle);
    --bs-btn-hover-border-color: transparent;
}

.od-button--ghost:hover,
.od-button--ghost:focus-visible,
.btn.od-button.od-button--ghost:hover,
.btn.od-button.od-button--ghost:focus-visible {
    background: var(--od-surface-subtle) !important;
    background-color: var(--od-surface-subtle) !important;
    color: var(--od-text) !important;
}

.od-button--danger,
.btn.od-button.od-button--danger,
.btn-danger.od-button--danger {
    border-color: var(--od-danger) !important;
    background: var(--od-danger) !important;
    background-color: var(--od-danger) !important;
    color: #ffffff !important;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--od-danger);
    --bs-btn-border-color: var(--od-danger);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--od-danger) 88%, #000000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--od-danger) 88%, #000000);
}

.od-button--danger:hover,
.od-button--danger:focus-visible,
.btn.od-button.od-button--danger:hover,
.btn.od-button.od-button--danger:focus-visible {
    border-color: color-mix(in srgb, var(--od-danger) 88%, #000000) !important;
    background: color-mix(in srgb, var(--od-danger) 88%, #000000) !important;
    background-color: color-mix(in srgb, var(--od-danger) 88%, #000000) !important;
    color: #ffffff !important;
}

.od-button--warning,
.btn.od-button.od-button--warning,
.btn-warning.od-button--warning {
    border-color: var(--od-warning) !important;
    background: var(--od-warning-soft) !important;
    background-color: var(--od-warning-soft) !important;
    color: var(--od-warning) !important;
    --bs-btn-color: var(--od-warning);
    --bs-btn-bg: var(--od-warning-soft);
    --bs-btn-border-color: var(--od-warning);
    --bs-btn-hover-color: var(--od-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--od-warning-soft) 70%, var(--od-warning));
    --bs-btn-hover-border-color: var(--od-warning);
}

.od-button--warning:hover,
.od-button--warning:focus-visible,
.btn.od-button.od-button--warning:hover,
.btn.od-button.od-button--warning:focus-visible {
    border-color: var(--od-warning) !important;
    background: color-mix(in srgb, var(--od-warning-soft) 70%, var(--od-warning)) !important;
    background-color: color-mix(in srgb, var(--od-warning-soft) 70%, var(--od-warning)) !important;
    color: var(--od-warning) !important;
}

.od-button:focus-visible,
.btn.od-button:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 2px;
}

.od-button:disabled,
.od-button.is-disabled,
.btn.od-button:disabled,
.btn.od-button.disabled,
.btn.od-button.is-disabled {
    opacity: 0.48;
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none !important;
}

.od-button.is-loading,
.btn.od-button.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.od-button.is-loading::after,
.btn.od-button.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: od-button-spin 0.7s linear infinite;
}

.od-button--secondary.is-loading::after,
.od-button--outline.is-loading::after,
.od-button--ghost.is-loading::after,
.od-button--warning.is-loading::after,
.btn.od-button.od-button--secondary.is-loading::after,
.btn.od-button.od-button--outline.is-loading::after,
.btn.od-button.od-button--ghost.is-loading::after,
.btn.od-button.od-button--warning.is-loading::after {
    border-color: rgba(78, 97, 246, 0.2);
    border-top-color: var(--od-primary);
}

@keyframes od-button-spin {
    to { transform: rotate(360deg); }
}



:where(.od-tabs, .tool-form-tabs) {
    display: flex;
    align-items: stretch;
    gap: var(--od-space-4);
    width: 100%;
    margin: 0;
    padding: var(--od-space-4);
    list-style: none;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-panel);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-card);
    overflow-x: auto;
}

.nav-tabs.od-tabs,
.nav.od-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-color: transparent;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    border-bottom: 0;
}

.od-tabs__list {
    display: flex;
    align-items: stretch;
    gap: var(--od-space-4);
    width: 100%;
    margin: 0;
    padding: var(--od-space-4);
    list-style: none;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-panel);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-card);
    overflow-x: auto;
}

:where(.od-tabs, .tool-form-tabs) .nav-item,
.od-tabs__item {
    flex: 1 1 0;
    min-width: 0;
}

:where(.od-tabs, .tool-form-tabs) .nav-link,
.od-tabs__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: var(--od-space-8) var(--od-space-12);
    border: 1px solid transparent;
    border-radius: var(--od-radius-control);
    background: transparent;
    color: var(--od-text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}

:where(.od-tabs, .tool-form-tabs) .nav-link:hover,
.od-tabs__link:hover {
    border-color: color-mix(in srgb, var(--od-primary) 24%, var(--od-border));
    background: var(--od-primary-soft);
    color: var(--od-primary);
    text-decoration: none;
}

:where(.od-tabs, .tool-form-tabs) .nav-link:focus,
.od-tabs__link:focus {
    outline: none;
}

:where(.od-tabs, .tool-form-tabs) .nav-link:focus-visible,
.od-tabs__link:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--od-primary) 28%, var(--od-border));
}

:where(.od-tabs, .tool-form-tabs) .nav-link.active,
:where(.od-tabs, .tool-form-tabs) .nav-link[aria-selected="true"],
.od-tabs__link.active,
.od-tabs__link[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--od-primary) 28%, var(--od-border));
    background: var(--od-primary-soft);
    color: var(--od-primary);
    box-shadow: none;
}

:where(.od-tabs, .tool-form-tabs) .nav-link.disabled,
:where(.od-tabs, .tool-form-tabs) .nav-link:disabled,
:where(.od-tabs, .tool-form-tabs) .nav-link[aria-disabled="true"],
.od-tabs__link.disabled,
.od-tabs__link:disabled,
.od-tabs__link[aria-disabled="true"] {
    opacity: 0.46;
    pointer-events: none;
    cursor: not-allowed;
}

.od-tabs__panel {
    display: none;
    min-width: 0;
}

.od-tabs__panel.active,
.od-tabs__panel.show,
.od-tabs__panel.is-active {
    display: block;
}


.od-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-card);
    background: var(--od-surface);
    color: var(--od-text);
    box-shadow: var(--od-shadow-card);
    overflow: hidden;
}

.od-card--bordered {
    border: 1px solid var(--od-border);
}

.od-card--shadow {
    box-shadow: var(--od-shadow-card);
}

.od-card--flat {
    box-shadow: none;
}

.od-card--compact {
    --od-card-padding-current: var(--od-card-padding-compact);
}

.od-card--spacious {
    --od-card-padding-current: var(--od-card-padding-spacious);
}

.od-card:not(.od-card--compact):not(.od-card--spacious) {
    --od-card-padding-current: var(--od-card-padding);
}

.od-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-12);
    padding: var(--od-card-padding-current, var(--od-card-padding));
    padding-bottom: var(--od-space-12);
    border-bottom: 1px solid var(--od-border);
    background: var(--od-surface);
}

.od-card:not(:has(.od-card__body)) > .od-card__header:last-child {
    border-bottom: 0;
    padding-bottom: var(--od-card-padding-current, var(--od-card-padding));
}

.od-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--od-card-padding-current, var(--od-card-padding));
}

.od-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--od-space-8);
    padding: var(--od-space-12) var(--od-card-padding-current, var(--od-card-padding)) var(--od-card-padding-current, var(--od-card-padding));
    border-top: 1px solid var(--od-border);
    background: var(--od-surface);
}

.od-card__title {
    margin: 0;
    color: var(--od-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
}

.od-card__header .od-card__title {
    flex: 1 1 auto;
    min-width: 0;
}

.od-data-card {
    padding: 0;
    overflow: hidden;
}

.od-data-card.od-card--shadow,
.od-data-card.od-card {
    box-shadow: var(--od-shadow-card);
}

.od-data-card.od-card--flat {
    box-shadow: none;
}

.od-data-card .od-card__header {
    margin: 0;
    border-bottom: 1px solid var(--od-border);
}

.od-data-card .od-card__body {
    padding: 0;
}

.od-data-card .od-card__footer {
    border-top: 1px solid var(--od-border);
}

.od-data-card .table-responsive {
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.onedesk_table-card.od-card,
.onedesk_table-card.od-data-card {
    padding: 0;
}

.onedesk_table-card.od-card--flat,
.onedesk_table-card.od-data-card.od-card--flat {
    box-shadow: none;
}

.od-form-section {
    --od-card-padding-current: var(--od-card-padding-spacious);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--od-border) !important;
    border-radius: var(--od-radius-card) !important;
    background: var(--od-surface) !important;
    color: var(--od-text);
    box-shadow: var(--od-shadow-card) !important;
}

.od-form-section.od-card--compact {
    --od-card-padding-current: var(--od-card-padding-compact);
}

.od-form-section .od-card__header,
.od-form-section .od-card__body,
.od-form-section .od-card__footer,
.od-form-section__body {
    padding: var(--od-card-padding-current, var(--od-card-padding-spacious));
}

.od-form-section .od-card__title,
.od-form-section__title {
    display: flex;
    align-items: center;
    gap: var(--od-space-8);
    margin: 0 0 var(--od-space-16);
    padding-bottom: var(--od-space-12);
    border-bottom: 1px solid var(--od-border);
    color: var(--od-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.od-form-section .od-card__title::before,
.od-form-section__title::before {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--od-primary);
    box-shadow: 0 0 0 4px var(--od-primary-soft);
    content: "";
}

.od-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-panel);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-card);
}

.od-stat-chip,
.od-density-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-control);
    background: var(--od-surface-muted);
    color: var(--od-text-muted);
    white-space: nowrap;
}

.od-stat-chip strong {
    color: var(--od-primary);
    font-weight: 850;
}

.od-data-table {
    --bs-table-bg: var(--od-surface);
    --bs-table-color: var(--od-text);
    --bs-table-border-color: var(--od-border);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--od-text);
    font-size: var(--od-table-font-size);
    letter-spacing: 0;
}

.od-data-table thead th {
    height: var(--od-table-header-height);
    min-height: var(--od-table-header-height);
    padding: var(--od-table-header-padding-y) var(--od-table-cell-padding-x);
    border: 0;
    border-bottom: 1px solid var(--od-border);
    background: var(--od-surface-muted) !important;
    color: var(--od-text-muted);
    font-size: var(--od-table-header-font-size);
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.od-data-table tbody tr {
    min-height: var(--od-table-row-min-height);
    border-bottom: 1px solid var(--od-border);
    background: var(--od-surface);
}

.od-data-table tbody tr:last-child {
    border-bottom: 0;
}

.od-data-table tbody td {
    min-height: var(--od-table-row-min-height);
    padding: var(--od-table-cell-padding-y) var(--od-table-cell-padding-x);
    border: 0;
    background: var(--od-surface);
    color: var(--od-text);
    font-size: var(--od-table-font-size);
    font-weight: 500;
    line-height: 18px;
    vertical-align: middle;
}

.od-data-table tbody tr:hover > * {
    background: var(--od-bg);
}

.od-data-table tbody tr.is-selected > * {
    background: var(--od-primary-soft) !important;
}

.od-data-table.is-loading tbody {
    opacity: 0.55;
    pointer-events: none;
}

.od-data-table.is-loading {
    position: relative;
}

.od-data-table .od-data-table__col-check,
.od-data-table th.od-data-table__col-check,
.od-data-table td.od-data-table__col-check {
    width: 44px;
    min-width: 44px;
    padding-right: 8px;
    padding-left: var(--od-table-cell-padding-x);
    text-align: center;
    vertical-align: middle;
}

.od-data-table .od-data-table__col-action,
.od-data-table th.od-data-table__col-action,
.od-data-table td.od-data-table__col-action {
    width: 1%;
    min-width: 88px;
    padding-right: var(--od-table-cell-padding-x);
    text-align: right;
    white-space: nowrap;
}

.onedesk_table.od-data-table,
.table.onedesk_table.od-data-table {
    --bs-table-bg: var(--od-surface);
    --bs-table-color: var(--od-text);
    --bs-table-border-color: var(--od-border);
    border-collapse: collapse;
}

.onedesk_table.od-data-table > :not(caption) > * > * {
    padding: var(--od-table-cell-padding-y) var(--od-table-cell-padding-x);
    border-color: var(--od-border);
    background-color: var(--od-surface);
}

.onedesk_table.od-data-table thead th {
    height: var(--od-table-header-height);
    min-height: var(--od-table-header-height);
    padding: var(--od-table-header-padding-y) var(--od-table-cell-padding-x);
    border-bottom: 1px solid var(--od-border);
    background: var(--od-surface-muted) !important;
    color: var(--od-text-muted) !important;
    font-size: var(--od-table-header-font-size);
    font-weight: 500;
    line-height: 16px;
}

.onedesk_table.od-data-table tbody tr:nth-child(even) > * {
    background-color: var(--od-surface);
}

.onedesk_table.od-data-table tbody tr:hover > * {
    background-color: var(--od-bg);
}

.onedesk_table-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--od-radius-control);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.onedesk_table-sort:hover,
.onedesk_table-sort:focus-visible {
    background: var(--od-primary-soft);
    color: var(--od-primary);
    outline: none;
}

.onedesk_table-sort.is-active {
    border-color: var(--od-primary-aa-border);
    background: var(--od-primary-aa-bg) !important;
    color: var(--od-primary-aa-text) !important;
    box-shadow: none;
}

.onedesk_table-sort__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--od-border);
    border-radius: 4px;
    background: var(--od-surface-subtle);
    color: var(--od-neutral-aa-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.onedesk_table-sort.is-active .onedesk_table-sort__icon {
    border-color: color-mix(in srgb, currentColor 46%, transparent);
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: currentColor;
}

.onedesk_table-empty,
.od-data-table .onedesk_table-empty {
    padding: 44px 20px !important;
    border: 0 !important;
    background: var(--od-surface) !important;
    color: var(--od-text-subtle) !important;
    font-size: var(--od-table-font-size) !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    text-align: center !important;
}

.od-empty-state {
    padding: 44px 20px;
    color: var(--od-text-subtle);
    text-align: center !important;
    font-size: var(--od-table-font-size);
    font-weight: 500;
    line-height: 18px;
}

.od-badge,
.od-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--od-badge-height-md);
    padding: 0 var(--od-badge-padding-x-md);
    border: 1px solid var(--od-neutral-aa-border);
    border-radius: var(--od-badge-radius-pill);
    background: var(--od-neutral-aa-bg);
    color: var(--od-neutral-aa-text);
    font-family: var(--od-shell-font);
    font-size: var(--od-badge-font-md);
    font-weight: 500;
    line-height: var(--od-badge-line-md);
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.od-badge--sm,
.od-chip--sm {
    min-height: var(--od-badge-height-sm);
    padding: 0 var(--od-badge-padding-x-sm);
    font-size: var(--od-badge-font-sm);
    line-height: var(--od-badge-line-sm);
    gap: 3px;
}

.od-badge--pill,
.od-chip--pill,
.od-badge,
.od-chip {
    border-radius: var(--od-badge-radius-pill);
}

.od-badge--rounded,
.od-chip--rounded {
    border-radius: var(--od-badge-radius);
}

.od-badge--dot::before {
    flex: 0 0 auto;
    width: var(--od-badge-dot-size);
    height: var(--od-badge-dot-size);
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.od-badge__dot {
    flex: 0 0 auto;
    width: var(--od-badge-dot-size);
    height: var(--od-badge-dot-size);
    border-radius: 50%;
    background: currentColor;
}

.od-badge__icon,
.od-chip__icon {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.od-badge__icon svg,
.od-chip__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.od-badge--default,
.od-chip--default {
    border-color: var(--od-neutral-aa-border);
    background: var(--od-neutral-aa-bg);
    color: var(--od-neutral-aa-text);
}

.od-badge--primary,
.od-chip--primary {
    border-color: var(--od-primary-aa-border);
    background: var(--od-primary-aa-bg);
    color: var(--od-primary-aa-text);
}

.od-badge--success,
.od-chip--success,
.od-chip.is-on {
    border-color: var(--od-success-aa-border);
    background: var(--od-success-aa-bg);
    color: var(--od-success-aa-text);
}

.od-badge--warning,
.od-chip--warning {
    border-color: var(--od-warning-aa-border);
    background: var(--od-warning-aa-bg);
    color: var(--od-warning-aa-text);
}

.od-badge--danger,
.od-chip--danger {
    border-color: var(--od-danger-aa-border);
    background: var(--od-danger-aa-bg);
    color: var(--od-danger-aa-text);
}

.od-badge--info,
.od-chip--info {
    border-color: var(--od-info-aa-border);
    background: var(--od-info-aa-bg);
    color: var(--od-info-aa-text);
}

.od-badge--neutral,
.od-chip:not([class*="--"]) {
    border-color: var(--od-neutral-aa-border);
    background: var(--od-neutral-aa-bg);
    color: var(--od-neutral-aa-text);
}

button.od-chip,
a.od-chip {
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

button.od-chip:disabled,
.od-chip.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.od-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--od-radius-control);
    border: 1px solid var(--od-border);
    background: var(--od-surface);
    color: var(--od-text-muted);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.od-icon-button--danger {
    border-color: color-mix(in srgb, var(--od-danger) 28%, transparent);
    background: var(--od-danger-soft);
    color: var(--od-danger);
}

.od-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-12);
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    margin-top: var(--od-space-16);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.od-pagination-row--attached {
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid var(--od-border);
    border-top: 0;
    border-radius: 0 0 var(--od-radius-card) var(--od-radius-card);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-card);
}

.od-pagination-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--od-pagination-button-size);
    color: var(--od-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

.od-pagination-info strong {
    color: var(--od-primary);
    font-weight: 700;
}

.od-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--od-pagination-gap);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.od-pagination-row > .od-pagination {
    margin-left: auto;
}

.od-pagination__button,
a.od-pagination__button,
button.od-pagination__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--od-pagination-button-min-width);
    height: var(--od-pagination-button-size);
    min-height: var(--od-pagination-button-size);
    padding: 4px var(--od-pagination-button-padding-x);
    border: 0;
    border-radius: var(--od-radius-control);
    background: var(--od-border);
    color: var(--od-text-muted);
    font-family: var(--od-shell-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.od-pagination__button:hover:not(.is-disabled):not(:disabled),
.od-pagination__button:focus-visible:not(.is-disabled):not(:disabled) {
    background: var(--od-border-strong);
    color: var(--od-text);
    outline: none;
}

.od-pagination__button:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 1px;
}

.od-pagination__button.is-active {
    background: var(--od-primary);
    color: #ffffff;
}

.od-pagination__button.is-disabled,
.od-pagination__button:disabled {
    background: var(--od-surface-subtle);
    color: var(--od-text-subtle);
    opacity: 1;
    pointer-events: none;
    cursor: not-allowed;
}

.od-pagination__button--prev,
.od-pagination__button--next {
    min-width: var(--od-pagination-button-size);
    padding: 0;
}

.od-pagination__button--prev svg,
.od-pagination__button--next svg {
    display: block;
    width: 16px;
    height: 16px;
}

.od-pagination__button--ellipsis {
    min-width: var(--od-pagination-button-size);
    padding: 0;
    letter-spacing: 0.08em;
}

.od-pagination__button--ellipsis.is-disabled {
    background: var(--od-border);
    color: var(--od-text-muted);
    opacity: 1;
}

.modal {
    --bs-modal-zindex: var(--od-z-modal);
}

.modal-backdrop {
    --bs-backdrop-zindex: var(--od-z-overlay);
}

.modal-dialog.od-modal--sm,
.modal-dialog:has(> .modal-content.od-modal--sm) {
    max-width: var(--od-modal-width-sm);
}

.modal-dialog.od-modal--lg,
.modal-dialog:has(> .modal-content.od-modal--lg) {
    max-width: var(--od-modal-width-lg);
}

.od-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--od-border) !important;
    border-radius: var(--od-radius-modal) !important;
    background: var(--od-surface) !important;
    color: var(--od-text);
    box-shadow: var(--od-modal-shadow) !important;
}

.od-modal--compact {
    --od-modal-padding-current: var(--od-modal-padding-compact);
}

.od-modal:not(.od-modal--compact) {
    --od-modal-padding-current: var(--od-modal-padding);
}

.od-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--od-space-12);
    padding: var(--od-modal-padding-current, var(--od-modal-padding));
    padding-bottom: var(--od-space-12);
    border-bottom: 1px solid var(--od-border);
    background: var(--od-surface);
}

.od-modal .modal-title {
    margin: 0;
    color: var(--od-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
}

.od-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--od-modal-padding-current, var(--od-modal-padding));
    color: var(--od-text);
}

.od-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--od-space-8);
    padding: var(--od-space-12) var(--od-modal-padding-current, var(--od-modal-padding)) var(--od-modal-padding-current, var(--od-modal-padding));
    border-top: 1px solid var(--od-border);
    background: var(--od-surface);
}

.od-modal .modal-footer.od-action-bar {
    justify-content: space-between;
}

.od-modal .btn-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--od-radius-control);
    opacity: 1;
    filter: none;
    background-color: transparent;
    box-shadow: none;
}

.od-modal .btn-close:hover,
.od-modal .btn-close:focus-visible {
    background: var(--od-surface-muted);
    box-shadow: 0 0 0 3px var(--od-primary-soft);
    outline: none;
    opacity: 1;
}

.od-modal--danger {
    border-color: color-mix(in srgb, var(--od-danger) 22%, var(--od-border)) !important;
}

.od-modal--danger .modal-header {
    border-bottom-color: color-mix(in srgb, var(--od-danger) 18%, var(--od-border));
}

.od-modal--danger .modal-title {
    color: var(--od-danger);
}

.od-modal .od-control.form-control,
.od-modal .od-control.form-select,
.od-modal .form-control.od-control,
.od-modal .form-select.od-control {
    min-height: var(--od-control-height);
    border-color: var(--od-border) !important;
    border-radius: var(--od-radius-control) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
    box-shadow: none !important;
}

.od-modal .od-control.form-control:focus,
.od-modal .od-control.form-select:focus,
.od-modal .form-control.od-control:focus,
.od-modal .form-select.od-control:focus {
    border-color: var(--od-primary) !important;
    box-shadow: 0 0 0 3px var(--od-primary-soft) !important;
}

.od-toast,
.app-alert-container .alert.od-toast,
.toast.od-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--od-space-8);
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-control);
    background: var(--od-surface);
    color: var(--od-text);
    font-family: var(--od-shell-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    box-shadow: var(--od-modal-shadow);
}

.od-toast__body,
.od-toast .toast-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.od-toast__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.od-toast--success,
.app-alert-container .alert.od-toast--success,
.app-alert-container .alert-success.od-toast {
    border-color: var(--od-success-aa-border);
    background: var(--od-success-aa-bg);
    color: var(--od-success-aa-text);
}

.od-toast--error,
.od-toast--danger,
.app-alert-container .alert.od-toast--error,
.app-alert-container .alert.od-toast--danger,
.app-alert-container .alert-danger.od-toast {
    border-color: var(--od-danger-aa-border);
    background: var(--od-danger-aa-bg);
    color: var(--od-danger-aa-text);
}

.od-toast--warning,
.app-alert-container .alert.od-toast--warning,
.app-alert-container .alert-warning.od-toast {
    border-color: var(--od-warning-aa-border);
    background: var(--od-warning-aa-bg);
    color: var(--od-warning-aa-text);
}

.od-toast--info,
.app-alert-container .alert.od-toast--info,
.app-alert-container .alert-info.od-toast,
.app-alert-container .alert-primary.od-toast {
    border-color: var(--od-info-aa-border);
    background: var(--od-info-aa-bg);
    color: var(--od-info-aa-text);
}

.od-toast .btn-close,
.toast.od-toast .btn-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--od-radius-control);
    opacity: 1;
    filter: none;
    background-color: transparent;
    box-shadow: none;
}

.od-toast .btn-close:hover,
.od-toast .btn-close:focus-visible,
.toast.od-toast .btn-close:hover,
.toast.od-toast .btn-close:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    outline: none;
    opacity: 1;
}

.toast.od-toast {
    --bs-toast-max-width: var(--od-toast-max-width);
    --bs-toast-bg: var(--od-surface);
    --bs-toast-border-color: var(--od-border);
    --bs-toast-box-shadow: var(--od-modal-shadow);
    max-width: var(--od-toast-max-width);
}

.toast.od-toast .toast-header {
    padding: 12px 14px 0;
    border-bottom: 0;
    background: transparent;
    color: inherit;
}

.toast.od-toast .toast-body {
    padding: 0 14px 12px;
}

.od-form-page {
    width: 100%;
    color: var(--od-text);
}

.od-form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.od-field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.od-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--od-space-8);
    min-width: 0;
}

.od-field-group--full {
    grid-column: 1 / -1;
}

.od-help {
    margin: 0;
    color: var(--od-text-subtle);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.od-form-page .od-control.form-control,
.od-form-page .od-control.form-select,
.od-form-page .form-control.od-control,
.od-form-page .form-select.od-control {
    border-color: var(--od-border) !important;
    border-radius: var(--od-radius-control) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
}

.od-form-page textarea.od-control,
.od-modal textarea.od-control {
    min-height: var(--od-textarea-min-height);
    resize: vertical;
}

.od-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-card);
    background: color-mix(in srgb, var(--od-surface) 92%, var(--od-surface-muted));
    box-shadow: var(--od-shadow-card);
}

.od-action-bar__status {
    min-width: 0;
    color: var(--od-text-muted);
}

.od-action-bar__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.od-form-page .btn.od-button,
.od-modal .btn.od-button {
    min-height: var(--od-button-height-md);
    border-radius: var(--od-radius-control) !important;
    font-weight: 600;
}

.od-form-page .btn.od-button--primary,
.od-modal .btn.od-button--primary {
    border-color: var(--od-primary) !important;
    background: var(--od-primary) !important;
    background-color: var(--od-primary) !important;
    color: #ffffff !important;
}

.od-form-page .btn.od-button--secondary,
.od-modal .btn.od-button--secondary {
    border-color: var(--od-border) !important;
    background: var(--od-surface-muted) !important;
    background-color: var(--od-surface-muted) !important;
    color: var(--od-text) !important;
}

.od-form-page .btn.od-button--primary:hover,
.od-form-page .btn.od-button--primary:focus,
.od-modal .btn.od-button--primary:hover,
.od-modal .btn.od-button--primary:focus {
    border-color: var(--od-primary-hover) !important;
    background: var(--od-primary-hover) !important;
    background-color: var(--od-primary-hover) !important;
}

.od-form-page .btn.od-button--secondary:hover,
.od-form-page .btn.od-button--secondary:focus,
.od-modal .btn.od-button--secondary:hover,
.od-modal .btn.od-button--secondary:focus {
    border-color: var(--od-border-strong) !important;
    background: var(--od-surface) !important;
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
}



@media (max-width: 767px) {
    .od-page-header,
    .od-summary-bar,
    .od-pagination-row {
        align-items: stretch;
        flex-direction: column;
    }

    .od-pagination-row {
        justify-content: flex-start;
    }
}


/* ---- Extracted from src/main/resources/templates/login.html ---- */
.login-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 241, 243, 0.96), rgba(255, 247, 247, 0.98));
    color: #8b1e2d;
    box-shadow: 0 10px 24px rgba(220, 53, 69, 0.08);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 260ms ease, transform 260ms ease, margin 260ms ease, padding 260ms ease;
}

.login-error-banner[hidden] {
    display: none !important;
}

.login-error-banner.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.login-error-banner__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    background: rgba(220, 53, 69, 0.12);
    color: #c62839;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-error-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.login-error-banner__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 800;
}

.login-error-banner__text {
    margin: 0;
    font-size: 13px;
    color: rgba(139, 30, 45, 0.86);
}

.login-error-banner__close {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(139, 30, 45, 0.72);
    font-size: 20px;
    line-height: 1;
}

.login-error-banner__close:hover {
    color: #8b1e2d;
}







/* ---- ragManagement 추가: 로그아웃 성공 배너 변형 ---- */
.login-error-banner--success {
    border-color: rgba(67, 183, 93, 0.24);
    background: var(--od-green-50, #ecf8ef);
}

.login-error-banner--success .login-error-banner__icon {
    background: var(--od-green-500, #43b75d);
}

.login-error-banner--success .login-error-banner__title {
    color: var(--od-green-700, #308242);
}