/**
 * TimeGuard - Freelancer Time Log Pro
 * Admin styles, daneGuard visual language.
 */

:root {
	--tg-navy: #16233f;
	--tg-navy-soft: #1e2b4d;
	--tg-blue: #2f6bff;
	--tg-blue-soft: #e9f0ff;
	--tg-green: #12a150;
	--tg-green-soft: #e4f6ec;
	--tg-amber: #d9820a;
	--tg-amber-soft: #fdf1df;
	--tg-purple: #7c3aed;
	--tg-purple-soft: #f1eaff;
	--tg-rose: #e11d48;
	--tg-rose-soft: #ffe9ee;
	--tg-teal: #0d9488;
	--tg-teal-soft: #e2f7f4;
	--tg-ink: #0f1b33;
	--tg-muted: #6b7a90;
	--tg-line: #e8edf5;
	--tg-bg: #f4f7fc;
	--tg-radius: 18px;
	--tg-radius-sm: 12px;
	--tg-shadow: 0 1px 2px rgba(15, 27, 51, .04), 0 10px 30px rgba(15, 27, 51, .05);
	--tg-shadow-sm: 0 1px 2px rgba(15, 27, 51, .05), 0 4px 14px rgba(15, 27, 51, .05);
}

/* ---------- Page shell ---------- */

/* Tint the admin content area to match the Guard family. */
#wpbody-content {
	background: var(--tg-bg);
}

.tg-wrap {
	margin: 0 20px 0 2px;
	padding-top: 8px;
	color: var(--tg-ink);
	font-size: 13.5px;
}

.tg-wrap * {
	box-sizing: border-box;
}

/* Hero panel behind the page title. */
.tg-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 12px 0 18px;
	padding: 22px 24px;
	background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	box-shadow: var(--tg-shadow);
	flex-wrap: wrap;
}

.tg-page-head-left {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.tg-page-icon {
	width: 34px;
	height: 34px;
	font-size: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 10px;
	background: var(--tg-blue-soft);
	color: var(--tg-blue);
	flex: 0 0 auto;
}

.tg-page-title {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tg-navy);
}

.tg-page-sub {
	margin: 4px 0 0;
	color: var(--tg-muted);
	font-size: 13px;
}

/* ---------- Buttons ---------- */

.tg-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tg-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.tg-btn-primary {
	background: var(--tg-blue);
	color: #fff;
	box-shadow: 0 1px 2px rgba(47, 107, 255, .25), 0 6px 16px rgba(47, 107, 255, .22);
}

.tg-btn-primary:hover,
.tg-btn-primary:focus {
	background: #1f5aee;
	color: #fff;
}

.tg-btn-ghost {
	background: #fff;
	color: var(--tg-ink);
	border-color: var(--tg-line);
}

.tg-btn-ghost:hover,
.tg-btn-ghost:focus {
	background: #f8fafc;
	color: var(--tg-ink);
}

.tg-btn-danger-link {
	background: transparent;
	color: var(--tg-rose);
	padding-left: 6px;
	padding-right: 6px;
}

.tg-btn-danger-link:hover {
	text-decoration: underline;
}

.tg-btn-lg {
	padding: 11px 20px;
	font-size: 14px;
}

.tg-btn-sm {
	padding: 5px 10px;
	font-size: 12px;
}

.tg-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--tg-muted);
	cursor: pointer;
	font-size: 12px;
	text-decoration: underline;
}

/* ---------- Period bar ---------- */

.tg-periodbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.tg-period {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 10px;
	padding: 8px 14px;
	font-weight: 600;
	box-shadow: var(--tg-shadow);
}

.tg-period .dashicons {
	color: var(--tg-muted);
	font-size: 17px;
	width: 17px;
	height: 17px;
}

.tg-period-tabs {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 10px;
	padding: 3px;
	box-shadow: var(--tg-shadow);
}

.tg-period-tab {
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tg-muted);
	text-decoration: none;
}

.tg-period-tab:hover {
	color: var(--tg-ink);
}

.tg-period-tab.is-active {
	background: var(--tg-blue);
	color: #fff;
}

/* ---------- Stat cards ---------- */

.tg-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

@media (max-width: 1200px) {
	.tg-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.tg-stats {
		grid-template-columns: 1fr;
	}
}

.tg-stat {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	padding: 20px 22px;
	box-shadow: var(--tg-shadow);
}

.tg-stat-label {
	font-size: 11px;
	color: var(--tg-muted);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tg-stat-value {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--tg-navy);
	line-height: 1.15;
	margin: 8px 0 16px;
}

.tg-stat-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.tg-stat-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	font-size: 23px;
	line-height: 44px;
	text-align: center;
	flex: 0 0 auto;
}

