/*#################################################*/
/* MODERN UI LAYER — shared foundation (all pages)
/*
/* Additive & reversible. Loaded AFTER theme/style.css
/* so equal-specificity rules win. Remove the per-page
/* <link> to revert. Never edit style.css for this.
/*#################################################*/

/*=================================================*/
/* 1. DESIGN TOKENS                                */
/*=================================================*/
:root {
	/* Accent (matches existing floating toolbar #3970CA) */
	--gs-accent: #3970CA;
	--gs-accent-600: #2d5aa8;
	--gs-accent-soft: rgba(57, 112, 202, 0.08);
	--gs-ring: rgba(57, 112, 202, 0.28);

	/* Semantic */
	--gs-ok: #16a34a;
	--gs-warn: #f39c12;
	--gs-danger: #e11d48;
	--gs-danger-600: #be123c;

	/* Neutrals (slate scale) */
	--gs-text: #334155;
	--gs-text-muted: #64748b;
	--gs-border: #e2e8f0;
	--gs-border-hover: #cbd5e1;
	--gs-surface: #ffffff;
	--gs-surface-2: #f8fafc;
	--gs-surface-3: #f1f5f9;

	/* Shape */
	--gs-radius: 8px;
	--gs-radius-sm: 6px;
	--gs-radius-lg: 14px;
	--gs-control-h: 30px;

	/* Elevation */
	--gs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--gs-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);
	--gs-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.18);

	/* Motion */
	--gs-ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--gs-ease-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	--gs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Open Sans", Roboto, Oxygen, Ubuntu, sans-serif;
}

/*=================================================*/
/* 2. FORM CONTROLS                                */
/*=================================================*/
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
select,
.inputbox,
.textarea,
textarea {
	/* NOTE: intentionally no fixed height — legacy layouts (dialog toolbars,
	   jqGrid pagers) rely on their own control heights. We only restyle look.
	   Use background-color (NOT background) so icon background-images survive. */
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	color: var(--gs-text);
	font-family: var(--gs-font);
	font-size: 12px;
	background-color: var(--gs-surface);
	box-shadow: var(--gs-shadow-sm);
	transition: border-color var(--gs-ease), box-shadow var(--gs-ease),
		background-color var(--gs-ease);
}

textarea,
.textarea {
	height: auto;
	line-height: 1.45;
}

.inputbox,
.inputbox-calendar,
.inputbox-calendar-mmdd,
.inputbox-search {
	border-radius: var(--gs-radius-sm);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):hover,
select:hover,
.inputbox:hover,
.textarea:hover,
textarea:hover {
	border-color: var(--gs-border-hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):focus,
select:focus,
.inputbox:focus,
.textarea:focus,
textarea:focus {
	border-color: var(--gs-accent);
	box-shadow: 0 0 0 3px var(--gs-ring);
	outline: none;
	background-color: var(--gs-surface);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):disabled,
select:disabled,
.inputbox:disabled,
.textarea:disabled,
textarea:disabled {
	background-color: var(--gs-surface-2);
	color: var(--gs-text-muted);
	border-color: var(--gs-border);
	box-shadow: none;
}

::placeholder {
	color: #94a3b8;
}

/* Native checkboxes & radios use the accent colour */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--gs-accent);
	width: 15px;
	height: 15px;
	cursor: pointer;
}

/*=================================================*/
/* 3. BUTTONS                                       */
/*=================================================*/
input.button {
	/* NOTE: no fixed height — keep legacy button height so dialog toolbars align.
	   Use background-color (NOT background) so .button.icon images survive. */
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	background-color: var(--gs-surface-2);
	color: var(--gs-text);
	font-family: var(--gs-font);
	font-weight: 600;
	font-size: 12px;
	box-shadow: var(--gs-shadow-sm);
	transition: background-color var(--gs-ease), border-color var(--gs-ease),
		color var(--gs-ease), box-shadow var(--gs-ease), transform var(--gs-ease);
}

input.button:hover {
	background-color: var(--gs-surface-3);
	border-color: var(--gs-border-hover);
	color: #0f172a;
}

input.button:active {
	transform: translateY(1px);
	background-color: #e9eef5;
}

input.button:disabled {
	background-color: var(--gs-surface-2);
	color: var(--gs-text-muted);
	box-shadow: none;
	cursor: default;
}

/* Opt-in primary button: <input class="button primary"> */
input.button.primary {
	background: linear-gradient(135deg, var(--gs-accent) 0%, var(--gs-accent-600) 100%);
	border-color: var(--gs-accent-600);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(57, 112, 202, 0.3);
}

