/*共通化*/
/* ===== root ===== */
:root {
  --blue: #4f80b8;
  --bg_white: #ffffff;
  --bdr_white: #fff;
  --bg_gray: #eee;
  --bdr_gray: #aaa;
  --bg_green: #e6fffa;
  --bdr_green: #81e6d9;
  --bg_pink: #fff0f5;
  --bdr_pink: #ffb0ca;
  --bg_orange: #ffebd8;
  --bdr_orange: #ffcc99;
  --txt_black: #222;
  --txt_white: #fff;
  --txt_red: #c23b3b;
  --txt_gray: #aaa;
  }

/* ===== base ===== */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg_white);
  color: var(--txt_black);
  font-family: "Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:13.5px;
}

/* ===== Global Header ===== */
.globalHeader{
  background: var(--blue);
  color: var(--txt_white);
  height:50px;
  display:flex;
  justify-content:center;
}
.ghInner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 5px;
  width:1050px;
}

/* brand */
.brand{ display:flex; align-items:center; gap:10px; min-width:170px; }
.brandMark{
  width:38px; height:30px; border-radius:6px;
  background:#ffffff;
  color:#4f80b8;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:22px;
}
.brandText{ line-height:1.05; }
.brandName{ font-weight:900; font-size:18px; letter-spacing:.06em; }
.brandSub{ font-weight:700; font-size:12px; opacity:.95; }

/* menus */
.menuLeft, .menuRight{ display:flex; align-items:center; gap:6px; }
.menuLeft{ flex:1; }
.mBtn{
  border:0;
  background:transparent;
  color: var(--txt_white);
  cursor:pointer;
  padding:5px 5px;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:50px;
}
.mBtn:hover{ background:rgba(255,255,255,.12); }
.mBtn.r{ min-width:50px; }
.mIcon{ font-size:18px; line-height:1; }
.mTxt{ font-size:11px; font-weight:800; letter-spacing:.04em; }

/* ===== Layout ===== */
.main{
  width: 100%;
  max-width: 1050px;
  margin: 10px auto;
}

.section_A{
  width: 100%;
  border: solid 1px var(--bdr_gray);
  border-radius:8px;
  margin-top: 8px;
  padding: 8px;
}

.section_B{
  width: 100%;
  margin-top: 8px;
  padding: 8px;
}

.section_C{
  width: 100%;
  background: var(--bg_gray);
  border: solid 1px var(--bdr_gray);
  border-radius:8px;
  margin-top: 8px;
  padding: 8px;
  gap: 10px;
}

/* ===== form ===== */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== Parts ===== */
.page_title {
  background: var(--blue);
  color: var(--txt_white);
  width: 100%;
  border-radius: 8px;
  padding: 8px;
  letter-spacing:.06em;
  font-size:16px;
}

/* widths */
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w130{width:130px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w170{width:170px;}
.w180{width:180px;}
.w190{width:190px;}
.w200{width:200px;}
.w400{width:400px;}

/*text*/
.txt_caution{
  color: var(--txt_red);
  font-size: 12px;
}

/* buttons */
.btn_A{
  border: 1px solid var(--bdr_gray);
  background: var(--bg_gray);
  color: var(--txt_black);
  padding: 8px 12px;
  gap:5px;
  border-radius: 8px;
  text-align:center;
  cursor: pointer;
}
.btn_A:hover{
  filter: brightness(0.88);
}
.btn_A.is-active{ filter: brightness(0.88); }

/*一覧時だけ大きさ調整*/
.tableWrap table .btn_A{
  padding: 4px 8px;
  height: 25px;
}

.btn_B{
  border: 1px solid var(--bdr_gray);
  background: var(--blue);
  color: var(--txt_white);
  padding: 8px 14px;
  gap:5px;
  border-radius: 8px;
  text-align:center;
  cursor: pointer;
}
.btn_B:hover{
  filter: brightness(1.12);
}

/*印刷ステータスバッジ*/
.badge {
  display: inline-block;
  border-radius: 8px;
  padding: 5px 5px;
  cursor: pointer;
  user-select: none;
}
.badge.ok{
  background: var(--bg_green);
  border:1px solid var(--bdr_green);
}
.badge.ng{
  background: var(--bg_pink);
  border:1px solid var(--bdr_pink);
}

/* input */
input{
    border: solid 1px var(--bdr_gray);
    /* border-radius:8px; */
    height: 33px;
    padding: 5px 5px;
}
input[type="text"]::placeholder {
  color: var(--txt_gray);
}
/* Microsoft Edge */
input[type="text"]::-ms-input-placeholder {
  color: var(--txt_gray);
}
/* Internet Explorer */
input[type="text"]:-ms-input-placeholder {
  color: var(--txt_gray);
}
input.readonly{
  background: var(--bg_gray);
}
/*tr.readonly { opacity: .55; }*/
tr.readonly td { cursor: not-allowed; }
tr.readonly input[type="checkbox"] { pointer-events: none; }

/* ===== checkbox reset 対策（リセットで消えるのを復活） ===== */
input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;

  display: inline-block !important;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
}
/* 印刷ステータス（チェックボックス） */
.statuschk{
  display:flex;
  gap:12px;
  padding: 7px 10px;
  border-radius: 8px;
  border: solid 1px var(--bdr_gray);
  /* border-radius:8px; */
  height: 30px;
  padding: 5px 5px;
}
/* ついで：押しやすく */
.statuschk .chk{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}


