:root {
  --wt-max-width: 900px;
}

body{
  margin:0;
  font-family:sans-serif;
}

/* Skip link */
.wt-skip-link{
  position:absolute;
  left:-999px;
  top:auto;
}
.wt-skip-link:focus{
  left:0;
  top:0;
  background:#000;
  color:#fff;
  padding:8px;
  z-index:1000;
}

/* Layout: nav + portlet fill viewport */
.wt-layout{
  display:flex;
  height:100vh;
}

/* Navigation */
.wt-sidebar{
  flex:0 0 170px;
  max-width:170px;
  padding:1rem;
  background:#f5f5f5;
  overflow-y:auto;
  box-sizing:border-box;
}
.wt-sidebar-brand{
  display:block;
  font-weight:bold;
  margin-bottom:0.75rem;
  text-decoration:none;
  color:#000;
}
.wt-nav-section-toggle {
  font-weight: normal;     /* remove bold */
  position: relative;
  padding-left: 1rem;      /* space for arrow */
}

.wt-nav-section-toggle::before {
  content: "▼";            /* down arrow */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  color: #555;
}
.site-logo svg {
  margin-right: 0.1em;   /* adjust until it looks right */
  height: 1em;
  width: auto;
  display: block;
}
.site-logo svg {
  height: 1em;
  width: 1.5em;      /* square box */
}
.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: Arial;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration:none;
    font-size: 1.4rem;
}

.wt-nav-list,
.wt-nav-sublist{
  list-style:none;
  margin:0;
  padding:0;
}
.wt-nav-section-label{
  display:block;
  margin-top:1rem;
}
.wt-nav-sublist{
  padding-left:1rem;
}
.wt-nav-link{
  display:block;
  padding:4px 0;
  text-decoration:none;
  color:#333;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wt-nav-link--active{
  font-weight:bold;
}

/* Portlet column */
.wt-portlet{
  flex:1;
  display:flex;
  min-width:0;
}
.wt-portlet-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100vh;
  box-sizing:border-box;
}

