/* =====================================================================
   ClickDesign Invoicing — visual layer.

   Loaded AFTER ui.css, which it deliberately overrides: the palette and
   type live here so the whole look can be reviewed, tuned or reverted in
   one file without unpicking the base stylesheet.

   Direction is "precision instrument" — the discipline of a trade rather
   than its costume. High contrast, one signal colour used sparingly,
   numbers that line up. Everything honours prefers-reduced-motion.
   ===================================================================== */

:root {
    /* ---- Palette -----------------------------------------------------
       Neutrals carry a slight violet bias so they read as chosen rather
       than as the browser default grey. One gradient survives, on the
       active nav item, where it signals position instead of decorating. */
    --cd-navy:   #14172a;
    --cd-navy-2: #1c2138;
    --cd-purple: #6341d8;
    --cd-purple-soft: #f0ecfd;
    --cd-blue:   #5ab0e0;
    --cd-grad:   linear-gradient(103deg, #6341d8 0%, #7d5ce8 46%, #4b8fd8 100%);
    --cd-bg:     #f5f6fa;
    --cd-card:   #ffffff;
    --cd-text:   #191d2e;
    --cd-muted:  #59607a;
    --cd-border: #e3e5ef;
    --cd-radius: 12px;

    /* The signal colour. Deliberately rationed — attention only. */
    --cd-amber:  #b8760f;
    --cd-good:   #157a58;
    --cd-bad:    #c0403c;

    /* Shadows tinted with the ink rather than pure black, so depth sits
       in the same colour world as everything else. */
    --cd-shadow-sm: 0 1px 2px rgba(20, 23, 42, .05), 0 1px 3px rgba(20, 23, 42, .04);
    --cd-shadow-md: 0 4px 14px rgba(20, 23, 42, .08), 0 2px 4px rgba(20, 23, 42, .04);
    --cd-shadow-lg: 0 14px 34px rgba(20, 23, 42, .13), 0 4px 10px rgba(20, 23, 42, .06);
    --cd-ring: 0 0 0 3px rgba(99, 65, 216, .26);
    --cd-ease: cubic-bezier(.4, 0, .2, 1);
    --cd-fast: 140ms var(--cd-ease);
    --cd-slow: 260ms var(--cd-ease);

    /* Type. Archivo is an industrial grotesque with real tabular figures,
       which is what a page full of money columns actually needs; Source
       Sans carries the reading text. Both fall back to a system stack. */
    --cd-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cd-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html, body {
    font-family: var(--cd-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cd-stat-value, .cd-plan-price, .cd-badge, .cd-table th, .cd-stat-label {
    font-family: var(--cd-display);
}

h1, h2, h3 { letter-spacing: -.015em; text-wrap: balance; }

/* Money and quantities line up in columns wherever they appear. */
.cd-stat-value, .cd-table .num, .cd-plan-price, .cd-totals { font-variant-numeric: tabular-nums; }

/* ---------- Motion primitives ---------- */
@keyframes cd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(192, 64, 60, .32); }
    70% { box-shadow: 0 0 0 9px rgba(192, 64, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 64, 60, 0); }
}

/* Content lifts in on navigation, so a page change reads as movement rather
   than a flicker. Staggered so the eye travels down the page. */
.cd-main > * { animation: cd-rise 320ms var(--cd-ease) both; }
.cd-main > *:nth-child(2) { animation-delay: 40ms; }
.cd-main > *:nth-child(3) { animation-delay: 80ms; }
.cd-main > *:nth-child(4) { animation-delay: 120ms; }
.cd-main > *:nth-child(n+5) { animation-delay: 150ms; }

/* ---------- Sidebar ---------- */
/* Desktop only. On a phone the sidebar is a drawer that has to sit ABOVE the backdrop, and this
   z-index:5 was silently winning over the drawer z-index because this sheet loads after ui.css
   — which left the backdrop swallowing every tap on the menu. */
@media (min-width: 821px) {
    .cd-sidebar { box-shadow: 4px 0 26px rgba(20, 23, 42, .20); z-index: 5; }
}

.cd-sidebar { background: linear-gradient(178deg, var(--cd-navy) 0%, #191e33 62%, #1e2440 100%); }
.cd-brand img { transition: transform var(--cd-slow); }
.cd-brand:hover img { transform: scale(1.04); }

.cd-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    font-family: var(--cd-body);
    transition: background var(--cd-fast), color var(--cd-fast), transform var(--cd-fast);
}

/* Icons are inline SVG in the markup, so they inherit colour and need no icon font. */
.cd-nav-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .66;
    transition: opacity var(--cd-fast), transform var(--cd-slow);
}

.cd-nav-link:hover { transform: translateX(2px); background: rgba(255, 255, 255, .07); }
.cd-nav-link:hover svg { opacity: 1; }

/* The one surviving gradient in the app. It marks where you are — a job a
   flat colour does less well against a dark ground. */
.cd-nav-link.active {
    background: var(--cd-grad);
    box-shadow: 0 6px 18px rgba(99, 65, 216, .40);
    font-weight: 600;
}

.cd-nav-link.active svg { opacity: 1; transform: scale(1.06); }

.cd-nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

/* ---------- Cards ---------- */
.cd-card {
    box-shadow: var(--cd-shadow-sm);
    border: 1px solid var(--cd-border);
    transition: box-shadow var(--cd-slow);
    position: relative;
}

.cd-card:hover { box-shadow: var(--cd-shadow-md); }

.cd-card h2 {
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cd-card h2 svg { width: 18px; height: 18px; color: var(--cd-purple); flex: 0 0 18px; }

/* ---------- Stat tiles ---------- */
/* A stripe across the top carries the state before the number is read —
   colour alone would leave a colour-blind reader with only the digits. */
.cd-stat {
    box-shadow: var(--cd-shadow-sm);
    border: 1px solid var(--cd-border);
    transition: transform var(--cd-slow), box-shadow var(--cd-slow);
    position: relative;
    overflow: hidden;
}

.cd-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cd-purple);
    opacity: .85;
}

.cd-stat-good::before { background: var(--cd-good); }
.cd-stat-bad::before  { background: var(--cd-bad); }

/* ui.css marks these states with a left border. With the stripe across the top
   that reads as an L-shaped frame, so the border is dropped here rather than by
   editing the base sheet. */
.cd-stat-good, .cd-stat-bad { border-left: 1px solid var(--cd-border); }

.cd-stat:hover { transform: translateY(-3px); box-shadow: var(--cd-shadow-lg); }

.cd-stat-label {
    display: block;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cd-muted);
}

