@tailwind base;
@tailwind components;
@tailwind utilities;

/* Prism Syntax Highlighting -----------------------------------------------------------------------------------------------------------*/


/* css variables example -----------------------------------------------------------------------------------------------------------*/

:root {
    --quickgrid-sort-indicator-img-light: url('data:image/svg+xml;utf8,<svg  fill="rgb(17 24 39)" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
    --quickgrid-sort-indicator-img-dark: url('data:image/svg+xml;utf8,<svg  fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
}


.leading-4\.5 {
    line-height: 1.15rem;
}

pre {
    @apply text-gray-100 dark:text-gray-100 rounded-lg text-xs bg-gray-800 dark:bg-gray-800/50 px-2 pb-1 overflow-x-auto leading-4.5;
}

.token.tag,
.token.function,
.token.property {
    @apply text-pink-400;
}

.token.attr-name {
    @apply text-sky-300;
}

.token.attr-value,
.token.string {
    @apply text-green-400;
}

.token.punctuation,
.token.attr-equals {
    @apply text-gray-400;
}

.token.comment {
    @apply text-gray-500;
}

.token.operator {
    @apply text-yellow-400;
}

.token.keyword {
    @apply text-purple-400;
}

.token.block {
    display: initial;
}

.line-highlight {
    @apply absolute inset-x-0 mt-[1.25rem] border-l-4 border-blue-400 bg-blue-400/15 pointer-events-none;
}

pre[data-line] {
    @apply relative;
}

pre[class^='language-diff-'] {
    @apply flex px-9;
}

pre[class^='language-diff-'] > code {
    @apply flex-none min-w-full;
}


/* Styling for the Quick Grid  BEGIN --------------------------------------------------------------------------------------------------*/

.flowbite-grid {
    @apply max-h-table-xl overflow-y-auto bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-400;
}

.quickgrid[theme=flowbite] {
    @apply text-left leading-tight text-gray-900 dark:text-gray-400 align-top;    
}

.quickgrid[theme=flowbite] tr:hover {
    @apply bg-gray-100 dark:bg-gray-700;
}



.quickgrid[theme=flowbite] .col-title {
    font-weight: 500;
    letter-spacing: 0.05em;
}

.quickgrid[theme=flowbite] > thead {
    @apply sticky top-0 bg-gray-50 text-gray-500 leading-9 text-sm tracking-wider border border-gray-200 -gray-700 dark:bg-gray-700 dark:text-white;
}

.quickgrid[theme=flowbite] > thead > tr > th {
    @apply align-top px-3;
}

.quickgrid[theme=flowbite] > tbody > tr > td {
    @apply align-top p-3;
}

.quickgrid[theme=flowbite] tr {
    @apply border border-gray-200 -gray-700;
}


.quickgrid[theme=flowbite] .sort-indicator {    
    @apply ml-1;
    background-image: var(--quickgrid-sort-indicator-img-light);
}

.dark .quickgrid[theme=flowbite] .sort-indicator {
    @apply ml-1;
    background-image: var(--quickgrid-sort-indicator-img-dark);
}


.quickgrid[theme=flowbite] .col-options {
    @apply dark:bg-gray-700 dark:text-white text-xs p-0;
}

.quickgrid[theme=flowbite] .col-options  input ,select, textarea {
    @apply text-xs;
}

.quickgrid[theme=flowbite] input {
    @apply dark:bg-gray-700;
}

.quickgrid[theme=flowbite] .col-options-button {
    @apply mr-1;
    background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="rgb(17 24 39)" stroke-linecap="round" stroke-width="2" d="M18.796 4H5.204a1 1 0 0 0-.753 1.659l5.302 6.058a1 1 0 0 1 .247.659v4.874a.5.5 0 0 0 .2.4l3 2.25a.5.5 0 0 0 .8-.4v-7.124a1 1 0 0 1 .247-.659l5.302-6.059c.566-.646.106-1.658-.753-1.658Z"/></svg>');
}

.dark .quickgrid[theme=flowbite] .col-options-button {
    @apply mr-1;
    background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="white" stroke-linecap="round" stroke-width="2" d="M18.796 4H5.204a1 1 0 0 0-.753 1.659l5.302 6.058a1 1 0 0 1 .247.659v4.874a.5.5 0 0 0 .2.4l3 2.25a.5.5 0 0 0 .8-.4v-7.124a1 1 0 0 1 .247-.659l5.302-6.059c.566-.646.106-1.658-.753-1.658Z"/></svg>');
}




/* Styling for the Quick Grid  END --------------------------------------------------------------------------------------------------*/


/* Markdown Content Styles BEGIN --------------------------------------------------------------------------------------------------*/

.markdown-content {
    @apply text-gray-900 dark:text-gray-100;
}

/* Typography */
.markdown-content p {
    @apply mb-4 text-base leading-relaxed;
}

.markdown-content h1 {
    @apply text-4xl font-bold mb-4 mt-8 text-gray-900 dark:text-white;
}

.markdown-content h2 {
    @apply text-3xl font-bold mb-3 mt-6 text-gray-900 dark:text-white;
}

.markdown-content h3 {
    @apply text-2xl font-bold mb-3 mt-5 text-gray-900 dark:text-white;
}

.markdown-content h4 {
    @apply text-xl font-bold mb-2 mt-4 text-gray-900 dark:text-white;
}

.markdown-content h5 {
    @apply text-lg font-bold mb-2 mt-3 text-gray-900 dark:text-white;
}

.markdown-content h6 {
    @apply text-base font-bold mb-2 mt-3 text-gray-900 dark:text-white;
}

/* Links */
.markdown-content a {
    @apply text-blue-600  hover:underline;
}

/* Inline Code */
.markdown-content code:not(pre code) {
    @apply px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-sm font-mono text-pink-600 dark:text-pink-400;
}

/* Code Blocks */
.markdown-content pre {
    @apply mb-4 rounded-lg overflow-x-auto bg-gray-900 dark:bg-gray-950;
}

.markdown-content pre code {
    @apply block p-4 text-sm font-mono text-gray-100 dark:text-gray-200 bg-transparent;
}

/* Lists */
.markdown-content ul {
    @apply mb-4 list-disc list-inside space-y-1 text-gray-900 dark:text-gray-100;
}

.markdown-content ol {
    @apply mb-4 list-decimal list-inside space-y-1 text-gray-900 dark:text-gray-100;
}

.markdown-content li {
    @apply leading-relaxed;
}

.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
    @apply ml-6 mt-1 mb-1;
}

/* Task Lists */
.markdown-content input[type="checkbox"] {
    @apply mr-2 h-4 w-4 rounded border-gray-300 -gray-600 text-blue-600 focus:ring-blue-500;
}

.markdown-content li input[type="checkbox"] {
    @apply align-middle;
}

/* Tables */
.markdown-content table {
    @apply w-full mb-4 border-collapse text-sm;
}

.markdown-content thead {
    @apply bg-gray-50 dark:bg-gray-700;
}

.markdown-content thead th {
    @apply px-4 py-2 text-left font-semibold text-gray-900 dark:text-white border-b border-gray-200 -gray-600;
}

.markdown-content tbody tr {
    @apply border-b border-gray-200 -gray-700;
}

.markdown-content tbody tr:hover {
    @apply bg-gray-50 dark:bg-gray-800;
}

.markdown-content tbody td {
    @apply px-4 py-2 text-gray-900 dark:text-gray-100;
}

/* Blockquotes */
.markdown-content blockquote {
    @apply mb-4 pl-4 border-l-4 border-gray-300 -gray-600 italic text-gray-700 dark:text-gray-300;
}

/* Horizontal Rules */
.markdown-content hr {
    @apply my-6 border-t border-gray-300 -gray-600;
}

/* Images */
.markdown-content img {
    @apply max-w-full h-auto rounded-lg my-4;
}

/* Strong/Bold */
.markdown-content strong {
    @apply font-bold text-gray-900 dark:text-white;
}

/* Emphasis/Italic */
.markdown-content em {
    @apply italic;
}

/* Muted Variant for Reasoning Content */
.markdown-content-muted {
    @apply text-gray-400 dark:text-gray-400;
}

.markdown-content-muted p,
.markdown-content-muted h1,
.markdown-content-muted h2,
.markdown-content-muted h3,
.markdown-content-muted h4,
.markdown-content-muted h5,
.markdown-content-muted h6 {
    @apply text-gray-400 dark:text-gray-400;
}

.markdown-content-muted a {
    @apply text-gray-500 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400;
}

.markdown-content-muted strong {
    @apply font-bold text-gray-400 dark:text-gray-400;
}

.markdown-content-muted code:not(pre code) {
    @apply text-gray-500 dark:text-gray-500 bg-gray-100 dark:bg-gray-700;
}

.markdown-content-muted pre code {
    @apply text-gray-400 dark:text-gray-400;
}

.markdown-content-muted blockquote {
    @apply text-gray-500 dark:text-gray-500 border-gray-400 -gray-600;
}

.markdown-content-muted thead th {
    @apply text-gray-400 dark:text-gray-400;
}

.markdown-content-muted tbody td {
    @apply text-gray-400 dark:text-gray-400;
}

.markdown-content-muted ul,
.markdown-content-muted ol,
.markdown-content-muted li {
    @apply text-gray-400 dark:text-gray-400;
}

/* Markdown Content Styles END --------------------------------------------------------------------------------------------------*/