/* Admin UI styles scoped to BrenWP Client Safe Mode only */
.brenwp-ui{
	--brenwp-ui-primary: var(--wp-admin-theme-color, #2271b1);
	--brenwp-ui-primary-soft: rgba(34,113,177,.10);
	--brenwp-ui-surface:#fff;
	--brenwp-ui-surface-2:#f6f7f7;
	--brenwp-ui-text:#1d2327;
	--brenwp-ui-muted:#50575e;
	--brenwp-ui-success:#1d7e4b;
	--brenwp-ui-success-soft: rgba(29,126,75,.10);
	--brenwp-ui-danger:#b32d2e;
	--brenwp-ui-danger-soft: rgba(179,45,46,.10);
	--brenwp-ui-warning:#dba617;
	--brenwp-ui-border:#dcdcde;
}

.brenwp-csm-wrap{
	--brenwp-csm-accent: var(--brenwp-ui-primary);
	--brenwp-csm-accent-soft: var(--brenwp-ui-primary-soft);
	--brenwp-csm-surface: var(--brenwp-ui-surface);
	--brenwp-csm-surface-2: var(--brenwp-ui-surface-2);
	--brenwp-csm-text: var(--brenwp-ui-text);
	--brenwp-csm-muted: var(--brenwp-ui-muted);
	--brenwp-csm-success: var(--brenwp-ui-success);
	--brenwp-csm-success-soft: var(--brenwp-ui-success-soft);
	--brenwp-csm-danger: var(--brenwp-ui-danger);
	--brenwp-csm-danger-soft: var(--brenwp-ui-danger-soft);
	--brenwp-csm-warning: var(--brenwp-ui-warning);
	--brenwp-csm-border: var(--brenwp-ui-border);
	max-width:1240px;
	margin:12px auto 0;
}

.brenwp-csm-wrap,
.brenwp-csm-wrap * ,
.brenwp-csm-wrap *::before,
.brenwp-csm-wrap *::after{ box-sizing:border-box; }

/* Hero */
.brenwp-csm-hero{
	background: linear-gradient(135deg,#fff 0%, rgba(34,113,177,.06) 45%, rgba(29,126,75,.06) 100%);
	border:1px solid var(--brenwp-csm-border);
	border-radius:14px;
	padding:18px;
	margin:12px 0 18px;
	box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.brenwp-csm-hero__inner{ display:flex; gap:16px; align-items:center; justify-content:space-between; }
.brenwp-csm-hero__title{ display:flex; align-items:center; gap:12px; }
.brenwp-csm-hero__icon{
	width:38px; height:38px; font-size:22px; line-height:38px;
	border-radius:14px;
	color:var(--brenwp-csm-accent);
	background:var(--brenwp-csm-accent-soft);
	border:1px solid rgba(34,113,177,.18);
	display:inline-flex; align-items:center; justify-content:center;
}
.brenwp-csm-subtitle{ margin:8px 0 0; color:var(--brenwp-csm-muted); font-size:13px; }
.brenwp-csm-hero__actions{ display:flex; align-items:center; gap:10px; }

.brenwp-csm-pill{
	display:inline-flex; gap:6px; align-items:center;
	padding:6px 12px; border-radius:999px;
	background: rgba(255,255,255,.75);
	border:1px solid var(--brenwp-csm-border);
	backdrop-filter: blur(2px);
}

/* Overview metrics (hero summary) */
.brenwp-csm-metrics{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:12px;
	margin-top:16px;
}
.brenwp-csm-metric{
	display:flex;
	gap:12px;
	align-items:flex-start;
	padding:12px 14px;
	border:1px solid rgba(0,0,0,.08);
	border-radius:18px;
	background: rgba(255,255,255,.88);
	box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.brenwp-csm-metric__icon{
	width:36px;
	height:36px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	color: var(--brenwp-csm-accent);
	background: rgba(34,113,177,.08);
	border:1px solid rgba(34,113,177,.16);
}
.brenwp-csm-metric__icon .dashicons{ font-size:18px; width:18px; height:18px; }
.brenwp-csm-metric__body{
	min-width:0;
	width:100%;
	display:grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label value"
		"hint hint";
	column-gap:10px;
	row-gap:6px;
	align-items:center;
}
.brenwp-csm-metric__label{ grid-area:label; font-weight:650; color:var(--brenwp-csm-text); }
.brenwp-csm-metric__value{ grid-area:value; text-align:right; font-weight:650; }
.brenwp-csm-metric__hint{ grid-area:hint; color:var(--brenwp-csm-muted); font-size:12px; line-height:1.3; }

/* App shell */
.brenwp-csm-app{
	display:grid;
	grid-template-columns:220px minmax(0,1fr) 320px;
	gap:16px;
	align-items:start;
}
.brenwp-csm-nav{ position:sticky; top:28px; align-self:start; }
.brenwp-csm-nav__card{
	background: rgba(255,255,255,.78);
	border:1px solid rgba(0,0,0,.08);
	border-radius:18px;
	padding:10px;
	box-shadow:0 1px 1px rgba(0,0,0,.03);
}
.brenwp-csm-nav__group-label{
	margin:10px 8px 6px;
	padding-top:10px;
	border-top:1px solid rgba(0,0,0,.06);
	font-size:11px;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--brenwp-csm-muted);
}
.brenwp-csm-nav__group-label:first-child{
	margin-top:0;
	padding-top:0;
	border-top:0;
}
.brenwp-csm-nav__item{
	display:flex; align-items:center; justify-content:space-between;
	gap:10px;
	padding:10px;
	border-radius:14px;
	text-decoration:none;
	color:var(--brenwp-csm-text);
	border:1px solid transparent;
}
.brenwp-csm-nav__item:hover{
	background: rgba(34,113,177,.06);
	border-color: rgba(34,113,177,.16);
}
.brenwp-csm-nav__item.is-active{
	background: linear-gradient(90deg, rgba(34,113,177,.12), rgba(29,126,75,.10));
	border-color: rgba(34,113,177,.20);
	box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.brenwp-csm-nav__left{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brenwp-csm-nav__label{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brenwp-csm-nav__badge{
	display:inline-flex; align-items:center; justify-content:center;
	padding:2px 8px;
	border-radius:999px;
	font-size:11px;
	font-weight:700;
	border:1px solid rgba(0,0,0,.10);
	background: rgba(0,0,0,.04);
}
.brenwp-csm-nav__badge.is-on{ background:var(--brenwp-csm-success-soft); border-color: rgba(29,126,75,.25); }
.brenwp-csm-nav__badge.is-off{ background:var(--brenwp-csm-danger-soft); border-color: rgba(179,45,46,.25); }

.brenwp-csm-main{ min-width:0; }
.brenwp-csm-sidebar{ position:sticky; top:28px; align-self:start; width:320px; }

/* Panel */
.brenwp-csm-panel{
	background: var(--brenwp-csm-surface);
	border:1px solid var(--brenwp-csm-border);
	border-radius:14px;
	padding:14px;
	box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.brenwp-csm-panelhead{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:12px;
	padding:2px 2px 14px;
	border-bottom:1px solid rgba(0,0,0,.06);
	margin-bottom:14px;
}
.brenwp-csm-panelhead__title{ margin:0; font-size:15px; line-height:1.3; }
.brenwp-csm-panelhead__meta{ margin:6px 0 0; color:#646970; font-size:12.5px; }
.brenwp-csm-panelhead__right{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }

.brenwp-csm-chip{
	display:inline-flex; align-items:center;
	padding:5px 10px;
	border-radius:999px;
	border:1px solid rgba(0,0,0,.10);
	background: rgba(0,0,0,.03);
	font-weight:650;
	font-size:12px;
}
.brenwp-csm-chip.is-on{ background:var(--brenwp-csm-success-soft); border-color: rgba(29,126,75,.25); }
.brenwp-csm-chip.is-off{ background:var(--brenwp-csm-danger-soft); border-color: rgba(179,45,46,.25); }
.brenwp-csm-chip.is-neutral{ background: rgba(34,113,177,.06); border-color: rgba(34,113,177,.16); }

.brenwp-csm-card{
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	border-radius:18px;
	padding:14px;
	margin:12px 0;
	box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.brenwp-csm-card--accent{ border-left:4px solid var(--brenwp-csm-accent); }

.brenwp-csm-badge{
	display:inline-block;
	padding:3px 10px;
	border-radius:999px;
	border:1px solid var(--brenwp-csm-border);
	background:#f6f7f7;
	font-weight:700;
	letter-spacing:.2px;
}
.brenwp-csm-badge.on{ background:var(--brenwp-csm-success-soft); border-color: rgba(29,126,75,.35); }
.brenwp-csm-badge.off{ background:var(--brenwp-csm-danger-soft); border-color: rgba(179,45,46,.35); }

.brenwp-csm-commandbar{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px;
	padding:12px 14px;
	border:1px solid rgba(0,0,0,.08);
	border-radius:14px;
	background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
	margin: 0 0 14px;
}
.brenwp-csm-commandbar__left{ display:flex; flex-direction:column; gap:2px; }
.brenwp-csm-commandbar__title{ font-weight:650; }
.brenwp-csm-commandbar__meta{ font-size:12px; opacity:.8; }

.brenwp-csm-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brenwp-csm-toolbar .regular-text{ width:260px; max-width:100%; }
.brenwp-csm-toolbar__sep{ width:1px; height:28px; background: rgba(0,0,0,.12); margin:0 2px; }

.brenwp-csm-diagnostics{
	width:100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size:12px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.12);
	background: rgba(0,0,0,.02);
	padding:10px;
	resize: vertical;
}

.brenwp-csm-wrap .form-table{
	margin-top:8px;
	background:#fff;
	border:1px solid #e5e5e5;
	border-radius:14px;
	overflow:hidden;
}
.brenwp-csm-wrap .form-table th,
.brenwp-csm-wrap .form-table td{ padding:16px 18px; vertical-align:top; }
.brenwp-csm-wrap .form-table th{
	width:260px;
	font-weight:600;
	color:#2c3338;
	background: linear-gradient(180deg, rgba(246,247,247,1) 0%, rgba(255,255,255,1) 100%);
}
.brenwp-csm-wrap .form-table tr + tr th,
.brenwp-csm-wrap .form-table tr + tr td{ border-top:1px solid #f0f0f1; }
.brenwp-csm-wrap .form-table .description{ margin-top:8px; color:#646970; }

.brenwp-csm-check{
	display:inline-flex;
	gap:8px;
	align-items:flex-start;
	padding:8px 10px;
	border:1px solid #e5e5e5;
	border-radius:12px;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(34,113,177,.02) 100%);
}
.brenwp-csm-check:hover{ border-color: rgba(34,113,177,.28); background: rgba(34,113,177,.03); }
.brenwp-csm-check input{ margin-top:2px; }

.brenwp-csm-footer{
	margin-top:18px;
	color:#646970;
	padding:10px 0;
	border-top:1px solid #dcdcde;
}

.brenwp-csm-notice{ border-left-color: var(--brenwp-csm-warning); }

.brenwp-csm-notice-custom{ margin:8px 0 0; }

.brenwp-csm-field--hidden{ display:none; }
.brenwp-csm-field--sub{ margin-top:10px; }

/* A11y focus */
.brenwp-csm-wrap a:focus-visible,
.brenwp-csm-wrap button:focus-visible,
.brenwp-csm-wrap input:focus-visible,
.brenwp-csm-wrap select:focus-visible{
	outline:none;
	box-shadow:0 0 0 2px rgba(34,113,177,.25);
}

/* Responsive */
@media (max-width:1180px){
	.brenwp-csm-app{ grid-template-columns:1fr; }
	.brenwp-csm-nav{ position:static; top:auto; }
	.brenwp-csm-nav__card{ display:flex; gap:8px; overflow:auto; }
	.brenwp-csm-nav__item{ flex:0 0 auto; }
	.brenwp-csm-sidebar{ position:static; width:auto; }
	.brenwp-csm-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:782px){
	.brenwp-csm-hero__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
	.brenwp-csm-commandbar{ flex-direction:column; align-items:stretch; }
	.brenwp-csm-commandbar__right{ width:100%; }
	.brenwp-csm-toolbar .regular-text{ width:100%; }
	.brenwp-csm-metrics{ grid-template-columns: 1fr; }
	.brenwp-csm-wrap .form-table,
	.brenwp-csm-wrap .form-table tbody,
	.brenwp-csm-wrap .form-table tr,
	.brenwp-csm-wrap .form-table th,
	.brenwp-csm-wrap .form-table td{ display:block; width:100%; }
	.brenwp-csm-wrap .form-table th{ padding-bottom:6px; }
	.brenwp-csm-wrap .form-table td{ padding-left:0; }
	.brenwp-csm-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
	.brenwp-csm-logs-table{ min-width:720px; }
}


/* Switch state indicator (ON/OFF) */
.brenwp-csm-switch-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1.4;
	border: 1px solid rgba(0,0,0,0.12);
	background: rgba(0,0,0,0.02);
}
.brenwp-csm-switch-state .on { display: none; font-weight: 600; }
.brenwp-csm-switch-state .off { display: inline; font-weight: 600; opacity: 0.8; }
.brenwp-csm-switch input:checked ~ .brenwp-csm-switch-state .on { display: inline; }
.brenwp-csm-switch input:checked ~ .brenwp-csm-switch-state .off { display: none; }

/* Presets */
.brenwp-csm-preset-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
.brenwp-csm-preset {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	background: rgba(0,0,0,0.01);
}
.brenwp-csm-preset__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.brenwp-csm-preset__meta strong {
	font-size: 13px;
}
.brenwp-csm-hr {
	border: 0;
	height: 1px;
	background: rgba(0,0,0,0.08);
	margin: 14px 0;
}

/* Restricted user picker (AJAX search) */
.brenwp-csm-userpick__current {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.brenwp-csm-user-results {
	margin-top: 8px;
	padding: 6px;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	background: #fff;
	max-height: 220px;
	overflow: auto;
}
.brenwp-csm-user-results[aria-busy="true"] {
	opacity: 0.6;
}
.brenwp-csm-user-results__item {
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}
.brenwp-csm-user-results__item:hover,
.brenwp-csm-user-results__item:focus {
	background: rgba(0,0,0,0.04);
	outline: none;
}
.brenwp-csm-user-results__empty {
	padding: 8px 10px;
	color: #666;
}


/* Simple UI: collapsible tools + advanced panels */
details.brenwp-csm-tools { display: inline-block; }
details.brenwp-csm-tools > summary { list-style: none; cursor: pointer; }
details.brenwp-csm-tools > summary::-webkit-details-marker { display: none; }
details.brenwp-csm-tools[open] > summary { margin-bottom: 6px; }
details.brenwp-csm-advanced > summary.brenwp-csm-advanced__summary { cursor: pointer; font-weight: 600; }
details.brenwp-csm-advanced > summary::-webkit-details-marker { display: none; }
details.brenwp-csm-advanced { margin: 10px 0; }

/* Settings grouping (beginner-friendly layout) */
.brenwp-csm-group{ margin: 16px 0 22px; }
.brenwp-csm-group__title{ margin: 0 0 6px; font-size: 14px; }
.brenwp-csm-group__desc{ margin: 0 0 10px; }
.brenwp-csm-group .form-table{ margin-top: 0; }

/* Collapsed “Advanced options” section (so the main UI stays clean) */
details.brenwp-csm-advanced--section{
	margin: 14px 0 22px;
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}
details.brenwp-csm-advanced--section > summary.brenwp-csm-advanced__summary{
	padding: 12px 14px;
	background: linear-gradient(180deg, rgba(246,247,247,1) 0%, rgba(255,255,255,1) 100%);
	border: 0;
	position: relative;
}
details.brenwp-csm-advanced--section > summary.brenwp-csm-advanced__summary::after{
	content: '+';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	color: #50575e;
}
details.brenwp-csm-advanced--section[open] > summary.brenwp-csm-advanced__summary::after{ content: '–'; }
details.brenwp-csm-advanced--section[open] > summary.brenwp-csm-advanced__summary{ border-bottom: 1px solid #f0f0f1; }
details.brenwp-csm-advanced--section .brenwp-csm-advanced__body{ padding: 14px; }
details.brenwp-csm-advanced--section .brenwp-csm-group{ margin: 0; }