/* Blueprint-driven global template layer for the SMS workspace. */
:root {
  color-scheme: light;
  --font-root: 15px;
  --type-kicker: 0.7rem;
  --type-caption: 0.76rem;
  --type-label: 0.84rem;
  --type-body: 0.94rem;
  --type-body-strong: 0.98rem;
  --type-title-sm: 1.08rem;
  --type-title-md: clamp(1.22rem, 1.12rem + 0.25vw, 1.38rem);
  --type-title-lg: clamp(1.35rem, 1.18rem + 0.52vw, 1.72rem);
  --leading-tight: 1.2;
  --leading-body: 1.55;
  --app-bg: #efe4e6;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(181, 76, 90, 0.14), transparent 26%),
    radial-gradient(circle at right 12%, rgba(138, 68, 81, 0.12), transparent 28%),
    linear-gradient(180deg, #f8eef0 0%, #ecdfe2 100%);
  --shell-surface: rgba(248, 239, 241, 0.84);
  --sidebar-surface: rgba(243, 232, 235, 0.92);
  --panel-bg: rgba(252, 246, 247, 0.9);
  --panel-soft: rgba(255, 249, 250, 0.74);
  --panel-border: rgba(132, 88, 95, 0.14);
  --text-primary: #3a2328;
  --text-muted: #7b5b61;
  --text-soft: #9b7d83;
  --field-bg: rgba(255, 250, 251, 0.96);
  --field-border: rgba(168, 122, 130, 0.18);
  --field-focus: rgba(181, 76, 90, 0.16);
  --accent: #b54c5a;
  --accent-strong: #963947;
  --accent-contrast: #fff7f8;
  --shadow-color: rgba(72, 37, 44, 0.09);
  --sms-primary: var(--accent);
  --sms-primary-rgb: 181, 76, 90;
  --sms-accent: var(--accent);
  --sms-warning: #b45309;
  --sms-danger: #dc2626;
  --sms-page-bg: var(--app-bg);
  --sms-surface: var(--panel-bg);
  --sms-surface-soft: var(--panel-soft);
  --sms-border: var(--panel-border);
  --sms-border-strong: color-mix(in srgb, var(--panel-border) 72%, var(--text-muted));
  --sms-text: var(--text-primary);
  --sms-muted: var(--text-muted);
  --sms-shadow: 0 18px 42px -24px var(--shadow-color);
  --sms-shadow-soft: 0 10px 26px -20px var(--shadow-color);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--sms-primary-rgb);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #1d4ed8;
}

