/* =============================================
   CUSTOM STYLES
   Additional styles beyond TailwindCSS
   ============================================= */

/* ---- CSS Variables ---- */
:root {
    --gold-primary: #eab308;
    --gold-light: #facc15;
    --gold-dark: #ca8a04;
    --dark-bg: #020617;
    --dark-surface: #0f172a;
    --dark-border: #334155;
    
    /* iOS Safe Area Insets for PWA */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ---- Base Styles ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}

/* ---- Focus Styles ---- */
:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* ---- Selection Styles ---- */
::selection {
    background: rgba(234, 179, 8, 0.3);
    color: #fff;
}

/* ---- Sidebar Transitions ---- */
.sidebar {
    will-change: transform;
}

.sidebar-overlay {
    transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ---- Navigation Items ---- */
.nav-item {
    transition: all 0.2s ease;
}

.nav-item:hover {
    transform: translateX(4px);
}

.nav-item.active:hover {
    transform: none;
}

/* ---- Last Update Block (Stacked Layout) ---- */
.last-update-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
}

.last-update-block .label {
    font-size: 0.65rem;
    opacity: 0.8;
}

.last-update-block .time {
    font-size: 0.875rem;
    font-weight: 600;
}

/* RTL Support for Last Update Block */
[dir="rtl"] .last-update-block {
    align-items: center;
}

/* ---- Widget Animations ---- */
.widget {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- Action Buttons ---- */
.action-btn {
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: scale(1.02);
}

.action-btn:active {
    transform: scale(0.98);
}

/* ---- Gold Gradient Text ---- */
.gold-gradient {
    background: linear-gradient(135deg, #facc15, #ca8a04);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Gold Glow Effect ---- */
.gold-glow {
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

/* ---- Loading Skeleton ---- */
.skeleton {
    background: linear-gradient(
        90deg,
        #1e293b 0%,
        #334155 50%,
        #1e293b 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ---- Fade In Animation ---- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* ---- Fade Out Animation ---- */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

/* ---- Pulse Animation ---- */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ---- Notification Badge ---- */
.notification-badge {
    animation: pulse 2s ease-in-out infinite;
}

/* ---- Table Styles ---- */
table {
    border-collapse: collapse;
}

/* ---- Sahaba Signals Direction Colors ---- */
.signal-buy {
    color: #22c55e; /* green-500 */
}

.signal-sell {
    color: #ef4444; /* red-500 */
}

/* ---- Closed Signal Row Styling ---- */
/* Win/Loss signals get slightly reduced opacity but remain clickable */
.closed-row {
    opacity: 0.75;
}

.closed-row:hover {
    opacity: 0.9;
}

/* ---- Responsive Utilities ---- */
@media (max-width: 640px) {
    .widget {
        padding: 1rem;
    }
    
    .widget:hover {
        transform: none;
    }
}

/* ---- Light Mode Support (optional) ---- */
html:not(.dark) body {
    background: #f1f5f9;
    color: #0f172a;
}

html:not(.dark) .bg-dark-900 {
    background: #ffffff;
}

html:not(.dark) .bg-dark-950 {
    background: #f1f5f9;
}

html:not(.dark) .border-dark-700 {
    border-color: #e2e8f0;
}

html:not(.dark) .text-white {
    color: #0f172a;
}

html:not(.dark) .text-dark-300,
html:not(.dark) .text-dark-400 {
    color: #64748b;
}

/* ---- Live Feed Scroll ---- */
#liveFeedContainer {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

#liveFeedContainer::-webkit-scrollbar {
    width: 4px;
}

#liveFeedContainer::-webkit-scrollbar-track {
    background: transparent;
}

#liveFeedContainer::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 2px;
}

/* ---- Monthly Stats Card Hover ---- */
#monthlyStatsGrid > div {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#monthlyStatsGrid > div:hover {
    transform: translateY(-2px);
    border-color: rgba(234, 179, 8, 0.3);
}

/* ---- Top/Worst Trades Hover ---- */
#topTradesContainer > div,
#worstTradesContainer > div {
    transition: background-color 0.2s ease;
}

#topTradesContainer > div:hover,
#worstTradesContainer > div:hover {
    background-color: rgba(30, 41, 59, 0.8);
}

/* ---- Toggle Switch ---- */
.peer:checked + div {
    background-color: #eab308;
}

