/* CarToolbox Shop — same visual language as the platform (src/public/assets/css/app.css),
   its own file: the two applications are deployed separately and must not share assets. */

:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --border: #d8dee5;
    --text: #1e2a35;
    --muted: #6b7c8d;
    --accent: #17212b;
    --accent-text: #ffffff;
    --primary: #2f6fb0;
    --danger: #b3382f;
    --ok: #2e7d4f;
    --radius: 6px;
    /* Height of the sticky footer, so anything else that sticks to the bottom
       edge (the running total on the catalogue) can sit clear of it. */
    --footer-h: 2.75rem;
}

* { box-sizing: border-box; }

/* A column so the footer can own the bottom edge of the window: the main
   region takes whatever height is left over, which on a short page pushes the
   footer down instead of leaving it floating under the last card. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* width + min-width, not the flex default: .container centres itself with
   `margin: 0 auto`, and an item with auto cross-axis margins is not stretched
   by the flex container — it is sized by its contents instead, so a table
   wider than a phone screen dragged the whole page sideways rather than
   scrolling inside its own .table-wrap. */
main.container { flex: 1 0 auto; width: 100%; min-width: 0; }

a { color: var(--primary); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }

/* --- Top bar ----------------------------------------------------------- */
.topbar { background: var(--accent); color: var(--accent-text); }
.topbar-inner {
    max-width: 1100px; margin: 0 auto; padding: 0.6rem 1rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.nav a { color: #c7d3de; text-decoration: none; padding: 0.2rem 0; }
.nav a.active, .nav a:hover { color: #fff; border-bottom: 2px solid var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.topbar-right .username { color: #c7d3de; font-size: 0.9em; }
.lang-switch a { color: #8fa3b8; text-decoration: none; font-size: 0.85em; padding: 0 0.2rem; }
.lang-switch a.active { color: #fff; font-weight: 600; }

.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* Stuck to the bottom edge, with the page scrolling underneath it: on a list
   of any length the way back to the platform stays where it can be reached
   instead of sitting hundreds of rows below. Opaque on purpose — the rows
   pass behind it. Keep the height in sync with --footer-h. */
.footer {
    position: sticky; bottom: 0; z-index: 5;
    border-top: 1px solid var(--border); background: var(--bg);
    color: var(--muted); font-size: 0.9em;
}
.footer .container { padding: 0.7rem 1rem; }

/* --- Blocks ------------------------------------------------------------ */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.card.narrow { max-width: 460px; margin: 2rem auto; }
h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; }
.muted { color: var(--muted); }
.small { font-size: 0.87em; }
.right { text-align: right; }
/* An e-mail address is a single unbreakable token: in a table the longest one
   becomes its column's minimum width and pushes everything to its right off
   the page. Where that is a risk the cell is allowed to break mid-token. */
.break-any { overflow-wrap: anywhere; }
/* A date squeezed below its own width breaks at its hyphens ("2026-" / "09-05").
   Timestamps are printed as two of these instead, so the only place a line can
   break is between the day and the time. */
.nowrap { white-space: nowrap; }

/* --- Forms ------------------------------------------------------------- */
label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
    width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: #fff; color: var(--text); font: inherit;
}
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }
.form-hint { color: var(--muted); font-size: 0.85em; margin-top: 0.25rem; }
.checkbox-label, .radio-label {
    display: block; margin: 0.5rem 0; font-weight: 400;
}
.radio-label { padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.radio-label span { display: block; margin-left: 1.5rem; }
.inline-form { display: inline-block; margin: 0; }

.btn {
    display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: #fff; color: var(--text);
    text-decoration: none; font: inherit; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-link { background: none; border: none; color: #c7d3de; padding: 0; }
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.85em; }
.btn-block { display: block; width: 100%; margin-top: 1rem; }

/* --- Honeypot: invisible to people, present in the DOM for scripts ------ */
.hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
}

/* --- Captcha ----------------------------------------------------------- */
.captcha-row { display: flex; align-items: center; gap: 0.75rem; }
.captcha-image svg { display: block; border: 1px solid var(--border); border-radius: var(--radius); }
.captcha-input { max-width: 6rem; }

/* --- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
tr.unavailable td { opacity: 0.55; }
tr.row-error td { background: #fdf2f1; }
.modules-table td:first-child { width: 2rem; }
/* Give the address column the spare width before the others get any: an
   address broken mid-token is far harder to read than a name that wraps at
   its space. A preference only — it still shrinks on a narrow page. */
.users-table td:first-child { width: 26%; }

/* The stacked-form rule above gives every label a top margin so fields sit
   apart in a column. In this table a label is a cell's whole content, not a
   caption above a field, and that margin dropped each module name 20px below
   its own description and checkbox. */
.modules-table label { margin: 0; cursor: pointer; }

/* --- Status badges ----------------------------------------------------- */
.badge {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.8em; background: #e7ecf1; color: var(--muted); white-space: nowrap;
}
.badge-ok, .badge-activated, .badge-payment_confirmed { background: #e3f3e9; color: var(--ok); }
.badge-error, .badge-rejected { background: #fbe6e4; color: var(--danger); }
.badge-pending_review, .badge-instructions_sent, .badge-payment_pending { background: #fdf1dd; color: #8a5b12; }
.badge-cancelled, .badge-expired, .badge-muted { background: #e7ecf1; color: var(--muted); }

/* --- Flashes ----------------------------------------------------------- */
.flash { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-ok { background: #e3f3e9; border: 1px solid #b6ddc5; color: #1f5c39; }
.flash-error { background: #fbe6e4; border: 1px solid #edbcb7; color: #8a2a22; }
/* A question, not a refusal: the "did you mean …?" check on registration. */
.flash-warn { background: #fdf1dd; border: 1px solid #e6d2a8; color: #7a5210; }
.flash-warn p { margin: 0 0 0.4rem; }
.flash-warn p:last-child { margin: 0.4rem 0 0; }
.flash-warn .radio-label { background: #fff; border-color: #e6d2a8; }

/* --- Order summary ----------------------------------------------------- */
.summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.total-line {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.75rem; font-size: 1.1rem;
}
.total-card { position: sticky; bottom: var(--footer-h); }

/* --- Admin ------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; }
.admin-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-nav a {
    padding: 0.4rem 0.6rem; border-radius: var(--radius); text-decoration: none;
    color: var(--text); font-size: 0.95em;
}
.admin-nav a.active, .admin-nav a:hover { background: var(--surface); border: 1px solid var(--border); }
.admin-content { min-width: 0; }

/* Seven columns of short values in a column that is ~740-850px wide next to
   the sidebar. At the body size they did not fit: every admin table carried a
   horizontal scrollbar with its last column off the right edge. Denser type
   and padding, in the admin panel only. */
.admin-content table { font-size: 0.93em; }
.admin-content th, .admin-content td { padding: 0.45rem 0.5rem; }
.admin-content th { font-size: 0.8em; letter-spacing: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters input, .filters select { width: auto; flex: 0 1 auto; }
.action-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }
.action-row input[type=text] { width: auto; flex: 1 1 14rem; }
.activation-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.75rem 1rem; min-width: 8rem;
}
.stat-value { display: block; font-size: 1.6rem; font-weight: 600; }
.stat-label { display: block; color: var(--muted); font-size: 0.85em; }
.pager { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.placeholder-list code { margin-right: 0.5rem; background: #eef2f6; padding: 0.1rem 0.3rem; border-radius: 3px; }
.mail-preview {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; background: #fbfcfd; overflow-x: auto;
}
.mail-source { margin-top: 0.75rem; }
.mail-source summary { cursor: pointer; color: var(--primary); font-size: 0.9em; }
.code-block {
    margin: 0.5rem 0 0; padding: 0.75rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: #f7f9fb; overflow-x: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word;
}

/* --- Template body editor ---------------------------------------------- */
/* Two views of one field: a highlighted <pre> painted underneath the real
   textarea, and a contenteditable surface with a toolbar. Nothing here is
   shown until admin-editor.js unhides it, so a browser without JavaScript
   keeps the plain textarea it always had. */
.editor { margin-top: 0.25rem; }
.editor [hidden] { display: none; }

.editor-modes { display: flex; gap: 0; margin-bottom: 0.5rem; }
.editor-mode {
    padding: 0.3rem 0.8rem; border: 1px solid var(--border); background: #fff;
    color: var(--muted); font: inherit; font-size: 0.9em; cursor: pointer;
}
.editor-mode:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.editor-mode:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.editor-mode.is-active {
    background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500;
}

.editor-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
    padding: 0.4rem; margin-bottom: -1px;
    border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
    background: #f7f9fb;
}
.editor-toolbar button {
    min-width: 2rem; padding: 0.2rem 0.45rem; border: 1px solid transparent;
    border-radius: 3px; background: none; color: var(--text); font: inherit;
    font-size: 0.9em; line-height: 1.4; cursor: pointer;
}
.editor-toolbar button:hover { background: #e7edf3; border-color: var(--border); }
.editor-toolbar button.is-active { background: #dce7f2; border-color: #adc4d9; }
.editor-toolbar select {
    width: auto; padding: 0.15rem 0.3rem; font-size: 0.85em; background: #fff;
}
.editor-toolbar input[type=color] {
    width: 1.9rem; height: 1.6rem; padding: 1px; border: 1px solid var(--border);
    border-radius: 3px; background: #fff; cursor: pointer;
}
.editor-toolbar .sep {
    width: 1px; align-self: stretch; margin: 0 0.25rem; background: var(--border);
}
.editor-toolbar .b { font-weight: 700; }
.editor-toolbar .i { font-style: italic; }
.editor-toolbar .u { text-decoration: underline; }
.editor-toolbar .s { text-decoration: line-through; }

/* The overlay only lines up with the textarea while every metric below is
   identical in both — font, size, line height, padding and wrapping. Change
   one and change it twice. */
.editor-source,
.editor-highlight {
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    letter-spacing: normal;
}
.editor-pane { position: relative; }
.editor-highlight {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    background: #fff; color: var(--text);
}
/* The site-wide `code` rule sets its own family and a 0.9em size; inside the
   overlay that would shrink the text away from the textarea it has to track. */
.editor-highlight code { display: block; font: inherit; }
.editor-source {
    position: relative; z-index: 1; display: block; width: 100%;
    border-color: var(--border); background: transparent; resize: vertical;
}
/* With the text itself transparent, an opaque selection would hide the
   highlighted copy underneath it. */
.editor.is-live .editor-source { color: transparent; caret-color: var(--text); }
.editor.is-live .editor-source::selection { background: rgba(47, 111, 176, 0.25); color: transparent; }
/* Body too large to highlight on every keystroke: the textarea paints its own
   text again and the overlay steps out of the way entirely. */
.editor.is-live.is-plain .editor-source { color: var(--text); }
.editor.is-live.is-plain .editor-source::selection { background: Highlight; color: HighlightText; }
.editor.is-plain .editor-highlight { display: none; }

.tok-tag     { color: #2f6fb0; }
.tok-attr    { color: #8a5b12; }
.tok-value   { color: #2e7d4f; }
.tok-comment { color: #93a3b1; font-style: italic; }
.tok-doctype { color: #93a3b1; }
.tok-entity  { color: #a1499a; }
.tok-var     { color: #b3382f; background: #fdecea; border-radius: 2px; font-weight: 600; }

.editor-rich {
    min-height: 22rem; max-height: 60vh; overflow-y: auto;
    padding: 0.75rem 0.9rem; border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius); background: #fff;
}
.editor-rich:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.editor-rich > :first-child { margin-top: 0; }
.editor-rich > :last-child { margin-bottom: 0; }
.editor-rich p { margin: 0 0 0.75rem; }
.editor-rich h1 { font-size: 1.5rem; }
.editor-rich h2 { font-size: 1.25rem; }
.editor-rich h3 { font-size: 1.1rem; }
.editor-rich hr { border: none; border-top: 1px solid var(--border); }

/* The sidebar costs the content column 214px. Below this width the widest
   admin table (customers) no longer fits beside it, so the navigation moves
   above the content and gives the table the whole page. */
@media (max-width: 960px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 760px) {
    .topbar-inner { gap: 0.5rem; }
    .container { padding: 1rem 0.75rem 2rem; }
}