/* pages.css — shared styles for shell-internal pages (dashboard, apps, settings, audit). */

.page-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.page-card h3 { margin: 0 0 12px; font-size: 15px; color: var(--accent); font-weight: 600; }
.page-card h4 { margin: 0 0 8px;  font-size: 13px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.page-intro {
  font-size: 13px; color: var(--text2);
  margin-bottom: 18px;
  max-width: 800px; line-height: 1.55;
}

/* Form rows for settings pages */
.form-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.form-row:last-child { border-bottom: 0; }
.form-row .label { font-size: 13px; color: var(--text2); }
.form-row .label .desc { display: block; color: var(--text3); font-size: 11px; margin-top: 2px; }
.form-row .field input,
.form-row .field textarea,
.form-row .field select { width: 100%; }
.form-row .field textarea { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; min-height: 96px; }
.form-row .field input[type="checkbox"] { width: auto; }
.form-row .save-status { font-size: 11px; color: var(--text3); min-width: 60px; text-align: right; }
.form-row .save-status.ok    { color: var(--accent); }
.form-row .save-status.err   { color: var(--red);    }
.form-row .save-status.busy  { color: var(--yellow); }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .form-row .save-status { text-align: left; }
}

/* Category jumper for site-settings */
.cat-jumper {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cat-jumper button {
  padding: 4px 10px; font-size: 12px;
  background: var(--bg3); color: var(--text2);
  border: 1px solid var(--border); border-radius: 999px;
}
.cat-jumper button:hover { background: var(--bg4); color: var(--text); }
.cat-jumper button.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

/* Apps grid */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.app-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.app-card .app-head { display: flex; align-items: center; gap: 12px; }
.app-card .app-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.app-card .app-name { font-size: 15px; font-weight: 600; color: var(--text); }
.app-card .app-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.app-card .app-version {
  display: inline-block;
  background: var(--bg3); color: var(--accent);
  padding: 2px 8px; border-radius: 4px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  margin-left: 6px;
}
.app-card .app-steps {
  background: var(--bg3); border-radius: 6px;
  padding: 10px 12px; font-size: 12px; color: var(--text2);
  white-space: pre-wrap;
  max-height: 220px; overflow-y: auto;
}
.app-card .app-steps h2,
.app-card .app-steps h3,
.app-card .app-steps h4 { margin: 6px 0 4px; font-size: 12px; color: var(--text); }
.app-card .app-actions { display: flex; gap: 6px; margin-top: auto; }
.app-card .app-actions a.dl-btn {
  flex: 1; text-align: center; padding: 8px 12px;
  background: var(--accent); color: #000; border-radius: 6px;
  text-decoration: none; font-weight: 600; font-size: 13px;
}
.app-card .app-actions a.dl-btn:hover { background: var(--accent2); }
.app-card .app-actions button.edit-btn { padding: 8px 12px; font-size: 12px; }

/* Modal (simple, used for app edit) */
.simple-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.simple-modal .modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  width: min(560px, 92vw); max-height: 90vh; overflow-y: auto;
}
.simple-modal h3 { margin: 0 0 14px; font-size: 15px; color: var(--accent); }
.simple-modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* Devices table (user-settings) */
.devices-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.devices-table th, .devices-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.devices-table th { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.devices-table tbody tr:hover { background: var(--bg3); }

/* Empty state */
.empty-state {
  padding: 40px 20px; text-align: center;
  color: var(--text3); font-size: 13px;
}
.empty-state .icon { font-size: 32px; opacity: 0.6; margin-bottom: 10px; display: block; }

/* Personal Settings — Chat sounds rows */
.snd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  flex-wrap: wrap;
}
.snd-row .snd-left { flex: 1; min-width: 140px; }
.snd-row .snd-name { font-size: 13px; font-weight: 600; color: var(--text); }
.snd-row .snd-file { font-size: 11px; }
.page-card .help { font-size: 11.5px; color: var(--text3); margin: 4px 0 10px; }

