/* ══ NxTGen Journal — base-tokens-layout.css (original styles.css lines 1-463) ══ */

/* ════════════════════════════════════════════════════════
   NxTGen Trading Journal — styles.css
   NXTGEN LIQUID GLASS PREMIUM DESIGN SYSTEM v3
   Apple-inspired · Fintech quality · Full dark/light parity
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ════════════════════════════════════════════════════════
   NXTGEN — LIQUID GLASS PREMIUM DESIGN SYSTEM v3
   Apple-inspired · Fintech quality · Full dark/light parity
   ════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Token System ───────────────────────────────────── */
:root{
  /* Dark palette */
  --bg-base:       #080b12;
  --bg:            #080b12;
  --bg2:           rgba(13,17,26,0.94);
  --bg3:           rgba(19,24,36,0.82);
  --bg4:           rgba(26,33,50,0.72);
  --bg5:           rgba(36,46,68,0.60);

  /* Liquid glass surfaces */
  --glass-0:       rgba(255,255,255,0.02);
  --glass-1:       rgba(255,255,255,0.04);
  --glass-2:       rgba(255,255,255,0.07);
  --glass-3:       rgba(255,255,255,0.11);
  --glass-4:       rgba(255,255,255,0.16);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-border-h:rgba(255,255,255,0.15);
  --glass-shine:   rgba(255,255,255,0.06);

  /* Blur levels */
  --blur-xs: blur(6px);
  --blur-sm: blur(10px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(32px);

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border2:       rgba(255,255,255,0.04);
  --border-focus:  rgba(96,165,250,0.55);

  /* Semantic colors */
  --accent:    #f87171;
  --accent2:   #fb923c;
  --green:     #34d399;
  --green-dim: rgba(52,211,153,0.15);
  --green-glow:rgba(52,211,153,0.20);
  --red:       #f87171;
  --red-dim:   rgba(248,113,113,0.13);
  --red-glow:  rgba(248,113,113,0.20);
  --blue:      #60a5fa;
  --blue-dim:  rgba(96,165,250,0.13);
  --blue-glow: rgba(96,165,250,0.20);
  --teal:      #2dd4bf;
  --gold:      #fbbf24;
  --gold-glow: rgba(251,191,36,0.20);
  --purple:    #a78bfa;

  /* Text hierarchy */
  --text:   rgba(248,250,252,0.95);
  --text2:  rgba(148,163,184,0.82);
  --text3:  rgba(100,116,139,0.65);

  /* Elevation shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl: 0 24px 72px rgba(0,0,0,0.72), 0 8px 24px rgba(0,0,0,0.5);

  /* Glow shadows */
  --glow-blue:  0 0 28px rgba(96,165,250,0.14), 0 0 8px rgba(96,165,250,0.08);
  --glow-green: 0 0 24px rgba(52,211,153,0.16), 0 0 8px rgba(52,211,153,0.10);
  --glow-red:   0 0 20px rgba(248,113,113,0.15), 0 0 6px rgba(248,113,113,0.10);
  --glow-gold:  0 0 20px rgba(251,191,36,0.18), 0 0 6px rgba(251,191,36,0.10);

  /* Radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* Layout */
  --sidebar: 220px;
  --topbar:  52px;

  /* Typography */
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --surface:   #0d1117;

  /* Easing */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.0,0.0,0.2,1);
  --ease-in-out: cubic-bezier(0.4,0.0,0.2,1);

  /* Transitions */
  --t-fast:   background 0.14s var(--ease-in-out), border-color 0.14s var(--ease-in-out), box-shadow 0.14s var(--ease-in-out), color 0.14s var(--ease-in-out), opacity 0.14s var(--ease-in-out), transform 0.14s var(--ease-in-out), fill 0.14s var(--ease-in-out), stroke 0.14s var(--ease-in-out);
  --t-med:    background 0.24s var(--ease-in-out), border-color 0.24s var(--ease-in-out), box-shadow 0.24s var(--ease-in-out), color 0.24s var(--ease-in-out), opacity 0.24s var(--ease-in-out), transform 0.24s var(--ease-in-out), fill 0.24s var(--ease-in-out), stroke 0.24s var(--ease-in-out);
  --t-slow:   background 0.4s  var(--ease-in-out), border-color 0.4s  var(--ease-in-out), box-shadow 0.4s  var(--ease-in-out), color 0.4s  var(--ease-in-out), opacity 0.4s  var(--ease-in-out), transform 0.4s  var(--ease-in-out), fill 0.4s  var(--ease-in-out), stroke 0.4s  var(--ease-in-out);
  --t-spring: background 0.32s var(--ease-spring), border-color 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-spring), color 0.32s var(--ease-spring), opacity 0.32s var(--ease-spring), transform 0.32s var(--ease-spring), fill 0.32s var(--ease-spring), stroke 0.32s var(--ease-spring);
}

