/* Fidellio overrides for the Pcoded theme (preset-10) — charter v1 (validated 2026-08-24).
   Loaded after style-preset.css in layouts/app.blade.php.
   Never edit style.css or style-preset.css: vendor files, overwritten on
   every theme update.

   Charter principle: the brand yellow (#FFE500) is reserved for the primary
   action (one per screen) and small accents; everything else is neutral,
   using greys tinted with the brand hue (H≈54°). All contrasts >= 4.5:1.

   NOTE: preset-10 rules live under [data-pc-preset=preset-10] (specificity
   0-2-0). Any override targeting a class the preset also styles MUST carry
   the same prefix, or it silently loses regardless of load order. */

:root {
	/* Neutrals */
	--fid-paper: #FAF9F4;
	--fid-card: #FFFFFF;
	--fid-subtle: #F3F2E9;
	--fid-line: #E8E6D8;
	--fid-line-strong: #C9C6B2;
	--fid-ink: #17160E;        /* 17.6:1 on white */
	--fid-ink-soft: #56543F;   /* 7.4:1 */
	--fid-ink-faint: #74715B;  /* 4.7:1 */

	/* Yellow — the 10% */
	--fid-accent: #FFE500;
	--fid-accent-hover: #EBD400;
	--fid-accent-press: #D6C200;
	--fid-accent-pale: #FFF6C8;
	--fid-accent-border: #F0E27A;
	--fid-accent-ink: #6B5D00;       /* 6.6:1 — brand links/text on light bg */
	--fid-accent-ink-hover: #524700;

	/* Semantic: solid text / badge background / badge text */
	--fid-success: #1E7B34; --fid-success-bg: #E7F4EA; --fid-success-ink: #14582A;
	--fid-warning: #8A5A00; --fid-warning-bg: #FBF1DC; --fid-warning-ink: #7A5000;
	--fid-danger: #B3261E;  --fid-danger-bg: #FBECEB;  --fid-danger-ink: #A02018;
	--fid-info: #14607A;    --fid-info-bg: #E4F1F6;    --fid-info-ink: #14607A;
}

/* ============================================================
   Surfaces — T1: large yellow areas go back to neutral
   ============================================================ */

body {
	background-color: var(--fid-paper);
}

/* Auth pages: the preset paints the whole viewport #ffe500. */
.auth-main .auth-wrapper {
	background-color: var(--fid-paper);
}

/* The preset forces a 60px card-body padding on auth cards — on a 375px
   viewport that squeezes the form to ~200px. */
@media (max-width: 575.98px) {
	.auth-main .auth-wrapper.v1 .auth-form .card-body {
		padding: 32px 24px;
	}
}

/* Top chrome: the header followed the grey body bg and looked absent —
   white like the sidebar, with a hairline to bound the content area. */
.pc-header {
	--pc-header-background: var(--fid-card);
	border-bottom: 1px solid var(--fid-line);
}

/* Passive status chip (trial countdown): neutral pale family, the yellow
   stays reserved for actions. */
