/* meo-survey 管理画面 共通スタイル
   デザイントークン：knowledge/design.md / knowledge/ux.md 準拠
   フォント：Inter (Google Fonts) + 日本語フォールバック */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
button{font-family:inherit;}

/* ==========================================================================
   2. :root トークン定義
   ========================================================================== */
:root{
  /* Brand */
  --brand:#4f46e5;
  --brand-dark:#4338ca;
  --brand-light:#eef2ff;
  --brand-muted:#a5b4fc;

  /* Grayscale */
  --heading:#0f172a;
  --body:#334155;
  --muted:#64748b;
  --subtle:#94a3b8;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --bg-page:#f1f5f9;

  /* States */
  --success:#16a34a;
  --success-bg:#f0fdf4;
  --success-border:#bbf7d0;
  --warning:#d97706;
  --warning-bg:#fffbeb;
  --warning-border:#fde68a;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --danger-border:#fecaca;
  --info:#0284c7;
  --info-bg:#f0f9ff;
  --info-border:#bae6fd;

  /* Spacing (8px grid) */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:28px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;

  /* Radius */
  --radius-sm:4px;
  --radius:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 6px rgba(15,23,42,.05),0 2px 4px rgba(15,23,42,.04);
  --shadow-md:0 10px 15px rgba(15,23,42,.06),0 4px 6px rgba(15,23,42,.04);
  --shadow-lg:0 20px 25px rgba(15,23,42,.07),0 8px 10px rgba(15,23,42,.04);

  /* z-index */
  --z-dropdown:100;
  --z-sticky:200;
  --z-header:300;
  --z-modal:400;
  --z-toast:500;
}

/* ==========================================================================
   3. Body / Wrap
   ========================================================================== */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI','Noto Sans JP',sans-serif;
  background:var(--bg-page);color:var(--heading);min-height:100vh;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:var(--sp-6) var(--sp-5);}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:'SF Mono','Menlo','Consolas',monospace;font-size:.92em;background:var(--bg-alt);padding:1px 5px;border-radius:var(--radius-sm);}

/* ==========================================================================
   4. Typography
   ========================================================================== */
h1,h2,h3,h4{color:var(--heading);font-weight:600;letter-spacing:-.01em;}
p{color:var(--body);}

/* ==========================================================================
   5. Header
   ========================================================================== */
.app-header{
  background:var(--bg);border-bottom:1px solid var(--border);
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  z-index:var(--z-header);
}
.app-header .brand{font-size:15px;font-weight:600;color:var(--heading);letter-spacing:-.3px;}
.app-header .brand span{color:var(--brand);}
.app-header nav{display:flex;gap:18px;font-size:13px;}
.app-header nav a{
  color:var(--muted);font-weight:500;padding:4px 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;
}
.app-header nav a:hover{color:var(--body);text-decoration:none;}
.app-header nav a.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;}
.app-header .user-area{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--body);}

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid transparent;background:var(--brand);color:#fff;
  font-family:inherit;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
  line-height:1.3;
}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff;}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand);}
.btn:disabled{background:var(--brand-muted);cursor:not-allowed;color:#fff;}
.btn:disabled:hover{background:var(--brand-muted);}

.btn-outline{background:var(--bg);color:var(--brand);border-color:var(--brand);}
.btn-outline:hover{background:var(--brand-light);color:var(--brand);}
.btn-outline:disabled{background:var(--bg);color:var(--brand-muted);border-color:var(--brand-muted);}
.btn-outline:disabled:hover{background:var(--bg);}

.btn-ghost{background:transparent;color:var(--body);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--bg-alt);color:var(--heading);border-color:var(--border-strong);}

