/* =========================================================
   Tribe Marketing — アプリ・レイアウト（サイドバー型）
   クライアント版 TribeHub のデザイントークンを移植。
   既存 style.css とは独立。クラス名は app-/sb-/kpi- 等で衝突回避。
   ========================================================= */
:root{
  --app-bg:#FAF7F2;
  --app-fg:#26201A;
  --app-card:#FFFFFF;
  --app-primary:#D97706;
  --app-primary-600:#C2620B;
  --app-primary-soft:#FEF3E2;
  --app-muted-fg:#8A7D6B;
  --app-border:#EAE4D8;
  /* 意味ベースの状態色（承認=ok / 却下・エラー=danger） */
  --ok-fg:#2F7A4B;
  --ok-soft:#E3F0E1;
  --ok-border:#C5E0C2;
  --danger-fg:#B3322C;
  --danger-soft:#FBE4E4;
  --danger-border:#F2C4C2;
  --sb-bg:#110D08;
  --sb-fg:rgb(232,224,208);
  --sb-fg-hover:rgb(255,244,224);
  --sb-icon:rgb(214,196,166);
  --sb-section:rgb(214,158,92);
  --sb-border:rgba(140,90,20,0.18);
  --app-radius:0.875rem;
  --app-font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}

/* リセット（ページ単位・app-shell 配下のみに極力閉じる） */
.app-shell *{box-sizing:border-box;margin:0;padding:0}
.app-shell{font-family:var(--app-font);background:var(--app-bg);color:var(--app-fg);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh}
.app-shell a{text-decoration:none;color:inherit}
.app-shell svg{display:block}