/* ── Global pointer cursor for all interactive elements ── */
button:not(:disabled) {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

html[data-theme-preset="eelo"] {
  --app-bg: #e6e9f4;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(31, 42, 122, 0.16), transparent 28%),
    radial-gradient(circle at right 10%, rgba(217, 149, 40, 0.16), transparent 26%),
    linear-gradient(180deg, #f3f4fa 0%, #e1e5f1 100%);
  --shell-surface: rgba(243, 244, 250, 0.86);
  --sidebar-surface: rgba(237, 240, 249, 0.92);
  --panel-bg: rgba(248, 249, 253, 0.92);
  --panel-soft: rgba(253, 253, 255, 0.72);
  --panel-border: rgba(31, 42, 122, 0.14);
  --text-primary: #1f2a7a;
  --text-muted: #4d589c;
  --text-soft: #7782b1;
  --field-bg: rgba(252, 253, 255, 0.96);
  --field-border: rgba(31, 42, 122, 0.18);
  --field-focus: rgba(217, 149, 40, 0.2);
  --accent: #d99528;
  --accent-strong: #b87916;
  --accent-contrast: #f8fbff;
  --shadow-color: rgba(19, 26, 76, 0.1);
  --sms-primary-rgb: 217, 149, 40;
}

html[data-theme-preset="midnight"] {
  --app-bg: #101724;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(74, 182, 255, 0.18), transparent 28%),
    radial-gradient(circle at right 15%, rgba(45, 89, 132, 0.18), transparent 25%),
    linear-gradient(180deg, #111a29 0%, #0d1420 100%);
  --shell-surface: rgba(20, 30, 46, 0.84);
  --sidebar-surface: rgba(17, 27, 43, 0.94);
  --panel-bg: rgba(18, 28, 43, 0.92);
  --panel-soft: rgba(25, 37, 58, 0.74);
  --panel-border: rgba(129, 160, 195, 0.12);
  --text-primary: #dfebf6;
  --text-muted: #91a8be;
  --text-soft: #6f8599;
  --field-bg: rgba(12, 20, 31, 0.9);
  --field-border: rgba(103, 129, 157, 0.22);
  --field-focus: rgba(74, 182, 255, 0.2);
  --accent: #4ab6ff;
  --accent-strong: #2b9ff0;
  --accent-contrast: #06131f;
  --shadow-color: rgba(2, 8, 18, 0.34);
  --sms-primary-rgb: 74, 182, 255;
}

html[data-theme-preset="lagoon"] {
  --app-bg: #dde7ea;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(61, 143, 141, 0.18), transparent 26%),
    radial-gradient(circle at right 15%, rgba(84, 117, 122, 0.14), transparent 24%),
    linear-gradient(180deg, #eef4f5 0%, #dce7e9 100%);
  --shell-surface: rgba(242, 247, 247, 0.84);
  --sidebar-surface: rgba(235, 242, 243, 0.92);
  --panel-bg: rgba(247, 251, 251, 0.9);
  --panel-soft: rgba(255, 255, 255, 0.68);
  --panel-border: rgba(49, 92, 97, 0.14);
  --text-primary: #24343a;
  --text-muted: #63777d;
  --text-soft: #7e9297;
  --field-bg: rgba(255, 255, 255, 0.94);
  --field-border: rgba(86, 120, 126, 0.18);
  --field-focus: rgba(61, 143, 141, 0.18);
  --accent: #3d8f8d;
  --accent-strong: #347b79;
  --accent-contrast: #f3ffff;
  --shadow-color: rgba(39, 67, 72, 0.08);
  --sms-primary-rgb: 61, 143, 141;
}

html[data-theme-preset="sakura"] {
  --app-bg: #dfe7ee;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(194, 165, 109, 0.16), transparent 28%),
    radial-gradient(circle at right 12%, rgba(84, 122, 149, 0.16), transparent 28%),
    linear-gradient(180deg, #eef2f6 0%, #dde6ee 100%);
  --shell-surface: rgba(238, 243, 247, 0.84);
  --sidebar-surface: rgba(230, 236, 242, 0.92);
  --panel-bg: rgba(244, 247, 250, 0.9);
  --panel-soft: rgba(249, 251, 253, 0.72);
  --panel-border: rgba(44, 57, 71, 0.14);
  --text-primary: #2c3947;
  --text-muted: #62707e;
  --text-soft: #86929d;
  --field-bg: rgba(248, 250, 252, 0.96);
  --field-border: rgba(84, 122, 149, 0.18);
  --field-focus: rgba(84, 122, 149, 0.18);
  --accent: #547a95;
  --accent-strong: #3f6179;
  --accent-contrast: #f8fafc;
  --shadow-color: rgba(44, 57, 71, 0.08);
  --sms-primary-rgb: 84, 122, 149;
}

html[data-theme-preset="citrus"] {
  --app-bg: #e6ebd0;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(170, 181, 62, 0.17), transparent 28%),
    radial-gradient(circle at right 10%, rgba(113, 132, 61, 0.14), transparent 26%),
    linear-gradient(180deg, #f3f6e8 0%, #e3e8cf 100%);
  --shell-surface: rgba(244, 247, 234, 0.84);
  --sidebar-surface: rgba(239, 243, 226, 0.92);
  --panel-bg: rgba(249, 251, 242, 0.9);
  --panel-soft: rgba(253, 255, 248, 0.7);
  --panel-border: rgba(108, 120, 58, 0.14);
  --text-primary: #313724;
  --text-muted: #6f7658;
  --text-soft: #8b9271;
  --field-bg: rgba(253, 255, 249, 0.96);
  --field-border: rgba(123, 136, 68, 0.18);
  --field-focus: rgba(170, 181, 62, 0.18);
  --accent: #aab53e;
  --accent-strong: #8c9630;
  --accent-contrast: #fbfde8;
  --shadow-color: rgba(70, 76, 38, 0.08);
  --sms-primary-rgb: 170, 181, 62;
}

html[data-theme-preset="ember"] {
  --app-bg: #e7e1e2;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(154, 111, 121, 0.16), transparent 28%),
    radial-gradient(circle at right 12%, rgba(121, 102, 113, 0.14), transparent 28%),
    linear-gradient(180deg, #f3efef 0%, #e3dbdd 100%);
  --shell-surface: rgba(245, 241, 241, 0.84);
  --sidebar-surface: rgba(239, 233, 234, 0.92);
  --panel-bg: rgba(250, 247, 247, 0.9);
  --panel-soft: rgba(253, 250, 250, 0.7);
  --panel-border: rgba(111, 93, 101, 0.14);
  --text-primary: #342d31;
  --text-muted: #71666b;
  --text-soft: #8d8187;
  --field-bg: rgba(253, 251, 251, 0.95);
  --field-border: rgba(127, 107, 115, 0.17);
  --field-focus: rgba(154, 111, 121, 0.18);
  --accent: #9a6f79;
  --accent-strong: #825b65;
  --accent-contrast: #fff8f9;
  --shadow-color: rgba(68, 58, 63, 0.08);
  --sms-primary-rgb: 154, 111, 121;
}

html.dark {
  color-scheme: dark;
}

html.dark[data-theme-preset="cleopatra"] {
  --app-bg: #1a1013;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(181, 76, 90, 0.16), transparent 25%),
    radial-gradient(circle at right 15%, rgba(120, 58, 69, 0.2), transparent 26%),
    linear-gradient(180deg, #1d1215 0%, #130b0d 100%);
  --shell-surface: rgba(31, 18, 22, 0.84);
  --sidebar-surface: rgba(26, 15, 19, 0.94);
  --panel-bg: rgba(34, 20, 24, 0.92);
  --panel-soft: rgba(43, 26, 31, 0.74);
  --panel-border: rgba(178, 120, 129, 0.14);
  --text-primary: #f4e6e8;
  --text-muted: #c7a9af;
  --text-soft: #9a7a81;
  --field-bg: rgba(22, 13, 16, 0.9);
  --field-border: rgba(151, 92, 102, 0.22);
  --field-focus: rgba(181, 76, 90, 0.2);
  --accent: #d45d6c;
  --accent-strong: #b74756;
  --accent-contrast: #180b0e;
  --shadow-color: rgba(0, 0, 0, 0.34);
  --sms-primary-rgb: 212, 93, 108;
}

html.dark[data-theme-preset="eelo"] {
  --app-bg: #0c1130;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(240, 169, 58, 0.16), transparent 25%),
    radial-gradient(circle at right 15%, rgba(31, 42, 122, 0.32), transparent 26%),
    linear-gradient(180deg, #0f1539 0%, #090d24 100%);
  --shell-surface: rgba(13, 19, 50, 0.84);
  --sidebar-surface: rgba(10, 15, 42, 0.94);
  --panel-bg: rgba(15, 22, 57, 0.92);
  --panel-soft: rgba(23, 31, 74, 0.74);
  --panel-border: rgba(147, 158, 232, 0.14);
  --text-primary: #edf1ff;
  --text-muted: #b4bee9;
  --text-soft: #818cbd;
  --field-bg: rgba(8, 13, 34, 0.9);
  --field-border: rgba(103, 116, 185, 0.22);
  --field-focus: rgba(240, 169, 58, 0.2);
  --accent: #f0a93a;
  --accent-strong: #cf8516;
  --accent-contrast: #100b03;
  --shadow-color: rgba(0, 0, 0, 0.36);
  --sms-primary-rgb: 240, 169, 58;
}

html.dark[data-theme-preset="midnight"] {
  --app-bg: #081018;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(74, 182, 255, 0.16), transparent 28%),
    radial-gradient(circle at right 10%, rgba(57, 85, 129, 0.18), transparent 25%),
    linear-gradient(180deg, #0a111a 0%, #060c13 100%);
  --shell-surface: rgba(10, 19, 30, 0.84);
  --sidebar-surface: rgba(8, 16, 26, 0.94);
  --panel-bg: rgba(12, 21, 33, 0.92);
  --panel-soft: rgba(18, 30, 44, 0.74);
  --panel-border: rgba(100, 135, 168, 0.14);
  --text-primary: #e3edf8;
  --text-muted: #97adc2;
  --text-soft: #70859a;
  --field-bg: rgba(7, 13, 20, 0.9);
  --field-border: rgba(84, 110, 139, 0.22);
  --field-focus: rgba(74, 182, 255, 0.2);
  --accent: #60c0ff;
  --accent-strong: #319fe6;
  --accent-contrast: #05111a;
  --shadow-color: rgba(0, 0, 0, 0.34);
  --sms-primary-rgb: 96, 192, 255;
}

html.dark[data-theme-preset="lagoon"] {
  --app-bg: #0f1b1e;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(61, 143, 141, 0.16), transparent 25%),
    radial-gradient(circle at right 10%, rgba(49, 92, 97, 0.2), transparent 25%),
    linear-gradient(180deg, #0d191d 0%, #0a1417 100%);
  --shell-surface: rgba(14, 26, 30, 0.84);
  --sidebar-surface: rgba(12, 22, 26, 0.94);
  --panel-bg: rgba(16, 28, 33, 0.92);
  --panel-soft: rgba(22, 36, 41, 0.74);
  --panel-border: rgba(116, 154, 160, 0.12);
  --text-primary: #e3f0ef;
  --text-muted: #a6bfbe;
  --text-soft: #79908f;
  --field-bg: rgba(9, 17, 20, 0.9);
  --field-border: rgba(86, 120, 126, 0.22);
  --field-focus: rgba(61, 143, 141, 0.2);
  --accent: #58b2af;
  --accent-strong: #409895;
  --accent-contrast: #071617;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sms-primary-rgb: 88, 178, 175;
}

html.dark[data-theme-preset="sakura"] {
  --app-bg: #121922;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(194, 165, 109, 0.15), transparent 26%),
    radial-gradient(circle at right 12%, rgba(84, 122, 149, 0.2), transparent 25%),
    linear-gradient(180deg, #141b25 0%, #0f151d 100%);
  --shell-surface: rgba(21, 29, 39, 0.84);
  --sidebar-surface: rgba(17, 24, 33, 0.94);
  --panel-bg: rgba(23, 31, 42, 0.92);
  --panel-soft: rgba(31, 40, 52, 0.74);
  --panel-border: rgba(148, 165, 178, 0.12);
  --text-primary: #e8edf2;
  --text-muted: #b2beca;
  --text-soft: #8394a3;
  --field-bg: rgba(14, 20, 28, 0.9);
  --field-border: rgba(84, 122, 149, 0.22);
  --field-focus: rgba(84, 122, 149, 0.2);
  --accent: #c2a56d;
  --accent-strong: #a98b55;
  --accent-contrast: #131920;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sms-primary-rgb: 194, 165, 109;
}

html.dark[data-theme-preset="citrus"] {
  --app-bg: #15190d;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(170, 181, 62, 0.16), transparent 26%),
    radial-gradient(circle at right 12%, rgba(99, 113, 47, 0.2), transparent 25%),
    linear-gradient(180deg, #14180d 0%, #0f1308 100%);
  --shell-surface: rgba(21, 26, 14, 0.84);
  --sidebar-surface: rgba(18, 22, 12, 0.94);
  --panel-bg: rgba(25, 31, 17, 0.92);
  --panel-soft: rgba(34, 41, 24, 0.74);
  --panel-border: rgba(146, 160, 77, 0.12);
  --text-primary: #ebf0d8;
  --text-muted: #b8c095;
  --text-soft: #8a936f;
  --field-bg: rgba(15, 19, 10, 0.9);
  --field-border: rgba(115, 127, 56, 0.22);
  --field-focus: rgba(170, 181, 62, 0.2);
  --accent: #c9d95a;
  --accent-strong: #acbc3d;
  --accent-contrast: #121608;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sms-primary-rgb: 201, 217, 90;
}

html.dark[data-theme-preset="ember"] {
  --app-bg: #171316;
  --app-bg-gradient:
    radial-gradient(circle at top left, rgba(154, 111, 121, 0.16), transparent 26%),
    radial-gradient(circle at right 15%, rgba(101, 82, 91, 0.2), transparent 25%),
    linear-gradient(180deg, #181417 0%, #110d10 100%);
  --shell-surface: rgba(24, 20, 23, 0.84);
  --sidebar-surface: rgba(21, 17, 20, 0.94);
  --panel-bg: rgba(28, 23, 26, 0.92);
  --panel-soft: rgba(36, 30, 34, 0.74);
  --panel-border: rgba(161, 131, 142, 0.12);
  --text-primary: #f0e6e8;
  --text-muted: #beaeb4;
  --text-soft: #8c7d84;
  --field-bg: rgba(17, 13, 16, 0.9);
  --field-border: rgba(117, 95, 104, 0.22);
  --field-focus: rgba(154, 111, 121, 0.2);
  --accent: #c6909d;
  --accent-strong: #aa7481;
  --accent-contrast: #160f12;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sms-primary-rgb: 198, 144, 157;
}

html {
  font-size: var(--font-root);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--app-bg);
  background-image: var(--app-bg-gradient);
  color: var(--sms-text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-family: Inter, "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[x-cloak] {
  display: none !important;
}

body,
button,
input,
select,
textarea,
label,
p,
a,
li,
td,
th,
.form-control,
.form-select,
.dropdown-item,
.btn {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title-box h4,
.card-title,
.font-family-secondary {
  color: var(--sms-text);
  font-weight: 700 !important;
  letter-spacing: 0;
}

#page-topbar {
  background: color-mix(in srgb, var(--sidebar-surface) 82%, transparent) !important;
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 18px 42px -30px var(--shadow-color);
  backdrop-filter: blur(14px);
}

.navbar-header {
  height: 68px;
  padding-right: 12px;
}

.navbar-brand-box {
  padding-inline: 1.25rem;
}

.logo {
  line-height: 68px;
}

.header-item {
  height: 68px;
}

.app-search .form-control {
  min-width: 280px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent) !important;
  color: var(--text-primary);
}

.app-search .form-control::placeholder,
.app-search span {
  color: var(--text-muted) !important;
}

.topnav {
  background: color-mix(in srgb, var(--shell-surface) 88%, transparent);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 18px 42px -30px var(--shadow-color);
  backdrop-filter: blur(12px);
}

.topnav .navbar-nav .nav-link {
  border-radius: 8px;
  color: #334155;
  margin: 8px 2px;
  padding: 0.64rem 0.9rem;
}

.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link.active,
.topnav .navbar-nav .show > .nav-link {
  background: rgba(var(--sms-primary-rgb), 0.10);
  color: var(--sms-primary);
}

.topnav .dropdown-menu {
  border: 1px solid var(--sms-border);
  border-radius: 8px;
  box-shadow: var(--sms-shadow);
  padding: 0.45rem;
}

.topnav .dropdown-item {
  border-radius: 6px;
  color: #334155;
  padding: 0.54rem 0.75rem;
}

.topnav .dropdown-item:hover,
.topnav .dropdown-item:focus {
  background: var(--sms-surface-soft);
  color: var(--sms-primary);
}

body[data-layout=horizontal] .page-content {
  padding-top: calc(52px + 24px);
}

.page-title-box {
  align-items: center;
  background: transparent;
  padding-bottom: 18px;
}

.page-title-box h4 {
  font-size: 1rem;
  text-transform: none;
}

.card,
.modal-content,
.dropdown-menu,
.swal2-popup {
  border: 1px solid var(--sms-border);
  border-radius: 8px;
}

.card {
  background: var(--sms-surface);
  box-shadow: var(--sms-shadow-soft);
}

.card-header {
  background: linear-gradient(180deg, #ffffff 0%, var(--sms-surface-soft) 100%);
  border-bottom-color: var(--sms-border);
}

.card-body {
  color: var(--sms-text);
}

.table {
  color: var(--sms-text);
}

.table thead th,
table.dataTable thead th {
  background: #eef4fb;
  border-bottom-color: var(--sms-border-strong) !important;
  color: #334155;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.table td,
.table th {
  border-color: var(--sms-border);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: rgba(var(--sms-primary-rgb), 0.035);
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-color: var(--sms-border-strong);
  border-radius: 7px;
  color: var(--sms-text);
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: rgba(var(--sms-primary-rgb), 0.65);
  box-shadow: 0 0 0 0.2rem rgba(var(--sms-primary-rgb), 0.12);
}

.btn {
  border-radius: 7px;
  cursor: pointer;
  letter-spacing: 0;
}

.btn-primary,
.btn-success {
  box-shadow: 0 8px 18px rgba(var(--sms-primary-rgb), 0.18);
}

.btn-primary {
  background-color: var(--sms-primary);
  border-color: var(--sms-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-soft-primary,
.badge.bg-primary,
.avatar-title.bg-primary {
  background-color: rgba(var(--sms-primary-rgb), 0.12) !important;
  color: var(--sms-primary) !important;
}

.badge {
  border-radius: 999px;
  letter-spacing: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--sms-border-strong);
  border-radius: 7px;
}

.dataTables_wrapper {
  color: var(--text-primary);
}

.dataTables_wrapper .row {
  align-items: center;
  gap: 0.45rem 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-muted) !important;
  font-size: var(--type-caption);
  font-weight: 800;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input {
  background: var(--field-bg);
  margin-left: 0 !important;
  min-height: 2.35rem;
  min-width: min(18rem, 100%);
  padding: 0.45rem 0.75rem;
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--field-bg);
  color: var(--text-primary);
  min-height: 2.35rem;
  padding: 0.35rem 1.8rem 0.35rem 0.65rem;
}

.dataTables_processing {
  background: color-mix(in srgb, var(--panel-bg) 96%, transparent) !important;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: var(--sms-shadow);
  color: var(--text-primary) !important;
  font-weight: 900;
  padding: 1rem !important;
}

.pagination .page-link {
  border-color: var(--sms-border);
  color: var(--sms-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--sms-primary);
  border-color: var(--sms-primary);
}

.dataTables_wrapper .pagination {
  gap: 0.35rem;
}

.dataTables_wrapper .page-link {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px !important;
  color: var(--text-muted);
  font-weight: 800;
  min-width: 2.15rem;
  text-align: center;
}

.dataTables_wrapper .page-item.active .page-link {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: var(--accent-contrast);
}

.dataTables_wrapper .page-item.disabled .page-link {
  opacity: 0.5;
}

.modal-header {
  background: var(--sms-surface-soft);
  border-bottom-color: var(--sms-border);
}

.modal-footer {
  border-top-color: var(--sms-border);
}

.modal-backdrop.show {
  opacity: 0.42;
}

.modal-content {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  box-shadow: 0 28px 80px -36px var(--shadow-color);
  overflow: hidden;
}

.modal-header {
  align-items: flex-start;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 100%, transparent), color-mix(in srgb, var(--panel-bg) 100%, transparent));
  padding: 1rem 1.15rem;
}

.modal-title {
  color: var(--text-primary);
  font-size: var(--type-title-sm);
  font-weight: 900;
  line-height: 1.3;
}

.modal-body {
  padding: 1.1rem;
}

.modal-footer {
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
}

.modal .row {
  --bs-gutter-x: 0.85rem;
}

.modal .alert-danger,
.form-error-copy {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 14px;
  color: #d54a4a;
  font-weight: 800;
}

.modal .border.rounded,
.profile-field-block {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent) !important;
  border-color: var(--panel-border) !important;
  border-radius: 16px !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--field-bg);
  border-color: var(--field-border);
  min-height: 2.45rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
  line-height: 2.4rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.4rem;
}

.select2-dropdown {
  background: var(--panel-bg);
  border-color: var(--panel-border);
  border-radius: 12px;
  box-shadow: var(--sms-shadow);
  overflow: hidden;
  z-index: 2600 !important;
}

.select2-results__option {
  color: var(--text-primary);
  font-weight: 700;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent);
  color: var(--accent-contrast);
}

.theme-swal-popup {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 80px -36px var(--shadow-color) !important;
  color: var(--text-primary) !important;
}

.theme-swal-title {
  color: var(--text-primary) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}

.theme-swal-body {
  color: var(--text-muted) !important;
  font-size: var(--type-body) !important;
}

.auth-body-bg .card {
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.auth-body-bg .card-body {
  padding: 1.75rem;
}

.auth-body-bg .form-control,
.auth-body-bg .input-group-text {
  background: #f8fafc;
}

.auth-body-bg .input-group-text {
  border-color: var(--sms-border-strong);
  color: var(--sms-muted);
}

.auth-body-bg .btn-success {
  background: var(--sms-primary);
  border-color: var(--sms-primary);
}

.auth-body-bg .btn-success:hover,
.auth-body-bg .btn-success:focus {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.auth-shell {
  align-items: center;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
}

.auth-shell::before {
  background: var(--app-bg-gradient);
  content: "";
  inset: 0;
  position: absolute;
}

.auth-card {
  background: color-mix(in srgb, var(--shell-surface) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 34px 80px -42px var(--shadow-color);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  margin: 0 auto;
  max-width: 72rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.auth-visual-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 40rem;
  padding: 2.5rem;
}

.auth-brand-lockup {
  align-items: center;
  color: var(--text-primary);
  display: inline-flex;
  gap: 0.9rem;
  text-decoration: none;
}

.auth-brand-lockup strong,
.auth-mobile-brand strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

.auth-visual-scene {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.auth-visual-window {
  animation: auth-float 8s ease-in-out infinite;
  background: color-mix(in srgb, var(--panel-bg) 86%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 26px;
  box-shadow: 0 28px 70px -38px var(--shadow-color);
  max-width: 27rem;
  padding: 1rem;
  transform-origin: center;
  width: 100%;
}

.auth-visual-toolbar {
  display: flex;
  gap: 0.42rem;
  margin-bottom: 1rem;
}

.auth-visual-toolbar span {
  background: color-mix(in srgb, var(--accent) 28%, var(--panel-soft));
  border-radius: 999px;
  height: 0.68rem;
  width: 0.68rem;
}

.auth-visual-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-visual-stat,
.auth-visual-chart,
.auth-visual-list {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
}

.auth-visual-stat {
  min-height: 5rem;
}

.auth-visual-chart {
  grid-column: span 2;
  min-height: 10rem;
  overflow: hidden;
  position: relative;
}

.auth-visual-chart::before {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: 999px 999px 0 0;
  bottom: -3.5rem;
  content: "";
  height: 9rem;
  left: 12%;
  opacity: 0.72;
  position: absolute;
  right: 12%;
}

.auth-visual-list {
  display: grid;
  gap: 0.65rem;
  grid-column: span 2;
  padding: 1rem;
}

.auth-visual-list span {
  background: color-mix(in srgb, var(--text-soft) 24%, transparent);
  border-radius: 999px;
  display: block;
  height: 0.65rem;
}

.auth-visual-list span:nth-child(2) {
  width: 78%;
}

.auth-visual-list span:nth-child(3) {
  width: 58%;
}

.auth-visual-copy {
  max-width: 34rem;
}

.auth-visual-copy h1 {
  font-size: clamp(1.5rem, 1.24rem + 0.8vw, 2.15rem);
  line-height: 1.12;
  margin: 0.65rem 0 0.7rem;
}

.auth-visual-copy p {
  color: var(--text-muted);
  font-size: var(--type-body-strong);
  margin: 0;
}

.auth-form-panel {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  display: flex;
  min-height: 40rem;
  padding: 2.5rem;
}

.auth-form-inner {
  margin: auto;
  max-width: 27rem;
  width: 100%;
}

.auth-mobile-brand {
  display: none;
  margin-bottom: 1.5rem;
}

.auth-heading {
  margin-bottom: 1.6rem;
}

.auth-heading h2 {
  font-size: clamp(1.35rem, 1.18rem + 0.52vw, 1.72rem);
  line-height: 1.18;
  margin: 0.55rem 0 0;
}

.auth-form-panel .form-horizontal {
  margin-top: 0 !important;
}

.auth-form-panel .form-group.row {
  display: block;
}

.auth-form-panel .col-12,
.auth-form-panel .col-sm-5,
.auth-form-panel .col-sm-7 {
  width: 100%;
}

.auth-form-panel .input-group {
  border-radius: 0.8rem;
}

.auth-form-panel .form-control,
.auth-form-panel .input-group-text {
  background: var(--field-bg);
  border-color: var(--field-border);
  color: var(--text-primary);
  min-height: 2.8rem;
}

.auth-form-panel .input-group-text {
  color: var(--text-soft);
}

.auth-form-panel .btn {
  border-radius: 999px;
  min-height: 2.8rem;
}

.auth-form-panel .form-group.mb-0.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: space-between;
}

.auth-form-panel .form-group.mb-0.row > * {
  flex: 1 1 11rem;
  margin-top: 0 !important;
}

@keyframes auth-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -8px, 0) scale(1.015);
  }
}

.text-muted {
  color: var(--sms-muted) !important;
}

.panel {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 18px 42px -24px var(--shadow-color);
  backdrop-filter: blur(12px);
}

.surface-soft {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
}

.section-kicker {
  color: var(--accent);
  font-size: var(--type-kicker);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.type-page-title {
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.type-section-title {
  font-size: var(--type-title-md);
  font-weight: 900;
  line-height: 1.28;
}

.type-card-title {
  font-size: var(--type-title-sm);
  font-weight: 700;
  line-height: 1.34;
}

.icon-button {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.icon-button:hover,
.icon-button:focus {
  background: rgba(var(--sms-primary-rgb), 0.12);
  color: var(--accent);
}

.btn-template {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 900;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.2;
  min-height: 2.45rem;
  padding: 0.62rem 1rem;
  transition: 150ms ease;
}

.btn-template:disabled {
  opacity: 0.55;
}

.btn-template-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--accent-contrast);
  box-shadow: 0 14px 24px -18px var(--shadow-color);
}

.btn-template-secondary {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border-color: var(--panel-border);
  color: var(--text-primary);
}

.btn-template-danger {
  background: linear-gradient(135deg, #dc2626, #a61b1b);
  color: #fff8f8;
}

.btn-template:hover,
.btn-template:focus {
  transform: translateY(-1px);
}

.template-input {
  background: var(--field-bg);
  border-color: var(--field-border);
  border-radius: 12px;
  color: var(--text-primary);
  min-height: 2.55rem;
}

.template-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--field-focus);
}

.template-label {
  color: var(--text-primary);
  display: inline-block;
  font-size: var(--type-label);
  font-weight: 900;
  margin-bottom: 0.35rem;
}

.template-error-list {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 12px;
  color: #d54a4a;
  display: grid;
  font-size: var(--type-caption);
  font-weight: 800;
  gap: 0.25rem;
  list-style-position: inside;
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
}

.template-status-message {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--panel-border));
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 900;
  padding: 0.45rem 0.75rem;
}

.template-dropdown {
  border-radius: 18px;
  box-shadow: 0 22px 60px -28px var(--shadow-color);
}

.template-dropdown-panel {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  overflow: hidden;
  padding: 0.35rem;
}

.template-dropdown-link {
  border-radius: 12px;
  color: var(--text-muted);
  display: block;
  font-size: var(--type-label);
  font-weight: 800;
  line-height: 1.3;
  padding: 0.62rem 0.75rem;
  text-align: start;
  text-decoration: none;
  transition: 150ms ease;
  width: 100%;
}

.template-dropdown-link:hover,
.template-dropdown-link:focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  color: var(--text-primary);
}

.template-nav-link,
.template-responsive-nav-link {
  color: var(--text-muted);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  transition: 150ms ease;
}

.template-nav-link {
  align-items: center;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  min-height: 3rem;
  padding: 0.2rem 0.25rem 0;
}

.template-nav-link:hover,
.template-nav-link:focus,
.template-nav-link.is-active {
  border-bottom-color: var(--accent);
  color: var(--text-primary);
}

.template-responsive-nav-link {
  border-left: 4px solid transparent;
  display: block;
  padding: 0.65rem 1rem;
  text-align: start;
  width: 100%;
}

.template-responsive-nav-link:hover,
.template-responsive-nav-link:focus,
.template-responsive-nav-link.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  border-left-color: var(--accent);
  color: var(--text-primary);
}

.template-modal-backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
  inset: 0;
  position: absolute;
}

.template-modal-card {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 28px 80px -36px var(--shadow-color);
  overflow: hidden;
}

.app-shell-body {
  min-height: 100vh;
  overflow-x: hidden;
}

.app-shell {
  display: grid;
  gap: 1rem;
  grid-template-columns: 18rem minmax(0, 1fr);
  min-height: 100vh;
  padding: 1rem;
}

.app-sidebar {
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2rem);
  overflow: hidden;
  position: sticky;
  top: 1rem;
  z-index: 1040;
}

.app-sidebar-brand {
  align-items: center;
  border-bottom: 1px solid var(--panel-border);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem;
}

.app-brand-mark {
  align-items: center;
  background: var(--accent-contrast);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  display: inline-flex;
  height: 2.8rem;
  justify-content: center;
  width: 2.8rem;
}

.app-brand-mark img {
  max-height: 1.9rem;
  max-width: 1.9rem;
}

.app-brand-name {
  color: var(--text-primary);
  display: block;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-close {
  display: none;
}

.app-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem;
}

.sidebar-group {
  padding: 0.55rem 0;
}

.sidebar-group + .sidebar-group {
  border-top: 1px solid var(--panel-border);
}

.sidebar-group-kicker {
  color: var(--text-soft);
  font-size: var(--type-kicker);
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 0.45rem 0.65rem;
  text-transform: uppercase;
}

.sidebar-link {
  align-items: center;
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  gap: 0.7rem;
  line-height: 1.2;
  margin: 0.12rem 0;
  min-height: 2.55rem;
  padding: 0.65rem 0.7rem;
  text-decoration: none;
}

.sidebar-link i {
  color: var(--text-soft);
  font-size: 1.1rem;
  width: 1.25rem;
}

.sidebar-link:hover,
.sidebar-link-active {
  background: rgba(var(--sms-primary-rgb), 0.12);
  color: var(--text-primary);
}

.sidebar-link:hover i,
.sidebar-link-active i {
  color: var(--accent);
}

.app-main {
  min-width: 0;
}

.app-topbar {
  position: relative;
  z-index: 1030;
}

.app-topbar-row {
  align-items: center;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: auto minmax(10rem, 1fr) minmax(16rem, 26rem) auto;
  min-height: 4.8rem;
  padding: 0.8rem 1rem;
}

.app-topbar-meta {
  align-items: center;
  border-top: 1px solid var(--panel-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 2.9rem;
  padding: 0.55rem 1rem 0.75rem;
}

.page-breadcrumbs {
  align-items: center;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-caption);
  font-weight: 800;
  gap: 0.42rem;
  letter-spacing: 0.02em;
}

.page-breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
}

.page-breadcrumbs span:last-child {
  color: var(--text-muted);
}

.header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.app-mobile-menu {
  display: none;
}

.app-topbar-title {
  min-width: 0;
}

.app-topbar-title .type-page-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-shell {
  align-items: center;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 2.45rem;
  padding: 0 0.35rem 0 0.8rem;
}

.header-search-shell i {
  color: var(--text-soft);
}

.header-search-shell input {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  min-width: 0;
  outline: 0;
}

.header-search-shell input::placeholder {
  color: var(--text-soft);
}

.header-search-shell button {
  align-items: center;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-contrast);
  display: inline-flex;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}

.app-topbar-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.app-notification-dot {
  background: #ef4444;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  height: 0.62rem;
  position: absolute;
  right: 0.35rem;
  top: 0.35rem;
  width: 0.62rem;
}

.app-notification-popover {
  min-width: 18rem;
  padding: 0.75rem;
}

.app-notification-header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.app-notification-header a {
  color: var(--accent);
  font-size: var(--type-caption);
  font-weight: 800;
  text-decoration: none;
}

.app-notification-item {
  align-items: center;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.app-notification-item + .app-notification-item {
  margin-top: 0.55rem;
}

.app-notification-item a {
  color: var(--text-primary);
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  text-decoration: none;
}

.app-notification-item strong,
.app-notification-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-notification-item small {
  color: var(--text-muted);
  font-size: var(--type-caption);
}

.app-user-button {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  gap: 0.55rem;
  min-height: 2.35rem;
  max-width: 13rem;
  padding: 0.28rem 0.55rem 0.28rem 0.3rem;
}

.app-user-button img,
.app-user-button span {
  align-items: center;
  background: rgba(var(--sms-primary-rgb), 0.14);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 1.8rem;
  justify-content: center;
  object-fit: cover;
  width: 1.8rem;
}

.app-user-button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-main-content {
  min-width: 0;
  padding: 1rem 0 0;
}

.app-main-content .main-content {
  margin-left: 0 !important;
  overflow: visible !important;
}

.app-main-content .page-content {
  margin-top: 0 !important;
  padding: 0 !important;
}

.app-main-content .container-fluid {
  max-width: 100%;
  padding: 0;
}

.app-mobile-overlay {
  background: rgba(15, 23, 42, 0.42);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.2s ease;
  z-index: 1035;
}

.loading-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1080;
}

.loading-overlay[hidden] {
  display: none;
}

.loading-card {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
}

.loader-spinner {
  animation: loader-spin 0.8s linear infinite;
  border: 3px solid rgba(var(--sms-primary-rgb), 0.18);
  border-radius: 999px;
  border-top-color: var(--accent);
  height: 1.5rem;
  width: 1.5rem;
}

.loader-spinner.is-inline {
  display: inline-block;
  height: 1rem;
  vertical-align: -0.16em;
  width: 1rem;
}

.toast-stack {
  bottom: 1rem;
  display: grid;
  gap: 0.6rem;
  max-width: min(22rem, calc(100vw - 2rem));
  position: fixed;
  right: 1rem;
  z-index: 1090;
}

.toast-item {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--sms-shadow);
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 0.85rem;
}

.toast-item span {
  color: var(--text-muted);
}

.toast-success {
  border-left-color: #16a34a;
}

.toast-error {
  border-left-color: #dc2626;
}

.toast-info {
  border-left-color: var(--accent);
}

.profile-workspace {
  display: grid;
  gap: 1rem;
}

.profile-showcase {
  overflow: hidden;
}

.profile-showcase-cover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 100%, transparent), color-mix(in srgb, var(--panel-bg) 100%, transparent));
  min-height: 11rem;
  position: relative;
}

