/* ============================================
   Tunable sizes
   ============================================ */

:root {
  /* Side of the square map in the restaurant form, and the width of the
     column holding it -- both read this, so the map cannot stop being square
     by accident. Only .ro-modal-2col-right .ro-modal-map reads it, which is
     what keeps the map on the administration screen out of it: that one lives
     in .rs-map-col and keeps its own height. */
  --modal-map-size: 340px;
}

/* SVG icon base */
.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 18px; height: 18px; }
/* common.css - Shared styles across admin pages (restaurants, onboarding, etc.) */
/* Created: 2026-02-15 */

/* ============================
   Google Maps Autocomplete
   Note: !important required - Google injects inline styles
   ============================ */
.pac-container {
    background: var(--option-bg) !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow) !important;
    margin-top: 4px !important;
    font-family: inherit !important;
    z-index: 10000 !important;
}
.pac-item {
    padding: 10px 14px !important;
    border-top: 1px solid var(--divider) !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover, .pac-item-selected {
    background: var(--gold-tint) !important;
}
.pac-item-query {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.pac-matched { color: var(--gold) !important; }
.pac-icon { display: none !important; }
.pac-item span:last-child {
    color: var(--text-soft) !important;
    font-size: 12px !important;
}

/* ============================
   Search Bar (Google Places)
   ============================ */
.search-bar {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 6px;
    position: relative;
}
.search-bar .input {
    flex: 1;
    padding: 12px 14px 12px 36px;
    font-size: 15px;
    border-color: var(--gold-border);
}
.search-bar .input:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px var(--gold-focus-ring);
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--gold-dim);
    pointer-events: none;
    z-index: 1;
}
.search-hint {
    font-size: 11px;
    color: var(--placeholder);
    margin-top: 4px;
    margin-bottom: 12px;
}
.search-hint em { color: var(--gold-dim); font-style: normal; }
.btn-clear-search {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.btn-clear-search:hover {
    border-color: var(--line-strong);
    color: var(--muted);
}

/* ============================
   Logo Area
   ============================ */
.logo-area {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.logo-drop {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 2px dashed var(--gold-border);
    background: var(--gold-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
}
.logo-drop:hover {
    border-color: var(--line-strong);
    background: var(--gold-subtle);
}
.logo-drop.has-image { border-style: solid; }
.logo-drop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.logo-drop .logo-placeholder-text,
.logo-placeholder {
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
    padding: 8px;
}
.logo-drop .logo-overlay,
.logo-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    border-radius: 12px;
}
.logo-drop:hover .logo-overlay { display: flex; }
.logo-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.logo-controls input[type="file"] { display: none; }
.logo-hint {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.4;
}

/* ============================
   Map Container
   ============================ */
.map-container {
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius: 12px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #e5e3df;
    color-scheme: only light;
    clip-path: inset(0 0 26px 0 round 12px);
    margin-bottom: -26px;
    position: relative;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.map-container > div:first-child {
    width: 100% !important;
    height: 100% !important;
}
/* Hide Google Maps controls */
.map-container .gm-control-active,
.map-container .gm-svpc,
.map-container .gm-bundled-control {
    display: none !important;
}

.map-empty {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 16px;
}
.map-click-hint {
    font-size: 11px;
    color: var(--placeholder);
    text-align: center;
    margin-top: 6px;
}
.map-click-hint em { color: var(--gold-dim); font-style: normal; }

/* ============================
   Specialties (chips + input)
   ============================ */
.spec-subsection { margin-top: 12px; }
.spec-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.spec-input-row input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
}
.spec-input-row input::placeholder { color: var(--placeholder); }
.spec-input-row button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--gold2);
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.spec-input-row button:hover { background: var(--gold-border); }
.spec-input-row button:disabled { opacity: 0.4; cursor: default; }
.spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 16px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    color: var(--text-strong);
    font-size: 13px;
}
.spec-chip .spec-remove {
    cursor: pointer;
    opacity: 0.5;
    font-size: 14px;
    line-height: 1;
}
.spec-chip .spec-remove:hover { opacity: 1; }
.spec-counter {
    font-size: 11px;
    color: var(--placeholder);
    margin-top: 4px;
}

