@import 'tailwindcss';

@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    /*
     * CRM semantics. These are the colours the screens are built from: the
     * solar accent carries identity, and the four state colours carry meaning.
     * Everything else stays neutral so the data, not the chrome, does the
     * talking.
     */
    --color-solar: var(--solar);
    --color-solar-soft: var(--solar-soft);
    --color-solar-ink: var(--solar-ink);
    --color-success: var(--success);
    --color-success-soft: var(--success-soft);
    --color-warning: var(--warning);
    --color-warning-soft: var(--warning-soft);
    --color-danger: var(--danger);
    --color-danger-soft: var(--danger-soft);
    --color-info: var(--info);
    --color-info-soft: var(--info-soft);

    --color-surface: var(--surface);
    --color-surface-raised: var(--surface-raised);
    --color-hairline: var(--hairline);

    --shadow-card: var(--elevation-card);
    --shadow-raised: var(--elevation-raised);
    --shadow-pop: var(--elevation-pop);
}

:root {
    /* Canvas: a hair off white, so cards read as objects rather than page. */
    --background: oklch(0.984 0.002 250);
    --foreground: oklch(0.22 0.02 258);

    --surface: oklch(1 0 0);
    --surface-raised: oklch(1 0 0);
    --hairline: oklch(0.925 0.005 255);

    --card: oklch(1 0 0);
    --card-foreground: oklch(0.22 0.02 258);

    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.22 0.02 258);

    --primary: oklch(0.245 0.02 258);
    --primary-foreground: oklch(0.99 0.002 250);

    --secondary: oklch(0.965 0.004 255);
    --secondary-foreground: oklch(0.28 0.02 258);

    --muted: oklch(0.965 0.004 255);
    --muted-foreground: oklch(0.53 0.017 258);

    --accent: oklch(0.965 0.012 80);
    --accent-foreground: oklch(0.3 0.05 65);

    --destructive: oklch(0.577 0.2 25.3);
    --destructive-foreground: oklch(0.99 0.002 250);

    --border: oklch(0.923 0.006 255);
    --input: oklch(0.9 0.007 255);
    --ring: oklch(0.74 0.13 68);

    /* Solar accent: warm gold, used for identity and emphasis only. */
    --solar: oklch(0.79 0.15 70);
    --solar-soft: oklch(0.965 0.045 82);
    --solar-ink: oklch(0.47 0.11 62);

    --success: oklch(0.58 0.13 155);
    --success-soft: oklch(0.955 0.04 155);
    --warning: oklch(0.68 0.14 72);
    --warning-soft: oklch(0.965 0.05 82);
    --danger: oklch(0.56 0.19 25);
    --danger-soft: oklch(0.96 0.035 22);
    --info: oklch(0.55 0.13 250);
    --info-soft: oklch(0.96 0.03 250);

    --chart-1: oklch(0.72 0.15 68);
    --chart-2: oklch(0.6 0.115 184);
    --chart-3: oklch(0.5 0.11 258);
    --chart-4: oklch(0.75 0.14 100);
    --chart-5: oklch(0.62 0.16 20);

    --radius: 0.75rem;

    --elevation-card: 0 1px 2px oklch(0.3 0.02 258 / 0.05);
    --elevation-raised:
        0 1px 2px oklch(0.3 0.02 258 / 0.05),
        0 8px 24px -16px oklch(0.3 0.02 258 / 0.18);
    --elevation-pop: 0 18px 40px -18px oklch(0.25 0.02 258 / 0.28);

    --sidebar: oklch(0.995 0.002 250);
    --sidebar-foreground: oklch(0.22 0.02 258);
    --sidebar-primary: oklch(0.245 0.02 258);
    --sidebar-primary-foreground: oklch(0.99 0.002 250);
    --sidebar-accent: oklch(0.965 0.012 80);
    --sidebar-accent-foreground: oklch(0.28 0.03 60);
    --sidebar-border: oklch(0.925 0.005 255);
    --sidebar-ring: oklch(0.74 0.13 68);
}

