/* ------------------------------------------------------ */
/* ---  Conaclog アクセスログ分析                    --- */
/*                                                        */
/*        (1) アクセスログ分析画面                        */
/*        (2) 設定画面                                    */
/*        (3) whois画面                                   */
/*                                                        */
/* ------------------------------------------------------ */


/* ------------------------------------------------------ */
/*        (1) アクセスログ分析画面                        */
/* ------------------------------------------------------ */


.toplevel_page_conaclog-report #wpbody-content {
	width :auto;
}


/* --- テーブル本体の設定 --- */
.conaclog-main table.widefat.fixed {
	width: auto;
	min-width: 100%;
	border-collapse: separate; /* sticky時の枠線崩れ防止 */
	border-spacing: 0;
}


/* --- PCでの表頭固定（sticky） --- */
.conaclog-main table.widefat.fixed thead th {
	position: -webkit-sticky ;
	position: sticky ;
	top: 32px ; /* WP管理バーの高さに合わせる */
	z-index: 10 ;
	background: #fff ;

	/* 見た目の調整：高さを抑える */
	padding-top: 8px ;
	padding-bottom: 8px ;
	border-bottom: 2px solid #dcdcde ;
	box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); /* スクロール時に浮いて見えるように */
}


/* --- ボタングループ内で選択されているボタンを青くする（WP標準色）--- */
.conaclog-main .button-group .button.active {
	background: #2271b1 ;
	border-color: #2271b1 ;
	color: #fff ;
	z-index: 1;
}


/* --- 条件解除ボタンだけ少し離す、または目立たせる ★上端の高さを除外ボタンと合わせる --- */
.conaclog-main .alignleft .button {
	vertical-align: middle;
}


/* 抽出条件の背景枠の高さゼロを防ぐ */
.conaclog-main .alignleft {
	float : none ;
	display: block;
}


/* 抽出条件バッジの基本スタイル */
.conaclog-main .filter-badge {
	display: inline-flex;
	align-items: center;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 12px;
	color: #3c434a;
}


.conaclog-main .filter-badge strong {
	margin-left: 4px;
	color: #1d2327;
}


/* ×ボタン（解除リンク）の装飾 */
.conaclog-main .filter-clear {
	margin-left: 8px;
	color: #d63638; /* WPのエラー赤 */
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}


.conaclog-main .filter-clear:hover {
	color: #b32d2e;
	background: #fcdfe0;
	border-radius: 50%;
}


/* ノイズキャンセルのform */
#conaclog-filter-form {
	clear         : both;
	background    : #f6f7f7;
	border        : 1px solid #dcdcde;
	padding       : 12px 15px;
	margin        : 10px 0 20px;
	border-radius : 4px;
	font-size     : 13px;
}


/* ノイズキャンセルのform内の枠 */
.conaclog-filter-form-div {
	display       :flex;
	align-items   :center;
	gap           :15px;
	flex-wrap     : wrap;
}


/* ノイズキャンセルのすべてオンオフ */
.conaclog-all {
	margin-left   : 15px;
	border-left   : 1px solid #dcdcde;
	padding-left  : 15px;
}


/* ドリルダウンの条件表示 */
.conaclog-container {
	margin-top     :10px;
	padding        : 10px;
	background     : #fff;
	border         : 1px solid #c3c4c7;
	border-top     : none;
}


/* ドリルダウンの条件表示 */
.conaclog-container-span {
	font-weight     : 600;
	margin-right    : 10px;
	color           : #50575e;
}


/* ドリルダウンの条件表示の枠 */
.conaclog-container-div {
	display         : inline-flex;
	flex-wrap       : wrap;
	gap             : 5px;
	vertical-align  : middle;
}


/* ドリルダウンのすべて解除 */
.conaclog-container-href {
	font-size       : 11px;
	margin-left     : 10px;
	color: #d63638  ;
	text-decoration : none;
	border-bottom   : 1px solid transparent;
}



/* ---------------------------------------------------------
	ソートボタンとバッジ（既存のものを整理）
--------------------------------------------------------- */

/* --- ソートボタンを横に並べる --- */
.conaclog-main .sorter {
	display: flex; gap: 2px; margin-top: 5px;
}


/* --- ソートボタン位置の微調整 --- */
.conaclog-main .sorter {
	margin-top: 4px;
}


/* --- ソートボタンの体裁 --- */
.conaclog-main .sort-btn {
	text-decoration: none;
	padding: 0 4px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	font-size: 10px;
	color: #646970;
}


/* --- 選ばれているソードボタンを強調 --- */
.conaclog-main .sort-btn.active {
	background: #2271b1 ;
	color: #fff ;
	border-color: #2271b1 ;
}


/* --- ソートボタンを小さくする --- */
.conaclog-main th.sortable a,
.conaclog-main th.sorted a {
	display: block;
	overflow: hidden;
	padding: 3px;
}


