/**
 * Invoice Hungry — system-wide design tokens
 * Derived from the product style guide (primary / secondary / tertiary / neutral,
 * Space Grotesk + Outfit, surfaces and button patterns).
 *
 * Use the --ih-* variables in any theme CSS. Prefer these over one-off hex values.
 */

:root {
    /* -------------------------------------------------------------------------
     * Color — Primary (base #34B2CC)
     * ------------------------------------------------------------------------- */
    --ih-primary-50: #ecf9fc;
    --ih-primary-100: #d0f0f7;
    --ih-primary-200: #a3e0ef;
    --ih-primary-300: #6ccadf;
    --ih-primary-400: #45bdd6;
    --ih-primary-500: #34b2cc;
    --ih-primary-600: #2a99b0;
    --ih-primary-700: #237a8a;
    --ih-primary-800: #1d6472;
    --ih-primary-900: #164552;
    --ih-primary-500-rgb: 52, 178, 204;

    /* -------------------------------------------------------------------------
     * Color — Secondary (base #2A9BAF)
     * ------------------------------------------------------------------------- */
    --ih-secondary-50: #ecf8fa;
    --ih-secondary-100: #d0eef3;
    --ih-secondary-200: #a3dde6;
    --ih-secondary-300: #6bc4d4;
    --ih-secondary-400: #3faebf;
    --ih-secondary-500: #2a9baf;
    --ih-secondary-600: #24899c;
    --ih-secondary-700: #1d6f7e;
    --ih-secondary-800: #185a66;
    --ih-secondary-900: #123d45;
    --ih-secondary-500-rgb: 42, 155, 175;

    /* -------------------------------------------------------------------------
     * Color — Tertiary (base #1A5F6B) — emphasis, “primary” solid buttons
     * ------------------------------------------------------------------------- */
    --ih-tertiary-50: #e8f4f6;
    --ih-tertiary-100: #c5e4e9;
    --ih-tertiary-200: #9fd0d9;
    --ih-tertiary-300: #6fb0bd;
    --ih-tertiary-400: #3d8a9a;
    --ih-tertiary-500: #1a5f6b;
    --ih-tertiary-600: #155a65;
    --ih-tertiary-700: #124d56;
    --ih-tertiary-800: #0f4048;
    --ih-tertiary-900: #0a2a30;
    --ih-tertiary-500-rgb: 26, 95, 107;

    /* -------------------------------------------------------------------------
     * Color — Neutral (base #64748B)
     * ------------------------------------------------------------------------- */
    --ih-neutral-50: #f8fafc;
    --ih-neutral-100: #f1f5f9;
    --ih-neutral-200: #e2e8f0;
    --ih-neutral-300: #cbd5e1;
    --ih-neutral-400: #94a3b8;
    --ih-neutral-500: #64748b;
    --ih-neutral-600: #475569;
    --ih-neutral-700: #334155;
    --ih-neutral-800: #1e293b;
    --ih-neutral-900: #0f172a;
    --ih-neutral-500-rgb: 100, 116, 139;

    /* -------------------------------------------------------------------------
     * Semantic
     * ------------------------------------------------------------------------- */
    --ih-color-text: var(--ih-neutral-700);
    --ih-color-text-muted: var(--ih-neutral-500);
    --ih-color-headline: var(--ih-neutral-900);
    --ih-color-on-primary-solid: #ffffff;
    --ih-color-danger: #dc2626;
    --ih-color-danger-hover: #b91c1c;
    --ih-color-danger-rgb: 220, 38, 38;

    --ih-surface-page: #f2f3f5;
    --ih-surface-subtle: var(--ih-neutral-100);
    --ih-surface-card: #ffffff;
    --ih-border-default: var(--ih-neutral-200);
    --ih-border-strong: var(--ih-neutral-300);

    /* -------------------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------------------- */
    --ih-font-headline: "Space Grotesk", system-ui, sans-serif;
    --ih-font-body: "Outfit", system-ui, -apple-system, sans-serif;
    --ih-font-label: var(--ih-font-body);

    --ih-text-headline: var(--ih-color-headline);
    --ih-text-body: var(--ih-color-text);
    --ih-text-label: var(--ih-color-text-muted);

    --ih-font-size-xs: 0.75rem;
    --ih-font-size-sm: 0.875rem;
    --ih-font-size-base: 1rem;
    --ih-font-size-lg: 1.125rem;
    --ih-font-size-xl: 1.25rem;
    --ih-font-size-2xl: 1.5rem;
    --ih-font-size-3xl: 1.875rem;

    --ih-font-weight-normal: 400;
    --ih-font-weight-medium: 500;
    --ih-font-weight-semibold: 600;
    --ih-font-weight-bold: 700;

    --ih-line-tight: 1.25;
    --ih-line-normal: 1.5;
    --ih-line-relaxed: 1.625;

    /* -------------------------------------------------------------------------
     * Radius & shadow
     * ------------------------------------------------------------------------- */
    --ih-radius-sm: 0.375rem;
    --ih-radius-md: 0.5rem;
    --ih-radius-lg: 0.75rem;
    --ih-radius-xl: 1rem;
    --ih-radius-pill: 9999px;

    --ih-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
    --ih-shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* -------------------------------------------------------------------------
     * Spacing scale (rem)
     * ------------------------------------------------------------------------- */
    --ih-space-1: 0.25rem;
    --ih-space-2: 0.5rem;
    --ih-space-3: 0.75rem;
    --ih-space-4: 1rem;
    --ih-space-5: 1.25rem;
    --ih-space-6: 1.5rem;
    --ih-space-8: 2rem;
    --ih-space-10: 2.5rem;

    /* -------------------------------------------------------------------------
     * Component tokens — buttons (guide: primary = dark teal solid)
     * ------------------------------------------------------------------------- */
    --ih-btn-font-weight: var(--ih-font-weight-medium);
    --ih-btn-padding-y: var(--ih-space-2);
    --ih-btn-padding-x: var(--ih-space-4);
    --ih-btn-radius: var(--ih-radius-md);

    --ih-btn-primary-bg: var(--ih-tertiary-500);
    --ih-btn-primary-bg-hover: var(--ih-tertiary-600);
    --ih-btn-primary-color: var(--ih-color-on-primary-solid);

    --ih-btn-secondary-bg: var(--ih-neutral-200);
    --ih-btn-secondary-bg-hover: var(--ih-neutral-300);
    --ih-btn-secondary-color: var(--ih-neutral-900);

    --ih-btn-inverted-bg: var(--ih-neutral-900);
    --ih-btn-inverted-bg-hover: var(--ih-neutral-800);
    --ih-btn-inverted-color: #ffffff;

    --ih-btn-outline-bg: transparent;
    --ih-btn-outline-border: var(--ih-neutral-900);
    --ih-btn-outline-color: var(--ih-neutral-900);
    --ih-btn-outline-hover-bg: var(--ih-neutral-100);

    /* Inputs / search bar */
    --ih-input-bg: var(--ih-neutral-100);
    --ih-input-border: transparent;
    --ih-input-radius: var(--ih-radius-md);
    --ih-input-padding-y: var(--ih-space-2);
    --ih-input-padding-x: var(--ih-space-3);

    /* Progress / accent bars */
    --ih-progress-track: var(--ih-primary-100);
    --ih-progress-fill: var(--ih-tertiary-500);

    /* Focus ring (keyboard) */
    --ih-focus-ring: 0 0 0 3px rgba(var(--ih-primary-500-rgb), 0.35);

    /* -------------------------------------------------------------------------
     * Legacy compatibility aliases (existing app/admin/auth CSS)
     * ------------------------------------------------------------------------- */
    --bs-primary: var(--ih-tertiary-500);
    --bs-success: #16a34a;
    --bs-info: var(--ih-secondary-500);
    --bs-warning: #f59e0b;
    --bs-danger: var(--ih-color-danger);

    --bf-primary: var(--ih-tertiary-500);
    --bf-body-bg: var(--ih-surface-page);
    --bf-black: var(--ih-neutral-900);
    --bf-blue: var(--ih-primary-500);
    --bf-grey: var(--ih-neutral-500);
    --bf-light-grey: var(--ih-neutral-300);
    --bf-white: #ffffff;
    --bf-success: #16a34a;

    --bf-sidebar-bg: var(--ih-tertiary-800);
    --bf-sidebar-bg-active: var(--ih-tertiary-700);
    --bf-sidebar-subnav-bg-active: var(--ih-tertiary-600);
    --bf-sidebar-text: var(--ih-primary-100);

    --info: var(--ih-secondary-500);
    --warning: #f59e0b;
    --danger: var(--ih-color-danger);
    --dark: var(--ih-neutral-900);

    --blue: var(--ih-primary-500);
    --red: var(--ih-color-danger);
    --orange: #f59e0b;
    --light: var(--ih-neutral-100);
    --inverse: var(--ih-neutral-900);
    --indigo: var(--ih-secondary-500);
    --purple: var(--ih-tertiary-500);
    --pink: var(--ih-primary-500);
    --yellow: #facc15;
    --green: #16a34a;
    --teal: var(--ih-secondary-500);
    --lime: #84cc16;
    --cyan: #06b6d4;
    --white: #ffffff;
    --gray: var(--ih-neutral-500);
    --gray-dark: var(--ih-neutral-800);

    --blue-rgb: var(--ih-primary-500-rgb);
    --red-rgb: var(--ih-color-danger-rgb);
    --orange-rgb: 245, 158, 11;
    --light-rgb: 241, 245, 249;
    --dark-rgb: 15, 23, 42;
    --inverse-rgb: 15, 23, 42;
    --indigo-rgb: var(--ih-secondary-500-rgb);
    --purple-rgb: var(--ih-tertiary-500-rgb);
    --pink-rgb: var(--ih-primary-500-rgb);
    --yellow-rgb: 250, 204, 21;
    --green-rgb: 22, 163, 74;
    --teal-rgb: var(--ih-secondary-500-rgb);
    --lime-rgb: 132, 204, 22;
    --cyan-rgb: 6, 182, 212;
    --white-rgb: 255, 255, 255;
    --gray-rgb: var(--ih-neutral-500-rgb);
    --gray-dark-rgb: 30, 41, 59;
}

