/*
 * The Merchant Portal's own layer: element defaults, page chrome, and the handful
 * of screen-specific rules the portal has that ginger-admin does not.
 *
 * Loaded LAST of the eight stylesheets in _base.twig, which is what lets it win on
 * source order. That ordering is the whole cascade contract and it lives in the
 * template - there are no @import statements in this directory, so the <link> list
 * is the single place the order is stated. The page shell it used to @import is
 * layout.css, now the tag immediately above this one.
 *
 * Ported from the previous public/css/v2/_base.css, which was the portal's brand
 * application layer and is NOT the same file as ginger-admin's component library
 * despite both having been called _base.css. That library is _components.css here,
 * renamed precisely so the two cannot be confused again.
 *
 * Unlinking the original without porting it would have dropped whitelabelling
 * entirely: it is what put the brand's background, fonts, nav colours and card
 * styling on the page.
 *
 * Two changes from the original:
 *
 *   1. It reads Tier 2 semantic tokens instead of the original theme.json
 *      vocabulary (--body-background-color, --nav-item-color, and so on). That
 *      vocabulary is retired; Tier 3 in _base.twig now emits these names.
 *
 *   2. Bootstrap 5 selectors, so `.custom-control-input` is `.form-check-input`.
 *
 * Rules the original carried that ginger-admin's component library already
 * provides - the link treatment, `.table a.icon`, `code/samp/pre`, `h2 small`, the
 * dead uPlot chart block - are dropped rather than duplicated. Where both defined
 * a rule, this file is loaded last and wins, which is the point of the ordering in
 * _base.twig.
 */

/* --------------------------------------------------------------- elements */

/*
 * The page shell needs a MINIMUM height, not a fixed one.
 *
 * _components.css says `height: 100%` on both, which pins the document to the viewport
 * so anything taller overflows and is then clipped rather than scrolled. min-height
 * lets the document grow.
 *
 * `overflow-x: clip` on the BODY, rather than the `hidden` _components.css sets, and
 * the difference is load-bearing. `hidden` computes `overflow-y` to `auto`, which makes
 * the element a scroll container - so body had a scrollport of its own while the
 * document actually scrolls on html. `.app-sidebar` is a child of body, so its
 * `position: sticky` resolved against that body scrollport, which never scrolls, and
 * the rail scrolled away with the page instead of pinning.
 *
 * `clip` suppresses the same horizontal overflow WITHOUT creating a scroll container,
 * so the nearest scrolling ancestor becomes html - which does scroll - and sticky
 * works. Do not change it back to `hidden`.
 *
 * Deliberately scoped to body. html keeps whatever _components.css gives it: root
 * overflow propagates to the viewport, and that is not a thing to change in order to
 * fix a sidebar.
 */
html {
    height: auto;
    min-height: 100%;
}

body {
    height: auto;
    min-height: 100vh;
    overflow-x: clip;
    background-color: var(--surface-canvas);
    color: var(--text-on-canvas);
    font-family: var(--font-sans);
}

/*
 * The portal's h1 and h2 are page and card titles. ginger-admin's are something
 * else entirely - its `.small-caps, h2` rule styles h2 as an 11px uppercase eyebrow
 * with a 12.78px line-height, and its `.headline, h1` rule pins h1 to 24px.
 *
 * Inheriting those silently collapsed every card title onto the control below it:
 * a 24px glyph in a 12.78px line box. So this resets the four properties Admin sets
 * that the portal does not want, not just the ones it wants to change. Admin's
 * `.small-caps` class is untouched and still available for real eyebrows.
 */
h1,
h2 {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    line-height: normal;
    text-transform: none;
}

h1 {
    font-size: 2.25rem !important;
    text-align: center;
    letter-spacing: -0.9px;
    font-weight: var(--font-weight-heading);
}

h2 {
    font-size: 1.5rem !important;
    letter-spacing: -0.6px;
}

/* Admin sizes h2's inline small at 50% of an 11px eyebrow; the portal's is a
   subtitle beside a 24px title. */
