.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}

.bg-whites {
    background-color: #fff;
}

.bg-blacks {
    background-color: #000;
}

/* Enhanced contrast for cards and UI elements */
[data-theme="light"] .card {
    background-color: oklch(98% 0 0);
    border: 1px solid oklch(85% 0.01 343.231);
    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] .card {
    background-color: oklch(15% 0.005 17.911);
    border: 1px solid oklch(25% 0.01 17.911);
    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.3), 0 2px 4px -2px oklch(0% 0 0 / 0.2);
}



/* Enhanced text contrast for better readability */
[data-theme="light"] {
    --tw-prose-body: oklch(10% 0.05 3.958);
    --tw-prose-headings: oklch(5% 0.05 3.958);
    --tw-prose-lead: oklch(25% 0.05 3.958);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: oklch(5% 0.05 3.958);
    --tw-prose-counters: oklch(40% 0.05 3.958);
    --tw-prose-bullets: oklch(60% 0.05 3.958);
    --tw-prose-hr: oklch(85% 0.01 343.231);
    --tw-prose-quotes: oklch(20% 0.05 3.958);
    --tw-prose-quote-borders: oklch(85% 0.01 343.231);
    --tw-prose-captions: oklch(40% 0.05 3.958);
    --tw-prose-code: oklch(15% 0.05 3.958);
    --tw-prose-pre-code: oklch(85% 0.01 343.231);
    --tw-prose-pre-bg: oklch(95% 0.005 343.231);
    --tw-prose-th-borders: oklch(80% 0.01 343.231);
    --tw-prose-td-borders: oklch(90% 0.005 343.231);
}

[data-theme="dark"] {
    --tw-prose-body: oklch(95% 0.001 17.911);
    --tw-prose-headings: oklch(98% 0.001 17.911);
    --tw-prose-lead: oklch(80% 0.001 17.911);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: oklch(98% 0.001 17.911);
    --tw-prose-counters: oklch(70% 0.001 17.911);
    --tw-prose-bullets: oklch(50% 0.001 17.911);
    --tw-prose-hr: oklch(25% 0.01 17.911);
    --tw-prose-quotes: oklch(85% 0.001 17.911);
    --tw-prose-quote-borders: oklch(25% 0.01 17.911);
    --tw-prose-captions: oklch(70% 0.001 17.911);
    --tw-prose-code: oklch(90% 0.001 17.911);
    --tw-prose-pre-code: oklch(80% 0.001 17.911);
    --tw-prose-pre-bg: oklch(10% 0.005 17.911);
    --tw-prose-th-borders: oklch(30% 0.01 17.911);
    --tw-prose-td-borders: oklch(20% 0.005 17.911);
}

/* Tailwind Typography Plugin Styles */
.prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-lead);
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-links);
    text-decoration: underline;
    font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
    font-weight: 600;
}

.prose :where(ol):not(:where([class~="not-prose"] *)) {
    list-style-type: decimal;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
    list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"] *)) {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
    font-weight: 400;
    color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
    color: var(--tw-prose-bullets);
}

.prose :where(hr):not(:where([class~="not-prose"] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    font-weight: 500;
    font-style: italic;
    color: var(--tw-prose-quotes);
    border-left-width: 0.25rem;
    border-left-color: var(--tw-prose-quote-borders);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
    content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
    content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 900;
    color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 800;
    color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-captions);
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-code);
    font-weight: 600;
    font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"] *))::before {
    content: "`";
}

.prose :where(code):not(:where([class~="not-prose"] *))::after {
    content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(thead th):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    vertical-align: bottom;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
    padding-top: 0.5714286em;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding-top: 0.8571429em;
    padding-right: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-left: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"] *)) {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
    content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
    content: none;
}

.prose :where(table):not(:where([class~="not-prose"] *)) {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
    vertical-align: baseline;
}

.prose-sm {
    font-size: 0.875rem;
    line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.1428571em;
    margin-bottom: 1.1428571em;
}

.prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
}

.prose-lg :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
}

.prose-xl {
    font-size: 1.25rem;
    line-height: 1.8;
}

.prose-xl :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.prose-2xl {
    font-size: 1.5rem;
    line-height: 1.6666667;
}

.prose-2xl :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.0666667em;
    margin-bottom: 1.0666667em;
}



/* Avatar enhanced contrast */
[data-theme="light"] .avatar .bg-neutral {
    background-color: oklch(15% 0.153 2.432) !important;
    color: oklch(95% 0.005 343.231) !important;
}

[data-theme="dark"] .avatar .bg-neutral {
    background-color: oklch(85% 0.02 171.364) !important;
    color: oklch(5% 0.039 171.364) !important;
}



/* TASTE ASCII-inspired Angular Design Overrides */
/* Make all UI elements more angular and blocky like the ASCII art */

/* Angular card styling */
[data-theme="light"] .card,
[data-theme="dark"] .card {
    border-radius: 0rem !important;
    border-width: 3px !important;
    box-shadow: 4px 4px 0px oklch(0% 0 0 / 0.2) !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .card:hover,
[data-theme="dark"] .card:hover {
    box-shadow: 6px 6px 0px oklch(0% 0 0 / 0.3) !important;
    transform: translate(-2px, -2px) !important;
}



/* Angular input and form styling */
.input, .textarea, .select {
    border-radius: 0rem !important;
    border-width: 3px !important;
    border-color: var(--color-base-content) !important;
}

.input:focus, .textarea:focus, .select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 3px 3px 0px var(--color-primary) !important;
}

/* Angular navigation and header elements */
.navbar {
    border-radius: 0rem !important;
    border-bottom: 3px solid var(--color-base-content) !important;
}

/* Angular modal and overlay styling */
.modal-box {
    border-radius: 0rem !important;
    border: 3px solid var(--color-base-content) !important;
    box-shadow: 8px 8px 0px oklch(0% 0 0 / 0.2) !important;
}

/* Typography adjustments for ASCII-inspired design */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* Angular progress and loading indicators */
.progress {
    border-radius: 0rem !important;
    border: 2px solid var(--color-base-content) !important;
}