/* Application data fills the unmodified FlexAdmin shell components. */
/* Bridge Bootstrap utilities/components to the same FlexAdmin palette as the shell.
   Setting only body colors leaves emphasis, secondary text and borders in light mode. */
:root, [data-theme] {
  --bs-body-color: var(--default-color);
  --bs-body-bg: var(--background-color);
  --bs-emphasis-color: var(--heading-color);
  --bs-secondary-color: var(--muted-color);
  --bs-secondary-bg: var(--surface-color);
  --bs-tertiary-color: var(--muted-color);
  --bs-tertiary-bg: var(--background-color);
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: var(--border-color);
  --bs-body-color-rgb: 28, 38, 53;
  --bs-emphasis-color-rgb: 15, 23, 40;
  --bs-secondary-color-rgb: 95, 110, 131;
  --bs-tertiary-color-rgb: 95, 110, 131;
  --bs-body-bg-rgb: 244, 247, 251;
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg-rgb: 244, 247, 251;
  color-scheme: light;
}
[data-theme=dark] {
  --bs-body-color-rgb: 210, 225, 231;
  --bs-emphasis-color-rgb: 243, 247, 255;
  --bs-secondary-color-rgb: 149, 174, 190;
  --bs-tertiary-color-rgb: 149, 174, 190;
  --bs-body-bg-rgb: 8, 20, 26;
  --bs-secondary-bg-rgb: 17, 34, 44;
  --bs-tertiary-bg-rgb: 8, 20, 26;
  --bs-primary-text-emphasis: #9fc2ff;
  --bs-primary-bg-subtle: rgba(91, 143, 255, .14);
  --bs-primary-border-subtle: rgba(91, 143, 255, .35);
  --bs-secondary-text-emphasis: var(--default-color);
  --bs-secondary-bg-subtle: var(--surface-color);
  --bs-secondary-border-subtle: var(--border-color);
  --bs-success-text-emphasis: var(--success-color);
  --bs-success-bg-subtle: var(--success-color-light);
  --bs-success-border-subtle: rgba(74, 222, 128, .35);
  --bs-info-text-emphasis: var(--info-color);
  --bs-info-bg-subtle: var(--info-color-light);
  --bs-info-border-subtle: rgba(56, 189, 248, .35);
  --bs-warning-text-emphasis: var(--warning-color);
  --bs-warning-bg-subtle: var(--warning-color-light);
  --bs-warning-border-subtle: rgba(245, 158, 11, .35);
  --bs-danger-text-emphasis: var(--danger-color);
  --bs-danger-bg-subtle: var(--danger-color-light);
  --bs-danger-border-subtle: rgba(251, 113, 133, .35);
  --bs-light-text-emphasis: var(--heading-color);
  --bs-light-bg-subtle: var(--surface-color);
  --bs-light-border-subtle: var(--border-color);
  --bs-dark-text-emphasis: var(--default-color);
  --bs-dark-bg-subtle: var(--background-color);
  --bs-dark-border-subtle: var(--border-color);
  color-scheme: dark;
}
.webot-profile-initial { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--sidebar-hover-bg); color:var(--accent-color); font-weight:700; flex-shrink:0; }
.webot-header-balance { display:flex; gap:8px; align-items:center; font-size:12px; font-weight:600; color:var(--accent-color); white-space:nowrap; }
.webot-header-plan-summary { padding:0 12px 0 8px; margin-right:4px; border-right:1px solid var(--border-color); line-height:1.35; }
.webot-guest-header .header-actions-desktop { display:flex; align-items:center; gap:12px; }
.webot-guest-header .header-right { margin-left:auto; }
.main-content > .fauth { min-height:calc(100vh - 170px); }
.main-content > .fauth .fauth-main { padding:24px; }
.webot-no-sidebar > .main { margin-left:0; }
.webot-native-content [hidden] { display:none!important; }
.webot-native-content .table-responsive { max-width:100%; }
.webot-native-content :is(.modal-overlay,.modal-bg,.popup-overlay) .modal-dialog { width:calc(100% - 32px); max-width:500px; }
.webot-native-content :is(.modal-overlay,.modal-bg,.popup-overlay) .modal-content { max-height:calc(100vh - 56px); overflow:auto; }
@media (max-width:575.98px) {
  .webot-guest-header { padding-right:12px; padding-left:12px; gap:8px; }
  .webot-guest-header .header-actions-desktop { gap:6px; }
  .webot-guest-header .header-action { width:30px; height:34px; }
  .webot-guest-header .header-divider { display:none; }
  .webot-guest-header .btn { padding:6px 9px; font-size:12px; }
  .webot-guest-header .header-logo { gap:6px; }
  .webot-guest-header .header-logo span { display:inline; font-size:16px; }
  .webot-header-balance { font-size:11px; gap:4px; }
  .webot-header-balance i { display:none; }
}

