/* ============================================================
   App-specific overrides — custom features not in Serenity
   ============================================================ */

.vx {
  width: 1.9rem;
}

/* ════════════════════════════════════════════════════════════════
   BRAND — on-primary contrast
   Bootstrap derives a button's foreground from --bs-primary via
   color-contrast(). With the brand yellow it lands on white, which
   is 1.4:1 and unreadable. Every surface that fills with the primary
   must be told to use black instead.
   ════════════════════════════════════════════════════════════════ */
.btn-primary {
  --bs-btn-color:          var(--s-on-primary);
  --bs-btn-hover-color:    var(--s-on-primary);
  --bs-btn-active-color:   var(--s-on-primary);
  --bs-btn-disabled-color: var(--s-on-primary);
  --bs-btn-bg:             var(--wgl-yellow);
  --bs-btn-hover-bg:       var(--wgl-yellow-hi);
  --bs-btn-active-bg:      var(--wgl-yellow-lo);
  --bs-btn-disabled-bg:    var(--wgl-yellow);
  --bs-btn-border-color:       var(--wgl-yellow);
  --bs-btn-hover-border-color: var(--wgl-yellow-hi);
  --bs-btn-active-border-color: var(--wgl-yellow-lo);
  --bs-btn-disabled-border-color: var(--wgl-yellow);
  --bs-btn-focus-shadow-rgb:   var(--wgl-yellow-rgb);
  font-weight: 600;
}

/* Outline-primary would put yellow text on paper (1.4:1). Ink the
   label and keep yellow as the border, filling to yellow on hover. */
.btn-outline-primary {
  --bs-btn-color:              var(--bs-body-color);
  --bs-btn-border-color:       var(--wgl-yellow);
  --bs-btn-hover-color:        var(--s-on-primary);
  --bs-btn-hover-bg:           var(--wgl-yellow);
  --bs-btn-hover-border-color: var(--wgl-yellow);
  --bs-btn-active-color:       var(--s-on-primary);
  --bs-btn-active-bg:          var(--wgl-yellow-lo);
  --bs-btn-active-border-color: var(--wgl-yellow-lo);
  --bs-btn-disabled-color:     var(--s-disabled);
  --bs-btn-focus-shadow-rgb:   var(--wgl-yellow-rgb);
}

/* Warning shares the brand yellow, so it inherits the same problem */
.btn-warning {
  --bs-btn-color:        var(--s-on-primary);
  --bs-btn-hover-color:  var(--s-on-primary);
  --bs-btn-active-color: var(--s-on-primary);
}

/* Badges / alerts / progress filled with primary or warning */
.badge.bg-primary,
.badge.bg-warning,
.progress-bar.bg-primary,
.progress-bar.bg-warning {
  color: var(--s-on-primary) !important;
}

.alert-primary {
  --bs-alert-color:        var(--bs-body-color);
  --bs-alert-bg:           var(--wgl-tint);
  --bs-alert-border-color: var(--wgl-yellow);
}

/* Serenity's own toolbar/dialog buttons pick up .btn-primary above,
   but its save button also has a bare class in places. */
.s-Toolbar .tool-button.primary,
.save-and-close-button,
.apply-changes-button {
  color: var(--s-on-primary);
}

/* Anything that checks into the primary (view switches, filter pills) */
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-primary {
  color: var(--s-on-primary);
}

/* ── Links — black text on light, carrying a yellow rule. The
      underline is what makes the link read as a link once the color
      cue is gone; on dark the link is already yellow so the rule
      would double up, hence the theme scoping.                   ── */
:root.theme-azure-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.tool-button) {
  text-decoration-color: var(--wgl-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
:root.theme-azure-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.tool-button):hover {
  text-decoration-color: var(--wgl-yellow-deep);
}

/* ── Focus — one visible ring everywhere, brand-tinted. Serenity and
      Bootstrap each ship their own; unify so keyboard users get a
      consistent target and the ring never disappears.            ── */
.form-control:focus,
.form-select:focus,
.editor:focus,
input.s-Editor:focus,
textarea.s-Editor:focus,
.select2-container--focus .select2-selection {
  border-color: var(--s-input-border-focus);
  box-shadow: var(--s-focus-ring);
  outline: none;
}
.btn:focus-visible,
.tool-button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--wgl-yellow);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Checkboxes / radios — brand yellow with a black glyph ── */
.form-check-input:checked {
  background-color: var(--wgl-yellow);
  border-color: var(--wgl-yellow);
}
.form-check-input:focus {
  border-color: var(--wgl-yellow);
  box-shadow: var(--s-focus-ring);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--wgl-yellow);
}

