/* ============================================================================
   NOTAI foundation — typography classes, focus styling, page container, and a
   single tightly-scoped Radzen button normalization.

   SCOPING RULES (see Components/Shared/CONVENTIONS.md):
   - No bare element selectors that could match existing product markup.
   - The only rule that reaches Radzen internals is `.notai-app .rz-button`,
     always prefixed with `.notai-app`, never `!important`.
   - Shell / app-bar / sidebar / nav styling does NOT live here (Phase 2 →
     MainLayout.razor.css).
   ========================================================================== */

/* ---- Typography classes ------------------------------------------------- */
.notai-title {
    margin: 0;
    font-family: var(--notai-font-family);
    font-size: var(--notai-font-title);
    font-weight: var(--notai-weight-semibold);
    line-height: 1.3;
    color: var(--notai-text);
}

.notai-section-title {
    margin: 0;
    font-family: var(--notai-font-family);
    font-size: var(--notai-font-section);
    font-weight: var(--notai-weight-semibold);
    line-height: 1.4;
    color: var(--notai-text);
}

.notai-text {
    font-size: var(--notai-font-body);
    font-weight: var(--notai-weight-normal);
    line-height: 1.55;
    color: var(--notai-text);
}

.notai-text-secondary {
    font-size: var(--notai-font-secondary);
    font-weight: var(--notai-weight-normal);
    line-height: 1.5;
    color: var(--notai-text-secondary);
}

.notai-label {
    font-size: var(--notai-font-label);
    font-weight: var(--notai-weight-semibold);
    line-height: 1.4;
    color: var(--notai-text-secondary);
}

.notai-caption {
    font-size: var(--notai-font-caption);
    font-weight: var(--notai-weight-medium);
    line-height: 1.4;
    color: var(--notai-text-muted);
}

/* ---- Focus ring ------------------------------------------------------------
   Deliberately broad: applies to any keyboard-focused element, including
   Radzen controls. :focus-visible keeps it off mouse clicks. Outline only. */
.notai-app :focus-visible {
    outline: 2px solid var(--notai-focus-ring);
    outline-offset: 2px;
}

/* ---- Page container --------------------------------------------------------
   AppPage renders `.notai-app .notai-page .notai-page--{width}`. */
.notai-page {
    width: 100%;
    margin-inline: auto;
    padding: var(--notai-space-6) var(--notai-space-6) var(--notai-space-8);
    color: var(--notai-text);
    font-size: var(--notai-font-body);
}

.notai-page--narrow   { max-width: var(--notai-content-narrow); }
.notai-page--standard { max-width: var(--notai-content-standard); }
.notai-page--wide      { max-width: var(--notai-content-wide); }
.notai-page--full      { max-width: none; }

@media (max-width: 768px) {
    .notai-page {
        padding: var(--notai-space-4) var(--notai-space-4) var(--notai-space-6);
    }
}

/* ---- Status badge ----------------------------------------------------------
   Rendered by <StatusBadge>. Kept here (not scoped) so the same visual token
   can be reused by future non-component markup if needed. */
.notai-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--notai-space-1);
    padding: 2px var(--notai-space-2);
    border-radius: 999px;
    font-size: var(--notai-font-caption);
    font-weight: var(--notai-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.notai-badge--neutral { background: var(--notai-surface-sunken); color: var(--notai-text-secondary); border: 1px solid var(--notai-border-color); }
.notai-badge--info    { background: var(--notai-info-subtle);    color: var(--notai-info); }
.notai-badge--success { background: var(--notai-success-subtle); color: var(--notai-success); }
.notai-badge--warning { background: var(--notai-warning-subtle); color: var(--notai-warning); }
.notai-badge--danger  { background: var(--notai-danger-subtle);  color: var(--notai-danger); }

/* ---- Radzen button normalization (the one intentional .rz-* reach) ----- */
.notai-app .rz-button {
    min-height: var(--notai-control-h-md);
    border-radius: var(--notai-radius-md);
}

.notai-app .rz-button.rz-button-sm {
    min-height: var(--notai-control-h-sm);
}

.notai-app .rz-button.rz-button-lg {
    min-height: var(--notai-control-h-lg);
}

/* FILLED primary buttons only: Radzen Material Dark's primary is a pastel
   (#bb86fc) that fails contrast with its white label. Repaint filled primary
   buttons under the NOTAI shell / a migrated page with the fixed accessible
   --notai-primary. Text / flat / outlined variants keep Radzen's colours (a
   pastel *label* reads fine on a dark surface — only pastel-as-background +
   white-label was broken). Scoped to .notai-app, no !important. */
.notai-app .rz-button.rz-primary:not(.rz-state-disabled):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined) {
    background-color: var(--notai-primary);
    border-color: var(--notai-primary);
    color: var(--notai-text-on-accent);
}

.notai-app .rz-button.rz-primary:not(.rz-state-disabled):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined):hover,
.notai-app .rz-button.rz-primary:not(.rz-state-disabled):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined):focus {
    background-color: var(--notai-primary-hover);
    border-color: var(--notai-primary-hover);
    color: var(--notai-text-on-accent);
}