/****** ETAG: 5319e0ed7a945f1bf99898f7e40f4e2e ******/


/****** themes/light/css/normalize.css ******/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/****** themes/light/css/style.css ******/


/* ===== Design Tokens ===== */
:root {
	/* Colors */
	--color-bg: #f5f9fc;
	--color-surface: #ffffff;
	--color-surface-alt: #f0f5fa;
	--color-surface-dim: rgba(0, 0, 0, 0.05);
	--color-surface-dim-hl: rgba(0, 0, 0, 0.1);
	--color-text: #333333;
	--color-text-muted: rgba(0, 0, 0, 0.5);
	--color-border: #e1e8ef;
	--color-border-light: rgba(0, 0, 0, 0.15);
	--color-shadow: rgba(15, 40, 70, 0.08);
	--color-link: #1a73e8;

	/* Brand / Action */
	--color-primary: #2952e3;
	--color-primary-accent: #3d6bff;
	--color-primary-soft: #e4ecff;
	--color-success: #0b8543;
	--color-success-soft: #dcf7ea;
	--color-warning: #c25e00;
	--color-warning-soft: #ffe7cc;
	--color-danger: #b32020;
	--color-danger-soft: #ffe2e2;
	--color-tag: rgba(40, 80, 160, 0.7);

	/* Hero */
	--gradient-hero: radial-gradient(circle at 72% 18%, #41b88333 0%, transparent 60%),
		linear-gradient(135deg, #1a9f62, #1a8bd0);

	/* Spacing scale (4px base) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-14: 56px;

	/* Radii */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-border);
	--shadow: 0 4px 8px -2px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);

	/* Motion */
	--transition: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Fonts ===== */
@font-face { font-family: default_font; src: url(../../common/fonts/b612/b612-regular.ttf); }
@font-face { font-family: default_font; src: url(../../common/fonts/b612/b612-italic.ttf); font-style: italic; }
@font-face { font-family: default_font; src: url(../../common/fonts/b612/b612-bold.ttf); font-weight: bold; }
@font-face { font-family: default_font; src: url(../../common/fonts/b612/b612-bold-italic.ttf); font-weight: bold; font-style: italic; }

/* ===== Reset & Base ===== */
* {
	font-family: default_font;
	font-size: inherit;
	box-sizing: inherit;
	line-height: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
	background: linear-gradient(180deg, #f5f9fc, #eef3f7 200px, #e6edf2 400px, #e6edf2);
	color: var(--color-text);
}

a { color: var(--color-link); }

/* ===== Layout Shell ===== */
#viewport { display: flex; min-height: 100vh; }
#main { flex: 1; }

/* ===== App Header ===== */
.app-header-bar {
	position: sticky;
	top: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	padding: var(--sp-3) var(--sp-8);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.app-header-bar .logo img { height: 36px; display: block; }

/* Primary Nav */
.primary-nav { display: flex; gap: var(--sp-1); }
.primary-nav .nav-link {
	position: relative;
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text);
	font-size: 14px;
	letter-spacing: 0.2px;
	transition: var(--transition);
}
.primary-nav .nav-link:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.primary-nav .nav-link.active { background: var(--color-primary); color: #fff; }

/* Header Actions (search, account) */
.app-header-actions { margin-left: auto; display: flex; gap: var(--sp-4); align-items: center; }
.app-header-actions .search input {
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: #fff;
	width: 180px;
	font-size: 13px;
}
.app-header-actions .search input:focus { outline: 2px solid var(--color-primary-soft); }

/* ===== Dashboard Welcome ===== */
.dash-welcome {
	padding: var(--sp-5) var(--sp-8) var(--sp-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dash-welcome h1 {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
	background: none;
}
.dash-welcome p {
	margin: var(--sp-1) 0 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* ===== Content Area ===== */
.app-content { padding: 0 var(--sp-4) var(--sp-6); }

#content {
	line-height: 1.8;
	min-height: 80vh;
}

#content > div, .block {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin: var(--sp-3) var(--sp-2);
	padding: var(--sp-4);
}

/* ===== Headings ===== */
h1 {
	margin: var(--sp-2) var(--sp-2) 0;
	padding: var(--sp-2) var(--sp-3);
	font-weight: normal;
	line-height: normal;
	background: none;
}

div > h2 {
	margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4) calc(-1 * var(--sp-4));
	padding: var(--sp-3) var(--sp-4);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	background: var(--color-surface-alt);
	border-bottom: 1px solid var(--color-border);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

div > h2 > div { flex: 1; }
div > h2 > button { margin-left: auto; }

/* ===== Toolbar (sub-nav, docked to header) ===== */
#content > .toolbar {
	padding: var(--sp-1) var(--sp-8);
	background: var(--color-surface);
	border: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	margin: 0 calc(-1 * var(--sp-4));
	display: flex;
	gap: var(--sp-1);
	align-items: center;
	flex-wrap: wrap;
}

/* ===== Table Toolbar ===== */
#content > .table-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-2) var(--sp-4);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-bottom: none;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	margin: var(--sp-3) var(--sp-2) 0;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* Grid container directly after table-toolbar: connect them visually */
#content > .table-toolbar + div[id^="gridContainer"] {
	margin: 0 var(--sp-2) var(--sp-3);
	border: 1px solid var(--color-border);
	border-top: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	padding: 0;
	background: var(--color-surface);
}

.table-toolbar .toolbar-actions {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

.quick-search-input {
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 13px;
	min-width: 200px;
}

.quick-search-input:focus {
	outline: 2px solid var(--color-primary-soft);
	outline-offset: -2px;
	border-color: var(--color-primary);
}

.quick-search-container {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.quick-search-clear {
	padding: var(--sp-2) var(--sp-3);
	font-size: 12px;
}

/* ===== Two-Column Panel Layout ===== */
#content > div.panel-2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	background: none;
	border: none;
	border-radius: 0;
	margin: 0 var(--sp-2);
	padding: 0;
}

#content > div.panel-2 > div {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	flex: 1;
	padding: var(--sp-4);
}

/* ===== Panels (v2) ===== */
.panel {
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: var(--sp-5) var(--sp-6);
	box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: var(--sp-6); }
.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-3);
}
.panel-header h2 { margin: 0; padding: 0; font-size: 16px; font-weight: 600; background: none; }