/* -----------------------------------------------------------------------------
 * Base typography helpers
 * ----------------------------------------------------------------------------- */
.ih-headline,
h1.ih-headline,
h2.ih-headline,
h3.ih-headline {
    font-family: var(--ih-font-headline);
    color: var(--ih-text-headline);
    font-weight: var(--ih-font-weight-semibold);
    line-height: var(--ih-line-tight);
}

body {
    font-family: var(--ih-font-body);
    color: var(--ih-color-text);
    background: var(--ih-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ih-font-headline);
    color: var(--ih-color-headline);
}

.ih-body {
    font-family: var(--ih-font-body);
    color: var(--ih-text-body);
    font-size: var(--ih-font-size-base);
    line-height: var(--ih-line-normal);
}

.ih-label {
    font-family: var(--ih-font-label);
    color: var(--ih-text-label);
    font-size: var(--ih-font-size-sm);
    font-weight: var(--ih-font-weight-medium);
}

/* -----------------------------------------------------------------------------
 * Surfaces
 * ----------------------------------------------------------------------------- */
.ih-page-bg {
    background-color: var(--ih-surface-page);
}

.ih-card {
    background: var(--ih-surface-card);
    border-radius: var(--ih-radius-md);
    box-shadow: var(--ih-shadow-card);
    border: none;
}

