:root {
  /* === COLOR VARIABLES - Tweak in one place === */
  --brand-green: #01CB83;
  --brand-purple: #7A48CC;
  --brand-light-bg: #f8f9fa;
  --sidebar-bg: #fff;
  --sidebar-bg-collapsed: #e0ecf7;
  --sidebar-border: #C7C7C7;
  --header-bg: #fff;
  --navbar-bg: var(--brand-green);
  --tab-bg: #e3efe6;
  --box-border: #DEEBEA;
  --main-panel-bg: transparent;
  --sidebar-bottom-bg: #F5F7F9;
  --tooltip-bg: #333;

  /* Input section */
  --input-selected-bg: #EDF0F5;
  --input-hover-bg: var(--brand-green);
  --input-hover-text: #fff;
  --input-selected-text: #444;

  --font-main: Arial,sans-serif;
}

/* ===== HEADER & LOGO ===== */
.main-header,
.skin-blue .main-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
}
.main-header .logo {
  font-size: 2em;
  font-weight: bold;
  text-align: left;
  overflow: visible;
  white-space: normal;
  transition: width 0.2s;
}
.skin-blue .main-header .logo {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  background: var(--brand-green) !important;
  border-right: 1px solid var(--sidebar-border);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
/* Collapsed state */
body.sidebar-collapse .main-header .logo {
  background: var(--brand-green) !important;
  border-right: 1px solid var(--sidebar-border);
}

/* ===== NAVBAR ===== */
.skin-blue .main-header .navbar {
  background: var(--navbar-bg) !important;
  margin-left: 300px;
}
body.sidebar-collapse .skin-blue .main-header .navbar {
  background: var(--navbar-bg) !important;
}


body.skin-blue {
  padding-right: 0 !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100vw !important;
}

/* ===== SIDEBAR ===== */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  overflow-y: auto !important;
  height: 100vh;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border);
}
body.sidebar-collapse .skin-blue .main-sidebar,
body.sidebar-collapse .skin-blue .left-side {
  background: var(--sidebar-bg-collapsed) !important;
}

/* Sidebar bottom button bar */
.sidebar-bottom-buttons {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 300px;
  padding: 10px;
  background: var(--sidebar-bottom-bg);
  border-top: 1px solid var(--sidebar-border);
  border-right: 1px solid var(--sidebar-border);
  z-index: 1000;
  box-sizing: border-box;
}

/* Main content area */
.content-wrapper,
.right-side {
  height: 100vh;
  overflow-y: auto;
  padding-top: 0;
}


/* ===== BUTTONS ===== */
.action-button-container {
  text-align: center;
  margin: 0;
}
.analyze-btn,
#GO_TO_DASHBOARD {
  background: var(--brand-green) !important;
  border: none !important;
  color: #fff !important;
  font-weight: bold !important;
  padding: 15px 40px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  font-size: 14px !important;
  text-align: center;
}
.analyze-btn:hover,
#GO_TO_DASHBOARD:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}


/* ===== INFO/THEME BOXES ===== */
.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.small-box,
.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.box {
  border-top: none;
}
.box-header {
  border-radius: 8px 8px 0 0;
  background: #fff !important; /* Same as .box, or use var(--box-bg) if set */
  border-bottom: 1px solid #dee2e6;
  min-height: 40px;           /* Optional: remove if not needed */
  height: 40px;               /* Optional: remove if not needed */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px !important;      /* Lower padding */
  padding-bottom: 15px !important;   /* Lower padding */
}

.box-title, .box .box-header h3 {
  font-size: 1em !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  width: 100%;
  text-align: center;
  display: block !important;
  white-space: normal;
}

/* ===== SIDEBAR BOX ===== */
.sidebar-box-title, .right-sidebar-box .box-title {
  color: #fff !important;
  background: transparent !important;
  padding: 12px 22px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  margin: 0 0 12px 0 !important;
}


/* ===== TABLES (DATATABLES) ===== */
.box-body,
.tab-content {
  font-size: 1.12em;
}