/* ===== Forms ===== */
form {
	max-width: 800px;
}

form .block {
	padding: 0;
	margin: 0;
}

div.form-row {
	display: flex;
	margin-bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--color-border);
}

div.form-row:last-child {
	border-bottom: none;
}

.form-row label {
	flex: 0 0 160px;
	max-width: 160px;
	padding: var(--sp-2) var(--sp-3);
	font-size: 13px;
	color: #555;
	background: var(--color-surface-alt);
	display: flex;
	align-items: flex-start;
	padding-top: 9px;
}

.form-row > div {
	flex: 1;
	padding: var(--sp-2) var(--sp-3);
	min-width: 0;
	border-left: 1px solid var(--color-border);
}

.form-row input, .form-row textarea, .form-row select {
	flex: 1;
	min-width: 0;
	border: none;
	border-left: 1px solid var(--color-border);
	padding: var(--sp-2) var(--sp-3);
	color: var(--color-text);
	background: transparent;
	font-size: 14px;
}

.form-row input:read-only, .form-row textarea:read-only {
	opacity: 0.5;
}

.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
	outline: 2px solid var(--color-primary-soft);
	outline-offset: -2px;
	background: #fff;
}

.form-row textarea {
	min-height: 64px;
}

/* ===== Buttons ===== */
button, .btn {
	margin: 0;
	padding: var(--sp-2) var(--sp-4);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	cursor: pointer;
	position: relative;
	transition: var(--transition);
}

button:hover, .btn:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-border);
}
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-primary-soft); outline-offset: 1px; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

