/**
 * Test-UI Style Override
 * Simple CSS file to apply test-ui design to existing pages
 */

/* Import Manrope font from test-ui */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* Override existing color variables with test-ui colors */
:root {
  --gold: #FF8A00;           /* Changed to olowo-orange */
  --gold-dark: #E28714;
  --gold-light: #FFB84D;
  --gold-pale: #FFF5E6;
  --cream: #F2F5EF;          /* olowo-cream */
  --ink: #1C1C1E;
  --ink-muted: #6B625C;
  --ink-faint: #B8B4AC;
  --border: #75461D;         /* olowo-brown */
  --danger: #FF2A23;         /* olowo-red */
  --success: #62C20F;        /* olowo-green */
}

/* Apply Manrope font */
body, .pf-nav, .pf-nav-link, input, button, select, textarea {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Update button styles to match test-ui */
button, .btn, [type="submit"] {
  border-radius: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

button:active, .btn:active {
  transform: scale(0.98);
}

/* Update input styles
 *
 * Legacy blanket styling for pages that predate the design system. Element +
 * attribute selectors outrank a single class, so these would otherwise paint
 * over .ol-input__control — which is deliberately transparent because its
 * border, radius and background belong to the .ol-input__field wrapper around
 * it. Exclude design-system controls rather than fighting them.
 *
 * .dash-activity-field__input is excluded for the same reason: it is a value
 * in an activity card's field grid, and a cream pill around it makes the one
 * free-text field look unlike every static and picker field beside it.
 *
 * .dash-split__input is a split line's amount box, which sits inside its own
 * bordered .dash-split__amount wrapper carrying the currency symbol — the
 * pill would draw a second box around the number.
 *
 * #send_currency and #receive_currency are the remittance hero's currency
 * pickers. They sit inside a glass .transfer-currency-select pill on photo
 * art, so the cream capsule painted a second, opaque box inside the pill —
 * and only over bright artwork did the pill still read as glass.
 *
 * .doc-searchinput is the documents search box. It already sits inside its
 * own bordered .doc-searchfield pill carrying the magnifier, so the cream
 * capsule drew a second box inside that pill.
 *
 * .prop-input and .prop-tagbox__input are the property sheet's own fields.
 * They are drawn as soft-filled boxes on a hairline rule, matching the profile
 * cards in the main menu; the cream pill painted only the text and number ones
 * among them, so a form read as two different field styles stacked up.
 *
 * .transfer-input is the Pay sheet's fields: grey Figma boxes for the
 * beneficiary, a soft brown fill for the address — the cream pill painted
 * every one of them the same.
 *
 * .ol-inline-field__input is the house inline edit: a value that is its own
 * input. It is deliberately borderless and transparent so it reads as the
 * line it replaces; a cream pill turns every editable value back into a
 * form field, which is the thing the pattern exists to remove. */
input[type="text"]:not(.ol-input__control):not(.ol-inline-field__input):not(.dash-activity-field__input):not(.dash-split__input):not(.prop-input):not(.prop-tagbox__input):not(.doc-searchinput):not(.ol-scan__name):not(.transfer-input):not(#send_amount):not(#receive_amount),
input[type="email"]:not(.ol-input__control):not(.ol-inline-field__input):not(.transfer-input),
input[type="password"]:not(.ol-input__control),
input[type="number"]:not(.ol-input__control):not(.prop-input):not(#send_amount):not(#receive_amount),
select:not(.ol-input__control):not(.ol-inline-field__input):not(.prop-input):not(.transfer-input):not(#send_currency):not(#receive_currency),
textarea:not(.ol-input__control):not(.transfer-input) {
  border-radius: 14px;
  border: 1px solid rgba(117, 70, 29, 0.1);
  background: #F6EFE6;
  font-weight: 500;
}

/* Remittance "You send" amount sits on photo art — keep it chrome-free. */
.transfer-amount-input input[type="text"],
.transfer-amount-input input[type="number"],
.transfer-amount-input input[type="text"]:focus,
.transfer-amount-input input[type="text"]:hover,
.transfer-amount-input input[type="number"]:focus,
.transfer-amount-input input[type="number"]:hover {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

input:not(.ol-input__control):not(.ol-inline-field__input):not(.dash-activity-field__input):not(.dash-split__input):not(.prop-input):not(.prop-tagbox__input):not(.doc-searchinput):not(.ol-scan__name):not(.transfer-input):not(#send_amount):not(#receive_amount):focus,
select:not(.ol-input__control):not(.ol-inline-field__input):not(.prop-input):not(.transfer-input):not(#send_currency):not(#receive_currency):focus,
textarea:not(.ol-input__control):not(.transfer-input):focus {
  border-color: rgba(98, 194, 15, 0.4);
  outline: none;
}

/* Update card styles */
.card, .pf-card {
  border-radius: 24px;
  border: 1px solid rgba(117, 70, 29, 0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Smooth scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}