/* dashboard.css */
:root {
  /* THEME: Charcoal & Onyx */
  --bg: #09090b;        /* Zinc 950 */
  --panel: #18181b;     /* Zinc 900 */
  --panel-head: #27272a;/* Zinc 800 */
  --line: #3f3f46;      /* Zinc 700 */
  --text: #f4f4f5;      /* Zinc 100 */
  --muted: #a1a1aa;     /* Zinc 400 */
  
  /* BRANDING */
  --brand-blue: #3b82f6; 
  --brand-green: #22c55e;
  --danger: #ef4444;

  /* LAYOUT DEFAULTS */
  --headerH: 60px;      /* UPDATED: Height for new logo */
  --paneA: 280px;
  --paneC: 400px;
  --splitW: 8px;
  --radius: 6px; 
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }


















/* =========================================
   HEADER OVERHAUL
   ========================================= */
.app-header {
    height: var(--headerH);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
    z-index: 50;
    
    display: grid;
    grid-template-columns: 200px 1fr auto; 
    align-items: center;
    gap: 20px;
}

/* LOGO */
.logo-container { height: 40px; display: flex; align-items: center; overflow: hidden; width: 100%; }
.logo-img { height: 100%; width: auto; object-fit: contain; }

/* SCROLLING TICKER */
.header-center {
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; width: 100%; position: relative;
    /* Soft fade on edges */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.ticker-wrap {
    width: 100%; overflow: hidden; white-space: nowrap;
    display: flex; flex-direction: column; align-items: center;
}
.macro-ticker {
    display: flex; gap: 40px;
    width: max-content; /* Critical for scroll */
    animation: marquee 60s linear infinite;
}
/* Pause on hover */
.macro-ticker:hover { animation-play-state: paused; }

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.33%); } /* Shift 1/3rd (tripled content) */
}

.ticker-item { display: inline-flex; align-items: center; gap: 8px; }
.t-sym { font-weight: 800; color: var(--muted); letter-spacing: -0.5px; }
.t-price { color: var(--text); font-weight: 600; }
.t-chg { font-size: 11px; font-weight: 500; }
.ticker-loading { font-size: 11px; color: var(--muted); font-style: italic; opacity: 0.7; }

.data-note {
    font-size: 9px; font-weight: 700; color: var(--line); 
    text-transform: uppercase; margin-top: 2px;
}