.profile-cover-chrome {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  left: 1.25rem;
  position: absolute;
  right: 1.25rem;
  top: 1rem;
}

.profile-cover-brand {
  bottom: 1.1rem;
  display: grid;
  left: 1.25rem;
  position: absolute;
}

.profile-cover-brand strong {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 900;
}

.profile-showcase-body {
  padding: 0 1.25rem 1.25rem;
}

.profile-showcase-main {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(14rem, auto);
  margin-top: -2.8rem;
  position: relative;
}

.profile-avatar-shell {
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 18px 42px -24px var(--shadow-color);
  display: inline-flex;
  height: 6.25rem;
  justify-content: center;
  overflow: hidden;
  width: 6.25rem;
}

.profile-avatar-shell img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.profile-avatar-shell span {
  color: var(--accent);
  font-size: 2.3rem;
  font-weight: 900;
}

.profile-identity {
  min-width: 0;
  padding-top: 3.25rem;
}

.profile-identity h1 {
  font-size: var(--type-title-lg);
  line-height: 1.15;
  margin: 0.35rem 0 0;
}

.profile-showcase-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 3.25rem;
}

.profile-showcase-stat,
.profile-sidebar-card,
.profile-completion-card,
.profile-danger-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 92%, transparent) 0%, color-mix(in srgb, var(--panel-soft) 100%, transparent) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 32px -28px var(--shadow-color);
}

.profile-showcase-stat {
  padding: 1rem;
}

.profile-showcase-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  margin-top: 0.28rem;
}

.profile-showcase-stat-label,
.profile-overview-label {
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-nav-strip {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 98%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 92%, transparent) 100%);
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  position: sticky;
  top: 6rem;
  z-index: 14;
}

.profile-nav-pill {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 800;
  padding: 0.62rem 0.95rem;
  text-decoration: none;
}

.profile-nav-pill.is-active,
.profile-nav-pill:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: var(--accent-contrast);
}

.profile-layout-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(16rem, 0.35fr) minmax(0, 1fr);
}

.profile-sidebar-stack,
.profile-main-stack {
  display: grid;
  gap: 1rem;
}

.profile-sidebar-stack {
  align-self: start;
  position: sticky;
  top: 6rem;
}

.profile-completion-card,
.profile-sidebar-card,
.profile-danger-card {
  padding: 1rem;
}

.profile-sidebar-card {
  align-items: start;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.profile-mini-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel-bg)) 0%, color-mix(in srgb, var(--accent-strong) 12%, var(--panel-soft)) 100%);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--panel-border));
}

.profile-completion-card strong,
.profile-sidebar-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  margin-top: 0.35rem;
}

.profile-completion-track {
  background: color-mix(in srgb, var(--panel-border) 100%, transparent);
  border-radius: 999px;
  height: 0.6rem;
  margin: 0.85rem 0;
  overflow: hidden;
}

.profile-completion-fill {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.profile-feed-card {
  padding: 1.25rem;
  position: relative;
}

.profile-feed-card::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, white 12%) 0%, color-mix(in srgb, var(--accent-strong) 78%, white 22%) 48%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
  border-radius: 999px 999px 0 0;
  content: "";
  height: 0.28rem;
  left: 0;
  opacity: 0.88;
  position: absolute;
  top: 0;
  width: 100%;
}

.profile-anchor-section {
  scroll-margin-top: 7rem;
}

.profile-meta-pill,
.profile-role-chip {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 800;
  padding: 0.46rem 0.75rem;
}

.profile-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.profile-danger-card {
  background: linear-gradient(180deg, rgba(209, 93, 85, 0.08) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
  border-color: rgba(180, 61, 54, 0.14);
}

.settings-studio {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
}

.settings-sub-sidebar {
  align-self: start;
  padding: 1rem;
  position: sticky;
  top: 6rem;
}

.settings-subnav-header {
  border-bottom: 1px solid var(--panel-border);
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1rem;
}

.settings-subnav {
  display: grid;
  gap: 0.45rem;
  padding-top: 1rem;
}

.settings-subnav-link {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text-muted);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 2.8rem;
  padding: 0.55rem 0.65rem;
  text-align: left;
}

.settings-subnav-link:hover,
.settings-subnav-link.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--panel-border));
  color: var(--text-primary);
}

.settings-subnav-index {
  align-items: center;
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}

.settings-subnav-label {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-main-panel {
  min-width: 0;
  padding: 1rem;
}

.settings-main-header {
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.settings-frame-wrap {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  overflow: hidden;
}

.settings-frame-wrap iframe {
  border: 0;
  display: block;
  min-height: 320px;
  width: 100%;
}

.settings-module-page {
  display: grid;
  gap: 1rem;
}

.settings-module-page.is-embedded {
  padding: 0;
}

.settings-module-hero,
.settings-module-card {
  padding: 1rem;
}

.settings-module-header {
  align-items: center;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.settings-module-chip {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--panel-border));
  border-radius: 999px;
  color: var(--text-primary);
  font-size: var(--type-caption);
  font-weight: 900;
  padding: 0.45rem 0.75rem;
}

.settings-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form-wide {
  grid-column: 1 / -1;
}

.settings-upload-block {
  align-content: start;
}

.settings-image-preview {
  align-items: center;
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  display: inline-flex;
  min-height: 4.6rem;
  padding: 0.5rem;
}

.settings-image-preview img {
  max-height: 4.4rem;
  max-width: 10rem;
  object-fit: contain;
}

.settings-image-preview.is-favicon {
  min-height: 3rem;
}

.settings-image-preview.is-favicon img {
  max-height: 2.4rem;
  max-width: 2.4rem;
}

.settings-module-actions {
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
}

.settings-theme-panel {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 1rem;
}

.selection-chip {
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--type-caption);
  font-weight: 800;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  transition: 150ms ease;
}

.selection-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
}

.selection-chip.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
  border-color: var(--accent);
  color: var(--text-primary);
}

.settings-theme-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.theme-card-button.settings-theme-card {
  align-items: stretch;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: space-between;
  min-height: 8.5rem;
  padding: 1rem;
  position: relative;
  text-align: left;
  transition: 160ms ease;
  width: 100%;
}

.theme-card-button.settings-theme-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--panel-border));
  transform: translateY(-2px);
}

.theme-card-button.settings-theme-card.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 18px 34px -26px var(--shadow-color);
}

.settings-theme-card-check {
  color: var(--panel-border);
  font-size: 1rem;
  line-height: 1;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  transition: color 160ms ease, opacity 160ms ease;
}

.settings-theme-card-check .bi {
  display: block;
}

.theme-card-button.settings-theme-card.is-selected .settings-theme-card-check {
  color: var(--accent);
}

.theme-card-button.settings-theme-card strong {
  display: block;
  font-size: var(--type-body-strong);
  font-weight: 850;
  margin-bottom: 0.25rem;
}

.theme-card-button.settings-theme-card small {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-caption);
  line-height: 1.45;
}

.settings-theme-swatches {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-theme-swatches i {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  display: block;
  height: 0.72rem;
}

.settings-theme-meta {
  display: flex;
}

.settings-theme-meta em,
.settings-preset-card-head em,
.settings-keyword-list span {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  padding: 0.36rem 0.52rem;
  text-transform: capitalize;
}

.settings-preset-library {
  display: grid;
  gap: 1rem;
}

.settings-preset-studio {
  display: grid;
  gap: 1rem;
}

.settings-studio-form,
.settings-preview-form {
  display: grid;
  gap: 1rem;
}

.settings-studio-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 0.72fr);
}

.settings-pack-grid,
.settings-preview-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.settings-pack-card,
.settings-preview-card {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.settings-pack-card {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}

.settings-pack-card:hover,
.settings-preview-card:hover {
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface-muted));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  transform: translateY(-1px);
}

.settings-pack-card input,
.settings-preview-card input,
.settings-replace-toggle input {
  accent-color: var(--accent);
}

.settings-pack-card strong,
.settings-preview-card strong {
  display: block;
  font-weight: 900;
}

.settings-pack-card small {
  color: var(--text-muted);
  display: block;
  font-size: 0.74rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}

.settings-module-header.is-subtle {
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
}

.settings-replace-toggle {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 850;
  gap: 0.4rem;
}

.settings-preview-card {
  position: relative;
}

.settings-preview-card > input {
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
}

.settings-preview-card:has(> input:checked) {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted));
  border-color: var(--accent);
}

.settings-empty-state {
  align-items: center;
  background: var(--surface-muted);
  border: 1px dashed var(--border-soft);
  border-radius: 14px;
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
}

.settings-empty-state i {
  align-items: center;
  background: var(--accent-soft);
  border-radius: 12px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

.settings-preset-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.settings-preset-card {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.settings-preset-card-head {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.settings-preset-card-head strong {
  color: var(--text-primary);
  display: block;
  font-weight: 900;
}

.settings-preset-card-head span {
  color: var(--text-muted);
  display: block;
  font-size: 0.76rem;
  margin-top: 0.18rem;
  overflow-wrap: anywhere;
}

.settings-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.settings-preset-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-preset-actions form {
  margin: 0;
}

.settings-preset-actions .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

@media (max-width: 767.98px) {
  .settings-studio-grid {
    grid-template-columns: 1fr;
  }
}

.settings-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.settings-mode-chip {
  align-items: center;
  background: var(--field-bg);
  color: var(--text-primary);
  display: inline-flex;
  gap: 0.45rem;
}

.entity-profile-page {
  display: grid;
  gap: 1rem;
}

.entity-profile-page > .container-fluid {
  display: grid;
  gap: 1rem;
}

.entity-profile-page > .container-fluid > .row {
  margin: 0;
}

.entity-profile-page > .container-fluid > .row > [class*="col-"] {
  padding: 0;
}

.entity-profile-page > .container-fluid > .card:first-of-type {
  overflow: hidden;
  position: relative;
}

.entity-profile-page > .container-fluid > .card:first-of-type::before {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 100%, transparent), transparent);
  content: "";
  height: 8rem;
  inset: 0 0 auto;
  position: absolute;
  pointer-events: none;
}

.entity-profile-page > .container-fluid > .card:first-of-type > .card-body {
  position: relative;
}

.entity-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  border: 4px solid color-mix(in srgb, var(--panel-bg) 100%, transparent);
  box-shadow: 0 18px 42px -24px var(--shadow-color);
}

.entity-profile-page .badge.bg-primary-subtle,
.entity-profile-page .badge.bg-info-subtle,
.entity-profile-page .badge.bg-success-subtle,
.entity-profile-page .badge.bg-warning-subtle,
.entity-profile-page .badge.bg-danger-subtle {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--panel-border));
  color: var(--text-primary) !important;
}

.entity-profile-page .border.rounded.p-3.h-100,
.entity-profile-page .border.rounded.p-3.bg-light-subtle.h-100 {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent) !important;
  border-color: var(--panel-border) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.entity-profile-page .border.rounded.p-3.h-100 .text-muted,
.entity-profile-page .border.rounded.p-3.bg-light-subtle.h-100 .text-muted,
.entity-profile-page .card.h-100 .text-uppercase.small {
  color: var(--text-soft) !important;
  font-size: var(--type-caption);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.entity-profile-page .fw-semibold,
.entity-profile-page .border.rounded.p-3.h-100 strong {
  color: var(--text-primary);
  font-weight: 900 !important;
}

.entity-profile-page .d-grid.gap-2 .btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 2.55rem;
}

.entity-profile-page .btn-success,
.entity-profile-page .btn-info {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--panel-border));
  color: var(--text-primary);
}

.entity-profile-page .row.g-3.mb-4 .card {
  min-height: 9rem;
}

.entity-profile-page .row.g-3.mb-4 .card h3 {
  font-size: var(--type-title-md);
  font-weight: 900 !important;
}

.entity-profile-page .nav-tabs-custom {
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.entity-profile-page .nav-tabs-custom .nav-link {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: 900;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.85rem;
}

.entity-profile-page .nav-tabs-custom .nav-link.active,
.entity-profile-page .nav-tabs-custom .nav-link:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: var(--accent-contrast);
}

.notice-card {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--panel-border));
  border-radius: 18px;
  color: var(--text-primary);
  font-weight: 800;
  padding: 1rem;
}

.app-main-content .page-title-box {
  display: none !important;
}

.app-main-content .row.g-3 > [class*="col-"] > .card.h-100 {
  min-height: 8.4rem;
}

.app-main-content .row.g-3 > [class*="col-"] > .card.h-100 .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.app-main-content .row.g-3 > [class*="col-"] > .card.h-100 .text-muted {
  color: var(--text-soft) !important;
  font-size: var(--type-caption);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-main-content .row.g-3 > [class*="col-"] > .card.h-100 h4,
.app-main-content .row.g-3 > [class*="col-"] > .card.h-100 h6 {
  font-size: var(--type-title-sm);
  font-weight: 900 !important;
}

.app-main-content .apex-charts {
  min-height: 20rem;
}

.app-main-content .card .card-title {
  font-size: var(--type-card-title);
}

.app-main-content .table-responsive {
  border: 1px solid var(--panel-border);
  border-radius: 16px;
}

.app-main-content > .page-content {
  display: grid;
  gap: 1rem;
}

.app-main-content .card {
  border-radius: 20px;
}

.app-main-content .card-header {
  align-items: center;
  background: transparent;
  border-bottom-color: var(--panel-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 1.1rem;
}

.app-main-content .card-header .card-title,
.app-main-content .card-header h5 {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
}

.app-main-content .card-header .card-title::before,
.app-main-content .card-header h5::before {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 0.7rem;
  width: 0.7rem;
}

.app-main-content .card-body {
  padding: 1.1rem;
}

.app-main-content .card-header .btn,
.app-main-content .card-header .form-select,
.app-main-content .card-header .form-control {
  min-height: 2.35rem;
}

.app-main-content .card-header .btn-primary,
.modal-footer .btn-primary {
  align-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 900;
  gap: 0.4rem;
  padding-inline: 0.95rem;
}

.app-main-content .btn-sm.btn-primary,
.app-main-content .btn-sm.btn-danger,
.app-main-content .btn-sm.btn-warning,
.app-main-content .btn-sm.btn-info,
.app-main-content .btn-sm.btn-secondary,
.app-main-content .btn-sm.btn-success {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  min-width: 2rem;
  padding: 0 0.55rem;
}

.app-main-content td .btn-sm + .btn-sm {
  margin-left: 0.25rem;
}

.app-main-content .btn-danger,
.modal-footer .btn-danger {
  background: linear-gradient(135deg, #dc2626, #a61b1b);
  border-color: transparent;
}

.app-main-content .btn-light,
.modal-footer .btn-light,
.modal-footer .btn-secondary {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border-color: var(--panel-border);
  color: var(--text-primary);
}

.app-main-content table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
  margin-top: 0 !important;
}

.app-main-content table.dataTable.no-footer {
  border-bottom: 0;
}

.app-main-content table.dataTable tbody td {
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-weight: 700;
  padding: 0.78rem 0.85rem;
}

.app-main-content table.dataTable tbody tr:last-child td {
  border-bottom: 0;
}

.app-main-content table.dataTable tbody tr:hover td {
  background: rgba(var(--sms-primary-rgb), 0.045);
}

.report-workbench {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
}

.report-catalog,
.report-main,
.report-filters,
.report-data {
  min-width: 0;
}

.report-catalog {
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8rem);
  overflow: hidden;
  padding: 1rem;
  position: sticky;
  top: 6rem;
}

.report-main {
  display: grid;
  gap: 1rem;
}

.report-hero,
.report-filters,
.report-data {
  padding: 1rem;
}

.report-hero,
.report-panel-header-inline {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.report-hero-actions,
.report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.report-panel-header {
  border-bottom: 1px solid var(--panel-border);
  display: grid;
  gap: 0.3rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.report-panel-header-inline {
  display: flex;
}

.report-catalog-scroll {
  overflow-y: auto;
  padding-right: 0.25rem;
}

.report-category + .report-category {
  border-top: 1px solid var(--panel-border);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.report-category-title {
  color: var(--text-soft);
  font-size: var(--type-kicker);
  font-weight: 900;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.report-link-list {
  display: grid;
  gap: 0.35rem;
}

.report-name-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  display: flex;
  font-weight: 800;
  gap: 0.6rem;
  justify-content: space-between;
  min-height: 2.45rem;
  padding: 0.55rem 0.65rem;
  text-align: left;
}

.report-name-btn:hover,
.report-name-btn.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--panel-border));
  color: var(--text-primary);
}

.report-status-pill {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 900;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
}

.report-data .table-responsive,
.invoice-panel .table-responsive {
  background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
}

.invoice-title {
  align-items: center;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem !important;
  padding-bottom: 1rem;
}

.invoice-title h4 {
  float: none !important;
  font-size: var(--type-title-sm);
}

.invoice-title + hr {
  display: none;
}

address {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 1rem;
}

address strong {
  color: var(--text-primary);
}

.app-main-content .bg-light,
.app-main-content .bg-light-subtle {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent) !important;
  border: 1px solid var(--panel-border);
}