h2 small {
    font-family: var(--font-sans);
    font-size: 50%;
    letter-spacing: normal;
    text-transform: none;
}

/*
 * The table header: 11px uppercase, --text-placeholder, 0.04em tracking.
 *
 * A real colour token rather than an `opacity`, so it is legible, per-brand, and does
 * not have to be un-done by every component that owns a table.
 *
 * Scoped to `thead` because a `<th scope="row">` is a row label, not an eyebrow -
 * _permission_matrix.twig and _permission_summary.twig both use one for the path, and
 * uppercasing an API path at 11px would be wrong.
 */
thead th {
    color: var(--text-placeholder);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
}

.table-sm td,
.table-sm th {
    padding: 0.4rem 0.3rem;
}

/*
 * The third place the library and the portal's markup disagree about what an element
 * is, alongside the h1/h2 and page-shell cases documented at the top of this file.
 *
 * `.basic-table tbody tr:hover td` in vendor/_base.css:1383 sets its tint, its radius
 * and its cursor per CELL. The radius is the plain defect: `border-radius: 7px` on
 * every `td` rounds all four corners of all eight cells instead of the two ends of the
 * row, so hovering a row drew a row of notches. The tint belongs on the `tr`, where
 * layout.css puts it.
 *
 * `!important` is the only thing that answers `!important`, which is why this lives
 * here rather than in layout.css. Deleting the declarations from the vendor transplant
 * would be the other option; that file is kept diffable against Admin's original, so
 * it is not.
 */
.basic-table > tbody > tr:hover > td,
.basic-table > tbody > tr:hover > th {
    background: transparent !important;
    border-radius: 0 !important;
}

/*
 * `cursor: pointer !important` is the one declaration in that rule that was right for
 * Admin all along - its list rows navigate on click. The portal's index rows do now
 * too, so the correction narrowed to the tables where it is still a lie: the
 * bank-account, payment-method, permission, order-line and bank-transfer blocks on the
 * detail screens have no record to open and are not click targets.
 */
.basic-table > tbody > tr:not(.row-link):hover > td,
.basic-table > tbody > tr:not(.row-link):hover > th {
    cursor: auto !important;
}

/*
 * The row's own link.
 *
 * It stands for the row rather than being a link inside the row, so it takes the cell's
 * own appearance and adds nothing. The library's `.basic-table a` is a content-link
 * treatment - grey, underlined, `font-weight: 400`, `font-size: 13px` - and every part
 * of that is wrong here: the underline would run through the first cell of every row of
 * every list, and the font-weight silently un-bolded the amount column on the orders,
 * payment-links and dashboard lists, whose cells carry `fw-bold`.
 *
 * `font: inherit` rather than naming the properties, because the point is that this
 * anchor has no typography of its own. `color` needs `!important` since the library's
 * rule has it.
 */
.basic-table a.row-link-target {
    color: inherit !important;
    font: inherit;
    border-bottom: 0;
    text-decoration: none;
}

.table tr:first-child td {
    border-top: none;
}

/* Card and table body copy follows the brand, not the canvas. */
.card-body,
.table {
    color: var(--text-on-surface) !important;
}

/*
 * The brand link treatment: an accented underline on prose links.
 *
 * The exclusion list is "anchors that are components rather than links in a sentence".
 * Any anchor-shaped component must be added here, because this file loads last and
 * wins on source order against the library's own `border: none` rules, which tie it on
 * specificity. Miss one and it gets a stray brand-coloured dash under it.
 *
 * Add to this list rather than writing a louder rule elsewhere: one place decides
 * which anchors are prose.
 */
.table a:not(.icon, .row-link-target),
.table a:not(.icon, .row-link-target):hover,
.card-body a:not(.btn, .icon, .row-link-target),
.card-body a:not(.btn, .icon, .row-link-target):hover {
    color: var(--link-color);
    border-bottom: 1px solid var(--link-underline);
}

h1.card-title,
h2.card-title,
.card-header {
    color: var(--text-strong);
}

/* ------------------------------------------------------------------ cards */

