/* ════════════════════════════════════════════════════════════════════
   AjaxPickering v5 — Design tokens
   Lake Ontario theme. All ap-* prefixed tokens are v5-system tokens.
   Legacy --color-* / --font-* tokens are still served by /theme.css
   for themes-aware components; new v5 components use --ap-*.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand colors */
    --ap-brand-blue: #003366;
    --ap-brand-green: #00C715;        /* logo only */
    --ap-brand-white: #FFFFFF;
    --ap-brand-sand: #F5C778;

    /* Blue ramp */
    --ap-blue-50:  #EFF4F9;
    --ap-blue-100: #DCE7F1;
    --ap-blue-200: #B6CBDE;
    --ap-blue-300: #87A5C0;
    --ap-blue-400: #5A82A4;
    --ap-blue-500: #2D5F88;
    --ap-blue-600: #1A4774;
    --ap-blue-700: #0A1F3D;
    --ap-blue-800: #061730;
    --ap-blue-900: #030F22;

    /* Green ramp (UI green = calmer brand) */
    --ap-green-50:  #E8F7EC;
    --ap-green-100: #C8ECD1;
    --ap-green-200: #9DDDAE;
    --ap-green-300: #6ECB87;
    --ap-green-400: #45BC64;
    --ap-green-500: #15B84A;        /* UI accent (Version B) */
    --ap-green-600: #109F3F;
    --ap-green-700: #0A7D32;
    --ap-green-800: #075F26;
    --ap-green-900: #04401A;

    /* Sand / warm */
    --ap-sand-50:  #FBF6EB;
    --ap-sand-100: #F5E9CC;
    --ap-sand-200: #EFD9A8;
    --ap-sand-300: #F5C778;
    --ap-sand-400: #ECB75D;
    --ap-sand-500: #D6A24A;
    --ap-sand-600: #B68435;
    --ap-sand-700: #8B6326;

    /* Gray */
    --ap-gray-50:  #FAFAFA;
    --ap-gray-100: #F5F5F5;
    --ap-gray-200: #E6E6E6;
    --ap-gray-300: #CCCCCC;
    --ap-gray-400: #999999;
    --ap-gray-500: #666666;
    --ap-gray-600: #4D4D4D;
    --ap-gray-700: #333333;
    --ap-gray-800: #1F1F1F;
    --ap-gray-900: #0A0A0A;

    /* Semantic */
    --ap-success: #15B84A;
    --ap-info:    #4A6F94;
    --ap-warning-fg: #B68435;
    --ap-warning-bg: #FBF6EB;
    --ap-danger-fg:  #D94B3D;
    --ap-danger-bg:  #FDEEEC;

    /* Surface */
    --ap-surface-app:    #F5F7F9;
    --ap-surface-card:   #FFFFFF;
    --ap-surface-sunken: #FAFBFC;

    /* Text */
    --ap-text-ink:   #0A1F3D;
    --ap-text-body:  #333333;
    --ap-text-muted: #666666;

    /* Border */
    --ap-border-default: #E6E6E6;
    --ap-border-strong:  #CCCCCC;

    /* Typography */
    --ap-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --ap-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --ap-weight-regular: 400;
    --ap-weight-medium:  500;
    --ap-text-small-size: 13px;

    /* Spacing scale */
    --ap-space-1:  4px;
    --ap-space-2:  8px;
    --ap-space-3:  12px;
    --ap-space-4:  16px;
    --ap-space-6:  24px;
    --ap-space-8:  32px;
    --ap-space-12: 48px;

    /* Radius */
    --ap-radius-sm:   4px;
    --ap-radius-md:   6px;
    --ap-radius-lg:   8px;
    --ap-radius-xl:   12px;
    --ap-radius-pill: 100px;

    /* Shadow */
    --ap-shadow-sm: 0 1px 2px rgba(10, 31, 61, 0.06);
    --ap-shadow-md: 0 2px 6px rgba(10, 31, 61, 0.08);
    --ap-shadow-lg: 0 6px 16px rgba(10, 31, 61, 0.12);

    /* Motion */
    --ap-transition-fast: 120ms ease;
    --ap-transition-base: 200ms ease;
}

/* v5 body styles override base */
body {
    font-family: var(--ap-font-ui);
    background: var(--ap-surface-app);
    color: var(--ap-text-body);
}

/* Inter weights — only 400 and 500 */
body, body * {
    font-weight: var(--ap-weight-regular);
}
h1, h2, h3, h4, h5, h6, strong, .ap-weight-medium {
    font-weight: var(--ap-weight-medium);
}

