/* variables */
:root {
  --arailogi-blue: #002f81;
  --arailogi-yellow: #ffe100;
  --bg-color-main: #f5f5f5;
  --font-family-set: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic",
    YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* frame */

html{
  font-size: 12pt;
/*  font-size: 15px;*/
}

header {
  font-family: var(--font-family-set);
}

body {
  background-color: var(--bg-color-main);
}

.navbar, .offcanvas-header {
  background-color: var(--arailogi-blue);
}

.navbar {
  --bs-navbar-brand-hover-color: white;
}

.navbar-brand, #user-menu span, #user-menu::after {
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.navbar-toggler-icon{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#user-menu span{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 768px) { /* -md 以下 */
  .dropdown-width {
    width: 50%;
  }
}

.offcanvas-title {
  color: white;
  font-weight: bold;
}

.offcanvas-header .btn-close {
  opacity: 100%;
}

#offcanvasNavbar {
  background-color: white;
  font-weight: bold;
  width: 320px;
}

.nav-item ul {
  list-style: none;
}

.notice-area {
  color: black;
  background-color: white;
}

/* common area */


.container {
  background-color: white;
}

.card-round {
  border-radius: 15px;
}

.table-responsive {
  border-radius: 5px;
}

.table.striped1 tr:nth-child(even):not(.table-active) td{
  background-color: #eef6fb;
}

.table.striped2 tr:not(.table-secondary):not(.table-active):nth-child(4n+3) td,
.table.striped2 tr:not(.table-secondary):not(.table-active):nth-child(4n+4) td{
  background-color: #eef6fb;
}

/* 支払確定画面用striped2 */
.table.striped2 tbody:nth-of-type(even) tr td {
  background-color: #eef6fb;
}

.table.striped3 tr:not(.table-secondary):not(.table-active):nth-child(6n+4) td,
.table.striped3 tr:not(.table-secondary):not(.table-active):nth-child(6n+5) td,
.table.striped3 tr:not(.table-secondary):not(.table-active):nth-child(6n+6) td{
  background-color: #eef6fb;
}

.table.striped2 tbody tr td.table-secondary {
  background-color: #e2e3e5 !important;
}

.table.striped2 tr.table-secondary > td,
.table.striped2 tr.table-secondary > th {
  background-color: #e2e3e5 !important;
}

/* .table.striped1 tr:nth-child(even) td{
  background-color: #eef6fb;
} */

/* .table.striped2 tr:nth-child(4n+3) td,.table.striped2 tr:nth-child(4n+4) td{
  background-color: #eef6fb;
} */

/* .table.striped3 tr:nth-child(6n+4) td,.table.striped3 tr:nth-child(6n+5) td,.table.striped3 tr:nth-child(6n+6) td{
  background-color: #eef6fb;
} */

.button-area {
  border-radius: 5px;
  background-color: var(--bg-color-main);
}

/* common item */

.menu-card {
  border: solid 1px var(--arailogi-blue);
}

.menu-card .card-header {
  background-color: var(--arailogi-blue);
  color: white;
  font-weight: bold;
}

.menu-card .card-header .bi {
  font-size: 20px;
  font-weight: bold;
  color: white;
}
/*見積顧客メニュー：承諾依頼ゼブラ・*/
.custom-list-group .list-group-item:nth-child(even) {
    background-color: #eef6fb; /* 任意の色 */
}

.alert ul{
  margin: 0;
}

.col-form-label {
  font-weight: bold;
/*  border-bottom: solid 3px #cff4fc;*/
/*  border: ridge  2px #cfe3fc;*/
  background-color: #d9f2d9;
}
/* 見積用ラベル背景設定 */
.mode-quotation .col-form-label {
  background-color: #dfeeff;
}

.required {
  color: red;
}

.negative-amount {
  color: red !important;
}

.form-control, .form-select, .form-check-input {
  outline: solid 1px gray;
  outline-offset: -1px;
}

.form-check-label {
  font-size: 0.85rem;
}

.input-group > .form-control:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
  border-radius: var(--bs-border-radius-sm);
}

.page-ajax .page-link {
  cursor: pointer;
}

textarea {
  resize: none;
  width:400px;
  height:100px;
}

textarea[readonly] {
  background-color: #fffdf4; /* または他の色に変更 */
}

thead {
  font-size: 0.85rem;
}

thead th {
  text-align: center;
  vertical-align: middle;
}

tbody {
  font-size: 0.85rem;
}

tbody td {
  vertical-align: middle;
}

