/********** Main CSS **********/
:root{
  /* core palette (from your earlier sheet) */
  --bg:#0b0f14; 
  --fg:#e5e7eb; 
  --muted:#a1a1aa; 
  --line:rgba(255,255,255,.08);
  --cyan:#22d3ee; 
  --indigo:#818cf8; 
  --card:rgba(255,255,255,.06); 
  --card2:rgba(255,255,255,.04);   /* slightly darker than before */
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --primary: var(--cyan);
  --light: var(--card);
  --dark:#0b1220;
  --panel: var(--card2);
  --panel-2: var(--card);
  --stroke: var(--line);
  --text: var(--fg);
  --primary-2: var(--indigo);
  /* landing-page adds */
  --nav-h: 60px;
  --glass: rgba(7,10,18,.62);
  --glass-line: rgba(255,255,255,.08);
  --sidebar-w: 250px;
  --bg-soft:#0e141b;
  --radius:14px;
}


/* soft vignette + tiny dotted field like the hero */
body{
  position: relative;
  background-color: var(--bg);           /* solid dark fallback */
  color: var(--fg); 
  -webkit-font-smoothing: antialiased; 
  /* subtle dark vignettes only */
  background-image:
    radial-gradient(1000px 800px at 15% -10%, rgba(34,211,238,.10), transparent),
    radial-gradient(1000px 800px at 100% 0%, rgba(129,140,248,.10), transparent),
    radial-gradient(1200px 800px at 70% -10%, rgba(2,6,23,.35), transparent 60%),
    radial-gradient(900px 600px at 10% 120%, rgba(2,6,23,.40), transparent 55%);
  z-index: 0;
}

body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  /* much darker, finer dots */
  background-image: radial-gradient(#ffffff0a 1px, transparent 1.2px);
  background-size: 16px 16px;
  opacity:.10;                 /* was .18; lower = less haze */
  z-index:0;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
}

.btn.btn-primary { 
  background:linear-gradient(90deg,var(--cyan),var(--indigo)); 
  color:#001018; 
  border:none; 
  padding:8px 14px; 
  border-radius:10px; 
  font-weight:600; 
}

.btn.btn-primary:hover {
  background: rgba(34,211,238,1);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Layout ***/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w); 
    height: 100vh;
    overflow-y: auto;
    background: #0b1220;
    color: var(--fg);
    border-right:1px solid var(--line); 
    transition: 0.5s;
    z-index: 1001;
    isolation: isolate;
}
.sidebar::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.03), transparent 120px);
}

.content{
    margin-left: var(--sidebar-w);
    padding-top:var(--nav-h);
    background: var(--bg);
    min-height: 100vh; 
    color: var(--fg);
    transition: .5s; 
}
/* when sidebar is collapsed via your existing .open class */
.content.open .navbar{ left: 0; }

/* mobile: sidebar off-canvas by default */
@media (max-width: 991.98px){
  .content { margin-left: 0; padding-top: var(--nav-h); }
  .content .navbar{ left: 0; }
}

/* make sure the outer container really fills the viewport */
.content.d-flex {
  height: 100vh; /* full viewport height */
}

/* ensure the history pane scrolls */
.chat-history {
  /* flex-grow and overflow-auto come from the Bootstrap utility classes,
     but if you want to reinforce: */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}

/* bottom input stays its natural height */
.chat-input > .form-control {
  /* keeps the input and button aligned */
  height: auto;
}

@media (min-width: 992px) {
    .sidebar {
        margin-left: 0;
    }

    .sidebar.open {
        margin-left: -250px;
    }

    .content {
        width: calc(100% - 250px);
    }

    .content.open {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        margin-left: -250px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    .content {
        width: 100%;
        margin-left: 0;
    }
}

/* cards/tiles: darker glassy cards with soft radius & shadow */
.card, .panel, .feature-card{
  background:rgba(255,255,255,.03); /* slightly darker than --card2 */
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.card:hover{ transform:translateY(-2px); }

/* section headings: lower contrast like the hero */
h1,h2,h3{ color:#e8eef6; }
h1{ opacity:.7; }

/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
    padding: 7px 20px;
    color:#d4d4d8;
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 0 30px 30px 0;
    outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
    color: #fff;
    background: var(--card);
    border-color: var(--cyan); 
}

.sidebar .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #a1a1aa;
    border: 1px solid var(--line);
    border-radius: 40px;
    
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
    background: var(--card);
    color: var(--fg);
    border-color: var(--cyan);
}

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
    padding-left: 25px;
    border-radius: 0 30px 30px 0;
}

