/*
 * ASNET Bootstrap-class compatibility shim.
 *
 * This theme's own markup uses only asnet-* classes and loads no
 * Bootstrap CSS/JS (see the plan / final report). That's fine for every
 * page this project explicitly redesigned - but FOSSBilling 0.8.5 has
 * ~50 client-area module templates in total, and a handful of low-traffic
 * ones (knowledge base, contact-us, formbuilder, print invoice, embed
 * pages, news, ToS/privacy/about-us static pages, cron/maintenance
 * screens) were out of scope for a full bespoke redesign in this pass.
 * Those templates still emit stock Bootstrap classes (container, card,
 * btn, form-control, table, badge, alert...). Without this file they would
 * render as unstyled raw HTML under the asnet theme, which would violate
 * "the portal must not be half ASNET, half stock" - so this gives that
 * long tail a coherent, on-brand look using the same design tokens, even
 * though it isn't the full component treatment the explicitly-listed pages
 * got. See the final report for the exact list of pages on the full
 * treatment vs. this compatibility layer.
 *
 * Bootstrap JS behaviour (data-bs-toggle="collapse"/"tab"/"dropdown") is
 * NOT reproduced here - none of the explicitly in-scope pages depend on it
 * (checkout's own tabs/accordion were redesigned away, not skinned), but a
 * handful of untouched pages using it will show all interactive panels open
 * rather than collapsed. Flagged in the final report as a residual gap.
 */

/* .spinner-border / .spinner-border-sm are not template leftovers - FOSSBilling
   0.8.5 core (frontend/core/api.ts: API._createLoader, and
   frontend/core/link-helpers.mts: createLinkLoadingState) creates elements
   with these exact class names at runtime for every API call's loading
   indicator, regardless of theme. The doc comment on _createLoader says so
   explicitly: "Custom themes simply need to provide one with the
   spinner-border class." Without this rule the loader is an invisible,
   unstyled box - confirmed via source read, not assumed. */
.spinner-border {
  display: inline-block;
  border: 0.25em solid var(--asnet-border-strong);
  border-right-color: var(--asnet-primary);
  border-radius: 50%;
  animation: asnet-spin 0.75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }
@keyframes asnet-spin { to { transform: rotate(360deg); } }
.me-2 { margin-right: 0.5rem; }