.trial-chip {
	display: inline-block;
	background: var(--fid-subtle);
	color: var(--fid-ink-soft);
	font-size: 12px;
	font-weight: 600;
	padding: .35rem .75rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* Sidebar items: a touch more breathing room, in line with the airy cards. */
.pc-sidebar .pc-navbar > .pc-item > .pc-link {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Content width: on large screens the content stretched edge to edge
   (deserted columns, empty band-like cards) — charter grid, content
   capped at 1280px, centered. */
.pc-container .pc-content {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Welcome banners (campaigns, contests): the preset paints them solid
   yellow — pale bordered yellow instead, like info callouts. */
.bg-fidellio {
	background: var(--fid-accent-pale);
	border: 1px solid var(--fid-accent-border);
}

/* Empty state (charter batch C): shared look for "no data yet" boxes. */
.fid-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1.5px dashed var(--fid-line-strong);
	border-radius: 8px;
	padding: 24px;
	min-height: 240px;
}

/* ============================================================
   Links & text — the preset promotes #ffe500 as the link color
   (1.28:1 on white). Brand links: dark readable yellow.
   Preset prefix required (see NOTE above).
   ============================================================ */

[data-pc-preset=preset-10] {
	/* -rgb pairs must stay raw R,G,B triplets (Bootstrap composes them
	   with an alpha); they mirror --fid-accent-ink / -hover. */
	--bs-link-color: var(--fid-accent-ink);
	--bs-link-color-rgb: 107, 93, 0;
	--bs-link-hover-color: var(--fid-accent-ink-hover);
	--bs-link-hover-color-rgb: 82, 71, 0;
}

.text-primary {
	color: var(--fid-ink) !important;
}

[data-pc-preset=preset-10] .btn-link {
	--bs-btn-color: var(--fid-accent-ink);
	--bs-btn-hover-color: var(--fid-accent-ink-hover);
	--bs-btn-active-color: var(--fid-accent-ink-hover);
	--bs-btn-disabled-color: var(--fid-ink-faint);
}

/* Auth page links: the preset forces them to #707070 (4.0:1, below AA).
   Same grey as the rest of the site. */
.auth-main .auth-wrapper.v1 .auth-form a {
	color: var(--fid-ink-soft) !important;
}

.auth-main .auth-wrapper.v1 .auth-form a:hover,
.auth-main .auth-wrapper.v1 .auth-form a:focus {
	color: var(--fid-ink) !important;
}

/* ============================================================
   Buttons — T2/T3/T7: three levels, sentence case
   ============================================================ */

/* The theme forces button labels to uppercase 12px bold (hard rule around
   style.css:22726, which overrides the Bootstrap variable) — a size tuned
   for capitals. In sentence case, bump one step (0.95rem/600) to keep the
   same optical presence. */
.btn {
	text-transform: none;
	font-size: 0.95rem;
	--bs-btn-font-weight: 600;
}

.btn-sm {
	font-size: 0.85rem;
}

/* Icon buttons (table actions): the theme sizes them 40x40 — 44px minimum
   touch target (Fitts's law, charter batch D). */
.btn.btn-icon {
	width: 44px;
	height: 44px;
}

/* Primary (yellow): the preset sends hover to solid black — stay within
   the hue (L−6 hover, L−12 pressed), ink text. One per view. */
[data-pc-preset=preset-10] .btn-primary {
	--bs-btn-color: var(--fid-ink);
	--bs-btn-bg: var(--fid-accent);
	--bs-btn-border-color: var(--fid-accent);
	--bs-btn-hover-color: var(--fid-ink);
	--bs-btn-hover-bg: var(--fid-accent-hover);
	--bs-btn-hover-border-color: var(--fid-accent-hover);
	--bs-btn-active-color: var(--fid-ink);
	--bs-btn-active-bg: var(--fid-accent-press);
	--bs-btn-active-border-color: var(--fid-accent-press);
	--bs-btn-disabled-color: var(--fid-ink-soft);
	--bs-btn-disabled-bg: var(--fid-accent-pale);
	--bs-btn-disabled-border-color: var(--fid-accent-pale);
}

/* Secondary: solid black disappears (it only existed to survive yellow
   backgrounds). All existing .btn-dark become outlines. */
.btn-dark {
	--bs-btn-color: var(--fid-ink);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--fid-line-strong);
	--bs-btn-hover-color: var(--fid-ink);
	--bs-btn-hover-bg: var(--fid-subtle);
	--bs-btn-hover-border-color: var(--fid-line-strong);
	--bs-btn-active-color: var(--fid-ink);
	--bs-btn-active-bg: var(--fid-line);
	--bs-btn-active-border-color: var(--fid-line-strong);
	--bs-btn-disabled-color: var(--fid-ink-faint);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--fid-line);
}

/* ============================================================
   Badges — replaces the style.css:7098 hotspot (forced white text
   on warning/success/info): pale background + dark text, everywhere.
   .text-bg-primary needs the preset prefix (preset rule is !important
   at higher specificity).
   ============================================================ */

[data-pc-preset=preset-10] .text-bg-primary {
	color: var(--fid-accent-ink) !important;
	background-color: var(--fid-accent-pale) !important;
}

.text-bg-success {
	color: var(--fid-success-ink) !important;
	background-color: var(--fid-success-bg) !important;
}

.text-bg-warning {
	color: var(--fid-warning-ink) !important;
	background-color: var(--fid-warning-bg) !important;
}

.text-bg-danger {
	color: var(--fid-danger-ink) !important;
	background-color: var(--fid-danger-bg) !important;
}

.text-bg-info {
	color: var(--fid-info-ink) !important;
	background-color: var(--fid-info-bg) !important;
}

/* Neutral state badge (e.g. "waiting" campaign status): keep it in the
   pale family instead of solid dark next to recolored siblings. */
.text-bg-dark {
	color: var(--fid-ink-soft) !important;
	background-color: var(--fid-subtle) !important;
}

.badge.bg-success {
	color: var(--fid-success-ink) !important;
	background-color: var(--fid-success-bg) !important;
}

.badge.bg-warning {
	color: var(--fid-warning-ink) !important;
	background-color: var(--fid-warning-bg) !important;
}