/* ---- Print Styles ---- */
@media print {
    .sidebar,
    header {
        display: none;
    }
    
    main {
        margin: 0;
        padding: 0;
    }
}

/* ---- Winning Signals Card Background ---- */
.winning-signals-card {
    position: relative;
}

.winning-signals-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/positive-signal-falcon.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 1;
    border-radius: inherit;
}

.winning-signals-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Losing Signals Card Background ---- */
.losing-signals-card {
    position: relative;
}

.losing-signals-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/negative-signal-bear-new.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 1;
    border-radius: inherit;
}

.losing-signals-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Best Trade Card Background ---- */
.best-trade-card {
    position: relative;
}

.best-trade-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/best-trade-star.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.26;
    filter: blur(0.5px);
    z-index: 1;
    border-radius: inherit;
}

.best-trade-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Active Signals Card Background ---- */
.active-signals-card {
    position: relative;
}

.active-signals-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/active-signal-scroll.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.26;
    filter: blur(0.5px);
    z-index: 1;
    border-radius: inherit;
}

.active-signals-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Total Signals Card Background (Sahaba Eagle) ---- */
.total-signals-card {
    position: relative;
    overflow: hidden;
}

.total-signals-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/sahaba-eagle.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    filter: brightness(0.85);
    z-index: 1;
    border-radius: inherit;
}

.total-signals-card > * {
    position: relative;
    z-index: 2;
}

/* =============================================
   RTL (Right-to-Left) SUPPORT FOR ARABIC
   ============================================= */

/* Base RTL styles */
body.lang-ar {
    direction: rtl;
}

body.lang-en {
    direction: ltr;
}

/* RTL text alignment */
body.lang-ar .sidebar,
body.lang-ar .main-content,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar p {
    text-align: right;
}

/* RTL table headers and cells - centered for Arabic */
html[lang="ar"] table td,
html[lang="ar"] table th {
    text-align: center !important;
}

/* RTL navigation hover effect */
body.lang-ar .nav-item:hover {
    transform: translateX(-4px);
}

/* RTL flex row reversals for specific elements */
body.lang-ar .flex-row-reverse-ar {
    flex-direction: row-reverse;
}

/* RTL margin/padding adjustments */
body.lang-ar .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

body.lang-ar .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Keep numbers LTR in RTL mode */
body.lang-ar .ltr-numbers {
    direction: ltr;
    unicode-bidi: embed;
}

/* RTL input text alignment */
body.lang-ar input,
body.lang-ar textarea {
    text-align: right;
}

/* RTL select elements */
body.lang-ar select {
    text-align: right;
    padding-right: 2.5rem;
    padding-left: 0.75rem;
}

/* Language toggle styling */
.lang-toggle button {
    transition: all 0.2s ease;
}

.lang-toggle button:hover {
    opacity: 0.9;
}

.lang-toggle button.active {
    font-weight: 600;
}

/* Sidebar navigation RTL - icon on right, text on left */
body.lang-ar .sidebar .nav-item {
    flex-direction: row-reverse;
    text-align: right;
}

body.lang-ar .sidebar .nav-item svg {
    margin-left: 0;
    margin-right: 0;
}

/* Keep LTR layout for English sidebar */
body.lang-en .sidebar .nav-item {
    flex-direction: row;
    text-align: left;
}

/* Keep layout stable - don't reverse the main grid */
body.lang-ar .flex.h-screen {
    flex-direction: row;
}

/* Ensure stats cards text aligns properly */
body.lang-ar [data-testid^="card-"] p,
body.lang-ar [data-testid^="card-"] h3 {
    text-align: right;
}

/* Arabic font family for better rendering */
body.lang-ar {
    font-family: 'Segoe UI', Tahoma, 'Arial Unicode MS', Arial, sans-serif;
}

/* ---- Sticky Table Columns ---- */
/* Sticky columns for signals table - works with both RTL and LTR */

/* Favorite/Star column - first sticky column */
.sticky-favorite-col {
    position: sticky;
    z-index: 10;
    background-color: #0f172a;
}

/* LTR (English): sticky to the left */
[dir="ltr"] .sticky-favorite-col {
    left: 0;
    border-right: 1px solid #334155;
}

