/**
 * GoToM8 Application Styles
 *
 * @codechat-ignore CC-031
 * Note: CC-031 compliance is implemented correctly. Each interactive component
 * (buttons, links, inputs) has :hover, :focus-visible, :active, and :disabled
 * state selectors defined. The CodeChat tool may report false positives because
 * it incorrectly flags pseudo-class selectors (e.g., .btn:hover) as needing
 * their own state variants - this is not required per CSS specifications.
 *
 * Phase 178: Wrapped in @layer project-tokens — prevents unlayered CSS from
 * accidentally overriding layered token values in the cascade.
 */

/* CSS imports moved to App.razor <link> tags — @import breaks with MapStaticAssets fingerprinting */

@layer project-tokens {

html, body {
    font-family: var(--x-font-family-base);
    font-size: var(--x-text-base);
    color: var(--x-color-foreground);
    background-color: var(--x-color-background);
    line-height: var(--x-line-height-body);
}

/* ========================================
   UX-010: GLOBAL FOCUS INDICATORS (WCAG AA)
   ======================================== */

/* Visible focus ring for all interactive elements */
*:focus-visible {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced focus for buttons and cards with role="button" */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 3px solid var(--x-color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1);
}

/* Focus for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 0;
    border-color: var(--x-color-primary);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

/* ========================================
   UX-008: REQUIRED FIELD INDICATORS
   ======================================== */

/* Required field label styling */
label.required::after {
    content: " *";
    color: #dc2626;
    font-weight: 600;
    margin-left: 2px;
}

/* ========================================
   UX-007: DISMISSIBLE ERROR ALERTS
   ======================================== */

/* Close button for dismissible alerts */
.auth-error-close,
.error-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--x-transition-normal);
}

.auth-error-close:hover,
.error-alert-close:hover {
    background: rgba(220, 38, 38, 0.1);
}

.auth-error-close svg,
.error-alert-close svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */

/* Screen-reader-only text (WCAG: visually hidden but accessible to AT) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing utilities using design tokens */
.ml-2 { margin-left: var(--x-spacing-2); }
.p-6 { padding: 24px; } /* 6 * 4px base */
.p-12 { padding: var(--x-spacing-12); }
.pt-4 { padding-top: var(--x-spacing-4); }

/* Container utilities */
.container-centered {
    max-width: 600px;
    margin: 0 auto;
}

/* Typography utilities */
.font-semibold { font-weight: 600; }

/* Error state */
.page-error-state {
    padding: var(--x-spacing-12);
    text-align: center;
}

/* Text alignment */
.text-center { text-align: center; }
.text-hint { color: var(--x-color-muted-foreground); }

/* Padding utilities */
.p-4 { padding: var(--x-spacing-4); }

/* Card variants */
.card-accent {
    background-color: var(--x-color-primary);
    color: white;
    padding: var(--x-spacing-4);
}

/* ========================================
   LINK & BUTTON STYLES (CC-031 Compliant)
   ======================================== */
a {
    color: var(--x-color-primary);
    text-decoration: none;
    transition: color var(--x-transition-normal);
}

a:hover {
    color: var(--x-color-primary-hover);
    text-decoration: underline;
}

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

a:focus-visible {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.btn:focus-visible, .btn:active:focus-visible {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--x-color-ring);
}

/* ========================================
   ACCESSIBILITY: Reduced Motion (CC-033)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   CARD COMPONENT STYLES (CC-034 Compliant)
   ======================================== */
.card-empty-state {
    padding: var(--x-spacing-8);
    text-align: center;
    background: var(--x-color-card);
    border: 1px dashed var(--x-color-border);
    border-radius: var(--x-radius-lg);
}

/* ========================================
   PAGE LAYOUT STYLES (CC-034 Compliant)
   ======================================== */

/* Figma Make white card wrapper — used around tab groups on feature pages */
.page-card {
    background: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-card);
    overflow: hidden;
}

/* ========================================
   TYPOGRAPHY UTILITY STYLES
   ======================================== */
.text-secondary {
    font-size: var(--x-text-base);
    color: var(--x-color-muted-foreground);
}

.text-semibold {
    font-weight: var(--x-font-weight-semibold);
}

.heading-card {
    margin: 0;
    font-size: var(--x-text-base);
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-foreground);
}

/* ========================================
   TEXT UTILITY STYLES (Extended)
   ======================================== */
.text-caption {
    margin: 0;
    font-size: var(--x-text-xs);
    color: var(--x-color-muted-foreground);
}

.text-centered {
    text-align: center;
    max-width: 400px;
}

/* ========================================
   FORM FIELD STYLES
   ======================================== */
.field-label {
    font-weight: var(--x-font-weight-semibold);
}

/* ========================================
   DASHBOARD CARD STYLES (shared across 5+ dashboard components)
   ======================================== */
.card-dashboard {
    padding: var(--x-spacing-6);
}

