/*!
 * Bootstrap 5 compatibility shims for the TMS Console templates.
 *
 * Loaded after bootstrap 5 CSS. While templates are being converted from
 * Bootstrap 3 markup, this keeps the removed/renamed classes working so the
 * per-template cleanup can proceed template by template. Each rule here is
 * a migration TODO: as pages are converted (panel -> card, btn-default ->
 * btn-secondary, ...), delete the matching rules and finally this file.
 */

/* ---- removed in Bootstrap 5 ------------------------------------------- */

/* nav "divider" used in the profile dropdown (template2.html) */
li.divider {
  height: 1px;
  margin: 0.5rem 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

/* ---- panel -> card conversion (phase 4) -------------------------------- */

/* Templates now use .card markup; give headers the BS3 panel-look gray bar */
.card > .card-header {
  padding: 0.75rem 1.25rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-family: "Oswald", "Trebuchet MS", "Open Sans", arial, sans-serif;
}

/* BS3 .panel had margin-bottom: 20px; BS5 .card has none */
.card {
  margin-bottom: 1.25rem;
}

/* ---- Login page: BS3 parity ------------------------------------------- */

/* BS3 legend: 21px + thin underline (BS5 reset removed it) — login's
   "Login" heading in the BS3 design */
legend {
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

/* BS3 look: label above, natural-width centered input; BS5 .form-control
   is width:100% of its (inline-block but stretched) label parent, which
   widened the login inputs and mis-centered them */
#content.login .col-md-5 {
  float: none;
  margin-left: auto;
  margin-right: auto;
}
#fm1 label {
  display: block;
}
#fm1 .form-control {
  display: block;
  width: 220px;
  max-width: 100%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Noto font family for the whole support module --------------------- */

:root {
  --bs-body-font-family: "Noto Sans JP", "Noto Sans Mono", sans-serif;
}
body,
:is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .nav,
    .navbar,
    .btn,
    .form-control,
    .form-control-static,
    .input-group-text,
    .card,
    .card-header,
    .popover-title,
    .popover-content,
    .accordion-simple .panel-title,
    .pricing-table-head-byline,
    .error-code,
    table.dataTable-helper > thead > tr > th .form-control
  ) {
  font-family: "Noto Sans JP", "Noto Sans Mono", sans-serif;
}

/* ---- Bootstrap 3 button styles referenced heavily --------------------- */

.btn-default {
  color: #666;
  background-color: #fff;
  border-color: #ccc;
}

.btn-inverse {
  color: #fff;
  background-color: #354b5e;
  border-color: #263644;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875em;
}

/* ---- Bootstrap 3 base density (reboot differences) -------------------- */

/* BS3 reboot used 14px/1.43 — bootstrap-custom sets the body font, but BS5's
   default line-height (1.5) makes the fixed-width sidebar and header wrap */
body {
  line-height: 1.42857143;
}

/* header nav: BS3 .nav>li>a padding box + li wrapping the anchor; BS5 nav-list
   items collapse to line-height height, pushing the profile caret/caret bar
   out of alignment */
.nav > li > a {
  display: block;
  padding: 10px 15px;
}
.nav.navbar-nav > li {
  display: block;
}

/* our navbar has no .navbar-expand-* class, so BS5 treats it as a collapsed
   mobile navbar: dropdown menus go position:static (in-flow) and open, the
   197x243px menu pushes the brand onto a second flex line. Desktop menus
   must overlay. */
.navbar-nav .dropdown-menu {
  position: absolute;
}

/* template2 ships its own .caret span; BS5 adds a second via ::after */
.navbar .nav > li > a.dropdown-toggle::after {
  display: none;
}

/* BS5 no longer styles bare li>a inside dropdown menus (BS3 did); menu items
   would render as default blue underlined links */
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #ededed;
}

/* sidebar: restore BS3 density so menu labels stay on one line
   (two selectors to out-rank sidebar.css which loads later) */
#app-body #sidebar ul li a {
  font-size: 14px;
  line-height: 20px;
}

/* ---- Grid ------------------------------------------------------------- */

/* All templates are on the native BS5 flex grid: .row + .col-* + gutters.
   (The BS3 float-grid reinflation that used to bridge the gap was removed
   in Phase 6 — every column pair was verified to line up natively.) */

/* Bootstrap 5 reboot moved captions under the table (caption-side:bottom);
   the app's tables label themselves ABOVE (BS3 semantics) */
caption {
  caption-side: top;
}

/* ---- Bootstrap 3 form-horizontal geometry ------------------------------ */

/* Help icon: keep a gap from the label text (icons are appended to the
   right-aligned flex label by the util.js normalization) */
label.col-form-label > .fas,
label.col-form-label > .fa-question-circle {
  margin-left: 0.25em;
}

