/* =============================================================================
   Petrol — design-system token values + Petrol-only refinements
   -----------------------------------------------------------------------------
   Loaded after /ds-theme/base.css, and only for the Petrol portal (see the
   `theme` block in config/brands/petrol.php). Nothing here can reach another
   brand: no other portal loads this file or carries the .theme-petrol class.

   Values follow "Design Guidelines — User Portal" (Petrol, 2026).
   Legacy files (style.css, login.css, registracija.css) are left untouched as
   the baseline; everything below overrides them.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Token values
   -------------------------------------------------------------------------- */
.theme-petrol {
    --ds-color-text: #000000;
    --ds-color-text-secondary: #303030;
    --ds-color-text-muted: #777777;
    --ds-color-surface: #ffffff;
    --ds-color-surface-alt: #f0f0f0;
    --ds-color-border-field: #999999;
    --ds-color-divider: #f0f0f0;
    --ds-color-action: #ed1b24;
    --ds-color-action-dark: #c5002c;
    --ds-color-on-action: #ffffff;

    --ds-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Swap in the licensed face by adding @font-face below; no other change needed. */
    --ds-font-display: "Helvetica Neue LT Pro", "HelveticaNeueLTPro-Bd", var(--ds-font-body);

    /* Neutralise the legacy variables the pre-existing Petrol CSS still reads,
       so no stale blue/old-red leaks through. */
    --blue-color: var(--ds-color-action);
    --color-dark: var(--ds-color-text);
    --color-light: var(--ds-color-text-secondary);
    --text-grey: var(--ds-color-text-muted);
    --text-light: var(--ds-color-text-muted);
    --color-grey: var(--ds-color-surface-alt);
    --Blue-Darkest: var(--ds-color-text);
    --Blue-Lightest: var(--ds-color-surface-alt);
    --bs-body-color: var(--ds-color-text);
    --bs-body-font-family: var(--ds-font-body);
}

/* -----------------------------------------------------------------------------
   2. Header / sidebar refinements
   -------------------------------------------------------------------------- */
.theme-petrol .logo-image {
    width: 120px;
    padding: 0;
}

.theme-petrol .language-switcher-icon {
    background-image: url(../img/icons/language.svg);
    background-size: 24px 24px;
    background-position: center;
    width: 24px;
    height: 24px;
}

/* -----------------------------------------------------------------------------
   3. Profile / content pages — 24px rhythm from the layout spec
   -------------------------------------------------------------------------- */
.theme-petrol main {
    padding-top: var(--ds-space);
    padding-bottom: var(--ds-space);
}

.theme-petrol main .content-card {
    margin-bottom: var(--ds-space);
}

.theme-petrol main .container.row {
    --bs-gutter-x: var(--ds-space);
    margin-top: 0 !important;
    max-width: none;
}

/* -----------------------------------------------------------------------------
   4. Login screen (auth/layout.blade.php + auth/login.blade.php)
   -------------------------------------------------------------------------- */

/* Guidelines mockup shows a desaturated backdrop — done with a filter so the
   original asset stays untouched and the change is reversible. */
.theme-petrol .bg-image {
    filter: grayscale(1);
}

.theme-petrol .form-signin {
    background-color: var(--ds-color-surface);
    border-radius: var(--ds-radius);
    box-shadow: none;
    max-width: 500px;
    padding: 40px;
}

/* Logo left, language switcher right, on one row inside the card. */
.theme-petrol .form-signin .top-row {
    align-items: center;
    padding: 0 0 32px;
}

.theme-petrol .form-signin .auth-brand {
    display: inline-flex;
    align-items: center;
}

.theme-petrol .form-signin .auth-brand img {
    width: 110px;
    height: auto;
}

.theme-petrol .form-signin .back-icon-link {
    display: none;
}

.theme-petrol .form-signin .content-center > form,
.theme-petrol .form-signin .content-center > a,
.theme-petrol .form-signin .content-center > p,
.theme-petrol .form-signin .content-center > hr {
    width: 100%;
}

/* Card headings */
.theme-petrol.login-screen .content-center h1 {
    font-family: var(--ds-font-display);
    font-weight: 700;
    font-size: var(--ds-section-title-size);
    line-height: var(--ds-section-title-line);
    color: var(--ds-color-text);
    margin-bottom: 8px;
}

.theme-petrol.login-screen .content-center h1 + p {
    color: var(--ds-color-text-muted);
    margin-bottom: 32px;
}

/* Links — action colour, underlined (mockup) */
.theme-petrol.login-screen .link,
.theme-petrol.login-screen .content-center a:not(.btn):not(.auth-brand) {
    color: var(--ds-color-action);
    text-decoration: underline;
    font-weight: 400;
}

/* The registration entry point is a link in the mockup, not an outlined button. */
.theme-petrol.login-screen .content-center .btn-secondary {
    background: transparent;
    border: 0;
    display: inline;
    min-height: auto;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--ds-color-action);
    text-decoration: underline;
}

.theme-petrol.login-screen .content-center .btn-secondary:hover {
    background: transparent;
    color: var(--ds-color-action-dark);
}

.theme-petrol.login-screen .content-center hr {
    margin: 32px 0 24px;
}

/* Copyright */
.theme-petrol.login-screen .content-center > p.text-muted {
    font-size: 11px;
    line-height: 16px;
    margin-top: 24px;
}

@media (max-width: 575.98px) {
    .theme-petrol .form-signin {
        padding: 24px;
    }
}