@keyframes ticker {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

input[readonly] {
  background-color: #fffdf4; /* または他の色に変更 */
}

.btn-pink {
  background-color: pink;
  color: black;
}
.btn-pink:hover {
  background-color: hotpink;
  color: black;
}
.btn-pink:disabled {
  background-color: #f8d7da;  /* 薄いピンク */
  color: #6c757d;             /* 薄いグレー系の文字色 */
  cursor: not-allowed;
}

header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  /* background-color: white; 必要に応じて */
  /* border-top: 1px solid #ccc; */
}

/* ボタンカラー設定 */
/* LINEアプリ */
.btn-line {
  background-color: #00B900;  /* LINEの緑 */
  border-color: #00B900;
  color: #fff; /* 文字色は白 */
}
.btn-line:hover {
  background-color: #00a200;  /* 少し暗めでホバー */
  border-color: #00a200;
}
.btn-line:active {
  background-color: #008f00;
  border-color: #008f00;
}

.fs-110p {
  font-size: 110%;
}
.fs-80p {
  font-size: 80%;
}

table > tbody.route-pattern-body:nth-of-type(even) > tr > td {
  background-color: #eef6fb;
}

input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  opacity: 1;
}

.modal-offset {
  margin-top: 80px;
}

.tooltip-inner {
  max-width: none !important;   /* 最大幅を解除 */
  width: auto !important;       /* 内容に合わせる */
  display: inline-block;        /* テキスト幅にフィットさせる */
  white-space: pre-wrap;        /* 改行と折り返しを有効にする */
  text-align: left;             /* 左揃え */
}

/* 時計アイコンを非表示 */
.clock-icon-none input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* モーダル非活性 */
.modal-disabled {
  pointer-events: none; /* クリック無効化 */
  opacity: 0.6;         /* 半透明で無効っぽく見せる */
}

/* モーダル内スクロール */
.aa-table-scroll {
  max-height: 420px;      /* 高さ */
  overflow-y: auto;
  position: relative;  
}

/* ヘッダ固定 */
.aa-table-fixed thead th {
  position: sticky;
  top: -1px;
  z-index: 1;
}

/* モーダル表示位置設定 */
.modal:not(#confirm_modal):not(#addModal) .modal-dialog {
  margin-top: 80px !important;
  margin-bottom: auto;
}

/* 支払確定画面：データ行（1行目）の上罫線を太くする */
.payment-fixing-page .table tbody[data-payment-key]:first-of-type > tr:first-child > * {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

/* 輸送依頼・手配画面：MAIL・FAX・LINE・印刷履歴 背景色 */
.bgcolor-confirmation-history > td {
  background-color: #eef6fb !important;
}

/* Bootstrap modal(1055)より前面に出す */
/* #ui-datepicker-div{
  position: absolute !important;
  z-index: 2000 !important;
} */

/* プルダウン拡大 */
.select-lg{
  transform: scale(1.25);
  transform-origin: left center; /* 左を基準にする */
  /* margin-left: 2px; */
}

/* 納車報告／立替金 */
/* 車両チェックリスト（2台ずつ表示し、10台分が見える程度でスクロール） */
#addModal .vehicle-select-box {
max-height: 200px;
overflow-y: auto;
background: #fff;
}

/* スクロールバーが出てもガタつかないように */
#addModal .vehicle-select-box .form-check {
margin-bottom: 0;
padding-top: .125rem;
padding-bottom: .125rem;
}

/* 納車報告(協力会社) */

/* 領収書表示ボタン */
/* 無効状態 */
.js-show-receipt.is-disabled {
  opacity: 0.35;
  color: #6c757d;        /* Bootstrap muted */
}

/* 有効状態 */
.js-show-receipt.is-enabled {
  opacity: 1;
  cursor: pointer;
}

/* 領収書表示モーダル */
/* 領収書表示モーダルをほぼ全幅に */
.receipt-display-modal {
  max-width: 95vw;
}

/* 余白を減らして表示領域を最大化 */
#receiptDisplayModal .modal-body {
  padding: 0.5rem;
}

.receipt-thumb {
  width: 100%;
  max-width: 100%;
}

/* 車両入力：強制実行モーダル専用 */
#confirm_modal.force-confirm-modal .modal-body {
  display: block;                /* 中央寄せ解除 */
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

#confirm_modal.force-confirm-modal .force-confirm-messages {
  max-height: 50vh;
  overflow-y: auto;
}

#confirm_modal.force-confirm-modal .force-confirm-footer-message {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid #dee2e6;
  font-weight: 600;
}

/* Select2 readonly 表現 */
.readonly-ui {
  pointer-events: none;
  background-color: #e9ecef;
  opacity: 1;
}
.readonly-ui .select2-selection {
  background-color: #e9ecef;
  cursor: not-allowed;
}
/* readonly時は Select2 のクリア(×)を非表示 */
.readonly-ui .select2-selection__clear {
  display: none !important;
}