@import "tailwindcss";

:root {
    --color-text: oklch(0 0 360);
    --color-text-inverted: oklch(1 0 360);
    --color-primary-500: oklch(76.8% 0.233 130.85);
    --color-primary-fallaback-500: #f6f800;
    --color-accent-500: oklch(0.55 0.273 316.67);
    

    --color-negative-500: oklch(0.6324 0.2615 22.24);
    --color-neutral-500: oklch(0.8 0.1505 91.06);
    --color-positive-500: oklch(76.8% 0.233 130.85);

    --rounding-small: 0.25rem;
    --rounding-medium: 0.5rem;
    --rounding-large: 1rem;
}

@theme {
    --color-primary-500: var(--color-primary-500);
    --color-accent-500: var(--color-accent-500);

    --color-negative-500: var(--color-negative-500);
    --color-neutral-500: var(--color-neutral-500);
    --color-positive-500: var(--color-positive-500);
}

#application-view {
    border-collapse: separate;
    table-layout: fixed;
}

#application-view :not(thead) tr{
    border: 0.2rem solid oklch(0.5 0 360);
}

td.cell_details div{
    display: flex;
}

td.cell_edit a {
    border-radius: var(--rounding-medium);
    padding: 0.1rem;
    margin: 0.2rem;
    display: block;
    background-color: var(--color-primary-500);
}

td.cell_edit a img {
    justify-self: center;
}

form label.required::after {
    content: "*";
    color: var(--color-accent-500);
}

dialog {
    border: 0.2rem solid var(--color-text);
    padding: 0.5rem;
    border-radius: var(--rounding-medium);
    position: static;
}

dialog.negative {
    border: 0.2rem solid color-mix(in srgb, var(--color-negative-500), black 15%);
    background-color: var(--color-negative-500);
    color: var(--color-text-inverted);
}

dialog.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

dialog.modal div{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog.modal p {
    grid-column: 1 / span 2;
    padding-bottom: 1rem;
}

dialog.modal #cancel {
    padding: 0.2rem;
    margin: 0.1rem;
    border: 0.2rem solid color-mix(in srgb, var(--color-text-inverted), black 15%);
    background-color: var(--color-text-inverted);
    color: var(--color-text);
    border-radius: var(--rounding-medium);
}

dialog.modal #confirm {
    padding: 0.2rem;
    margin: 0.1rem;
    border: 0.2rem solid color-mix(in srgb, var(--color-negative-500), black 50%);
    background-color: var(--color-negative-500);
    color: var(--color-text-inverted);
    border-radius: var(--rounding-medium);
}