/*
|--------------------------------------------------------------------------
| AcNova Readability Compatibility System
|--------------------------------------------------------------------------
| Safe final-layer readability rules for public, auth and marketplace UI.
| Does not reposition admin Command Centre layouts.
|--------------------------------------------------------------------------
*/

:root,
html[data-theme="light"] {
    color-scheme: light;

    --acn-page-bg: #f5f7f4;
    --acn-surface: #ffffff;
    --acn-surface-soft: #eef3ef;
    --acn-surface-strong: #173e29;

    --acn-text: #14271d;
    --acn-heading: #163b28;
    --acn-muted: #53685c;
    --acn-subtle: #6b7d73;

    --acn-border: #d8e3db;
    --acn-border-strong: #a9bcae;

    --acn-link: #08783d;
    --acn-link-hover: #045f2f;

    --acn-focus: #159447;
    --acn-success: #08783d;
    --acn-warning: #815b00;
    --acn-danger: #a52f2f;

    --acn-on-dark: #ffffff;
    --acn-on-dark-muted: #d4e5da;
}

html[data-theme="dark"],
body.dark {
    color-scheme: dark;

    --acn-page-bg: #07110d;
    --acn-surface: #102019;
    --acn-surface-soft: #162a21;
    --acn-surface-strong: #1c4930;

    --acn-text: #f1faf4;
    --acn-heading: #ffffff;
    --acn-muted: #c1d2c7;
    --acn-subtle: #a9beb0;

    --acn-border: #2d493b;
    --acn-border-strong: #456554;

    --acn-link: #79e9a1;
    --acn-link-hover: #a0f3bd;

    --acn-focus: #63dc8d;
    --acn-success: #79e9a1;
    --acn-warning: #f5cf67;
    --acn-danger: #ff9f98;

    --acn-on-dark: #ffffff;
    --acn-on-dark-muted: #d8e8de;
}

/*
|--------------------------------------------------------------------------
| Base readability
|--------------------------------------------------------------------------
*/

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(.agrios-admin-body) {
    background-color: var(--acn-page-bg);
    color: var(--acn-text);
}

main,
.page-content,
.public-page,
.auth-page,
.marketplace-page {
    color: var(--acn-text);
}

main p,
main li,
main label,
main small,
main td {
    text-wrap: pretty;
}

main p,
main li {
    line-height: 1.7;
}

a {
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--acn-focus) 45%,
        transparent
    );

    outline-offset: 2px;
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

body:not(.agrios-admin-body) input,
body:not(.agrios-admin-body) select,
body:not(.agrios-admin-body) textarea {
    color: var(--acn-text);
    background-color: var(--acn-surface);
    border-color: var(--acn-border);
}

body:not(.agrios-admin-body) input::placeholder,
body:not(.agrios-admin-body) textarea::placeholder {
    color: var(--acn-subtle);
    opacity: 1;
}

html[data-theme="dark"] body:not(.agrios-admin-body) input,
html[data-theme="dark"] body:not(.agrios-admin-body) select,
html[data-theme="dark"] body:not(.agrios-admin-body) textarea,
body.dark:not(.agrios-admin-body) input,
body.dark:not(.agrios-admin-body) select,
body.dark:not(.agrios-admin-body) textarea {
    color: var(--acn-text);
    background-color: var(--acn-surface);
    border-color: var(--acn-border);
}

/*
|--------------------------------------------------------------------------
| About page — controlled contrast repair
|--------------------------------------------------------------------------
*/

.about-final-wrap {
    color: var(--acn-text);
}

.about-final-card {
    color: var(--acn-on-dark);
    background:
        linear-gradient(
            180deg,
            rgba(16, 74, 43, .96),
            rgba(5, 34, 20, .96)
        );

    border-color: rgba(212, 160, 23, .42);
}

.about-final-card h1,
.about-final-card h2,
.about-final-card h3,
.about-final-card strong {
    color: var(--acn-on-dark);
    opacity: 1;
    text-shadow: none;
}

.about-final-card p,
.about-final-card li,
.about-final-card span:not(.about-pill) {
    color: var(--acn-on-dark-muted);
    opacity: 1;
    text-shadow: none;
}

.about-final-card .about-pill {
    color: #e4fba7;
    background: rgba(34, 197, 94, .18);
    border-color: rgba(94, 234, 145, .58);
}

.about-final-card .btn-primary {
    color: #052e16;
}

.about-final-card .btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .44);
}

.about-final-card .btn-outline:hover {
    background: rgba(255, 255, 255, .13);
}

