/* Shared app styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Fade-in animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out both;
}
.animate-fade-in-up-delay-1 {
    animation: fadeInUp 0.5s ease-out 0.05s both;
}

/* Invalid field highlight */
.field-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Login page styles */
.login-gradient {
    background: linear-gradient(to bottom right, #F1FDF6, #eafaf1, #dcf3e5);
}

/* Card fade-in */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-in {
    animation: cardIn 0.5s ease-out both;
}

/* ============================================================
   Grey → Black text overrides
   Applies to all "muted" greys used across the app so labels,
   helper text, table headers, meta rows, and subtitles render
   in solid black instead of faded grey.
   ============================================================ */

/* 1. Opacity-based greys: text-[#2C3E50]/40, /50, /60, /70 */
.text-\[\#2C3E50\]\/40,
.text-\[\#2C3E50\]\/50,
.text-\[\#2C3E50\]\/60,
.text-\[\#2C3E50\]\/70 {
    color: #000000 !important;
}

/* 2. Tailwind slate / gray / zinc / neutral / stone text scales */
.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700,
.text-gray-400,  .text-gray-500,  .text-gray-600,  .text-gray-700,
.text-zinc-400,  .text-zinc-500,  .text-zinc-600,  .text-zinc-700,
.text-neutral-400, .text-neutral-500, .text-neutral-600, .text-neutral-700,
.text-stone-400, .text-stone-500, .text-stone-600, .text-stone-700 {
    color: #000000 !important;
}

/* 3. Input placeholders — keep them distinguishable from real values
      but darker than the default grey. */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #4b5563 !important;   /* gray-600 — still readable, still clearly "placeholder" */
    opacity: 1;
}

/* 4. <kbd> hints (the "/" search shortcut) */
kbd {
    color: #000000 !important;
    background-color: #ffffff;
    border-color: #d1d5db;
}

/* 5. Table headers, empty-state subtitles, modal subtitles */
thead th {
    color: #000000 !important;
}

/* 6. Helper text under password fields etc. */
.text-\[\#2C3E50\]\/40,
.text-\[\#2C3E50\]\/50 {
    color: #000000 !important;
}

/* 7. Keep disabled inputs visually different — grey is a legitimate
      affordance there, so don't force black on disabled fields. */
input:disabled,
select:disabled,
textarea:disabled {
    color: #6b7280 !important;
    background-color: #f9fafb !important;
}

/* Leave review — pay selector */
.rv-pay-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: rgba(44, 62, 80, 0.7);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}

/* With Pay — hover light green, selected green */
.rv-pay-with:hover {
    background: #F1FDF6;
    border-color: #0F5E3D;
    color: #0F5E3D;
}
.rv-pay-with.is-selected {
    background: #0F5E3D;
    border-color: #0F5E3D;
    color: #ffffff;
}
.rv-pay-with.is-selected:hover {
    background: #0a4a2f;
    border-color: #0a4a2f;
}

/* Without Pay — hover light yellow, selected yellow */
.rv-pay-without:hover {
    background: #FFFBEB;         /* amber-50 */
    border-color: #F59E0B;       /* amber-400 */
    color: #B45309;              /* amber-700 */
}
.rv-pay-without.is-selected {
    background: #F59E0B;         /* amber-500 */
    border-color: #F59E0B;
    color: #ffffff;
}
.rv-pay-without.is-selected:hover {
    background: #D97706;         /* amber-600 */
    border-color: #D97706;
}