/*
 * LDP-69. Application styles. Every colour, size and weight here is a var(--ldp-*) custom
 * property from /css/tokens.css, which is generated from the design system and loaded first.
 *
 * Never write a colour literal in this file or in a template: the WCAG 2.2 AA corrections in
 * design-system-spec.md §4.3 live in the token layer, and a literal hex value bypasses them.
 * NoColourLiteralsGuardTest fails the build on one. If no existing token fits, the token is
 * missing from the design system. Add it there and regenerate tokens.css; do not inline a value.
 */

body {
    margin: 0;
    background: var(--ldp-color-surface-page);
    color: var(--ldp-color-text-body);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--ldp-font-body);
    font-weight: var(--ldp-weight-regular);
}

main {
    max-width: 1200px;
    margin: var(--ldp-space-3xl) auto;
    padding: var(--ldp-space-xl);
    background: var(--ldp-color-surface-raised);
    border-radius: var(--ldp-radius-panel);
    box-shadow: var(--ldp-shadow-sm);
}

h1 {
    margin: 0 0 var(--ldp-space-lg);
    color: var(--ldp-color-text-primary);
    font-size: var(--ldp-font-page-title);
    font-weight: var(--ldp-weight-semibold);
}

a {
    color: var(--ldp-color-text-link);
}

:focus-visible {
    outline: 2px solid var(--ldp-color-focus-ring);
    outline-offset: 2px;
}

/*
 * LDP-8. Button (design-system-spec.md §5.5): primary, dark and secondary variants, at the md and
 * lg control heights. Every variant carries a visible focus state (§4.6).
 */

.ldp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--ldp-size-control-md);
    padding: 0 var(--ldp-space-lg);
    border: 1px solid transparent;
    border-radius: var(--ldp-radius-md);
    font: inherit;
    font-weight: var(--ldp-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.ldp-button--lg {
    min-height: var(--ldp-size-control-lg);
    font-size: var(--ldp-font-subsection);
}

.ldp-button--primary {
    background: linear-gradient(var(--ldp-color-action-primary-bg), var(--ldp-color-action-primary-bg-end));
    color: var(--ldp-color-action-primary-fg);
}

.ldp-button--dark {
    background: linear-gradient(var(--ldp-color-action-dark-bg), var(--ldp-color-action-dark-bg-end));
    color: var(--ldp-color-action-dark-fg);
}

.ldp-button--secondary {
    background: var(--ldp-color-surface-raised);
    border-color: var(--ldp-color-border-field);
    color: var(--ldp-color-text-strong);
}

/*
 * LDP-8. Validation banner (§5.6): error and info. The icon and the "Error:"/"Note:" label carry
 * the meaning as well as the colour does, so status never relies on colour alone (§4.7).
 */

.ldp-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--ldp-space-sm);
    margin: 0 0 var(--ldp-space-lg);
    padding: var(--ldp-space-md);
    border-radius: var(--ldp-radius-md);
    border-left: 4px solid currentColor;
    font-size: var(--ldp-font-body);
}

.ldp-banner--error {
    background: var(--ldp-color-status-danger-bg);
    color: var(--ldp-color-status-danger-fg);
}

.ldp-banner--info {
    background: var(--ldp-color-status-info-bg);
    color: var(--ldp-color-status-info-fg);
}

.ldp-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--ldp-space-lg);
    height: var(--ldp-space-lg);
    border-radius: var(--ldp-radius-pill);
    border: 1.5px solid currentColor;
    font-size: var(--ldp-font-caption);
    font-weight: var(--ldp-weight-bold);
}

.ldp-banner__label {
    font-weight: var(--ldp-weight-semibold);
}

/*
 * LDP-8 AC12. The sign-in chooser. Wireframe 01's visual treatment, as the spec carries it in
 * tokens: one dark gradient across the whole page, from surface/login-panel into
 * surface/login-ground, with the logo, the 2xl card and the footer laid directly on it. The
 * footer's on-dark-footer text is asserted against both ends of that gradient (spec §4.2).
 */

body.ldp-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100vh;
    padding: var(--ldp-space-xl) var(--ldp-space-lg);
    background: linear-gradient(
        160deg,
        var(--ldp-color-surface-login-panel),
        var(--ldp-color-surface-login-ground)
    );
}

.ldp-login__panel {
    width: min(100%, 400px);
}

/*
 * The Stellantis wordmark, white, as service-library-publishing ships it
 * (assets/images/logo/stellantis-logo-white.svg, copied unchanged). Its white fill lives in the
 * brand asset rather than in this stylesheet.
 */
.ldp-login__brand {
    margin: 0 0 var(--ldp-space-2xl);
    text-align: center;
}

.ldp-login__logo {
    display: inline-block;
    width: 190px;
    height: auto;
}

/* Overrides the generic main rule above: the card is the page's only surface. */
.ldp-login .ldp-login__card {
    max-width: none;
    margin: 0;
    padding: var(--ldp-space-2xl);
    background: var(--ldp-color-surface-raised);
    border-radius: var(--ldp-radius-2xl);
    box-shadow: var(--ldp-shadow-kpi);
}

.ldp-login__title {
    margin: 0 0 var(--ldp-space-lg);
    color: var(--ldp-color-text-primary);
    font-size: var(--ldp-font-page-title);
    font-weight: var(--ldp-weight-semibold);
}

