@import 'tailwindcss';
@plugin "@tailwindcss/typography";
@plugin "daisyui";

@source '../web-pages/**/*.rs';
@source 'typescript/**/*.ts';
@source inline("modal modal-box modal-action");
@source inline("breadcrumbs");
@source inline("badge badge-neutral badge-primary badge-outline badge-secondary badge-accent badge-info badge-success badge-warning badge-error");
@source inline("badge-md badge-sm");
@source inline("btn btn-secondary btn-accent btn-info btn-success btn-warning btn-error btn-outline btn-dash btn-soft btn-ghost btn-link btn-active btn-disabled btn-xs btn-sm btn-md btn-lg btn-xl btn-wide btn-block btn-square btn-circle");
@source inline("tab tabs tab-content tabs-border");
@source inline("tooltip tooltip-info");
@source inline("input input-border");
@source inline("select select-border");
@source inline("file-input");
@source inline("dropdown dropdown-top dropdown-left");
@source inline("fieldset fieldset-legend label");

:root {
    /** Brand Identity **/
    --color-primary: #3559c7;
}

/** 
    Since the tailwind upgrade cards have no padding 
    Also we alaways want a border
**/
.card {
    @apply bg-base-100 border border-base-300;
    > .card-header {
        @apply border-b border-base-300 p-4
    }
    > .card-body {
        @apply p-4;
    }
}

[data-theme="dark"] {
    .menu {
        > li > a > img {
            filter: invert(0.6);
        }
    
        > li > a.active > img {
            filter: invert(1);
        }
    }

    img.svg-icon {
        filter: invert(0.6);
    }

    .dropdown > label > img {
        filter: invert(0.6);
    }
}


[data-theme="light"] {
    /** The default menu is a bit scary **/
    /**.menu > li > a.menu-active {
        --menu-active-bg: var(--color-base-300);
        --menu-active-fg: var(--color-base-content);
    }**/
    .menu > li > a.menu-active > img {
        filter: invert(1);
    }

    /** Daisy UI colors we can set
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(96.115% 0 0);
    --color-base-300: oklch(92.416% 0.001 197.137);
    --color-base-content: oklch(27.807% 0.029 256.847);
    --color-primary: oklch(49.12% 0.309 275.75);
    --color-primary-content: oklch(89.824% 0.061 275.75);
    --color-secondary: oklch(69.71% 0.329 342.55);
    --color-secondary-content: oklch(98.71% 0.01 342.55);
    --color-accent: oklch(76.76% 0.184 183.61);
    --color-accent-content: oklch(15.352% 0.036 183.61);
    --color-neutral: oklch(20% 0.024 255.701);
    --color-neutral-content: oklch(89.499% 0.011 252.096);
    --color-info: oklch(72.06% 0.191 231.6);
    --color-info-content: oklch(0% 0 0);
    --color-success: oklch(64.8% 0.15 160);
    --color-success-content: oklch(0% 0 0);
    --color-warning: oklch(84.71% 0.199 83.87);
    --color-warning-content: oklch(0% 0 0);
    --color-error: oklch(71.76% 0.221 22.18);
    --color-error-content: oklch(0% 0 0);
    **/
}

/** In the chat the first p has margin, we need to remove it **/
.response-formatter > p:first-child, #streaming-chat > p:first-child {
    margin-top: 0;
}

/** Override daisy cards **/
.card {
    &.has-data-table {
        .card-header {
            padding-left: 0.75rem;
        }
        .card-body {
            padding: 0;
    
            > .table {
    
                > tbody > tr:last-child {
                    border-bottom-width: 0px;
                }
            }
        }
    }
}

/** Tables **/

.table td svg {
    display: inline;
}

/** Badges / Labels **/

.label-danger {
    background-color: rgb(255, 240, 238);
    color: rgb(178, 48, 21);
    border-color: rgb(250, 199, 190);
}
.label-info{
    background-color: rgb(240, 244, 255);
    color: rgb(52, 81, 178);
    border-color: rgb(198, 212, 249);
}
.label-neutral {
    background-color: rgb(241, 243, 245);
    color: rgb(85, 89, 83);
    border-color: rgb(216,220,224);
}
.label-warning {
    background-color: rgb(255, 250, 225);
    color: rgb(148, 105, 0);
    border-color: rgb(248, 216, 124);
}
.label-success {
    background-color: rgb(235, 249, 235);
    color: rgb(17, 118, 39);
    border-color: rgb(183, 223, 186);
}
.label-highlight {
    background-color: rgb(249, 241, 254);
    color: rgb(121, 58, 175);
    border-color: rgb(227,204,244);
}

.alert-danger {
    background-color: rgb(255, 240, 238);
    color: rgb(178, 48, 21);
    border-color: rgb(250, 199, 190);
}
.alert-info{
    background-color: rgb(240, 244, 255);
    color: rgb(52, 81, 178);
    border-color: rgb(198, 212, 249);
}
.alert-neutral {
    background-color: rgb(241, 243, 245);
    color: rgb(85, 89, 83);
    border-color: rgb(216,220,224);
}
.alert-warning {
    background-color: rgb(255, 250, 225);
    color: rgb(148, 105, 0);
    border-color: rgb(248, 216, 124);
}
.alert-success {
    background-color: rgb(235, 249, 235);
    color: rgb(17, 118, 39);
    border-color: rgb(183, 223, 186);
}
.alert-highlight {
    background-color: rgb(249, 241, 254);
    color: rgb(121, 58, 175);
    border-color: rgb(227,204,244);
}

/** Drop down menu **/
.dropdown ul {
    border: 1px solid var(--default-border-color);
}