/* styles.css */
.icon {
  margin-right: 10px;
  font-size: 20px; /* アイコンのサイズ */
}

.menu-text {
  transition: opacity 0.3s;
}

.search-area {
  margin-bottom: 20px;
}

.search-area label {
  margin-right: 10px;
}

.search-area input {
  padding: 5px;
  margin-right: 10px;
}

.error-message {
  border: 1px dashed red;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ffe6e6;
}

.service-notice h2 {
  margin-top: 20px;
  margin-left: 20px;
}

.service-notice h3 {
  margin-top: 20px;
  margin-left: 30px;
}
.service-notice p{
  margin-left: 35px;
}
.service-notice ul{
  margin-left: 35px;
}

/* メニューのトグルボタン */
.menu-toggle {
  cursor: pointer;
  font-size: 24px;
  margin-bottom: 20px;
}

/* ホバー時のスタイル */
.nav-link {
  transition: background-color 0.3s; /* 背景色の変化をスムーズに */
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1); /* ホバー時の背景色 */
}

/* メインコンテンツを全幅にするスタイル */
.main-td.default-width {
    transition: width 0.3s ease; /* スムーズなアニメーション */
}

.space-default-width{
  width: 135px
}

.space-collapsed-width{
  width: 50px
}


/* アイコンのスタイル */
.icon-img {
    width: 20px; /* アイコンの幅を調整 */
    height: 20px; /* アイコンの高さを調整 */
    filter: invert(100%) brightness(200%); /* 色を白に変更 */
    margin-right: 10px; /* テキストとの間に余白を追加 */
    vertical-align: middle; /* テキストとアイコンを中央揃え */
}

/* list-tableのテーブル設定 */
.tabulator-cell {
    line-height: 1.5; /* 行間を調整 */
    padding-top: 5px !important;/* 上の余白 */
    padding-bottom: 5px !important; /* 下の余白 */
}

.tabulator-row {
    line-height: 0.5;
    min-height: unset;
    height: auto;
    padding-top: 5px !important; /* 上の余白 */
    padding-bottom: 5px !important; /* 下の余白 */
}

/* Tabulatorフッターの背景色を消す */
.tabulator-footer {
    background: transparent !important;
    border-top: none !important;
}

/* ページカウンターの日本語化 */
.tabulator-page-counter {
    font-size: 0.95em;
}

.alert {
    background-color: #e7bdb0f3 !important;
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
    /* margin-bottom: 0.5em; */
    line-height: 0.5;
    font-size: 0.9em;
    align-items: center;
    display: flex;
    border-radius: 0.1rem;
    border: 1px solid !important;
}
.alert .close {
    font-size: 0.9em;
    padding: 0.1rem 0.1rem;
}

/* サイドバーの基本設定 */
#sidebar {
    width: 190px;
    min-width: 60px;
    transition: width 0.2s;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    overflow-x: hidden;
    z-index: 1040;
}

/* 折りたたみ時 */
#sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}

/* アイコン画像 */
#sidebar .icon-img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

/* 折りたたみ時はテキスト非表示 */
#sidebar.collapsed .menu-text {
    display: none;
}

/* メニューのリンク */
#sidebar .nav-link {
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

#sidebar .nav-link:hover, #sidebar .nav-link.active {
    background-color: #343a40;
    color: #ffc107;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #sidebar {
        width: 60px;
        min-width: 60px;
    }
    #sidebar .menu-text {
        display: none;
    }
}

#sidebar.collapsed ~ .main-content {
    margin-left: 10px;
}

.main-content {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    padding: 20px;
    background-color: white;
    overflow-y: auto;
    margin-left: 50px;
    transition: margin-left 0.2s;
    box-sizing: border-box;
}

.main-content h1 {
  color: #c0392b;
}

.report-tab {
  margin-left: 0px !important;
}

.border-line{
  border: 3px solid black
}

