/**
 * theme.css — takawasi-social.com 全サービス共通テーマ
 *
 * 使い方: <link rel="stylesheet" href="https://takawasi-social.com/shared/theme.css">
 *
 * 全クラス名は .ts- プレフィックス。
 * sidebar.js の z-index設計:
 *   .ts-sidebar               : 10000
 *   .ts-sidebar-overlay       :  9999
 *   .ts-sidebar-hamburger     : 10001
 * このファイルは z-index: 100 以下の範囲を担当する。
 *
 * Google Fonts 不使用（GFWブロック対策）。システムフォントのみ。
 */

/* ============================================================
   CSS変数
   ============================================================ */
:root {
  /* 背景 */
  --ts-bg-primary:   #0f0f1a;
  --ts-bg-secondary: #1a1a2e;
  --ts-bg-tertiary:  #252542;

  /* テキスト */
  --ts-text-primary:   #e0e0f0;
  --ts-text-secondary: #a0a0b8;
  --ts-text-muted:     #606078;

  /* アクセント */
  --ts-accent:         #7c7cf0;
  --ts-accent-hover:   #9090ff;
  --ts-accent-success: #40c080;
  --ts-accent-warning: #e0c060;
  --ts-accent-error:   #f07c7c;

  /* ボーダー */
  --ts-border:       #2a2a4a;
  --ts-border-light: #353560;

  /* シャドウ */
  --ts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --ts-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ts-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* レイアウト */
  --ts-content-max-width: 1200px;
  --ts-content-padding:   24px;
  --ts-sidebar-width:     240px; /* sidebar.js と同値 */
  --ts-header-height:     56px;

  /* フォント — Google Fonts 不使用 */
  --ts-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Noto Sans JP", sans-serif;
  --ts-font-mono:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                    monospace;
  --ts-font-size-xs:   11px;
  --ts-font-size-sm:   13px;
  --ts-font-size-base: 15px;
  --ts-font-size-lg:   18px;
  --ts-font-size-xl:   24px;
  --ts-font-size-2xl:  32px;

  /* 角丸 */
  --ts-radius-sm: 4px;
  --ts-radius-md: 8px;
  --ts-radius-lg: 12px;

  /* トランジション */
  --ts-transition: 0.15s ease;
}

/* ============================================================
   リセット & body
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin:      0;
  padding:     0;
  font-family: var(--ts-font-family);
  font-size:   var(--ts-font-size-base);
  background:  var(--ts-bg-primary);
  color:       var(--ts-text-primary);
  line-height: 1.6;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* sidebar.js が body に付与するクラスと連動 */
@media (min-width: 768px) {
  body.has-sidebar {
    margin-left: var(--ts-sidebar-width);
    transition: margin-left var(--ts-transition);
  }
  body.has-sidebar.sidebar-collapsed {
    margin-left: 0;
  }
}

/* ============================================================
   リンク
   ============================================================ */
a {
  color:           var(--ts-accent);
  text-decoration: none;
  transition:      color var(--ts-transition);
}
a:hover {
  color: var(--ts-accent-hover);
}

/* ============================================================
   ページヘッダー (.ts-page-header)
   ============================================================ */
.ts-page-header {
  height:      var(--ts-header-height);
  background:  var(--ts-bg-secondary);
  border-bottom: 1px solid var(--ts-border);
  padding:     0 var(--ts-content-padding);
  display:     flex;
  align-items: center;
  gap:         16px;
  position:    sticky;
  top:         0;
  z-index:     100; /* サイドバー (10000) より低い */
  flex-shrink: 0;
}

.ts-page-title {
  margin:      0;
  font-size:   var(--ts-font-size-lg);
  font-weight: 600;
  color:       var(--ts-text-primary);
}

/* ============================================================
   メインコンテンツ (.ts-main)
   ============================================================ */
.ts-main {
  max-width: var(--ts-content-max-width);
  width:     100%;
  margin:    0 auto;
  padding:   var(--ts-content-padding);
  flex:      1;
}