button.action, input[type=submit] {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
button.action:hover, input[type=submit]:hover {
	background: var(--color-primary-accent);
	border-color: var(--color-primary-accent);
}

button.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

button.red { border-left: 4px solid var(--color-danger); }

/* Button Variants */
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-accent); border-color: var(--color-primary-accent); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface-alt); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary-soft); }
.btn-outline:hover { background: var(--color-primary-soft); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #d73838; }
.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-success:hover { background: #0d9d50; }
.btn-highlight { background: var(--color-primary); border-bottom: 3px solid var(--color-primary-accent); color: #fff; }
.btn-highlight:hover { background: var(--color-primary-accent); }

.btn-small { padding: var(--sp-1) var(--sp-2); font-size: 12px; }
.btn-large { padding: var(--sp-3) var(--sp-6); font-size: 15px; }

.icon-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface); }
.icon-btn:hover { background: var(--color-surface-alt); }

.btn .badge { position: absolute; top: -6px; right: -6px; background: var(--color-danger); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: var(--radius-pill); }

/* ===== Notifications & Banners ===== */
.banner {
	padding: var(--sp-3);
	background: rgba(255, 255, 255, 0.9);
}

.error {
	white-space: pre-wrap;
	padding: var(--sp-3);
	border: 2px solid var(--color-danger);
	background: var(--color-danger-soft);
}

.notification {
	padding: var(--sp-3);
	background: var(--color-success-soft);
	border: 1px solid var(--color-success);
}

.notification.error {
	background: var(--color-danger-soft);
	border-color: var(--color-danger);
}

/* ===== Tags & Pills ===== */
.tag {
	display: inline-block;
	background: var(--color-tag);
	color: white;
	font-weight: bold;
	padding: 3px 7px;
	font-size: 80%;
	border-radius: var(--radius-pill);
	min-width: 26px;
	text-align: center;
	vertical-align: middle;
}

.tag-pill {
	display: inline-block;
	border-radius: var(--radius-pill);
	overflow: hidden;
	vertical-align: middle;
	border: 2px solid var(--color-surface-dim);
}
.tag-pill > .key { display: inline-block; color: white; background: var(--color-tag); padding: var(--sp-1) var(--sp-2); }
.tag-pill > .value { display: inline-block; background: white; padding: var(--sp-1) var(--sp-2); }

/* ===== Status Colors ===== */
.new { background: rgba(40, 80, 200, 0.8); color: white; }
.info { background: rgba(60, 120, 60, 0.8); color: white; }

/* ===== Tabs ===== */
.tab-bar {
	border-bottom: 2px solid var(--color-border);
	display: flex;
	gap: var(--sp-1);
	margin-bottom: var(--sp-4);
	padding: 0 var(--sp-2);
}

.tab-button {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	padding: var(--sp-2) var(--sp-4) var(--sp-3);
	margin-bottom: -2px;
	font-size: 13px;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: var(--transition);
	min-width: auto;
}

.tab-button:hover {
	color: var(--color-text);
	background: var(--color-surface-dim);
	box-shadow: none;
	transform: none;
}

.tab-button.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	background: none;
}

.tab-panes { overflow: auto; }

/* ===== Charts ===== */
.chart { display: inline-block; vertical-align: top; }
.chart h2 { margin: 0; }

/* ===== Composite Fields ===== */
.composite-field { display: inline-block; border: 1px solid var(--color-border); }
.composite-field > div { width: auto; display: flex; }
.composite-field > div > * { border: none; }

/* ===== Nav Break (toolbar spacer) ===== */
.nav_break { display: inline-block; width: var(--sp-4); }

/* ===== Dashboard Layout ===== */
#content > .dash-kpi-row {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: var(--sp-3) var(--sp-2) 0;
}
.stat-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.stat-card .label { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-muted); }
.stat-card .value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--color-text); line-height: 1.2; }
.stat-card .value small { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.stat-card .sub-value { font-size: 13px; color: var(--color-text-muted); }
.stat-card .delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-1); }
.delta.up { color: var(--color-success); }
.delta.down { color: var(--color-danger); }

#content > .dash-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--sp-3);
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: var(--sp-3) var(--sp-2);
}
.dash-chart-item {
	display: block;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
}
.dash-chart-item h2 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 var(--sp-3);
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--color-text);
}

#content > .dash-tables {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--sp-3);
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0 var(--sp-2) var(--sp-3);
}
.dash-table-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
	overflow: auto;
}
.dash-table-card > h2 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 var(--sp-3);
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--color-text);
}

