/* ==========================================================
    Third-party theming: never touch base theme – always scope via wrapper
	SPLITGRID BS5 THEME
	- Dark = default (:root)
	- Light = [data-theme="light"]
========================================================== */



/* ==========================================================
	SPLITGRID TOKENS (DARK) – PROFILBASERAT
========================================================== */

:root{
	/* Brand palette */
	--sg-black:#0E0E10;
	--sg-white:#FFFFFF;
	--sg-gray-minus:#C7C9CD;
	--sg-gray:#8E929B;
	--sg-gray-plus:#383D43;
	--sg-yellow:#FFCA22;

	/* Typography (single source of truth) */
	--sg-font-heading:'Clash Display', system-ui, sans-serif;
	--sg-font-body:'General Sans', system-ui, sans-serif;
	--sg-font:'General Sans', system-ui, sans-serif;
	--sg-font-ui:14px;
	--sg-line-height:1.45;

	/* Surfaces */
	--sg-surface:var(--sg-gray-plus);
	--sg-surface-2:#424851;
	--sg-surface-3:#4B535E;

	/* Surfaces */
	--sg-surface-bg: #383D43;        /* app background (grå+) */
	--sg-surface-panel: #272B30;     /* cards / panels */
	--sg-surface-panel-soft: rgba(255,255,255,0.06);

	/* Borders & shadows */
	--sg-border-soft: rgba(255,255,255,0.12);
	--sg-shadow-panel: 0 8px 24px rgba(0,0,0,0.35);

	
	/* Text */
	--sg-text:#F2F4F6;
	--sg-text-muted:#C7C9CD;

	/* Borders */
	--sg-border-strong:rgba(255,255,255,.18);
	--sg-border-soft:rgba(255,255,255,.12);

	/* Accent / states */
	--sg-accent:var(--sg-yellow);
	--sg-readonly:#3F444B;
	--sg-success:#5DFF64;
	--sg-warning:orange;
	--sg-danger:#ff0000;
	--sg-accent: #FFCA22;

	/* Accent marker for highlighted panels */
	.sg-accent-top{
		border-top: 2px solid var(--sg-accent);
	}

	/* Nav tokens (menu.css ska helst bara använda dessa) */
	--sg-nav-bg:var(--sg-gray-plus);
	--sg-nav-link:rgba(242,244,246,.82);
	--sg-nav-link-hover:rgba(242,244,246,.96);
	--sg-nav-link-active:var(--sg-yellow);
}


/* ==========================================================
	SPLITGRID TOKENS (LIGHT) – PROFILBASERAT
========================================================== */

[data-theme="light"]{
	/* Surfaces */
	--sg-surface:#FFFFFF;
	--sg-surface-2:#F5F6F8;
	--sg-surface-3:#ECEEF2;

	/* Text */
	--sg-text:#0E0E10;
	--sg-text-muted:rgba(14,14,16,.68);

	/* Borders */
	--sg-border-strong:rgba(14,14,16,.16);
	--sg-border-soft:rgba(14,14,16,.10);

	/* Nav */
	--sg-nav-bg:#FFFFFF;
	--sg-nav-link:rgba(14,14,16,.78);
	--sg-nav-link-hover:rgba(14,14,16,.92);
	--sg-nav-link-active:#0E0E10;
}


/* ==========================================================
	BOOTSTRAP 5 TOKEN BINDINGS
========================================================== */

:root{
	/* Bootstrap body */
	--bs-body-bg:var(--sg-surface);
	--bs-body-color:var(--sg-text);
	--bs-border-color:var(--sg-border-strong);

	/* Bootstrap typography bridges (vi styr basen via html, men håller tokens i synk) */
	--bs-body-font-family:var(--sg-font);
	--bs-body-font-size:1rem;
	--bs-body-line-height:var(--sg-line-height);

	/* Links */
	--bs-link-color:var(--sg-text);
	--bs-link-hover-color:var(--sg-accent);

	/* Background layers */
	--bs-secondary-bg:var(--sg-surface-2);
	--bs-tertiary-bg:var(--sg-surface-3);

	/* Forms */
	--bs-form-control-bg:transparent;
	--bs-form-control-color:var(--sg-text);
	--bs-form-control-border-color:var(--sg-border-strong);
	--bs-form-control-focus-border-color:var(--sg-accent);

	/* Focus */
	--bs-focus-ring-color:color-mix(in srgb, var(--sg-accent) 28%, transparent);
	--bs-focus-ring-width:.20rem;

	/* Tables */
	--bs-table-color:var(--sg-text);
	--bs-table-border-color:var(--sg-border-strong);

	/* Buttons */
	--bs-btn-font-family:var(--sg-font);

	/* Navbar (BS5 använder dessa i navbars) */
	--bs-navbar-bg:var(--sg-nav-bg);
	--bs-nav-link-color:var(--sg-nav-link);
	--bs-nav-link-hover-color:var(--sg-nav-link-hover);
	--bs-nav-link-active-color:var(--sg-nav-link-active);
}

[data-theme="light"]{
	--bs-body-bg:var(--sg-surface);
	--bs-body-color:var(--sg-text);
	--bs-border-color:var(--sg-border-strong);

	--bs-form-control-border-color:var(--sg-border-strong);
	--bs-form-control-focus-border-color:var(--sg-accent);

	--bs-table-border-color:var(--sg-border-strong);

	--bs-navbar-bg:var(--sg-nav-bg);
	--bs-nav-link-color:var(--sg-nav-link);
	--bs-nav-link-hover-color:var(--sg-nav-link-hover);
	--bs-nav-link-active-color:var(--sg-nav-link-active);
}


