/**
 * ui-density.css
 *
 * UI密度 3段階 (compact / standard / roomy) + PC縮小時レイアウト維持
 *
 * 2026-04-21 松山さん指示:
 *   - PCで文字が小さすぎる → roomy で 18px / 大きめ余白
 *   - 建設業 SaaS で空白の UI 密度3段階 = 差別化
 *   - PC縮小時にモバイルUIに勝手切替しない = ui-lock-pc
 *
 * CSS変数で一元管理。既存アプリCSS は部分的に !important で上書き。
 */

/* === CSS 変数: 標準 (standard) ベースライン === */
:root {
  --ui-font-base: 14px;
  --ui-font-sm: 12px;
  --ui-font-md: 14px;
  --ui-font-lg: 16px;
  --ui-font-xl: 18px;
  --ui-font-xxl: 22px;
  --ui-padding-x: 16px;
  --ui-padding-y: 12px;
  --ui-card-padding: 16px;
  --ui-gap: 8px;
  --ui-gap-lg: 16px;
  --ui-touch: 44px;
  --ui-icon: 20px;
  --ui-nav-height: 58px;
  --ui-bottom-nav-height: 60px;
}

/* === Compact: スマホ / 情報密度優先 === */
html.ui-compact {
  --ui-font-base: 13px;
  --ui-font-sm: 11px;
  --ui-font-md: 13px;
  --ui-font-lg: 15px;
  --ui-font-xl: 17px;
  --ui-font-xxl: 20px;
  --ui-padding-x: 12px;
  --ui-padding-y: 8px;
  --ui-card-padding: 12px;
  --ui-gap: 6px;
  --ui-gap-lg: 12px;
  --ui-touch: 44px;
  --ui-icon: 18px;
  --ui-nav-height: 54px;
  --ui-bottom-nav-height: 56px;
}

/* === Roomy: PC / 文字大きめ / 読みやすさ優先 === */
html.ui-roomy {
  --ui-font-base: 16px;
  --ui-font-sm: 14px;
  --ui-font-md: 16px;
  --ui-font-lg: 18px;
  --ui-font-xl: 22px;
  --ui-font-xxl: 28px;
  --ui-padding-x: 20px;
  --ui-padding-y: 16px;
  --ui-card-padding: 20px;
  --ui-gap: 12px;
  --ui-gap-lg: 20px;
  --ui-touch: 48px;
  --ui-icon: 22px;
  --ui-nav-height: 64px;
  --ui-bottom-nav-height: 64px;
}

/* === 各アプリ本体に base font-size を注入 === */
html.ui-compact .pj-app, html.ui-compact .ph-app, html.ui-compact .dw-app,
html.ui-compact .tp-app, html.ui-compact .pb-app, html.ui-compact .lv-app,
html.ui-standard .pj-app, html.ui-standard .ph-app, html.ui-standard .dw-app,
html.ui-standard .tp-app, html.ui-standard .pb-app, html.ui-standard .lv-app,
html.ui-roomy .pj-app, html.ui-roomy .ph-app, html.ui-roomy .dw-app,
html.ui-roomy .tp-app, html.ui-roomy .pb-app, html.ui-roomy .lv-app {
  font-size: var(--ui-font-base);
}

/* === Roomy (PC) で文字が小さかった箇所を全体的に拡大 === */
html.ui-roomy .pj-card-title, html.ui-roomy .ph-card-title, html.ui-roomy .dw-card-title,
html.ui-roomy .pj-project-title, html.ui-roomy .pj-proj-title {
  font-size: var(--ui-font-xl) !important;
}
html.ui-roomy .pj-filter-tab, html.ui-roomy .pj-view-toggle,
html.ui-roomy .ph-filter-tab, html.ui-roomy .touo-subtool-btn {
  font-size: var(--ui-font-md) !important;
  padding: 10px 18px !important;
  min-height: var(--ui-touch) !important;
}
html.ui-roomy .pj-proj-status, html.ui-roomy .pj-progress-text,
html.ui-roomy .pj-proj-percent, html.ui-roomy .pj-status-label,
html.ui-roomy .ph-card-meta, html.ui-roomy .ph-card-sub,
html.ui-roomy .pj-proj-meta, html.ui-roomy .pj-proj-sub {
  font-size: var(--ui-font-md) !important;
}
html.ui-roomy .pj-card, html.ui-roomy .ph-card, html.ui-roomy .dw-card {
  padding: var(--ui-card-padding) !important;
}
html.ui-roomy .touo-app-nav-item {
  min-height: 48px !important;
  padding: 8px 12px !important;
}
html.ui-roomy .touo-app-nav-item span {
  font-size: var(--ui-font-md) !important;
}
html.ui-roomy button, html.ui-roomy .btn {
  min-height: var(--ui-touch) !important;
  font-size: var(--ui-font-md) !important;
}
html.ui-roomy input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.ui-roomy textarea, html.ui-roomy select {
  font-size: var(--ui-font-md) !important;
  min-height: var(--ui-touch) !important;
  padding: 10px 14px !important;
}

/* === Compact で既存 @media モバイルルールとの整合性 === */
html.ui-compact .pj-card, html.ui-compact .ph-card {
  padding: var(--ui-card-padding) !important;
}

/* ==========================================================
 * PC LOCK: 画面を縮めてもPCレイアウトを維持する
 *   横スクロール発生を許容し、モバイル @media の発動を抑制
 * ========================================================== */
html.ui-lock-pc body,
html.ui-lock-pc .pj-app,
html.ui-lock-pc .ph-app,
html.ui-lock-pc .dw-app,
html.ui-lock-pc .tp-app,
html.ui-lock-pc .pb-app,
html.ui-lock-pc .lv-app {
  min-width: 1200px !important;
}

/* PC Lock 時は force-mobile / force-tablet も無効化 */
html.ui-lock-pc.force-mobile body,
html.ui-lock-pc.force-tablet body {
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
 * UI密度トグル UI (ヘッダー右上)
 * ========================================================== */
.touo-ui-density-box {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  flex-shrink: 0;
}

.touo-ui-density-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.8);
  color: #444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.touo-ui-density-btn:hover,
.touo-ui-density-btn[aria-expanded="true"] {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.2);
}

.touo-ui-density-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 10200;
  color: #1a1a2e;
}
.touo-ui-density-menu[hidden] { display: none; }

.touo-ui-density-title {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  padding: 6px 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.touo-ui-density-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
}
.touo-ui-density-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.touo-ui-density-item .touo-ui-density-check {
  opacity: 0;
  color: #16a34a;
  font-weight: 800;
  width: 16px;
}
.touo-ui-density-item.is-current .touo-ui-density-check {
  opacity: 1;
}
.touo-ui-density-item.is-current {
  background: rgba(22, 163, 74, 0.08);
  color: #0f5132;
  font-weight: 600;
}

.touo-ui-density-sep {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 6px 0;
}

.touo-ui-density-lock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1.4;
}
.touo-ui-density-lock:hover {
  background: rgba(0, 0, 0, 0.04);
}
.touo-ui-density-lock input { margin-top: 2px; }
.touo-ui-density-lock small {
  color: #888;
  font-size: 11px;
}

/* モバイル (≤480px) ではメニューを画面幅いっぱいに */
@media (max-width: 480px) {
  .touo-ui-density-menu {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 8px;
    right: 8px;
    min-width: auto;
  }
}

/* color-scheme: Samsung Internet のダーク強制変換対策 */
html.ui-compact, html.ui-standard, html.ui-roomy {
  color-scheme: light;
}