/* ============================
   Buttons - small
   ============================ */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-strong);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-sm:hover {
    border-color: var(--line-strong);
    color: var(--text);
}
.btn-sm.danger {
    border-color: var(--danger-border);
    color: var(--danger);
}
.btn-sm.danger:hover {
    border-color: var(--danger);
    background: var(--danger-bg);
}

/* ============================
   Options (checkboxes)
   ============================ */
.opt-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--gold-tint);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.opt-item:hover { border-color: var(--gold-border); }
.opt-item.active {
    border-color: var(--gold-border);
    background: var(--gold-tint);
}
.opt-check {
    width: 14px;
    height: 14px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}
.opt-label {
    font-size: 13px;
    cursor: pointer;
    flex: 1;
    line-height: 1.3;
}
.opt-sub {
    margin: 6px 0 0 28px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.opt-sub select, .opt-sub input {
    padding: 6px 8px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
}

/* ============================
   Form layout (field rows)
   ============================ */
.field-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.field-col {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}
.field-col.grow { flex: 1; }
.field-col.grow2 { flex: 2; }
.field-col.small { width: 100px; flex: none; }

/* ============================
   Info layout (form + map)
   ============================ */
.info-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.info-form {
    flex: 1;
    min-width: 0;
}
.info-map {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* ============================
   Options wrap
   ============================ */
.options-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* ============================
   Address confirmed badge
   ============================ */
.address-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
    margin-top: 8px;
}
.address-confirmed.warn {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

/* ============================
   Responsive shared
   ============================ */
@media (max-width: 1000px) {
    .info-layout { flex-direction: column; }
    .logo-area { width: 100%; flex-direction: row; }
    .info-map { width: 100%; }
}

@media (max-width: 640px) {
    .field-row { flex-direction: column; }
    .field-col.small { width: 100%; }
    .field-col.grow2 { flex: 1; }
}

/* ============================
   Info 3-column layout
   (fields | map | logo)
   ============================ */
.info-3col {
    display: grid;
    grid-template-columns: 1fr 320px 140px;
    gap: 20px;
    margin-bottom: 16px;
}
.info-3col .col-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-3col .col-map {
    display: flex;
    flex-direction: column;
}
.info-3col .col-map .map-container {
    aspect-ratio: 1;
    min-height: 160px;
}
.info-3col .col-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.info-3col .logo-drop {
    width: 100px;
    height: 100px;
}
.info-3col .logo-hint {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.4;
}
@media (max-width: 900px) {
    .info-3col {
        grid-template-columns: 1fr;
    }
    .info-3col .col-map .map-container {
        min-height: 180px;
    }
}

/* Empty state hint */
.empty-hint {
    padding: 12px;
    color: var(--dim);
    font-size: 13px;
}

/* ==============================
   Mon compte - facturation
   ==============================
   The plan grid and the invoice table. Kept here rather than in a page specific
   file because common.css is already loaded by my-account.html and adding a
   stylesheet for two blocks is one more file to keep in step. */

.acc-billing-state { font-size: 13px; line-height: 1.5; }

/* One column per plan, set by the script. A plan reads down a column, a billing
   period reads across a row, and all six prices are on screen at once: comparing
   99.00 a month against 990.00 a year used to mean toggling a radio and
   remembering the figure that had just left the screen. auto-fill cannot do
   this -- it counts columns by available width, which puts the wrap wherever it
   lands. */
.acc-plan-grid {
    display: grid;
    grid-template-columns: repeat(var(--acc-plan-cols, 3), minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
    align-items: stretch;
}

/* Below this width three columns would be unreadable; each plan then takes a
   row of its own, keeping its two prices together. */
@media (max-width: 560px) {
    .acc-plan-grid { grid-template-columns: 1fr; }
}

/* The three plan colours, one class each. A class sets the local variables and
   paints nothing; whatever sits inside reads them. That way a tone can be hung
   on a card, a table header or a badge without a rule per combination.

   Lost once already, on 18.09: this block sat inside a region rewritten for the
   card layout and went with it, which left every class in place defining
   nothing -- pale pills, pale ticks, and no way to tell from the markup that
   anything was missing. */
.plan-tone-bistro {
    --plan-tone:        var(--plan-bistro);
    --plan-tone-tint:   var(--plan-bistro-tint);
    --plan-tone-border: var(--plan-bistro-border);
}
.plan-tone-resto {
    --plan-tone:        var(--plan-resto);
    --plan-tone-tint:   var(--plan-resto-tint);
    --plan-tone-border: var(--plan-resto-border);
}
.plan-tone-gastro {
    --plan-tone:        var(--plan-gastro);
    --plan-tone-tint:   var(--plan-gastro-tint);
    --plan-tone-border: var(--plan-gastro-border);
}

/* A plan named anywhere else than in the choice window: the restaurant header,
   the administration list, the Facturation card. A tinted word rather than a
   pill -- those rows already carry a status badge, and two pills side by side
   on two hundred lines is a page that shouts. */
.plan-name-tone { color: var(--plan-tone, inherit); font-weight: 600; }

/* The plan name as a filled pill, where a tile STATES the current formula. The
   same object as the one on a choice card, smaller: "Gastro" has to look like
   the same thing whether it is being read or being chosen. */
.plan-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plan-tone, var(--text));
    background: var(--plan-tone-tint, transparent);
    border: 1px solid var(--plan-tone-border, var(--line));
}

/* A card per plan, all of the same height: ragged bottoms between three boxes
   that are meant to be compared read as three unrelated blocks. */
.acc-plan-card {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card-bg2, transparent);
}

