/* ==========================================================================
   PrymACE shared widget layer
   --------------------------------------------------------------------------
   The one stylesheet loaded by **every** layout:

       layouts/dashboard.blade.php       Bootstrap 4 + AdminLTE + prymace.css
       layouts/ops.blade.php             … + prymace-ops.css (last)
       layouts/auth.blade.php            Bootstrap 4 + AdminLTE + prymace.css
       layouts/tailwind-public.blade.php the Tailwind (Vite) build

   It exists because three of those layers cannot own widgets that appear in
   more than one of them: `prymace.css` is not loaded on public pages, the
   Tailwind build would purge `pa-*` classes it does not define, and
   `prymace-ops.css` is scoped to the console. Anything that must look the same
   on a dashboard page and a public page lives here.

   Two rules for adding to this file:

     1. **All four layouts must not already style it.** If a class is only ever
        used in the dashboard, it belongs in `prymace.css`.
     2. **Read every token with a fallback** — `var(--pa-brand, #017FE4)` — so
        the file does not depend on a `:root` that three of the four layouts
        never load.

   Load order: after the layout's own layer, so these rules win on source order.
   Nothing here is scoped to `.pa-ops`, and nothing overrides a `pa-*` component
   that a single layout owns.
   ========================================================================== */

/* ==========================================================================
   1. Paginator
   --------------------------------------------------------------------------
   Registered as the app's default paginator in AppServiceProvider
   (`pagination::pa`, view resources/views/vendor/pagination/pa.blade.php), so a
   bare `$items->links()` renders this in every layout. It replaces Laravel's
   stock views, which were the problem: the dashboard renders Bootstrap 4 +
   prymace.css, so the Tailwind default was completely unstyled there (bare,
   oversized links), and `pagination::bootstrap-4` was stylistically unrelated
   to the `pa-*` components it sat under.
   ========================================================================== */

.pa-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pa-space-3, 0.75rem);
    /* Full width so the summary stays left and the links stay right even when
       the call site wraps this in a centring flex container (the `d-flex
       justify-content-center` wrappers the old Bootstrap paginator needed). */
    width: 100%;
    padding: var(--pa-space-3, 0.75rem) var(--pa-space-4, 1rem);
    font-family: var(--pa-font, Figtree, "Segoe UI", system-ui, -apple-system, sans-serif);
    font-size: var(--pa-text-xs, 0.75rem);
    color: var(--pa-muted, #6c757d);
    line-height: 1;
}

.pa-pagination__summary {
    margin: 0;
    font-size: var(--pa-text-xs, 0.75rem);
    color: var(--pa-muted, #6c757d);
    white-space: nowrap;
}

.pa-pagination__summary strong {
    font-weight: var(--pa-weight-semibold, 600);
    color: var(--pa-ink, #1c2733);
}

.pa-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}

/* Reset the UA/Bootstrap list markers that made the old paginator look wrong. */
.pa-pagination__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border: 1px solid var(--pa-line, #dee2e6);
    border-radius: var(--pa-radius-sm, 6px);
    background: var(--pa-surface, #ffffff);
    color: var(--pa-text, #333333);
    font-size: var(--pa-text-xs, 0.75rem);
    font-weight: var(--pa-weight-medium, 500);
    line-height: 1;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

a.pa-pagination__link:hover,
a.pa-pagination__link:focus {
    background: var(--pa-brand-050, #e8f4fe);
    border-color: var(--pa-brand-100, #cfe7fb);
    color: var(--pa-brand-700, #01539c);
    text-decoration: none;
}

.pa-pagination__link.is-active {
    background: var(--pa-brand, #017FE4);
    border-color: var(--pa-brand, #017FE4);
    color: #ffffff;
    font-weight: var(--pa-weight-semibold, 600);
    cursor: default;
}

.pa-pagination__link.is-disabled {
    color: var(--pa-muted, #6c757d);
    background: var(--pa-surface-alt, #f8f9fa);
    opacity: 0.6;
    cursor: not-allowed;
}

.pa-pagination__gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.9rem;
    color: var(--pa-muted, #6c757d);
}

/* ==========================================================================
   2. Notices (flash + validation summary)
   --------------------------------------------------------------------------
   `x-pa.notices` renders these, and all four layouts include it. It replaces
   the dashboard-only copy of this markup: public pages previously showed no
   confirmation after a successful form submission and no summary of validation
   errors, so the same action gave feedback in the console and silence on the
   public site.

   Class names match the dashboard's `.pa-alert` family, which is defined in
   `prymace.css`. These definitions are deliberately the same shape so an alert
   looks identical in either layer; `prymace.css` keeps its copy because a
   dashboard page may render an alert inside a component without the shared
   layer's markup, and both are loaded there with the shared layer last.
   ========================================================================== */

.pa-notice-stack {
    display: flex;
    flex-direction: column;
    gap: var(--pa-space-3, 0.75rem);
    margin-bottom: var(--pa-space-5, 1.5rem);
}

.pa-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--pa-space-3, 0.75rem);
    padding: var(--pa-space-3, 0.75rem) var(--pa-space-4, 1rem);
    border: 1px solid transparent;
    border-radius: var(--pa-radius-sm, 6px);
    font-family: var(--pa-font, Figtree, "Segoe UI", system-ui, -apple-system, sans-serif);
    font-size: var(--pa-text-sm, 0.8125rem);
    line-height: 1.5;
}

.pa-notice > i {
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

.pa-notice__body {
    min-width: 0;
}

.pa-notice__title {
    display: block;
    font-weight: var(--pa-weight-semibold, 600);
    margin-bottom: 0.15rem;
}

.pa-notice__list {
    margin: 0;
    padding-left: 1.1rem;
}

/* The notice tones read their colours from the theme tokens, with a light
   fallback — this file is loaded by layouts that do not declare `:root`
   (public, auth), so it must stand alone, and it is loaded by layouts that do
   (dashboard, console), so it must follow their theme. Literal light colours
   here were the one part of this layer that stayed light in dark mode. */
.pa-notice--success { background: var(--pa-success-050, #e8f6ec); border-color: var(--pa-success-border, #bfe6c9); color: var(--pa-success-ink, #1c7c33); }
.pa-notice--warning { background: var(--pa-warning-050, #fdf6e3); border-color: var(--pa-warning-border, #f0dfae); color: var(--pa-warning-ink, #8a6800); }
.pa-notice--danger  { background: var(--pa-danger-050, #fdecea);  border-color: var(--pa-danger-border, #f5c6c0);  color: var(--pa-danger-ink, #b3342a); }
.pa-notice--info    { background: var(--pa-info-050, #e9f6f8);    border-color: var(--pa-info-border, #b8e2ea);    color: var(--pa-info-ink, #0f6f7f); }
.pa-notice--brand   { background: var(--pa-brand-050, #e8f4fe); border-color: var(--pa-brand-100, #cfe7fb); color: var(--pa-brand-700, #01539c); }

/* ==========================================================================
   3. Responsive / print
   ========================================================================== */

/* Below the small breakpoint the paginator captions cost more than they
   explain. */
@media (max-width: 575.98px) {
    .pa-pagination {
        justify-content: center;
        padding: var(--pa-space-3, 0.75rem);
    }

    .pa-pagination__summary {
        width: 100%;
        text-align: center;
    }

    .pa-pagination__list {
        margin: 0;
        justify-content: center;
    }

    .pa-pagination__caption {
        display: none;
    }
}

@media print {
    .pa-pagination,
    .pa-notice-stack {
        display: none;
    }
}