/* Mini table for dashboard */
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	padding: var(--sp-2) var(--sp-2);
	border-bottom: 2px solid var(--color-border);
}
.mini-table td {
	padding: var(--sp-2) var(--sp-2);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	white-space: nowrap;
}
.mini-table tr:last-child td { border-bottom: none; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table th.num { text-align: right; }
.mini-table a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.mini-table a:hover { text-decoration: underline; }
.mini-table .empty-state { color: var(--color-text-muted); text-align: center; padding: var(--sp-6); }

/* Status badges */
.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: capitalize;
}
.badge-success { background: rgba(34,197,94,0.12); color: #166534; }
.badge-warning { background: rgba(234,179,8,0.15); color: #854d0e; }
.badge-info { background: rgba(59,130,246,0.12); color: #1e40af; }
.badge-muted { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ===== Quick Actions ===== */
.quick-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.quick-actions li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: var(--transition);
}
.quick-actions li:hover { background: #fff; box-shadow: var(--shadow-sm); border-color: var(--color-primary-soft); }
.quick-actions .icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); font-size: 16px; font-weight: 600; color: #fff; }
.icon.green { background: var(--color-success); }
.icon.blue { background: var(--color-primary); }
.icon.orange { background: var(--color-warning); }
.icon.purple { background: #6c3dd9; }
.quick-actions h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.quick-actions p { margin: 0; font-size: 12px; opacity: 0.72; }

/* ===== Footer ===== */
footer { text-align: center; color: var(--color-text-muted); margin-top: var(--sp-8); }
.app-footer { text-align: center; padding: var(--sp-8) 0 var(--sp-6); font-size: 12px; opacity: 0.6; }

/* ===== Utility Classes ===== */

/* Flex ratios for panel-2 children */
.flex-half { flex: 0.5; }
.flex-third { flex: 0.33; }
.flex-quarter { flex: 0.25; }
.flex-two-thirds { flex: 0.67; }
.flex-three-quarters { flex: 0.75; }
.panel-sidebar {
	flex: 0 0 300px;
	max-width: 300px;
	width: 300px;
	align-self: flex-start;
}

/* Text colors */
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }

/* Text alignment */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Display */
.hidden { display: none; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* Text truncation */
.truncate {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 30%;
	vertical-align: top;
}

/* Widths */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-75 { width: 75%; }

/* Vertical alignment for table cells */
.valign-top { vertical-align: top; }
.nowrap { white-space: nowrap; }

/* Float clear (legacy support) */
.float-right { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Font sizes */
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

/* ===== Batch Processing ===== */
.batch-processing .item.done { color: var(--color-success); }
.batch-processing .item.started { color: var(--color-primary); }
.batch-processing .item.running { color: var(--color-primary); }
.batch-processing .item.waiting { color: var(--color-text-muted); }

/* ===== Progress Bar ===== */
.progress-container {
	position: relative;
	width: 100%;
	height: 20px;
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, var(--color-success), #66bb6a);
	transition: width 0.3s ease;
}
.progress-info {
	margin-top: var(--sp-1);
	font-size: 14px;
	color: var(--color-text);
}

/* ===== Checklist ===== */
.checklist-container {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	padding: var(--sp-2);
	background: var(--color-surface);
}
.checklist-item { display: flex; align-items: center; margin-bottom: var(--sp-2); }
.checklist-item.passed .checklist-title { color: var(--color-success); }
.checklist-item.failed .checklist-title { color: var(--color-danger); }
.checklist-item.skipped .checklist-title { color: var(--color-text-muted); }
.checklist-title { font-weight: bold; margin-right: var(--sp-2); }
.checklist-info { color: var(--color-text-muted); }
.checklist-icon { min-width: 32px; text-align: center; }
.checklist-icon.status-ok { color: var(--color-success); }
.checklist-icon.status-fail { color: var(--color-danger); }
.checklist-icon.status-skip { color: var(--color-text-muted); }

/* ===== Audit Log Table ===== */
.auditlog td { vertical-align: top; }
.auditlog .user { color: var(--color-success); }

/* ===== Responsive ===== */
@media (max-width: 819px) {
	#content > div {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 900px) {
	.app-header-bar { flex-wrap: wrap; gap: var(--sp-4); }
	.primary-nav { order: 3; width: 100%; overflow: auto; }
	.app-header-actions { order: 2; margin-left: 0; width: 100%; justify-content: flex-end; }
	.app-content { padding: 0 var(--sp-2) var(--sp-6); }
}

@media (max-width: 600px) {
	#content > div.panel-2 > div { flex-basis: 100%; }
	#content > .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
	#content > .dash-charts { grid-template-columns: 1fr; }
	#content > .dash-tables { grid-template-columns: 1fr; }
}