/* ============================================================
   CrowdCanvas — Shared Components (Phase 7 UI consistency pass)

   Purpose: One shared source of truth for action (button/link)
            treatment, spacing/layout baselines, and practical
            responsive behavior across admin, account, order,
            invite, operator, upload, audit, and wall surfaces.
            Import AFTER colors_and_type.css so it can build on
            the design tokens defined there.

   Inputs:  CSS custom properties (colors, type, spacing, radii,
            shadows, motion) declared in colors_and_type.css.
   Outputs: `.btn` action system, `.action-link` / `.back-link`
            navigation conventions, layout/spacing helpers, and
            responsive rules keyed to the shared page-shell class
            vocabulary (`.console`, `.card`, `.container`,
            `.top-bar`, tables).
   Dependencies: colors_and_type.css. No JS. No bundler.

   Scope note: This pass standardizes the existing visual
   language rather than introducing a new brand/design system.
   It deliberately reuses the class names already present in the
   page shells so existing markup converges without per-page
   rewrites.
   ============================================================ */

/* ------------------------------------------------------------
   1. ACTION SYSTEM — buttons and button-styled links

   Canonical convention (matches the operator console, the most
   complete existing button set):

     <button class="btn primary">…</button>   primary action
     <button class="btn default">…</button>   neutral action
     <button class="btn danger">…</button>    destructive action
     <a      class="btn ghost">…</a>           low-emphasis action
     <button class="btn secondary">…</button>  outlined alt action

   Hyphenated aliases (.btn-primary / .btn-secondary /
   .btn-danger) are also honored so pages that already used that
   form render identically without markup churn.
   ------------------------------------------------------------ */

.btn,
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active { transform: translateY(1px); }

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary — filled punch with the brand stamp shadow. */
.btn.primary,
.btn-primary {
    background: var(--punch);
    color: var(--paper);
    border-color: var(--punch);
    box-shadow: var(--shadow-stamp);
}
.btn.primary:hover,
.btn-primary:hover { background: var(--punch-deep); border-color: var(--punch-deep); }

/* Default — neutral, ink-outlined on light surfaces. */
.btn.default {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}
.btn.default:hover { background: var(--paper-2); }

/* Secondary — outlined accent (used by account/admin pages). */
.btn.secondary,
.btn-secondary {
    background: transparent;
    color: var(--punch-deep);
    border-color: var(--punch);
}
.btn.secondary:hover,
.btn-secondary:hover { background: var(--punch-soft); }

/* Danger — destructive, outlined until hover. */
.btn.danger,
.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.btn.danger:hover,
.btn-danger:hover { background: var(--danger); color: var(--paper); }

/* Ghost — lowest emphasis, no chrome. */
.btn.ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: transparent;
    padding: 10px 14px;
}
.btn.ghost:hover { color: var(--ink); }

/* Size + width helpers. */
.btn.block,
.btn--block { width: 100%; }
.btn.small,
.btn--small { padding: 8px 14px; min-height: 34px; font-size: var(--type-2xs); }

/* ------------------------------------------------------------
   2. NAVIGATION LINKS — consistent text/utility links

   `.action-link`  — inline mono utility link (table actions,
                     row links, "manage" style affordances).
   `.back-link` / `.role-tag` — top-bar navigation chrome shared
                     across console pages.
   ------------------------------------------------------------ */

.action-link {
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--punch-deep);
    text-decoration: none;
}
.action-link:hover { color: var(--punch); text-decoration: underline; }

/* ------------------------------------------------------------
   3. SPACING / LAYOUT BASELINE

   A light, shared reset plus overflow guards so the existing
   page shells stop overlapping at constrained widths. These
   rules intentionally use the class names already present in the
   shells (`.console`, `.card`, `.container`, `.top-bar`) so they
   apply everywhere without markup changes.
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* Long unbroken tokens (event tokens, URLs) must not push a
   layout wider than its container on any surface. */
.token, code, kbd { overflow-wrap: anywhere; word-break: break-word; }

/* Top bars should never let title/actions collide; allow wrap
   and keep a consistent gap on every console page. */
.top-bar { flex-wrap: wrap; row-gap: var(--space-3); }

/* Tables in the console surfaces can be wider than a narrow
   viewport; let them scroll horizontally instead of forcing the
   page to overflow and overlap. */
.events-table,
table.events-table { width: 100%; }

/* ------------------------------------------------------------
   3b. SESSION LOGOUT / ACCESS-CONTEXT EXIT  (Phase 11)

   One standardized treatment for the logout / exit controls
   added to every authenticated shell. `.session-logout` is the
   session sign-out action (company + customer); it uses the
   punch accent so it reads as a deliberate, distinct control.
   `.session-exit` is the operator capability *exit* — neutral
   styling that distinguishes "Exit operator view" from a true
   session "Log out". Both share the pill chrome of `.role-tag`
   so they sit cleanly inside existing top-bar action clusters.
   ------------------------------------------------------------ */
.session-logout,
.session-exit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: transparent;
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
.session-logout {
    border: 1px solid var(--punch);
    color: var(--punch);
}
.session-logout:hover {
    background: var(--punch);
    color: var(--paper);
}
.session-exit {
    border: 1px solid var(--paper-line);
    color: var(--ink-2);
}
.session-exit:hover {
    color: var(--ink);
    border-color: var(--ink);
}
.session-logout[disabled],
.session-exit[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ------------------------------------------------------------
   4. RESPONSIVE / MOBILE BASELINE  (Phase 7.2)

   Practical breakpoints — not a full mobile redesign. Goal:
   primary actions and text stay readable with no horizontal
   overlap at narrow widths.
   ------------------------------------------------------------ */

/* Tablet / small-laptop: trim the generous console padding so
   content keeps breathing room without wasting width.

   NOTE: each page links this file in <head> and then declares its
   own inline <style> AFTER it, so per-page rules win on equal
   specificity. These responsive overrides therefore use a slightly
   higher-specificity selector (`html body`, `body .console`, …) so
   they reliably take effect at narrow widths regardless of the
   per-page base rules they are correcting. */
@media (max-width: 768px) {
    html body { padding: 16px; }

    body .console {
        max-width: 100%;
        padding: 24px 20px 36px;
        border-radius: var(--radius-md);
    }

    body .card { padding: 28px 24px; }
}

/* Phone: stack top bars, full-width primary actions, and make
   wide data tables scroll inside their own region rather than
   overflowing the page. */
@media (max-width: 560px) {
    html body { padding: 12px; }

    body .console { padding: 20px 16px 28px; }
    body .card { padding: 22px 18px; }
    body .container { max-width: 100%; }

    body .top-bar {
        align-items: flex-start;
        gap: var(--space-3);
    }

    /* Action clusters go full width and stack so labels do not
       crowd or overlap on a phone. */
    .top-bar-actions,
    .top-bar-actions.actions,
    .actions {
        flex-wrap: wrap;
    }

    /* Wide data tables are the main source of horizontal overflow
       on a phone. Let them scroll inside their own region instead
       of widening (and overlapping) the page. This is applied to
       tables in the shared console/card surfaces without needing a
       per-page wrapper element. An explicit `.table-scroll`
       wrapper is also honored where present. */
    .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .console table,
    .card table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Buttons that sit alone in a stacked action area read
       better full width on a phone. */
    .btn.block-mobile { width: 100%; }
}