/* ============================================================================
 * MeGoPay design system
 *
 * Tokens live in _variables.css. This file applies them to the components the
 * brand actually shows: rounded cards on pale surfaces, navy pill actions,
 * quiet hairlines, generous spacing. Azure appears as an accent — gradient
 * ends, focus, secondary — never behind white text, where it fails contrast.
 *
 * Written as an overlay on the existing Bootstrap/Blade markup rather than a
 * rewrite of it. Every rule targets a class the templates already emit, so the
 * look changes without ~200 views having to change with it. Where a rule has to
 * out-specify a Bootstrap default it says so, rather than reaching for
 * !important by reflex.
 *
 * Loaded after the theme stylesheets in _head, so it wins on equal specificity.
 * ========================================================================== */

/* ------------------------------------------------------------------ type */

body,
.card,
.btn,
.form-control,
.form-select,
.modal-content,
.dropdown-menu,
.table {
    font-family: var(--front-font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The design leans on weight, not size, to build hierarchy: one family, five
 * weights, tight tracking on the large sizes. */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--front-font-display);
    font-weight: var(--front-weight-bold);
    letter-spacing: -0.02em;
    color: var(--front-color-heading);
}

h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--front-font-display);
    font-weight: var(--front-weight-medium);
    letter-spacing: -0.01em;
    color: var(--front-color-heading);
}

.text-muted,
.text-secondary {
    color: var(--ds-ink-mute) !important;  /* Bootstrap sets this with !important */
}

/* --------------------------------------------------------------- surfaces */

.card,
.panel,
.widget,
.dashboard-card {
    background: var(--ds-white);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
}

/* Tinted surfaces, used to group related information — a summary block, a
 * highlighted total — never as decoration. The brand has one tint rather than
 * the three the previous palette carried, so grouping is done with pale and
 * navy and the distinction between panels comes from position, not hue. */
.surface-pale  { background: var(--ds-pale); }
.surface-navy  { background: var(--ds-navy); color: var(--ds-white); }

.surface-pale,
.surface-navy {
    border-radius: var(--ds-radius-panel);
    border: 0;
}

/* --------------------------------------------------------------- actions */

.btn {
    border-radius: var(--ds-radius-pill);
    font-weight: var(--front-weight-medium);
    letter-spacing: -0.01em;
    padding: 0.7rem 1.5rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
    background: var(--ds-navy);
    border-color: var(--ds-navy);
    color: var(--ds-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--front-color-primary-hover);
    border-color: var(--front-color-primary-hover);
    color: var(--ds-white);
}

/* Secondary is a tinted pill, not an outline — matching the softer actions in
 * the design (Add New Card, Add Address). */
.btn-secondary,
.btn-light {
    background: var(--ds-pale);
    border-color: transparent;
    color: var(--ds-navy);
}

.btn-secondary:hover,
.btn-light:hover {
    background: var(--ds-pale-deep);
    color: var(--ds-navy);
}

.btn-outline-primary {
    border-color: var(--ds-navy);
    color: var(--ds-navy);
}

.btn-outline-primary:hover {
    background: var(--ds-navy);
    color: var(--ds-white);
}

/* ---------------------------------------------------------------- inputs */

.form-control,
.form-select {
    border-radius: var(--ds-radius-field);
    border: 1px solid var(--ds-hairline);
    padding: 0.7rem 1rem;
    color: var(--front-color-text);

    /* dashboard-style.css sizes every field as height: 45px with a matching
     * line-height: 45px — a way of centring one line of text in a box by
     * making the line exactly as tall as the box. That only holds while the
     * vertical padding is zero, which is what it was when it was written.
     *
     * The padding above then broke it. 45px of box, less 2px of border and
     * 22.4px of padding, leaves 22.6px of content box for a 45px line: the
     * line overflowed by 22.4px and every dropdown and field in the dashboard
     * had ~11px sliced off the top and bottom of its text.
     *
     * A normal line-height fixes it and moves nothing — 1.5 × 13.3px is 20px,
     * which fits the 22.6px, and the box stays exactly 45px. */
    line-height: 1.5;
}

/* Same rule, second casualty: a fixed 45px height applies to textareas too,
 * so rows="3" rendered one squashed line. Height back to the browser's, with
 * 45px kept as a floor so a one-row textarea still matches the fields above. */
