/* assets/css/style.css */
:root{
  --bg:#fafafa;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#3b82f6;
  --accent2:#7c3aed;
  --good:#16a34a;
  --bad:#dc2626;
}

.dark{
  --bg:#0d1117;
  --card:#161b22;
  --text:#e6edf3;
  --muted:#8b949e;
  --border:#30363d;
  --accent:#7aa4ff;
  --accent2:#a686ff;
  --good:#22c55e;
  --bad:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  background: radial-gradient(1000px 600px at 80% -10%, rgba(59,130,246,0.1), transparent 50%),
              radial-gradient(800px 500px at -10% -20%, rgba(124,58,237,0.1), transparent 40%),
              var(--bg);
  color:var(--text);
}

.container{max-width:1100px;margin:0 auto;padding:16px}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

:root.light .site-header { background: rgba(255,255,255,.75); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 10px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .3px; color: var(--text); font-size: 18px; }
nav ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { color: var(--text); opacity: .92; padding: 10px 12px; border-radius: 10px; display: inline-block; }
nav a:hover { background: var(--card); text-decoration: none; }

.dark .site-header{background:rgba(0,0,0,0.2)}

.nav{display:flex;align-items:center;gap:16px}
.brand{font-weight:700;letter-spacing:.5px}
.spacer{flex:1}

.hero .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.card-title{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.big{font-size:1.6rem;font-weight:700;word-break:break-word}
.big.pos{color:var(--good)}
.big.neg{color:var(--bad)}

.tabs{margin-top:24px}
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tab{
  flex:1;
  padding:10px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;text-align:center;font-size:.95rem
}
.tab.active{background:linear-gradient(90deg, var(--accent), var(--accent2));color:white;border-color:transparent}
.tabpanel{display:none}
.tabpanel.active{display:block}

.form .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:.8rem;color:var(--muted)}
input, select{
  padding:10px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);
  outline:none;font-size:1rem
}
input:focus{border-color:var(--accent)}

.actions{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.primary{
  flex:1;
  padding:12px;border-radius:12px;border:0;color:white;cursor:pointer;font-size:1rem;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.ghost{
  padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer
}
.msg{font-size:.85rem;color:var(--muted)}

.history{margin-top:24px}
.history-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.history-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.table-wrapper{overflow:auto}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border)}
.table .r{text-align:right}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;border:1px solid var(--border);white-space:nowrap}
.badge.in{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35)}
.badge.out{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35)}

.footer{padding:16px 0;color:var(--muted);font-size:.8rem;text-align:center}

@media (max-width:600px){
  .big{font-size:1.4rem}
  input, select{font-size:1rem}
  .primary{font-size:1rem;padding:10px}
  .tab{font-size:.85rem;padding:8px}
}

/* --- Mobile/table improvements (note column stays horizontal) --- */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* keep overall table compact but wide enough */
.table{min-width:720px}

/* 摘要: 横に表示し、適度に改行 */
.table th.note, .table td.note{
  white-space: normal;        /* 自然な折返し */
  word-break: normal;         /* 1文字ごとの縦積みを防止 */
  overflow-wrap: anywhere;    /* 長文でもはみ出さないように */
  line-height: 1.4;
  min-width: 240px;           /* スマホでも横に見える最低幅 */
}

/* 金額は改行させずに見やすく */
.table td.r{ white-space: nowrap; text-align: right }

@media (max-width:600px){
  .table{ min-width: 680px }
  .table th.note, .table td.note{ min-width: 280px }
}