iframe[id$="-print-preview-frame"] {
  background: #f8fafc;
}

.modal iframe[id$="-print-preview-frame"] {
  border-radius: 0 0 18px 18px;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 991.98px) {
  .auth-shell {
    padding: 1rem;
  }

  .auth-card {
    grid-template-columns: 1fr;
  }

  .auth-visual-panel {
    display: none;
  }

  .auth-form-panel {
    min-height: auto;
    padding: 2rem 1.5rem;
  }

  .auth-mobile-brand {
    display: block;
  }

  .app-shell {
    display: block;
    padding: 0.75rem;
  }

  .app-sidebar {
    height: calc(100vh - 1.5rem);
    left: 0.75rem;
    max-width: calc(100vw - 1.5rem);
    position: fixed;
    top: 0.75rem;
    transform: translateX(calc(-100% - 1rem));
    transition: transform 0.2s ease;
    width: 18rem;
  }

  body.app-sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  body.app-sidebar-open .app-mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .app-sidebar-close,
  .app-mobile-menu {
    display: inline-flex;
  }

  .app-topbar {
    top: 0.75rem;
  }

  .app-topbar-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: auto;
  }

  .app-topbar-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .header-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .header-search-shell {
    grid-column: 1 / -1;
    order: 4;
  }

  .app-topbar-actions .icon-button[data-persist-fullscreen],
  .app-topbar-actions .dropdown:first-of-type {
    display: none;
  }

  .profile-showcase-main,
  .profile-layout-grid {
    grid-template-columns: 1fr;
  }

  .profile-showcase-stats,
  .profile-identity {
    padding-top: 0;
  }

  .profile-showcase-main {
    align-items: start;
  }

  .profile-sidebar-stack {
    position: static;
  }

  .settings-studio {
    grid-template-columns: 1fr;
  }

  .settings-sub-sidebar {
    position: static;
  }

  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .report-workbench {
    grid-template-columns: 1fr;
  }

  .report-catalog {
    max-height: none;
    position: static;
  }

  .report-hero,
  .report-panel-header-inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-hero-actions,
  .report-export-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .navbar-header {
    padding-left: 8px;
  }

  .topnav .navbar-nav .nav-link {
    margin: 3px 0;
  }

  body[data-layout=horizontal] .page-content {
    margin-top: 12px;
    padding-inline: 10px;
  }
}

@media (max-width: 575.98px) {
  .auth-shell {
    padding: 0.75rem;
  }

  .auth-card {
    border-radius: 20px;
  }

  .auth-form-panel {
    padding: 1.4rem 1rem;
  }

  .app-shell {
    padding: 0.5rem;
  }

  .app-topbar {
    top: 0.5rem;
  }

  .app-topbar-row {
    padding: 0.7rem;
  }

  .app-user-button {
    max-width: 2.45rem;
    padding-right: 0.28rem;
  }

  .app-user-button strong,
  .app-user-button > i {
    display: none;
  }

  .page-title-box {
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  .card-body {
    padding: 1rem;
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 38px;
  }
}

/* Finance and accounting report detail screens */
.template-detail-page,
.template-dashboard-page {
  display: grid;
  gap: 1rem;
}

.template-detail-page .container-fluid,
.template-dashboard-page .container-fluid {
  display: grid;
  gap: 1rem;
}

.template-detail-page .row,
.template-dashboard-page .row {
  row-gap: 1rem;
}

.template-detail-page .page-title-box,
.template-dashboard-page .page-title-box {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 76%, transparent), transparent),
    var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
}

.template-detail-page .page-title-box h4,
.template-dashboard-page .page-title-box h4 {
  color: var(--text-primary);
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  font-weight: 850;
  letter-spacing: 0;
}

.template-detail-page .page-title-box .btn,
.template-dashboard-page .page-title-box .btn,
.template-detail-page .card-header .btn,
.template-dashboard-page .card-header .btn,
.template-detail-page .btn-group .btn,
.template-dashboard-page .btn-group .btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 2.35rem;
  padding-inline: 0.9rem;
}

.template-detail-page .btn-primary,
.template-dashboard-page .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

.template-detail-page .btn-light,
.template-dashboard-page .btn-light,
.template-detail-page .btn-outline-primary,
.template-dashboard-page .btn-outline-primary {
  background: var(--surface-raised);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.template-detail-page .btn-light:hover,
.template-dashboard-page .btn-light:hover,
.template-detail-page .btn-outline-primary:hover,
.template-dashboard-page .btn-outline-primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.template-detail-page .card,
.template-dashboard-page .card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), var(--surface-raised)),
    var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.template-dashboard-page .card {
  min-height: 100%;
}

.template-detail-page .card-header,
.template-dashboard-page .card-header {
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-base));
  border-bottom: 1px solid var(--border-soft);
  min-height: 3.7rem;
  padding: 0.9rem 1rem;
}

.template-detail-page .card-title,
.template-dashboard-page .card-title,
.template-detail-page h5,
.template-dashboard-page h5 {
  color: var(--text-primary);
  font-weight: 850;
  letter-spacing: 0;
}

.template-detail-page .card-body,
.template-dashboard-page .card-body {
  padding: 1rem;
}

.template-dashboard-page .card-body > p.text-muted:first-child,
.template-detail-page .card-body > p.text-muted:first-child {
  color: var(--text-muted) !important;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.template-dashboard-page h4,
.template-detail-page h4 {
  letter-spacing: 0;
}

.template-dashboard-page .apex-charts {
  min-height: 280px;
}

.template-dashboard-page .is-chart-ready .apex-charts,
.template-detail-page .is-chart-ready .apex-charts,
.report-detail-page .is-chart-ready .apex-charts {
  animation: templateChartReveal 220ms ease-out both;
}

@keyframes templateChartReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.template-detail-page .table-responsive,
.template-dashboard-page .table-responsive {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: auto;
}

.template-detail-page .table,
.template-dashboard-page .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-soft);
  color: var(--text-primary);
  margin-bottom: 0;
}

.template-detail-page .table > :not(caption) > * > *,
.template-dashboard-page .table > :not(caption) > * > * {
  border-color: var(--border-soft);
  padding: 0.72rem 0.82rem;
  vertical-align: middle;
}

.template-detail-page .table thead th,
.template-dashboard-page .table thead th {
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface-raised));
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.template-detail-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.template-dashboard-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: color-mix(in srgb, var(--surface-muted) 58%, transparent);
}

.template-detail-page .bg-light,
.template-dashboard-page .bg-light {
  background-color: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-base)) !important;
  color: var(--text-primary);
}

.template-detail-page .border,
.template-dashboard-page .border {
  border-color: var(--border-soft) !important;
}

.template-detail-page .rounded,
.template-detail-page .rounded-2,
.template-dashboard-page .rounded,
.template-dashboard-page .rounded-2 {
  border-radius: 12px !important;
}

.template-detail-page .form-check-input {
  border-color: var(--border-strong);
}

.template-detail-page .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.template-detail-page .form-control,
.template-detail-page .form-select,
.template-dashboard-page .form-control,
.template-dashboard-page .form-select {
  background-color: var(--surface-base);
  border-color: var(--border-soft);
  border-radius: 10px;
  color: var(--text-primary);
}

.template-detail-page .form-control:focus,
.template-detail-page .form-select:focus,
.template-dashboard-page .form-control:focus,
.template-dashboard-page .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
}

.template-detail-page .badge,
.template-dashboard-page .badge {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.42rem 0.62rem;
}

.template-detail-page address,
.template-detail-page strong,
.template-dashboard-page strong {
  color: var(--text-primary);
}

.template-detail-page hr,
.template-dashboard-page hr {
  border-color: var(--border-soft);
  opacity: 1;
}

.dashboard-eyebrow {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-command-center {
  align-items: start;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 58%),
    var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.05fr);
  padding: 1rem;
}

.dashboard-command-copy {
  align-items: flex-start;
  display: flex;
  gap: 0.85rem;
  min-width: 0;
}

.dashboard-command-copy h5 {
  font-size: 1.02rem;
}

.dashboard-command-copy p {
  max-width: 58ch;
}

.dashboard-status-dot {
  background: radial-gradient(circle at 35% 35%, #fff 0 16%, var(--accent) 18% 100%);
  border-radius: 999px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
  flex: 0 0 auto;
  height: 0.85rem;
  margin-top: 0.2rem;
  width: 0.85rem;
}

.dashboard-command-actions,
.dashboard-widget-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.dashboard-widget-controls {
  border-top: 1px solid var(--border-soft);
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-top: 0.85rem;
}

.dashboard-quick-action,
.dashboard-control-button,
.dashboard-widget-toggle {
  align-items: center;
  background: var(--surface-base);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 850;
  gap: 0.45rem;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.dashboard-quick-action:hover,
.dashboard-control-button:hover,
.dashboard-widget-toggle:hover,
.dashboard-widget-toggle.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.dashboard-control-button {
  appearance: none;
  cursor: pointer;
}

.dashboard-control-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--panel-border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
  color: var(--text-primary);
}

.dashboard-widget-toggle {
  cursor: pointer;
}

.dashboard-save-state {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.dashboard-widget-canvas {
  display: contents;
}

.dashboard-section-title {
  align-items: center;
  display: inline-flex;
  min-height: 2.2rem;
}

.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card {
  position: relative;
}

.dashboard-kpi-card::before,
.dashboard-chart-card::before,
.dashboard-table-card::before {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-strong) 82%, transparent));
  border-radius: 999px;
  content: "";
  inset: 0 auto 0 0;
  opacity: 0.82;
  position: absolute;
  width: 3px;
}

.dashboard-fuel-card::before {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.dashboard-kpi-card h4,
.dashboard-kpi-card h6 {
  color: var(--text-primary);
  font-weight: 900;
}

.dashboard-chart-card .card-title,
.dashboard-table-card .card-title {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.dashboard-chart-card .card-title::before,
.dashboard-table-card .card-title::before {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  content: "";
  height: 0.65rem;
  width: 0.65rem;
}

@media (max-width: 991.98px) {
  .dashboard-command-center {
    grid-template-columns: 1fr;
  }

  .dashboard-command-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .dashboard-command-center {
    padding: 0.85rem;
  }

  .dashboard-quick-action,
  .dashboard-control-button,
  .dashboard-widget-toggle {
    flex: 1 1 calc(50% - 0.55rem);
    min-width: 8.5rem;
  }
}

.template-search-page {
  display: grid;
  gap: 1rem;
}

.template-search-page .container-fluid {
  display: grid;
  gap: 1rem;
}

.search-hero {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  padding: 1.15rem;
}

.search-hero-form {
  align-items: center;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.4rem;
}

.search-hero-form > i {
  color: var(--text-soft);
  font-size: 1.1rem;
  padding-left: 0.7rem;
}

.search-hero-form input {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  min-height: 2.55rem;
  outline: 0;
  width: 100%;
}

.search-hero-form input::placeholder {
  color: var(--text-soft);
}

.search-stats-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.search-stat {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
}

.search-stat strong {
  color: var(--text-primary);
  font-size: var(--type-title-sm);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.search-results-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.search-result-header {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.search-count {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  color: var(--accent-contrast);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 850;
  justify-content: center;
  min-width: 2rem;
  padding: 0.28rem 0.55rem;
}

.search-result-list {
  display: grid;
  gap: 0.55rem;
}

.activity-item.search-result-item {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  color: var(--text-primary);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  transition: 150ms ease;
}

.activity-item.search-result-item:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
  transform: translateY(-1px);
}

.activity-item.search-result-item strong,
.activity-item.search-result-item small {
  display: block;
}

.activity-item.search-result-item small {
  color: var(--text-muted);
  font-size: var(--type-caption);
  margin-top: 0.18rem;
}

@media (max-width: 991.98px) {
  .search-hero,
  .search-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .search-stats-grid {
    grid-template-columns: 1fr;
  }

  .search-hero-form {
    border-radius: 18px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .search-hero-form .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.template-notification-page {
  display: grid;
  gap: 1rem;
}

.template-notification-page .container-fluid {
  display: grid;
  gap: 1rem;
}

.notification-hero {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.15rem;
}

.notification-list {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
}

.notification-row {
  align-items: start;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.notification-row.is-unread {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--panel-border));
  box-shadow: 0 18px 34px -28px var(--shadow-color);
}

.notification-row.is-read {
  opacity: 0.75;
}

.notification-row-title {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.notification-row-title strong {
  color: var(--text-primary);
  font-weight: 850;
}

.notification-row-title span,
.notification-row p {
  color: var(--text-muted);
  font-size: var(--type-caption);
}

.notification-row p {
  margin: 0.22rem 0 0;
}

.notification-row a {
  color: var(--accent);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 800;
  margin-top: 0.45rem;
  text-decoration: none;
}

.notification-pagination {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .notification-hero,
  .notification-row-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-row {
    grid-template-columns: 1fr;
  }
}

.template-activity-page,
.template-intelligence-page {
  padding: 0;
}

.activity-hero,
.intelligence-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
}

.activity-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.activity-filter-bar .form-control,
.activity-filter-bar .form-select {
  min-width: 10rem;
}

.activity-stats-grid,
.intelligence-stat-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.intelligence-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.activity-stat-card,
.intelligence-stat-card {
  padding: 1rem;
}

.activity-stat-card strong,
.intelligence-stat-card strong {
  color: var(--text-primary);
  display: block;
  font-size: var(--type-title-md);
  font-weight: 900;
  line-height: 1.15;
  margin-top: 0.25rem;
}

.activity-stat-card small,
.intelligence-stat-card small {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-caption);
  margin-top: 0.25rem;
}

.intelligence-stat-card {
  align-items: center;
  display: flex;
  gap: 0.85rem;
}

.activity-layout-grid,
.intelligence-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 22rem;
}

.intelligence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intelligence-risk-panel {
  grid-column: 1 / -1;
}

.activity-stream-panel,
.activity-summary-panel,
.intelligence-panel {
  padding: 1.25rem;
}

.activity-panel-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.activity-count-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--panel-border));
  border-radius: 999px;
  color: var(--text-primary);
  font-size: var(--type-caption);
  font-weight: 800;
  padding: 0.35rem 0.7rem;
}

.activity-row {
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.95rem;
}

.activity-row + .activity-row {
  margin-top: 0.75rem;
}

.activity-row-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.activity-row-title a,
.activity-row-title strong {
  color: var(--text-primary);
  font-size: var(--type-body-strong);
  font-weight: 800;
}

.activity-row-title span,
.activity-row p,
.activity-row-meta {
  color: var(--text-muted);
  font-size: var(--type-caption);
}

.activity-row p {
  margin: 0.25rem 0 0;
}

.activity-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.activity-row-meta span {
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
}

.activity-breakdown-list {
  display: grid;
  gap: 0.65rem;
}

.activity-breakdown-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
}

.activity-breakdown-item span,
.activity-breakdown-item strong {
  color: var(--text-primary);
  font-size: var(--type-caption);
  font-weight: 800;
}

.intelligence-recommendation-list,
.intelligence-risk-grid {
  display: grid;
  gap: 0.8rem;
}

.intelligence-recommendation {
  padding: 0.95rem;
}

.intelligence-recommendation strong {
  color: var(--text-primary);
  display: block;
  font-weight: 900;
}

.intelligence-recommendation p {
  color: var(--text-muted);
  font-size: var(--type-caption);
  margin: 0.3rem 0 0;
}

