/* ==========================================================================
   CaseDesk — design tokens
   Load this AFTER Bootstrap so the brand utilities below win.
   New CSS uses these variables; never raw hex.

   Palette: "Tabler" — the open-source Tabler dashboard system
   (preview.tabler.io). Blue primary on a neutral gray scale, flat bordered
   surfaces, hairline shadows. Yellow is reserved for attention states;
   green/red/azure for status.
   ========================================================================== */

:root {
    /* --- brand ------------------------------------------------------- */
    --cd-primary-900: #04478a; /* pressed */
    --cd-primary-800: #0559a8; /* hover */
    --cd-primary-700: #066fd1; /* primary */
    --cd-primary-500: #4299e1; /* azure — secondary series, icons */
    --cd-primary-300: #9ac3ec;
    --cd-primary-100: #e6f1fa; /* 10% tint — subtle fill */
    --cd-primary-050: #f2f7fd; /* 4% tint — active / hover wash */
    --cd-accent: #f59f00; /* yellow — attention states only, never for CTAs */
    --cd-accent-hover: #d98d00;
    --cd-accent-bg: #fef5e1;
    --cd-accent-text: #8a5a00; /* yellow text on its tint, AA on white */
    --cd-cream: #f9fafb; /* legacy auth card background */
    /* --- surfaces ---------------------------------------------------- */
    --cd-surface: #ffffff;
    --cd-surface-alt: #f9fafb;
    --cd-bg: #f9fafb;
    /* --- text -------------------------------------------------------- */
    --cd-text: #1f2937;
    --cd-text-heading: #111827;
    --cd-text-muted: #6b7280;
    --cd-text-inverse: #ffffff;
    --cd-placeholder: #9ca3af;
    /* --- borders ----------------------------------------------------- */
    --cd-border: #e5e7eb;
    --cd-border-hover: #d1d5db;
    --cd-border-strong: var(--cd-primary-700);
    /* --- status ------------------------------------------------------ */
    --cd-danger: #d63939;
    --cd-danger-bg: #fbebeb;
    --cd-success: #2fb344;
    --cd-success-bg: #eaf7ec;
    --cd-warning: #f59f00;
    --cd-warning-bg: #fef5e1;
    --cd-info: #4299e1;
    --cd-info-bg: #ecf5fc;
    /* --- shape ------------------------------------------------------- */
    --cd-radius-sm: 6px;
    --cd-radius-md: 8px;
    --cd-radius-lg: 12px;
    --cd-radius-pill: 999px;
    /* --- elevation ---------------------------------------------------
       Tabler is flat: cards rely on their 1px border, buttons carry only a
       hairline. `card` / `lg` are for floating things (menus, flyouts). */
    --cd-shadow-sm: 0 1px 2px rgba(18, 18, 23, 0.05);
    --cd-shadow-card: 0 2px 8px rgba(17, 24, 39, 0.06);
    --cd-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.12);
    --cd-shadow-primary: 0 1px 2px rgba(18, 18, 23, 0.05);
    --cd-shadow-accent: 0 1px 2px rgba(18, 18, 23, 0.05);
    --cd-overlay: rgba(17, 24, 39, 0.55);
    --cd-focus-ring: 0 0 0 3px rgba(6, 111, 209, 0.25);
    --cd-focus-ring-danger: 0 0 0 3px rgba(214, 57, 57, 0.15);
    /* --- spacing ----------------------------------------------------- */
    --cd-space-1: 4px;
    --cd-space-2: 8px;
    --cd-space-3: 12px;
    --cd-space-4: 16px;
    --cd-space-5: 24px;
    --cd-space-6: 32px;
    --cd-space-7: 48px;
    --cd-space-8: 64px;
    /* --- type -------------------------------------------------------- */
    --cd-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --cd-control-height: 44px;
    --cd-transition: 160ms ease;
}

/* ==========================================================================
   Brand utilities

   These class names are already applied across the app but were never
   defined in any stylesheet — until now they rendered unstyled.
   Call sites: Login.cshtml, Register.razor, MainLayout.razor.
   ========================================================================== */

.text-brand-100 {
    color: var(--cd-primary-700);
}

.bg-brand-100 {
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    border-color: var(--cd-primary-700);
}

    .bg-brand-100:hover,
    .bg-brand-100:focus-visible {
        background-color: var(--cd-primary-800);
        color: var(--cd-text-inverse);
    }

    .bg-brand-100:active {
        background-color: var(--cd-primary-900);
    }

/* NOTE: "countinuebutton" is misspelled at its call site (MainLayout.razor).
   Keeping the typo so existing markup keeps working; renaming call sites is
   a separate cleanup. */
.text-brand-countinuebutton {
    color: var(--cd-primary-700);
}

.btn-brand {
    background-color: var(--cd-primary-700);
    border: 1px solid var(--cd-primary-700);
    color: var(--cd-text-inverse);
    border-radius: var(--cd-radius-sm);
    min-height: var(--cd-control-height);
    font-weight: 500;
    box-shadow: var(--cd-shadow-sm);
    transition: background-color var(--cd-transition), border-color var(--cd-transition);
}

    .btn-brand:hover {
        background-color: var(--cd-primary-800);
        border-color: var(--cd-primary-800);
        color: var(--cd-text-inverse);
    }

    .btn-brand:active {
        background-color: var(--cd-primary-900);
        border-color: var(--cd-primary-900);
        color: var(--cd-text-inverse);
    }

    .btn-brand:disabled,
    .btn-brand.disabled {
        background-color: var(--cd-primary-300);
        border-color: var(--cd-primary-300);
        color: var(--cd-text-inverse);
        opacity: 1;
    }

/* Every interactive element keeps a visible focus ring. `.no-outline` is
   applied in several places to kill Bootstrap's focus shadow — it must still
   leave a keyboard-visible indicator, so it only suppresses the ring for
   mouse users. */
.no-outline:focus {
    outline: none;
    box-shadow: none;
}

.no-outline:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Brand lockup (BrandLogo.razor, Login.cshtml) — mark + wordmark. Lives here
   rather than shell.css so the MVC login page, which renders outside the
   Blazor host, gets it too.
   -------------------------------------------------------------------------- */

.cd-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
    color: var(--cd-text-heading);
    text-decoration: none;
}

.cd-brand-mark {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: block;
}

.cd-brand-word {
    font-family: var(--cd-font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cd-text-heading);
}

.navbar-brand .cd-brand,
.navbar-brand a {
    color: var(--cd-text-heading);
    text-decoration: none;
}