/* General */
:root {
    color-scheme: light dark;
    --bg: #fcfcfc;
    --fg: #242323;
    --bg-active: #e8d0d0;   /* color-mix(in srgb, var(--bg) 80%, var(--cmm-red) 20%) */
    --bg-hover: #f2e6e6;    /* color-mix(in srgb, var(--bg) 90%, var(--cmm-red) 10%) */
    --cmm-red: #9b2423;
    --cmm-dark: #242323;
    --cmm-grey: #ece9e9;
}
.Topbar { background-color: rgba(252 252 252 / 0.92); }/* color mixing new in 2024, hard-code for now */

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #242323;
        --fg: #fcfcfc;
        --bg-active: #9b2423;
        --bg-hover: #9b2423;
        --cmm-red: #f2e6e6;
        --cmm-dark: #ece9e9;
        --cmm-grey: #242323;
    }
    .Topbar { background-color: rgba(36 35 35 / 0.92); }
    p.error, span.error, tr.error, div.error { color: black; }
    .sign-box { background-color: #e8e8e8; } /* stroke is unconditionally black */
}

.loading { animation: pulse 1s infinite; }
@keyframes pulse {
  0%   { background-color: var(--bg); }
  50%  { background-color: var(--bg-active); }
  100% { background-color: var(--bg); }
}

body { padding: 0.5em; background: var(--bg); color: var(--fg); }
a:hover { color: var(--cmm-red); }

.hide { display: none !important; }
.hbox { display: flex; gap: 1rem; }
.vbox { display: flex; flex-direction: column; gap: 0.5rem; }
.lr-box { display: flex; justify-content: space-between; }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }
.h3  { max-width: 3em; }  .h6  { max-width: 6em; }
.h12 { max-width: 12em; } .h24 { max-width: 24em; }
.border-box { box-sizing: border-box; }/* width is WHOLE element, not just inner content */

.hc { display: flex; flex-direction: column; align-items: center; }/* horiz center */
.vc { display: flex; align-items: center; }/* vertical center */
.text-center { text-align: center; }
.block-center { display: block; margin-left: auto; margin-right: auto; }