/*
|--------------------------------------------------------------------------
| Light-mode white cards
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .about-card,
html[data-theme="light"] .command-card,
html[data-theme="light"] .marketplace-card,
html[data-theme="light"] .auth-card {
    color: var(--acn-text);
}

html[data-theme="light"] .about-card h1,
html[data-theme="light"] .about-card h2,
html[data-theme="light"] .about-card h3,
html[data-theme="light"] .command-card h1,
html[data-theme="light"] .command-card h2,
html[data-theme="light"] .command-card h3 {
    color: var(--acn-heading);
}

html[data-theme="light"] .about-card p,
html[data-theme="light"] .about-card li,
html[data-theme="light"] .command-card p,
html[data-theme="light"] .command-card li {
    color: var(--acn-muted);
}

/*
|--------------------------------------------------------------------------
| Dark-mode public cards
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .about-card,
html[data-theme="dark"] .command-card,
html[data-theme="dark"] .marketplace-card,
html[data-theme="dark"] .auth-card,
body.dark .about-card,
body.dark .command-card,
body.dark .marketplace-card,
body.dark .auth-card {
    color: var(--acn-text);
    background-color: var(--acn-surface);
    border-color: var(--acn-border);
}

html[data-theme="dark"] .about-card h1,
html[data-theme="dark"] .about-card h2,
html[data-theme="dark"] .about-card h3,
html[data-theme="dark"] .command-card h1,
html[data-theme="dark"] .command-card h2,
html[data-theme="dark"] .command-card h3,
body.dark .about-card h1,
body.dark .about-card h2,
body.dark .about-card h3,
body.dark .command-card h1,
body.dark .command-card h2,
body.dark .command-card h3 {
    color: var(--acn-heading);
    opacity: 1;
}

html[data-theme="dark"] .about-card p,
html[data-theme="dark"] .about-card li,
html[data-theme="dark"] .command-card p,
html[data-theme="dark"] .command-card li,
body.dark .about-card p,
body.dark .about-card li,
body.dark .command-card p,
body.dark .command-card li {
    color: var(--acn-muted);
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Marketplace and auth readability
|--------------------------------------------------------------------------
*/

.marketplace-page h1,
.marketplace-page h2,
.marketplace-page h3,
.auth-page h1,
.auth-page h2,
.auth-page h3 {
    opacity: 1;
}

html[data-theme="dark"] .marketplace-page,
html[data-theme="dark"] .auth-page,
body.dark .marketplace-page,
body.dark .auth-page {
    color: var(--acn-text);
}

html[data-theme="dark"] .marketplace-page p,
html[data-theme="dark"] .marketplace-page span,
html[data-theme="dark"] .marketplace-page small,
html[data-theme="dark"] .auth-page p,
html[data-theme="dark"] .auth-page span,
html[data-theme="dark"] .auth-page small,
body.dark .marketplace-page p,
body.dark .marketplace-page span,
body.dark .marketplace-page small,
body.dark .auth-page p,
body.dark .auth-page span,
body.dark .auth-page small {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| RTL foundation for Arabic
|--------------------------------------------------------------------------
*/

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .auth-actions {
    direction: rtl;
}

/*
|--------------------------------------------------------------------------
| Mobile readability
|--------------------------------------------------------------------------
*/

@media (max-width: 680px) {
    body:not(.agrios-admin-body) {
        font-size: 16px;
    }

    .about-final-card p,
    .about-final-card li {
        font-size: 16px;
        line-height: 1.72;
    }

    button,
    .btn,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}

/*
|--------------------------------------------------------------------------
| About page final contrast authority — 2026-08-04
|--------------------------------------------------------------------------
| Scoped narrowly to About. Overrides legacy !important rules without
| changing Home, Marketplace, Auth or Command Centre positioning.
|--------------------------------------------------------------------------
*/

html[data-theme="light"] body
.about-final-wrap
.about-final-card:not(.hero-card),

html[data-theme="dark"] body
.about-final-wrap
.about-final-card:not(.hero-card),

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) {
    background:
        linear-gradient(
            145deg,
            #155c37,
            #082c1b
        ) !important;

    color: #ffffff !important;

    border-color:
        rgba(212, 160, 23, .50) !important;
}

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) h1,

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) h2,

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) h3,

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) strong,

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) h1,

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) h2,

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) h3 {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) p,

html[data-theme] body
.about-final-wrap
.about-final-card:not(.hero-card) li,

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) p,

body.dark
.about-final-wrap
.about-final-card:not(.hero-card) li {
    color: #dceee3 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme] body
.about-final-wrap
.module-card,

body.dark
.about-final-wrap
.module-card {
    background:
        rgba(255, 255, 255, .09) !important;

    color: #ffffff !important;

    border-color:
        rgba(255, 255, 255, .22) !important;
}

html[data-theme] body
.about-final-wrap
.module-card h3,

body.dark
.about-final-wrap
.module-card h3 {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme] body
.about-final-wrap
.about-pill,

body.dark
.about-final-wrap
.about-pill {
    color: #efffa9 !important;

    background:
        rgba(22, 163, 74, .20) !important;

    border-color:
        rgba(74, 222, 128, .65) !important;

    opacity: 1 !important;
}

/*
|--------------------------------------------------------------------------
| About core modules compact cards
|--------------------------------------------------------------------------
*/

.about-final-wrap .module-grid {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 14px !important;
    margin-top: 24px !important;
}

.about-final-wrap .module-card {
    min-height: 88px !important;
    height: auto !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    padding: 18px 20px !important;

    border-radius: 18px !important;
}

.about-final-wrap .module-card h3 {
    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.28 !important;
}

@media (max-width: 980px) {
    .about-final-wrap .module-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .about-final-wrap .module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .about-final-wrap .module-card {
        min-height: 76px !important;
        padding: 14px 15px !important;
        border-radius: 15px !important;
    }

    .about-final-wrap .module-card h3 {
        font-size: 15px !important;
    }
}

@media (max-width: 430px) {
    .about-final-wrap .module-grid {
        grid-template-columns: 1fr !important;
    }
}