/* =========================================================
   Voice UI styles
   Path: /wp-content/themes/dokopre/assets/css/voice.css
   ========================================================= */

/* --- Layout -------------------------------------------------- */
.voice-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}
.voice-card{
  border:2px solid #9fd3e7;
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.voice-card__header{
  display:flex; gap:12px; align-items:center; margin-bottom:8px;
}
.voice-card__avatar img{
  width:72px; height:72px; object-fit:cover; border-radius:50%; border:2px solid #9fd3e7;
}
.voice-card__avatar--placeholder{
  width:72px; height:72px; border-radius:50%; background:#eef5f8; border:2px solid #9fd3e7;
}
.voice-card__name{font-weight:700; font-size:18px; line-height:1.2;}
.voice-card__gender{font-size:12px; color:#777; margin-top:2px;}

/* --- Player row ---------------------------------------------- */
.voice-card__player{
  display:flex; align-items:center; gap:10px; margin:10px 0 12px;
}
.voice-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid #9fd3e7; background:#fff; cursor:pointer; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  transition: transform .05s ease-in-out, background-color .15s ease, color .15s ease, border-color .15s ease;
  user-select:none;
}
.voice-btn:hover{ background:#f6fbfe; }
.voice-btn:active{ transform: scale(0.96); }
.voice-btn:focus-visible{
  outline: 2px solid #1e88e5; outline-offset: 2px;
}

/* ▶/■ の状態で見た目を切替 */
.voice-btn[data-state="playing"]{
  background:#9fd3e7; color:#0a3a4b; border-color:#7bc1dc;
}
.voice-btn[data-state="stopped"]{
  background:#fff; color:#0a3a4b; border-color:#9fd3e7;
}

/* timeline */
.voice-timeline{ flex:1; min-width: 0; }
.js-voice-seek{ width:100%; }
.voice-time{ font-size:12px; color:#555; margin-top:4px; display:flex; gap:4px; }

/* シークバー（range）の見栄え調整：WebKit/Firefox/Edge 対応 */
.js-voice-seek{
  appearance:none; height:6px; border-radius:6px; background:#e3eef3; outline:none;
}
.js-voice-seek:focus-visible{ outline:2px solid #1e88e5; outline-offset:2px; }
.js-voice-seek::-webkit-slider-thumb{
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:#1e88e5; border:2px solid #fff; box-shadow:0 0 0 1px #1e88e5;
  margin-top:-4px;
}
.js-voice-seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#1e88e5; border:2px solid #fff; box-shadow:0 0 0 1px #1e88e5;
}
.js-voice-seek::-ms-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#1e88e5; border:2px solid #fff;
}
.js-voice-seek:disabled{
  opacity:.5; cursor:not-allowed;
}

/* --- Track list ---------------------------------------------- */
.voice-card__list{ list-style:none; margin:0; padding:0; }
.voice-item{
  display:grid; grid-template-columns:96px 1fr auto; gap:8px; align-items:center;
  padding:8px 6px; border-bottom:1px solid #e3eef3; cursor:pointer;
}
.voice-item:hover{ background:#f7fbfd; }
.voice-item.is-active{ background:#eef7fb; }
.voice-item__label{ font-weight:700; }
.voice-item__desc{ color:#333; overflow-wrap:anywhere; }
.voice-item__meta{ display:flex; gap:6px; align-items:center; }
.voice-badge{
  border:1px solid #c6dfe9; border-radius:10px; padding:2px 6px; font-size:11px; color:#3b6b80; background:#fff;
}
.voice-time-badge{ font-size:11px; color:#777; }

/* キーボード操作でのフォーカス可視化 */
.voice-item[tabindex]:focus-visible{
  outline:2px solid #1e88e5; outline-offset:-2px;
}

/* エラーステート（JSが .voice-error を付与） */
.voice-card.voice-error{
  border-color:#e57373; box-shadow:0 0 0 3px rgba(229,115,115,.15);
}
.voice-card.voice-error .voice-btn{ border-color:#e57373; }
.voice-card.voice-error .voice-item{ border-bottom-color:#f3d3d3; }
.voice-card.voice-error .voice-item:hover{ background:#fff6f6; }

/* --- Responsive tweaks ---------------------------------------- */
@media (max-width: 640px){
  .voice-grid{
    grid-template-columns: 1fr; gap:14px;
  }
  .voice-item{
    grid-template-columns: 80px 1fr; grid-auto-flow: row; /* メタを折り返し下段へ */
  }
  .voice-item__meta{
    grid-column: 1 / -1; justify-content:flex-start; padding-left: 4px;
  }
}

@media (min-width: 1440px){
  .voice-grid{ gap:20px; }
  .voice-card{ padding:16px; }
}

/* 高コントラスト環境（Windows など）配慮 */
@media (forced-colors: active){
  .voice-btn, .voice-item, .voice-card{
    border: 1px solid ButtonText;
  }
  .voice-btn[data-state="playing"]{
    background: Highlight; color: HighlightText;
  }
  .voice-item[tabindex]:focus-visible{
    outline: 2px solid Highlight;
  }
}

/* 動きが苦手な方向け：縮小 */
@media (prefers-reduced-motion: reduce){
  .voice-btn{ transition: none; }
}

/* ダークモードがあるテーマ用の軽い調整（任意） */
@media (prefers-color-scheme: dark){
  .voice-card{ background:#0f1518; border-color:#295e72; box-shadow:none; }
  .voice-card__avatar--placeholder{ background:#122027; border-color:#295e72; }
  .voice-item{ border-bottom-color:#1e2c33; }
  .voice-item:hover{ background:#0d1b22; }
  .voice-item.is-active{ background:#0f2430; }
  .voice-badge{ border-color:#2b5362; color:#a6c7d3; background:#0f1518; }
  .voice-time{ color:#b8c3c8; }
  .voice-time-badge{ color:#9fb0b7; }
  .js-voice-seek{ background:#1e2c33; }
}

/* ===== Header (旧UIの赤枠相当) ===== */
.voice-header{ margin: 8px 8px 16px; }
.voice-header__inner{
  max-width: 1200px; margin: 0 auto; padding: 8px 8px 0;
}
.voice-title{
  font-size: 24px; font-weight: 800; margin: 4px 0 10px;
}
.voice-toolbar{
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  border: 1px solid #e3eef3; border-radius: 10px; padding: 10px; background:#fff;
}
.voice-search input[type="search"]{
  width: 100%; padding: 8px 10px; border:1px solid #cfe3ec; border-radius:8px;
}
.voice-filters{ display: flex; gap: 10px; align-items: center; }
.voice-filters select{
  padding: 6px 8px; border:1px solid #cfe3ec; border-radius:8px; background:#fff;
}
.voice-perpage{ display:flex; gap:6px; align-items:center; color:#666; font-size:13px; }

/* グリッド余白の微調整（カードが詰まりすぎる場合） */
.voice-grid{ max-width: 1200px; margin: 0 auto; }

/* トーン欄を見やすく */
.voice-item__desc{ color:#0f3a4a; font-size: 14px; }

/* 小さな表示崩れ対策 */
@media (max-width: 640px){
  .voice-toolbar{ grid-template-columns: 1fr; }
  .voice-filters{ flex-wrap: wrap; }
}

/* header / filters */
.voice-header{ margin: 8px 8px 16px; }
.voice-header__inner{ max-width:1200px; margin:0 auto; padding:8px 8px 0; }
.voice-title{ font-size:24px; font-weight:800; margin:4px 0 10px; }
.voice-toolbar{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid #e3eef3; border-radius:10px; padding:10px; background:#fff; }
.voice-search input[type="search"]{ width:100%; padding:8px 10px; border:1px solid #cfe3ec; border-radius:8px; }
.voice-filters{ display:flex; gap:10px; align-items:center; }
.voice-perpage select{ padding:6px 8px; border:1px solid #cfe3ec; border-radius:8px; background:#fff; }

/* card meta */
.voice-card__gender{ font-size:12px; color:#555; margin-top:2px; display:flex; gap:8px; align-items:center; }
.voice-cost-badge{ border:1px solid #c6dfe9; border-radius:10px; padding:1px 6px; font-size:11px; color:#3b6b80; }

/* empty state */
.voice-card.is-disabled .voice-btn{ opacity:.7; }
.voice-item.is-empty{ opacity:.6; cursor:default; }

/* 非管理者は費用UIを確実に消す */
.voice-toolbar[data-admin="0"] #costWrap { display: none !important; }

/* 「準備中」カードの見た目の保険 */
.voice-card.is-disabled .voice-card__player { opacity: .5; pointer-events: none; }
.voice-item.is-empty { color:#666; background:#f6fbfe; }

.voice-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.voice-search-bar input,
.voice-search-bar select {
    padding: 6px;
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .voice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.voice-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.voice-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.voice-thumb img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.voice-card {
    background: #fff;
    border: 1px solid #cde6f7;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.voice-audio {
    display: block;
    margin: 10px auto;
}

.sample-row {
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sample-row.playing {
    background: #e6f3ff;
}
.new-icon {
    background: red;
    color: #fff;
    border: 1px solid red;
    font-size: 10px;
    padding: 2px 4px;
    margin-left: 5px;
    border-radius: 3px;
}
.tone-label {
    margin-left: 10px;
    font-size: 12px;
    color: #333;
}
.filetype {
    margin-left: auto;
    font-size: 11px;
    color: #666;
}

.sample-row {
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.sample-row:last-child {
    border-bottom: none;
}
.sample-row:hover {
    background: #f0f8ff;
}
.sample-row.playing {
    background: #e6f3ff;
}

.sample-row strong {
    font-weight: bold;
    margin-right: 8px;
}

.tone-label {
    margin-left: 8px;
    font-size: 13px;
    color: #333;
}

.new-icon {
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: auto;
    margin-right: 5px;
}

.filetype {
    border: 1px solid #ccc;
    background: #f9f9f9;
    padding: 2px 6px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-size: 12px;
    color: #444;
}
.voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.new-icon {
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 8px;
    margin-right: 5px;
}
.filetype {
    margin-left: auto; /* 常に右端 */
}

.voice-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    margin-right: 15px;
}

.voice-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.voice-search-bar input[type="text"] {
    flex: 1; /* 横幅最大にする */
    padding: 8px;
}
.voice-search-bar select {
    padding: 8px;
}

.voice-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-end !important; /* 右寄せ */
}
.voice-search-bar input[type="text"],
.voice-search-bar select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    background: #fff;
}
.voice-search-bar input[type="text"] {
    flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  margin: 20px 0;
}

.search-flex {
  display: flex;
  justify-content: flex-end !important; /* 右寄せ */
  gap: 10px;
  margin-bottom: 20px;
}

.search-flex select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media screen and (max-width: 768px) {
    .voice-grid {
        grid-template-columns: 1fr; /* 1列 */
    }
    .voice-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    .search-wrapper {
      justify-content: center; /* スマホでは中央寄せ */
    }
    h1 {
      text-align: left;     /* 左寄せベース */
      padding-left: 20px;   /* 右に寄せたい分だけ余白を追加 */
      font-size: 20px;      /* もし文字サイズも少し小さくするなら */
    }
    .search-flex {
      gap: 6px; /* 縦積みの間隔を少し詰める */
    }
    .voice-search-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: flex-end !important;
      font-size: 12px;
      padding: 6px 8px;
    }
}

/* ===== ページネーション ===== */
.paging {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.paging .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  border-radius: 8px;                /* 角を丸く */
  background: #fff;                  /* 背景白 */
  color: #333;                       /* 通常文字色 */
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);  /* シャドウ */
  transition: all 0.2s ease;
}

/* ホバー時 */
.paging .page-numbers:hover {
  background: #0077cc;    /* おしゃれなブルー */
  color: #fff;
  transform: translateY(-2px);       /* 浮き上がり感 */
}

/* 現在のページ */
.paging .page-numbers.current {
  background: #0077cc;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(0,119,204,0.4);
  pointer-events: none;
}