/* ============================================
   ADMIN3.CSS - Modernized Admin Interface
   Syntex e-commerce platform
   ============================================ */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
	/* Primary */
	--color-primary: #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-primary-light: #eff6ff;

	/* Success / Danger / Warning */
	--color-success: #16a34a;
	--color-success-hover: #15803d;
	--color-danger: #dc2626;
	--color-danger-hover: #b91c1c;
	--color-warning: #f59e0b;

	/* Neutrals */
	--color-bg: #f8fafc;
	--color-surface: #ffffff;
	--color-sidebar-bg: #1e293b;
	--color-sidebar-text: #cbd5e1;
	--color-sidebar-hover: #334155;
	--color-sidebar-active: #2563eb;
	--color-sidebar-heading: #d4c477;
	--color-header-bg: #ffffff;
	--color-header-border: #e2e8f0;

	/* Text */
	--color-text: #1e293b;
	--color-text-secondary: #64748b;
	--color-text-muted: #94a3b8;

	/* Borders */
	--color-border: #e2e8f0;
	--color-border-light: #f1f5f9;

	/* Inputs */
	--color-input-border: #cbd5e1;
	--color-input-focus: #2563eb;
	--color-input-focus-ring: rgba(37, 99, 235, 0.15);
	--color-input-bg: #ffffff;

	/* Spacing */
	--sidebar-width: 240px;
	--header-height: 64px;
	--content-padding: 24px;
	--border-radius: 6px;
	--border-radius-lg: 8px;
	--border-radius-sm: 4px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.03);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;

	/* Typography */
	--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-size-xs: 11px;
	--font-size-sm: 13px;
	--font-size-base: 14px;
	--font-size-md: 15px;
	--font-size-lg: 17px;
	--font-size-xl: 20px;
	--line-height-base: 1.6;
	--line-height-tight: 1.3;
}

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font: var(--font-size-base)/var(--line-height-base) var(--font-family);
	background: var(--color-bg);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.menu-open { overflow: hidden; }
body.simple { background: white; }
a { text-decoration: none; color: var(--color-primary); transition: color var(--transition-fast); }
a:link, a:visited { color: var(--color-text); }
a:hover { color: var(--color-primary-hover); text-decoration: none; }
ul { list-style: none; }
img { border: 0; }
code, pre { font-family: "Lucida Console", Courier; font-size: 90%; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================
   LAYOUT -- CSS Grid
   ============================================ */
#container {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	min-height: calc(100vh - var(--header-height));
	background: var(--color-bg);
}
#wrapper {
	float: none;
	width: auto;
	margin-left: 0;
	min-width: 0;
	overflow: hidden;
	grid-column: 2;
	grid-row: 1;
}
#sidebar {
	grid-column: 1;
	grid-row: 1;
}
#content {
	margin-top: 0;
	margin-left: 0;
	padding: var(--content-padding);
	padding-bottom: 3em;
	position: relative;
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-sm);
}
#framed #container {
	display: block;
}
#framed #sidebar {
	display: none;
}
#framed #content {
	margin: 0;
	padding: 20px;
}
#framed #content {
	overflow: visible;
}
#framed .fixededit {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	margin: -20px -20px 10px -20px;
	width: auto;
}
#content.nologin {
	margin: 0;
	padding: var(--content-padding);
	max-width: 600px;
}
#footer { clear: none; grid-column: 1 / -1; }
#footer p { padding: 0; margin: 10px var(--content-padding); line-height: 30px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
#footer p span { line-height: 30px; display: block; height: 30px; float: right; margin: 0 0 0 10px; color: var(--color-text-muted); }

/* ============================================
   HEADER
   ============================================ */
#header {
	height: var(--header-height);
	border-bottom: 1px solid var(--color-header-border);
	background: var(--color-header-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-sm);
}
h1 { height: auto; margin-left: -8px; flex-shrink: 0; }
h1 img { height: calc(var(--header-height) - 20px); margin-top: 0; vertical-align: middle; }
h1 img:hover { opacity: 1; }
h1 span { font-size: 26px; line-height: var(--header-height); font-weight: 900; color: var(--color-text) !important; display: block; }
h1 a:hover { color: var(--color-primary) !important; }