/* ===== サイドバー ===== */
.app-sidebar{width:240px;flex-shrink:0;background:var(--sb-bg);border-right:1px solid var(--sb-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-logo{display:flex;align-items:center;gap:10px;padding:0 20px;height:56px;flex-shrink:0;border-bottom:1px solid var(--sb-border)}
.sb-logo .mark{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 3px 10px rgba(245,158,11,.35);color:#fff}
.sb-logo .name{font-weight:700;font-size:17px;letter-spacing:-.01em;color:#fff}
.sb-logo .name .accent{color:#F59E0B}
.sb-logo .beta{font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:5px;background:rgba(245,158,11,.18);color:#F59E0B;border:1px solid rgba(245,158,11,.35)}

.sb-nav{flex:1;padding:8px;overflow-y:auto}
.sb-section{padding:20px 12px 6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--sb-section)}
.app-sidebar .sb-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--sb-fg);transition:all .12s;cursor:pointer}
.app-sidebar .sb-link:hover{background:rgba(245,158,11,.08);color:var(--sb-fg-hover)}
.app-sidebar .sb-link .ico{flex-shrink:0;color:var(--sb-icon);display:flex}
.app-sidebar .sb-link:hover .ico{color:var(--sb-fg-hover)}
.app-sidebar .sb-link .label{flex:1}
.app-sidebar .sb-link .sb-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;min-width:18px;text-align:center;color:#fff;background:#D97706;box-shadow:0 0 8px rgba(217,119,6,.4)}
.app-sidebar .sb-link.active{background:rgba(245,158,11,.12);color:var(--sb-fg-hover)}
.app-sidebar .sb-link.active .ico{color:#F59E0B}

.sb-user{padding:12px 8px;flex-shrink:0;border-top:1px solid var(--sb-border)}
.sb-user .row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.sb-user .avatar{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 2px 8px rgba(245,158,11,.3);flex-shrink:0;overflow:hidden}
.sb-user .avatar img{width:100%;height:100%;object-fit:cover}
.sb-user .uname{font-size:13px;font-weight:500;color:#fff;line-height:1.2;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user .rolebadge{display:inline-block;margin-top:3px;font-size:10px;font-weight:600;padding:1px 7px;border-radius:6px}
.rolebadge.role-admin{background:rgba(239,68,68,.15);color:#FCA5A5;border:1px solid rgba(239,68,68,.2)}
.rolebadge.role-member{background:rgba(180,140,80,.15);color:#D4B483;border:1px solid rgba(180,140,80,.22)}
.sb-logout{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:12px;font-size:13px;color:rgba(180,140,80,.55);background:none;border:none;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:4px}
.sb-logout:hover{color:#FCA5A5;background:rgba(239,68,68,.1)}

/* ===== メイン ===== */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-topbar{height:56px;flex-shrink:0;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:flex-end;padding:0 28px;gap:14px}
.app-topbar .pill{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--app-muted-fg);border:1px solid var(--app-border);padding:6px 12px;border-radius:999px}
.app-content{padding:28px;max-width:1180px;width:100%;margin:0 auto}

.app-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.app-page-head h1{font-size:24px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.app-page-head .sub{margin-top:6px;font-size:14px;color:var(--app-muted-fg)}
.app-btn-primary{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#F59E0B,#EA580C);color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:12px;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(234,88,12,.28);font-family:inherit;white-space:nowrap}
.app-btn-primary:hover{filter:brightness(1.05)}

/* KPIカード */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:var(--app-card);border:1px solid var(--app-border);border-radius:var(--app-radius);padding:18px}
.kpi.lead{background:var(--app-primary-soft);border-color:#F6DDB6}
.kpi .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi .icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.kpi .icon.amber{background:#FDEBCF;color:#C2620B}
.kpi .icon.green{background:#E3F0E1;color:#3F7A4B}
.kpi .cap{font-size:12px;color:var(--app-muted-fg)}
.kpi .val{font-size:30px;font-weight:700;line-height:1}
.kpi .val small{font-size:14px;font-weight:600;color:var(--app-muted-fg);margin-left:2px}
.kpi .note{margin-top:7px;font-size:12px;color:var(--app-muted-fg)}
.kpi.lead .note{color:var(--app-primary-600)}

/* パネル/テーブル */
.app-panel{background:var(--app-card);border:1px solid var(--app-border);border-radius:var(--app-radius);overflow:hidden}
.app-panel .phead{padding:16px 18px;border-bottom:1px solid var(--app-border);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.app-table{width:100%;border-collapse:collapse}
.app-table th{text-align:left;font-size:12px;font-weight:600;color:var(--app-muted-fg);padding:11px 18px;background:#FBF9F4}
.app-table td{font-size:14px;padding:13px 18px;border-top:1px solid var(--app-border)}
.pill-status{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.pill-status.s-active{background:#E3F0E1;color:#3F7A4B}
.pill-status.s-draft{background:#F0EDE6;color:#8A7D6B}
.pill-status.s-completed{background:#E6EDF5;color:#4B6A86}
.app-empty{padding:26px 18px;text-align:center;color:var(--app-muted-fg);font-size:14px}

/* タブ（キャンペーン切替など） */
.app-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.app-tabs .app-tab{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--app-border);background:var(--app-card);color:var(--app-muted-fg);transition:all .12s}
.app-tabs .app-tab:hover{border-color:var(--app-primary);color:var(--app-primary)}
.app-tabs .app-tab.current{background:var(--app-primary-soft);border-color:#F6DDB6;color:var(--app-primary-600)}

/* 通知バナー */
.app-notice{padding:11px 16px;border-radius:10px;font-size:14px;margin-bottom:16px;background:var(--ok-soft);color:var(--ok-fg);border:1px solid var(--ok-border);border-left:3px solid var(--ok-fg)}
.app-error{padding:11px 16px;border-radius:10px;font-size:14px;margin-bottom:16px;background:var(--danger-soft);color:var(--danger-fg);border:1px solid var(--danger-border);border-left:3px solid var(--danger-fg)}

/* 行内アクションボタン（承認=ソリッド緑 / 却下=アウトライン） */
.row-actions{display:flex;gap:8px;white-space:nowrap}
.row-actions form{margin:0}
.app-btn-success,.app-btn-danger{font-size:13px;font-weight:600;padding:7px 14px;border-radius:9px;border:1px solid transparent;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;line-height:1.2}
.app-btn-success{background:var(--ok-fg);color:#fff;border-color:var(--ok-fg);box-shadow:0 2px 8px rgba(47,122,75,.22)}
.app-btn-success:hover{filter:brightness(1.05)}
.app-btn-danger{background:var(--danger-soft);color:var(--danger-fg);border-color:var(--danger-border)}
.app-btn-danger:hover{background:#F6D5D4}

/* レスポンシブ（簡易・幅が狭い時はサイドバーを上に畳む） */
@media (max-width:860px){
  .app-shell{flex-direction:column}
  .app-sidebar{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;overflow-x:auto}
  .app-sidebar .sb-nav{display:flex;gap:4px;padding:4px}
  .app-sidebar .sb-section{display:none}
  .app-sidebar .sb-user{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* 自分の行ハイライト（ランキング等で本人を強調） */
.app-table tr.app-row-me td{background:var(--app-primary-soft)}
.app-table tr.app-row-me td:first-child{box-shadow:inset 3px 0 0 var(--app-primary)}

/* フォーム・プリミティブ（member/survey/cases で共用） */
.app-form{display:flex;flex-direction:column;gap:16px;padding:18px}
.app-form .app-field{display:flex;flex-direction:column;gap:6px}
.app-form .app-field-label{font-size:13px;font-weight:600;color:var(--app-fg)}
.app-form input,.app-form select,.app-form textarea{font-family:inherit;font-size:14px;color:var(--app-fg);background:var(--app-card);border:1px solid var(--app-border);border-radius:10px;padding:10px 12px;width:100%;transition:border-color .12s,box-shadow .12s}
.app-form input:focus,.app-form select:focus,.app-form textarea:focus{outline:none;border-color:var(--app-primary);box-shadow:0 0 0 3px var(--app-primary-soft)}
.app-form textarea{resize:vertical;min-height:56px}
.app-form .app-form-actions{display:flex;justify-content:flex-end;gap:10px}

/* KPI を2列で見せる（マイページの順位・合計pt 等） */
.kpis-2{grid-template-columns:repeat(2,1fr)}
.app-radio-group{display:flex;flex-wrap:wrap;gap:10px}
.app-radio{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--app-fg);padding:9px 14px;border:1px solid var(--app-border);border-radius:10px;cursor:pointer;transition:border-color .12s,background .12s}
.app-radio:hover{border-color:var(--app-primary)}
.app-radio input[type=radio]{width:auto;margin:0;accent-color:var(--app-primary)}
.case-list{display:flex;flex-direction:column;gap:14px;padding:18px}
.case-card{border:1px solid var(--app-border);border-radius:var(--app-radius);padding:16px;background:var(--app-card)}
.case-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.case-title{font-size:15px;font-weight:700;color:var(--app-fg)}
.case-body{font-size:14px;color:var(--app-fg);line-height:1.7;white-space:pre-wrap;margin:0 0 10px}
.case-meta{font-size:12px;color:var(--app-muted-fg)}
.app-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.app-badge-ok{background:var(--ok-soft);color:var(--ok-fg);border-color:var(--ok-border)}
.app-badge-danger{background:var(--danger-soft);color:var(--danger-fg);border-color:var(--danger-border)}
.app-badge-warn{background:var(--app-primary-soft);color:var(--app-primary-600);border-color:#F6DDB6}
.app-badge-info{background:#EEF2FF;color:#3730A3;border-color:#C7D2FE}
.chat-panel{padding:0}
#chat{display:flex;flex-direction:column;padding:18px;gap:14px}
#msg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto}
#msg-list .msg{display:flex;flex-direction:column;gap:3px;background:#FBF9F4;border:1px solid var(--app-border);border-radius:12px;padding:10px 14px}
#msg-list .msg-user{font-size:12px;font-weight:700;color:var(--app-primary-600)}
#msg-list .msg-body{font-size:14px;color:var(--app-fg);line-height:1.6;white-space:pre-wrap;word-break:break-word}
#msg-list .msg-time{font-size:11px;color:var(--app-muted-fg)}
.chat-form{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--app-border);padding-top:14px}
.chat-form textarea{flex:1;font-family:inherit;font-size:14px;color:var(--app-fg);background:var(--app-card);border:1px solid var(--app-border);border-radius:10px;padding:10px 12px;resize:vertical;min-height:44px}
.chat-form textarea:focus{outline:none;border-color:var(--app-primary);box-shadow:0 0 0 3px var(--app-primary-soft)}
.auth-shell{font-family:var(--app-font);background:var(--app-bg);color:var(--app-fg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-shell *{box-sizing:border-box;margin:0;padding:0}
.auth-card{width:100%;max-width:400px;background:var(--app-card);border:1px solid var(--app-border);border-radius:var(--app-radius);padding:32px 28px;box-shadow:0 10px 40px rgba(38,32,26,.06)}
.auth-logo{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.auth-logo .auth-mark{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 3px 10px rgba(245,158,11,.35);color:#fff}
.auth-logo .auth-name{font-size:17px;font-weight:700;color:var(--app-fg)}
.auth-logo .auth-name .accent{color:var(--app-primary)}
.auth-logo .auth-beta{font-size:10px;font-weight:700;color:var(--app-primary-600);background:var(--app-primary-soft);border:1px solid #F6DDB6;padding:2px 6px;border-radius:999px}
.auth-heading{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
.auth-form-body{padding:0}
.auth-btn-block{width:100%;justify-content:center;margin-top:4px}