/* Map Bootstrap CSS vars to ap-tokens so vanilla Bootstrap components
   pick up our brand without us rewriting them all */
:root {
    --bs-primary: var(--ap-brand-blue);
    --bs-primary-rgb: 0, 51, 102;
    --bs-success: var(--ap-success);
    --bs-success-rgb: 21, 184, 74;
    --bs-info: var(--ap-info);
    --bs-warning: var(--ap-warning-fg);
    --bs-danger: var(--ap-danger-fg);
    --bs-body-bg: var(--ap-surface-app);
    --bs-body-color: var(--ap-text-body);
    --bs-border-color: var(--ap-border-default);
    --bs-border-radius: var(--ap-radius-md);
}

/* ─── Base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--ap-color-text-primary);
    background: var(--ap-color-background);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--ap-color-text-primary);
    line-height: 1.3;
    margin-top: 0;
}

a { color: var(--ap-color-accent); }
a:hover { color: var(--ap-color-primary); }

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ─── Layout primitives ────────────────────────────────────────── */
.ap-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--ap-color-primary);
    color: var(--ap-color-primary-contrast);
    padding: 8px 16px;
    z-index: 999;
}
.ap-skip-link:focus {
    top: 0;
}

.ap-header {
    background: var(--ap-color-surface);
    border-bottom: 1px solid var(--ap-color-border);
}

.ap-footer {
    background: var(--ap-color-surface);
    border-top: 1px solid var(--ap-color-border);
    color: var(--ap-color-text-secondary);
}

/* ─── Buttons (Bootstrap primary overrides) ───────────────────── */
.btn-primary {
    background-color: var(--ap-color-primary);
    border-color: var(--ap-color-primary);
    color: var(--ap-color-primary-contrast);
}
.btn-primary:hover {
    background-color: var(--ap-color-accent);
    border-color: var(--ap-color-accent);
}
.btn-outline-primary {
    color: var(--ap-color-primary);
    border-color: var(--ap-color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--ap-color-primary);
    color: var(--ap-color-primary-contrast);
}

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
    background: var(--ap-color-surface);
    border: 1px solid var(--ap-color-border);
    border-radius: var(--radius-base);
}

/* ─── Forms ────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background: var(--ap-color-surface);
    border: 1px solid var(--ap-color-border);
    color: var(--ap-color-text-primary);
    border-radius: var(--radius-base);
}
.form-control:focus {
    border-color: var(--ap-color-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ap-color-accent) 25%, transparent);
}

/* ─── Tables ───────────────────────────────────────────────────── */
.table {
    color: var(--ap-color-text-primary);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    border-color: var(--ap-color-border);
}

/* ─── Auth pages ───────────────────────────────────────────────── */
.ap-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ap-auth-card {
    background: var(--ap-color-surface);
    border: 1px solid var(--ap-color-border);
    border-radius: var(--radius-base);
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* ─── Flash messages ───────────────────────────────────────────── */
.ap-flash-zone .alert {
    border-radius: var(--radius-base);
}

/* ─── Density ──────────────────────────────────────────────────── */
.ap-public main { padding-top: 24px; padding-bottom: 24px; }

/* ─── Print ────────────────────────────────────────────────────── */
@media print {
    .ap-header, .ap-footer, nav, .ap-flash-zone {
        display: none !important;
    }
}

/* ─── Reduce motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AjaxPickering v5 — Component library
   Components used across all v5 views. Built on tokens in :root above.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Containers & layout ─────────────────────────────────────── */
.ap-container { max-width: 1180px; margin: 0 auto; padding-left: var(--ap-space-4); padding-right: var(--ap-space-4); }

/* ─── Wave motif background (used in brand-blue surfaces) ────── */
.ap-wave-bg { position: relative; overflow: hidden; }
.ap-wave-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'><path d='M0,120 Q300,40 600,120 T1200,120' stroke='%23FFFFFF' stroke-width='1.5' fill='none' opacity='0.6'/><path d='M0,160 Q300,80 600,160 T1200,160' stroke='%23FFFFFF' stroke-width='1.2' fill='none' opacity='0.5'/><path d='M0,80 Q300,160 600,80 T1200,80' stroke='%23FFFFFF' stroke-width='1' fill='none' opacity='0.35'/></svg>");
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
.ap-wave-bg > * { position: relative; z-index: 1; }

/* ─── Page header ─────────────────────────────────────────────── */
.ap-page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--ap-space-3); flex-wrap: wrap;
    margin-bottom: var(--ap-space-6);
}
.ap-page-header h1 { margin: 0 0 4px; font-size: 28px; font-weight: var(--ap-weight-medium); letter-spacing: -0.02em; color: var(--ap-text-ink); }
.ap-page-sub { margin: 0; font-size: 14px; color: var(--ap-text-muted); }
.ap-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Typography helpers ──────────────────────────────────────── */
.ap-display { font-size: 36px; font-weight: var(--ap-weight-medium); line-height: 1.1; letter-spacing: -0.025em; color: var(--ap-text-ink); }
.ap-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--ap-weight-medium); color: var(--ap-text-muted); }
.ap-text-muted { color: var(--ap-text-muted); }
.ap-mb-3 { margin-bottom: var(--ap-space-3); }