input.button.primary:hover {
	filter: brightness(1.06);
	color: #ffffff;
}

/* Opt-in danger button: <input class="button danger"> */
input.button.danger {
	background: linear-gradient(135deg, var(--gs-danger) 0%, var(--gs-danger-600) 100%);
	border-color: var(--gs-danger-600);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

input.button.danger:hover {
	filter: brightness(1.06);
	color: #ffffff;
}

/* Icon toolbar buttons (New/Generated/Save/Generate/Show/Delete all):
   drop the SVG icon and center the label. */
input.button.icon {
	background-image: none !important;
	text-align: center !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/*=================================================*/
/* 4. jQuery UI DIALOGS                             */
/*=================================================*/
.ui-dialog {
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	border-radius: var(--gs-radius-lg) !important;
	box-shadow: var(--gs-shadow-lg) !important;
	overflow: hidden !important;
	animation: gsDialogIn var(--gs-ease-slow) both;
}

@keyframes gsDialogIn {
	from { opacity: 0; transform: translateY(8px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--gs-surface) !important;
	border: none !important;
	border-bottom: 1px solid var(--gs-border) !important;
	border-radius: var(--gs-radius-lg) var(--gs-radius-lg) 0 0 !important;
	padding: 12px 16px !important;
	color: #0f172a !important;
	font-family: var(--gs-font) !important;
}

.ui-dialog .ui-dialog-title {
	font-family: var(--gs-font) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	color: #0f172a !important;
}

.ui-dialog .ui-dialog-titlebar-close {
	border-radius: 8px !important;
	transition: background-color var(--gs-ease) !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	background-color: var(--gs-surface-3) !important;
}

/* The default close icon is a WHITE svg (invisible on our white titlebar).
   Swap it for the dark close.svg so the X is visible. */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
	background-image: url(images/close.svg) !important;
	background-size: 12px 12px !important;
	opacity: 0.7;
}

.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon,
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick {
	opacity: 1;
}

.ui-dialog .ui-dialog-buttonpane {
	border-top: 1px solid var(--gs-border) !important;
	border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg) !important;
	padding: 10px 14px !important;
}

.ui-widget-overlay {
	background: rgba(15, 23, 42, 0.35) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 1 !important;
}

/*=================================================*/
/* 5. jqGrid — generic modern polish               */
/* (id-scoped bespoke grids keep their own rules)  */
/*=================================================*/
.ui-jqgrid .ui-jqgrid-htable th {
	font-family: var(--gs-font);
	font-weight: 600;
	color: var(--gs-text-muted);
	letter-spacing: 0.02em;
}

.ui-jqgrid tr.jqgrow td {
	font-family: var(--gs-font);
	transition: background-color var(--gs-ease);
}

/* Pager: clean footer, subtle controls */
.ui-jqgrid .ui-jqgrid-pager {
	background: var(--gs-surface) !important;
	border-top: 1px solid var(--gs-border) !important;
	font-family: var(--gs-font) !important;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {
	border-radius: var(--gs-radius-sm) !important;
	transition: background-color var(--gs-ease), color var(--gs-ease) !important;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button:hover {
	background: var(--gs-accent-soft) !important;
	color: var(--gs-accent-600) !important;
}

/* Keep pager inputs/selects compact so they never overflow the tight pager row.
   (Our generic input/select rule has high specificity via :not() chains, so we
   must explicitly restore the legacy compact sizing here.) */
.ui-jqgrid .ui-pg-input,
.ui-jqgrid .ui-pg-selbox {
	box-sizing: border-box !important;
	height: 18px !important;
	line-height: 18px !important;
	font-size: 10px !important;
	padding: 0 2px !important;
	box-shadow: none !important;
	border: 1px solid var(--gs-border) !important;
	border-radius: 4px !important;
	font-family: var(--gs-font) !important;
}

/*=================================================*/
/* 6. SCROLLBARS (WebKit)                           */
/*=================================================*/
#side_panel ::-webkit-scrollbar,
.ui-dialog ::-webkit-scrollbar,
#cpanel ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#side_panel ::-webkit-scrollbar-track,
.ui-dialog ::-webkit-scrollbar-track,
#cpanel ::-webkit-scrollbar-track {
	background: transparent;
}

#side_panel ::-webkit-scrollbar-thumb,
.ui-dialog ::-webkit-scrollbar-thumb,
#cpanel ::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 8px;
}

#side_panel ::-webkit-scrollbar-thumb:hover,
.ui-dialog ::-webkit-scrollbar-thumb:hover,
#cpanel ::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/*=================================================*/
/* 7. NOTIFICATIONS (pnotify toasts)               */
/*=================================================*/
.ui-pnotify .ui-pnotify-container {
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	border-radius: var(--gs-radius) !important;
	box-shadow: var(--gs-shadow-md) !important;
	font-family: var(--gs-font) !important;
	padding: 12px 14px !important;
	background-image: none !important;
}

.ui-pnotify .ui-pnotify-title {
	font-family: var(--gs-font) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin-bottom: 4px !important;
}

.ui-pnotify .ui-pnotify-text {
	font-family: var(--gs-font) !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}

/*=================================================*/
/* 8. TOOLTIPS (qtip)                              */
/*=================================================*/
.qtip-default {
	background: rgba(15, 23, 42, 0.92) !important;
	color: #f8fafc !important;
	border: none !important;
	border-radius: var(--gs-radius-sm) !important;
	box-shadow: var(--gs-shadow-md) !important;
}

.qtip-default .qtip-content {
	font-family: var(--gs-font) !important;
	font-size: 12px !important;
	padding: 7px 10px !important;
	color: #f8fafc !important;
}

.qtip-default .qtip-titlebar {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	font-family: var(--gs-font) !important;
	font-weight: 600 !important;
}

/*=================================================*/
/* 9. TOKENIZE — chips & dropdown                  */
/*=================================================*/
div.Tokenize ul.TokensContainer {
	border: 1px solid var(--gs-border) !important;
	border-radius: var(--gs-radius-sm) !important;
	background: var(--gs-surface) !important;
	transition: border-color var(--gs-ease), box-shadow var(--gs-ease);
}

div.Tokenize.Focused ul.TokensContainer {
	border-color: var(--gs-accent) !important;
	box-shadow: 0 0 0 3px var(--gs-ring) !important;
}

div.Tokenize ul.TokensContainer li.Token {
	background: var(--gs-accent-soft) !important;
	border: 1px solid rgba(57, 112, 202, 0.25) !important;
	border-radius: 999px !important;
	color: var(--gs-accent-600) !important;
	font-family: var(--gs-font) !important;
	padding: 2px 8px !important;
}

div.Tokenize ul.TokensContainer li.Token a.Close {
	color: var(--gs-accent-600) !important;
}

div.Tokenize ul.Dropdown {
	border: 1px solid var(--gs-border) !important;
	border-radius: var(--gs-radius-sm) !important;
	box-shadow: var(--gs-shadow-md) !important;
	background: var(--gs-surface) !important;
}

div.Tokenize ul.Dropdown li {
	font-family: var(--gs-font) !important;
	font-size: 12px !important;
	transition: background-color var(--gs-ease);
}

div.Tokenize ul.Dropdown li.Hover {
	background: var(--gs-accent-soft) !important;
	color: var(--gs-accent-600) !important;
}

/*=================================================*/
/* 10. SESSION-EXPIRED / BLOCKING PANEL             */
/*=================================================*/
#blocking_panel {
	background-color: rgba(15, 23, 42, 0.35) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

#blocking_panel_msg {
	border-radius: var(--gs-radius-lg) !important;
	box-shadow: var(--gs-shadow-lg) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	font-family: var(--gs-font);
	color: var(--gs-text);
}

