/*
 * jhacal-wordset-selector.css
 * Shared word-set selector modal styles for Pro Speak and Pro Speak Stories.
 *
 * Class conventions (all prefixed ps- to avoid conflicts):
 *   .ps-modal            — full-screen backdrop
 *   .ps-pl-dialog        — the dialog box
 *   .ps-pl-tabbar-wrap   — tab row + scroll arrows
 *   .ps-pl-tab           — individual category tab
 *   .ps-pl-toolbar       — hint text + ✓/✗ quick-select buttons
 *   .ps-pl-content       — scrollable card area
 *   .ps-sub-grid         — 5-column card grid
 *   .ps-sub-item         — individual word-set card
 *   .ps-sub-label        — card label (full text, wraps)
 *   .ps-sub-count        — word count badge
 *   .ps-word-preview     — hover tooltip popup
 *
 * JHACAL palette: #ff9800 (orange), #ffd54f (amber), dark bg #272b31
 */

/* ── Modal backdrop ─────────────────────────────── */
.ps-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px; overflow: hidden;
}
.ps-modal[hidden] { display: none !important; }

/* ── Generic dialog shell (used by non-playlist modals) ── */
.ps-dialog {
  background: #272b31;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: min(840px, 94vw);
  max-height: min(88vh, 700px);
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.ps-dialog::-webkit-scrollbar { width: 5px; }
.ps-dialog::-webkit-scrollbar-thumb { background: rgba(255,152,0,0.3); border-radius: 3px; }

.ps-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0;
  background: #272b31; border-radius: 14px 14px 0 0;
  z-index: 2; flex-shrink: 0;
}
.ps-dialog-title { margin: 0; font-size: 17px; font-weight: 800; color: #ff9800; }

.ps-dialog-close {
  background: none; border: none; color: #7d8590; font-size: 26px; cursor: pointer;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; line-height: 1; touch-action: manipulation; transition: all 0.18s;
}
.ps-dialog-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.ps-dialog-sub {
  margin: 0; padding: 8px 18px; font-size: 12px; color: #7d8590; flex-shrink: 0;
}

.ps-dialog-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap; flex-shrink: 0;
  position: sticky; bottom: 0;
  background: #272b31; border-radius: 0 0 14px 14px;
}

