/* ==========================================================================

   KS Phoenix Delta - Institutional Options Trading Terminal CSS

   Theme: Obsidian Cyberpunk Dark / Fintech Institutional Pro

   ========================================================================== */



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



:root {

  --bg-primary: #07090e;

  --bg-surface: #0a0e17;

  --bg-card: rgba(13, 19, 31, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);

  --border-highlight: rgba(255, 255, 255, 0.15);

  

  --color-green: #10b981;

  --color-green-glow: rgba(16, 185, 129, 0.35);

  --color-red: #f43f5e;

  --color-red-glow: rgba(244, 63, 94, 0.35);

  --color-cyan: #06b6d4;

  --color-cyan-glow: rgba(6, 182, 212, 0.35);

  --color-amber: #f59e0b;

  --color-purple: #8b5cf6;

  --color-purple-glow: rgba(139, 92, 246, 0.35);

  

  --text-main: #f8fafc;

  --text-muted: #94a3b8;

  --text-faint: #64748b;



  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-mono: 'JetBrains Mono', monospace;

}



/* Base Terminal Settings */

* {

  box-sizing: border-box;

}



body {

  background-color: var(--bg-primary);

  background-image: 

    radial-gradient(ellipse 90% 40% at 20% -10%, rgba(6, 182, 212, 0.06) 0%, transparent 60%),

    radial-gradient(ellipse 90% 40% at 80% -10%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),

    radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 60%),

    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  background-size: auto, auto, auto, 24px 24px;

  background-attachment: fixed;

  color: var(--text-main);

  font-family: var(--font-sans);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.font-mono,

code,

pre,

table td,

.tabular-nums {

  font-family: var(--font-mono);

  font-feature-settings: "tnum" 1, "zero" 1;

}



/* Glassmorphism Cards & Panels */

.glass-panel {

  background: linear-gradient(145deg, rgba(13, 19, 31, 0.88) 0%, rgba(9, 13, 23, 0.94) 100%);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid var(--border-subtle);

  border-top: 1px solid var(--border-highlight);

  border-radius: 0.75rem;

  box-shadow: 

    0 12px 32px -4px rgba(0, 0, 0, 0.65),

    0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),

              border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),

              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.glass-panel:hover {

  border-color: rgba(255, 255, 255, 0.15);

  box-shadow: 

    0 16px 40px -4px rgba(0, 0, 0, 0.75),

    0 0 20px -4px rgba(6, 182, 212, 0.06);

}



/* Card Top Glowing Accents */

.kpi-accent-emerald::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #10b981, transparent);

  box-shadow: 0 0 12px #10b981;

}



.kpi-accent-rose::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #f43f5e, transparent);

  box-shadow: 0 0 12px #f43f5e;

}



.kpi-accent-cyan::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #06b6d4, transparent);

  box-shadow: 0 0 12px #06b6d4;

}



.kpi-accent-amber::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #f59e0b, transparent);

  box-shadow: 0 0 12px #f59e0b;

}



.kpi-accent-purple::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);

  box-shadow: 0 0 12px #8b5cf6;

}



/* Custom Sleek Scrollbars */

::-webkit-scrollbar {

  width: 5px;

  height: 5px;

}

::-webkit-scrollbar-track {

  background: rgba(7, 9, 14, 0.95);

}

::-webkit-scrollbar-thumb {

  background: #1e293b;

  border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

  background: #334155;

}



/* Glowing Animations */

@keyframes pulse-green-glow {

  0%, 100% { box-shadow: 0 0 14px rgba(16, 185, 129, 0.2); }

  50% { box-shadow: 0 0 26px rgba(16, 185, 129, 0.45); }

}



@keyframes pulse-red-glow {

  0%, 100% { box-shadow: 0 0 14px rgba(244, 63, 94, 0.2); }

  50% { box-shadow: 0 0 26px rgba(244, 63, 94, 0.45); }

}



.glow-green {

  animation: pulse-green-glow 2.5s infinite ease-in-out;

}



.glow-red {

  animation: pulse-red-glow 2.5s infinite ease-in-out;

}



/* Live Tick Price Flash Animations */