.small-dt table.dataTable {
  font-size: 0.85em !important;
}
.small-dt .dataTables_wrapper .dataTables_length,
.small-dt .dataTables_wrapper .dataTables_filter,
.small-dt .dataTables_wrapper .dataTables_info,
.small-dt .dataTables_wrapper .dataTables_paginate {
  font-size: 0.8em;
}
.small-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 2px 6px !important;
  font-size: 0.85em;
}
.small-dt table.dataTable thead th,
.small-dt table.dataTable tbody td {
  font-size: 0.90em !important;
  padding: 4px 6px;
}
.small-dt .dataTables_wrapper .dataTables_filter input,
.small-dt .dataTables_wrapper .dataTables_length select {
  font-size: 0.85em;
  padding: 2px 6px;
  height: 26px;
  min-width: 30px;
}

/* ===== TAB NAVS ===== */
.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active>a:focus,
.nav-tabs-custom>.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  background: var(--brand-green) !important;
  color: #fff !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  border-radius: 8px 8px 0 0;
  border: none !important;
}
.nav-tabs>li>a {
  background: var(--tab-bg) !important;
  color: var(--brand-green) !important;
  font-size: 1em;
  font-weight: 600;
  border-top: 2px solid transparent;
  border-radius: 8px 8px 0 0;
}
.tab-content {
  border: transparent;
  border-radius: 0 0 10px 10px;
  background: transparent;
  margin-bottom: 0;
  padding: 10px 18px 18px 18px;
}
.box:hover,
.nav-tabs>li>a:hover {
  box-shadow: 0 6px 18px rgba(71,143,97,0.08) !important;
}

/* ===== MAIN PANEL AREA ===== */
.main-panel-area {
  margin: 0 !important;
  padding: 0 !important;
  width: 75vw;
  background: var(--main-panel-bg) !important;
}

/* ===== INPUT SECTIONS & SELECTIZE ===== */
.input-section {
  background: transparent;
  border-radius: 10px;
  padding: 6px 12px 12px 12px;
  width: 95%;
  max-width: 600px;
  min-width: 200px;
  margin: 0 auto 12px auto;
  font-size: 16px;
  border: 2px solid transparent;
}
.input-section h4 {
  margin: 0 0 8px 0;
  color: var(--brand-green);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-section h4 i {
  color: var(--brand-green);
  font-size: 1.1em;
  margin-right: 4px;
}
.input-section .form-group,
.input-section .selectize-control {
  margin-bottom: 0;
}

.input-section .selectize-input,
.input-section .form-control {
  background: var(--brand-light-bg) !important;
  /* border: 1px solid #dee2e6 !important; */
  /* border-radius: 4px;*/
  min-height: 36px;
  font-size: 14px;
}
.input-section .selectize-input.focus {
  box-shadow: none;
}
.input-section .form-control:focus {
  border-color: var(--brand-green) !important;
  box-shadow: none;
}
.input-section .selectize-input .item,
.input-section .item {
  background: var(--input-selected-bg) !important;
  color: var(--input-selected-text) !important;
  font-weight: bold;
  border-radius: 5px;
  margin: 2px 3px 2px 0;
  padding: 2px 8px !important;
  border: none;
  box-shadow: none;
  display: inline-block;
  font-size: 14px;
  transition: background 0.17s, color 0.17s;
}
.input-section .btn-default {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  font-size: 14px;
  padding: 6px 10px;
}
.input-section .btn-default:hover {
  border-color: #5a67d8;
}
.input-section small {
  font-size: 11px;
  color: #6c757d;
  display: block;
  margin-top: 4px;
}
/* Tag hover/focus */
.input-section .selectize-input .item:hover,
.input-section .selectize-input .item.active {
  background: var(--input-hover-bg) !important;
  color: var(--input-hover-text) !important;
  box-shadow: 0 2px 6px rgba(71,143,97,0.10);
  cursor: pointer;
  outline: none;
}

label.input-group-btn.input-group-prepend {
  border: 1px solid #01CB83;  
  background: #01CB83;    /* adjust color/thickness as needed */
  /* Optional: adjust padding or background if needed */
}

/* ===== TOOLTIP STYLES ===== */
.tooltip {
  font-family: inherit;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s;
}
.tooltip.in {
  opacity: 0.95;
}
.tooltip-inner {
  background: var(--tooltip-bg);
  color: #fff;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 4px;
  text-align: left;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--tooltip-bg);}
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--tooltip-bg);}
.tooltip.left .tooltip-arrow { border-left-color: var(--tooltip-bg);}
.tooltip.right .tooltip-arrow { border-right-color: var(--tooltip-bg);}