/* Aura Analytics V2 共通スタイルシート
 * ---------------------------------------------------------
 * 旧 Aura Analytics（2015）の配色・レイアウトを踏襲:
 *   - コンテナ幅 1150px
 *   - メニュー #676767 / アクティブ #4283de
 *   - 表見出し #4d4d4d
 *   - 合計 = 赤(.total) / ユニーク = 青(.unique)
 *   - バーグラフ(.rowbar) / 半分カラム
 * --------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #dcdcdc;
  color: #333;
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
#container {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}
#header { background: #4d4d4d; }
#header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  color: #fff;
}
#header-inner .site-name { font-size: 16px; font-weight: bold; }
#header-inner .logout a { color: #ddd; text-decoration: none; font-size: 12px; }
#header-inner .logout a:hover { text-decoration: underline; }

/* ---- メニュー ---- */
.menu { background: #676767; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu li { margin: 0; }
.menu li a {
  display: block;
  padding: 8px 18px;
  color: #f0f0f0;
  text-decoration: none;
  border-right: 1px solid #7a7a7a;
}
.menu li a:hover { background: #7d7d7d; }
.menu li.current a { background: #4283de; color: #fff; font-weight: bold; }
@media (max-width: 700px) {
  .menu ul { display: block; }
  .menu li a { border-right: none; border-bottom: 1px solid #7a7a7a; }
}

#main { padding: 16px 20px 40px; }
h1 { font-size: 20px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #4283de; }
h2 { font-size: 15px; margin: 0 0 6px; }

/* ---- 期間フォーム ---- */
.period {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 8px 10px;
  margin: 0 0 12px;
}
.period input[type=date], .period select { padding: 3px 5px; border: 1px solid #bbb; }
.btn {
  background: #4283de;
  color: #fff;
  border: none;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 13px;
}
.btn:hover { background: #346fc0; }

/* ---- サマリーカード ---- */
.summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.summary .card {
  flex: 1;
  min-width: 130px;
  border: 1px solid #ddd;
  text-align: center;
  padding: 12px 6px;
  background: #fafafa;
}
.summary .card .label { font-size: 12px; color: #666; }
.summary .card .value { font-size: 26px; font-weight: bold; margin-top: 4px; }
.value.total   { color: #cc3333; }
.value.unique  { color: #3388dd; }
.value.session { color: #e8a33d; }

/* ---- 表 ---- */
table.std { width: 100%; border-collapse: collapse; margin: 4px 0 14px; }
table.std th {
  background: #4d4d4d;
  color: #fff;
  border: 1px solid #3d3d3d;
  padding: 5px 7px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
}
table.std td { border: 1px solid #ddd; padding: 5px 7px; vertical-align: top; }
table.std tr:nth-child(even) td { background: #f7f7f7; }
table.std tr:hover td { background: #eef4fc; }
td.num, th.num { text-align: right; }

/* 合計 = 赤 / ユニーク = 青 */
.total  { color: #cc3333; font-weight: bold; }
.unique { color: #3388dd; font-weight: bold; }
.small  { font-size: 11px; color: #888; }

/* ---- バーチャート（ランキングの行内バー） ---- */
.rowbar { display: inline-block; height: 13px; vertical-align: middle; }
.rowbar.red  { background: #f27070; }
.rowbar.blue { background: #63a4ff; }
.chart-cell .hostname { word-break: break-all; }

/* ---- 日別トレンド ---- */
.trend-line { display: flex; align-items: flex-end; height: 120px; gap: 1px; margin: 6px 0 2px; }
.trend .col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.trend .bar  { width: 100%; background: #63a4ff; min-height: 1px; }
.trend .label { font-size: 10px; color: #666; margin-top: 2px; white-space: nowrap; }

/* ---- 半分カラム ---- */
.half-left  { float: left;  width: 49%; }
.half-right { float: right; width: 49%; }
.clearfix::after { content: ""; display: block; clear: both; }
@media (max-width: 900px) {
  .half-left, .half-right { float: none; width: 100%; }
}

/* ---- グラフ見出し・凡例 ---- */
.graph-title { font-weight: bold; margin: 18px 0 6px; border-left: 4px solid #4283de; padding-left: 8px; }
.hanrei { font-size: 12px; color: #666; margin: 2px 0 8px; }

/* 曜日カラー（カレンダー等での利用） */
.sat { color: #3388dd !important; }
.sun { color: #cc3333 !important; }

/* ---- フォーム ---- */
.form-table { width: 100%; border-collapse: collapse; }
.form-table th {
  width: 180px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
  font-weight: bold;
}
.form-table td { border: 1px solid #ddd; padding: 8px 10px; }
input[type=text], input[type=password], input[type=url], textarea {
  border: 1px solid #bbb;
  padding: 5px 7px;
  font-size: 13px;
  width: 100%;
  max-width: 420px;
}
select { padding: 4px; border: 1px solid #bbb; }

/* ---- 通知 ---- */
.error  { color: #cc3333; background: #fdeeee; border: 1px solid #f5c6c6; padding: 8px 10px; margin: 8px 0; }
.notice { color: #2a7f3a; background: #eef9ef; border: 1px solid #bfe6c6; padding: 8px 10px; margin: 8px 0; }
.caution { color: #b87912; background: #fdf6e8; border: 1px solid #ecd9a8; padding: 8px 10px; margin: 8px 0; }

/* ---- リアルタイム ---- */
.realtime-online { font-size: 46px; font-weight: bold; color: #4283de; line-height: 1; }
.realtime-box { border: 1px solid #ddd; margin: 0 0 14px; }
.realtime-box h2 { background: #f0f0f0; border-bottom: 1px solid #ddd; padding: 7px 10px; font-size: 14px; margin: 0; }
.realtime-box .body { padding: 10px; }

/* ---- タグ表示 ---- */
.code-block {
  background: #222;
  color: #8fce8f;
  padding: 12px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
  word-break: break-all;
}

#footer { background: #4d4d4d; color: #bbb; text-align: center; padding: 10px; font-size: 11px; }