/* Login area */
#login {
	position: static;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	order: 3;
}
#login h2 {
	display: none;
}
#login ul { margin: 0; padding: 0; display: flex; gap: 4px; margin-left: auto; }
#login li { display: inline; background: none; padding: 0; margin: 0; }
#login li a {
	display: inline-block;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-right: 0;
	padding: 6px 12px;
	background: var(--color-bg);
	color: var(--color-text-secondary) !important;
	text-decoration: none;
	border-radius: var(--border-radius-sm);
	transition: all var(--transition-fast);
}
#login li a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary) !important;
	text-decoration: none;
}

/* Filters bar */
#filterslist {
	position: static;
	height: auto;
	padding: 0 16px;
	border-radius: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	flex: 1;
	justify-content: flex-end;
	margin: 0 12px;
	order: 2;
}
a.filter, span.filter {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-size: var(--font-size-xs);
	line-height: 20px;
	padding: 2px 10px;
	display: inline-flex;
	align-items: center;
	margin: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: all var(--transition-fast);
	color: var(--color-text-secondary);
}
a.filter:hover, span.filter.go:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary);
}
span.filter.save {
	background: var(--color-primary);
	color: white !important;
	border-color: var(--color-primary);
	font-weight: 600;
}
span.filter.save:hover {
	background: var(--color-primary-hover);
}
#filterslist del {
	font-size: var(--font-size-xs);
	line-height: 18px;
	padding: 0 4px 0 0;
	display: inline-block;
	cursor: pointer;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}
#filterslist del:hover { color: var(--color-danger); }

/* ============================================
   SIDEBAR -- Dark Modern Theme
   ============================================ */
#sidebar {
	float: none;
	width: var(--sidebar-width);
	background: var(--color-sidebar-bg);
	margin: 0;
	padding: 12px 0;
	height: calc(100vh - var(--header-height));
	overflow-y: auto;
	overflow-x: hidden;
	position: sticky;
	top: var(--header-height);
}
#sidebar h2 {
	font-size: calc(var(--font-size-xs) + 1px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--color-sidebar-heading);
	height: auto;
	padding: 20px 20px 8px 20px;
	margin: 0;
	border-bottom: none;
	background: transparent;
	box-shadow: none;
}
#sidebar h2.user { border-top: 0 none; padding-top: 8px; }
#sidebar h2 i {
	font-size: 14px;
	margin-right: 6px;
	vertical-align: middle;
	opacity: 0.7;
}
#sidebar ul { padding: 0 8px 4px 8px; }
#sidebar li { display: block; font-size: var(--font-size-sm); padding: 0; margin: 1px 0; }
#sidebar li a {
	display: block;
	padding: 5px 12px;
	color: var(--color-sidebar-text);
	border-radius: var(--border-radius-sm);
	transition: all var(--transition-fast);
	line-height: 1.4;
}
#sidebar li a:hover {
	background: var(--color-sidebar-hover);
	color: #f1f5f9;
	text-decoration: none;
}
#sidebar li a strong { color: #ffffff; font-weight: 600; }
#sidebar li a strong::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	background: var(--color-sidebar-active);
	border-radius: 2px;
	margin-right: 8px;
	vertical-align: middle;
}
#sidebar p { padding: 8px 20px; color: var(--color-sidebar-text); font-size: var(--font-size-sm); }

/* Sub-menu clicker items */
#sidebar li.menuclicker {
	display: block;
	padding: 7px 12px;
	cursor: pointer;
	color: var(--color-sidebar-text);
	font-size: var(--font-size-sm);
	border-radius: var(--border-radius-sm);
	transition: all var(--transition-fast);
}
#sidebar li.menuclicker:hover {
	background: var(--color-sidebar-hover);
	color: #f1f5f9;
	text-decoration: none;
}
#sidebar li.hide { display: none; }
#sidebar li.seznam, #sidebar li.ciselnik, #sidebar li.marketing, #sidebar li.system, #sidebar li.translate { padding-left: 0; }
#sidebar li.seznam a, #sidebar li.ciselnik a, #sidebar li.marketing a, #sidebar li.system a, #sidebar li.translate a {
	padding-left: 24px;
	font-size: var(--font-size-xs);
}

/* ============================================
   CONTENT AREA
   ============================================ */