.content .navbar .navbar-nav .nav-link {
  margin-left: 25px;
  padding: 12px 0;
  color: var(--bs-navbar-color);
  outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link:focus {
  color: var(--bs-navbar-hover-color);
}

  

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active { 
    color: var(--cyan);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    color:#d4d4d8;
    border:1px solid var(--line); 
    border-radius: 40px;
}

.content .navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}
/* Glass, fixed, non-scrolling navbar like the landing page */
.content .navbar{
  position: fixed;
  top: 0;
  left: var(--sidebar-w); 
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 16px;

  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);

  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  --bs-navbar-color: #c4c4c7;
  --bs-navbar-hover-color: var(--cyan);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  z-index: 1001;                  /* above content, below sidebar (999) */
}


/* Focus ring so keyboard users can see focus */
.sidebar .navbar .navbar-nav .nav-link:focus {
  box-shadow: 0 0 0 2px rgba(34,211,238,.35) inset;
}

/* Dropdown items in sidebar: better contrast on dark */
.sidebar .navbar .dropdown-item {
  color: var(--fg);
}
.sidebar .navbar .dropdown-item:hover {
  background: var(--card);
  color: #fff;
}


.content .navbar .sidebar-toggler {
  position: absolute;
  left: 10px;   /* adjust to match your actual sidebar width */
  top: 50%;
  transform: translateY(-50%);
}


@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 15px;
    }
}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}

/* ============ Analytics: Drawflow dark polish ============ */
 .drawflow{ background: repeating-linear-gradient(0deg, #0f141a 0px, #0f141a 24px, #10171e 24px, #10171e 48px); background-size:32px 32px; }
 .drawflow .connection{ stroke: rgba(129,140,248,.8) !important; }
 .drawflow .drawflow-node{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); color:var(--text); border-radius:12px; box-shadow: var(--shadow); }
 .drawflow .drawflow-node .title-box{ background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(129,140,248,.18)); color: var(--text); }
.drawflow .inputs .input, .drawflow .outputs .output{ background: var(--primary-2); border:2px solid rgba(255,255,255,.6); }


/* Output table look */
#node-preview table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
#node-preview th, #node-preview td{
  border:1px solid var(--stroke);
  padding:6px 8px;
}
#node-preview th{ background:#0e1633; color:var(--muted); text-align:left; }  /* no change in behavior */


/* Context menu (analytics) */
.custom-context-menu{
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--stroke);
  border-radius:10px;
  box-shadow: var(--shadow);
}
.custom-context-menu .menu-item{
  padding:10px 14px; cursor:pointer;
}
.custom-context-menu .menu-item:hover{
  background:#0e1633;
}

/* Modal backdrop/card (analytics) */
#configModal{
  /* page-level overlay; hidden by default in JS */
  background: rgba(0,0,0,.45);
}
#configModal input, #configModal select{
  background:#0e1633; color:var(--text);
  border:1px solid var(--stroke); border-radius:8px; padding:6px 8px; width:100%;
}
 .toolbar .hint{ color:var(--muted); font-size:.9rem; }
 #configModal .modal-card h5{ margin:0 0 10px 0; }
 #configFields{ margin-bottom:12px; }
 #uploadField{ display:none; }
 #loadingSpinner{ display:none; }

 /* Loading spinner container in analytics */
#loadingSpinner{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:8px;
  color: var(--muted);
}


