/* ==========================================================================
   SellUsYourCars — Style Guide
   --------------------------------------------------------------------------
   The single source of truth for colour, spacing, sizing, type, elevation and
   motion across the site.

   Load order (Components/App.razor):
       bootstrap.min.css  ->  styleguide.css  ->  app.css  ->  *.styles.css

   Two rules keep this congruent:

   1. Never hardcode a colour, spacing, radius, shadow, font-size or duration
      in a page stylesheet. Use a token. If no token fits, add one here rather
      than inventing a one-off value.
   2. Only ever use the four canonical breakpoints (see BREAKPOINTS below).

   Custom properties inherit through the DOM, so every token below is available
   inside Blazor's scoped `.razor.css` files even though those are rewritten
   with a [b-xxxxx] attribute. Shared *classes* are not — a `.suyc-*` class must
   be used from markup, and cannot be extended from a scoped stylesheet.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --suyc-teal: #375963;
    --suyc-teal-dark: #2a444c;
    --suyc-teal-light: #4d7683;

    --suyc-red: #d90100;
    --suyc-red-dark: #b00100;
    --suyc-red-light: #ff4d4d;

    --suyc-blue: #9bd8ea;
    --suyc-blue-light: #b4e2ef;
    --suyc-blue-pale: #e6f7ff;
    --suyc-blue-mid: #b2e4f8;
    --suyc-blue-deep: #2b7f9e;

    /* Legacy alias. `--suyc-heading-blue` predates this file and is still used
       in ~110 places; keep it pointing at the brand teal rather than churning
       every call site. Prefer --suyc-teal in new code. */
    --suyc-heading-blue: var(--suyc-teal);

    /* ---- Neutral ramp --------------------------------------------------- */
    --suyc-grey-900: #1a202c;
    --suyc-grey-800: #2d3748;
    --suyc-grey-700: #4a5568;
    --suyc-grey-600: #718096;
    --suyc-grey-500: #a0aec0;
    --suyc-grey-400: #cbd5e0;
    --suyc-grey-300: #e2e8f0;
    --suyc-grey-200: #edf2f7;
    --suyc-grey-100: #f7fafc;
    --suyc-white: #ffffff;
    --suyc-black: #000000;

    /* ---- Semantic ------------------------------------------------------- */
    --suyc-success: #198754;
    --suyc-success-light: #20c997;
    --suyc-danger: #dc3545;
    --suyc-warning: #f59e0b;
    --suyc-info: #0d6efd;

    /* ---- Roles (prefer these over raw ramp values) ----------------------- */
    --suyc-surface: var(--suyc-white);
    --suyc-surface-alt: var(--suyc-grey-100);
    --suyc-surface-sunken: var(--suyc-grey-200);
    --suyc-heading: var(--suyc-teal);
    --suyc-text: var(--suyc-grey-900);
    --suyc-text-muted: var(--suyc-grey-600);
    --suyc-text-on-dark: var(--suyc-white);
    --suyc-link: var(--suyc-red);
    --suyc-link-hover: var(--suyc-red-dark);
    --suyc-border: var(--suyc-grey-300);
    --suyc-border-strong: var(--suyc-grey-400);

    /* ---- Admin ----------------------------------------------------------
       The admin dashboard deliberately keeps its own indigo accent so it never
       gets mistaken for the public site. It shares every other token. */
    --suyc-admin-accent: #667eea;
    --suyc-admin-accent-2: #764ba2;
    --suyc-admin-accent-soft: #ebf4ff;
    --suyc-admin-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* ---- Gradients ------------------------------------------------------ */
    --suyc-gradient-red: linear-gradient(90deg, var(--suyc-red), var(--suyc-red-light));
    --suyc-gradient-red-hover: linear-gradient(90deg, var(--suyc-red-light), var(--suyc-red));
    --suyc-gradient-teal: linear-gradient(135deg, var(--suyc-teal) 0%, var(--suyc-teal-light) 100%);
    --suyc-gradient-success: linear-gradient(135deg, var(--suyc-success), var(--suyc-success-light));
    --suyc-gradient-banner: linear-gradient(112deg, var(--suyc-blue) 80%, var(--suyc-red) 84%);

    /* Decorative gradients for icon chips shown as a set. Derived from the
       brand palette so a row of them reads as one family, rather than the
       stock template rainbow (pink/yellow/cyan) they replaced. */
    --suyc-accent-1: linear-gradient(135deg, var(--suyc-teal) 0%, var(--suyc-teal-light) 100%);
    --suyc-accent-2: linear-gradient(135deg, var(--suyc-success) 0%, var(--suyc-success-light) 100%);
    --suyc-accent-3: linear-gradient(135deg, var(--suyc-red) 0%, var(--suyc-red-light) 100%);
    --suyc-accent-4: linear-gradient(135deg, var(--suyc-blue-deep) 0%, var(--suyc-blue) 100%);
    --suyc-accent-5: linear-gradient(135deg, var(--suyc-teal-dark) 0%, var(--suyc-blue-deep) 100%);
    --suyc-surface-brand-soft: linear-gradient(135deg, var(--suyc-blue-pale) 0%, #f2fbff 100%);

    /* ---- Price rating ---------------------------------------------------
       Five-step scale behind the price gauge on a vehicle page. Semantic, so
       it stays separate from the brand palette. */
    --suyc-rating-lower: #1e8e3e;
    --suyc-rating-great: #7cb342;
    --suyc-rating-good: #fdd835;
    --suyc-rating-fair: #ffb300;
    --suyc-rating-higher: #ef6c00;
    --suyc-rating-ink: #1a1a2e;

    /* ---- Spacing — 4px base ---------------------------------------------
       0  1    2   3   4    5   6   7    8   9    10  11  12
       0  2px  4   8   12   16  20  24   32  40   48  64  80 */
    --suyc-space-0: 0;
    --suyc-space-1: 0.125rem;
    --suyc-space-2: 0.25rem;
    --suyc-space-3: 0.5rem;
    --suyc-space-4: 0.75rem;
    --suyc-space-5: 1rem;
    --suyc-space-6: 1.25rem;
    --suyc-space-7: 1.5rem;
    --suyc-space-8: 2rem;
    --suyc-space-9: 2.5rem;
    --suyc-space-10: 3rem;
    --suyc-space-11: 4rem;
    --suyc-space-12: 5rem;

    /* ---- Radius --------------------------------------------------------- */
    --suyc-radius-sm: 4px;
    --suyc-radius-md: 8px;
    --suyc-radius-lg: 12px;
    --suyc-radius-xl: 16px;
    --suyc-radius-2xl: 20px;
    --suyc-radius-3xl: 2rem;
    --suyc-radius-pill: 999px;
    --suyc-radius-circle: 50%;

    /* ---- Elevation ------------------------------------------------------ */
    --suyc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --suyc-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.10);
    --suyc-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.12);
    --suyc-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.16);
    --suyc-shadow-5: 0 25px 80px rgba(0, 0, 0, 0.40);
    --suyc-shadow-focus: 0 0 0 3px rgba(217, 1, 0, 0.15);
    --suyc-shadow-focus-admin: 0 0 0 3px rgba(102, 126, 234, 0.15);

    /* ---- Typography ----------------------------------------------------- */
    --suyc-font-body: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --suyc-font-display: "CharlesWright", var(--suyc-font-body);

    --suyc-text-xs: 0.75rem;
    --suyc-text-sm: 0.875rem;
    --suyc-text-base: 1rem;
    --suyc-text-md: 1.125rem;
    --suyc-text-lg: 1.25rem;
    --suyc-text-xl: 1.5rem;
    --suyc-text-2xl: 1.75rem;
    --suyc-text-3xl: 2rem;
    --suyc-text-4xl: 2.5rem;
    --suyc-text-5xl: 3.5rem;
    --suyc-text-6xl: 4rem;

    --suyc-weight-normal: 400;
    --suyc-weight-medium: 500;
    --suyc-weight-semibold: 600;
    --suyc-weight-bold: 700;

    --suyc-leading-tight: 1.2;
    --suyc-leading-snug: 1.4;
    --suyc-leading-base: 1.6;
    --suyc-leading-relaxed: 1.8;

    /* ---- Containers ----------------------------------------------------- */
    --suyc-container-sm: 30rem;
    --suyc-container-md: 45rem;
    --suyc-container-lg: 50rem;
    --suyc-container-xl: 75rem;

    /* ---- Layering ------------------------------------------------------- */
    --suyc-z-raised: 10;
    --suyc-z-sticky: 100;
    --suyc-z-nav: 1000;
    --suyc-z-overlay: 1050;
    --suyc-z-sheet: 1060;

    /* ---- Motion --------------------------------------------------------- */
    --suyc-dur-fast: 150ms;
    --suyc-dur-base: 200ms;
    --suyc-dur-slow: 300ms;
    --suyc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --suyc-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --suyc-transition: all var(--suyc-dur-base) var(--suyc-ease);

    /* ---- Controls ------------------------------------------------------- */
    --suyc-control-height: 3rem;
    --suyc-tap-target: 44px;

    /* Height of the fixed site nav. Page content is offset by it. */
    --suyc-nav-height: 58px;
}