/* RTL (Arabic): sticky to the right */
[dir="rtl"] .sticky-favorite-col {
    right: 0;
    border-left: 1px solid #334155;
}

/* Symbol column - second sticky column */
.sticky-symbol-col {
    position: sticky;
    z-index: 9;
    background-color: #0f172a;
}

/* LTR (English): sticky to the left, offset by favorite column width (40px) */
[dir="ltr"] .sticky-symbol-col {
    left: 40px;
    border-right: 1px solid #334155;
}

/* RTL (Arabic): sticky to the right, offset by favorite column width (40px) */
[dir="rtl"] .sticky-symbol-col {
    right: 40px;
    border-left: 1px solid #334155;
}

/* Header cells need higher z-index to stay above body cells when scrolling */
thead .sticky-favorite-col {
    z-index: 25;
}

thead .sticky-symbol-col {
    z-index: 24;
}

/* Ensure proper background on hover for sticky cells */
.sticky-favorite-col:hover,
.sticky-symbol-col:hover {
    background-color: #0f172a;
}

/* =============================================
   iOS PWA SAFE AREA SUPPORT
   Ensures content is not obscured by notch/status bar
   ============================================= */

/* Apply safe area padding to main app headers - FINAL FIX */
.app-header {
    padding-top: calc(var(--safe-top) + 24px) !important;
    padding-bottom: 12px;
}

/* For centered pages without traditional headers */
.safe-top {
    padding-top: calc(var(--safe-top) + 24px) !important;
}

/* Apply safe area padding to main content containers */
.app-content,
.safe-bottom {
    padding-bottom: var(--safe-bottom);
}

/* Apply safe area to sidebar (for iOS landscape) */
.sidebar {
    padding-left: var(--safe-left);
}

[dir="rtl"] .sidebar {
    padding-left: 0;
    padding-right: var(--safe-right);
}

/* Standalone PWA specific adjustments */
@media all and (display-mode: standalone) {
    .app-header {
        padding-top: calc(var(--safe-top) + 24px) !important;
        padding-bottom: 12px;
    }
    
    .safe-top {
        padding-top: calc(var(--safe-top) + 24px) !important;
    }
    
    /* Ensure body doesn't scroll behind status bar */
    body {
        padding-top: var(--safe-top);
    }
    
    /* Remove body padding if using app-header class */
    body:has(.app-header) {
        padding-top: 0;
    }
}

/* =============================================
   PRICE FLASH ANIMATIONS
   Subtle background flashes when prices update
   ============================================= */

/* Green flash for price going UP */
.price-flash-up {
    animation: priceFlashUp 0.8s ease-out;
}

/* Red flash for price going DOWN */
.price-flash-down {
    animation: priceFlashDown 0.8s ease-out;
}

@keyframes priceFlashUp {
    0% {
        background-color: rgba(34, 197, 94, 0.35);  /* green-500 with opacity */
    }
    100% {
        background-color: transparent;
    }
}

@keyframes priceFlashDown {
    0% {
        background-color: rgba(239, 68, 68, 0.35);  /* red-500 with opacity */
    }
    100% {
        background-color: transparent;
    }
}

/* =============================================
   ROW FLASH ANIMATIONS
   Full row flashes when prices update
   ============================================= */

/* Green flash for entire row when price went UP */
.row-flash-up {
    animation: rowFlashUp 0.9s ease-out;
}

/* Red flash for entire row when price went DOWN */
.row-flash-down {
    animation: rowFlashDown 0.9s ease-out;
}

@keyframes rowFlashUp {
    0% {
        background-color: rgba(0, 200, 0, 0.25);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes rowFlashDown {
    0% {
        background-color: rgba(220, 0, 0, 0.25);
    }
    100% {
        background-color: transparent;
    }
}

/* =============================================
   STRONG MOVE ANIMATION
   Golden pulse for big price jumps (>= 2%)
   ============================================= */

.row-strong-move {
    animation: strongPulse 1.4s ease-out;
}

@keyframes strongPulse {
    0% {
        background-color: rgba(255, 215, 0, 0.28);
        box-shadow: 0 0 16px rgba(255, 215, 0, 0.45);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* =============================================
   SHARE APP MESSAGE ANIMATION
   Fade in/out for clipboard copy confirmation
   ============================================= */

.share-app-msg {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.share-app-msg.show {
    opacity: 1;
}