/* ─── Breadcrumb ──────────────────────────────────────────────── */
.ap-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; font-size: 12px; color: var(--ap-text-muted);
    margin-bottom: var(--ap-space-3);
}
.ap-breadcrumb a { color: var(--ap-text-muted); text-decoration: none; }
.ap-breadcrumb a:hover { color: var(--ap-text-body); }
.ap-breadcrumb-sep { color: var(--ap-text-muted); font-size: 14px; opacity: 0.7; }
.ap-breadcrumb-current { color: var(--ap-text-body); font-weight: var(--ap-weight-medium); }

/* ─── Cards ───────────────────────────────────────────────────── */
.ap-card {
    background: var(--ap-surface-card);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-4);
}
.ap-card-header {
    padding: var(--ap-space-3) var(--ap-space-4);
    border-bottom: 1px solid var(--ap-border-default);
    font-size: 13px;
    font-weight: var(--ap-weight-medium);
    color: var(--ap-text-ink);
}
.ap-card-body { padding: var(--ap-space-4); }

/* ─── Stat cards ──────────────────────────────────────────────── */
.ap-stat-card {
    background: var(--ap-surface-card);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-4);
}
.ap-stat-card.warning { border-color: var(--ap-warning-fg); }
.ap-stat-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ap-text-muted); font-weight: var(--ap-weight-medium); margin-bottom: 6px; }
.ap-stat-card-value { font-size: 26px; font-weight: var(--ap-weight-medium); color: var(--ap-text-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.ap-stat-card-delta { font-size: 12px; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; }
.ap-stat-card-delta.up { color: var(--ap-success); }
.ap-stat-card-delta.flat { color: var(--ap-text-muted); }

/* ─── Quick actions ───────────────────────────────────────────── */
.ap-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Empty states ────────────────────────────────────────────── */
.ap-empty {
    background: var(--ap-surface-card);
    border: 1px dashed var(--ap-border-default);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-12) var(--ap-space-6);
    text-align: center;
}
.ap-empty-icon { font-size: 40px; color: var(--ap-text-muted); opacity: 0.6; display: block; margin: 0 auto var(--ap-space-3); }
.ap-empty-title { font-size: 16px; font-weight: var(--ap-weight-medium); color: var(--ap-text-ink); margin-bottom: 6px; }
.ap-empty-sub { font-size: 13px; color: var(--ap-text-muted); margin-bottom: var(--ap-space-3); }

/* ─── Badges & pills ──────────────────────────────────────────── */
.ap-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--ap-radius-sm);
    font-size: 11px; font-weight: var(--ap-weight-medium);
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4;
}
.ap-badge-news { background: var(--ap-blue-100); color: var(--ap-blue-700); border: 1px solid var(--ap-blue-200); }
.ap-badge-event { background: var(--ap-green-50); color: var(--ap-green-700); border: 1px solid var(--ap-green-200); }
.ap-badge-listing { background: var(--ap-sand-100); color: var(--ap-sand-700); border: 1px solid var(--ap-sand-200); }
.ap-badge-verified { background: rgba(255,255,255,0.95); color: var(--ap-green-700); border: 1px solid var(--ap-green-300); }

.ap-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--ap-radius-pill);
    font-size: 11px; font-weight: var(--ap-weight-medium);
    line-height: 1.4;
}
.ap-pill.active, .ap-pill.published { background: var(--ap-green-50); color: var(--ap-green-700); border: 1px solid var(--ap-green-200); }
.ap-pill.pending { background: var(--ap-sand-100); color: var(--ap-sand-700); border: 1px solid var(--ap-sand-200); }
.ap-pill.archived { background: var(--ap-gray-100); color: var(--ap-text-muted); border: 1px solid var(--ap-gray-200); }