.tg-stat-sub {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--tg-muted);
	font-weight: 500;
}

.tg-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: currentColor;
}

.tg-dot-blue { color: var(--tg-blue); }
.tg-dot-green { color: var(--tg-green); }
.tg-dot-amber { color: var(--tg-amber); }
.tg-dot-purple { color: var(--tg-purple); }
.tg-dot-rose { color: var(--tg-rose); }
.tg-dot-teal { color: var(--tg-teal); }

/* ---------- Tone helpers ---------- */

.tg-tone-blue { background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-tone-green { background: var(--tg-green-soft); color: var(--tg-green); }
.tg-tone-amber { background: var(--tg-amber-soft); color: var(--tg-amber); }
.tg-tone-purple { background: var(--tg-purple-soft); color: var(--tg-purple); }
.tg-tone-rose { background: var(--tg-rose-soft); color: var(--tg-rose); }
.tg-tone-teal { background: var(--tg-teal-soft); color: var(--tg-teal); }

/* ---------- Card + table ---------- */

.tg-card {
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	box-shadow: var(--tg-shadow);
	overflow: hidden;
	margin-bottom: 18px;
}

.tg-card-pad {
	padding: 20px;
}

.tg-section-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tg-navy);
}

.tg-table-scroll {
	overflow-x: auto;
}

.tg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.tg-table thead th {
	background: #fbfcfe;
	border-bottom: 1px solid var(--tg-line);
	text-align: left;
	padding: 11px 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tg-muted);
	white-space: nowrap;
}

.tg-table tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid #f1f4f9;
	vertical-align: middle;
}

.tg-table tbody tr:last-child td {
	border-bottom: 0;
}

.tg-table tbody tr:hover {
	background: #fafbfd;
}

.tg-num { text-align: right; }
.tg-center { text-align: center; }
.tg-nowrap { white-space: nowrap; }
.tg-muted { color: var(--tg-muted); }
.tg-strong { font-weight: 700; color: var(--tg-navy); }
.tg-mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.tg-danger { color: var(--tg-rose) !important; }

.tg-actions-col {
	width: 48px;
	text-align: right;
}

/* Project cell */

.tg-proj {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tg-proj-dot {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex: 0 0 auto;
	position: relative;
}

.tg-proj-dot::after {
	content: "";
	position: absolute;
	inset: 9px;
	border-radius: 3px;
	background: currentColor;
	opacity: .85;
}

.tg-proj-name {
	font-weight: 600;
	color: var(--tg-navy);
}

.tg-ticket {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 5px;
	background: #f1f5f9;
	color: var(--tg-muted);
	font-size: 11px;
	font-weight: 600;
}

.tg-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
}

/* Billable toggle */

.tg-billable {
	background: none;
	border: 0;
	padding: 2px;
	cursor: pointer;
	color: #cbd5e1;
	line-height: 1;
}

.tg-billable .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.tg-billable.is-on {
	color: var(--tg-green);
}

.tg-billable.is-busy {
	opacity: .4;
	pointer-events: none;
}

/* Row menu */

.tg-rowmenu {
	position: relative;
	display: inline-block;
}

.tg-rowmenu-btn {
	background: none;
	border: 0;
	padding: 4px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--tg-muted);
	line-height: 1;
}

.tg-rowmenu-btn:hover {
	background: #f1f5f9;
	color: var(--tg-ink);
}

.tg-rowmenu-list {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 30;
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
	padding: 6px;
	text-align: left;
}

.tg-rowmenu.is-open .tg-rowmenu-list {
	display: block;
}

.tg-rowmenu-list a,
.tg-rowmenu-list button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 12.5px;
	color: var(--tg-ink);
	text-decoration: none;
	cursor: pointer;
}

.tg-rowmenu-list a:hover,
.tg-rowmenu-list button:hover {
	background: #f4f7fb;
}

/* Billable progress bar */

.tg-bar-label {
	font-size: 11.5px;
	color: var(--tg-muted);
	margin-bottom: 5px;
	white-space: nowrap;
}

.tg-bar {
	height: 4px;
	width: 150px;
	max-width: 100%;
	border-radius: 999px;
	background: #eef2f7;
	overflow: hidden;
}

.tg-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: currentColor;
}

/* Table footer + pager */

.tg-tablefoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--tg-line);
	background: #fcfdff;
	font-size: 12.5px;
}

.tg-pager {
	display: inline-flex;
	gap: 6px;
}

.tg-page {
	min-width: 30px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	border: 1px solid var(--tg-line);
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tg-muted);
	text-decoration: none;
	background: #fff;
}