.cd-stat-value {
    font-size: 1.78rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.14;
}

.cd-stat-good .cd-stat-value { color: var(--cd-good); }
.cd-stat-bad .cd-stat-value  { color: var(--cd-bad); }

/* Something genuinely urgent earns one slow pulse, not a permanent flash. */
.cd-stat-bad { animation: cd-pulse-ring 2.4s var(--cd-ease) 1; }

/* ---------- Buttons ---------- */
/* Flat, confident colour. The gradient that used to sit on every button
   made none of them feel primary. */
.cd-btn, .cd-btn-outline, .cd-btn-danger, .cd-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--cd-body);
    font-weight: 600;
    letter-spacing: .005em;
    transition: transform var(--cd-fast), box-shadow var(--cd-fast),
                background var(--cd-fast), border-color var(--cd-fast);
}

.cd-btn {
    background: var(--cd-purple);
    box-shadow: 0 2px 8px rgba(99, 65, 216, .26);
}

.cd-btn:hover:not(:disabled) {
    background: #5636c6;
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(99, 65, 216, .38);
}

.cd-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(99, 65, 216, .3); }
.cd-btn:disabled { box-shadow: none; }

.cd-btn-outline {
    border-color: #bfc5da;
    border-width: 1.5px;
    color: var(--cd-purple);
    background: #fff;
}
.cd-btn-outline:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--cd-purple);
    background: var(--cd-purple-soft);
    box-shadow: var(--cd-shadow-sm);
}

.cd-btn-danger:hover:not(:disabled) { transform: translateY(-1px); }

.cd-btn svg, .cd-btn-outline svg, .cd-btn-danger svg { width: 16px; height: 16px; }

/* A visible focus ring matters for anyone driving this from the keyboard. */
.cd-btn:focus-visible, .cd-btn-outline:focus-visible, .cd-btn-danger:focus-visible,
.cd-input:focus-visible, .cd-select:focus-visible, .cd-textarea:focus-visible {
    outline: none;
    box-shadow: var(--cd-ring);
}

/* ---------- Inputs ---------- */
.cd-input, .cd-select, .cd-textarea {
    font-family: var(--cd-body);
    transition: border-color var(--cd-fast), box-shadow var(--cd-fast), background var(--cd-fast);
}

.cd-input:hover, .cd-select:hover, .cd-textarea:hover { border-color: #c3c9dd; }

.cd-input:focus, .cd-select:focus, .cd-textarea:focus {
    border-color: var(--cd-purple);
    box-shadow: var(--cd-ring);
    outline: none;
}

.cd-field label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cd-muted);
}

/* ---------- Tables ---------- */
.cd-table th {
    position: sticky;
    top: 0;
    background: var(--cd-card);
    z-index: 1;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cd-muted);
}

/* Zebra banding does the row-tracking work that a gradient hover was
   trying to do, and keeps working when the mouse is nowhere near. */
.cd-table tbody tr:nth-child(even) { background: #fafbfd; }
.cd-table tbody tr { transition: background var(--cd-fast); }
.cd-table tbody tr:hover { background: var(--cd-purple-soft); }

.cd-table-scroll { border-radius: 10px; scrollbar-width: thin; }

/* ---------- Badges ---------- */
.cd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* A coloured dot reads faster than the word alone, and still works in mono. */
.cd-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}

/* ---------- Alerts ---------- */
.cd-alert-error, .cd-alert-warn, .cd-alert-good, .cd-alert-success {
    animation: cd-rise 260ms var(--cd-ease) both;
    box-shadow: var(--cd-shadow-sm);
    border-radius: 10px;
}

/* ---------- Loading and empty states ---------- */
.cd-loading { display: flex; align-items: center; gap: 10px; }