#content h2 {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin: 0 0 1.25em 0;
	border-radius: 0;
	line-height: var(--line-height-tight);
}
#content h3 {
	font-size: var(--font-size-md);
	font-weight: 600;
	background: var(--color-text);
	margin: 1.5em 0 1em 0;
	padding: 0 1em;
	line-height: 38px;
	color: white;
	border-radius: var(--border-radius);
}
#content h2 a { color: var(--color-text); }
#content h3 a { color: white; }
#content ul { padding: 1em 1.5em; }
#content li {
	background: none;
	padding: 4px 0 4px 8px;
	border-left: 2px solid var(--color-border);
	margin-bottom: 2px;
	transition: border-color var(--transition-fast);
}
#content li:hover { border-left-color: var(--color-primary); }
#content p { padding: 0 0 1em 0; line-height: var(--line-height-base); color: var(--color-text); }
#content .ui-accordion h3 { margin-bottom: 1px; margin-top: 0; }
#content .navigation { border-top: 1px solid var(--color-border); }
table.navigation { table-layout: auto; width: 100%; margin: 0; }
table.navigation td { white-space: nowrap; vertical-align: middle; padding: 6px 8px; width: auto; }
table.navigation td.center { white-space: normal; width: 100%; }
table.navigation td form { display: inline; }
table.navigation td form > div { display: inline-flex; align-items: center; gap: 4px; }
table.navigation td.center form > div { justify-content: center; display: flex; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }

table.varianty { border: 1px solid #bbb; }

/* Accordion */
#accordion h3, .accordion h3 { margin: 0 0 1px 0 !important; cursor: pointer; transition: background var(--transition-fast); }
#accordion h3:hover, .accordion h3:hover { background: #334155; }
#websetings h3 { margin: 0 0 1px 0; cursor: pointer; }
#accordion > div, .accordion > div { padding: 12px 20px; }
#websetings > table, #accordion > div, .accordion > div, #accordion > table, #accordion > p {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	margin: 0 !important;
	width: auto;
	display: none;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}
#accordion > div.show, #accordion > table.show, #accordion > p.show { display: block; }
#accordion > table { width: 100%; }
#websetings > table { width: 99%; margin-right: 1em; }
#accordion h3.firstopen + div, #accordion h3.firstopen + table { display: block; }

/* ============================================
   TABLES
   ============================================ */
table {
	margin: 1em 0;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-base);
}
.batchoperations { padding: 12px 0; margin: 0; width: 100%; }
.batchoperations select { width: 140px; }
th {
	background: var(--color-bg);
	font-weight: 600;
	padding: 8px 10px;
	font-size: var(--font-size-sm);
	text-align: left;
	color: var(--color-text-secondary);
	border-bottom: 2px solid var(--color-border);
	white-space: nowrap;
}
td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--color-border-light);
	border-right: none;
	vertical-align: middle;
	line-height: 1.5;
}
table.edittable {
	clear:both;
	margin-top:30px;
	margin-bottom:30px;
}
table.edittable > tbody > tr > td:not(.keeppadding) {
	padding:0!important;
}
table.edittable input.ui-autocomplete-input:not(.normal) {
	width:100%;
	margin-bottom:2px;
}

/* Compact inputs inside table cells */
th input[type=text], th input[type=number], th input[type=email], th input[type=password],
th select, th textarea,
td input[type=text], td input[type=number], td input[type=email], td input[type=password],
td select, td textarea {
	padding: 4px 6px;
	font-size: var(--font-size-sm);
	margin-top: 0;
	border-radius: var(--border-radius-sm);
}

/* Tags */
#tat_table { width: 250px; }

