/* =========================================================
   CRASH ANALYTICS — UNIFIED BUTTON SYSTEM
   ========================================================= */

:root{
  --ui-btn-bg:#111923;
  --ui-btn-bg-hover:#172333;
  --ui-btn-border:rgba(132,157,184,.26);
  --ui-btn-border-hover:rgba(101,167,255,.52);

  --ui-blue:#65a7ff;
  --ui-blue-soft:rgba(101,167,255,.13);
  --ui-blue-border:rgba(101,167,255,.56);
  --ui-blue-glow:rgba(71,145,235,.20);

  --ui-btn-text:#b9c6d6;
  --ui-btn-text-active:#f2f8ff;
}


/* =========================================================
   1. BASE — normal interface buttons
   ========================================================= */

button:not(.cpMarker15):not(.divMarker14):not(.eventHit),
.headerBtn,
.back,
.nav a{
  border:1px solid var(--ui-btn-border)!important;
  background:linear-gradient(
    180deg,
    rgba(23,32,44,.96),
    rgba(15,23,33,.96)
  )!important;

  color:var(--ui-btn-text)!important;
  border-radius:8px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .10s ease,
    opacity .16s ease;

  cursor:pointer;
}


/* =========================================================
   2. HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine){
  button:not(.cpMarker15):not(.divMarker14):not(.eventHit):not(:disabled):hover,
  .headerBtn:hover,
  .back:hover,
  .nav a:hover{
    color:#edf6ff!important;

    border-color:var(--ui-btn-border-hover)!important;

    background:linear-gradient(
      180deg,
      rgba(31,45,61,.98),
      rgba(18,29,42,.98)
    )!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 12px rgba(71,145,235,.10)!important;
  }
}


/* =========================================================
   3. ACTIVE / SELECTED
   ========================================================= */

button.active:not(.cpMarker15):not(.divMarker14):not(.eventHit),
.tab.active,
.subtab.active,
.tabs button.active,
.targets button.active,
.drawbar button.active,
.researchTabs button.active,
.helpNav button.active,
.lang-switch button.active,
.langMenu button.active,
.paperTabs200 button.active,
.paperQuick200 button.active,
.spaceChoices button.active,
.headerBtn.active,

#selectBtn.active,
#drawBtn.active,
#indBtn.active,
#snapBtn.active,
#alertBtn.active{

  color:var(--ui-btn-text-active)!important;

  border-color:var(--ui-blue-border)!important;

  background:linear-gradient(
    180deg,
    rgba(101,167,255,.19),
    rgba(52,102,173,.11)
  )!important;

  box-shadow:
    inset 0 0 0 1px rgba(157,205,255,.055),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 14px var(--ui-blue-glow),
    0 0 28px rgba(71,145,235,.07)!important;
}


/* Existing indicator dot on major feature buttons */
#selectBtn.active::before,
#drawBtn.active::before,
#indBtn.active::before{
  background:var(--ui-blue)!important;

  box-shadow:
    0 0 7px rgba(101,167,255,.82),
    0 0 14px rgba(101,167,255,.34)!important;
}


/* =========================================================
   4. PRIMARY ACTION
   ========================================================= */

button.primary,
.primary{
  color:#f4f9ff!important;

  border-color:rgba(101,167,255,.58)!important;

  background:linear-gradient(
    180deg,
    rgba(72,139,230,.34),
    rgba(41,91,165,.25)
  )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 14px rgba(71,145,235,.13)!important;
}

button.primary:hover,
.primary:hover{
  border-color:rgba(120,184,255,.72)!important;

  background:linear-gradient(
    180deg,
    rgba(83,153,246,.40),
    rgba(44,101,184,.30)
  )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 18px rgba(71,145,235,.20)!important;
}


/* =========================================================
   5. PRESS / FOCUS
   ========================================================= */

button:not(.cpMarker15):not(.divMarker14):not(.eventHit):active,
.headerBtn:active,
.back:active,
.nav a:active{
  transform:translateY(1px);
}


button:focus-visible,
.headerBtn:focus-visible,
.back:focus-visible,
.nav a:focus-visible{
  outline:none!important;

  border-color:rgba(117,180,255,.78)!important;

  box-shadow:
    0 0 0 2px rgba(101,167,255,.11),
    0 0 16px rgba(71,145,235,.16)!important;
}


/* =========================================================
   6. DISABLED
   ========================================================= */

button:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  transform:none!important;
}


/* =========================================================
   7. SEMANTIC BUTTONS
   Keep meaning, same visual language
   ========================================================= */

