html, body {
  height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed;
  background-position: center top;
}

:root{
  --bg0:#0b0f17;
  --bg1:#0f1723;
  --bg2:#0d1420;

  --panel: rgba(255,255,255,0.045);
  --panel2: rgba(255,255,255,0.065);
  --border: rgba(255,255,255,0.075);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --accent:#4aa3ff;



/* =========
   Brand vars (keep these at the top)
========= */

  --ost-bg:#060603;
  --ost-surface:#0E100C;
  --ost-border:#5C6157;

  --ost-green:#299120;
  --ost-green-700:#1E5920;

  --ost-orange:#EE9302;
  --ost-orange-700:#DC6C00;
    
  --ost-blue: #2D7FF9;        /* action / info */
  --ost-blue-700: #1E57C8;    /* hover/active */
  --ost-focus-blue: rgba(45,127,249,.35);
    
  /* Danger red */
  --ost-red: #E5484D;        /* readable “danger” red */
  --ost-red-700: #B2272D;    /* hover/active */
  --ost-focus-red: rgba(229,72,77,.35);
    
  --ost-red-soft: #FF767B;
    
  /* ASSIGNMENT -> Purple/indigo "state transition" */
  --ost-assignment: #B388FF;
  --ost-assignment-700: #8B5CF6;
  --ost-focus-assignment: rgba(179,136,255,.30);

    
    
  --ost-text:#E4E6E4;
  --ost-muted:#9EA299;
  --ost-dark:#5c5f58;

  --ost-focus: rgba(238,147,2,.35);
  --ost-shadow: rgba(0,0,0,.45);
    
  --ost-divider: rgba(255, 180, 80, 0.10);
  --ost-divider-strong: rgba(255, 180, 80, 0.16);
    
  --bs-secondary-rgb: 65, 65, 65;
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 960px !important;
    }
}


body{
  color: var(--text);
  background-color: var(--bg0);

  /* subtle “Snowball-ish” depth without spotlight */
  background-image:
    radial-gradient(900px 420px at 18% -10%, rgba(74,163,255,0.09), transparent 60%),
    radial-gradient(700px 360px at 88% 0%, rgba(120,97,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 40%, var(--bg0) 100%);
}


#sm_logo{
    height: 60px;
}


/* keep the page wrapper transparent so the body bg shows through */
#app, main, .app-shell, .container, .container-fluid {
  background: transparent !important;
}

/* make cards/panels look like Snowball */
.card, .app-card, .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}



/* If you have a wrapper like .app-shell or main container, keep it transparent */
.app-shell, main, #app {
  background: transparent;
}


.app-bg{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(42,108,255,.12), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(32,200,255,.10), transparent 55%),
              var(--bg);
  color: var(--text);
}

.app-nav{
  background: linear-gradient(180deg, rgba(35,43,60,.85), rgba(35,43,60,.55));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}