.tg-page.is-active {
	background: var(--tg-blue);
	border-color: var(--tg-blue);
	color: #fff;
}

.tg-bulkbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

/* Empty state */

.tg-empty {
	padding: 46px 20px;
	text-align: center;
	color: var(--tg-muted);
}

.tg-empty .dashicons {
	font-size: 34px;
	width: 34px;
	height: 34px;
	color: #cbd5e1;
}

.tg-empty h3 {
	margin: 10px 0 4px;
	font-size: 15px;
	color: var(--tg-navy);
}

.tg-empty p {
	margin: 0;
	font-size: 13px;
}

/* ---------- Inputs ---------- */

.tg-input,
.tg-wrap select.tg-input {
	border: 1px solid var(--tg-line);
	border-radius: 9px;
	padding: 7px 10px;
	font-size: 13px;
	background: #fff;
	color: var(--tg-ink);
	min-height: 34px;
	box-shadow: none;
	max-width: 100%;
}

.tg-input:focus {
	border-color: var(--tg-blue);
	outline: 2px solid rgba(37, 99, 235, .15);
	outline-offset: 0;
}

.tg-input-project {
	width: 230px;
	font-weight: 600;
}

.tg-input-rate {
	width: 92px;
	text-align: right;
}

.tg-rate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
}

.tg-rate-cur {
	color: var(--tg-muted);
	font-size: 12px;
}

.tg-savebar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 22px 0 4px;
}

.tg-savehint {
	font-size: 12px;
}

.tg-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 600px) {
	.tg-grid-2 {
		grid-template-columns: 1fr;
	}
}

.tg-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tg-ink);
	cursor: pointer;
}

.tg-duration {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tg-duration input {
	width: 74px;
	border: 1px solid var(--tg-line);
	border-radius: 9px;
	padding: 7px 10px;
	min-height: 34px;
	font-size: 13px;
}

.tg-duration span {
	color: var(--tg-muted);
	font-size: 12px;
}

/* ---------- Admin bar timer ---------- */

.awd-ttt-wrap {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 32px;
}

#wpadminbar .awd-ttt-btn {
	display: inline-block;
	padding: 0 12px;
	height: 22px;
	line-height: 22px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	color: #fff;
	background: #2f9e5f;
	border: 0;
}

#wpadminbar .awd-ttt-btn.awd-ttt-stop {
	background: #d9455f;
}

#wpadminbar .awd-ttt-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #eaf0f8;
}

/* ---------- Floating timer ---------- */

.awd-ttt-float {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 99998;
	width: 208px;
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
	overflow: hidden;
}

.awd-ttt-float-handle {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	background: var(--tg-navy);
	color: #fff;
	cursor: move;
	font-size: 12px;
	user-select: none;
}

.awd-ttt-float-handle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.awd-ttt-float-body {
	padding: 14px 12px 12px;
	text-align: center;
}

.awd-ttt-float-time {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tg-navy);
	margin-bottom: 10px;
}

.awd-ttt-float-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* ---------- Modals ---------- */

.awd-ttt-hidden {
	display: none !important;
}

#awd-ttt-modal-backdrop,
#tg-manual-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .45);
	z-index: 99998;
}

#awd-ttt-modal,
#tg-manual-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.awd-ttt-modal-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, calc(100vw - 40px));
	max-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
	overflow: hidden;
}

.awd-ttt-modal-inner.awd-ttt-modal-manual {
	left: auto;
	top: auto;
	transform: none;
}

.awd-ttt-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--tg-line);
	cursor: move;
	user-select: none;
}

.awd-ttt-modal-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--tg-navy);
}

.awd-ttt-x {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--tg-muted);
	cursor: pointer;
	padding: 0 4px;
}

.awd-ttt-modal-body {
	padding: 18px 20px;
	overflow-y: auto;
}

.awd-ttt-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--tg-line);
	background: #fbfcfe;
}

.awd-ttt-label {
	display: block;
	margin: 14px 0 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tg-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.awd-ttt-modal-body > .awd-ttt-label:first-child,
#awd-ttt-form > .awd-ttt-label:first-child {
	margin-top: 0;
}

.awd-ttt-field {
	width: 100%;
	border: 1px solid var(--tg-line);
	border-radius: 9px;
	padding: 8px 11px;
	font-size: 13px;
	min-height: 36px;
	background: #fff;
	color: var(--tg-ink);
}

.awd-ttt-field:focus {
	border-color: var(--tg-blue);
	outline: 2px solid rgba(37, 99, 235, .15);
}

.awd-ttt-meta {
	margin: 0 0 4px;
	padding: 10px 12px;
	background: #f6f8fb;
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--tg-muted);
}

.awd-ttt-meta strong {
	color: var(--tg-ink);
}