/* ==========================================================================
   BREAKPOINTS — the only values allowed anywhere in this codebase.

   These are Bootstrap 5's, deliberately. The markup is full of col-md-* and
   col-lg-*, so if our CSS drew the line anywhere else the grid and the
   stylesheet would disagree about where "tablet" starts.

       max-width:  575.98px  /  min-width:  576px    sm
       max-width:  767.98px  /  min-width:  768px    md  <- main mobile divide
       max-width:  991.98px  /  min-width:  992px    lg
                                min-width: 1200px    xl

   The .98 matters: `max-width: 768px` and `min-width: 768px` both match at
   exactly 768px, so a pair written that way fights itself on an iPad in
   portrait, with whichever rule loads last winning.

   CSS cannot use var() inside @media, so these cannot be tokens and have to be
   kept consistent by hand. Do not reintroduce 641, 767, 769, 1024 or 1025.
   ========================================================================== */


/* ==========================================================================
   2. PRIMITIVES

   All prefixed `suyc-` because Bootstrap 5.1 is loaded first and already owns
   .btn, .card, .form-control, .modal-header, .modal-body and .modal-footer.
   ========================================================================== */

/* ---- Layout ------------------------------------------------------------ */

.suyc-container {
    width: 100%;
    max-width: var(--suyc-container-xl);
    margin-inline: auto;
    padding-inline: var(--suyc-space-5);
}

