/* ==========================================================================
   Bootstrap 4 -> 5 compatibility shim (SUSCO)
   Re-declares BS4 class names that BS5 removed/renamed, so existing markup
   keeps its BS4 appearance under Bootstrap 5.3.8 without editing every page.
   Load AFTER bootstrap_5.3.8.min.css.
   Only classes actually present on the site (+ cheap safe utilities).
   ========================================================================== */

/* --- Modal / alert close button (BS4 `.close`; BS5 uses `.btn-close`) ------ */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.close:hover {
  color: #000;
  text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* BS4 header layout (BS5 switched to align-items:center, which floated the
   ekko-lightbox close button ~25px up out of its 1px-tall header). */
.modal-header {
  align-items: flex-start;
  justify-content: space-between;
}
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

/* --- Text alignment (BS4 left/right -> BS5 start/end) ---------------------- */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* --- Float (BS4 left/right -> BS5 start/end) ------------------------------- */
.float-left  { float: left  !important; }
.float-right { float: right !important; }

/* --- Font weight (BS4 font-weight-* -> BS5 fw-*) --------------------------- */
.font-weight-light   { font-weight: 300 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-bold    { font-weight: 700 !important; }
.font-weight-bolder  { font-weight: bolder !important; }

/* --- BS5 .row > * forces width:100% on EVERY direct child of .row (BS4 did
   not). Non-column children put directly in a .row (e.g. absolutely-positioned
   decorative images) then get stretched. Restore natural sizing for images. - */
.row > img {
  width: auto;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}

/* Custom flex layout that also carries the .row class (children are sized by
   their own CSS, not Bootstrap columns) — keep BS5 from stretching them. */
.finance-statement-download.row > * {
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}

/* --- Grid gutters (BS4 -> BS5) -------------------------------------------- */
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col,
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

/* --- Navbar link colors. BS4 (no .navbar-light on our menu) set NO color on
   .nav-link, so links took site `a{#000}` / `a:hover{#5d5d5d}` and
   style-menu.css `.nav-link.active{#0079c2}`. BS5 forces
   `.navbar-nav .nav-link{color:65% gray}` + `.active/.show{emphasis}` at
   higher specificity, overriding all three. Restore prod (BS4) colors. ---- */
.navbar-nav .nav-link,
.navbar-nav .nav-link.show { color: #000000; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: #5d5d5d; }
.navbar-nav .nav-link.active { color: #0079c2; }

/* --- Textarea height (BS4 `textarea.form-control{height:auto}`; BS5 dropped
   it, so site CSS `.form-control{height:45px}` squashed every textarea and
   ignored rows="8"). ------------------------------------------------------- */
textarea.form-control { height: auto; }

/* --- Card deck (BS4 `.card-deck`; removed in BS5). news_public.asp puts
   col-lg-4 items directly in .card-deck -> without flex they stack 1/row.
   BS5 cols outside a .row also lose their 15px gutter, so restore it. ----- */
.card-deck .card { margin-bottom: 15px; }
.card-deck > [class*="col-"] { padding-right: 15px; padding-left: 15px; }
@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

/* --- Form group (BS4 `.form-group`; removed in BS5) ----------------------- */
.form-group { margin-bottom: 1rem; }

/* --- Vue widgets (calculator / major): BS4 `.row` children WITHOUT a col
   class were content-sized flex items; BS5 `.row > *{width:100%}` stacks
   them (investment-type radios "จำนวนหุ้น | จำนวนเงิน" went 1 per line).
   Scoped to #vue-app so non-widget pages keep current behaviour. --------- */
#vue-app .row > :not([class*="col"]) {
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

/* --- Custom radio / checkbox (BS4 `.custom-control*`; BS5 -> .form-check).
   Used by calculator + major Vue widgets and stock_quote.asp. Verbatim BS4
   4.4.1 rules (data: SVG icons are allowed by CSP img-src 'data:'). ------- */
.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-inline { display: inline-flex; margin-right: 1rem; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: #007bff; background-color: #007bff; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #80bdff; }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #fff; background-color: #b3d7ff; border-color: #b3d7ff; }
.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label { color: #6c757d; }
.custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-input[disabled] ~ .custom-control-label::before { background-color: #e9ecef; }
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }
.custom-control-label::before {
  position: absolute; top: .25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem;
  pointer-events: none; content: ""; background-color: #fff; border: #adb5bd solid 1px;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.custom-control-label::after {
  position: absolute; top: .25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem;
  content: ""; background: no-repeat 50% / 50% 50%;
}
@media (prefers-reduced-motion: reduce) { .custom-control-label::before { transition: none; } }
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0,123,255,.5); }
.custom-checkbox .custom-control-label::before { border-radius: .25rem; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: #007bff; background-color: #007bff; }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0,123,255,.5); }

/* --- Full-width button (BS4 .btn-block -> BS5 d-grid) --------------------- */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }

/* --- Directional spacing utilities (BS4 l/r -> BS5 s/e) -------------------
   Spacer scale: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem            */
.ml-0 { margin-left: 0     !important; } .mr-0 { margin-right: 0     !important; }
.ml-1 { margin-left: .25rem!important; } .mr-1 { margin-right: .25rem!important; }
.ml-2 { margin-left: .5rem !important; } .mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem  !important; } .mr-3 { margin-right: 1rem  !important; }
.ml-4 { margin-left: 1.5rem!important; } .mr-4 { margin-right: 1.5rem!important; }
.ml-5 { margin-left: 3rem  !important; } .mr-5 { margin-right: 3rem  !important; }
.ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0     !important; } .pr-0 { padding-right: 0     !important; }
.pl-1 { padding-left: .25rem!important; } .pr-1 { padding-right: .25rem!important; }
.pl-2 { padding-left: .5rem !important; } .pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem  !important; } .pr-3 { padding-right: 1rem  !important; }
.pl-4 { padding-left: 1.5rem!important; } .pr-4 { padding-right: 1.5rem!important; }
.pl-5 { padding-left: 3rem  !important; } .pr-5 { padding-right: 3rem  !important; }

/* --- Input group addons (BS4 append/prepend -> BS5 flat children) --------- */
.input-group-prepend,
.input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append  { margin-left: -1px; }

/* --- Input group buttons (BS3 .input-group-btn; used by bootstrap-fileinput)
   Keep action buttons (browse/remove/upload) inline instead of stacking. --- */
.input-group-btn { display: flex; align-items: stretch; }
.input-group-btn > .btn { border-radius: 0; }

/* --- Screen-reader only (BS4 .sr-only -> BS5 .visually-hidden) ------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}