/*260117：伝票系UI調整時*/
/* ===== form layout (slip common) ===== */
.panel{
  width:100%;
  border: solid 1px var(--bdr_gray);
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
  background: var(--bg_white);
}

.leftPanel{
  width: 340px;
}

.rightPanel{
  width: 705px;
}

.midGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

/* label + input 2-col grid */
.grid{
  display:grid;
  grid-template-columns: 90px 1fr; /* slip_label幅と合わせる */
  gap: 8px 10px;
  align-items:center;
}

/* upper key row */
.keyGrid{
  display:grid;
  grid-template-columns: auto 44px auto 1fr 44px;
  gap: 10px;
  align-items:end;
}

.keyItem{
  display:flex;
  align-items:center;
  gap: 8px;
}
.keySmall{ max-width: 220px; }
.keyGrow{ min-width: 320px; }

.notice{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* inline group */
.two{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.inputWithBtn{
  display:flex;
  align-items:center;
  gap: 8px;
  flex:1;
}
.inputWithBtn input{ flex:1; }

/* half split */
.half2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.halfBox{ display:flex; align-items:center; gap:8px; }
.noLabels{ align-items:center; }

/* text style helpers */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* select: unify with input */
select{
  border: solid 1px var(--bdr_gray);
  height: 33px;
  padding: 5px 5px;
  background: #fff;
}

/* ===== slip detail table ===== */
.detailSection{ margin-top: 8px; }

.detailSection .tableWrap{
  /* 一覧と同じ “横スクロールOK” に寄せる */
  overflow-x:auto;
}

.detailTable{
  width:100%;
  border: 1px solid var(--bdr_gray);
  border-collapse: collapse;
  table-layout: fixed;
}
.detailTable th, .detailTable td{
  padding: 5px 5px;
  border: 1px solid var(--bdr_gray);
  white-space: nowrap;
}

/* ===== 明細：input/selectがセルからはみ出る対策（確定版） ===== */
.detailTable td{ 
  overflow: hidden;           /* はみ出し保険 */
}

/* セル内のフォーム部品は必ずセル幅に収める */
.detailTable td input,
.detailTable td select,
.detailTable td textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;               /* “デフォルトの最小幅”で縮まない問題を潰す */
  box-sizing: border-box;     /* padding+border込みで100% */
  display: block;             /* inline由来のズレ/はみ出しを減らす */
}

/* 明細のselect(内訳)も同様に */
.detailTable td .breakdownSel{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
}

/* 明細行：論理削除（rowDel）の見た目 */
#detailTable tbody tr.rowDel td,
#detailTable tbody tr.rowDel input {
  background: #666 !important;
  color: #fff !important;
}
/* 入力できない感を出したいなら（任意） */
#detailTable tbody tr.rowDel input {
  pointer-events: none;
  opacity: 0.8;
}

