/* =====================================================
   今日のアクセス（サマリー）
===================================================== */
.pv-summary {
	display: flex;
	gap: 0.2rem;
	width: 100%;
	margin-bottom: 1.5rem;
}
.pv-summary-item {
	flex: 1;
	text-align: center;
	border: 1px solid #0073aa;
	border-radius: 6px;
	background: #fff;
}

/* ラベル（リアルタイム / ユーザー / PV） */
.pv-label {
	font-size: clamp(0.7rem, 1.0vw, 1.0rem);
	color: #fff;
	background-color: #0073aa;
	margin-bottom: 0.3rem;
	padding: 0.3rem 0;
	border-radius: 6px 6px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
}
.pv-page-item .pv-label {
	justify-content: left;
}
/* 数値本体 */
.pv-value {
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 700;
	padding: 0.3rem 0;
}

/* 単位（人 / PV） */
.pv-unit {
    font-size: 0.6em;
    margin-left: 0.15em;
    font-weight: 400;
    color: #666;
}

/* =====================================================
   閲覧中のページ
===================================================== */

.pv-realtime-pages {
    margin-top: 1.5rem;
}
.pv-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ページ一覧 */
.pv-page-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pv-page-item {
    line-height: 1.4;
    margin-bottom: 1rem;
    border-radius: 6px;
    background: #f9f9f9;
    overflow: hidden;
	border: 1px solid #0073aa;
}
/* タイトルリンク */
.pv-page-item a {
    display: block;
    font-size: 1rem;
	margin: 3px 0 3px 3px;
	padding: 0.2rem 0.4rem;
    color: #0073aa;
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	text-decoration: none;
}
.pv-page-item a:hover {
    text-decoration: underline;
}

/* =====================================================
   ページビュー分布
===================================================== */

.pv-distribution {
    margin-top: 0.5rem 0;
}
.pv-distribution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
	padding: 0.5rem;
}
.pv-distribution-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
	padding: 0.5rem;
}
.pv-dist-item {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-align: center;
    background: #fff;
}

/* ラベル（あっさり 等） */
.pv-dist-label {
    font-size: clamp(0.7rem, 1.4vw, 0.9rem);
    font-weight: 600;
	padding: 0.2rem 0;
	border-radius: 6px 6px 0 0;
    white-space: nowrap;
}

/* PV範囲 */
.pv-dist-range {
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    color: #666;
    margin-bottom: 0.4rem;
    white-space: nowrap;
}

/* 人数 */
.pv-dist-value {
    font-size: clamp(1.0rem, 3.5vw, 1.4rem);
    font-weight: 700;
    line-height: 1.1;
	padding: 0.5rem 0;
    white-space: nowrap;
}

/* 画面が狭い場合：2列2段 */
@media (max-width: 768px) {
    .pv-distribution-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================
   ページビューランキング
===================================================== */
.gattpvd-pv-ranking {
	border: solid 1px #0073aa;
	border-radius: 4px;
margin: 10px 0;
}
.gattpvd-pv-ranking h2 {
	font-weight: 700;
	font-size: clamp(0.9rem, 1.2vw, 1.2rem)!important;
    color: #fff;
    padding: 0.3rem 0.5rem!important;
    border-radius: 4px 4px 0 0;
    background-color: #0073aa;
    white-space: nowrap;
    box-sizing: border-box;
}
.pv-ranking {
	margin: .5em;
}

.pv-ranking-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
}
.pv-rank-item {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-align: center;
    background: #fff;
}

/* 順位 */
.pv-rank-label {
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    color: #666;
    margin-bottom: 0.3rem;
	border-radius: 6px 6px 0 0;
    white-space: nowrap;
	padding: 0.3rem 0;
}

/* PV数 */
.pv-rank-pv {
    font-size: clamp(1.0rem, 3vw, 1.2rem);
    font-weight: 700;
    white-space: nowrap;
	padding: 0.3rem 0;
}
.pv-diff-down {
color: #cc0000;
}
.pv-diff-up {
color: #007e00;
}

/* 人数（複数時のみ表示） */
.pv-rank-users,.pv-rank-week {
    font-size: clamp(0.6rem, 1.3vw, 0.8rem);
    margin-top: 0.2rem;
    color: #666;
    white-space: nowrap;
}

/* 画面が狭い場合：横スクロール防止 */
@media (max-width: 768px) {
    .pv-ranking-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.pv-ref-box,.pv-metric-badges,.pv-page-metrics {
	margin: 0.5rem 0.2rem;
	font-size: 0.75rem;
}

/* =====================================================
   ページ別集計
===================================================== */
/* 総PV帯 */
.pv-page {
	background: #ccc;
	border-radius: 4px 4px 0 0;
}
.pv-page-total {
    position: relative;
    font-weight: 700;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 4px 0 0 0;
    background-color: #0073aa;
    white-space: nowrap;
	box-sizing: border-box;
}
.pv-page-item:not(:first-child) .pv-page-total {
    display: inline-block; /* 幅はPHPで動的指定 */
}

/* ページタイトル */
.pv-page-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
	padding-left: 0.5rem;
}
.pv-page-title a {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important; 
	text-decoration: none;
	}
/* 行動指標全体 */
.pv-page-metrics {
    line-height: 1.4;
    color: #333;
    gap: 0.2rem;
	margin-bottom: 0.4rem;
}

/* スクロールバー背景 */
.pv-scroll-bar-bg {
    width: 100%;
    height: 14px;
    background-color: #ccc;
    border-radius: 3px;
    position: relative;
    margin-top: 0.5rem;
}