table.full { min-width: 100%; margin-right: 0; display: block; overflow-x: auto; }
table.full > thead, table.full > tbody, table.full > tfoot, table.full > tr { display: table; width: 100%; table-layout: auto; }
table.full th { text-align: left; }
table.full td { vertical-align: top; }
table.full.list tr { border-bottom: 1px solid #ccc; }
table th.w50, table td.w50 { width: 50%; }
table th.w33, table td.w33 { width: 33%; }
table th.w20, table td.w20 { width: 20%; }
table th.w25, table td.w25 { width: 25%; }
table th.f20 { width: 20px; }
table th.f60 { width: 60px; }
table.full input:focus { background: #F5F5DC; color: black; }

/* Header rows */
table.ordershelper tr.header th, table.full tr.header th {
	background: var(--color-text);
	color: white;
	border: 0 none;
	font-weight: 600;
}
table.full tr.header th a { color: white; }
table.full td.center { text-align: center !important; }
table td.r, table th.r { text-align: right; }

/* Row hover */
table.list tr:hover td { background: #eff6ff !important; }

/* Zebra striping */
table.full tr.even td { background: var(--color-bg); border: 0 none; }
table.full tr.odd td { background: #f0f0f0; border: 0 none; }
table.full tr.pink td { background: #fce7f3 !important; border: 0 none; }
table.full tr.poptavka td { background: #fdf2f8 !important; border: 0 none; }
table.full tr.clicked td { background: #dcfce7; }
table.full tr.clicked:hover td { background: #eff6ff !important; }
table.full td.action { background: var(--color-bg) !important; }

table.inside { width: 100%; margin-bottom: 20px; }
table.full.list td { border: 0 none; }
table.full.list { border-collapse: collapse; }
table.full.list tr.hide { display: none; }

/* Color rows - soften them */
tr.col1 > td, td.col1 { background: #fefce8; }
tr.col2 > td, td.col2 { background: #fdf2f8; }
tr.col3 > td, td.col3 { background: var(--color-bg); }
tr.col4 > td, td.col4 { background: #fff7ed; }
tr.col5 > td, td.col5 { background: #ecfeff; }

/* Micro tables */
table.micro { margin: 0; min-width: 100%; border: 0 none; display: block; overflow-x: auto; }
table.micro > thead, table.micro > tbody, table.micro > tfoot, table.micro > tr { display: table; width: 100%; table-layout: auto; }
table.micro th { padding-top: 1px; padding-bottom: 1px; font-size: 1.0em; padding-left: 5px; border: 0 none; background: transparent; }
table.micro td { padding-top: 1px; padding-bottom: 1px; font-size: 1.0em; padding-left: 5px; border: 0 none; background: transparent; }
table.micro td.w25 { width: 25%; }
table.micro td.w33 { width: 33%; }
table.micro.center { text-align: center; }

table.minipad td { padding: 0 0 1px 5px; }

table.microshow { margin: 2px 0; padding: 0; border: 0 none; }
table.microshow td { border: 0 none; padding: 2px 0 2px 0; border-bottom: 1px dotted #959595 !important; text-align: right; }
table.microshow td:nth-child(1) { text-align: left; }
table.microshow td:nth-child(7) { text-align: right; }

/* Responsive table wrapper */
div.responsive {
	overflow-x: auto;
	width: 100%;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], textarea, select {
	border: 1px solid var(--color-input-border);
	padding: 8px 12px;
	margin-top: 2px;
	border-radius: var(--border-radius);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background: var(--color-input-bg);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	outline: none;
	line-height: 1.4;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, input[type=date]:focus, input[type=time]:focus, textarea:focus, select:focus {
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 3px var(--color-input-focus-ring);
	background: var(--color-input-bg);
}
input.ui-autocomplete-input { background: #f0f7ff; }
input.ui-autocomplete-input:focus { background: #e8f2ff; }
input[readonly=readonly], select[readonly=readonly], a[readonly=readonly] { background: #f1f5f9; color: var(--color-text-secondary); }
input[required=required], select[required=required] { border-left: 3px solid var(--color-primary); }
input.simple { background: var(--color-bg); }
input.main { background: #d9f99d; }
input.position { background: #e7e7b5; }
input.mini { padding: 1px; font-size: 13px; line-height: 16px; border: 0 none; width: 26px; text-align: center; }
select.mini { padding: 1px; font-size: 13px; line-height: 16px; border: 0 none; width: 86px; text-align: left; }
select.w40, input.w40 { width: 40%; }
input.w40 { background: var(--color-bg) !important; }
textarea.tbody { width: 400px; height: 100px; }

fieldset {
	padding: 16px 20px;
	margin: 16px 0 8px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	width: 100%;
	background: var(--color-surface);
}
#content.nologin fieldset { width: 100%; }
#content fieldset p { margin: 8px 0; padding: 0; }
legend { color: var(--color-text); font-weight: 600; font-size: var(--font-size-md); padding: 0 8px; }
#content fieldset.fixed { text-align: left; }
#content fieldset.fixed label { width: 33%; display: inline-block; }
#content form.right fieldset { text-align: right; }

/* ============================================
   BUTTONS
   ============================================ */
input[type=submit] {
	background: var(--color-primary);
	color: white;
	padding: 9px 20px;
	text-align: center;
	border: 0 none;
	border-radius: var(--border-radius);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	letter-spacing: 0.01em;
}
button, .button {
	background: var(--color-primary);
	color: white !important;
	padding: 9px 18px;
	text-align: center;
	border: 0 none;
	cursor: pointer;
	border-radius: var(--border-radius);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: 600;
	transition: all var(--transition-fast);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.01em;
	line-height: 1.4;
}
input[type=submit]:hover, button:hover, .button:hover {
	background-color: var(--color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
input[type=submit]:active, button:active, .button:active {
	transform: translateY(0);
	box-shadow: none;
}
button.red, .button.red { background: var(--color-danger); }
button.red:hover, .button.red:hover { background: var(--color-danger-hover); }
button.micro, .button.micro { font-size: var(--font-size-xs); line-height: 14px; padding: 4px 8px; font-weight: 500; }
button.mini, .button.mini { font-size: var(--font-size-base); line-height: 24px; padding: 4px 12px; border-radius: var(--border-radius-sm); }
.button.enhanced { background: var(--color-danger); }
.button.enhanced:hover { background: var(--color-danger-hover); }

/* ============================================
   HELPERS & UTILITIES
   ============================================ */
.splitter1  { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 1px; }
.splitter5  { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 8px; }
.splitter10 { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 12px; }
.splitter15 { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 20px; }
.splitter20 { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 24px; }
.splitter30 { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 32px; }
.splitter45 { clear: both; display: block; font-size: 1px; line-height: 1px; padding-top: 48px; }
.clearer { clear: both; height: 1px; font-size: 1px; line-height: 1px; }
.mb-1 {margin-bottom:2px}
.mb-2 {margin-bottom:4px}
.mb-3 {margin-bottom:6px}
.pb-1 {padding-bottom:2px}
.pb-2 {padding-bottom:4px}
.pb-3 {padding-bottom:6px}

.hand { cursor: pointer; text-decoration: none; color: var(--color-primary); }
.hand:hover { text-decoration: underline; }
.hidden { display: none; }
.hide { display: none; }
.cursorpointer { cursor: pointer; }
span.floatright { float: right; }
.floatleft { float: left; margin-left: 10px; }
.floatright { float: right; margin-right: 10px; }
.fll { float: left; }
.flr { float: right; }
.center { text-align: center; }
.bigger { font-size: 120%; }
.indent { padding: 10px 0 5px 30px; }
.addmore, #addmorev { text-decoration: underline; cursor: pointer; }
.box-half { width: 45%; }
.imgclick { margin-left: 5px; cursor: pointer; }

span.r { color: red; }
span.l { color: #4041ff; }
span.g { color: #507021; }
.green { color: var(--color-success); }
.red { color: var(--color-danger); }
.blue { background: var(--color-primary); color: white; border-radius: var(--border-radius-sm); padding: 1px 6px; }
strong.red { color: red; }

span.click, .clicker { cursor: pointer; color: var(--color-text); text-decoration: underline; transition: color var(--transition-fast); }
span.click:hover, .clicker:hover { color: var(--color-primary-hover); }
td.right { text-align: right; }
th.right { text-align: right !important; }
.minibox { float: left; display: block; width: 10px; height: 10px; margin-right: 10px; }
form.r { text-align: right; }

span.showcontent { display: inline-block; font-weight: bold; color: #333; cursor: pointer; }
#content p.slim { margin: 2px 0; padding: 0; }

/* ============================================
   IMAGE & UPLOAD COMPONENTS
   ============================================ */
.imagesorter { display: block; clear: both; margin-bottom: 20px; }
.imagesorter div.left {
	float: left;
	margin: 6px;
	padding: 0;
	width: 160px;
	height: 100px;
	border: 1px solid var(--color-border);
	text-align: center;
	border-radius: var(--border-radius);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.imagesorter div.left:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.imagesorter img { max-width: 160px !important; max-height: 160px !important; margin: 0; border-radius: var(--border-radius); }
span.deleteimage { color: red; cursor: pointer; clear: both; display: block; }
.imagesorter input { width: 160px; border: 0 none; margin: 0 0 1px 0; padding: 0; }
span.delete { color: red; cursor: pointer; display: block; }
img.handle { cursor: pointer; }

input.canvasUpload { border: 0 none; color: transparent; }
.canvasPhoto { display: block; max-width: 135px; max-height: 135px; margin-top: 1px; margin-right: 1px; text-align: center; border-radius: var(--border-radius); overflow: hidden; float: right; }
.canvasPhoto canvas { width: 100%; }
.canvasPhoto img { width: 100%; }

.eshoplistimage { height: 40px; float: left; }
.imgspacer { display: block; width: 50px; height: 40px; float: left; }

/* ============================================
   AUTOCOMPLETE
   ============================================ */
.suggestionsBox { position: absolute; margin: 10px 0px 0px 0px; width: 400px; background-color: var(--color-text); border: 1px solid var(--color-text); color: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); }
.suggestionList { margin: 0px; padding: 0px; }
.suggestionList li { margin: 0px 0px 3px 0px; padding: 6px 12px; cursor: pointer; border-radius: var(--border-radius-sm); }
.suggestionList li:hover { background-color: var(--color-primary); }

iframe.hidden { display: none; }

/* ============================================
   EDITOR & WYSIWYG
   ============================================ */
.editorfull { display: block; width: 100%; height: 400px; float: left; }
.editormini { display: block; width: 1px; height: 1px; float: right; }
.editornone { display: none; width: 100%; height: 400px; float: left; }
.editornone textarea, .editorfull textarea { display: block; width: 100%; height: 500px; float: left; }
.editortiny { display: block; min-height: auto; height: auto; }

/* ============================================
   jQuery UI Overrides -- match admin theme
   ============================================ */
.ui-widget { font-family: inherit; font-size: inherit; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: inherit; }
.ui-widget-content { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }
.ui-widget-header { border-color: var(--color-primary); background: var(--color-primary); color: white; font-weight: 600; }
.ui-widget-header a { color: white; }

/* Datepicker */
.ui-datepicker { padding: 4px; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); z-index: 200 !important; }
.ui-datepicker .ui-datepicker-header { border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; padding: 6px 0; }
.ui-datepicker .ui-datepicker-title { font-size: var(--font-size-base); font-weight: 600; }
.ui-datepicker th { font-weight: 600; font-size: var(--font-size-xs); color: var(--color-text-secondary); padding: 6px 4px; }
.ui-datepicker td { padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { padding: 4px 6px; border-radius: var(--border-radius-sm); text-align: center; }
.ui-datepicker .ui-datepicker-buttonpane button { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 4px 12px; background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.ui-datepicker .ui-datepicker-buttonpane button:hover { background: var(--color-bg); }

/* States -- default */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid transparent; background: transparent; color: var(--color-text); font-weight: normal;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--color-text); }

/* States -- hover/focus */
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border-color: var(--color-primary-light); background: var(--color-primary-light); color: var(--color-primary); font-weight: normal;
}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited,
.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: var(--color-primary); }

/* States -- active (selected day) */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border-color: var(--color-primary); background: var(--color-primary); color: white; font-weight: 600;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: white; }

/* States -- highlight (today) */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border-color: var(--color-primary-light); background: var(--color-primary-light); color: var(--color-primary);
}

/* Autocomplete dropdown */
.ui-autocomplete { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); max-height: 300px; overflow-y: auto; }
.ui-autocomplete .ui-menu-item { padding: 6px 12px; font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-border-light); }
.ui-autocomplete .ui-menu-item:last-child { border-bottom: none; }
.ui-autocomplete .ui-state-focus, .ui-autocomplete .ui-state-active { margin: 0; border-radius: 0; }

/* Autocomplete input */
img.ui-datepicker-trigger { margin: 0 4px; vertical-align: middle; cursor: pointer; width: 18px; height: 18px; opacity: 0.5; transition: opacity var(--transition-fast); }
img.ui-datepicker-trigger:hover { opacity: 0.8; }

/* Corner radius override */
.ui-corner-all, .ui-corner-top, .ui-corner-bottom, .ui-corner-left, .ui-corner-right,
.ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { border-radius: var(--border-radius-sm); }

/* TinyMCE overrides */
.tox .tox-toolbar { justify-content: center !important; text-align: center !important; }
.tox-dialog__header { display: none !important; }
.tox-dialog__body { padding-top: 5px !important; }
.tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg { fill: black !important; }
.tox .tox-button--secondary { background-color: #bbb !important; color: white !important; }
.tox .tox-button { color: white !important; }
.tox .tox-tbtn__select-label, .tox .tox-listbox__select-label { color: black !important; }

/* Colorbox -- responsive */
#colorbox, #cboxWrapper, #cboxContent { max-width: 100vw !important; box-sizing: border-box; }
#cboxLoadedContent { max-width: 100% !important; }
#colorbox iframe { max-width: 100% !important; }

/* ============================================
   FILTER FORM & POSITION
   ============================================ */
#eshopsubmit > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}
#eshopsubmit select {
	width: auto;
	min-width: 0;
	padding: 4px 6px;
	font-size: var(--font-size-sm);
}
#eshopsubmit input[type=text] {
	width: auto;
	min-width: 0;
	max-width: 120px;
	padding: 4px 6px;
	font-size: var(--font-size-sm);
}
#formfilter.bottom { position: absolute; bottom: 10px; right: 20px; left: 20px; }

/* ============================================
   VARIOUS COMPONENTS
   ============================================ */
hr { border: 0 none; border-top: 1px solid var(--color-border); margin: 16px 0; padding: 0; }

#paramsort div.grey { margin: 0 1em 5px 0; padding: 5px 10px; line-height: 130%; background: var(--color-bg); border-top: 1px solid var(--color-border); cursor: pointer; }
#paramsort div.grey label { margin-bottom: 2px; display: inline-block; }
#paramsort .removeitem { float: right; margin: 5px 10px 0 0; }

#sets .sets { background: var(--color-bg); border: 1px solid var(--color-border); padding: 16px; margin: 12px 0; border-radius: var(--border-radius); }

.microshow input[name^="ks"] { font-size: 10px !important; line-height: 12px; padding: 2px; margin: 0; width: 30px; border: 0 none; background: transparent; }

/* Fixed edit bar */
.fixededit {
	position: fixed;
	top: var(--header-height);
	left: var(--sidebar-width);
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	z-index: 99;
	height: 50px;
	box-shadow: var(--shadow-md);
	border-bottom: 1px solid var(--color-border);
}
#btn_blockedit { font-size: 16px; cursor: pointer; }

/* Boxes */
.leftbox, .rightbox { margin: 3px; padding: 3px; font-size: larger; width: 20%; }
.leftbox { float: left; border-right: 2px solid #888; }
.rightbox { float: right; border-left: 2px solid #888; }

/* JS buttons */
.jsbutton { text-align: center; padding: 3px; border: 1px solid var(--color-border); }
.jsbuttonspacer { padding-right: 10px; }
.jsbuttonbar { padding: 3px; cursor: default; }

/* AJAX & iframes */
.ajaxiframe iframe { width: 500px; height: 40px; }
.ajaxing { height: 190px; overflow: auto; padding-bottom: 10px; padding-top: 10px; }
.ajaxing .left { text-align: center; border: 5px solid white; width: 160px; height: 170px; vertical-align: middle; margin: 0 10px 0 0; }
.ajaxing .left img { height: 130px; }
.ajaxing .left input { border: 0 none; margin-bottom: 2px; }
.ui-helper-hidden-accessible { display: none !important; }

/* ============================================
   RESPONSIVE -- Tablet Landscape (1200px)
   ============================================ */
@media (max-width: 1200px) {
	:root {
		--sidebar-width: 200px;
		--content-padding: 20px;
	}
	table { font-size: var(--font-size-sm); }
	th, td { padding: 6px 8px; }
}


/* ============================================
   RESPONSIVE -- Tablet Portrait (<1024px)
   ============================================ */
/* Hamburger button - hidden on desktop */
#hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
	z-index: 201;
	position: relative;
}
#hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	margin: 5px 0;
	border-radius: 2px;
	transition: all var(--transition-base);
}
#hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Sidebar overlay backdrop */
#sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 149;
}
#sidebar-overlay.open { display: block; }
#sidebar-close { display: none; }
#sidebar .sidebar-login { display: none; }

@media (max-width: 1023px) {
	#hamburger { display: block; }
	#filterslist { display: none; }
	#login { display: none; }
	.hidemobile { display: none !important; }

	#container {
		display: block;
		grid-template-columns: none;
	}

	/* Slide-out sidebar */
	#sidebar {
		position: fixed;
		top: 0;
		right: -280px;
		width: 280px;
		height: 100vh;
		height: 100dvh;
		padding: 60px 0 12px 0;
		z-index: 150;
		overflow-y: auto;
		overflow-x: hidden;
		transition: right var(--transition-slow);
		display: flex;
		flex-direction: column;
	}
	#sidebar.open {
		right: 0;
	}
	#sidebar-close {
		display: block;
		position: absolute;
		top: 12px;
		right: 12px;
		background: none;
		border: none;
		color: var(--color-sidebar-text);
		font-size: 22px;
		cursor: pointer;
		padding: 4px 6px;
		border-radius: var(--border-radius-sm);
		transition: all var(--transition-fast);
		z-index: 10;
		line-height: 1;
	}
	#sidebar-close:hover {
		color: #fff;
		background: var(--color-sidebar-hover);
	}
	#sidebar > div { display: block; flex-shrink: 0; }
	#sidebar h2 {
		display: flex;
		align-items: center;
		padding: 10px 20px;
		margin: 0;
		cursor: pointer;
		box-shadow: none;
		border-bottom: none;
		border-radius: 0;
		background: transparent;
		white-space: nowrap;
		font-size: var(--font-size-xs);
		transition: background var(--transition-fast);
		color: #94a3b8;
	}
	#sidebar h2:hover { background: var(--color-sidebar-hover); }
	#sidebar h2.active {
		background: var(--color-sidebar-active);
		color: #fff;
	}
	#sidebar h2 i { font-size: 14px; margin-right: 8px; opacity: 0.7; }
	#sidebar h2.user { padding-top: 10px; }
	#sidebar ul { display: none; padding: 0 8px 8px 8px; }
	#sidebar ul li { border-left: none; }

	/* Login items at bottom of sidebar */
	#sidebar .sidebar-login {
		display: block;
		border-top: 1px solid var(--color-sidebar-hover);
		margin-top: auto;
		padding: 12px 8px;
		flex-shrink: 0;
	}
	#sidebar .sidebar-login li a {
		display: block;
		padding: 6px 12px;
		color: var(--color-sidebar-text);
		border-radius: var(--border-radius-sm);
		font-size: var(--font-size-sm);
		background: none;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 0.03em;
	}
	#sidebar .sidebar-login li a:hover {
		background: var(--color-sidebar-hover);
		color: #f1f5f9;
	}
	#sidebar .sidebar-login #changemoney { background-color: #fff; padding: 2px 6px; border-radius: 2px}

	.fixededit { left: 0; }

	#wrapper {
		float: none;
		width: 100%;
		margin: 0;
	}
	#content {
		width: 100%;
		margin: 0;
		padding: 16px;
		overflow-x: auto;
		position: static;
	}
	div.responsive { width: 100%; }

	#chartform { display: block; margin: 0; clear: both; }
	#chartform .flr { float: none !important; padding: 10px 0 0 0; }
	#chartform a { display: inline-block; font-size: var(--font-size-xs); line-height: 18px; padding: 4px 6px; margin: 0 4px 4px 0; }
	td.eshopshow h4, td.eshopshow a { width: 50%; }
	.dashboard-boxes { grid-template-columns: repeat(2, 1fr); }
}

.mobile-only { display: none; }

/* ============================================
   RESPONSIVE -- Mobile (768px)
   ============================================ */
@media (max-width: 768px) {
	:root {
		--content-padding: 12px;
		--header-height: 46px;
	}
	#header { padding: 0 12px; flex-wrap: wrap; }
	#header h1 img { height: 22px; }
	h1 span { font-size: 20px; padding-left: 20px; }
	.mobile-only { display: list-item; }

	#content h2 { font-size: var(--font-size-lg); }
	#content h3 { font-size: var(--font-size-base); line-height: 34px; }

	body:not(#framed) input[type=text]:not(.normal),
	body:not(#framed) input[type=password],
	body:not(#framed) input[type=number],
	body:not(#framed) input[type=email],
	body:not(#framed) textarea,
	body:not(#framed) select {
		width: auto!important;
		max-width: 80vw!important;
	}
	body:not(#framed) textarea {
		width: 100%;
		max-width: 100%;
	}
	body#framed select, body#framed input[type=text], body#framed textarea {
		width:auto!important;
		max-width: 50vw!important;
	}
	.paramcontent select, .paramcontent select[multiple] {
		max-width: 50vw!important;
		width:auto!important;
		box-sizing: border-box;
	}
	table.full input[type=text], table.full input[type=password], table.full input[type=number], table.full input[type=email], table.full textarea, table.full select {
		width: auto;
		max-width: 100%;
	}
	.pb-1 {
		max-width: 60vw;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom:10px;
	}
	fieldset { padding: 12px; }
	.box-half { width: 100%; }
	input[name=catselect] {
		max-width:50vw;
	}
	body:not(#framed) #eshopsubmit select { width:auto!important; max-width: 80px!important; }
	td.eshopshow h4, td.eshopshow a { width: 100%; }
	.dashboard-boxes { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dashboard-box { padding: 14px 16px; }
	.dashboard-box-value { font-size: 18px; }
	.mobile-hide { display: none; }
}

/* ============================================
   RESPONSIVE -- Small Mobile (480px)
   ============================================ */
@media (max-width: 480px) {
	#content { padding: 8px; }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
	#sidebar { display: none; }
	#header { display: none; }
	#container { display: block; }
	#content { margin: 0; padding: 10px; }
}