/* ==========================================================================
   Setpaid design system — shadcn-style component layer (no build step)
   --------------------------------------------------------------------------
   The shadcn/ui aesthetic (neutral palette, hairline borders, tight radius,
   ring focus, restrained shadows) expressed as plain CSS over the Bootstrap
   markup we already use. Token names mirror shadcn's so the look is familiar
   and transfers 1:1 to Tailwind + Basecoat later if we ever want that workflow.

   SCOPED under `.ds`: only elements inside a `.ds` wrapper adopt this look, so
   pages can migrate one at a time without disturbing the rest of the app.
   When every page is converted, the scope can be lifted to global.
   ========================================================================== */

:root {
    /* shadcn light theme (zinc neutrals) with Setpaid green as `primary`. */
    --ds-bg: #ffffff;
    --ds-fg: #09090b;
    --ds-card: #ffffff;
    --ds-muted: #f4f4f5;
    --ds-muted-fg: #71717a;
    --ds-border: #e4e4e7;
    --ds-input: #e4e4e7;
    --ds-ring: #16a34a;
    --ds-primary: #15803d;        /* green-700 — AA with white text */
    --ds-primary-hover: #166534;  /* green-800 */
    --ds-primary-fg: #ffffff;
    --ds-accent: #f0fdf4;         /* green-50 tint */
    --ds-accent-fg: #166534;
    --ds-accent-border: #dcfce7;  /* green-100 */
    --ds-radius: 0.7rem;
    --ds-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 1px 3px rgba(9, 9, 11, 0.03);
    --ds-shadow-md: 0 4px 6px -2px rgba(9, 9, 11, 0.05), 0 12px 24px -8px rgba(9, 9, 11, 0.08);
}

/* --- Base ----------------------------------------------------------------- */
.ds {
    color: var(--ds-fg);
}

.ds h1, .ds h2, .ds h3, .ds h4 {
    letter-spacing: -0.02em;
}

.ds .text-muted,
.ds .ds-muted {
    color: var(--ds-muted-fg) !important;
}

/* --- Cards ---------------------------------------------------------------- */
.ds .card {
    background: var(--ds-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}

/* --- Buttons -------------------------------------------------------------- */
.ds .btn {
    --bs-btn-focus-box-shadow: none;
    font-weight: 500;
    border-radius: calc(var(--ds-radius) - 0.18rem);
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, box-shadow 0.15s ease;
}

.ds .btn-lg {
    font-weight: 600;
}

.ds .btn-primary,
.ds .btn-brand {
    background-color: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-primary-fg);
}

.ds .btn-primary:hover,
.ds .btn-brand:hover,
.ds .btn-primary:focus,
.ds .btn-brand:focus {
    background-color: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
    color: #fff;
}

/* shadcn-style focus ring: a 2px offset ring in the brand color. */
.ds .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-ring);
}

.ds .btn-outline-secondary,
.ds .btn-ghost {
    background: transparent;
    border: 1px solid var(--ds-border);
    color: var(--ds-fg);
}

.ds .btn-ghost {
    border-color: transparent;
}

.ds .btn-outline-secondary:hover,
.ds .btn-ghost:hover {
    background: var(--ds-muted);
    border-color: var(--ds-border);
    color: var(--ds-fg);
}

/* --- Inputs --------------------------------------------------------------- */
.ds .form-control,
.ds .form-select {
    border: 1px solid var(--ds-input);
    border-radius: calc(var(--ds-radius) - 0.18rem);
    background: var(--ds-bg);
    color: var(--ds-fg);
    padding: 0.55rem 0.75rem;
}

.ds .form-control::placeholder {
    color: var(--ds-muted-fg);
}

.ds .form-control:focus,
.ds .form-select:focus {
    border-color: var(--ds-ring);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.ds .form-label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

/* --- Badges + pills ------------------------------------------------------- */
.ds-eyebrow,
.ds-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ds-accent-fg);
    background: var(--ds-accent);
    border: 1px solid var(--ds-accent-border);
    border-radius: 999px;
    font-weight: 600;
}

.ds-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
}

.ds-badge-soft {
    font-size: 0.72rem;
    padding: 0.26rem 0.6rem;
}

/* --- Pricing / feature helpers ------------------------------------------- */
.ds-price {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ds-fg);
}

.ds-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.4rem 0;
}

.ds-tick {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: var(--ds-accent);
    color: var(--ds-accent-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
}

.ds-divider {
    height: 1px;
    background: var(--ds-border);
    border: 0;
    margin: 1.35rem 0;
}

/* --- FAQ list ------------------------------------------------------------- */
.ds-faq {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-card);
    box-shadow: var(--ds-shadow);
}

.ds-faq .ds-qa {
    padding: 1.15rem 1.35rem;
}

