/* The ONE button system for the whole app (coding-standards §3/§4). Every actionable control — header
   "new" links, form submits, detail-page actions and the icon actions inside every list grid — uses
   `.platform-btn` + a semantic modifier, so there is no per-module or per-table button styling to drift.
   Icons are inline SVG data-URIs painted in `currentColor` via a CSS mask, so a button carries its own
   glyph through its class (no icon markup in Blade or JS) and re-tints with the design tokens.

   Two shapes share the base:
     - labeled (icon + text) — header/detail/form buttons, e.g. `.platform-btn.platform-btn--create`;
     - icon-only square — the compact row actions inside a table, add `.platform-btn--icon` (kept within
       the line height so it never grows the row; width may stretch a little for wider glyphs, ≤ 3:1). */

/* The unfilled tones (`--ghost`, `--edit`, `--delete`, the icon actions) show whatever is BEHIND them, which is
   fine on a card and unreadable on the theme's background photo (M-197/M-203). So the base background is not a
   literal `transparent` but a lookup: `--platform-btn-surface` is an INHERITED opt-in that a container paints
   under its buttons (`.platform-page__actions` in layout.css does exactly that). Unset — everywhere inside a
   card, grid or dialog — it falls back to `transparent`, so those buttons render exactly as before.

   It has to be a fallback INSIDE the base declaration, not a `--platform-btn-bg` set on the container: this rule
   declares `--platform-btn-bg` on the element itself, and an element-level declaration always beats an inherited
   one. And it must not be a plain `background` on `.platform-page__actions .platform-btn`, whose (0,2,0)
   specificity would out-rank the (0,1,0) filled tones below and strip the fill off every primary button in a
   header. The filled tones re-declare `--platform-btn-bg` later in this file at the same specificity, so they
   still win, header or not. */
