/* ============================================================================
   Kodgo Grid — Design System ("theme")
   ----------------------------------------------------------------------------
   This is the single source of truth for the app's look & feel.
   Change a value here once and it updates everywhere.

   How it works: Bootstrap 5.3 is built on CSS variables (--bs-*). By defining
   our own tokens (--kg-*) and pointing Bootstrap's variables at them, every
   button, badge, link, card border, and `text-primary`/`bg-primary` utility
   across the whole app picks up the new palette automatically — no need to
   touch each page.

   Direction: "Clean SaaS dashboard" — slate neutrals, one blue accent,
   soft layered shadows, generous radius. (Stripe / Linear / Vercel family.)
   ========================================================================== */

:root {
    /* ---- Brand / accent (one blue, used consistently everywhere) ---- */
    --kg-primary:        #2563eb;   /* main actions, links, active nav     */
    --kg-primary-hover:  #1d4ed8;   /* hover / pressed                     */
    --kg-primary-soft:   #eff6ff;   /* tinted backgrounds, active pills    */
    --kg-primary-rgb:    37, 99, 235;

    /* ---- Neutral slate ramp (text, surfaces, borders) ---- */
    --kg-slate-900: #0f172a;  /* headings                 */
    --kg-slate-700: #334155;  /* body text                */
    --kg-slate-600: #475569;
    --kg-slate-500: #64748b;  /* muted / secondary text   */
    --kg-slate-400: #94a3b8;  /* placeholders, faint      */
    --kg-slate-300: #cbd5e1;
    --kg-slate-200: #e2e8f0;  /* borders, dividers        */
    --kg-slate-100: #f1f5f9;  /* subtle fills             */
    --kg-slate-50:  #f8fafc;  /* (cool) — kept for tints  */

    /* Neutral surfaces — warm-grey, NOT blue-tinted. Used for the page
       background and table/list headers so lists don't read "blueish". */
    --kg-bg:         #f8f8f7;  /* page background          */
    --kg-surface-2:  #f4f4f3;  /* table headers, subtle fills */

    /* ---- Semantic accents (kept harmonious with the slate base) ---- */
    --kg-success: #16a34a;
    --kg-warning: #f59e0b;
    --kg-danger:  #dc2626;
    --kg-info:    #0ea5e9;

    /* ---- Chart series ----
       Its OWN token rather than --kg-success, even though both are green. The semantic
       accents above MEAN something (paid, overdue, failed) and must stay free to change on
       those grounds; a data series that borrowed one would silently repaint with it.

       Green-700 rather than the success green-600 because this hue also carries WHITE LABEL
       TEXT on the active currency pill: #16a34a gives 3.3:1, under the 4.5:1 that normal text
       needs. This step measures 5.02:1 on white — text-safe, and it keeps the line's visual
       weight equal to the blue it replaced (5.17:1). */
    --kg-chart-series:     #15803d;
    --kg-chart-series-rgb: 21, 128, 61;

    /* ---- Type scale ---- */
    --kg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Radius scale (one consistent rounding system) ---- */
    --kg-radius-sm: 0.5rem;    /*  8px */
    --kg-radius:    0.625rem;  /* 10px — default */
    --kg-radius-lg: 0.875rem;  /* 14px */
    --kg-radius-xl: 1.25rem;   /* 20px — big cards */
    --kg-radius-card: 1.25rem; /* 20px — the one radius EVERY card uses */

    /* ---- Soft, layered shadows (the "SaaS" depth) ---- */
    --kg-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --kg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --kg-shadow:    0 4px 14px rgba(15, 23, 42, 0.07);
    --kg-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);

    /* ======================================================================
       Re-point Bootstrap's variables at our tokens.
       This is what propagates the theme to every existing page.
       ====================================================================== */
    --bs-primary:        var(--kg-primary);
    --bs-primary-rgb:    var(--kg-primary-rgb);
    --bs-link-color:     var(--kg-primary);
    --bs-link-color-rgb: var(--kg-primary-rgb);
    --bs-link-hover-color: var(--kg-primary-hover);

    --bs-body-color:     var(--kg-slate-700);
    --bs-body-bg:        var(--kg-bg);
    --bs-secondary-color: var(--kg-slate-500);
    --bs-tertiary-color:  var(--kg-slate-400);
    --bs-border-color:   var(--kg-slate-200);
    --bs-emphasis-color: var(--kg-slate-900);
    --bs-heading-color:  var(--kg-slate-900);

    --bs-body-font-family: var(--kg-font-sans);

    /* Radius: map Bootstrap's rounded-* utilities onto our scale */
    --bs-border-radius:    var(--kg-radius);
    --bs-border-radius-sm: var(--kg-radius-sm);
    --bs-border-radius-lg: var(--kg-radius-lg);
    --bs-border-radius-xl: var(--kg-radius-xl);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html, body {
    font-family: var(--kg-font-sans);
    color: var(--kg-slate-700);
    background-color: var(--kg-slate-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kg-slate-900);
    letter-spacing: -0.011em;   /* tightens headings — a subtle "designed" cue */
}