.ldp-login__lede {
    margin: 0 0 var(--ldp-space-xl);
    color: var(--ldp-color-text-secondary);
}

.ldp-login__choices {
    display: flex;
    flex-direction: column;
    gap: var(--ldp-space-md);
}

.ldp-login__footer {
    margin-top: var(--ldp-space-2xl);
    text-align: center;
    color: var(--ldp-color-text-on-dark-footer);
    font-size: var(--ldp-font-caption);
    letter-spacing: var(--ldp-tracking-label);
}

/*
 * LDP-18. Button sm size (§5.5), for the filter bar and the table toolbar: the 30px control
 * height §5.4 gives filter bars.
 */

.ldp-button--sm {
    min-height: var(--ldp-size-control-sm);
    padding: 0 var(--ldp-space-md);
    font-size: var(--ldp-font-body-sm);
}

.ldp-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Content a screen reader announces and a sighted reader does not need. */
.ldp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ldp-text-secondary {
    color: var(--ldp-color-text-secondary);
}

/*
 * LDP-18. Forms (§5.4): field wrapper, select and checkbox, in the hi-fi vocabulary -
 * surface/sunken fill, radius/md and the corrected border/field. The filter bar lays the fields
 * out in a row at the sm control height.
 */

.ldp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ldp-space-md);
    margin: 0 0 var(--ldp-space-lg);
    padding: var(--ldp-space-md);
    background: var(--ldp-color-surface-sunken);
    border-radius: var(--ldp-radius-md);
}

.ldp-filter-bar__actions {
    display: flex;
    gap: var(--ldp-space-sm);
}

.ldp-field {
    display: flex;
    flex-direction: column;
    gap: var(--ldp-space-xs);
}

.ldp-field__label {
    color: var(--ldp-color-text-label);
    font-size: var(--ldp-font-caption);
    font-weight: var(--ldp-weight-semibold);
    letter-spacing: var(--ldp-tracking-label);
}

.ldp-select {
    min-height: var(--ldp-size-control-sm);
    padding: 0 var(--ldp-space-sm);
    background: var(--ldp-color-surface-raised);
    border: 1px solid var(--ldp-color-border-field);
    border-radius: var(--ldp-radius-md);
    color: var(--ldp-color-text-strong);
    font: inherit;
    font-size: var(--ldp-font-body-sm);
}

.ldp-checkbox {
    width: var(--ldp-space-lg);
    height: var(--ldp-space-lg);
    margin: 0;
    accent-color: var(--ldp-color-action-primary-bg);
    cursor: pointer;
}

/*
 * LDP-18. Data display (§5.2): table toolbar, table shell, header cell, row (zebra, selected,
 * leading checkbox), numeric cell and inline action link.
 */

.ldp-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ldp-space-md);
    margin: 0 0 var(--ldp-space-sm);
}

.ldp-table-toolbar__summary,
.ldp-table-toolbar__selection {
    margin: 0;
    color: var(--ldp-color-text-secondary);
    font-size: var(--ldp-font-body-sm);
}

.ldp-table-toolbar__selection {
    margin-left: auto;
}

.ldp-table-scroll {
    overflow-x: auto;
}

.ldp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ldp-font-body-sm);
}

.ldp-table th {
    padding: var(--ldp-space-sm) var(--ldp-space-md);
    background: var(--ldp-color-surface-sunken);
    border-bottom: 1px solid var(--ldp-color-border-divider);
    color: var(--ldp-color-text-label);
    font-size: var(--ldp-font-caption);
    font-weight: var(--ldp-weight-semibold);
    letter-spacing: var(--ldp-tracking-label);
    text-align: left;
    white-space: nowrap;
}

.ldp-table td {
    padding: var(--ldp-space-sm) var(--ldp-space-md);
    border-bottom: 1px solid var(--ldp-color-border-divider);
    color: var(--ldp-color-text-body);
    vertical-align: top;
}

.ldp-table tbody tr:nth-child(even) {
    background: var(--ldp-color-surface-zebra);
}

.ldp-table tbody tr:has(.ldp-checkbox:checked) {
    background: var(--ldp-color-surface-selected-row);
}

.ldp-table .ldp-table__select {
    width: var(--ldp-space-lg);
}

.ldp-table .ldp-table__numeric {
    text-align: right;
    font-weight: var(--ldp-weight-semibold);
    white-space: nowrap;
}

.ldp-cell-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ldp-space-xs);
}

.ldp-cell-stack + .ldp-cell-stack {
    margin-top: var(--ldp-space-xs);
}

.ldp-action-link {
    color: var(--ldp-color-text-link);
    font-weight: var(--ldp-weight-semibold);
    white-space: nowrap;
}

/*
 * LDP-18. Type tag (§5.3): flat neutral, no semantic colour - Full, Delta, a file type or a
 * locale. Delta is a normal incremental package, not something needing attention, so it never
 * takes a status tone.
 */

.ldp-type-tag {
    display: inline-block;
    margin: 0 var(--ldp-space-xs) var(--ldp-space-xs) 0;
    padding: 0 var(--ldp-space-sm);
    background: var(--ldp-color-status-neutral-bg);
    border-radius: var(--ldp-radius-sm);
    color: var(--ldp-color-status-neutral-fg);
    font-size: var(--ldp-font-caption);
    font-weight: var(--ldp-weight-medium);
    white-space: nowrap;
}