/* =============================================================================
 * ChefStack Design System - Layer 4: Legacy bridge
 * =============================================================================
 * Quarantine for everything needed to make the inherited NobleUI template
 * (demo_1/style.css, dashboard-style.css, custom.css) agree with the design
 * system. Those files load first and lean on !important and inline styles, so
 * overriding them needs equal force.
 *
 * Rules of the road for this file:
 *   - Nothing here introduces new visual language; it only re-points legacy
 *     selectors at design tokens.
 *   - Every block says which legacy rule it is countering, so this file can be
 *     shrunk as the old CSS is retired.
 *   - New components never target this file. They go in components.css.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Duplicated sort indicators
 * -----------------------------------------------------------------------------
 * custom.css drew a FontAwesome up arrow (:before) AND a down arrow (:after)
 * on every sortable header at 13px, so each column showed two glyphs. Those
 * rules have been deleted at source; components.css now supplies the single
 * 4px caret. What is left to counter is web/css/site.css, which still draws a
 * 7px triangle for Yii's own asc/desc classes on non-sortable grids.
 * -------------------------------------------------------------------------- */
.grid-view:not(.grid-view-sortable) th a.asc::after,
.grid-view:not(.grid-view-sortable) th a.desc::after {
  border-width: 4px !important;
  margin-left: 0 !important;
}

.grid-view:not(.grid-view-sortable) th a.asc::after {
  border-top-width: 0 !important;
  border-bottom: 4px solid var(--cs-primary) !important;
}

.grid-view:not(.grid-view-sortable) th a.desc::after {
  border-bottom-width: 0 !important;
  border-top: 4px solid var(--cs-primary) !important;
}

/* -----------------------------------------------------------------------------
 * 2. Heavy borders
 * -----------------------------------------------------------------------------
 * custom.css sets `border: 4px solid #495057 !important` on active category
 * cards (twice). The portal uses a single hairline everywhere.
 * -------------------------------------------------------------------------- */
.category-card,
.category-card.active,
.category-card.active:focus,
.category-card.active:focus-visible,
.category-card.active:focus-within,
.category-card.active[style*="border"],
.category-card.active[style*="outline"] {
  border-width: var(--cs-border-width) !important;
  border-style: solid !important;
  border-radius: var(--cs-radius-surface) !important;
}

.category-card {
  background: var(--cs-surface) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}

.category-card:hover {
  border-color: var(--cs-primary-border) !important;
  background: var(--cs-surface-hover) !important;
}

/* Selected state reads through colour, not a thick rule. */
.category-card.active,
.category-card.active.bg-success,
.category-card.active.text-success {
  background: var(--cs-primary-soft) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.category-card.active:focus-visible {
  box-shadow: var(--cs-focus-ring) !important;
}

/* -----------------------------------------------------------------------------
 * 3. Legacy "theme" colour
 * -----------------------------------------------------------------------------
 * dashboard-style.css defined --theme-color as #e92d28 (a bright red) and used
 * it for the search submit button, top-bar badges and link hovers. Red is
 * reserved for deletion, so that file's :root block has been repointed at the
 * design tokens at source - there is no variable mapping to repeat here.
 * What remains below is the handful of rules in that file whose *geometry*
 * (not just colour) disagrees with the system.
 * -------------------------------------------------------------------------- */
.top-bar {
  background: var(--cs-surface-subtle) !important;
  border-bottom: var(--cs-border-width) solid var(--cs-border) !important;
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
}
.top-bar .badge { background: var(--cs-primary-soft) !important; color: var(--cs-primary-text) !important; }
.top-links a { color: var(--cs-text-muted); font-size: var(--cs-text-base); }
.top-links a:hover { color: var(--cs-primary) !important; }

/* -----------------------------------------------------------------------------
 * 4. Search controls
 * -----------------------------------------------------------------------------
 * Nothing to counter any more. The nine hand-rolled search bars that hardcoded
 * `border-radius: 10px 0 0 10px` inline now render from
 * views/_shared/_search_bar.php, and the modal filters from _filter_input.php,
 * so the design system styles them directly (see the Search section of
 * components.css). This note is left as a marker: if inline search styles
 * reappear, fix the partial rather than adding overrides here.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 5. Card / surface geometry from the template
 * -----------------------------------------------------------------------------
 * demo_1/style.css and custom.css scatter 8px and 12px radii plus their own
 * shadows. Collapse them onto the two surface radii.
 * -------------------------------------------------------------------------- */
.recipe-card,
.stat-card,
.info-card,
.dashboard-card {
  border: var(--cs-border-width) solid var(--cs-border) !important;
  border-radius: var(--cs-radius-surface) !important;
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  transition: box-shadow var(--cs-transition-base), border-color var(--cs-transition-base) !important;
}

/* The template lifted cards 8px on hover over 0.7s - far too much travel. */
.recipe-card:hover,
.stat-card:hover,
.dashboard-card:hover {
  transform: none !important;
  border-color: var(--cs-primary-border) !important;
  box-shadow: var(--cs-shadow-md) !important;
}

/* -----------------------------------------------------------------------------
 * 6. Inline image sizing in grids
 * -----------------------------------------------------------------------------
 * Row thumbnails carry inline width/height/opacity. Normalise to one token
 * treatment so recipe, product and ingredient tables match.
 * -------------------------------------------------------------------------- */
/* The :not() excludes an image that has fallen back to the placeholder. This
   selector is (0,2,1) and beats components.css's img[data-placeholder-applied]
   at (0,1,1), so without the exclusion a missing thumbnail would be cropped
   like a photo - which defeats a placeholder built to fit any frame. */
img.recipe-img[style]:not([data-placeholder-applied]),
img.ingredient-img[style]:not([data-placeholder-applied]),
img.recipe-thumbnail[style]:not([data-placeholder-applied]) {
  width: 40px !important;
  height: 40px !important;
  opacity: 1 !important;
  border-radius: var(--cs-radius-control) !important;
  object-fit: cover !important;
}

/* The placeholder keeps the frame's geometry but not the cropping. */
img.recipe-img[data-placeholder-applied],
img.ingredient-img[data-placeholder-applied],
img.recipe-thumbnail[data-placeholder-applied] {
  opacity: 1 !important;
  border-radius: var(--cs-radius-control) !important;
  object-fit: fill !important;
}

/* -----------------------------------------------------------------------------
 * 7. Dark-theme coverage for template surfaces
 * -----------------------------------------------------------------------------
 * The template hardcodes white/near-white backgrounds in dozens of places.
 * These are the containers that would otherwise stay white in dark mode.
 * -------------------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .grid-view,
html[data-theme="dark"] .table,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
/* `.nav-tabs` is deliberately NOT in this list. The strip is transparent by
   design, and painting it --cs-surface here is the active tab chip's own fill:
   the selected tab would disappear into its own background in dark mode. Tabs
   are owned entirely by ds/components.css. */
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well {
  background-color: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
  background-color: var(--cs-surface-subtle) !important;
  color: var(--cs-text-muted) !important;
  border-color: var(--cs-border) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--krajee-bs4 .select2-selection,
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border-strong) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--cs-surface-subtle) !important; }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .text-secondary { color: var(--cs-text-muted) !important; }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--cs-text) !important; }

