/* Add styles here */
/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Courier Prime", monospace;
} */

:root {
    --md-sys-color-primary: rgb(138 214 183);
    --md-sys-color-surface-tint: rgb(138 214 183);
    --md-sys-color-on-primary: rgb(0 56 41);
    --md-sys-color-primary-container: rgb(0 81 60);
    --md-sys-color-on-primary-container: rgb(166 242 210);
    --md-sys-color-secondary: rgb(179 204 191);
    --md-sys-color-on-secondary: rgb(30 53 44);
    --md-sys-color-secondary-container: rgb(53 76 66);
    --md-sys-color-on-secondary-container: rgb(206 233 219);
    --md-sys-color-tertiary: rgb(167 204 224);
    --md-sys-color-on-tertiary: rgb(10 52 69);
    --md-sys-color-tertiary-container: rgb(38 75 92);
    --md-sys-color-on-tertiary-container: rgb(194 232 253);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(105 0 5);
    --md-sys-color-error-container: rgb(147 0 10);
    --md-sys-color-on-error-container: rgb(255 218 214);
    --md-sys-color-background: rgb(15 21 18);
    --md-sys-color-on-background: rgb(222 228 223);
    --md-sys-color-surface: rgb(15 21 18);
    --md-sys-color-on-surface: rgb(222 228 223);
    --md-sys-color-surface-variant: rgb(64 73 68);
    --md-sys-color-on-surface-variant: rgb(191 201 194);
    --md-sys-color-outline: rgb(137 147 141);
    --md-sys-color-outline-variant: rgb(64 73 68);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(222 228 223);
    --md-sys-color-inverse-on-surface: rgb(44 50 47);
    --md-sys-color-inverse-primary: rgb(25 107 82);
    --md-sys-color-primary-fixed: rgb(166 242 210);
    --md-sys-color-on-primary-fixed: rgb(0 33 22);
    --md-sys-color-primary-fixed-dim: rgb(138 214 183);
    --md-sys-color-on-primary-fixed-variant: rgb(0 81 60);
    --md-sys-color-secondary-fixed: rgb(206 233 219);
    --md-sys-color-on-secondary-fixed: rgb(8 32 23);
    --md-sys-color-secondary-fixed-dim: rgb(179 204 191);
    --md-sys-color-on-secondary-fixed-variant: rgb(53 76 66);
    --md-sys-color-tertiary-fixed: rgb(194 232 253);
    --md-sys-color-on-tertiary-fixed: rgb(0 31 43);
    --md-sys-color-tertiary-fixed-dim: rgb(167 204 224);
    --md-sys-color-on-tertiary-fixed-variant: rgb(38 75 92);
    --md-sys-color-surface-dim: rgb(15 21 18);
    --md-sys-color-surface-bright: rgb(52 59 55);
    --md-sys-color-surface-container-lowest: rgb(10 15 13);
    --md-sys-color-surface-container-low: rgb(23 29 26);
    --md-sys-color-surface-container: rgb(27 33 30);
    --md-sys-color-surface-container-high: rgb(37 43 40);
    --md-sys-color-surface-container-highest: rgb(48 54 51);

    --md-sys-typescale-body-medium-size: 1rem;
    --md-sys-typescale-body-medium-line-height: 1.5rem;

    --brand-font: 'Silkscreen';
    --headline-font: 'Noto Serif';
    --title-font: 'Courier Prime';
    --plain-font: 'Arvo';

    --md-ref-typeface-brand: var(--brand-font);
    --md-ref-typeface-plain: var(--plain-font);

    --md-sys-typescale-headline-medium-font: var(--headline-font);
    --md-sys-typescale-title-large-font: var(--title-font);

    --md-sys-typescale-headline-small-font: var(--headline-font);

    --content-max-width: 95ch;

    /* shadows */
    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030,
        0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030,
        0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030,
        0 6px 10px #00000015;
}


body {
    background: oklch(0.1 0.025 264);
    color: var(--md-sys-color-on-surface);
    max-width: var(--content-max-width);
}

#search-field {
    min-width: 35ch;
}

.note-input-field {
    width: 100%;
    min-height: 9ch;
}

.alert-message {
    color: var(--md-sys-color-on-error-container);
}

.case-details {
    display: grid;
    grid-template-columns: repeat(1fr);
    gap: 1rem;
    background-color: oklch(0.2 0.025 264);
    padding: 1rem;
    border-radius: 9px;
}

.case-details .case-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
    gap: 1rem;
}



/* Helper classes */

.margin-tb-1x {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.display-none {
    display: none;
}

/* Shadows */

.shadow-s {
    box-shadow: var(--shadow-s);
}

.shadow-m {
    box-shadow: var(--shadow-m);
}

.shadow-l {
    box-shadow: var(--shadow-l);
}

/* Cards */

.card {
    background: oklch(0.3 0.025 264);
    border-radius: 1rem;
}

.card .card-title {
    padding: 1rem;
}

.card .card-title .card-title-text {
    margin: 0;
}

.card .card-content {
    padding: 1rem;
}