/* -----------------------------------------------------------------------------
 * Admin component vocabulary (DESIGN.md content-card, data-table, kpi-card)
 * ----------------------------------------------------------------------------- */
.ih-section-kicker {
    font-family: var(--ih-font-body);
    font-size: 0.75rem;
    font-weight: var(--ih-font-weight-semibold);
    line-height: 1.43;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ih-color-text-muted);
    margin-bottom: 0.25rem;
}

.ih-display,
h1.ih-display,
h2.ih-display,
h3.ih-display {
    font-family: var(--ih-font-headline);
    font-weight: var(--ih-font-weight-semibold);
    color: var(--ih-color-headline);
    line-height: var(--ih-line-tight);
}

.ih-data-card {
    background: var(--ih-surface-card);
    border-radius: var(--ih-radius-md);
    box-shadow: var(--ih-shadow-card);
    border: none;
    overflow: hidden;
}

.ih-data-card .card-header {
    background: var(--ih-surface-card);
    border-bottom: 1px solid var(--ih-border-default);
}

.ih-data-card .card-title,
.ih-data-card h5 {
    font-family: var(--ih-font-headline);
    font-weight: var(--ih-font-weight-semibold);
    font-size: 1.125rem;
    color: var(--ih-color-headline);
}

.ih-data-table thead th {
    font-family: var(--ih-font-body);
    font-weight: var(--ih-font-weight-semibold);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ih-color-text-muted);
    border-bottom: 1px solid var(--ih-border-default);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.ih-data-table tbody td {
    font-family: var(--ih-font-body);
    font-size: 0.875rem;
    font-weight: var(--ih-font-weight-normal);
    line-height: 1.5;
    vertical-align: middle;
}

