/* =======================================================================
 *  拡張データグリッド ウィジェット用スタイル
 *  - ID セレクタ(#dg / #pager)をやめ、.ef-dg 配下のクラスにスコープ
 *  - 1ページに複数配置しても衝突しないようにするため
 *  - runtimeResources で efDataGrid.js と一緒に読み込む
 * ======================================================================= */

/* パレット用アイコン（暫定。御社の自作SVG等に差し替え可） */
.efDataGridIcon::before {
  content: url("efDataGrid.svg");
  display: inline-block;
  width: 18px;
  height: 18px;
}

/* 表全体 */
.ef-dg {
    border: 1px solid #000;
    border-radius: 5px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* スクロール領域（縦横スクロールはここ1か所。高さはJSから指定） */
.ef-dg .dg-scroll {
    overflow: auto;
}

/* ヘッダー（縦スクロールで上に固定） */
.ef-dg .dg-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    /*  width: max-content;     削除 */
    min-width: 100%;
    font-weight: bold;
    border-bottom: 1px solid #000;
}
.ef-dg .dg-header .dg-col:last-child {
    border-right: 1px solid #ccc;
}
.ef-dg .dg-header .dg-col.no-sort { cursor: default; }

/* 行 */
.ef-dg .dg-row {
    display: flex;
    /*  width: max-content;     削除 */
    min-width: 100%;
    border-bottom: 1px solid #ccc;
}

