/*
    Theme: 70% gray, 20% teal, 10% gold.

    Gray is the ground: surfaces, borders, body text, the sidebar, table shapes. Teal is the
    action colour: primary buttons, links, the active tab / nav item, focus rings. Gold is the
    accent and it is scarce on purpose: the brand mark, the selected table on a room canvas, a
    badge that must be seen. If a screen has more than one gold thing on it, one of them is wrong.

    Every colour below is a variable. Screens use the variables (scoped .razor.css files can
    read them too); do not introduce new hues. Bootstrap's primary is remapped to teal here so
    .btn-primary, links and form focus follow the theme without per-component overrides.
*/
:root {
    --pos-gray-50: #f7f8f9;
    --pos-gray-100: #eef0f2;
    --pos-gray-200: #dfe3e7;
    --pos-gray-300: #c8ced4;
    --pos-gray-400: #a3abb3;
    --pos-gray-500: #7c858e;
    --pos-gray-600: #5f6870;
    --pos-gray-700: #464d54;
    --pos-gray-800: #30353a;
    --pos-gray-900: #202428;

    --pos-teal: #12808a;
    --pos-teal-rgb: 18, 128, 138;
    --pos-teal-dark: #0e666e;
    --pos-teal-light: #d6eef0;

    --pos-gold: #d19a1a;
    --pos-gold-rgb: 209, 154, 26;
    --pos-gold-dark: #a97a10;
    --pos-gold-light: #fbf0d2;

    --bs-primary: var(--pos-teal);
    --bs-primary-rgb: var(--pos-teal-rgb);
    --bs-link-color: var(--pos-teal);
    --bs-link-color-rgb: var(--pos-teal-rgb);
    --bs-link-hover-color: var(--pos-teal-dark);
    --bs-link-hover-color-rgb: 14, 102, 110;
    --bs-body-color: var(--pos-gray-800);
    --bs-body-color-rgb: 48, 53, 58;
    --bs-secondary-color: var(--pos-gray-500);
    --bs-border-color: var(--pos-gray-200);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Panning and nothing else. This is the half of "pinch-to-zoom is off" that CSS can state (see
   js/noZoom.js for the rest): allowing only the two pans rules out the pinch AND the double-tap
   zoom, and takes the tap delay off every button on the way, because a browser that cannot
   double-tap-zoom has nothing to wait for. A component that wants a finger to do something else
   narrows this further on its own element - the room canvas and the photo cropper both say
   touch-action: none - which is allowed. Nothing can widen it back. */
html {
    touch-action: pan-x pan-y;
}

a, .btn-link {
    color: var(--pos-teal);
}

.btn-primary {
    --bs-btn-bg: var(--pos-teal);
    --bs-btn-border-color: var(--pos-teal);
    --bs-btn-hover-bg: var(--pos-teal-dark);
    --bs-btn-hover-border-color: var(--pos-teal-dark);
    --bs-btn-active-bg: var(--pos-teal-dark);
    --bs-btn-active-border-color: var(--pos-teal-dark);
    --bs-btn-disabled-bg: var(--pos-teal);
    --bs-btn-disabled-border-color: var(--pos-teal);
}

.btn-outline-primary {
    --bs-btn-color: var(--pos-teal);
    --bs-btn-border-color: var(--pos-teal);
    --bs-btn-hover-bg: var(--pos-teal);
    --bs-btn-hover-border-color: var(--pos-teal);
    --bs-btn-active-bg: var(--pos-teal-dark);
    --bs-btn-active-border-color: var(--pos-teal-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pos-gray-700);
    --bs-btn-border-color: var(--pos-gray-300);
    --bs-btn-hover-bg: var(--pos-gray-100);
    --bs-btn-hover-border-color: var(--pos-gray-400);
    --bs-btn-hover-color: var(--pos-gray-900);
    --bs-btn-active-bg: var(--pos-teal-light);
    --bs-btn-active-border-color: var(--pos-teal);
    --bs-btn-active-color: var(--pos-teal-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--pos-teal-rgb), .6);
}

.form-control:focus, .form-select:focus {
    border-color: var(--pos-teal);
}

.form-check-input:checked {
    background-color: var(--pos-teal);
    border-color: var(--pos-teal);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--pos-teal-dark);
    --bs-nav-link-color: var(--pos-gray-600);
    --bs-nav-link-hover-color: var(--pos-teal);
}

.nav-tabs .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--pos-teal);
}

/*
    Bootstrap components whose active colour is a LITERAL blue on their own component variables
    rather than a read of --bs-primary, so the remap at the top never reaches them: the
    list-group's selected row (the shop settings subjects, the modifier and schedule lists), the
    pagination's current page, a range slider's thumb, a switch's focus glyph, a checkbox's
    focus border and the table row a drag is over. Each is remapped here, where the theme lives,
    rather than by editing Bootstrap or the page that happened to show it first.
*/
.list-group {
    --bs-list-group-active-bg: var(--pos-teal);
    --bs-list-group-active-border-color: var(--pos-teal);
    --bs-list-group-action-active-bg: var(--pos-gray-200);
}

.pagination {
    --bs-pagination-color: var(--pos-teal);
    --bs-pagination-hover-color: var(--pos-teal-dark);
    --bs-pagination-focus-color: var(--pos-teal-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--pos-teal-rgb), .25);
    --bs-pagination-active-bg: var(--pos-teal);
    --bs-pagination-active-border-color: var(--pos-teal);
}