.ih-data-table tbody tr:hover {
    background-color: rgba(var(--ih-primary-500-rgb), 0.05);
}

.ih-data-table tbody .badge {
    font-size: 0.75rem;
    font-weight: var(--ih-font-weight-semibold);
}

.ih-metric-card {
    background: var(--ih-surface-card);
    border-radius: var(--ih-radius-xl);
    box-shadow: var(--ih-shadow-card);
    border: none;
}

.ih-metric-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ih-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.ih-metric-card__icon--primary {
    background-color: rgba(var(--ih-tertiary-500-rgb), 0.12);
    color: var(--ih-tertiary-500);
}

.ih-metric-card__icon--secondary {
    background-color: rgba(var(--ih-secondary-500-rgb), 0.12);
    color: var(--ih-secondary-500);
}

.ih-metric-card__icon--accent {
    background-color: rgba(var(--ih-primary-500-rgb), 0.12);
    color: var(--ih-primary-500);
}

.ih-metric-card__icon--danger {
    background-color: rgba(var(--ih-color-danger-rgb), 0.12);
    color: var(--ih-color-danger);
}

.ih-metric-card__value {
    font-family: var(--ih-font-body);
    font-size: 0.875rem;
    font-weight: var(--ih-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--ih-color-headline);
    margin: 0;
}

.ih-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ih-space-3);
}

@media (max-width: 767.98px) {
    .ih-detail-grid {
        grid-template-columns: 1fr;
    }
}

.ih-detail-field {
    padding: var(--ih-space-4);
    background: var(--ih-surface-soft);
    border: 1px solid var(--ih-border-default);
    border-radius: var(--ih-radius-md);
}

.ih-detail-field__value {
    font-family: var(--ih-font-body);
    font-size: 0.875rem;
    font-weight: var(--ih-font-weight-semibold);
    line-height: 1.4;
    color: var(--ih-color-headline);
    margin: 0;
}

.ih-detail-field__value--empty {
    font-weight: var(--ih-font-weight-normal);
    color: var(--ih-color-text-muted);
}

.ih-detail-grid--with-span .ih-detail-field--span {
    grid-column: 1 / -1;
}

.ih-entity-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ih-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--ih-font-headline);
    font-size: 0.875rem;
    font-weight: var(--ih-font-weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ih-tertiary-500);
    background: rgba(var(--ih-tertiary-500-rgb), 0.12);
}

.ih-client-view .ih-client-tabs {
    margin-bottom: 0;
    padding-inline: 0.25rem;
}

.ih-client-view .ih-admin-box,
.ih-client-view .ih-table-panel {
    margin-top: -1px;
}

.ih-client-linked-user {
    padding: var(--ih-space-4);
    background: rgba(var(--ih-color-success-rgb, 22, 163, 74), 0.06);
    border: 1px solid rgba(var(--ih-color-success-rgb, 22, 163, 74), 0.18);
    border-radius: var(--ih-radius-md);
}

.ih-client-upcoming__table thead th {
    font-size: var(--ih-font-size-xs);
    font-weight: var(--ih-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ih-color-text-muted);
    border-bottom-color: var(--ih-border-default);
}

.ih-icon-action {
    color: var(--ih-primary-500);
}

.ih-icon-action--danger {
    color: var(--ih-color-danger);
}