@keyframes flash-up-anim {

  0% {

    background-color: rgba(16, 185, 129, 0.35);

    color: #4ade80 !important;

    text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);

  }

  100% {

    background-color: transparent;

    text-shadow: none;

  }

}



@keyframes flash-down-anim {

  0% {

    background-color: rgba(244, 63, 94, 0.35);

    color: #fb7185 !important;

    text-shadow: 0 0 10px rgba(251, 113, 133, 0.7);

  }

  100% {

    background-color: transparent;

    text-shadow: none;

  }

}



.flash-up {

  animation: flash-up-anim 0.65s cubic-bezier(0.16, 1, 0.3, 1);

}



.flash-down {

  animation: flash-down-anim 0.65s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Modern High-Density Table Styling */

table {

  border-collapse: separate;

  border-spacing: 0;

}



thead th {

  font-family: var(--font-sans);

  letter-spacing: 0.04em;

  font-size: 0.6875rem;

  color: #94a3b8;

  background: rgba(10, 15, 26, 0.92);

  font-weight: 700;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



tbody tr {

  transition: background-color 0.12s ease;

  border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



tbody tr:last-child {

  border-bottom: none;

}



tbody tr:hover {

  background-color: rgba(255, 255, 255, 0.035) !important;

}



/* Badges & Pills */

.badge-ce {

  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);

  color: #34d399;

  border: 1px solid rgba(16, 185, 129, 0.35);

  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15) inset;

}



.badge-pe {

  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18) 0%, rgba(225, 29, 72, 0.12) 100%);

  color: #fb7185;

  border: 1px solid rgba(244, 63, 94, 0.35);

  box-shadow: 0 0 10px rgba(244, 63, 94, 0.15) inset;

}



.badge-k-level {

  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.12) 100%);

  color: #c084fc;

  border: 1px solid rgba(139, 92, 246, 0.35);

  box-shadow: 0 0 8px rgba(139, 92, 246, 0.15) inset;

}



.badge-delta {

  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(14, 165, 233, 0.12) 100%);

  color: #38bdf8;

  border: 1px solid rgba(6, 182, 212, 0.35);

}



/* Sidebar Navigation Styling */

.sidebar-link {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.65rem 0.9rem;

  border-radius: 0.5rem;

  font-size: 0.8125rem;

  font-weight: 600;

  color: #94a3b8;

  transition: all 0.15s ease;

  position: relative;

  text-decoration: none;

  cursor: pointer;

  user-select: none;

}



.sidebar-link:hover {

  color: #f1f5f9;

  background: rgba(255, 255, 255, 0.05);

}



.sidebar-link.active {

  color: #38bdf8;

  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 100%);

  border: 1px solid rgba(6, 182, 212, 0.3);

  font-weight: 700;

  box-shadow: 0 0 16px rgba(6, 182, 212, 0.12) inset;

}



.sidebar-link.active::before {

  content: '';

  position: absolute;

  left: 0;

  top: 15%;

  bottom: 15%;

  width: 3px;

  background: #06b6d4;

  border-radius: 0 2px 2px 0;

  box-shadow: 0 0 8px #06b6d4;

}



/* Unified Option Strike Ladder Styles */

.strike-ladder-table th {

  padding: 0.5rem 0.4rem;

  font-size: 0.65rem;

  text-transform: uppercase;

}



.strike-ladder-table td {

  padding: 0.45rem 0.35rem;

  font-size: 0.75rem;

}



.strike-center-cell {

  background: rgba(14, 20, 32, 0.95) !important;

  font-weight: 800 !important;

  font-size: 0.8125rem !important;

  color: #f8fafc !important;

  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;

  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;

  text-align: center;

}



.strike-row-highlight {

  background: rgba(6, 182, 212, 0.08) !important;

  box-shadow: 0 0 12px rgba(6, 182, 212, 0.15) inset;

}



.strike-row-highlight .strike-center-cell {

  background: rgba(6, 182, 212, 0.22) !important;

  color: #38bdf8 !important;

  border-color: rgba(6, 182, 212, 0.4) !important;

}



/* Execution Timeline */

.timeline-item {

  position: relative;

  padding-left: 1.75rem;

  padding-bottom: 1.25rem;

}