.dark {
    /* Deep slate rather than black, with cards lifted off the canvas. */
    --background: oklch(0.185 0.014 258);
    --foreground: oklch(0.965 0.004 250);

    --surface: oklch(0.225 0.015 258);
    --surface-raised: oklch(0.255 0.016 258);
    --hairline: oklch(1 0 0 / 0.09);

    --card: oklch(0.225 0.015 258);
    --card-foreground: oklch(0.965 0.004 250);

    --popover: oklch(0.245 0.016 258);
    --popover-foreground: oklch(0.965 0.004 250);

    --primary: oklch(0.94 0.01 250);
    --primary-foreground: oklch(0.2 0.015 258);

    --secondary: oklch(0.27 0.016 258);
    --secondary-foreground: oklch(0.965 0.004 250);

    --muted: oklch(0.27 0.016 258);
    --muted-foreground: oklch(0.72 0.017 255);

    --accent: oklch(0.31 0.03 70);
    --accent-foreground: oklch(0.96 0.02 80);

    --destructive: oklch(0.58 0.19 25);
    --destructive-foreground: oklch(0.98 0.005 250);

    --border: oklch(1 0 0 / 0.1);
    --input: oklch(1 0 0 / 0.14);
    --ring: oklch(0.78 0.13 70);

    --solar: oklch(0.81 0.14 72);
    --solar-soft: oklch(0.34 0.06 70);
    --solar-ink: oklch(0.9 0.08 78);

    --success: oklch(0.72 0.14 158);
    --success-soft: oklch(0.32 0.055 158);
    --warning: oklch(0.79 0.13 75);
    --warning-soft: oklch(0.34 0.06 72);
    --danger: oklch(0.7 0.17 22);
    --danger-soft: oklch(0.33 0.07 22);
    --info: oklch(0.72 0.12 250);
    --info-soft: oklch(0.32 0.05 250);

    --chart-1: oklch(0.8 0.14 72);
    --chart-2: oklch(0.72 0.12 184);
    --chart-3: oklch(0.72 0.11 258);
    --chart-4: oklch(0.82 0.13 100);
    --chart-5: oklch(0.72 0.15 22);

    --elevation-card: 0 1px 2px oklch(0 0 0 / 0.3);
    --elevation-raised:
        0 1px 2px oklch(0 0 0 / 0.35), 0 10px 26px -18px oklch(0 0 0 / 0.6);
    --elevation-pop: 0 20px 45px -20px oklch(0 0 0 / 0.7);

    --sidebar: oklch(0.165 0.014 258);
    --sidebar-foreground: oklch(0.965 0.004 250);
    --sidebar-primary: oklch(0.94 0.01 250);
    --sidebar-primary-foreground: oklch(0.2 0.015 258);
    --sidebar-accent: oklch(0.28 0.03 70);
    --sidebar-accent-foreground: oklch(0.96 0.02 80);
    --sidebar-border: oklch(1 0 0 / 0.08);
    --sidebar-ring: oklch(0.78 0.13 70);
}

@layer base {
    * {
        @apply border-border;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        @apply bg-background text-foreground;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Figures line up in columns of numbers, which is most of a CRM. */
    table,
    [data-slot='table'] {
        font-variant-numeric: tabular-nums;
    }

    ::selection {
        background: var(--solar-soft);
        color: var(--solar-ink);
    }

    :focus-visible {
        outline-color: var(--ring);
    }
}

/* Tabular figures for a single value that has to align with its neighbours. */
@utility crm-num {
    font-variant-numeric: tabular-nums;
}

/* Quiet scrollbars: the content should be the only thing that draws the eye. */
@utility crm-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 9999px;
        background-clip: content-box;
        background-color: var(--border);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--muted-foreground);
    }
}

/*
 * The user manual's article.
 *
 * The only long document the application renders, and its words come from a
 * Markdown file rather than from a component, so the typography is set here once
 * instead of being repeated on every heading in the file.
 */
.manual-prose {
    color: var(--foreground);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/*
 * The reading measure.
 *
 * The card is given the full width of the settings area, because a screenshot
 * of a CRM screen is worthless at half size. The words are not: a column of
 * text the width of the window runs past a hundred characters and the eye
 * loses the line it was on. So text is held to a comfortable measure while the
 * things that need room — a screenshot, a table, a command example — keep the
 * whole width of the card.
 *
 * The article's markup arrives inside a wrapper div (the one the page fills
 * with the converted Markdown), which is why these selectors step through it.
 */
.manual-prose > div > * {
    max-width: 48rem;
}

.manual-prose > div > table,
.manual-prose > div > pre,
.manual-prose > div > figure,
.manual-prose > div > p:has(> img) {
    max-width: none;
}

.manual-prose h1 {
    margin: 2.5rem 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    scroll-margin-top: 6rem;
}

.manual-prose > div > h1:first-child {
    margin-top: 0;
}

.manual-prose h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    scroll-margin-top: 6rem;
}

.manual-prose h3 {
    margin: 1.5rem 0 0.4rem;
    font-size: 0.9875rem;
    font-weight: 600;
    scroll-margin-top: 6rem;
}

.manual-prose h4 {
    margin: 1.25rem 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.manual-prose p {
    margin: 0.7rem 0;
}

.manual-prose ul,
.manual-prose ol {
    display: grid;
    gap: 0.35rem;
    margin: 0.7rem 0;
    padding-left: 1.35rem;
}

.manual-prose ul {
    list-style: disc;
}

.manual-prose ol {
    list-style: decimal;
}

.manual-prose li::marker {
    color: var(--muted-foreground);
}

.manual-prose li > ul,
.manual-prose li > ol {
    margin: 0.4rem 0;
}

.manual-prose a {
    color: var(--solar-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.manual-prose strong {
    font-weight: 600;
}

.manual-prose blockquote {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    border-left: 3px solid var(--warning);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--warning-soft);
}

.manual-prose blockquote p {
    margin: 0.25rem 0;
}

.manual-prose table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.manual-prose th,
.manual-prose td {
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.manual-prose thead th {
    background: var(--muted);
    font-weight: 600;
}

.manual-prose tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--muted) 40%, transparent);
}

.manual-prose code {
    border-radius: 0.3rem;
    background: var(--muted);
    padding: 0.1rem 0.3rem;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
        monospace;
    font-size: 0.8125rem;
}

.manual-prose pre {
    margin: 1rem 0;
    overflow-x: auto;
    border-radius: 0.625rem;
    background: var(--muted);
    padding: 0.9rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.manual-prose pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.manual-prose img {
    width: 100%;
    margin: 1rem 0;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    background: var(--muted);
}

.manual-prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* The role matrix is wider than a phone. Let that one table scroll. */
@media (max-width: 767px) {
    .manual-prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* A soft section label: uppercase, tracked, unobtrusive. */
@utility crm-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}