.col-form-label {
  padding-top: 7px;
  padding-bottom: 0;
  margin-bottom: 0;
  /* theme parity: BS3 body text was #666 everywhere. BS5 .card resets color
     to --bs-body-color (#212529), which made card-boundary labels darker
     than their siblings outside cards */
  color: #666;
}

/* keep validation-error coloring (legacy .has-error .control-label) */
.has-error .col-form-label {
  color: #d74945 !important;
}

/* labels beside their input (BS3 form-horizontal style): right-aligned.
   Plain col-form-labels stacked ABOVE their input keep BS3 left alignment */
/* NOTE: [class*="col-"] would self-match "col-form-label" (substring!);
   spell out the grid tokens so ONLY real column labels right-align */
.col-form-label[class*="col-md-"],
.col-form-label[class*="col-sm-"],
.col-form-label[class*="col-lg-"],
.col-form-label[class*="col-xl-"],
.col-form-label[class*="col-xs-"] {
  padding-left: 8px;
  padding-right: 8px;
  /* JP labels like アカウント発行先アドレス must not break mid-word; flex +
     flex-end keeps the RIGHT edge aligned even when the text is wider than
     the column (plain text-align would let overflow extend rightwards and
     visually reset the alignment to the left) */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

/* ---- Bootstrap 3 form control + button metrics ------------------------- */

.form-control {
  height: 34px;
  font-size: 14px;
  line-height: 1.42857143;
  padding: 6px 12px;
  color: #555;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

select.form-control[multiple],
textarea.form-control {
  height: auto;
}

/* legacy BS3 btn-default (white) — renamed to itself-on-purpose: BS5 has no
   btn-default, so markup keeps the class and compat styles it. The theme's
   real .btn-secondary (slate blue) is untouched by this rule. */
.btn-default {
  color: #666;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default.disabled,
.btn-default:disabled {
  opacity: 0.65;
  color: #666;
  background-color: #fff;
}

/* input group unit addons: match 34px inputs inside the group */
.input-group .input-group-text {
  height: 34px;
  font-size: 14px;
  line-height: 1.42857143;
  padding: 6px 12px;
  background-color: #eee;
  border-color: #ccc;
}

/* ---- Bootstrap 3 button metrics ---------------------------------------- */

.btn {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  margin-bottom: 0;
  /* BS3 kept button labels on one line (BS5 dropped it); without it the
     確定 button in a 20px table column breaks mid-text */
  white-space: nowrap;
}

/* ---- Bootstrap 3 modal header close button ----------------------------- */

/* BS3 markup uses <button class="close">float-right x</button>; BS5 dropped
   .close in favor of .btn-close and a flex header — restore both */
.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  border: 0;
  background: transparent;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  opacity: 0.5;
  background: transparent;
}
.modal-header .close {
  margin-left: auto; /* flex header: push the x to the right end */
  order: 2; /* markup may put close before the title (BS3 order) */
}
.modal-header .modal-title {
  order: 1;
  line-height: 1.42857143;
}

/* ---- select restores native dropdown arrow (BS5 sets appearance:none) --- */
select.form-control {
  padding-right: 12px;
  appearance: auto;
}

/* ---- misc renames ------------------------------------------------------ */

.caret {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* ---- Check-group rows: label text vertically centered with radios ------ */

.row-centered {
  align-items: center;
}
.row-centered > .col-form-label[class*="col-"] {
  /* padding-top: 7px is calibrated against 34px inputs; radio circles are
     smaller, so the row centers the (flex) label box instead */
  padding-top: 0;
  padding-bottom: 0;
}
.row-centered > div[class*="col-"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* BS5 .form-check-inline is inline-block with a margin-top bias on the
   input; as a flex pair the circle and its text share one centerline in
   every engine (Firefox metrics differ slightly from Blink) */
.row-centered .form-check {
  display: inline-flex;
  align-items: center;
}
.row-centered .form-check .form-check-input {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- table.payment detail panel (BS3 parity) --------------------------- */

/* BS5 paints background-color on every cell (--bs-table-bg), hiding the
   theme's row-level #fafafa on the opened payment detail; and BS5 uses
   border-bottom lines where BS3's .table only had border-top (already
   unset for sub-tables in sidebar.css). Restore the flat BS3 look. */
table.payment > tbody > tr.abstract.opened,
table.payment > tbody > tr.detail,
table.payment > tbody > tr.detail > td,
table.payment table.sub-table {
  /* BS5.3 paints cell backgrounds via box-shadow using --bs-table-bg;
     the sub-tables declare their own .table class, resetting the
     variable, so set it on both the detail row and the sub-table */
  --bs-table-bg: #fafafa;
  background-color: #fafafa;
}
table.payment table.sub-table > tbody > tr > th,
table.payment table.sub-table > tbody > tr > td {
  border-bottom: none;
}
table.payment table.sub-table > tbody > tr > th {
  color: #666;
}

/* ---- BS3 check-control geometry ---------------------------------------- */

/* BS5 renders the circle/checkbox flush against its text; BS3 kept a gap */
.form-check-inline .form-check-input,
.form-check .form-check-input {
  margin-right: 0.45em;
}
/* the red required marker sits tight after JP labels; BS3 kept a space */
label .required {
  margin-left: 0.3em;
}

/* ---- BS3 ".in" visibility-state compatibility -------------------------- */

/* BS3 used .in for shown fades/collapses; BS5 uses .show. Templates were
   migrated, but a legacy fade-in pane rendered transparent (opacity:0)
   while occupying space — the 精算 page needed tab clicks to appear. */
.fade.in {
  opacity: 1;
}
.collapse.in {
  display: block;
}

/* ---- 精算 datatable column compression ---------------------------------- */

/* With nowrap, Firefox gives every column its ideal width and overflows
   the container by ~44px (Blink compresses, FF doesn't). Keep nowrap on
   date/number columns but let the free-text columns compress instead of
   wrapping the dates. */
#invoiceDatatable > tbody > tr > td:nth-child(4),
#invoiceDatatable > tbody > tr > td:nth-child(5),
#invoiceDatatable > thead > tr > th:nth-child(4),
#invoiceDatatable > thead > tr > th:nth-child(5),
table[data-name="report-table"] > tbody > tr > td:nth-child(3),
table[data-name="report-table"] > tbody > tr > td:nth-child(4),
table[data-name="report-table"] > thead > tr > th:nth-child(3),
table[data-name="report-table"] > thead > tr > th:nth-child(4) {
  white-space: normal;
}

/* ---- 精算 tables: shrink the PDF-icon column to the icon ---------------- */

/* The toggle column grabbed leftover width from the auto table layout;
   width:1px + nowrap collapses it to the icon and the other columns
   absorb the space */
#invoiceDatatable > thead > tr > th:first-child,
#invoiceDatatable > tbody > tr > td:first-child,
table[data-name="report-table"] > thead > tr > th:first-child,
table[data-name="report-table"] > tbody > tr > td:first-child {
  width: 1px;
  white-space: nowrap;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* navbar links (profile dropdown toggle etc.): BS5 reboot underlines all
   <a> elements - the old theme had none */
.navbar .nav > li > a,
.navbar .dropdown-toggle {
  text-decoration: none;
}

/* CSV settings list: bare checkbox + wrapped label (not .form-check) */
.list-group-item.checkbox > label > input[type="checkbox"] {
  margin-right: 0.45em;
}

/* ---- DataTables outer frame --------------------------------------------- */

/* DT2's scroll wrapper draws its own border-bottom under the bordered
   table's last row - the cell grid already closes the table, so the
   bottom edge came out doubled. */
.dt-scroll div.dt-scroll-body {
  border-bottom-width: 0;
}

/* the search card is rounded (portlet-boxed: 5px, 1px #ddd border)
   while the bare table was square - match it. The wrapper draws the
   frame itself; the cells' outer edges are zeroed because collapse
   paints them right next to the wrapper border (2px frame). */
/* same border as the portlet-boxed search card (1px #ddd) so the two
   frames read identically */
.dt-scroll {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.dt-scroll table.dataTable > thead > tr > th:first-child,
.dt-scroll table.dataTable > thead > tr > td:first-child,
.dt-scroll table.dataTable > tbody > tr > td:first-child,
.dt-scroll table.dataTable > tfoot > tr > td:first-child {
  border-left-width: 0;
}
.dt-scroll table.dataTable > thead > tr > th:last-child,
.dt-scroll table.dataTable > thead > tr > td:last-child,
.dt-scroll table.dataTable > tbody > tr > td:last-child,
.dt-scroll table.dataTable > tfoot > tr > td:last-child {
  border-right-width: 0;
}

/* DT renders the visible header as a clone inside .dt-scroll-head; part
   of it paints a border-top of its own right under the wrapper's frame
   (pixel-measured: #ddd + #dee2e6 stacked = doubled top edge). The head
   is a header clone only - nothing in it needs a top border. */
.dt-scroll-head * {
  border-top: 0;
}

/* same for the bottom edge: the border sits on the last row's TR
   (border-collapse paints it at the table edge, on top of the wrapper's
   #ddd frame -> doubled line) */
.dt-scroll-body table.dataTable > tbody > tr:last-child {
  border-bottom-width: 0;
}
.dt-scroll-body table.dataTable > tbody > tr:last-child > td,
.dt-scroll-body table.dataTable > tbody > tr:last-child > th {
  border-bottom-width: 0;
}
/* and the scroll-foot clone, for tables with a tfoot */
.dt-scroll-foot * {
  border-bottom: 0;
}

/* ---- 精算 report tables (scrollX:false): same frame via the layout row ----
   These must keep scrollX off (Firefox width-lock bug), so DT wraps them
   in .dt-layout-table instead of .dt-scroll. :has() excludes scroll pages
   where the layout row contains the framed .dt-scroll (nested frames). */
.dt-layout-table:not(:has(.dt-scroll)) {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  /* DT2 reuses Bootstrap's .row here: -12px side margins + a 12px-padded
     inner div, which left the table floating inside the frame */
  margin-left: 0;
  margin-right: 0;
}
.dt-layout-table:not(:has(.dt-scroll)) > * {
  padding-left: 0;
  padding-right: 0;
}
/* single-line edges: zero the cells' outer borders (collapse paints them
   beside the wrapper frame) */
/* the border sits on the THEAD TR too (collapse quirk, same as the
   bottom edge) */
.dt-layout-table:not(:has(.dt-scroll)) table.dataTable > thead > tr {
  border-top-width: 0;
}
.dt-layout-table:not(:has(.dt-scroll)) table.dataTable > thead > tr > th,
.dt-layout-table:not(:has(.dt-scroll)) table.dataTable > thead > tr > td {
  border-top-width: 0;
}
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > thead
  > tr
  > th:first-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > thead
  > tr
  > td:first-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tbody
  > tr
  > td:first-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tfoot
  > tr
  > td:first-child {
  border-left-width: 0;
}
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > thead
  > tr
  > th:last-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > thead
  > tr
  > td:last-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tbody
  > tr
  > td:last-child,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tfoot
  > tr
  > td:last-child {
  border-right-width: 0;
}
.dt-layout-table:not(:has(.dt-scroll)) table.dataTable > tbody > tr:last-child {
  border-bottom-width: 0;
}
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tbody
  > tr:last-child
  > td,
.dt-layout-table:not(:has(.dt-scroll))
  table.dataTable
  > tbody
  > tr:last-child
  > th {
  border-bottom-width: 0;
}

/* customtheme forces margin-top/bottom: 12px !important on every
   table.dataTable; all DataTables are framed now, so the frame provides
   the spacing. (.dt-container: compat.css loads before customtheme, so a
   bare table.dataTable tie would lose to the theme's !important) */
.dt-container table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* BS5 renders table cells top-aligned; with taller body rows (action
   buttons) the cell text and the header sat at different heights.
   Restore BS3's vertical centering for DataTables. */
.dt-container table.dataTable > thead > tr > th,
.dt-container table.dataTable > thead > tr > td,
.dt-container table.dataTable > tbody > tr > td,
.dt-container table.dataTable > tfoot > tr > td {
  vertical-align: middle;
}

/* ---- global AJAX loading bar ---------------------------------------------
   Driven by /js/ajax-loading.js (jQuery ajaxSend/ajaxComplete push-pop).
   Indeterminate slide in the theme purple; static under reduced motion. */
#ajax-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000; /* above modals (1055) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: linear-gradient(90deg, #774488 0%, #a06cb8 50%, #774488 100%);
  background-size: 200% 100%;
}
#ajax-loading-bar.is-active {
  opacity: 1;
  animation: ajax-bar-slide 1s linear infinite;
}
@keyframes ajax-bar-slide {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ajax-loading-bar.is-active {
    animation: none;
  }
}

#ajax-loading-shield {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1999; /* below the bar (2000), above modals */
  display: none;
  background: transparent;
  cursor: wait;
}
#ajax-loading-shield.is-active {
  display: block;
}

/* while loading, a <button> shows only the spinner + status label
   (Bootstrap docs pattern); its original content is hidden */
button.is-loading > *:not(.ajax-spinner):not(.ajax-status) {
  display: none;
}

/* loading buttons reuse Bootstrap's native disabled appearance
   (variant color dimmed to 65%), not the theme's hard disabled gray */
.is-loading {
  pointer-events: none;
  opacity: var(--bs-btn-disabled-opacity, 0.65) !important;
}
/* keep the spinner visible: pointer-events:none on the button must not
   matter, and the theme's disabled colors are not needed */
.is-loading > *:not(.ajax-spinner):not(.ajax-status) {
  display: none;
}

.notice-target-group {
  display: block;
}
.notice-target-group .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}
.notice-target-group .form-check-input {
  position: static;
  margin: 0 0.5em 0 0;
}

/* the datepicker dropdown must render above modals (1055); the doubled
   class out-specifies air-datepicker's own rule, which loads later */
.air-datepicker.air-datepicker {
  z-index: 2000;
}