/* =============================================================================
 * Allpinion — Appleish theme
 *
 * Loaded after Radzen + material3 so this file wins specificity. Override-only;
 * doesn't try to replicate the entire Radzen token graph. Keep this thin —
 * if a component needs invasive restyling, use a dedicated component CSS file
 * rather than piling selectors here.
 *
 * Layered intent:
 *   1. Tokens   — CSS custom props + system-font stack
 *   2. Radzen   — overrides for the loudest Radzen primitives
 *   3. Layout   — sidebar/rail, content max-width, mobile breakpoints
 *   4. Motion   — transitions, skeleton shimmer, view transitions
 *   5. Utilities — helper classes wizard pages use
 * ============================================================================= */

/* ============================================================================
 * 1. Tokens
 * ============================================================================ */
:root {
    /* Type — system stack so the app picks up SF Pro on macOS, Segoe on Windows. */
    --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable",
               "Segoe UI", "Inter", system-ui, sans-serif;
    --ap-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                       "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    --ap-text-xs: 12px;
    --ap-text-sm: 14px;
    --ap-text-base: 17px;
    --ap-text-lg: 20px;
    --ap-text-xl: 24px;
    --ap-text-2xl: 28px;
    --ap-text-3xl: 34px;
    --ap-text-4xl: 44px;

    --ap-leading-tight: 1.2;
    --ap-leading-normal: 1.55;

    /* Color — mostly grayscale + one accent. Semantic colors for status only. */
    --ap-bg: #fbfbfd;
    --ap-bg-elevated: #ffffff;
    --ap-bg-sunken: #f4f4f7;
    --ap-bg-tinted: rgba(0, 0, 0, 0.04);

    --ap-text: #1d1d1f;
    --ap-text-secondary: #6e6e73;
    --ap-text-tertiary: #86868b;

    --ap-border: rgba(0, 0, 0, 0.08);
    --ap-border-strong: rgba(0, 0, 0, 0.16);

    --ap-accent: #0071e3;
    --ap-accent-hover: #0077ed;
    --ap-accent-pressed: #006edb;
    --ap-accent-soft: rgba(0, 113, 227, 0.08);

    --ap-success: #34c759;
    --ap-warning: #ff9f0a;
    --ap-danger: #ff3b30;
    --ap-info: #5ac8fa;

    /* Radius — consistent: cards 12, inputs 8, pills 999 */
    --ap-radius-sm: 8px;
    --ap-radius: 12px;
    --ap-radius-lg: 16px;
    --ap-radius-pill: 999px;

    /* Shadow — soft, double-layered */
    --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ap-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
    --ap-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08);
    --ap-shadow-focus: 0 0 0 4px var(--ap-accent-soft);

    /* Spacing — 4px base */
    --ap-space-1: 4px;
    --ap-space-2: 8px;
    --ap-space-3: 12px;
    --ap-space-4: 16px;
    --ap-space-5: 20px;
    --ap-space-6: 24px;
    --ap-space-8: 32px;
    --ap-space-10: 40px;
    --ap-space-12: 48px;
    --ap-space-16: 64px;

    /* Motion — spring-ish curves */
    --ap-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ap-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ap-duration-fast: 120ms;
    --ap-duration: 200ms;
    --ap-duration-slow: 400ms;

    /* Tap target floor — Apple HIG says 44px */
    --ap-tap-min: 44px;

    /* Bridges to Radzen tokens — minimal set; the rest cascades from these. */
    --rz-primary: var(--ap-accent);
    --rz-primary-light: var(--ap-accent-hover);
    --rz-primary-dark: var(--ap-accent-pressed);
    --rz-secondary: var(--ap-text-secondary);
    --rz-base: var(--ap-bg);
    --rz-base-100: var(--ap-bg);
    --rz-base-200: var(--ap-bg-sunken);
    --rz-base-300: var(--ap-border);
    --rz-text-color: var(--ap-text);
    --rz-text-secondary-color: var(--ap-text-secondary);
    --rz-text-disabled-color: var(--ap-text-tertiary);
    --rz-border-radius: var(--ap-radius);
    --rz-card-border-radius: var(--ap-radius);
    --rz-card-shadow: var(--ap-shadow);
}

