/* ==========================================================================
   EMA — thin layer on top of the theme the ERP already uses.

   Everything structural comes from template/assets/css/style.css. This file
   only holds what the theme has no opinion about: the wordmark, the topline
   row, and the pages that run without a sidebar (landing, signup, sign-in).

   Rule for anything added here: if the theme already has a component for it,
   use the theme's. A second design system is what produced the three
   incompatible layouts in the legacy ERP.
   ========================================================================== */

/* --- Wordmark ----------------------------------------------------------- */

.ema-wordmark {
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--primary);
}

/* --- Language switch ---------------------------------------------------- */
/* The theme has no bilingual control; everything around it is its own. The
   page title and the topbar are `.page-header` and `.header`, not a layout
   invented here. */

.ema-lang .btn { font-size: .75rem; padding: .2rem .6rem; }

/* --- Pages with no sidebar ---------------------------------------------- */
/* Landing, signup and sign-in have no navigation to show yet, so the theme's
   sidebar offset has to be removed and the content centred instead. */

.page-wrapper.ema-no-sidebar { margin-left: 0; }

.page-wrapper.ema-no-sidebar .content {
    max-width: 52rem;
    margin-inline: auto;
}

/* Sign-in is narrower than a working screen: a single decision, no scanning. */
.ema-narrow { max-width: 26rem; margin-inline: auto; }

/* --- Module rows -------------------------------------------------------- */
/* Built from the theme's card, with one addition: a coloured left edge so
   which modules a customer actually runs reads at a glance, before any label
   is read. */

.ema-module { border-left: 3px solid transparent; }
.ema-module.is-on { border-left-color: var(--success); }
.ema-module.is-off { opacity: .6; }

/* --- Forfait cards ------------------------------------------------------ */
/* The opening screen. Each card is one trade and the whole card is the click
   target (stretched-link), so the hover has to move — a card that looks inert
   under the cursor reads as a heading, not as a choice. */

.ema-forfait { transition: border-color .12s ease, box-shadow .12s ease; }

.ema-forfait:hover,
.ema-forfait:focus-within {
    border-color: var(--bs-primary, #3b7ddd);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

/* The "I choose myself" door is a card like the others but must not compete
   with them: dashed, so it reads as an exit rather than a tenth trade. */
.ema-forfait-other { border-style: dashed; }

/* Suggested, deliberately NOT ticked. Dashed for the same reason the badge is
   not filled: the eye must not price it in. */
.ema-forfait-suggested {
    border: 1px dashed var(--bs-border-color, #dee2e6);
    font-weight: 400;
}

/* --- Data tables -------------------------------------------------------- */
/* Label-and-value tables: the fact on the right, what it is on the left.
   The theme pads a `td` by 12px/16px and centres it, but leaves a `th` at 4px
   aligned to the top — so every label sat high and left of its own value, on
   this screen and on each of the detail pages. Matching them is the whole
   fix. */

.ema-facts th {
    font-weight: 500;
    color: var(--gray-600);
    width: 16rem;
    padding: .75rem 1rem;
    vertical-align: middle;
}

/* Tax numbers, quantities and totals are read as columns of figures. */
.ema-facts td, .ema-mono { font-variant-numeric: tabular-nums; }

@media (max-width: 36rem) {
    .ema-facts th, .ema-facts td { display: block; width: auto; }
    .ema-facts th { border-bottom: 0; padding-bottom: 0; }
}

/* --- Signup address field ----------------------------------------------- */
/* The one place this product differs from a generic signup: the customer is
   claiming an address, so the host they are about to own is shown inline. */

.ema-host { display: flex; align-items: stretch; }

.ema-host input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-family: var(--bs-font-monospace, monospace);
}

.ema-host .ema-host-suffix {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    background: var(--bs-secondary-bg, #f4f4f4);
    color: var(--gray-600);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .85rem;
    white-space: nowrap;
}

/* --- Action principale d'une liste -------------------------------------- */
/* É-3 : le bouton du haut à droite échappe à l'œil. Celui du corps de page
   prend toute la largeur sur mobile — là où le pouce le cherche — et se réduit
   à son texte dès qu'il y a de la place, pour qu'une liste de cinquante lignes
   ne soit pas coiffée d'une bannière. Bootstrap n'a pas de `w-sm-auto`. */

@media (min-width: 576px) {
    .w-sm-auto { width: auto !important; }
}