/* ============================================================
   フッター (.ts-footer)
   ============================================================ */
.ts-footer {
  margin-top:  auto;
  padding:     16px var(--ts-content-padding);
  border-top:  1px solid var(--ts-border);
  color:       var(--ts-text-muted);
  font-size:   var(--ts-font-size-xs);
  flex-shrink: 0;
}

.ts-footer-links {
  display:         flex;
  flex-wrap:       wrap;
  gap:             16px;
  margin-bottom:   8px;
}

.ts-footer-links a {
  color:           var(--ts-text-muted);
  text-decoration: none;
  transition:      color var(--ts-transition);
}
.ts-footer-links a:hover {
  color: var(--ts-text-secondary);
}

.ts-footer-copy {
  margin: 0;
}

/* ============================================================
   ボタン (.ts-btn)
   ============================================================ */
.ts-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              6px;
  padding:          8px 16px;
  border:           1px solid transparent;
  border-radius:    var(--ts-radius-md);
  font-size:        var(--ts-font-size-sm);
  font-family:      var(--ts-font-family);
  font-weight:      500;
  cursor:           pointer;
  transition:       background var(--ts-transition),
                    color var(--ts-transition),
                    border-color var(--ts-transition),
                    opacity var(--ts-transition);
  white-space:      nowrap;
  text-decoration:  none;
  line-height:      1;
}

.ts-btn:disabled,
.ts-btn[disabled] {
  opacity:        0.5;
  cursor:         not-allowed;
  pointer-events: none;
}

/* プライマリ */
.ts-btn-primary {
  background:   var(--ts-accent);
  color:        #ffffff;
  border-color: var(--ts-accent);
}
.ts-btn-primary:hover {
  background:   var(--ts-accent-hover);
  border-color: var(--ts-accent-hover);
  color:        #ffffff;
}

/* アウトライン */
.ts-btn-outline {
  background:   transparent;
  color:        var(--ts-accent);
  border-color: var(--ts-accent);
}
.ts-btn-outline:hover {
  background:   rgba(124, 124, 240, 0.12);
  color:        var(--ts-accent-hover);
  border-color: var(--ts-accent-hover);
}

/* 危険 */
.ts-btn-danger {
  background:   var(--ts-accent-error);
  color:        #ffffff;
  border-color: var(--ts-accent-error);
}
.ts-btn-danger:hover {
  background:   #e06060;
  border-color: #e06060;
  color:        #ffffff;
}

/* ============================================================
   カード (.ts-card)
   ============================================================ */
.ts-card {
  background:    var(--ts-bg-secondary);
  border:        1px solid var(--ts-border);
  border-radius: var(--ts-radius-lg);
  padding:       20px;
  box-shadow:    var(--ts-shadow-sm);
}

/* ============================================================
   フォーム要素 (.ts-input, .ts-select, .ts-textarea)
   ============================================================ */
.ts-input,
.ts-select,
.ts-textarea {
  background:    var(--ts-bg-primary);
  border:        1px solid var(--ts-border);
  border-radius: var(--ts-radius-sm);
  color:         var(--ts-text-primary);
  padding:       8px 12px;
  font-size:     var(--ts-font-size-base);
  font-family:   var(--ts-font-family);
  transition:    border-color var(--ts-transition);
  width:         100%;
}

.ts-input:focus,
.ts-select:focus,
.ts-textarea:focus {
  border-color: var(--ts-accent);
  outline:      none;
}

.ts-input::placeholder,
.ts-textarea::placeholder {
  color: var(--ts-text-muted);
}

.ts-textarea {
  resize:     vertical;
  min-height: 80px;
  line-height: 1.5;
}

.ts-select {
  cursor:            pointer;
  appearance:        none;
  -webkit-appearance: none;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a0a0b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ============================================================
   レスポンシブユーティリティ
   ============================================================ */
@media (max-width: 767px) {
  .ts-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .ts-hide-desktop {
    display: none !important;
  }
}