/* ── Text selection ── */
::selection {
  background: var(--wgl-tint);
  color: var(--wgl-black);
}

/* ── .text-primary / .text-warning — Bootstrap resolves both to the
      raw --bs-primary, which is the brand yellow: 1.4:1 as text and
      effectively invisible. The dashboard KPI values and the traffic
      legend both use .text-primary, so this is load-bearing, not
      cosmetic. Route them to the readable emphasis step (deep yellow
      on light, bright yellow on dark).                            ── */
.text-primary,
.text-warning {
  color: var(--bs-primary-text-emphasis) !important;
}

/* ── Apply-changes button — Serenity sets title:"" so no text renders;
      inject "Apply" label via ::after to match the Save button style    ── */
.apply-changes-button .button-inner::after {
  content: "Apply";
}

/* ── Serenity title elements — common-theme hardcodes to --bs-primary ── */
.grid-title,
.panel-titlebar,
.title-text {
  color: var(--bs-heading-color);
}
/* category-title uses var(--bs-info-text-emphasis) in common-theme */
.category-title,
.category-title a {
  color: var(--s-category-title);
}

/* ── Close / dismiss icons — common-theme sets panel-titlebar-close  ──
   to var(--bs-link-color) (blue). Override to neutral gray with a
   red hover — standard close-button UX, not a navigation link.        */
.panel-titlebar-close,
.ui-dialog-titlebar-close,
.ui-dialog-titlebar .ui-button {
  color: var(--s-tool-icon) !important;
  transition: color var(--s-transition);
}
.panel-titlebar-close:hover,
.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar .ui-button:hover {
  color: var(--bs-danger) !important;
}

/* ── Tool buttons / action icons — ensure all resting state is gray  ── */
.s-tool-button,
.s-ToolButton,
.tool-button {
  color: var(--s-tool-icon);
}
.s-tool-button:hover,
.s-ToolButton:hover,
.tool-button:hover {
  color: var(--bs-body-color);
}
/* common-theme hardcodes --bs-primary / --bs-link-color on various icon
   elements. Use !important to beat common-theme specificity since we
   cannot modify that NuGet package file.                               */
.s-tool-button .icon,
.s-ToolButton .icon,
.tool-button .icon,
.s-tool-button i,
.s-ToolButton i,
.tool-button i {
  color: inherit !important;
}
/* Pager icons */
.s-Pager .slick-pager-nav a,
.s-Pager .slick-pager-nav span,
.s-Pager i {
  color: var(--s-pager-icon) !important;
}
/* Quick filter / search bar icons */
.s-QuickFilter i,
.s-FilterDisplayBar i {
  color: var(--s-tool-icon) !important;
}
/* Any remaining anchor-wrapped or bare FA icons that inherit link-blue */
.s-toolbar a i,
.s-toolbar a .icon,
.s-toolbar > * > a i {
  color: inherit !important;
}