.suyc-container--sm { max-width: var(--suyc-container-sm); }
.suyc-container--md { max-width: var(--suyc-container-md); }
.suyc-container--lg { max-width: var(--suyc-container-lg); }

.suyc-section {
    padding-block: var(--suyc-space-12);
}

.suyc-section--tight {
    padding-block: var(--suyc-space-10);
}

@media (max-width: 767.98px) {
    .suyc-section { padding-block: var(--suyc-space-10); }
    .suyc-section--tight { padding-block: var(--suyc-space-8); }
}

/* ---- Buttons ----------------------------------------------------------- */

.suyc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--suyc-space-3);
    min-height: var(--suyc-tap-target);
    padding: var(--suyc-space-4) var(--suyc-space-8);
    border: 2px solid transparent;
    border-radius: var(--suyc-radius-pill);
    font-family: inherit;
    font-size: var(--suyc-text-base);
    font-weight: var(--suyc-weight-semibold);
    line-height: var(--suyc-leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--suyc-transition);
}

.suyc-btn:disabled,
.suyc-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.suyc-btn:focus-visible {
    outline: none;
    box-shadow: var(--suyc-shadow-focus);
}

.suyc-btn--primary {
    background: var(--suyc-gradient-red);
    border-color: var(--suyc-red);
    color: var(--suyc-text-on-dark);
}

