/* =========================================================
   layout.css (統合・整備版) 2025-11-13
   sidebar開閉 + scroll修正版
   ========================================================= */

/* fonts */
@font-face {
    font-family: 'NotoSansJP-Regular';
    src: url('/fonts/NotoSansJP-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP-SemiBold';
    src: url('/fonts/NotoSansJP-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP-Bold';
    src: url('/fonts/NotoSansJP-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GenSenRounded-JP-B';
    src: url('/fonts/GenSenRounded-JP-B.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rounded-mplus-1c-regular';
    src: url('/fonts/rounded-m/rounded-mplus-1c-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rounded-mplus-1c-bold';
    src: url('/fonts/rounded-m/rounded-mplus-1c-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* =========================================================
   Header
   ========================================================= */
header {
    position: fixed;
    z-index: 900;
    width: 100%;
    background-color: #FAF9FA;
    color: #618bad !important; /* 文字色を紺色に */
}

/* =========================================================
   Layout base structure
   ========================================================= */
.wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Sidebar fixed position */
#sidebar {
  position: fixed;
  top: 58px;
  left: 0;
  height: calc(100vh - 58px);
  width: 80px;
  min-width: 80px;
  background-color: #0e2238;
  z-index: 950;
  transition: width 0.3s ease;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body.sidebar-expanded .main {
    margin-left: 270px;
}

.no-transition * {
    transition: none !important;
}



#sidebar.expand {
  width: 270px;
}

/* Main content area */
.main {
  flex: 1;
  min-width: 0;
  transition: margin-left 0.3s ease;
  margin-left: 80px;
  background-color: #fafbfe;
  min-height: calc(100vh - 58px); /* ヘッダーの高さを考慮 */
  padding-bottom: 30px; /* 大幅な余白を縮小 */
  overflow: visible;
}

/* SecondHeader spacing */
body.with-second-header .main {
  margin-top: 3.6rem;
}
body:not(.with-second-header) .main {
  margin-top: 2rem;
}

/* Sidebar hidden (login pages, etc.) */
body.no-sidebar #sidebar {
  display: none !important;
}
body.no-sidebar .main {
  margin-left: 0 !important;
}



/* =========================================================
   Common typography & layout
   ========================================================= */
.system-user-info {
    font-size: 25px;
}

.jumbotron {
    position: relative;
    box-sizing: border-box;
    font-family: 'rounded-mplus-1c-regular', sans-serif;
}

body {
    background-color: #FAF9FA !important;
}

/* =========================================================
   Sidebar (legacy offcanvas not used, kept for reference)
   ========================================================= */
.offcanvas {
    border: none;
}

.sidebar-body {
    background-color: #77b8b9;
}

.sidebar-body a {
    color: #767171;
}

/* 現在開いているタイトルに色 */
.sidebar-active a {
    color: #0a58ca;
}

.sidebar-body li {
    width: 100%;
    border-bottom: solid 3px #fff;
}

/* ======================================
   サイドバー縮小時：テキスト非表示制御
   ====================================== */
/* 縮小時はアイコン中央寄せ */
#sidebar:not(.expand) .sidebar-item {
    text-align: center;
    /* サイドバーアイコンの上下幅 */
    margin-bottom: 0.45rem;
}

/* 縮小時はアイコン中央寄せ */
#sidebar.expand .sidebar-item {

    /* サイドバーアイコンの上下幅 */
    margin-bottom: 0.45rem;

}

/* 初期＝縮小状態（テキスト非表示＋左に詰める） */
#sidebar:not(.expand) .sidebar-text {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s ease;
    width: 0;
}

#sidebar:not(.expand) .sidebar-nav {
    width: 80px;
    overflow-x: hidden;
}

#sidebar:not(.expand) {
    overflow-x: hidden !important;
}


/* 展開時＝テキスト表示（アニメーションしながら表示） */
#sidebar.expand .sidebar-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    width: auto;
    transition: all 0.25s ease 0.05s;
    margin-left: 0;
}


#sidebar:not(.expand) ul {
    padding-left: 0 !important;
}

#sidebar.expand ul {
    padding-left: 0rem;
}

#sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    padding-left: 1.1rem;
    width: 100%;
    white-space: nowrap;
    transition: padding 0.3s ease;
}

#sidebar .sidebar-link img {
    flex-shrink: 0;     /* アイコンが押されて動くのを防ぐ */
    transition: none;   /* アイコンが動くアニメを抑止 */
}

/* =========================================================
   サイドバー開閉ボタン（矢印１つで回転・移動）
   ========================================================= */
/* 基本（縮小时）：中央に配置し、右向き（0deg） */
#sidebar .toggle-btn .icon-arrow {
    position: absolute;
    top: 50%;
    /* 中央配置 (アイコンの半分を考慮して translate で中央に) */
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    /* opacityの透明化は不要。移動と回転を滑らかにアニメーションさせる */
    transition: all 0.3s ease;
}

/* 展開時（expand）：右端へ移動し、左向きに180度回転 */
#sidebar.expand .toggle-btn .icon-arrow {
    /* 右の余白を約1.1rem(約17px)確保するための計算
       ※ calc(100% - 右余白 - アイコン半径(21px)) */
    left: calc(100% - 1.1rem - 21px);

    /* 位置のY軸中央は維持したまま、180度くるっと回す */
    transform: translate(-50%, -50%) rotate(180deg);
}



