/* ===========================================================================
   قشرة اللوحات (WS5) — سايدبار أخضر داكن ثابت يمين + topbar أبيض + بطاقات إحصاء.
   يعتمد على متغيّرات الألوان المُعرّفة عالمياً في redesign.css.
   =========================================================================== */
:root {
	--gs-dash-side: 268px;
	--gs-dash-topbar: 74px;
}

body.gs-dash {
	margin: 0;
	background: var(--gs-surface, #F7F6F2);
	color: var(--gs-text, #1d2a22);
}
.gs-dash__wrap { display: flex; min-height: 100vh; }

/* ===== السايدبار الأخضر الداكن ===== */
.gs-dash__sidebar {
	width: var(--gs-dash-side);
	flex: 0 0 var(--gs-dash-side);
	background: var(--gs-green-dark, #123C2B);
	background-image: linear-gradient(180deg, #164632 0%, var(--gs-green-dark, #123C2B) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 40;
}

/* الشعار — تجاوز ألوان الـbrand لتظهر بيضاء على الأخضر */
.gs-dash__brand {
	padding: 20px 20px 16px;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.gs-dash__brand .gs-brand,
.gs-dash__brand .gs-brand:hover { color: #fff; gap: 12px; }
.gs-dash__brand .gs-brand__name { color: #fff; font-size: 19px; }
.gs-dash__brand .gs-brand__tag { color: rgba(255,255,255,.62); }
.gs-dash__brand .gs-brand__logo { width: 44px; height: 44px; }

/* التنقّل */
.gs-dash__nav {
	flex: 1;
	overflow-y: auto;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.gs-dash__nav::-webkit-scrollbar { width: 6px; }
.gs-dash__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.gs-dash__navhead {
	color: rgba(255,255,255,.5);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 14px 14px 5px;
}
.gs-dash__navlink {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255,255,255,.82);
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.gs-dash__navlink .gs-dash__navlabel { flex: 1; min-width: 0; }
.gs-dash__ico { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.gs-dash__navlink:hover { background: rgba(255,255,255,.09); color: #fff; }
.gs-dash__navlink.is-active {
	background: var(--gs-green, #24603F);
	color: #fff;
	box-shadow: inset 3px 0 0 var(--gs-gold, #C8A24B);
}
.gs-dash__navlink.is-active .gs-dash__ico { opacity: 1; }

.gs-dash__badge {
	background: var(--gs-gold, #C8A24B);
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 800;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}
.gs-dash__nav-sep { height: 1px; background: rgba(255,255,255,.10); margin: 12px 10px; }

/* بطاقتا دليل الاستخدام + الدعم الفني أسفل السايدبار */
.gs-dash__side-cards { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.gs-dash__side-card {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}
.gs-dash__side-card-title { color: #fff; font-size: 15px; font-weight: 800; }
.gs-dash__side-card-sub { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; }
.gs-dash__side-card-btn {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--gs-gold, #C8A24B);
	color: var(--gs-gold, #C8A24B);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.gs-dash__side-card-btn:hover { background: var(--gs-gold, #C8A24B); color: #123C2B; }
.gs-dash__side-card--support .gs-dash__side-card-phone {
	margin-top: 4px;
	color: var(--gs-gold, #C8A24B);
	font-size: 18px;
	font-weight: 800;
	direction: ltr;
	letter-spacing: .04em;
}

/* ===== منطقة المحتوى ===== */
.gs-dash__content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.gs-dash__topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--gs-dash-topbar);
	background: #fff;
	border-bottom: 1px solid var(--gs-border, #E7E7E1);
	padding: 12px 26px;
	position: sticky;
	top: 0;
	z-index: 30;
}
.gs-dash__titles { flex: 1; min-width: 0; }
.gs-dash__title { font-size: 21px; font-weight: 800; margin: 0; color: var(--gs-green-dark, #123C2B); }
.gs-dash__topsub { margin: 2px 0 0; font-size: 13px; color: var(--gs-muted, #6B7770); }

.gs-dash__actions { display: flex; align-items: center; gap: 12px; }

.gs-dash__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gs-green, #24603F);
	background: var(--gs-green-soft, #E8F1EC);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.gs-dash__back svg { width: 18px; height: 18px; }
.gs-dash__back:hover { background: var(--gs-green, #24603F); color: #fff; }

.gs-dash__bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--gs-surface, #F7F6F2);
	border: 1px solid var(--gs-border, #E7E7E1);
	color: var(--gs-green-dark, #123C2B);
}
.gs-dash__bell svg { width: 20px; height: 20px; }
.gs-dash__bell:hover { background: var(--gs-green-soft, #E8F1EC); }
.gs-dash__bell-count {
	position: absolute;
	top: -3px;
	inset-inline-start: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--gs-gold, #C8A24B);
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gs-dash__user { display: flex; align-items: center; gap: 10px; }
.gs-dash__user-avatar {
	width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--gs-green-soft, #E8F1EC);
}
.gs-dash__user-meta { display: flex; flex-direction: column; line-height: 1.3; }
.gs-dash__user-name { font-weight: 800; font-size: 14px; color: var(--gs-text, #1d2a22); }
.gs-dash__user-role { font-size: 12px; color: var(--gs-muted, #6B7770); }

.gs-dash__logout {
	color: var(--gs-muted, #6B7770);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--gs-border, #E7E7E1);
}
.gs-dash__logout:hover { color: #b23a3a; border-color: #e6c4c4; background: #fdf3f3; }

/* Toggle (هامبرغر) — مخفي على الديسكتوب */
.gs-dash__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--gs-border, #E7E7E1);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	padding: 0 11px;
}
.gs-dash__toggle span { display: block; height: 2px; background: var(--gs-green-dark, #123C2B); border-radius: 2px; }

/* Main */
.gs-dash__main { padding: 26px; width: 100%; max-width: 1200px; margin: 0 auto; }

/* Overlay للموبايل */
.gs-dash__overlay { display: none; }

/* ===========================================================================
   بطاقات الإحصاء داخل اللوحات (متوافقة مع .gs-stat في redesign.css + امتدادات)
   =========================================================================== */
.gs-dash-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}
.gs-dash-stat {
	background: #fff;
	border: 1px solid var(--gs-border, #E7E7E1);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(18,60,43,.04);
	padding: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.gs-dash-stat__body { display: flex; flex-direction: column; gap: 4px; }
.gs-dash-stat__label { color: var(--gs-green, #24603F); font-size: 13.5px; font-weight: 700; }
.gs-dash-stat__num { font-size: 32px; font-weight: 800; line-height: 1.05; color: var(--gs-text, #1d2a22); }
.gs-dash-stat__sub { color: var(--gs-muted, #6B7770); font-size: 12.5px; }
.gs-dash-stat__ico {
	width: 52px; height: 52px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	background: var(--gs-green-soft, #E8F1EC);
	color: var(--gs-green, #24603F);
}
.gs-dash-stat__ico svg { width: 26px; height: 26px; }
/* أنماط لونية للأيقونة */
.gs-dash-stat--gold  .gs-dash-stat__ico { background: #F7EFD9; color: var(--gs-gold-2, #B8912F); }
.gs-dash-stat--gold  .gs-dash-stat__label { color: var(--gs-gold-2, #B8912F); }
.gs-dash-stat--blue  .gs-dash-stat__ico { background: #E5EEFB; color: #3a7bd5; }
.gs-dash-stat--blue  .gs-dash-stat__label { color: #3a7bd5; }
.gs-dash-stat--rose  .gs-dash-stat__ico { background: #FBE9E9; color: #c0392b; }
.gs-dash-stat--rose  .gs-dash-stat__label { color: #c0392b; }

/* ===========================================================================
   المتجاوب — السايدبار ينطوي على الموبايل
   =========================================================================== */
@media (max-width: 992px) {
	.gs-dash__sidebar {
		position: fixed;
		/* RTL: the dashboard starts on the right, so it must leave through the
		   physical right edge. inline-end resolves to the left in RTL. */
		right: 0;
		left: auto;
		top: 0;
		width: min(var(--gs-dash-side), 86vw);
		max-width: 320px;
		height: 100vh;
		height: 100dvh;
		transform: translate3d(105%, 0, 0);
		visibility: hidden;
		pointer-events: none;
		transition: transform .28s ease, visibility 0s linear .28s;
		box-shadow: -8px 0 40px rgba(0,0,0,.35);
	}
	body.gs-dash.gs-dash--open { overflow: hidden; }
	body.gs-dash.gs-dash--open .gs-dash__sidebar {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}
	.gs-dash__toggle { display: flex; }
	.gs-dash__overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(10,25,18,.5);
		z-index: 35;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	body.gs-dash.gs-dash--open .gs-dash__overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-dash__sidebar,
	.gs-dash__overlay { transition: none !important; }
}

@media (max-width: 640px) {
	.gs-dash__topbar { padding: 10px 16px; gap: 10px; }
	.gs-dash__main { padding: 18px 16px; }
	.gs-dash__title { font-size: 18px; }
	.gs-dash__topsub { display: none; }
	.gs-dash__back span { display: none; }
	.gs-dash__back { padding: 9px; }
	.gs-dash__user-meta { display: none; }
	.gs-dash__logout { padding: 8px; }
	.gs-dash-stat__num { font-size: 26px; }
}

/* ===== السوبر أدمن: إدارة المستخدمين ===== */
.gs-user-list { display: flex; flex-direction: column; gap: 10px; }
.gs-user-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; background: #fff; border: 1px solid var(--gs-border, #e7e7e1); border-radius: 14px; padding: 14px 16px; box-shadow: 0 3px 12px rgba(18,60,43,.05); }
.gs-user-row.is-suspended { opacity: .72; background: #fbf4f4; border-color: #eccdcd; }
.gs-user-row__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gs-user-row__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #eef3f0; flex-shrink: 0; }
.gs-user-row__id strong { font-size: 15px; }
.gs-user-row__actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.gs-user-role-form { display: inline-flex; gap: 6px; align-items: center; }
.gs-user-row__actions select { padding: 7px 10px; border: 1px solid var(--gs-border, #e7e7e1); border-radius: 9px; font-family: inherit; font-size: 13px; }
.gs-user-row__scope { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; border-top: 1px dashed var(--gs-border, #e7e7e1); padding-top: 10px; }
.gs-btn--danger { background: #fdecec !important; background-image: none !important; color: #c0392b !important; border-color: #f2c9c9 !important; box-shadow: none !important; }
.gs-btn--danger:hover { background: #c0392b !important; color: #fff !important; }

/* ===== السوبر أدمن: الأدوار والصلاحيات ===== */
.gs-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 14px; }
.gs-role-card { background: #fff; border: 1px solid var(--gs-border, #e7e7e1); border-radius: 16px; padding: 18px; box-shadow: 0 4px 16px rgba(18,60,43,.06); }
.gs-role-card.is-admin { border-color: var(--gs-gold, #c8a24b); box-shadow: 0 4px 18px rgba(200,162,75,.18); }
.gs-role-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gs-role-card__ico { width: 46px; height: 46px; border-radius: 12px; background: var(--gs-green-soft, #e8f1ec); color: var(--gs-green, #24603f); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gs-role-card__ico svg { width: 22px; height: 22px; }
.gs-role-card__head > div { flex: 1; min-width: 0; }
.gs-role-card__head code { font-size: 11.5px; }
.gs-role-card__count { text-align: center; background: var(--gs-cream, #f6f2e9); border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 18px; color: var(--gs-green-dark, #123c2b); line-height: 1; }
.gs-role-card__count span { display: block; font-size: 11px; font-weight: 600; color: var(--gs-muted, #6b7770); }
.gs-role-card__caps { display: flex; flex-wrap: wrap; gap: 7px; }

/* ===== CTA «كن مقدم خدمة» في لوحة الحساب ===== */
.gs-provider-cta { padding: 40px 24px; }
.gs-provider-cta__ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px; background: var(--gs-green-soft, #e8f1ec); color: var(--gs-green, #24603f); margin-bottom: 14px; }
.gs-provider-cta h3 { font-size: 22px; margin: 0 0 8px; }
.gs-provider-cta p { max-width: 520px; margin: 0 auto 18px; }

@media (max-width: 640px) {
	.gs-user-row { grid-template-columns: 1fr; }
	.gs-user-row__actions { justify-content: flex-start; }
}