.container, .container-fluid { width: 100%; max-width: var(--asnet-container); margin-inline: auto; padding-inline: var(--asnet-space-sm); }
.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--asnet-space-xs) * -1); }
.row > [class*="col"] { padding-inline: var(--asnet-space-xs); width: 100%; }
.col, [class^="col-"], [class*=" col-"] { flex: 1 0 0%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6, .col-md-6, .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-4, .col-md-4, .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-3, .col-md-3, .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-8, .col-md-8, .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9, .col-md-9, .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
@media (max-width: 767.98px) {
  .col-md-6, .col-md-4, .col-md-3, .col-md-8, .col-md-9, .col-lg-4, .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
}

h1.display-1, .display-1 { font-size: var(--asnet-fs-3xl); }
.text-center { text-align: center; }
.text-muted { color: var(--asnet-text-muted); }
.small, small { font-size: var(--asnet-fs-sm); }
.fw-bold { font-weight: 700; }
.d-flex { display: flex; }
.d-none { display: none; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-column { flex-direction: column; }
.w-100 { width: 100%; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
[class*="mb-"] { margin-bottom: var(--asnet-space-sm); }
[class*="mt-"] { margin-top: var(--asnet-space-sm); }
[class*="my-"] { margin-block: var(--asnet-space-sm); }
[class*="p-"] { padding: var(--asnet-space-sm); }
.mb-0, .mt-0, .my-0 { margin: 0; }

.card {
  background: var(--asnet-surface-elevated);
  border: 1px solid var(--asnet-border);
  border-radius: var(--asnet-radius-md);
  box-shadow: var(--asnet-shadow-soft);
}
.card-body { padding: var(--asnet-space-md); }
.card-header { padding: var(--asnet-space-sm) var(--asnet-space-md); border-bottom: 1px solid var(--asnet-border); font-weight: 700; }
.card-title { font-size: var(--asnet-fs-lg); margin-bottom: var(--asnet-space-xs); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--asnet-radius-sm);
  border: 1px solid transparent; font-size: var(--asnet-fs-sm); font-weight: 650;
  cursor: pointer; text-decoration: none;
}
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--asnet-fs-xs); }
.btn-primary { background: var(--asnet-primary); color: #fff; }
.btn-primary:hover { background: var(--asnet-primary-strong); color: #fff; }
.btn-outline-primary, .btn-secondary { background: transparent; border-color: var(--asnet-border-strong); color: var(--asnet-text); }
.btn-outline-primary:hover, .btn-secondary:hover { border-color: var(--asnet-primary); color: var(--asnet-primary); }
.btn-dark { background: var(--asnet-ink); color: #fff; }

.form-control, .form-select {
  display: block; width: 100%; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--asnet-border-strong); border-radius: var(--asnet-radius-sm);
  background: var(--asnet-surface); color: var(--asnet-text); font-family: inherit; font-size: var(--asnet-fs-base);
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--asnet-primary); box-shadow: 0 0 0 3px var(--asnet-primary-soft); }
.form-label { display: block; font-size: var(--asnet-fs-sm); font-weight: 600; margin-bottom: 6px; }
.form-text { font-size: var(--asnet-fs-xs); color: var(--asnet-text-muted); margin-top: 6px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-input { width: 18px; height: 18px; accent-color: var(--asnet-primary); }

.table { width: 100%; border-collapse: collapse; font-size: var(--asnet-fs-sm); }
.table th { text-align: left; padding: var(--asnet-space-xs) var(--asnet-space-sm); color: var(--asnet-text-muted); border-bottom: 1px solid var(--asnet-border); }
.table td { padding: var(--asnet-space-sm); border-bottom: 1px solid var(--asnet-border); }

.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--asnet-radius-full); font-size: var(--asnet-fs-xs); font-weight: 700; }
.bg-success, .text-bg-success { background: var(--asnet-success-bg); color: var(--asnet-success); }
.bg-warning, .text-bg-warning { background: var(--asnet-warning-bg); color: var(--asnet-warning); }
.bg-danger, .text-bg-danger { background: var(--asnet-danger-bg); color: var(--asnet-danger); }
.bg-info, .text-bg-info { background: var(--asnet-info-bg); color: var(--asnet-info); }
.bg-secondary, .bg-primary, .text-bg-primary { background: var(--asnet-surface-muted); color: var(--asnet-text); }

.alert { display: flex; gap: 10px; padding: var(--asnet-space-sm); border-radius: var(--asnet-radius-sm); border: 1px solid; font-size: var(--asnet-fs-sm); margin-bottom: var(--asnet-space-sm); }
.alert-info { background: var(--asnet-info-bg); border-color: var(--asnet-info-border); color: var(--asnet-info); }
.alert-success { background: var(--asnet-success-bg); border-color: var(--asnet-success-border); color: var(--asnet-success); }
.alert-warning { background: var(--asnet-warning-bg); border-color: var(--asnet-warning-border); color: var(--asnet-warning); }
.alert-danger { background: var(--asnet-danger-bg); border-color: var(--asnet-danger-border); color: var(--asnet-danger); }

.breadcrumb { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--asnet-space-md); font-size: var(--asnet-fs-sm); color: var(--asnet-text-muted); }
.breadcrumb-item.active { color: var(--asnet-text); font-weight: 600; }