.acc-plan-head { display: flex; align-items: center; gap: 8px; }

/* The name as a filled pill, which is where the plan colour lives. */
.acc-plan-name {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plan-tone, var(--text));
    background: var(--plan-tone-tint, transparent);
    border: 1px solid var(--plan-tone-border, var(--line));
}

/* Where he is today, on the card. Dashed like the cell it points at. */
.acc-plan-yours {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px dashed var(--gold);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Who the plan is for, in one sentence. A minimum height rather than none: the
   three sentences are rarely the same length and the prices under them have to
   line up, or the eye compares figures that are not on the same row. */
.acc-plan-pitch {
    margin-top: 10px;
    min-height: 3.4em;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.acc-plan-prices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* One cell is one decision -- a plan AND a period -- so exactly one of the six
   carries the ring. Two separate selections, a column and a row, is what had
   the screen asking for the billing period in two places.

   A button rather than a label around a radio: the whole cell is the control,
   and a radio inside it was a second thing to aim at that did nothing the cell
   did not already do. font and colour are reset by hand because a bare button
   inherits neither. */
.acc-plan-cell {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.acc-plan-cell:hover { border-color: var(--plan-tone-border, var(--line)); }
.acc-plan-cell.selected {
    border-color: var(--accent, #c8a24a);
    box-shadow: inset 0 0 0 1px var(--accent, #c8a24a);
}

/* Where he is today. Dashed rather than badged: a badge inside one cell makes it
   taller than the other five, and a difference in height reads as a difference
   in kind. */
.acc-plan-cell-current { border-style: dashed; border-color: var(--gold); }

.acc-plan-price { font-size: 17px; font-weight: 700; }
.acc-plan-period { font-size: 11px; opacity: 0.7; }
.acc-plan-save { margin-left: auto; font-size: 10px; color: var(--status-active, #74c47a); }
.acc-plan-vat { margin-top: 6px; font-size: 10px; opacity: 0.6; }

/* What the plan adds to the one below it. Separated by a rule: above it, what it
   costs; below it, what it buys. */
.acc-plan-feat-title {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}
.acc-plan-feats { list-style: none; margin: 8px 0 0; padding: 0; }
.acc-plan-feats li {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}
.acc-plan-tick { flex: none; font-weight: 700; color: var(--plan-tone, var(--gold)); }

.acc-plan-line { margin-top: 10px; font-size: 12px; opacity: 0.75; }

/* What it will cost from now on, then what it costs today. Two figures that are
   both true and are not the same number.

   Framed and tinted, set apart from the grid above it: the reader has just
   clicked a price, and this is the consequence rather than one more option. The
   script hides the frame entirely while the selection is still the current
   formula -- an empty frame would announce a change nobody has asked for. */
.acc-plan-outcome {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid var(--danger-border);
    border-radius: 8px;
    background: var(--danger-bg);
}
.acc-plan-after { font-size: 13px; font-weight: 600; }

/* The two doors out of the subscription section, on one line. */
.acc-sub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Two offers of the same kind, read side by side. Top aligned, because the
   referral block is four fields tall and the promotion code is one: bottom
   aligned they would look like one block with a hole in it. */
.acc-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
@media (max-width: 700px) {
    .acc-two-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Two subjects under one heading. The sub-heading is what keeps a merged card
   readable: without it a list of dishes and a list of amenities run into each
   other and neither can be scanned. */
.sc-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dim);
    margin: 2px 0 5px;
}
.sc-sub + div + .sc-sub { margin-top: 14px; }

#billingPreview { margin-top: 10px; }


/* Plan comparison. The chosen column is tinted rather than outlined: an outline
   inside a table fights with the row separators. */
.acc-cmp-wrap { overflow-x: auto; margin-top: 6px; }
.acc-cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.acc-cmp th, .acc-cmp td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}
.acc-cmp thead th {
    font-weight: 600;
    white-space: nowrap;
    color: var(--plan-tone, inherit);
}
.acc-cmp th[scope="row"] { text-align: left; font-weight: 400; }
.acc-cmp .on { background: var(--card-bg2, rgba(255, 255, 255, 0.04)); }
.acc-cmp-yes { color: #4caf50; font-weight: 700; }
.acc-cmp-no { opacity: 0.35; }

/* A window holding a table rather than a form. The shared modal is capped at
   960 px, which suits eight fields and not six columns followed by six buttons;
   the table keeps its own horizontal scroll below that width. */
.ro-modal.wide { max-width: 1320px; min-width: 0; }
#mdSubs .ro-modal-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
#mdSubs .filters-bar { margin-bottom: 12px; }

/* The provider notice and the count, on one line above the filters: in a window
   they no longer have a header card of their own to sit in. */
.sub-head-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Administration cards. A description where other cards show data, because
   these lead somewhere rather than stating something. */
.summary-card-desc { font-size: 12px; opacity: 0.75; line-height: 1.5; }

/* The shared card is 200 px tall, which suits restaurants.html where one holds
   five lines. Here each holds one, and the empty space below reads as content
   that failed to load. Scoped to this page: the others did not ask to change. */
#admCards .summary-card { min-height: 0; }
#admCards .summary-card-body { flex: 0 0 auto; }

/* A card for a screen that does not exist yet. Shown rather than hidden: the
   reader learns what is coming, and learns just as clearly that it is not here.
   Not clickable, and it says so by not lighting up. */
.summary-card.is-soon { cursor: default; opacity: 0.6; }
.summary-card.is-soon:hover { border-color: var(--line); transform: none; }

.acc-inv-wrap { overflow-x: auto; margin-top: 6px; }
.acc-inv { width: 100%; border-collapse: collapse; font-size: 12px; }
.acc-inv th,
.acc-inv td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.acc-inv th { font-weight: 600; opacity: 0.75; }

/* Card summary rows. modal.css styles the card shell and its body font, but not
   the label/value pairs each card puts inside it -- restaurants.html builds its
   own layout per card. These three are the plain two column form used here. */
.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}
.summary-label { opacity: 0.7; flex: 0 0 auto; }
.summary-value { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-empty { font-style: italic; opacity: 0.6; }

/* The warning form of a value.
   administration.js has written this class since its tiles were built -- it is
   what its line() helper emits for the "strong" case -- and nothing styled it,
   so every warning on those tiles has been rendering as an ordinary value. Same
   shape as the red that did not apply on the reservations list: the class was
   on the element, the rule was not in any sheet. */
.summary-value.is-warn { color: var(--danger); font-weight: 600; }

/* ============================================
   Subscription status badge
   ============================================
   It lives here and not in subscriptions.css because two pages wear it: the
   administration list and the restaurant header. One definition, so the green
   of "Actif" cannot come to mean two slightly different things. */
.sub-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--line-strong, var(--line));
}

/* Status colours carry meaning, so they are also distinguishable by their
   label. Colour alone is never the only signal.

   Through variables since 18.09. The five used to be single hex values serving
   both themes: chosen for ivory, and on the anthracite background "Actif" came
   out a dull green that had to be looked for. There is a pair per theme now,
   and Trialing has left slate blue for plum -- the plan ladder took both blues,
   and green, gold and red already carry a verdict of their own. */
.sub-badge.trialing  { border-color: var(--status-trialing-border);  color: var(--status-trialing); }
.sub-badge.active    { border-color: var(--status-active-border);    color: var(--status-active); }
.sub-badge.pastdue   { border-color: var(--status-pastdue-border);   color: var(--status-pastdue); }
.sub-badge.suspended { border-color: var(--status-suspended-border); color: var(--status-suspended); }
.sub-badge.canceled  { border-color: var(--status-canceled-border);  color: var(--status-canceled); }
.sub-badge.none      { border-color: var(--status-canceled-border);  color: var(--status-canceled); }

/* ============================================
   Restaurant header: the subscription in four words
   ============================================
   Each fact is a capsule of its own. Run together in a sentence they would read
   as prose and be skipped; separated, the eye picks out the one it came for. */
.rst-header-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.rst-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}
.rst-chip-key { color: var(--muted); font-size: 11px; }
.rst-chip-val { font-weight: 600; }

/* The status keeps the uppercase it had before: it is the one capsule read
   from across the room. */
.rst-chip-status { text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; }

/* ==============================
   The restaurateur's invoice list
   ============================== */

/* The number opens the document: it has to look like a link, not like text
   somebody underlined by accident. */
.acc-inv-doc {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.acc-inv td.acc-inv-act { text-align: right; }

.acc-pay-btn {
    padding: 2px 10px;
    font: inherit;
    font-size: 0.92em;
    color: var(--gold, #b08d3f);
    background: transparent;
    border: 1px solid var(--gold-border, rgba(176, 141, 63, 0.45));
    border-radius: 4px;
    cursor: pointer;
}

.acc-pay-btn:hover:not(:disabled) {
    background: var(--gold-soft, rgba(176, 141, 63, 0.12));
}

/* Disabled during the request. Without a visual answer the user clicks again,
   and a second click on a payment button is the one place where guessing is
   expensive. */
.acc-pay-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* The reference is long and is only read at reconciliation time: quieter than
   the rest of the row. */
.acc-inv td.acc-inv-ref { opacity: 0.75; }

/* ============================================
   Monitoring
   ============================================
   Moved out of the page-local <style> block of monitoring.html, rule for rule
   and unchanged. It lives here because a rule that exists in one page's head is
   a rule nobody finds, and because the stat tile, the table, the tag and the
   error panel are the shapes the Parametres screen will wear next -- copying
   them into a second page is how one definition becomes two that drift.

   Every colour comes from variables.css, so these follow the theme. */

/* Page header: title, freshness dot. */
.mon-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.mon-head .mon-fresh {
    margin-left: auto;
    font-size: 13px;
    color: var(--dim);
}
.mon-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    margin-right: 6px;
}
.mon-dot.mon-down { background: var(--danger); }

/* Stat tiles, inside a window. */
.mon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.mon-stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-bg);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mon-label {
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dim);
}
.mon-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.mon-value.mon-alert { color: var(--danger); }
.mon-sub {
    font-size: 12px;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}

/* The payments-per-day chart. The SVG carries a fixed viewBox and is sized
   here, so it never measures its container and can be written into a window
   that is still closed. */
.mon-chart { display: block; width: 100%; height: auto; margin-top: 14px; }
.mon-bar { fill: var(--gold); }
.mon-bar-empty { fill: var(--divider); }
.mon-axis { fill: var(--dim); font-size: 9px; }
.mon-grid { stroke: var(--divider); stroke-width: 1; }

/* Tables. */
.mon-tablewrap { overflow-x: auto; margin-top: 14px; }
.mon-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 520px; }
.mon-table th {
    text-align: left;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.mon-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--divider);
    color: var(--text);
    vertical-align: top;
}
.mon-table tr:last-child td { border-bottom: 0; }
.mon-table td.mon-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status tags. */
.mon-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
}
.mon-tag.mon-tag-ok { border-color: var(--gold-border); color: var(--gold); }
.mon-tag.mon-tag-bad { border-color: var(--danger); color: var(--danger); }