.intelligence-recommendation.is-warning,
.intelligence-recommendation.is-danger {
  border-color: color-mix(in srgb, #d97757 44%, var(--panel-border));
}

.intelligence-recommendation.is-success {
  border-color: color-mix(in srgb, #22c55e 36%, var(--panel-border));
}

.intelligence-risk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intelligence-risk-item {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  padding: 1rem;
}

.intelligence-risk-item strong {
  color: var(--text-primary);
  font-size: var(--type-title-md);
  font-weight: 900;
}

.intelligence-risk-item small {
  color: var(--text-muted);
  font-size: var(--type-caption);
}

@media (max-width: 1199.98px) {
  .activity-layout-grid,
  .intelligence-grid,
  .intelligence-stat-grid {
    grid-template-columns: 1fr;
  }

  .activity-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .activity-hero,
  .intelligence-hero,
  .activity-row-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-filter-bar,
  .activity-filter-bar .form-control,
  .activity-filter-bar .form-select,
  .activity-filter-bar .btn {
    width: 100%;
  }

  .activity-stats-grid,
  .intelligence-risk-grid {
    grid-template-columns: 1fr;
  }

  .activity-row {
    grid-template-columns: 1fr;
  }
}

.settings-template-panel {
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  padding: 1rem;
}

.settings-template-grid,
.settings-template-doc-grid,
.settings-doc-grid {
  display: grid;
  gap: 1rem;
}

.settings-template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-template-column {
  min-width: 0;
}

.settings-template-choice-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  max-height: 14rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.settings-template-choice,
.settings-template-library-summary,
.settings-doc-token,
.settings-template-doc-card {
  padding: 1rem;
}

.settings-template-choice strong,
.settings-template-library-summary strong {
  color: var(--text-primary);
  display: block;
  font-size: var(--type-caption);
  font-weight: 900;
}

.settings-template-choice span,
.settings-template-library-summary p {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-caption);
  line-height: 1.45;
  margin-top: 0.2rem;
}

.settings-template-choice.is-selected {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--panel-border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
}

.settings-template-library-summary {
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  margin-top: 1rem;
}

.settings-doc-page {
  display: grid;
  gap: 1rem;
}

.settings-doc-page.is-embedded {
  padding: 0;
}

.settings-doc-grid,
.settings-template-doc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-doc-token code {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--panel-border));
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 800;
  padding: 0.3rem 0.65rem;
}

.settings-doc-token span {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-label);
  margin-top: 0.65rem;
}

.settings-template-doc-card strong {
  color: var(--text-primary);
  display: block;
  font-size: var(--type-title-sm);
  font-weight: 900;
  margin-top: 0.35rem;
}

.settings-template-doc-card ul {
  color: var(--text-muted);
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}

.settings-template-doc-card li {
  font-size: var(--type-caption);
}

.settings-doc-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.settings-doc-chip-list span {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-primary);
  display: inline-flex;
  font-size: var(--type-caption);
  font-weight: 700;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
}

@media (max-width: 1199.98px) {
  .settings-template-grid,
  .settings-template-doc-grid,
  .settings-doc-grid {
    grid-template-columns: 1fr;
  }
}

.template-list-page {
  display: grid;
  gap: 1rem;
}

.template-list-page .container-fluid {
  display: grid;
  gap: 1rem;
}

.template-list-page .row {
  row-gap: 1rem;
}

.template-list-page .page-title-box {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent),
    var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
}

.template-list-page .page-title-box h4 {
  color: var(--text-primary);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 850;
  letter-spacing: 0;
}

.template-list-page .page-title-box h4::after {
  background: var(--accent);
  border-radius: 999px;
  content: "";
  display: block;
  height: 3px;
  margin-top: 0.55rem;
  width: 2.75rem;
}

.template-list-page .card {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.template-list-page .card-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 64%, transparent), transparent),
    var(--surface-base);
  border-bottom: 1px solid var(--border-soft);
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.95rem 1rem;
}

.template-list-page .card-title {
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0;
}

.template-list-page .card-body {
  padding: 1rem;
}

.template-list-page .card-header .btn,
.template-list-page .page-title-box .btn,
.template-list-page .dt-buttons .btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 2.45rem;
  padding-inline: 0.95rem;
}

.template-list-page .card-header .btn-primary,
.template-list-page .page-title-box .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 20%, transparent);
}

.template-list-page .card-header .btn-outline-primary,
.template-list-page .page-title-box .btn-outline-primary,
.template-list-page .card-header .btn-light {
  background: var(--surface-raised);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.template-list-page .card-header .btn-outline-primary:hover,
.template-list-page .page-title-box .btn-outline-primary:hover,
.template-list-page .card-header .btn-light:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.template-list-page .form-control,
.template-list-page .form-select,
.template-list-page .dataTables_filter input,
.template-list-page .dataTables_length select {
  background-color: var(--surface-base);
  border-color: var(--border-soft);
  border-radius: 10px;
  color: var(--text-primary);
  min-height: 2.35rem;
}

.template-list-page .form-control:focus,
.template-list-page .form-select:focus,
.template-list-page .dataTables_filter input:focus,
.template-list-page .dataTables_length select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
}

.template-list-page .table-responsive {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: auto;
}

.template-list-page .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-soft);
  color: var(--text-primary);
  margin-bottom: 0;
}

.template-list-page .table > :not(caption) > * > * {
  border-color: var(--border-soft);
  padding: 0.72rem 0.82rem;
  vertical-align: middle;
}

.template-list-page .table thead th {
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface-raised));
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.template-list-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: color-mix(in srgb, var(--surface-muted) 58%, transparent);
}

.template-list-page .table tbody tr:hover > * {
  background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.template-list-page .badge,
.template-list-page .status-badge {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.42rem 0.62rem;
}

.template-list-page .dataTables_wrapper {
  display: grid;
  gap: 0.85rem;
}

.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child {
  align-items: center;
  background: var(--surface-base);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-inline: 0;
  padding: 0.65rem 0.75rem;
  row-gap: 0.65rem;
}

.template-list-page .dataTables_length,
.template-list-page .dataTables_filter,
.template-list-page .dataTables_info,
.template-list-page .dataTables_paginate {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.template-list-page .page-link {
  background: var(--surface-raised);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.template-list-page .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.template-list-page .modal-content {
  border-radius: 16px;
}

.template-list-page .modal-header {
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-raised));
}

.report-detail-page {
  display: grid;
  gap: 1.1rem;
}

.report-detail-page .container-fluid {
  display: grid;
  gap: 1rem;
}

.report-detail-page .row {
  row-gap: 1rem;
}

.report-detail-page .card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), var(--surface-raised)),
    var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.report-detail-page .card-header {
  align-items: center;
  background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  min-height: 3.1rem;
  padding: 0.85rem 1rem;
}

.report-detail-page .card-header h5,
.report-detail-page h5.mb-0 {
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0;
}

.report-detail-page .card-body {
  padding: 1rem;
}

.report-detail-page form .form-label {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-detail-page .form-control,
.report-detail-page .form-select {
  background-color: var(--surface-base);
  border-color: var(--border-soft);
  border-radius: 10px;
  color: var(--text-primary);
  min-height: 2.55rem;
}

.report-detail-page .form-control:focus,
.report-detail-page .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
}

.report-detail-page h6 {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.report-detail-page h4 {
  color: var(--text-primary);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 850;
  letter-spacing: 0;
  margin-bottom: 0;
}

.report-detail-page .table-responsive {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: auto;
}

.report-detail-page .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-soft);
  color: var(--text-primary);
  margin-bottom: 0;
  min-width: 680px;
}

.report-detail-page .table > :not(caption) > * > * {
  border-color: var(--border-soft);
  padding: 0.72rem 0.82rem;
  vertical-align: middle;
}

.report-detail-page .table thead th,
.report-detail-page .table-light > * > * {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-raised));
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.report-detail-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

.report-detail-page .table-primary > * > * {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}

.report-detail-page .table tfoot td,
.report-detail-page .table tfoot th {
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--accent-soft));
  color: var(--text-primary);
  font-weight: 850;
}

.report-detail-page .alert {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: var(--shadow-sm);
}

.report-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-actions .btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 2.55rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.report-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 20%, transparent);
}

.report-actions .btn-outline-dark,
.report-actions .btn-outline-success {
  background: var(--surface-base);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

.report-actions .btn-outline-dark:hover,
.report-actions .btn-outline-success:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

#accounting-report-print-modal .modal-content {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

#accounting-report-print-modal .modal-header,
#accounting-report-print-modal .modal-footer {
  background: var(--surface-base);
  border-color: var(--border-soft);
}

#accounting-report-print-modal .modal-title {
  color: var(--text-primary);
  font-weight: 850;
}

@media (max-width: 767.98px) {
  .report-detail-page .card-body {
    padding: 0.85rem;
  }

  .report-actions {
    justify-content: stretch;
    width: 100%;
  }

  .report-actions .btn {
    flex: 1 1 9rem;
  }
}

/* Surface polish for cards, alerts, dropdowns, and toast messages. */
:root {
  --surface-polish-bg: color-mix(in srgb, var(--panel-bg) 94%, #ffffff 6%);
  --surface-polish-muted-bg: color-mix(in srgb, var(--panel-soft) 84%, var(--panel-bg) 16%);
  --surface-polish-border: color-mix(in srgb, var(--panel-border) 76%, var(--text-muted) 12%);
  --surface-polish-strong-border: color-mix(in srgb, var(--accent) 28%, var(--panel-border));
  --surface-polish-shadow: 0 18px 38px -28px var(--shadow-color);
  --status-success: var(--accent);
  --status-warning: color-mix(in srgb, var(--accent) 56%, #d97706 44%);
  --status-danger: color-mix(in srgb, var(--accent) 44%, #dc2626 56%);
  --status-info: var(--accent);
  --toast-theme-bg: color-mix(in srgb, var(--surface-polish-bg) 92%, var(--accent) 8%);
  --toast-theme-border: color-mix(in srgb, var(--accent) 34%, var(--surface-polish-border));
  --toast-theme-text: var(--text-primary);
  --toast-theme-muted: color-mix(in srgb, var(--text-muted) 88%, var(--accent) 12%);
}

.app-main-content .card,
.panel,
.surface-soft,
.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card,
.template-list-page .card,
.template-detail-page .card,
.template-dashboard-page .card,
.report-detail-page .card,
.modal-content,
.dropdown-menu,
.popover-panel,
.app-notification-popover {
  background: var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--surface-polish-shadow) !important;
  color: var(--text-primary);
}

.app-main-content .card,
.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card,
.template-list-page .card,
.template-detail-page .card,
.template-dashboard-page .card,
.report-detail-page .card {
  overflow: hidden;
}

.app-main-content .card-header,
.template-list-page .card-header,
.template-detail-page .card-header,
.template-dashboard-page .card-header,
.report-detail-page .card-header,
.modal-header,
.modal-footer {
  background: var(--surface-polish-muted-bg) !important;
  border-color: var(--surface-polish-border) !important;
  color: var(--text-primary);
}

.app-main-content .card-body,
.template-list-page .card-body,
.template-detail-page .card-body,
.template-dashboard-page .card-body,
.report-detail-page .card-body,
.modal-body {
  color: var(--text-primary);
}

.app-main-content .card:hover,
.dashboard-kpi-card:hover,
.dashboard-chart-card:hover,
.dashboard-table-card:hover,
.template-list-page .card:hover,
.template-detail-page .card:hover,
.template-dashboard-page .card:hover {
  border-color: var(--surface-polish-strong-border) !important;
}

/* Shared list/table module skin. */
.template-list-page {
  --module-card-bg: color-mix(in srgb, var(--surface-polish-bg) 96%, var(--panel-soft) 4%);
  --module-card-muted-bg: color-mix(in srgb, var(--surface-polish-muted-bg) 92%, var(--accent) 8%);
  --module-table-head-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-polish-muted-bg));
  --module-table-row-bg: color-mix(in srgb, var(--surface-polish-bg) 98%, transparent);
  --module-table-row-alt-bg: color-mix(in srgb, var(--accent) 3%, var(--surface-polish-bg));
  --module-table-hover-bg: color-mix(in srgb, var(--accent) 9%, var(--surface-polish-bg));
  display: grid;
  gap: 1rem;
}

.template-list-page .container-fluid,
.template-list-page .container-fluid > .row {
  row-gap: 1rem;
}

.template-list-page .page-title-box {
  background: var(--module-card-bg);
  border: 1px solid var(--surface-polish-border);
  border-radius: 8px;
  box-shadow: var(--surface-polish-shadow);
  min-height: 4rem;
  padding: 0.75rem 1rem;
}

.template-list-page .page-title-box h4,
.template-list-page .card-title,
.template-list-page .card-header h5 {
  color: var(--text-primary);
  font-size: var(--type-body-strong);
  font-weight: 900;
  letter-spacing: 0;
}

.template-list-page .card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--module-card-bg) 98%, transparent), var(--module-card-bg)),
    var(--module-card-bg) !important;
}

.template-list-page .card-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%),
    var(--module-card-muted-bg) !important;
  min-height: 3.7rem;
  padding: 0.85rem 1rem;
}

.template-list-page .card-header .card-title::before,
.template-list-page .card-header h5::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.template-list-page .card-body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem !important;
}

.template-list-page .card-body > .row.g-2.mb-3 {
  background: color-mix(in srgb, var(--surface-polish-muted-bg) 74%, transparent);
  border: 1px solid var(--surface-polish-border);
  border-radius: 8px;
  margin-bottom: 0 !important;
  margin-inline: 0;
  padding: 0.75rem;
  row-gap: 0.65rem;
}

.template-list-page .card-body > .row.g-2.mb-3 > [class*="col-"] {
  padding-inline: 0.3rem;
}

.template-list-page .form-control,
.template-list-page .form-select,
.template-list-page .dataTables_filter input,
.template-list-page .dataTables_length select {
  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 8px !important;
  box-shadow: none;
  color: var(--text-primary) !important;
  font-weight: 700;
  min-height: 2.45rem;
}

.template-list-page .form-control::placeholder,
.template-list-page .dataTables_filter input::placeholder {
  color: var(--text-soft);
}

.template-list-page .form-control:focus,
.template-list-page .form-select:focus,
.template-list-page .dataTables_filter input:focus,
.template-list-page .dataTables_length select:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--field-border)) !important;
  box-shadow: 0 0 0 0.18rem var(--field-focus) !important;
}

.template-list-page .dataTables_wrapper {
  display: grid;
  gap: 0.8rem;
}

.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child {
  background: color-mix(in srgb, var(--surface-polish-muted-bg) 72%, transparent) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  margin-inline: 0;
  padding: 0.65rem 0.75rem;
  row-gap: 0.65rem;
}

.template-list-page .dataTables_wrapper > .row:first-child {
  align-items: end;
}

.template-list-page .dataTables_wrapper .dataTables_length label,
.template-list-page .dataTables_wrapper .dataTables_filter label {
  color: var(--text-muted) !important;
  margin-bottom: 0;
}

.template-list-page .dataTables_wrapper .dataTables_filter {
  text-align: right;
}

.template-list-page .dataTables_wrapper .dataTables_filter input {
  min-width: min(17rem, 100%);
}

.template-list-page .table-responsive {
  background: var(--module-table-row-bg);
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
  min-height: 11rem;
  overflow: auto;
}

.template-list-page .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--surface-polish-border);
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
}

.template-list-page .table > :not(caption) > * > * {
  border-color: var(--surface-polish-border) !important;
  padding: 0.72rem 0.85rem;
  vertical-align: middle;
}

.template-list-page .table thead th,
.template-list-page table.dataTable thead th {
  background: var(--module-table-head-bg) !important;
  border-bottom: 1px solid var(--surface-polish-strong-border) !important;
  color: var(--text-primary) !important;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.template-list-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.template-list-page table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--module-table-row-alt-bg);
  background: var(--module-table-row-alt-bg);
}

.template-list-page .table tbody tr:hover > *,
.template-list-page table.dataTable tbody tr:hover > * {
  background: var(--module-table-hover-bg) !important;
}

.template-list-page .dataTables_empty {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-polish-bg)) !important;
  color: var(--text-muted) !important;
  font-weight: 900;
  padding: 1.35rem !important;
}

.template-list-page .dataTables_info,
.template-list-page .dataTables_paginate,
.template-list-page .dataTables_length,
.template-list-page .dataTables_filter {
  color: var(--text-muted) !important;
}

.template-list-page .page-link {
  background: var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  font-weight: 800;
}

.template-list-page .page-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-polish-bg)) !important;
  border-color: var(--surface-polish-strong-border) !important;
  color: var(--accent-strong) !important;
}

.template-list-page .page-item.active .page-link {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  border-color: transparent !important;
  color: var(--accent-contrast) !important;
}

.template-list-page .btn {
  border-radius: 8px !important;
}

.dashboard-kpi-card::before,
.dashboard-chart-card::before,
.dashboard-table-card::before {
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
  width: 4px;
}

.dropdown-menu {
  padding: 0.45rem;
}

.dropdown-item {
  border-radius: 6px;
  color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  color: var(--accent-strong);
}

.app-notification-item {
  background: var(--surface-polish-muted-bg);
  border: 1px solid var(--surface-polish-border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.alert {
  background: var(--surface-polish-bg);
  border: 1px solid var(--surface-polish-border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--surface-polish-shadow);
  color: var(--text-primary);
}

.alert-success {
  background: color-mix(in srgb, var(--status-success) 12%, var(--surface-polish-bg));
  border-color: color-mix(in srgb, var(--status-success) 42%, var(--surface-polish-border));
  border-left-color: var(--status-success);
}

.alert-warning {
  background: color-mix(in srgb, var(--status-warning) 14%, var(--surface-polish-bg));
  border-color: color-mix(in srgb, var(--status-warning) 44%, var(--surface-polish-border));
  border-left-color: var(--status-warning);
}

.alert-danger,
.alert-error {
  background: color-mix(in srgb, var(--status-danger) 11%, var(--surface-polish-bg));
  border-color: color-mix(in srgb, var(--status-danger) 42%, var(--surface-polish-border));
  border-left-color: var(--status-danger);
}

.alert-info,
.alert-primary {
  background: color-mix(in srgb, var(--status-info) 11%, var(--surface-polish-bg));
  border-color: color-mix(in srgb, var(--status-info) 40%, var(--surface-polish-border));
  border-left-color: var(--status-info);
}

.toast-stack {
  align-items: flex-end;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: flex-start;
  left: auto !important;
  max-height: calc(100vh - 2.5rem);
  max-width: min(24rem, calc(100vw - 2rem));
  overflow: visible;
  pointer-events: none;
  position: fixed !important;
  right: 1.25rem !important;
  top: 1.25rem !important;
  width: min(24rem, calc(100vw - 2rem)) !important;
  z-index: 1400;
}

.toast-item {
  --toast-accent: var(--accent);
  --toast-bg: var(--toast-theme-bg);
  --toast-border: var(--toast-theme-border);
  align-items: start;
  align-self: flex-end;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--toast-bg) 98%, transparent), var(--toast-bg)),
    var(--toast-bg);
  box-sizing: border-box;
  border: 1px solid var(--toast-border);
  border-left: 4px solid var(--toast-accent);
  border-radius: 8px;
  box-shadow: 0 18px 48px -28px var(--shadow-color);
  color: var(--toast-theme-text);
  display: inline-grid !important;
  gap: 0.16rem 0.65rem;
  grid-template-columns: 0.65rem minmax(0, 1fr);
  height: auto !important;
  max-height: min(12rem, calc(100vh - 2.5rem));
  max-width: min(24rem, calc(100vw - 2rem));
  min-height: 0 !important;
  overflow: hidden;
  padding: 0.82rem 0.92rem;
  pointer-events: auto;
  width: 100%;
}

