/* Dropship Monitor — Phase 2d-1
 * Unified stylesheet extracted from inline <style> blocks of all templates.
 * Templates still ship inline <style> until Tasks 4-9 strip them; specificity
 * keeps existing pages visually unchanged in the meantime.
 */

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Helvetica Neue", sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
  font-size: 13px;
}

/* ===== Layout (header / nav / container) ===== */
header {
  background: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dde1e7;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
header h1 { font-size: 15px; font-weight: 700; color: #1a1a2e; }
nav a { color: #666; text-decoration: none; margin-left: 16px; font-size: 13px; }
nav a:hover { color: #1a73e8; }
nav a.active { color: #1a73e8; font-weight: 600; }

.container { max-width: 960px; margin: 0 auto; padding: 14px 20px; }
.back { color: #1a73e8; text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 16px; }
.back:hover { text-decoration: underline; }

/* ===== Cards & headings ===== */
.card {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: 16px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
h2 { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: #1a1a2e; display: flex; align-items: center; gap: 8px; }

/* ===== Buttons ===== */
.btn {
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn-primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.btn-primary:hover { background: #1557b0; }
.btn-secondary { background: #fff; color: #444; border-color: #ccc; }
.btn-secondary:hover { background: #f5f5f5; }
.btn-danger { background: #fff; color: #c62828; border-color: #e8a0a0; }
.btn-danger:hover { background: #fce8e6; }
.btn-sm { padding: 3px 8px; font-size: 11px; }

/* ===== Badges (stock / sync / platform) ===== */
.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-in  { background: #e6f4ea; color: #1e7e34; }
.badge-out { background: #fce8e6; color: #c62828; }
.badge-unk { background: #f1f3f4; color: #888; }
.badge-err { background: #fce8e6; color: #c62828; }
.badge-neg { background: #fff3cd; color: #856404; }
.badge-um  { background: #e1f5fe; color: #01579b; }
.badge-enabled  { background: #e6f4ea; color: #1e7e34; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-disabled { background: #f1f3f4; color: #888;    padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }

.sync-active      { background: #e6f4ea; color: #1e7e34; }
.sync-unpublished { background: #fce8e6; color: #c62828; }
.sync-zero_stock  { background: #fff3cd; color: #856404; }
.sync-error       { background: #f8d7da; color: #721c24; }
.sync-pending     { background: #f1f3f4; color: #888; }

.platform-badge { padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.platform-shopify { background: #d4edda; color: #155724; }
.platform-reverb  { background: #e8e4f8; color: #3d1a7d; }
.platform-ebay    { background: #fff3cd; color: #856404; }
.platform-shopee  { background: #fce4ec; color: #880e4f; }

/* ===== Logos / generic helpers ===== */
.site-logo { width: 14px; height: 14px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.site-name { font-size: 11px; font-weight: 600; vertical-align: middle; }
.muted { color: #888; }
.num { font-family: 'SF Mono', 'Fira Code', monospace; text-align: right; }
.price-src  { color: #333; }
.price-sell { color: #1a1a2e; font-weight: 600; }
.profit-pos { color: #1e7e34; font-weight: 700; }
.profit-neg { color: #c62828; font-weight: 700; }

/* ===== Forms ===== */
input, select, textarea {
  width: 100%;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #1a1a2e;
  font-size: 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #1a73e8; }
textarea { font-family: 'SF Mono', 'Fira Code', monospace; height: 90px; resize: vertical; font-size: 11px; }
label { display: block; font-size: 11px; color: #888; margin-bottom: 4px; }

.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.form-group { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: 11px; color: #aaa; margin-top: 3px; line-height: 1.4; }

input[type="file"] {
  padding: 6px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  background: #fafbfc;
  width: 100%;
  max-width: 400px;
}

/* ===== Tables ===== */
.tbl-wrap { overflow-x: auto; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
table { width: 100%; border-collapse: collapse; background: #fff; }
thead th {
  background: #f8f9fa;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid #dde1e7;
  border-right: 1px solid #eaecef;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
thead th.r { text-align: right; }
thead th:last-child { border-right: none; }
td {
  padding: 6px 10px;
  border-bottom: 1px solid #eaecef;
  border-right: 1px solid #eaecef;
  font-size: 12px;
  vertical-align: middle;
}
td:last-child { border-right: none; }
tr:hover td { background: #f0f4ff !important; }

thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: #e8f0ff; }
thead th.sortable .sort-arrow { font-size: 10px; color: #888; margin-left: 3px; }
thead th.sortable .sort-arrow.active { color: #1a73e8; font-weight: 700; }

/* ===== Dashboard ===== */
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }

.stats { display: flex; gap: 12px; margin-bottom: 12px; }
.stat { background: #fff; border: 1px solid #dde1e7; border-radius: 6px; padding: 8px 16px; }
.stat .label { font-size: 11px; color: #888; }
.stat .value { font-size: 20px; font-weight: 700; color: #1a1a2e; }

.grp-odd  td { background: #fff; }
.grp-even td { background: #fafbfc; }
.tbl-grouped .grp-sep td { border-top: 2px solid #b0b8c4 !important; }
.tbl-grouped tbody tr:first-child td { border-top: 2px solid #b0b8c4 !important; }
.tbl-grouped tbody tr:last-child td { border-bottom: 2px solid #b0b8c4 !important; }

.row-icon { width: 24px; text-align: center; font-size: 14px; }

.actions { display: flex; gap: 4px; flex-wrap: nowrap; }
.item-name-link { color: #1a73e8; text-decoration: none; }
.item-name-link:hover { text-decoration: underline; }
.add-link { color: #1a73e8; text-decoration: none; font-size: 12px; }
.add-link:hover { text-decoration: underline; }

/* ===== Pagination ===== */
.pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}
.pagination .info { color: #666; }
.pagination input { width: 60px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-align: center; }
.pagination .btn-disabled { color: #ccc; cursor: not-allowed; pointer-events: none; }

/* ===== Sparklines (Phase 2c) ===== */
.sparkline-row { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sparkline-card {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 8px 14px;
  min-width: 200px;
  flex: 1;
  max-width: 320px;
}
.sparkline-card .label { font-size: 11px; color: #888; }
.sparkline-card .value { font-size: 18px; font-weight: 700; color: #1a1a2e; }
.sparkline-wrap { height: 40px; position: relative; }

/* ===== Problem summary banner ===== */
.problem-summary {
  background: #fff8e1;
  border: 1px solid #ffe0a3;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.problem-summary .badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-decoration: none; }

/* ===== Filter form (_filters.html) ===== */
.filter-form {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.quick-filter-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto auto auto auto auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 800px) {
  .quick-filter-row { grid-template-columns: 1fr; }
}
.filter-search { padding: 6px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; }

.filter-multi { position: relative; }
.filter-multi summary {
  cursor: pointer;
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  list-style: none;
  user-select: none;
}
.filter-multi summary::-webkit-details-marker { display: none; }
.filter-multi[open] summary { background: #e8f0ff; border-color: #1a73e8; }
.filter-multi-options {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
  min-width: 140px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.filter-multi-options label { display: block; padding: 3px 6px; font-size: 12px; cursor: pointer; }
.filter-multi-options label:hover { background: #f5f5f5; }
.filter-check { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; }

.filter-advanced summary {
  cursor: pointer;
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  list-style: none;
  user-select: none;
}
.filter-advanced summary::-webkit-details-marker { display: none; }
.filter-advanced[open] summary { background: #e8f0ff; border-color: #1a73e8; }
.filter-advanced-panel {
  background: #fafbfc;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  font-size: 12px;
}
.filter-advanced-panel label { display: flex; align-items: center; gap: 6px; }
.filter-range { display: flex; align-items: center; gap: 6px; }
.filter-range input { width: 80px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; }

/* ===== History page ===== */
.range-selector { display: flex; gap: 4px; margin-bottom: 12px; }
.range-btn {
  padding: 6px 14px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  color: #444;
}
.range-btn.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.chart-wrap { position: relative; height: 360px; }
.empty-msg { color: #888; padding: 20px; text-align: center; }
.source-name { font-size: 14px; font-weight: 600; color: #1a1a2e; margin-bottom: 12px; }
.meta { font-size: 12px; color: #888; margin-bottom: 12px; display: flex; gap: 16px; }

/* ===== Listings page ===== */
.source-info {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.source-info .name { font-size: 14px; font-weight: 700; color: #1a1a2e; margin-bottom: 6px; }
.source-info .meta { font-size: 12px; color: #888; display: flex; gap: 16px; }

/* ===== Import/Export page ===== */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #dde1e7; margin-bottom: 16px; }
.tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab.active { color: #1a73e8; border-bottom-color: #1a73e8; font-weight: 600; }
.panel {
  display: none;
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.panel.active { display: block; }

details {
  margin-top: 16px;
  border: 1px solid #eaecef;
  border-radius: 6px;
  padding: 10px 14px;
  background: #fafbfc;
}
details summary { cursor: pointer; font-weight: 600; font-size: 12px; color: #555; }
details ul { margin: 8px 0 0 20px; font-size: 12px; color: #555; }
details code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  border: 1px solid #eaecef;
}

.summary-card {
  background: #f8f9fa;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 14px;
  margin-top: 14px;
  font-size: 13px;
}
.summary-card .added { color: #1e7e34; font-weight: 700; }
.summary-card .skipped { color: #856404; font-weight: 700; }
.summary-card .errors { color: #c62828; font-weight: 700; }

/* Phase 3f: severity badges */
.badge.sev-info { background:#e6f4ea; color:#1e7e34; }
.badge.sev-warning { background:#fff3cd; color:#856404; }
.badge.sev-error { background:#fce8e6; color:#c62828; }
.badge.sev-critical { background:#5a0a0a; color:#fff; }

/* ===== Mobile (Phase 2d-2) ===== */
@media (max-width: 600px) {
  /* Header / Nav / Container */
  header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 4px;
  }
  header h1 { font-size: 13px; }
  nav {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  nav a {
    margin-left: 12px;
    font-size: 12px;
  }
  .container { padding: 10px 12px; }

  /* Card-mobile-table: dashboard と listings 共通の table → card 切替 */
  .card-mobile-table,
  .card-mobile-table tbody,
  .card-mobile-table tr,
  .card-mobile-table td {
    display: block;
  }
  .card-mobile-table thead { display: none; }
  .card-mobile-table tr {
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }
  .card-mobile-table td {
    padding: 2px 0;
    border: none;
    font-size: 13px;
  }
  .card-mobile-table td.hide-mobile { display: none; }

  /* dashboard 用クラス */
  .card-mobile-table td.col-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .card-mobile-table td.col-profit {
    display: inline-block;
    margin-right: 12px;
  }
  .card-mobile-table td.col-status {
    display: inline-block;
  }

  /* listings 用クラス */
  .card-mobile-table td.col-platform {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .card-mobile-table td.col-price-edit {
    display: block;
    margin: 6px 0;
  }
  .card-mobile-table td.col-price-edit form {
    width: 100%;
  }
  .card-mobile-table td.col-price-edit input {
    flex: 1;
    width: auto !important;
  }

  /* tbl-grouped + card-mobile-table を共存させた時、グループ borders を無効化 */
  .tbl-grouped.card-mobile-table tbody tr:first-child td,
  .tbl-grouped.card-mobile-table tbody tr:last-child td,
  .tbl-grouped.card-mobile-table .grp-sep td {
    border-top: none !important;
    border-bottom: none !important;
  }

  /* Sparkline 縦積み */
  .sparkline-card {
    min-width: 100%;
    max-width: 100%;
  }

  /* Filter form */
  .filter-form .quick-filter-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .filter-form .filter-multi,
  .filter-form .filter-advanced { display: none; }
  .filter-form .mobile-toggle { display: block; width: 100%; }
  .filter-form.expanded .filter-multi,
  .filter-form.expanded .filter-advanced {
    display: block;
    margin-top: 4px;
  }
  .filter-form.expanded .filter-multi[open] .filter-multi-options {
    position: static;  /* mobile では dropdown を展開フローに */
  }

  /* Range selector (history page) */
  .range-selector { flex-wrap: wrap; }

  /* Import/Export tabs */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  input[type="file"] { max-width: 100%; }

  .display-currency-select { margin-left: 6px; font-size: 11px; padding: 2px 4px; }
  .stats-cards { grid-template-columns: 1fr 1fr; }
  .stats-charts-row { grid-template-columns: 1fr; }
}

@media (min-width: 601px) {
  .filter-form .mobile-toggle { display: none; }
}

.display-currency-select {
  margin-left: 12px;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #c7ccd4;
  border-radius: 4px;
  background: #fff;
}

/* Phase 4-auth-lite: role badges */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}
.role-badge.role-admin { background: #5a0a0a; color: #fff; }
.role-badge.role-operator { background: #1a73e8; color: #fff; }

/* Phase 6: stats page */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.stats-card {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 12px;
}
.stats-card .label { font-size: 11px; color: #666; }
.stats-card .value { font-size: 24px; font-weight: 700; margin: 6px 0; }
.stats-card .change { font-size: 11px; }
.stats-card .change.profit-pos { color: #1e7e34; }
.stats-card .change.profit-neg { color: #c62828; }

.stats-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}