/* ==========================================================
	BASE ELEMENTS (SINGLE BASE PARADIGM)
========================================================== */

html{
	font-size:var(--sg-font-ui);
	line-height:var(--sg-line-height);
}

body{
	font-family:var(--sg-font);
	font-size:1rem;
	line-height:inherit;
	background-color:var(--bs-body-bg);
	color:var(--bs-body-color);
	position:relative;
}

hr{
	border-color:var(--sg-border-soft);
	opacity:1;
}


/* ==========================================================
	FORMS (MINIMAL SELECTORS – BS5 NEEDS THIS)
========================================================== */

.form-control,
.form-select,
.input-group-text{
	font-size:1rem;
	background-color:var(--bs-form-control-bg);
	color:var(--bs-form-control-color);
	border-color:var(--bs-form-control-border-color);
}

.form-control:focus,
.form-select:focus{
	border-color:var(--bs-form-control-focus-border-color);
	box-shadow:0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

select option{
	background-color:var(--sg-surface);
	color:var(--sg-text);
}


/* ==========================================================
	BUTTONS
========================================================== */

.btn{
	font-size:1rem;
}

.btn-sm{
	padding:.20rem .45rem;
	font-size:.857rem;
	border-radius:7px;
	letter-spacing:.01em;
}

.btn-outline-primary{
	--bs-btn-color:var(--sg-accent);
	--bs-btn-border-color:var(--sg-accent);
	--bs-btn-hover-bg:var(--sg-accent);
	--bs-btn-hover-color:#000;
	--bs-btn-hover-border-color:var(--sg-accent);
}


/* ==========================================================
	TABLES (FORCE INHERIT FROM BASE)
========================================================== */

.table{
	font-size:1rem;
	color:var(--bs-table-color);
}

.table > :not(caption) > * > *{
	border-color:var(--bs-table-border-color);
}

.table td,
.table th{
	font-size:inherit;
	color:var(--sg-text);
}

.table .text-muted,
.table small{
	color:var(--sg-text-muted) !important;
}

.table a{
	color:inherit;
	text-decoration:none;
}

.table a:hover{
	color:var(--sg-accent);
	text-decoration:underline;
}


/* ==========================================================
	PAGINATION
========================================================== */

.page-link{
	font-size:1rem;
	color:var(--sg-text);
	background-color:transparent;
	border-color:var(--sg-border-strong);
}

.page-link:hover{
	color:#000;
	background-color:var(--sg-accent);
	border-color:var(--sg-accent);
}

.page-item.active .page-link{
	color:#000;
	background-color:var(--sg-accent);
	border-color:var(--sg-accent);
}


/* ==========================================================
	KYC / ADMIN-SPECIFIKT
========================================================== */

.view-kyc-btn.btn{
	--bs-btn-color:var(--sg-text);
	--bs-btn-border-color:var(--sg-border-strong);
	--bs-btn-hover-bg:color-mix(in srgb, var(--sg-text) 10%, transparent);
	--bs-btn-hover-color:var(--sg-text);
	--bs-btn-hover-border-color:color-mix(in srgb, var(--sg-text) 20%, var(--sg-border-strong));
}


/* ==========================================================
	GRAIN OVERLAY (CSS-only)
========================================================== */

body::before{
	content:'';
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:9999;
	opacity:.08;
	background-image:
		repeating-linear-gradient(0deg,
			rgba(255,255,255,.025) 0,
			rgba(255,255,255,.025) 1px,
			transparent 1px,
			transparent 2px
		),
		repeating-linear-gradient(90deg,
			rgba(0,0,0,.02) 0,
			rgba(0,0,0,.02) 1px,
			transparent 1px,
			transparent 3px
		);
	mix-blend-mode:overlay;
}

[data-theme="light"] body::before{
	opacity:.035;
	mix-blend-mode:soft-light;
}

	/* Third-party: Google Visualization (scoped) */
	.sg-gviz .google-visualization-table-table,
	.sg-gviz .google-visualization-table-td,
	.sg-gviz .google-visualization-table-th,
	.sg-gviz .google-visualization-table-tr{
		background-color:transparent !important;
		color:var(--sg-text);
	}

	.sg-gviz .google-visualization-table-th{
		background-color:var(--sg-surface-2) !important;
		border-bottom:1px solid var(--sg-border-strong) !important;
	}

	.sg-gviz .google-visualization-table-td{
		border-bottom:1px solid var(--sg-border-soft) !important;
	}

	.sg-gviz .google-visualization-table-tr-over td{
		background-color:color-mix(in srgb, var(--sg-text) 6%, transparent) !important;
	}
	.sg-gviz .google-visualization-table-th{
	background-image:none !important;
	}
	
		.sg-searchbar form{
		flex-wrap:wrap;
	}

	.sg-searchbar .sg-search-input{
		flex:0 1 260px;
		max-width:260px;
	}

	.sg-searchbar .sg-search-select{
		flex:0 1 200px;
		max-width:200px;
	}

	.sg-searchbar .btn{
		flex:0 0 auto;
		white-space:nowrap;
	}
		.form-control::placeholder{
		color:var(--sg-text-muted);
		opacity:.9;
	}

	.sg-thead{
		border-bottom: 1px solid var(--sg-accent);
	}
	.sg-thead th{
		border-bottom: 0;
	}