/* ======================================
   Sidebar toggle button reset
   ====================================== */
#sidebar .toggle-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;      /* ← ★ aタグと同じにする */
    margin: 0 !important;       /* ← ★ 不要なズレを排除 */
    width: 100%;
    height: 50px;               /* ← aタグと高さを揃える（必要なら調整可能） */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
}

/* 拡大時：右寄せ（× と ← が右側に来る） */
#sidebar.expand .toggle-btn {
    justify-content: flex-end;   /* ★ 右寄せに変更 */
    padding-right: 1.1rem;       /* 右の余白調整 */
}



/* =========================================================
   Container
   ========================================================= */
.container {
    width: 100%;
    padding-top: 80px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 150px;
    margin-right: auto;
    margin-left: auto;
    color: #333F50;
}

/* =========================================================
   Misc
   ========================================================= */
.required-sign {
    font-size: 5px;
    width: 50px;
    color: #ff0000;
    line-height: 2;
}
.error { font-size: 14px; color: #ff0000; }
.discrepancy { color: #E60000; }
.ax-number-bold {
    font-family: 'GenSenRounded-JP-B', sans-serif;
    font-weight: bold;
}

/* =========================================================
   Buttons
   ========================================================= */
.ax-btn {
    color: #6c757d;
    border-color: #A6A6A6;
    transition: 0.3s;
    justify-content: center;
    align-items: center;
}
.ax-btn:hover { color: #212529; }

.ax-search-btn {
    background-color: #d4eeee;
    font-size: 1.25rem;
    width:140px;
    height:40px;
}
.ax-search-btn:hover { background-color: #afeeee; }
.ax-search-btn:focus { box-shadow: 0 0 0 0.25rem #d4eeee; }

.ax-reset-btn {
    background-color: #fff;
    font-size: 1.25rem;
    width:140px;
    height:40px;
}
.ax-reset-btn:hover {
    color: #fff;
    background-color: #D9D9D9;
}
.ax-reset-btn:focus { box-shadow: 0 0 0 0.25rem #A6A6A6; }

.ax-complete-reset-btn {
    background-color: #fff;
    font-size: 1.25rem;
    width:50%;
    height:40px;
}
.ax-complete-reset-btn:hover {
    color: #fff;
    background-color: #D9D9D9;
}
.ax-complete-reset-btn:focus {
    box-shadow: 0 0 0 0.25rem #A6A6A6;
}

.ax-show-btn {
    background-color: #FFF2CC;
    font-size: 1.25rem;
    height:40px;
}
.ax-show-btn:hover { background-color: #FFD966; }
.ax-show-btn:focus { box-shadow: 0 0 0 0.25rem #FFF2CC; }

.ax-complete-btn {
    background-color: #e2f0d9;
    font-size: 1.25rem;
    width: 152px;
    height: 40px;
}
.ax-complete-btn:hover { background-color: #A7D676; }
.ax-complete-btn:focus { box-shadow: 0 0 0 0.25rem #e2f0d9; }

.ax-delete-btn {
    background-color: #FBE5D6;
    font-size: 1.25rem;
    width:20%;
    height:40px;
}
.ax-delete-btn:hover { background-color: #F4B183; }
.ax-delete-btn:focus { box-shadow: 0 0 0 0.25rem #FBE5D6; }

.ax-stop-btn {
    background-color: #f5d098;
    color: #333 !important;
    font-size: 1rem;
    width:20%;
    height:40px;
}
.ax-stop-btn:hover { background-color: #FFBD59; }

.ax-output-btn {
    background-color: #FCE2B1;
    font-size: 1.25rem;
    height:40px;
}
.ax-output-btn:hover { background-color: #FCBF4C; }
.ax-output-btn:focus { box-shadow: 0 0 0 0.25rem #FCE2B1; }

/* =========================================================
   Icons
   ========================================================= */
.complete-icon { color: #00CC2C; }
.check-icon { color: #00CC2C; font-size: 1.4rem !important; }
.show-icon { color: #7F6000; }
.delete-icon { color: #C00000; }
.output-icon { color: #D95621; }
.calendar-icon { color: #A6A6A6; }
.arrow-icon { color: #5cd6d4; }
.reset-icon { color: #6c757d; }

/* =========================================================
   Form input
   ========================================================= */
.input-form-size { height:40px; }
.input-form-size:focus {
    box-shadow: 0 0 0 0.25rem #d4eeee !important;
}
.check-form-text { font-size:1.5rem; }

/* =========================================================
   Tabulator
   ========================================================= */
.tabulator .tabulator-header .tabulator-col {
    background-color:#F7FFFF !important;
}
.tabulator .tabulator-footer {
    background-color:#F7FFFF !important;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
}
.tabulator-row.tabulator-row-even {
    background-color: #FAF9FA !important;
}
.tabulator-row.tabulator-row-even:hover {
    background-color: #ADB5BD33 !important;
}

.role-change-button { left: 70%; }


/* =========================================================
   保留・確認用（古い定義を一時残置）
   ========================================================= */
/*
.wrapper {
  height: 100vh;
  overflow: hidden;
}
.content>div {
  margin-left: 10px;
}
body.sidebar-expanded #header-second {
  margin-left: 260px;
}
#header-second { margin-left: 80px; transition: margin-left 0.3s ease; }
*/