/* --- 表頭セルのpadding (sortedはhtmlに記述なし) --- */
.conaclog-main .widefat th.sortable,
.conaclog-main .widefat th.sorted {
	padding: 3px;
}



/* ---------------------------------------------------------
	セルの装飾・テキスト処理   罫線とか
--------------------------------------------------------- */

.conaclog-main .widefat td,
.conaclog-main .widefat th {
	border-left: 1px solid #dcdcde;
	word-break: break-all; /* 長い英単語の改行を許可 */
}


/* テーブル両端の罫線を薄くする。 */
.conaclog-main .widefat td:first-child,
.conaclog-main .widefat th:first-child {
	border-left: none;
}



/* ---------------------------------------------------------
	列の幅（width）指定
--------------------------------------------------------- */

/* 個別に幅を固定する（これがないとfixedで均等割りになる） */

.conaclog-main table.widefat.fixed th.column-no { width: 30px; min-width: 30px; }
.conaclog-main table.widefat.fixed td.column-no { text-align : right; }
.conaclog-main .column-uri      { width: 150px; min-width: 150px; }
.conaclog-main .column-obj      { width: 150px; min-width: 150px; }
.conaclog-main .column-link     { width:  25px; min-width:  25px; }
.conaclog-main .column-status   { width:  60px; min-width:  60px; padding : 3px;}
.conaclog-main .column-type     { width:  60px; min-width:  60px; }
.conaclog-main .column-view     { width:  60px; min-width:  60px; }
.conaclog-main .column-whois    { width:  35px; min-width:  35px; }
.conaclog-main .column-ip       { width: 110px; min-width: 110px; }
.conaclog-main table.widefat.fixed th.column-date { width: 90px; min-width: 90px; }
.conaclog-main .column-host     { width: 100px; min-width: 100px; }
.conaclog-main .column-agent    { width: 150px; min-width: 150px; }
.conaclog-main .column-referer  { width: 100px; min-width: 100px; }
.conaclog-main .column-flag  { width:  20px; min-width:  20px; }

.conaclog-main .column-tiny     { width:  20px; min-width:  20px; }
.conaclog-main .column-wide     { width:  90px; min-width:  90px; }


/* --- 数字・カウント用共通クラス --- */
.conaclog-main table.widefat.fixed th.num,
.conaclog-main table.widefat.fixed td.num {
	width: 55px ;
	text-align: right ;
}


/* whoisのリンク。訪問済みは色を変える */
.conaclog-main .conaclog-whois-link a:visited {
	color: #999 ;
}



/* スマホ（782px以下）での表示設定 */
@media screen and (max-width: 782px) {

	/* --- スマホの場合は空の列を隠す --- */
	/* --- テーブル、tr、th/td すべてを指定して詳細度を最大化する --- */
	.conaclog-main table.widefat.fixed tbody tr td.conaclog-hide,
	.conaclog-main table.widefat.fixed thead tr th.conaclog-hide {
		display: none ;
		visibility: hidden ; /* 念押し */
		width: 0 ;           /* 念押し */
	}


	/* --- 消されてしまう親要素を強制表示 --- */
	.conaclog-main .alignleft {
		display: block ;
		height: auto ;
		margin-bottom: 10px;
		font-size : 0.9rem;
	}

	/* --- SPでの表頭固定（sticky） --- */
	/* 一応46pxに変えているけど、現状でSPの表頭固定は実現していない --- */
	.conaclog-main table.widefat.fixed thead th {
		top: 46px ; /* WP管理バーの高さに合わせる */
	}



	/* ---------------------------------------------------------
		3. 列の幅（width）指定
	--------------------------------------------------------- */

	/* 個別に幅を固定する（これがないとfixedで均等割りになる） */
	.conaclog-main .column-uri      { width: 150px; min-width:  80px; }
	.conaclog-main .column-obj      { width: 150px; min-width:  80px; }
	.conaclog-main .column-status   { width:  60px; min-width:  50px; }
	.conaclog-main .column-type     { width:  60px; min-width:  50px; }
	.conaclog-main .column-view     { width:  60px; min-width:  50px; }
	.conaclog-main .column-ip       { width: 110px; min-width:  80px; }
	.conaclog-main table.widefat.fixed th.column-date { width:  85px; min-width: 85px; }
	.conaclog-main .column-host     { width: 100px; min-width:  80px; }
	.conaclog-main .column-agent    { width: 150px; min-width:  80px; }
	.conaclog-main .column-referer  { width: 100px; min-width:  80px; }

	/* 数字・カウント用共通クラス */
	.conaclog-main table.widefat.fixed th.num,
	.conaclog-main table.widefat.fixed td.num {
		width: 55px ;
		text-align: right ;
	}

}