/* ── Light Mode ─────────────────────────────────────── */
[data-theme="light"]{
  /* Warmer, deeper base — not flat white so surfaces can "lift" off it */
  --bg-base:       #e7ebf5;
  --bg:            #e3e8f3;
  --bg2:           rgba(255,255,255,0.94);
  --bg3:           rgba(255,255,255,0.86);
  --bg4:           rgba(234,238,248,0.85);
  --bg5:           rgba(210,217,238,0.72);

  /* Liquid glass surfaces — high-opacity whites for real card separation */
  --glass-0:       rgba(255,255,255,0.60);
  --glass-1:       rgba(255,255,255,0.86);
  --glass-2:       rgba(255,255,255,0.95);
  --glass-3:       rgba(255,255,255,0.99);
  --glass-4:       rgba(255,255,255,1);
  --glass-border:  rgba(30,41,59,0.11);
  --glass-border-h:rgba(30,41,59,0.20);
  --glass-shine:   rgba(255,255,255,0.95);

  --border:        rgba(30,41,59,0.11);
  --border2:       rgba(30,41,59,0.07);
  --border-focus:  rgba(79,70,229,0.55);

  --accent:    #e11d48;
  --accent2:   #ea580c;
  --green:     #04875e;
  --green-dim: rgba(4,135,94,0.12);
  --green-glow:rgba(4,135,94,0.18);
  --red:       #dc2626;
  --red-dim:   rgba(220,38,38,0.11);
  --red-glow:  rgba(220,38,38,0.18);
  --blue:      #4f46e5;
  --blue-dim:  rgba(79,70,229,0.12);
  --blue-glow: rgba(79,70,229,0.18);
  --teal:      #0d9488;
  --gold:      #b45309;
  --gold-glow: rgba(180,83,9,0.16);
  --purple:    #7c3aed;

  --text:   #0f1729;
  --text2:  rgba(30,41,59,0.80);
  --text3:  rgba(71,85,105,0.68);
  --surface: #ffffff;

  /* Deeper, more directional shadows so cards visibly lift off the page */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.07);
  --shadow-sm: 0 3px 10px rgba(15,23,42,0.09), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 26px rgba(15,23,42,0.11), 0 2px 8px rgba(15,23,42,0.07);
  --shadow-lg: 0 18px 48px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.08);
  --shadow-xl: 0 30px 80px rgba(15,23,42,0.17), 0 10px 28px rgba(15,23,42,0.10);

  --glow-blue:  0 0 26px rgba(79,70,229,0.16);
  --glow-green: 0 0 22px rgba(4,135,94,0.16);
  --glow-red:   0 0 18px rgba(220,38,38,0.16);
  --glow-gold:  0 0 18px rgba(180,83,9,0.16);
}

/* ── Theme transition (smooth, no flicker) ──────────── */
html{transition:background-color 0.35s var(--ease-in-out)}
body{transition:background-color 0.35s var(--ease-in-out),color 0.2s}
.topbar,.sidebar,.tabs,.modal,.detail-panel,.kpi-card,.glass-card,
.wl-pair-card,.acc-card,.rule-card,.model-card,.data-table th,
.data-table td,.trash-card,.cover,.cal-kpi{
  transition:background 0.3s var(--ease-in-out),
             border-color 0.3s var(--ease-in-out),
             box-shadow 0.3s var(--ease-in-out),
             color 0.2s;
}
button,a,.cal-day,.sb-item,.tab,.trade-log-row,input,select,textarea{
  transition:var(--t-fast);
}