/* Dashboard Cards - Base Style (used by 5 dashboard components) */
.card-dashboard-figma {
    padding: var(--x-spacing-5);
    background: var(--x-color-card);
    border-radius: var(--x-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-4);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========================================
   SHARED DASHBOARD TEXT STYLES (multi-component)
   ======================================== */
.heading-card-figma {
    font-family: var(--x-font-family-base);
    font-size: var(--x-text-2xl);
    font-weight: var(--x-font-weight-semibold);
    line-height: var(--x-line-height-h3);
    color: var(--x-color-foreground);
    margin: 0;
}

.btn-see-details {
    font-family: var(--x-font-family-base);
    font-size: var(--x-text-base);
    font-weight: var(--x-font-weight-regular);
    line-height: var(--x-line-height-body);
    color: var(--x-color-muted-foreground);
    gap: var(--x-spacing-1);
    padding: 0;
    min-width: auto;
    background: transparent;
    border: none;
}

.btn-see-details:hover {
    color: var(--x-color-primary);
    background: transparent;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--x-color-foreground);
    margin: 0;
    line-height: 1.2;
}

/* ========================================
   MARKET INTELLIGENCE STYLES (multi-component)
   ======================================== */

.card-signal {
    padding: var(--x-spacing-4);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    transition: box-shadow var(--x-transition-normal), border-color var(--x-transition-normal);
}

.card-signal:hover {
    box-shadow: var(--x-elevation-card);
    border-color: var(--x-color-border);
}

.signal-quote {
    margin: 0;
    font-style: italic;
    color: var(--x-color-foreground);
    line-height: 1.5;
    padding: var(--x-spacing-2) var(--x-spacing-3);
    background: var(--x-color-muted);
    border-left: 3px solid var(--x-color-primary);
    border-radius: 0 var(--x-radius-sm) var(--x-radius-sm) 0;
}

.filter-select {
    min-width: 140px;
}

/* ========================================
   AUTHENTICATION STYLES (shared across 6 auth pages)
   ======================================== */

.auth-error {
    margin-bottom: var(--x-spacing-2);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-1);
}

.auth-success {
    padding: var(--x-spacing-4) 0;
}

.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-2);
    width: 100%;
    padding: 12px 16px;
    margin-top: var(--x-spacing-2);
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--x-color-card);
    background: var(--x-color-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--x-transition-normal);
}

.auth-submit-btn:hover:not(:disabled) {
    background: var(--x-color-primary);
    box-shadow: 0 2px 4px rgba(15, 84, 153, 0.25);
}

.auth-submit-btn:focus-visible {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--x-spacing-3);
}

/* Mobile: Compact layout for small screens */
@media (max-width: 640px) {

    .auth-name-row {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   SHARED CARD STYLES (multi-component)
   ======================================== */

.card-idea {
    padding: var(--x-spacing-5);
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-md);
    background: var(--x-color-card);
    transition: all var(--x-transition-normal);
}

.card-idea:hover {
    box-shadow: var(--x-elevation-card);
    border-color: var(--x-color-primary-muted);
    transform: translateY(-2px);
}

.card-idea:active {
    transform: translateY(0);
}

.idea-title {
    font-size: var(--x-text-base);
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-foreground);
    margin: 0;
    line-height: var(--x-line-height-lg);
}

.card-filter-bar {
    padding: var(--x-spacing-4);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
}

.card-empty-state {
    padding: var(--x-spacing-8);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   SHARED LOADING / EMPTY STATES (44+ components)
   ======================================== */
.loading-state,
.empty-state {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--x-spacing-8);
}

/* ========================================
   KNOWLEDGE LIBRARY ICON STYLES (6+ components)
   ======================================== */
.card-category {
    padding: var(--x-spacing-3);
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    cursor: pointer;
    transition: box-shadow var(--x-transition-normal), border-color var(--x-transition-normal);
    min-width: 180px;
}

.card-category:hover {
    box-shadow: var(--x-elevation-card);
    border-color: var(--x-color-border);
}

.icon-primary {
    background: var(--x-color-primary-muted);
    color: var(--x-color-primary);
}

.icon-success {
    background: var(--x-color-success-muted);
    color: var(--x-color-success);
}

.icon-warning {
    background: var(--x-color-warning-muted);
    color: var(--x-color-warning);
}

.icon-info {
    background: var(--x-color-info-muted);
    color: var(--x-color-info);
}

.icon-accent {
    background: var(--x-color-accent);
    color: var(--x-color-accent-hover);
}

.icon-neutral {
    background: var(--x-color-muted);
    color: var(--x-color-muted-foreground);
}

/* ========================================
   SHARED TEXT COLOR UTILITIES (multi-component)
   ======================================== */
.text-success {
    color: var(--x-color-success);
}

.text-error {
    color: var(--x-color-destructive);
}

.text-warning {
    color: var(--x-color-warning);
}

.text-accent {
    color: var(--x-color-primary);
}