/* Dark theme — automatic via prefers-color-scheme + class hook for explicit toggle */
@media (prefers-color-scheme: dark) {
    :root {
        --ap-bg: #000000;
        --ap-bg-elevated: #1c1c1e;
        --ap-bg-sunken: #2c2c2e;
        --ap-bg-tinted: rgba(255, 255, 255, 0.06);

        --ap-text: #f5f5f7;
        --ap-text-secondary: #a1a1a6;
        --ap-text-tertiary: #6e6e73;

        --ap-border: rgba(255, 255, 255, 0.1);
        --ap-border-strong: rgba(255, 255, 255, 0.18);

        --ap-accent: #0a84ff;
        --ap-accent-hover: #409cff;
        --ap-accent-pressed: #0070dc;
        --ap-accent-soft: rgba(10, 132, 255, 0.16);

        --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --ap-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
        --ap-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================================
 * 2. Base + Radzen overrides
 * ============================================================================ */
html, body {
    font-family: var(--ap-font);
    font-size: var(--ap-text-base);
    line-height: var(--ap-leading-normal);
    color: var(--ap-text);
    background: var(--ap-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .rz-text-h1, .rz-text-h2, .rz-text-h3 {
    font-family: var(--ap-font-display);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: var(--ap-leading-tight);
    color: var(--ap-text);
}

h1, .rz-text-h1 { font-size: var(--ap-text-3xl); }
h2, .rz-text-h2 { font-size: var(--ap-text-2xl); }
h3, .rz-text-h3 { font-size: var(--ap-text-xl); }

/* Buttons — primary stands out, others are ghost. */
.rz-button {
    border-radius: var(--ap-radius-sm);
    font-family: var(--ap-font);
    font-size: var(--ap-text-sm);
    font-weight: 500;
    min-height: var(--ap-tap-min);
    padding: 0 var(--ap-space-5);
    transition: transform var(--ap-duration-fast) var(--ap-ease),
                box-shadow var(--ap-duration-fast) var(--ap-ease),
                background var(--ap-duration-fast) var(--ap-ease);
    box-shadow: none;
    border: none;
}
.rz-button.rz-button-sm,
.rz-button-md.rz-button-extrasmall { min-height: 36px; padding: 0 var(--ap-space-3); }

.rz-button.rz-primary {
    background: var(--ap-accent);
    color: white;
    font-weight: 600;
}
.rz-button.rz-primary:hover {
    background: var(--ap-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--ap-shadow-sm);
}
.rz-button.rz-primary:active {
    background: var(--ap-accent-pressed);
    transform: translateY(0);
}

.rz-button.rz-secondary,
.rz-button.rz-light {
    background: var(--ap-bg-tinted);
    color: var(--ap-text);
}
.rz-button.rz-secondary:hover,
.rz-button.rz-light:hover {
    background: var(--ap-border-strong);
}

.rz-button:focus-visible {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

/* Inputs — taller, softer, with focus glow instead of border-color shift. */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-numeric,
.rz-datepicker .rz-textbox {
    border-radius: var(--ap-radius-sm);
    border: 1px solid var(--ap-border);
    background: var(--ap-bg-elevated);
    font-family: var(--ap-font);
    font-size: var(--ap-text-base);
    min-height: var(--ap-tap-min);
    padding: 10px var(--ap-space-4);
    transition: border-color var(--ap-duration) var(--ap-ease),
                box-shadow var(--ap-duration) var(--ap-ease);
}
.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown:focus-within,
.rz-numeric:focus-within {
    border-color: var(--ap-accent);
    box-shadow: var(--ap-shadow-focus);
    outline: none;
}

/* Form fields — more breathing room, kinder labels */
.rz-form-field {
    margin-bottom: var(--ap-space-5);
}
.rz-form-field-label {
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    font-weight: 500;
    margin-bottom: var(--ap-space-2);
}

/* Cards — soft shadow, generous padding, subtle hover lift */
.rz-card {
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
    background: var(--ap-bg-elevated);
    box-shadow: var(--ap-shadow-sm);
    padding: var(--ap-space-6);
    transition: transform var(--ap-duration) var(--ap-ease),
                box-shadow var(--ap-duration) var(--ap-ease);
}
.rz-card.ap-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--ap-shadow);
    cursor: pointer;
}

/* Badges as pills */
.rz-badge {
    border-radius: var(--ap-radius-pill);
    padding: 2px 10px;
    font-size: var(--ap-text-xs);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Sidebar / panel menu — quieter chrome */
.demos-sidebar {
    background: var(--ap-bg-elevated);
    border-right: 1px solid var(--ap-border);
}
.rz-panel-menu .rz-navigation-item-link {
    border-radius: var(--ap-radius-sm);
    padding: 10px var(--ap-space-4);
    margin: 1px var(--ap-space-2);
    font-weight: 500;
    color: var(--ap-text);
    transition: background var(--ap-duration-fast) var(--ap-ease);
}
.rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--ap-bg-tinted);
}
.rz-panel-menu .rz-state-active > .rz-navigation-item-link {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
}

/* Header strip — flat, no heavy shadow */
.rz-header {
    background: var(--ap-bg-elevated);
    border-bottom: 1px solid var(--ap-border);
    box-shadow: none;
}

/* Data grid — keep dense for expert mode but soften the chrome */
.rz-data-grid,
.rz-data-grid .rz-paginator {
    background: var(--ap-bg-elevated);
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
}
.rz-data-grid thead th {
    background: var(--ap-bg-sunken);
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    font-weight: 600;
    text-transform: none;
}

/* Steps — quieter when AdminWizard uses them */
.rz-steps-item .rz-steps-number {
    background: var(--ap-bg-sunken);
    color: var(--ap-text-secondary);
    border: none;
}
.rz-steps-item.rz-state-active .rz-steps-number {
    background: var(--ap-accent);
    color: white;
}

/* ============================================================================
 * 3. Layout
 * ============================================================================ */
/* Content container — readable line length on wide screens */
.ap-content {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--ap-space-6) var(--ap-space-4);
}
.ap-content-wide { max-width: 1600px; }
.ap-content-narrow { max-width: 640px; }

/* Mobile breakpoint utilities */
@media (max-width: 768px) {
    /* Hide the wide demos-nav search; we'll add a compact replacement later. */
    .ap-hide-on-mobile { display: none !important; }

    .rz-card { padding: var(--ap-space-4); }
    .ap-content { padding: var(--ap-space-4) var(--ap-space-3); }

    /* Bigger touch targets on mobile */
    .rz-button { min-height: 48px; }
    .rz-textbox, .rz-textarea, .rz-dropdown { min-height: 48px; }

    /* Sidebar becomes a sheet on mobile (Radzen handles overlay; widen for thumbs) */
    .demos-sidebar { width: 80vw !important; max-width: 320px; }
}
@media (min-width: 769px) {
    .ap-show-on-mobile { display: none !important; }
}

/* Bottom tab bar slot — the actual component lands in D-7 */
.ap-bottom-tabs {
    display: none;
}
@media (max-width: 768px) {
    .ap-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--ap-bg-elevated);
        border-top: 1px solid var(--ap-border);
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Body needs bottom padding so content isn't hidden behind the tab bar */
    body.ap-has-bottom-tabs { padding-bottom: 64px; }
}

