/* assets/css/pages/analytics.css
   analytics.html එකේ තිබුණු inline <style> block 2ක් මෙතනට ගෙනාවා.
   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;
            height: 100vh; /* SINHALA: min-height -> height ලෙස වෙනස් කරන ලදී */
            position: relative;
            overflow-x: hidden;
            overflow-y: hidden; /* SINHALA: body scroll වීම නැවැත්වීමට මෙය එකතු කරන ලදී */
        }
        body::before, body::after {
            content: ''; position: fixed; border-radius: 50%; z-index: 0;
            animation: float 15s infinite alternate ease-in-out;
        }
        body::before { top: 10%; left: 15%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%); }
        body::after { bottom: 10%; right: 15%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%); animation-duration: 20s; animation-direction: alternate-reverse; }
        @keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(5%, 5%); } }
        
        /* SINHALA: අලුතින් එකතු කළ Scrollbar Styles */
        ::-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(15, 23, 42, 0.7);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0.75rem; /* SINHALA: Rounded corners එකතු කරන ලදී */
        }
        .spinner {
            border: 4px solid rgba(59, 130, 246, 0.2); border-radius: 50%;
            border-top: 4px solid #3b82f6; width: 50px; height: 50px;
            animation: spin 1.2s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .profit { color: #10b981; }
        .loss { color: #ef4444; }
        .btn { transition: all 0.3s; font-weight: 600; border-radius: 0.75rem; }
        .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%); }
        .active-nav {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white !important;
            font-weight: 600; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }
        #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; }
        
        /* SINHALA: Tooltip සඳහා අලුතින් එකතු කළ Styles */
        .tooltip {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 150%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #1e293b; /* slate-800 */
            color: #e2e8f0; /* slate-200 */
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #334155; /* slate-700 */
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            width: 280px;
            text-align: left;
            white-space: normal;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 50;
            pointer-events: none;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
        .tooltip::before {
            content: '';
            position: absolute;
            bottom: calc(150% - 6px);
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            border-width: 6px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 51;
            pointer-events: none;
        }
        .tooltip:hover::after,
        .tooltip:hover::before {
            visibility: visible;
            opacity: 1;
        }

/* ---- */

/* ===== Unified Glass + Buttons (Dashboard/Journal parity) ===== */
:root{
  --surface: 10 10 14;
  --glass: rgba(32, 34, 44, 0.55);
  --glass-strong: rgba(24, 26, 36, 0.72);
  --ring: 255 255 255 / 0.08;
  --grad-a:#3b82f6; --grad-b:#8b5cf6;
  --success:#22c55e; --danger:#ef4444; --warn:#f59e0b;
  --text-soft:#a3a8b5; --text-strong:#f1f5f9;
  --radius:18px; --radius-lg:22px;
  --blur:16px; --blur-heavy:24px;
}
/* Background to match dashboard/journal */
body{
  background: radial-gradient(1200px 600px at 20% -5%, rgba(99,102,241,0.16), transparent 40%),
              radial-gradient(900px 500px at 110% 10%, rgba(59,130,246,0.14), transparent 44%),
              linear-gradient(135deg, #0b0f1a, #0f172a 50%, #151a2b) !important;
  color: var(--text-strong);
}
/* Glass cards */
.card{
  background: linear-gradient(180deg, rgba(35,39,55,0.58), rgba(24,26,36,0.44)) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgb(var(--ring)) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.35) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(99,102,241,.20) inset !important;
}
/* Buttons */
button, .btn{
  border-radius: 14px !important;
  border: 1px solid rgb(var(--ring)) !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, box-shadow .18s ease, border-color .18s ease;
}
button:hover, .btn:hover{ transform: translateY(-2px) }
/* Primary/secondary keep earlier color vibe */
.btn-primary{
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
  color:#fff !important;
  border-color: rgba(99,102,241,.30) !important;
  box-shadow: 0 10px 26px rgba(67,56,202,.35) !important;
}
.btn-secondary{
  background: linear-gradient(135deg, #64748b, #475569) !important; color:#fff !important;
}
/* Inputs (if any) */
input, select, textarea{
  background: rgba(36, 38, 48, 0.45) !important;
  border: 1px solid rgb(var(--ring)) !important;
  border-radius: 12px !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(99,102,241,.55) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18) !important;
}
/* Charts card padding consistency */
.h-96 canvas{ display:block; }