.btn-danger{background:var(--bg);color:var(--danger);border-color:var(--danger-border);}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);}
.btn-danger.btn-filled{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-danger.btn-filled:hover{background:#b91c1c;color:#fff;}

.btn-sm{padding:5px 12px;font-size:12px;}
.btn-lg{padding:12px 28px;font-size:14px;}

/* ==========================================================================
   7. Forms
   ========================================================================== */
.form-row{margin-bottom:var(--sp-5);}
.form-row label{display:block;font-size:13px;font-weight:600;color:var(--heading);margin-bottom:6px;}
.form-row label .req{color:var(--danger);margin-left:4px;}
.form-row .hint{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}

.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=url],
.form-row input[type=tel],
.form-row input[type=number],
.form-row select,
.form-row textarea{
  width:100%;padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--radius);
  font-size:14px;font-family:inherit;color:var(--heading);background:var(--bg);
  transition:border-color .15s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-xs);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand);
}
.form-row input.is-error,.form-row select.is-error,.form-row textarea.is-error{
  border-color:var(--danger);
}
.form-row input.is-error:focus,.form-row select.is-error:focus,.form-row textarea.is-error:focus{
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--danger);
}
.form-row textarea{min-height:90px;resize:vertical;}

.form-row .toggle-list{display:flex;flex-direction:column;gap:8px;}
.form-row .toggle-list label{display:flex;align-items:center;gap:10px;font-weight:400;font-size:13px;cursor:pointer;}
.form-row .toggle-list input[type=checkbox],
.form-row .toggle-list input[type=radio]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand);}
.form-row .toggle-list .fixed{color:var(--muted);font-size:11px;}

.form-error{font-size:12px;color:var(--danger);margin-top:5px;display:flex;align-items:center;gap:4px;}
.form-error::before{content:"⚠";}

.form-section{margin:var(--sp-7) 0 var(--sp-5);padding-top:var(--sp-6);border-top:1px solid var(--border);}
.form-section:first-child{margin-top:0;padding-top:0;border-top:none;}
.form-section h3{font-size:15px;font-weight:600;color:var(--heading);margin-bottom:var(--sp-3);}
.form-section-title{
  font-size:15px;font-weight:600;color:var(--heading);
  margin:var(--sp-7) 0 var(--sp-3);padding-top:var(--sp-6);
  border-top:1px solid var(--border);
}

.form-actions{display:flex;align-items:center;gap:8px;margin-top:var(--sp-6);flex-wrap:wrap;}

/* ==========================================================================
   8. Cards
   ========================================================================== */
.card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6);margin-bottom:var(--sp-4);box-shadow:var(--shadow-sm);
}
.card h2{font-size:18px;font-weight:600;margin-bottom:var(--sp-5);}
.card h3{font-size:15px;font-weight:600;margin-bottom:var(--sp-2);}

/* セクションタイトル */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);gap:8px;flex-wrap:wrap;}
.section-title h2{font-size:18px;font-weight:600;letter-spacing:-.01em;}

/* Info Grid（店舗詳細・アンケート詳細の情報表示） */
.info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-3);
}
.info-grid .info-cell{
  background:var(--bg-alt);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
}
.info-grid .info-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
.info-grid .info-value{font-size:14px;color:var(--heading);font-weight:500;line-height:1.5;word-break:break-word;}

/* ==========================================================================
   9. Tables
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{
  background:var(--bg-alt);font-weight:600;color:var(--muted);
  font-size:12px;text-align:left;padding:10px 16px;border-bottom:1px solid var(--border);
  letter-spacing:.01em;
}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--body);vertical-align:middle;}
.tbl td strong{color:var(--heading);font-weight:600;}
.tbl tr:hover td{background:var(--bg-alt);}
.tbl tr:last-child td{border-bottom:none;}
.tbl .col-actions{text-align:right;white-space:nowrap;}
.tbl .col-actions .btn{margin-left:6px;}

/* ==========================================================================
   10. Badges
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;
  border-radius:var(--radius-full);border:1px solid transparent;line-height:1.5;
  white-space:nowrap;
}
.badge.published{background:var(--success-bg);color:var(--success);border-color:var(--success-border);}
.badge.unpublished{background:var(--bg-alt);color:var(--muted);border-color:var(--border);}
.badge.archived{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border);}
.badge.warn{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border);}
.badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-border);}
.badge.place-id{background:var(--brand-light);color:var(--brand);border-color:rgba(79,70,229,.25);}
.badge.fallback{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border);}

/* ==========================================================================
   11. Empty / Loading
   ========================================================================== */
.empty{text-align:center;padding:48px 24px;color:var(--muted);font-size:13px;}
.empty .empty-icon{font-size:40px;margin-bottom:12px;display:block;line-height:1;}
.empty h3{font-size:16px;font-weight:600;color:var(--heading);margin-bottom:6px;}
.empty p{font-size:13px;color:var(--muted);margin-bottom:16px;}
.empty .btn{margin-top:8px;}
.loading{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px;}

/* ==========================================================================
   12. Stats
   ========================================================================== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5);}
.stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;}
.stat-val{font-size:22px;font-weight:600;color:var(--heading);line-height:1.2;}
.stat-label{font-size:11px;color:var(--muted);margin-top:4px;font-weight:500;}

.stat-bar-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px;}
.stat-bar-row .stat-bar-label{width:32px;color:#f59e0b;font-size:13px;}
.stat-bar-row .stat-bar-track{flex:1;height:8px;background:var(--bg-alt);border-radius:var(--radius-full);overflow:hidden;}
.stat-bar-row .stat-bar-fill{display:block;height:100%;background:#f59e0b;border-radius:var(--radius-full);transition:width .3s ease;}
.stat-bar-row .stat-bar-count{width:36px;text-align:right;color:var(--body);font-variant-numeric:tabular-nums;}

/* ==========================================================================
   13. Toast
   ========================================================================== */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--heading);color:#fff;padding:12px 18px;border-radius:var(--radius);
  font-size:13px;box-shadow:var(--shadow-lg);z-index:var(--z-toast);
  animation:slideUp .2s ease;max-width:90vw;
  border-left:3px solid var(--success);
}
.toast.error{background:var(--danger);border-left-color:#fff;}
@keyframes slideUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ==========================================================================
   14. Modal / Dialog
   ========================================================================== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-dialog{
  background:var(--bg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  max-width:420px;width:100%;animation:dialogIn .2s ease;
}
@keyframes dialogIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-header{padding:var(--sp-5) var(--sp-6) var(--sp-3);}
.modal-header h3{font-size:16px;font-weight:600;color:var(--heading);}
.modal-body{padding:0 var(--sp-6) var(--sp-5);font-size:13px;color:var(--body);line-height:1.7;white-space:pre-wrap;}
.modal-footer{
  padding:var(--sp-4) var(--sp-6);background:var(--bg-alt);border-top:1px solid var(--border);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  display:flex;gap:8px;justify-content:flex-end;
}

/* ==========================================================================
   15. Banner / Alert
   ========================================================================== */
.banner{
  background:var(--warning-bg);border:1px solid var(--warning-border);color:#78350f;
  padding:12px 16px;border-radius:var(--radius);font-size:13px;margin-bottom:var(--sp-4);
  line-height:1.6;
}
.banner.info{background:var(--info-bg);border-color:var(--info-border);color:#0c4a6e;}
.banner.success{background:var(--success-bg);border-color:var(--success-border);color:#14532d;}
.banner.danger{background:var(--danger-bg);border-color:var(--danger-border);color:#991b1b;}

/* ==========================================================================
   16. Tabs
   ========================================================================== */
.tab-list{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:var(--sp-6);}
.tab-btn{
  padding:10px 20px;font-size:13px;font-weight:500;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:color .15s ease,border-color .15s ease;
}
.tab-btn:hover{color:var(--body);}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ==========================================================================
   17. Filter Bar / Misc
   ========================================================================== */
.filter-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 0 var(--sp-3);border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-3);font-size:12px;color:var(--body);
}
.filter-bar label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.filter-bar input[type=checkbox]{accent-color:var(--brand);}

/* ==========================================================================
   18. Responsive
   ========================================================================== */
@media(max-width:640px){
  .wrap{padding:var(--sp-4) var(--sp-3);}
  .app-header{padding:10px 14px;flex-wrap:wrap;}
  .app-header nav{order:3;width:100%;justify-content:flex-start;padding-top:6px;}
  .card{padding:var(--sp-4);border-radius:var(--radius);}
  .tbl th,.tbl td{padding:8px 10px;font-size:12px;}
  .tbl .col-actions .btn{margin-left:4px;padding:4px 8px;font-size:11px;}
  .form-actions{flex-direction:column;align-items:stretch;}
  .form-actions .btn{width:100%;}
  .modal-dialog{max-width:100%;}
}