/* Sticky header at top of portlet; only content below scrolls */
.wt-sticky-header{
  padding:1rem 2rem 0.75rem 2rem;
  border-bottom:0px solid #ddd;
  background:#fff;
  z-index:10;
}
.wt-main-header{
  margin-bottom:1rem;
}
.wt-main-titles{
  display:flex;
  gap:0.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.wt-tool-name{
  margin:0;
}
.wt-title-separator{
  margin:0;
}
.wt-context-title{
  margin:0;
  font-size:1.1rem;
  font-weight:500;
}

/* Scrollable content area */
.wt-scrollable-content{
  flex:1;
  overflow-y:auto;
  padding:0rem 2rem 3rem; /* bottom padding so content isn't fully hidden behind footer */
  box-sizing:border-box;
}

/* ================================
   PRIMARY TABS (NEW STRATEGY)
   ================================ */

.wt-tabs-primary-container{
  display:flex;
  gap:1rem;
  margin-bottom:0.75rem;
  flex-wrap:wrap;
  background:#eeeeee;
  padding:0.5rem 0.75rem 0 0.75rem;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}

.wt-tab-primary-active,
.wt-tab-primary-inactive{
  cursor:pointer;
  font:inherit;
  font-size:1rem;
  padding:0.5rem 1rem;
  border:1px solid transparent;
  border-radius:4px 4px 0 0;
  margin-bottom:0;
}

/* Inactive primary tabs */
.wt-tab-primary-inactive{
  background:#eeeeee;
  border-bottom:none;
}

/* Active primary tab – raised */
.wt-tab-primary-active{
  background:#ffffff;
  border-color:#ccc;
  border-bottom:1px solid #ffffff;  /* blends with content background */
  color:#13294B;
  font-weight:bold;
  margin-bottom:-1px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* ================================
   SECONDARY TABS (NEW STRATEGY)
   ================================ */

.wt-tabs-secondary-container{
  display:flex;
  gap:1rem;
  margin-bottom:0.75rem;
  flex-wrap:wrap;
  background:#ffffff;
  padding:0.25rem 0.75rem 0 0.75rem;
  border-bottom:1px solid #ddd;
}

.wt-tab-secondary-active,
.wt-tab-secondary-inactive{
  cursor:pointer;
  font:inherit;
  font-size:1rem;
  padding:0.5rem 1rem;
  border:1px solid transparent;
  border-radius:4px 4px 0 0;
  margin-bottom:0;
}

/* Inactive secondary tabs: underline */
.wt-tab-secondary-inactive{
  background:#ffffff;
  color:#000000;
  border-bottom:none;
}

/* Active secondary tab */
.wt-tab-secondary-active{
  background:#ffffff;
  border-color:#ccc;
  color:#13294B;
  font-weight:bold;
  border-bottom:1px solid #ffffff;
  margin-bottom:-1px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* ================================
   PANEL HIDE/SHOW
   ================================ */

.wt-tab-panel--hidden{
  display:none;
}

/* Buttons */
.wt-actions{
  width: 100%;
  max-width: var(--wt-max-width);   /* limit width */
  text-align: right;  /* buttons align to the right inside the box */
}
.wt-btn{
  border:1px solid #ccc;
  cursor:pointer;
  font:inherit;
    background-color: #FFBB1A;
    color: #323241;
    flex: 0 0 auto;
    padding: 0.75em 1em;
    border-radius: 4px;
}
.wt-btn-save-image {
  width: 1em;      /* scales with font size */
  height: 1em;
  vertical-align: middle; /* keeps it aligned with text */
    margin-right: 0.4em;
}

/* Messages */
.wt-messages{
  margin-bottom:1rem;
    max-width: var(--wt-max-width);
}
.wt-message{
  padding:0.5rem 0.75rem;
  border:1px solid #4caf50;
  background:#e8f5e9;
  font-size:0.95rem;
    
}

.wt-form {
  flex: 1 1 auto;     /* let the form grow to fill remaining width */
  width: 100%;        /* ensure it spans the full line */
  display: flex;      /* so its child (.wt-portlet-inner) can also stretch */
}

/* Content form */
.wt-form-row{
  margin-bottom:1rem;
  max-width:480px;
}
.wt-form-row label{
  display:block;
  margin-bottom:0.3rem;
}
.wt-form-row input[type="text"]{
  width:100%;
  padding:0.4rem;
  border:1px solid #ccc;
  box-sizing:border-box;
}

/* Hamburger toggle */
.wt-nav-toggle{
  display:none;
  border:none;
  background:transparent;
  font-size:1.4rem;
  cursor:pointer;
  padding:0.1rem 0.3rem;
}

/* Footer: positioned at bottom, over content */
.wt-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#e0e0e0;
  padding:0.5rem 2rem;
  font-size:0.85rem;
  line-height:1.2;
  z-index:200;
}

/* Mobile overlay */
.wt-nav-overlay{
  display:none;
}

/* Responsive: mobile nav overlay */
@media (max-width: 760px){
  .wt-layout{
    display:block;
    height:100vh;
  }

  .wt-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:220px;
    max-width:80%;
    box-shadow:2px 0 6px rgba(0,0,0,0.15);
    transform:translateX(-100%);
    transition:transform 0.2s ease-out;
    z-index:170;
  }

  body.wt-nav-open .wt-sidebar{
    transform:translateX(0);
  }

  .wt-portlet{
    height:100vh;
  }

  .wt-portlet-inner{
    height:100vh;
  }

  .wt-sticky-header{
    padding:0.75rem 1rem 0.5rem 1rem;
  }

  .wt-scrollable-content{
    padding:0.75rem 1rem 3rem;
  }

  .wt-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Overlay that closes nav when tapping outside */
  .wt-nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.3);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease-out;
    z-index:140;
  }
  .wt-nav-overlay[hidden]{
    opacity:0;
    pointer-events:none;
  }
  body.wt-nav-open .wt-nav-overlay{
    opacity:1;
    pointer-events:auto;
  }
}