.awd-ttt-meta-sep {
	margin: 0 6px;
	opacity: .5;
}

.tg-choice-lead {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tg-navy);
}

.tg-choice-sub {
	margin: 0 0 16px;
	color: var(--tg-muted);
}

.tg-choice-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	flex-wrap: wrap;
}

/* Notices inside our pages */

.tg-wrap .notice {
	border-radius: 10px;
	margin: 0 0 16px;
}

/* ---------- Recovery panel ---------- */

.tg-recover {
	border-left: 3px solid var(--tg-amber);
}

.tg-recover-list {
	margin: 12px 0 16px;
	padding: 12px 16px;
	list-style: none;
	background: #fbfcfe;
	border: 1px solid var(--tg-line);
	border-radius: 10px;
	font-size: 13px;
}

.tg-recover-list li {
	margin: 0 0 6px;
	color: var(--tg-muted);
}

.tg-recover-list li:last-child {
	margin-bottom: 0;
}

.tg-recover-list strong {
	color: var(--tg-navy);
}

.tg-apply-rates {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--tg-line);
}

/* ==================================================================
   Guard app shell — dark sidebar + main column (daneGuard parity)
   ================================================================== */

.tg-app {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 6px 16px 40px 0;
}

.tg-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Sidebar */

.tg-side {
	flex: 0 0 234px;
	width: 234px;
	position: sticky;
	top: 46px;
	align-self: flex-start;
}

.tg-side-inner {
	background: linear-gradient(180deg, #0d1a3d 0%, #14295f 100%);
	border-radius: 20px;
	padding: 18px 14px 16px;
	box-shadow: 0 18px 48px rgba(21, 44, 105, .18);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tg-side-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 2px 8px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	margin-bottom: 8px;
}

.tg-side-logo {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.tg-side-name {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	white-space: nowrap;
}

.tg-side-ver {
	font-size: 11px;
	color: #7d90c4;
	font-weight: 700;
	margin-left: 3px;
}

.tg-nav-label {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: #6f83b8;
	margin: 14px 12px 5px;
}

.tg-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tg-nav-a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 13px;
	border-radius: 11px;
	color: #c3d1f2;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.tg-nav-a svg {
	flex: 0 0 18px;
	opacity: .85;
}

.tg-nav-a:hover,
.tg-nav-a:focus {
	background: rgba(255, 255, 255, .08);
	color: #fff;
	box-shadow: none;
}

.tg-nav-a.is-active {
	background: var(--tg-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(47, 107, 255, .38);
}

.tg-nav-a.is-active svg {
	opacity: 1;
}

.tg-side-guard {
	margin-top: 14px;
	padding-top: 6px;
	text-align: center;
}

.tg-side-dog {
	display: block;
	width: 100%;
	max-width: 210px;
	margin: 0 auto;
	height: auto;
}

/* Quote card sits below the navy sidebar, like the Guard family. */
.tg-side-quote-out {
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 16px;
	box-shadow: var(--tg-shadow-sm);
	padding: 14px 16px;
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tg-muted);
}

.tg-side-quote-out strong {
	display: block;
	color: var(--tg-navy);
	font-weight: 700;
	margin-bottom: 3px;
}

.tg-side-quote-out em {
	font-style: italic;
}

.tg-paw {
	margin-right: 2px;
}

/* Collapse the sidebar on narrow screens */

@media (max-width: 960px) {
	.tg-app {
		flex-direction: column;
	}

	.tg-side {
		position: static;
		width: 100%;
		flex-basis: auto;
	}

	.tg-side-inner {
		min-height: 0;
	}

	.tg-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==================================================================
   Metric cards — daneGuard structure (icon disc + value + dot foot)
   ================================================================== */

.tg-metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

@media (max-width: 1400px) {
	.tg-metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.tg-metric-grid {
		grid-template-columns: 1fr;
	}
}

.tg-metric {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	margin-bottom: 0;
}

.tg-metric-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tg-muted);
}

.tg-metric-body {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tg-metric-disc {
	width: 58px;
	height: 58px;
	flex: 0 0 58px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tg-metric-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tg-metric-value {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--tg-navy);
	line-height: 1.05;
}

.tg-metric-foot {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--tg-muted);
	font-weight: 500;
}


/* WordPress admin notices, relocated above the app shell */
.wrap.tg-wrap > .wp-header-end {
	border: 0;
	margin: 0;
	height: 0;
}

.wrap.tg-wrap > .notice,
.wrap.tg-wrap > .updated,
.wrap.tg-wrap > .error,
.wrap.tg-wrap > .is-dismissible {
	margin: 12px 0 16px;
	border-radius: 10px;
}