/*
 * RG-Racing portal design contract
 * Loaded after the legacy bundle and rg-redesign.css.
 * Only shared visual primitives belong here; page-specific layouts stay in
 * rg-redesign.css. This file is the authoritative color and component layer.
 */

:root {
  color-scheme: dark;
  --rg-ds-bg: #070707;
  --rg-ds-surface: #111111;
  --rg-ds-surface-raised: #181818;
  --rg-ds-surface-muted: #202020;
  --rg-ds-field: #050505;
  --rg-ds-border: #353535;
  --rg-ds-border-strong: #505050;
  --rg-ds-red: #ff0000;
  --rg-ds-red-hover: #d90000;
  --rg-ds-white: #ffffff;
  --rg-ds-text: rgba(255, 255, 255, .86);
  --rg-ds-muted: rgba(255, 255, 255, .62);
  --rg-ds-dim: rgba(255, 255, 255, .42);
  --rg-ds-success: #8bd600;
  --rg-ds-warning: #ffc400;
  --rg-ds-danger: #ff3b3b;
  --rg-ds-radius: 3px;
  --rg-ds-control-height: 42px;
  --rg-ds-font: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

html,
body.app,
body.login {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--rg-ds-bg) !important;
  color: var(--rg-ds-text) !important;
  font-family: var(--rg-ds-font) !important;
}

body.app *,
body.login * {
  box-sizing: border-box;
}

body.app a,
body.login a {
  color: var(--rg-ds-text);
}

body.app a:hover,
body.login a:hover {
  color: var(--rg-ds-red);
}

body.app h1,
body.app h2,
body.app h3,
body.login h1,
body.login h2,
body.login h3 {
  color: var(--rg-ds-red) !important;
  font-family: var(--rg-ds-font) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

/* Shared surfaces. Explicitly neutralize legacy white and blue utilities. */
body.app .box,
body.app .card,
body.app .modal__content,
body.app .dropdown-box__content,
body.app .bg-white,
body.app .bg-gray-100,
body.app .bg-gray-200,
body.app .bg-gray-300,
body.app [class*="admin-table-panel"],
body.app [class*="upload-vehicle-section"],
body.app [class*="upload-tuning-section"],
body.app [class*="upload-final-section"] {
  background: var(--rg-ds-surface) !important;
  background-color: var(--rg-ds-surface) !important;
  border-color: var(--rg-ds-border) !important;
  color: var(--rg-ds-text) !important;
  box-shadow: none !important;
}

body.app .box,
body.app .card,
body.app .modal__content,
body.app [class*="panel"] {
  border-radius: var(--rg-ds-radius) !important;
}

body.app .border,
body.app .border-b,
body.app .border-t,
body.app .border-l,
body.app .border-r,
body.app [class*="border-gray"],
body.login [class*="border-gray"] {
  border-color: var(--rg-ds-border) !important;
}

body.app .text-gray-300,
body.app .text-gray-400,
body.app .text-gray-500,
body.app .text-gray-600,
body.app .text-gray-700,
body.login .text-gray-300,
body.login .text-gray-400,
body.login .text-gray-500,
body.login .text-gray-600,
body.login .text-gray-700 {
  color: var(--rg-ds-muted) !important;
}

/* Forms */
body.app input:not([type="checkbox"]):not([type="radio"]),
body.app select,
body.app textarea,
body.app .input,
body.app .form-control,
body.app .form-select,
body.login input:not([type="checkbox"]):not([type="radio"]),
body.login select,
body.login textarea,
body.login .input {
  width: 100%;
  max-width: 100%;
  min-height: var(--rg-ds-control-height);
  border: 1px solid var(--rg-ds-border-strong) !important;
  border-radius: var(--rg-ds-radius) !important;
  background: var(--rg-ds-field) !important;
  background-color: var(--rg-ds-field) !important;
  color: var(--rg-ds-white) !important;
  box-shadow: none !important;
  font-family: var(--rg-ds-font) !important;
}

body.app input:focus,
body.app select:focus,
body.app textarea:focus,
body.login input:focus,
body.login select:focus,
body.login textarea:focus {
  border-color: var(--rg-ds-red) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, .15) !important;
}

body.app input::placeholder,
body.app textarea::placeholder,
body.login input::placeholder,
body.login textarea::placeholder {
  color: var(--rg-ds-dim) !important;
  opacity: 1 !important;
}

body.app input:disabled,
body.app select:disabled,
body.app textarea:disabled,
body.login input:disabled,
body.login select:disabled,
body.login textarea:disabled {
  border-color: var(--rg-ds-border) !important;
  background: var(--rg-ds-surface-muted) !important;
  color: var(--rg-ds-dim) !important;
  opacity: 1 !important;
}

body.app input[type="file"],
body.login input[type="file"] {
  padding: 6px !important;
}

body.app input[type="file"]::file-selector-button,
body.login input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--rg-ds-border-strong);
  border-radius: 2px;
  background: var(--rg-ds-surface-raised);
  color: var(--rg-ds-white);
  font: 700 13px/1 var(--rg-ds-font);
  text-transform: uppercase;
}

