/* assets/css/pages/trade-planer.css
   trade-planer.html එකේ තිබුණු inline <style> block 4ක් මෙතනට ගෙනාවා.
   Router එක navigate කරනකොට මේ file එක <link id="page-style"> එකට load කරනවා. */

html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            background-attachment: fixed;
            color: #e2e8f0;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 10%;
            left: 15%;
            width: 50vw;
            height: 50vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            z-index: 0;
            animation: float 15s infinite alternate ease-in-out;
        }

        body::after {
            content: '';
            position: fixed;
            bottom: 10%;
            right: 15%;
            width: 40vw;
            height: 40vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
            z-index: 0;
            animation: float 20s infinite alternate-reverse ease-in-out;
        }

        @keyframes float {
            0% { transform: translate(0, 0); }
            100% { transform: translate(5%, 5%); }
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.3); border-radius: 5px; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3b82f6, #8b5cf6); border-radius: 5px; border: 2px solid rgba(30, 41, 59, 0.3); }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2563eb, #7c3aed); }

        .card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 0.75rem; 
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); 
            transition: all 0.3s;
        }

        .card.actionable-card:hover {
            transform: translateY(-5px); 
            box-shadow: 0 10px 25px rgba(97, 97, 97, 0.308); 
            border: 1px solid rgba(59, 130, 246, 0.4);
            cursor: pointer;
        }

        .spinner {
            border: 3px solid rgba(59, 130, 246, 0.1);
            border-radius: 50%;
            border-top: 3px solid #3b82f6;
            width: 40px;
            height: 40px;
            animation: spin 0.8s ease-in-out infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .profit { color: #10b981; }
        .loss { color: #ef4444; }

        .active-nav {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            color: white !important;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }
        
        .custom-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(5px);
            display: flex; justify-content: center; align-items: center; z-index: 1000;
        }
        
        .modal-content {
            background-color: rgba(30, 41, 59, 0.9); backdrop-filter: blur(10px);
            border: 1px solid rgba(3, 112, 175, 0.05); border-radius: 0.75rem;
        }
        
        .btn { transition: all 0.3s; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
        .btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
        .btn-secondary { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
        .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
        
        .btn-community {
            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
            color: white; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
            display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600;
            padding: 0.6rem 1.1rem; border-radius: 0.75rem; transition: all 0.3s ease-out;
        }
        .btn-community:hover {
            transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.35);
            background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);
        }
        
        #sidebar { width: 5rem; transition: width 0.3s ease-out; }
        #sidebar:hover { width: 16rem; }
        .logo-container { display: flex; align-items: center; overflow: hidden; width: 100%; height: 100%; }
        #sidebar .logo-container { justify-content: center; width: 5rem; }
        .logo-icon { transition: margin-right 0.3s ease-out; flex-shrink: 0; }
        .logo-text {
            white-space: nowrap; overflow: hidden; opacity: 0; transform: translateX(20px);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out; font-size: 1.5rem; font-weight: 800; color: #5ea4fa;
        }
        #sidebar:hover .logo-container { justify-content: flex-start; padding-left: 20px; width: 100%; }
        #sidebar:hover .logo-icon { margin-right: 12px; }
        #sidebar:hover .logo-text { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
        .nav-item > i, .nav-item > svg { flex-shrink: 0; }
        .nav-item span, #profile-username { opacity: 0; white-space: nowrap; transition: opacity 0.15s ease-out, max-width 0.2s ease-out; max-width: 0; overflow: hidden; }
        #sidebar:hover .nav-item span, #sidebar:hover #profile-username { opacity: 1; transition: opacity 0.15s ease-out 0.05s, max-width 0.2s ease-out; max-width: 120px; }
        #sidebar .nav-item, #sidebar #profile-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
        #sidebar:hover .nav-item { justify-content: flex-start; padding-left: 1rem; padding-right: 1rem; gap: 0.75rem; }
        #sidebar:hover #profile-btn { justify-content: flex-start; padding: 0.5rem; gap: 0.75rem; }
        .sidebar-text-slide { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateX(-10px); opacity: 0; display: block; }
        #sidebar:hover .sidebar-text-slide { transform: translateX(0); opacity: 1; }
        .sidebar-icon-fade { transition: opacity 0.3s ease-in-out; }
        #sidebar:hover .sidebar-icon-fade { opacity: 0.8; }
        
        .red-dot { position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; background-color: #ef4444; border-radius: 50%; border: 2px solid #0f172a; }

        #top-gainers-container { -ms-overflow-style: none; scrollbar-width: none; }
        #top-gainers-container::-webkit-scrollbar { display: none; }

        .top-gainers-tab { border-bottom: 2px solid transparent; }
        .top-gainers-tab.active { border-bottom-color: #3b82f6; color: white; }

/* ---- */

.tab-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(32, 36, 48, 0.5);
  color: #cbd5e1;
  font-weight: 500;
  border-radius: 14px;
  padding: 0.6rem 1.4rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tab-btn:hover {
  background: rgba(59,130,246,0.25);
  color: #fff;
  border-color: rgba(59,130,246,0.45);
}
/* Active tab – gradient glass + bold + glow */
.tab-active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #fff !important;
  font-weight: 700 !important;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 12px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
/* Inactive tabs */
.tab-inactive {
  background: rgba(24,26,36,0.45);
  font-weight: 500;
  color: #9ca3af;
}
/* Responsive tweak */
@media (max-width: 640px){
  .tab-btn { font-size: 0.85rem; padding: 0.5rem 1rem; }
}

/* ---- */

/* ====== Inputs / Selects / Textareas (Frosted Glass) ====== */
.form-input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: rgba(30,41,59,0.55) !important; /* slate-800/55 */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: all .2s ease !important;
  outline: none !important;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: #94a3b8 !important; }

/* Focus ring with subtle glow */
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  background: rgba(51,65,85,0.65) !important; /* slate-700/65 */
  border-color: rgba(59,130,246,0.6) !important; /* blue-500 */
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.25),
    0 8px 24px rgba(59,130,246,0.18) !important;
  transform: translateY(-1px);
}

/* Disabled fields */
.form-input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .65;
  background: rgba(30,41,59,0.4) !important;
  cursor: not-allowed;
}

/* Number spinners hidden for a cleaner look */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* TP row input darker for contrast */
.tp-field input {
  background: rgba(17,24,39,0.7) !important; /* slate-900/70 */
  border-color: rgba(255,255,255,0.06) !important;
}

/* ====== Direction Toggle (Long / Short) ====== */
.direction-btn {
  background: rgba(36,38,48,0.5) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  transition: all .2s ease !important;
}
.direction-btn:hover { transform: translateY(-1px); }

/* Active states (selected button has .text-white applied in JS) */
.direction-btn.text-white[data-value="Long"] {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important; /* green */
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(34,197,94,0.28) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.direction-btn.text-white[data-value="Short"] {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important; /* red */
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(239,68,68,0.28) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ====== Primary/Secondary Buttons (Glass) ====== */
.btn {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(36,38,48,0.55) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(99,102,241,0.35) !important;
}
.btn-secondary {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: #fff !important;
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
}

/* Add TP Level button styled as a pill */
#add-tp-btn {
  background: rgba(34,197,246,0.10) !important;
  border: 1px solid rgba(56,189,248,0.35) !important;
  color: #67e8f9 !important;
  padding: .45rem .85rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
}
#add-tp-btn:hover {
  background: linear-gradient(135deg, rgba(56,189,248,0.35), rgba(99,102,241,0.35)) !important;
  color: #e0f2fe !important;
  box-shadow: 0 8px 20px rgba(56,189,248,0.25) !important;
  transform: translateY(-1px);
}

/* ====== File input (glass button) ====== */
input[type="file"] {
  color: #cbd5e1 !important;
  background: rgba(30,41,59,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 0.45rem .9rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  cursor: pointer;
  transition: all .2s ease;
}
input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(99,102,241,0.35);
}

/* ====== Modal accent border on the right (subtle) ====== */
.modal-content {
  position: relative;
}
.modal-content::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; right: 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  opacity: .9;
}