.table-primary {
    --bs-table-color: var(--pos-teal-dark);
    --bs-table-bg: var(--pos-teal-light);
    --bs-table-border-color: var(--pos-teal);
    --bs-table-striped-bg: var(--pos-teal-light);
    --bs-table-striped-color: var(--pos-teal-dark);
    --bs-table-active-bg: var(--pos-teal-light);
    --bs-table-active-color: var(--pos-teal-dark);
    --bs-table-hover-bg: var(--pos-teal-light);
    --bs-table-hover-color: var(--pos-teal-dark);
}

.form-check-input:focus {
    border-color: var(--pos-teal);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2818, 128, 138, 0.6%29'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
    background-color: var(--pos-teal);
}

.form-range::-moz-range-thumb {
    background-color: var(--pos-teal);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--pos-teal-light);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--pos-teal-light);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--pos-teal-rgb), .25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(var(--pos-teal-rgb), .25);
}

/* The dock's one accent - the active tab's underline and the drop indicator - is a variable the
   library exposes for exactly this, so the host never reaches into its stylesheet. */
.dock-host {
    --dock-accent: var(--pos-teal);
    --dock-accent-rgb: var(--pos-teal-rgb);
}

/* The gold accent, for the one thing on a screen that must draw the eye. */
.badge.bg-gold, .text-bg-gold {
    background-color: var(--pos-gold) !important;
    color: #fff;
}

.text-gold {
    color: var(--pos-gold-dark) !important;
}

/*
    Clickable text inside a table cell (e.g. the Name column of an admin list).

    Bootstrap's .btn hard-codes `text-align: center`, and an inline-block button
    shrink-to-fits to the column once its label is too long — so the moment a name
    wraps to a second line every line comes out centred instead of following the
    cell's own alignment. This resets the button back to behaving like ordinary cell
    text: it inherits the column's alignment (so it still right-aligns in a .text-end
    column), sits on the text baseline, and carries no button box.

    Use this for any in-table clickable label rather than re-deriving the
    `p-0 text-decoration-none align-baseline` class soup at each call site.
*/
.cell-link.btn {
    padding: 0;
    text-align: inherit;
    vertical-align: baseline;
    white-space: normal;
    text-decoration: none;
}

/*
    A row's action button - Edit, Deactivate, Open, Reprint, the buttons at the end of a table
    row. One height whether the label is one language or two and whether or not it carries a
    glyph, one minimum width so a column of them lines up, and the glyph BESIDE a stacked pair
    rather than wrapped above it (a bare .btn is inline-block, so in a 1%-width cell the glyph
    and the pair broke onto two lines). Every table's action cell uses this, and the gap between
    two of them comes from the sibling rule rather than a me-1 on each call site - which also
    left a trailing margin on a row whose last button was hidden.
*/
.btn.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 4.5rem;
    min-height: 2.5rem;
    padding: .25rem .6rem;
    white-space: nowrap;
    vertical-align: middle;
}

.row-action + .row-action {
    margin-left: .25rem;
}

/*
    A dialog footer's button - the answers of a confirm, Cancel beside Send back, Close beside
    Reprint. Its sibling is .row-action and the reason is the same: a bare .btn is inline-block,
    so its height is only ever whatever its content came to, and a row where one button carries
    a glyph and the next does not came out as buttons of two different heights. Here they are
    one box: one minimum height and width, the glyph BESIDE the label, and the gap from the rule
    rather than a me-1 at each call site.

    The difference from .row-action is that a dialog label WRAPS. A footer has a card's width to
    share between three or four answers, so a bilingual pair drops onto two lines as a matter of
    course, and the minimum height is what a finger wants rather than what the text came to.

    Every button in a footer takes it, not only the ones with a glyph: the point is that they
    match. A footer whose buttons carry no glyph at all is already even and needs nothing.
*/
.btn.dialog-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 3rem;
    min-width: 5.5rem;
    padding: .4rem .9rem;
}

.content {
    padding: 0;
    display: flex;
    flex-grow: 1;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Slip pictures (Hardware > Slip images) -------------------------------

   A strip of paper to judge a picture against. The picture inside is sized as a PERCENTAGE of
   this strip, never to fit its container, so what the page shows is the picture's true share of
   the roll - which is one of the only two things anybody comes to this page to find out. */
.slip-image-paper {
    max-width: 32rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--pos-gray-300, #ced4da);
    border-radius: 2px;
}

.slip-image-dots {
    display: block;
    height: auto;
    /* CENTRED, because that is where the test slip puts it - PrinterJobs.PictureTest sends
       ESC a 1 - and the whole point of showing a picture against a strip of paper is that the
       strip does not disagree with the roll. Left-aligned here while centred there was the
       preview telling a small lie about placement, which is the one thing it must never do. */
    margin-left: auto;
    margin-right: auto;
    /* Dots are meant to be SEEN as dots. Smoothing would hide exactly the roughness somebody is
       checking for before they let a logo onto every bill the shop prints. */
    image-rendering: pixelated;
}

.artwork-drop {
    padding: 1rem;
    text-align: center;
    border: 2px dashed var(--pos-gray-400, #ced4da);
    border-radius: .5rem;
}

.artwork-drop.is-over {
    border-color: var(--pos-teal, #12808a);
    background: rgb(var(--pos-teal-rgb, 18, 128, 138) / 0.08);
}