/* Bootstrap stripe/hover text must follow FlexAdmin's theme, including AJAX table rows. */
.webot-native-content .table {
  --bs-table-striped-color: var(--default-color);
  --bs-table-hover-color: var(--default-color);
  --bs-table-active-color: var(--default-color);
}
.webot-native-content .dataTables_wrapper :is(.dataTables_length,.dataTables_info,.dataTables_paginate) { margin-top:1rem; }
.webot-native-content .dataTables_length select { width:auto; display:inline-block; }

.webot-native-content .dataTables_wrapper:has(> .dataTables_length) { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 1rem; }
.webot-native-content .dataTables_wrapper > :is(.dataTables_length,table,.dataTables_processing) { grid-column:1 / -1; }
.webot-native-content .dataTables_wrapper > .dataTables_length { justify-self:start; }
.webot-native-content .dataTables_wrapper > .dataTables_paginate { align-self:end; }
@media (max-width:767px) {
  .webot-native-content .dataTables_wrapper > :is(.dataTables_info,.dataTables_paginate) { grid-column:1 / -1; text-align:center; }
}
/* Native model cards keep an equal desktop split and stack on narrow screens. */
.model-workspace .model-mode-picker { width: 320px; max-width: 100%; }
/* Result height follows every output and message; only the media keeps its own ratio. */
.model-workspace .model-video-result { display: block; width: 100%; max-width: 100%; min-width: 0; background: var(--surface-color); }
.model-workspace .model-video-result > .model-generation-state { min-height: 280px; }
.model-workspace .model-video-result video { display: block; width: auto; height: auto; max-width: 100%; max-height: 65vh; margin-inline: auto; object-fit: contain; }
.webot-result-panel, .webot-result-item, .webot-generation-progress { width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.webot-result-panel, .webot-result-item { align-items: stretch; }
.webot-result-panel .webot-result-media { display: block; width: auto; height: auto; max-width: 100%; max-height: 65vh; margin-inline: auto; object-fit: contain; }
.model-workspace .model-video-result video, .webot-result-panel video.webot-result-media { min-height: 96px; background: #081015; }
.webot-result-panel audio.webot-result-media { width: 100%; min-width: 0; max-height: none; }
.webot-result-panel pre { min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.webot-result-panel :is(a, p, .alert) { max-width: 100%; overflow-wrap: anywhere; }
.model-workspace .model-chart { min-height: 300px; }
.model-workspace #requestsLimit { width: auto; }
.model-workspace .nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
.model-workspace .nav-tabs .nav-link { white-space: nowrap; }
/* Reusable label/control columns for settings rows across application pages. */
:root { --webot-setting-label-width: 13rem; --webot-setting-column-gap: 1rem; }
.webot-setting-row { display: grid; grid-template-columns: minmax(0, var(--webot-setting-label-width)) minmax(0, 1fr); column-gap: var(--webot-setting-column-gap); align-items: center; }
.webot-setting-row > .form-label { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.webot-setting-row > .form-check { display: flex; align-items: center; min-height: 1.5rem; margin: 0; padding-left: 0; }
.webot-setting-row > .form-check .form-check-input { float: none; flex-shrink: 0; margin: 0; }
@media (max-width: 575px) {
  .webot-setting-row { grid-template-columns: minmax(0, min(var(--webot-setting-label-width), 60%)) minmax(0, 1fr); }
}
.model-workspace .d-flex > .form-control { min-width: 0; }
.model-workspace .webot-action-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: .15rem;
}
.model-workspace .webot-action-bar .btn { white-space: nowrap; }
.model-workspace .webot-calculate-button {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
}
.model-workspace .webot-calculate-button:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.model-workspace .webot-calculate-button:active,
.model-workspace .webot-calculate-button:focus {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.model-workspace .webot-legacy-quote-result { margin-top: .75rem; }
.model-workspace .webot-generate-button .webot-button-spinner { vertical-align: -.1em; }
[data-theme=dark] .model-workspace .webot-calculate-button {
  color: #06131a;
  background-color: #38bdf8;
  border-color: #38bdf8;
  --bs-btn-color: #06131a;
  --bs-btn-bg: #38bdf8;
  --bs-btn-border-color: #38bdf8;
  --bs-btn-hover-color: #06131a;
  --bs-btn-hover-bg: #67d3fb;
  --bs-btn-hover-border-color: #67d3fb;
  --bs-btn-active-color: #06131a;
  --bs-btn-active-bg: #7dd9fb;
  --bs-btn-active-border-color: #7dd9fb;
}
[data-theme=dark] .model-workspace .webot-calculate-button:hover {
  color: #06131a;
  background-color: #67d3fb;
  border-color: #67d3fb;
}
[data-theme=dark] .model-workspace .webot-calculate-button:active,
[data-theme=dark] .model-workspace .webot-calculate-button:focus {
  color: #06131a;
  background-color: #7dd9fb;
  border-color: #7dd9fb;
}
.model-workspace .reference-preview-tile { position: relative; aspect-ratio: 1; overflow: hidden; }
.model-workspace .reference-preview-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.model-workspace :is(.reference-preview-empty,.reference-preview-loading) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-color); }
.model-workspace .reference-preview-empty { font-size: 2rem; }
.model-workspace .reference-preview-delete { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: none; }
.model-workspace .reference-preview-tile.has-image .reference-preview-delete { display: flex; }
.model-workspace .reference-picker-panel.is-dragging { border-color: var(--accent-color); }

/* Filled accent controls use the workspace black only in dark mode. */
[data-theme=dark] { --webot-highlight-label-color: #08141a; }
[data-theme=dark] :is(
  .btn-primary, .btn-accent, .btn-success,
  .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
  .btn-outline-accent:active, .btn-outline-accent.active,
  .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary,
  .btn-check:checked + .btn-outline-accent, .btn-check:active + .btn-outline-accent,
  .sidebar .nav-item > .nav-link.active,
  .nav-pills .nav-link.active, .calendar-views-nav .nav-link.active,
  .wizard-pills .nav-link.active,
  .page-item.active .page-link, .datatable-pagination button.active,
  .todo-view-btn.active, .widget-value-tabs button.active, .widget-order-tab.active,
  .pricing-toggle-label.active,
  .agents-add-button, .agent-live-chat-button,
  .webot-migrated-content .catalogue-card-action,
  .webot-migrated-content .btn-success,
  .webot-native-content .outbound-radio-card input:checked + span
) {
  --contrast-color: var(--webot-highlight-label-color);
  --bs-btn-color: var(--webot-highlight-label-color);
  --bs-btn-hover-color: var(--webot-highlight-label-color);
  --bs-btn-active-color: var(--webot-highlight-label-color);
  --bs-btn-disabled-color: var(--webot-highlight-label-color);
  color: var(--webot-highlight-label-color) !important;
}
/* Labels, icons and nested menu badges share the selected control's color. */
[data-theme=dark] :is(
  .btn-primary, .btn-accent, .btn-success,
  .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
  .btn-outline-accent:active, .btn-outline-accent.active,
  .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary,
  .btn-check:checked + .btn-outline-accent, .btn-check:active + .btn-outline-accent,
  .sidebar .nav-item > .nav-link.active,
  .nav-pills .nav-link.active, .calendar-views-nav .nav-link.active,
  .wizard-pills .nav-link.active,
  .page-item.active .page-link, .datatable-pagination button.active,
  .todo-view-btn.active, .widget-value-tabs button.active, .widget-order-tab.active,
  .pricing-toggle-label.active,
  .agents-add-button, .agent-live-chat-button,
  .webot-migrated-content .catalogue-card-action,
  .webot-migrated-content .btn-success,
  .webot-native-content .outbound-radio-card input:checked + span
) :is(span, i, svg) {
  color: inherit !important;
}
/* FlexAdmin removes the fill on disabled dark-mode buttons. They are no longer
   highlighted, so keep a muted readable label instead of black-on-black. */
[data-theme=dark] :is(.webot-native-content, .webot-migrated-content) .btn:disabled:not(.btn-check) {
  --contrast-color: var(--muted-color);
  --bs-btn-disabled-color: var(--muted-color);
  color: var(--muted-color) !important;
}

/* Purchase shortcuts share the FlexAdmin header and palette. */
.webot-header-purchases { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:8px; }
.webot-header-purchases .btn { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.header-search { min-width:120px; }
@media (max-width:1199.98px) { .header:has(.webot-header-purchases) .webot-header-balance { display:none; } }
@media (max-width:991.98px) {
  .webot-header-buy-credits span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}
@media (max-width:767.98px) {
  .webot-header-purchases { gap:6px; margin-left:auto; }
  .webot-header-purchases .btn { padding:7px 9px; font-size:12px; }
  .header:has(.webot-header-purchases) .header-right { margin-left:4px; }
}

/* Shared WeBot brand mark uses the bundled FlexAdmin Lucide icon. */
.webot-brand-icon { display: inline-block; flex-shrink: 0; font-size: 24px; line-height: 1; color: inherit; }
.header-logo .webot-brand-icon { font-size: 26px; }
.fauth-visual .webot-brand-icon { color: #fff; }
.la-chat-brand .webot-brand-icon { font-size: 28px; }