.cd-loading::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--cd-border);
    border-top-color: var(--cd-purple);
    animation: cd-spin .7s linear infinite;
}

.cd-skeleton {
    background: linear-gradient(90deg, #eceff6 0%, #f7f9fc 40%, #eceff6 80%);
    background-size: 420px 100%;
    animation: cd-shimmer 1.3s linear infinite;
    border-radius: 6px;
    height: 14px;
}

.cd-empty {
    border: 1px dashed #d6dae8;
    border-radius: var(--cd-radius);
    background: linear-gradient(180deg, #fcfdff 0%, #f4f6fb 100%);
    padding: 40px 24px;
    animation: cd-fade 320ms var(--cd-ease) both;
}

.cd-empty h3 { margin: 0 0 6px; color: var(--cd-text); font-size: 1.02rem; }
.cd-empty p { margin: 0 auto; max-width: 430px; color: var(--cd-muted); }

/* The illustration sits in a soft disc so it reads as artwork rather than
   as an icon that failed to load. */
.cd-empty-art {
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #ece7fc 0%, #f4f2fe 62%, rgba(244, 242, 254, 0) 100%);
}
.cd-empty-art svg { width: 46px; height: 46px; color: var(--cd-purple); opacity: .85; }
.cd-empty > svg { width: 34px; height: 34px; color: #b4bcd2; margin-bottom: 10px; }

/* ---------- Page heading ---------- */
.cd-page-head h1 {
    font-size: 1.62rem;
    font-weight: 700;
    letter-spacing: -.025em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-page-head h1 svg { width: 22px; height: 22px; color: var(--cd-purple); flex: 0 0 22px; }

/* A section heading sitting directly on the page (not inside a card) was falling back to the
   browser default, which is larger than the page title itself. */
.cd-main > h2 {
    font-size: 1.14rem;
    margin: 26px 0 12px;
}

/* ---------- Template picker and swatches ---------- */
.cd-tpl { transition: transform var(--cd-fast), box-shadow var(--cd-fast), border-color var(--cd-fast); }
.cd-tpl:hover { transform: translateY(-2px); box-shadow: var(--cd-shadow-md); }
.cd-tpl.selected { box-shadow: 0 0 0 2px var(--cd-purple), var(--cd-shadow-md); }

.cd-swatch { transition: transform var(--cd-fast), box-shadow var(--cd-fast); }
.cd-swatch:hover { transform: scale(1.18); box-shadow: var(--cd-shadow-sm); }

/* ---------- Public site ---------- */
.pub-feature { transition: transform var(--cd-slow), box-shadow var(--cd-slow); }
.pub-feature:hover { transform: translateY(-3px); box-shadow: var(--cd-shadow-md); }

.pub-price-card { transition: transform var(--cd-slow), box-shadow var(--cd-slow); }
.pub-price-card:hover { transform: translateY(-4px); box-shadow: var(--cd-shadow-lg); }

/* ---------- Respect the reader's motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .cd-stat:hover, .cd-btn:hover, .cd-tpl:hover, .cd-nav-link:hover,
    .pub-feature:hover, .pub-price-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Plan gating. A locked feature is dimmed but still listed — hiding it would
   hide the reason to upgrade, and the padlock does the explaining.
   --------------------------------------------------------------------------- */

.cd-nav-link.cd-nav-locked { opacity: .5; }
.cd-nav-link.cd-nav-locked svg:last-child { width: 14px; height: 14px; margin-left: auto; }
.cd-nav-link.cd-nav-locked:hover { opacity: .78; }

.cd-upgrade {
    max-width: 560px;
    margin: 32px auto;
    padding: 36px 30px;
    text-align: center;
    background: var(--cd-card);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow-md);
}

.cd-upgrade-mark {
    width: 54px; height: 54px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--cd-grad);
    color: #fff;
}
.cd-upgrade-mark svg { width: 26px; height: 26px; }

.cd-upgrade h2 { margin: 0 0 8px; }
.cd-upgrade > p { color: var(--cd-muted); margin: 0 0 18px; }

.cd-upgrade-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
    display: inline-block;
}
.cd-upgrade-points li {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 5px 0;
}
.cd-upgrade-points svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--cd-good); }

/* Plan picker in Settings — three tiers side by side, stacking on a phone. */
.cd-plan-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
}
@media (min-width: 720px) {
    .cd-plan-picker { grid-template-columns: repeat(3, 1fr); }
}

.cd-plan-option {
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--cd-fast), box-shadow var(--cd-fast), transform var(--cd-fast);
}
.cd-plan-option:hover { border-color: var(--cd-purple); box-shadow: var(--cd-shadow-sm); transform: translateY(-2px); }
.cd-plan-name  { font-weight: 700; }
.cd-plan-price { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.cd-plan-price .cd-muted { font-size: .8rem; font-weight: 500; }
.cd-plan-blurb { font-size: .85rem; color: var(--cd-muted); flex-grow: 1; }
.cd-plan-option .cd-btn,
.cd-plan-option .cd-btn-outline { margin-top: 8px; width: 100%; }