/* PerturbPlan Styles - Copied from original perturbplan app */

/* Custom color scheme - cohesive palette */
:root {
  --navbar-color: #5B90BF;
  --sidebar-color: #344A5D;
  --sidebar-width: 320px;
  --primary-color: #5B90BF;
  --success-color: #5BA672;
  --info-color: #6BA8CD;
  --warning-color: #D4A945;
  --danger-color: #C85A5A;
  --light-bg: #F8F9FA;
  --section-header: #4A6B82;
  --border-light: #E3E6EA;
  --text-muted: #6C757D;
}

/* Top navbar styling to match shinyapps.io */
.main-header .navbar {
  background-color: var(--navbar-color) !important;
  border-bottom: none !important;
  min-height: 50px !important;
}

.main-header .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  background-color: var(--navbar-color) !important;
}

/* PerturbPlan title styling to match navbar color and sidebar width */
.main-header .logo {
  background-color: var(--navbar-color) !important;
  color: #fff !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  width: var(--sidebar-width) !important;
  text-align: center !important;
  font-weight: bold !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
}

.main-header .logo:hover {
  background-color: var(--navbar-color) !important;
}

/* Sidebar styling to match shinyapps.io */
.main-sidebar {
  width: var(--sidebar-width) !important;
  background-color: var(--sidebar-color) !important;
  transition: width 0.3s ease-in-out;
  min-height: 100vh !important;
  height: 100vh !important;
}

.main-sidebar .sidebar {
  background-color: var(--sidebar-color) !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

/* Content wrapper adjustments */
.content-wrapper, .right-side {
  margin-left: var(--sidebar-width) !important;
  transition: margin-left 0.3s ease-in-out;
  min-height: 100vh !important;
}

/* Download button positioning - push to right */
.main-header .navbar-custom-menu {
  float: right !important;
  margin-right: 20px !important;
}

.main-header .navbar .navbar-custom-menu > .navbar-nav {
  margin: 0 !important;
  float: right !important;
}

.main-header .navbar .navbar-custom-menu > .navbar-nav > li {
  float: right !important;
}

/* Download button styling - match Plan button exactly (btn-success) */
#download_results {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  margin-top: 8px !important;
  font-weight: normal !important;
  font-size: 14px !important;
}

#download_results:hover, #download_results:focus, #download_results:active {
  background-color: #4A8C5F !important;
  border-color: #4A8C5F !important;
  color: white !important;
}

/* Hide the hamburger menu */
.main-header .sidebar-toggle {
  display: none !important;
}

/* Ensure proper viewport height for large desktop monitors */
html, body {
  height: 100% !important;
  min-height: 100vh !important;
}

.wrapper {
  min-height: 100vh !important;
  height: 100% !important;
}

/* ========== COHESIVE UI ELEMENT STYLING ========== */

/* Button color scheme */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #4A7CA3 !important;
  border-color: #4A7CA3 !important;
  color: white !important;
}

.btn-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: #4A8C5F !important;
  border-color: #4A8C5F !important;
  color: white !important;
}

.btn-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  color: white !important;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: #5A94B3 !important;
  border-color: #5A94B3 !important;
  color: white !important;
}

.btn-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: white !important;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: #B8923A !important;
  border-color: #B8923A !important;
  color: white !important;
}

.btn-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: #A84848 !important;
  border-color: #A84848 !important;
  color: white !important;
}

/* Clear/secondary buttons - enhanced visibility */
.btn-default {
  background-color: #ffffff !important;
  border-color: #CED4DA !important;
  color: #495057 !important;
  font-weight: 500 !important;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
  background-color: #E9ECEF !important;
  border-color: #ADB5BD !important;
  color: #212529 !important;
}

/* Box/panel styling - standardized to primary blue */
.box.box-primary .box-header,
.box.box-info .box-header,
.box.box-success .box-header,
.box.box-warning .box-header,
.box.box-danger .box-header {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-color: var(--primary-color) !important;
}

/* Generic box header styling for consistency */
.box-header {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.box {
  border-top-color: var(--primary-color) !important;
}

/* Collapsible section headers in sidebar - Updated IDs for new sections */
[id$='-header'], [id*='design-header'], [id*='exp-header'], [id*='analysis-header'], [id*='effects-header'] {
  background-color: var(--section-header) !important;
  color: white !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

[id$='-header']:hover, [id*='design-header']:hover, [id*='exp-header']:hover, [id*='analysis-header']:hover, [id*='effects-header']:hover {
  background-color: #3E5A73 !important;
}

[id$='-chevron'], [id*='design-chevron'], [id*='exp-chevron'], [id*='analysis-chevron'], [id*='effects-chevron'] {
  color: white !important;
}

/* Section containers - reduced spacing */
[id$='-content'], [id*='design-content'], [id*='experimental-content'], [id*='analysis-content'], [id*='effects-content'] {
  background-color: var(--light-bg) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0 0 4px 4px !important;
  color: #212529 !important;
  padding: 10px !important;
}

/* Ensure all text within sidebar sections is dark and readable */
[id$='-content'] *, [id*='design-content'] *, [id*='experimental-content'] *, [id*='analysis-content'] *, [id*='effects-content'] * {
  color: #212529 !important;
}

[id$='-content'] label, [id*='design-content'] label, [id*='experimental-content'] label, [id*='analysis-content'] label, [id*='effects-content'] label {
  color: #212529 !important;
  font-weight: 500 !important;
}

/* Reduce vertical spacing in sidebar form elements */
.main-sidebar .form-group {
  margin-bottom: 10px !important;
}

/* Reduce margin between form inputs */
.main-sidebar .form-control {
  margin-bottom: 5px !important;
}

/* Reduce spacing between collapsible sections */
.main-sidebar > div > div[style*='margin-bottom: 10px'] {
  margin-bottom: 5px !important;
}

/* Reduce spacing in conditionalPanel elements */
.main-sidebar .shiny-input-container {
  margin-bottom: 8px !important;
}

/* Horizontal separator line in sidebar */
.sidebar-separator {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  margin: 15px 0 !important;
  background: none !important;
}

/* Plan button styling */
[id*='plan_btn'] {
  display: block !important;
  margin: 0 auto !important;
}

/* Form inputs and labels styling */
.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(91, 144, 191, 0.25) !important;
}

.form-control {
  border-color: var(--border-light) !important;
}

/* Ensure form labels are visible with dark text */
.control-label, label, .checkbox label, .radio label {
  color: #212529 !important;
  font-weight: 500 !important;
}

/* Sidebar form labels specifically */
.main-sidebar label, .main-sidebar .control-label {
  color: #212529 !important;
  font-weight: 500 !important;
}

/* Form group text */
.form-group label {
  color: #212529 !important;
  font-weight: 500 !important;
}

/* Help text and descriptions */
.help-block, .form-text {
  color: var(--text-muted) !important;
}

/* Custom file upload info banner */
.file-upload-info {
  background-color: rgba(212, 169, 69, 0.1) !important;
  border: 1px solid var(--warning-color) !important;
  color: #6B5425 !important;
}

.file-upload-success {
  background-color: rgba(91, 166, 114, 0.1) !important;
  border: 1px solid var(--success-color) !important;
  color: #2E5C3A !important;
}

/* Cost input styling with dollar sign prefix */
.cost-input-container {
  position: relative;
}

.cost-input-container .form-control {
  padding-left: 20px !important;
}

.cost-input-container .dollar-sign {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-weight: bold;
  z-index: 10;
  pointer-events: none;
}

/* Force remove all horizontal lines from design problem and analysis sections */
#sidebar-design_options .collapsible-content * {
  border-top: none !important;
  border-bottom: none !important;
}

#sidebar-design_options h1, #sidebar-design_options h2, #sidebar-design_options h3,
#sidebar-design_options h4, #sidebar-design_options h5, #sidebar-design_options h6 {
  border-top: none !important;
  border-bottom: none !important;
}

#sidebar-design_options div, #sidebar-design_options section {
  border-top: none !important;
  border-bottom: none !important;
}

/* ========== SIDEBAR COLLAPSE FUNCTIONALITY ========== */

/* Sidebar collapse transitions */
.main-sidebar.collapsed {
  width: 0 !important;
  overflow: hidden;
}

.main-sidebar.collapse-transition {
  transition: width 0.3s ease-in-out;
}

.content-wrapper.sidebar-collapsed {
  margin-left: 0 !important;
}

.content-wrapper.collapse-transition {
  transition: margin-left 0.3s ease-in-out;
}

.main-sidebar.collapsed .sidebar-content {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Logo collapse behavior */
.main-header .logo.collapsed {
  width: 0 !important;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

/* Toggle button styling - positioned at right edge of sidebar */
#simple-toggle {
  position: fixed;
  top: 50%;
  left: calc(var(--sidebar-width) - 12px);
  transform: translateY(-50%);
  background: white;
  border: 1px solid #ddd;
  border-left: none;
  width: 24px;
  height: 60px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  transition: all 0.3s ease;
}

/* When sidebar is collapsed, position button at left edge */
.main-sidebar.collapsed #simple-toggle {
  left: 0px;
}

#simple-toggle:hover {
  background-color: #f5f5f5;
  color: #333;
}

/* Sidebar collapse button (inside sidebar) */
.sidebar-collapse-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #ADB5BD;
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  padding: 5px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.sidebar-collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}