.suyc-btn--primary:hover:not(:disabled) {
    background: var(--suyc-gradient-red-hover);
    color: var(--suyc-text-on-dark);
}

.suyc-btn--success {
    background: var(--suyc-gradient-success);
    color: var(--suyc-text-on-dark);
}

.suyc-btn--success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--suyc-shadow-3);
    color: var(--suyc-text-on-dark);
}

.suyc-btn--secondary {
    background: var(--suyc-surface);
    border-color: var(--suyc-border);
    color: var(--suyc-text);
}

.suyc-btn--secondary:hover:not(:disabled) {
    background: var(--suyc-surface-alt);
    border-color: var(--suyc-border-strong);
    color: var(--suyc-text);
}

.suyc-btn--danger {
    background: var(--suyc-danger);
    border-color: var(--suyc-danger);
    color: var(--suyc-text-on-dark);
}

.suyc-btn--ghost {
    background: transparent;
    color: var(--suyc-text-muted);
}

.suyc-btn--ghost:hover:not(:disabled) {
    background: var(--suyc-surface-alt);
    color: var(--suyc-text);
}

.suyc-btn--block {
    width: 100%;
}

/* Square icon-only button. Sized to the 44px minimum tap target. */
.suyc-btn--icon {
    width: var(--suyc-tap-target);
    height: var(--suyc-tap-target);
    min-height: 0;
    padding: 0;
    border-radius: var(--suyc-radius-md);
    flex: 0 0 auto;
}

/* ---- Cards ------------------------------------------------------------- */

.suyc-card {
    background: var(--suyc-surface);
    border: 1px solid var(--suyc-border);
    border-radius: var(--suyc-radius-xl);
    box-shadow: var(--suyc-shadow-2);
    overflow: hidden;
    transition: var(--suyc-transition);
}

.suyc-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--suyc-shadow-3);
}

/* ---- Forms ------------------------------------------------------------- */

.suyc-field {
    margin-bottom: var(--suyc-space-6);
}

.suyc-label {
    display: block;
    margin-bottom: var(--suyc-space-3);
    color: var(--suyc-text);
    font-size: var(--suyc-text-sm);
    font-weight: var(--suyc-weight-semibold);
}

.suyc-input {
    width: 100%;
    min-height: var(--suyc-control-height);
    padding: var(--suyc-space-4) var(--suyc-space-5);
    border: 2px solid var(--suyc-border);
    border-radius: var(--suyc-radius-md);
    background: var(--suyc-surface-alt);
    color: var(--suyc-text);
    /* 16px minimum, or iOS Safari zooms the viewport on focus. */
    font-family: inherit;
    font-size: var(--suyc-text-base);
    transition: border-color var(--suyc-dur-base) var(--suyc-ease),
                box-shadow var(--suyc-dur-base) var(--suyc-ease);
}

.suyc-input::placeholder {
    color: var(--suyc-grey-500);
}

.suyc-input:focus {
    outline: none;
    border-color: var(--suyc-red);
    background: var(--suyc-surface);
    box-shadow: var(--suyc-shadow-focus);
}

/* ==========================================================================
   3. SHEET / MODAL

   One shell for every dialog on the site. Centred dialog on desktop; a
   bottom sheet with a grab handle you can swipe away on mobile.

   The header is a flex row: the titles live in their own `min-width: 0` track
   and the close button is a normal flex item. That is what stops a long title
   from running underneath the X — an absolutely positioned close button always
   eventually collides with centred text on a narrow screen.
   ========================================================================== */

.suyc-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--suyc-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--suyc-space-5);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: suyc-fade-in var(--suyc-dur-base) var(--suyc-ease-out);
}

.suyc-sheet {
    position: relative;
    z-index: var(--suyc-z-sheet);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: var(--suyc-surface);
    border-radius: var(--suyc-radius-2xl);
    box-shadow: var(--suyc-shadow-5);
    animation: suyc-sheet-in var(--suyc-dur-slow) var(--suyc-ease-out);
}

.suyc-sheet--wide { max-width: 900px; }

/* Grab handle. Desktop hides it; mobile turns it into the drag affordance. */
.suyc-sheet__handle {
    display: none;
}