/* ===== slip bottom bar ===== */
.bottomBar{
  margin-top: 8px;
  padding: 8px;
  border: solid 1px var(--bdr_gray);
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.bottomLeft, .bottomRight{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* full width helper */
.w100p{ width:100%; }




/* ===== table ===== */
.tableWrap {
  overflow-x: auto;
}

table {
  width: 100%;
  /* min-width: 1000px; */
  border: 1px solid var(--bdr_gray);
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  padding: 5px 5px;
  border: 1px solid var(--bdr_gray);
  white-space: nowrap;
}

th {
  background: var(--bg_gray);
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
}

/* ===== sortable header ===== */
th[data-sort] {
  cursor: pointer;
}

th[data-sort]:hover {
  filter: brightness(0.88);
}

th[data-sort]{
  position: sticky;
  top: 0;
  padding-right: 22px; /* 矢印ぶん */
}

th[data-sort]::after{
  content: "▲▼";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #999;
  opacity: 0.9;
}
th .sortMark{
  margin-left:6px;
  font-size:11px;
  color:#222;
}

/* 現在のソート状態 
th[data-sort].is-asc::after{ content: "▲"; color:#222; }
th[data-sort].is-desc::after{ content: "▼"; color:#222; }
*/

/*中央・右寄せ*/
.center {
  text-align: center;
}
.right {
  text-align: right;
}

/* 折り返し禁止 + … */
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}





.footerBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== paging ===== */
#page_info {
  min-width: 80px;
  text-align: center;
}







/* input[type="text"],
input[type="date"],
select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
} */


/* Label */
/* labels */
.label_A{
  font-size:12px;
}

.slip_label{
  width:90px;
  height:30px;
  background:#4f80b8;
  /* color:#fff; */
  padding:5px 5px;
  /* border-radius:8px; */
  display: flex;
  align-items: center;
  
  background: var(--bg_gray);
  border: 1px solid var(--bdr_gray);
  font-size:12px;
  font-weight: 600;
}



/* ===== dialog (common) ===== */
.dialog_overlay{ display:none; }
.dialog_overlay.is-open{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}

.dialog_main{
  width:min(980px, calc(100% - 24px));
  height: 90vh;
  max-height: none;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
}

.dlg_titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:var(--blue);
  color:var(--txt_white);
}

.dlg_close{
  border:0;
  background:transparent;
  color:var(--txt_white);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.dlg_body{
  height: 100%;
  overflow: auto;
  padding:12px;
}

/* dialog内の一覧スクロール（invoice_checkと同じ tableWrap を流用） */
.dlg_body .tableWrap{
  max-height: 65vh;
  overflow:auto;
}


/* ===== dialogはクラス競合を避けるため、個別定義 ===== */
/* ===== logoff ===== */
/* 初期は非表示 */
.logoff_dialog_overlay{ display:none; }

/* hidden 解除されたら表示 */
.logoff_dialog_overlay:not([hidden]){
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.logoff_dialog_main{
  width:min(520px, calc(100% - 24px));
  background:#fff; border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
}
.logoff_dlg_titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#4f80b8; color:#fff;
}
.logoff_dlg_close{
  border:0; background:transparent; color:#fff;
  font-size:20px; line-height:1; cursor:pointer;
}
.logoff_dlg_body{ padding:14px; }

.logoff_btnSub{ border:0; border-radius:10px; padding:10px 12px; background:#aaaaaa; color:#fff; cursor:pointer; font-weight:700; }
.logoff_btnDanger{ border:0; border-radius:10px; padding:10px 12px; background:#4f80b8; color:#fff; cursor:pointer; font-weight:700; }

body.logoff_dlgNoScroll{ overflow:hidden; }

.logoff_dlg_actions{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.logoff_dlg_left{
  display:flex;
  align-items:center;
}

.logoff_dlg_right{
  display:flex;
  align-items:center;
  gap:10px;
}

/*案件管理：一覧のスマホ対応（後に実装）<main class="main pm_list">*/
/* @media (max-width: 768px){
  .pm_list .table_A th:nth-child(2), .pm_list .table_A td:nth-child(2),
  .pm_list .table_A th:nth-child(5), .pm_list .table_A td:nth-child(5),
  .pm_list .table_A th:nth-child(6), .pm_list .table_A td:nth-child(6){
    display:none;
  }
} */