.toast-item::before {
  background: var(--toast-accent);
  border-radius: 999px;
  content: "";
  height: 0.65rem;
  margin-top: 0.32rem;
  width: 0.65rem;
}

.toast-item strong,
.toast-item span {
  grid-column: 2;
}

.toast-item strong {
  color: var(--toast-theme-text);
  font-size: var(--type-label);
  font-weight: 850;
  line-height: 1.2;
  text-transform: capitalize;
}

.toast-item span {
  color: var(--toast-theme-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.toast-success,
.toast-item.is-success {
  --toast-accent: var(--accent);
  --toast-bg: color-mix(in srgb, var(--surface-polish-bg) 90%, var(--accent) 10%);
  --toast-border: color-mix(in srgb, var(--accent) 42%, var(--surface-polish-border));
}

.toast-warning,
.toast-item.is-warning {
  --toast-accent: var(--status-warning);
  --toast-bg: color-mix(in srgb, var(--surface-polish-bg) 90%, var(--status-warning) 10%);
  --toast-border: color-mix(in srgb, var(--status-warning) 42%, var(--surface-polish-border));
}

.toast-error,
.toast-danger,
.toast-item.is-error {
  --toast-accent: var(--status-danger);
  --toast-bg: color-mix(in srgb, var(--surface-polish-bg) 91%, var(--status-danger) 9%);
  --toast-border: color-mix(in srgb, var(--status-danger) 42%, var(--surface-polish-border));
}

.toast-info,
.toast-item.is-info {
  --toast-accent: var(--accent);
  --toast-bg: var(--toast-theme-bg);
  --toast-border: var(--toast-theme-border);
}

@media (max-width: 575.98px) {
  .toast-stack {
    top: 0.8rem !important;
    right: 0.8rem !important;
    width: calc(100vw - 1.6rem) !important;
  }
}

.theme-swal-popup {
  background: var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 28px 80px -38px var(--shadow-color) !important;
  color: var(--text-primary) !important;
}

.theme-swal-title {
  color: var(--text-primary) !important;
  letter-spacing: 0 !important;
}

.theme-swal-body,
.swal2-html-container {
  color: var(--text-muted) !important;
}

.swal2-actions .btn {
  border-radius: 8px !important;
  min-height: 2.4rem;
}

/* Shell and settings polish. */
html[data-resolved-theme-mode="light"] {
  color-scheme: light;
}

html[data-resolved-theme-mode="dark"] {
  color-scheme: dark;
}

html[data-resolved-theme-mode="light"] {
  --surface-polish-bg: color-mix(in srgb, var(--panel-bg) 96%, #ffffff 4%);
  --surface-polish-muted-bg: color-mix(in srgb, var(--panel-soft) 88%, #ffffff 12%);
  --surface-polish-border: color-mix(in srgb, var(--panel-border) 78%, var(--text-muted) 10%);
}

html[data-resolved-theme-mode="dark"],
html.dark {
  --surface-polish-bg: color-mix(in srgb, var(--panel-bg) 94%, #020617 6%);
  --surface-polish-muted-bg: color-mix(in srgb, var(--panel-soft) 86%, #020617 14%);
  --surface-polish-border: color-mix(in srgb, var(--panel-border) 74%, var(--text-muted) 14%);
}

.app-shell {
  gap: 0.75rem;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  padding: 0.75rem 0.9rem 0.9rem;
}

.app-sidebar {
  height: calc(100vh - 1.5rem);
  top: 0.75rem;
}

.app-sidebar,
.app-topbar,
.settings-sub-sidebar,
.settings-main-panel,
.settings-save-card,
.settings-frame-wrap {
  background: var(--surface-polish-bg) !important;
  border-color: var(--surface-polish-border) !important;
  border-radius: 8px !important;
}

.app-topbar-row {
  gap: 0.7rem;
  grid-template-columns: auto minmax(9rem, 0.8fr) minmax(18rem, 1.35fr) auto;
  min-height: 4rem;
  padding: 0.55rem 0.85rem;
}

.app-topbar-meta {
  min-height: 2.35rem;
  padding: 0.42rem 0.85rem 0.55rem;
}

.app-topbar-title .section-kicker {
  font-size: 0.66rem;
}

.app-topbar-title .type-page-title {
  font-size: 1.08rem;
}

.header-search-shell {
  min-height: 2.2rem;
}

.icon-button,
.app-user-button {
  min-height: 2.2rem;
}

.settings-studio {
  align-items: start;
  gap: 0.75rem;
  grid-template-columns: minmax(13.75rem, 15.5rem) minmax(0, 1fr);
}

.settings-sub-sidebar {
  align-self: start;
  max-height: calc(100vh - 1.5rem);
  position: sticky;
  top: 0.75rem;
}

.settings-subnav-header {
  padding-bottom: 0.75rem;
}

.settings-subnav {
  gap: 0.45rem;
}

.settings-main-panel {
  padding: 0.75rem;
}

.settings-main-header {
  margin-bottom: 0.75rem;
  min-height: 4.25rem;
  padding: 0.65rem 0.75rem 0.75rem;
}

.settings-frame-wrap {
  background: transparent !important;
  border: 0 !important;
}

.settings-general-workspace {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.settings-general-workspace form {
  display: block;
}

.settings-save-grid {
  display: grid;
  gap: 1rem;
}

.settings-save-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-polish-bg) 98%, transparent), var(--surface-polish-bg)),
    var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--surface-polish-shadow) !important;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.settings-save-card-header {
  align-items: center;
  border-bottom: 1px solid var(--surface-polish-border);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding-bottom: 0.85rem;
}

.settings-save-card .type-card-title {
  font-size: 1.05rem;
}

.settings-save-card .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.settings-save-card .btn.btn-sm {
  min-height: 2.15rem;
  padding-inline: 0.8rem;
}

.settings-save-card .settings-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-save-card .settings-company-grid {
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-save-card .settings-company-grid .settings-form-wide {
  grid-column: span 3;
}

.settings-save-card .settings-theme-grid {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.settings-save-card .theme-card-button.settings-theme-card {
  border-radius: 8px;
  gap: 0.65rem;
  min-height: 5.6rem;
  padding: 0.8rem;
}

.settings-save-card .settings-theme-swatches {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-save-card .settings-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.settings-save-card .selection-chip {
  border-radius: 8px;
}

.settings-save-card .settings-template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-module-page .settings-module-hero,
.settings-module-page .template-status-message,
.settings-module-page .settings-template-choice-list,
.settings-module-page .settings-template-library-summary p,
.settings-module-page .settings-empty-state p,
.settings-module-page .settings-preset-card > p,
.settings-module-page .settings-theme-card small,
.settings-module-page .settings-theme-meta {
  display: none !important;
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background-color: var(--field-bg) !important;
  border-color: color-mix(in srgb, var(--field-border) 82%, var(--surface-polish-border)) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

@media (max-width: 1199.98px) {
  .settings-studio {
    grid-template-columns: 1fr;
  }

  .settings-sub-sidebar {
    position: relative;
    top: 0;
  }

  .settings-save-card .settings-template-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 0.65rem;
  }

  .app-topbar-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .header-search-shell {
    grid-column: 1 / -1;
  }

  .settings-save-card .settings-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard surface separation. */
:root {
  --dashboard-card-bg: color-mix(in srgb, var(--surface-polish-bg) 90%, var(--app-bg) 10%);
  --dashboard-card-top: color-mix(in srgb, var(--surface-polish-bg) 94%, var(--accent) 6%);
  --dashboard-card-border: color-mix(in srgb, var(--accent) 18%, var(--surface-polish-border));
  --dashboard-card-hover-border: color-mix(in srgb, var(--accent) 46%, var(--surface-polish-border));
  --dashboard-button-bg: color-mix(in srgb, var(--surface-polish-bg) 86%, var(--accent) 14%);
  --dashboard-button-border: color-mix(in srgb, var(--accent) 34%, var(--surface-polish-border));
}

html[data-resolved-theme-mode="dark"],
html.dark {
  --dashboard-card-bg: color-mix(in srgb, var(--surface-polish-bg) 86%, #020617 14%);
  --dashboard-card-top: color-mix(in srgb, var(--surface-polish-bg) 88%, var(--accent) 12%);
  --dashboard-button-bg: color-mix(in srgb, var(--surface-polish-bg) 78%, var(--accent) 22%);
}

.template-dashboard-page {
  background: transparent;
}

.template-dashboard-page .page-title-box,
.dashboard-command-center,
.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card {
  background:
    linear-gradient(180deg, var(--dashboard-card-top) 0%, var(--dashboard-card-bg) 100%),
    var(--dashboard-card-bg) !important;
  border: 1px solid var(--dashboard-card-border) !important;
  border-radius: 8px !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 24%, transparent) inset,
    0 18px 42px -30px var(--shadow-color) !important;
}

.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card {
  min-height: 100%;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-kpi-card:hover,
.dashboard-chart-card:hover,
.dashboard-table-card:hover {
  border-color: var(--dashboard-card-hover-border) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) inset,
    0 22px 54px -32px var(--shadow-color) !important;
  transform: translateY(-1px);
}

.dashboard-kpi-card .card-body,
.dashboard-chart-card .card-body,
.dashboard-table-card .card-body {
  position: relative;
  z-index: 1;
}

.dashboard-kpi-card .text-muted,
.dashboard-table-card .text-muted,
.dashboard-chart-card .text-muted {
  color: color-mix(in srgb, var(--text-muted) 86%, var(--text-primary) 14%) !important;
}

.dashboard-kpi-card h4,
.dashboard-kpi-card h6,
.dashboard-chart-card .card-title,
.dashboard-table-card .card-title {
  color: var(--text-primary) !important;
}

.dashboard-kpi-card::after,
.dashboard-chart-card::after,
.dashboard-table-card::after {
  background: radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.dashboard-fuel-card {
  --dashboard-card-top: color-mix(in srgb, var(--surface-polish-bg) 88%, var(--status-warning) 12%);
  --dashboard-card-border: color-mix(in srgb, var(--status-warning) 36%, var(--surface-polish-border));
}

.dashboard-fuel-card::before {
  background: linear-gradient(180deg, var(--status-warning), color-mix(in srgb, var(--status-warning) 70%, var(--accent)));
}

.dashboard-command-center {
  gap: 0.9rem;
}

.dashboard-quick-action,
.dashboard-control-button,
.dashboard-widget-toggle,
.template-dashboard-page .btn-outline-primary,
.template-dashboard-page .btn-light,
.template-dashboard-page .btn-secondary {
  background: var(--dashboard-button-bg) !important;
  border: 1px solid var(--dashboard-button-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 22px -18px var(--shadow-color);
  color: var(--text-primary) !important;
}

.dashboard-quick-action i,
.dashboard-control-button i,
.dashboard-widget-toggle i {
  color: var(--accent);
}

.dashboard-quick-action:hover,
.dashboard-control-button:hover,
.dashboard-widget-toggle:hover,
.dashboard-widget-toggle.is-active,
.dashboard-control-button.is-active,
.template-dashboard-page .btn-outline-primary:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-polish-bg)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--accent) 48%, var(--shadow-color));
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}

.template-dashboard-page .btn-primary,
.dashboard-widget-toggle.is-active,
.dashboard-control-button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--surface-polish-border)) !important;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent) 58%, var(--shadow-color));
  color: var(--accent-contrast) !important;
}

.dashboard-widget-toggle.is-active i,
.dashboard-control-button.is-active i {
  color: var(--accent-contrast);
}

.dashboard-widget-controls {
  border-top-color: var(--dashboard-card-border);
}

.dashboard-section-title {
  color: var(--text-primary);
  font-weight: 850;
}

.template-dashboard-page .apex-charts,
.template-dashboard-page .table-responsive {
  background: color-mix(in srgb, var(--surface-polish-bg) 82%, var(--app-bg) 18%);
  border: 1px solid color-mix(in srgb, var(--surface-polish-border) 78%, transparent);
  border-radius: 8px;
}

.template-dashboard-page .apex-charts {
  padding: 0.35rem;
}

/* Integrated shell, profile, modal, and settings skin. */
:root {
  --font-root: 14px;
  --type-body: 0.9rem;
  --type-body-strong: 0.94rem;
  --type-title-sm: 1rem;
  --type-title-md: clamp(1.12rem, 1.02rem + 0.22vw, 1.28rem);
  --type-title-lg: clamp(1.24rem, 1.06rem + 0.46vw, 1.52rem);
}

.app-shell {
  grid-template-columns: minmax(14.5rem, 17rem) minmax(0, 1fr);
}

.app-sidebar-brand {
  gap: 0.65rem;
  padding: 0.78rem;
}

.app-brand-mark {
  border-radius: 8px;
  height: 2.35rem;
  width: 2.35rem;
}

.app-brand-mark img {
  max-height: 1.55rem;
  max-width: 1.55rem;
}

.app-brand-name {
  font-size: 0.9rem;
}

.sidebar-group {
  padding: 0.35rem 0;
}

.sidebar-group-kicker {
  font-size: 0.64rem;
  padding: 0.38rem 0.55rem;
}

.sidebar-link {
  gap: 0.58rem;
  min-height: 2.25rem;
  padding: 0.52rem 0.58rem;
}

.sidebar-link i {
  font-size: 1rem;
}

.app-topbar-row {
  grid-template-columns: auto auto minmax(8rem, 0.75fr) minmax(16rem, 1.35fr) auto;
}

.app-sidebar-toggle {
  display: inline-flex;
}

body.app-sidebar-collapsed .app-shell {
  grid-template-columns: 4.65rem minmax(0, 1fr);
}

body.app-sidebar-collapsed .app-sidebar {
  align-items: center;
}

body.app-sidebar-collapsed .app-sidebar-brand {
  grid-template-columns: 1fr;
  justify-items: center;
}

body.app-sidebar-collapsed .app-sidebar-brand > div,
body.app-sidebar-collapsed .sidebar-group-kicker,
body.app-sidebar-collapsed .sidebar-link span {
  display: none;
}

body.app-sidebar-collapsed .sidebar-link {
  justify-content: center;
  width: 2.45rem;
}

.modal-content,
.swal2-popup,
.settings-module-card,
.settings-preset-card,
.settings-preview-card,
.settings-pack-card,
.settings-template-doc-card,
.settings-doc-token,
.settings-template-choice,
.settings-template-library-summary,
.settings-empty-state {
  background: var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--surface-polish-shadow) !important;
  color: var(--text-primary) !important;
}

.modal-header,
.modal-footer,
.settings-module-header {
  background: var(--surface-polish-muted-bg) !important;
  border-color: var(--surface-polish-border) !important;
}

.modal-backdrop.show {
  opacity: 0.52;
}

body.layout-embedded.modal-open {
  overflow: hidden !important;
}

body.layout-embedded .modal {
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 2500 !important;
}

body.layout-embedded .modal.show {
  align-items: center;
  display: flex !important;
  justify-content: center;
  padding: 1rem;
}

body.layout-embedded .modal-dialog {
  margin: 0 auto;
  max-width: min(36rem, calc(100vw - 2rem));
  pointer-events: auto !important;
  width: 100%;
  z-index: 2510 !important;
}

body.layout-embedded .modal-content {
  pointer-events: auto !important;
  position: relative;
  z-index: 2520 !important;
}

body.layout-embedded .modal-backdrop,
body.layout-embedded .modal-backdrop.show {
  background: color-mix(in srgb, #020617 64%, var(--app-bg) 36%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0.66 !important;
  pointer-events: auto !important;
  z-index: 2400 !important;
}

body.layout-embedded .modal-backdrop[data-app-modal-fallback="true"] {
  z-index: 2400 !important;
}

body.layout-embedded .modal input,
body.layout-embedded .modal select,
body.layout-embedded .modal textarea,
body.layout-embedded .modal button,
body.layout-embedded .modal a {
  pointer-events: auto !important;
}

.profile-workspace {
  gap: 0.9rem;
}

.profile-showcase {
  background: var(--surface-polish-bg) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--surface-polish-shadow) !important;
}

.profile-showcase-cover {
  background:
    radial-gradient(circle at 14% 26%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 18%),
    radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--accent-strong) 18%, transparent), transparent 16%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 56%, var(--panel-bg)) 0%, color-mix(in srgb, var(--accent-strong) 34%, var(--panel-soft)) 100%) !important;
  min-height: 9.5rem;
}

.profile-showcase-cover::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%) 0 0 / 1rem 1rem,
    color-mix(in srgb, var(--surface-polish-bg) 14%, transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.profile-cover-chrome,
.profile-cover-brand {
  z-index: 1;
}

.profile-cover-brand strong {
  color: var(--accent-contrast);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--accent-strong) 42%, transparent);
}

.profile-showcase-body {
  padding: 0 1rem 1rem;
}