.suyc-sheet__header {
    display: flex;
    align-items: flex-start;
    gap: var(--suyc-space-5);
    flex: 0 0 auto;
    padding: var(--suyc-space-8) var(--suyc-space-8) var(--suyc-space-5);
    border-bottom: 1px solid var(--suyc-border);
}

/* min-width:0 lets a long title wrap inside its own column instead of
   overflowing the flex track and sliding under the close button. */
.suyc-sheet__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.suyc-sheet__title {
    margin: 0;
    color: var(--suyc-heading);
    font-size: var(--suyc-text-xl);
    font-weight: var(--suyc-weight-bold);
    line-height: var(--suyc-leading-tight);
    overflow-wrap: anywhere;
}

.suyc-sheet__subtitle {
    margin: var(--suyc-space-2) 0 0;
    color: var(--suyc-text-muted);
    font-size: var(--suyc-text-base);
    font-weight: var(--suyc-weight-medium);
}

.suyc-sheet__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--suyc-radius-circle);
    background: var(--suyc-surface-alt);
    color: var(--suyc-text-muted);
    font-size: var(--suyc-text-xl);
    line-height: 1;
    cursor: pointer;
    transition: var(--suyc-transition);
}

.suyc-sheet__close:hover {
    background: var(--suyc-surface-sunken);
    color: var(--suyc-text);
}

.suyc-sheet__close:focus-visible {
    outline: 2px solid var(--suyc-red);
    outline-offset: 2px;
}

.suyc-sheet__body {
    flex: 1 1 auto;
    padding: var(--suyc-space-7) var(--suyc-space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.suyc-sheet__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--suyc-space-4);
    padding: var(--suyc-space-5) var(--suyc-space-8) var(--suyc-space-8);
    border-top: 1px solid var(--suyc-border);
}

@keyframes suyc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes suyc-sheet-in {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes suyc-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ---- Mobile: bottom sheet ---------------------------------------------- */

@media (max-width: 767.98px) {
    .suyc-sheet-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .suyc-sheet {
        max-width: none;
        /* dvh so the sheet is not clipped by mobile Safari's collapsing
           address bar the way vh would be. */
        max-height: 92dvh;
        border-radius: var(--suyc-radius-2xl) var(--suyc-radius-2xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: suyc-sheet-up var(--suyc-dur-slow) var(--suyc-ease-out);
    }

    .suyc-sheet--wide { max-width: none; }

    /* Handle strip doubles as the drag target, so it needs real height. */
    .suyc-sheet__handle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        height: 22px;
        cursor: grab;
        /* Stops the browser claiming the vertical gesture for scrolling
           before our pointermove handler sees it. */
        touch-action: none;
    }

    .suyc-sheet__handle::before {
        content: "";
        width: 36px;
        height: 4px;
        border-radius: var(--suyc-radius-pill);
        background: var(--suyc-grey-400);
    }

    .suyc-sheet__header {
        padding: var(--suyc-space-3) var(--suyc-space-6) var(--suyc-space-5);
        touch-action: none;
    }

    .suyc-sheet__body {
        padding: var(--suyc-space-6);
    }

    .suyc-sheet__footer {
        padding: var(--suyc-space-5) var(--suyc-space-6) var(--suyc-space-6);
    }
}

@media (max-width: 575.98px) {
    .suyc-sheet__title { font-size: var(--suyc-text-lg); }
    .suyc-sheet__subtitle { font-size: var(--suyc-text-sm); }
}

/* Set by sheet.js while a drag is in flight, to suppress the CSS transition
   fighting the transform we are writing every pointermove. */
.suyc-sheet.is-dragging {
    animation: none;
    transition: none;
    cursor: grabbing;
}

.suyc-sheet.is-settling {
    transition: transform var(--suyc-dur-base) var(--suyc-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .suyc-sheet-overlay,
    .suyc-sheet {
        animation: none;
    }

    .suyc-btn,
    .suyc-card,
    .suyc-input {
        transition: none;
    }
}