/*
 * django-unfold changelist tweaks for CPS.
 *
 * The clickable object links in a changelist (the <a> that opens each row's
 * change form) are rendered by Unfold with `text-font-important-light`, a muted
 * neutral that reads as low-contrast body text and doesn't look clickable.
 *
 * Recolour them with the CPS gold (#c2a476, the Unfold `primary` shade) so the
 * links stand out. Scoped to `#result_list` so only the changelist object links
 * are affected, not headers, filters, or other admin chrome.
 */

#result_list td a,
#result_list th a {
    color: #c2a476;
}

#result_list td a:hover,
#result_list th a:hover {
    color: #ab8b5d;
    text-decoration: underline;
}

/*
 * Dashboard "Receita por método de pagamento" legend swatches.
 *
 * Fixed hue per payment method (mirrors Order.TIPO_PAGAMENTO) so a method
 * keeps the same color across renders instead of being colored by rank.
 * Values come from the validated data-viz categorical palette; dark-mode
 * steps are the same hues stepped for the dark surface.
 */
.dashboard-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-right: 6px;
}
.dashboard-swatch-1 { background-color: #2a78d6; }
.dashboard-swatch-2 { background-color: #1baf7a; }
.dashboard-swatch-3 { background-color: #eda100; }
.dashboard-swatch-4 { background-color: #008300; }
.dashboard-swatch-5 { background-color: #4a3aa7; }
.dashboard-swatch-6 { background-color: #e34948; }
.dashboard-swatch-other { background-color: #898781; }

html.dark .dashboard-swatch-1 { background-color: #3987e5; }
html.dark .dashboard-swatch-2 { background-color: #199e70; }
html.dark .dashboard-swatch-3 { background-color: #c98500; }
html.dark .dashboard-swatch-5 { background-color: #9085e9; }
html.dark .dashboard-swatch-6 { background-color: #e66767; }

/*
 * Fixed pixel sizes for dashboard chart canvases.
 *
 * django-unfold ships a precompiled Tailwind stylesheet built only from its
 * OWN templates — arbitrary utility classes (e.g. `w-36`, `h-80`) that
 * Unfold itself never uses have no generated CSS behind them and silently
 * do nothing (the element falls back to its intrinsic/auto size, which is
 * how the Chart.js "responsive" resize loop runs away unbounded). Anything
 * that needs an exact size on this admin has to be a real rule here instead.
 */
.dashboard-donut {
    width: 144px;
    height: 144px;
}

.dashboard-map {
    height: 320px;
}

/*
 * Zoom/pan controls for the "Vendas por país" choropleth
 * (project_static/js/admin/sales-by-country-map.js). chartjs-chart-geo has
 * no built-in zoom UI — these are plain overlay buttons the script wires up.
 */
.dashboard-map-grab {
    cursor: grab;
    touch-action: none;
}
.dashboard-map-grabbing {
    cursor: grabbing;
}

.dashboard-map-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.dashboard-map-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(11, 11, 11, 0.10);
    background-color: #fcfcfb;
    color: #0b0b0b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.dashboard-map-btn:hover {
    background-color: #f0efec;
}

html.dark .dashboard-map-btn {
    border-color: rgba(255, 255, 255, 0.10);
    background-color: #1a1a19;
    color: #ffffff;
}
html.dark .dashboard-map-btn:hover {
    background-color: #2c2c2a;
}

/*
 * SiteUser change form -> "Transações" inline (TransacaoInline, utilizadores/admin.py).
 *
 * With table-layout:auto, three fields have no width cap and dominate the row:
 * the Stock autocomplete (Unfold forces select2 to `width: 100% !important`),
 * the Data input (Tailwind `min-w-52` on the input plus `max-w-2xl`/`min-w-56` on
 * its wrapper), and the Observação textarea (uncapped, sized only by its `cols`
 * attribute). Measured on a 1320px-wide changelist column, those three alone
 * summed to ~1300px (736 + 236 + 334), pushing the table to ~1892px total and
 * leaving Tipo/Local encomenda/Local levantamento's short <select> columns
 * scrolled out of view. Capping the three frees enough width that the whole
 * row fits without horizontal scrolling.
 */
#transacao_utilizador-group .field-stock .select2-container {
    width: 190px !important;
}

#transacao_utilizador-group .field-data .max-w-2xl {
    max-width: 140px;
    min-width: 0;
}

#transacao_utilizador-group .field-data input.vDateField {
    width: 100%;
    min-width: 120px;
}

#transacao_utilizador-group .field-observacao textarea {
    width: 180px;
}

/* Tipo has two choices ("Reserva" / "Reserva com número") that read the same once
   truncated, so it needs enough width to tell them apart. */
#transacao_utilizador-group .field-tipo select {
    min-width: 150px;
}

/*
 * SiteUser change form -> "Histórico de Pagamento de Quotas" (QuotaInline) and
 * "Transações" (TransacaoInline) tables.
 *
 * Both formsets are wide, many-column tables. Unfold's default `text-sm` (14px)
 * on headers, inputs, selects and textareas is set directly on those elements
 * (not just inherited), so shrinking the table's own font-size has no effect
 * without also overriding `.text-sm` itself. Dropping to 12px buys back some
 * horizontal room across every column.
 */
#quota_socio-group .text-sm,
#transacao_utilizador-group .text-sm {
    font-size: 0.75rem;
}

/*
 * The Stock autocomplete (select2) renders its visible text in a `.select2-*`
 * DOM tree that select2.js builds as a sibling of the hidden original
 * <select>, not a descendant of it -- so the `.text-sm` override above (which
 * targets that hidden <select>) never reaches it, leaving Stock at Unfold's
 * default 14px while every other column in the row is 12px. Unfold itself
 * sets `font-size: var(--text-sm)` directly on `.select2-selection__rendered`
 * (not just inherited from `.select2-container`), so the override has to
 * target that same element to win.
 */
#transacao_utilizador-group .field-stock .select2-selection__rendered {
    font-size: 0.75rem;
}

/*
 * Icon-style "Link" button for Trix image attachments.
 *
 * Matches the vendored Trix "Remove" button's circular-badge treatment
 * (trix.css .trix-button--remove) so the two controls in the image
 * attachment toolbar read as a matched pair — same size, shape, and
 * positioning, differing only by icon. The vendor CSS has no variant for
 * this, so it's defined here. Icon is Google's Material Symbols "link"
 * glyph (24x24 viewBox), inlined as a data URI the same way the vendor
 * inlines its own Remove (X) icon.
 *
 * Selector is deliberately scoped through .trix-button-group--actions, not
 * just .trix-button.trix-button--link: this button is the second child of
 * that group (after Remove), so vendor rules like
 * `.trix-button:not(:first-child)` (border-left) and the plain `.trix-button`
 * base rule tie in specificity with a two-class selector alone — a tie
 * whichever stylesheet happens to load later wins, which varies by browser.
 * The extra ancestor class breaks the tie deterministically instead of
 * depending on load order (confirmed via live Firefox devtools: several
 * declarations here — border-radius, background-color, border, padding —
 * were being silently overridden by vendor's plain .trix-button rule).
 */
trix-editor .trix-button-group--actions .trix-button.trix-button--link {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: -9999px;
    display: inline-block;
    padding: 0;
    outline: none;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid highlight;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button-group--actions .trix-button.trix-button--link::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.9%2012c0-1.71%201.39-3.1%203.1-3.1h4V7H7c-2.76%200-5%202.24-5%205s2.24%205%205%205h4v-1.9H7c-1.71%200-3.1-1.39-3.1-3.1zM8%2013h8v-2H8v2zm9-6h-4v1.9h4c1.71%200%203.1%201.39%203.1%203.1s-1.39%203.1-3.1%203.1h-4V17h4c2.76%200%205-2.24%205-5s-2.24-5-5-5z%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}
trix-editor .trix-button-group--actions .trix-button.trix-button--link:hover {
    border-color: #333;
}
trix-editor .trix-button-group--actions .trix-button.trix-button--link:hover::before {
    opacity: 1;
}

/*
 * Icon-style "Left"/"Center"/"Right" alignment buttons for Trix image
 * attachments (cps-align-buttons.js's onAttachmentBeforeToolbar). Same
 * circular-badge treatment as Remove/Link above, for the same specificity
 * reason (the .trix-button-group--actions ancestor class is required to
 * beat vendor's `.trix-button:not(:first-child) { border-left: ... }` --
 * see the Link button comment above). Unlike Remove/Link, the icon here is
 * a Material Symbols Outlined glyph (already loaded admin-wide, the same
 * icon font the main toolbar's own align buttons use in toolbar.html)
 * centered inside, rather than an inlined SVG background -- avoids
 * hand-authoring new SVG path data for three more icons.
 */
trix-editor .trix-button-group--actions .trix-button.trix-button--cps-align {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.3em;
    outline: none;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid highlight;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button-group--actions .trix-button.trix-button--cps-align .material-symbols-outlined {
    font-size: 1.1em;
    opacity: 0.7;
}
trix-editor .trix-button-group--actions .trix-button.trix-button--cps-align:hover {
    border-color: #333;
}
trix-editor .trix-button-group--actions .trix-button.trix-button--cps-align:hover .material-symbols-outlined {
    opacity: 1;
}

/*
 * Hide Trix's built-in attachment filename/size badge.
 *
 * Trix renders this for every image attachment (vendor trix.js
 * PreviewableAttachmentView) to show "filename.jpg • 123 KB" for real
 * uploaded file attachments. This admin never uses Trix's native file
 * upload — images are always inserted as plain <img> via the filer picker
 * (trix-filer-image.js), which have no filename/size metadata, so the badge
 * renders as an empty, content-less dark box that reads as a rendering bug.
 */
trix-editor .attachment__metadata-container {
    display: none;
}

/*
 * "Text color" dropdown menu for the Trix toolbar
 * (project_static/js/admin/trix-text-colors.js).
 *
 * The button group it's appended into carries Tailwind's `relative` utility
 * (see toolbar.html's `cps-color-tools` group), so this menu can position
 * itself absolutely under the button. Color tokens (borders, hover
 * backgrounds) reuse the exact values already established above for
 * .dashboard-map-btn, for visual consistency across this admin's custom
 * chrome.
 *
 * Scoped through `trix-toolbar`, not `trix-editor`: unlike the attachment
 * toolbar above (genuinely rendered inside the editor's own contenteditable
 * content, hence `trix-editor .trix-button-group--actions ...`), this main
 * formatting toolbar is a separate element Trix creates at runtime and
 * inserts as a preceding SIBLING of `<trix-editor>` — confirmed in vendor
 * trix.js's `toolbarElement` getter (`this.parentNode.insertBefore(e,
 * this)`) — never a descendant, so a `trix-editor` ancestor here would
 * silently never match.
 */
trix-toolbar [data-cps-color-menu] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    background-color: #fcfcfb;
    border: 1px solid rgba(11, 11, 11, 0.10);
    border-radius: 6px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
    padding: 4px;
}
trix-toolbar [data-cps-color-menu][hidden] {
    display: none;
}
html.dark trix-toolbar [data-cps-color-menu] {
    background-color: #1a1a19;
    border-color: rgba(255, 255, 255, 0.10);
}

trix-toolbar .cps-color-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    color: inherit;
    text-align: left;
}
trix-toolbar .cps-color-menu-item:hover {
    background-color: #f0efec;
}
html.dark trix-toolbar .cps-color-menu-item:hover {
    background-color: #2c2c2a;
}

trix-toolbar .cps-color-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(11, 11, 11, 0.10);
}
html.dark trix-toolbar .cps-color-swatch {
    border-color: rgba(255, 255, 255, 0.10);
}

/*
 * Fieldset and inline-group section headers ("Inscrição", "Dados Pessoais",
 * "Transações", etc.) render with Unfold's default header background
 * (`bg-base-100` light / a 2% white overlay dark) -- both sit barely a shade
 * off the page's own background (`base-50` light / `base-900` dark), so CPS
 * staff reported the header bars, including the collapsible ones, were too
 * faint to spot at a glance. Tinting with the CPS gold (`primary`, same
 * scale as the changelist link color above) instead of plain grey gives the
 * bar real visual weight while keeping it on-brand.
 *
 * Scoped structurally (fieldset header vs. inline-group header) rather than
 * overriding `.bg-base-100` globally: that Tailwind class is reused elsewhere
 * for unrelated chrome (buttons, nav, dropdowns), and a blanket override
 * would recolor those too.
 */
fieldset.module > h2,
fieldset.module > details > summary > h2,
h2[id$="-heading"] {
    background-color: var(--color-primary-200);
}
html.dark fieldset.module > h2,
html.dark fieldset.module > details > summary > h2,
html.dark h2[id$="-heading"] {
    background-color: var(--color-primary-800);
}