/* ==========================================================================
   GENXSYS AI - Design System
   Tokens, base elements, and shared components for the AI SaaS control panel.
   Load after legacy page stylesheets so these rules take precedence.
   ========================================================================== */

:root {
    --ai-primary: #4f46e5;
    --ai-primary-hover: #4338ca;
    --ai-primary-soft: #eef2ff;
    --ai-accent: #06b6d4;
    --ai-success: #10b981;
    --ai-success-soft: #ecfdf5;
    --ai-warning: #f59e0b;
    --ai-warning-soft: #fffbeb;
    --ai-danger: #ef4444;
    --ai-danger-soft: #fef2f2;
    --ai-danger-text: #991b1b;
    --ai-danger-border: #fecaca;
    --ai-success-text: #065f46;
    --ai-success-border: #a7f3d0;
    --ai-warning-text: #92400e;
    --ai-warning-border: #fde68a;
    --ai-on-primary: #ffffff;

    --ai-bg: #f5f7fb;
    --ai-surface: #ffffff;
    --ai-surface-muted: #f8fafc;
    --ai-border: #e2e8f0;
    --ai-text: #0f172a;
    --ai-text-secondary: #475569;
    --ai-text-muted: #64748b;

    --ai-radius-sm: 8px;
    --ai-radius: 12px;
    --ai-radius-lg: 16px;
    --ai-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ai-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    --ai-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);

    --ai-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-hover-color: #4338ca;
    --bs-body-font-family: var(--ai-font);
    --bs-body-color: var(--ai-text);
    --bs-body-bg: var(--ai-bg);
    --bs-border-color: var(--ai-border);
    --bs-border-radius: var(--ai-radius-sm);
    --bs-border-radius-lg: var(--ai-radius);
    --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
}

/* ---------- Base ---------- */
body {
    font-family: var(--ai-font);
    color: var(--ai-text);
    background-color: var(--ai-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ai-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.05rem;
}

a {
    color: var(--ai-primary);
    text-decoration: none;
}

a:hover {
    color: var(--ai-primary-hover);
}

hr {
    border-color: var(--ai-border);
    opacity: 1;
}

small, .small {
    color: var(--ai-text-muted);
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: var(--ai-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-primary,
.btn-web-primary {
    background-color: var(--ai-primary);
    border-color: var(--ai-primary);
    color: #fff;
    box-shadow: var(--ai-shadow-sm);
}

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

.btn-outline-primary {
    color: var(--ai-primary);
    border-color: var(--ai-primary);
}

.btn-outline-primary:hover {
    background-color: var(--ai-primary);
    border-color: var(--ai-primary);
    color: #fff;
}

.btn-web-plain {
    background-color: var(--ai-surface);
    border: 1px solid var(--ai-border);
    color: var(--ai-text);
}

.btn-web-plain:hover {
    background-color: var(--ai-surface-muted);
    color: var(--ai-text);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--ai-focus-ring);
}

.btn-xs {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 6px;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--ai-border);
    border-radius: var(--ai-radius-sm);
    color: var(--ai-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ai-primary);
}

.form-label,
label {
    color: var(--ai-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

/* ---------- Cards and panels ---------- */
.card,
.tenant-card,
.mini-card,
.setup-container,
.plan-box,
.login-card,
.signup-card {
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow-sm);
}

.card:hover,
.mini-card:hover,
.plan-box:hover {
    box-shadow: var(--ai-shadow);
}

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ai-surface-muted);
    --bs-table-hover-bg: var(--ai-primary-soft);
    color: var(--ai-text);
    font-size: 0.9rem;
}

.table thead th {
    background: var(--ai-surface-muted);
    color: var(--ai-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ai-border);
}

.table > :not(caption) > * > * {
    border-color: var(--ai-border);
    padding: 0.75rem 0.9rem;
}

/* ---------- Alerts and badges ---------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--ai-radius-sm);
    font-size: 0.9rem;
}

.alert-success {
    background: var(--ai-success-soft);
    color: #065f46;
    border-color: #a7f3d0;
}

.alert-warning {
    background: var(--ai-warning-soft);
    color: #92400e;
    border-color: #fde68a;
}

.alert-danger {
    background: var(--ai-danger-soft);
    color: #991b1b;
    border-color: #fecaca;
}

.alert-info {
    background: var(--ai-primary-soft);
    color: #3730a3;
    border-color: #c7d2fe;
}

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35em 0.7em;
}

/* ---------- Utility ---------- */
.text-web-primary {
    color: var(--ai-primary);
}

.box-shadow {
    box-shadow: var(--ai-shadow);
}

.no-wrap-text {
    white-space: nowrap;
}

/* ---------- Scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}