/* ==========================================================================
   Purple Pear Pallets - theme
   --------------------------------------------------------------------------
   Single source of truth for the site's colours and breakpoints.

   The site had grown six near-identical purples (#7a6ad8, #7b6ad8, #6a5acd,
   #4b0082, #7e65d3, #6f42c1) scattered across seven stylesheets, so the same
   element could be a slightly different shade on two pages. Those literals now
   point at the variables below - change a value here and it changes everywhere.

   Loaded first in templates/layout/default.php so the variables exist before
   any stylesheet uses them.
   ========================================================================== */

:root {
    /* ---- Brand purple (soft lavender) ---- */
    --pp-purple: #7565D5;          /* primary: buttons, links, active nav.
                                       Darkened from #8B7BE8 so white text on
                                       this background clears WCAG AA
                                       (4.61:1, was 3.44:1).             */
    --pp-purple-dark: #6F5FD0;     /* hover/pressed, and text on pale purple   */
    --pp-purple-deep: #4A3F8F;     /* headings and high-contrast accents       */
    --pp-purple-soft: #A99CEF;     /* disabled states, subtle icons            */

    /* ---- Purple tints, for backgrounds ---- */
    --pp-tint: #F4F2FE;            /* page/section wash                        */
    --pp-tint-strong: #E9E5FB;     /* hovered rows, selected chips             */
    --pp-border: #DED9F5;          /* borders and dividers on tinted surfaces  */

    /*
     * ---- Names below moved here from public-refresh.css ----
     * That file used to declare its own :root. Because it loads after this one,
     * its --pp-purple silently won and the lavender above would never have
     * shown up. Values are unchanged apart from the purple, so the public
     * pages keep their existing look.
     */
    --pp-ink: #17131d;             /* body text                                */
    --pp-ink-soft: #33283e;
    --pp-muted: #666b61;           /* secondary text, help text                */
    --pp-white: #ffffff;
    --pp-surface: #f7f8f5;         /* warm off-white page background           */
    --pp-line: #e2e3dc;            /* dividers on neutral surfaces             */
    --pp-green: #2f7d5c;           /* sustainability accent                    */
    --pp-green-dark: #1f5d44;
    --pp-timber: #b8874d;          /* timber/pallet accent                     */
    --pp-shadow: 0 18px 46px rgba(23, 19, 29, 0.14);

    /* ---- Status ---- */
    --pp-success: #2E9E63;
    --pp-warning: #C8801B;
    --pp-danger: #C0392B;

    /* ---- Elevation ---- */
    --pp-shadow-sm: 0 2px 8px rgba(38, 27, 70, 0.08);
    --pp-shadow-md: 0 8px 24px rgba(38, 27, 70, 0.12);
    --pp-shadow-lg: 0 14px 40px rgba(38, 27, 70, 0.16);

    /* ---- Shape ---- */
    --pp-radius-sm: 8px;
    --pp-radius-md: 12px;
    --pp-radius-lg: 18px;

    /* ----------------------------------------------------------------------
       Breakpoints, for reference. CSS cannot use variables inside a media
       query, so these are documentation for the values to type - not something
       @media can read. The site had ~27 ad-hoc widths; new work should stick to
       these four, which line up with the Bootstrap 4 grid already in use.

         --pp-bp-sm:  576px   phones
         --pp-bp-md:  768px   tablets
         --pp-bp-lg:  992px   small laptops
         --pp-bp-xl: 1200px   desktops
       ---------------------------------------------------------------------- */
}

/* --------------------------------------------------------------------------
   Focus visibility

   Several components removed outlines without putting anything back, which
   makes the site unusable by keyboard. This restores a visible, on-brand ring
   only for keyboard users, so it does not add rings to mouse clicks.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--pp-purple);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Small shared helpers
   -------------------------------------------------------------------------- */

/* Visually hidden, but still announced by screen readers. */
.pp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Global responsive guards

   These fix problems that showed up on phones across many pages, rather than
   in one component.
   -------------------------------------------------------------------------- */

/* Nothing should be able to force the page sideways. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media and embeds stay inside their container. */
img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

@media (max-width: 768px) {
    /* Wide tables scroll on their own instead of stretching the page. */
    .table-responsive,
    .pp-scroll-x {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    /* Long words and URLs wrap rather than overflowing. */
    p,
    td,
    th,
    li,
    dd,
    .card,
    .card-body {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 576px) {
    /*
     * iOS zooms the page in when a focused input's font is under 16px, which
     * then leaves the layout scrolled sideways. Keeping form text at 16px
     * avoids it entirely.
     */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /*
     * Touch targets. 44px is the size Apple and the WCAG 2.2 target-size
     * guidance both settle on.
     */
    .btn,
    button,
    [role="button"],
    .nav-link,
    .pagination .page-link {
        min-height: 44px;
    }

    /* Stacked buttons should fill the width rather than sit half-off screen. */
    .btn-block-sm {
        display: block;
        width: 100%;
    }
}

/* Keep the affordance visible on every native select, including legacy
   .form-control selects whose Bootstrap arrow is lost to page overrides. */
select.form-control,
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--pp-white, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e1141' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem !important;
}

/* Keep every table status readable as one complete line. Responsive table
   wrappers can scroll horizontally instead of clipping or splitting labels. */
.table td .status-badge,
.table td .award-status,
.table td [class*="status-badge--"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    height: auto;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-wrap: normal;
    text-overflow: clip !important;
}

.table td:has(.status-badge),
.table td:has(.award-status),
.table td.status-cell {
    min-width: 110px;
    width: 1%;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.table td.status-cell .badge {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

/* ==========================================================================
   Shared confirmation modals
   --------------------------------------------------------------------------
   .confirm-modal is the base look (card, header, body, footer) used by any
   "are you sure?" dialog, in place of every page pasting its own modal
   markup + CSS, or worse, just using the plain browser confirm() popup.
   One definition here means one look everywhere.

   .confirm-delete-modal is a variant for permanent/destructive actions
   (red Confirm button) - see templates/element/confirm_delete_modal.php,
   used by Manage Users, Content Blocks, Orders, Pallet Management.

   .confirm-modal--primary is a variant for non-destructive confirmations
   (e.g. toggling a record active/inactive) - see
   templates/element/confirm_action_modal.php, used by Award Management.
   ========================================================================== */
.confirm-modal .modal-content {
    border: none;
    border-radius: var(--pp-radius-md);
    box-shadow: var(--pp-shadow-lg);
}

.confirm-modal .modal-header {
    border-bottom: 1px solid var(--pp-line);
}

.confirm-modal .modal-title {
    color: var(--pp-ink);
    font-weight: 700;
}

.confirm-modal .modal-body p {
    color: var(--pp-ink-soft);
    margin-bottom: 0;
}

.confirm-modal .confirm-actor {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-sm);
    font-size: 13px;
    color: var(--pp-muted);
}

.confirm-modal .modal-footer {
    border-top: 1px solid var(--pp-line);
}

.confirm-delete-modal .btn-danger {
    background: var(--pp-danger);
    border-color: var(--pp-danger);
}

.confirm-delete-modal .btn-danger:hover,
.confirm-delete-modal .btn-danger:focus {
    background: #a5301f;
    border-color: #a5301f;
}

.confirm-modal--primary .btn-primary {
    background: var(--pp-purple);
    border-color: var(--pp-purple);
}

.confirm-modal--primary .btn-primary:hover,
.confirm-modal--primary .btn-primary:focus {
    background: var(--pp-purple-dark);
    border-color: var(--pp-purple-dark);
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}