.badge.bg-danger {
	color: var(--fid-danger-ink) !important;
	background-color: var(--fid-danger-bg) !important;
}

.badge.bg-info {
	color: var(--fid-info-ink) !important;
	background-color: var(--fid-info-bg) !important;
}

/* ============================================================
   Theme components already fixed on 08/18 (prudent pass), aligned
   with the charter tokens
   ============================================================ */

/* Progress bars are filled with the brand yellow; Bootstrap puts white
   text on them (unreadable, e.g. the age chart on Statistics). */
.progress-bar {
	color: var(--fid-ink);
	font-weight: 600;
}

/* .analytics-tab tabs (Add points, Invoices, Orders): the theme turns the
   active — and hovered — tab text brand yellow, unreadable on white. The
   yellow underline (::after) already marks the active tab. */
.analytics-tab .nav-item .nav-link {
	color: var(--fid-ink-soft);
}

.analytics-tab .nav-link:hover,
.analytics-tab .nav-item.show .nav-link,
.analytics-tab .nav-link.active {
	color: var(--fid-ink);
}

/* Admin section of the sidebar: it has no toggle link, so the submenu
   indentation meant for a parent item is removed, and a divider closes
   the section before the merchant menu ("Dashboard" is not an admin child). */
.pc-sidebar .pc-admin-section > .pc-submenu {
	display: block !important;
}

/* Specificity matches the theme rule on ".pc-navbar > .pc-item" (margin: 0 10px). */
.pc-sidebar .pc-navbar > .pc-item.pc-admin-divider {
	border-top: 1px solid rgba(0, 0, 0, .12);
	margin: 12px 20px 4px;
	padding: 0 !important;
	height: 0;
}

.pc-sidebar .pc-admin-caption { cursor: pointer; user-select: none; }
.pc-sidebar .pc-admin-caption label { cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pc-sidebar .pc-admin-caption .pc-admin-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 4px; cursor: pointer; }
.pc-sidebar .pc-admin-caption .pc-admin-toggle:focus-visible { outline: 2px solid var(--fid-accent); outline-offset: 2px; border-radius: 4px; }
.pc-sidebar .pc-admin-caption .pc-admin-chevron { flex: 0 0 auto; color: var(--fid-ink-soft); transition: transform .2s ease; }
.pc-sidebar .pc-admin-caption:hover .pc-admin-chevron { color: var(--fid-ink); }
.pc-sidebar .pc-admin-caption.is-folded .pc-admin-chevron { transform: rotate(-90deg); }
/* The theme hides the caption icon in the compact layout; keep the chevron out of that rule. */
.pc-sidebar .pc-admin-caption svg.pc-admin-chevron { display: inline-block; margin: 0; }
.pc-sidebar .pc-admin-section[hidden] { display: none !important; }

/* Current admin page: the theme only marks a submenu item with a 6px dot and
   font-weight 500, invisible at a glance. Give it a filled row instead. */
.pc-sidebar .pc-admin-section .pc-submenu .pc-item.active > .pc-link {
	background: var(--fid-subtle);
	border-radius: 8px;
	color: var(--pc-sidebar-active-color);
	font-weight: 700;
}

.pc-sidebar .pc-admin-section .pc-submenu .pc-item.active > .pc-link:after {
	opacity: 1;
	transform: scale(1.4);
	background: var(--fid-accent);
	border: 1px solid rgba(0, 0, 0, .35);
}

/* ---------- Admin lists: shared table template (Users, Categories, Customers) ----------
   Same shape as the paying-merchants tab: fixed layout, grouped cells, sortable headers,
   and stacked cards under 768px so nothing needs a horizontal scroll. */