.ds-faq .ds-qa + .ds-qa {
    border-top: 1px solid var(--ds-border);
}

.ds-faq .ds-qa h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* --- Auth card (login/signup) -------------------------------------------- */
.ds .auth-container {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}

.ds .auth-container a {
    color: var(--ds-primary);
}

.ds .auth-container a:hover {
    color: var(--ds-primary-hover);
}

.ds .password-toggle {
    border-color: var(--ds-input);
    border-radius: 0 calc(var(--ds-radius) - 0.18rem) calc(var(--ds-radius) - 0.18rem) 0;
    /* Match the .ds .form-control vertical padding so the grouped control is
       one even height (the toggle button otherwise renders shorter). */
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* ==========================================================================
   App-surface components (dashboard / lists / settings / analytics)
   --------------------------------------------------------------------------
   Values adapted from Basecoat's MIT-licensed component CSS (the shadcn/ui
   look as plain CSS) so the app pages match the pricing/login spike. Still
   scoped under `.ds` and expressed over the Bootstrap markup we already ship —
   no Tailwind, no build step, no new dependencies.
   ========================================================================== */

/* --- Card header / footer ------------------------------------------------- */
/* Mirror the card's outer radius onto Bootstrap's inner-radius var so a
   header/footer's corners hug the rounded card instead of poking past it. */
.ds .card {
    --bs-card-border-radius: var(--ds-radius);
}

.ds .card-header,
.ds .card-footer {
    background: transparent;
    border-color: var(--ds-border);
    padding: 0.9rem 1.25rem;
}

.ds .card-header {
    border-bottom: 1px solid var(--ds-border);
}

.ds .card-footer {
    border-top: 1px solid var(--ds-border);
}

.ds .card-header h1,
.ds .card-header h2,
.ds .card-header h3,
.ds .card-header h4,
.ds .card-header h5,
.ds .card-header h6,
.ds .card-header .card-title {
    margin-bottom: 0;
    font-weight: 600;
}

/* --- Tables --------------------------------------------------------------- */
/* shadcn tables: hairline row separators, a muted small-caps header, and a
   subtle row hover — no zebra striping or vertical rules. We neutralize
   Bootstrap's striping through its own CSS variables so `.table-striped`
   markup keeps working but renders the cleaner look. */
.ds .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-fg);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ds-fg);
    --bs-table-hover-bg: var(--ds-muted);
    --bs-table-hover-color: var(--ds-fg);
    --bs-table-border-color: var(--ds-border);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.ds .table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
    border-bottom-color: var(--ds-border);
}

.ds .table > thead th {
    color: var(--ds-muted-fg);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-border);
}

/* --- List groups ---------------------------------------------------------- */
.ds .list-group {
    border-radius: var(--ds-radius);
}

.ds .list-group-item {
    border-color: var(--ds-border);
    color: var(--ds-fg);
    padding: 0.75rem 1rem;
}

.ds .list-group-item-action:hover,
.ds .list-group-item-action:focus {
    background: var(--ds-muted);
    color: var(--ds-fg);
}

/* --- Tabs (Bootstrap nav-tabs as a shadcn underline bar) ------------------ */
.ds .nav-tabs {
    border-bottom: 1px solid var(--ds-border);
    gap: 0.25rem;
}

.ds .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 0.6rem 0.9rem;
    font-weight: 500;
    color: var(--ds-muted-fg);
}

.ds .nav-tabs .nav-link:hover {
    color: var(--ds-fg);
    background: transparent;
    border-bottom-color: var(--ds-border);
}

.ds .nav-tabs .nav-link.active {
    color: var(--ds-primary);
    background: transparent;
    border-bottom-color: var(--ds-primary);
}

/* --- Alerts --------------------------------------------------------------- */
/* Keep Bootstrap's semantic tints, just adopt the shadcn radius. */
.ds .alert {
    border-radius: var(--ds-radius);
}

/* --- Badges --------------------------------------------------------------- */
/* Semantic colors (bg-success, the .bg-paid/-open/... invoice states) are left
   to their own rules; this only tightens weight + radius to the shadcn shape. */
.ds .badge {
    font-weight: 500;
    border-radius: calc(var(--ds-radius) - 0.35rem);
}

.ds .badge.rounded-pill {
    border-radius: 999px;
}

/* --- Stat / metric cards (neutral shadcn) --------------------------------- */
/* Used by the dashboard + analytics KPIs: a muted label with a small semantic
   icon, a large near-black number, and a muted caption. Semantic color is kept
   only as the small icon accent (per the agreed treatment). */
.ds-stat-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-muted-fg);
}

.ds-stat-label i,
.ds-stat-label .bi {
    font-size: 1.05rem;
    line-height: 1;
}

.ds-stat-value {
    margin-top: 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ds-fg);
}

.ds-stat-caption {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--ds-muted-fg);
}