/* FuelDash R141 — opaque field and information tokens for visual harmony. */
:root {
  --fd-r141-red: #ff3b30;
  --fd-r141-field-dark: linear-gradient(145deg, #2b2b30, #222227);
  --fd-r141-field-light: linear-gradient(145deg, #ffffff, #ececf0);
  --fd-r141-field-border-dark: #3a3a41;
  --fd-r141-field-border-light: #d2d2d8;
  --fd-r141-info-dark: linear-gradient(145deg, #161619, #0b0b0e);
  --fd-r141-info-light: linear-gradient(145deg, #ffffff, #f0f0f3);
  --fd-r141-info-border-dark: #28282e;
  --fd-r141-info-border-light: #d9d9de;
}

/*
 * Editable controls share one opaque surface. Opaque colors are intentional:
 * the same field must not become darker merely because its parent card is darker.
 */
html body #app .search-field,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  box-sizing: border-box !important;
  border-color: var(--fd-r141-field-border-dark) !important;
  background-color: #222227 !important;
  background-image: var(--fd-r141-field-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body #app .search-field,
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-form input,
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]) {
  border-color: var(--fd-r141-field-border-light) !important;
  background-color: #ececf0 !important;
  background-image: var(--fd-r141-field-light) !important;
  box-shadow: inset 0 1px #fff !important;
  color: #28282e !important;
}

/* Search has one visible outer field; its internal native input remains transparent. */
html body #app .search-field :is(input,.search-field-action,.search-field-clear) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Field focus follows the real rounded silhouette without a detached halo. */
html body #app .search-field:focus-within,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea):focus,
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus {
  border-color: var(--fd-r141-red) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 0 0 1px var(--fd-r141-red) !important;
}

html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,textarea)::placeholder,
html body .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input)::placeholder,
html body .fd-account-sheet .fd-auth-form input::placeholder {
  color: #a4a4ac !important;
  opacity: .72 !important;
}

/* The red full-width period control is an active date action, not a free-text field. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: var(--fd-r141-red) !important;
  background-color: var(--fd-r141-red) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Tankbook values, history states and recommendation facts are quiet information surfaces. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-tank-empty
),
html body #app .primary-station-card__facts > span,
html body #app .fuel-preference button:not(.is-active) {
  border-color: var(--fd-r141-info-border-dark) !important;
  background-color: #0b0b0e !important;
  background-image: var(--fd-r141-info-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] :is(
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-tank-empty
),
html[data-fd-theme="light"] body #app .primary-station-card__facts > span,
html[data-fd-theme="light"] body #app .fuel-preference button:not(.is-active) {
  border-color: var(--fd-r141-info-border-light) !important;
  background-color: #f0f0f3 !important;
  background-image: var(--fd-r141-info-light) !important;
  box-shadow: inset 0 1px #fff !important;
}

html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  color: #f3f3f5 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty p {
  color: #92929a !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  color: #28282e !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty p {
  color: #6c6c74 !important;
}

/* Price-alert operational status is prose only, with semantic text color. */
html body .fd-alert-modal .fd-alert-status {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
}
html body .fd-alert-modal .fd-alert-status[data-tone="active"] { color: #63e6be !important; }
html body .fd-alert-modal .fd-alert-status[data-tone="inactive"] { color: var(--fd-r141-red) !important; }
html body .fd-alert-modal .fd-alert-status:is([data-tone="error"],[data-tone="pending"]) { color: #ff9f43 !important; }

/* Account status follows the same kicker / title / note hierarchy as the feature cards. */
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:first-child {
  display: block !important;
  margin: 0 !important;
  color: var(--fd-r141-red) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status h2 {
  margin: 6px 0 0 !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status p {
  margin: 8px 0 0 !important;
  color: #a8a8ae !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.46 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
html body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:last-child:not(:first-child) {
  display: block !important;
  margin: 9px 0 0 !important;
  color: #8f8f96 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status p {
  color: #66666e !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-status > div > small:last-child:not(:first-child) {
  color: #777780 !important;
}