.card {
    background-color: var(--surface-app) !important;
    border-radius: var(--radius-content-card) !important;
}

.card-body {
    position: relative;
    overflow: hidden;
}

.card-footer small {
    opacity: 0.5;
}

/* ---------------------------------------------------------------- buttons */

/*
 * Bootstrap's contextual buttons, themed. The portal's own markup rather than the
 * component library's .button-submit family. Prefer the library's classes in new
 * markup; these remain for the call sites that still use them.
 */
.btn-secondary,
.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

.btn-success {
    font-size: 1rem;
}

.btn-success:hover,
.btn-secondary:hover {
    opacity: 0.8;
}

/* ----------------------------------------------------------------- badges */

/*
 * Bootstrap 5 renamed .badge-* to .text-bg-*, which sets a foreground as well.
 * These three keep the portal's own colours on top of that.
 */
.text-bg-secondary {
    background-color: var(--border-warm) !important;
    color: var(--text-strong) !important;
}

.text-bg-light {
    background-color: var(--surface-hover) !important;
    color: var(--text-strong) !important;
}

.badge-custom {
    background-color: var(--accent-detail);
}

/* ------------------------------------------------------------ page chrome */

.logo-icon {
    max-height: 60px;
    width: auto;
}

/*
 * All that is left of the .navbar block. The only remaining .navbar markup is the
 * logo bar on the guest screens, which contains no link.
 */
.navbar a,
.navbar a:hover,
.navbar a:focus {
    border: none;
}

/* There is no footer. --surface-footer therefore has no consumer, though theme.json
   still defines it per brand; see docs/frontend/whitelabelling.md. */

/* ------------------------------------------------------------------ forms */

/*
 * #searchForm is the chip popover in layout.css and every label in it is
 * visually-hidden, so it needs no label rule here. The placeholder rule below is for
 * #editForm, which is still a plain form; the search chips set their own placeholder
 * styling and an id selector here would outrank them.
 */
#editForm ::placeholder {
    color: var(--text-disabled);
}

/*
 * The switch control. Bootstrap 5 styles .form-check-input directly rather than
 * the ::before pseudo-element on the label that Bootstrap 4 used, so these are
 * simpler than the originals as well as renamed.
 */
.form-check-input:focus {
    border-color: var(--accent-detail) !important;
    box-shadow: var(--focus-ring) !important;
}

.form-check-input:checked {
    border-color: var(--accent-detail) !important;
    background-color: var(--accent-detail) !important;
}

.form-check-input:disabled {
    border-color: var(--border-warm) !important;
    background-color: var(--border-warm) !important;
}

.needs-validation {
    position: absolute;
    width: calc(100% - 40px);
    left: 20px;
}

/* --------------------------------------------------------- signup wizard */

.step_over {
    visibility: hidden;
    position: absolute;
    left: -350px;
    transition: all 0.4s ease-out;
}

.step_2_hidden {
    visibility: hidden;
    position: absolute;
    right: -350px;
    width: calc(100% - 40px);
}

.step_2 {
    visibility: visible;
    right: 20px;
    transition: all 0.4s ease-out;
}

#pending_step {
    width: 30px;
    height: 30px;
    display: none;
}

.features_links a {
    text-decoration: none;
    border-bottom: none;
    color: var(--color-primary-on-subtle);
}

/*
 * `.login_form` used to be declared `position: relative` here, to pull the form back
 * into flow after `.needs-validation` below had made it absolute. The form no longer
 * carries that class, and it has no positioned descendants, so the containing block
 * it established had nothing left to contain.
 */