/* ── Category title — remove dashed lines from Serenity theme ── */
.category-title::before,
.category-title::after {
    display: none;
  }
  /* ── Audit log entry styles ─────────────────────────────────── */
  .audit-changed-field {
    font-weight: 700;
  }

  /* Old / new value pair. The wash is the state color at 10% over the
     card, so both chips stay legible in either theme without a second
     set of hardcoded pastels. */
  .audit-old-value {
    color: var(--bs-form-invalid-color);
    background: rgba(var(--bs-danger-rgb), 0.10);
    padding: 2px 7px;
    border-radius: var(--bs-border-radius-sm);
    border-left: 3px solid var(--bs-danger);
    font-weight: 500;
    font-size: 0.85rem;
  }

  .audit-new-value {
    color: var(--bs-form-valid-color);
    background: rgba(var(--bs-success-rgb), 0.12);
    padding: 2px 7px;
    border-radius: var(--bs-border-radius-sm);
    border-left: 3px solid var(--bs-success);
    font-weight: 500;
    font-size: 0.85rem;
  }

  .audit-empty-value {
    color: var(--s-inactive);
    font-style: italic;
    opacity: 0.7;
  }

  .audit-empty-normal {
    color: var(--s-disabled);
    font-style: italic;
  }
  /* ── Chips ───────────────────────────────────────────────────── */
  .item-light {
    background: var(--s-chip-bg);
    border-radius: var(--bs-border-radius-pill);
    padding: 2px 10px;
    font-size: 0.82rem;
    transition: background var(--s-transition);
  }

    .item-light:hover {
      background: var(--s-chip-bg-hover);
    }

  .chips_container {
    height: 488px;
    overflow-y: auto;
    margin: 1rem;
  }
  /* ── View switch / card container ────────────────────────────── */
  .view-switch {
    order: 12;
    margin-left: var(--s-col-gap);
  }

    .view-switch .btn {
      font-size: 1.4rem;
      padding: 0 0.5em;
      border-radius: var(--bs-border-radius);
    }

  .card-container {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--s-card-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 1rem;
  }

  .card-items {
    --bs-gutter-y: var(--s-row-gap);
  }

  .card-container .card {
    height: 12em;
    margin-bottom: 0.5rem;
    padding: 0.6rem;
    overflow-y: auto;
  }

  .favorite-views {
    order: 11;
    margin-left: var(--s-col-gap);
  }

    .view-switch ~ .title-text,
    .favorite-views ~ .title-text {
      margin-right: auto;
    }

    .favorite-views ul {
      width: 11em;
      min-width: 11em;
      margin: 1em;
    }

    .favorite-views li.fav a {
      text-decoration: none;
    }

    .favorite-views i.delete-favorite {
      cursor: pointer;
      color: var(--bs-danger);
      line-height: 1.5;
    }
  /* ── No-navigation page ──────────────────────────────────────── */
  .no-navigation {
    background-color: var(--bs-body-bg);
  }

  /* ── Account-panel logo (login / signup / forgot / reset) ────────
        These panels are narrow and centred, so they take the compact
        (stacked) lockup rather than the wide sidebar one. Applied to
        .s-form-title-logo so every account screen matches — a compact
        mark on login and a wide one on signup would read as a bug.

        common-theme.css styles this element as a 50px circle with a
        background-image; the reset below undoes that so the `content:`
        swap can paint the real lockup at its own aspect ratio.
        Specificity (0,2,0) beats site.css's .s-site-logo-img (0,1,0). */
  .s-form-title-logo.s-site-logo-img {
    content: var(--s-site-logo-compact-url);
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    height: auto;
    width: auto;
    max-width: 190px;
    padding: 0;
    margin-inline: auto;
  }

  /* ── Password action pages (ForgotPassword / ResetPassword etc.)
        Serenity's built-in AccountPanelTitle renders logo + site-title
        text inside .s-container-tight. Hide the text, remove circle.  ── */
  .s-container-tight .s-form-title-logo {
    border-radius: 0;
    background-color: transparent;
    height: 60px;
    width: auto;
    max-width: 180px;
    padding: 0;
  }
  .s-container-tight h2.text-center {
    font-size: 0; /* hides the text node, img is unaffected */
    padding: 1rem 0 0;
  }
  .s-container-tight .btn {
    margin-top: 1rem;
  }
  /* ── CKEditor dialog ─────────────────────────────────────────── */
  .cke_dialog input,
  .cke_dialog select {
    border-radius: var(--bs-border-radius) !important;
  }

  .cke_reset {
    min-height: 300px;
  }

  .cke_dialog_body {
    transform: scale(1.15);
    transform-origin: center center;
    border: none !important;
    box-shadow: var(--s-shadow-xl) !important;
    border-radius: var(--bs-border-radius-xl) !important;
  }

    .cke_dialog_body label {
      font-weight: 400 !important;
      font-size: 13px !important;
      color: var(--bs-body-color);
    }

  .cke_dialog_title {
    font-family: var(--header-font) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    padding-top: 10px !important;
    color: var(--s-card-title) !important;
  }

  a.cke_dialog_tab {
    font-family: var(--bs-body-font-family) !important;
    text-transform: none !important;
    font-size: 0.85rem !important;
  }

  .cke_dialog_background_cover {
    display: none !important;
  }

  body.cke_dialog_open:has(.cke_dialog) .s-main,
  body.cke_dialog_open:has(.cke_dialog) .s-sidebar {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
  }

  .cke_chrome {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    box-shadow: none !important;
  }
  /* ── JSON data editor ────────────────────────────────────────── */
  .json-data-editor {
    background: var(--s-card-solid-bg);
    border: 1px solid var(--s-card-border);
    border-radius: var(--bs-border-radius-xl);
    padding: 24px;
    width: 100%;
  }

  .ai-disclaimer {
    background: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .json-section {
    margin-bottom: 28px;
  }

    .json-section:last-child {
      margin-bottom: 0;
    }

  .json-section-title {
    font-family: var(--header-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--s-card-border);
    letter-spacing: 0.03em;
  }

  .json-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }

  .json-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--s-card-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 14px;
  }

  .json-card-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--s-pager-text);
    margin-bottom: 6px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
  }

  .json-card-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    word-break: break-word;
  }

  .json-card input[type="text"],
  .json-card input[type="number"],
  .json-card textarea,
  .json-card select {
    width: 100%;
    padding: 7px 11px;
    border: 1px solid var(--s-cell-input-border);
    border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
    color: var(--s-input-text);
    background: var(--s-input-bg);
    transition: all var(--s-transition);
  }

    .json-card input:focus,
    .json-card textarea:focus,
    .json-card select:focus {
      outline: none;
      border-color: var(--bs-primary);
      box-shadow: 0 0 0 3px var(--s-input-outline);
    }

    .json-card input[readonly],
    .json-card textarea[readonly] {
      background: var(--s-input-readonly-bg);
      color: var(--bs-secondary-color);
      cursor: not-allowed;
    }

  .json-card textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
  }

  .json-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bs-primary);
    cursor: pointer;
  }

  .json-card-full {
    grid-column: 1 / -1;
  }

  .json-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .json-list-item {
    background: var(--s-input-bg);
    border: 1px solid var(--s-card-border);
    border-radius: var(--bs-border-radius);
    padding: 5px 11px;
    font-size: 0.875rem;
    color: var(--bs-body-color);
  }

  .json-list input.json-list-item {
    min-width: 120px;
  }

  .json-nested {
    grid-column: 1 / -1;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--s-card-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 16px;
    margin-top: 8px;
  }

    .json-nested .json-section-title {
      font-size: 0.85rem;
      margin-bottom: 12px;
    }

    .json-nested .json-grid {
      gap: 12px;
      margin-bottom: 0;
    }

  .json-alert {
    padding: 11px 15px;
    border-radius: var(--bs-border-radius);
    margin-bottom: 14px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .json-alert-error {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-form-invalid-color);
    border: 1px solid var(--bs-form-invalid-border-color);
  }

  @media (max-width: 768px) {
    .json-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }

    .json-data-editor {
      padding: 18px;
    }
  }

  @media (max-width: 480px) {
    .json-grid {
      grid-template-columns: 1fr;
    }

    .json-data-editor {
      padding: 14px;
    }
  }

