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

/* ── Kill overscroll / swipe-back ghost shift ───────────────────
   Two-finger swipe-left fires the browser back gesture AND scrolls
   any element a few px wider than the viewport. The horizontal
   scroll offset survives the navigation, so the previous page
   loads shifted to the right. `overscroll-behavior-x: none`
   stops the gesture chaining past the app, and pinning overflow-x
   on the root removes the stray scrollable width that caused the
   shift. `overscroll-behavior-y: none` kills the trackpad rubber-
   band bounce / pull-to-refresh on the vertical axis too.          */
html,
body {
  overscroll-behavior: none;
  overflow-x: hidden;
}

/* ── FontAwesome 7 Pro: reclaim the legacy `.fa` class ───────────
   Serenity's Base bundle ships line-awesome-fa.min.css, which maps
   the bare `.fa` class to the "Line Awesome Free" font (thin outline
   glyphs). Any `fa fa-x` icon whose name only exists in FA7 then
   renders as an empty box. Force the classic `.fa`/`.fas`/`.fa-solid`
   icons back to FA7 Pro solid so every icon resolves.
   Brand/regular/light/duotone variants keep their own families.     */
.fa:not(.fab):not(.fa-brands):not(.far):not(.fa-regular):not(.fal):not(.fa-light):not(.fad):not(.fa-duotone):not(.fat):not(.fa-thin),
.fas,
.fa-solid {
  font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
  /* 300 = FA7 Pro Light → outline glyphs (matches tokens.css icon design).
     Was 900 (solid). fa-light-300.woff2 ships in /webfonts so icons still resolve. */
  font-weight: 300 !important;
}

.vx {
  width: 1.9rem;
}

/* ── 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: #dc2626 !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);
}
/* ── Round the visually-last button in each group. The common-theme rounds via
      `.tool-button:last-child`, which breaks on the standard dialog toolbar: it keeps
      mode-specific buttons (Delete, Undo, Edit, Clone…) rendered but HIDDEN after the
      visible ones. Serenity's hide() sets the `hidden` attribute (+ sometimes `.hidden`),
      so the visible last button is NOT :last-child and its right corners stay square.
      Round the last tool-button that has no *visible* tool-button after it instead.  ── */
.tool-group > .tool-button:not([hidden]):not(.hidden):not(:has(~ .tool-button:not([hidden]):not(.hidden))) {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
/* Symmetric guard for the left side, in case the first button(s) are hidden by mode. */
.tool-group > .tool-button:not([hidden]):not(.hidden):not(.tool-button:not([hidden]):not(.hidden) ~ .tool-button) {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
/* 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;
  }

  .audit-old-value {
    color: #721c24;
    background: #f8d7da;
    padding: 2px 7px;
    border-radius: var(--bs-border-radius-sm);
    border-left: 3px solid #dc3545;
    font-weight: 500;
    font-size: 0.85rem;
  }

  .audit-new-value {
    color: #155724;
    background: #d4edda;
    padding: 2px 7px;
    border-radius: var(--bs-border-radius-sm);
    border-left: 3px solid #28a745;
    font-weight: 500;
    font-size: 0.85rem;
  }

  .audit-empty-value {
    color: #6c757d;
    font-style: italic;
    opacity: 0.7;
  }

  .audit-empty-normal {
    color: #adb5bd;
    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);
    }

/* ── ProductGrid inline-edit (Task H1) ──────────────────────────
   Serenity typeInfo key: BeirutFlow.Flow.ProductGrid
   → element class: s-BeirutFlow-Flow-ProductGrid
   (spec noted s-Flow-ProductGrid — corrected to actual generated name) */
.s-BeirutFlow-Flow-ProductGrid input.edit {
  width: 100%;
  box-sizing: border-box;
}

.s-BeirutFlow-Flow-ProductGrid .dirty {
  background: #fff3cd;
}

.s-BeirutFlow-Flow-ProductGrid .apply-changes-button.disabled {
  opacity: .5;
  pointer-events: none;
}

  .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: white;
  }

  /* ── 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;
    }
  }