.pagination { display: flex; gap: 4px; list-style: none; padding: 0; justify-content: center; }
.page-link, .page-item { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--asnet-radius-sm); color: var(--asnet-text); }
.page-item.active .page-link { background: var(--asnet-primary); color: #fff; }

.nav-pills .nav-link, .nav-tabs .nav-link { padding: 8px 14px; border-radius: var(--asnet-radius-sm); color: var(--asnet-text-muted); font-weight: 600; font-size: var(--asnet-fs-sm); }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active { background: var(--asnet-primary-soft); color: var(--asnet-primary); }

.accordion-item { border: 1px solid var(--asnet-border); border-radius: var(--asnet-radius-sm); margin-bottom: 8px; overflow: hidden; }
.accordion-button { width: 100%; text-align: left; padding: var(--asnet-space-sm); background: var(--asnet-surface-elevated); border: none; font-weight: 700; cursor: pointer; }
.accordion-body { padding: var(--asnet-space-sm); }

.dropdown-menu { background: var(--asnet-surface-elevated); border: 1px solid var(--asnet-border); border-radius: var(--asnet-radius-md); box-shadow: var(--asnet-shadow-lifted); padding: 6px; }
.dropdown-item { display: block; padding: 8px 10px; border-radius: var(--asnet-radius-sm); color: var(--asnet-text); }
.dropdown-item:hover { background: var(--asnet-surface-muted); }

/* CKEditor 5 (support-asnet/mod_support_contact_us.asnet.html.twig's
   {{ wysiwyg() }} call, and any other .editor-textarea use) is injected by
   FOSSBillingExtension::wysiwyg() - a core PHP function, not a theme
   template, so it can't be overridden here, and its JS is not touched by
   this stylesheet.

   That core function's own inline <script> sets
   `.ck-editor__main { color: #1d273b }` in dark mode. .ck-editor__main is
   the PARENT of the actual editable element (.ck-content is a child, not
   the same node - see CKEditor5's Classic editor DOM:
   .ck-editor > .ck-editor__main > .ck-content[contenteditable]), so that
   inline color only ever reached .ck-content through normal CSS
   inheritance. `color` is an inherited property, and an inherited value is
   always the LOWEST-priority source in the cascade - any rule that matches
   .ck-content directly, however low its own specificity, wins over a value
   the element only inherited from a parent (inline or not). So giving
   .ck-content its own explicit `color` below overrides the inherited
   #1d273b without needing !important, and - since caret-color and list/
   paragraph text inside .ck-content have no CKEditor rule of their own and
   also just inherit `color` - the same one declaration fixes the caret and
   every plain text node under it too. Confirmed provably true from
   ckeditor5's DOM/cascade contract; not re-verified in a browser (none
   available here) - see final report's manual checklist for the
   administrator's visual confirmation.

   Placeholder text is CKEditor5's own `.ck.ck-editor__editable.ck-placeholder::before`
   engine rule (ckeditor5-engine/theme/placeholder.css, unchanged since
   CKEditor5's theme-lark redesign - this project pins ckeditor5 48.3.1 per
   package.json; no compiled ckeditor.css exists in this workspace to read
   directly, no node_modules/dist present, so this is confirmed against
   CKEditor5's documented/stable public theming contract, not a locally
   inspected file), which reads the `--ck-color-engine-placeholder-text`
   CSS custom property. Overriding that variable on .ck-content is the
   idiomatic CKEditor5-supported way to retheme it, kept below alongside a
   second, directly-specific `::before` rule as a defense-in-depth fallback
   in case that variable is ever not honored. Both approaches are
   specificity-safe without !important: CKEditor5's own placeholder rule is
   `.ck.ck-editor__editable.ck-placeholder::before` (3 classes + 1
   pseudo-element = specificity (0,3,1)); the fallback below is
   `:root[data-bs-theme="dark"] .ck.ck-content.ck-placeholder::before` (1
   attribute selector + 3 classes + 1 pseudo-element = (0,4,1)), which
   always outranks it regardless of stylesheet load order.

   Still leaves every CKEditor chrome surface (content area + toolbar) on
   its default white background otherwise, which is the "izrazito bela
   površina" the review flagged. Background/border/toolbar rules below are
   unchanged from the previous pass. Light mode is untouched: every rule
   here is scoped under :root[data-bs-theme="dark"], so nothing here can
   affect the light-mode CKEditor appearance. */
:root[data-bs-theme="dark"] .ck.ck-editor__main .ck-content,
:root[data-bs-theme="dark"] .ck.ck-content {
  background: var(--asnet-surface-elevated);
  border-color: var(--asnet-border);
  color: var(--asnet-text);
  --ck-color-engine-placeholder-text: var(--asnet-text-muted);
}
:root[data-bs-theme="dark"] .ck.ck-content.ck-placeholder::before {
  color: var(--asnet-text-muted);
}
:root[data-bs-theme="dark"] .ck.ck-toolbar {
  background: var(--asnet-surface-muted);
  border-color: var(--asnet-border);
}
:root[data-bs-theme="dark"] .ck.ck-toolbar .ck-button:not(.ck-disabled) .ck-icon,
:root[data-bs-theme="dark"] .ck.ck-toolbar .ck-button__label {
  color: var(--asnet-text);
}
:root[data-bs-theme="dark"] .ck.ck-editor__top .ck-sticky-panel__content {
  border-color: var(--asnet-border);
}