/* ─── v1-parity modal + form + button styles for Models / Team Members pages ─── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 1000; padding: 24px 12px; overflow: auto;
}
.modal-overlay.open { display: flex; }
.modal-overlay .modal {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; min-width: 320px; max-width: min(560px, calc(100vw - 16px));
  width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.4); color: var(--text);
}
.modal-overlay .modal-wide { max-width: min(800px, calc(100vw - 16px)); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px;
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--accent); }
.modal-close {
  background: none; border: none; color: var(--text3); font-size: 18px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body { display: block; }
.modal-footer {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}

.field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; color: var(--text3); font-weight: 600; }
.field input[type="text"], .field input[type="password"], .field input[type="tel"],
.field input[type="number"], .field input[type="search"], .field input[type="email"],
.field input[type="date"], .field select, .field textarea,
.modal-body input[type="text"], .modal-body input[type="password"], .modal-body input[type="tel"],
.modal-body input[type="number"], .modal-body input[type="search"], .modal-body input[type="email"],
.modal-body input[type="date"], .modal-body select, .modal-body textarea {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg3); color: var(--text); font-size: 13px;
}
.field-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.field-row .field { flex: 1; min-width: 180px; }

.btn { padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer;
       border: 1px solid transparent; background: var(--bg3); color: var(--text); }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm { font-size: 11px; padding: 4px 8px; }
.btn-accent  { background: var(--accent); color: #001a14; border-color: var(--accent); font-weight: 600; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--text2); }
.btn-danger  { background: rgba(255,59,48,.15); color: #ff3b30; border-color: rgba(255,59,48,.4); }

.payout-type-btn {
  flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg3); color: var(--text); cursor: pointer; font-size: 13px;
}
.payout-type-btn.selected { border-color: var(--accent); color: var(--accent); background: rgba(0,229,160,.08); }

.tier-row { display: grid; grid-template-columns: 1fr auto 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.tier-row input { width: 100%; }
.tier-remove { background: transparent; border: 1px solid var(--border); border-radius: 6px;
               color: var(--text3); cursor: pointer; padding: 3px 8px; }
.tier-remove:hover { border-color: #ff3b30; color: #ff3b30; }

/* Status pill (team members) */
.status-pill { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-family: 'DM Mono', monospace; }
.status-pill.active   { background: rgba(0,229,160,.15);  color: var(--accent); }
.status-pill.inactive { background: var(--bg3); color: var(--text3); }

