/* ════════════════════════════════════════════════════
 * lani-ui.css — Lani Prime shared UI primitives
 * ════════════════════════════════════════════════════
 *
 * Cross-cutting design tokens used by Settings, Billing, modals, and any
 * other shell surface that needs a consistent button / input / badge.
 *
 * Naming uses `lani-*` prefix to signal "design system primitive" — these
 * classes should look the same wherever they appear in the shell. App- or
 * section-specific styling lives in the per-app CSS file (e.g.
 * `apps/settings-billing.css` for billing layout, `apps/chat.css` for
 * chat-specific bits).
 */

/* ── Buttons ─────────────────────────────────────── */

.lani-btn-primary {
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, opacity 0.15s;
}

.lani-btn-primary:hover:not(:disabled) {
    background: #059669;
}

.lani-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lani-btn-secondary {
    padding: 8px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}

.lani-btn-secondary:hover:not(:disabled) {
    border-color: var(--accent);
}

.lani-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Larger variant — modal action buttons. Combine with .lani-btn-primary
 * or .lani-btn-secondary for the base styling. */
.lani-btn-primary--lg,
.lani-btn-secondary--lg {
    padding: 10px 16px;
}

/* Small destructive action — used in compact lists where a full danger
 * button would be visually heavy. */
.lani-btn-tertiary-danger {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--error, #ef4444);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.lani-btn-tertiary-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
}

.lani-btn-tertiary-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal scaffolding ───────────────────────────── */

.lani-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lani-modal-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.lani-modal-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Standard padding for the inner content of a .lani-modal-card. Avoids
 * having to remember `style="padding: 24px;"` on every new modal. */
.lani-modal-body {
    padding: 24px;
}

/* ── Form fields ─────────────────────────────────── */

/* Standalone text/email input — full-width up to a max so labels don't
 * stretch past readable width. */
.lani-input {
    width: 100%;
    max-width: 500px;
    padding: 9px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.lani-input:focus {
    border-color: var(--accent);
}

/* Wrapper for an input with a unit/prefix label inside (e.g. "$ ____"). */
.lani-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
}

/* Bare input that lives INSIDE .lani-input-group — no border or background
 * since the group provides them. */
.lani-input-group .lani-input-bare {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    width: 100%;
    outline: none;
}

.lani-form-label {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Compact label variant for stacked form fields where the hint follows. */
.lani-form-label-tight {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.lani-form-hint {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0 0 8px;
}

.lani-form-hint-tight {
    color: var(--text-secondary);
    font-size: 11px;
    margin: 4px 0 0;
}

/* Inline checkbox + label pair. Pairs nicely with descriptive `<span>`
 * children that wrap onto multiple lines. */
.lani-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

/* Native select with the OS-default chevron stripped so we can lay our own
 * SVG arrow on top of it. Wrap in a relatively-positioned parent and
 * absolute-position the SVG arrow at the right edge. */
.lani-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 9px 32px 9px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.lani-select:focus {
    border-color: var(--accent);
}

/* ── Status badges + pills ──────────────────────── */

.lani-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.lani-badge--success { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.lani-badge--warning { background: rgba(251, 146, 60, 0.1); color: #fb923c; }
.lani-badge--danger  { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.lani-badge--neutral { background: rgba(100, 116, 139, 0.1); color: var(--text-secondary); }

/* Compact "Fired" / "Default" pill — shorter than .lani-badge so it can sit
 * inline next to a heading without dominating it. */
.lani-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.lani-pill--success { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.lani-pill--neutral { background: rgba(0, 0, 0, 0.05); color: var(--text-secondary); border: 1px solid var(--border); }