/* ============================================================
   Perl Haven — burgundy investor dashboard
   Shared styles + branded preloader (CSS-only, reduced-motion safe)
   ============================================================ */

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #fff3f6;
    color: #3c0718;
}

/* Dark-mode form controls: fields flip to dark backgrounds (dark:bg-gray-800)
   but keep the light-mode text colour unless overridden. Make typed text and
   placeholders legible globally so every input/select/textarea is covered. */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    color: #fbe5ec;
    caret-color: #fbe5ec;
}
.dark input::placeholder,
.dark select::placeholder,
.dark textarea::placeholder {
    color: #a86279;
    opacity: 1;
}

/* Shared input/select/textarea style used across profile/settings/plans. */
.input-field {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.dark .input-field {
    border-color: #374151;
    background-color: #1f2937;
    color: #fbe5ec;
}
.input-field:focus {
    border-color: #d14173;
    box-shadow: 0 0 0 3px rgba(209, 65, 115, 0.25);
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f6dbe4; }
::-webkit-scrollbar-thumb { background: #cfa7b6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a86074; }
.dark ::-webkit-scrollbar-track { background: #24111a; }
.dark ::-webkit-scrollbar-thumb { background: #4d2838; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6d3a4f; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d9b6c1; border-radius: 3px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #5c3345; }

/* Shine hover */
.shine-effect-container { position: relative; overflow: hidden; }
.shine-effect {
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg); opacity: 0; transition: opacity .5s;
}
.shine-effect-container:hover .shine-effect { opacity: 1; animation: shine-once 1.5s ease-in-out; }

/* Scroll fade-in */
.fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Perl Haven preloader — burgundy percent counter
   ============================================================ */
.page-loading {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
    transition: all .6s cubic-bezier(0.4,0,0.2,1);
    background: radial-gradient(ellipse at center, rgba(127,18,56,0.12) 0%, rgba(255,243,246,0.98) 55%, #fff8fa 100%);
    backdrop-filter: blur(2px);
    visibility: hidden;
    z-index: 9999;
}
.dark .page-loading {
    background: radial-gradient(ellipse at center, rgba(127,18,56,0.30) 0%, rgba(20,8,14,0.98) 55%, #14080e 100%);
}
.page-loading.active { opacity: 1; visibility: visible; }
.page-loading-inner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    text-align: center; transition: all .4s cubic-bezier(0.4,0,0.2,1); opacity: 0;
}
.page-loading.active > .page-loading-inner { opacity: 1; }

.loading-counter {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}

/* wordmark */
.loading-wordmark {
    font-weight: 900; letter-spacing: 0.3em; font-size: 1.6rem; padding-left: 0.3em;
    background: linear-gradient(90deg, #7f1238, #b98a2e, #d14173, #7f1238);
    background-size: 300% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: textShimmer 3.2s linear infinite;
}

/* percent counter */
.loading-percent {
    display: flex; align-items: baseline; justify-content: center; margin-top: 1.1rem; color: #3c0718;
}
.dark .loading-percent { color: #fbe5ec; }
.loading-percent-num {
    font-size: 4.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #d14173 0%, #7f1238 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: countFade 1.4s ease-in-out;
}
.loading-percent-sym { font-size: 1.8rem; font-weight: 900; color: #b98a2e; margin-left: 0.2rem; }

/* burgundy progress bar */
.loading-bar {
    width: 260px; height: 6px; background: #f3d3dc; border-radius: 999px;
    margin-top: 1.4rem; overflow: hidden; position: relative;
}
.dark .loading-bar { background: #3c2230; }
.loading-bar-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, #7f1238, #d14173, #b98a2e);
    background-size: 200% 100%;
    animation: barSheen 1.6s linear infinite;
}
.loading-counter .subtitle {
    font-size: 0.75rem; color: #a86279; font-weight: 500; margin-top: 1rem; letter-spacing: 0.06em;
    animation: subtitleFade 2.2s ease-in-out infinite;
}
.dark .loading-counter .subtitle { color: #d9a7b8; }

@keyframes textShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes subtitleFade { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes barSheen { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes countFade { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .page-loading { transition: none; }
    .loading-wordmark,
    .loading-bar-fill,
    .loading-counter .subtitle,
    .loading-percent-num { animation: none !important; }
}

/* ============================================================
   Live share chart widget
   ============================================================ */
[data-sw-price] { transition: color .3s ease; font-variant-numeric: tabular-nums; }
[data-sw-chart] polyline,
[data-sw-chart] path { transition: stroke .3s ease; }
[data-sw-change] { transition: background-color .3s ease; }

/* Table row hover for ledger-style lists */
.data-row { transition: background-color .15s ease; }
.data-row:hover { background-color: rgba(127,18,56,0.04); }
.dark .data-row:hover { background-color: rgba(255,255,255,0.04); }