.platform-btn {
    --platform-btn-color: var(--platform-color-text, #1f2328);
    --platform-btn-bg: var(--platform-btn-surface, transparent);
    --platform-btn-border: var(--platform-color-border, #d0d7de);
    --platform-btn-hover-bg: var(--platform-color-surface-muted, #f6f7f9);
    --platform-btn-icon: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    box-sizing: border-box;
    /* Align to the shared input-height token (M-084) so a labeled button sits level with native
       inputs/selects on the same row; vertical padding trimmed proportionally, horizontal kept. */
    min-height: var(--platform-input-height, 1.9rem);
    padding: 0.2em 0.7em;
    font: inherit;
    font-weight: 600;
    line-height: 1.1;
    color: var(--platform-btn-color);
    background: var(--platform-btn-bg);
    border: 1px solid var(--platform-btn-border);
    border-radius: var(--platform-radius-sm, 0.25rem);
    text-decoration: none;
    cursor: pointer;
}

.platform-btn:hover {
    background: var(--platform-btn-hover-bg);
}

.platform-btn:focus-visible {
    outline: 2px solid var(--platform-color-accent, #0969da);
    outline-offset: 1px;
}

/* The glyph: a mask square filled with the button's text colour, so it always matches the label/tone. */
.platform-btn::before {
    content: "";
    flex: none;
    width: 1.05em;
    height: 1.05em;
    background-color: currentColor;
    -webkit-mask: var(--platform-btn-icon) center / contain no-repeat;
    mask: var(--platform-btn-icon) center / contain no-repeat;
}

/* Icon-only, square — the compact row action. Sized to sit within a table line without growing it.
   Every row-action icon shares one prominent, animated hover affordance (M-054): an accent-tinted
   background (the DEFAULT icon hover) plus a subtle lift, so edit/view/activate all signal
   interactivity the same way the danger icons already did — the affordance is consistent while the
   per-action TONE is preserved. `--delete`/`--deactivate` re-declare `--platform-btn-hover-bg` to
   their red `error-surface` below (same specificity, later in source → they win); `--activate`
   keeps its green foreground (`--platform-btn-color`), so its glyph stays green over the tint. */
.platform-btn--icon {
    --platform-btn-hover-bg: var(--platform-color-accent-surface, #d1f2eb);

    min-height: 0;
    height: 1.7em;
    width: 1.7em;
    padding: 0;
    transition: background 0.12s ease, transform 0.12s ease;
}

.platform-btn--icon::before {
    width: 1em;
    height: 1em;
}

.platform-btn--icon:hover {
    transform: scale(1.12);
}

/* Respect users who ask for less motion: keep the colour affordance, drop the animation + lift. */
@media (prefers-reduced-motion: reduce) {
    .platform-btn--icon {
        transition: none;
    }

    .platform-btn--icon:hover {
        transform: none;
    }
}

/* Buttons with no glyph (plain primary / ghost labels) drop the mask box entirely. */
.platform-btn--primary::before,
.platform-btn--ghost::before {
    display: none;
}

/* ---- Tones + glyphs ----------------------------------------------------- */

.platform-btn--edit {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

.platform-btn--view {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.platform-btn--activate {
    --platform-btn-color: var(--platform-color-ok, #1a7f37);
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* "Confirm this edit" — the grid's inline-editor commit control (data_table_controller.js). It shares the check
   glyph with `--activate`, and deliberately NOT the class: `--activate` means *activate this record* (a user, a
   lookup value), and re-toning or re-glyphing that action one day must not silently change what a ✓ means in every
   editable grid cell. Same icon token, own name, own meaning. */
.platform-btn--confirm {
    --platform-btn-color: var(--platform-color-ok, #1a7f37);
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.platform-btn--deactivate {
    --platform-btn-color: var(--platform-color-error, #cf222e);
    --platform-btn-hover-bg: var(--platform-color-error-surface, #fdeceb);
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.9' y1='4.9' x2='19.1' y2='19.1'/%3E%3C/svg%3E");
}

.platform-btn--delete {
    --platform-btn-color: var(--platform-color-error, #cf222e);
    --platform-btn-hover-bg: var(--platform-color-error-surface, #fdeceb);
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* "Test connection" — a probe/activity pulse (an ECG line). Promoted to the shared button vocabulary in M-314:
   it now glyphs the connectors list's row action AND the storage-Locations list's, so two screens read a probe
   identically rather than each owning a copy (house rule 3). Neutral tone; same masked-glyph mechanism every
   `.platform-btn--*` action uses. */
.platform-btn--test {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}

/* Download a file (M-095) — a down arrow into a tray, neutral tone; shared by the detail file list and the
   live-uploader row so downloading reads the same everywhere. */
.platform-btn--download {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* Replace a file's contents (M-011b) — two chasing arrows (swap/refresh) in the neutral accent tone. */
.platform-btn--replace {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}

/* Acknowledge / close (M-153) — a neutral ✕, used for "dismiss" (drop from my inbox, no action taken).
   Deliberately NOT `--deactivate`'s red circle-slash, which reads as "block"; kept in the default text
   tone so it signals a quiet, non-destructive close rather than an error. */
.platform-btn--dismiss {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Filled, prominent — the primary call to action. `--create` carries the + glyph (labeled "new"
   links); `--primary` is the same fill without a glyph (form submits). */
.platform-btn--create,
.platform-btn--primary {
    --platform-btn-color: var(--platform-color-on-accent, #ffffff);
    --platform-btn-bg: var(--platform-color-accent, #0969da);
    --platform-btn-border: transparent;
    --platform-btn-hover-bg: var(--platform-color-accent-strong, #0860ca);
}

.platform-btn--create {
    --platform-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* Neutral outline label (secondary action / dialog cancel). */
.platform-btn--ghost {
    --platform-btn-color: var(--platform-color-accent, #0969da);
}

/* Filled destructive — the confirm button of a delete/deactivate dialog (labeled, no glyph). */
.platform-btn--danger {
    --platform-btn-color: var(--platform-color-on-accent, #ffffff);
    --platform-btn-bg: var(--platform-color-error, #cf222e);
    --platform-btn-border: transparent;
    --platform-btn-hover-bg: #a40e26;
}

.platform-btn--danger::before {
    display: none;
}