/* =================================================================
 * KGND Design System v3 — Token + Base Components
 * =================================================================
 * Drop this file in: kgnd-theme/assets/css/design-system-v3.css
 * Enqueue AFTER all other stylesheets (highest specificity wins)
 *
 * Use ONLY the .k-* classes from this file in v3 components.
 * Legacy .ks-* / .kss-* / .kfx-* classes coexist; do not mix.
 * ================================================================= */

:root {
	/* Brand */
	--kgnd-navy-900: #001f3d;
	--kgnd-navy-700: #003366;
	--kgnd-navy-500: #1a4d80;
	--kgnd-teal-700: #0e7c83;
	--kgnd-teal-500: #14B1BB;
	--kgnd-teal-100: #E0F7F8;

	/* Neutral (warm) */
	--kgnd-bg:            #FAFAF7;
	--kgnd-surface:       #FFFFFF;
	--kgnd-surface-2:     #F5F2EB;
	--kgnd-border:        #E8E3D8;
	--kgnd-border-strong: #D5CFC0;

	/* Text */
	--kgnd-text:          #0f172a;
	--kgnd-text-2:        #475569;
	--kgnd-text-3:        #94a3b8;
	--kgnd-text-on-dark:  #FAFAF7;

	/* Semantic */
	--kgnd-success-700: #166534;
	--kgnd-success-500: #22c55e;
	--kgnd-success-100: #DCFCE7;
	--kgnd-warning-700: #92400e;
	--kgnd-warning-500: #f59e0b;
	--kgnd-warning-100: #FEF3C7;
	--kgnd-danger-700:  #991B1B;
	--kgnd-danger-500:  #DC2626;
	--kgnd-danger-100:  #FEE2E2;
	--kgnd-info-700:    #003366;
	--kgnd-info-500:    #14B1BB;
	--kgnd-info-100:    #E0F7F8;

	/* Typography */
	--kgnd-font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
	--kgnd-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
	--kgnd-font-kurd:    "Vazirmatn", "Noto Sans Arabic", "Tahoma", sans-serif;
	--kgnd-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	--kgnd-text-xs:    11px;
	--kgnd-text-sm:    13px;
	--kgnd-text-base:  14px;
	--kgnd-text-md:    16px;
	--kgnd-text-lg:    20px;
	--kgnd-text-xl:    24px;
	--kgnd-text-2xl:   32px;
	--kgnd-text-3xl:   44px;
	--kgnd-fw-regular: 400;
	--kgnd-fw-medium:  500;
	--kgnd-fw-bold:    700;
	--kgnd-lh-tight:   1.2;
	--kgnd-lh-normal:  1.5;
	--kgnd-lh-relaxed: 1.7;

	/* Spacing (4-pt grid) */
	--kgnd-space-1:  4px;
	--kgnd-space-2:  8px;
	--kgnd-space-3: 12px;
	--kgnd-space-4: 16px;
	--kgnd-space-5: 20px;
	--kgnd-space-6: 24px;
	--kgnd-space-8: 32px;
	--kgnd-space-10:40px;
	--kgnd-space-12:48px;
	--kgnd-space-16:64px;
	--kgnd-space-20:80px;

	/* Radius */
	--kgnd-radius-sm:   4px;
	--kgnd-radius-md:   8px;
	--kgnd-radius-lg:  12px;
	--kgnd-radius-xl:  16px;
	--kgnd-radius-2xl: 24px;
	--kgnd-radius-full:9999px;

	/* Elevation */
	--kgnd-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
	--kgnd-shadow-md: 0 4px 12px rgba(15,23,42,.06);
	--kgnd-shadow-lg: 0 12px 32px rgba(15,23,42,.10);
	--kgnd-shadow-xl: 0 24px 64px rgba(15,23,42,.14);

	/* Motion */
	--kgnd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--kgnd-fast: 120ms;
	--kgnd-slow: 240ms;

	/* Layout */
	--kgnd-sidebar-w:        240px;
	--kgnd-sidebar-w-collapsed: 64px;
	--kgnd-topbar-h:         56px;
	--kgnd-content-max:      1280px;
}

/* Dark mode */
[data-theme="dark"] {
	--kgnd-bg:            #0a0e14;
	--kgnd-surface:       #0f1a26;
	--kgnd-surface-2:     #16243a;
	--kgnd-border:        #1e293b;
	--kgnd-border-strong: #334155;
	--kgnd-text:          #F1F5F9;
	--kgnd-text-2:        #94a3b8;
	--kgnd-text-3:        #64748b;
	--kgnd-shadow-sm: 0 1px 2px rgba(0,0,0,.2);
	--kgnd-shadow-md: 0 4px 12px rgba(0,0,0,.3);
}