/* Role badges (mirror v1) */
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; font-family: 'DM Mono', monospace; letter-spacing: .3px; }
.role-badge-site_owner       { background: rgba(255,140,0,.18);  color: #ff8c00; }
.role-badge-super_admin      { background: rgba(255,59,48,.18);  color: #ff3b30; }
.role-badge-admin            { background: rgba(0,229,160,.18);  color: var(--accent); }
.role-badge-manager          { background: rgba(88,86,214,.18);  color: #8a87f5; }
.role-badge-monitor          { background: rgba(255,204,0,.18);  color: #ffcc00; }
.role-badge-accountant       { background: rgba(0,122,255,.18);  color: #4ea0ff; }
.role-badge-receptionist     { background: rgba(175,82,222,.18); color: #c46ff0; }
.role-badge-viewer           { background: var(--bg3); color: var(--text3); }
.role-badge-social_media     { background: rgba(0,180,200,.18); color: #2dd4ec; }
.role-badge-recruiter        { background: rgba(0,180,200,.18); color: #2dd4ec; }
.role-badge-video_production { background: rgba(0,180,200,.18); color: #2dd4ec; }
.role-badge-model            { background: rgba(0,229,160,.10); color: var(--accent); }

/* Permissions grid */
.perm-grid { display: flex; flex-direction: column; gap: 6px; }
.perm-category { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.perm-category-hdr { display: flex; align-items: center; justify-content: space-between;
                     padding: 8px 10px; background: var(--bg3); cursor: pointer; user-select: none; font-size: 13px; }
.perm-category-hdr .cat-count { color: var(--text3); font-size: 11px; font-family: 'DM Mono', monospace; margin-left: 6px; }
.perm-category-hdr .cat-links a { color: var(--accent); cursor: pointer; font-size: 11px; margin-left: 8px; }
.perm-category-body { display: none; padding: 8px 10px; }
.perm-category.open .perm-category-body { display: block; }
.perm-row { padding: 4px 0; }
.perm-row label { display: flex; gap: 8px; cursor: pointer; font-size: 12px; }

/* mtbl-avatar-initial used by models list */
.mtbl-avatar-initial { width: 60px; height: 60px; border-radius: 50%; background: var(--bg3);
                       display: flex; align-items: center; justify-content: center;
                       font-family: 'Inter', sans-serif; font-weight: 600; font-size: 20px; color: var(--accent); flex-shrink: 0; }

/* ── 2026-05-04: mobile-friendly horizontal scroll for tables in Models +
   Team Members lists. Wrap holds a wider-than-screen <table>.
   Goals: (a) the scrollbar is OBVIOUSLY scrollable (accent green, always
   visible — not auto-hide); (b) a green "← swipe →" cue stays in the phone
   viewport even when the table is taller than the screen, so the user
   doesn't have to scroll vertically to discover the horizontal scroll. */
.mobile-scroll-wrap {
  position: relative;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
  padding-top: 24px;             /* clearance for the sticky cue band */
  scrollbar-color: var(--accent) rgba(0,229,160,0.10); /* Firefox */
  scrollbar-width: thin;
}
.mobile-scroll-wrap::-webkit-scrollbar         { height: 10px; -webkit-appearance: none; }
.mobile-scroll-wrap::-webkit-scrollbar-track   { background: rgba(0,229,160,0.10); border-radius: 6px; }
.mobile-scroll-wrap::-webkit-scrollbar-thumb   { background: var(--accent); border-radius: 6px; min-width: 40px; }
.mobile-scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); opacity: .85; }

/* Sticky "← swipe →" cue — pinned to the top of the wrap; sticks to the
   viewport while user vertically scrolls through tall tables, so the
   scroll affordance is visible without hunting for the scrollbar. */
.mobile-scroll-wrap::before {
  content: '← swipe →';
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  background: var(--accent);
  color: #000;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 0 0 6px 0;
  z-index: 2;
  pointer-events: none;
  margin-top: -22px;             /* park inside the padding-top gap */
  margin-bottom: 6px;
}
/* Wide screens — hide both the cue + the always-on bar. They exist for the
   phone case only; desktop falls back to plain auto-overflow. */
@media (min-width: 769px) {
  .mobile-scroll-wrap { overflow-x: auto; padding-top: 0; }
  .mobile-scroll-wrap::before { display: none; }
  .mobile-scroll-wrap::-webkit-scrollbar { height: 8px; }
}


/* ===== ACCOUNTS MODAL (port from v1 styles-base.css 2026-05-05) ===== */
#modal-accounts > .modal { max-width: min(95vw, 1400px) !important; width: 95vw !important; }
#modal-accounts .acct-table-wrap { max-height: calc(90vh - 200px); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
#modal-accounts .acct-table-wrap table { border-collapse: collapse; width: 100%; }
#modal-accounts .acct-table-wrap thead th { position: sticky; top: 0; z-index: 10; background: var(--bg2); box-shadow: 0 1px 0 var(--border); padding: 10px 14px; font-size: 11px; white-space: nowrap; }
#modal-accounts .acct-table-wrap td { padding: 10px 14px; font-size: 13px; vertical-align: middle; }
#acct-tbody tr:nth-child(odd) td   { background: rgba(255,255,255,.025); }
#acct-tbody tr:nth-child(even) td  { background: rgba(255,255,255,.055); }
#acct-tbody tr:hover td            { background: rgba(255,255,255,.08); }
#acct-inactive-tbody tr:nth-child(odd) td  { background: rgba(255,255,255,.015); opacity: .7; }
#acct-inactive-tbody tr:nth-child(even) td { background: rgba(255,255,255,.04);  opacity: .7; }
#acct-inactive-tbody tr:hover td   { background: rgba(255,255,255,.06); opacity: 1; }
.acct-copy-cell { cursor: pointer; font-family: 'DM Mono', monospace; font-size: 12px; transition: color .15s; }
.acct-copy-cell:hover { color: var(--accent); }
.acct-pwd-btn { background: none; border: 1px solid var(--border2, var(--border)); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; font-family: 'DM Mono', monospace; color: var(--text2); transition: all .15s; white-space: nowrap; }
.acct-pwd-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,229,160,.08); }
.acct-section-label { font-size: 12px; font-weight: 600; color: var(--text3); padding: 12px 14px 8px; border-top: 2px solid var(--border); }
.status-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-family: 'DM Mono', monospace; font-weight: 500; white-space: nowrap; }
.status-pill.active   { background: rgba(0,229,160,.12); color: var(--accent); }
.status-pill.inactive { background: var(--bg3); color: var(--text2); }


/* ===== WORKING ON (Sabin only) — 2026-05-15 ===== */
.wo-page { max-width: 900px; margin: 0 auto; padding: 8px; }
.wo-banner {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 14px;
  font-size: 16px;
}
.wo-banner-label { font-weight: 600; color: var(--accent); }
.wo-banner-time  { font-family: 'DM Mono', monospace; font-size: 18px; color: var(--text2); }
.wo-banner-idle  { color: var(--text3); font-style: italic; justify-content: center; }

.wo-btn {
  display: block; width: 100%;
  min-height: 64px;
  margin: 10px 0;
  padding: 18px 20px;
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 18px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.wo-btn:hover  { background: var(--bg3, rgba(255,255,255,.05)); }
.wo-btn:active { transform: scale(0.985); }
.wo-btn.wo-busy { opacity: .55; pointer-events: none; }

.wo-btn-stop {
  background: #b13a3a; color: #fff; border-color: #b13a3a;
  font-size: 20px; letter-spacing: 1.5px;
}
.wo-btn-stop:hover { background: #c44545; border-color: #c44545; }

.wo-personal-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin: 10px 0;
}
.wo-personal-row .wo-btn { margin: 0; min-height: 80px; }

.wo-active {
  background: rgba(0,229,160,.14) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(0,229,160,.25) inset;
}

@media (max-width: 600px) {
  .wo-personal-row { grid-template-columns: 1fr; }
  .wo-personal-row .wo-btn { min-height: 64px; }
  .wo-btn { font-size: 17px; }
}


/* ===== WORKING ON — modal buttons (Stop / Pause / Cancel) ===== */
.wo-modal-btn {
  width: 100%; padding: 14px 16px;
  font-size: 15px; font-weight: 600;
  border-radius: 10px; cursor: pointer;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg2); color: var(--text);
  transition: background .12s, border-color .12s;
}
.wo-modal-btn:hover { background: var(--bg3, rgba(255,255,255,.05)); }
.wo-modal-btn-stop  { background: rgba(225, 78, 79, .12); border-color: #b13a3a; color: #ff8585; }
.wo-modal-btn-stop:hover  { background: rgba(225, 78, 79, .20); }
.wo-modal-btn-pause { background: rgba(0, 229, 160, .10); border-color: var(--accent); color: var(--accent); }
.wo-modal-btn-pause:hover { background: rgba(0, 229, 160, .18); }
.wo-modal-btn-cancel { color: var(--text2); }


/* ===== Global ticker bar — Help-models button (phase 1, 2026-05-15) ===== */
.tt-btn-help { background: rgba(0, 229, 160, .12); color: var(--accent); border: 1px solid var(--accent); }
.tt-btn-help:hover:not([disabled]) { background: rgba(0, 229, 160, .22); }
.tt-btn-help-active { background: #b13a3a !important; color: #fff !important; border-color: #b13a3a !important; }
.tt-btn-help-active:hover:not([disabled]) { background: #c44545 !important; }