.nosep { margin: 0px; gap: 0px; }
.pad { padding: 0.5ex; }
.vpad { padding: 0.5ex 0ex; }
.hpad { padding: 0ex 0.5ex; }
.skip  { margin: 1ex; }
.vskip { margin: 1ex 0ex; }
.hskip { margin: 0ex 1ex; }
/* Quarter margins */
.qb { margin-bottom: 0.25em; }
.ql { margin-left: 0.25em; }
.qr { margin-right: 0.25em; }
.qt { margin-top: 0.25em; }
/* Half margins */
.hb { margin-bottom: 0.5em; }
.hl { margin-left: 0.5em; }
.hr { margin-right: 0.5em; }
.ht { margin-top: 0.5em; }
/* full em margins */
.mb { margin-bottom: 1em; }
.ml { margin-left: 1em; }
.mr { margin-right: 1em; }
.mt { margin-top: 1em; }
.tab { margin-left: 3em; }
.working { color: var(--cmm-grey) }
.success { }
p.error, span.error, tr.error, div.error {
    border: solid 1px #ff5722;
    background-color: #ffccbc;
    padding: 6px; margin: 8px;
}
p.error      { font-weight: bold; }
input.error  { background-color: #ffccbc; }
.error-close { color: #dd2c00; float: right; }/* icon to close an error box= */

.border { border: solid 1px var(--cmm-dark); border-collapse: collapse; }
.border-t {
    border-style: solid; border-color: var(--cmm-dark);
    border-width: 1px 0px 0px 0px; border-collapse: collapse;
}
.border-b {
    border-style: solid; border-color: var(--cmm-dark);
    border-width: 1px 0px 0px 0px; border-collapse: collapse;
}

p.todo, span.todo, tr.todo, div.todo {
    border: solid 1px #1976d2;
    background-color: #90caf9;
    padding: 6px; margin: 8px;
}

.b { font-weight: bold; }
.link { cursor: pointer; color: blue; text-decoration: underline; }
.click { cursor: pointer; }
.selected { background-color: var(--bg-active) !important; }
.hover:hover { background-color: var(--bg-hover) !important; }

/* default table */
thead th { font-weight: bold; text-align: center; }
table, td, th {
    border-style: solid; border-color: var(--cmm-dark);
    border-width: 0px 0px 1px 0px; border-collapse: collapse;
}
td, th { padding: 0.25em 0.35em; }
table caption {
    background-color: var(--cmm-dark); color: var(--bg);
    font-size: 125%; font-weight: bold; padding: 0.5em;
}
tbody tr:nth-child(odd) { background-color: var(--cmm-grey); }


/* default form */
form { width: fit-content; }
fieldset {
    border: 0 none;
    display: grid;
    margin: 0.25rem 0rem;
    padding: 0px;
    column-gap: 1rem;
    row-gap: 0.25rem;
    grid-template-columns: max-content fit-content(80%);
    align-items: center;
}
input[type="checkbox"] { width: min-content; }/* left-align checkboxes in form fieldset */
input:read-only { background-color: var(--cmm-grey); border: solid 1px #8f8f9d; }

/* <nav class="toolbar"><span>...</span><span>...</span> */
.icon  { font-size: 1.25em; }
.sortupdown { font-size: 75%; }
nav.toolbar { display: flex; }
nav.toolbar > span {
    padding: 0.25rem 0.5rem; margin: 0.5rem; border-radius: 6px;
    border-style: solid; border-color: var(--cmm-red); border-width: 0px 2px;
}
nav.toolbar > span:hover { background: var(--bg-hover); }
nav.toolbar > span:hover a { color: var(--cmm-red); }


/* User app */
.login-toolbar > menu > span:hover > menu,
.login-toolbar > menu > span:focus-within > menu,
.login-toolbar > menu > span > menu:hover {
    visibility: visible; opacity: 1; display: block;
}

.login-toolbar > menu {
    display: flex; flex-direction: row-reverse; max-width: fit-content;
}
.login-toolbar > menu > span > menu {
    visibility: hidden; display: none;
}

#UserList {
    max-height: 30vh; overflow-y: auto;
    padding: 1ex;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--cmm-red);
}
div.role-list {
    display: grid;
    grid-template-columns: repeat(2, min-content fit-content(45%));
    column-gap: 0.25em;
}
fieldset.role-grid legend { font-weight: bold; }
fieldset.role-grid label { padding-right: 0.75em; }
fieldset.role-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 0.25em;
}

.fine-print { font-style: italic; font-size: smaller; }

/* Contracts app */
.Topbar {
    position: fixed; display: flex; justify-content: space-between;
    top: 0px; left: 0px; right: -0px; padding: 0px 1em;
    align-items: baseline; z-index: 100;
    border-style: solid; border-color: var(--cmm-red); border-width: 0px 0px 2px;
}
.Content { margin-top: 3em; }

.timestamp { font-style: italic; font-size: 85%; }
.sign-box { max-width: 2.5in; height: 1in; }
.sign-input {
    background-color: #e8e8e8;
    max-width: 5in;
    height: 2in;
    /* prevent default (scroll) behavior when events triggered, stackoverflow.com/a/43275544 */
    touch-action: none;
    /* prevent text selection while dragging, stackoverflow.com/a/4407335 */
    user-select: none; -webkit-user-select: none;
}
.sign-input svg, .sign-box svg { width: 100%; height: 100%; }


.draft {
    border-style: solid; border-color: #fdd835; border-width: 5px;
    padding: 5px;
}
.watermark {
    z-index: -100;
    font-weight: bold;
    opacity: 0.15;
    position: absolute;
    font-size: 27vw;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Print options */
@media print {
    /* hide frame and navigation */
    .noprint { display: none !important; }
    /* Reduce base font size to something that isn't one word per line */
    body {
        padding: 0em;
        font-size: 8pt; /* Works for scaling in FF and Chrome */
    }
    /* print-color-adjust: Preserve zebra striping, etc */
    * { print-color-adjust: exact;  -webkit-print-color-adjust: exact; }
    /* captions are gaudy on screen (light on dark), allow fixing in print */
    caption { print-color-adjust: economy;  -webkit-print-color-adjust: economy; }
    /* Inputs are a web thing, hide input frames and empty inputs (with placeholders) */
    input { border: 0px !important; background: transparent !important; accent-color: var(--cmm-dark) !important; }
    input:placeholder-shown { color: transparent !important; display: none !important; }
    .sign-box { background: transparent !important; }
}