/* =================================================================
 * RTL handling
 * ================================================================= */
[dir="rtl"] { font-family: var(--kgnd-font-kurd); }
[dir="rtl"] .k-rtl-fix-size { font-size: calc(1em + 1px); }

/* =================================================================
 * BUTTON
 * ================================================================= */
.kbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kgnd-space-2);
	padding: var(--kgnd-space-2) var(--kgnd-space-4);
	border: 0.5px solid transparent;
	border-radius: var(--kgnd-radius-md);
	font-family: inherit;
	font-size: var(--kgnd-text-base);
	font-weight: var(--kgnd-fw-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--kgnd-fast) var(--kgnd-ease),
	            border-color var(--kgnd-fast) var(--kgnd-ease),
	            transform var(--kgnd-fast) var(--kgnd-ease);
	white-space: nowrap;
}
.kbtn--primary   { background: var(--kgnd-navy-700); color: #fff; }
.kbtn--primary:hover { background: var(--kgnd-navy-500); }
.kbtn--secondary { background: var(--kgnd-surface); color: var(--kgnd-navy-700); border-color: var(--kgnd-border-strong); }
.kbtn--secondary:hover { background: var(--kgnd-surface-2); border-color: var(--kgnd-navy-700); }
.kbtn--ghost     { background: transparent; color: var(--kgnd-navy-700); }
.kbtn--ghost:hover { background: var(--kgnd-surface-2); }
.kbtn--accent    { background: var(--kgnd-teal-500); color: #fff; }
.kbtn--accent:hover { background: var(--kgnd-teal-700); }
.kbtn--danger    { background: var(--kgnd-danger-500); color: #fff; }

.kbtn--sm { padding: var(--kgnd-space-1) var(--kgnd-space-3); font-size: var(--kgnd-text-sm); }
.kbtn--lg { padding: var(--kgnd-space-3) var(--kgnd-space-6); font-size: var(--kgnd-text-md); }

.kbtn:focus-visible { outline: 2px solid var(--kgnd-teal-500); outline-offset: 2px; }
.kbtn[disabled], .kbtn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kbtn:active { transform: translateY(1px); }

/* =================================================================
 * CARD
 * ================================================================= */
.kcard {
	background: var(--kgnd-surface);
	border: 0.5px solid var(--kgnd-border);
	border-radius: var(--kgnd-radius-lg);
	padding: var(--kgnd-space-5);
	box-shadow: var(--kgnd-shadow-sm);
}
.kcard--accent  { border-left: 3px solid var(--kgnd-teal-500); border-radius: 0 var(--kgnd-radius-lg) var(--kgnd-radius-lg) 0; }
.kcard--hover   { transition: box-shadow var(--kgnd-fast) var(--kgnd-ease), transform var(--kgnd-fast) var(--kgnd-ease); }
.kcard--hover:hover { box-shadow: var(--kgnd-shadow-md); transform: translateY(-1px); }

.kcard__header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--kgnd-space-4); }
.kcard__title   { font-size: var(--kgnd-text-md); font-weight: var(--kgnd-fw-medium); color: var(--kgnd-text); margin: 0; }
.kcard__sub     { font-size: var(--kgnd-text-sm); color: var(--kgnd-text-2); margin-top: 2px; }

/* =================================================================
 * KPI tile
 * ================================================================= */
.kkpi {
	background: var(--kgnd-surface);
	border: 0.5px solid var(--kgnd-border);
	border-radius: var(--kgnd-radius-lg);
	padding: var(--kgnd-space-5);
}
.kkpi__label { font-size: var(--kgnd-text-xs); color: var(--kgnd-text-2); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--kgnd-fw-medium); }
.kkpi__value { font-size: var(--kgnd-text-xl); font-weight: var(--kgnd-fw-medium); color: var(--kgnd-text); margin-top: 4px; line-height: 1.1; }
.kkpi__delta { font-size: var(--kgnd-text-xs); margin-top: 2px; }
.kkpi__delta--up   { color: var(--kgnd-success-700); }
.kkpi__delta--down { color: var(--kgnd-danger-700); }

/* =================================================================
 * TABLE
 * ================================================================= */