.admin-table { table-layout: fixed; width: 100%; }
.admin-table th, .admin-table td { vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.admin-table th { overflow-wrap: normal; word-break: normal; }
.admin-table .cell-secondary { display: block; font-size: .8rem; color: var(--fid-ink-faint); }
.admin-table .cell-numeric { text-align: center; font-variant-numeric: tabular-nums; }
.admin-table .cell-actions .btn-icon { margin: 0; }
.admin-table .sort-link { color: inherit; text-decoration: none; cursor: pointer; }
.admin-table .sort-link .sort-icon { opacity: .35; margin-left: .25rem; }
.admin-table .sort-link:hover .sort-icon { opacity: .8; }
.admin-table .sort-link.is-active .sort-icon { opacity: 1; color: var(--fid-ink); }
.admin-table .sort-link.is-active { color: var(--fid-ink); text-decoration: underline; text-decoration-color: var(--fid-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.admin-toolbar .form-control, .admin-toolbar .form-select, .admin-toolbar .choices__inner { min-height: 2.5rem; }
.admin-toolbar .choices { margin-bottom: 0; }

@media (max-width: 767.98px) {
	.admin-table, .admin-table tbody, .admin-table tbody tr { display: block; width: 100%; table-layout: auto; }
	.admin-table thead, .admin-table colgroup { display: none; }
	.admin-table tbody tr { border: 1px solid var(--fid-line); border-radius: .5rem; margin-bottom: .75rem; padding: .5rem .9rem; background: var(--fid-card); }
	.admin-table tbody td { display: block; border: 0; padding: .4rem 0; text-align: left; }
	.admin-table tbody td + td { border-top: 1px solid var(--fid-line); }
	.admin-table tbody td::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fid-ink-faint); margin-bottom: .15rem; }
	/* A cell with no label gets no label slot. These rules are written as
	   descendants, so they also reach a table nested inside a cell (the
	   language bindings on the WhatsApp templates screen), whose cells carry
	   no data-label and would otherwise each open an empty line. */
	.admin-table tbody td:not([data-label])::before { content: none; }
	.admin-table tbody td.cell-numeric, .admin-table tbody td.cell-actions { text-align: left; }
}

/* ---------- Admin design tokens (vague 3 de l'audit back-office) ----------
   One type scale, two spacings, one control height, three colour roles.
   Scoped to admin pages via the body class set in layouts/app.blade.php. */
:root {
	--fid-admin-text-xs: 12px;
	--fid-admin-text-sm: 14px;
	--fid-admin-text-md: 16px;
	--fid-admin-text-lg: 20px;
	--fid-admin-text-xl: 30px;
	--fid-admin-text-xxl: 40px;
	--fid-admin-pad: 20px;
	--fid-admin-gutter: 24px;
	--fid-admin-control: 44px;
	--fid-admin-control-sm: 32px;
	--fid-admin-radius: 12px;
	--fid-money: #2CA87F;
	--fid-alert: #C0392B;
}

.is-admin .pc-content > .row { --bs-gutter-x: var(--fid-admin-gutter); }
.is-admin .card { border-radius: var(--fid-admin-radius); }
.is-admin .card > .card-body { padding: var(--fid-admin-pad); }
.is-admin .card > .card-header { padding: 16px var(--fid-admin-pad); }
.is-admin .admin-toolbar .form-control,
.is-admin .admin-toolbar .form-select,
.is-admin .admin-toolbar .choices__inner,
.is-admin .admin-toolbar .input-group-text { min-height: var(--fid-admin-control); }
.is-admin .btn-sm { min-height: var(--fid-admin-control-sm); display: inline-flex; align-items: center; }
.is-admin .admin-table th { text-transform: uppercase; }
.is-admin .admin-table td { font-size: var(--fid-admin-text-sm); padding-top: 12px; padding-bottom: 12px; }

/* Counter tile: neutral by default (the yellow is for actions), green for money, red for alerts. */
.stat-card { background: var(--fid-card); border: 1px solid var(--fid-line); box-shadow: none; }
.stat-card .stat-value { font-size: var(--fid-admin-text-xxl); line-height: 1.1; font-weight: 700; color: var(--fid-ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.stat-card .stat-value .d-block { font-size: var(--fid-admin-text-xl); }
.stat-card .stat-label { font-size: var(--fid-admin-text-sm); color: var(--fid-ink-soft); margin-top: 4px; }
.stat-card .stat-hint { font-size: var(--fid-admin-text-xs); color: var(--fid-ink-faint); margin-top: 2px; }
.stat-card .stat-icon { font-size: 28px; line-height: 1; color: var(--fid-ink-faint); opacity: .7; flex: 0 0 auto; }
.stat-card.tone-money .stat-value, .stat-card.tone-money .stat-icon { color: var(--fid-money); opacity: 1; }
.stat-card.tone-alert .stat-value, .stat-card.tone-alert .stat-icon { color: var(--fid-alert); opacity: 1; }

/* Share badge next to a counter: a caption, not a second figure. */
.stat-card .stat-value .badge { font-size: var(--fid-admin-text-xs); font-weight: 600; line-height: 1.4; padding: 3px 8px; align-self: center; letter-spacing: 0; }

/* Table headers: one calm line per column. */
.is-admin .admin-table thead th { padding: 14px 16px; font-size: 13px; font-weight: 700; letter-spacing: normal; color: var(--fid-ink); background: transparent; border-bottom: 1px solid var(--fid-line); vertical-align: middle; white-space: nowrap; }
.is-admin .admin-table thead th .sort-link { color: inherit; }
.is-admin .admin-table thead th .sort-link .sort-icon { font-size: 12px; margin-left: .2rem; }
.is-admin .admin-table thead th .sort-link.is-active { color: var(--fid-ink); text-decoration: none; border-bottom: 2px solid var(--fid-accent); padding-bottom: 2px; }
.admin-table .sort-sep { margin: 0 .35rem; color: var(--fid-ink-faint); }
@media (max-width: 1100px) { .is-admin .admin-table thead th { white-space: normal; } }

/* Rows breathe; words only break when a single token is too long (emails). */
.is-admin .admin-table td { padding: 16px; line-height: 1.45; overflow-wrap: break-word; word-break: break-word; }
.admin-table .cell-secondary { margin-top: 2px; }
.admin-table .cell-secondary + .cell-secondary { margin-top: 0; }
.is-admin .admin-table .avtar { flex: 0 0 auto; }
.admin-table .sort-link-icon { margin-left: .5rem; padding: 2px 4px; border-radius: 6px; }
.admin-table .sort-link-icon .ti-clock { font-size: 13px; }
.admin-table .sort-link-icon .sort-icon { margin-left: 0; }

/* Actions stay on one line; secondary contact links read as data, not as buttons. */
.is-admin .admin-table .cell-actions { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.admin-table .cell-secondary a { color: inherit; text-decoration: none; }
.admin-table .cell-secondary a:hover { text-decoration: underline; }
.admin-table thead th.text-center, .admin-table thead th.cell-numeric { text-align: center; }

/* Mobile toolbar: every control on its own full-width row, buttons stretched. */
@media (max-width: 767.98px) {
	.is-admin .admin-toolbar .btn { flex: 1 1 auto; justify-content: center; }
	.is-admin .admin-toolbar .form-switch { padding-top: 6px; }
	.is-admin .admin-toolbar .choices__list--dropdown { z-index: 1050; }
}

/* Empty state: one calm card with a single call to action, no coloured alert. */
.is-admin .empty-state { border: 1px dashed var(--fid-line-strong); background: var(--fid-card); box-shadow: none; }
.is-admin .empty-state .card-body { padding: 48px 24px; }
.is-admin .empty-state .empty-state-icon { font-size: 40px; line-height: 1; color: var(--fid-ink-faint); }

/* Store versions next to the minimum-version fields: readable at a glance (the
   theme badges were ~11 px), the version itself in bold. */
.is-admin .store-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.is-admin .store-versions-label { font-size: var(--fid-admin-text-sm); color: var(--fid-ink-soft); }
.is-admin .store-version-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fid-admin-text-sm); color: var(--fid-ink); background: var(--fid-subtle); border: 1px solid var(--fid-line); border-radius: 6px; padding: 4px 10px; }
.is-admin .store-version-chip .ti { font-size: 16px; color: var(--fid-ink-soft); }

/* Status tiles (subscription audit): neutral tile, colour on the left border, ring when active. */
.stat-card-status { color: var(--fid-ink); }
.stat-card-status .stat-value { font-size: var(--fid-admin-text-xl); }
.stat-card-status.is-active { box-shadow: 0 0 0 2px var(--fid-ink); }
a.stat-card-status:hover { background: var(--fid-subtle); }
/* Tables whose columns have no colgroup keep the browser layout but share the header style. */
.admin-table.admin-table-auto { table-layout: auto; }
@media (max-width: 767.98px) { .admin-table.admin-table-auto tbody td::before { content: none; } .admin-table.admin-table-auto, .admin-table.admin-table-auto tbody, .admin-table.admin-table-auto tbody tr, .admin-table.admin-table-auto tbody td { display: revert; } .admin-table.admin-table-auto thead { display: table-header-group; } }

/* Identifiers (template keys, message ids) read as data, not as an alert:
   Bootstrap's <code> is magenta #E83E8C, a colour the admin palette has no
   role for — and it sat right next to the red error codes in the WhatsApp
   journal. Neutral chip instead, on the same subtle surface as the rest. */
.is-admin code { color: var(--fid-ink-soft); background: var(--fid-subtle); padding: 1px 5px; border-radius: 4px; }

/* Warning text: the theme's #E58A00 is 2.7:1 on white, unreadable as prose
   (used for "template to bind", "unsynced languages"…). Same hue, the ink
   tone the token set already defines for it. Badges keep their own colours. */
.is-admin .text-warning:not(.badge) { color: var(--fid-warning-ink) !important; }