/* ---- */

:root{
  --grad-a:#3b82f6; --grad-b:#8b5cf6;
  --ring: 255 255 255 / 0.12;
  --blur: 18px; --blur-heavy: 28px;
  --radius-lg: 22px;
}

/* Background pop (subtle aurora) */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.22), transparent 44%),
    radial-gradient(900px 520px at 110% 0%, rgba(59,130,246,0.18), transparent 48%),
    linear-gradient(135deg, #0b0f1a, #0f172a 55%, #151a2b) !important;
}

/* Elevated glass card look (with gradient edge & inner highlight) */
.card{
  position: relative;
  background: linear-gradient(180deg, rgba(35,39,55,0.62), rgba(17,19,27,0.50)) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgb(var(--ring)) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.22) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::before{
  /* gradient edge ring */
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(99,102,241,.55), rgba(139,92,246,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
  opacity:.35;
}
.card::after{
  /* soft top highlight */
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:80px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.45) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
}

/* Sidebar glass stronger */
#sidebar{
  background: rgba(12, 14, 22, 0.62) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  border-right: 1px solid rgb(var(--ring)) !important;
  box-shadow: 12px 0 40px rgba(0,0,0,.35);
}
#sidebar .nav-item:hover{ background: rgba(71,85,105,0.38) !important; }
.active-nav{
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(67,56,202,0.40) !important;
}

/* Modals upgraded glass */
.custom-modal{
  background-color: rgba(2,6,23,.50) !important;
  backdrop-filter: blur(var(--blur-heavy)) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.05) !important;
}
.modal-content{
  position: relative;
  background: linear-gradient(180deg, rgba(24,28,42,0.92), rgba(12,16,28,0.85)) !important;
  border-radius: 20px !important;
  border: 1px solid rgb(var(--ring)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.modal-content::before{
  content:"";
  position:absolute; inset:1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(600px 140px at 10% 0%, rgba(255,255,255,.06), transparent);
}
.modal-content::after{
  content:"";
  position:absolute; top:10px; bottom:10px; right:10px; width:5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  opacity:.9;
}

/* Inputs/selects/textareas stronger glass and focus */
.form-input,
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"],
select, textarea{
  background: rgba(23, 28, 44, 0.65) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color:#eef2ff !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: all .22s ease !important;
}
.form-input:focus, input:focus, select:focus, textarea:focus{
  background: rgba(40, 50, 78, 0.72) !important;
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.30), 0 10px 28px rgba(99,102,241,.22) !important;
  transform: translateY(-1px);
}

/* TP field darker glass to stand out */
.tp-field input{
  background: rgba(15,19,32,0.75) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Buttons – brighter glass gradients */
.btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(36,38,48,0.55) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32) !important;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
  color:#fff !important;
  box-shadow: 0 14px 36px rgba(99,102,241,.40) !important;
}
.btn-secondary{
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color:#fff !important;
}
.btn-danger{
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color:#fff !important;
}

/* Tab buttons a bit more glassy */
.tab-btn{
  background: rgba(30,34,46,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tab-active{
  box-shadow: 0 0 14px rgba(99,102,241,.40), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Scrollbar keep glossy */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  border-radius: 8px; border:2px solid rgba(30,41,59,.30);
}