/* Template utility text colours that assume a light page. */
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .recipe-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dashboard-card { background: var(--cs-surface) !important; color: var(--cs-text) !important; }

html[data-theme="dark"] .swal2-popup { background: var(--cs-surface) !important; color: var(--cs-text) !important; }

html[data-theme="dark"] .dropify-wrapper { background: var(--cs-surface) !important; color: var(--cs-text) !important; border-color: var(--cs-border-strong) !important; }

/* Images and charts should not glare on a dark page. */
html[data-theme="dark"] img.cs-dim-on-dark { filter: brightness(0.9) contrast(1.05); }

/* -----------------------------------------------------------------------------
 * 8. Bootstrap contextual utilities
 * -----------------------------------------------------------------------------
 * `.bg-*` and `.text-*` are used as status colouring across the grids. Point
 * them at the system palette so a "success" cell matches a success badge.
 * -------------------------------------------------------------------------- */
.text-primary { color: var(--cs-primary-text) !important; }
.text-info { color: var(--cs-secondary-text) !important; }
.text-success { color: var(--cs-tertiary-text) !important; }
.text-warning { color: var(--cs-warning-text) !important; }
.text-danger { color: var(--cs-danger-text) !important; }

.bg-primary { background-color: var(--cs-primary) !important; color: var(--cs-on-primary) !important; }
.bg-secondary { background-color: #c3c5c7 !important; }
.bg-info { background-color: var(--cs-secondary) !important; color: var(--cs-on-secondary) !important; }
.bg-success { background-color: var(--cs-tertiary) !important; color: var(--cs-on-tertiary) !important; }
.bg-warning { background-color: var(--cs-warning) !important; color: var(--cs-on-warning) !important; }
.bg-danger { background-color: var(--cs-danger) !important; color: var(--cs-on-danger) !important; }

/* Soft variants keep tables readable when a whole cell is tinted. */
.bg-primary-soft { background-color: var(--cs-primary-soft) !important; color: var(--cs-primary-text) !important; }
.bg-success-soft { background-color: var(--cs-tertiary-soft) !important; color: var(--cs-tertiary-text) !important; }
.bg-warning-soft { background-color: var(--cs-warning-soft) !important; color: var(--cs-warning-text) !important; }
.bg-danger-soft { background-color: var(--cs-danger-soft) !important; color: var(--cs-danger-text) !important; }

/* -----------------------------------------------------------------------------
 * 9. Global loader
 * -------------------------------------------------------------------------- */
.global-loader-overlay { background: color-mix(in srgb, var(--cs-canvas) 72%, transparent) !important; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .global-loader-overlay { background: rgba(248, 250, 252, 0.78) !important; }
}