/* 平均スクロール */
.pv-scroll-avg {
    position: absolute;
    height: 100%;
    background-color: #0057b7;
    left: 0;
    top: 0;
    border-radius: 3px;
}

/* 最大スクロール */
.pv-scroll-max {
    position: absolute;
    height: 100%;
    background-color: #0057b7;
    opacity: 0.5;
    left: 0;
    top: 0;
    border-radius: 3px;
}

/* 日別データレイアウト */
.gattpvd-stats-tabs { margin-bottom:10px; }
.gattpvd-tab-btn {
    border:1px solid #ccc;
    background:#f1f1f1;
    color:#000;
    padding:4px 12px;
    cursor:pointer;
    margin-right:4px;
    border-radius:3px;
}
.gattpvd-tab-btn.active {
	background:#0073aa;
	color:#fff;
	border-color:#0073aa;
}
.gattpvd-stats-grid-7 {
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:4px; margin-bottom:10px;
}
.gattpvd-stats-grid-4 {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:4px; margin-bottom:10px;
}
.gattpvd-stats-cell {
	border:1px solid #ddd;
	padding:4px;
	text-align:center;
	border-radius:3px;
	background:#fff;
}
.gattpvd-stats-date {
	font-size:11px;
	margin-bottom:2px;
}
.gattpvd-stats-num {
	font-weight:bold;
	font-size:14px;
}

/* 行動指標バッジ */
.pv-metric-badges {
    gap: 6px;
    margin-bottom: 4px;
}

/* ユーザー分布 */
.pv-dist-critical .pv-dist-label {
	background: #ffecec;
	color: #900;
}    /* あっさり */
.pv-dist-danger  .pv-dist-label {
	background: #fffbe6;
	color: #856404;
} /* ちょっぴり */
.pv-dist-warning .pv-dist-label {
	background: #e6f7ff;
	color: #084298;
} /* しっかり */
.pv-dist-safe .pv-dist-label {
	background: #e9f4e9;
	color: #034d03;
} /* がっつり モスグリーン */
/* 並び替え中の強調表示 */
.is-active-metric {
    background: #0073aa;
    color: #fff;
}

/* ページビューランキング用（ユーザー分布と同色） */
.pv-rank-label.pv-dist-safe {
    background: #e9f4e9;
    color: #034d03;
}
.pv-rank-label.pv-dist-warning {
    background: #e6f7ff;
    color: #084298;
}
.pv-rank-label.pv-dist-danger {
    background: #fffbe6;
    color: #856404;
}
.pv-rank-label.pv-dist-critical {
    background: #ffecec;
    color: #900;
}
.pv-ref-label {
    display: inline-block;
    margin: 4px 6px 4px 0;
        font-weight: 700;
    color: #fff;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
    border-radius: 4px;
    background-color: #aaa;
}
/* 流入元（個別ボーダー） */
.pv-ref-item {
    padding: 2px 4px;
	margin: 2px;
    border: 1px solid #ddd;
    border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
}
.pv-ref-item .bold {
font-weight: bold;
}
.gattpvd-ranking-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.gattpvd-per-page {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gattpvd-period-sort-row {
    display: flex;
    flex-direction: column; /* スマホは縦 */
    gap: 6px;
}
.gattpvd-period-tabs,
.gattpvd-sort-ui {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 講評ボタン */
.pv-comment-toggle {
	padding: 0.3rem 0.5rem;
    font-weight: bold;
    color: #fff;
	background-color: #0073aa;
	border: none;
}
.pv-comment-content {
	padding: 0.3rem 0.5rem;
}

/* 検索ボックス placeholder を薄く */
#gattpvd-search::placeholder {
    color: rgba(0,0,0,0.4);
}

#gattpvd-search::-webkit-input-placeholder {
    color: rgba(0,0,0,0.4);
}

#gattpvd-search:-ms-input-placeholder {
    color: rgba(0,0,0,0.4);
}
/* 検索UIを横並び＆最大幅 */
.gattpvd-search-ui {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* inputを可能な限り広げる */
#gattpvd-search {
    flex: 1;
    min-width: 0;
}
#gattpvd-search {
    padding: 6px 8px;
}

#gattpvd-search-reset {
    padding: 4px 8px;
    cursor: pointer;
}

#gattpvd-calendar-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:9999;
}
#gattpvd-calendar-modal{
  background:#fff;
  width:320px;
  margin:10vh auto;
  padding:10px;
}
#gattpvd-calendar th,
#gattpvd-calendar td{
  text-align:center;
  padding:6px;
  cursor:pointer;
}
#gattpvd-calendar td.disabled{
  color:#ccc;
  pointer-events:none;
}
#gattpvd-calendar td:hover{
  background:#eee;
}
.gattpvd-cal-head{
  display:flex;
  gap:6px;
  margin-bottom:6px;
}

.pv-dist-percent,.pv-sub-value{
    margin-top:0 0 10px;
}

.pv-dist-sub,.pv-sub-value {
	margin: 10px 0;
	}

.gattpvd-scroll-x {
    overflow-x: auto;
    padding-bottom: 4px;
}

.gattpvd-wide-table {
    min-width: 100%;
    border-collapse: collapse;
}

.gattpvd-wide-table th,
.gattpvd-wide-table td {
    white-space: nowrap;
    text-align: center;
}
.gattpvd-pro-box{
    margin:20px 0;
    padding:20px;
    border:1px solid #ccd0d4;
    background:#fff;
}
.gattpvd-pro-box h2 {
margin-top:0;
}
.gattpvd-list{
    list-style:disc;
    margin-left:20px;
}
.gattpvd-pro-notice {
	margin-top:20px;
	padding:12px;
	background:#fff4e5;
	border:1px solid #ffd080;
	text-align:center;
}