/* Safe */
button.safe,
.safe{
  color:#91efbd!important;
  border-color:rgba(85,228,159,.35)!important;
  background:linear-gradient(
    180deg,
    rgba(85,228,159,.12),
    rgba(41,125,84,.09)
  )!important;
}

button.safe:hover,
.safe:hover{
  border-color:rgba(85,228,159,.55)!important;
  box-shadow:0 0 15px rgba(85,228,159,.11)!important;
}


/* Warning */
button.warn,
.warn{
  color:#f3d787!important;
  border-color:rgba(229,185,76,.34)!important;
  background:linear-gradient(
    180deg,
    rgba(229,185,76,.11),
    rgba(129,94,31,.08)
  )!important;
}

button.warn:hover,
.warn:hover{
  border-color:rgba(229,185,76,.52)!important;
  box-shadow:0 0 15px rgba(229,185,76,.10)!important;
}


/* Danger */
button.danger,
.danger,
button.danger-lite,
.danger-lite,
.logout-btn{
  color:#ff9cac!important;
  border-color:rgba(255,100,125,.34)!important;
  background:linear-gradient(
    180deg,
    rgba(255,100,125,.10),
    rgba(130,43,61,.09)
  )!important;
}

button.danger:hover,
.danger:hover,
button.danger-lite:hover,
.danger-lite:hover,
.logout-btn:hover{
  border-color:rgba(255,100,125,.55)!important;
  box-shadow:0 0 15px rgba(255,100,125,.11)!important;
}


/* =========================================================
   8. ICON-ONLY / CLOSE BUTTONS
   Do not turn X buttons into large pills
   ========================================================= */

.drawerHead button,
.modalHead button,
.modal-head button.icon,
#closeTools,
#closeResearch,
#closeCurveAlertModal{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.drawerHead button:hover,
.modalHead button:hover,
.modal-head button.icon:hover,
#closeTools:hover,
#closeResearch:hover,
#closeCurveAlertModal:hover{
  color:#fff!important;
  background:rgba(101,167,255,.09)!important;
  border-color:rgba(101,167,255,.18)!important;
  box-shadow:none!important;
}


/* =========================================================
   9. LOGIN
   ========================================================= */

.auth-card button[type="submit"]{
  min-height:46px;

  border:1px solid rgba(101,167,255,.58)!important;

  background:linear-gradient(
    180deg,
    rgba(72,139,230,.40),
    rgba(42,93,171,.30)
  )!important;

  color:#fff!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(71,145,235,.16)!important;
}


/* =========================================================
   10. SPECIAL GRAPH OBJECTS
   Explicitly preserve drawing/analysis marker geometry
   ========================================================= */

.cpMarker15,
.divMarker14,
.eventHit{
  transition:transform .15s ease;
}


/* =========================================================
   HEADER UI — unified navigation geometry
   ========================================================= */

/*
   Desktop / tablet header.
   All top navigation controls share the same physical height,
   typography and vertical alignment while keeping natural width.
*/
@media (min-width: 761px){

  .headerActions{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .headerActions .headerBtn{
    box-sizing:border-box!important;

    height:38px!important;
    min-height:38px!important;

    padding:0 11px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    font-size:12px!important;
    font-weight:500;
    line-height:1!important;

    white-space:nowrap;
    vertical-align:middle;
  }


  /* Language wrapper must occupy exactly the same row height */
  .headerActions .langWrap{
    height:38px;
    display:flex;
    align-items:stretch;
    flex:0 0 auto;
  }

  .headerActions .langWrap > .headerBtn{
    height:38px!important;
    min-height:38px!important;
  }


  /* Events is visually one composite control */
  .headerActions .eventHeadWrap{
    height:38px;
    display:flex;
    align-items:stretch;
    flex:0 0 auto;
  }

  .headerActions .eventHeadWrap > .headerBtn{
    height:38px!important;
    min-height:38px!important;
  }

  .headerActions .eventHeadWrap #eventsBtn{
    border-radius:8px 0 0 8px!important;
  }

  .headerActions .eventMenuBtn{
    width:30px!important;
    min-width:30px!important;

    padding:0!important;

    margin-left:-1px;

    border-radius:0 8px 8px 0!important;
  }


  /* <a> Account/Admin should behave exactly like buttons */
  .headerActions > a.headerBtn{
    height:38px!important;
    min-height:38px!important;

    text-decoration:none!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}


/* =========================================================
   ACTIVE BUTTONS — remove decorative indicator dots
   ========================================================= */

#selectBtn.active::before,
#drawBtn.active::before,
#indBtn.active::before{
  display:none!important;
  content:none!important;
}