/*
  The look of the EPOS: colours, type, shapes. Loaded after Bootstrap and epos.css, so it only changes how things look,
  never how they behave. Approved from the design mockups (green gradient and near-black panels, soft rounded shapes).

  Change a colour or the roundness here and the whole system follows.
*/

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
}

:root {
    /* brand */
    --uc-green-1: #2fb68b;
    --uc-green-2: #1d7f62;
    --uc-green-3: #145a47;
    --uc-gradient: linear-gradient(90deg, var(--uc-green-2), var(--uc-green-1));
    --uc-panel: linear-gradient(160deg, var(--uc-green-1), var(--uc-green-2) 55%, var(--uc-green-3));
    /* surfaces */
    --uc-ink: #0e1311;
    --uc-ink-2: #171e1b;
    --uc-ink-3: #222b27;
    --uc-ink-line: #2d3833;
    --uc-paper: #f2f5f3;
    --uc-line: #e5ebe7;
    --uc-muted: #6d7b74;
    --uc-radius: 18px;

    /* Bootstrap's own variables, pointed at the brand */
    --bs-font-sans-serif: 'Outfit', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-color: #17201c;
    --bs-body-color-rgb: 23, 32, 28;
    --bs-body-bg: var(--uc-paper);
    --bs-body-bg-rgb: 242, 245, 243;
    --bs-secondary-color: #6d7b74;
    --bs-secondary-bg: #e9eeeb;
    --bs-tertiary-bg: #eaf0ed;
    --bs-border-color: #dbe3df;
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .55rem;
    --bs-border-radius-lg: 1.1rem;
    --bs-primary: #1d7f62;
    --bs-primary-rgb: 29, 127, 98;
    --bs-link-color: #1d7f62;
    --bs-link-color-rgb: 29, 127, 98;
    --bs-link-hover-color: #145a47;
    --bs-link-hover-color-rgb: 20, 90, 71;
    --bs-success: #1d7f62;
    --bs-success-rgb: 29, 127, 98;
    --bs-focus-ring-color: rgba(47, 182, 139, .25);
    --bs-card-border-color: var(--uc-line);
}

body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .nav-link, .dropdown-item, .badge, .page-link { text-decoration: none !important; }
code { color: #1d6b53; background: #e6f3ee; padding: .08rem .35rem; border-radius: .4rem; font-size: .85em; }

/* ---------- buttons ---------- */
.btn { --bs-btn-border-radius: .8rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-weight: 500; transition: transform .06s, filter .15s, background-color .15s, border-color .15s; }
.btn:active { transform: scale(.98); }
.btn-lg { --bs-btn-border-radius: .95rem; --bs-btn-padding-y: .75rem; }
.btn-sm { --bs-btn-border-radius: .65rem; --bs-btn-padding-x: .8rem; }

.btn-primary, .btn-success {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent;
    --bs-btn-bg: var(--uc-green-2); --bs-btn-hover-bg: var(--uc-green-2); --bs-btn-active-bg: var(--uc-green-3); --bs-btn-disabled-bg: var(--uc-green-2);
    --bs-btn-focus-shadow-rgb: 47, 182, 139;
    background-image: var(--uc-gradient);
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.07); }
.btn-primary:active, .btn-success:active { filter: brightness(.95); }
.btn-success.btn-lg { box-shadow: 0 10px 26px rgba(47, 182, 139, .28); }