.profile-showcase-main {
  grid-template-columns: auto minmax(0, 1fr) minmax(12rem, auto);
  margin-top: -2.25rem;
}

.profile-avatar-shell {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-polish-bg));
  border: 3px solid var(--surface-polish-bg);
  border-radius: 8px;
  height: 5.5rem;
  width: 5.5rem;
}

.profile-avatar-shell span {
  color: var(--accent-strong);
  font-size: 1.8rem;
}

.profile-showcase-stat,
.profile-sidebar-card,
.profile-completion-card,
.profile-danger-card,
.profile-feed-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-polish-bg) 96%, var(--accent) 4%), var(--surface-polish-bg)) !important;
  border: 1px solid var(--surface-polish-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--surface-polish-shadow) !important;
}

.profile-layout-grid {
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
}

.profile-sidebar-stack {
  top: 5rem;
}

.profile-feed-card {
  padding: 1rem;
}

.profile-feed-card header p,
.profile-danger-card header p,
.profile-completion-card p {
  color: var(--text-muted) !important;
}

.profile-feed-card .row,
.profile-feed-card form {
  row-gap: 0.75rem;
}

.profile-danger-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-polish-bg) 92%, var(--status-danger) 8%), var(--surface-polish-bg)) !important;
  border-color: color-mix(in srgb, var(--status-danger) 36%, var(--surface-polish-border)) !important;
}

.profile-nav-strip {
  background: transparent;
  border-top-color: var(--surface-polish-border);
  top: 5rem;
}

.profile-nav-pill {
  border-radius: 8px;
}

.svg-icon {
  display: inline-block;
  flex: 0 0 auto;
  height: 1.05rem;
  stroke: currentColor;
  vertical-align: -0.18em;
  width: 1.05rem;
}

.svg-icon-lg {
  height: 1.35rem;
  width: 1.35rem;
}

.svg-icon-inline {
  margin-right: 0.35rem;
}

.auth-brand-lockup .svg-icon-lg,
.profile-mini-icon .svg-icon {
  color: var(--accent);
}

.auth-form-panel .relative .svg-icon {
  color: var(--text-soft);
}

.profile-mini-icon .svg-icon {
  height: 1rem;
  width: 1rem;
}

/* Real operations skin: professional depth, crisp tables, no glass/card cartoon effects. */
:root {
  --ops-bg: color-mix(in srgb, var(--app-bg) 88%, #f8fafc 12%);
  --ops-surface: color-mix(in srgb, var(--panel-bg) 88%, #ffffff 12%);
  --ops-surface-muted: color-mix(in srgb, var(--panel-soft) 72%, var(--ops-surface) 28%);
  --ops-border: color-mix(in srgb, var(--panel-border) 64%, #64748b 16%);
  --ops-border-strong: color-mix(in srgb, var(--ops-border) 72%, var(--text-muted) 28%);
  --ops-shadow: 0 8px 20px -18px var(--shadow-color), 0 1px 2px color-mix(in srgb, var(--shadow-color) 42%, transparent);
  --ops-shadow-raised: 0 16px 36px -28px var(--shadow-color), 0 2px 6px -4px var(--shadow-color);
  --ops-radius: 6px;
}

html[data-resolved-theme-mode="dark"],
html.dark {
  --ops-bg: color-mix(in srgb, var(--app-bg) 92%, #020617 8%);
  --ops-surface: color-mix(in srgb, var(--panel-bg) 94%, #0f172a 6%);
  --ops-surface-muted: color-mix(in srgb, var(--panel-soft) 82%, #0f172a 18%);
  --ops-border: color-mix(in srgb, var(--panel-border) 72%, #94a3b8 10%);
  --ops-border-strong: color-mix(in srgb, var(--ops-border) 66%, var(--text-muted) 34%);
  --ops-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.62), 0 1px 2px rgba(0, 0, 0, 0.28);
  --ops-shadow-raised: 0 18px 40px -26px rgba(0, 0, 0, 0.72), 0 2px 8px -5px rgba(0, 0, 0, 0.48);
}

.app-shell-body,
.main-content,
.app-main,
.app-main-content {
  background: var(--ops-bg) !important;
}

.app-sidebar,
.app-topbar,
.app-main-content .card,
.panel,
.surface-soft,
.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-table-card,
.template-list-page .card,
.template-detail-page .card,
.template-dashboard-page .card,
.report-detail-page .card,
.profile-showcase,
.profile-showcase-stat,
.profile-sidebar-card,
.profile-completion-card,
.profile-feed-card,
.settings-module-card,
.settings-preset-card,
.settings-preview-card,
.settings-pack-card,
.settings-theme-panel,
.settings-save-card,
.modal-content,
.dropdown-menu,
.popover-panel,
.app-notification-popover {
  background: var(--ops-surface) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 7%, transparent), transparent 46%) !important;
  border: 1px solid var(--ops-border) !important;
  border-radius: var(--ops-radius) !important;
  box-shadow: var(--ops-shadow) !important;
  color: var(--text-primary) !important;
}

.app-topbar,
.card-header,
.app-main-content .card-header,
.template-list-page .card-header,
.template-detail-page .card-header,
.template-dashboard-page .card-header,
.report-detail-page .card-header,
.modal-header,
.modal-footer,
.settings-module-header,
.settings-preset-card-head {
  background: var(--ops-surface-muted) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 6%, transparent), transparent) !important;
  border-color: var(--ops-border) !important;
}

.app-sidebar,
.app-topbar,
.template-list-page .page-title-box,
.settings-sub-sidebar,
.settings-main-panel,
.profile-showcase {
  box-shadow: var(--ops-shadow-raised) !important;
}

.template-list-page {
  --module-card-bg: var(--ops-surface);
  --module-card-muted-bg: var(--ops-surface-muted);
  --module-table-head-bg: var(--ops-surface-muted);
  --module-table-row-bg: var(--ops-surface);
  --module-table-row-alt-bg: color-mix(in srgb, var(--ops-surface-muted) 42%, var(--ops-surface));
  --module-table-hover-bg: color-mix(in srgb, var(--accent) 7%, var(--ops-surface));
}

.template-list-page .page-title-box,
.template-list-page .card-body > .row.g-2.mb-3,
.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child,
.template-list-page .table-responsive {
  background: var(--ops-surface) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, transparent), transparent 56%) !important;
  border-color: var(--ops-border) !important;
  border-radius: var(--ops-radius) !important;
  box-shadow: none !important;
}

.template-list-page .card-header .card-title::before,
.template-list-page .card-header h5::before,
.app-main-content .card-header .card-title::before,
.app-main-content .card-header h5::before {
  box-shadow: none !important;
}

.template-list-page .table,
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: color-mix(in srgb, var(--ops-surface-muted) 46%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--accent) 7%, transparent);
  --bs-table-border-color: var(--ops-border);
  color: var(--text-primary) !important;
}

.template-list-page .table thead th,
.template-list-page table.dataTable thead th,
.table thead th,
table.dataTable thead th {
  background: var(--ops-surface-muted) !important;
  border-bottom: 1px solid var(--ops-border-strong) !important;
  color: var(--text-primary) !important;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.template-list-page .table > :not(caption) > * > *,
.table > :not(caption) > * > * {
  border-color: var(--ops-border) !important;
}

.form-control,
.form-select,
.template-list-page .form-control,
.template-list-page .form-select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background-color: var(--field-bg) !important;
  border: 1px solid var(--ops-border) !important;
  border-radius: var(--ops-radius) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.btn,
.template-list-page .btn,
.page-link,
.dataTables_wrapper .page-link,
.icon-button,
.sidebar-link {
  border-radius: var(--ops-radius) !important;
}

.btn-primary,
.template-list-page .card-header .btn-primary,
.template-list-page .page-title-box .btn-primary,
.modal-footer .btn-primary {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  color: var(--accent-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.template-list-page .card-header .btn-outline-primary,
.template-list-page .page-title-box .btn-outline-primary,
.template-list-page .card-header .btn-light {
  background: var(--ops-surface) !important;
  border-color: var(--ops-border) !important;
  color: var(--text-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
  background: var(--ops-surface-muted) !important;
  border-color: var(--ops-border-strong) !important;
  color: var(--accent-strong) !important;
}

.alert,
.toast-item,
.app-notification-item {
  background: var(--ops-surface) !important;
  background-image: none !important;
  border-radius: var(--ops-radius) !important;
  box-shadow: var(--ops-shadow) !important;
}

.modal-backdrop,
.template-modal-backdrop {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.select2-container--open,
.select2-container--focus,
.select2-dropdown,
.select2-container--open .select2-dropdown {
  z-index: 2600 !important;
}

.modal.show .select2-container--open,
.modal[style*="display: block"] .select2-container--open,
.template-modal-card .select2-container--open {
  z-index: 2600 !important;
}

#page-topbar,
.topnav,
.auth-card {
  backdrop-filter: none !important;
}

.modal.show,
.modal[style*="display: block"] {
  z-index: 2500 !important;
}

.modal.show .modal-dialog,
.modal[style*="display: block"] .modal-dialog {
  position: relative;
  z-index: 2510 !important;
}

.modal.show .modal-content,
.modal[style*="display: block"] .modal-content,
.template-modal-card {
  position: relative;
  z-index: 2520 !important;
}

.modal-backdrop,
.modal-backdrop.show,
.template-modal-backdrop {
  background: color-mix(in srgb, #020617 58%, var(--app-bg) 42%) !important;
  z-index: 2400 !important;
}

body:not(:has(.modal.show)) .modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Surface separation: cards, controls, and tables need distinct levels. */
:root {
  --ops-card-surface: color-mix(in srgb, var(--ops-surface) 96%, #ffffff 4%);
  --ops-control-surface: color-mix(in srgb, var(--ops-surface-muted) 72%, var(--ops-bg) 28%);
  --ops-table-shell-surface: color-mix(in srgb, var(--ops-bg) 58%, var(--ops-surface) 42%);
  --ops-table-row-surface: color-mix(in srgb, var(--ops-card-surface) 98%, #ffffff 2%);
  --ops-table-alt-surface: color-mix(in srgb, var(--ops-table-shell-surface) 48%, var(--ops-table-row-surface) 52%);
  --ops-table-head-surface: color-mix(in srgb, var(--ops-control-surface) 84%, var(--ops-border) 16%);
  --ops-card-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 44%);
  --ops-control-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 52%);
  --ops-table-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 7%, transparent), transparent 5rem);
  --ops-inset-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 44%, transparent), inset 0 0 0 1px color-mix(in srgb, #ffffff 12%, transparent);
}

html[data-resolved-theme-mode="dark"],
html.dark {
  --ops-card-surface: color-mix(in srgb, var(--ops-surface) 94%, #1e293b 6%);
  --ops-control-surface: color-mix(in srgb, var(--ops-surface-muted) 76%, #020617 24%);
  --ops-table-shell-surface: color-mix(in srgb, var(--ops-bg) 48%, #020617 52%);
  --ops-table-row-surface: color-mix(in srgb, var(--ops-card-surface) 88%, #020617 12%);
  --ops-table-alt-surface: color-mix(in srgb, var(--ops-table-shell-surface) 38%, var(--ops-table-row-surface) 62%);
  --ops-table-head-surface: color-mix(in srgb, var(--ops-control-surface) 86%, #020617 14%);
  --ops-card-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, transparent), transparent 44%);
  --ops-control-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 4%, transparent), transparent 52%);
  --ops-table-highlight: linear-gradient(180deg, color-mix(in srgb, #ffffff 3%, transparent), transparent 5rem);
  --ops-inset-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent), inset 0 0 0 1px color-mix(in srgb, #ffffff 4%, transparent);
}

.app-main-content .card,
.template-list-page .card,
.template-detail-page .card,
.template-dashboard-page .card,
.report-detail-page .card,
.settings-module-card,
.settings-preset-card,
.settings-preview-card,
.settings-pack-card,
.settings-theme-panel,
.settings-save-card,
.profile-showcase,
.profile-showcase-stat,
.profile-sidebar-card,
.profile-completion-card,
.profile-feed-card {
  background: var(--ops-card-surface) !important;
  background-image: var(--ops-card-highlight) !important;
  border-color: var(--ops-border) !important;
  box-shadow: var(--ops-shadow) !important;
}

.card-body,
.app-main-content .card-body,
.template-list-page .card-body,
.template-detail-page .card-body,
.template-dashboard-page .card-body,
.report-detail-page .card-body {
  background: var(--ops-card-surface) !important;
  background-image: var(--ops-card-highlight) !important;
}

.app-main-content .card-header,
.template-list-page .card-header,
.template-detail-page .card-header,
.template-dashboard-page .card-header,
.report-detail-page .card-header {
  background: var(--ops-control-surface) !important;
  background-image: var(--ops-control-highlight) !important;
  border-bottom-color: var(--ops-border-strong) !important;
}

.template-list-page {
  --module-card-bg: var(--ops-card-surface);
  --module-card-muted-bg: var(--ops-control-surface);
  --module-table-head-bg: var(--ops-table-head-surface);
  --module-table-row-bg: var(--ops-table-row-surface);
  --module-table-row-alt-bg: var(--ops-table-alt-surface);
  --module-table-hover-bg: color-mix(in srgb, var(--accent) 8%, var(--ops-table-row-surface));
}

.template-list-page .page-title-box {
  background: var(--ops-card-surface) !important;
  background-image: var(--ops-card-highlight) !important;
}

.template-list-page .card-body > .row.g-2.mb-3,
.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child {
  background: var(--ops-control-surface) !important;
  background-image: var(--ops-control-highlight) !important;
  border-color: var(--ops-border) !important;
}

.template-list-page .table-responsive,
.table-responsive {
  background: var(--ops-table-shell-surface) !important;
  background-image: var(--ops-table-highlight) !important;
  border: 1px solid var(--ops-border-strong) !important;
  box-shadow: var(--ops-inset-shadow) !important;
  padding: 0.35rem;
}

.template-list-page .table,
.table {
  --bs-table-bg: var(--ops-table-row-surface);
  --bs-table-striped-bg: var(--ops-table-alt-surface);
  --bs-table-hover-bg: color-mix(in srgb, var(--accent) 8%, var(--ops-table-row-surface));
  background: var(--ops-table-row-surface) !important;
  border-collapse: separate;
  border-spacing: 0;
}

.template-list-page .table > :not(caption) > * > *,
.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg) !important;
}

.template-list-page .table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--ops-table-alt-surface) !important;
}

.template-list-page .table tbody tr:hover > *,
.table tbody tr:hover > * {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--ops-table-row-surface)) !important;
}

.template-list-page .table thead th,
.template-list-page table.dataTable thead th,
.table thead th,
table.dataTable thead th {
  background: var(--ops-table-head-surface) !important;
}

@media (max-width: 991.98px) {
  .app-sidebar-toggle {
    display: none;
  }

  body.app-sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }
}

/* Flattened shell: remove the floating card theme from the workspace chrome. */
.app-shell {
  gap: 0 !important;
  padding: 0 !important;
}

.app-sidebar {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  height: 100vh !important;
  top: 0 !important;
}

.app-main {
  min-height: 100vh;
}