@media (min-width: 768px) and (max-width: 992px) {
    .signup-form {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --------------------------------------------------------------- login */

/*
 * The login card, centred in the guest shell on both axes.
 *
 * Sized rather than stretched: a login form is two fields, and letting it fill a
 * 1440px viewport puts the submit button a very long way from the last input. 500px
 * is the Design System's login card, and inside its 40px inset it fits a 140px label
 * column beside a 280px input.
 *
 * `min-height` is deliberately absent. The card used to carry 300px of it plus a 3px
 * accent border along its bottom edge, which left a band of empty white under the
 * button and a coloured underline no other card in the portal has.
 */

/*
 * The guest `main` is a flex container for one reason: so the shell below can centre
 * itself vertically with an auto margin. `.app-main` is a 100vh flex column and gives
 * `main` every pixel below the logo bar, so centring here is centring in the space the
 * logo does not occupy.
 *
 * `margin: auto` rather than `justify-content: center`, and the difference is not
 * cosmetic. A centred flex line that outgrows its container overflows past the
 * container's LEADING edge, and no scrollbar can reach what spills off the top. Auto
 * margins collapse to zero instead, so a short viewport degrades into a normal scroll.
 *
 * A COLUMN, and that part is load-bearing for the screens this rule is not aimed at.
 * The same `main` carries signup and both password-reset screens, and those put an
 * `h1` and a `.row` straight into the block as siblings. A row flex container would
 * stand the heading beside the card and shrink both to their content; a column stacks
 * them and stretches them to full width, which is what they had in block flow.
 */
body.guest-shell .app-main > main {
    display: flex;
    flex-direction: column;
}

.login-shell {
    width: 100%;
    max-width: 500px;
    margin: auto;
    /* Block padding, not margin: it survives the auto margins collapsing, so the card
       keeps clear of the logo bar and the viewport floor on a short screen. */
    padding: var(--g-space-40) 0;
}

.login-card {
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.login-card > .card-body {
    padding: var(--g-space-32) var(--g-space-40);
}

/*
 * Left-aligned and inside the card, so it reads as the card's subject rather than the
 * page's. `h1` is centred and 2.25rem globally, which is right for a screen title
 * above a table and wrong for a heading inside a 500px card.
 */
.login-title {
    margin: 0 0 var(--g-space-40);
    color: var(--text-strong);
    font-size: var(--font-size-h2) !important;
    text-align: left;
    letter-spacing: normal;
}

/*
 * Label beside field.
 *
 * 140px rather than the --layout-field-label-width the detail screens run on. That
 * token is 200px, which is the right column for a full-width table of fields and the
 * wrong one inside a 500px card: it would leave the input 220px and hand a third of
 * the card to a two-word label. The card is a standalone guest screen with no other
 * field grid beside it, so nothing here has a 200px column to line up against.
 *
 * `align-items: center` rather than the stretch .field-rows uses: these are all
 * single-line controls, and a label should sit on the middle of its input rather than
 * the top of it.
 */
.form-rows {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--g-space-10) 0;
    align-items: center;
}

.form-rows > label {
    margin: 0;
    padding-right: var(--g-space-16);
    color: var(--text-muted); /* the field-label role, same as .field-rows > dt */
    font-size: var(--font-size-body);
}

/* Below 576px the label column and the viewport do not both fit; same breakpoint and
   same reasoning as .field-rows. */
@media (width < 576px) {
    .form-rows {
        grid-template-columns: 1fr;
        gap: var(--g-space-6) 0;
    }

    .form-rows > label {
        padding-right: 0;
    }
}

/* The action sits with the field column, under the inputs rather than under the whole
   card, which is what puts it at the card's trailing edge. */
.login-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--g-space-24);
}

.login-links {
    margin-top: var(--g-space-20);
    text-align: center;
}

.login-links p {
    margin: 0 0 var(--g-space-6);
    color: var(--text-muted);
    font-size: var(--font-size-body);
}

/* The password reveal toggle beside the field. */
.eye_block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    border: 1px solid var(--border-strong);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    cursor: pointer;
    background-color: var(--surface-hover);
    border-left: 0;
}

.eye_button {
    height: 20px;
}

/* ------------------------------------------------------------------ misc */

.selected-language {
    text-decoration: underline !important;
}

.project_settings_hpp_color {
    width: 25px;
    height: 25px;
    border-radius: var(--radius-round);
}

.short-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Bootstrap 5's .fw-bold is 700; the portal has always run its bold at 600. */
.fw-bold {
    font-weight: 600 !important;
}