/* 通常列 */
.ef-dg .dg-col {
    flex: 0 0 150px;
    flex-shrink: 0;
    padding: 6px 10px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ef-dg .dg-row .dg-col:last-child {
    border-right: none;
}

/* リンク列（横スクロールしても右端に固定） */
.ef-dg .dg-col-link {
    flex: 0 0 80px;
    flex-shrink: 0;
    margin-left: auto;
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: inherit;
    text-align: center;
    border-left: 1px solid #ccc;
    border-right: none;
    box-sizing: border-box;
    padding: 6px 10px;
}

/* 列幅変更用ドラッグハンドル */
.ef-dg .dg-col::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

/* ソート用ヘッダー */
.ef-dg .dg-header .dg-col {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.ef-dg .dg-col.sort-asc,
.ef-dg .dg-col.sort-desc {
    background-color: rgba(0,0,0,0.05);
}
.ef-dg .dg-header .dg-col.sort-asc::before,
.ef-dg .dg-header .dg-col.sort-desc::before {
    order: 1;
    margin-left: auto;
    flex: none;
    font-size: 12px;
    line-height: 1;
}
.ef-dg .dg-header .dg-col.sort-asc::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  mask-image: url("sort-asc.svg");
  -webkit-mask-image: url("sort-asc.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
}
.ef-dg .dg-header .dg-col.sort-desc::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  mask-image: url("sort-desc.svg");
  -webkit-mask-image: url("sort-desc.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
}
.ef-dg .dg-pager-left {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: auto;     /* グループ全体を左端に寄せる */
}

/* ページャ */
.ef-dg .dg-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    margin-bottom: 8px;
    user-select: none;
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    justify-content: flex-end;
}
.ef-dg .dg-pager span {
    font-size: 13px;
    opacity: 0.8;
}
.ef-dg .dg-pager button {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, opacity 0.2s, border-color 0.2s;
}
.ef-dg .dg-pager button:disabled {
    opacity: 0.4;
    cursor: default;
}
/* ページャを下に置いたときは、余白と区切り線を上下反転 */
.ef-dg.pager-bottom .dg-pager {
    margin-bottom: 0;
    margin-top: 8px;
    border-bottom: none;
    border-top: 1px solid #ddd;
}

/*  フィルタ    */
.ef-dg .dg-filter {
    padding: 6px 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}
.ef-dg .dg-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ef-dg .dg-filter-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ef-dg .dg-filter select,
.ef-dg .dg-filter input {
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.ef-dg .dg-filter button {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
}
.ef-dg .dg-filter-remove {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid #ccc;
}

/* 全テーマ共通：選択行のリンクは白（濃い背景で読めるように） */
.ef-dg .dg-row.selected a {
    color: #fff;
}

/* ===== 白系テーマ ===== */
.ef-dg.theme-white { border-color: #cccccc; }
.ef-dg.theme-white .dg-header { background-color: #fff; color: #212121; }
.ef-dg.theme-white .dg-row { background-color: #fff; }
.ef-dg.theme-white .dg-row:nth-child(even) { background-color: #ddd; }
.ef-dg.theme-white .dg-row:hover { background-color: #bbb; }
.ef-dg.theme-white .dg-row.selected { background-color: #616161; color: #fff; }
.ef-dg.theme-white .dg-pager button { background-color: #424242; color: #eee; }
.ef-dg.theme-white .dg-filter .dg-filter-search { background-color: #bbb; color: #212121; }
.ef-dg.theme-white .dg-pager button:hover:not(:disabled) { background-color: #212121; }

/* ===== 赤系テーマ ===== */
.ef-dg.theme-red { border-color: #b71c1c; }
.ef-dg.theme-red .dg-header { background-color: #d32f2f; color: #fff; }
.ef-dg.theme-red .dg-row { background-color: #ffebee; }
.ef-dg.theme-red .dg-row:nth-child(even) { background-color: #ffcdd2; }
.ef-dg.theme-red .dg-row:hover { background-color: #ef9a9a; }
.ef-dg.theme-red .dg-row.selected { background-color: #c62828; color: #fff; }
.ef-dg.theme-red .dg-pager button { background-color: #d32f2f; color: #fff; }
.ef-dg.theme-red .dg-filter .dg-filter-search { background-color: #d32f2f; color: #fff; }
.ef-dg.theme-red .dg-pager button:hover:not(:disabled) { background-color: #c62828; }

/* ===== 青系テーマ ===== */
.ef-dg.theme-blue { border-color: #0d47a1; }
.ef-dg.theme-blue .dg-header { background-color: #1976d2; color: #fff; }
.ef-dg.theme-blue .dg-row { background-color: #e3f2fd; }
.ef-dg.theme-blue .dg-row:nth-child(even) { background-color: #bbdefb; }
.ef-dg.theme-blue .dg-row:hover { background-color: #90caf9; }
.ef-dg.theme-blue .dg-row.selected { background-color: #1565c0; color: #fff; }
.ef-dg.theme-blue .dg-pager button { background-color: #1976d2; color: #fff; }
.ef-dg.theme-blue .dg-filter .dg-filter-search { background-color: #1976d2; color: #fff; }
.ef-dg.theme-blue .dg-pager button:hover:not(:disabled) { background-color: #1565c0; }

/* ===== 黄色系テーマ ===== */
.ef-dg.theme-yellow { border-color: #f9a825; }
.ef-dg.theme-yellow .dg-header { background-color: #fbc02d; color: #000; }
.ef-dg.theme-yellow .dg-row { background-color: #fffde7; }
.ef-dg.theme-yellow .dg-row:nth-child(even) { background-color: #fff9c4; }
.ef-dg.theme-yellow .dg-row:hover { background-color: #fff59d; }
.ef-dg.theme-yellow .dg-row.selected { background-color: #f9a825; color: #000; }
.ef-dg.theme-yellow .dg-pager button { background-color: #fbc02d; color: #000; }
.ef-dg.theme-yellow .dg-filter .dg-filter-search { background-color: #fbc02d; color: #000; }
.ef-dg.theme-yellow .dg-pager button:hover:not(:disabled) { background-color: #f9a825; }

/* ===== 緑系テーマ ===== */
.ef-dg.theme-green { border-color: #1b5e20; }
.ef-dg.theme-green .dg-header { background-color: #388e3c; color: #fff; }
.ef-dg.theme-green .dg-row { background-color: #e8f5e9; }
.ef-dg.theme-green .dg-row:nth-child(even) { background-color: #c8e6c9; }
.ef-dg.theme-green .dg-row:hover { background-color: #a5d6a7; }
.ef-dg.theme-green .dg-row.selected { background-color: #2e7d32; color: #fff; }
.ef-dg.theme-green .dg-pager button { background-color: #388e3c; color: #fff; }
.ef-dg.theme-green .dg-filter .dg-filter-search { background-color: #388e3c; color: #fff; }
.ef-dg.theme-green .dg-pager button:hover:not(:disabled) { background-color: #2e7d32; }

/* ===== 黒系テーマ ===== */
.ef-dg.theme-dark { border-color: #212121; background-color: #121212; }
.ef-dg.theme-dark .dg-header { background-color: #424242; color: #fff; }
.ef-dg.theme-dark .dg-row { background-color: #212121; color: #eee; }
.ef-dg.theme-dark .dg-row:nth-child(even) { background-color: #1b1b1b; }
.ef-dg.theme-dark .dg-row:hover { background-color: #424242; }
.ef-dg.theme-dark .dg-row.selected { background-color: #616161; color: #fff; }
.ef-dg.theme-dark .dg-pager { background-color: #1b1b1b; border-bottom-color: #333; }
.ef-dg.theme-dark .dg-pager span { color: #ccc; }
.ef-dg.theme-dark .dg-pager button { background-color: #424242; color: #eee; }
.ef-dg.theme-dark .dg-filter .dg-filter-search { background-color: #424242; color: #eee; }
.ef-dg.theme-dark .dg-pager button:hover:not(:disabled) { background-color: #616161; }
.ef-dg.theme-dark.pager-bottom .dg-pager { border-top-color: #333; }
.ef-dg.theme-dark a { color: #64b5f6; }