/* ── Base ────────────────────────────────────────────── */
html{height:100%;font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  height:100%;
  min-height:100dvh;
  background:var(--bg-base);
  color:var(--text);
  font-family:var(--font-body);
  font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
  display:flex;flex-direction:column;overflow:hidden;
  background-image:
    radial-gradient(ellipse 90% 70% at 15% -15%, rgba(96,165,250,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 115%, rgba(167,139,250,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(45,212,191,0.02) 0%, transparent 60%);
  background-attachment:fixed;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 90% 70% at 15% -15%, rgba(79,70,229,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 115%, rgba(124,58,237,0.04) 0%, transparent 55%);
}

/* ════════════ TOPBAR ═══════════════════════════════ */
.topbar{
  height:var(--topbar);
  background:var(--glass-2);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;flex-shrink:0;z-index:100;
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--glass-shine);
  position:relative;
}
.topbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(96,165,250,0.025) 0%,transparent 30%,
    rgba(167,139,250,0.020) 100%);
}
.topbar-left{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
/* ── NxTGen Logo Brand ── */
.topbar-left .brand {
  display: flex; align-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: opacity .15s;
  max-width: 200px;
}
.topbar-left .brand:hover { opacity: .85; }

.brand-logo-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  /* Dark mode default: logo is white (brightness(0) invert(1) = white) */
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
  max-width: 190px;
}
/* Light mode: logo is black (brightness(0) = black) */
[data-theme="light"] .brand-logo-img {
  filter: brightness(0);
}

/* Also fix the SVG internal filters for light mode via CSS variables */
[data-theme="light"] .logo-dark {
  filter: invert(1);
}
[data-theme="light"] .logo-light-text {
  filter: none;
}

/* Legacy .brand-icon — keep for any edge case */
.brand-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.12));
  border: 1px solid rgba(251,191,36,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  box-shadow: 0 0 12px rgba(251,191,36,0.15);
}
.topbar-left .sep{color:var(--text3);font-weight:300;font-size:16px;opacity:0.5}
.topbar-left .page-name{color:var(--text2);font-size:12px;font-weight:400}
.topbar-right{display:flex;gap:8px;align-items:center;position:relative;z-index:1}

.theme-toggle{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-border);
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:var(--t-fast);flex-shrink:0;
}
.theme-toggle:hover{
  background:var(--glass-2);color:var(--text);
  border-color:var(--glass-border-h);
  transform:rotate(15deg) scale(1.08);
  box-shadow:var(--shadow-sm);
}

/* ════════════ BUTTONS ══════════════════════════════ */
.btn{
  padding:7px 15px;border-radius:var(--r-sm);
  font-size:12px;font-family:var(--font-body);
  font-weight:500;cursor:pointer;letter-spacing:0.1px;
  border:1px solid var(--glass-border);
  background:var(--glass-1);color:var(--text2);
  backdrop-filter:var(--blur-xs);
  transition:var(--t-fast);white-space:nowrap;
}
.btn:hover{
  background:var(--glass-2);color:var(--text);
  border-color:var(--glass-border-h);
  transform:translateY(-1px);box-shadow:var(--shadow-sm);
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{
  background:linear-gradient(135deg,
    rgba(96,165,250,0.22) 0%,
    rgba(96,165,250,0.14) 100%);
  border-color:rgba(96,165,250,0.35);
  color:var(--blue);font-weight:600;
  box-shadow:var(--glow-blue),var(--shadow-sm);
}
.btn-primary:hover{
  background:linear-gradient(135deg,
    rgba(96,165,250,0.32) 0%,
    rgba(96,165,250,0.22) 100%);
  border-color:rgba(96,165,250,0.55);
  box-shadow:0 0 32px rgba(96,165,250,0.25),var(--shadow-md);
  transform:translateY(-1px);
}
[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,rgba(79,70,229,0.14),rgba(79,70,229,0.08));
  border-color:rgba(79,70,229,0.3);color:var(--blue);
  box-shadow:var(--glow-blue),var(--shadow-sm);
}