.btn-outline-primary { --bs-btn-color: var(--uc-green-2); --bs-btn-border-color: var(--uc-green-2); --bs-btn-hover-bg: var(--uc-green-2); --bs-btn-hover-border-color: var(--uc-green-2); --bs-btn-active-bg: var(--uc-green-3); --bs-btn-active-border-color: var(--uc-green-3); --bs-btn-focus-shadow-rgb: 47, 182, 139; }
.btn-outline-success { --bs-btn-color: var(--uc-green-2); --bs-btn-border-color: var(--uc-green-2); --bs-btn-hover-bg: var(--uc-green-2); --bs-btn-hover-border-color: var(--uc-green-2); --bs-btn-active-bg: var(--uc-green-3); --bs-btn-active-border-color: var(--uc-green-3); }
.btn-outline-secondary { --bs-btn-color: #44514b; --bs-btn-border-color: #cfd9d4; --bs-btn-hover-bg: #eef2ef; --bs-btn-hover-color: #17201c; --bs-btn-hover-border-color: #b8c5be; --bs-btn-active-bg: #e2e9e5; --bs-btn-active-color: #17201c; --bs-btn-active-border-color: #b8c5be; --bs-btn-bg: #fff; }
.btn-link { color: var(--uc-green-2); }

/* ---------- forms ---------- */
.form-control, .form-select { border-radius: .8rem; border-color: var(--bs-border-color); background-color: #fff; padding-top: .55rem; padding-bottom: .55rem; }
.form-control-sm, .form-select-sm { border-radius: .65rem; padding-top: .3rem; padding-bottom: .3rem; }
.form-control-lg, .form-select-lg { border-radius: .95rem; }
.form-control:focus, .form-select:focus { border-color: var(--uc-green-1); box-shadow: 0 0 0 .22rem rgba(47, 182, 139, .2); }
.form-control::placeholder { color: #98a59f; }
.form-label { font-size: .9rem; color: #33403a; font-weight: 500; }
.form-text { color: var(--uc-muted); }
.form-check-input:checked { background-color: var(--uc-green-2); border-color: var(--uc-green-2); }
.form-check-input:focus { border-color: var(--uc-green-1); box-shadow: 0 0 0 .22rem rgba(47, 182, 139, .2); }
.input-group-text { border-radius: .8rem; background: #eef2ef; border-color: var(--bs-border-color); color: #44514b; }

/* ---------- cards, tables, lists ---------- */
.card { --bs-card-border-radius: var(--uc-radius); --bs-card-inner-border-radius: calc(var(--uc-radius) - 1px); --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: 1rem; border-color: var(--uc-line); box-shadow: 0 1px 2px rgba(20, 40, 32, .03); }
/* The page colour is the soft paper grey, and Bootstrap paints cards, pop-ups and lists with the page colour, so they looked see-through.
   They are white, so they stand out from the page; tables inside them stay clear so they take the card's white. */
.card { --bs-card-bg: #fff; }
.modal { --bs-modal-bg: #fff; }
.dropdown-menu { --bs-dropdown-bg: #fff; }
.list-group { --bs-list-group-bg: #fff; }
.popover { --bs-popover-bg: #fff; }
.toast { --bs-toast-bg: #fff; }
.offcanvas { --bs-offcanvas-bg: #fff; }
.accordion { --bs-accordion-bg: #fff; }
.table { --bs-table-bg: transparent; }
.card-header { font-weight: 600; border-bottom-color: #edf1ee; background: transparent; }
.card-footer { background: transparent; border-top-color: #edf1ee; }
.shadow-sm { box-shadow: 0 6px 18px rgba(20, 40, 32, .07) !important; }
.shadow { box-shadow: 0 14px 34px rgba(20, 40, 32, .12) !important; }
.list-group { --bs-list-group-border-radius: var(--uc-radius); --bs-list-group-border-color: #edf1ee; }

.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f7faf8; --bs-table-border-color: #edf1ee; }
.table > thead > tr > th { font-weight: 500; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--uc-muted); background: #f7f9f8; border-bottom-width: 1px; white-space: nowrap; }
.table > :not(caption) > * > * { padding-top: .8rem; padding-bottom: .8rem; }
.table-sm > :not(caption) > * > * { padding-top: .5rem; padding-bottom: .5rem; }
.card > .table-responsive:first-child > .table > thead > tr:first-child > th:first-child,
.card > .table:first-child > thead > tr:first-child > th:first-child { border-top-left-radius: var(--uc-radius); }
.card > .table-responsive:first-child > .table > thead > tr:first-child > th:last-child,
.card > .table:first-child > thead > tr:first-child > th:last-child { border-top-right-radius: var(--uc-radius); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f7faf8; }

/* ---------- badges, alerts, tabs ---------- */
.badge { font-weight: 500; border-radius: 999px; padding: .38em .75em; letter-spacing: .01em; }
.text-bg-primary { background-color: #dff5ec !important; color: #146149 !important; }
.text-bg-success { background-color: #dff5ec !important; color: #146149 !important; }
.text-bg-warning { background-color: #fff1d2 !important; color: #7a5600 !important; }
.text-bg-danger { background-color: #ffe0dc !important; color: #a5281d !important; }
.text-bg-info { background-color: #dde9fb !important; color: #1d4a8c !important; }
.text-bg-secondary { background-color: #e8ecea !important; color: #44514b !important; }
.text-bg-dark { background-color: #e8ecea !important; color: #44514b !important; }
.text-bg-light { background-color: #fff !important; color: #44514b !important; }
.badge.fs-6 { font-size: .85rem !important; }

.alert { border-radius: 1rem; border: 0; padding: .85rem 1.1rem; }
.alert-success { background: #dff5ec; color: #146149; }
.alert-danger { background: #ffe0dc; color: #8d2218; }
.alert-warning { background: #fff1d2; color: #6d4c00; }
.alert-info { background: #dde9fb; color: #1d4a8c; }
.alert-primary { background: #dff5ec; color: #146149; }
.alert-secondary { background: #e8ecea; color: #33403a; }
.alert-dark { background: #dfe5e2; color: #17201c; }

.nav-tabs { --bs-nav-tabs-border-radius: .8rem; --bs-nav-tabs-link-active-color: var(--uc-green-2); }
.nav-pills { --bs-nav-pills-border-radius: .8rem; --bs-nav-pills-link-active-bg: var(--uc-green-2); }
.progress { border-radius: 999px; background: #e3ebe7; }
.progress-bar { background: var(--uc-gradient); }
.page-link { color: var(--uc-green-2); border-radius: .65rem; margin: 0 .1rem; border-color: var(--bs-border-color); }
.page-item.active .page-link { background: var(--uc-green-2); border-color: var(--uc-green-2); }

/* ---------- pop-ups and menus ---------- */
.modal-content { border: 0; border-radius: 1.4rem; box-shadow: 0 30px 70px rgba(10, 30, 22, .3); overflow: hidden; }
.modal-header { border-bottom-color: #edf1ee; padding: 1.1rem 1.4rem; }
.modal-footer { border-top-color: #edf1ee; }
.modal-backdrop.show { --bs-backdrop-opacity: .55; --bs-backdrop-bg: #0e1311; }
.dropdown-menu { border-radius: 1rem; border-color: var(--uc-line); box-shadow: 0 18px 40px rgba(20, 40, 32, .16); padding: .4rem; }
.dropdown-item { border-radius: .6rem; padding: .5rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background: #eaf4f0; color: #17201c; }
.dropdown-item:active { background: var(--uc-green-2); }
.tooltip { --bs-tooltip-bg: #17201c; --bs-tooltip-border-radius: .55rem; }

/* ---------- the dark bars (till bar and the admin top bar), until the admin sidebar replaces the latter ---------- */
.navbar.bg-dark, .bg-dark { background-color: var(--uc-ink) !important; }
.navbar-dark .navbar-brand { font-weight: 600; letter-spacing: -.01em; }
.navbar-dark .navbar-nav .nav-link { border-radius: .65rem; color: #c8d3cd; }
.navbar-dark .navbar-nav .nav-link:hover { background: var(--uc-ink-3); color: #fff; }
.navbar-dark .navbar-nav .nav-link.active { background: rgba(47, 182, 139, .16); color: #fff; }
.navbar .btn-outline-light { --bs-btn-border-color: var(--uc-ink-line); --bs-btn-color: #dfe8e3; --bs-btn-bg: var(--uc-ink-3); --bs-btn-hover-bg: var(--uc-ink-3); --bs-btn-hover-border-color: var(--uc-green-1); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--uc-green-2); --bs-btn-active-border-color: var(--uc-green-2); }
.navbar .dropdown-menu { background: #fff; }

/* ---------- loading bar and corner notices from epos.css, in the brand colour ---------- */
#epos-progress { background: var(--uc-gradient); }
.epos-toast { border-radius: 1rem; box-shadow: 0 14px 34px rgba(20, 40, 32, .18); }

/* ---------- sales screen details ---------- */
.epos-supplier-box.is-selected { outline-color: var(--uc-green-1); }
.epos-thumb { border-radius: .6rem; }
.pos .bg-body-tertiary, body.pos { background: var(--uc-paper) !important; }

/* ---------- selection and scrollbars ---------- */
::selection { background: rgba(47, 182, 139, .28); }
* { scrollbar-color: #b8c5be transparent; }

/* ---------- shared page pieces: a heading row, stat cards (the dashboard, reports) and chart bars ---------- */
.uc-head { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.uc-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.uc-stat { display: block; background: #fff; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); padding: 1.1rem 1.25rem; color: inherit !important; text-decoration: none !important; transition: transform .08s, box-shadow .15s; }
a.uc-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 40, 32, .1); }
.uc-stat .k { font-size: .85rem; color: var(--uc-muted); }
.uc-stat .v { font-size: 1.9rem; font-weight: 600; letter-spacing: -.01em; margin: .15rem 0 .05rem; line-height: 1.15; }
.uc-stat .n { font-size: .82rem; color: var(--uc-muted); }
.uc-stat-hero { border: 0; color: #fff !important; background: radial-gradient(ellipse 90% 80% at 20% 0%, #3cc79b 0%, transparent 60%), linear-gradient(160deg, var(--uc-green-1), var(--uc-green-2) 60%, var(--uc-green-3)); box-shadow: 0 14px 30px rgba(29, 127, 98, .28); }
.uc-stat-hero .k, .uc-stat-hero .n { color: rgba(255, 255, 255, .85); }
.uc-stat.is-warn { border-color: #ffd0cb; }
.uc-stat.is-warn .n { color: #d6453a; }
.uc-stat.is-amber { border-color: #f7dc9b; }
@media (max-width: 1100px) { .uc-stats { grid-template-columns: 1fr 1fr; } }

.uc-bar { background: linear-gradient(180deg, var(--uc-green-1), var(--uc-green-2)); border-radius: 8px 8px 3px 3px; }

/* ---------- status colours, a little softer than Bootstrap's defaults ---------- */
:root {
    --bs-danger: #d6453a; --bs-danger-rgb: 214, 69, 58;
    --bs-warning: #f4b740; --bs-warning-rgb: 244, 183, 64;
    --bs-info: #2c6fbb; --bs-info-rgb: 44, 111, 187;
}
.btn-danger { --bs-btn-bg: #d6453a; --bs-btn-border-color: #d6453a; --bs-btn-hover-bg: #bf392f; --bs-btn-hover-border-color: #bf392f; --bs-btn-active-bg: #a93128; --bs-btn-active-border-color: #a93128; }
.btn-outline-danger { --bs-btn-color: #d6453a; --bs-btn-border-color: #e9a7a1; --bs-btn-hover-bg: #d6453a; --bs-btn-hover-border-color: #d6453a; --bs-btn-active-bg: #bf392f; --bs-btn-active-border-color: #bf392f; }
.btn-warning { --bs-btn-bg: #f4b740; --bs-btn-border-color: #f4b740; --bs-btn-color: #3b2a00; --bs-btn-hover-bg: #eaa92a; --bs-btn-hover-border-color: #eaa92a; --bs-btn-hover-color: #3b2a00; --bs-btn-active-bg: #dc9d1f; --bs-btn-active-color: #3b2a00; }
.btn-info { --bs-btn-bg: #2c6fbb; --bs-btn-border-color: #2c6fbb; --bs-btn-color: #fff; --bs-btn-hover-bg: #245fa3; --bs-btn-hover-border-color: #245fa3; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #1f528e; --bs-btn-active-color: #fff; }
.border-info { border-color: #b9d3f0 !important; }
.border-warning { border-color: #f1d28b !important; }
.border-danger { border-color: #f0b3ad !important; }
.border-success { border-color: #a9dfca !important; }
.text-danger { color: #d6453a !important; }
.text-success { color: #1d7f62 !important; }
.text-warning-emphasis { color: #8a5f00 !important; }
.table-light { --bs-table-bg: #f7f9f8; --bs-table-color: #17201c; }
.bg-light { background-color: #f4f7f5 !important; }

/* the logo mark in the dark bars */
.uc-mark { width: 30px; height: 30px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 700; font-size: .95rem; color: #fff; background: linear-gradient(150deg, var(--uc-green-1), var(--uc-green-3)); box-shadow: 0 6px 14px rgba(47, 182, 139, .3); }

/* ---------- scroll bars: thin, rounded and quiet in every browser (the browser's own thick grey ones clash with the design) ---------- */
:root { --sb-thumb: #bccac3; --sb-thumb-hover: #8fa399; }
.pos-basket, .pos-top, .adm-side { --sb-thumb: rgba(255, 255, 255, .26); --sb-thumb-hover: rgba(255, 255, 255, .5); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); border: 2px solid transparent; background-clip: content-box; }
/* Firefox has no way to round them, but can make them thin and soft */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

/* The supplier's own code for a product, in orange beside our SKU (staff screens only) */
.sku-supplier { color: #e8590c; font-weight: 500; font-size: .92em; }
.sku-supplier::before { content: "\00b7\00a0"; color: var(--bs-secondary-color, #8c9a93); }