/* Notes and failures. */
.mon-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--dim);
}
.mon-error {
    margin-top: 14px;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--danger);
    font-size: 13.5px;
}
/* Inside a tile the same failure has to be one line, not a panel. */
.summary-card-body .mon-error { margin-top: 8px; padding: 8px 10px; font-size: 12.5px; }
/* ============================================
   Settings (SuperAdmin)
   ============================================
   One row per setting: its key, when a change takes effect, what it does, the
   field itself, and who last touched it. The moment of effect is shown on
   EVERY field -- a setting someone changes that then does nothing for twenty
   minutes is a setting they change twice. */
.set-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
}
.set-row:last-child { border-bottom: 0; }
.set-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.set-key { font-size: 13px; font-weight: 600; color: var(--text); }
/* A readable name, the key small and grey under it (26.09.2026). */
.set-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-name { font-size: 14px; font-weight: 600; color: var(--text); }
.set-names .set-key { font-size: 11px; font-weight: 400; color: var(--dim); overflow-wrap: anywhere; }
.set-group-figures { margin-top: 8px; }
body.md-ui #mdSetGroup .ro-modal, #mdSetGroup .ro-modal { max-width: 620px !important; }
.set-effect {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}
.set-desc {
    margin: 5px 0 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}
.set-desc.is-warn { color: var(--danger); }
.set-edit { display: flex; gap: 10px; align-items: center; }
.set-edit .ro-modal-input { flex: 1; min-width: 0; }
.set-edit .set-save { flex: 0 0 auto; }
.set-edit .set-save[disabled] { opacity: .4; cursor: default; }
.set-meta { margin-top: 6px; font-size: 11.5px; color: var(--dim); }
/* Going back, in two buttons that do not mean the same thing.

   Cancel puts the field back the way it was found, before saving. It was the
   most sorely missed of the three: an entry begun by mistake had no way out
   other than the Save button.

   Original value FILLS the field and saves nothing. Rolling back in one click
   on a configuration screen is not a safety net, it is a second change nobody
   asked for -- and it would pass under the invariant check without anyone
   having read it.

   Take back the pool variable does save, because there is nothing to read
   back: a secret is never displayed. */
.set-edit .set-cancel { flex: 0 0 auto; }
.set-edit .set-cancel[disabled] { opacity: .4; cursor: default; }
.set-back {
    margin-top: 7px;
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
}
.set-back button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.set-back button:hover { color: var(--text); }
.set-back button[disabled] { opacity: .4; cursor: default; text-decoration: none; }

/* "Mon compte" > Affichage: the language and theme pickers that used to sit at
   the bottom of the sidebar. A row of label + control, not a summary line, so
   the card is read AND used in place -- there is no modal behind it. */
#cardDisplay { cursor: default; }
.acc-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--divider);
}
.acc-pref-row:last-child { border-bottom: none; }
.acc-pref-select {
    width: auto;
    min-width: 120px;
    padding: 5px 10px;
    font-size: 13px;
}