/* ============================================================================
 * 4. Motion
 * ============================================================================ */
/* Skeleton shimmer for loading placeholders */
@keyframes ap-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.ap-skeleton {
    background: linear-gradient(
        90deg,
        var(--ap-bg-sunken) 0%,
        var(--ap-bg-tinted) 50%,
        var(--ap-bg-sunken) 100%
    );
    background-size: 200% 100%;
    animation: ap-shimmer 1.4s var(--ap-ease) infinite;
    border-radius: var(--ap-radius-sm);
}

/* Page transitions — subtle slide + fade. Hosts opt-in via .ap-page-transition */
.ap-page-transition {
    animation: ap-page-in var(--ap-duration-slow) var(--ap-ease-spring) both;
}
@keyframes ap-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in for cards in a feed */
.ap-fade-in {
    animation: ap-fade-in var(--ap-duration-slow) var(--ap-ease) both;
}
@keyframes ap-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
 * 5. Utilities
 * ============================================================================ */
/* Hero card on the home feed — bigger, attention-grabbing */
.ap-hero-card {
    background: linear-gradient(135deg, var(--ap-bg-elevated), var(--ap-bg-sunken));
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-8) var(--ap-space-6);
    border: 1px solid var(--ap-border);
    box-shadow: var(--ap-shadow);
}

/* Section title — used between rails on the home feed */
.ap-section-title {
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-xl);
    font-weight: 700;
    letter-spacing: -0.012em;
    margin: var(--ap-space-8) 0 var(--ap-space-4);
}

/* Card rail — responsive grid that wraps to fill available width without
   truncating cards. On wide screens cards span more columns; on narrow
   screens they stack. Mobile keeps the carousel feel via overflow scroll. */