/*=================================================*/
/* 11. CPANEL — horizontal nav polish (scoped)      */
/*=================================================*/
#cpanel #top_panel .left-menu,
#cpanel #top_panel .right-menu {
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	border-radius: var(--gs-radius) !important;
	box-shadow: var(--gs-shadow-md) !important;
}

#cpanel #top_panel ul li a {
	font-family: var(--gs-font) !important;
	font-weight: 600 !important;
	color: var(--gs-text-muted) !important;
}

#cpanel #top_panel ul li a:hover {
	background: var(--gs-accent-soft) !important;
	color: var(--gs-accent-600) !important;
}

#cpanel #top_panel ul li a.active {
	background: var(--gs-accent-soft) !important;
	color: var(--gs-accent-600) !important;
	box-shadow: inset 0 -2px 0 var(--gs-accent) !important;
}

#cpanel .cpanel-title .title {
	font-family: var(--gs-font) !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

/*=================================================*/
/* 12. MOTION / SMOOTHNESS                           */
/*=================================================*/
a,
button,
.button,
.ui-tabs-nav li a {
	transition: color var(--gs-ease), background-color var(--gs-ease),
		border-color var(--gs-ease), box-shadow var(--gs-ease);
}

@media (prefers-reduced-motion: reduce) {
	.ui-dialog { animation: none; }
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}