.ktable { width: 100%; border-collapse: collapse; font-size: var(--kgnd-text-base); }
.ktable th { text-align: left; font-weight: var(--kgnd-fw-medium); color: var(--kgnd-text-2);
             padding: var(--kgnd-space-3); border-bottom: 1px solid var(--kgnd-border); font-size: var(--kgnd-text-sm); }
.ktable td { padding: var(--kgnd-space-3); border-bottom: 1px solid var(--kgnd-border); color: var(--kgnd-text); }
.ktable tr:hover { background: var(--kgnd-surface-2); }
.ktable--striped tr:nth-child(even) td { background: var(--kgnd-surface-2); }
[dir="rtl"] .ktable th, [dir="rtl"] .ktable td { text-align: right; }

/* =================================================================
 * INPUT
 * ================================================================= */
.kinput, .kselect, .ktextarea {
	width: 100%; padding: var(--kgnd-space-2) var(--kgnd-space-3);
	border: 1px solid var(--kgnd-border-strong);
	border-radius: var(--kgnd-radius-md);
	font-family: inherit; font-size: var(--kgnd-text-base); line-height: 1.4;
	background: var(--kgnd-surface); color: var(--kgnd-text);
	transition: border-color var(--kgnd-fast), box-shadow var(--kgnd-fast);
}
.kinput:focus, .kselect:focus, .ktextarea:focus {
	border-color: var(--kgnd-teal-500);
	box-shadow: 0 0 0 3px var(--kgnd-info-100);
	outline: none;
}
.kinput[aria-invalid] { border-color: var(--kgnd-danger-500); }
.klabel { display: block; font-size: var(--kgnd-text-sm); color: var(--kgnd-text-2);
          margin-bottom: 4px; font-weight: var(--kgnd-fw-medium); }
.khelp  { font-size: var(--kgnd-text-xs); color: var(--kgnd-text-3); margin-top: 4px; }
.kerror { font-size: var(--kgnd-text-xs); color: var(--kgnd-danger-700); margin-top: 4px; }

/* =================================================================
 * TAG / PILL
 * ================================================================= */
.ktag {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 10px; border-radius: var(--kgnd-radius-full);
	font-size: var(--kgnd-text-xs); font-weight: var(--kgnd-fw-medium);
	background: var(--kgnd-surface-2); color: var(--kgnd-text-2);
}
.ktag--success { background: var(--kgnd-success-100); color: var(--kgnd-success-700); }
.ktag--warning { background: var(--kgnd-warning-100); color: var(--kgnd-warning-700); }
.ktag--danger  { background: var(--kgnd-danger-100);  color: var(--kgnd-danger-700); }
.ktag--info    { background: var(--kgnd-info-100);    color: var(--kgnd-info-700); }

/* =================================================================
 * EMPTY STATE
 * ================================================================= */
.kempty { text-align: center; padding: var(--kgnd-space-16) var(--kgnd-space-6); }
.kempty__icon  { font-size: 48px; opacity: .4; margin-bottom: var(--kgnd-space-4); display: block; }
.kempty__title { font-size: var(--kgnd-text-lg); color: var(--kgnd-text); margin-bottom: var(--kgnd-space-2); font-weight: var(--kgnd-fw-medium); }
.kempty__sub   { color: var(--kgnd-text-2); margin-bottom: var(--kgnd-space-6); max-width: 420px; margin-inline: auto; line-height: var(--kgnd-lh-relaxed); }

/* =================================================================
 * SIDEBAR (member dashboard)
 * ================================================================= */
