/* theme.css
These styles establish the basic look of the app. Accordingly, they establish colors, borders,
fonts, and so forth. By modifying this file you can customize the look of the app.

In a Vue, React, Jekyll, or similar app, the layout and structure are established by
other styles either embedded or in a follow up.
*/

/* ==========================================================================
   CSS Reset
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
ul,
ol,
li,
figure,
img,
table,
td,
th,
hr,
dl,
dd {
    margin: 0;
    padding: 0;
}

input,
button,
textarea,
select {
    font: inherit;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

img,
picture,
svg,
canvas,
video {
    display: block;
    max-width: 100%;
}

textarea {
    resize: vertical;
}

button,
select {
    text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    appearance: button;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:focus-visible {
    outline: 2px solid fuchsia;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Global CSS Variables
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------------
   Colors
   ------------------------------------------------------------------------ */

    --clr-background: white;
    --clr-foreground: black;
    --clr-title: black;
    --clr-accent1: #8A1515;
    /* Directory, Subtitle, Heading 1 (burgundy) */
    --clr-accent2: #085170;
    /* Title, Heading 2+ (dark turquoise)*/
    --clr-disabled: #909090;
    --clr-link: #18577e;
    /* (blue) */
    --clr-link-visited: #278DCC;
    --clr-link-hover-bg: #D0D0D0;
    /* (medium-light gray) */
    --clr-code-bg: #D8D8FD;
    --clr_code_border: black;
    --clr-img-background: inherit;
    --clr-warn: #d97706;
    --clr-danger: #dc2626;
    --clr-danger-bg: #fee2e2;
    --clr-go: #16a34a;
    --clr-go-bg: #e2fee7;
    --clr-info: #0284c7;
    --clr-hover-fg: #404040;
    /* Foreground for things like clr-go and clr-info when hovering */
    --clr-border: #404040;
    --clr-button-bg: #F0F0F0;
    --clr-input-border: #d1d5db;
    --clr-subtle-border: #F0F1F3;
    --clr-active-bg: #F8F9FB;
    --clr-active-border: #386274;
    --clr-message: #F0F1F3;
    --clr-message-bg: #404040;
    --clr-dim-bg: rgba(15, 15, 20, 0.45);
    /* Dim the background behind a dialog */
    --shadow-active: 0 0 0 3px rgba(96, 165, 250, 0.25);
    --gradient-hr: linear-gradient(to right, white, #808080, #808080, white);
    --gradient-bg: linear-gradient(to right, white, #F0F0F0, white, white, #F0F0F0, white 100%);

    /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */

    --font-family-base:
        Arial,
        "Segoe UI",
        ui-sans-serif,
        system-ui,
        sans-serif;

    --font-family-mono:
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    /* ------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------ */

    --border-width: 1px;

    /* ------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------ */

    --shadow-sm:
        0 1px 2px rgb(0 0 0 / 0.05);

    --shadow-md:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);

    --shadow-lg:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* ------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------ */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;


}

/* end of :root */

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
    :root {
        --clr-background: black;
        --clr-foreground: #b5cbbe;
        --clr-title: white;
        --clr-accent1: #b03737;
        /* Directory, Subtitle, Heading 1 (burgundy) */
        --clr-accent2: #278DCC;
        /* Title, Heading 2 (Light turquoise)*/
        --clr-disabled: #909090;
        --clr-link: #278DCC;
        /* (blue) */
        --clr-link-visited: #336cce;
        --clr-link-hover-bg: #303030;
        --clr-code-bg: #404040;
        --clr-code-border: white;
        --clr-img-background: #E0E0E0;
        --clr-warn: #d97706;
        --clr-danger: #dc2626;
        --clr-danger-bg: #300000;
        --clr-go: #16a34a;
        --clr-go-bg: #003f0c;
        --clr-info: #0284c7;
        --clr-hover-fg: #bdbdbd;
        --clr-border: #bdbdbd;
        --clr-button-bg: #404040;
        --clr-input-border: #707070;
        --clr-subtle-border: #2c2c2c;
        --clr-active-bg: #d1d2d3;
        --clr-active-border: #65b5d8;
        --clr-message: #404040;
        --clr-message-bg: #F0F1F3;
        --clr-dim-bg: rgba(255, 255, 255, 0.25);
        --shadow-active: 0 0 0 3px rgba(29, 47, 70, 0.25);
        --gradient-bg: linear-gradient(to right, black, #101010, black, black, #101010, black 100%)
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */

:root {
    font-family: var(--font-family-base);
    color: var(--clr-foreground);
    background-color: var(--clr-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

body {
    max-width: 80em;
    margin: 5px auto;
    padding: 5px;
}

/* ==========================================================================
   Headier
   ========================================================================== */

header {
    margin-bottom: 0.5em;
}

header::after {
    display: block;
    content: "";
    background-image: var(--gradient-hr);
    height: 2px;
    width: 100%;
    margin-top: 1em;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    line-height: 1.25;
}

h1 {
    color: var(--clr-accent1);
    font-size: 2.25em;
}

h2 {
    color: var(--clr-accent2);
    font-size: 1.5em;
    margin-top: 1em;
}

h3 {
    color: var(--clr-accent2);
    font-size: 1.25em;
}

h4 {
    color: var(--clr-accent2);
    font-size: 1.125em;
}

h5 {
    color: var(--clr-accent2);
    font-size: 1em;
}

h6 {
    color: var(--clr-accent2);
    font-size: 1em;
    font-weight: normal;
}


/* ==========================================================================
   Body Text
   ========================================================================== */

p {
    margin-bottom: 1em;
}

small {
    font-size: 0.75em;
}

strong,
b {
    font-weight: bold;
}


/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
    padding-left: 1.5em;
}


/* ==========================================================================
   Code
   ========================================================================== */

code,
kbd,
samp,
pre {
    font-family: var(--font-family-mono);
}

code {
    font-size: 1em;
}

pre {
    overflow-x: auto;
    font-size: 1em;
    line-height: 1.25;
}

/* ==========================================================================
   Input
   ========================================================================== */

input {
    background-color: inherit;
    color: inherit;
    border: 1px solid currentcolor;
    border-radius: 0.25em;
    padding: 1px 0px;
}

button {
    color: var(--clr-foreground);
    background-color: var(--clr-button-bg);
}

dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    min-width: 10em;
    max-width: min(90vw, 60em);
    min-height: 4em;
    max-height: 75vh;
    overflow-y: auto;

    font-size: 1rem;
    font-weight: normal;
    color: var(--clr-foreground);
    background-color: var(--clr-background);
    border: var(--border-width) solid var(--clr-border);
    border-radius: 0.75em;
    padding: 0.75em;
    box-shadow: var(--shadow-active);
}

dialog::backdrop {
    background: var(--clr-dim-bg);
}

/* Suppress up/down spinners on numeric <input> */
/* Chrome, Safari, Edge, Opera */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ==========================================================================
   Miscellaneous
   ========================================================================== */

blockquote {
    padding-left: 3em;
    border-left: 4px solid var(--color-headings);
}

hr {
    margin-block: var(--space-8);

    border: 0;
    border-top: var(--border-width) solid var(--clr-border);
}

a {
    color: var(--clr-link);
}
a:hover {
    background-color: var(--clr-link-hover-bg);
}
a:visited {
    color: var(--clr-link-visited);
}

/* ==========================================================================
   Common Classes
   ========================================================================== */

.panel {
    border: var(--border-width) solid var(--clr-border);
    border-radius: 1rem;
    padding: 0.8em;
    margin: 0 auto;
}

.record-table {
    width: 100%;
}

.record-table thead th {
    text-align: left;
    font-weight: bold;
    color: var(--clr-accent2);
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid var(--clr-subtle-border);
}

.record-table tbody td {
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--clr-subtle-border);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.record-table .action-col {
    width: 2.5rem;
    text-align: center;
}

.record-table input {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--clr-input-border);
    border-radius: 0.375rem;
    font-family: inherit;
    color: inherit;
}

.record-table input:focus {
    outline: none;
    border-color: var(--clr-active-border);
    box-shadow: var(--shadow-active);
}

.col-name {

}

.col-value {
    min-width: 14em;
}

.col-ttl {
    width: 8ch;
}

.col-created {
    width: 12ch;
}

.col-action {

}

.col-preference {
    width: 13ch;
}



/* ==========================================================================
   Specialized Elements
   ========================================================================== */

.message-panel {
    background-color: var(--clr-message-bg);
    color: var(--clr-message);
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    box-shadow: var(--shadow-md);
    max-width: 75%;
    margin: 0.25em auto;
}

.add-button {
    color: inherit;
    background-color: var(--clr-button-bg);
    padding: 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid var(--clr-input-border);
}

.add-button:disabled {
    color: var(--clr-disabled);
    background-color: var(--clr-background);
    border-color: var(--clr-subtle-border);
    cursor: not-allowed;
}

.add-button:hover:enabled {
    background-color: var(--clr-go-bg);
}

.delete-button {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

.delete-button:hover {
    background: var(--clr-danger-bg);
}

.icon-check::before {
    content: "\2714"
}

.icon-check {
    display: inline-block;
    font-size: 0.75em;
    border: 1px solid var(--clr-go);
    width: 1.5em;
    color: var(--clr-go);
}

.icon-trash::before {
    content: "\1f5d1";
    /* Trash can icon */
}

.icon-trash {
    display: inline-block;
    font-size: 1.5em;
    color: var(--clr-danger);
}

.icon-info {
    color: var(--clr-info);
}

.icon-info:hover {
    color: var(--clr-hover-fg);
}

.tooltip {
    background-color: var(--clr-message-bg);
    color: var(--clr-message);
    position: absolute;
    bottom: calc(100% + 1.25ch);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.3rem;
    border-radius: 0.2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 10;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 1ch solid transparent;
    border-top-color: var(--clr-message-bg);
}

.addNameCell {
    display: flex;
    width: 100%;
    align-items: center;
}

.addNameCell input {
    flex-grow: 1;
}

.addCell input, .addTtlCell input {
    width: 100%;
}

.addButtonCell {
    width: 100%;
    text-align: center;
}

/* Suppress up/down spinners on TTL inputs */
/* Chrome, Safari, Edge, Opera */
.addTtlCell input::-webkit-outer-spin-button,
.addTtlCell input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
.addTtlCell input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.addPreferenceCell {
    width: 100%;
}