/* ------------------------------------------------------ */
/*        (2) アクセスログ設定画面                        */
/* ------------------------------------------------------ */



/* 全体の背景調整 */
.conaclog-admin.wrap {
	max-width: 1200px;
	margin-top: 20px;
}


.conaclog-admin-form {
	background-color : #ffffff;
	padding :20px;
	margin-bottom:20px;
}


/* 各セクションをカード形式に */
.conaclog-admin h2 {
	font-size: 1.3em;
	border-left: 4px solid #2271b1;
	padding-left: 12px;
	margin-bottom: 20px;
}




/* --- コンテナ設定 --- */
.conaclog-admin .conaclog-privacy-option-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 15px;
	margin: 20px 0;
	max-width: 1000px;
}


/* --- カード本体のスタイル --- */
.conaclog-admin .conaclog-privacy-card {
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding: 12px;
	background: #fff;
	border: 2px solid #f0f0f1;
	border-radius: 10px;
	transition: all 0.2s ease;
	cursor: pointer;
}





.conaclog-admin .conaclog-privacy-card:hover {
	border-color: #2271b1;
	background: #f6f7f7;
}

/* --- 選択中のカードを強調 --- */
.conaclog-admin .conaclog-privacy-card.conaclog-is-checked  {
	border-color: #2271b1;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	background-color: #f6f9fc;
}


/* --- ラジオボタンのズレ・楕円対策 --- */
.conaclog-admin .conaclog-privacy-card input[type="radio"] {
	flex-shrink: 0; /* これで絶対潰れない */
	min-width: 18px; /* min-widthも指定するとより安全 */
	width: 18px ;
	height: 18px ;
	margin: 4px 12px 0 0 ;
	cursor: pointer;

	/* WordPress標準スタイルをリセット */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff ;
	border: 1px solid #8c8f94 ;
	border-radius: 50% ; /* 楕円化防止のダメ押し */

	display: grid;
	place-content: center;
}

/* --- チェック時の中心点を自作 --- */
/* 修正点：先頭のドット "." が抜けていたのを修正 */
.conaclog-admin .conaclog-privacy-card input[type="radio"]:checked::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2271b1;
}

/* --- 選択時のラジオボタン枠線 --- */
.conaclog-admin .conaclog-privacy-card input[type="radio"]:checked {
	border-color: #2271b1 ;
	box-shadow: none ; /* WP標準の青い影を消す */
}

/* --- テキスト装飾 --- */
.conaclog-admin .conaclog-card-title {
	display: block;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 8px;
	color: #1d2327;
}

.conaclog-admin .conaclog-card-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #50575e;
}


/* 上限件数入力フォーム */
.conaclog-max-row-group {
	display: flex;
	align-items: center;
	background: #f0f6fb;
	padding: 15px;
	border-radius: 6px;
	gap: 15px;
}




/* 自己アクセスcookies */
.conaclog-cookies-ignore {
	padding:12px;
	background:#f0f6fb;
	border-left:4px solid #72aee6;
	margin-bottom:15px;
}


/* 除外IP入力textarea */
#conaclog-excl-ip {
	width : 400px;
	max-width : 100%;
}




.conaclog-admin section,
.conaclog-admin .postbox {
	background: #fff;
	border: 1px solid #ccd0d4;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	padding: 20px 30px;
	margin-bottom: 30px;
	border-radius: 8px;
}





.conaclog-main-save-area {
	position: sticky;
	bottom: 20px;
	box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
	z-index: 10;
}




/* 未保存バナーを上部に固定（フローティング通知） */
#conaclog-global-unsaved {
	position: sticky;
	top: 32px; /* WP管理バーの下 */
	z-index: 99;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	animation: conaclog-slideDown 0.3s ease-out;
}

@keyframes conaclog-slideDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}





/* --- スマホ対応 --- */
@media (max-width: 782px) {

	.conaclog-admin-form {
		padding :10px;
	}


	.conaclog-admin section,
	.conaclog-admin .postbox {
		padding: 10px 15px;
	}


	.conaclog-admin .conaclog-privacy-option-container {
		display: flex;
		flex-direction: column;

	}

	/* --- カード本体のスタイル --- */
	.conaclog-admin .conaclog-privacy-card {
		padding: 6px;
	}


}



/* ------------------------------------------------------ */
/*        (3) whois画面                                   */
/* ------------------------------------------------------ */

.conaclog-summary-table {
	width: 600px;
	padding: 10px;
	box-sizing:border-box;
	border: 1px solid #c3c4c7;
}

.conaclog-whois-pre {
	width: 600px;
	overflow : auto;
	padding: 10px;
	background-color: #f5f6f7;
	box-sizing: border-box;
	border: 1px solid #c3c4c7;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 782px) {

	.conaclog-summary-table {
		max-width: 100%;
	}

	.conaclog-whois-pre {
		max-width: 100%;
	}

}