.timeline-item::before {

  content: '';

  position: absolute;

  left: 0.45rem;

  top: 0.85rem;

  bottom: 0;

  width: 1.5px;

  background: rgba(255, 255, 255, 0.1);

}



.timeline-item:last-child::before {

  display: none;

}



.timeline-dot {

  position: absolute;

  left: 0.15rem;

  top: 0.15rem;

  width: 0.65rem;

  height: 0.65rem;

  border-radius: 9999px;

  background: #38bdf8;

  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);

}



/* Tab Navigation */

.tab-btn {

  position: relative;

  font-family: var(--font-sans);

  color: #94a3b8;

  font-weight: 600;

  transition: all 0.2s ease;

}



.tab-btn:hover {

  color: #e2e8f0;

}



.tab-btn.active {

  color: #38bdf8;

  font-weight: 700;

}



.tab-btn.active::after {

  content: '';

  position: absolute;

  bottom: -1px;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, #06b6d4, #3b82f6);

  box-shadow: 0 0 10px #06b6d4;

  border-radius: 2px;

}



/* Button Glows & Modern Controls */

.btn-glow-cyan {

  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.10) 100%);

  border: 1px solid rgba(6, 182, 212, 0.35);

  color: #38bdf8;

  transition: all 0.18s ease;

}

.btn-glow-cyan:hover {

  background: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(8, 145, 178, 0.22) 100%);

  border-color: rgba(6, 182, 212, 0.6);

  box-shadow: 0 0 16px rgba(6, 182, 212, 0.3);

  transform: translateY(-1px);

}



.btn-glow-emerald {

  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.10) 100%);

  border: 1px solid rgba(16, 185, 129, 0.35);

  color: #34d399;

  transition: all 0.18s ease;

}

.btn-glow-emerald:hover {

  background: linear-gradient(135deg, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.22) 100%);

  border-color: rgba(16, 185, 129, 0.6);

  box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);

  transform: translateY(-1px);

}



.btn-glow-rose {

  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(225, 29, 72, 0.10) 100%);

  border: 1px solid rgba(244, 63, 94, 0.35);

  color: #fb7185;

  transition: all 0.18s ease;

}

.btn-glow-rose:hover {

  background: linear-gradient(135deg, rgba(244, 63, 94, 0.28) 0%, rgba(225, 29, 72, 0.22) 100%);

  border-color: rgba(244, 63, 94, 0.6);

  box-shadow: 0 0 16px rgba(244, 63, 94, 0.3);

  transform: translateY(-1px);

}



/* Floating Toast Notifications */

#toastContainer {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 100;

  display: flex;

  flex-direction: column;

  gap: 10px;

  pointer-events: none;

}



.terminal-toast {

  pointer-events: auto;

  min-width: 280px;

  max-width: 380px;

  background: rgba(12, 16, 26, 0.95);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 10px;

  padding: 12px 16px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

  display: flex;

  align-items: flex-start;

  gap: 10px;

  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  transition: all 0.25s ease;

}



@keyframes toastSlideIn {

  from {

    opacity: 0;

    transform: translateY(20px) scale(0.95);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.terminal-toast.fade-out {

  opacity: 0;

  transform: translateY(-10px) scale(0.95);

}



/* ==========================================================================

   Date Inputs & Calendar Picker Dark Theme Styling

   ========================================================================== */

input[type="date"] {

  color-scheme: dark !important;

  cursor: pointer;

}



input[type="date"]::-webkit-calendar-picker-indicator {

  cursor: pointer;

  filter: invert(0.85) brightness(1.3) sepia(0.2) saturate(2);

  opacity: 0.9;

  transition: opacity 0.2s ease, transform 0.15s ease;

  padding: 3px;

  border-radius: 4px;

}



input[type="date"]::-webkit-calendar-picker-indicator:hover {

  opacity: 1;

  transform: scale(1.15);

  background-color: rgba(6, 182, 212, 0.25);

}



/* Additional Live Trading Terminal styles */
.badge-k-level {
  background: rgba(139, 92, 246, 0.2);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.35);
  font-weight: 700;
}
.badge-filled {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.badge-rejected {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.badge-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.live-pulse {
  animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.08); }
}