/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.trix-content, trix-editor {
    ul, ol {
        margin: 1rem 0 1rem 1rem;
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }
}

/* Signup honeypot (app/views/sign_ups/new.html.erb). Parked off-screen at 1x1px
   rather than display:none, because some form-filling bots skip display:none
   inputs and this one is meant to be filled by them. It carries aria-hidden and
   tabindex="-1" in the markup, so it is unreachable by screen readers and by the
   keyboard regardless of what the CSS does -- the CSS only handles the SIGHTED
   mouse user. Lives in this plain, unlayered Propshaft file (not as Tailwind
   utilities) so it cannot be lost to a missed Tailwind rebuild: a honeypot that
   silently becomes VISIBLE would show a real customer a field telling them to
   leave it empty.

   ⛔ THE CLASS NAME IS DELIBERATELY INERT. It was `signup-honeypot`, which told
   any scraper that read the HTML exactly which field to leave alone -- the one
   thing this field must not let it do. Do not rename it back to anything
   self-describing. */
.form-aux-slot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hide the scrollbar on scroll-snap carousels (photo gallery): navigation is via
   the prev/next arrows + swipe, and position is shown by the "Photo X of Y" counter. */
.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Admin sidebar (Administrate gem default) touch targets: the gem's
   .navigation__link (line-height:1 + 0.6em padding, ~35px) and the
   "Back to app" .button--nav (~40px) both sit under the 44px Apple HIG
   minimum (touch-target-standard). Loaded after Administrate's own
   stylesheet (see admin/application/_stylesheet), so no !important needed. */
.navigation__link,
.button--nav {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
}

/* Admin sidebar group toggles (t297/t300): every collapsible group header --
   top-level (Trust & Safety, Catalog, ...) AND nested sub-groups (Cases /
   Members / Content / Signals) -- shares ONE format via the _nav_group
   partial: Administrate's own blue action button (components/_buttons.scss
   paints every bare <button> $action-color #1976d2 with white text and a
   darker-blue hover -- exactly the "blue group button" Mark asked to keep),
   plus the layout below. The layout MUST live here, not in Tailwind
   utilities on the button: the Tailwind v4 build is cascade-layered
   (@layer utilities) and unlayered gem CSS beats layered utilities on any
   element Administrate styles, so flex/w-full/uppercase/px-* utilities on
   these buttons silently never applied. This file is plain unlayered CSS
   loaded after the gem's, so class specificity wins here. */
.navigation__group {
    margin-top: 1rem;
}
/* Nested sub-groups: same button format, just a subtle indent + tighter
   rhythm to show hierarchy (one level, Trust & Safety's Cases / Members /
   Content / Signals). The indent is on the wrapper so the sub-group's links
   indent with it. */
.navigation__group .navigation__group {
    margin-top: 0.25rem;
    padding-left: 1.5rem;
}
.navigation__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px; /* touch-target-standard, same as .navigation__link above */
    text-align: left;
}

/* Chartkick chart placeholder (t307). Chartkick's default placeholder <div>
   ships an inline `style="height:300px; ..."` ATTRIBUTE, which the t250-enforced
   CSP blocks (style-src carries a nonce, so unsafe-inline is ignored for style
   attributes -- see config/initializers/chartkick.rb, which swaps that inline
   style for this class). This reproduces Chartkick's own placeholder look:
   the 300px reserved height (its default), centered muted "Loading..." text,
   until Chart.js paints the real canvas over it. Charts are admin-only in this
   app (app/views/admin/stats), and this file is loaded on those pages via the
   admin _stylesheet partial (stylesheet_link_tag :app). */
.chartkick-chart {
    height: 300px;
    width: 100%;
    text-align: center;
    line-height: 300px;
    color: #999;
    font-size: 14px;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
}