/* ===== RTL support — mirror LTR directional rules to match the English layout ===== */
[dir="rtl"] .audit-old-value { border-left: 0; border-right: 3px solid var(--bs-danger); }
[dir="rtl"] .audit-new-value { border-left: 0; border-right: 3px solid var(--bs-success); }
[dir="rtl"] .view-switch { margin-left: 0; margin-right: var(--s-col-gap); }
[dir="rtl"] .favorite-views { margin-left: 0; margin-right: var(--s-col-gap); }
[dir="rtl"] .view-switch ~ .title-text,
[dir="rtl"] .favorite-views ~ .title-text { margin-right: 0; margin-left: auto; }

/* FontAwesome 7 Pro icon/family config lives in tokens.css (single source). */

/* ===== RTL mirrors for Serenity common-theme components ═══════════════════
   (bootstrap.rtl.css covers the Bootstrap utilities; these are the custom
   Serenity widgets it doesn't touch.) ===================================== */

/* Toolbar button group: mirror the -1px border overlap + rounded outer corners */
[dir="rtl"] .s-Toolbar > * { margin-right: 0; margin-left: var(--s-col-gap); }
[dir="rtl"] .tool-button { margin-left: 0; margin-right: -1px; }
[dir="rtl"] .tool-button:first-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius);
}
[dir="rtl"] .tool-button:last-child {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius);
}

/* Dialog/panel close button: common-theme uses margin-left:auto to push it to
   the right; in RTL it belongs on the left → margin-right:auto. */
[dir="rtl"] .panel-titlebar-close { margin-left: 0; margin-right: auto; }

/* Pager: the nav arrows are icon-font glyphs; swap the directional codepoints
   so first/last and prev/next point the correct way in RTL (reload unchanged). */
[dir="rtl"] .slick-pg-first > span:before { content: "\f101"; }
[dir="rtl"] .slick-pg-prev  > span:before { content: "\f105"; }
[dir="rtl"] .slick-pg-next  > span:before { content: "\f104"; }
[dir="rtl"] .slick-pg-last  > span:before { content: "\f100"; }

/* Sidebar footer user dropdown: right-align the items in RTL */
[dir="rtl"] .s-sidebar-footer .dropdown-item { text-align: right; }