/*
 * Material Design 3 baseline color roles and Roboto for this page.
 * Does not place the chat, video, or QR layout. css/site.css does that.
 * index.html loads this after Bootstrap. html.dark selects night. data-palette swaps in one example.
 * Roboto is SIL OFL and lives in fonts/roboto next to this file. A parent path fails from file://.
 */

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/roboto/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/roboto/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/roboto/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary-container: #21005d;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;
    --md-sys-color-error: #b3261e;
    --md-sys-color-error-container: #f9dedc;
    --md-sys-color-on-error-container: #410e0b;
    --md-sys-color-surface: #fef7ff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-highest: #e6e0e9;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-scrim: rgba(0, 0, 0, 0.32);
}

html.dark {
    color-scheme: dark;
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-surface-container-highest: #36343b;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
}

body {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface);
    font-family: Roboto, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.card {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.page-toolbar h1,
.card-body h1,
.control-group h2,
.contact-editor h2,
.password-editor h2,
.crypto-box h2,
.crypto-box h3,
.flex-child h3 {
    color: var(--md-sys-color-on-surface);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.page-toolbar h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;
}

.card-body h1,
.control-group h2,
.contact-editor h2,
.password-editor h2,
.crypto-box h2,
.crypto-box h3,
.flex-child h3 {
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: 1.375rem;
    line-height: 1.75rem;
}

label {
    display: block;
    margin: 0 0 0.35rem !important;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1rem;
    text-transform: none;
}

input,
select,
textarea {
    color: var(--md-sys-color-on-surface);
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font: inherit;
    line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    padding: 0;
    accent-color: var(--md-sys-color-primary);
    box-shadow: none;
}

::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    margin: 0 0.5rem 0.75rem 0;
    padding: 0 1.5rem;
    color: var(--md-sys-color-on-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25rem;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    background: var(--md-sys-color-primary);
    border: 0;
    border-radius: 1.25rem;
    box-shadow: none;
    cursor: pointer;
}

button:hover {
    box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}

button:active {
    box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}

#incomingCallDecline {
    color: var(--md-sys-color-on-error-container);
    background: var(--md-sys-color-error-container);
}

.nav-tabs {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.nav-tabs .nav-link {
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    border-color: transparent;
    border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--md-sys-color-primary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--md-sys-color-primary);
}

#messages,
.custom-dropdown-content,
.video-tile,
.control-group,
.flex-child,
.crypto-box,
.contact-editor,
.password-editor,
.elevated-field,
#qrApp pre {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
}

#messages a {
    color: var(--md-sys-color-primary);
}

.custom-dropdown-content button,
.custom-dropdown-content span {
    color: var(--md-sys-color-on-surface);
    background: transparent;
}

.custom-dropdown-content button:hover {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

#rememberedTextWarning {
    color: var(--md-sys-color-error);
    font-weight: 700;
}

.lock-dialog {
    background: var(--md-sys-color-scrim);
}

.lock-dialog-panel {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-high);
    border: 0;
    border-radius: 28px;
    box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3);
}

table.dataTable,
table.dataTable thead th,
table.dataTable tbody td {
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.dt-container button {
    height: auto;
    margin: 0 0.2rem 0.4rem 0;
    padding: 0.35rem 0.75rem;
    color: var(--md-sys-color-primary);
    background: transparent;
    box-shadow: none;
}

#qrApp select,
#qr-self-test {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-high);
}

#qr-preview,
#qr-result {
    background: #fff;
}

html[data-palette] {
    --md-sys-color-primary: var(--md-primary);
    --md-sys-color-on-primary: var(--md-on-primary);
    --md-sys-color-primary-container: var(--md-primary-container);
    --md-sys-color-on-primary-container: var(--md-primary-900);
    --md-sys-color-secondary-container: var(--md-secondary);
    --md-sys-color-on-secondary-container: var(--md-on-secondary, #1c1b1f);
    --md-sys-color-error: var(--md-error);
    --md-sys-color-surface-container-low: color-mix(in srgb, var(--md-primary) 8%, var(--md-sys-color-surface));
    --md-sys-color-surface-container: color-mix(in srgb, var(--md-primary) 12%, var(--md-sys-color-surface));
    --md-sys-color-surface-container-high: color-mix(in srgb, var(--md-primary) 16%, var(--md-sys-color-surface));
    --md-sys-color-surface-container-highest: color-mix(in srgb, var(--md-primary) 20%, var(--md-sys-color-surface));
    --md-sys-color-outline-variant: color-mix(in srgb, var(--md-primary) 35%, var(--md-sys-color-outline));
}

html.dark[data-palette] {
    --md-sys-color-surface-container-low: color-mix(in srgb, var(--md-primary) 18%, var(--md-sys-color-surface));
    --md-sys-color-surface-container: color-mix(in srgb, var(--md-primary) 26%, var(--md-sys-color-surface));
    --md-sys-color-surface-container-high: color-mix(in srgb, var(--md-primary) 34%, var(--md-sys-color-surface));
    --md-sys-color-surface-container-highest: color-mix(in srgb, var(--md-primary) 42%, var(--md-sys-color-surface));
}

html[data-palette="amber"],
html[data-palette="orange"] {
    --md-on-secondary: #ffffff;
}