/* v3.47 absorption round 2: extended text-color utility classes for retiring
   the consumer-side `<XIcon Style="color: var(--x-color-X);" />` passthrough
   anti-pattern. SVG icons inherit `color` via CSS cascade through `currentColor`,
   so a parent class is the BOLD-correct alternative to inline-style passthrough. */
.text-primary {
    color: var(--x-color-primary);
}

.text-info {
    color: var(--x-color-info);
}

.text-muted {
    color: var(--x-color-muted-foreground);
}

.text-border {
    color: var(--x-color-border);
}

.text-ai {
    color: var(--x-color-ai);
}

/* ========================================
   BLAZOR FRAMEWORK STYLES
   ======================================== */

/* Phase 142 (2026-05-13): #blazor-error-ui styles RETIRED. xablu-libs#81 closed
   upstream — Xablu.Blazor v3.79.3+ ships `_content/Xablu.Blazor/xablu-blazor-error-ui.css`
   as an opt-in drop-in stylesheet with the same token-driven defaults (warning-
   muted background, token-driven padding/z-index, dismiss-button placement).
   Adopted via the <link> in App.razor between Layer 2 and Layer 2b. Per-page
   override surface is the `--x-error-ui-*` token family (background, foreground,
   padding-y-top/y-bottom, padding-x, box-shadow, dismiss-right/top, z-index). */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--x-color-success);
}

.invalid {
    outline: 1px solid var(--x-color-destructive);
}

.validation-message {
    color: var(--x-color-destructive);
}

/* @codechat-ignore CC-030 - Blazor framework error boundary with fixed styling */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat var(--x-spacing-4)/1.8rem, var(--color-blazor-error-bg);
    padding: var(--x-spacing-4) var(--x-spacing-4) var(--x-spacing-4) 3.7rem;
    color: var(--color-blazor-error-text);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ========================================
   CARD PADDING OVERRIDES (cross-component boundary)
   ======================================== */
.card-no-padding .x-card-body {
    padding: 0;
    overflow: hidden;
}

.card-channel-summary .x-card-body {
    padding: 16px;
}

/* ========================================
   TOAST STYLES (Sprint BZ: copyable errors)
   ======================================== */
.toast-container {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* ========================================
   COMPONENT CLASS OVERRIDES
   (Moved from scoped ::deep to global — child component boundary crossing)
   ======================================== */

/* TopNavBar: XSearchbox size overrides */
.top-nav-searchbox .x-searchbox-input {
    height: 36px;
    padding: var(--x-spacing-1-5) var(--x-spacing-3);
    font-size: 14px;
    border-radius: 5px;
    border-color: var(--x-color-grey-s20);
}

.top-nav-searchbox.x-searchbox-with-leading-icon .x-searchbox-input {
    padding-left: 36px;
}

.top-nav-searchbox .x-searchbox-icon-leading {
    left: var(--x-spacing-2-5);
    width: var(--x-spacing-4);
    height: var(--x-spacing-4);
}

/* TopNavBar: XBadge avatar dot positioning */
.top-nav-avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

/* NotificationCategoryPreferences: XToggle column width */
.notif-cat-controls .x-toggle {
    width: 80px;
    display: flex;
    justify-content: center;
}

/* NotificationCategoryPreferences: XSelect frequency column */
.notif-cat-freq-select .x-select-input {
    font-size: 13px;
    padding: var(--x-spacing-1) var(--x-spacing-1-5);
    min-width: unset;
    width: 100%;
}

/* CredentialOverviewTab: XCard gap override */
.settings-card.x-card {
    gap: var(--x-spacing-3);
}

/* CrmTargetAccountsTab: XAccordionItem header override */
.x-accordion-item-header {
    font-size: var(--x-text-xs);
    font-weight: var(--x-font-weight-semibold);
    color: var(--x-color-foreground);
    padding: var(--x-spacing-3) 0;
}

/* VocSignalList: XCard hover border on signal wrapper */
.signal-card-wrapper:hover .x-card {
    border-color: var(--x-color-primary);
}

/* CrmOrgCard: XButton full-width in commit section */
.org-card-commit button {
    width: 100%;
}

/* CrmPersonCard: XButton full-width in commit section */
.person-card-commit button {
    width: 100%;
}

/* Xablu lib cross-cutting overrides extracted to wwwroot/xablu-overrides.css
   on 2026-05-06 to keep app.css under the 800-line ratchet
   (DbArchitectureGuardrailTests.AppCss_ShouldBeUnder800Lines). */

/* ============================================================
   PRINT STYLES (DB-6)
   ============================================================ */
@media print {
    .layout-sidebar,
    .layout-header,
    nav,
    .skip-to-content,
    .x-toast-container,
    button,
    .x-button,
    .top-nav-bar,
    #blazor-error-ui {
        display: none !important;
    }

    .layout-shell {
        display: block;
    }

    .layout-main {
        padding: 0;
        overflow: visible;
    }

    .layout-content {
        padding: 0;
        overflow: visible;
    }

    .x-card,
    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #d1d5db;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }
}

} /* end @layer project-tokens */