/* RIGHT UTILITIES */
.header-right { display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.sys-time { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; white-space: nowrap; }

.sys-status {
    width: 8px; height: 8px; background: #27272a; border-radius: 50%;
    position: relative; cursor: help;
}
.status-dot { width: 100%; height: 100%; border-radius: 50%; transition: all 0.3s ease; }
.status-dot.live { background: var(--brand-green); box-shadow: 0 0 8px rgba(34,197,94, 0.6); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }

/* NOTIFICATIONS & BADGE */
.notif-wrap { position: relative; display: flex; align-items: center; }

.icon-btn {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 6px; display: flex; align-items: center;
    border-radius: 4px; transition: 0.2s; position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ORANGE BADGE */
.notif-badge {
    position: absolute; top: 0px; right: 0px;
    min-width: 16px; height: 16px; 
    padding: 0 4px; 
    background: #f97316; /* Orange */
    color: #fff;
    border: 2px solid var(--bg); /* Cutout ring */
    border-radius: 10px; 
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

.notif-menu {
    position: absolute; top: 100%; right: -6px; margin-top: 14px;
    width: 320px; background: var(--panel); 
    border: 1px solid var(--line); border-radius: 8px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    display: none; z-index: 1000; overflow: hidden;
}
.notif-header {
    padding: 12px 16px; background: var(--panel-head);
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between;
}
.notif-body { padding: 0; max-height: 300px; overflow-y: auto; }
.empty-notif { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* ITEMS: Read vs Unread */
.notif-item {
    display: block; padding: 12px 16px; border-bottom: 1px solid var(--line);
    text-decoration: none; cursor: pointer; transition: 0.2s;
}
.notif-item.read { opacity: 0.5; background: transparent; filter: grayscale(0.5); }
.notif-item.read:hover { opacity: 1; filter: grayscale(0); background: rgba(255,255,255,0.02); }
.notif-item.unread { background: rgba(59, 130, 246, 0.08); border-left: 2px solid var(--brand-blue); }

.user-profile { cursor: pointer; }
.avatar { width: 32px; height: 32px; background: var(--line); color: var(--text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--bg); }

















/* =========================================
   WORKSPACE & PANELS
   ========================================= */
.app { height: 100%; display: flex; flex-direction: column; }
.workspace { height: calc(100% - var(--headerH)); width: 100%; padding: 8px; display: flex; gap: 0; overflow: hidden; position: relative; }

/* PANELS */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              flex 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.3s ease;
}
body.is-resizing .panel { transition: none !important; }

.panel .ph {
  height: 44px; padding: 0 12px; background: var(--panel-head); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
  white-space: nowrap;
}
.panel .pb { flex: 1; overflow-y: auto; padding: 0; position: relative; }

/* COLUMNS & SPLITTERS */
.colA { width: var(--paneA); flex: 0 0 var(--paneA); z-index: 2; }
.colB { flex: 1 1 auto; min-width: 0; z-index: 1; }
.colC { width: var(--paneC); flex: 0 0 var(--paneC); z-index: 2; }

.splitter { width: var(--splitW); flex: 0 0 var(--splitW); cursor: col-resize; position: relative; z-index: 10; }
.splitter::before { content: ""; position: absolute; left: 50%; top: 20%; bottom: 20%; width: 1px; background: var(--line); transform: translateX(-50%); transition: 0.2s; }
.splitter:hover::before { background: var(--brand-blue); width: 2px; top: 0; bottom: 0; }

/* NAV BUTTONS */
.btn {
  width: 100%; text-align: left; background: transparent; border: none; color: var(--muted);
  padding: 10px 12px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 12px;
  border-radius: 4px; cursor: pointer; transition: 0.15s;
}
.btn:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.btn.active { background: rgba(59, 130, 246, 0.1); color: var(--brand-blue); border-left: 3px solid var(--brand-blue); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.nav-header { font-size: 11px; font-weight: 800; color: #52525b; text-transform: uppercase; padding: 16px 12px 6px; letter-spacing: 1px; }

/* HEADER CONTROLS */
.header-controls { display: flex; gap: 4px; }
.focus-btn {
    width: 24px; height: 24px; background: transparent; border: 1px solid transparent;
    color: var(--muted); border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; padding: 0;
}
.focus-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* --- MODAL SYSTEM --- */
.modalWrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: none; 
    align-items: center; justify-content: center;
}
.modalScrim {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
}
.modal {
    position: relative; z-index: 10000;
    width: 400px; max-width: 90%;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; overflow: hidden;
}
.modalHead {
    padding: 16px; background: var(--panel-head); border-bottom: 1px solid var(--line);
    font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 13px;
}
.modalBody { padding: 20px; }
.modalBody input, .modalBody select {
    width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--line);
    color: var(--text); border-radius: 6px; outline: none; font-size: 14px;
}
.modalBody input:focus { border-color: var(--brand-blue); }
.modalFoot {
    padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel);
    display: flex; justify-content: flex-end; gap: 10px;
}
.modalFoot .btn { width: auto; background: rgba(255,255,255,0.05); padding: 8px 16px; }
.modalFoot .btn:hover { background: rgba(255,255,255,0.1); }

/* --- UTILITY COLORS --- */
.val-up, .text-up { color: var(--brand-green) !important; }
.val-down, .text-down { color: var(--danger) !important; }
.text-muted { color: var(--muted) !important; }

/* CONTEXT MENUS */
.ledger-row { display: flex; align-items: center; gap: 4px; position: relative; }
.ledger-btn { flex: 1; }
.menu-btn { 
  width: 24px; height: 32px; background: transparent; border: none; 
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; opacity: 0; transition: 0.2s;
}
.ledger-row:hover .menu-btn { opacity: 1; }
.menu-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.context-menu {
  position: absolute; right: 0; top: 100%; width: 140px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 100; display: none; overflow: hidden;
}
.ctx-item {
  display: block; width: 100%; padding: 10px 12px; text-align: left;
  background: transparent; border: none; color: var(--text);
  font-size: 12px; cursor: pointer;
}
.ctx-item:hover { background: rgba(255,255,255,0.05); }
.ctx-danger { color: var(--danger); }

/* FOCUS & FULLSCREEN LOGIC */
.workspace[data-focus="B"] .colA { width: 220px !important; flex: 0 0 220px !important; }
.workspace[data-focus="B"] .colB { flex: 1 1 auto !important; width: auto !important; }
.workspace[data-focus="B"] .colC { width: 50px !important; flex: 0 0 50px !important; opacity: 0.6; pointer-events: none; }
.workspace[data-focus="B"] .colC .ph span, 
.workspace[data-focus="B"] .colC .ph .header-controls, 
.workspace[data-focus="B"] .colC .pb { display: none; }

.workspace[data-focus="C"] .colA { width: 220px !important; flex: 0 0 220px !important; }
.workspace[data-focus="C"] .colC { flex: 1 1 auto !important; width: auto !important; opacity: 1; pointer-events: auto; }
.workspace[data-focus="C"] .colB { width: 50px !important; flex: 0 0 50px !important; opacity: 0.6; pointer-events: none; }
.workspace[data-focus="C"] .colB .ph span, 
.workspace[data-focus="C"] .colB .ph .header-controls, 
.workspace[data-focus="C"] .colB .pb { display: none; }

.workspace[data-fullscreen="B"] .colA, .workspace[data-fullscreen="B"] .colC, .workspace[data-fullscreen="B"] .splitter { display: none !important; }
.workspace[data-fullscreen="B"] .colB { width: 100% !important; flex: 1 !important; }

.workspace[data-fullscreen="C"] .colA, .workspace[data-fullscreen="C"] .colB, .workspace[data-fullscreen="C"] .splitter { display: none !important; }
.workspace[data-fullscreen="C"] .colC { width: 100% !important; flex: 1 !important; }

/* =========================================
   MOBILE OPTIMIZATION
   ========================================= */
.mobile-pane-switcher, .mobile-only-btn { display: none; } 

@media (max-width: 920px) {
  
  /* --- 1. HEADER OVERRIDES --- */
  .app-header {
      /* CHANGE: 'auto' first column lets the logo determine its own width */
      grid-template-columns: auto 1fr auto; 
      padding: 0 12px;
      gap: 10px;
  }
  
  /* LOGO FIX: Full Width, No Crop */
  .logo-container { 
      width: auto;        /* Let it expand */
      overflow: visible;  /* No cutting off */
  }
  .logo-img {
      width: auto;        /* Natural width based on height */
      height: 100%;       /* Match container height */
      max-width: 160px;   /* Safety cap */
      object-fit: contain; 
  }
  
  /* Hide complex elements on mobile */
  .header-center, 
  .sys-time { 
      display: none; 
  }
  
  /* Align right utils tighter */
  .header-right { gap: 8px; }

  /* --- 2. WORKSPACE RESETS --- */
  .workspace { 
      padding: 0 !important; 
      flex-direction: column; 
  }
  
  .splitter { display: none !important; }
  
  body .colA, 
  body .colB, 
  body .colC { 
      display: none !important; 
      width: 100vw !important;  
      height: calc(100% - 60px) !important; 
      flex: 1 1 auto !important;
      max-width: 100vw !important; 
      min-width: 0 !important;     
      border: none !important;
      border-radius: 0 !important;
      position: absolute; 
      top: 0; left: 0;
      z-index: 10;
      background: var(--bg); 
  }
  
  body.show-pane-A .colA, 
  body.show-pane-B .colB, 
  body.show-pane-C .colC { 
      display: flex !important; 
  }

  .panel .pb {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch; 
      padding-bottom: 20px; 
  }
  
  /* --- 3. MOBILE NAVIGATION BAR --- */
  .mobile-pane-switcher { 
      display: flex !important; 
      position: fixed; bottom: 0; left: 0; right: 0; 
      height: 60px; 
      background: var(--panel); 
      border-top: 1px solid var(--line); 
      z-index: 9999; 
      padding-bottom: env(safe-area-inset-bottom);
  }
  
  .switcher-btn { 
      flex: 1; 
      background: transparent; 
      border: none; 
      color: var(--muted); 
      font-weight: 600; 
      font-size: 10px; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      gap: 4px;
      cursor: pointer;
  }
  
  .switcher-btn svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.7; }
  .switcher-btn.active { color: var(--brand-blue); background: rgba(59,130,246,0.05); }
  .switcher-btn.active svg { opacity: 1; }
  
  .header-controls { display: none !important; } 
  #paneAHeader, .asset-search-wrap { width: 100% !important; }
}

/* =========================================
   CUSTOM SCROLLBARS
   ========================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }