@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&display=swap');

:root{
  --blue:#003e7f; /* thesis_blue-ish */
  --red:#a21b2d;  /* thesis_red-ish */
  --green:#7ba300;/* ifisc_green-ish */
  --bg:#f8fafc;
  --fg:#1f2937;
  --muted:#e5e7eb;
}

html, body, #react-entry-point, .dash-debug-menu {
  font-family: 'Crimson Pro', Times New Roman, serif;
  font-size: 20px;
}

/* Apply to plotly SVG text */
.dash-graph text, .dash-graph .xtick text, .dash-graph .ytick text {
  font-family: 'Crimson Pro', Times New Roman, serif !important;
  font-size: 18px;
}

/* Slider tick labels */
.rc-slider-mark-text {
  font-family: 'Crimson Pro', Times New Roman, serif !important;
  font-size: 16px;
}

/* Panel styling */
.control-panel{
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Oscillator tile */
.tile{
  background: #ffffff;
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Themed inputs */
.themed-input{
  border: 1px solid var(--muted);
  border-radius: 6px;
  padding: 6px 8px;
}
.themed-input:focus{ outline: 1px solid var(--blue); }

/* Buttons */
.themed-btn{
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.themed-btn:hover{ filter: brightness(1.05); }

/* Sliders */
.rc-slider-rail{ background-color: #e5e7eb; height: 6px; }
.rc-slider-track{ background-color: var(--blue); height: 6px; }
.rc-slider-dot-active{ border-color: var(--blue); }
.rc-slider-handle{ border: solid 2px var(--blue); width: 14px; height: 14px; margin-top: -4px; }

/* Layout additions: sticky topbar, toggleable sidebar, responsive two-col */
:root { --topbar-h: 64px; --sidebar-w: 350px; }

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 8px 12px;
  background: #ffffffcc;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--muted);
  white-space: nowrap;
  overflow-x: auto;
}

.sidebar{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  overflow: auto;
  padding: 28px 12px 12px 12px;
  background: #fff;
  border-right: 1px solid var(--muted);
  transform: translateX(0);
  transition: transform 200ms ease;
}
.app-root.sidebar-closed .sidebar{ transform: translateX(-100%); }

.app-shell{
  position: relative;
  margin-left: calc(var(--sidebar-w) + 12px);
  margin-top: var(--topbar-h);
  padding: 12px;
  transition: margin-left 200ms ease;
}
.app-root.sidebar-closed .app-shell{ margin-left: 0; }

/* Make topbar children behave nicely */
.topbar .themed-btn{ flex: 0 0 auto; }
.topbar h3{ margin: 0; flex: 0 0 auto; font-size: 26px; }
.topbar .dash-markdown{ flex: 1 1 auto; overflow-x: auto; white-space: nowrap; }

/* Minimal menu icon button */
.icon-btn{
  background: transparent;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:focus{ outline: 2px solid var(--blue); outline-offset: 2px; }
.icon-btn:hover{ background: rgba(0,0,0,0.04); }
.icon-btn .icon-bars{
  position: relative;
  width: 22px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
  transition: background 200ms ease;
}
.icon-btn .icon-bars::before,
.icon-btn .icon-bars::after{
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
  transition: transform 200ms ease;
}
.icon-btn .icon-bars::before{ transform: translateY(-6px); }
.icon-btn .icon-bars::after{ transform: translateY(6px); }

/* Animate to an X when sidebar is open */
.app-root.sidebar-open .icon-btn .icon-bars{ background: transparent; }
.app-root.sidebar-open .icon-btn .icon-bars::before{ transform: rotate(45deg); }
.app-root.sidebar-open .icon-btn .icon-bars::after{ transform: rotate(-45deg); }

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 1200px){ .two-col{ grid-template-columns: 1fr; } }

/* Section titles */
.section-title{
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 10px 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--muted);
}

/* Modern Desktop Tabs */
.view-tabs-desktop{
  display: block;
  margin-bottom: 12px;
}

.view-tabs-desktop .tab{
  font-family: 'Crimson Pro', Times New Roman, serif;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-bottom-color 0.15s ease, background 0.15s ease;
}

.view-tabs-desktop .tab:hover{
  color: var(--blue);
  background: rgba(0, 62, 127, 0.04);
}

.view-tabs-desktop .tab--selected{
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
  font-weight: 600;
}

.view-tabs-desktop .tab:focus{
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Mobile Dropdown - hidden on desktop by default */
.view-tabs-mobile-wrapper{
  display: none;
  position: relative;
  margin-bottom: 12px;
  width: 100%;
}

.view-tabs-mobile-button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #ffffff;
  border: 2px solid var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Crimson Pro', Times New Roman, serif;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.view-tabs-mobile-button:hover{
  border-color: var(--blue);
  background: rgba(0, 62, 127, 0.02);
}

.view-tabs-mobile-button:active{
  background: rgba(0, 62, 127, 0.05);
}

.view-tabs-mobile-arrow{
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.15s ease;
  margin-left: 12px;
}

.view-tabs-mobile-button-open .view-tabs-mobile-arrow{
  transform: rotate(180deg);
}

.view-tabs-mobile-menu{
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 2px solid var(--muted);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  z-index: 1000;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.15s ease, opacity 0.15s ease;
}

.view-tabs-mobile-menu-open{
  display: block;
  max-height: 360px;
  opacity: 1;
}

.view-tabs-mobile-option{
  width: 100%;
  display: block;
  padding: 12px 14px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid var(--muted);
  text-align: left;
  font-family: 'Crimson Pro', Times New Roman, serif;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.view-tabs-mobile-option:last-child{
  border-bottom: none;
}

.view-tabs-mobile-option:hover{
  background: rgba(0, 62, 127, 0.05);
}

.view-tabs-mobile-option:active{
  background: rgba(0, 62, 127, 0.1);
}

.view-tabs-mobile-option:focus{
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Mobile Responsive Styles */
@media (max-width: 900px) {
  /* Reduce base font size slightly on mobile */
  html, body {
    font-size: 18px;
  }
  
  /* Topbar: allow wrapping, reduce padding */
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 8px;
  }
  
  .topbar h3 {
    font-size: 22px;
  }
  
  .topbar .dash-markdown {
    font-size: 16px;
    overflow-x: auto;
  }
  
  /* Sidebar: full-width overlay starting below topbar */
  /* Account for topbar wrapping by using a larger top value */
  .sidebar {
    top: calc(var(--topbar-h) + 110px);
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - var(--topbar-h) - 110px);
    z-index: 999;
  }
  
  /* When sidebar is closed, hide it completely */
  .app-root.sidebar-closed .sidebar {
    transform: translateX(-100%);
  }
  
  /* Main content always starts below topbar on mobile */
  /* Account for topbar wrapping */
  .app-shell {
    margin-left: 0;
    margin-top: calc(var(--topbar-h) + 110px);
    padding: 8px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  .app-shell > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* When sidebar is open, don't change app-shell position */
  .app-root.sidebar-open .app-shell {
    margin-left: 0;
    margin-top: calc(var(--topbar-h) + 110px);
  }
  
  /* Section titles smaller on mobile */
  .section-title {
    font-size: 20px;
    margin: 8px 0 10px;
  }
  
  /* Increase touch targets for buttons */
  .themed-btn {
    padding: 10px 14px;
    font-size: 16px;
    min-height: 44px;
    min-width: 44px;
  }
  
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Make control panels wrap on narrow screens */
  .control-panel {
    padding: 8px;
  }
  
  /* Tiles: reduce padding */
  .tile {
    padding: 6px 8px;
    margin-bottom: 8px;
  }
  
  /* Slider labels smaller */
  .rc-slider-mark-text {
    font-size: 14px;
  }
  
  /* Graph text smaller */
  .dash-graph text {
    font-size: 14px !important;
  }
  
  /* Hide desktop tabs, show mobile dropdown */
  .view-tabs-desktop{
    display: none !important;
  }
  
  .view-tabs-mobile-wrapper{
    display: block !important;
  }
  
  /* Make tabs touch-friendly */
  .tab {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* On mobile, stack oscillator tiles vertically and make them full width */
  #plots-grid {
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
  }
  
  #plots-grid .tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  
  #plots-grid .tile .dash-graph {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  #plots-grid .tile .js-plotly-plot,
  #plots-grid .tile .plotly {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Better button wrapping in sidebar */
  .sidebar > div {
    overflow-wrap: break-word;
  }
}

@media (max-width: 600px) {
  /* Extra-small screens: further refinements */
  html, body {
    font-size: 16px;
  }
  
  .topbar h3 {
    font-size: 20px;
  }
  
  .topbar .dash-markdown {
    font-size: 14px;
  }
  
  /* Smaller section titles */
  .section-title {
    font-size: 18px;
  }
  
  /* Reduce sidebar padding */
  .sidebar {
    padding: 16px 8px 8px 8px;
  }
  
  /* Smaller inputs and buttons */
  .themed-input {
    padding: 4px 6px;
    font-size: 14px;
  }
  
  .themed-btn {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  /* Compact tiles */
  .tile {
    padding: 4px 6px;
  }
  
  /* Slider marks even smaller */
  .rc-slider-mark-text {
    font-size: 12px;
  }
  
  /* Very compact graph text */
  .dash-graph text {
    font-size: 12px !important;
  }
  
  /* Tabs even more touch-friendly on small screens */
  .tab {
    min-height: 48px;
    padding: 8px 12px;
  }
  
  /* On extra-small screens, ensure tiles are full width and stacked */
  #plots-grid {
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
  }
  
  #plots-grid .tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  
  #plots-grid .tile .dash-graph {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  #plots-grid .tile .js-plotly-plot,
  #plots-grid .tile .plotly {
    width: 100% !important;
    max-width: 100% !important;
  }
}