textarea.form-control {
    height: auto;
    min-height: 45px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ds-navy);
    /* A navy ring rather than Bootstrap's own blue, so focus reads as part of
     * the brand rather than a browser default sitting on top of it. */
    box-shadow: 0 0 0 3px rgba(15, 35, 80, 0.12);
}

.form-control::placeholder { color: var(--ds-ink-mute); }

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

.badge {
    border-radius: var(--ds-radius-pill);
    font-weight: var(--front-weight-medium);
    padding: 0.35em 0.8em;
}

/* Only primary and secondary are restated. info, warning, success and danger
 * keep the semantic colours already defined in _variables.css: the brand has
 * no green, amber or red, and inventing them from a blue palette would make a
 * failed payment and a successful one look alike. */
.badge.bg-primary   { background: var(--ds-navy) !important; }
.badge.bg-secondary { background: var(--ds-pale) !important; color: var(--ds-navy) !important; }

/* ----------------------------------------------------------------- table */

.table > :not(caption) > * > * {
    border-bottom-color: var(--ds-hairline);
    padding: 0.9rem 1rem;
}

.table thead th {
    font-weight: var(--front-weight-medium);
    color: var(--ds-ink-mute);
    text-transform: none;      /* the design does not shout in small caps */
    letter-spacing: 0;
    border-bottom: 1px solid var(--ds-hairline);
}

/* ---------------------------------------------------------------- modals */

.modal-content {
    border: 0;
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-raised);
}

.modal-header,
.modal-footer {
    border-color: var(--ds-hairline);
}

/* ------------------------------------------------------------ navigation */

.nav-pills .nav-link {
    border-radius: var(--ds-radius-pill);
    color: var(--ds-navy-soft);
    font-weight: var(--front-weight-medium);
}

.nav-pills .nav-link.active {
    background: var(--ds-navy);
    color: var(--ds-white);
}

/* --------------------------------------------------------------- utility */

.rounded-card  { border-radius: var(--ds-radius-card); }
.rounded-panel { border-radius: var(--ds-radius-panel); }
.rounded-pill-ds { border-radius: var(--ds-radius-pill); }

/* Respect a reduced-motion preference: the transitions above are decorative
 * and there is no reason to insist on them. */
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
}

/* ============================================================================
 * Auth screens
 *
 * The login, register and forgot-password views are near-bare Bootstrap: a
 * centred column, a heading, two form groups and a submit. The tokens alone
 * recolour them but leave the shape unchanged, so the layout is treated here.
 *
 * Targets the classes those views already emit rather than asking for new
 * markup, so every auth screen — user, agent, merchant — picks it up at once.
 * ========================================================================== */

.bg-auth {
    background: var(--ds-pale);
}

/* The form column becomes a card floating on the tinted ground, which is the
 * relationship the design uses everywhere: tinted surface, white card. */
body .container-fluid > .row.justify-content-center > [class*="col-"]:first-child {
    background: var(--ds-white);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
    padding: 2.5rem 2rem;
}

/* The auth heading uses display-4, which Bootstrap sizes for hero copy. The
 * design's headings are large but tightly tracked rather than airy. */
.display-4 {
    font-family: var(--front-font-display);
    font-weight: var(--front-weight-bold);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.03em;
    color: var(--front-color-heading);
}

/* Full-width pill submit, matching the primary actions in the design. */
.btn-block,
.btn.btn-lg.btn-block {
    width: 100%;
    border-radius: var(--ds-radius-pill);
    padding: 0.85rem 1.5rem;
    font-weight: var(--front-weight-medium);
}

.form-group { margin-bottom: 1rem; }

.form-group label,
.form-label {
    font-weight: var(--front-weight-medium);
    font-size: var(--front-font-base);
    color: var(--ds-navy-soft);
    margin-bottom: 0.4rem;
}

/* The decorative half of the split layout picks up the tint rather than a
 * stock photo edge. */
.bg-cover-layer {
    background: linear-gradient(160deg, var(--ds-navy) 0%, var(--ds-azure) 100%);
    opacity: 0.85;
}

@media (max-width: 991.98px) {
    body .container-fluid > .row.justify-content-center > [class*="col-"]:first-child {
        padding: 1.75rem 1.25rem;
        border-radius: var(--ds-radius-panel);
    }
}