/* Buttons and action links */
body.app .button,
body.app button,
body.app [class*="rg-action-button"],
body.login .button,
body.login button {
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--rg-ds-font) !important;
  font-weight: 700 !important;
}

body.app .bg-theme-1,
body.app .bg-theme-6,
body.app .btn-primary,
body.app .button--primary,
body.login .bg-theme-1,
body.login .bg-theme-6,
body.login .login-panel__button--primary {
  border-color: var(--rg-ds-red) !important;
  background: var(--rg-ds-red) !important;
  color: var(--rg-ds-white) !important;
}

body.app .bg-theme-1:hover,
body.app .bg-theme-6:hover,
body.app .btn-primary:hover,
body.login .bg-theme-1:hover,
body.login .bg-theme-6:hover,
body.login .login-panel__button--primary:hover {
  border-color: var(--rg-ds-red-hover) !important;
  background: var(--rg-ds-red-hover) !important;
  color: var(--rg-ds-white) !important;
}

body.app button:disabled,
body.app .button:disabled,
body.login button:disabled,
body.login .button:disabled {
  border-color: var(--rg-ds-border) !important;
  background: var(--rg-ds-surface-muted) !important;
  color: var(--rg-ds-dim) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Tables */
body.app table {
  border-color: var(--rg-ds-border) !important;
  background: var(--rg-ds-surface) !important;
  color: var(--rg-ds-text) !important;
}

body.app table thead,
body.app table th {
  border-color: var(--rg-ds-border) !important;
  background: var(--rg-ds-field) !important;
  color: var(--rg-ds-white) !important;
}

body.app table tbody tr,
body.app table td {
  border-color: var(--rg-ds-border) !important;
  background: var(--rg-ds-surface) !important;
  color: var(--rg-ds-text) !important;
}

body.app table tbody tr:nth-child(even) td {
  background: var(--rg-ds-surface-raised) !important;
}

/* Authentication */
body.login {
  min-height: 100vh;
  background-image: none !important;
}

body.login::before {
  background-image: none !important;
}

body.login .container {
  width: 100%;
  max-width: 1500px;
}

body.login form,
body.login .login-panel,
body.login .register-panel {
  width: 100%;
}

body.login .rg-auth-card,
body.login .register-panel__inner {
  width: min(100%, 440px) !important;
  max-width: 100% !important;
  border: 1px solid var(--rg-ds-border) !important;
  border-radius: var(--rg-ds-radius) !important;
  background: var(--rg-ds-surface) !important;
  color: var(--rg-ds-text) !important;
  box-shadow: none !important;
}

body.login .register-panel__inner {
  width: min(100%, 980px) !important;
}

body.login .login-panel__title,
body.login .register-panel__title {
  color: var(--rg-ds-red) !important;
  text-transform: uppercase !important;
}

body.login .login-panel__options,
body.login .login-panel__checkbox-label,
body.login .register-panel__footer,
body.login .register-panel__field label {
  color: var(--rg-ds-text) !important;
}

body.login .login-panel__options a,
body.login .register-panel__footer a {
  color: var(--rg-ds-white) !important;
}

body.login .login-panel__button--secondary {
  border: 1px solid var(--rg-ds-border-strong) !important;
  background: var(--rg-ds-surface-raised) !important;
  color: var(--rg-ds-white) !important;
}

body.login .login-panel__password-toggle {
  color: var(--rg-ds-muted) !important;
}

body.login .rg-login-language .dropdown-box__content {
  border: 1px solid var(--rg-ds-border) !important;
  border-radius: var(--rg-ds-radius) !important;
  background: var(--rg-ds-surface-raised) !important;
  color: var(--rg-ds-text) !important;
}

/* Responsive contract */
@media (max-width: 1279px) {
  body.login .container {
    min-height: 100vh;
    padding: 20px !important;
  }

  body.login .login-panel,
  body.login .register-panel {
    min-height: calc(100vh - 40px);
    padding: 0 !important;
  }

  body.login .rg-auth-card,
  body.login .register-panel__inner {
    margin: auto !important;
    padding: 28px !important;
  }

  body.login .login-panel__actions {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  body.app .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.app .box,
  body.app .card,
  body.app .modal__content,
  body.app [class*="panel"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app h1 { font-size: 24px !important; }
  body.app h2 { font-size: 21px !important; }
  body.app h3 { font-size: 18px !important; }

  body.app .grid > *,
  body.app .flex > * {
    min-width: 0;
  }

  body.app .overflow-x-auto,
  body.app .table-responsive,
  body.app [class*="table-wrap"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.login .container {
    padding: 14px !important;
  }

  body.login .login-panel,
  body.login .register-panel {
    min-height: calc(100vh - 28px);
  }

  body.login .rg-auth-card,
  body.login .register-panel__inner {
    padding: 22px 18px !important;
  }

  body.login .login-panel__title,
  body.login .register-panel__title {
    font-size: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app *,
  body.login * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}