.navbar {
  background: rgba(10, 14, 22, 0.72) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.navbar .nav-link{
  color: rgba(232,237,247,.72);
  border-radius: 10px;
  padding: .45rem .75rem;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.navbar .nav-link.active{
  background: rgba(42,108,255,.18);
  color: var(--text);
  border: 1px solid rgba(42,108,255,.25);
}

.app-chip{
  border-radius: 12px;
  border-color: rgba(255,255,255,.12);
}

.app-scope .app-pill{
  border-radius: 999px;
  padding: .35rem .8rem;
}
.app-scope .app-pill.active{
  background: rgba(42,108,255,.22);
  border-color: rgba(42,108,255,.35);
}

.card.app-card{
  background: linear-gradient(180deg, rgba(35,43,60,.92), rgba(35,43,60,.75));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.table.app-table{
  color: var(--text);
}
.table.app-table thead th{
  color: rgba(232,237,247,.62);
  font-weight: 600;
  border-bottom-color: rgba(255,255,255,.06);
}
.table.app-table td{
  border-bottom-color: rgba(255,255,255,.06);
}
.table.app-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

.badge.app-badge{
  border-radius: 999px;
  font-weight: 600;
}
.text-good{ color: var(--good) !important; }
.text-bad{ color: var(--bad) !important; }
.text-muted2{ color: var(--muted) !important; }

th.sort-th { cursor: pointer; user-select: none; }
th.sort-th:hover { text-decoration: underline; }



/* =========
   Base helpers
========= */
.ost-bg        { background: var(--ost-bg) !important; color: var(--ost-text) !important; }
.ost-surface   { background: var(--ost-surface) !important; color: var(--ost-text) !important; }
.ost-text      { color: var(--ost-text) !important; }
.ost-muted     { color: var(--ost-muted) !important; }
.ost-dark     { color: var(--ost-dark) !important; }

.ost-border    { border: 1px solid rgba(92,97,87,.55) !important; }

.ost-text-success  { color: var(--ost-green) !important; }
.ost-text-warning  { color: var(--ost-orange) !important; }
.ost-text-danger   { color: var(--ost-red) !important; }


.ost-shadow    { box-shadow: 0 10px 30px var(--ost-shadow) !important; }

.ost-link,
.ost-link:link,
.ost-link:visited,
.ost-link:active {
  color: var(--ost-orange) !important;
  text-decoration: none;
  font-weight: 700;
}
.ost-link:hover,
.ost-link:focus-visible {
  color: #ffb53a !important;
  text-decoration: underline;
}
.ost-link:focus-visible {
  outline: 2px solid var(--ost-focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.ost-link .material-symbols-outlined,
.ost-link .material-icons,
.ost-link-icon {
  color: inherit;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.12em;
}

.ost-ident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}

.ost-symbol-chip {
  display: inline-flex;
  align-items: center;
  padding: .24rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ost-text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.ost-table .ost-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* =========
   Cards / panels
========= */
.ost-card{
  background: var(--ost-surface);
  color: var(--ost-text);
  border: 1px solid rgba(92,97,87,.55);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
}
.ost-card-header{
  border-bottom: 1px solid rgba(92,97,87,.45);
  padding: .85rem 1rem;
}
.ost-card-body{ padding: 1rem; }
.ost-card-footer {
  padding: 0.75rem 1rem;                 /* similar to BS card-footer */
  border-top: 1px solid var(--ost-border, rgba(255,255,255,.08));
  background: var(--ost-card-footer-bg, rgba(255,255,255,.02));
  color: var(--ost-muted, rgba(255,255,255,.65));
  font-size: 0.875rem;
}
.ost-card > .ost-card-footer {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.ost-card-footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.ost-card-footer a {
  color: var(--ost-link, var(--ost-orange, #f59e0b));
  text-decoration: none;
}
.ost-card-footer a:hover {
  text-decoration: underline;
}
.ost-card-success {
    border: 1px solid var(--ost-green) !important;
    background-color: #031801;
}
.ost-card-danger {
    border: 1px solid var(--ost-red) !important;
    background-color: #340103;
}
.ost-card-warning {
    border: 1px solid var(--ost-orange) !important;
    background-color: #201001;
}
.ost-card-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.ost-card-link:hover {
    transform: translateY(-1px);
}



/* =========================
   FORCE Bootstrap button overrides (brand-mapped)
========================= */
.btn-ost{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight: 600;
  border-radius: 12px;
  padding: .55rem .9rem;
  border: 1px solid transparent;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-ost:active{ transform: translateY(1px); }

.btn-ost:focus,
.btn-ost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem var(--ost-focus);
}

/* Primary (Orange) */
.btn-primary{
  background: var(--ost-orange) !important;
  color: #101010 !important;
  border-color: rgba(238,147,2,.75) !important;
}
.btn-primary:hover{
  background: var(--ost-orange-700) !important;
  border-color: rgba(220,108,0,.9) !important;
  color: #0B0B0B !important;
}

/* Success (Green) */
.btn-success{
  background: var(--ost-green) !important;
  color: #071007 !important;
  border-color: rgba(41,145,32,.75) !important;
}
.btn-success:hover{
  background: var(--ost-green-700) !important;
  border-color: rgba(30,89,32,.9) !important;
  color: #050D05 !important;
}

/* Outline */
.btn-outline{
  background: transparent !important;
  color: var(--ost-text) !important;
  border-color: rgba(92,97,87,.70) !important;
}
.btn-outline:hover{
  background: rgba(228,230,228,.06) !important;
  border-color: rgba(238,147,2,.65) !important;
}

/* Ghost (subtle) */
.btn-ghost{
  background: rgba(228,230,228,.06) !important;
  color: var(--ost-text) !important;
  border-color: rgba(92,97,87,.45) !important;
}
.btn-ghost:hover{
  background: rgba(238,147,2,.10) !important;
  border-color: rgba(238,147,2,.55) !important;
}

/* Danger-ish (still on brand; uses orange) */
.btn-warn{
  background: rgba(238,147,2,.12) !important;
  color: var(--ost-orange) !important;
  border-color: rgba(238,147,2,.55) !important;
}
.btn-warn:hover{
  background: rgba(238,147,2,.20) !important;
  border-color: rgba(238,147,2,.80) !important;
}

/* PRIMARY -> Blue (general action) */
.btn-outline-primary{
  --bs-btn-color: var(--ost-blue) !important;
  --bs-btn-border-color: rgba(45,127,249,.55) !important;
  --bs-btn-hover-color: #0b0b0b !important;
  --bs-btn-hover-bg: var(--ost-blue) !important;
  --bs-btn-hover-border-color: rgba(45,127,249,.85) !important;
  --bs-btn-focus-shadow-rgb: 45,127,249 !important;
  --bs-btn-active-color: #0b0b0b !important;
  --bs-btn-active-bg: var(--ost-blue-700) !important;
  --bs-btn-active-border-color: rgba(30,87,200,.95) !important;

  color: var(--ost-blue) !important;
  border-color: rgba(45,127,249,.55) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover{
  color: #0b0b0b !important;
  background-color: var(--ost-blue) !important;
  border-color: rgba(45,127,249,.85) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible{
  box-shadow: 0 0 0 .25rem var(--ost-focus-blue) !important;
}


/* WARNING -> Softer orange “caution” */
.btn-outline-warning{
  --bs-btn-color: #FFD08A !important;
  --bs-btn-border-color: rgba(238,147,2,.35) !important;
  --bs-btn-hover-color: #101010 !important;
  --bs-btn-hover-bg: rgba(238,147,2,.75) !important;
  --bs-btn-hover-border-color: rgba(238,147,2,.75) !important;
  --bs-btn-focus-shadow-rgb: 238,147,2 !important;
  --bs-btn-active-color: #101010 !important;
  --bs-btn-active-bg: rgba(238,147,2,.95) !important;
  --bs-btn-active-border-color: rgba(238,147,2,.95) !important;
  --bs-btn-disabled-color: rgba(255,208,138,.55) !important;
  --bs-btn-disabled-border-color: rgba(238,147,2,.25) !important;

  color: #FFD08A !important;
  border-color: rgba(238,147,2,.35) !important;
  background-color: transparent !important;
}

.btn-outline-warning:hover{
  color: #101010 !important;
  background-color: rgba(238,147,2,.75) !important;
  border-color: rgba(238,147,2,.75) !important;
}

.btn-outline-warning:active,
.btn-outline-warning.active{
  color: #101010 !important;
  background-color: rgba(238,147,2,.95) !important;
  border-color: rgba(238,147,2,.95) !important;
}

.btn-outline-warning:focus,
.btn-outline-warning:focus-visible{
  box-shadow: 0 0 0 .25rem var(--ost-focus) !important;
}


/* DANGER -> RED “don’t do it” */
.btn-outline-danger{
  --bs-btn-color: var(--ost-red) !important;
  --bs-btn-border-color: rgba(229,72,77,.60) !important;
  --bs-btn-hover-color: #0b0b0b !important;
  --bs-btn-hover-bg: var(--ost-red) !important;
  --bs-btn-hover-border-color: rgba(229,72,77,.90) !important;
  --bs-btn-focus-shadow-rgb: 229,72,77 !important;
  --bs-btn-active-color: #0b0b0b !important;
  --bs-btn-active-bg: var(--ost-red-700) !important;
  --bs-btn-active-border-color: rgba(178,39,45,.95) !important;

  color: var(--ost-red) !important;
  border-color: rgba(229,72,77,.60) !important;
  background-color: transparent !important;
}
.btn-outline-danger:hover{
  color:#0b0b0b !important;
  background-color: var(--ost-red) !important;
  border-color: rgba(229,72,77,.90) !important;
}
.btn-outline-danger:focus,
.btn-outline-danger:focus-visible{
  box-shadow: 0 0 0 .25rem var(--ost-focus-red) !important;
}



/*  SUCCESS outline -> Green (nice for “Add Transaction”) */
.btn-outline-success{
  --bs-btn-color: #9DF29A !important;
  --bs-btn-border-color: rgba(41,145,32,.55) !important;
  --bs-btn-hover-color: #071007 !important;
  --bs-btn-hover-bg: rgba(41,145,32,.85) !important;
  --bs-btn-hover-border-color: rgba(41,145,32,.90) !important;
  --bs-btn-focus-shadow-rgb: 41,145,32 !important;
  --bs-btn-active-color: #071007 !important;
  --bs-btn-active-bg: rgba(30,89,32,.95) !important;
  --bs-btn-active-border-color: rgba(30,89,32,.95) !important;

  color: #9DF29A !important;
  border-color: rgba(41,145,32,.55) !important;
  background-color: transparent !important;
}

.btn-outline-success:hover{
  color: #071007 !important;
  background-color: rgba(41,145,32,.85) !important;
  border-color: rgba(41,145,32,.90) !important;
}

.btn-outline-success:focus,
.btn-outline-success:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(41,145,32,.30) !important;
}

.btn-outline-assignment{
  --bs-btn-color: var(--ost-assignment) !important;
  --bs-btn-border-color: rgba(179,136,255,.55) !important;
  --bs-btn-hover-color: #0b0b0b !important;
  --bs-btn-hover-bg: var(--ost-assignment) !important;
  --bs-btn-hover-border-color: rgba(179,136,255,.85) !important;
  --bs-btn-focus-shadow-rgb: 179,136,255 !important;
  --bs-btn-active-color: #0b0b0b !important;
  --bs-btn-active-bg: var(--ost-assignment-700) !important;
  --bs-btn-active-border-color: rgba(139,92,246,.95) !important;
  --bs-btn-disabled-color: rgba(179,136,255,.55) !important;
  --bs-btn-disabled-border-color: rgba(179,136,255,.25) !important;

  color: var(--ost-assignment) !important;
  border-color: rgba(179,136,255,.55) !important;
  background-color: transparent !important;
}

.btn-outline-assignment:hover{
  color: #0b0b0b !important;
  background-color: var(--ost-assignment) !important;
  border-color: rgba(179,136,255,.85) !important;
}

.btn-outline-assignment:active,
.btn-outline-assignment.active{
  color: #0b0b0b !important;
  background-color: var(--ost-assignment-700) !important;
  border-color: rgba(139,92,246,.95) !important;
}

.btn-outline-assignment:focus,
.btn-outline-assignment:focus-visible{
  box-shadow: 0 0 0 .25rem var(--ost-focus-assignment) !important;
}

/* Small icon helper for Material Symbols inside buttons */
.ost-btn-icon{
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: -3px !important;
  margin-right: 2px !important;
}


/* =========
   Badges / chips
========= */
.ost-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid rgba(92,97,87,.45);
  background: rgba(228,230,228,.06);
  color: var(--ost-text);
}
.ost-badge--green{
  background: rgba(41,145,32,.16);
  border-color: rgba(41,145,32,.55);
  color: #9DF29A;
}
.ost-badge--orange{
  background: rgba(238,147,2,.16);
  border-color: rgba(238,147,2,.55);
  color: #FFD08A;
}
.ost-badge--purple{
  background: color-mix(in srgb, var(--ost-assignment) 16%, transparent);
  border-color: color-mix(in srgb, var(--ost-assignment) 55%, transparent);
  color: #D9C2FF;
}

.ost-badge--muted{
  background: rgba(158,162,153,.10);
  border-color: rgba(92,97,87,.45);
  color: var(--ost-muted);
}

.ost-badge--danger{
  background: rgba(229,72,77,.16) !important;
  border-color: rgba(229,72,77,.55) !important;
  color: #FFB3B6 !important;
}

.ost-badge--oversold{
  background: rgba(229,72,77,.20) !important;
  border-color: rgba(229,72,77,.70) !important;
  color: #FFD0D2 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* =========
   Tables (nice on dark)
========= */
.ost-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ost-surface);
  color: var(--ost-text);
  border: 1px solid rgba(92,97,87,.55);
  border-radius: 0px;
  overflow: hidden;
}
.ost-table th,
.ost-table td{
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(92,97,87,.35);
}
.ost-table th{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ost-muted);
  background: rgba(228,230,228,.04);
}
.ost-table tr:hover td{
  background: rgba(238,147,2,.06);
}
/* Make tables inside ost-cards go edge-to-edge */
.ost-card .ost-table {
  width: 100%;
  margin: 0;
}

/* Optional: ensure responsive wrapper doesn't introduce padding */
.ost-card .table-responsive {
  padding: 0;
}

/* Use box-shadow so it doesn't get border-collapse artifacts */
.ost-col-divider {
  box-shadow: inset 1px 0 0 var(--ost-divider) !important;
}

/* Slightly stronger divider for header group row */
.ost-col-divider-strong {
  box-shadow: inset 1px 0 0 var(--ost-divider-strong) !important;
}

/* Add a clean bottom rule under the header section */
.ost-thead-rule th {
  border-bottom: 1px solid var(--ost-divider-strong) !important;
}

/* Make the first column sticky inside horizontal scroll */
.ost-sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;                /* above normal cells */
  background: rgba(10,10,10,.95); /* match your table bg so text stays readable */
  min-width: 100px;
  text-align: center !important;
}

.ost-sticky-col{
  position: sticky;
  left: 0;
  z-index: 4;
  background: rgba(10,10,10,.98); /* match your table bg */
  box-shadow: 1px 0 0 rgba(255,255,255,.10);
}

/* header layer above body */
thead .ost-sticky-col{
  z-index: 6;
}
.ost-table-scroll{
  overflow-x: auto;
  position: relative; /* important for sticky */
  /* optional: */
  max-width: 100%;
}
/* =========
   Forms (inputs/selects)
========= */
.ost-input,
.ost-select,
.ost-textarea{
  background: rgba(228,230,228,.06);
  color: var(--ost-text);
  border: 1px solid rgba(92,97,87,.65);
  border-radius: 12px;
  padding: .55rem .75rem;
}
.ost-input::placeholder,
.ost-textarea::placeholder{ color: rgba(158,162,153,.8); }

.ost-input:focus,
.ost-select:focus,
.ost-textarea:focus{
  outline: none;
  border-color: rgba(238,147,2,.75);
  box-shadow: 0 0 0 .25rem var(--ost-focus);
}

/* =========
   Scope pills (7D / 30D / YTD / All)
========= */
.ost-scope{
  display: inline-flex;
  gap: .45rem;
  align-items: center;
}

.ost-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(235,235,235,0.75) !important;
  text-decoration: none !important;
  user-select: none;
}

.ost-pill:hover{
  background: rgba(238,147,2,0.12) !important;
  border-color: rgba(238,147,2,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
}

.ost-pill.active,
.ost-pill[aria-current="page"]{
  background: rgba(238,147,2,0.22) !important;
  border-color: rgba(238,147,2,0.85) !important;
  color: rgba(255,214,160,0.95) !important;
}

/* Optional: gives the cashflow cards a little structure */
.ost-cashflow .ost-card-body {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.ost-cashflow .fs-4 {
  letter-spacing: 0.2px;
}


/* =========
   Tiny utility: P/L coloring
========= */
.ost-pos{ color: #9DF29A !important; }
.ost-neg{ color: var(--ost-red-soft, var(--ost-red)) !important; }
.ost-pos-dark{ color: var(--ost-green-700) !important; }
.ost-neg-dark{ color: var(--ost-red-700) !important; }


/* special divs */
.ost-overflow-scroll-325{
    max-height: 325px;
    overflow: auto;
}
.ost-overflow-scroll-500{
    max-height: 500px;
    overflow: auto;
}


/* bar display */
.ost-mini-bar {
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
    flex: 0 0 56px;
}

.ost-mini-bar-fill {
    height: 100%;
    border-radius: 999px;
}

.ost-mini-bar-fill.is-positive {
    background: var(--ost-green-700, #22c55e) !important;
}

.ost-mini-bar-fill.is-negative {
    background: var(--ost-red-700, #ef4444) !important;
}

.ost-sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ost-sort-link:hover {
    text-decoration: none;
    color: inherit;
    opacity: .92;
}

.ost-sort-icon {
    font-size: 0.8em;
    opacity: 0.7;
}

/* =========================================
   Strategy snapshot / action-row helpers
========================================= */

.btn-outline-assignment{
  --bs-btn-color: var(--ost-assignment) !important;
  --bs-btn-border-color: rgba(179,136,255,.55) !important;
  --bs-btn-hover-color: #0b0b0b !important;
  --bs-btn-hover-bg: var(--ost-assignment) !important;
  --bs-btn-hover-border-color: rgba(179,136,255,.85) !important;
  --bs-btn-focus-shadow-rgb: 179,136,255 !important;
  --bs-btn-active-color: #0b0b0b !important;
  --bs-btn-active-bg: var(--ost-assignment-700) !important;
  --bs-btn-active-border-color: rgba(139,92,246,.95) !important;
  --bs-btn-disabled-color: rgba(179,136,255,.55) !important;
  --bs-btn-disabled-border-color: rgba(179,136,255,.25) !important;

  color: var(--ost-assignment) !important;
  border-color: rgba(179,136,255,.55) !important;
  background-color: transparent !important;
}

.btn-outline-assignment:hover{
  color: #0b0b0b !important;
  background-color: var(--ost-assignment) !important;
  border-color: rgba(179,136,255,.85) !important;
}

.btn-outline-assignment:active,
.btn-outline-assignment.active{
  color: #0b0b0b !important;
  background-color: var(--ost-assignment-700) !important;
  border-color: rgba(139,92,246,.95) !important;
}

.btn-outline-assignment:focus,
.btn-outline-assignment:focus-visible{
  box-shadow: 0 0 0 .25rem var(--ost-focus-assignment) !important;
}

.ost-btn-icon{
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: -3px !important;
  margin-right: 2px !important;
}

.ost-action-row{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.ost-action-row .btn{
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}

.ost-subpanel{
  border: 1px solid rgba(92,97,87,.55);
  border-radius: 12px;
  background: rgba(255,255,255,.015);
  overflow: hidden;
}

.ost-subpanel-header{
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(92,97,87,.45);
  color: var(--ost-muted);
  font-size: .92rem;
}

.ost-subpanel-body{
  padding: .9rem;
}

/* PMCC / wheel snapshot row layout */
.ost-detail-stack{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ost-subpanel-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main aside"
    "helper helper";
  align-items: start;
  gap: .65rem 1rem;
  padding: 1rem 0;
}

.ost-subpanel-row + .ost-subpanel-row{
  border-top: 1px solid rgba(255,255,255,.08);
}

.ost-subpanel-row__main{
  grid-area: main;
  min-width: 0;
}

.ost-subpanel-row__aside{
  grid-area: aside;
  display: flex;
  justify-content: flex-end;
  align-items: start;
  min-width: 220px;
}

.ost-subpanel-row__aside .ost-action-row{
  justify-content: flex-end;
}

.ost-subpanel-row__aside .btn{
  white-space: nowrap;
}

.ost-subpanel-row__helper{
  grid-area: helper;
  color: rgba(255,255,255,.92);
  line-height: 1.45;
  margin-top: -.1rem;
}

@media (max-width: 1199.98px){
  .ost-subpanel-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "aside"
      "helper";
  }

  .ost-subpanel-row__aside{
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .ost-subpanel-row__aside .ost-action-row{
    justify-content: flex-start;
  }
}

.ost-card-header .btn-link{
  color: var(--ost-blue) !important;
}

.ost-card-header .btn-link:hover{
  color: #7bb4ff !important;
}

.ost-card-header .material-symbols-outlined{
  font-size: 2rem;
  line-height: 1;
}

@media (max-width: 991.98px){
  .ost-action-row{
    justify-content: flex-start !important;
  }
}
/* =========================================
   Global button consistency helpers
========================================= */

.ost-btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.ost-btn-row--end{
  justify-content: flex-end;
}

.ost-btn-row .btn{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ost-btn-row form{
  display: inline;
  margin: 0;
}

.ost-btn-sm{
  padding: .38rem .7rem !important;
  border-radius: 10px !important;
}

.ost-btn-icon{
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: -3px !important;
  margin-right: 2px !important;
}

/* Muted secondary outline */
.btn-outline-secondary{
  --bs-btn-color: var(--ost-muted) !important;
  --bs-btn-border-color: rgba(92,97,87,.70) !important;
  --bs-btn-hover-color: #101010 !important;
  --bs-btn-hover-bg: #9EA299 !important;
  --bs-btn-hover-border-color: rgba(158,162,153,.90) !important;
  --bs-btn-focus-shadow-rgb: 158,162,153 !important;
  --bs-btn-active-color: #101010 !important;
  --bs-btn-active-bg: #878C83 !important;
  --bs-btn-active-border-color: rgba(135,140,131,.95) !important;

  color: var(--ost-muted) !important;
  border-color: rgba(92,97,87,.70) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover{
  color: #101010 !important;
  background-color: #9EA299 !important;
  border-color: rgba(158,162,153,.90) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(158,162,153,.22) !important;
}

/* Optional subtle dark card wrapper for page-top action groups */
.ost-page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 991.98px){
  .ost-page-actions{
    justify-content: flex-start;
    margin-top: .75rem;
  }

  .ost-btn-row--end{
    justify-content: flex-start;
  }
}
.ost-btn-row--tight{
  gap: .25rem !important;
  flex-wrap: nowrap !important;
}

.ost-btn-row--tight .btn{
  padding: .22rem .5rem !important;
  white-space: nowrap !important;
}

.ost-btn-row--tight .ost-btn-icon{
  font-size: 15px !important;
  margin-right: 1px !important;
}

.ost-chart-box {
    padding: .85rem 1rem .6rem;
  }

  .ost-chart-canvas-wrap {
    position: relative;
    height: 230px;
  }

  .ost-chart-canvas-wrap--compact {
    position: relative;
    height: 180px;
  }

  .ost-chart-note {
    color: var(--ost-muted);
    font-size: .85rem;
    margin-top: .45rem;
  }

  .ost-analytics-kpi {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .55rem;
    font-size: .9rem;
  }

  .ost-analytics-kpi span {
    color: var(--ost-muted);
  }

  .ost-progress-shell {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
    margin-top: .35rem;
  }

  .ost-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(22,199,132,.65) 0%, rgba(43,255,136,.95) 100%);
  }

  .ost-breakdown-kpi {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: .8rem;
    padding-top: .8rem;
  }

  .ost-mini-kpis {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: .9rem;
    padding-top: .85rem;
  }

  .ost-mini-kpi {
    padding: .5rem 0;
  }

  .ost-mini-kpi .label {
    color: var(--ost-muted);
    font-size: .82rem;
    margin-bottom: .15rem;
  }

  .ost-mini-kpi .value {
    font-size: 1.05rem;
    font-weight: 600;
  }

/* =========================================
   MODALS / ALERTS / CODE BLOCKS
========================================= */
.ost-text-info { color: var(--ost-blue) !important; }

.ost-modal {
  background: linear-gradient(180deg, rgba(19,23,17,.98), rgba(14,16,12,.98)) !important;
  color: var(--ost-text) !important;
  border: 1px solid var(--ost-border-soft) !important;
  border-radius: 16px !important;
  box-shadow: var(--ost-shadow-2);
}

.ost-modal-header,
.ost-modal-footer {
  border-color: var(--ost-border-soft) !important;
  background: rgba(255,255,255,.02);
}

.ost-modal-body {
  background: transparent;
}

.ost-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .75;
}

.ost-modal .btn-close:hover {
  opacity: 1;
}

.ost-alert {
  border-radius: 12px;
  padding: .7rem .9rem;
  border: 1px solid var(--ost-border-soft);
  font-size: .95rem;
}

.ost-alert--info {
  background: rgba(45,127,249,.12);
  border-color: rgba(45,127,249,.40);
  color: #cfe0ff;
}

.ost-alert--warning {
  background: rgba(238,147,2,.12);
  border-color: rgba(238,147,2,.45);
  color: #ffd9a2;
}

.ost-alert--danger {
  background: rgba(229,72,77,.12);
  border-color: rgba(229,72,77,.45);
  color: #ffc1c4;
}

.ost-code-block {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 220px;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ost-border-soft);
  background: rgba(0,0,0,.28);
  color: #a7c8ff;
  font-size: .9rem;
  line-height: 1.45;
}

/* =========================
   Close-now snapshot
========================= */
.ost-close-now-card {
  border-color: rgba(255,255,255,.08);
}

.ost-close-now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .85rem;
}

.ost-close-now-metric {
  padding: .8rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.ost-close-now-metric__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ost-muted);
  margin-bottom: .3rem;
}

.ost-close-now-metric__value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

/* =========
   Vertical detail: expiration profit / loss zone map
========= */
.vertical-zone-card {
  overflow: hidden;
}

.vertical-zone-chart {
  padding: .25rem 0 0;
}

.vertical-zone-band-wrap {
  position: relative;
  min-height: 230px;
  padding: 1rem 1rem 5.75rem;
}

.vertical-zone-band {
  position: relative;
  height: 100px;
  border: 1px solid rgba(92,97,87,.68);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 24px rgba(0,0,0,.25);
}

.vertical-zone-segment {
  position: absolute;
  inset-block: 0;
  min-width: 2px;
}

.vertical-zone-segment--loss {
  background: linear-gradient(90deg, rgba(229,72,77,.26), rgba(229,72,77,.14));
}

.vertical-zone-segment--transition {
  background: linear-gradient(90deg, rgba(238,147,2,.27), rgba(238,147,2,.15));
}

.vertical-zone-segment--profit {
  background: linear-gradient(90deg, rgba(41,145,32,.17), rgba(41,145,32,.32));
}

.vertical-zone-segment-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .2rem;
  padding: .65rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}

.vertical-zone-segment-label small {
  color: rgba(228,230,228,.78);
  font-weight: 600;
}

.vertical-zone-segment--loss .vertical-zone-segment-label { color: #FFB3B6; }
.vertical-zone-segment--transition .vertical-zone-segment-label { color: #FFD08A; }
.vertical-zone-segment--profit .vertical-zone-segment-label { color: #9DF29A; }

.vertical-zone-axis {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(1rem + 100px);
  height: 44px;
  border-top: 2px solid rgba(228,230,228,.74);
}

.vertical-zone-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: rgba(228,230,228,.76);
  font-size: .78rem;
  white-space: nowrap;
}

.vertical-zone-tick span {
  display: block;
  width: 1px;
  height: 11px;
  margin: 0 auto .25rem;
  background: rgba(228,230,228,.72);
}

.vertical-zone-marker {
  position: absolute;
  top: .55rem;
  bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  min-width: 92px;
  pointer-events: none;
}

.vertical-zone-marker > span {
  display: block;
  width: 2px;
  height: calc(100% - 40px);
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.vertical-zone-marker > span::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-4px, 94px);
  box-shadow: 0 0 12px currentColor;
}

.vertical-zone-marker div {
  margin-top: .45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

.vertical-zone-marker strong {
  font-size: .74rem;
  font-weight: 800;
}

.vertical-zone-marker small {
  font-size: .78rem;
  font-weight: 700;
}

.vertical-zone-marker--long { color: var(--ost-red); }
.vertical-zone-marker--be { color: var(--ost-orange); }
.vertical-zone-marker--short { color: var(--ost-text); }
.vertical-zone-marker--spot {
  top: -.05rem;
  color: var(--ost-blue);
}

.vertical-zone-marker--spot div {
  margin-top: .2rem;
}

.vertical-zone-marker--spot strong,
.vertical-zone-marker--spot small {
  color: #62A8FF;
}

.vertical-zone-metric {
  border: 1px solid rgba(92,97,87,.48);
  background: rgba(255,255,255,.025);
  border-radius: 12px;
  padding: .95rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.vertical-zone-read {
  border: 1px solid rgba(92,97,87,.45);
  background: rgba(255,255,255,.025);
  border-radius: 12px;
  padding: .9rem 1rem;
}

@media (max-width: 991.98px) {
  .vertical-zone-band-wrap {
    overflow-x: auto;
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .vertical-zone-band,
  .vertical-zone-axis {
    min-width: 860px;
  }

  .vertical-zone-axis {
    left: .25rem;
    right: auto;
    width: 860px;
  }
}

/* =========
   Vertical detail: live option mark summary
========= */
.vertical-mark-card {
  overflow: hidden;
}

.vertical-mark-leg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.vertical-mark-leg {
  border: 1px solid rgba(92,97,87,.45);
  background: rgba(255,255,255,.025);
  border-radius: 12px;
  padding: .9rem 1rem;
}

@media (max-width: 767.98px) {
  .vertical-mark-leg-grid {
    grid-template-columns: 1fr;
  }
}

/* =========
   Strategy detail: live option marks for PMCC / Wheel
========= */
.option-marks-card {
  overflow: hidden;
}

.option-mark-metric {
  border: 1px solid rgba(92,97,87,.48);
  background: rgba(255,255,255,.025);
  border-radius: 12px;
  padding: .95rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.option-marks-table td,
.option-marks-table th {
  white-space: nowrap;
}

.option-marks-table td:first-child,
.option-marks-table th:first-child {
  white-space: normal;
  min-width: 220px;
}

/* =========
   Option quote quality / bid-ask spread warnings
========= */
.option-spread-badge {
  font-size: .68rem;
  padding: .18rem .45rem;
  margin-top: .22rem;
  white-space: nowrap;
}

.option-quote-warning {
  border: 1px solid rgba(238,147,2,.45);
  background: rgba(238,147,2,.08);
  border-radius: 12px;
  padding: .8rem .95rem;
}

.option-quote-warning .material-symbols-outlined {
  font-size: 20px;
  line-height: 1.2;
  margin-top: .05rem;
}