.ih-tabular {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * Buttons (namespaced to avoid clashing with Bootstrap)
 * ----------------------------------------------------------------------------- */
.ih-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ih-space-2);
    font-family: var(--ih-font-body);
    font-weight: var(--ih-btn-font-weight);
    font-size: var(--ih-font-size-sm);
    line-height: 1.25;
    padding: var(--ih-btn-padding-y) var(--ih-btn-padding-x);
    border-radius: var(--ih-btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.ih-btn:focus-visible {
    outline: none;
    box-shadow: var(--ih-focus-ring);
}

.ih-btn-primary {
    background-color: var(--ih-btn-primary-bg);
    color: var(--ih-btn-primary-color);
}

.ih-btn-primary:hover {
    background-color: var(--ih-btn-primary-bg-hover);
    color: var(--ih-btn-primary-color);
}

.ih-btn-secondary {
    background-color: var(--ih-btn-secondary-bg);
    color: var(--ih-btn-secondary-color);
}

.ih-btn-secondary:hover {
    background-color: var(--ih-btn-secondary-bg-hover);
    color: var(--ih-btn-secondary-color);
}

.ih-btn-inverted {
    background-color: var(--ih-btn-inverted-bg);
    color: var(--ih-btn-inverted-color);
}

.ih-btn-inverted:hover {
    background-color: var(--ih-btn-inverted-bg-hover);
    color: var(--ih-btn-inverted-color);
}

.ih-btn-outline {
    background-color: var(--ih-btn-outline-bg);
    border-color: var(--ih-btn-outline-border);
    color: var(--ih-btn-outline-color);
}

.ih-btn-outline:hover {
    background-color: var(--ih-btn-outline-hover-bg);
    color: var(--ih-btn-outline-color);
}

.ih-btn-danger {
    background-color: var(--ih-color-danger);
    color: #fff;
    border-color: var(--ih-color-danger);
}

.ih-btn-danger:hover {
    background-color: var(--ih-color-danger-hover);
    color: #fff;
}

.ih-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--ih-radius-pill);
}

.ih-btn-icon.ih-btn-primary {
    background-color: var(--ih-tertiary-500);
}

.ih-btn-icon.ih-btn-danger {
    background-color: var(--ih-color-danger);
}

/* -----------------------------------------------------------------------------
 * Form controls
 * ----------------------------------------------------------------------------- */
.ih-input,
.ih-input-search {
    font-family: var(--ih-font-body);
    font-size: var(--ih-font-size-sm);
    color: var(--ih-color-text);
    background: var(--ih-input-bg);
    border: 1px solid var(--ih-input-border);
    border-radius: var(--ih-input-radius);
    padding: var(--ih-input-padding-y) var(--ih-input-padding-x);
    width: 100%;
    max-width: 100%;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.ih-input::placeholder,
.ih-input-search::placeholder {
    color: var(--ih-color-text-muted);
}

.ih-input:focus,
.ih-input-search:focus {
    outline: none;
    border-color: var(--ih-primary-400);
    box-shadow: var(--ih-focus-ring);
}

.ih-input-search {
    padding-left: 2.5rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 50%;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
 * Progress strips (loading / meter)
 * ----------------------------------------------------------------------------- */
.ih-progress {
    height: 0.5rem;
    border-radius: var(--ih-radius-pill);
    background: var(--ih-progress-track);
    overflow: hidden;
}

.ih-progress-bar {
    height: 100%;
    border-radius: var(--ih-radius-pill);
    background: var(--ih-progress-fill);
    transition: width 0.3s ease;
}

/* -----------------------------------------------------------------------------
 * Pills / chips (accent)
 * ----------------------------------------------------------------------------- */
.ih-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ih-space-2);
    font-family: var(--ih-font-body);
    font-size: var(--ih-font-size-sm);
    font-weight: var(--ih-font-weight-medium);
    padding: var(--ih-space-1) var(--ih-space-3);
    border-radius: var(--ih-radius-pill);
    background: var(--ih-primary-100);
    color: var(--ih-tertiary-600);
}

/* -----------------------------------------------------------------------------
 * Tab / bottom nav shell (light pill on pale bg)
 * ----------------------------------------------------------------------------- */
.ih-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ih-space-2);
    padding: var(--ih-space-2);
    background: var(--ih-neutral-100);
    border-radius: var(--ih-radius-pill);
}

.ih-nav-pill .ih-nav-pill-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ih-radius-pill);
    background: var(--ih-tertiary-500);
    color: #fff;
}

/* -----------------------------------------------------------------------------
 * Trusted device verification method icons
 * ----------------------------------------------------------------------------- */
.ih-device-verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    vertical-align: middle;
}

.ih-device-verified-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ih-device-verified-icon--auto {
    color: var(--ih-neutral-500);
}

.ih-device-verified-icon--email {
    color: var(--ih-primary-500);
}

.ih-device-verified-icon--totp {
    color: var(--ih-color-warning, #b45309);
}

.ih-device-verified-icon--passkey {
    color: var(--ih-color-success, #15803d);
}

.ih-device-verified-preview .ih-device-verified-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.ih-device-verified-preview .ih-device-verified-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.ih-device-verified-preview__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 5rem;
}

.ih-device-verified-preview__label {
    font-size: var(--ih-font-size-xs);
    color: var(--ih-neutral-600);
}