/* ─── Tabs ────────────────────────────────────────────────────── */
.ap-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ap-border-default); margin-bottom: var(--ap-space-6); }
.ap-tab {
    padding: 10px 16px; font-size: 14px; font-weight: var(--ap-weight-medium);
    color: var(--ap-text-muted); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
}
.ap-tab:hover { color: var(--ap-text-body); text-decoration: none; }
.ap-tab.active { color: var(--ap-brand-blue); border-bottom-color: var(--ap-brand-blue); }

/* ─── Tables ──────────────────────────────────────────────────── */
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table thead th {
    text-align: left;
    padding: 9px 14px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ap-text-muted); font-weight: var(--ap-weight-medium);
    background: var(--ap-surface-sunken);
    border-bottom: 1px solid var(--ap-border-default);
}
.ap-table tbody td {
    padding: 9px 14px; font-size: 13px;
    border-bottom: 1px solid var(--ap-border-default);
    color: var(--ap-text-body);
}
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-table tbody tr:hover { background: var(--ap-surface-sunken); }

/* ─── Pagination ──────────────────────────────────────────────── */
.ap-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ap-space-3); }
.ap-pagination-meta { font-size: 12px; color: var(--ap-text-muted); }
.ap-pagination-pages { display: flex; gap: 2px; }
.ap-pagination-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    font-size: 13px; font-weight: var(--ap-weight-medium);
    color: var(--ap-text-body); text-decoration: none;
    border-radius: var(--ap-radius-sm);
    border: 1px solid transparent;
}
.ap-pagination-page:hover { background: var(--ap-surface-sunken); text-decoration: none; }
.ap-pagination-page.active { background: var(--ap-brand-blue); color: var(--ap-brand-white); border-color: var(--ap-brand-blue); }
.ap-pagination-page.disabled { color: var(--ap-gray-300); pointer-events: none; }

/* ─── Btn variants (extending Bootstrap) ──────────────────────── */
.btn-positive {
    background: var(--ap-success);
    color: var(--ap-brand-white);
    border-color: var(--ap-success);
}
.btn-positive:hover {
    background: var(--ap-green-700);
    color: var(--ap-brand-white);
    border-color: var(--ap-green-700);
}
.btn-ghost {
    background: transparent;
    color: var(--ap-text-muted);
    border: 1px solid transparent;
}
.btn-ghost:hover {
    background: var(--ap-surface-sunken);
    color: var(--ap-text-body);
}
.btn-icon-only {
    padding: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ════════════════════════════════════════════════════════════════════
 * BRAND IDENTITY — wordmark + AP icon mark
 * Referenced from the admin layout topbar and public header.
 * Was previously defined in the design brief but never shipped to CSS.
 * ════════════════════════════════════════════════════════════════════ */

/* AP talk-bubble icon (CSS placeholder before custom SVG lands).
 * Rendered as a 28px talk-bubble in brand white with the "AP" text in brand blue.
 * Uses flex layout (more reliable than inline-block + position:absolute inside
 * inline-flex parents) and !important to win against any cascade conflicts. */
.ap-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--ap-brand-white) !important;
    border-radius: 50% 50% 50% 6px !important;
    flex-shrink: 0;
    color: var(--ap-brand-blue);
    font-family: var(--ap-font-ui, Inter, system-ui, sans-serif);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
}
.ap-mark::before {
    content: 'AP';
    color: inherit;
    display: inline-block;
    transform: translateY(-1px);
}

/* Wordmark — Ajax (white) + Pickering (brand green) + .ca (white) */
.ap-wordmark {
    font-family: var(--ap-font-ui, Inter, system-ui, sans-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}
.ap-w-ajax     { color: var(--ap-brand-white) !important; }
.ap-w-pickering{ color: var(--ap-brand-green) !important; }
.ap-w-tld      { color: var(--ap-brand-white) !important; opacity: 0.85; }

/* Topbar brand-link reset so the wordmark colors aren't overridden by
 * inherited link color (Bootstrap's default --bs-link-color was bleeding
 * through and showing the wordmark in dark red on a serif fallback font). */
a.ap-admin-brand-link,
a.ap-admin-brand-link:hover,
a.ap-admin-brand-link:focus,
a.ap-admin-brand-link:visited {
    text-decoration: none;
    color: var(--ap-brand-white);
}