.ksidebar {
	width: var(--kgnd-sidebar-w);
	background: var(--kgnd-surface);
	border-right: 1px solid var(--kgnd-border);
	height: 100vh;
	position: sticky; top: 0;
	overflow-y: auto;
	display: flex; flex-direction: column;
}
[dir="rtl"] .ksidebar { border-right: 0; border-left: 1px solid var(--kgnd-border); }
.ksidebar__brand { padding: var(--kgnd-space-5) var(--kgnd-space-4); border-bottom: 1px solid var(--kgnd-border); display: flex; align-items: center; gap: var(--kgnd-space-2); }
.ksidebar__group { padding: var(--kgnd-space-2); }
.ksidebar__group-label { display: block; padding: var(--kgnd-space-2) var(--kgnd-space-3); font-size: var(--kgnd-text-xs); color: var(--kgnd-text-3); text-transform: uppercase; letter-spacing: .1em; font-weight: var(--kgnd-fw-medium); }
.ksidebar__item {
	position: relative;
	display: flex; align-items: center; gap: var(--kgnd-space-3);
	padding: var(--kgnd-space-2) var(--kgnd-space-3);
	border-radius: var(--kgnd-radius-md);
	color: var(--kgnd-text-2); font-size: var(--kgnd-text-base); text-decoration: none;
	transition: background var(--kgnd-fast), color var(--kgnd-fast);
}
.ksidebar__item:hover { background: var(--kgnd-surface-2); color: var(--kgnd-text); }
.ksidebar__item--active { background: var(--kgnd-teal-100); color: var(--kgnd-teal-700); font-weight: var(--kgnd-fw-medium); }
.ksidebar__item--active::before {
	content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
	background: var(--kgnd-teal-500); border-radius: 0 3px 3px 0;
}
[dir="rtl"] .ksidebar__item--active::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.ksidebar__icon  { width: 18px; height: 18px; opacity: .8; flex-shrink: 0; }
.ksidebar__badge { margin-left: auto; background: var(--kgnd-danger-500); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: var(--kgnd-radius-full); font-weight: var(--kgnd-fw-medium); }
[dir="rtl"] .ksidebar__badge { margin-left: 0; margin-right: auto; }

/* Sidebar collapsed (icon-only) */
.ksidebar--collapsed { width: var(--kgnd-sidebar-w-collapsed); }
.ksidebar--collapsed .ksidebar__item       { justify-content: center; }
.ksidebar--collapsed .ksidebar__item span,
.ksidebar--collapsed .ksidebar__group-label { display: none; }

/* Mobile sidebar → bottom nav */
@media (max-width: 640px) {
	.ksidebar {
		position: fixed; bottom: 0; left: 0; right: 0; top: auto;
		width: 100%; height: auto;
		flex-direction: row; border-right: 0; border-top: 1px solid var(--kgnd-border);
		justify-content: space-around;
	}
	.ksidebar__brand, .ksidebar__group-label { display: none; }
	.ksidebar__group { display: contents; }
	.ksidebar__item  { flex-direction: column; gap: 2px; padding: var(--kgnd-space-2); font-size: var(--kgnd-text-xs); flex: 1; min-width: 0; }
	.ksidebar__item--active::before { display: none; }
}

/* =================================================================
 * TOP BAR
 * ================================================================= */
.ktopbar {
	display: flex; align-items: center; gap: var(--kgnd-space-4);
	height: var(--kgnd-topbar-h);
	padding: 0 var(--kgnd-space-5);
	background: var(--kgnd-surface);
	border-bottom: 1px solid var(--kgnd-border);
	position: sticky; top: 0; z-index: 30;
}
.ktopbar__search {
	flex: 1; max-width: 480px;
	display: flex; align-items: center; gap: var(--kgnd-space-2);
	background: var(--kgnd-surface-2);
	border-radius: var(--kgnd-radius-full);
	padding: var(--kgnd-space-1) var(--kgnd-space-3);
	color: var(--kgnd-text-3); font-size: var(--kgnd-text-base);
}
.ktopbar__search input { background: transparent; border: 0; outline: 0; flex: 1; color: var(--kgnd-text); font-size: inherit; }

.ktopbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--kgnd-space-2); }
[dir="rtl"] .ktopbar__actions { margin-left: 0; margin-right: auto; }

/* =================================================================
 * MODAL
 * ================================================================= */
.kmodal-backdrop {
	position: fixed; inset: 0; background: rgba(15,23,42,.5);
	z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
	padding-top: 10vh;
}
.kmodal {
	background: var(--kgnd-surface); border-radius: var(--kgnd-radius-xl);
	max-width: 560px; width: calc(100% - 32px);
	box-shadow: var(--kgnd-shadow-xl);
	padding: var(--kgnd-space-6); animation: kmodal-in var(--kgnd-slow) var(--kgnd-ease);
}
@keyframes kmodal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kmodal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--kgnd-space-4); }
.kmodal__title  { font-size: var(--kgnd-text-lg); font-weight: var(--kgnd-fw-medium); margin: 0; }

/* =================================================================
 * UTILITIES (sparing)
 * ================================================================= */
.k-text-muted     { color: var(--kgnd-text-2); }
.k-text-subtle    { color: var(--kgnd-text-3); }
.k-mt-2 { margin-top: var(--kgnd-space-2); }
.k-mt-4 { margin-top: var(--kgnd-space-4); }
.k-mt-6 { margin-top: var(--kgnd-space-6); }

/* Sr-only */
.k-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }