/* The look of every page. Page-only styles stay in that page's own <style>. */
:root {
  --ground: #EDEEF0; --surface: #FFFFFF; --ink: #2B1A12; --muted: #6A5A52;
  --rule: #E4E0DD; --berry: #A3214F; --on-berry: #FFFFFF; --ok: #23705F;
}
[data-theme="dark"] {
  --ground: #1B1412; --surface: #251C19; --ink: #F3ECE8; --muted: #C2B3AB;
  --rule: #3B302C; --berry: #F07AA3; --on-berry: #2B0F19; --ok: #6FCBB4;
}
body { margin: 0; background: var(--ground); color: var(--ink);
       font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
h1, h2, .brand { font-family: 'Bricolage Grotesque', sans-serif; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* Header: on a laptop everything sits in one row */
header { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; }
header .wrap { display: flex; align-items: center; gap: 8px 16px; min-height: 64px; }
header form { margin: 0; }
.brand { font-weight: 700; font-size: 20px; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 8px 16px; flex: 1; flex-wrap: wrap; }
nav { display: flex; flex-wrap: nowrap; gap: 2px; flex: 1; min-width: 0; }
/* Links: the app's colour, never the browser's blue and purple. :where() keeps it weaker than every other rule. */
:where(a) { color: var(--berry); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(a):hover { text-decoration-thickness: 2px; }
:where(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--berry); }
nav a { padding: 10px 11px; text-decoration: none; color: var(--muted); white-space: nowrap; }
nav a.current { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--berry); }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
/* The name button on the right: language, dark mode, password, log out */
.me { position: relative; }
.me summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.me summary::-webkit-details-marker { display: none; }
.me-list { position: absolute; right: 0; top: calc(100% + 6px); width: 280px; background: var(--surface);
           border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 20; box-sizing: border-box; }
.me-list form { margin: 0; }
.me-name { display: none; }
.me-list button, .me-list a { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; line-height: 1.4;
           background: transparent; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.me-list button:hover, .me-list a:hover { background: var(--ground); }
.theme-toggle { min-height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--rule);
                background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.bell { order: 3; position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.bell svg { width: 22px; height: 22px; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
              border-radius: 10px; background: var(--berry); color: var(--on-berry); font-size: 12px; font-weight: 700;
              line-height: 20px; text-align: center; }
.bell.current { box-shadow: inset 0 -3px 0 var(--berry); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: block; background: var(--surface); color: var(--ink); text-decoration: none; border-radius: 12px;
         padding: 12px 14px; border-left: 4px solid var(--berry); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.toast small { display: block; color: var(--muted); }
.menu-button { display: none; margin-left: auto; min-height: 44px; padding: 0 14px; border-radius: 8px;
               border: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit;
               font-weight: 700; cursor: pointer; }

main { padding: 40px 0 72px; }
h1 { font-size: 48px; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
.lead { font-size: 18px; color: var(--muted); margin: 10px 0 40px; max-width: 640px; }
.panel { background: var(--surface); border-radius: 10px; padding: 8px 24px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px 140px; gap: 24px;
       padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.row:last-child { border-bottom: 0; }
.row.head { color: var(--muted); font-size: 14px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.short { color: var(--berry); font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; }
.muted { color: var(--muted); }

/* Phones: company name and a Menu button; the menu opens as a list */
@media (max-width: 1080px) {
  .wrap { padding: 0 16px; }
  header .wrap { flex-wrap: wrap; min-height: 56px; }
  .brand { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
  .menu-button { display: block; margin-left: 8px; }
  .bell { order: 0; margin-left: 0; }
  /* Open, the menu is a sheet over the page, under the header: the pages first, then your own settings */
  .menu { display: none; }
  header.open .menu { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
                      position: fixed; left: 0; right: 0; top: var(--head, 57px); bottom: 0; z-index: 9;
                      background: var(--surface); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
                      padding: 10px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
                      box-sizing: border-box; }
  /* Open, the page behind stays still and the header stays at the top of the screen however far the page was
     scrolled (hiding the body's overflow too would make the header stick to the body instead and scroll away) */
  html.menu-open { overflow: hidden; }
  html.menu-open header { position: fixed; left: 0; right: 0; top: 0; }
  html.menu-open body { padding-top: var(--head, 57px); }
  html.menu-open .ask-bubble { visibility: hidden; }
  nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  nav a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border: 0; border-radius: 12px;
          font-size: 18px; font-weight: 700; color: var(--ink); }
  nav a:active { background: var(--ground); }
  nav a.current { background: color-mix(in srgb, var(--berry) 16%, transparent); color: var(--ink); box-shadow: none; padding-left: 14px; }
  nav a.current::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); margin-right: 10px; }
  .me { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .me summary { display: none; }
  .me-name { display: block; padding: 0 14px 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .me-list { position: static; display: flex; flex-direction: column; gap: 2px; box-shadow: none; border: 0; padding: 0; min-width: 0; background: transparent; }
  .me-list button, .me-list a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
                                font-size: 17px; font-weight: 400; color: var(--ink); background: transparent; }
  .me-list .log-out { color: var(--berry); font-weight: 700; }
  /* A tap leaves no grey box behind (phones keep :hover after the finger is gone) */
  .me-list button:hover, .me-list a:hover { background: transparent; }
  .me-list button:active, .me-list a:active { background: var(--ground); }
  /* Wide tables slide sideways instead of pushing the page wider than the phone */
  main table:not(.cal) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main { padding: 24px 0 56px; }
  .row { grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 12px; }
  h1 { font-size: 32px; }
  .panel { padding: 8px 16px; }
}

/* Used the same way by several pages */
.actions form { margin: 0; }
.addrow { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.addrow input, .addrow select { background: var(--surface); border-radius: 10px; border: 1px solid var(--rule); color: var(--ink); font: inherit; min-width: 0; padding: 10px; }
.att .num { font-variant-numeric: tabular-nums; text-align: right; }
.back { color: var(--berry); font-weight: 700; text-decoration: none; }
.bar a { color: var(--berry); font-weight: 700; text-decoration: none; }
.btn.main { background: var(--berry); border-color: var(--berry); color: var(--on-berry); }
.btn:disabled { cursor: not-allowed; opacity: 0.35; }
.card h2 { font-size: 22px; margin: 0 0 12px; }
.dot { background: var(--rule); border-radius: 3px; flex: 1; height: 6px; }
.dot.on { background: var(--berry); }
.im { max-width: 900px; }
.line.total { border-top: 2px solid var(--ink); font-size: 20px; }
.monthbar a { color: var(--berry); font-weight: 700; text-decoration: none; }
.months a { color: var(--berry); font-weight: 700; text-decoration: none; }
.stat { background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.stat .label { color: var(--muted); font-size: 14px; }
.stepname { color: var(--muted); margin: 0 0 16px; }
tr.total td { border-top: 2px solid var(--ink); font-weight: 700; }
a.brand { color: var(--ink); text-decoration: none; }
/* The theme choice in the name menu: System, Light, Dark */
.me-list .theme-choice { padding: 8px 12px 14px; margin: 0 0 6px; border-bottom: 1px solid var(--rule); }
.me-list .theme-choice > span { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0 0 8px; }
.me-list .theme-choice > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px;
                               border: 1px solid var(--rule); border-radius: 8px; background: var(--ground); }
.me-list .theme-choice button { width: 100%; min-height: 36px; padding: 0 4px; text-align: center; border-radius: 6px; font-size: 14px;
                                font-weight: 700; color: var(--muted); border-bottom: 0; white-space: nowrap; line-height: 1; }
.me-list .theme-choice button:hover { background: transparent; color: var(--ink); }
.me-list .theme-choice button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
@media (max-width: 1080px) {
  .me-list { width: auto; }
  .me-list .theme-choice { padding: 6px 14px 10px; margin: 0; border-bottom: 0; }
  .me-list .theme-choice > span { font-size: 15px; color: var(--ink); }
  .me-list .theme-choice button { min-height: 42px; padding: 0 4px; justify-content: center; font-size: 15px; border-radius: 8px; }
}
/* A bigger screen in phone mode (tablet, iPhone Duo open): the pages and your settings side by side */
@media (min-width: 640px) and (max-width: 1080px) {
  header.open .menu { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; align-content: start;
                      padding-left: 32px; padding-right: 32px; }
  .me { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 32px; border-left: 1px solid var(--rule); }
}
@media (max-width: 360px) {
  .me-list .theme-choice button { font-size: 14px; }
}
canvas { max-width: 100%; }
/* Between a phone and a laptop (tablets, iPhone Duo open and turned sideways): a tighter menu, and wide planning
   tables slide sideways instead of pushing the page wider */
@media (min-width: 1081px) and (max-width: 1200px) {
  header .wrap { gap: 8px 10px; }
  .menu { gap: 8px 10px; }
  nav a { padding: 10px 7px; font-size: 15px; }
  main table.pl-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Motion: calm, quick, never glowing. Everything here stops for "reduce motion" ---------- */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* The page comes in: its first parts one after the other */
main .wrap > * { animation: rise .42s var(--ease) both; }
main .wrap > *:nth-child(2) { animation-delay: .03s; }
main .wrap > *:nth-child(3) { animation-delay: .06s; }
main .wrap > *:nth-child(4) { animation-delay: .09s; }
main .wrap > *:nth-child(5) { animation-delay: .12s; }
main .wrap > *:nth-child(6) { animation-delay: .15s; }
main .wrap > *:nth-child(n+7) { animation-delay: .18s; }
main .wrap > style, main .wrap > script { animation: none; }
/* Tiles and cards one by one */
.tiles > *, .cards > * { animation: rise .45s var(--ease) both; }
.tiles > *:nth-child(2) { animation-delay: .06s; } .tiles > *:nth-child(3) { animation-delay: .12s; } .tiles > *:nth-child(4) { animation-delay: .18s; }
/* Buttons and links answer the finger */
.main-btn, .plain-btn, .pl-btn, .tabs a { transition: transform .12s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.main-btn:active, .plain-btn:active, .pl-btn:active, .tabs a:active { transform: scale(.97); }
.tabs a:hover { border-color: var(--berry); }
nav a { transition: color .2s, box-shadow .25s var(--ease); }
nav a:hover { color: var(--ink); }
.box { transition: box-shadow .25s var(--ease); }
table tr { transition: background-color .15s; }
details > summary { cursor: pointer; }
details[open] > *:not(summary) { animation: fade .25s var(--ease); }
.toast { animation: rise .3s var(--ease) both; }

/* ---------- Skeleton: shown when a page takes a moment to open ---------- */
.skeleton { display: none; }
body.loading main .wrap > *:not(.skeleton) { display: none; }
body.loading main .wrap > .skeleton { display: block; animation: fade .2s ease both; }
.sk { border-radius: 10px; background: linear-gradient(90deg, var(--rule) 25%, var(--surface) 50%, var(--rule) 75%);
      background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-tabs { display: flex; gap: 8px; margin: 0 0 22px; }
.sk-tabs .sk { width: 92px; height: 36px; border-radius: 999px; }
.sk-title { width: min(340px, 70%); height: 44px; margin-bottom: 14px; }
.sk-line { height: 16px; margin-bottom: 10px; width: min(680px, 92%); }
.sk-line.short { width: min(420px, 60%); }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 22px 0; }
.sk-tiles .sk { height: 110px; border-radius: 12px; }
.sk-box { background: var(--surface); border-radius: 12px; padding: 18px 20px; }
.sk-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sk-row:last-child { border-bottom: 0; }
.sk-row .sk { height: 14px; }
@media (max-width: 600px) { .sk-row { grid-template-columns: 2fr 1fr; } .sk-row .sk:nth-child(n+3) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sk { background: var(--rule); }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bars fill in from the left once */
@keyframes grow { from { transform: scaleX(0); } }
.track > .fill, .fill > span { transform-origin: left center; animation: grow .8s var(--ease) both; }
/* Parts a page loads again by itself (the Dashboard's Today box) come in without moving again */
body.settled .tiles > *, body.settled .cards > * { animation: none; }
nav[hidden] { display: none !important; }

/* ---------- Tables as cards on a phone (static/js/cards.js gives each cell its column's name) ---------- */
@media (max-width: 640px) {
  main table.auto-cards, main table.auto-cards tbody, main table.auto-cards thead { display: block; width: auto; }
  main table.auto-cards { overflow: visible; border: 0; }
  main table.auto-cards tr.ac-head { display: none; }
  /* one card a row: the title across, then the short values two or three to a line, label above value */
  main table.auto-cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 14px;
                             position: relative; background: var(--surface); border: 1px solid var(--rule);
                             border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
  main .box table.auto-cards tr { background: transparent; border: 0; border-top: 1px solid var(--rule);
                                  border-radius: 0; padding: 14px 2px; margin: 0; }
  main .box table.auto-cards tr.ac-head + tr, main .box table.auto-cards tr:first-child { border-top: 0; }
  main table.auto-cards tr.ac-sub { display: block; border: 0; padding: 12px 2px 4px; margin: 0; background: transparent; }
  main table.auto-cards tr.ac-sub th { display: block; padding: 0; font-size: 15px; }
  main table.auto-cards td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important;
                             white-space: normal; opacity: 1; min-width: 0; font-variant-numeric: tabular-nums; }
  main table.auto-cards td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px;
                                     font-weight: 400; margin-bottom: 2px; }
  main table.auto-cards td:not([data-label])::before { content: none; }
  main table.auto-cards td.ac-title, main table.auto-cards td.ac-whole, main table.auto-cards td.ac-wide { grid-column: 1 / -1; }
  main table.auto-cards td.ac-title { font-weight: 700; font-size: 17px; }
  main table.auto-cards tr.ac-ticked td.ac-title { padding-right: 40px !important; }
  main table.auto-cards td.ac-title .sub { font-size: 14px; font-weight: 400; }
  main table.auto-cards td.ac-tick { position: absolute; top: 12px; right: 12px; }
  main .box table.auto-cards td.ac-tick { top: 14px; right: 2px; }
  main table.auto-cards td.ac-empty { display: none; }
  main table.auto-cards td.ac-wide input:not([type=checkbox]), main table.auto-cards td.ac-wide select,
  main table.auto-cards td.ac-wide textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  main .scroll:has(> table.auto-cards), main .box.scroll { overflow: visible; }
}

/* ---------- Phones: form fields never wider than their box ---------- */
@media (max-width: 1080px) {
  main input, main select, main textarea { max-width: 100%; box-sizing: border-box; }
  /* the iPhone draws time and date fields at their own width and height: make them like the other fields */
  main input:is([type=time], [type=date], [type=month], [type=datetime-local]) {
    -webkit-appearance: none; appearance: none; min-width: 0; min-height: 2.6em; line-height: 1.3; text-align: left; }
  main input:is([type=time], [type=date], [type=month], [type=datetime-local])::-webkit-date-and-time-value { text-align: left; }
}
/* A box straight under the page title gets a little room (on every screen) */
main h1 + :is(form, section, div, table) { margin-top: 20px; }
main h1 + :is(.tabs, .bar, .lead, .muted, .back) { margin-top: initial; }
@media (max-width: 1080px) {
  /* long button texts wrap instead of running out of their box */
  .pl-btn, .btn, .main-btn, .plain-btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ---------- Sending a file: a circle on the button fills, then turns into a tick (static/js/upload.js) ---------- */
.up-on { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; }
button.up-on:disabled { opacity: 1 !important; cursor: progress; }
.up-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; color: var(--ink); }
.up-ring { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.up-ring svg { overflow: visible; }
.up-ring circle { fill: none; stroke-width: 2.6; }
.up-track { stroke: currentColor; opacity: .25; }
.up-fill { stroke: currentColor; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px;
           transition: stroke-dashoffset .35s var(--ease, ease-out); }
.up-tick, .up-cross { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
                      stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; }
.up-done .up-fill { transition: stroke-dashoffset .2s ease-out; }
.up-done svg { animation: up-pop .45s .15s var(--ease, ease-out) both; }
.up-done .up-tick { opacity: 1; animation: up-draw .35s .2s ease-out forwards; }
.up-bad .up-fill { stroke: var(--berry); }
.up-bad .up-cross { opacity: 1; animation: up-draw .3s ease-out forwards; stroke: var(--berry); }
@keyframes up-draw { to { stroke-dashoffset: 0; } }
@keyframes up-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .up-fill { transition: none; }
  .up-done svg, .up-done .up-tick, .up-bad .up-cross { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Edge to edge on phones with a notch: the page fills the whole screen, its content keeps clear of
   the notch and the rounded corners (viewport-fit=cover in the page's head) ---------- */
.wrap { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
@media (max-width: 1080px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
main { padding-bottom: env(safe-area-inset-bottom); }
.toasts { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- Barcodes (core/barcode.py): black on white, so they scan in dark mode too ---------- */
.ean { display: block; margin-top: 6px; }
.ean img { display: block; height: 46px; width: auto; max-width: 100%; background: #fff; border-radius: 4px; padding: 2px; }
.ean-big { margin: 4px 0 8px; }
.ean-big img { height: 84px; }

/* ---------- A product's facts (partials/product_specs.html): each with its name small above it ---------- */
.specs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-weight: 400; }
.spec { display: flex; flex-direction: column; min-width: 0; }
.spec .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.spec .v { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.barcode { display: inline-block; margin: 8px 0 0; padding: 4px 6px 2px; background: #fff; border-radius: 6px; border: 1px solid var(--rule); line-height: 0; }
.barcode img { display: block; height: 52px; width: auto; max-width: 100%; }
.specs.prices { margin-top: 8px; }
.specs.prices .spec.cut .v { color: var(--berry); }
.specs.prices .spec.pay { padding-left: 14px; border-left: 2px solid var(--rule); }
.specs.prices .spec.pay .v { font-size: 16px; }