/* ---------------------------------------------------------------------------
   Primary buttons — Bootstrap bakes hex values into per-button variables,
   so we re-skin them explicitly here (root --bs-primary alone won't do it).
   --------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--kg-primary);
    --bs-btn-border-color: var(--kg-primary);
    --bs-btn-hover-bg: var(--kg-primary-hover);
    --bs-btn-hover-border-color: var(--kg-primary-hover);
    --bs-btn-active-bg: var(--kg-primary-hover);
    --bs-btn-active-border-color: var(--kg-primary-hover);
    --bs-btn-disabled-bg: var(--kg-primary);
    --bs-btn-disabled-border-color: var(--kg-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--kg-primary);
    --bs-btn-border-color: var(--kg-primary);
    --bs-btn-hover-bg: var(--kg-primary);
    --bs-btn-hover-border-color: var(--kg-primary);
    --bs-btn-active-bg: var(--kg-primary-hover);
    --bs-btn-active-border-color: var(--kg-primary-hover);
}

/* Buttons feel a touch more substantial and consistent */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--kg-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

/* ---------------------------------------------------------------------------
   Focus rings — calm, brand-tinted (replaces Bootstrap's heavy default glow)
   --------------------------------------------------------------------------- */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--kg-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--kg-primary-rgb), 0.18);
}

/* ---------------------------------------------------------------------------
   Cards — soft layered depth + consistent radius; gentle hairline border
   --------------------------------------------------------------------------- */
.card {
    /* Cards are white surfaces on the (warm-neutral) page background. Bootstrap
       defaults a card's bg to --bs-body-bg, which would tint every plain card
       eggshell; pin it white so cards look consistent app-wide without each page
       needing its own override. Utility classes (bg-light/bg-dark/...) still win. */
    --bs-card-bg: #ffffff;
    --bs-card-border-color: var(--kg-slate-200);
    --bs-card-border-radius: var(--kg-radius-card);
    --bs-card-inner-border-radius: var(--kg-radius-card);
}

/* One card radius everywhere. The !important is deliberate: many cards carry
   rounded-3/4/5 utilities (which are themselves !important) or per-page scoped
   overrides like `.custom-card { border-radius: 20px }`. theme.css loads after
   Bootstrap, so this single rule wins over all of them and keeps every card —
   on every page — perfectly aligned. Change --kg-radius-card to retune them all. */
.card {
    border-radius: var(--kg-radius-card) !important;
}

/* Interactive list/grid cards (Clients, Requests, …). Same treatment as the
   dashboard's .dash-card so every *browsable* card behaves the same: a hairline
   border at rest, then a soft lift + deeper shadow on hover. Defined globally
   (not per-page scoped) so Clients and Requests are guaranteed identical. */
.custom-card {
    border: 1px solid var(--kg-slate-200) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
}
.custom-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--kg-shadow-lg) !important;
}

/* The lift and an open kebab menu cannot coexist, so the card that owns the open
   menu gives up its lift. Add .menu-open to it for as long as its dropdown is
   showing (Requests, Clients, Subcontractors all do).

   WHY. The lift above is a transform, and a transform creates a STACKING CONTEXT.
   While the card is lifted — which it always is while you are reaching for the
   menu, because the menu sits inside the card — the dropdown's z-index: 1050
   stops being a page-level position and resolves INSIDE the card. The card itself
   is unpositioned, so it sits at the page's base level, and the transparent
   full-screen click catcher these pages render behind an open menu
   (position: fixed, z-index: 1040) ends up painting over the whole card.

   The menu stays fully VISIBLE, which is what makes the symptom so odd: it looks
   live, but nothing under the pointer is the menu. The cursor stays an arrow over
   items that should show a link pointer, and a click lands on the catcher, which
   closes the menu instead of following the item.

   Dropping the transform removes the stacking context, so 1050 counts against the
   catcher's 1040 again; the explicit z-index then holds the card above the catcher
   regardless of anything else on the card ever growing a transform. It also stops
   the 6px jump the card would make each time the pointer crossed its edge. */
.custom-card.menu-open,
.custom-card.menu-open:hover {
    position: relative;
    z-index: 1060;
    transform: none;
}

/* Re-tune Bootstrap's shadow utilities to the softer, layered set.
   Existing markup already uses .shadow-sm / .shadow everywhere, so this
   upgrades the whole app's depth without changing any HTML. */
.shadow-sm { box-shadow: var(--kg-shadow-sm) !important; }
.shadow    { box-shadow: var(--kg-shadow)    !important; }
.shadow-lg { box-shadow: var(--kg-shadow-lg) !important; }

/* ---------------------------------------------------------------------------
   Forms — consistent radius, slate borders, comfortable height
   --------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--kg-slate-200);
    border-radius: var(--kg-radius-sm);
    color: var(--kg-slate-900);
}
.form-control::placeholder { color: var(--kg-slate-400); }

/* ---------------------------------------------------------------------------
   Tables — quieter headers, lighter row separators (data reads more calmly)
   --------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--kg-slate-200);
}
.table > thead th,
.table-light > :not(caption) > * > * {
    background-color: var(--kg-surface-2);
    color: var(--kg-slate-500);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-color: var(--kg-slate-200);
}
.table > tbody > tr { border-color: var(--kg-slate-100); }

/* ---------------------------------------------------------------------------
   Badges & pills — slightly softer corners by default
   --------------------------------------------------------------------------- */
.badge { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Validation (kept from app.css, retuned to the danger token)
   --------------------------------------------------------------------------- */
.invalid,
.invalid:focus,
.modified.invalid,
.modified.invalid:focus,
.form-control.invalid,
.form-select.invalid,
.custom-input.invalid {
    border-color: var(--kg-danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15) !important;
}
.validation-message { color: var(--kg-danger); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   Small reusable helpers used across pages
   --------------------------------------------------------------------------- */
.text-gradient {
    background: linear-gradient(135deg, var(--kg-primary) 0%, var(--kg-info) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tracking-wider { letter-spacing: 0.05em; }