/* Glass buttons (modal/panel) */
.glass-btn{
  padding:9px 22px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;cursor:pointer;border:1px solid;
  font-family:var(--font-body);transition:var(--t-fast);letter-spacing:0.1px;
  backdrop-filter:var(--blur-xs);
}
.glass-btn-cancel{
  background:var(--glass-1);border-color:var(--glass-border);color:var(--text2);
}
.glass-btn-cancel:hover{
  background:var(--glass-2);color:var(--text);
  border-color:var(--glass-border-h);transform:translateY(-1px);
}
.glass-btn-danger{
  background:linear-gradient(135deg,rgba(248,113,113,0.15),rgba(248,113,113,0.08));
  border-color:rgba(248,113,113,0.35);color:var(--red);
  box-shadow:var(--glow-red);
}
.glass-btn-danger:hover{
  background:linear-gradient(135deg,rgba(248,113,113,0.28),rgba(248,113,113,0.16));
  border-color:rgba(248,113,113,0.55);
  box-shadow:0 0 28px rgba(248,113,113,0.3),var(--shadow-md);
  transform:translateY(-1px);
}
.glass-btn-restore{
  background:linear-gradient(135deg,rgba(52,211,153,0.15),rgba(52,211,153,0.08));
  border-color:rgba(52,211,153,0.35);color:var(--green);
  box-shadow:var(--glow-green);
}
.glass-btn-restore:hover{
  background:linear-gradient(135deg,rgba(52,211,153,0.28),rgba(52,211,153,0.16));
  border-color:rgba(52,211,153,0.55);
  box-shadow:0 0 28px rgba(52,211,153,0.3),var(--shadow-md);
  transform:translateY(-1px);
}

/* ════════════ LAYOUT ═══════════════════════════════ */
.layout{display:flex;flex:1;overflow:hidden;height:100%}

/* ════════════ SIDEBAR ══════════════════════════════ */

/* ── Sidebar logo header ── */
.sb-logo-header {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
}
.sb-logo-img {
  height: 40px; width: auto;
  object-fit: contain; display: block;
  /* Dark mode: white */
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}
[data-theme="light"] .sb-logo-img {
  /* Light mode: black */
  filter: brightness(0);
}

.sidebar{
  width:var(--sidebar);
  background:var(--glass-2);
  backdrop-filter:var(--blur-xl);
  -webkit-backdrop-filter:var(--blur-xl);
  border-right:1px solid var(--glass-border);
  display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;
  padding:14px 8px;
  box-shadow:2px 0 24px rgba(0,0,0,0.18);
}
[data-theme="light"] .sidebar{box-shadow:2px 0 20px rgba(0,0,0,0.07)}
.sb-section{margin-bottom:22px}
.sb-section-label{
  font-size:9.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.15em;
  padding:0 10px;margin-bottom:6px;
}
.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-size:12.5px;color:var(--text2);
  transition:var(--t-fast);user-select:none;
  border:1px solid transparent;font-weight:400;
  position:relative;
}
.sb-item:hover{
  background:var(--glass-2);color:var(--text);
  border-color:var(--glass-border);
}
.sb-item.active{
  background:linear-gradient(135deg,
    rgba(96,165,250,0.16) 0%,
    rgba(96,165,250,0.08) 100%);
  color:var(--blue);
  border-color:rgba(96,165,250,0.22);
  font-weight:600;
  box-shadow:var(--glow-blue),inset 0 1px 0 rgba(96,165,250,0.10);
}
[data-theme="light"] .sb-item.active{
  background:linear-gradient(135deg,rgba(79,70,229,0.12),rgba(79,70,229,0.06));
  color:var(--blue);border-color:rgba(79,70,229,0.22);
}
.sb-item .ico{font-size:14px;width:16px;text-align:center;flex-shrink:0;opacity:.75}
.sb-item.active .ico{opacity:1}
.sb-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item.q2 .ico{color:var(--blue);opacity:1}
.sb-sep{height:1px;background:var(--glass-border);margin:8px 6px;opacity:0.7}
.sb-badge{
  background:rgba(248,113,113,0.18);color:var(--red);
  font-size:9.5px;font-weight:700;padding:1px 6px;
  border-radius:var(--r-full);margin-left:auto;
  font-family:var(--font-mono);border:1px solid rgba(248,113,113,0.28);
  text-shadow:0 0 8px rgba(248,113,113,0.4);
}

/* ════════════ MAIN + TABS ══════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tabs{
  height:44px;
  background:var(--glass-1);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:flex-end;padding:0 20px;flex-shrink:0;gap:0;
}
.tab{
  padding:10px 16px;font-size:12.5px;color:var(--text2);cursor:pointer;
  border-bottom:2px solid transparent;transition:var(--t-fast);
  font-weight:400;white-space:nowrap;letter-spacing:0.1px;
  position:relative;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--blue);font-weight:600}