/* ── Shared button styles ─────────────────────────── */
.ps-btn {
  padding: 9px 16px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: all 0.16s; touch-action: manipulation; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.ps-btn-primary   { background: linear-gradient(135deg,#ff9800,#f57c00); color:#000; border-color:#ff9800; }
.ps-btn-primary:hover   { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,152,0,0.4); }
.ps-btn-secondary { background: rgba(255,255,255,0.06); color:#b9c0c7; border-color:rgba(255,255,255,0.1); }
.ps-btn-secondary:hover { background: rgba(255,255,255,0.1); color:#f6f7f9; }
.ps-btn-danger    { background: rgba(220,53,69,0.18); color:#f87171; border-color:rgba(220,53,69,0.3); }
.ps-btn-danger:hover    { background: rgba(220,53,69,0.32); border-color:#dc3545; }

/* ── Playlist / word-set selector dialog ─────────── */
.ps-pl-dialog {
  background: #272b31;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: min(960px, 96vw);
  max-height: min(90vh, 760px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

/* ── Tab bar row ──────────────────────────────────── */
.ps-pl-tabbar-wrap {
  display: flex; align-items: stretch; flex-shrink: 0;
  background: rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(255,152,0,0.15);
}
.ps-pl-scroll-btn {
  background: none; border: none; color: rgba(255,152,0,0.7);
  font-size: 22px; line-height: 1; padding: 0 10px; cursor: pointer;
  flex-shrink: 0; transition: color 0.15s, background 0.15s;
}
.ps-pl-scroll-btn:hover { color: #ff9800; background: rgba(255,152,0,0.08); }
.ps-pl-scroll-btn[hidden] { display: none; }
.ps-pl-tabbar {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  flex: 1; padding: 0 4px;
}
.ps-pl-tabbar::-webkit-scrollbar { display: none; }
.ps-pl-tab {
  background: none; border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 16px;
  font-size: 13px; font-weight: 700; color: #7d8590;
  cursor: pointer; white-space: nowrap;
  touch-action: manipulation; transition: all 0.2s; flex-shrink: 0;
}
.ps-pl-tab:hover  { color: #f6f7f9; background: rgba(255,255,255,0.04); }
.ps-pl-tab.active { color: #ff9800; border-bottom-color: #ff9800; }

/* ── Quick-select toolbar ─────────────────────────── */
.ps-pl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  background: rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0; flex-wrap: wrap; gap: 6px;
}
.ps-pl-hint      { font-size: 11px; color: #7d8590; font-style: italic; flex-shrink: 1; min-width: 0; }
.ps-pl-tool-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.ps-tbtn {
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: #b9c0c7;
  font-size: 12px; font-weight: 700;
  cursor: pointer; touch-action: manipulation; min-height: 30px; transition: all 0.15s;
}
.ps-tbtn:hover        { background: rgba(255,255,255,0.1); color: #f6f7f9; }
/* ✓ Tab / ✓ All — JHACAL orange accent */
.ps-tbtn-green        { border-color: rgba(255,152,0,0.4); color: #ff9800; }
.ps-tbtn-green:hover  { background: rgba(255,152,0,0.12); }
/* ✗ Tab / ✗ All — subtle red */
.ps-tbtn-red          { border-color: rgba(220,53,69,0.3); color: #f87171; }
.ps-tbtn-red:hover    { background: rgba(220,53,69,0.15); }

/* ── Card content area ────────────────────────────── */
.ps-pl-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 10px 14px 4px; overscroll-behavior: contain;
}
.ps-pl-content::-webkit-scrollbar { width: 5px; }
.ps-pl-content::-webkit-scrollbar-thumb { background: rgba(255,152,0,0.25); border-radius: 3px; }

.ps-pl-panel        { display: none; }
.ps-pl-panel.active { display: block; }

/* ── Word-set card grid ───────────────────────────── */
/*
 * 5-column responsive grid. minmax(180px) gives each name enough room to
 * avoid truncation while still packing tightly on narrow viewports.
 */
.ps-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 7px; padding-bottom: 6px;
}

.ps-sub-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; cursor: pointer;
  transition: all 0.18s; position: relative; touch-action: manipulation;
  -webkit-user-select: none; min-height: 42px;
}
.ps-sub-item:hover {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2);
}
@media (hover: none) {
  .ps-sub-item:active {
    background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25);
    transform: scale(0.98);
  }
}

/* JHACAL orange selected state (was green) */
.ps-sub-item.ps-selected {
  background: rgba(255,152,0,0.13);
  border-color: rgba(255,152,0,0.55);
}

.ps-sub-item input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: #ff9800;   /* JHACAL orange tick */
  flex-shrink: 0; pointer-events: none;
  margin-top: 2px;         /* optical alignment with first text line */
}

/*
 * Label — full text, wraps on to multiple lines.
 * No overflow:hidden / text-overflow / white-space:nowrap here.
 */
.ps-sub-label {
  flex: 1; font-size: 12px; color: #d1d5db; cursor: pointer;
  white-space: normal; line-height: 1.4;
}
.ps-sub-item.ps-selected .ps-sub-label { color: #ffd54f; font-weight: 600; }

.ps-sub-count {
  font-size: 10px; color: #7d8590; flex-shrink: 0;
  margin-top: 2px; /* align with checkbox top */
}

/* Edit button on editable subsets */
.ps-sub-edit-btn {
  position: absolute; right: 5px; top: 5px;
  background: rgba(255,152,0,0.15); border: 1px solid rgba(255,152,0,0.4);
  border-radius: 4px; width: 22px; height: 22px; font-size: 12px;
  color: #ff9800; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.18s; touch-action: manipulation;
}
.ps-sub-edit-btn:hover { background: rgba(255,152,0,0.35); color: #fff; }

/* ── Word preview popup (hover tooltip, desktop) ─── */
.ps-word-preview {
  position: fixed;
  background: rgba(22,26,30,0.97);
  border: 2px solid #ff9800; border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 2000; pointer-events: none;
  opacity: 0; transition: opacity 0.18s ease;
  max-width: 320px; min-width: 160px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ps-word-preview.ps-show { opacity: 1; }
.ps-wp-title {
  font-size: 12px; font-weight: 700; color: #ff9800;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,152,0,0.25);
}
.ps-wp-pills  { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-wp-pill   {
  background: rgba(255,152,0,0.14); padding: 3px 7px;
  border-radius: 4px; border: 1px solid rgba(255,152,0,0.28);
  font-size: 11px; color: #e5e7eb;
}
.ps-wp-count  { font-size: 10px; color: #9ca3af; margin-top: 6px; text-align: right; }

/* Hide tooltip on mobile (touch devices use bottom-sheet or tap-toggle) */
@media (max-width: 768px) {
  .ps-word-preview { display: none !important; }
}