/* ===== Analytics Workspace & Canvas ===== */
#workspace{ display:flex; gap:16px; align-items:stretch; min-height: calc(100vh - var(--nav-h)); padding:14px 16px; box-sizing:border-box; }
#sidebar{ width: 260px; flex: 0 0 260px; background: var(--bg-soft) !important; color: var(--text) !important; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:14px; position: sticky; top: 16px; height: calc(100vh - 32px - var(--nav-h)); overflow:auto; }
#sidebar .group-title{ font-size:.9rem; letter-spacing:.02em; color: var(--muted); margin: 12px 0 8px; text-transform: uppercase; }
.drag-block{ user-select:none; cursor:grab; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); margin-bottom:8px; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.drag-block:hover{ border-color: rgba(34,211,238,.5); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
.drag-block:active{ cursor:grabbing; transform: scale(.98); }
#container{ flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow); }
.toolbar .title{ font-weight:600; color:var(--text); }
#canvasWrap{ position:relative; border:1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); box-shadow: var(--shadow); overflow:hidden; min-height: 480px; }
#drawflow{ width:100%; height: 58vh; min-height: 420px; }
#nodeOutput{ border:1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding:14px; }
#nodeOutput h4{ margin:0 0 8px 0; color:var(--muted); font-weight:600; }
#node-preview{ border:1px dashed var(--line); border-radius: 12px; padding:10px; min-height:80px; }
#plot-output{ margin-top:10px; border-radius:12px; overflow:hidden; }


#configModal{ background: rgba(0,0,0,.45); }
#configModal .modal-card{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow); }
#configModal .btn{ background:linear-gradient(90deg,var(--cyan),var(--indigo)); color:#001018; border:none; padding:8px 14px; border-radius:10px; font-weight:600; }
#configModal .btn.secondary{ background:transparent; color:var(--muted); border:1px solid var(--line); }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.spinner{ display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; vertical-align:middle; margin-left:8px }


@media (max-width: 980px){
  #workspace{ flex-direction: column; }
  #sidebar{ position:relative; top:auto; height:auto; width:100%; }
  #drawflow{ height: 52vh; }
}

/* Make drag tiles match the dark-glass theme and override any btn defaults */
#sidebar .drag-block{
  display:block;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  font-weight: 600;
  text-align: left;
}

/* Better hover/active to avoid “blue button” look */
#sidebar .drag-block:hover{
  border-color: rgba(34,211,238,.5) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.15) !important;
}
#sidebar .drag-block:active{ transform: scale(.98); }

/* Unify the three action buttons at the bottom */
#sidebar > button{
  appearance: none;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: linear-gradient(90deg,var(--cyan),var(--indigo));
  color:#001018;
}
#sidebar > button + button{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
#sidebar > button:hover{ filter: brightness(1.07); }

/* Canvas background stays the same; boost node & ports specificity */
.drawflow .drawflow-node{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

.drawflow .drawflow-node .title-box{
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(129,140,248,.18)) !important;
  color: var(--text) !important;
  font-weight: 600;
}

/* Make both input/output dots on-brand (no yellow/white) */
.drawflow .drawflow-node .inputs .input,
.drawflow .drawflow-node .outputs .output{
  background: var(--primary-2) !important;
  border: 2px solid rgba(255,255,255,.6) !important;
}

/* Optional: clearer selection state */
.drawflow .drawflow-node.selected{
  border-color: rgba(34,211,238,.6) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
}

/* Sidebar section labels: a touch brighter and spaced */
#sidebar .group-title{
  color:#cbd5e1;
  opacity:.8;
  letter-spacing:.04em;
}


/* Forecast page helpers */
.results-scroll{ height:500px; overflow:auto; }

/* subtle cyan hint chip used in the label */
.help-hint{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color: var(--text);
  cursor: help;
}

/* Ensure Bootstrap's .bg-white / .bg-light don't sneak in on dark pages */
.bg-white, .bg-light{ background: transparent !important; }

/* High contrast header in results panel */
#results h4{ color:#e8eef6; opacity:.95; }
#card h4{ color:#e8eef6; opacity:.95; } 
/* Form controls on dark */
/* Inputs / selects / textareas */
.form-control, .form-select, textarea.form-control{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus{
  border-color: rgba(34,211,238,.6) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
  background: rgba(255,255,255,.07) !important;
  color: var(--text) !important;
}

/* Placeholder  label contrast */
::placeholder{ color:#9ca3af; opacity:.9; }
label, .form-text, .text-muted{ color: var(--muted) !important; }

/* Checkbox / radio */
.form-check-input{
  background-color: transparent !important;
  border: 1px solid var(--line) !important;
}
.form-check-input:checked{
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
}

/* File input button */
input[type="file"]{ color: var(--muted); }
input[type="file"]::file-selector-button{
  background: linear-gradient(90deg,var(--cyan),var(--indigo));
  color:#001018; border:none; border-radius:10px; padding:6px 10px;
}