.ap-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ap-space-3);
    padding-bottom: var(--ap-space-4);
}
.ap-rail > * {
    min-width: 0;
}
@media (max-width: 768px) {
    .ap-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 calc(-1 * var(--ap-space-3));
        padding-left: var(--ap-space-3);
        padding-right: var(--ap-space-3);
        scrollbar-width: none;
    }
    .ap-rail::-webkit-scrollbar { display: none; }
    .ap-rail > * {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
}

/* Save status pill — used by the D-3 component */
.ap-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    border-radius: var(--ap-radius-pill);
    padding: 4px 12px;
    font-size: var(--ap-text-sm);
    color: var(--ap-text-secondary);
    background: var(--ap-bg-tinted);
}
.ap-pill-success { color: var(--ap-success); background: rgba(52, 199, 89, 0.1); }
.ap-pill-warning { color: var(--ap-warning); background: rgba(255, 159, 10, 0.1); }
.ap-pill-danger  { color: var(--ap-danger);  background: rgba(255, 59, 48, 0.1); }

/* Floating action button — used by Copilot sheet entry in D-5 */
.ap-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ap-accent);
    color: white;
    box-shadow: var(--ap-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: transform var(--ap-duration) var(--ap-ease-spring);
    z-index: 50;
}
.ap-fab:hover { transform: scale(1.05); }
.ap-fab:active { transform: scale(0.96); }
@media (max-width: 768px) {
    .ap-fab { bottom: 80px; }  /* clear the bottom tab bar */
}

/* Sticky bottom CTA — wizards lean on this for the primary action */
.ap-sticky-cta {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--ap-bg-elevated) 80%, transparent);
    padding: var(--ap-space-4) 0;
    margin-top: var(--ap-space-6);
    z-index: 10;
}

/* Empty state */
.ap-empty {
    text-align: center;
    padding: var(--ap-space-12) var(--ap-space-4);
    color: var(--ap-text-secondary);
}
.ap-empty-illustration {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--ap-space-4);
    background: var(--ap-bg-sunken);
    border-radius: var(--ap-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-tertiary);
    font-size: 14px;
}
.ap-empty-title {
    font-size: var(--ap-text-xl);
    font-weight: 600;
    color: var(--ap-text);
    margin-bottom: var(--ap-space-2);
}
.ap-empty-message {
    margin-bottom: var(--ap-space-6);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Header logo + toggle row — sits in the top-left column. The logo links to /
   and the sidebar toggle (auth users only) sits next to it without
   overlapping. Logo hides on small screens so the toggle gets the full slot. */
.ap-header-left {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.ap-header-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 0 8px;
    border-radius: 8px;
    flex: 0 0 auto;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.ap-header-logo:hover { opacity: 0.85; background-color: rgba(0, 0, 0, 0.04); }
.ap-header-logo:focus-visible {
    outline: 2px solid var(--ap-accent);
    outline-offset: 2px;
}
.ap-header-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* Home anon hero — West Elm-inspired split: editorial text + map preview.
   Two columns on desktop, stacks on narrow viewports. The map is a bounded
   preview (not page-filling) and breathes with whitespace around it. */
.ap-home-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ap-space-8);
    align-items: stretch;
    background: linear-gradient(135deg, var(--ap-bg-elevated), var(--ap-bg-sunken));
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-8);
    box-shadow: var(--ap-shadow);
    margin-bottom: var(--ap-space-8);
}
.ap-home-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ap-space-4);
    padding: var(--ap-space-2) 0;
}
.ap-home-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--ap-text-xs);
    font-weight: 600;
    color: var(--ap-accent);
    margin: 0;
}
.ap-home-hero-title {
    font-family: var(--ap-font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 0;
}
.ap-home-hero-body {
    color: var(--ap-text-muted, var(--ap-on-surface-variant));
    margin: 0;
    max-width: 38ch;
}
.ap-home-hero-actions {
    display: flex;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
    margin-top: var(--ap-space-3);
}
.ap-home-hero-map {
    position: relative;
    min-height: 420px;
    border-radius: var(--ap-radius);
    overflow: hidden;
    border: 1px solid var(--ap-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    background: var(--ap-bg-sunken);
}
.ap-home-hero-map-link {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ap-accent);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ap-home-hero-map-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
@media (max-width: 900px) {
    .ap-home-hero-split {
        grid-template-columns: 1fr;
        padding: var(--ap-space-6) var(--ap-space-5);
        gap: var(--ap-space-6);
    }
    .ap-home-hero-map { min-height: 300px; }
}