.app-topbar {
  border-left: 0 !important;
  border-radius: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.app-main-content {
  padding: 0 !important;
}

.app-main-content > .page-content,
.template-list-page {
  padding: 1rem !important;
}

.app-sidebar,
.app-topbar,
.app-main-content .card,
.panel,
.template-list-page .card,
.template-list-page .page-title-box,
.template-list-page .card-body > .row.g-2.mb-3,
.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child,
.template-list-page .table-responsive,
.settings-sub-sidebar,
.settings-main-panel,
.settings-save-card,
.modal-content,
.dropdown-menu,
.popover-panel,
.app-notification-popover {
  background-image: none !important;
  box-shadow: none !important;
}

.app-sidebar,
.app-topbar,
.app-main-content .card,
.panel,
.template-list-page .card,
.settings-sub-sidebar,
.settings-main-panel,
.settings-save-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-main-content .card:hover,
.dashboard-kpi-card:hover,
.dashboard-quick-action:hover,
.theme-card:hover,
.btn:hover {
  transform: none !important;
}

/* Clean data tables: flatter, sharper, easier to scan. */
.template-list-page .card-body {
  display: block !important;
  padding: 1rem !important;
}

.template-list-page .dataTables_wrapper {
  display: block !important;
  gap: 0.75rem;
  height: auto !important;
  min-height: 0 !important;
}

.template-list-page .dataTables_wrapper .row,
.template-list-page .dataTables_wrapper > .row:first-child,
.template-list-page .dataTables_wrapper > .row:last-child {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  row-gap: 0.75rem !important;
}

.template-list-page .dataTables_wrapper > .row:first-child {
  margin-bottom: 0.75rem !important;
}

.template-list-page .dataTables_wrapper > .row:last-child {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0.75rem !important;
}

.template-list-page .dataTables_wrapper .row > [class*="col-"] {
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.template-list-page .dataTables_wrapper .row > [class*="col-"]:last-child {
  justify-self: end;
}

.template-list-page .dataTables_wrapper .dataTables_length label,
.template-list-page .dataTables_wrapper .dataTables_filter label {
  align-items: center;
  color: var(--text-muted) !important;
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
}

.template-list-page .dataTables_wrapper .dataTables_filter {
  display: flex;
  justify-content: flex-end;
}

.template-list-page .dataTables_wrapper .dataTables_filter input,
.template-list-page .dataTables_wrapper .dataTables_length select {
  background: var(--field-bg) !important;
  border: 1px solid var(--ops-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  min-height: 2.35rem;
}

.template-list-page .table-responsive {
  background: var(--ops-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ops-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto;
  padding: 0 !important;
}

.template-list-page table.dataTable,
.template-list-page .table {
  background: var(--ops-surface) !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

.template-list-page table.dataTable thead th,
.template-list-page .table thead th {
  background: var(--ops-surface-muted) !important;
  border-bottom: 1px solid var(--ops-border-strong) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  color: var(--text-primary) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.82rem 0.95rem !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.template-list-page table.dataTable tbody td,
.template-list-page .table tbody td {
  background: var(--ops-surface) !important;
  border-bottom: 1px solid var(--ops-border) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  color: var(--text-primary) !important;
  padding: 0.78rem 0.95rem !important;
  vertical-align: middle;
}

.template-list-page table.dataTable tbody tr:last-child td,
.template-list-page .table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.template-list-page table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
.template-list-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: color-mix(in srgb, var(--accent) 5%, var(--ops-surface)) !important;
}

.template-list-page table.dataTable.table-striped > tbody > tr:nth-of-type(even) > *,
.template-list-page .table-striped > tbody > tr:nth-of-type(even) > * {
  background: color-mix(in srgb, var(--ops-surface-muted) 55%, var(--ops-surface)) !important;
}

.template-list-page table.dataTable tbody tr:hover > *,
.template-list-page .table tbody tr:hover > * {
  background: color-mix(in srgb, var(--accent) 7%, var(--ops-surface)) !important;
}

.template-list-page .dataTables_wrapper .dataTables_info {
  color: var(--text-muted) !important;
  padding-top: 0 !important;
}

.template-list-page .dataTables_wrapper .dataTables_paginate {
  display: flex;
  justify-content: flex-end;
}

/* Match Settings sub-sidebar links to the main sidebar typography. */
.settings-subnav {
  gap: 0.12rem !important;
}

.settings-subnav-link {
  align-items: center !important;
  border-radius: var(--ops-radius) !important;
  color: var(--text-muted) !important;
  display: grid !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  gap: 0.58rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  line-height: 1.2 !important;
  margin: 0.12rem 0 !important;
  min-height: 2.25rem !important;
  padding: 0.52rem 0.58rem !important;
  text-decoration: none !important;
}

.settings-subnav-link:hover,
.settings-subnav-link.is-active {
  background: rgba(var(--sms-primary-rgb), 0.12) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
}

.settings-subnav-label {
  align-items: center !important;
  display: inline-flex !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  gap: 0.58rem !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

.settings-subnav-label i {
  color: var(--text-soft) !important;
  font-size: 1rem !important;
  margin-right: 0 !important;
  width: 1.25rem !important;
}

.settings-subnav-link:hover .settings-subnav-label i,
.settings-subnav-link.is-active .settings-subnav-label i {
  color: var(--accent) !important;
}

.settings-subnav-index {
  font-size: 0.64rem !important;
  font-weight: 800 !important;
}

/* Settings iframe modal: promote embedded modals to a true page-level overlay. */
body.settings-frame-modal-open {
  overflow: hidden !important;
}

body.settings-frame-modal-open .app-main,
body.settings-frame-modal-open .app-main-content {
  z-index: 5000 !important;
}

body.settings-frame-modal-open .settings-frame-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: none !important;
  height: 100vh !important;
  left: 0 !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  z-index: 10000 !important;
}

body.settings-frame-modal-open .settings-frame-wrap iframe {
  background: transparent !important;
  height: 100vh !important;
  min-height: 100vh !important;
  width: 100vw !important;
}

body.layout-embedded.modal-open .main-content {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.layout-embedded.modal-open .modal {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body.layout-embedded.modal-open .modal-backdrop,
body.layout-embedded.modal-open .modal-backdrop.show {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0.46 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Project layout spacing: keep the flattened theme, but restore breathing room. */
:root {
  --app-layout-gutter: 0.85rem;
}

.app-shell {
  gap: var(--app-layout-gutter) !important;
  padding: var(--app-layout-gutter) !important;
}

.app-sidebar {
  border-radius: var(--ops-radius) !important;
  height: calc(100vh - (var(--app-layout-gutter) * 2)) !important;
  top: var(--app-layout-gutter) !important;
}

.app-main {
  align-content: start !important;
  display: grid;
  gap: var(--app-layout-gutter) !important;
  grid-auto-rows: max-content !important;
  min-height: calc(100vh - (var(--app-layout-gutter) * 2)) !important;
}

.app-topbar {
  border-radius: var(--ops-radius) !important;
}

.app-main-content > .page-content,
.template-list-page {
  padding: var(--app-layout-gutter) !important;
}

.app-main-content {
  min-height: 0 !important;
}

.report-detail-page {
  gap: var(--app-layout-gutter) !important;
}

.report-detail-page > .container-fluid {
  display: grid !important;
  gap: var(--app-layout-gutter) !important;
}

.report-detail-page > .container-fluid > .row:has(.page-title-box) {
  display: none !important;
}

.report-detail-page .card {
  margin-bottom: 0 !important;
}

.report-detail-page .card-body {
  padding: 0.85rem !important;
}

.report-detail-page form.row {
  align-items: end !important;
  row-gap: 0.75rem !important;
}

.report-detail-page .table-responsive {
  background: var(--ops-table-shell-surface) !important;
  background-image: var(--ops-table-highlight) !important;
}

.settings-studio {
  gap: var(--app-layout-gutter) !important;
}

/* Landing management: scoped controls that inherit the active theme preset. */
.landing-sort-list {
  display: grid;
  gap: 0.75rem;
}

.landing-sort-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--sms-border);
  border-radius: var(--ops-radius, 8px);
  background: var(--sms-surface);
}

.landing-drag-handle {
  flex: 0 0 auto;
  color: var(--sms-primary);
  cursor: grab;
  font-size: 1.25rem;
}

.landing-sort-list.is-drag-disabled .landing-drag-handle {
  color: var(--sms-muted);
  cursor: not-allowed;
  opacity: 0.45;
}

.landing-sort-row.ui-sortable-helper {
  box-shadow: var(--sms-shadow);
}

.landing-sort-placeholder {
  min-height: 72px;
  border: 1px dashed var(--sms-primary);
  border-radius: var(--ops-radius, 8px);
  background: color-mix(in srgb, var(--sms-primary) 8%, transparent);
}

.landing-section-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 92px;
}

.landing-section-status .form-check-input {
  margin: 0;
}

.landing-switch-text {
  min-width: 42px;
  color: var(--sms-muted);
  font-size: var(--type-caption);
  font-weight: 700;
}

.landing-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

.landing-sort-row .min-w-0 {
  min-width: 0;
}

@media (max-width: 991.98px) {
  :root {
    --app-layout-gutter: 0.65rem;
  }
}

/* Give the shared report preview definite flex dimensions in the Bootstrap/Tailwind shell. */
#global-print-preview-modal {
  padding: 0 !important;
  overflow: hidden;
}

#global-print-preview-modal .print-preview-dialog {
  width: calc(100% - 2rem);
  max-width: max(36rem, calc(var(--preview-paper-width, 210mm) + 3rem));
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem);
  min-height: 0;
  margin: 1rem auto;
}

#global-print-preview-modal .modal-content {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

#global-print-preview-modal .modal-toolbar {
  flex: 0 0 auto;
}

#global-print-preview-modal .print-preview-body {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#global-print-preview-modal #global-print-preview-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
}

@media (max-width: 575.98px) {
  #global-print-preview-modal .print-preview-dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
  }

  #global-print-preview-modal .modal-content {
    border: 0;
    border-radius: 0 !important;
  }
}

/* Modules workspace: all surfaces and accents inherit the active theme preset. */
.modules-workspace {
  --modules-line: color-mix(in srgb, var(--panel-border) 75%, var(--text-muted) 15%);
  --modules-tint: color-mix(in srgb, var(--accent) 9%, var(--panel-bg));
  --modules-radius: 18px;
}
.modules-workspace .modules-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--modules-line);
  border-radius: var(--modules-radius);
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 65%), var(--panel-bg);
  box-shadow: 0 8px 30px -20px var(--shadow-color);
}
.modules-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent-strong);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.modules-overview-copy { max-width: 37rem; }
.modules-workspace .modules-overview h1 {
  margin: .85rem 0 .75rem;
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -.035em;
  color: var(--text-primary);
}
.modules-overview-copy p { margin: 0; color: var(--text-muted); line-height: 1.65; }
.modules-branch-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.2rem;
  padding: .4rem .75rem;
  border: 1px solid var(--modules-line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 600;
}
.modules-overview-stats { display: grid; grid-template-columns: repeat(3, 1fr); flex-shrink: 0; }
.modules-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .5rem 1.35rem; }
.modules-stat + .modules-stat { border-left: 1px solid var(--modules-line); }
.modules-stat-icon { color: var(--accent); font-size: 1.1rem; }
.modules-stat strong { color: var(--text-primary); font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.04em; }
.modules-stat > span:last-child { color: var(--text-muted); font-size: .73rem; white-space: nowrap; }
.modules-toolbar { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 1.2rem; align-items: end; padding: 1.35rem 0 1.7rem; }
.modules-field { min-width: 0; }
.modules-field label { display: block; color: var(--text-muted); font-size: .76rem; font-weight: 600; margin-bottom: .5rem; }
.modules-workspace .modules-field .form-control,
.modules-workspace .modules-field .form-select { min-height: 43px; border-radius: 10px; border-color: var(--modules-line); background-color: var(--field-bg); color: var(--text-primary); }
.modules-search { position: relative; }
.modules-search > i { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; z-index: 1; }
.modules-workspace .modules-search input { padding-left: 2.5rem; }
.modules-catalog-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: .25rem 0 1.1rem; }
.modules-workspace .modules-catalog-heading h2 { color: var(--text-primary); font-size: 1.05rem; font-weight: 700; margin: 0; }
.modules-catalog-heading > span { color: var(--text-muted); font-size: .73rem; }
.modules-catalog-heading > span i { margin-right: .25rem; }
.modules-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.modules-workspace .module-management-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--modules-line);
  border-radius: var(--modules-radius);
  background: var(--panel-bg);
  color: var(--text-primary);
  box-shadow: 0 6px 18px -12px var(--shadow-color);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.modules-workspace .module-management-card:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--modules-line));
  box-shadow: 0 14px 30px -18px var(--shadow-color);
  transform: translateY(-3px);
}
.module-card-main { padding: 1.5rem 1.5rem 1.25rem; }
.module-card-topline { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1.25rem; }
.module-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: var(--modules-tint);
  color: var(--accent-strong);
  font-size: 1.35rem;
}
.module-status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 999px; background: var(--modules-tint); color: var(--accent-strong); font-size: .7rem; font-weight: 700; }
.module-status-pill > span { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.modules-workspace .module-management-card h3 { margin: 0 0 .6rem; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.module-card-description { margin: 0 0 1.3rem; color: var(--text-muted); font-size: .82rem; line-height: 1.6; min-height: 2.65rem; }
.module-features-heading { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .85rem; }
.module-features-heading > span { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--panel-soft); border: 1px solid var(--modules-line); letter-spacing: 0; font-size: .65rem; }
.module-feature-list { display: grid; grid-template-columns: 1fr; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.module-feature-list li { display: flex; align-items: baseline; gap: .6rem; font-size: .8rem; color: var(--text-primary); line-height: 1.4; }
.module-feature-list i { color: var(--accent); flex-shrink: 0; }
.module-website-link { display: flex; align-items: center; gap: .7rem; justify-content: space-between; margin-top: 1.15rem; padding: .8rem; border: 1px solid var(--modules-line); border-radius: 10px; background: var(--panel-soft); }
.module-website-link > div { min-width: 0; }
.module-website-link span { display: block; color: var(--text-muted); font-size: .65rem; margin-bottom: .2rem; }
.module-website-link strong { display: block; overflow-wrap: anywhere; color: var(--text-primary); font-size: .75rem; font-weight: 500; }
.module-website-link a { display: grid; place-items: center; color: var(--accent-strong); width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 7px; background: var(--modules-tint); }
.module-website-note { color: var(--text-muted); font-size: .68rem; line-height: 1.5; margin: .6rem 0 0; }
.module-card-bottom { margin-top: auto; padding: 0 1.5rem; }
.module-dependency-note { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem; border-radius: 10px; background: var(--panel-soft); border: 1px solid var(--modules-line); }
.module-dependency-note > i { color: var(--accent); margin-top: .1rem; }
.module-dependency-note strong { display: block; color: var(--text-primary); font-size: .72rem; line-height: 1.45; font-weight: 600; }
.module-dependency-note span { display: block; margin-top: .25rem; color: var(--text-muted); font-size: .68rem; line-height: 1.5; }
.module-change-history { margin-top: .8rem; color: var(--text-muted); font-size: .68rem; }
.module-change-history summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; list-style: none; cursor: pointer; padding: .6rem 0 .9rem; }
.module-change-history summary::-webkit-details-marker { display: none; }
.module-change-history summary span { display: inline-flex; align-items: center; gap: .35rem; }
.module-change-history[open] summary .bi-chevron-down { transform: rotate(180deg); }
.module-change-history dl { margin: 0 0 .9rem; border-top: 1px solid var(--modules-line); padding-top: .7rem; }
.module-change-history dl > div { display: flex; justify-content: space-between; gap: .5rem; margin: .4rem 0; }
.module-change-history dt { font-weight: 500; }
.module-change-history dd { margin: 0; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.module-card-bottom form { margin: 0 -1.5rem; }
.modules-workspace .module-state-control { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; border: 0; border-top: 1px solid var(--modules-line); padding: 1rem 1.5rem; text-align: left; background: color-mix(in srgb, var(--panel-soft) 70%, transparent); color: var(--text-primary); cursor: pointer; transition: background .2s ease; }
.modules-workspace .module-state-control:hover { background: var(--modules-tint); }
.module-state-control strong { display: block; font-size: .74rem; font-weight: 600; }
.module-state-control small { display: block; color: var(--text-muted); font-size: .67rem; margin-top: .25rem; }
.module-toggle-track { display: inline-flex; align-items: center; width: 2.5rem; height: 1.45rem; padding: .2rem; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.module-toggle-track > span { width: 1.05rem; height: 1.05rem; border-radius: 50%; margin-left: auto; background: var(--accent-contrast); box-shadow: 0 1px 3px var(--shadow-color); }
[data-module-status="disabled"] .module-status-pill { background: var(--panel-soft); color: var(--text-muted); border: 1px solid var(--modules-line); }
[data-module-status="disabled"] .module-card-icon { background: var(--panel-soft); color: var(--text-muted); border-color: var(--modules-line); }
[data-module-status="disabled"] .module-toggle-track { background: color-mix(in srgb, var(--text-muted) 25%, var(--panel-soft)); border: 1px solid var(--modules-line); }
[data-module-status="disabled"] .module-toggle-track > span { margin-left: 0; background: var(--text-muted); }
.module-state-control:disabled { opacity: .5; cursor: not-allowed; }
.modules-workspace :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.modules-preservation-note { display: flex; align-items: flex-start; justify-content: center; gap: .5rem; margin: 1.5rem 0 .5rem; color: var(--text-muted); font-size: .73rem; line-height: 1.6; text-align: center; }
.modules-preservation-note i { color: var(--accent); flex-shrink: 0; }
.modules-empty-state { padding: 3rem 1rem; text-align: center; border: 1px dashed var(--modules-line); border-radius: var(--modules-radius); color: var(--text-muted); }
.modules-empty-state > i { font-size: 1.6rem; color: var(--accent); }
.modules-empty-state h3 { margin: .75rem 0 .4rem; color: var(--text-primary); font-size: 1rem; }
.modules-empty-state p { font-size: .8rem; margin: 0; }
@media (max-width: 1399.98px) {
  .modules-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules-workspace .modules-overview { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .modules-stat:first-child { padding-left: 0; }
}
@media (max-width: 767.98px) {
  .modules-card-grid { grid-template-columns: minmax(0, 1fr); }
  .modules-toolbar { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .modules-branch-field { grid-column: 1 / -1; }
  .modules-overview-stats { width: 100%; }
  .modules-stat { padding: .35rem .75rem; }
  .modules-stat > span:last-child { font-size: .66rem; white-space: normal; }
  .modules-preservation-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .modules-workspace .module-management-card, .modules-workspace .module-state-control { transition: none; }
  .modules-workspace .module-management-card:hover { transform: none; }
}

/* Settings now uses the main application sidebar and normal content pages. */
.settings-sidebar-heading { display: flex; align-items: center; gap: .2rem; }
.settings-sidebar-heading > .sidebar-link { flex: 1; min-width: 0; }
.settings-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; border: 0; border-radius: var(--ops-radius, 8px); background: transparent; color: var(--text-muted); }
.settings-sidebar-toggle:hover { background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); color: var(--accent); }
.settings-sidebar-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.settings-sidebar-sections { display: grid; gap: .35rem; margin: .15rem 0 .5rem 1.6rem; padding-left: .5rem; border-left: 1px solid var(--panel-border); }
.settings-sidebar-sections[hidden] { display: none !important; }
.settings-sidebar-section-label { padding: .55rem .55rem .1rem; color: var(--text-soft); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.settings-sidebar-item { min-height: 2rem; margin: .05rem 0; padding: .42rem .55rem; font-size: .8rem; }
.settings-sidebar-item i { font-size: .95rem; }
body.app-sidebar-collapsed .settings-sidebar-toggle,
body.app-sidebar-collapsed .settings-sidebar-sections { display: none !important; }

.settings-overview-page { width: 100%; }
.settings-overview-page .page-title-box { margin-bottom: 1rem; }
.settings-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--app-layout-gutter, 1rem); }
.settings-overview-card { min-width: 0; margin: 0; }
.settings-overview-links { display: grid; gap: .25rem; }
.settings-overview-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .65rem; border-radius: var(--ops-radius, 8px); color: var(--text-muted); text-decoration: none; }
.settings-overview-link:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); color: var(--text-primary); }
.settings-overview-link > i:first-child { width: 1.2rem; color: var(--accent); }
.settings-overview-link > i:last-child { color: var(--text-soft); }

.settings-module-page.page-content,
.settings-doc-page.page-content { width: 100%; }
.settings-module-page.page-content .page-title-box,
.settings-doc-page.page-content .page-title-box { margin-bottom: 1rem; }