.input-box{
  width: 200px !important;
}
.btn-search{
  padding-top: 0.1em !important;
  padding-bottom: 0.1em !important;
  font-size: 1em !important;
}

.notification-border-line{
  border: 1px solid black; 
  margin: 0;
}

#error-message{
  display: none; /* 初期状態では非表示 */
}

.tabulator-area{
  margin-left: 20px;
}

.footer{
  width:100%;  
  bottom:0; 
  left:0; 
  z-index:1040; 
  background-color:#f2f2f2; 
  color:#333; 
  font-size:65%;
}

#back-to-list-area{
  width: 95%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.report-area {
    width: 50vw;                /* 画面幅の50% */
    max-width: none;            /* 最大幅制限を解除 */
    min-width: 320px;           /* 必要に応じて最小幅を設定 */
    margin: 0 auto;                  /* 中央寄せ解除 */
    padding: 5px;
    height: 40vh;               /* 画面高さの40%（調整可） */
    min-height: 300px;          /* 必要に応じて最小高さ */
    max-height: 70vh;           /* 必要に応じて最大高さ */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.report-area {
  width:100%; 
  border-collapse:collapse; 
  table-layout:fixed;
}

#report-box {
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    max-height: 70vh; /* 画面の60%まで。必要に応じて調整 */
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #ccc;
    padding: 1em;
    background: #fff;
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#display-area{
  display: none; /* 初期状態では非表示 */
}
.open-report-tab{
  text-align:right; 
  padding:8px;
}
#open-report-tab{
   text-decoration:underline;
}
/* 新規タブ要素 */
.report-td{
  padding:16px; 
  vertical-align:top;
}
/* レポート表示エリア END */

/* レポートのテーブル設定 */
.isUpdated-mark{
  color: red; /* 更新された行の色 */
}

/* 例: style.cssに追加 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 横スクロール防止 */
    width: 100vw;       /* ビューポート幅に合わせる */
    box-sizing: border-box;
}
main.main-content {
    flex: 1 0 auto;
}
.footer {
    flex-shrink: 0;
}

.container-fluid, .row, .table-area, .tabulator-area {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* テーブルの幅を画面に合わせる */
table {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#expression-area{
  font-size: 0.7em;
  display: none; /* 初期状態では非表示 */
}

.mark-red {
    color: red;
}

#logout-icon {
    cursor: pointer;
    transition: filter 0.2s;
}
#logout-icon:hover {
    filter: brightness(0.85);
}
#close-bar{
  background: none; 
  border: none; 
  font-size: 1.5rem; 
  line-height: 1; 
  color: #000; 
  padding: 0 8px;
}
#logout-icon:hover {
    filter: invert(100%) brightness(250%);
}

/* Tabulatorテーブルの各列・ヘッダに縦線を表示 */
.tabulator .tabulator-table .tabulator-row .tabulator-cell,
.tabulator .tabulator-header .tabulator-col {
    border-right: 1px solid #dee2e6;
}

/* 最後の3列間の右側だけ縦線を消す */
.tabulator .tabulator-table .tabulator-row .tabulator-cell:nth-last-child(4),
.tabulator .tabulator-header .tabulator-col:nth-last-child(4),
.tabulator .tabulator-table .tabulator-row .tabulator-cell:nth-last-child(3),
.tabulator .tabulator-header .tabulator-col:nth-last-child(3),
.tabulator .tabulator-table .tabulator-row .tabulator-cell:nth-last-child(2),
.tabulator .tabulator-header .tabulator-col:nth-last-child(2) {
    border-right: none !important;
}

/* 最終列の右端も縦線なし */
.tabulator .tabulator-table .tabulator-row .tabulator-cell:last-child,
.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none !important;
}

 /* ウィンドウ幅が768px以下のとき、ログアウトボタンを非表示にする */
@media (max-width: 768px) {
  #logout-btn {
    display: none !important;
  }
}