/*
  File: styles-part-00-app-core.css
  Purpose: Active core application styles split from styles.css.
*/

:root {
  color-scheme: light;
  --bg: #f6f7f3;
  --panel: #ffffff;
  --ink: #1e2424;
  --muted: #66706d;
  --line: #dfe4dd;
  --accent: #3333FF;
  --accent-strong: #2424cc;
  --warm: #c56c3f;
  --danger: #a63d40;
  --shadow: none;
  --icon-font: "Segoe UI Symbol", "Segoe UI", "Arial Unicode MS", Arial, sans-serif;
  --table-columns: 28px 28px 28px 58px 174px 300px 90px 200px 260px;
  --table-min-width: 1182px;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 980px;
  height: 100vh;
  overflow: hidden;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns var(--pd-sidebar-transition-duration, 260ms) var(--pd-sidebar-transition-timing, ease);
}

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

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #edf1ee;
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 5px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  background: #fff;
  cursor: pointer;
  font-family: var(--icon-font);
  font-size: 20px;
  line-height: 1;
}

.app-shell.sidebar-collapsed .sidebar {
  padding: 8px 4px;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  opacity: 0;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  right: 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin: -4px -4px 2px;
  padding: 6px 36px 6px 8px;
  border-bottom: 4px solid #f29335;
  background: transparent;
  overflow: hidden;
}

.brand > div:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.brand-logo {
  content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwAC0DASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAABAUCBgcDAf/EAC4QAAEEAQMDAwQBBAMAAAAAAAECAwQFEQAhMQYSQRMiURQVMmFSB3GRsUKB0f/EABkBAAIDAQAAAAAAAAAAAAAAAAMEAQIFAP/EACoRAAIBAwMCAwkAAAAAAAAAAAECAAMREhMhMXHwBFHBFCIyQYGRodHh/9oADAMBAAIRAxEAPwDf9VCX1RIuPqIHTTkdMhL/AKH1chYCE4/IpTyrwBt8+BuB111BYRrWrgVaFvBZcU8lpWCSB2gFXAwVZ3841CgoIFS436NbARYsnMqUXFKbjE8IBUTleDyMc6bSkqJm/J4H7i7OztgvA5/ktlFWS62Ir7hZO2Ex0hTjyx2gbbBKRsB/7pTbQOoa2xXZ1Nq25CKu96BMICf2ELP458A4AP8AjStdqw6lbEaZfznUAJL7CSEoUFdqsjHI7e7955313jWf3VK4sZ5UhHaRIrrVHuIyUpAOOT2k4J8jUBaiksR127tJJQjEH8ywU3UcK6ky4rOUSYqgHG1fB4UD5H+tONZFbw0UiJNp0zXFkKaLDyWnFh2O5zhSSSDukH28Y321pXT9p93o4UxfaH3WELdQn/iopB1FaiAA6cGdSqEko/MzuvZfX1dJ9eQJERDz1hAbbHcZKseonf8Aikkbfyx8bOpLCpLNP0845gzQqRMHeApY3KkqQQTgnhWfA0liwoFN186y08Hmpi1wkxnM90YuBSlbfxz24PkL+RqwTQ/FrKq1YbWpyqPoSGEnAAHtVhIBJJ2xvwc6Yqn31t5bdYGn8DX894ezfKhqTDjVRDLbHektghOcfiPnSq5eN1UJtURVQ7CI2uQy52j1E9pwRuCNwTjbY6Hv48Kx9KXSeopxeQ6y3sG8fI8HP+tSmOxGKVNLToVJsZwDby1HdsK3KVKAITnBAGsfww8V7Tix2HPSaNfR0Mh84XNjotq4zAS1DnQ1PyXWVh303G/clSVAj3AgcDweM6A6Hnqg/cJlzPYb+pU2iP2fitCEkd6QOEnO39j8aa3jkeqr1Plv6lNTCUhRcxlSnMICSQAPknA0s/p/03WiFLU6/wDcHAtKO7JKGkjJSgHycKyccZA1qqV0Wvxfv0iDX1Vtzbv1jPrGnUJsS+hVImS4x95ZWUu4HG3CxyMcjbB0p6L6lkzkrhSHFtWzSilAlJKRJR4K8D8xxn9DnfWkarlx0qbBa3YtnMjKUDlr1SttSvBwTt/1+vjQ0qqyadT6GXamyvmn2gsqgp31pdkUjzTnclJEdQKdl93g49xUQcjJ13jQ2qWO59BBarmUJIelyFBSwkEkbAkq3UcZOqXb9M3lc56Sg7IglQKDHT35czhJKeQRk/5502qujLuSlMmysFRX1ElXYcuH95HBzvydFZBjc1NpRXOWybxG7czuo7SXWQIE6bWKQGEDHphz3JKnXFkbElOASNgeM61GmrGKepjwmGGmUtpHclrPb3eTk7nfyde1dWisjBsSJEhwj3uvulRUfnHA/sANHaBWrBgEQWAhaVIqcmNyZ//Z");
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-top: 0;
  border-radius: 0;
  object-fit: contain;
  background: #fff;
  box-shadow: none;
  display: none;
}

.brand-logo-fallback {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-top: 0;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  background: #377be8;
  box-shadow: 0 0 0 1px rgba(21, 94, 89, 0.14);
  display: none;
}

.brand-logo {
  content: url("assets/app-icon.png");
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: transparent;
}

.brand-logo-fallback[hidden] {
  display: none;
}

.brand h1,
.brand p,
.toolbar h2,
.detail-heading h2,
.nav-section h2,
.eyebrow {
  margin: 0;
}

.brand h1 {
  color: var(--ink);
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  line-height: 1.25;
}

.brand-title-kh {
  display: block;
  min-width: 0;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-title-separator,
.brand-title-en {
  font-family: "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand p,
.eyebrow {
  color: var(--muted);
  font-size: 12px;
}

.eyebrow {
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 400;
}

.primary-action,
.secondary-action,
.nav-item,
.icon-button {
  border: 0;
  cursor: pointer;
}

.primary-action {
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  color: #fff;
  font-weight: 400;
  background: var(--accent);
}

.primary-action:hover {
  background: var(--accent-strong);
}

#addItemButton {
  display: none;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  font-weight: 650;
  background: #fff;
}

#attachmentInput {
  color: var(--muted);
  font-weight: 400;
}

#attachmentInput::placeholder {
  color: #8a928f;
  opacity: 1;
  font-weight: 400;
}

.attachment-tools {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 7px;
  border-radius: 5px;
  background: #fbfcfb;
}

.attachment-tools .secondary-action {
  min-width: 0;
  padding: 0 6px;
  font-weight: 400;
}

.attachment-tools .menu3-check-progress-action {
  border-color: rgba(31, 111, 120, 0.34);
  color: #164e63;
  background: #ecfeff;
  font-weight: 700;
}

.attachment-tools .menu3-sub-actions-button {
  border-color: rgba(30, 64, 175, 0.34);
  color: #1e3a8a;
  background: #eff6ff;
  font-weight: 700;
}

.attachment-status {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.attachment-dialog {
  width: min(620px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  background: transparent;
}

.attachment-dialog::backdrop {
  background: rgba(20, 28, 26, 0.22);
}

.import-mode-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
}

.import-mode-dialog::backdrop {
  background: rgba(20, 28, 26, 0.28);
}

.import-mode-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.2);
}

.import-mode-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.import-mode-actions {
  display: grid;
  gap: 10px;
}

.import-mode-actions button {
  justify-content: center;
  min-height: 42px;
  white-space: normal;
}

.attachment-panel {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.attachment-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  color: var(--muted);
  background: #fff;
}

.attachment-upload-zone {
  display: grid;
  place-items: center;
  min-height: 270px;
  padding: 34px 20px;
  border: 2px dashed #d8edf5;
  border-radius: 8px;
  background: #fbfdfe;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease;
}

.attachment-upload-zone:hover,
.attachment-upload-zone.drag-over,
.attachment-upload-zone:focus-visible {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  outline: none;
}

.attachment-upload-zone strong {
  margin-top: 10px;
  color: #071923;
  font-family: "Times New Roman", serif;
  font-size: 15px;
}

.attachment-upload-zone small,
.attachment-upload-zone p {
  margin: 7px 0 0;
  color: #7d9aab;
  font-family: "Times New Roman", serif;
  font-size: 12px;
}

.attachment-upload-zone kbd {
  padding: 1px 6px;
  border: 1px solid #d6e1e8;
  border-radius: 4px;
  background: #fff;
  color: #566b78;
  font-family: "Times New Roman", serif;
  font-size: 11px;
}

.upload-folder-icon {
  position: relative;
  width: 70px;
  height: 54px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ffd92f, #ff9f16);
  box-shadow: inset -12px 0 0 rgba(255, 124, 11, 0.26);
}

.upload-folder-icon::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -8px;
  width: 36px;
  height: 16px;
  border-radius: 5px 5px 0 0;
  background: #ffcb27;
  box-shadow: 12px 0 0 -5px #ff7a0b;
}

.upload-folder-icon::after {
  content: "...";
  position: absolute;
  right: 6px;
  top: 5px;
  color: #21aee9;
  font-family: "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -1px;
}

.upload-folder-icon span {
  position: absolute;
  left: 25px;
  top: 22px;
  width: 22px;
  height: 44px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #9ee06d, #43b467);
}

.upload-folder-icon span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  width: 0;
  height: 0;
  border-left: 23px solid transparent;
  border-right: 23px solid transparent;
  border-bottom: 25px solid #8ad562;
}

.attachment-browse-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  border: 1px solid #87929c;
  border-radius: 4px;
  color: #6b6f78;
  background: #fff;
  cursor: pointer;
  font-family: "Times New Roman", serif;
  font-size: 20px;
}

.secondary-action:hover {
  border-color: #b9c5bf;
}

.danger {
  border-color: var(--danger);
  color: #fff;
  background: var(--danger);
}

.danger:hover {
  border-color: #842f32;
  color: #fff;
  background: #842f32;
}

.nav-section {
  display: grid;
  gap: 4px;
}

.nav-menu-group {
  display: grid;
  gap: 6px;
}

.nav-menu-group + .nav-menu-group {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.nav-section h2 {
  font-family: "Khmer OS Muol Light", "Khmer OS Siemreap", "Times New Roman", serif;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(2px);
}

.nav-item.active {
  color: var(--accent);
  background: #f1f7f5;
  border-radius: 0 5px 5px 0;
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0;
  background: var(--accent);
}

.nav-item:hover {
  color: var(--accent);
}

.menu-two .nav-item.active {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.09);
  box-shadow: inset 3px 0 0 #0f766e;
}

.dashboard-nav-item {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  font-family: var(--icon-font);
  font-size: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip {
  padding: 4px 7px;
  border: 1px solid #ced8d2;
  border-radius: 999px;
  color: var(--accent-strong);
  background: #fff;
  cursor: pointer;
}

.sidebar-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: none;
}

.sidebar-tools .secondary-action {
  min-width: 0;
  padding: 0 8px;
}

.save-status-bar {
  --save-accent: var(--accent);
  --save-accent-strong: var(--accent-strong);
  --save-soft: color-mix(in srgb, var(--accent) 7%, var(--panel));
  --save-line: color-mix(in srgb, var(--accent) 20%, var(--line));
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 9px 10px;
  border: 1px solid var(--save-line);
  border-radius: 6px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--save-soft), var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--save-accent) 72%, var(--panel));
}

.save-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.save-status-text {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--save-accent-strong) 82%, var(--ink));
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-status-percent {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.save-status-track {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--save-accent) 14%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--save-accent) 10%, var(--panel));
}

.save-status-progress {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--save-accent), var(--save-accent-strong));
  transition: width 180ms ease, background 180ms ease;
}

.save-status-bar.is-saving .save-status-text {
  color: var(--save-accent-strong);
}

.save-status-bar.is-saving .save-status-progress {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.18) 0 7px,
      transparent 7px 14px
    ),
    linear-gradient(90deg, var(--save-accent), var(--save-accent-strong));
}

.save-status-bar.is-error {
  --save-accent: var(--danger);
  --save-accent-strong: color-mix(in srgb, var(--danger) 72%, #000);
  --save-line: color-mix(in srgb, var(--danger) 26%, var(--line));
}

.app-shell.sidebar-collapsed .save-status-bar {
  display: none;
}

.excel-export-button {
  grid-column: 1 / -1;
}

.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.toolbar h2 {
  font-size: 18px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: stretch;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.download-selected-button {
  min-width: 78px;
  height: 32px;
  white-space: nowrap;
}

.reference-action-button {
  min-width: 76px;
  height: 32px;
  white-space: nowrap;
}

.settings-button {
  width: 36px;
  height: 32px;
  padding: 0;
  font-family: var(--icon-font);
  font-size: 18px;
}

.logout-button {
  min-width: 64px;
  height: 32px;
  white-space: nowrap;
}

.print-button {
  min-width: 58px;
  height: 32px;
  white-space: nowrap;
}

.clear-search-button {
  min-width: 58px;
  height: 32px;
  white-space: nowrap;
}

.search-box span {
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  min-width: 0;
}

.import-label input {
  display: none;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 6px var(--detail-width, 360px);
  gap: 0;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 8px;
  transition: grid-template-columns var(--pd-right-drawer-transition-duration, 180ms) var(--pd-right-drawer-transition-timing, ease);
}

.content-grid.resizing {
  cursor: col-resize;
  user-select: none;
}

.content-grid.detail-collapsed {
  grid-template-columns: minmax(440px, 1fr) 3px 8px;
}

.content-grid.dashboard-mode {
  grid-template-columns: minmax(0, 1fr);
}

.content-grid.dashboard-mode .library-panel {
  border-radius: 0;
}

.content-grid.dashboard-mode .library-panel > .table-header,
.content-grid.dashboard-mode .library-panel > .column-filter-row {
  display: none;
}

.library-panel,
.detail-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.library-panel {
  overflow: auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.library-panel.inspector-mode > .table-header,
.library-panel.inspector-mode > .column-filter-row {
  display: none;
}

.resize-handle {
  min-height: 0;
  height: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #edf1ee;
  cursor: col-resize;
}

.resize-handle:hover,
.content-grid.resizing .resize-handle {
  background: var(--accent);
}

.content-grid.detail-collapsed .resize-handle {
  border-color: var(--accent);
  background: var(--accent);
}

.detail-panel {
  position: relative;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: background 260ms ease;
}

.detail-panel form {
  transition: opacity 180ms ease;
}

.content-grid.detail-collapsed .detail-panel {
  border-color: transparent;
  background: transparent;
  cursor: e-resize;
}

.content-grid.detail-collapsed .detail-panel form {
  opacity: 1;
  pointer-events: auto;
}

.content-grid.detail-collapsed #itemForm > :not(.detail-heading),
.content-grid.detail-collapsed #inspectorForm > :not(.detail-heading),
.content-grid.detail-collapsed #placeholderForm > :not(.detail-heading),
.content-grid.detail-collapsed .detail-heading > div:first-child,
.content-grid.detail-collapsed #detailPinButton,
.content-grid.detail-collapsed #starButton {
  display: none;
}

.table-header,
.column-filter-row,
.item-row {
  display: grid;
  grid-template-columns: var(--table-columns);
  column-gap: 8px;
  row-gap: 0;
  align-items: center;
  min-width: var(--table-min-width);
}

.table-header {
  position: sticky;
  top: 0;
  z-index: 5;
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  min-height: 42px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: #D1EFFB;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

.table-action-cell {
  position: relative;
  display: grid;
  grid-template-columns: 18px 18px 18px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 3px;
  overflow: visible;
  width: 100%;
}

.table-add-button {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  background: #fff;
  cursor: pointer;
  font-family: var(--icon-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.table-clear-button {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid #c5d0ca;
  border-radius: 50%;
  color: #7a2426;
  background: #fff;
  cursor: pointer;
  font-family: var(--icon-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.table-clear-button:hover,
.table-clear-button:focus-visible {
  border-color: var(--danger);
  color: #fff;
  background: var(--danger);
  outline: none;
}

.table-add-menu {
  position: absolute;
  top: 28px;
  left: 0;
  z-index: 4;
  display: grid;
  min-width: 210px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 28, 26, 0.14);
}

.table-add-menu[hidden] {
  display: none;
}

.table-add-menu button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.table-add-menu button:hover {
  background: #eef8fb;
}

.table-header-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  padding-right: 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-header .table-action-cell {
  display: grid;
  grid-template-columns: 18px 18px 18px;
  justify-content: center;
  justify-items: center;
  padding-right: 0;
}

.column-resize-handle {
  position: absolute;
  top: 5px;
  right: -4px;
  width: 8px;
  height: calc(100% - 10px);
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  cursor: col-resize;
}

.column-resize-handle:hover,
.column-resize-handle:focus-visible {
  background: rgba(51, 51, 255, 0.18);
  outline: none;
}

body.column-resizing {
  cursor: col-resize;
  user-select: none;
}

.item-list {
  min-height: 0;
  overflow: visible;
}

.item-row {
  width: 100%;
  min-height: 42px;
  padding: 5px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.column-filter-row {
  position: sticky;
  top: 42px;
  z-index: 5;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: #f7faf8;
}

.column-filter-row input {
  width: 100%;
  min-width: 0;
  height: 28px;
  margin-left: -3px;
  padding: 4px 3px;
  border: 1px solid #d5dfda;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.column-filter-row input:focus {
  outline: 2px solid rgba(25, 96, 72, 0.18);
  border-color: var(--accent);
}

.item-row:hover,
.item-row.active,
.item-row.selected-for-download {
  background: #f1f7f5;
}

.item-row:focus-visible {
  outline: 2px solid rgba(51, 51, 255, 0.28);
  outline-offset: -2px;
}

.item-row.pinned-row {
  border-left: 0;
  border-radius: 0;
  background: #fbfcff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.item-row.pinned-row.active,
.item-row.pinned-row:hover {
  background: #f1f7f5;
}

.work-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfb;
}

.work-summary span {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.work-summary strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.progress-dashboard {
  display: grid;
  align-content: start;
  background: #fff;
  border: 1px solid #dfe7e2;
}

.progress-top-band {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 36px;
  padding: 5px 14px;
  background: #2cad70;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.progress-top-band span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.progress-top-band strong {
  font-size: 16px;
  line-height: 1;
}

.progress-total-label {
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  font-size: 13px;
}

.progress-table-header,
.progress-filter-row,
.progress-row {
  border-left: 0;
  border-right: 0;
}

.progress-table-header {
  background: #fff;
  border-bottom: 1px solid #dfe7e2;
}

.progress-table-header span {
  color: #111;
  justify-content: flex-start;
  text-align: left;
}

.progress-filter-row {
  background: #fff;
}

.progress-row {
  background: #fff;
  min-height: 36px;
}

.progress-row > span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.progress-row .progress-row-number {
  justify-content: center;
  text-align: center;
}

.progress-inline-number {
  display: inline-flex;
  grid-column: 2;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding-right: 0;
  text-align: left;
}

.progress-row .progress-name-cell {
  background: #d6f5e5;
  justify-content: start;
  text-align: left;
}

.work-table-header,
.work-row {
  grid-template-columns: 28px minmax(260px, 1fr) 130px 150px;
  min-width: 620px;
}

.task-table {
  display: grid;
}

.task-table-header,
.task-filter-row,
.work-table-header,
.work-filter-row {
  position: sticky;
  z-index: 5;
}

.task-table-header,
.work-table-header {
  top: 0;
}

.task-filter-row,
.work-filter-row {
  top: 42px;
}

.task-row span,
.task-table-header span,
.work-row span,
.work-table-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #aab4ae;
}

.work-status-dot.todo {
  background: #aab4ae;
}

.work-status-dot.doing {
  background: var(--warm);
}

.work-status-dot.done {
  background: #2f8f62;
}

.select-cell {
  display: grid;
  grid-template-columns: 18px 18px 18px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 3px;
  overflow: visible;
  width: 100%;
  min-width: 0;
}

.filter-select-dot {
  grid-column: 1;
  width: 14px;
  height: 14px;
  border: 1px solid #c5d0ca;
  border-radius: 50%;
  background: #fff;
}

.row-select-button {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid #c5d0ca;
  border-radius: 50%;
  color: #fff;
  background: #fff;
  cursor: pointer;
  font-family: var(--icon-font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.row-select-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.row-select-button:focus-visible {
  outline: 2px solid rgba(51, 51, 255, 0.24);
  outline-offset: 2px;
}

.select-visible-button {
  margin-left: 2px;
}

.item-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.document-title-cell {
  justify-self: stretch;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  text-align: left;
}

.document-title-cell .item-title-line,
.document-title-cell .item-title-line > span:last-child {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

.item-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-row .legal-reference-cell {
  display: block;
  line-height: 1.35;
  max-height: 3.9em;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}


.item-row.document-status-missing,
.item-row.document-status-missing > span,
.item-row.document-status-missing strong,
.item-row.document-status-missing small {
  color: #d6b31f;
}

.item-row.document-status-broken,
.item-row.document-status-broken > span,
.item-row.document-status-broken strong,
.item-row.document-status-broken small {
  color: #f87171;
}

.item-title-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.item-title-line > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-pin-label {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  box-sizing: border-box;
}

.data-pin-label .data-pin-icon {
  width: 16px;
  height: 16px;
}

.star-label {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  color: #111;
  font-family: var(--icon-font);
  line-height: 1;
  box-sizing: border-box;
}

.progress-row .progress-inline-number {
  grid-column: 2;
  justify-self: start;
}

.item-title small {
  color: var(--muted);
  font-size: 11px;
}

.detail-panel {
  padding: 8px 12px 12px;
  overflow: auto;
}

.detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.detail-import-button {
  height: 30px;
  min-width: 86px;
  width: max-content;
  margin: 5px 0 7px;
  padding: 0 8px;
  white-space: nowrap;
}

.detail-heading h2 {
  max-width: 245px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.icon-button {
  font-family: var(--icon-font);
  width: 30px;
  height: 30px;
  border-radius: 5px;
  color: var(--warm);
  font-size: 19px;
  background: #fff7ef;
}

.pin-button {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: #eaf7ff;
  color: #ed2a18;
}

.panel-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: 104px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #123246;
  border-radius: 5px;
  background: #fff;
}

.legacy-panel-button {
  display: none;
}

.panel-arrow-toggle {
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  left: -23px;
  z-index: 9;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-family: var(--icon-font);
  font-size: 21px;
  line-height: 1;
}

.content-grid.detail-collapsed .panel-arrow-toggle {
  position: absolute;
  top: 10px;
  left: -23px;
  z-index: 9;
}

.pin-button[aria-pressed="true"] {
  border-color: #50bceb;
  color: #ed2a18;
  background: #dff5ff;
}

.data-pin-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transform: rotate(-45deg);
}

.data-pin-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 9px;
  height: 13px;
  border-radius: 1px;
  background: linear-gradient(135deg, #ff4b38 0 50%, #c92f22 50% 100%);
}

.data-pin-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 20px;
  height: 7px;
  border-radius: 1px;
  background: linear-gradient(135deg, #ef2a1a 0 48%, #b82a20 48% 100%);
  box-shadow: -6px 7px 0 -3px #f7fbff;
}

.panel-switch-button {
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border: 0;
  color: #111;
  background: #fff;
  cursor: pointer;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.panel-switch-button + .panel-switch-button {
  border-left: 1px solid #123246;
}

.panel-switch-button[aria-pressed="true"] {
  color: #fff;
  background: #3333FF;
}

.panel-switch-button:hover,
.panel-switch-button:focus-visible {
  outline: 2px solid rgba(51, 51, 255, 0.22);
  outline-offset: -2px;
}

.icon-button:hover,
.icon-button:focus-visible {
  outline: 2px solid rgba(51, 51, 255, 0.16);
  outline-offset: 2px;
}

#itemForm {
  display: grid;
  gap: 9px;
}

#inspectorForm {
  display: grid;
  gap: 9px;
}

#placeholderForm {
  display: grid;
  gap: 9px;
}

#inspectorForm[hidden],
#itemForm[hidden],
#placeholderForm[hidden] {
  display: none;
}

.inspector-fields {
  display: grid;
  gap: 9px;
}

.task-fields {
  display: grid;
  gap: 9px;
}

.task-fields[hidden] {
  display: none;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
}

.year-grid {
  grid-template-columns: 1fr;
}

.single-field-grid {
  grid-template-columns: 1fr;
}

label {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 8px;
  color: var(--muted);
  font-weight: 400;
  background: #fff;
}

input::placeholder,
textarea::placeholder {
  color: #8a928f;
  opacity: 1;
  font-weight: 400;
}

textarea {
  min-height: 106px;
  resize: vertical;
}

.record-meta {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfcfb;
  color: var(--muted);
}

.record-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.record-meta span {
  color: var(--ink);
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", "Noto Sans Khmer", serif;
  font-size: 11px;
  font-weight: 400;
}

.record-meta strong {
  min-width: 0;
  color: var(--ink);
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.form-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

#placeholderForm .form-actions {
  grid-template-columns: 118px minmax(0, 1fr);
}

#placeholderForm .form-actions:has(#newWorkItemButton[hidden]) {
  grid-template-columns: 118px minmax(0, 1fr);
}

#placeholderForm #newWorkItemButton {
  display: none;
}

#itemForm > .form-actions,
#inspectorForm > .form-actions,
#placeholderForm > .form-actions {
  position: sticky;
  top: 0;
  z-index: 8;
  order: -1;
  margin: -8px -12px 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.form-actions .primary-action {
  width: 100%;
  min-width: 0;
  font-weight: 400;
}

#itemForm > .form-actions,
#inspectorForm > .form-actions,
#placeholderForm > .form-actions {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
}

#itemForm > .form-actions > .secondary-action.danger,
#inspectorForm > .form-actions > .secondary-action.danger,
#placeholderForm > .form-actions > .secondary-action.danger,
#itemForm > .form-actions > .primary-action,
#inspectorForm > .form-actions > .primary-action,
#placeholderForm > .form-actions > .primary-action {
  min-height: 58px;
  border-radius: 9px;
  font-size: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}


.settings-dialog {
  width: min(960px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20, 28, 26, 0.22);
}

.settings-dialog::backdrop {
  background: rgba(14, 23, 22, 0.36);
}

.print-dialog {
  width: min(1180px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

.settings-panel {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 16px;
}

.settings-header {
  position: sticky;
  top: -16px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.settings-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.settings-edit-approval {
  align-self: auto;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(51, 51, 255, 0.28);
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(51, 51, 255, 0.16);
  cursor: pointer;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", "Noto Sans Khmer", serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.settings-edit-approval:disabled {
  border-color: #cdd8d2;
  color: #6e7a75;
  background: #eef4f1;
  box-shadow: none;
  cursor: default;
}

.settings-edit-locked .settings-tab-panel {
  opacity: 0.72;
}

.settings-tabs {
  position: sticky;
  top: 58px;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  overflow-x: auto;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.settings-tab {
  min-height: 36px;
  padding: 4px 26px;
  border: 0;
  border-radius: 0;
  background: #f0f0f0;
  color: var(--ink);
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", "Noto Sans Khmer", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.settings-tab.active {
  background: #e7e7e7;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.settings-header h2,
.settings-section h3,
.settings-section h4 {
  margin: 0;
}

.settings-header h2 {
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", "Noto Sans Khmer", serif;
  font-weight: 400;
}

.settings-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfcfb;
}

.settings-tab-panel[hidden] {
  display: none !important;
}

.settings-section h3 {
  font-size: 14px;
}

.settings-section h4 {
  font-size: 12px;
  color: var(--muted);
}

.settings-error-message {
  margin: 0;
  padding: 10px;
  border: 1px solid #f0c0c0;
  border-radius: 5px;
  color: #8a1f1f;
  background: #fff4f4;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

.settings-menu-block {
  background: #f8fbfa;
}

.reference-settings {
  display: grid;
  gap: 8px;
}

.reference-settings label {
  display: grid;
  gap: 4px;
}


.settings-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.settings-path-row input {
  min-width: 0;
}

.settings-path-row .secondary-action {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .settings-path-row {
    grid-template-columns: 1fr;
  }

  .settings-path-row .secondary-action {
    width: 100%;
  }
}

.settings-subsection {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e1e9e4;
  border-radius: 4px;
  background: #fff;
}

.app-password-tools {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.app-password-tools h4 {
  margin: 0;
}

.print-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.print-settings-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-weight: 650;
}

.print-settings-grid select {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
}

.print-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

.print-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  min-height: min(640px, calc(100vh - 190px));
  overflow: hidden;
}

.print-layout .print-settings-grid {
  align-content: start;
  overflow: auto;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.print-preview-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 14%, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #f2f6fb 100%);
}

.print-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.74);
}

.print-preview-toolbar h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.print-preview-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.print-preview-stage {
  overflow: auto;
  padding: 20px;
}

.print-preview-page {
  min-height: 100%;
  min-width: 720px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
}

.print-preview-content {
  --print-preview-scale: .72;
  width: calc(100% / var(--print-preview-scale));
  transform: scale(var(--print-preview-scale));
  transform-origin: top left;
  color: var(--ink);
}

.print-preview-content.print-preview-mono {
  filter: grayscale(1);
}

.print-preview-content.print-preview-highest {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.print-preview-clone {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.print-preview-content .data-grid-shell,
.print-preview-content .data-grid-scroll,
.print-preview-content #itemList {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.print-preview-content .column-filter-row,
.print-preview-content .table-add-menu,
.print-preview-content .floating-action-button {
  display: none !important;
}

.print-preview-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.print-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}

@media (max-width: 860px) {
  .print-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .print-layout .print-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .print-preview-page {
    min-width: 620px;
  }
}


.inspector-table {
  display: grid;
}

.inspector-table-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

.inspector-filter-row {
  position: sticky;
  top: 42px;
  z-index: 5;
}

.inspector-table-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.45;
}

.inspector-table-header .table-header-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 0;
  text-align: left;
}

.inspector-table-header .table-action-cell {
  display: grid;
  grid-template-columns: 18px 18px 18px;
  justify-content: center;
  justify-items: center;
}

.inspector-row {
  min-height: 64px;
}

.photo-cell {
  display: grid;
  align-items: center;
  justify-items: start;
  padding: 5px 0;
  overflow: visible;
}

.photo-filter-placeholder {
  justify-self: start;
}

.photo-cell-button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid #cbd8d2;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}

.photo-cell-button:hover,
.photo-cell-button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  font-family: var(--icon-font);
  font-size: 22px;
  font-weight: 700;
}

.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-preview-cell {
  justify-items: center;
}

.document-preview-button {
  width: 62px;
  height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.document-preview-button.is-empty {
  background: #ffffff;
}

.document-preview-button.has-file {
  border-color: #b9cbe0;
}

.document-preview-placeholder {
  color: #2c4466;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.document-preview-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-preview-placeholder img.document-preview-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.document-preview-pdf-icon {
  display: block;
  filter: drop-shadow(0 4px 8px rgba(153, 27, 31, 0.16));
}

.photo-detail-panel {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfcfb;
}

.photo-detail-preview {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid #cbd8d2;
  border-radius: 5px;
  color: var(--accent);
  background: #fff;
  font-family: var(--icon-font);
  font-size: 28px;
  font-weight: 700;
  overflow: hidden;
}

.photo-detail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-detail-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.photo-detail-body strong {
  font-size: 14px;
}

.photo-detail-body p {
  margin: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-detail-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  background: transparent;
}

.photo-preview-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100vh - 36px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  overflow: visible;
}

.photo-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
}

.photo-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(860px, calc(100vh - 36px));
  border: 1px solid #d5dee9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.photo-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #dbe4ee;
  background: #fff;
}

.photo-preview-header .eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.photo-preview-header h2 {
  margin: 0;
  max-width: 72vw;
  overflow: hidden;
  color: #172033;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 24px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-preview-close {
  width: 44px;
  height: 44px;
  border: 1px solid #d2dde8;
  border-radius: 8px;
  color: #172033;
  background: #f8fafc;
  font-family: "Times New Roman", serif;
  font-size: 24px;
}

.photo-preview-stage {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 18px;
  background: #111827;
  overflow: auto;
}

.photo-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

@media (max-width: 640px) {
  .photo-preview-dialog {
    width: calc(100vw - 20px);
  }

  .photo-preview-stage {
    min-height: 260px;
    padding: 10px;
  }
}

.menu3-sub-actions-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(1620px, calc(100vw - 28px));
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.menu3-sub-actions-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.menu3-sub-actions-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(820px, calc(100vh - 28px));
  min-height: min(620px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  border: 1px solid #d5dee9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
  overflow: hidden;
}

.menu3-sub-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #dbe4ee;
  background: #fff;
}

.menu3-sub-actions-header h2 {
  margin: 0;
  color: #172033;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 24px;
  line-height: 1.15;
}

.menu3-sub-actions-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 14px;
}

.menu3-sub-actions-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.menu3-sub-actions-close {
  width: 44px;
  height: 44px;
  border: 1px solid #d2dde8;
  border-radius: 8px;
  color: #172033;
  background: #f8fafc;
  font-family: "Times New Roman", serif;
  font-size: 24px;
}

.menu3-sub-actions-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  background: #f8fafc;
}

.menu3-sub-actions-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fff;
}

.menu3-sub-actions-table {
  width: 100%;
  min-width: 1680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.menu3-sub-actions-table th,
.menu3-sub-actions-table td {
  padding: 10px;
  border-bottom: 1px solid #e7eef6;
  text-align: left;
  vertical-align: top;
}

.menu3-sub-actions-table th:nth-child(1),
.menu3-sub-actions-table td:nth-child(1) {
  width: 270px;
}

.menu3-sub-actions-table th:nth-child(2),
.menu3-sub-actions-table td:nth-child(2) {
  width: 120px;
}

.menu3-sub-actions-table th:nth-child(3),
.menu3-sub-actions-table td:nth-child(3) {
  width: 200px;
}

.menu3-sub-actions-table th:nth-child(4),
.menu3-sub-actions-table td:nth-child(4) {
  width: 220px;
}

.menu3-sub-actions-table th:nth-child(5),
.menu3-sub-actions-table td:nth-child(5) {
  width: 320px;
}

.menu3-sub-actions-table th:nth-child(6),
.menu3-sub-actions-table td:nth-child(6) {
  width: 110px;
}

.menu3-sub-actions-table th:nth-child(7),
.menu3-sub-actions-table td:nth-child(7) {
  width: 260px;
}

.menu3-sub-actions-table th:nth-child(8),
.menu3-sub-actions-table td:nth-child(8) {
  width: 260px;
}

.menu3-sub-actions-table th:nth-child(9),
.menu3-sub-actions-table td:nth-child(9) {
  width: 120px;
}

.menu3-sub-actions-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #1f2937;
  background: #e8eef5;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 15px;
  font-weight: 700;
}

.menu3-sub-actions-table input,
.menu3-sub-actions-table textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cbd8e6;
  border-radius: 10px;
  color: #172033;
  background: #fff;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 16px;
  line-height: 1.35;
}

.menu3-sub-actions-table input[readonly] {
  color: #475569;
  background: #f8fafc;
}

.menu3-sub-actions-table textarea {
  min-height: 86px;
  resize: vertical;
}

.menu3-sub-actions-file-cell {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.menu3-sub-actions-file-summary {
  min-height: 34px;
  border: 1px solid #d8e4ef;
  border-radius: 10px;
  padding: 8px 10px;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.25;
}

.menu3-sub-actions-file-summary.has-file {
  color: #0f7490;
  background: #ecfeff;
  border-color: #9de8f3;
}

.menu3-sub-actions-file-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu3-sub-actions-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.menu3-sub-actions-file-actions .secondary-action {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
}

.menu3-sub-actions-dropzone {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border: 1px dashed #b8c9dc;
  border-radius: 12px;
  color: #44546a;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.menu3-sub-actions-dropzone strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.25;
}

.menu3-sub-actions-dropzone small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
}

.menu3-sub-actions-dropzone:hover,
.menu3-sub-actions-dropzone:focus-visible,
.menu3-sub-actions-dropzone.is-drag-over {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  outline: 0;
}

.menu3-sub-actions-dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.menu3-sub-actions-progress-field {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 180px;
}

.menu3-sub-actions-progress-field small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.menu3-sub-actions-progress-status {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid #d8e1ec;
  background: #f8fafc;
  color: #263244;
  font-family: "Times New Roman", serif;
  font-weight: 700;
}

.menu3-sub-actions-progress-status.is-completed {
  border-color: #98d4ad;
  background: #e9f8ee;
  color: #17663a;
}

.menu3-sub-actions-progress-status.is-ongoing {
  border-color: #9ec8f4;
  background: #edf6ff;
  color: #1f5a89;
}

.menu3-sub-actions-progress-status.is-pending {
  border-color: #f2b8b5;
  background: #fff1f1;
  color: #9f2f2f;
}

.menu3-sub-actions-progress-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf1;
}

.menu3-sub-actions-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f5a89;
}

.task-progress-cell {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.task-progress-value {
  max-width: 100%;
  color: #1f2937;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-entry-number-duplicate {
  color: #3333FF !important;
  font-weight: 800 !important;
}

.menu3-sub-action-counts {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  width: 100%;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.menu3-sub-action-count {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.menu3-sub-action-count strong,
.menu3-sub-action-count small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.menu3-sub-action-count strong {
  font-size: 12px;
}

.menu3-sub-action-count small {
  font-size: 10px;
  font-weight: 700;
}

.menu3-sub-action-count.is-completed {
  border-color: #86efac;
  color: #166534;
  background: #dcfce7;
}

.menu3-sub-action-count.is-ongoing {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #dbeafe;
}

.menu3-sub-action-count.is-pending {
  border-color: #fca5a5;
  color: #b91c1c;
  background: #fee2e2;
}

.operation-point-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #b7c9dd;
  border-radius: 8px;
  color: #15395f;
  background: #f8fbff;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.operation-point-count:hover {
  border-color: #245680;
  background: #eef6ff;
}

.operation-date-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-date-overdue {
  color: #b91c1c;
  font-weight: 700;
}

.operation-date-overdue-field {
  color: #b91c1c;
}

.operation-date-overdue-field input,
.operation-date-input-overdue {
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 700;
  background: #fff5f5;
}

.operation-date-rule-list {
  display: grid;
  gap: 10px;
}

.operation-date-rule-row {
  grid-template-columns: minmax(180px, 1.2fr) minmax(140px, .8fr) minmax(220px, 1fr) minmax(180px, 1fr);
  align-items: end;
}

.operation-date-rule-row strong,
.operation-date-rule-preview {
  font-family: "Times New Roman", var(--khmer-font), serif;
}

.operation-date-rule-preview {
  color: #526174;
  font-size: 15px;
}

.operation-point-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operation-point-select-button {
  min-height: 44px;
  padding-inline: 18px;
  font-family: "Times New Roman", var(--khmer-font), serif;
}

.operation-point-dialog {
  width: min(900px, calc(100vw - 36px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.operation-point-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.operation-point-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100vh - 36px));
  border: 1px solid #d5dee9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
  overflow: hidden;
}

.operation-point-header,
.operation-point-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #dbe4ee;
  background: #fff;
}

.operation-point-footer {
  justify-content: flex-end;
  border-top: 1px solid #dbe4ee;
  border-bottom: 0;
}

.operation-point-header h2 {
  margin: 0;
  color: #172033;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 24px;
  line-height: 1.15;
}

.operation-point-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 14px;
}

.operation-point-close {
  width: 44px;
  height: 44px;
  border: 1px solid #d2dde8;
  border-radius: 8px;
  color: #172033;
  background: #f8fafc;
  font-family: "Times New Roman", serif;
  font-size: 24px;
}

.operation-point-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #f8fafc;
}

.operation-point-option-list,
.operation-point-detail-list {
  display: grid;
  gap: 10px;
}

.operation-point-option,
.operation-point-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fff;
}

.operation-point-detail-card {
  grid-template-columns: minmax(0, 1fr);
}

.operation-point-option strong,
.operation-point-detail-card strong {
  display: block;
  color: #172033;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 18px;
}

.operation-point-option small,
.operation-point-detail-card p,
.operation-point-empty {
  margin: 4px 0 0;
  color: #526174;
  font-family: "Times New Roman", var(--khmer-font), serif;
  font-size: 15px;
  line-height: 1.5;
}

.operation-point-settings-grid {
  display: grid;
  gap: 14px;
}

.operation-point-settings-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fff;
}

.operation-point-settings-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operation-point-settings-card header strong,
.operation-point-settings-card header span {
  font-family: "Times New Roman", var(--khmer-font), serif;
}

.operation-point-add-row {
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) auto;
}

.operation-point-settings-list {
  display: grid;
  gap: 8px;
}

.operation-point-settings-row {
  grid-template-columns: minmax(160px, 1fr) minmax(240px, 2fr) auto;
  align-items: end;
}

.operation-point-settings-row textarea {
  min-height: 54px;
  resize: vertical;
}

.attachment-preview-dialog {
  width: min(1120px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 40px));
  padding: 0;
  border: 1px solid #cbd8e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}

.attachment-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.attachment-preview-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

.attachment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #dbe4ef;
  background: #f8fafc;
}

.attachment-preview-header strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2937;
  font-family: "Times New Roman", serif;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.attachment-preview-body {
  min-height: 0;
  background: #eef2f7;
}

.attachment-preview-body iframe,
.attachment-preview-body img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.attachment-preview-body img {
  object-fit: contain;
  padding: 14px;
}

.menu3-sub-actions-empty {
  padding: 24px !important;
  color: var(--muted);
  text-align: center !important;
}

.menu3-sub-actions-status {
  margin: 0;
}

/* USER UPDATE: Menu 3 Sub Actions AppDataGrid shell and compact file actions. */
.menu3-sub-actions-panel {
  grid-template-rows: auto minmax(0, auto);
  height: auto;
  min-height: 0;
  max-height: min(760px, calc(100vh - 36px));
}

.menu3-sub-actions-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.menu3-sub-actions-toolbar .primary-action {
  min-height: 36px;
  padding: 8px 18px;
  border-radius: 8px;
  text-transform: none;
}

.menu3-sub-actions-close {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.menu3-sub-actions-body {
  gap: 12px;
  padding: 14px 16px 16px;
  overflow: auto;
  max-height: calc(100vh - 150px);
}

.menu3-sub-actions-grid-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.menu3-sub-actions-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.menu3-sub-actions-grid-header h3 {
  margin: 0;
  color: #172033;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.menu3-sub-actions-grid-header small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 12px;
  line-height: 1.25;
}

.menu3-sub-actions-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.menu3-sub-actions-grid-tool {
  width: 36px;
  height: 36px;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
}

.menu3-sub-actions-grid-tool svg,
.menu3-sub-actions-file-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu3-sub-actions-grid-tool:disabled,
.menu3-sub-actions-columns-tool:disabled {
  opacity: 0.58;
  cursor: default;
}

.menu3-sub-actions-columns-tool {
  min-height: 36px;
  border-color: #d8e1ec;
  border-radius: 8px;
  background: #fff;
}

.menu3-sub-actions-table-wrap {
  max-height: min(430px, calc(100vh - 310px));
  border-radius: 10px;
}

.menu3-sub-actions-table {
  min-width: 1440px;
  border-collapse: separate;
  border-spacing: 0;
}

.menu3-sub-actions-table th,
.menu3-sub-actions-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.menu3-sub-actions-table th {
  color: #111827;
  background: #83909e;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 13px;
  font-weight: 600;
}

.menu3-sub-actions-table th:nth-child(1),
.menu3-sub-actions-table td:nth-child(1) {
  width: 210px;
}

.menu3-sub-actions-table th:nth-child(2),
.menu3-sub-actions-table td:nth-child(2) {
  width: 94px;
}

.menu3-sub-actions-table th:nth-child(3),
.menu3-sub-actions-table td:nth-child(3),
.menu3-sub-actions-table th:nth-child(4),
.menu3-sub-actions-table td:nth-child(4) {
  width: 180px;
}

.menu3-sub-actions-table th:nth-child(5),
.menu3-sub-actions-table td:nth-child(5) {
  width: 300px;
}

.menu3-sub-actions-table th:nth-child(6),
.menu3-sub-actions-table td:nth-child(6) {
  width: 92px;
}

.menu3-sub-actions-table th:nth-child(7),
.menu3-sub-actions-table td:nth-child(7) {
  width: 330px;
}

.menu3-sub-actions-table th:nth-child(8),
.menu3-sub-actions-table td:nth-child(8) {
  width: 230px;
}

.menu3-sub-actions-table th:nth-child(9),
.menu3-sub-actions-table td:nth-child(9) {
  width: 82px;
}

.menu3-sub-actions-table input,
.menu3-sub-actions-table textarea {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 13px;
  line-height: 1.35;
}

.menu3-sub-actions-table textarea {
  min-height: 50px;
  resize: vertical;
}

.menu3-sub-actions-file-cell {
  gap: 6px;
}

.menu3-sub-actions-file-current {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}

.menu3-sub-actions-file-current.has-file {
  border-color: #bfdbfe;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.menu3-sub-actions-file-current.is-empty .menu3-sub-actions-file-icon {
  visibility: hidden;
}

.menu3-sub-actions-file-type {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 26px;
  border: 1px solid #c7d8ea;
  border-radius: 7px;
  color: #1d4ed8;
  background: #f8fbff;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.menu3-sub-actions-file-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu3-sub-actions-file-name {
  display: block;
  color: #334155;
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu3-sub-actions-file-meta small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.1;
}

.menu3-sub-actions-file-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.menu3-sub-actions-file-icon.is-download {
  color: #2563eb;
}

.menu3-sub-actions-file-icon.is-remove {
  color: #ef4444;
}

.menu3-sub-actions-file-icon:hover:not(:disabled) {
  background: #eef4ff;
}

.menu3-sub-actions-file-icon.is-remove:hover:not(:disabled) {
  background: #fff1f2;
}

.menu3-sub-actions-file-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

.menu3-sub-actions-dropzone {
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 8px;
}

.menu3-sub-actions-dropzone strong {
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
}

.menu3-sub-actions-dropzone small {
  font-family: var(--font-sans, Arial, sans-serif);
  font-size: 10px;
}

.menu3-sub-actions-progress-field {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.menu3-sub-actions-delete {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
}

.menu3-sub-actions-empty {
  height: 180px;
  font-family: var(--font-sans, Arial, sans-serif);
}

.menu3-sub-actions-status {
  min-height: 20px;
  color: #64748b;
  font-size: 13px;
}

.menu3-sub-actions-detail-field {
  display: grid;
  gap: 6px;
}

.menu3-sub-actions-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.menu3-sub-actions-detail-row input {
  min-width: 0;
  text-align: left;
}

.menu3-sub-actions-detail-manage {
  min-height: 38px;
  padding-inline: 16px;
  white-space: nowrap;
}

.menu3-sub-actions-count-button {
  min-width: 42px;
  max-width: 100%;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.audit-actions {
  display: flex;
  gap: 8px;
}

.audit-log {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}

.audit-row {
  display: grid;
  grid-template-columns: 150px 120px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-bottom: 1px solid #e4e9e5;
}

.audit-row time,
.audit-row span {
  color: var(--muted);
}

.audit-row span {
  min-width: 0;
  overflow: hidden;
  white-space: normal;
}

.app-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(246, 247, 243, 0.82);
}

.app-lock-card {
  display: grid;
  gap: 0;
  width: min(620px, calc(100vw - 32px));
  padding: 0 18px 14px;
  border: 1px solid #bfc4c4;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(20, 28, 26, 0.22);
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
}

.app-lock-window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 29px;
  margin: 0 -18px;
  padding: 0 10px;
  border-radius: 7px 7px 0 0;
  color: #858585;
  background: #f2f2f2;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
}

.app-lock-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  color: #8d8d8d;
  background: transparent;
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}

.app-lock-header {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  padding: 8px 0 7px;
}

.app-lock-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.app-lock-title-block {
  display: grid;
  gap: 1px;
  justify-items: center;
  color: #0000ff;
  text-align: center;
}

.app-lock-title-block h2 {
  margin: 0;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", serif;
  max-width: 100%;
  overflow: hidden;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  white-space: nowrap;
}

.app-lock-title-block p {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.app-lock-field {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 0 9px;
  border: 1px solid #c7c7c7;
  background: #efefef;
  color: #111;
  font-size: 18px;
  font-weight: 400;
}

.app-lock-field-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 24px;
  border: 2px solid #111;
  background: #fff;
}

.app-lock-field-icon::before,
.app-lock-field-icon::after {
  content: "";
  position: absolute;
  border: 2px solid #111;
  background: #fff;
}

.user-icon {
  border-top-width: 8px;
}

.user-icon::before {
  left: 7px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.user-icon::after {
  left: 4px;
  top: 15px;
  width: 14px;
  height: 6px;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.password-icon {
  border-style: dashed solid solid dashed;
}

.password-icon::before {
  left: 5px;
  top: 7px;
  width: 14px;
  height: 6px;
  border-radius: 8px 8px 0 0;
}

.password-icon::after {
  left: -3px;
  top: 18px;
  width: 30px;
  height: 2px;
  border-width: 2px 0 0;
}

.app-lock-field-label {
  white-space: nowrap;
}

.app-lock-field input {
  height: 100%;
  min-height: 40px;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  color: #111;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.lock-message {
  min-height: 30px;
  margin: 0 0 14px;
  padding: 4px 10px;
  color: #fff;
  background: #0000ff;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}

.app-lock-submit {
  justify-self: center;
  min-width: 208px;
  min-height: 38px;
  padding: 2px 18px;
  border: 2px solid #111;
  border-radius: 0;
  color: #0000ff;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c9c9c9;
  cursor: pointer;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Times New Roman", serif;
  font-size: 17px;
  font-weight: 400;
}

.app-lock-submit:hover,
.app-lock-submit:focus-visible {
  outline: 2px solid rgba(0, 0, 255, 0.25);
  outline-offset: 2px;
}

.lock-recovery-button {
  justify-self: center;
  margin-top: 7px;
  border: 0;
  color: #666;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}

@page {
  size: A4 auto;
  margin: 12mm;
}

@media print {
  body {
    min-width: 0;
    height: auto;
    overflow: visible;
    background: #fff;
  }

  body[data-print-color="mono"] {
    filter: grayscale(1);
  }

  body[data-print-quality="highest"] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .sidebar,
  .toolbar,
  .resize-handle,
  .detail-panel,
  .column-filter-row,
  dialog {
    display: none !important;
  }

  .app-shell,
  .workspace,
  .content-grid {
    display: block;
    height: auto;
    overflow: visible;
  }

  .library-panel {
    overflow: visible;
    border: 0;
  }

  .table-header,
  .item-row,
  .inspector-table-header {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* ===== FOLDER MENU UI ===== */

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}

.nav-item:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

.nav-item.active {
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 8px 20px rgba(51,51,255,0.18);
}

.folder-ui-icon {
  position: relative;
  width: 22px;
  height: 16px;
  flex: 0 0 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5b6cff, #3333ff);
  box-shadow:
    0 3px 8px rgba(51,51,255,0.35),
    inset 0 1px 1px rgba(255,255,255,0.4);
}

.folder-ui-icon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 10px;
  height: 6px;
  border-radius: 3px 3px 0 0;
  background: #7482ff;
}

.menu-text {
  flex: 1;
}

/* ===== COMPACT PROFESSIONAL DENSITY ===== */

:root {
  --table-columns: 28px 28px 28px 50px 136px minmax(260px, 1fr) 72px 142px 180px;
  --table-min-width: 994px;
}

body {
  font-family: "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif;
  font-size: 12px;
  background: #f4f6f7;
}

.app-shell {
  grid-template-columns: 286px minmax(0, 1fr);
}

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

.sidebar {
  gap: 8px;
  padding: 10px;
  background: #f0f3f4;
}

.sidebar-toggle {
  top: 6px;
  right: 4px;
  width: 18px;
  height: 24px;
  font-size: 17px;
}

.brand {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: -3px -3px 0;
  padding: 6px 30px 7px 7px;
  border-bottom-width: 2px;
  overflow: hidden;
}

.brand > div:last-child {
  gap: 2px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.brand-logo {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.brand h1 {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.brand-title-kh {
  display: block;
  width: 100%;
  max-width: 210px;
  min-width: 0;
  overflow: hidden;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  word-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-action,
.secondary-action {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-weight: 600;
}

.nav-section {
  gap: 3px;
}

.nav-section h2 {
  font-size: 10px;
}

.nav-item {
  min-height: 30px;
  gap: 7px;
  padding: 0 8px;
  border-radius: 5px;
  box-shadow: none;
}

.nav-item:hover {
  transform: translateX(1px);
  box-shadow: none;
}

.nav-item.active {
  border-radius: 0 5px 5px 0;
  box-shadow: inset 3px 0 0 var(--accent);
}

.folder-ui-icon {
  width: 18px;
  height: 13px;
  flex-basis: 18px;
  border-radius: 3px;
  box-shadow: none;
}

.folder-ui-icon::before {
  top: -4px;
  left: 2px;
  width: 8px;
  height: 5px;
  border-radius: 2px 2px 0 0;
}

.toolbar {
  gap: 8px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.86);
}

.toolbar-actions {
  gap: 5px;
}

.settings-button,
.download-selected-button,
.reference-action-button,
.logout-button,
.print-button,
.clear-search-button {
  height: 28px;
}

.settings-button {
  width: 30px;
  font-size: 16px;
}

.download-selected-button,
.reference-action-button,
.logout-button,
.print-button,
.clear-search-button {
  min-width: auto;
}

.search-box {
  height: 28px;
  gap: 7px;
  padding: 0 8px;
  border-radius: 4px;
}

.content-grid {
  grid-template-columns: minmax(440px, 1fr) 5px var(--detail-width, 330px);
  padding: 5px;
}

.library-panel,
.detail-panel {
  border-radius: 4px;
}

.table-header,
.column-filter-row,
.item-row {
  column-gap: 6px;
}

.table-header {
  min-height: 32px;
  padding: 0 8px;
  font-size: 10px;
}

.column-filter-row {
  top: 32px;
  padding: 4px 8px;
}

.column-filter-row input {
  height: 24px;
  padding: 3px 4px;
  font-size: 11px;
}

.item-row {
  min-height: 34px;
  padding: 4px 8px;
}

.table-add-button,
.table-clear-button,
.row-select-button,
.data-pin-label,
.star-label {
  width: 20px;
  height: 20px;
}

.table-add-button {
  font-size: 15px;
}

.table-action-cell,
.table-header .table-action-cell,
.select-cell {
  grid-template-columns: 20px 20px 20px;
  gap: 3px;
}

.table-add-button,
.table-clear-button,
.progress-inline-number {
  grid-column: 3;
}

.progress-inline-number {
  justify-self: center;
  justify-content: center;
  width: 20px;
}

.table-add-menu {
  top: 24px;
  min-width: 190px;
}

.table-add-menu button {
  min-height: 26px;
}

.work-summary {
  gap: 6px;
  padding: 6px 8px;
}

.work-summary span {
  min-height: 38px;
  padding: 5px 7px;
}

.detail-panel {
  padding: 6px 8px 8px;
}

.detail-heading {
  gap: 6px;
  margin-bottom: 7px;
}

.detail-actions {
  gap: 4px;
}

.detail-heading h2 {
  max-width: 220px;
  font-size: 14px;
}

.detail-import-button {
  height: 26px;
  min-width: 76px;
  margin: 3px 0 5px;
}

.icon-button,
.panel-switch,
.panel-switch-button {
  height: 26px;
}

.icon-button {
  width: 26px;
  font-size: 16px;
}

.panel-arrow-toggle {
  left: -20px;
  width: 24px;
  height: 32px;
  font-size: 18px;
}

#itemForm,
#inspectorForm,
#placeholderForm,
.inspector-fields,
.task-fields {
  gap: 6px;
}

label {
  gap: 3px;
  font-size: 11px;
}

input,
select,
textarea {
  padding: 5px 7px;
  border-radius: 4px;
}

textarea {
  min-height: 82px;
}

.record-meta {
  gap: 4px;
  padding: 6px;
}

.form-actions {
  gap: 6px;
}

#itemForm > .form-actions,
#inspectorForm > .form-actions,
#placeholderForm > .form-actions {
  margin: -6px -8px 6px;
  padding: 6px 8px;
}

.dashboard-shell {
  gap: 9px;
  padding: 2px;
}

.dashboard-hero,
.dashboard-header {
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  box-shadow: none;
}

.dashboard-hero h2 {
  gap: 7px;
  font-size: 18px;
}

.dashboard-hero h2 span,
.dashboard-header h2 span {
  width: 26px;
  height: 26px;
  border-radius: 5px;
}

.dashboard-filter-panel,
.dashboard-slicer-bar {
  gap: 7px;
  padding: 8px;
  border-radius: 5px;
  box-shadow: none;
}

.dashboard-grid,
.dashboard-summary-strip,
.dashboard-pivot-layout {
  gap: 8px;
}

.dashboard-widget,
.dashboard-summary-strip article {
  gap: 8px;
  min-height: 118px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: none;
}

.dashboard-widget:hover {
  transform: none;
  box-shadow: none;
}

.dashboard-big-number {
  font-size: 28px;
}

.dashboard-table th,
.dashboard-table td,
.pivot-result-table th,
.pivot-result-table td {
  padding: 6px 8px;
}

/* =========================================================
   UPDATED COMPACT MODERN UI - added by ChatGPT
   Keeps existing HTML IDs/classes so JavaScript continues working
   ========================================================= */
:root {
  --bg: #eef3f8;
  --panel: #ffffff;
  --ink: #172033;
  --muted: #6b7280;
  --line: #dbe5ef;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eaf2ff;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 5px 16px rgba(15, 23, 42, 0.06);
}

body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, var(--bg) 100%);
  color: var(--ink);
}

.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  margin: 8px 0 8px 8px;
  padding: 12px;
  border: 1px solid rgba(219, 229, 239, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.sidebar-toggle,
.panel-arrow-toggle {
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 10px;
  color: var(--accent);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.sidebar-toggle:hover,
.panel-arrow-toggle:hover {
  color: #fff;
  background: var(--accent);
  transform: translateY(-1px);
}

.brand {
  min-height: 58px;
  margin: 0 0 6px;
  padding: 8px 34px 10px 8px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.brand-logo {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 11px;
  padding: 3px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.13);
}

.brand-title-kh {
  color: #111827;
  font-size: 12px;
}

.nav-section {
  gap: 6px;
}

.nav-section h2 {
  padding: 0 4px;
  color: #64748b;
  font-size: 10px;
}

.nav-item {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  box-shadow: none;
}

.nav-item:hover {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.07);
  border-color: rgba(37, 99, 235, 0.12);
  transform: translateX(2px);
}

.nav-item.active,
.menu-two .nav-item.active {
  color: var(--accent);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border-color: rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
}

.nav-item.active::before {
  display: none;
}

.menu-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-count {
  flex: 0 0 auto;
  min-width: 18px;
  color: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* compact folder icon in front of each menu */
.folder-ui-icon {
  position: relative;
  width: 22px;
  height: 17px;
  flex: 0 0 22px;
  border-radius: 5px 5px 4px 4px;
  background: linear-gradient(135deg, #ffd66b 0%, #f59e0b 100%);
  box-shadow: inset 0 -3px 0 rgba(180, 83, 9, 0.14), 0 3px 8px rgba(245, 158, 11, 0.22);
}

.folder-ui-icon::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -4px;
  width: 10px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background: #fbbf24;
}

.nav-item.active .folder-ui-icon {
  background: linear-gradient(135deg, #93c5fd 0%, #2563eb 100%);
  box-shadow: inset 0 -3px 0 rgba(30, 64, 175, 0.16), 0 4px 10px rgba(37, 99, 235, 0.24);
}

.nav-item.active .folder-ui-icon::before {
  background: #60a5fa;
}

.primary-action,
.secondary-action,
.table-add-button,
.icon-button,
.attachment-browse-button {
  border-radius: 11px;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.primary-action {
  min-height: 36px;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.secondary-action {
  border-color: rgba(148, 163, 184, 0.35);
  color: #1f2937;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-soft);
}

.secondary-action:hover,
.table-add-button:hover,
.icon-button:hover {
  border-color: rgba(37, 99, 235, 0.30);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
}

.workspace {
  padding: 8px;
}

.toolbar {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(219, 229, 239, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.toolbar-actions {
  gap: 7px;
}

.search-box {
  height: 36px;
  border-color: rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.search-box:focus-within {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.content-grid {
  padding: 0;
  gap: 0;
}

.library-panel,
.detail-panel {
  border-color: rgba(219, 229, 239, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.library-panel {
  border-right: 1px solid rgba(219, 229, 239, 0.95);
}

.resize-handle {
  margin: 0 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
}

.table-header {
  min-height: 44px;
  border-bottom: 1px solid rgba(219, 229, 239, 0.95);
  background: linear-gradient(135deg, #e0f2fe, #eef6ff);
  color: #0f172a;
  font-weight: 700;
}

.column-filter-row {
  background: #f8fafc;
}

.column-filter-row input,
.detail-panel input,
.detail-panel select,
.detail-panel textarea {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: #ffffff;
}

.column-filter-row input:focus,
.detail-panel input:focus,
.detail-panel select:focus,
.detail-panel textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.50);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.item-row {
  min-height: 44px;
  border-bottom: 1px solid #edf2f7;
  background: rgba(255, 255, 255, 0.88);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.item-row:hover,
.item-row.active,
.item-row.selected-for-download {
  background: #eff6ff;
  box-shadow: inset 4px 0 0 var(--accent);
}

.item-row.pinned-row {
  background: #f8fbff;
  box-shadow: inset 4px 0 0 #f59e0b;
}

.detail-panel {
  padding: 12px;
}

.detail-heading {
  position: sticky;
  top: -12px;
  z-index: 3;
  margin: -12px -12px 12px;
  padding: 12px;
  border-bottom: 1px solid #e5edf5;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.detail-heading h2 {
  color: #111827;
  font-size: 17px;
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
}

.icon-button {
  color: #f59e0b;
  background: #fff7ed;
}

.pin-button {
  color: var(--danger);
  background: #eff6ff;
}

.table-add-button {
  border-color: rgba(37, 99, 235, 0.30);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.18);
}

.table-add-menu,
.attachment-panel,
.settings-panel,
.dialog-panel {
  border-color: rgba(219, 229, 239, 0.95);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.work-summary span,
.dashboard-card,
.dashboard-widget,
.stat-card,
.progress-dashboard {
  border-color: rgba(219, 229, 239, 0.95);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.progress-top-band {
  border-radius: 15px 15px 0 0;
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.45);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}


/* User update: remove folder UI icons, keep all existing font settings unchanged */
.folder-ui-icon,
.nav-item .folder-ui-icon {
  display: none !important;
}

.nav-item {
  gap: 6px;
  justify-content: space-between;
}

/* Khmer OS Muol Light should not be bold */
.brand-title-kh,
.nav-section h2,
.search-box span,
.table-header,
.eyebrow,
.primary-action,
.brand-title-separator,
.brand-title-en {
    font-family: "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
    font-weight: 400 !important;
}


/* ===== PROFESSIONAL GOVERNMENT UI REFINEMENT ===== */
/* Formal, restrained, document-management style. Khmer font settings preserved. */

:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #5f6b76;
  --line: #d8dee6;
  --accent: #1f4e79;
  --accent-strong: #163a5a;
  --accent-soft: #e8f0f7;
  --gold: #b8892f;
  --shadow:
    0 1px 2px rgba(16, 24, 40, .05),
    0 8px 20px rgba(16, 24, 40, .08);
}

body {
  background:
    linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
  color: var(--ink);
}

.app-shell {
  background: transparent;
}

.sidebar {
  margin: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.brand {
  margin: -4px -4px 8px;
  padding: 8px 36px 10px 8px;
  border-bottom: 3px solid var(--gold);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.brand-title-kh {
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", serif;
  font-weight: 400;
}

.nav-section h2,
.eyebrow {
  font-family: "Khmer OS Muol Light", "Khmer OS Siemreap", "Times New Roman", serif;
  font-weight: 400;
  color: #475569;
}

.nav-item {
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: #24313d;
  background: transparent;
}

.nav-item:hover {
  color: var(--accent);
  background: #f4f8fb;
  border-color: #e2e8f0;
  transform: translateX(2px);
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #c9d8e6;
  box-shadow: inset 4px 0 0 var(--accent);
}

.nav-item.active::before {
  display: none;
}

.primary-action {
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 4px 10px rgba(31, 78, 121, .18);
}

.primary-action:hover {
  background: var(--accent-strong);
}

.secondary-action,
.icon-button,
.table-add-button,
.panel-arrow-toggle {
  border-radius: 8px;
  border-color: #cfd8e3;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}

.secondary-action:hover,
.icon-button:hover,
.table-add-button:hover,
.panel-arrow-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #f8fbfd;
}

.workspace {
  background: transparent;
}

.toolbar {
  margin: 8px 8px 0 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}

.search-box {
  height: 36px;
  border-radius: 9px;
  border-color: #cfd8e3;
  background: #ffffff;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, .12);
}

.content-grid {
  padding: 8px;
  gap: 8px;
}

.library-panel,
.detail-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.library-panel {
  border-right: 1px solid var(--line);
}

.detail-panel {
  padding: 12px 14px 14px;
}

.table-header {
  min-height: 42px;
  background: linear-gradient(180deg, #eef6fc, #dcecf8);
  color: #17202a;
  border-bottom: 1px solid #c6d5e3;
  font-family: "Khmer OS Muol Light", "Khmer OS Siemreap", "Times New Roman", serif;
  font-weight: 400;
}

.column-filter-row {
  background: #f8fafc;
}

.column-filter-row input {
  border-radius: 7px;
  border-color: #cfd8e3;
}

.column-filter-row input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(31, 78, 121, .14);
}

.item-row {
  min-height: 44px;
  border-bottom: 1px solid #edf1f5;
  background: #ffffff;
}

.item-row:hover {
  background: #f7fafc;
}

.item-row.active,
.item-row.selected-for-download {
  background: #edf5fb;
  box-shadow: inset 4px 0 0 var(--accent);
}

.item-row.pinned-row {
  background: #fbfcff;
  box-shadow: inset 4px 0 0 var(--gold);
}

.detail-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid #edf1f5;
}

.detail-heading h2 {
  color: #17202a;
  font-size: 18px;
}

input,
select,
textarea {
  border-radius: 8px;
}

.resize-handle {
  border-radius: 10px;
  background: #e2e8f0;
}

.resize-handle:hover,
.content-grid.resizing .resize-handle,
.content-grid.detail-collapsed .resize-handle {
  background: var(--accent);
}

.panel-arrow-toggle {
  width: 28px;
  height: 36px;
  color: var(--accent);
}

.folder-ui-icon {
  filter: drop-shadow(0 2px 4px rgba(184, 137, 47, .18));
}

/* Formal scrollbar */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  min-height: 46px;
  min-width: 46px;
  border: 4px solid #f1f5f9;
  border-radius: 999px;
  background: #9aa9b8;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7c8d;
}


/* ===== EXPAND BRAND / HEADER CARD WIDTH ===== */

.app-shell {
  grid-template-columns: 318px minmax(0, 1fr);
}

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

.sidebar {
  width: 302px;
}

.brand {
  width: 100%;
  min-height: 74px;
  padding: 10px 42px 10px 14px;
  gap: 14px;
  border-radius: 18px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.brand-title-kh {
  max-width: 210px;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-toggle {
  right: -14px;
  top: 16px;
  width: 30px;
  height: 34px;
  border-radius: 999px;
}

.nav-item .menu-text {
  max-width: 210px;
}


/* ===== EXTRA GOVERNMENT PREMIUM ENHANCEMENT ===== */
/* More professional: better hierarchy, cleaner table, stronger official identity */

:root {
  --official-blue: #153e66;
  --official-blue-2: #1f5b8f;
  --official-gold: #b8892f;
  --official-gold-soft: #fff7e6;
  --surface-soft: #f8fafc;
  --focus-ring: rgba(31, 78, 121, .18);
}

/* Better layout balance */
.app-shell {
  grid-template-columns: 328px minmax(0, 1fr);
}

.sidebar {
  width: 312px;
  gap: 16px;
}

/* Official brand card */
.brand {
  position: relative;
  min-height: 82px;
  padding: 12px 44px 12px 16px;
  border: 1px solid #d9e2ec;
  border-bottom: 4px solid var(--official-gold);
  border-radius: 20px;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7fbff 65%, #eef6fc 100%);
  box-shadow:
    0 1px 2px rgba(16,24,40,.05),
    0 10px 24px rgba(31,78,121,.08);
}

.brand::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 44px;
  bottom: -4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--official-gold), #d8b35f, var(--official-gold));
}

.brand-logo {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  padding: 4px;
  border: 1px solid #dbe5ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16,24,40,.08);
}

.brand-title-kh {
  max-width: 220px;
  color: var(--official-blue);
  font-size: 15px;
  line-height: 1.45;
}

/* Sidebar toggle refined */
.sidebar-toggle {
  top: 20px;
  right: -16px;
  width: 32px;
  height: 36px;
  border: 1px solid #c8d6e4;
  color: var(--official-blue);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(16,24,40,.12);
}

/* Navigation refinement */
.nav-section {
  gap: 6px;
}

.nav-section h2 {
  padding-left: 4px;
  color: #667085;
  font-size: 11px;
}

.nav-item {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
}

.nav-item.active {
  color: var(--official-blue);
  background:
    linear-gradient(90deg, #e8f0f7 0%, #f6fafd 100%);
  border-color: #c7d8e8;
  box-shadow:
    inset 4px 0 0 var(--official-blue),
    0 6px 14px rgba(31,78,121,.08);
}

.nav-item:hover {
  background: #f7fafc;
  border-color: #d7e2ec;
}

/* Toolbar more formal */
.toolbar {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}

.toolbar-actions {
  gap: 10px;
}

.secondary-action {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  font-weight: 600;
}

.secondary-action:hover {
  background: #f4f8fb;
  border-color: var(--official-blue-2);
}

/* Search looks more premium */
.search-box {
  height: 40px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff);
}

.search-box span {
  color: var(--official-blue);
}

.search-box input::placeholder {
  color: #94a3b8;
}

/* Content surfaces */
.content-grid {
  padding: 10px;
}

.library-panel,
.detail-panel {
  border-radius: 18px;
  border-color: #d9e2ec;
}

/* Table: official document system style */
.table-header {
  min-height: 46px;
  color: var(--official-blue);
  background:
    linear-gradient(180deg, #f2f8fd 0%, #e2f0fa 100%);
  border-bottom: 1px solid #bfd3e6;
}

.table-header span,
.table-header-cell {
  font-size: 11px;
}

.column-filter-row {
  background: #fbfdff;
  border-bottom: 1px solid #edf2f7;
}

.column-filter-row input {
  height: 30px;
  border-radius: 8px;
  background: #ffffff;
}

.item-row {
  min-height: 48px;
  border-bottom: 1px solid #eef2f6;
}

.item-row:nth-child(even) {
  background: #fcfdff;
}

.item-row:hover {
  background: #f3f8fc;
  box-shadow: inset 4px 0 0 rgba(31,78,121,.28);
}

.item-row.active,
.item-row.selected-for-download {
  background: #eaf3fa;
  box-shadow: inset 5px 0 0 var(--official-blue);
}

/* Detail panel: clearer form hierarchy */
.detail-heading {
  margin: -2px -2px 14px;
  padding: 0 0 12px;
}

.detail-heading h2 {
  color: var(--official-blue);
  font-size: 19px;
  line-height: 1.35;
}

.detail-panel label {
  color: #344054;
  font-weight: 600;
}

.detail-panel input,
.detail-panel textarea,
.detail-panel select {
  border: 1px solid #cfd8e3;
  background: #ffffff;
}

.detail-panel input:focus,
.detail-panel textarea:focus,
.detail-panel select:focus {
  border-color: var(--official-blue-2);
  outline: 3px solid var(--focus-ring);
}

/* Important action polish */
.table-add-button {
  border-color: var(--official-blue-2);
  color: var(--official-blue);
  background: #ffffff;
}

.table-add-button:hover {
  color: #ffffff;
  background: var(--official-blue);
}

/* Pin and star */
.pin-button {
  color: #b42318;
  background: #fff6ed;
}

.pin-button[aria-pressed="true"] {
  border-color: var(--official-gold);
  background: var(--official-gold-soft);
}

/* Compact professional folder icon */
.folder-ui-icon {
  transform: scale(.92);
  filter: drop-shadow(0 2px 4px rgba(184,137,47,.18));
}

/* Better print appearance */
@media print {
  body {
    background: #ffffff !important;
  }

  .sidebar,
  .toolbar,
  .detail-panel,
  .resize-handle {
    display: none !important;
  }

  .app-shell,
  .content-grid {
    display: block !important;
  }

  .library-panel {
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== THEME TOGGLE ===== */

.theme-toggle-button {
  min-width: 88px;
  font-weight: 700;
}

/* ===== DARK GOVERNMENT THEME ===== */

body.dark-theme {
  --bg: #0f1720;
  --panel: #17212b;
  --ink: #e5edf5;
  --muted: #9aa8b5;
  --line: #2b3a48;
  --accent: #60a5fa;
  --accent-strong: #3b82f6;
  background:
    linear-gradient(
      180deg,
      #0b1220 0%,
      #111827 100%
    );
  color: var(--ink);
}

body.dark-theme .sidebar,
body.dark-theme .toolbar,
body.dark-theme .library-panel,
body.dark-theme .detail-panel,
body.dark-theme .brand {
  background:
    linear-gradient(
      180deg,
      rgba(23,33,43,.98),
      rgba(18,25,35,.98)
    );
  border-color: #2a3948;
  color: var(--ink);
}

body.dark-theme .brand {
  border-bottom-color: #d4a73a;
}

body.dark-theme .brand-title-kh,
body.dark-theme .table-header,
body.dark-theme .detail-heading h2,
body.dark-theme .search-box span,
body.dark-theme .nav-item.active {
  color: #93c5fd;
}

body.dark-theme .nav-item {
  color: #dbe7f3;
}

body.dark-theme .nav-item:hover {
  background: #1f2b38;
}

body.dark-theme .nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(59,130,246,.18),
      rgba(96,165,250,.08)
    );
  border-color: rgba(96,165,250,.28);
}

body.dark-theme .item-row,
body.dark-theme .column-filter-row,
body.dark-theme .table-header {
  background: #17212b;
  border-color: #263545;
}

body.dark-theme .item-row:hover {
  background: #1d2a38;
}

body.dark-theme .item-row.active,
body.dark-theme .item-row.selected-for-download {
  background: rgba(59,130,246,.16);
}

body.dark-theme .search-box,
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background: #111927;
  border-color: #314255;
  color: #e5edf5;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #7f93a7;
}

body.dark-theme .secondary-action,
body.dark-theme .icon-button,
body.dark-theme .table-add-button,
body.dark-theme .panel-arrow-toggle {
  background: #1b2633;
  border-color: #314255;
  color: #dbe7f3;
}

body.dark-theme .secondary-action:hover,
body.dark-theme .icon-button:hover,
body.dark-theme .table-add-button:hover {
  background: #243445;
  border-color: #60a5fa;
}

body.dark-theme .primary-action {
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );
}

body.dark-theme .resize-handle {
  background: #2b3a48;
}

body.dark-theme ::-webkit-scrollbar-track {
  background: #111927;
}

body.dark-theme ::-webkit-scrollbar-thumb {
  background: #506274;
  border-color: #111927;
}


/* ===== MULTI THEME SYSTEM ===== */

.theme-selector-wrap {
  display: flex;
  align-items: center;
}

.theme-selector {
  height: 38px;
  min-width: 190px;
  padding: 0 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  color: #17202a;
  font-weight: 600;
  cursor: pointer;
}

/* ===== LIGHT THEME ===== */

body.light-theme {
  background:
    linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
}

/* ===== DARK THEME ===== */

body.dark-theme {
  background:
    linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color: #e5edf5;
}

body.dark-theme .sidebar,
body.dark-theme .toolbar,
body.dark-theme .library-panel,
body.dark-theme .detail-panel,
body.dark-theme .brand {
  background: #17212b;
  border-color: #2a3948;
  color: #e5edf5;
}

body.dark-theme .nav-item,
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  color: #e5edf5;
  background: #111927;
  border-color: #314255;
}

/* ===== ROYAL GOLD ===== */

body.royal-theme {
  background:
    linear-gradient(
      135deg,
      #f8f1df,
      #f5e8c7,
      #fdf7ea
    );
}

body.royal-theme .sidebar,
body.royal-theme .toolbar,
body.royal-theme .library-panel,
body.royal-theme .detail-panel,
body.royal-theme .brand {
  background:
    linear-gradient(
      180deg,
      #fffdf7,
      #f9f1df
    );
  border-color: #d4b46a;
}

body.royal-theme .nav-item.active,
body.royal-theme .primary-action {
  background:
    linear-gradient(
      135deg,
      #b8892f,
      #d4af37
    );
  color: white;
}

/* ===== MIDNIGHT BLUE ===== */

body.midnight-theme {
  background:
    linear-gradient(
      180deg,
      #0f172a,
      #1e293b
    );
  color: #dbeafe;
}

body.midnight-theme .sidebar,
body.midnight-theme .toolbar,
body.midnight-theme .library-panel,
body.midnight-theme .detail-panel,
body.midnight-theme .brand {
  background:
    linear-gradient(
      180deg,
      #162033,
      #0f172a
    );
  border-color: #334155;
  color: #dbeafe;
}

body.midnight-theme .nav-item.active {
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );
  color: white;
}

body.midnight-theme input,
body.midnight-theme textarea,
body.midnight-theme select,
body.midnight-theme .search-box {
  background: #0f172a;
  border-color: #334155;
  color: #dbeafe;
}

/* ===== FOREST EXECUTIVE ===== */

body.forest-theme {
  background:
    linear-gradient(
      180deg,
      #eef6f1,
      #ddece3
    );
}

body.forest-theme .sidebar,
body.forest-theme .toolbar,
body.forest-theme .library-panel,
body.forest-theme .detail-panel,
body.forest-theme .brand {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f2f8f3
    );
  border-color: #b8d0bf;
}

body.forest-theme .nav-item.active,
body.forest-theme .primary-action {
  background:
    linear-gradient(
      135deg,
      #166534,
      #15803d
    );
  color: white;
}

/* ===== CRYSTAL GLASS ===== */

body.crystal-theme {
  background:
    linear-gradient(
      135deg,
      #edf6ff,
      #f5fbff
    );
}

body.crystal-theme .sidebar,
body.crystal-theme .toolbar,
body.crystal-theme .library-panel,
body.crystal-theme .detail-panel,
body.crystal-theme .brand {
  background:
    rgba(255,255,255,.72);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 8px 32px rgba(31,78,121,.08);
}

body.crystal-theme .nav-item.active {
  background:
    linear-gradient(
      135deg,
      rgba(59,130,246,.18),
      rgba(147,197,253,.12)
    );
}

/* shared improvements */

body.royal-theme .nav-item,
body.midnight-theme .nav-item,
body.forest-theme .nav-item,
body.crystal-theme .nav-item {
  transition: all .2s ease;
}

body.royal-theme .nav-item:hover,
body.midnight-theme .nav-item:hover,
body.forest-theme .nav-item:hover,
body.crystal-theme .nav-item:hover {
  transform: translateX(3px);
}


/* ===== LIGHT THEMES ONLY UPDATE ===== */
/* Dark and midnight choices removed from dropdown. These fallback styles keep old saved themes readable. */

body.dark-theme,
body.midnight-theme {
  background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%) !important;
  color: #17202a !important;
}

body.dark-theme .sidebar,
body.dark-theme .toolbar,
body.dark-theme .library-panel,
body.dark-theme .detail-panel,
body.dark-theme .brand,
body.midnight-theme .sidebar,
body.midnight-theme .toolbar,
body.midnight-theme .library-panel,
body.midnight-theme .detail-panel,
body.midnight-theme .brand {
  background: #ffffff !important;
  border-color: #d8dee6 !important;
  color: #17202a !important;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select,
body.midnight-theme input,
body.midnight-theme textarea,
body.midnight-theme select {
  background: #ffffff !important;
  border-color: #cfd8e3 !important;
  color: #17202a !important;
}

/* ===== SKY BLUE THEME ===== */

body.sky-theme {
  background:
    linear-gradient(180deg, #eef8ff 0%, #dfefff 100%);
}

body.sky-theme .sidebar,
body.sky-theme .toolbar,
body.sky-theme .library-panel,
body.sky-theme .detail-panel,
body.sky-theme .brand {
  background: linear-gradient(180deg, #ffffff, #f4fbff);
  border-color: #bfdbfe;
}

body.sky-theme .brand {
  border-bottom-color: #38bdf8;
}

body.sky-theme .brand-title-kh,
body.sky-theme .detail-heading h2,
body.sky-theme .search-box span {
  color: #075985;
}

body.sky-theme .nav-item.active,
body.sky-theme .primary-action {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
}

/* ===== CLASSIC CREAM THEME ===== */

body.cream-theme {
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f1eadc 100%);
}

body.cream-theme .sidebar,
body.cream-theme .toolbar,
body.cream-theme .library-panel,
body.cream-theme .detail-panel,
body.cream-theme .brand {
  background: linear-gradient(180deg, #fffdf8, #faf3e6);
  border-color: #dcc8a4;
}

body.cream-theme .brand {
  border-bottom-color: #a16207;
}

body.cream-theme .brand-title-kh,
body.cream-theme .detail-heading h2,
body.cream-theme .search-box span {
  color: #7c2d12;
}

body.cream-theme .nav-item.active,
body.cream-theme .primary-action {
  background: linear-gradient(135deg, #92400e, #b45309);
  color: #ffffff;
}

/* ===== SILVER OFFICE THEME ===== */

body.silver-theme {
  background:
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

body.silver-theme .sidebar,
body.silver-theme .toolbar,
body.silver-theme .library-panel,
body.silver-theme .detail-panel,
body.silver-theme .brand {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: #cbd5e1;
}

body.silver-theme .brand {
  border-bottom-color: #64748b;
}

body.silver-theme .brand-title-kh,
body.silver-theme .detail-heading h2,
body.silver-theme .search-box span {
  color: #334155;
}

body.silver-theme .nav-item.active,
body.silver-theme .primary-action {
  background: linear-gradient(135deg, #475569, #64748b);
  color: #ffffff;
}

/* ===== MINT POLICY THEME ===== */

body.mint-theme {
  background:
    linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

body.mint-theme .sidebar,
body.mint-theme .toolbar,
body.mint-theme .library-panel,
body.mint-theme .detail-panel,
body.mint-theme .brand {
  background: linear-gradient(180deg, #ffffff, #f3fff7);
  border-color: #bbf7d0;
}

body.mint-theme .brand {
  border-bottom-color: #22c55e;
}

body.mint-theme .brand-title-kh,
body.mint-theme .detail-heading h2,
body.mint-theme .search-box span {
  color: #166534;
}

body.mint-theme .nav-item.active,
body.mint-theme .primary-action {
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #ffffff;
}

/* ===== PEARL WHITE THEME ===== */

body.pearl-theme {
  background:
    radial-gradient(circle at top left, rgba(226,232,240,.72), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

body.pearl-theme .sidebar,
body.pearl-theme .toolbar,
body.pearl-theme .library-panel,
body.pearl-theme .detail-panel,
body.pearl-theme .brand {
  background: rgba(255,255,255,.92);
  border-color: #e2e8f0;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 12px 28px rgba(15,23,42,.06);
}

body.pearl-theme .brand {
  border-bottom-color: #94a3b8;
}

body.pearl-theme .brand-title-kh,
body.pearl-theme .detail-heading h2,
body.pearl-theme .search-box span {
  color: #1e293b;
}

body.pearl-theme .nav-item.active,
body.pearl-theme .primary-action {
  background: linear-gradient(135deg, #1e293b, #475569);
  color: #ffffff;
}

/* ===== SANDSTONE THEME ===== */

body.sand-theme {
  background:
    linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
}

body.sand-theme .sidebar,
body.sand-theme .toolbar,
body.sand-theme .library-panel,
body.sand-theme .detail-panel,
body.sand-theme .brand {
  background: linear-gradient(180deg, #fffaf2, #fff1dc);
  border-color: #fdba74;
}

body.sand-theme .brand {
  border-bottom-color: #c2410c;
}

body.sand-theme .brand-title-kh,
body.sand-theme .detail-heading h2,
body.sand-theme .search-box span {
  color: #9a3412;
}

body.sand-theme .nav-item.active,
body.sand-theme .primary-action {
  background: linear-gradient(135deg, #c2410c, #ea580c);
  color: #ffffff;
}

/* Theme selector polish */

.theme-selector {
  min-width: 220px;
}

.theme-selector:focus {
  border-color: #1f4e79;
  outline: 3px solid rgba(31,78,121,.16);
}


/* =========================================================
   EXPANDED PROFESSIONAL GOVERNMENT THEMES + THEME BUTTON
   Keeps original fonts/layout; only changes visual skin.
   ========================================================= */
:root {
  --app-radius: 10px;
  --soft-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .07);
}

body,
.sidebar,
.toolbar,
.library-panel,
.detail-panel,
.brand,
.nav-item,
.secondary-action,
.primary-action,
.table-header,
.item-row,
.column-filter-row,
input,
select,
textarea {
  transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease;
}

.theme-selector-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.theme-palette-button {
  width: 34px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.theme-palette-button:hover,
.theme-selector:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.theme-selector {
  min-width: 230px;
  height: 32px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 650;
}

.theme-selector:focus,
.theme-palette-button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

body[class$="-theme"] .library-panel,
body[class$="-theme"] .detail-panel {
  box-shadow: var(--soft-shadow);
}

body[class$="-theme"] .toolbar {
  backdrop-filter: blur(12px);
}

body[class$="-theme"] .nav-item:hover {
  transform: translateX(3px);
}

body[class$="-theme"] .item-row:nth-child(even) {
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
}

/* Theme generator-like rules */
body.ministry-blue-theme { --bg:#edf5ff; --panel:#ffffff; --ink:#10233f; --muted:#50627a; --line:#c8d8ee; --accent:#1d4ed8; --accent-strong:#153e9f; background:linear-gradient(180deg,#f7fbff,#eaf3ff); }
body.executive-white-theme { --bg:#f7f8fa; --panel:#ffffff; --ink:#111827; --muted:#64748b; --line:#dfe5ee; --accent:#0f2742; --accent-strong:#071827; background:linear-gradient(180deg,#ffffff,#f1f5f9); }
body.emerald-theme { --bg:#edfdf5; --panel:#ffffff; --ink:#123629; --muted:#55766a; --line:#bfead4; --accent:#047857; --accent-strong:#065f46; background:linear-gradient(180deg,#f4fff9,#dbf7e8); }
body.khmer-gold-theme { --bg:#fff8e8; --panel:#fffef9; --ink:#2b2113; --muted:#765f36; --line:#ead7a5; --accent:#b8860b; --accent-strong:#8b6508; background:linear-gradient(180deg,#fffaf0,#f6e9c5); }
body.lotus-theme { --bg:#fff5fb; --panel:#ffffff; --ink:#3f1f33; --muted:#805c73; --line:#f4cfe5; --accent:#be185d; --accent-strong:#9d174d; background:linear-gradient(180deg,#fff8fc,#fde7f3); }
body.copper-theme { --bg:#fff3e8; --panel:#fffaf5; --ink:#3b2417; --muted:#7c5b49; --line:#efc5aa; --accent:#b45309; --accent-strong:#92400e; background:linear-gradient(180deg,#fff8f0,#f7dcc7); }
body.marble-theme { --bg:#f8fafc; --panel:#ffffff; --ink:#1f2937; --muted:#667085; --line:#d7dde7; --accent:#334155; --accent-strong:#1e293b; background:radial-gradient(circle at 20% 0%,rgba(203,213,225,.45),transparent 30%),linear-gradient(180deg,#ffffff,#eef2f7); }
body.aqua-theme { --bg:#ecfeff; --panel:#ffffff; --ink:#123743; --muted:#4e7782; --line:#b8e7ee; --accent:#0891b2; --accent-strong:#0e7490; background:linear-gradient(180deg,#f1feff,#d9f7fb); }
body.lavender-theme { --bg:#f6f1ff; --panel:#ffffff; --ink:#2f2454; --muted:#6b5b8a; --line:#d8c8f5; --accent:#7c3aed; --accent-strong:#5b21b6; background:linear-gradient(180deg,#faf7ff,#ede3ff); }
body.rose-theme { --bg:#fff1f2; --panel:#ffffff; --ink:#442026; --muted:#805e64; --line:#fecdd3; --accent:#be123c; --accent-strong:#9f1239; background:linear-gradient(180deg,#fff7f8,#ffe2e7); }
body.slate-theme { --bg:#eef2f7; --panel:#ffffff; --ink:#1e293b; --muted:#64748b; --line:#cbd5e1; --accent:#334155; --accent-strong:#0f172a; background:linear-gradient(180deg,#f8fafc,#e2e8f0); }
body.olive-theme { --bg:#f7f7ed; --panel:#fffffb; --ink:#30351f; --muted:#6d7447; --line:#d8ddb7; --accent:#647121; --accent-strong:#4d5719; background:linear-gradient(180deg,#fffff4,#e9edce); }
body.paper-theme { --bg:#fbf7ef; --panel:#fffdf8; --ink:#33291d; --muted:#7a6a55; --line:#e4d6c2; --accent:#8a5a2b; --accent-strong:#6f4518; background:linear-gradient(180deg,#fffdf7,#f3eadc); }
body.nimbus-theme { --bg:#f0f7ff; --panel:#ffffff; --ink:#172f4a; --muted:#5e7892; --line:#c5dcf4; --accent:#2563eb; --accent-strong:#1d4ed8; background:radial-gradient(circle at 10% 0%,rgba(59,130,246,.18),transparent 28%),linear-gradient(180deg,#f8fbff,#e8f2ff); }
body.orchid-theme { --bg:#fdf4ff; --panel:#ffffff; --ink:#3b2144; --muted:#755b80; --line:#efc8f5; --accent:#a21caf; --accent-strong:#86198f; background:linear-gradient(180deg,#fff8ff,#fae8ff); }

body.deep-navy-theme { color-scheme: dark; --bg:#0f172a; --panel:#172033; --ink:#e5edf8; --muted:#a8b3c7; --line:#2d3a50; --accent:#60a5fa; --accent-strong:#93c5fd; background:linear-gradient(180deg,#0b1220,#111c31); }
body.charcoal-theme { color-scheme: dark; --bg:#111111; --panel:#1d1d1f; --ink:#f4f4f5; --muted:#a1a1aa; --line:#343438; --accent:#a3a3a3; --accent-strong:#e5e5e5; background:linear-gradient(180deg,#0d0d0e,#1a1a1c); }
body.dark-emerald-theme { color-scheme: dark; --bg:#071a14; --panel:#10261e; --ink:#e7fff5; --muted:#9cc8b5; --line:#214638; --accent:#34d399; --accent-strong:#6ee7b7; background:linear-gradient(180deg,#06140f,#0d231a); }

body.ministry-blue-theme .sidebar, body.ministry-blue-theme .toolbar, body.ministry-blue-theme .library-panel, body.ministry-blue-theme .detail-panel, body.ministry-blue-theme .brand,
body.executive-white-theme .sidebar, body.executive-white-theme .toolbar, body.executive-white-theme .library-panel, body.executive-white-theme .detail-panel, body.executive-white-theme .brand,
body.emerald-theme .sidebar, body.emerald-theme .toolbar, body.emerald-theme .library-panel, body.emerald-theme .detail-panel, body.emerald-theme .brand,
body.khmer-gold-theme .sidebar, body.khmer-gold-theme .toolbar, body.khmer-gold-theme .library-panel, body.khmer-gold-theme .detail-panel, body.khmer-gold-theme .brand,
body.lotus-theme .sidebar, body.lotus-theme .toolbar, body.lotus-theme .library-panel, body.lotus-theme .detail-panel, body.lotus-theme .brand,
body.copper-theme .sidebar, body.copper-theme .toolbar, body.copper-theme .library-panel, body.copper-theme .detail-panel, body.copper-theme .brand,
body.marble-theme .sidebar, body.marble-theme .toolbar, body.marble-theme .library-panel, body.marble-theme .detail-panel, body.marble-theme .brand,
body.aqua-theme .sidebar, body.aqua-theme .toolbar, body.aqua-theme .library-panel, body.aqua-theme .detail-panel, body.aqua-theme .brand,
body.lavender-theme .sidebar, body.lavender-theme .toolbar, body.lavender-theme .library-panel, body.lavender-theme .detail-panel, body.lavender-theme .brand,
body.rose-theme .sidebar, body.rose-theme .toolbar, body.rose-theme .library-panel, body.rose-theme .detail-panel, body.rose-theme .brand,
body.slate-theme .sidebar, body.slate-theme .toolbar, body.slate-theme .library-panel, body.slate-theme .detail-panel, body.slate-theme .brand,
body.olive-theme .sidebar, body.olive-theme .toolbar, body.olive-theme .library-panel, body.olive-theme .detail-panel, body.olive-theme .brand,
body.paper-theme .sidebar, body.paper-theme .toolbar, body.paper-theme .library-panel, body.paper-theme .detail-panel, body.paper-theme .brand,
body.nimbus-theme .sidebar, body.nimbus-theme .toolbar, body.nimbus-theme .library-panel, body.nimbus-theme .detail-panel, body.nimbus-theme .brand,
body.orchid-theme .sidebar, body.orchid-theme .toolbar, body.orchid-theme .library-panel, body.orchid-theme .detail-panel, body.orchid-theme .brand {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

body.deep-navy-theme .sidebar, body.deep-navy-theme .toolbar, body.deep-navy-theme .library-panel, body.deep-navy-theme .detail-panel, body.deep-navy-theme .brand,
body.charcoal-theme .sidebar, body.charcoal-theme .toolbar, body.charcoal-theme .library-panel, body.charcoal-theme .detail-panel, body.charcoal-theme .brand,
body.dark-emerald-theme .sidebar, body.dark-emerald-theme .toolbar, body.dark-emerald-theme .library-panel, body.dark-emerald-theme .detail-panel, body.dark-emerald-theme .brand {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.deep-navy-theme input, body.deep-navy-theme textarea, body.deep-navy-theme select, body.deep-navy-theme .secondary-action, body.deep-navy-theme .item-row, body.deep-navy-theme .column-filter-row, body.deep-navy-theme .table-header,
body.charcoal-theme input, body.charcoal-theme textarea, body.charcoal-theme select, body.charcoal-theme .secondary-action, body.charcoal-theme .item-row, body.charcoal-theme .column-filter-row, body.charcoal-theme .table-header,
body.dark-emerald-theme input, body.dark-emerald-theme textarea, body.dark-emerald-theme select, body.dark-emerald-theme .secondary-action, body.dark-emerald-theme .item-row, body.dark-emerald-theme .column-filter-row, body.dark-emerald-theme .table-header {
  background: color-mix(in srgb, var(--panel) 82%, #000) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

body[class$="-theme"] .brand { border-bottom-color: var(--accent); }
body[class$="-theme"] .brand-title-kh,
body[class$="-theme"] .detail-heading h2,
body[class$="-theme"] .search-box span,
body[class$="-theme"] .eyebrow { color: var(--ink); }
body[class$="-theme"] .nav-item.active,
body[class$="-theme"] .primary-action {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, #fff 45%, var(--accent));
}
body[class$="-theme"] .table-header {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel)) !important;
  color: var(--ink) !important;
}
body[class$="-theme"] .item-row:hover,
body[class$="-theme"] .item-row.active,
body[class$="-theme"] .item-row.selected-for-download {
  background: color-mix(in srgb, var(--accent) 11%, var(--panel)) !important;
}
body[class$="-theme"] .row-select-button[aria-pressed="true"],
body[class$="-theme"] .table-add-button:hover,
body[class$="-theme"] .resize-handle:hover {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}


/* ===== ADDITIONAL LIGHT GOVERNMENT THEMES (NO DARK THEMES) ===== */
body.sapphire-theme { --bg:#eef5ff; --panel:#ffffff; --ink:#14213d; --muted:#526783; --line:#c8d8f2; --accent:#1e40af; --accent-strong:#1d4ed8; background:linear-gradient(180deg,#f8fbff,#e7f0ff); }
body.civic-teal-theme { --bg:#eefcfb; --panel:#ffffff; --ink:#173a3f; --muted:#52777b; --line:#b9e3e4; --accent:#0f766e; --accent-strong:#115e59; background:linear-gradient(180deg,#f5fffe,#dff7f5); }
body.porcelain-theme { --bg:#f7fbff; --panel:#ffffff; --ink:#223044; --muted:#607085; --line:#d7e3f1; --accent:#3b82f6; --accent-strong:#2563eb; background:radial-gradient(circle at top right, rgba(191,219,254,.55), transparent 28%),linear-gradient(180deg,#ffffff,#eef6ff); }
body.ivory-blue-theme { --bg:#fbfaf4; --panel:#fffef9; --ink:#1f2a44; --muted:#697088; --line:#ddd8c7; --accent:#284b8f; --accent-strong:#1e3a8a; background:linear-gradient(180deg,#fffef8,#f1f4fb); }
body.soft-gold-theme { --bg:#fffaf0; --panel:#ffffff; --ink:#2f2717; --muted:#756746; --line:#eadcaf; --accent:#b7791f; --accent-strong:#975a16; background:linear-gradient(180deg,#fffdf7,#f8edcf); }
body.mekong-theme { --bg:#eef9ff; --panel:#ffffff; --ink:#10364d; --muted:#52768b; --line:#b9dff1; --accent:#0ea5e9; --accent-strong:#0284c7; background:linear-gradient(180deg,#f5fcff,#dcf2fb); }
body.bamboo-theme { --bg:#f3faed; --panel:#ffffff; --ink:#27391c; --muted:#687a56; --line:#cfe3bd; --accent:#65a30d; --accent-strong:#4d7c0f; background:linear-gradient(180deg,#fbfff6,#eaf6dc); }
body.morning-mist-theme { --bg:#f6f8fb; --panel:#ffffff; --ink:#263241; --muted:#697789; --line:#d8e0ea; --accent:#64748b; --accent-strong:#475569; background:linear-gradient(180deg,#ffffff,#eef2f7); }
body.ruby-office-theme { --bg:#fff5f5; --panel:#ffffff; --ink:#432527; --muted:#7e6366; --line:#f1c5c9; --accent:#b91c1c; --accent-strong:#991b1b; background:linear-gradient(180deg,#fffafa,#fde8e8); }
body.amber-cream-theme { --bg:#fff7ed; --panel:#fffefb; --ink:#3b2a1a; --muted:#765f48; --line:#f1d0a8; --accent:#d97706; --accent-strong:#b45309; background:linear-gradient(180deg,#fffaf3,#fae7c9); }
body.ceremony-theme { --bg:#fff7f2; --panel:#ffffff; --ink:#3d2520; --muted:#795e56; --line:#edc9be; --accent:#c2410c; --accent-strong:#9a3412; background:linear-gradient(180deg,#fffaf6,#fbe4d7); }
body.registry-blue-theme { --bg:#f2f7ff; --panel:#ffffff; --ink:#16253c; --muted:#5e6e84; --line:#ccd8ea; --accent:#1f4e79; --accent-strong:#163a5b; background:linear-gradient(180deg,#fbfdff,#e9f1fb); }

body.sapphire-theme .sidebar, body.sapphire-theme .toolbar, body.sapphire-theme .library-panel, body.sapphire-theme .detail-panel, body.sapphire-theme .brand,
body.civic-teal-theme .sidebar, body.civic-teal-theme .toolbar, body.civic-teal-theme .library-panel, body.civic-teal-theme .detail-panel, body.civic-teal-theme .brand,
body.porcelain-theme .sidebar, body.porcelain-theme .toolbar, body.porcelain-theme .library-panel, body.porcelain-theme .detail-panel, body.porcelain-theme .brand,
body.ivory-blue-theme .sidebar, body.ivory-blue-theme .toolbar, body.ivory-blue-theme .library-panel, body.ivory-blue-theme .detail-panel, body.ivory-blue-theme .brand,
body.soft-gold-theme .sidebar, body.soft-gold-theme .toolbar, body.soft-gold-theme .library-panel, body.soft-gold-theme .detail-panel, body.soft-gold-theme .brand,
body.mekong-theme .sidebar, body.mekong-theme .toolbar, body.mekong-theme .library-panel, body.mekong-theme .detail-panel, body.mekong-theme .brand,
body.bamboo-theme .sidebar, body.bamboo-theme .toolbar, body.bamboo-theme .library-panel, body.bamboo-theme .detail-panel, body.bamboo-theme .brand,
body.morning-mist-theme .sidebar, body.morning-mist-theme .toolbar, body.morning-mist-theme .library-panel, body.morning-mist-theme .detail-panel, body.morning-mist-theme .brand,
body.ruby-office-theme .sidebar, body.ruby-office-theme .toolbar, body.ruby-office-theme .library-panel, body.ruby-office-theme .detail-panel, body.ruby-office-theme .brand,
body.amber-cream-theme .sidebar, body.amber-cream-theme .toolbar, body.amber-cream-theme .library-panel, body.amber-cream-theme .detail-panel, body.amber-cream-theme .brand,
body.ceremony-theme .sidebar, body.ceremony-theme .toolbar, body.ceremony-theme .library-panel, body.ceremony-theme .detail-panel, body.ceremony-theme .brand,
body.registry-blue-theme .sidebar, body.registry-blue-theme .toolbar, body.registry-blue-theme .library-panel, body.registry-blue-theme .detail-panel, body.registry-blue-theme .brand {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

/* Removed too-dark themes from selector; if old saved values exist, force them back to clean light. */
body.deep-navy-theme,
body.charcoal-theme,
body.dark-emerald-theme {
  color-scheme: light !important;
  --bg:#f7f9fb !important;
  --panel:#ffffff !important;
  --ink:#17202a !important;
  --muted:#64748b !important;
  --line:#d8dee6 !important;
  --accent:#2563eb !important;
  --accent-strong:#1d4ed8 !important;
  background:linear-gradient(180deg,#f7f9fb,#eef2f6) !important;
}


/* ===== SIDEBAR COLLAPSE RESTORE FIX ===== */
/* Keep the expand/collapse control visible and clickable after the left navigation is collapsed. */
.app-shell.sidebar-collapsed {
  grid-template-columns: 44px minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 8px 6px !important;
  overflow: visible !important;
  align-items: center;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  left: 7px !important;
  right: auto !important;
  z-index: 9999 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 30px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  background: var(--panel) !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.16) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar-toggle:focus-visible {
  color: #ffffff !important;
  background: var(--accent) !important;
  outline: none !important;
}


/* =========================================================
   PROFESSIONAL NAVIGATION HIDE / UNHIDE ENHANCEMENT
   Keeps the restore control visible, polished, and easy to click.
   ========================================================= */
:root {
  --nav-expanded-width: 318px;
  --nav-collapsed-width: 58px;
  --nav-rail-bg: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(238,244,255,0.92));
  --nav-toggle-shadow: 0 10px 24px rgba(15, 43, 76, 0.18), 0 2px 5px rgba(15, 43, 76, 0.10);
}

.app-shell {
  grid-template-columns: var(--nav-expanded-width) minmax(0, 1fr) !important;
  transition: grid-template-columns var(--pd-sidebar-transition-duration, 260ms) var(--pd-sidebar-transition-timing, cubic-bezier(.2,.8,.2,1));
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--nav-collapsed-width) minmax(0, 1fr) !important;
}

.sidebar {
  width: auto !important;
  isolation: isolate;
  transition:
    width 260ms cubic-bezier(.2,.8,.2,1),
    padding 260ms cubic-bezier(.2,.8,.2,1),
    background 220ms ease,
    box-shadow 220ms ease;
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 8px 7px;
  z-index: -1;
  border-radius: 20px;
  background: rgba(255,255,255,0.34);
  opacity: 0;
  transition: opacity 220ms ease;
}

.sidebar-toggle {
  top: 18px !important;
  right: -18px !important;
  z-index: 50 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  color: var(--accent) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.98), rgba(255,255,255,0.88)),
    var(--panel) !important;
  box-shadow: var(--nav-toggle-shadow) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease,
    right 260ms cubic-bezier(.2,.8,.2,1),
    left 260ms cubic-bezier(.2,.8,.2,1);
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  transform: translateX(2px) scale(1.045);
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28), 0 3px 8px rgba(15, 43, 76, 0.14) !important;
  outline: none;
}

.sidebar-toggle::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  min-width: max-content;
  padding: 6px 9px;
  border: 1px solid rgba(15, 43, 76, 0.10);
  border-radius: 9px;
  background: rgba(20, 31, 48, 0.92);
  color: #fff;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: opacity 140ms ease, transform 140ms ease;
}

.sidebar-toggle:hover::after,
.sidebar-toggle:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.app-shell.sidebar-collapsed .sidebar {
  width: var(--nav-collapsed-width) !important;
  min-width: var(--nav-collapsed-width) !important;
  padding: 10px 8px !important;
  overflow: visible !important;
  background: var(--nav-rail-bg) !important;
  border-right: 1px solid rgba(37, 99, 235, 0.16) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.8), 8px 0 22px rgba(15, 43, 76, 0.06);
}

.app-shell.sidebar-collapsed .sidebar::before {
  opacity: 1;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-10px) scale(.98);
  pointer-events: none !important;
  transition: opacity 140ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.app-shell:not(.sidebar-collapsed) .sidebar > :not(.sidebar-toggle) {
  transition: opacity 220ms ease 80ms, transform 240ms ease 80ms;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  left: 10px !important;
  right: auto !important;
  top: 16px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32), 0 2px 7px rgba(15,43,76,0.16) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar-toggle:focus-visible {
  transform: translateX(3px) scale(1.045);
}

.app-shell.sidebar-collapsed .sidebar-toggle::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.10);
  z-index: -1;
}

.app-shell.sidebar-collapsed .sidebar::after {
  content: "NAV";
  position: absolute;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: color-mix(in srgb, var(--accent) 58%, #64748b);
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .26em;
  opacity: .72;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .workspace {
  min-width: 0;
}

/* Make collapsed/expanded motion feel more premium */
.brand,
.nav-section,
.sidebar-tools,
.save-status-bar,
.toolbar,
.content-grid,
.library-panel,
.detail-panel {
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

/* Refine nav items while expanded */
.app-shell:not(.sidebar-collapsed) .nav-item {
  border: 1px solid transparent;
}

.app-shell:not(.sidebar-collapsed) .nav-item:hover {
  border-color: rgba(37, 99, 235, 0.10);
  box-shadow: 0 5px 16px rgba(15, 43, 76, 0.06);
}

.app-shell:not(.sidebar-collapsed) .nav-item.active {
  border-color: rgba(37, 99, 235, 0.14);
  box-shadow: inset 4px 0 0 var(--accent), 0 8px 18px rgba(15, 43, 76, 0.07);
}

/* Improve theme button so it matches the new navigation polish */
.theme-palette-button {
  box-shadow: 0 4px 12px rgba(15, 43, 76, 0.08);
}

.theme-palette-button:hover,
.theme-palette-button:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 18px rgba(15, 43, 76, 0.12);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar-toggle,
  .sidebar > :not(.sidebar-toggle),
  .brand,
  .nav-section,
  .toolbar,
  .content-grid,
  .library-panel,
  .detail-panel {
    transition: none !important;
  }
}


/* =========================================================
   SLEEK NAVIGATION HIDE / UNHIDE OVERRIDE
   Fixes the bulky collapsed rail and replaces it with a clean floating handle.
   ========================================================= */
:root {
  --nav-expanded-width: 318px;
  --nav-collapsed-width: 0px;
  --nav-handle-size: 42px;
  --nav-handle-height: 54px;
}

.app-shell {
  grid-template-columns: var(--nav-expanded-width) minmax(0, 1fr) !important;
}

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

.sidebar {
  z-index: 30;
  overflow: visible !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
  box-shadow: 8px 0 30px rgba(32, 74, 135, 0.07);
}

.sidebar::before,
.sidebar::after {
  display: none !important;
}

.sidebar-toggle {
  top: 18px !important;
  right: -19px !important;
  left: auto !important;
  width: 38px !important;
  height: 50px !important;
  border-radius: 0 16px 16px 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-left-color: rgba(37, 99, 235, 0.08) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--accent) !important;
  box-shadow: 10px 10px 26px rgba(35, 76, 130, 0.12), 0 1px 0 rgba(255,255,255,0.9) inset !important;
  backdrop-filter: blur(14px);
  font-size: 24px !important;
  font-weight: 800 !important;
  transform: none !important;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  transform: translateX(2px) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 14px 16px 34px rgba(37, 99, 235, 0.22) !important;
}

.sidebar-toggle::before {
  content: "" !important;
  position: absolute;
  left: 7px;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
  opacity: .18;
  transform: translateY(-50%);
}

.sidebar-toggle::after {
  content: attr(aria-label) !important;
  left: calc(100% + 9px) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-5px) !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.90) !important;
  color: #fff !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
}

.sidebar-toggle:hover::after,
.sidebar-toggle:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-18px) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  left: 0 !important;
  right: auto !important;
  top: 24px !important;
  width: 42px !important;
  height: 58px !important;
  border-radius: 0 18px 18px 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  border-left: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--accent) !important;
  box-shadow: 12px 14px 32px rgba(30, 64, 120, 0.16), 0 0 0 1px rgba(255,255,255,.75) inset !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar-toggle:focus-visible {
  transform: translateX(3px) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #fff !important;
  box-shadow: 16px 18px 38px rgba(37, 99, 235, 0.28) !important;
}

.app-shell.sidebar-collapsed .workspace {
  margin-left: 0 !important;
}

.app-shell.sidebar-collapsed .toolbar {
  padding-left: 52px !important;
}

.app-shell.sidebar-collapsed .content-grid {
  padding-left: 12px !important;
}

/* =========================================================
   LUXURY NAVIGATION TOGGLE V2 — clean floating control
   Replaces the old side tab / rail with a premium compact orb.
   ========================================================= */
:root {
  --nav-expanded-width: 238px;
  --nav-fab-size: 46px;
  --nav-fab-gap: 14px;
}

.app-shell {
  grid-template-columns: var(--nav-expanded-width) minmax(0, 1fr) !important;
}

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

.sidebar {
  overflow: hidden !important;
  isolation: isolate;
}

/* Expanded state: small premium button INSIDE the sidebar, not an ugly outside tab */
.sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1000 !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94)) !important;
  color: var(--accent) !important;
  box-shadow:
    0 8px 22px rgba(31, 78, 121, 0.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--icon-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease !important;
}

.sidebar-toggle::before,
.sidebar-toggle::after {
  display: none !important;
  content: none !important;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  transform: translateY(-1px) scale(1.04) !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  outline: none !important;
}

/* Collapsed state: beautiful floating glass orb, no rail, no huge empty strip */
.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-24px) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  width: var(--nav-fab-size) !important;
  height: var(--nav-fab-size) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98), rgba(255,255,255,.84) 42%, rgba(239,246,255,.92) 100%) !important;
  color: transparent !important;
  box-shadow:
    0 16px 36px rgba(30, 64, 120, 0.18),
    0 0 0 1px rgba(255,255,255,.75) inset,
    inset 0 -10px 18px rgba(37,99,235,.045) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  transform: none !important;
}

/* Draw a refined menu icon + blue accent dot inside the collapsed orb */
.app-shell.sidebar-collapsed .sidebar-toggle::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  left: 14px;
  top: 15px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 7px 0 var(--accent),
    0 14px 0 var(--accent);
  opacity: .95;
}

.app-shell.sidebar-collapsed .sidebar-toggle::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  right: 9px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

.app-shell.sidebar-collapsed .sidebar-toggle:hover,
.app-shell.sidebar-collapsed .sidebar-toggle:focus-visible {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: rgba(37, 99, 235, 0.26) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,1), rgba(239,246,255,.96) 48%, rgba(219,234,254,.96) 100%) !important;
  box-shadow:
    0 22px 46px rgba(37, 99, 235, 0.24),
    0 0 0 5px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Give workspace breathing room only near top so button never overlaps toolbar controls */
.app-shell.sidebar-collapsed .toolbar {
  padding-left: 76px !important;
}

.app-shell.sidebar-collapsed .content-grid {
  padding-left: 10px !important;
}

/* Remove older decorative collapsed rail remnants from previous versions */
.app-shell.sidebar-collapsed .sidebar::before,
.app-shell.sidebar-collapsed .sidebar::after,
body.navigation-collapsed::before,
body.navigation-collapsed::after {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-toggle,
  .app-shell.sidebar-collapsed .sidebar-toggle {
    transition: none !important;
  }
}


/* =========================================================
   SUPER SEXY LEFT + RIGHT NAVIGATION - FINAL OVERRIDE
   Clean luxury floating controls, no ugly rails, no tall tabs.
   ========================================================= */
:root {
  --nav-control-size: 38px;
  --nav-control-radius: 14px;
  --nav-control-shadow: 0 18px 42px rgba(15, 23, 42, .16), 0 5px 14px rgba(37, 99, 235, .10);
  --nav-control-border: rgba(148, 163, 184, .30);
  --nav-control-glass: rgba(255, 255, 255, .82);
}

.app-shell,
.content-grid,
.sidebar,
.detail-panel,
.workspace {
  transition:
    grid-template-columns .34s cubic-bezier(.2,.8,.2,1),
    width .34s cubic-bezier(.2,.8,.2,1),
    padding .28s ease,
    transform .28s ease,
    opacity .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}

/* LEFT NAV: opened state - premium edge orb */
.sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  right: -18px !important;
  z-index: 80 !important;
  width: var(--nav-control-size) !important;
  height: var(--nav-control-size) !important;
  padding: 0 !important;
  border: 1px solid var(--nav-control-border) !important;
  border-radius: var(--nav-control-radius) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.76)) !important;
  color: transparent !important;
  box-shadow: var(--nav-control-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.sidebar-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 9px !important;
  height: 9px !important;
  border-left: 2px solid var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  transform: rotate(45deg) translate(1px, -1px) !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

.sidebar-toggle::after {
  content: "Hide" !important;
  position: absolute !important;
  left: 46px !important;
  top: 50% !important;
  translate: 0 -50% !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, .90) !important;
  color: #fff !important;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-6px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  transform: translateY(-1px) scale(1.055) !important;
  border-color: rgba(37, 99, 235, .34) !important;
  background: linear-gradient(145deg, #fff, #eff6ff) !important;
  box-shadow:
    0 22px 50px rgba(37, 99, 235, .20),
    0 0 0 5px rgba(37, 99, 235, .08) !important;
  outline: none !important;
}

.sidebar-toggle:hover::after,
.sidebar-toggle:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* LEFT NAV: collapsed state - floating mini dock, not a rail */
.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-28px) scale(.98) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: fixed !important;
  left: 14px !important;
  top: 76px !important;
  right: auto !important;
  width: 42px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,1), rgba(255,255,255,.86) 38%, rgba(239,246,255,.92) 100%) !important;
  box-shadow:
    0 22px 52px rgba(15, 23, 42, .16),
    0 8px 20px rgba(37, 99, 235, .13),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before {
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-right: 2px solid var(--accent) !important;
  border-top: 2px solid var(--accent) !important;
  transform: rotate(45deg) translate(-1px, 1px) !important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::after {
  content: "Menu" !important;
  left: 50px !important;
}

.app-shell.sidebar-collapsed .toolbar {
  padding-left: 66px !important;
}

/* RIGHT DETAIL NAV: premium divider orb */
.panel-arrow-toggle {
  position: absolute !important;
  top: 16px !important;
  left: -20px !important;
  z-index: 90 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--nav-control-border) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,251,255,.78)) !important;
  color: transparent !important;
  box-shadow: var(--nav-control-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  cursor: pointer !important;
}

.panel-arrow-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid var(--accent) !important;
  border-top: 2px solid var(--accent) !important;
  transform: rotate(45deg) translate(-1px, 1px) !important;
}

.panel-arrow-toggle::after {
  content: "Hide details" !important;
  position: absolute !important;
  right: 48px !important;
  top: 50% !important;
  translate: 0 -50% !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.90) !important;
  color: #fff !important;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(6px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.panel-arrow-toggle:hover,
.panel-arrow-toggle:focus-visible {
  transform: translateY(-1px) scale(1.055) !important;
  border-color: rgba(37, 99, 235, .34) !important;
  background: linear-gradient(145deg, #fff, #eff6ff) !important;
  box-shadow:
    0 22px 50px rgba(37, 99, 235, .20),
    0 0 0 5px rgba(37, 99, 235, .08) !important;
  outline: none !important;
}

.panel-arrow-toggle:hover::after,
.panel-arrow-toggle:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* When the right panel is hidden, show a clean floating return button at the right edge */
.content-grid.detail-collapsed {
  grid-template-columns: minmax(440px, 1fr) 0 0 !important;
  gap: 0 !important;
}

.content-grid.detail-collapsed .resize-handle {
  width: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.content-grid.detail-collapsed .detail-panel {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.content-grid.detail-collapsed .panel-arrow-toggle {
  position: fixed !important;
  top: 76px !important;
  right: 14px !important;
  left: auto !important;
  width: 42px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,1), rgba(255,255,255,.86) 38%, rgba(239,246,255,.92) 100%) !important;
  box-shadow:
    0 22px 52px rgba(15, 23, 42, .16),
    0 8px 20px rgba(37, 99, 235, .13),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.content-grid.detail-collapsed .panel-arrow-toggle::before {
  border: 0 !important;
  border-left: 2px solid var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  transform: rotate(45deg) translate(1px, -1px) !important;
}

.content-grid.detail-collapsed .panel-arrow-toggle::after {
  content: "Details" !important;
  right: 50px !important;
}

/* Premium panels: subtle rounded desktop-app finish */
.sidebar {
  border-top-right-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
  box-shadow: 12px 0 34px rgba(15, 23, 42, .055) !important;
}

.detail-panel {
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
  box-shadow: -12px 0 34px rgba(15, 23, 42, .055) !important;
}

.resize-handle {
  width: 6px !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(148,163,184,.22), transparent) !important;
}

.resize-handle:hover,
.content-grid.resizing .resize-handle {
  background: linear-gradient(180deg, transparent, rgba(37,99,235,.45), transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-toggle,
  .panel-arrow-toggle,
  .app-shell,
  .content-grid,
  .sidebar,
  .detail-panel,
  .workspace {
    transition: none !important;
  }
}

/* Split-screen support: keep the right detail panel reachable beside another app/window. */
.workspace {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
}

.content-grid {
  min-width: calc(440px + 6px + var(--detail-width, 360px) + 16px) !important;
}

.content-grid.detail-collapsed {
  min-width: 520px !important;
}

.content-grid.dashboard-mode {
  min-width: 700px !important;
}

/* Column fit: allow long Khmer labels and values to use the column height instead of clipping. */
.table-header > span,
.table-header-cell,
.item-row > span,
.task-row > span,
.work-row > span,
.progress-row > span,
.inspector-row > span {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.table-header > span,
.table-header-cell {
  line-height: 1.25;
}

.item-row > span,
.task-row > span,
.work-row > span,
.progress-row > span,
.inspector-row > span {
  line-height: 1.35;
}

.select-cell,
.table-action-cell,
.row-actions,
.item-row .data-pin-label {
  white-space: nowrap !important;
  overflow-wrap: normal;
}

.dropdown-source-title,
.dropdown-source-status {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.dropdown-source-row {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
}

.photo-detail-preview.drag-over {
  border-color: var(--accent);
  background: rgba(51, 51, 255, 0.08);
  box-shadow: 0 0 0 5px rgba(51, 51, 255, 0.12);
}

/* USER UPDATE: all upload drop targets share the Menu 1 active dropzone state. */
.attachment-upload-zone:hover,
.attachment-upload-zone:focus-visible,
.attachment-upload-zone.drag-over,
.menu3-sub-actions-dropzone:hover,
.menu3-sub-actions-dropzone:focus-visible,
.menu3-sub-actions-dropzone.is-drag-over,
.photo-detail-preview:hover,
.photo-detail-preview:focus-within,
.photo-detail-preview.drag-over {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  outline: none !important;
}


/* ==========================================================
   FAST FUTURISTIC GLASSMORPHISM / HOLOGRAPHIC GOVERNMENT THEME
   Optimized version: no backdrop-filter, no infinite animation, fewer heavy shadows
   ========================================================== */

body.holographic-glass-theme,
body.vision-blue-theme,
body.luxury-silver-theme {
  --panel-glass: rgba(255, 255, 255, 0.88);
  --panel-glass-strong: rgba(255, 255, 255, 0.96);
  --holo-line: rgba(96, 165, 250, 0.28);
  --holo-glow: rgba(59, 130, 246, 0.14);
  --holo-accent: #2563eb;
  --holo-accent-2: #60a5fa;
  --holo-ink: #101828;
  --holo-muted: #607083;
  --shadow: 0 10px 28px rgba(37, 99, 235, 0.10);
  color: var(--holo-ink);
  background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 52%, #fffaf2 100%);
}

body.vision-blue-theme {
  --holo-accent: #1d4ed8;
  --holo-accent-2: #38bdf8;
  --holo-line: rgba(37, 99, 235, 0.28);
  --holo-glow: rgba(14, 165, 233, 0.13);
  background: linear-gradient(135deg, #f6fbff 0%, #eaf4ff 55%, #ffffff 100%);
}

body.luxury-silver-theme {
  --holo-accent: #64748b;
  --holo-accent-2: #93c5fd;
  --holo-line: rgba(148, 163, 184, 0.32);
  --holo-glow: rgba(100, 116, 139, 0.12);
  background: linear-gradient(135deg, #fbfcff 0%, #eef2f7 55%, #fffaf0 100%);
}

body.holographic-glass-theme .app-shell,
body.vision-blue-theme .app-shell,
body.luxury-silver-theme .app-shell {
  padding: 8px;
  gap: 8px;
}

body.holographic-glass-theme .sidebar,
body.holographic-glass-theme .toolbar,
body.holographic-glass-theme .library-panel,
body.holographic-glass-theme .detail-panel,
body.holographic-glass-theme .brand,
body.holographic-glass-theme .attachment-panel,
body.holographic-glass-theme .settings-panel,
body.vision-blue-theme .sidebar,
body.vision-blue-theme .toolbar,
body.vision-blue-theme .library-panel,
body.vision-blue-theme .detail-panel,
body.vision-blue-theme .brand,
body.vision-blue-theme .attachment-panel,
body.vision-blue-theme .settings-panel,
body.luxury-silver-theme .sidebar,
body.luxury-silver-theme .toolbar,
body.luxury-silver-theme .library-panel,
body.luxury-silver-theme .detail-panel,
body.luxury-silver-theme .brand,
body.luxury-silver-theme .attachment-panel,
body.luxury-silver-theme .settings-panel {
  background: var(--panel-glass);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow);
}

body.holographic-glass-theme .sidebar,
body.vision-blue-theme .sidebar,
body.luxury-silver-theme .sidebar,
body.holographic-glass-theme .workspace,
body.vision-blue-theme .workspace,
body.luxury-silver-theme .workspace {
  border-radius: 18px;
  overflow: hidden;
}

body.holographic-glass-theme .toolbar,
body.vision-blue-theme .toolbar,
body.luxury-silver-theme .toolbar {
  min-height: 50px;
  margin-bottom: 6px;
  border-radius: 16px;
}

body.holographic-glass-theme .library-panel,
body.holographic-glass-theme .detail-panel,
body.vision-blue-theme .library-panel,
body.vision-blue-theme .detail-panel,
body.luxury-silver-theme .library-panel,
body.luxury-silver-theme .detail-panel {
  border-radius: 18px;
}

body.holographic-glass-theme .brand,
body.vision-blue-theme .brand,
body.luxury-silver-theme .brand {
  border-bottom: 0;
  border-radius: 14px;
  margin: 0 0 4px;
  padding: 9px 38px 9px 10px;
}

body.holographic-glass-theme .nav-item,
body.vision-blue-theme .nav-item,
body.luxury-silver-theme .nav-item {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.holographic-glass-theme .nav-item:hover,
body.vision-blue-theme .nav-item:hover,
body.luxury-silver-theme .nav-item:hover {
  color: var(--holo-accent);
  background: rgba(255,255,255,.72);
  border-color: var(--holo-line);
  transform: none;
  box-shadow: none;
}

body.holographic-glass-theme .nav-item.active,
body.vision-blue-theme .nav-item.active,
body.luxury-silver-theme .nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--holo-accent), var(--holo-accent-2));
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 8px 18px var(--holo-glow);
}

body.holographic-glass-theme .nav-item.active::before,
body.vision-blue-theme .nav-item.active::before,
body.luxury-silver-theme .nav-item.active::before {
  display: none;
}

body.holographic-glass-theme .nav-icon,
body.vision-blue-theme .nav-icon,
body.luxury-silver-theme .nav-icon {
  border-radius: 9px;
  background: linear-gradient(135deg, var(--holo-accent), var(--holo-accent-2));
  box-shadow: none;
}

body.holographic-glass-theme .search-box,
body.holographic-glass-theme input,
body.holographic-glass-theme textarea,
body.holographic-glass-theme select,
body.vision-blue-theme .search-box,
body.vision-blue-theme input,
body.vision-blue-theme textarea,
body.vision-blue-theme select,
body.luxury-silver-theme .search-box,
body.luxury-silver-theme input,
body.luxury-silver-theme textarea,
body.luxury-silver-theme select {
  background: rgba(255,255,255,.86);
  border-color: rgba(148,163,184,.34);
  border-radius: 12px;
  box-shadow: none;
}

body.holographic-glass-theme .primary-action,
body.holographic-glass-theme .secondary-action,
body.holographic-glass-theme .icon-button,
body.holographic-glass-theme .table-add-button,
body.holographic-glass-theme .sidebar-toggle,
body.holographic-glass-theme .panel-arrow-toggle,
body.vision-blue-theme .primary-action,
body.vision-blue-theme .secondary-action,
body.vision-blue-theme .icon-button,
body.vision-blue-theme .table-add-button,
body.vision-blue-theme .sidebar-toggle,
body.vision-blue-theme .panel-arrow-toggle,
body.luxury-silver-theme .primary-action,
body.luxury-silver-theme .secondary-action,
body.luxury-silver-theme .icon-button,
body.luxury-silver-theme .table-add-button,
body.luxury-silver-theme .sidebar-toggle,
body.luxury-silver-theme .panel-arrow-toggle {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 6px 14px rgba(37,99,235,.08);
}

body.holographic-glass-theme .primary-action,
body.vision-blue-theme .primary-action,
body.luxury-silver-theme .primary-action {
  background: linear-gradient(135deg, var(--holo-accent), var(--holo-accent-2));
}

body.holographic-glass-theme .secondary-action:hover,
body.holographic-glass-theme .icon-button:hover,
body.holographic-glass-theme .table-add-button:hover,
body.vision-blue-theme .secondary-action:hover,
body.vision-blue-theme .icon-button:hover,
body.vision-blue-theme .table-add-button:hover,
body.luxury-silver-theme .secondary-action:hover,
body.luxury-silver-theme .icon-button:hover,
body.luxury-silver-theme .table-add-button:hover {
  transform: none;
  border-color: var(--holo-line);
  box-shadow: 0 8px 16px var(--holo-glow);
}

body.holographic-glass-theme .item-row,
body.vision-blue-theme .item-row,
body.luxury-silver-theme .item-row {
  background: rgba(255,255,255,.62);
  border-bottom-color: rgba(148,163,184,.18);
}

body.holographic-glass-theme .item-row:hover,
body.vision-blue-theme .item-row:hover,
body.luxury-silver-theme .item-row:hover {
  background: rgba(255,255,255,.90);
  box-shadow: inset 3px 0 0 var(--holo-accent);
}

body.holographic-glass-theme .item-row.active,
body.holographic-glass-theme .item-row.selected-for-download,
body.vision-blue-theme .item-row.active,
body.vision-blue-theme .item-row.selected-for-download,
body.luxury-silver-theme .item-row.active,
body.luxury-silver-theme .item-row.selected-for-download {
  background: rgba(219,234,254,.72);
}

body.holographic-glass-theme .table-header,
body.holographic-glass-theme .column-filter-row,
body.vision-blue-theme .table-header,
body.vision-blue-theme .column-filter-row,
body.luxury-silver-theme .table-header,
body.luxury-silver-theme .column-filter-row {
  background: rgba(255,255,255,.90);
}

body.holographic-glass-theme .dashboard-shell,
body.vision-blue-theme .dashboard-shell,
body.luxury-silver-theme .dashboard-shell {
  position: relative;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 12px 30px rgba(37,99,235,.10);
}

body.holographic-glass-theme .dashboard-header,
body.vision-blue-theme .dashboard-header,
body.luxury-silver-theme .dashboard-header,
body.holographic-glass-theme .dashboard-summary-strip article,
body.holographic-glass-theme .dashboard-pivot-card,
body.holographic-glass-theme .dashboard-widget,
body.vision-blue-theme .dashboard-summary-strip article,
body.vision-blue-theme .dashboard-pivot-card,
body.vision-blue-theme .dashboard-widget,
body.luxury-silver-theme .dashboard-summary-strip article,
body.luxury-silver-theme .dashboard-pivot-card,
body.luxury-silver-theme .dashboard-widget {
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 8px 20px rgba(31,78,121,.08);
}

body.holographic-glass-theme .theme-selector,
body.vision-blue-theme .theme-selector,
body.luxury-silver-theme .theme-selector {
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border-color: var(--holo-line);
  box-shadow: 0 6px 14px rgba(37,99,235,.08);
}

body.holographic-glass-theme .theme-palette-button,
body.vision-blue-theme .theme-palette-button,
body.luxury-silver-theme .theme-palette-button {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--holo-accent), var(--holo-accent-2));
  color: #fff;
  box-shadow: 0 8px 18px var(--holo-glow);
}

@media (prefers-reduced-motion: reduce) {
  body.holographic-glass-theme *,
  body.vision-blue-theme *,
  body.luxury-silver-theme * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   AURORA WOW GLASS THEME
   Luminous profile-card inspired theme with glass panels and stage glow.
   ========================================================== */

body.aurora-wow-theme {
  --bg: #f7fbff;
  --panel: rgba(255, 255, 255, 0.78);
  --ink: #0f172a;
  --muted: #53657c;
  --line: rgba(138, 184, 240, 0.42);
  --accent: #2f80ed;
  --accent-strong: #1760c5;
  --warm: #f7c873;
  --danger: #fb5f7a;
  --shadow: 0 18px 50px rgba(47, 128, 237, 0.16);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 244, 219, 0.96) 0 12%, transparent 34%),
    radial-gradient(circle at 52% 98%, rgba(53, 152, 255, 0.36) 0 8%, transparent 31%),
    radial-gradient(circle at 9% 18%, rgba(125, 211, 252, 0.42), transparent 27%),
    radial-gradient(circle at 91% 24%, rgba(255, 210, 238, 0.44), transparent 25%),
    linear-gradient(135deg, #fff8ea 0%, #f7fbff 38%, #eaf6ff 100%);
}

body.aurora-wow-theme::before,
body.aurora-wow-theme::after {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body.aurora-wow-theme::before {
  left: 50%;
  bottom: -118px;
  width: 740px;
  height: 300px;
  border: 1px solid rgba(91, 178, 255, 0.46);
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 35px, rgba(91, 178, 255, 0.30) 36px 38px, transparent 39px 72px),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.78), rgba(125, 211, 252, 0.22) 42%, transparent 68%);
  box-shadow:
    0 0 26px rgba(59, 164, 255, 0.42),
    0 0 84px rgba(59, 164, 255, 0.26),
    inset 0 0 28px rgba(255, 255, 255, 0.82);
}

body.aurora-wow-theme::after {
  top: 11%;
  left: 4%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff, #58a8ff 58%, #2f80ed);
  box-shadow:
    86vw 7vh 0 -7px rgba(255, 255, 255, 0.78),
    88vw 7vh 0 0 rgba(86, 168, 255, 0.74),
    92vw 29vh 0 0 rgba(255, 255, 255, 0.74),
    92vw 29vh 0 9px rgba(244, 87, 123, 0.72),
    4vw 48vh 0 -10px rgba(255, 255, 255, 0.88),
    4vw 48vh 0 -1px rgba(47, 128, 237, 0.72),
    82vw 69vh 0 -6px rgba(255, 255, 255, 0.86),
    82vw 69vh 0 5px rgba(251, 113, 133, 0.62);
  opacity: 0.72;
}

body.aurora-wow-theme .app-shell {
  position: relative;
  z-index: 1;
  gap: 12px;
  padding: 12px;
}

body.aurora-wow-theme .sidebar,
body.aurora-wow-theme .toolbar,
body.aurora-wow-theme .library-panel,
body.aurora-wow-theme .detail-panel,
body.aurora-wow-theme .brand,
body.aurora-wow-theme .attachment-panel,
body.aurora-wow-theme .settings-panel {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(244, 250, 255, 0.66)),
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.26), transparent 36%);
  box-shadow:
    0 18px 45px rgba(47, 128, 237, 0.14),
    0 0 0 1px rgba(99, 179, 255, 0.18) inset,
    0 0 26px rgba(119, 199, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.18);
}

body.aurora-wow-theme .sidebar,
body.aurora-wow-theme .workspace {
  border-radius: 20px;
  overflow: hidden;
}

body.aurora-wow-theme .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.78);
}

body.aurora-wow-theme .brand {
  margin: 0 0 6px;
  padding: 10px 38px 10px 10px;
  border-bottom: 0;
  border-radius: 16px;
}

body.aurora-wow-theme .brand-title-kh,
body.aurora-wow-theme .detail-heading h2,
body.aurora-wow-theme .dashboard-header h2,
body.aurora-wow-theme .dashboard-big-number {
  color: #0b5ed7;
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.26);
}

body.aurora-wow-theme .toolbar {
  min-height: 52px;
  margin-bottom: 7px;
  border-radius: 18px;
}

body.aurora-wow-theme .content-grid {
  gap: 8px;
  padding: 8px 0 0;
}

body.aurora-wow-theme .library-panel,
body.aurora-wow-theme .detail-panel {
  border-radius: 20px;
}

body.aurora-wow-theme .resize-handle {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(47, 128, 237, 0.34));
  box-shadow: 0 0 16px rgba(47, 128, 237, 0.26);
}

body.aurora-wow-theme .nav-item {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.38);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body.aurora-wow-theme .nav-item:hover {
  color: #0b5ed7;
  transform: translateX(2px);
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 26px rgba(47, 128, 237, 0.12);
}

body.aurora-wow-theme .nav-item.active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(135deg, #2f80ed, #73c7ff 62%, #ffd98f);
  box-shadow: 0 12px 28px rgba(47, 128, 237, 0.28), 0 0 18px rgba(125, 211, 252, 0.36);
}

body.aurora-wow-theme .nav-item.active::before {
  display: none;
}

body.aurora-wow-theme .folder-ui-icon,
body.aurora-wow-theme .nav-icon {
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.32);
}

body.aurora-wow-theme .search-box,
body.aurora-wow-theme input,
body.aurora-wow-theme textarea,
body.aurora-wow-theme select {
  border-color: rgba(111, 171, 235, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

body.aurora-wow-theme .search-box:focus-within,
body.aurora-wow-theme input:focus,
body.aurora-wow-theme textarea:focus,
body.aurora-wow-theme select:focus {
  border-color: rgba(47, 128, 237, 0.76);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.14), 0 0 22px rgba(96, 165, 250, 0.18);
}

body.aurora-wow-theme .primary-action,
body.aurora-wow-theme .secondary-action,
body.aurora-wow-theme .icon-button,
body.aurora-wow-theme .table-add-button,
body.aurora-wow-theme .sidebar-toggle,
body.aurora-wow-theme .panel-arrow-toggle,
body.aurora-wow-theme .theme-palette-button {
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(47, 128, 237, 0.12), 0 0 0 1px rgba(96, 165, 250, 0.14) inset;
}

body.aurora-wow-theme .primary-action,
body.aurora-wow-theme .theme-palette-button,
body.aurora-wow-theme .table-add-button {
  color: #fff;
  background: linear-gradient(135deg, #1f6fe5, #60b8ff 58%, #f7c873);
}

body.aurora-wow-theme .secondary-action:hover,
body.aurora-wow-theme .icon-button:hover,
body.aurora-wow-theme .table-add-button:hover,
body.aurora-wow-theme .theme-palette-button:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 12px 28px rgba(47, 128, 237, 0.18), 0 0 24px rgba(125, 211, 252, 0.24);
}

body.aurora-wow-theme .table-header,
body.aurora-wow-theme .column-filter-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(225, 242, 255, 0.88));
  border-bottom-color: rgba(125, 173, 235, 0.36);
}

body.aurora-wow-theme .item-row {
  border-bottom-color: rgba(147, 197, 253, 0.20);
  background: rgba(255, 255, 255, 0.52);
}

body.aurora-wow-theme .item-row:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 4px 0 0 #2f80ed, 0 8px 22px rgba(47, 128, 237, 0.10);
}

body.aurora-wow-theme .item-row.active,
body.aurora-wow-theme .item-row.selected-for-download {
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.94), rgba(255, 244, 219, 0.68));
}

body.aurora-wow-theme .dashboard-shell {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 216, 151, 0.32), transparent 28%),
    radial-gradient(circle at 10% 0%, rgba(125, 211, 252, 0.30), transparent 28%),
    rgba(255, 255, 255, 0.66);
  box-shadow: 0 22px 58px rgba(47, 128, 237, 0.16), 0 0 36px rgba(125, 211, 252, 0.18) inset;
  backdrop-filter: blur(14px) saturate(1.18);
}

body.aurora-wow-theme .dashboard-header,
body.aurora-wow-theme .dashboard-summary-strip article,
body.aurora-wow-theme .dashboard-pivot-card,
body.aurora-wow-theme .dashboard-chart-card,
body.aurora-wow-theme .dashboard-widget {
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 14px 34px rgba(47, 128, 237, 0.12), 0 0 0 1px rgba(96, 165, 250, 0.12) inset;
}

body.aurora-wow-theme .dashboard-summary-strip strong,
body.aurora-wow-theme .dashboard-widget h3,
body.aurora-wow-theme .dashboard-pivot-card h3 {
  color: #0f5fcf;
}

@media (prefers-reduced-motion: reduce) {
  body.aurora-wow-theme *,
  body.aurora-wow-theme::before,
  body.aurora-wow-theme::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   EXECUTIVE SETTINGS PANEL UI - fast premium redesign
   Appended by ChatGPT. Logic/HTML ids preserved.
   ========================================================= */
.settings-dialog {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 42px);
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(243,247,252,0.96));
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(255,255,255,0.84) inset;
  overflow: hidden;
}

.settings-dialog::backdrop {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
}

.settings-panel {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  max-height: calc(100vh - 42px);
  overflow: hidden;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.settings-header {
  grid-column: 1 / -1;
  position: relative;
  top: auto;
  z-index: 5;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 18px 26px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(232,242,255,0.9)),
    radial-gradient(circle at top right, rgba(37,99,235,0.16), transparent 42%);
}

.settings-header::before {
  content: "⚙";
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  margin-right: 12px;
  border-radius: 16px;
  color: #0f2f57;
  background: linear-gradient(145deg, #ffffff, #ddecff);
  border: 1px solid rgba(96, 165, 250, 0.32);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
  font-family: var(--icon-font);
  font-size: 22px;
}

.settings-header > div:first-child {
  flex: 1;
  min-width: 0;
}

.settings-header .eyebrow {
  margin: 0 0 4px;
  color: #2563eb;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.settings-title-row {
  gap: 14px;
  align-items: center;
}

.settings-header h2 {
  color: #0f172a;
  font-size: 25px;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}

.settings-edit-approval {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(37, 99, 235, 0.32);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #102a43, #1d4ed8 70%, #38bdf8);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.settings-edit-approval:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
}

.settings-edit-approval:disabled {
  color: #64748b;
  background: linear-gradient(135deg, #eef2f7, #f8fafc);
  box-shadow: none;
}

#closeSettingsButton {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: #334155;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  font-size: 20px;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

#closeSettingsButton:hover {
  transform: translateY(-1px);
  color: #b91c1c;
  background: #fff;
}

.settings-tabs {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  top: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 18px 14px;
  border-right: 1px solid rgba(148, 163, 184, 0.24);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(248,250,252,0.92), rgba(229,239,252,0.72));
}

.settings-tabs::before {
  content: "System Control";
  margin: 0 8px 8px;
  color: #64748b;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.settings-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px 8px 44px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #334155;
  background: transparent;
  font-size: 15px;
  text-align: left;
  box-shadow: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.settings-tab::before {
  content: "▣";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  color: #2563eb;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-family: var(--icon-font);
  font-size: 12px;
}

.settings-tab:nth-child(2)::before { content: "👤"; }
.settings-tab:nth-child(3)::before { content: "📜"; }
.settings-tab:nth-child(4)::before { content: "☰"; }
.settings-tab:nth-child(5)::before { content: "▦"; }
.settings-tab:nth-child(6)::before { content: "📁"; }
.settings-tab:nth-child(7)::before { content: "🛡"; }
.settings-tab:nth-child(8)::before { content: "☁"; }

.settings-tab:hover {
  transform: translateX(2px);
  color: #0f172a;
  background: rgba(255,255,255,0.74);
  border-color: rgba(148, 163, 184, 0.24);
}

.settings-tab.active {
  color: #071a34;
  background: linear-gradient(135deg, #ffffff, #e7f1ff);
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.14), inset 4px 0 0 #2563eb;
}

.settings-tab-panel {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow: auto;
  margin: 0;
  scrollbar-color: #8093a8 #edf3f9;
  scrollbar-width: auto;
}

.settings-tab-panel::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar,
.settings-list::-webkit-scrollbar,
.library-panel::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar {
  width: 18px;
  height: 18px;
}

.settings-tab-panel::-webkit-scrollbar-thumb,
.settings-panel::-webkit-scrollbar-thumb,
.settings-list::-webkit-scrollbar-thumb,
.library-panel::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb {
  min-width: 56px;
  min-height: 56px;
  border: 4px solid #edf3f9;
  border-radius: 999px;
  background: #8093a8;
}

.settings-tab-panel::-webkit-scrollbar-thumb:hover,
.settings-panel::-webkit-scrollbar-thumb:hover,
.settings-list::-webkit-scrollbar-thumb:hover,
.library-panel::-webkit-scrollbar-thumb:hover,
.detail-panel::-webkit-scrollbar-thumb:hover {
  background: #60758b;
}

.settings-tab-panel::-webkit-scrollbar-track,
.settings-panel::-webkit-scrollbar-track,
.settings-list::-webkit-scrollbar-track,
.library-panel::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track {
  background: #edf3f9;
  border-radius: 999px;
}

.settings-section {
  align-self: stretch;
  gap: 16px;
  min-height: 100%;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.94));
}

.settings-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  color: #0f172a;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", "Noto Sans Khmer", serif;
  font-size: 18px;
  font-weight: 400;
}

.settings-section h3::before {
  content: "";
  width: 9px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.settings-section h4 {
  color: #516173;
  font-size: 13px;
}

.settings-subsection,
.settings-add-row,
.settings-list,
.audit-log,
.reference-settings,
.settings-share-tools,
.settings-file-actions,
.dashboard-builder-grid,
.widget-builder-grid,
.dashboard-list {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.settings-subsection {
  padding: 14px;
}

.app-password-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #f8fbff, #eaf4ff 56%, #ffffff);
}

.settings-add-row {
  padding: 12px;
  gap: 10px;
  background: rgba(255,255,255,0.78);
}

.settings-list {
  padding: 8px;
  background: rgba(255,255,255,0.62);
}

.settings-panel .settings-list {
  max-height: none;
  overflow: visible;
}

.inspector-column-list,
.column-dropdown-manager-list,
.custom-menu-column-sections .settings-list {
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-bottom: 22px;
  scrollbar-color: #60758b #edf3f9;
  scrollbar-width: auto;
}

.settings-panel .inspector-column-row {
  grid-template-columns: minmax(260px, 1fr) auto auto auto auto auto auto auto;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.settings-panel .inspector-column-row .secondary-action,
.settings-panel .inspector-column-row button,
.settings-panel .inspector-column-row .settings-checkbox {
  min-height: 46px;
  align-items: center;
  white-space: nowrap;
}

.settings-panel .inspector-column-row .settings-checkbox {
  display: inline-flex;
  gap: 8px;
}

.inspector-column-list::-webkit-scrollbar,
.column-dropdown-manager-list::-webkit-scrollbar,
.custom-menu-column-sections .settings-list::-webkit-scrollbar {
  width: 24px;
  height: 24px;
}

.inspector-column-list::-webkit-scrollbar-thumb,
.column-dropdown-manager-list::-webkit-scrollbar-thumb,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-thumb {
  min-width: 78px;
  min-height: 78px;
  border: 5px solid #edf3f9;
  border-radius: 999px;
  background: #60758b;
}

.inspector-column-list::-webkit-scrollbar-thumb:hover,
.column-dropdown-manager-list::-webkit-scrollbar-thumb:hover,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-thumb:hover {
  background: #3f5368;
}

.inspector-column-list::-webkit-scrollbar-track,
.column-dropdown-manager-list::-webkit-scrollbar-track,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #edf3f9;
}

.settings-list-row,
.user-settings-row,
.menu-settings-row,
.dashboard-settings-row {
  min-height: 46px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.04);
}

.settings-panel input,
.settings-panel select,
.settings-panel textarea {
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  color: #0f172a;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.settings-panel input:focus,
.settings-panel select:focus,
.settings-panel textarea:focus {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
  background: #fff;
}

.settings-panel .secondary-action,
.settings-panel .primary-action {
  min-height: 40px;
  border-radius: 13px;
  font-weight: 700;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.settings-panel .secondary-action {
  border: 1px solid rgba(148, 163, 184, 0.34);
  color: #0f172a;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.06);
}

.settings-panel .secondary-action:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.38);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}

.settings-panel .danger {
  color: #fff;
  border-color: rgba(185, 28, 28, 0.18);
  background: linear-gradient(135deg, #b91c1c, #ef4444);
}

.audit-actions,
.settings-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-builder-grid,
.widget-builder-grid,
.print-settings-grid {
  padding: 14px;
  gap: 12px;
}

.settings-edit-locked .settings-tab-panel {
  opacity: 0.82;
  filter: saturate(.9);
}

@media (max-width: 980px) {
  .settings-dialog {
    width: calc(100vw - 22px);
  }
  .settings-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .settings-tabs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  }
  .settings-tabs::before { display: none; }
  .settings-tab-panel {
    grid-column: 1;
    grid-row: 3;
  }
}


/* MLVT Premium Login UI V2 - enhanced glass secure portal */
.app-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 16% 12%, rgba(37, 99, 235, 0.18), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(0, 184, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(241, 247, 255, 0.96), rgba(248, 252, 255, 0.90));
  overflow: hidden;
}

.app-lock-overlay::before,
.app-lock-overlay::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.app-lock-overlay::before {
  width: 780px;
  height: 780px;
  right: -260px;
  bottom: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 68, 255, 0.14), transparent 68%);
  filter: blur(2px);
}

.app-lock-overlay::after {
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 78%);
}

.app-lock-card.app-lock-card-v2 {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(1120px, calc(100vw - 72px));
  padding: 0;
  border: 1px solid rgba(47, 88, 164, 0.22);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 34px 90px rgba(15, 40, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
}

.app-lock-glow {
  position: absolute;
  inset: -90px -40px auto auto;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: rgba(0, 68, 255, 0.16);
  filter: blur(50px);
  z-index: -1;
}

.app-lock-window-title {
  min-height: 54px;
  margin: 0;
  padding: 0 22px;
  border-radius: 0;
  border-bottom: 1px solid rgba(15, 72, 170, 0.10);
  color: #355070;
  background: linear-gradient(90deg, rgba(255,255,255,0.86), rgba(243,248,255,0.76));
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.app-lock-window-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 96px;
  color: #16a34a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-lock-window-title-text {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-lock-live-label {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.app-lock-status-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08);
}

.app-lock-status-dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: rgba(34, 197, 94, 0.16);
  animation: appLockLivePulse 1.65s ease-out infinite;
}

.app-lock-status-dot::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.13), 0 6px 16px rgba(34, 197, 94, 0.34);
}

@keyframes appLockLivePulse {
  0% {
    transform: scale(0.72);
    opacity: 0.75;
  }
  70% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.app-lock-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #64748b;
  font-size: 25px;
  background: rgba(255, 255, 255, 0.58);
}

.app-lock-body {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 1.02fr);
  gap: 0;
  min-height: 520px;
}

.app-lock-brand-panel {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 48px 46px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(14, 60, 160, 0.96), rgba(0, 32, 126, 0.94)),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.24), transparent 36%);
  overflow: hidden;
}

.app-lock-brand-panel::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  pointer-events: none;
}

.app-lock-brand-panel::after {
  content: "MLVT";
  position: absolute;
  right: -22px;
  bottom: 24px;
  color: rgba(255,255,255,0.06);
  font-family: Georgia, serif;
  font-size: 112px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.app-lock-logo-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  border-radius: 36px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(37,99,235,0.14);
  transform: rotate(-2deg);
}

.app-lock-logo-ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(125, 211, 252, 0.72);
  border-radius: 40px;
  transform: rotate(7deg);
}

.app-lock-logo {
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 50, 120, 0.18));
}

.app-lock-title-block {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  color: #fff;
}

.app-lock-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,0.10);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.app-lock-title-block h2 {
  max-width: none;
  margin: 4px 0 0;
  color: #fff;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Noto Serif Khmer", serif;
  font-size: var(--login-title-line1-size, 22px);
  font-weight: 400;
  line-height: var(--login-title-line1-spacing, 1.12);
  white-space: nowrap;
  text-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.app-lock-title-block p {
  margin: 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.42;
}

.app-lock-line-two {
  font-size: var(--login-title-line2-size, 18px);
  line-height: var(--login-title-line2-spacing, 1.25);
}

.app-lock-line-three {
  font-size: var(--login-title-line3-size, 18px);
  line-height: var(--login-title-line3-spacing, 1.25);
}

.app-lock-security-badge {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: #e0f2fe;
  background: rgba(255,255,255,0.10);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 650;
}

.app-lock-form-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: 46px 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,251,255,0.82));
}

.app-lock-form-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.app-lock-form-heading span {
  color: #2563eb;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-lock-form-heading strong {
  max-width: 100%;
  color: #0f172a;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Times New Roman", serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.35;
}

.app-lock-field {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 70px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 12px 28px rgba(15, 52, 110, 0.07);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.app-lock-field:focus-within {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.54);
  background: #fff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14), 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.app-lock-field-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #e0ecff, #f8fbff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.app-lock-field-icon::before,
.app-lock-field-icon::after {
  display: none;
}

.user-icon::before,
.password-icon::before {
  display: block;
  position: static;
  border: 0;
  background: none;
  color: #2563eb;
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
}

.user-icon::before { content: "\1F464"; }
.password-icon::before { content: "\1F512"; }

.app-lock-input-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-lock-field-label {
  color: #64748b;
  font-family: "Khmer OS Siemreap", "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}

.app-lock-field input {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  color: #0f172a;
  background: transparent;
  font-family: "Segoe UI", "Khmer OS Siemreap", Arial, sans-serif;
  font-size: 17px;
  outline: none;
}

.app-lock-field input::placeholder {
  color: #94a3b8;
}

.app-lock-eye-button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  cursor: pointer;
  font-family: "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
}

.lock-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 16px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

.app-lock-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  padding: 0 22px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0000ff 58%, #1644bf);
  box-shadow: 0 18px 38px rgba(29, 78, 216, 0.30), inset 0 1px 0 rgba(255,255,255,0.30);
  cursor: pointer;
  font-family: "Khmer OS Muol Light", "Khmer OS Muol", "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.app-lock-submit small {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.82;
  text-transform: uppercase;
}

.app-lock-submit:hover,
.app-lock-submit:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.08);
  outline: none;
  box-shadow: 0 22px 46px rgba(29, 78, 216, 0.36), 0 0 0 4px rgba(37,99,235,0.12);
}

.lock-recovery-button {
  justify-self: center;
  margin-top: 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  text-decoration: none;
}

.lock-recovery-button:hover {
  color: #1d4ed8;
  background: rgba(37,99,235,0.08);
}


.app-lock-access-note {
  justify-self: center;
  margin: 4px 0 0;
  color: #64748b;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-align: center;
  opacity: 0.82;
}

.app-lock-access-note::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
  vertical-align: 1px;
}

@media (max-width: 860px) {
  .app-lock-card.app-lock-card-v2 {
    width: min(560px, calc(100vw - 28px));
  }
  .app-lock-body {
    grid-template-columns: 1fr;
  }
  .app-lock-brand-panel {
    min-height: 260px;
    padding: 34px 28px;
  }
  .app-lock-title-block h2 {
    font-size: var(--login-title-line1-size, 22px);
  }
  .app-lock-form-panel {
    padding: 34px 28px;
  }
}

/* V3 alignment fix: center official title and instruction message */
.app-lock-form-heading {
  justify-items: center;
  text-align: center;
}

.app-lock-form-heading strong,
.app-lock-form-heading p,
.app-lock-title-block h2,
.app-lock-title-block p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.lock-message {
  justify-content: center;
  text-align: center;
}


/* =========================================================
   PREMIUM TEMPORARY NOTIFICATION TOAST SYSTEM
   Slide in, auto-disappear, stacked, theme-aware
   ========================================================= */
.toast-host {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 99999;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.toast-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 12px 12px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--toast-color) 24%, rgba(255,255,255,.78));
  border-radius: 18px;
  color: var(--ink, #17202a);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.86)),
    color-mix(in srgb, var(--toast-color) 10%, transparent);
  box-shadow:
    0 18px 46px rgba(15, 23, 42, .18),
    inset 0 1px 0 rgba(255,255,255,.74);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  pointer-events: auto;
  transform: translateX(calc(100% + 34px)) scale(.98);
  opacity: 0;
  animation: toastSlideIn .42s cubic-bezier(.2,.9,.2,1) forwards;
}

.toast-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--toast-color), color-mix(in srgb, var(--toast-color) 65%, #ffffff));
}

.toast-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--toast-color), color-mix(in srgb, var(--toast-color) 35%, transparent));
  transform-origin: left;
  animation: toastProgress var(--toast-duration, 3200ms) linear forwards;
}

.toast-card.is-hiding {
  animation: toastSlideOut .30s ease forwards;
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--toast-color), color-mix(in srgb, var(--toast-color) 72%, #111827));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--toast-color) 28%, transparent);
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
}

.toast-content {
  min-width: 0;
}

.toast-title {
  margin: 0;
  color: var(--ink, #17202a);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.toast-message {
  margin: 4px 0 0;
  color: var(--muted, #5f6b76);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted, #64748b);
  background: rgba(15, 23, 42, .04);
  cursor: pointer;
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
}

.toast-close:hover {
  color: #fff;
  background: var(--toast-color);
}

.toast-success { --toast-color: #16a34a; }
.toast-error { --toast-color: #dc2626; }
.toast-warning { --toast-color: #f59e0b; }
.toast-info { --toast-color: var(--accent, #1f4e79); }

body.deep-navy-theme .toast-card,
body.charcoal-theme .toast-card,
body.dark-emerald-theme .toast-card {
  background:
    linear-gradient(135deg, rgba(23,32,51,.94), rgba(15,23,42,.88)),
    color-mix(in srgb, var(--toast-color) 12%, transparent);
  color: var(--ink);
}

@keyframes toastSlideIn {
  from { transform: translateX(calc(100% + 34px)) scale(.98); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0) scale(1); opacity: 1; max-height: 120px; }
  to { transform: translateX(calc(100% + 34px)) scale(.98); opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 720px) {
  .toast-host {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-card,
  .toast-card::after,
  .toast-card.is-hiding {
    animation: none !important;
  }
  .toast-card { transform: none; opacity: 1; }
}


/* =========================================================
   UX MODERNIZATION PACK - micro interactions + command UX
   ========================================================= */
:root {
  --ux-fast: 140ms;
  --ux-normal: 240ms;
  --ux-slow: 420ms;
  --ux-ease: cubic-bezier(.2,.8,.2,1);
}

body.ux-booting .workspace,
body.ux-booting .sidebar {
  animation: uxAppEnter .46s var(--ux-ease) both;
}

@keyframes uxAppEnter {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

button,
.nav-item,
.item-row,
.secondary-action,
.primary-action,
.table-add-button,
.icon-button {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button::after,
.nav-item::after,
.item-row::after,
.secondary-action::after,
.primary-action::after,
.table-add-button::after,
.icon-button::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 0;
  height: 0;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--accent, #1f4e79) 18%, transparent);
  opacity: 0;
}

.ux-ripple::after {
  animation: uxRipple .55s ease-out;
}

@keyframes uxRipple {
  0% { width: 0; height: 0; opacity: .6; }
  100% { width: 360px; height: 360px; opacity: 0; }
}

.secondary-action:active,
.primary-action:active,
.table-add-button:active,
.icon-button:active,
.nav-item:active {
  transform: translateY(1px) scale(.985);
}

.ux-progress-bar {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10020;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform-origin: left;
  transform: scaleX(.05);
  background: linear-gradient(90deg, var(--accent, #1f4e79), color-mix(in srgb, var(--accent, #1f4e79) 35%, #ffffff));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent, #1f4e79) 38%, transparent);
}

.ux-progress-bar.is-running {
  opacity: 1;
  animation: uxProgress 900ms var(--ux-ease) both;
}

@keyframes uxProgress {
  0% { transform: scaleX(.05); opacity: .9; }
  65% { transform: scaleX(.72); opacity: .95; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Active menu feels like it slides instead of jumping */
.nav-item.active {
  animation: uxActiveMenu .28s var(--ux-ease) both;
}

@keyframes uxActiveMenu {
  from { transform: translateX(-4px); }
  to { transform: translateX(0); }
}

/* Better empty states without changing app logic */
.empty-state {
  position: relative;
  min-height: 220px;
  padding-top: 84px !important;
  color: #64748b;
  font-size: 14px;
}

.empty-state::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 50%;
  width: 54px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 9px;
  background: linear-gradient(135deg, #f8fafc, color-mix(in srgb, var(--accent, #1f4e79) 16%, #ffffff));
  box-shadow: inset 0 0 0 1px #dbe5ef, 0 10px 24px rgba(15, 23, 42, .08);
}

.empty-state::after {
  content: "No records yet · use + to add or import data";
  position: absolute;
  top: 138px;
  left: 50%;
  width: min(320px, 80%);
  transform: translateX(-50%);
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
}

/* shadcn-style Empty component slots */
.empty-state[data-slot="empty"],
.dashboard-empty-state[data-slot="empty"],
.dashboard-builder-empty[data-slot="empty"],
.widget-library-preview-empty[data-slot="empty"] {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  min-height: 220px !important;
  padding: 24px !important;
  border: 1px dashed var(--border, #e4e4e7) !important;
  border-radius: var(--radius, 10px) !important;
  background: color-mix(in srgb, var(--background, #ffffff) 92%, var(--muted, #f4f4f5)) !important;
  color: var(--foreground, #18181b) !important;
  text-align: center !important;
  text-wrap: balance !important;
  box-shadow: none !important;
}

.dashboard-empty-state[data-slot="empty"],
.widget-library-preview-empty[data-slot="empty"] {
  min-height: 160px !important;
}

.dashboard-builder-empty[data-slot="empty"] {
  min-height: var(--shadcn-chart-card-height, 320px) !important;
  border-color: color-mix(in srgb, var(--dashboard-primary, var(--primary, #18181b)) 24%, var(--border, #e4e4e7)) !important;
  background: color-mix(in srgb, var(--dashboard-card, var(--background, #ffffff)) 88%, var(--muted, #f4f4f5)) !important;
}

.empty-state[data-slot="empty"]::before,
.empty-state[data-slot="empty"]::after,
.dashboard-empty-state[data-slot="empty"]::before,
.dashboard-empty-state[data-slot="empty"]::after,
.dashboard-builder-empty[data-slot="empty"]::before,
.dashboard-builder-empty[data-slot="empty"]::after,
.widget-library-preview-empty[data-slot="empty"]::before,
.widget-library-preview-empty[data-slot="empty"]::after {
  content: none !important;
  display: none !important;
}

[data-slot="empty-header"].app-empty-header {
  display: flex !important;
  max-width: 384px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}

[data-slot="empty-icon"].app-empty-media {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  border-radius: var(--radius, 10px) !important;
  background: var(--muted, #f4f4f5) !important;
  color: var(--foreground, #18181b) !important;
}

[data-slot="empty-title"].app-empty-title {
  color: var(--foreground, #18181b) !important;
  font-family: "Inter", "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

[data-slot="empty-description"].app-empty-description {
  color: var(--muted-foreground, #71717a) !important;
  font-family: "Inter", "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.625 !important;
}

[data-slot="empty-content"].app-empty-content {
  display: flex !important;
  width: 100% !important;
  max-width: 384px !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  color: var(--muted-foreground, #71717a) !important;
  font-size: 14px !important;
}

.empty-state[data-empty-tone="warning"],
.dashboard-empty-state[data-empty-tone="warning"] {
  border-color: color-mix(in srgb, var(--destructive, #ef4444) 36%, var(--border, #e4e4e7)) !important;
}

/* Command palette */
.ux-command-palette {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: none;
  place-items: start center;
  padding-top: 11vh;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(8px);
}

.ux-command-palette.is-open {
  display: grid;
  animation: uxFadeIn .18s ease both;
}

@keyframes uxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ux-command-card {
  width: min(680px, calc(100vw - 34px));
  overflow: hidden;
  border: 1px solid rgba(219, 229, 239, .95);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  animation: uxPaletteEnter .26s var(--ux-ease) both;
}

@keyframes uxPaletteEnter {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ux-command-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #e5edf5;
}

.ux-command-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #1f4e79), var(--accent-strong, #163a5a));
  font-family: var(--icon-font);
}

.ux-command-header input {
  height: 42px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
}

.ux-command-header kbd {
  padding: 4px 8px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
  font-size: 12px;
}

.ux-command-list {
  display: grid;
  gap: 6px;
  max-height: 390px;
  overflow: auto;
  padding: 10px;
}

.ux-command-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #1f2937;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ux-command-item:hover,
.ux-command-item.is-active {
  border-color: color-mix(in srgb, var(--accent, #1f4e79) 18%, #dbe5ef);
  background: color-mix(in srgb, var(--accent, #1f4e79) 9%, #ffffff);
}

.ux-command-item b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ux-command-item small {
  display: block;
  color: #64748b;
}

.ux-command-item span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #f1f5f9;
}

.ux-command-item kbd {
  color: #94a3b8;
  font-size: 11px;
}

/* Premium form feedback */
.ux-field-dirty {
  border-color: color-mix(in srgb, var(--accent, #1f4e79) 55%, #cfd8e3) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f4e79) 10%, transparent) !important;
}

.ux-save-pulse {
  animation: uxSavePulse .75s var(--ux-ease);
}

@keyframes uxSavePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 34%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* Keep dark fallback readable */
body.deep-navy-theme .ux-command-card,
body.charcoal-theme .ux-command-card,
body.dark-emerald-theme .ux-command-card {
  background: color-mix(in srgb, var(--panel) 92%, #000) !important;
  border-color: var(--line) !important;
}
body.deep-navy-theme .ux-command-item,
body.charcoal-theme .ux-command-item,
body.dark-emerald-theme .ux-command-item,
body.deep-navy-theme .ux-command-header input,
body.charcoal-theme .ux-command-header input,
body.dark-emerald-theme .ux-command-header input {
  color: var(--ink) !important;
}

@media (max-width: 760px) {
  .ux-command-palette { padding-top: 7vh; }
  .ux-command-card { width: calc(100vw - 18px); border-radius: 16px; }
}

/* Keep long menu lists reachable in the left navigation. */
.app-shell:not(.sidebar-collapsed) .sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar {
  width: 8px;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar-track {
  background: rgba(226, 236, 246, 0.78);
  border-radius: 999px;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar-thumb {
  min-height: 72px;
  border: 2px solid rgba(226, 236, 246, 0.78);
  border-radius: 999px;
  background: #8aa0b5;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar-thumb:hover {
  background: #647b91;
}

.sidebar-resize-handle {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--nav-expanded-width, 238px) - 4px);
  z-index: 1500;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
}

.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.sidebar-resize-handle:hover::after,
body.sidebar-resizing .sidebar-resize-handle::after {
  background: rgba(37, 99, 235, 0.34);
}

.app-shell.sidebar-collapsed .sidebar-resize-handle {
  display: none;
}

body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

.detail-heading .eyebrow {
  display: none !important;
}


/* Make the brand card fit every resized navigation width. */
.app-shell:not(.sidebar-collapsed) .sidebar {
  container-type: inline-size;
  padding-right: 18px !important;
}

.app-shell:not(.sidebar-collapsed) .brand {
  display: grid !important;
  grid-template-columns: clamp(32px, 15cqw, 54px) minmax(0, 1fr);
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: clamp(8px, 4cqw, 16px) !important;
  margin: 0 0 12px 0 !important;
  padding: clamp(10px, 4cqw, 18px) clamp(18px, 7cqw, 34px) clamp(10px, 4cqw, 18px) clamp(10px, 4cqw, 18px) !important;
  overflow: hidden !important;
}

.app-shell:not(.sidebar-collapsed) .brand-logo {
  width: clamp(32px, 15cqw, 54px) !important;
  height: clamp(32px, 15cqw, 54px) !important;
  max-width: none !important;
  max-height: none !important;
}

.app-shell:not(.sidebar-collapsed) .brand > div:last-child,
.app-shell:not(.sidebar-collapsed) .brand h1,
.app-shell:not(.sidebar-collapsed) .brand-title-kh {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.app-shell:not(.sidebar-collapsed) .brand-title-kh {
  font-size: clamp(15px, 8cqw, 30px) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* ===== TOP TOOLBAR GROUPING FIX ===== */
/* Separates theme, system, document and search controls into clean groups. */
.toolbar {
  align-items: stretch !important;
  min-height: auto !important;
  padding: 10px 12px !important;
  overflow: visible !important;
}

.toolbar-actions {
  display: grid !important;
  grid-template-columns: minmax(248px, 0.9fr) auto auto minmax(300px, 1.35fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.toolbar-cluster,
.toolbar-search-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.toolbar-cluster {
  min-height: 44px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel) 88%, #f8fafc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 6px 16px rgba(15,23,42,.045) !important;
}

.toolbar-theme-cluster {
  justify-self: start !important;
  width: 100% !important;
}

.toolbar-system-cluster,
.toolbar-document-cluster {
  justify-self: start !important;
  white-space: nowrap !important;
}

.toolbar-search-group {
  justify-self: stretch !important;
  width: 100% !important;
  gap: 8px !important;
}

.toolbar-search-group .clear-search-button {
  flex: 0 0 auto !important;
  height: 40px !important;
  min-width: 54px !important;
}

.toolbar-search-group .search-box {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 220px !important;
  height: 40px !important;
}

.toolbar .secondary-action,
.toolbar .theme-palette-button,
.toolbar .theme-selector {
  height: 36px !important;
}

.toolbar .secondary-action {
  min-height: 36px !important;
  padding-inline: 11px !important;
  border-radius: 10px !important;
}

.toolbar .settings-button {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}

.theme-selector-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

.toolbar .theme-palette-button {
  width: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
}

.toolbar .theme-selector {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 270px !important;
}

.toolbar-document-cluster .reference-action-button,
.toolbar-document-cluster .download-selected-button {
  min-width: max-content !important;
}

@media (max-width: 1500px) {
  .toolbar-actions {
    grid-template-columns: minmax(248px, 1fr) minmax(0, auto) minmax(0, auto) !important;
  }

  .toolbar-search-group {
    grid-column: 1 / -1 !important;
  }
}

/* Khmer toolbar text rendering fix. Keep icon-only controls isolated from text labels. */
:root {
  --khmer-ui-font: "Khmer OS Battambang", "Noto Sans Khmer", "Hanuman", Arial, sans-serif;
}

.primary-action,
.secondary-action,
.toolbar .secondary-action,
.toolbar .theme-selector,
.toolbar-search-group .search-box,
.toolbar-search-group .search-box span,
.toolbar-search-group .search-box input {
  font-family: var(--khmer-ui-font) !important;
  line-height: 1.35 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.primary-action,
.secondary-action,
.toolbar .secondary-action,
.toolbar-search-group .search-box {
  align-items: center !important;
}

.primary-action,
.secondary-action,
.toolbar .secondary-action,
.toolbar-search-group .search-box span {
  font-weight: 600 !important;
}

.toolbar .settings-button,
.toolbar .theme-palette-button,
.icon-button,
.folder-ui-icon,
.table-add-button,
.table-clear-button,
.sidebar-toggle,
.panel-arrow-toggle {
  font-family: var(--icon-font) !important;
}

.toolbar .secondary-action:not(.settings-button),
.toolbar-search-group .search-box span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
}

.toolbar-search-group .search-box input {
  padding-top: 1px;
}

/* Sidebar Khmer menu sizing: readable without oversized glyphs. */
.nav-section .nav-item,
.nav-section .nav-item .menu-text,
.nav-section .menu-count {
  font-family: "Noto Sans Khmer", "Khmer OS Battambang", "Hanuman", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.nav-section .nav-item {
  align-items: center !important;
  min-height: 34px !important;
  padding-block: 5px !important;
}

.nav-section .nav-item .menu-text {
  display: flex;
  align-items: center;
  min-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-section .menu-count {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
}

/* Khmer table/header vertical rendering fix. */
:root {
  --khmer-table-font: "Noto Sans Khmer", "Khmer OS Battambang", "Hanuman", Arial, sans-serif;
}

.table-header,
.column-filter-row,
.item-row,
.task-row,
.work-row,
.progress-row,
.inspector-row,
.pivot-result-table,
.dashboard-table {
  font-family: var(--khmer-table-font) !important;
}

.table-header,
.column-filter-row,
.item-row,
.task-row,
.work-row,
.progress-row,
.inspector-row {
  align-items: center !important;
}

.table-header {
  min-height: 40px !important;
  padding-block: 6px !important;
  line-height: 1.6 !important;
}

.table-header > span,
.table-header-cell,
.inspector-table-header span,
.inspector-table-header .table-header-cell {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding-block: 2px;
  font-family: var(--khmer-table-font) !important;
  line-height: 1.65 !important;
  overflow: hidden;
}

.column-filter-row {
  top: 40px !important;
  padding-block: 6px !important;
}

.column-filter-row input {
  min-height: 30px !important;
  padding-block: 5px !important;
  font-family: var(--khmer-table-font) !important;
  line-height: 1.55 !important;
}

.item-row,
.task-row,
.work-row,
.progress-row,
.inspector-row {
  min-height: 40px !important;
  padding-block: 6px !important;
  line-height: 1.6 !important;
}

.item-row > span,
.task-row > span,
.work-row > span,
.progress-row > span,
.inspector-row > span {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding-block: 1px;
  font-family: var(--khmer-table-font) !important;
  line-height: 1.6 !important;
}

.select-cell,
.table-action-cell,
.row-actions {
  align-self: center;
}

.pivot-result-table,
.dashboard-table {
  line-height: 1.6 !important;
}

.pivot-result-table th,
.pivot-result-table td,
.dashboard-table th,
.dashboard-table td {
  padding-block: 9px !important;
  font-family: var(--khmer-table-font) !important;
  line-height: 1.6 !important;
  vertical-align: middle !important;
}

@media (max-width: 1120px) {
  .toolbar-actions {
    grid-template-columns: 1fr !important;
  }

  .toolbar-theme-cluster,
  .toolbar-system-cluster,
  .toolbar-document-cluster,
  .toolbar-search-group {
    justify-self: stretch !important;
    width: 100% !important;
  }

  .toolbar-system-cluster,
  .toolbar-document-cluster {
    flex-wrap: wrap !important;
  }

  .toolbar .theme-selector {
    max-width: none !important;
  }
}


/* Premium task completion progress table copied from the reference. */
.route-vehicles-widget {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.075);
}

.route-vehicles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  padding: 22px 28px 14px;
}

.route-vehicles-header h3 {
  margin: 0;
  color: #2f3c48;
  font-size: clamp(16px, 1.65vw, 24px);
  font-weight: 520;
  letter-spacing: 0.04em;
}

.route-vehicles-actions .dashboard-widget-header-actions {
  position: relative;
  z-index: 6;
}

.route-vehicles-table-shell {
  min-height: 0;
  overflow: auto;
}

.route-vehicles-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  color: #5d6671;
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: 0.045em;
}

.route-vehicles-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 22px;
  border-bottom: 1px solid #eef1f5;
  color: #2f3c48;
  background: #ffffff;
  font-size: clamp(11px, .86vw, 14px);
  font-weight: 760;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-vehicles-table tbody td {
  padding: 16px 22px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
  white-space: nowrap;
}

.route-vehicles-table tbody tr {
  transition: background 150ms ease, transform 150ms ease;
}

.route-vehicles-table tbody tr:hover {
  background: #fafbff;
}

.route-select-cell {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  text-align: center !important;
}

.route-checkbox {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.route-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.route-checkbox span {
  width: 17px;
  height: 17px;
  border: 2px solid #a9afb6;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
  transition: background 150ms ease, border-color 150ms ease;
}

.route-checkbox input:checked + span {
  border-color: #696cff;
  background: #696cff;
}

.route-location-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #2f3c48;
  font-weight: 680;
}

.route-vehicle-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #7d8791;
  background: #eef1f4;
}

.route-warning-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 270px;
  padding: 7px 13px;
  overflow: hidden;
  border-radius: 7px;
  font-size: clamp(12px, .98vw, 15px);
  font-weight: 570;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-warning-pill.is-success {
  color: #62c93d;
  background: rgba(112, 222, 40, 0.14);
}

.route-warning-pill.is-info {
  color: #696cff;
  background: rgba(105, 108, 255, 0.12);
}

.route-warning-pill.is-warning {
  color: #fb8c00;
  background: rgba(251, 140, 0, 0.12);
}

.route-warning-pill.is-danger {
  color: #ff3e1d;
  background: rgba(255, 62, 29, 0.12);
}

.route-progress-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 210px;
}

.route-progress-bar {
  position: relative;
  display: inline-flex;
  width: clamp(120px, 14vw, 180px);
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f2;
}

.route-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #696cff;
  box-shadow: 0 5px 12px rgba(105, 108, 255, 0.28);
  transition: width 260ms ease;
}

.route-progress-cell strong {
  min-width: 48px;
  color: #5d6671;
  font-weight: 560;
}

.route-vehicles-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px 24px;
  color: #9aa0a6;
  font-size: clamp(12px, .95vw, 15px);
  letter-spacing: 0.02em;
}

.route-table-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.route-table-pagination button,
.route-table-pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: #2f3c48;
  background: #f5f6f8;
  font: inherit;
  font-weight: 560;
}

.route-table-pagination button {
  cursor: pointer;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.route-table-pagination button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #ebeef4;
}

.route-table-pagination button.is-active {
  color: #ffffff;
  background: #696cff;
  box-shadow: 0 10px 22px rgba(105, 108, 255, 0.24);
}

.route-table-pagination button:disabled {
  cursor: default;
  opacity: 0.48;
}

.dashboard-widget-small.route-vehicles-widget {
  min-height: 330px;
}

.dashboard-widget-small.route-vehicles-widget .route-vehicles-header {
  padding: 18px 20px 10px;
}

.dashboard-widget-small.route-vehicles-widget .route-vehicles-table {
  min-width: 820px;
  font-size: 13px;
}

.dashboard-widget-small.route-vehicles-widget .route-vehicles-table tbody td,
.dashboard-widget-small.route-vehicles-widget .route-vehicles-table thead th {
  padding: 13px 16px;
}

.dashboard-widget-small.route-vehicles-widget .route-vehicles-footer {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 20px 18px;
}

.dashboard-widget-wide.route-vehicles-widget,
.dashboard-widget-large.route-vehicles-widget {
  min-height: 460px;
}

@media (max-width: 860px) {
  .route-vehicles-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .route-table-pagination {
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────────────────────────
   Sneat-style floating button — SAME LOOK as settings gear,
   DIFFERENT FUNCTION: toggles the right navigation/detail panel.
   ───────────────────────────────────────────────────────────── */
.sneat-floating-right-nav-button {
  position: fixed !important;
  top: 160px !important;
  right: 0 !important;
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px 0 0 8px !important;
  background: #03a9f4 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  box-shadow: 0 6px 18px rgba(3, 169, 244, 0.36) !important;
  font-family: var(--icon-font, "Segoe UI Symbol", "Segoe UI", Arial, sans-serif) !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: width 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
  overflow: hidden !important;
}

.sneat-floating-right-nav-button[hidden] {
  display: none !important;
}

.sneat-floating-right-nav-button svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: 0 0 20px !important;
  color: #ffffff !important;
  animation: sneatFloatingGearSpin 4s linear infinite;
}

.sneat-floating-right-nav-button:hover {
  width: 48px !important;
  max-width: 48px !important;
  background: #0288d1 !important;
  box-shadow: 0 8px 24px rgba(3, 169, 244, 0.44) !important;
}

.sneat-floating-right-nav-button:active {
  transform: translateX(-1px) scale(0.98) !important;
}

.sneat-floating-right-nav-button:focus-visible {
  outline: 3px solid rgba(3, 169, 244, 0.24) !important;
  outline-offset: 3px !important;
}

.sneat-floating-right-nav-button.is-collapsed {
  box-shadow: 0 6px 18px rgba(3, 169, 244, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}

@keyframes sneatFloatingGearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .sneat-floating-right-nav-button {
    top: 112px !important;
  }
}

@media print {
  .sneat-floating-right-nav-button {
    display: none !important;
  }
}


/* Use the blue floating Sneat button as the only toggle. */
.panel-arrow-toggle,
.content-grid.detail-collapsed .panel-arrow-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* When the right/detail panel is opened, do not reserve a grid column.
   Let it float over the page like Sneat Template Customizer. */
.content-grid:not(.dashboard-mode):not(.detail-collapsed) {
  grid-template-columns: minmax(440px, 1fr) 0 0 !important;
  min-width: 520px !important;
  gap: 0 !important;
}

.content-grid:not(.dashboard-mode):not(.detail-collapsed) .resize-handle {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

.content-grid:not(.dashboard-mode):not(.detail-collapsed) .library-panel {
  width: 100% !important;
  max-width: none !important;
}

.content-grid:not(.dashboard-mode):not(.detail-collapsed) .detail-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 10020 !important;
  width: min(var(--right-drawer-width-final), calc(100vw - 72px)) !important;
  min-width: min(360px, calc(100vw - 72px)) !important;
  max-width: min(520px, calc(100vw - 72px)) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-left: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* When closed, keep the panel fully hidden. */
.content-grid.detail-collapsed .detail-panel {
  position: relative !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Blue toggle stays above the drawer and above the search bar. */
.sneat-floating-right-nav-button {
  z-index: 10040 !important;
}


/* =========================================================
   USER FIX: Hide the right/detail drawer completely on logout/login screen
   ========================================================= */
body.app-is-locked .detail-panel,
body.app-is-locked .resize-handle,
body.app-is-locked .sneat-floating-right-nav-button,
body:has(#appLockOverlay) .detail-panel,
body:has(#appLockOverlay) .resize-handle,
body:has(#appLockOverlay) .sneat-floating-right-nav-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-is-locked .content-grid,
body:has(#appLockOverlay) .content-grid {
  grid-template-columns: minmax(0, 1fr) 0 0 !important;
  min-width: 0 !important;
}

html.paperdesk-protected-login-required body {
  overflow: hidden !important;
}

html.paperdesk-protected-login-required .app-shell {
  filter: blur(8px) saturate(0.78) !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.app-is-locked .app-lock-overlay,
body:has(#appLockOverlay) .app-lock-overlay,
html.paperdesk-protected-login-required .app-lock-overlay,
.app-lock-overlay {
  z-index: 200000 !important;
}

html.paperdesk-protected-login-required .app-lock-overlay {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* =========================================================
   USER UPDATE: Three-line hamburger button for hide/show LEFT navigation
   ========================================================= */
.left-nav-hamburger-button {
  display: inline-grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 12px !important;
  color: #3f4a56 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.left-nav-hamburger-button span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transition: transform 180ms ease, opacity 180ms ease, width 180ms ease !important;
}

.left-nav-hamburger-button:hover {
  border-color: rgba(37, 99, 235, 0.30) !important;
  color: var(--accent, #2563eb) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.14) !important;
  transform: translateY(-1px) !important;
}

.left-nav-hamburger-button:active {
  transform: translateY(0) scale(0.98) !important;
}

.left-nav-hamburger-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #2563eb) 18%, transparent) !important;
  outline-offset: 2px !important;
}

.left-nav-hamburger-button.is-collapsed {
  color: var(--accent, #2563eb) !important;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 34%, #d8e2ef) !important;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.left-nav-hamburger-button.is-collapsed span:nth-child(1),
.left-nav-hamburger-button.is-collapsed span:nth-child(3) {
  width: 14px !important;
}

/* Hide the whole left navigation, not a small rail. The hamburger stays in the top toolbar. */
.app-shell.sidebar-collapsed,
body.holographic-glass-theme .app-shell.sidebar-collapsed,
body.vision-blue-theme .app-shell.sidebar-collapsed,
body.luxury-silver-theme .app-shell.sidebar-collapsed,
body[class$="-theme"] .app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed .sidebar,
body.holographic-glass-theme .app-shell.sidebar-collapsed .sidebar,
body.vision-blue-theme .app-shell.sidebar-collapsed .sidebar,
body.luxury-silver-theme .app-shell.sidebar-collapsed .sidebar,
body[class$="-theme"] .app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateX(-100%) !important;
}

.app-shell.sidebar-collapsed .sidebar > *,
.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell.sidebar-collapsed .workspace {
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.app-shell.sidebar-collapsed .toolbar {
  padding-left: 12px !important;
}

body.app-is-locked .left-nav-hamburger-button,
body:has(#appLockOverlay) .left-nav-hamburger-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .left-nav-hamburger-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 11px !important;
  }
  .app-shell.sidebar-collapsed,
  body[class$="-theme"] .app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
}


/* =========================================================
   USER FIX: Right detail navigation is an overlay, not a layout push
   ========================================================= */
:root {
  --right-drawer-overlay-width: min(var(--detail-width, 480px), calc(100vw - 32px));
}

.workspace {
  transition: width var(--pd-right-drawer-transition-duration, 180ms) var(--pd-right-drawer-transition-timing, ease), transform var(--pd-right-drawer-transition-duration, 180ms) var(--pd-right-drawer-transition-timing, ease) !important;
}

body.right-detail-drawer-open .workspace,
body:has(.content-grid:not(.dashboard-mode):not(.detail-collapsed)) .workspace {
  width: auto !important;
  margin-right: 0 !important;
  min-width: 0 !important;
  transform: none !important;
}

body.right-detail-drawer-open .content-grid:not(.dashboard-mode):not(.detail-collapsed) .detail-panel,
body:has(.content-grid:not(.dashboard-mode):not(.detail-collapsed)) .content-grid:not(.dashboard-mode):not(.detail-collapsed) .detail-panel {
  right: 14px !important;
  width: var(--right-drawer-overlay-width) !important;
  min-width: min(340px, calc(100vw - 32px)) !important;
  max-width: min(920px, calc(100vw - 32px)) !important;
  transition: transform 260ms ease, width 260ms ease !important;
}

/* Right navigation is an overlay; floating buttons keep their normal viewport edge. */
body.right-detail-drawer-open .sneat-floating-right-nav-button:not(.is-dashboard-menu),
body:has(.content-grid:not(.dashboard-mode):not(.detail-collapsed)) .sneat-floating-right-nav-button:not(.is-dashboard-menu) {
  right: 0 !important;
  z-index: 10050 !important;
}

/* Closed state: no reserved right space. */
body:not(.right-detail-drawer-open) .workspace {
  margin-right: 0 !important;
}

/* Login/logout screen must never reserve right drawer space. */
body.app-is-locked .workspace,
body:has(#appLockOverlay) .workspace {
  margin-right: 0 !important;
}


/* =========================================================
   USER UPDATE: System utilization block at bottom of LEFT navigation
   ========================================================= */
.app-shell:not(.sidebar-collapsed) .sidebar,
body[class$="-theme"] .app-shell:not(.sidebar-collapsed) .sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 111, 132, 0.42) transparent;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar {
  width: 8px;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.app-shell:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(91, 111, 132, 0.42);
  background-clip: padding-box;
}

.system-utilization-panel {
  display: grid;
  gap: 20px;
  flex: 0 0 auto;
  margin-top: 12px;
  padding: 18px 18px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  color: #323946;
  background: transparent;
}

.system-utilization-panel h2 {
  margin: 0 0 4px;
  color: rgba(72, 83, 98, 0.52);
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.system-utilization-item {
  display: grid;
  gap: 7px;
}

.system-utilization-label {
  color: #2c333f;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.system-utilization-track {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.20);
}

.system-utilization-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width 360ms ease;
}

.system-utilization-bar-cpu {
  background: #696cff;
}

.system-utilization-bar-memory {
  background: #ffb020;
}

.system-utilization-bar-storage {
  background: #e83e68;
}

.system-utilization-value {
  color: #6e7784;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell.sidebar-collapsed .system-utilization-panel {
  display: none !important;
}

body.dark-theme .system-utilization-panel,
body.midnight-theme .system-utilization-panel,
body.deep-navy-theme .system-utilization-panel,
body.charcoal-theme .system-utilization-panel {
  border-top-color: rgba(255, 255, 255, 0.10);
  color: #f8fafc;
}

body.dark-theme .system-utilization-panel h2,
body.midnight-theme .system-utilization-panel h2,
body.deep-navy-theme .system-utilization-panel h2,
body.charcoal-theme .system-utilization-panel h2 {
  color: rgba(226, 232, 240, 0.48);
}

body.dark-theme .system-utilization-label,
body.midnight-theme .system-utilization-label,
body.deep-navy-theme .system-utilization-label,
body.charcoal-theme .system-utilization-label {
  color: #f8fafc;
}

body.dark-theme .system-utilization-track,
body.midnight-theme .system-utilization-track,
body.deep-navy-theme .system-utilization-track,
body.charcoal-theme .system-utilization-track {
  background: rgba(226, 232, 240, 0.15);
}

body.dark-theme .system-utilization-value,
body.midnight-theme .system-utilization-value,
body.deep-navy-theme .system-utilization-value,
body.charcoal-theme .system-utilization-value {
  color: rgba(226, 232, 240, 0.66);
}

@media (max-width: 760px) {
  .system-utilization-panel {
    padding: 16px 14px 18px;
    gap: 16px;
  }
}


/* Save status moved under System Utilization in the left navigation. */
.app-shell:not(.sidebar-collapsed) .sidebar {
  padding-bottom: 14px !important;
  overflow-y: auto !important;
}

.app-shell:not(.sidebar-collapsed) .sidebar::after {
  display: none !important;
}

.app-shell:not(.sidebar-collapsed) .system-utilization-panel {
  margin-top: auto !important;
  padding-bottom: 10px !important;
}

.app-shell:not(.sidebar-collapsed) .save-status-bar {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  margin: 0 0 0 !important;
  flex: 0 0 auto !important;
}

/* Compact theme selector: make the palette + theme dropdown smaller in the top toolbar */
.toolbar-actions {
  grid-template-columns: max-content auto auto minmax(260px, 1fr) !important;
}

.toolbar-theme-cluster {
  width: auto !important;
  min-width: 0 !important;
  justify-self: start !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 3px !important;
  gap: 6px !important;
  border-radius: 12px !important;
}

.theme-selector-wrap {
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.toolbar .theme-palette-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.toolbar .theme-selector {
  flex: 0 0 190px !important;
  width: 190px !important;
  max-width: 190px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 28px 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 30px !important;
}

@media (max-width: 1500px) {
  .toolbar-actions {
    grid-template-columns: max-content auto auto !important;
  }

  .toolbar .theme-selector {
    flex-basis: 170px !important;
    width: 170px !important;
    max-width: 170px !important;
  }
}

/* =========================================================
   USER FIX: Keep top toolbar/search in one row when browser zooms in
   Reason: zoom reduces CSS viewport width, so previous media rules moved
   the search bar to a second row. This override prevents wrapping and uses
   horizontal toolbar scrolling only when the screen is too narrow.
   ========================================================= */
.toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
}

.toolbar > * {
  flex-shrink: 0 !important;
}

.toolbar .toolbar-actions {
  display: grid !important;
  grid-template-columns: max-content max-content max-content minmax(260px, 1fr) !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 0 780px !important;
  width: 100% !important;
  min-width: 780px !important;
  max-width: none !important;
}

.toolbar-theme-cluster,
.toolbar-system-cluster,
.toolbar-document-cluster,
.toolbar-search-group {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.toolbar-search-group {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 260px !important;
}

.toolbar-search-group .search-box {
  min-width: 220px !important;
  width: 100% !important;
}

.toolbar-system-cluster,
.toolbar-document-cluster {
  flex: 0 0 auto !important;
}

.toolbar .secondary-action,
.toolbar .theme-palette-button,
.toolbar .theme-selector,
.toolbar-search-group .search-box,
.toolbar-search-group .clear-search-button {
  flex-shrink: 0 !important;
}

@media (max-width: 1500px) {
  .toolbar .toolbar-actions {
    grid-template-columns: max-content max-content max-content minmax(240px, 1fr) !important;
    min-width: 760px !important;
    flex-basis: 760px !important;
  }

  .toolbar-search-group {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 1120px) {
  .toolbar .toolbar-actions {
    grid-template-columns: max-content max-content max-content minmax(220px, 1fr) !important;
    min-width: 720px !important;
    flex-basis: 720px !important;
  }

  .toolbar-theme-cluster,
  .toolbar-system-cluster,
  .toolbar-document-cluster,
  .toolbar-search-group {
    justify-self: start !important;
    width: auto !important;
  }

  .toolbar-search-group {
    width: 100% !important;
    min-width: 220px !important;
  }

  .toolbar-system-cluster,
  .toolbar-document-cluster {
    flex-wrap: nowrap !important;
  }
}

/* =========================================================
   USER FIX: NO TOP TOOLBAR SCROLL
   Keeps the top controls in one row by shrinking controls instead of
   adding a horizontal scrollbar or dropping the search bar to row two.
   ========================================================= */
.workspace,
.toolbar {
  overflow-x: hidden !important;
}

.toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(4px, 0.55vw, 10px) !important;
  padding: 8px clamp(6px, 0.75vw, 12px) !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

.toolbar::-webkit-scrollbar {
  display: none !important;
}

.toolbar > * {
  min-width: 0 !important;
}

.left-nav-hamburger-button {
  flex: 0 0 clamp(34px, 2.7vw, 42px) !important;
  width: clamp(34px, 2.7vw, 42px) !important;
  min-width: clamp(34px, 2.7vw, 42px) !important;
  height: clamp(34px, 2.7vw, 42px) !important;
  margin-right: clamp(4px, 0.5vw, 8px) !important;
  border-radius: clamp(10px, 1vw, 14px) !important;
}

.left-nav-hamburger-button span {
  width: clamp(15px, 1.3vw, 18px) !important;
}

.toolbar .toolbar-actions {
  display: grid !important;
  grid-template-columns:
    minmax(116px, clamp(138px, 14vw, 210px))
    minmax(96px, max-content)
    minmax(150px, max-content)
    minmax(110px, 1fr) !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  gap: clamp(4px, 0.55vw, 8px) !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.toolbar-theme-cluster,
.toolbar-system-cluster,
.toolbar-document-cluster,
.toolbar-search-group {
  min-width: 0 !important;
  width: auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.toolbar-cluster {
  min-height: clamp(30px, 2.7vw, 36px) !important;
  padding: 2px !important;
  gap: clamp(3px, 0.45vw, 6px) !important;
  border-radius: 12px !important;
}

.theme-selector-wrap {
  min-width: 0 !important;
  width: 100% !important;
}

.toolbar .theme-palette-button {
  flex: 0 0 clamp(28px, 2.25vw, 32px) !important;
  width: clamp(28px, 2.25vw, 32px) !important;
  min-width: clamp(28px, 2.25vw, 32px) !important;
  height: clamp(28px, 2.25vw, 30px) !important;
  min-height: clamp(28px, 2.25vw, 30px) !important;
  font-size: clamp(11px, 0.9vw, 13px) !important;
}

.toolbar .theme-selector {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(28px, 2.25vw, 30px) !important;
  min-height: clamp(28px, 2.25vw, 30px) !important;
  padding: 0 clamp(20px, 1.8vw, 28px) 0 clamp(7px, 0.8vw, 10px) !important;
  font-size: clamp(10px, 0.84vw, 12px) !important;
  line-height: clamp(28px, 2.25vw, 30px) !important;
  text-overflow: ellipsis !important;
}

.toolbar-system-cluster,
.toolbar-document-cluster {
  flex: 0 1 auto !important;
}

.toolbar .secondary-action {
  height: clamp(28px, 2.25vw, 30px) !important;
  min-height: clamp(28px, 2.25vw, 30px) !important;
  min-width: 0 !important;
  padding-inline: clamp(6px, 0.75vw, 10px) !important;
  border-radius: 9px !important;
  font-size: clamp(10px, 0.84vw, 12px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.toolbar .settings-button {
  flex: 0 0 clamp(30px, 2.35vw, 34px) !important;
  width: clamp(30px, 2.35vw, 34px) !important;
  min-width: clamp(30px, 2.35vw, 34px) !important;
  padding: 0 !important;
}

.toolbar-document-cluster .download-selected-button,
.toolbar-document-cluster .reference-action-button,
.toolbar .logout-button,
.toolbar .print-button {
  max-width: clamp(58px, 7.5vw, 116px) !important;
}

.toolbar-search-group {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

.toolbar-search-group .search-box {
  min-width: 0 !important;
  width: 100% !important;
  height: clamp(28px, 2.25vw, 30px) !important;
  padding: 0 clamp(7px, 0.75vw, 10px) !important;
  gap: clamp(4px, 0.5vw, 8px) !important;
  overflow: hidden !important;
}

.toolbar-search-group .search-box span {
  flex: 0 1 auto !important;
  font-size: clamp(10px, 0.84vw, 12px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: clamp(46px, 6vw, 78px) !important;
}

.toolbar-search-group .search-box input {
  min-width: 0 !important;
  width: 100% !important;
  font-size: clamp(10px, 0.84vw, 12px) !important;
}

@media (max-width: 1280px) {
  .toolbar .toolbar-actions {
    grid-template-columns:
      minmax(104px, 150px)
      minmax(82px, max-content)
      minmax(126px, max-content)
      minmax(90px, 1fr) !important;
    gap: 4px !important;
  }

  .toolbar-cluster {
    gap: 3px !important;
  }

  .toolbar .secondary-action {
    padding-inline: 6px !important;
    max-width: 86px !important;
  }

  .toolbar-search-group .search-box span {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .toolbar .toolbar-actions {
    grid-template-columns:
      minmax(90px, 118px)
      minmax(34px, max-content)
      minmax(96px, max-content)
      minmax(70px, 1fr) !important;
  }

  .toolbar-system-cluster .logout-button,
  .toolbar-system-cluster .print-button,
  .toolbar-document-cluster .download-selected-button,
  .toolbar-document-cluster .reference-action-button {
    max-width: 54px !important;
  }
}


/* =========================================================
   USER FIX: SEARCH INPUT CLOSED RIGHT EDGE
   Keep the top search box inside the toolbar so its right
   border and rounded corner are always visible at browser zoom.
   ========================================================= */
.toolbar,
.toolbar .toolbar-actions,
.toolbar-search-group,
.toolbar-search-group .search-box {
  box-sizing: border-box !important;
}

.toolbar {
  padding-right: clamp(10px, 1vw, 16px) !important;
}

.toolbar .toolbar-actions {
  padding-right: 2px !important;
}

.toolbar-search-group {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: clamp(6px, 0.8vw, 10px) !important;
  overflow: visible !important;
}

.toolbar-search-group .search-box {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #b8c6d6) !important;
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, #b8c6d6) !important;
  border-radius: 12px !important;
  background: var(--panel, #ffffff) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
}

.toolbar-search-group .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

.toolbar-search-group .search-box:focus-within {
  border-color: var(--accent, #1f4e79) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f4e79) 14%, transparent) !important;
}

@media (max-width: 1280px) {
  .toolbar-search-group {
    padding-right: 6px !important;
  }
}


/* =========================================================
   USER UPDATE: Floating right navigation button follows active theme
   The gear/toggle now uses each theme's --accent and --accent-strong
   instead of the fixed Sneat blue color.
   ========================================================= */
.sneat-floating-right-nav-button {
  background: var(--accent, #03a9f4) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent, #03a9f4) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.sneat-floating-right-nav-button svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.sneat-floating-right-nav-button:hover {
  background: var(--accent-strong, var(--accent, #0288d1)) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--accent, #03a9f4) 46%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.sneat-floating-right-nav-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #03a9f4) 26%, transparent) !important;
  outline-offset: 3px !important;
}

.sneat-floating-right-nav-button.is-collapsed {
  background: var(--accent, #03a9f4) !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent, #03a9f4) 36%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset !important;
}


/* =========================================================
   USER FIX: Make save status simple and part of System Utilization
   ========================================================= */
.system-utilization-panel #saveStatusBar.save-status-bar {
  --save-accent: var(--accent);
  --save-accent-strong: var(--accent-strong);
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

.system-utilization-panel #saveStatusBar .save-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.system-utilization-panel #saveStatusBar .save-status-text {
  min-width: 0 !important;
  color: #2c333f !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .045em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.system-utilization-panel #saveStatusBar .save-status-percent {
  flex: 0 0 auto !important;
  color: #6e7784 !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums !important;
}

.system-utilization-panel #saveStatusBar .save-status-track {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.20) !important;
}

.system-utilization-panel #saveStatusBar .save-status-progress {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--accent) !important;
  transition: width 220ms ease, background 180ms ease !important;
}

.system-utilization-panel #saveStatusBar.is-saving .save-status-progress {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.24) 0 6px,
      transparent 6px 12px
    ),
    var(--accent) !important;
}

.system-utilization-panel #saveStatusBar.is-error .save-status-text {
  color: var(--danger) !important;
}

.system-utilization-panel #saveStatusBar.is-error .save-status-progress {
  background: var(--danger) !important;
}

body.dark-theme .system-utilization-panel #saveStatusBar,
body.midnight-theme .system-utilization-panel #saveStatusBar,
body.deep-navy-theme .system-utilization-panel #saveStatusBar,
body.charcoal-theme .system-utilization-panel #saveStatusBar {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark-theme .system-utilization-panel #saveStatusBar .save-status-text,
body.midnight-theme .system-utilization-panel #saveStatusBar .save-status-text,
body.deep-navy-theme .system-utilization-panel #saveStatusBar .save-status-text,
body.charcoal-theme .system-utilization-panel #saveStatusBar .save-status-text {
  color: #f8fafc !important;
}

body.dark-theme .system-utilization-panel #saveStatusBar .save-status-track,
body.midnight-theme .system-utilization-panel #saveStatusBar .save-status-track,
body.deep-navy-theme .system-utilization-panel #saveStatusBar .save-status-track,
body.charcoal-theme .system-utilization-panel #saveStatusBar .save-status-track {
  background: rgba(226, 232, 240, 0.16) !important;
}


/* =========================================================
   USER FIX: System Utilization + Saved bars follow selected theme
   ========================================================= */
.system-utilization-panel {
  --system-theme-accent: var(--accent, #2563eb);
  --system-theme-accent-strong: var(--accent-strong, var(--accent, #2563eb));
  --system-theme-track: color-mix(in srgb, var(--system-theme-accent) 14%, rgba(148, 163, 184, 0.18));
}

.system-utilization-track,
.system-utilization-panel #saveStatusBar .save-status-track {
  background: var(--system-theme-track) !important;
}

.system-utilization-bar-cpu,
.system-utilization-bar-memory,
.system-utilization-bar-storage,
.system-utilization-panel #saveStatusBar .save-status-progress {
  background: linear-gradient(
    90deg,
    var(--system-theme-accent),
    var(--system-theme-accent-strong)
  ) !important;
}

.system-utilization-panel #saveStatusBar .save-status-text {
  color: var(--ink) !important;
}

.system-utilization-panel #saveStatusBar .save-status-percent,
.system-utilization-value {
  color: var(--muted) !important;
}

.system-utilization-panel #saveStatusBar.is-saving .save-status-progress {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.25) 0 6px,
      transparent 6px 12px
    ),
    linear-gradient(
      90deg,
      var(--system-theme-accent),
      var(--system-theme-accent-strong)
    ) !important;
}

.system-utilization-panel #saveStatusBar.is-error {
  --system-theme-accent: var(--danger, #dc2626);
  --system-theme-accent-strong: color-mix(in srgb, var(--danger, #dc2626) 72%, #000);
}

body[class$="-theme"] .system-utilization-panel {
  --system-theme-accent: var(--accent) !important;
  --system-theme-accent-strong: var(--accent-strong, var(--accent)) !important;
  --system-theme-track: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

body[class$="-theme"] .system-utilization-panel #saveStatusBar .save-status-progress,
body[class$="-theme"] .system-utilization-bar-cpu,
body[class$="-theme"] .system-utilization-bar-memory,
body[class$="-theme"] .system-utilization-bar-storage {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong, var(--accent))) !important;
}


/* =========================================================
   USER FIX: Compact dashboard spacing
   Reduces large empty gaps in dashboard header, filter panel, and widgets.
   ========================================================= */
.library-panel:has(.dashboard-shell),
#itemList:has(.dashboard-shell) {
  padding: 0 !important;
}

.dashboard-shell {
  gap: 8px !important;
  padding: 6px 8px !important;
  min-height: auto !important;
}

.dashboard-header,
.dashboard-hero {
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 14px !important;
}

.dashboard-header > div:first-child,
.dashboard-hero > div:first-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.dashboard-breadcrumb,
.dashboard-header p,
.dashboard-hero p {
  margin: 0 !important;
  line-height: 1.25 !important;
}

.dashboard-header h2,
.dashboard-hero h2 {
  margin: 0 !important;
  gap: 8px !important;
  line-height: 1.15 !important;
}

.dashboard-header h2 span,
.dashboard-hero h2 span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.dashboard-header-actions,
.dashboard-hero-actions {
  gap: 7px !important;
  flex-wrap: nowrap !important;
}

.dashboard-header-actions .secondary-action,
.dashboard-hero-actions .secondary-action {
  min-height: 34px !important;
  padding: 0 14px !important;
}

.dashboard-expert-filterbar,
.dashboard-filter-panel,
.dashboard-slicer-bar {
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

.dashboard-filterbar-main {
  gap: 8px !important;
}

.dashboard-filterbar-controls,
.dashboard-filterbar-more > div {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

.dashboard-expert-filterbar label,
.dashboard-filter-panel label,
.dashboard-slicer-bar label {
  gap: 4px !important;
  line-height: 1.2 !important;
}

.dashboard-expert-filterbar input,
.dashboard-expert-filterbar select,
.dashboard-filter-panel input,
.dashboard-filter-panel select,
.dashboard-slicer-bar input,
.dashboard-slicer-bar select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  border-radius: 11px !important;
}

.dashboard-filterbar-more summary {
  line-height: 1.2 !important;
}

.smart-dashboard-grid.dashboard-grid,
.dashboard-grid,
.manual-dashboard-grid,
.dashboard-summary-strip {
  gap: 10px !important;
  margin-block: 8px !important;
  grid-auto-flow: dense !important;
}

.dashboard-widget,
.smart-widget,
.dashboard-card,
.stat-card {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  min-height: 130px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055) !important;
}

.smart-dashboard-grid .dashboard-widget {
  min-height: clamp(130px, calc(var(--widget-min-height, 170px) * .72), 260px) !important;
}

.dashboard-widget-header {
  min-height: 0 !important;
  gap: 8px !important;
  padding-bottom: 6px !important;
}

.dashboard-widget-title-area {
  gap: 1px !important;
}

.dashboard-widget-title,
.dashboard-widget h3 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

.dashboard-widget-subtitle {
  margin: 0 !important;
  line-height: 1.25 !important;
}

.smart-widget-body.dashboard-widget-body,
.smart-widget-body {
  padding: 8px !important;
  gap: 8px !important;
}

.smart-widget .chart-list,
.dashboard-chart-container {
  --chart-min-height: 150px !important;
  min-height: 150px !important;
}

.smart-widget.smart-chart-line .chart-list,
.smart-widget.smart-chart-area .chart-list,
.smart-widget.smart-chart-bar .chart-list,
.smart-widget.smart-chart-horizontalBar .chart-list {
  --chart-min-height: 160px !important;
}

.smart-ring-chart {
  width: min(126px, 46vw) !important;
  margin: 0 auto 6px !important;
}

.smart-ring-chart strong {
  font-size: 24px !important;
}

.chart-list {
  gap: 7px !important;
}

.chart-row {
  gap: 6px !important;
}

.chart-row i {
  height: 6px !important;
}

.smart-table-wrap {
  max-height: 240px !important;
}

/* Keep dashboard compact on zoom without creating top empty space. */
@media (max-width: 1400px) {
  .dashboard-shell {
    padding: 5px 6px !important;
  }

  .dashboard-header,
  .dashboard-hero,
  .dashboard-expert-filterbar,
  .dashboard-filter-panel,
  .dashboard-slicer-bar {
    padding: 8px 10px !important;
  }

  .smart-dashboard-grid.dashboard-grid,
  .dashboard-grid {
    gap: 8px !important;
  }

  .dashboard-widget,
  .smart-widget {
    padding: 9px !important;
  }
}


/* =========================================================
   USER FIX: 3-line button to hide/show Dashboard Search & Filter section
   ========================================================= */
.dashboard-expert-filterbar {
  position: relative !important;
  gap: 8px !important;
}

.dashboard-filterbar-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
}

.dashboard-filterbar-toggle {
  display: inline-grid !important;
  place-content: center !important;
  gap: 4px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, var(--line, #dbe5f2)) !important;
  border-radius: 10px !important;
  color: var(--accent, #2563eb) !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--panel, #ffffff)) !important;
  cursor: pointer !important;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.06) !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.dashboard-filterbar-toggle span {
  display: block !important;
  width: 15px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.dashboard-filterbar-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent, #2563eb) !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel, #ffffff)) !important;
  box-shadow: 0 9px 18px rgba(15, 23, 42, 0.10) !important;
}

.dashboard-filterbar-heading-text {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.dashboard-filterbar-heading-text strong {
  color: var(--dashboard-text, var(--ink, #172033)) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.dashboard-filterbar-heading-text small {
  color: var(--dashboard-muted, var(--muted, #64748b)) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-filterbar-body {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.dashboard-expert-filterbar.is-collapsed {
  padding-block: 8px !important;
}

.dashboard-expert-filterbar.is-collapsed .dashboard-filterbar-body {
  display: none !important;
}

.dashboard-expert-filterbar.is-collapsed .dashboard-filterbar-heading-text small {
  color: var(--accent, #2563eb) !important;
}

body[class$="-theme"] .dashboard-filterbar-toggle {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important;
}


/* =========================================================
   USER FIX: Change Advanced Analysis show/hide to 3-line button
   ========================================================= */
.advanced-pivot-widget {
  gap: 10px !important;
}

.advanced-pivot-widget.is-widget-collapsed {
  padding: 8px 12px !important;
}

.advanced-pivot-collapsed-bar {
  min-height: 42px !important;
}

.advanced-pivot-header {
  align-items: center !important;
}

.advanced-pivot-actions {
  align-items: center !important;
}

.advanced-pivot-hamburger-toggle {
  display: inline-grid !important;
  place-content: center !important;
  gap: 4px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, var(--line, #dbe5f2)) !important;
  border-radius: 10px !important;
  color: var(--accent, #2563eb) !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--panel, #ffffff)) !important;
  cursor: pointer !important;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.06) !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.advanced-pivot-hamburger-toggle span {
  display: block !important;
  width: 15px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.advanced-pivot-hamburger-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent, #2563eb) !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel, #ffffff)) !important;
  box-shadow: 0 9px 18px rgba(15, 23, 42, 0.10) !important;
}

.advanced-pivot-hamburger-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent), 0 9px 18px rgba(15, 23, 42, 0.10) !important;
}

body[class$="-theme"] .advanced-pivot-hamburger-toggle {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important;
}

@container (max-width: 760px) {
  .advanced-pivot-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .advanced-pivot-actions {
    justify-content: flex-start !important;
  }
}


/* =========================================================
   USER FIX: Advanced Analysis 3-line toggle on the LEFT of the text
   ========================================================= */
.advanced-pivot-collapsed-bar {
  justify-content: flex-start !important;
  align-items: center !important;
}

.advanced-pivot-title-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.advanced-pivot-title-text {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.advanced-pivot-title-text > span,
.advanced-pivot-title-text > strong,
.advanced-pivot-title-text > h3,
.advanced-pivot-title-text > p {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.advanced-pivot-title-wrap .advanced-pivot-hamburger-toggle,
.advanced-pivot-collapsed-bar .advanced-pivot-hamburger-toggle {
  flex: 0 0 34px !important;
  margin-top: 0 !important;
}

.advanced-pivot-header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.advanced-pivot-actions {
  justify-content: flex-end !important;
}


/* =========================================================
   USER UPDATE: Put horizontal scroll inside a table container
   ========================================================= */
.library-panel {
  overflow: hidden !important;
}

.data-grid-shell {
  --card-bg: var(--panel, #ffffff);
  --border-color: var(--line, #dfe4dd);
  --muted-text: var(--muted, #66706d);
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.data-grid-toolbar {
  height: 44px;
  min-width: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.grid-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-hint {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-grid-scroll {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 160px);
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent, #2563eb) 40%, #94a3b8) transparent;
}

.data-grid-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.data-grid-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.data-grid-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2563eb) 42%, #94a3b8);
  background-clip: content-box;
}

.data-grid-scroll > .table-header {
  top: 0 !important;
}

.data-grid-scroll > .column-filter-row {
  top: 42px !important;
}

.library-panel.inspector-mode .data-grid-scroll > .table-header,
.library-panel.inspector-mode .data-grid-scroll > .column-filter-row {
  display: none !important;
}

.content-grid.dashboard-mode .data-grid-shell {
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-grid.dashboard-mode .data-grid-toolbar,
.content-grid.dashboard-mode .data-grid-scroll > .table-header,
.content-grid.dashboard-mode .data-grid-scroll > .column-filter-row {
  display: none !important;
}

.content-grid.dashboard-mode .data-grid-scroll {
  max-height: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body[class$="-theme"] .data-grid-shell {
  --card-bg: var(--panel);
  --border-color: var(--line);
  --muted-text: var(--muted);
  border-color: var(--line);
  background: var(--panel);
}

body[class$="-theme"] .data-grid-toolbar {
  background: var(--panel);
  border-bottom-color: var(--line);
}

body[class$="-theme"] .data-grid-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 42%, #94a3b8);
  background-clip: content-box;
}


/* =========================================================
   RESTORED: Sidebar System Utilization as one balanced card
   Card background + border + rounded corners + theme accent dot
   CPU / Memory / SSD / Saved unified in one card
   ========================================================= */
.sidebar .system-utilization-panel {
  --system-card-accent: var(--accent, #2563eb);
  --system-card-accent-strong: var(--accent-strong, var(--accent, #2563eb));
  --system-card-bg: color-mix(in srgb, var(--panel, #ffffff) 92%, var(--bg, #f6f7f3));
  --system-card-border: color-mix(in srgb, var(--system-card-accent) 16%, var(--line, #dfe4dd));
  --system-card-track: color-mix(in srgb, var(--system-card-accent) 12%, rgba(148, 163, 184, 0.22));
  display: grid !important;
  gap: 13px !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
  padding: 14px !important;
  border: 1px solid var(--system-card-border) !important;
  border-radius: 18px !important;
  color: var(--ink) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--system-card-accent) 7%, var(--system-card-bg)),
      var(--system-card-bg)
    ) !important;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--system-card-accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.sidebar .system-utilization-panel h2 {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 5px !important;
  color: color-mix(in srgb, var(--ink) 70%, var(--muted)) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .075em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.sidebar .system-utilization-panel h2::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--system-card-accent), var(--system-card-accent-strong)) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--system-card-accent) 14%, transparent) !important;
}

.sidebar .system-utilization-item {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.sidebar .system-utilization-label,
.sidebar .system-utilization-panel #saveStatusBar .save-status-text {
  color: color-mix(in srgb, var(--ink) 88%, var(--system-card-accent)) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.sidebar .system-utilization-value,
.sidebar .system-utilization-panel #saveStatusBar .save-status-percent {
  color: var(--muted) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Times New Roman", serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar .system-utilization-track,
.sidebar .system-utilization-panel #saveStatusBar .save-status-track {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--system-card-track) !important;
}

.sidebar .system-utilization-bar,
.sidebar .system-utilization-panel #saveStatusBar .save-status-progress {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--system-card-accent), var(--system-card-accent-strong)) !important;
  transition: width 220ms ease, background 180ms ease !important;
}

.sidebar .system-utilization-panel #saveStatusBar.save-status-bar {
  display: grid !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--system-card-accent) 16%, var(--line)) !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar .system-utilization-panel #saveStatusBar .save-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.sidebar .system-utilization-panel #saveStatusBar.is-saving .save-status-progress {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.25) 0 6px,
      transparent 6px 12px
    ),
    linear-gradient(90deg, var(--system-card-accent), var(--system-card-accent-strong)) !important;
}

.sidebar .system-utilization-panel #saveStatusBar.is-error {
  --system-card-accent: var(--danger, #dc2626);
  --system-card-accent-strong: color-mix(in srgb, var(--danger, #dc2626) 72%, #000);
}

body[class$="-theme"] .sidebar .system-utilization-panel {
  --system-card-accent: var(--accent) !important;
  --system-card-accent-strong: var(--accent-strong, var(--accent)) !important;
  --system-card-bg: color-mix(in srgb, var(--panel) 94%, var(--bg)) !important;
  --system-card-border: color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
  --system-card-track: color-mix(in srgb, var(--accent) 13%, transparent) !important;
}

body.dark-theme .sidebar .system-utilization-panel,
body.midnight-theme .sidebar .system-utilization-panel,
body.deep-navy-theme .sidebar .system-utilization-panel,
body.charcoal-theme .sidebar .system-utilization-panel,
body.dark-emerald-theme .sidebar .system-utilization-panel {
  --system-card-bg: color-mix(in srgb, var(--panel) 86%, #000) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-theme .sidebar .system-utilization-panel h2,
body.midnight-theme .sidebar .system-utilization-panel h2,
body.deep-navy-theme .sidebar .system-utilization-panel h2,
body.charcoal-theme .sidebar .system-utilization-panel h2,
body.dark-emerald-theme .sidebar .system-utilization-panel h2,
body.dark-theme .sidebar .system-utilization-label,
body.midnight-theme .sidebar .system-utilization-label,
body.deep-navy-theme .sidebar .system-utilization-label,
body.charcoal-theme .sidebar .system-utilization-label,
body.dark-emerald-theme .sidebar .system-utilization-label,
body.dark-theme .sidebar .system-utilization-panel #saveStatusBar .save-status-text,
body.midnight-theme .sidebar .system-utilization-panel #saveStatusBar .save-status-text,
body.deep-navy-theme .sidebar .system-utilization-panel #saveStatusBar .save-status-text,
body.charcoal-theme .sidebar .system-utilization-panel #saveStatusBar .save-status-text,
body.dark-emerald-theme .sidebar .system-utilization-panel #saveStatusBar .save-status-text {
  color: var(--ink) !important;
}

.app-shell.sidebar-collapsed .sidebar .system-utilization-panel,
body.left-nav-hidden .sidebar .system-utilization-panel {
  display: none !important;
}


/* ===============================
   PREMIUM DATA GRID AREA
   Adapted to this app's div-based grid rows
================================ */

.data-grid-shell {
  --grid-card-bg: var(--card-bg, var(--panel, #ffffff));
  --grid-bg: var(--grid-bg, var(--panel, #ffffff));
  --grid-border: var(--border-color, var(--line, #d9e2ef));
  --grid-muted: var(--muted-text, var(--muted, #64748b));
  --grid-text: var(--text-main, var(--ink, #1e293b));
  --grid-primary: var(--primary, var(--accent, #2563eb));
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--grid-card-bg) !important;
  border: 1px solid var(--grid-border) !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}

/* Top small title area inside grid */
.data-grid-toolbar {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
  border-bottom: 1px solid var(--grid-border) !important;
}

.grid-title {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--grid-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.scroll-hint {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  color: var(--grid-muted) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Scroll only inside grid */
.data-grid-scroll {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  max-height: calc(100vh - 170px) !important;
  background: var(--grid-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--grid-primary) 42%, #94a3b8) transparent;
}

.data-grid-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.data-grid-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.data-grid-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--grid-primary) 42%, #94a3b8);
  background-clip: content-box;
}

/* Main app grid: header, filters and rows */
.data-grid-scroll > .table-header,
.data-grid-scroll > .column-filter-row,
.data-grid-scroll > .item-list,
.data-grid-scroll > .item-list > .item-row {
  min-width: var(--table-min-width, 1084px) !important;
}

.data-grid-scroll > .table-header,
.data-grid-scroll > .column-filter-row,
.data-grid-scroll > .item-list > .item-row {
  grid-template-columns: var(--table-columns) !important;
}

/* Header row */
.data-grid-scroll > .table-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #eef4ff, #e6eefc) !important;
  color: #1e3a5f !important;
  border-bottom: 1px solid #cdd9ea !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.data-grid-scroll > .table-header > span,
.data-grid-scroll > .table-header > .table-header-cell {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e3a5f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
  border-right: 1px solid #dbe4f0 !important;
  background: transparent !important;
}

/* Filter row under header */
.data-grid-scroll > .column-filter-row {
  position: sticky !important;
  top: 44px !important;
  z-index: 29 !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0 !important;
  background: #f8fbff !important;
  border-bottom: 1px solid #dbe4f0 !important;
  box-shadow: none !important;
}

.data-grid-scroll > .column-filter-row > span,
.data-grid-scroll > .column-filter-row > label,
.data-grid-scroll > .column-filter-row > div {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 7px 10px !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid #edf2f7 !important;
  background: transparent !important;
}

/* Filter inputs */
.data-grid-scroll > .column-filter-row input,
.data-grid-scroll > .column-filter-row select {
  width: 100% !important;
  min-height: 34px !important;
  border: 1px solid #cfd8e6 !important;
  border-radius: 9px !important;
  padding: 6px 10px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  outline: none !important;
}

.data-grid-scroll > .column-filter-row input:focus,
.data-grid-scroll > .column-filter-row select:focus {
  border-color: var(--grid-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--grid-primary) 16%, transparent) !important;
}

/* Body rows and cells */
.data-grid-scroll > .item-list {
  background: #ffffff !important;
}

.data-grid-scroll > .item-list.document-virtual-list {
  position: relative;
}

.data-grid-scroll > .item-list > .document-virtual-spacer {
  display: block !important;
  width: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

.data-grid-scroll > .item-list > .item-row {
  height: auto !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: #172033 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #172033 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  vertical-align: middle !important;
  border-right: 1px solid #f0f4f8 !important;
  background: transparent !important;
}

/* Row hover */
.data-grid-scroll > .item-list > .item-row:hover {
  background: #f3f8ff !important;
}

.data-grid-scroll > .item-list > .item-row:hover > span,
.data-grid-scroll > .item-list > .item-row:hover > div {
  background: #f3f8ff !important;
}

/* Active/selected row */
.data-grid-scroll > .item-list > .item-row.is-selected,
.data-grid-scroll > .item-list > .item-row.selected,
.data-grid-scroll > .item-list > .item-row.active,
.data-grid-scroll > .item-list > .item-row.selected-for-download {
  background: #eaf2ff !important;
  color: #102a56 !important;
  font-weight: 600 !important;
}

.data-grid-scroll > .item-list > .item-row.is-selected > span,
.data-grid-scroll > .item-list > .item-row.selected > span,
.data-grid-scroll > .item-list > .item-row.active > span,
.data-grid-scroll > .item-list > .item-row.selected-for-download > span,
.data-grid-scroll > .item-list > .item-row.is-selected > div,
.data-grid-scroll > .item-list > .item-row.selected > div,
.data-grid-scroll > .item-list > .item-row.active > div,
.data-grid-scroll > .item-list > .item-row.selected-for-download > div {
  background: #eaf2ff !important;
  color: #102a56 !important;
}

/* Left accent for selected row */
.data-grid-scroll > .item-list > .item-row.is-selected > :first-child,
.data-grid-scroll > .item-list > .item-row.selected > :first-child,
.data-grid-scroll > .item-list > .item-row.active > :first-child,
.data-grid-scroll > .item-list > .item-row.selected-for-download > :first-child {
  box-shadow:
    inset 4px 0 0 var(--grid-primary),
    8px 0 14px rgba(15, 23, 42, 0.05) !important;
}

/* Optional zebra row */
.data-grid-scroll > .item-list > .item-row:nth-child(even) {
  background: #fcfdff !important;
}

.data-grid-scroll > .item-list > .item-row:nth-child(even) > span,
.data-grid-scroll > .item-list > .item-row:nth-child(even) > div {
  background: #fcfdff !important;
}

.data-grid-scroll > .item-list > .item-row:nth-child(even):hover,
.data-grid-scroll > .item-list > .item-row:nth-child(even):hover > span,
.data-grid-scroll > .item-list > .item-row:nth-child(even):hover > div {
  background: #f3f8ff !important;
}

/* Sticky first checkbox/status column */
.data-grid-scroll > .table-header > :first-child,
.data-grid-scroll > .column-filter-row > :first-child,
.data-grid-scroll > .item-list > .item-row > :first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 18 !important;
  background: inherit !important;
  box-shadow: 8px 0 14px rgba(15, 23, 42, 0.05) !important;
}

/* Header first column must stay above body */
.data-grid-scroll > .table-header > :first-child {
  z-index: 40 !important;
}

.data-grid-scroll > .column-filter-row > :first-child {
  z-index: 39 !important;
}

/* Khmer-safe text */
.data-grid-scroll > .table-header,
.data-grid-scroll > .column-filter-row,
.data-grid-scroll > .item-list,
.data-grid-scroll > .item-list > .item-row,
.data-grid-scroll input,
.data-grid-scroll select {
  font-family: "Noto Sans Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", Arial, sans-serif !important;
  line-height: 1.6 !important;
}

/* Long Khmer text */
.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* File name / code / date columns should stay one line */
.data-grid-scroll .file-name-cell,
.data-grid-scroll .code-cell,
.data-grid-scroll .date-cell,
.data-grid-scroll [data-column="fileName"],
.data-grid-scroll [data-column="number"],
.data-grid-scroll [data-column="issuedDate"] {
  white-space: nowrap !important;
}

/* Inspector / task grids can still use the same premium container without duplicating headers */
.library-panel.inspector-mode .data-grid-scroll > .table-header,
.library-panel.inspector-mode .data-grid-scroll > .column-filter-row,
.library-panel.task-mode .data-grid-scroll > .table-header,
.library-panel.task-mode .data-grid-scroll > .column-filter-row,
.library-panel.work-mode .data-grid-scroll > .table-header,
.library-panel.work-mode .data-grid-scroll > .column-filter-row {
  display: none !important;
}

/* Dashboard mode should not look like a table */
.content-grid.dashboard-mode .data-grid-shell {
  grid-template-rows: minmax(0, 1fr) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.content-grid.dashboard-mode .data-grid-toolbar,
.content-grid.dashboard-mode .data-grid-scroll > .table-header,
.content-grid.dashboard-mode .data-grid-scroll > .column-filter-row {
  display: none !important;
}

.content-grid.dashboard-mode .data-grid-scroll {
  max-height: none !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
}

/* Dark theme support */
[data-theme="dark"] .data-grid-shell,
body.dark-theme .data-grid-shell,
body.midnight-theme .data-grid-shell,
body.deep-navy-theme .data-grid-shell,
body.charcoal-theme .data-grid-shell,
body.dark-emerald-theme .data-grid-shell {
  --grid-card-bg: #151823;
  --grid-bg: #151823;
  --grid-border: #2a3040;
  --grid-text: #e5e7eb;
  --grid-muted: #94a3b8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .data-grid-toolbar,
body.dark-theme .data-grid-toolbar,
body.midnight-theme .data-grid-toolbar,
body.deep-navy-theme .data-grid-toolbar,
body.charcoal-theme .data-grid-toolbar,
body.dark-emerald-theme .data-grid-toolbar {
  background: linear-gradient(180deg, #1b2030, #171b28) !important;
  border-bottom-color: #2a3040 !important;
}

[data-theme="dark"] .data-grid-scroll > .table-header,
body.dark-theme .data-grid-scroll > .table-header,
body.midnight-theme .data-grid-scroll > .table-header,
body.deep-navy-theme .data-grid-scroll > .table-header,
body.charcoal-theme .data-grid-scroll > .table-header,
body.dark-emerald-theme .data-grid-scroll > .table-header {
  background: linear-gradient(180deg, #20283a, #1a2131) !important;
  color: #dbeafe !important;
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .data-grid-scroll > .table-header > span,
body.dark-theme .data-grid-scroll > .table-header > span,
body.midnight-theme .data-grid-scroll > .table-header > span,
body.deep-navy-theme .data-grid-scroll > .table-header > span,
body.charcoal-theme .data-grid-scroll > .table-header > span,
body.dark-emerald-theme .data-grid-scroll > .table-header > span {
  color: #dbeafe !important;
  border-right-color: #283243 !important;
}

[data-theme="dark"] .data-grid-scroll > .column-filter-row,
body.dark-theme .data-grid-scroll > .column-filter-row,
body.midnight-theme .data-grid-scroll > .column-filter-row,
body.deep-navy-theme .data-grid-scroll > .column-filter-row,
body.charcoal-theme .data-grid-scroll > .column-filter-row,
body.dark-emerald-theme .data-grid-scroll > .column-filter-row {
  background: #171d2b !important;
  border-bottom-color: #2a3040 !important;
}

[data-theme="dark"] .data-grid-scroll > .column-filter-row input,
[data-theme="dark"] .data-grid-scroll > .column-filter-row select,
body.dark-theme .data-grid-scroll > .column-filter-row input,
body.dark-theme .data-grid-scroll > .column-filter-row select,
body.midnight-theme .data-grid-scroll > .column-filter-row input,
body.midnight-theme .data-grid-scroll > .column-filter-row select,
body.deep-navy-theme .data-grid-scroll > .column-filter-row input,
body.deep-navy-theme .data-grid-scroll > .column-filter-row select,
body.charcoal-theme .data-grid-scroll > .column-filter-row input,
body.charcoal-theme .data-grid-scroll > .column-filter-row select,
body.dark-emerald-theme .data-grid-scroll > .column-filter-row input,
body.dark-emerald-theme .data-grid-scroll > .column-filter-row select {
  background: #151823 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .data-grid-scroll > .item-list,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row > span,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row > div,
body.dark-theme .data-grid-scroll > .item-list,
body.dark-theme .data-grid-scroll > .item-list > .item-row,
body.dark-theme .data-grid-scroll > .item-list > .item-row > span,
body.dark-theme .data-grid-scroll > .item-list > .item-row > div,
body.midnight-theme .data-grid-scroll > .item-list,
body.midnight-theme .data-grid-scroll > .item-list > .item-row,
body.midnight-theme .data-grid-scroll > .item-list > .item-row > span,
body.midnight-theme .data-grid-scroll > .item-list > .item-row > div,
body.deep-navy-theme .data-grid-scroll > .item-list,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row > span,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row > div,
body.charcoal-theme .data-grid-scroll > .item-list,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row > span,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row > div,
body.dark-emerald-theme .data-grid-scroll > .item-list,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row > span,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row > div {
  background: #151823 !important;
  color: #e5e7eb !important;
  border-bottom-color: #252d3d !important;
  border-right-color: #202838 !important;
}

[data-theme="dark"] .data-grid-scroll > .item-list > .item-row:hover,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row:hover > span,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row:hover > div,
body.dark-theme .data-grid-scroll > .item-list > .item-row:hover,
body.dark-theme .data-grid-scroll > .item-list > .item-row:hover > span,
body.dark-theme .data-grid-scroll > .item-list > .item-row:hover > div,
body.midnight-theme .data-grid-scroll > .item-list > .item-row:hover,
body.midnight-theme .data-grid-scroll > .item-list > .item-row:hover > span,
body.midnight-theme .data-grid-scroll > .item-list > .item-row:hover > div,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row:hover,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row:hover > span,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row:hover > div,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row:hover,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row:hover > span,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row:hover > div,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row:hover,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row:hover > span,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row:hover > div {
  background: #1e293b !important;
}

[data-theme="dark"] .data-grid-scroll > .item-list > .item-row.is-selected,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row.selected,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row.active,
[data-theme="dark"] .data-grid-scroll > .item-list > .item-row.selected-for-download,
body.dark-theme .data-grid-scroll > .item-list > .item-row.is-selected,
body.dark-theme .data-grid-scroll > .item-list > .item-row.selected,
body.dark-theme .data-grid-scroll > .item-list > .item-row.active,
body.dark-theme .data-grid-scroll > .item-list > .item-row.selected-for-download,
body.midnight-theme .data-grid-scroll > .item-list > .item-row.is-selected,
body.midnight-theme .data-grid-scroll > .item-list > .item-row.selected,
body.midnight-theme .data-grid-scroll > .item-list > .item-row.active,
body.midnight-theme .data-grid-scroll > .item-list > .item-row.selected-for-download,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row.is-selected,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row.selected,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row.active,
body.deep-navy-theme .data-grid-scroll > .item-list > .item-row.selected-for-download,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row.is-selected,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row.selected,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row.active,
body.charcoal-theme .data-grid-scroll > .item-list > .item-row.selected-for-download,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row.is-selected,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row.selected,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row.active,
body.dark-emerald-theme .data-grid-scroll > .item-list > .item-row.selected-for-download {
  background: #172554 !important;
}


/* ===============================
   PREMIUM TOP TOOLBAR
   Adapted from .top-toolbar / .top-search to this app's .toolbar structure
================================ */
.toolbar {
  --toolbar-primary: var(--primary, var(--accent, #2563eb));
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 60px !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid #e5edf7 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
}

.toolbar > .left-nav-hamburger-button {
  grid-column: 1 !important;
}

.toolbar .toolbar-actions {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 260px) max-content max-content minmax(260px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.toolbar-cluster,
.toolbar-search-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.toolbar-theme-cluster,
.toolbar-system-cluster,
.toolbar-document-cluster {
  justify-self: start !important;
}

.toolbar-search-group {
  justify-self: stretch !important;
  width: 100% !important;
}

.toolbar-search-group .search-box {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 520px !important;
  min-width: 260px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #d8e2ef !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-family: "Noto Sans Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", Arial, sans-serif !important;
  line-height: 1.55 !important;
}

.toolbar-search-group .search-box input {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  font-family: "Noto Sans Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", Arial, sans-serif !important;
  line-height: 1.55 !important;
}

.toolbar-search-group .search-box:focus-within {
  border-color: var(--toolbar-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--toolbar-primary) 14%, transparent) !important;
}

.toolbar button,
.toolbar input,
.toolbar select {
  min-height: 38px !important;
  line-height: 1.55 !important;
}

.toolbar .secondary-action,
.toolbar .theme-palette-button,
.toolbar .theme-selector {
  height: 38px !important;
  min-height: 38px !important;
}

.toolbar .secondary-action,
.toolbar .theme-palette-button {
  padding: 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid #d8e2ef !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.toolbar .secondary-action:hover,
.toolbar .theme-palette-button:hover {
  background: #f4f8ff !important;
  border-color: var(--toolbar-primary) !important;
  color: var(--toolbar-primary) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--toolbar-primary) 14%, transparent) !important;
}

.toolbar .download-selected-button,
.toolbar .dashboard-customize-button.is-active {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: var(--toolbar-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--toolbar-primary) 22%, transparent) !important;
}

.toolbar .theme-selector-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.toolbar .theme-selector {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 220px !important;
  padding: 0 34px 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid #d8e2ef !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.toolbar .theme-selector:focus {
  border-color: var(--toolbar-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--toolbar-primary) 14%, transparent) !important;
}

.toolbar .settings-button,
.toolbar .theme-palette-button {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}

.left-nav-hamburger-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid #d8e2ef !important;
  background: #ffffff !important;
  color: #1e293b !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.left-nav-hamburger-button:hover {
  border-color: var(--toolbar-primary) !important;
  color: var(--toolbar-primary) !important;
  background: #f4f8ff !important;
}

@media (max-width: 1360px) {
  .toolbar .toolbar-actions {
    grid-template-columns: minmax(145px, 210px) max-content max-content minmax(220px, 1fr) !important;
    gap: 8px !important;
  }
  .toolbar .secondary-action { padding-inline: 10px !important; }
  .toolbar .theme-selector { max-width: 190px !important; }
  .toolbar-search-group .search-box { min-width: 220px !important; }
}

@media (max-width: 1120px) {
  .toolbar { padding-inline: 8px !important; }
  .toolbar .toolbar-actions {
    grid-template-columns: minmax(120px, 170px) max-content max-content minmax(160px, 1fr) !important;
    gap: 6px !important;
  }
  .toolbar-search-group .search-box { min-width: 160px !important; }
  .toolbar-search-group .search-box span { display: none !important; }
  .toolbar .secondary-action:not(.settings-button) {
    max-width: 88px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

body[class$="-theme"] .toolbar {
  --toolbar-primary: var(--accent) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  border-bottom-color: var(--line) !important;
}

body[class$="-theme"] .toolbar .secondary-action,
body[class$="-theme"] .toolbar .theme-palette-button,
body[class$="-theme"] .toolbar .theme-selector,
body[class$="-theme"] .toolbar-search-group .search-box,
body[class$="-theme"] .left-nav-hamburger-button {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

body[class$="-theme"] .toolbar .secondary-action:hover,
body[class$="-theme"] .toolbar .theme-palette-button:hover,
body[class$="-theme"] .left-nav-hamburger-button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important;
}


/* =========================================================
   2026-05-28 EXECUTIVE UI/UX UPDATE
   Toolbar order: ☰ | Search | Download | Reference | Print | More
   Premium sticky table header + quiet system utility + thin scrollbars
   ========================================================= */

:root {
  --executive-radius: 14px;
  --executive-line: color-mix(in srgb, var(--line, #d8e2ef) 86%, #b8c6d6);
  --executive-soft: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--panel, #ffffff));
  --executive-hover: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--panel, #ffffff));
  --executive-selected: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel, #ffffff));
}

/* A. Top toolbar: make search the main object and move low-frequency actions into More. */
.toolbar {
  position: relative !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 9px 14px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  background: color-mix(in srgb, var(--panel, #ffffff) 84%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 84%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
}

.toolbar .toolbar-actions,
.toolbar-actions.toolbar-actions-executive {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) max-content max-content !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

.toolbar-search-group {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.toolbar-search-group .search-box {
  order: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 14px !important;
  gap: 10px !important;
  border: 1px solid var(--executive-line) !important;
  border-radius: var(--executive-radius) !important;
  background: var(--panel, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 22px rgba(15,23,42,.055) !important;
  clip-path: none !important;
  overflow: hidden !important;
}

.toolbar-search-group .clear-search-button {
  order: 2 !important;
  flex: 0 0 auto !important;
  height: 40px !important;
  min-width: 48px !important;
  padding-inline: 12px !important;
}

.toolbar-search-group .search-box span {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  color: var(--muted, #64748b) !important;
  font-weight: 800 !important;
}

.toolbar-search-group .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  color: var(--ink, #1e293b) !important;
  background: transparent !important;
}

.toolbar-search-group .search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 82%, #ffffff) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 13%, transparent),
    0 10px 26px rgba(15,23,42,.075) !important;
}

.toolbar-primary-actions,
.toolbar-document-cluster {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-self: end !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.toolbar .secondary-action,
.toolbar-more-summary,
.toolbar .theme-palette-button,
.toolbar .theme-selector {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--executive-line) !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #1e293b) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.045) !important;
}

.toolbar .secondary-action:hover,
.toolbar-more-summary:hover,
.toolbar .theme-palette-button:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 58%, var(--line, #d8e2ef)) !important;
  color: var(--accent, #2563eb) !important;
  background: var(--executive-hover) !important;
}

.toolbar .download-selected-button {
  padding: 0 18px !important;
  border: 0 !important;
  background: var(--accent, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent) !important;
}

.toolbar .download-selected-button:hover {
  background: var(--accent-strong, var(--accent, #1d4ed8)) !important;
  color: #ffffff !important;
}

.toolbar .reference-action-button,
.toolbar .print-button {
  padding-inline: 14px !important;
  max-width: none !important;
}

.toolbar-more-menu {
  grid-column: 3 !important;
  position: relative !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.toolbar-more-menu > summary {
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.toolbar-more-menu > summary::-webkit-details-marker {
  display: none !important;
}

.toolbar-more-summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  font-family: var(--khmer-ui-font, "Khmer OS Battambang", "Noto Sans Khmer", Arial, sans-serif) !important;
}

.toolbar-more-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 999 !important;
  display: grid !important;
  gap: 12px !important;
  width: min(360px, calc(100vw - 28px)) !important;
  padding: 14px !important;
  border: 1px solid var(--executive-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--panel, #ffffff) 96%, #f8fafc) !important;
  box-shadow: 0 22px 50px rgba(15, 23, 42, .18) !important;
}

.toolbar-more-menu:not([open]) .toolbar-more-panel {
  display: none !important;
}

.toolbar-more-section {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.toolbar-more-label {
  color: var(--muted, #64748b) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.toolbar-more-panel .theme-selector-wrap {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.toolbar-more-panel .theme-palette-button {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
}

.toolbar-more-panel .theme-selector {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 34px 0 12px !important;
  text-overflow: ellipsis !important;
}

.toolbar-more-action-section {
  grid-template-columns: 1fr !important;
}

.toolbar-more-action-section .secondary-action {
  width: 100% !important;
  justify-content: flex-start !important;
  padding-inline: 14px !important;
  max-width: none !important;
  text-align: left !important;
}

.left-nav-hamburger-button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* B. Data grid: stronger sticky header, clearer borders, lighter hover, better vertical alignment. */
.data-grid-shell {
  border: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 88%, #cbd5e1) !important;
  border-radius: 18px !important;
  background: var(--panel, #ffffff) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .065) !important;
}

.data-grid-toolbar {
  min-height: 42px !important;
  height: 42px !important;
  padding-inline: 16px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel, #ffffff) 96%, #f8fafc),
    color-mix(in srgb, var(--panel, #ffffff) 90%, #f1f5f9)
  ) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 90%, #cbd5e1) !important;
}

.data-grid-scroll {
  overflow: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .34) transparent !important;
}

.data-grid-scroll > .table-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  min-height: 46px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #2563eb) 10%, #ffffff),
    color-mix(in srgb, var(--accent, #2563eb) 7%, #f8fafc)
  ) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #2563eb) 20%, #cbd5e1) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, .075),
    inset 0 -1px 0 rgba(255,255,255,.65) !important;
}

.data-grid-scroll > .table-header > span,
.data-grid-scroll > .table-header > .table-header-cell {
  min-height: 46px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 84%, #e2e8f0) !important;
  color: color-mix(in srgb, var(--ink, #1e293b) 86%, var(--accent, #2563eb)) !important;
  font-family: var(--khmer-table-font, "Noto Sans Khmer", "Khmer OS Siemreap", Arial, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
}

.data-grid-scroll > .column-filter-row {
  top: 46px !important;
  z-index: 49 !important;
  min-height: 44px !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 3%, var(--panel, #ffffff)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 88%, #e2e8f0) !important;
}

.data-grid-scroll > .column-filter-row > span,
.data-grid-scroll > .column-filter-row > label,
.data-grid-scroll > .column-filter-row > div {
  min-height: 44px !important;
  padding: 6px 10px !important;
  border-right: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 78%, #edf2f7) !important;
}

.data-grid-scroll > .item-list > .item-row {
  min-height: 42px !important;
  background: var(--panel, #ffffff) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 78%, #edf2f7) !important;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease !important;
}

.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div {
  min-height: 42px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 64%, #f1f5f9) !important;
  color: var(--ink, #172033) !important;
  font-family: var(--khmer-table-font, "Noto Sans Khmer", "Khmer OS Siemreap", Arial, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.data-grid-scroll > .item-list > .item-row:hover,
.data-grid-scroll > .item-list > .item-row:hover > span,
.data-grid-scroll > .item-list > .item-row:hover > div {
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, var(--panel, #ffffff)) !important;
}

.data-grid-scroll > .item-list > .item-row.active,
.data-grid-scroll > .item-list > .item-row.selected-for-download,
.data-grid-scroll > .item-list > .item-row.active > span,
.data-grid-scroll > .item-list > .item-row.active > div,
.data-grid-scroll > .item-list > .item-row.selected-for-download > span,
.data-grid-scroll > .item-list > .item-row.selected-for-download > div {
  background: var(--executive-selected) !important;
}

/* C. Sidebar system utilization: smaller, quieter, utility-style. */
.sidebar .system-utilization-panel {
  gap: 10px !important;
  margin-top: auto !important;
  padding: 11px 10px 10px !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 80%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar .system-utilization-panel h2 {
  margin: 0 0 2px !important;
  color: color-mix(in srgb, var(--muted, #64748b) 70%, transparent) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
}

.sidebar .system-utilization-item {
  gap: 4px !important;
}

.sidebar .system-utilization-label,
.sidebar .system-utilization-value {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.sidebar .system-utilization-label {
  color: color-mix(in srgb, var(--ink, #1e293b) 70%, var(--muted, #64748b)) !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
}

.sidebar .system-utilization-value {
  color: var(--muted, #64748b) !important;
  opacity: .82 !important;
}

.sidebar .system-utilization-track {
  height: 3px !important;
  background: color-mix(in srgb, var(--line, #d8e2ef) 60%, transparent) !important;
}

.sidebar .save-status-bar {
  margin-top: 2px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* D. Thin scrollbars globally for heavy data areas. */
.sidebar,
.library-panel,
.detail-panel,
.data-grid-scroll,
.settings-tab-panel,
.settings-panel,
.settings-list,
.inspector-column-list,
.column-dropdown-manager-list,
.custom-menu-column-sections .settings-list {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .34) transparent !important;
}

.sidebar::-webkit-scrollbar,
.library-panel::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar,
.data-grid-scroll::-webkit-scrollbar,
.settings-tab-panel::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar,
.settings-list::-webkit-scrollbar,
.inspector-column-list::-webkit-scrollbar,
.column-dropdown-manager-list::-webkit-scrollbar,
.custom-menu-column-sections .settings-list::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.sidebar::-webkit-scrollbar-track,
.library-panel::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track,
.data-grid-scroll::-webkit-scrollbar-track,
.settings-tab-panel::-webkit-scrollbar-track,
.settings-panel::-webkit-scrollbar-track,
.settings-list::-webkit-scrollbar-track,
.inspector-column-list::-webkit-scrollbar-track,
.column-dropdown-manager-list::-webkit-scrollbar-track,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar::-webkit-scrollbar-thumb,
.library-panel::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb,
.data-grid-scroll::-webkit-scrollbar-thumb,
.settings-tab-panel::-webkit-scrollbar-thumb,
.settings-panel::-webkit-scrollbar-thumb,
.settings-list::-webkit-scrollbar-thumb,
.inspector-column-list::-webkit-scrollbar-thumb,
.column-dropdown-manager-list::-webkit-scrollbar-thumb,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-thumb {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .32) !important;
  background-clip: border-box !important;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.library-panel::-webkit-scrollbar-thumb:hover,
.detail-panel::-webkit-scrollbar-thumb:hover,
.data-grid-scroll::-webkit-scrollbar-thumb:hover,
.settings-tab-panel::-webkit-scrollbar-thumb:hover,
.settings-panel::-webkit-scrollbar-thumb:hover,
.settings-list::-webkit-scrollbar-thumb:hover,
.inspector-column-list::-webkit-scrollbar-thumb:hover,
.column-dropdown-manager-list::-webkit-scrollbar-thumb:hover,
.custom-menu-column-sections .settings-list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .55) !important;
}

@media (max-width: 1180px) {
  .toolbar .toolbar-actions,
  .toolbar-actions.toolbar-actions-executive {
    grid-template-columns: minmax(220px, 1fr) max-content max-content !important;
    gap: 7px !important;
  }

  .toolbar .reference-action-button,
  .toolbar .print-button,
  .toolbar .download-selected-button {
    padding-inline: 10px !important;
  }

  .toolbar-more-summary span {
    display: none !important;
  }
}

/* ===== ULTRA-LIGHT SCROLLBAR PASS: remove heavy bottom/side scrollbar feeling ===== */
/* Make every visible scrollbar feel intentional and quiet. */
html,
body,
.workspace,
.content-grid,
.sidebar,
.library-panel,
.detail-panel,
.data-grid-scroll,
.settings-tab-panel,
.settings-panel,
.settings-list,
.inspector-column-list,
.column-dropdown-manager-list,
.custom-menu-column-sections .settings-list,
.dashboard-scroll,
.widget-library,
.widget-manager-list,
.modal-body,
.dialog-body {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .18) transparent !important;
}

/* Remove the reserved heavy gutter that made the bottom bar feel like a footer. */
.workspace {
  scrollbar-gutter: auto !important;
}

/* Global WebKit scrollbar fallback. Placed at the very end to beat earlier 16px/18px rules. */
*::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .20) !important;
  background-clip: border-box !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .42) !important;
}

/* The bottom table/workspace scrollbars were the heaviest visually, so make horizontal bars even softer. */
.workspace::-webkit-scrollbar,
.library-panel::-webkit-scrollbar,
.data-grid-scroll::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

.workspace::-webkit-scrollbar-thumb,
.library-panel::-webkit-scrollbar-thumb,
.data-grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .14) !important;
}

.workspace:hover::-webkit-scrollbar-thumb,
.library-panel:hover::-webkit-scrollbar-thumb,
.data-grid-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .30) !important;
}

/* Keep sidebar readable but not visually heavy. */
.sidebar::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .16) !important;
}

.sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .32) !important;
}

/* Settings/detail panels need slightly more discoverability but still thin. */
.detail-panel::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar,
.settings-tab-panel::-webkit-scrollbar,
.settings-list::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}


/* ─────────────────────────────────────────────────────────────
   Sidebar collapsible sections: Menu 1, Menu 2, Tags, System
   ───────────────────────────────────────────────────────────── */
.sidebar .nav-section {
  gap: 8px;
}

.sidebar-collapsible {
  display: block;
  min-width: 0;
}

.sidebar-collapsible > summary {
  list-style: none;
}

.sidebar-collapsible > summary::-webkit-details-marker {
  display: none;
}

.sidebar-collapsible-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px 0 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(15, 23, 42, 0.72);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sidebar-collapsible-summary::before {
  content: "›";
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  color: rgba(100, 116, 139, 0.9);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  transition: rotate 160ms ease, color 160ms ease;
}

.sidebar-collapsible[open] > .sidebar-collapsible-summary::before {
  rotate: 90deg;
}

.sidebar-collapsible-summary:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(148, 163, 184, 0.18);
}

.sidebar-collapsible-title {
  min-width: 0;
  overflow: hidden;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-collapsible-count {
  display: inline-grid;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 78%, #1f2937);
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sidebar-collapsible-content {
  display: grid;
  gap: 6px;
  padding: 7px 0 2px;
  overflow: hidden;
}

.nav-menu-group {
  gap: 0;
}

.nav-menu-group + .nav-menu-group,
.tag-panel,
.system-utilization-panel {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-menu-group h2,
.tag-panel h2,
.system-utilization-panel h2 {
  display: none !important;
}

.nav-menu-content {
  max-height: 320px;
  overflow: auto;
  padding-right: 1px;
}

.nav-menu-group:not([open]) {
  padding-bottom: 0;
}

.sidebar .nav-item {
  min-height: 36px;
  padding: 0 12px 0 28px;
  border-radius: 13px;
}

.sidebar .nav-item.active {
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, #fff), rgba(255,255,255,0.75));
  box-shadow: inset 4px 0 0 var(--accent), 0 8px 18px rgba(15, 23, 42, 0.035);
}

.tag-panel {
  display: block;
}

.tag-list {
  max-height: 128px;
  overflow: auto;
  padding: 2px 2px 3px;
}

.tag-chip {
  min-height: 27px;
  padding: 3px 10px;
  border-radius: 999px;
  border-color: rgba(100, 116, 139, 0.23);
  background: rgba(255, 255, 255, 0.68);
  color: #3f6212;
  font-size: 12px;
  font-weight: 700;
}

.system-utilization-panel {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding: 8px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.system-collapsible .sidebar-collapsible-title {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.system-collapsible .sidebar-collapsible-count {
  color: rgba(71, 85, 105, 0.72);
  background: rgba(148, 163, 184, 0.12);
}

.system-utilization-content {
  gap: 9px;
  padding-inline: 10px;
}

.sidebar .system-utilization-item {
  gap: 4px;
}

.sidebar .system-utilization-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

.sidebar .system-utilization-value {
  font-size: 11px;
  opacity: 0.72;
}

.sidebar .system-utilization-track {
  height: 3px;
  border: 0;
  background: rgba(148, 163, 184, 0.18);
}

.sidebar .system-utilization-bar {
  height: 100%;
}

.sidebar .save-status-bar,
.sidebar .system-utilization-panel #saveStatusBar.save-status-bar {
  margin: 0 10px 4px;
  padding: 7px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar .save-status-row {
  min-height: 20px;
}

.sidebar .save-status-track,
.sidebar .system-utilization-panel #saveStatusBar .save-status-track {
  height: 3px;
  border: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.sidebar .save-status-text,
.sidebar .system-utilization-panel #saveStatusBar .save-status-text {
  color: rgba(31, 41, 55, 0.86);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar .save-status-percent,
.sidebar .system-utilization-panel #saveStatusBar .save-status-percent {
  font-size: 11px;
  opacity: 0.7;
}

.nav-menu-content::-webkit-scrollbar,
.tag-list::-webkit-scrollbar,
.system-utilization-content::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.nav-menu-content::-webkit-scrollbar-track,
.tag-list::-webkit-scrollbar-track,
.system-utilization-content::-webkit-scrollbar-track {
  background: transparent;
}

.nav-menu-content::-webkit-scrollbar-thumb,
.tag-list::-webkit-scrollbar-thumb,
.system-utilization-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.16);
}

.nav-menu-content:hover::-webkit-scrollbar-thumb,
.tag-list:hover::-webkit-scrollbar-thumb,
.system-utilization-content:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.34);
}

.app-shell.sidebar-collapsed .sidebar-collapsible,
body.left-nav-hidden .sidebar-collapsible {
  display: none;
}

body.dark-theme .sidebar-collapsible-summary,
body.midnight-theme .sidebar-collapsible-summary,
body.deep-navy-theme .sidebar-collapsible-summary,
body.charcoal-theme .sidebar-collapsible-summary,
body.dark-emerald-theme .sidebar-collapsible-summary {
  color: rgba(226, 232, 240, 0.82);
}

body.dark-theme .sidebar-collapsible-summary:hover,
body.midnight-theme .sidebar-collapsible-summary:hover,
body.deep-navy-theme .sidebar-collapsible-summary:hover,
body.charcoal-theme .sidebar-collapsible-summary:hover,
body.dark-emerald-theme .sidebar-collapsible-summary:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .sidebar-collapsible-count,
body.midnight-theme .sidebar-collapsible-count,
body.deep-navy-theme .sidebar-collapsible-count,
body.charcoal-theme .sidebar-collapsible-count,
body.dark-emerald-theme .sidebar-collapsible-count {
  color: rgba(226, 232, 240, 0.82);
  background: rgba(255, 255, 255, 0.08);
}


/* ─────────────────────────────────────────────────────────────
   Sidebar snapped collapsible stack
   Makes Menu 1, Menu 2, Tags, and System Utilization sit tight
   together as one professional accordion block.
   ───────────────────────────────────────────────────────────── */
.sidebar {
  gap: 0 !important;
}

.sidebar .nav-section[aria-label="Collections"],
.sidebar .tag-panel,
.sidebar #systemUtilizationPanel {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidebar .nav-section[aria-label="Collections"] {
  display: grid !important;
  gap: 0 !important;
}

.sidebar .nav-menu-group,
.sidebar .nav-menu-group + .nav-menu-group,
.sidebar .tag-panel,
.sidebar .system-utilization-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.sidebar .system-utilization-panel {
  display: block !important;
  margin-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar .nav-menu-group.sidebar-collapsible,
.sidebar .tag-collapsible,
.sidebar .system-collapsible {
  margin: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.36) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.sidebar .nav-section[aria-label="Collections"] .nav-menu-group:first-child {
  border-radius: 14px 14px 0 0 !important;
}

.sidebar .system-collapsible {
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0 0 14px 14px !important;
}

.sidebar .sidebar-collapsible-summary {
  min-height: 38px !important;
  padding: 0 12px 0 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: none !important;
}

.sidebar .sidebar-collapsible-summary:hover {
  background: rgba(255, 255, 255, 0.78) !important;
}

.sidebar .sidebar-collapsible[open] > .sidebar-collapsible-summary {
  background: rgba(248, 250, 252, 0.86) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.sidebar .sidebar-collapsible-title {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.sidebar .sidebar-collapsible-count {
  height: 22px !important;
  min-width: 24px !important;
}

.sidebar .sidebar-collapsible-content {
  gap: 5px !important;
  padding: 6px 8px 8px !important;
}

.sidebar .nav-menu-content {
  max-height: 292px !important;
}

.sidebar .nav-item {
  min-height: 34px !important;
  padding-inline: 12px !important;
  border-radius: 10px !important;
}

.sidebar .tag-list {
  max-height: 116px !important;
  padding: 0 !important;
}

.sidebar .system-utilization-content {
  gap: 8px !important;
  padding: 8px 12px 10px !important;
}

.sidebar .system-utilization-item {
  gap: 3px !important;
}

.sidebar .system-utilization-track,
.sidebar .system-utilization-panel #saveStatusBar .save-status-track {
  height: 3px !important;
}

.sidebar .system-utilization-panel #saveStatusBar.save-status-bar {
  margin: 2px 0 0 !important;
  padding: 8px 0 0 !important;
}

body.dark-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.midnight-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.deep-navy-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.charcoal-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-emerald-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-theme .sidebar .tag-collapsible,
body.midnight-theme .sidebar .tag-collapsible,
body.deep-navy-theme .sidebar .tag-collapsible,
body.charcoal-theme .sidebar .tag-collapsible,
body.dark-emerald-theme .sidebar .tag-collapsible,
body.dark-theme .sidebar .system-collapsible,
body.midnight-theme .sidebar .system-collapsible,
body.deep-navy-theme .sidebar .system-collapsible,
body.charcoal-theme .sidebar .system-collapsible,
body.dark-emerald-theme .sidebar .system-collapsible {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(15, 23, 42, 0.2) !important;
}

body.dark-theme .sidebar .sidebar-collapsible-summary,
body.midnight-theme .sidebar .sidebar-collapsible-summary,
body.deep-navy-theme .sidebar .sidebar-collapsible-summary,
body.charcoal-theme .sidebar .sidebar-collapsible-summary,
body.dark-emerald-theme .sidebar .sidebar-collapsible-summary {
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ─────────────────────────────────────────────────────────────
   Sidebar accordion refinement: tighter rows + connected borders
   + normal-width system label shows SYSTEM STATUS, not aggressive ellipsis
   ───────────────────────────────────────────────────────────── */
.sidebar {
  align-content: start !important;
}

.sidebar .nav-section[aria-label="Collections"],
.sidebar .tag-panel,
.sidebar #systemUtilizationPanel,
.sidebar .system-utilization-panel {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidebar .nav-section[aria-label="Collections"] {
  gap: 0 !important;
}

.sidebar .nav-menu-group.sidebar-collapsible,
.sidebar .tag-collapsible,
.sidebar .system-collapsible {
  margin: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.42) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.sidebar .nav-section[aria-label="Collections"] .nav-menu-group:first-child {
  border-radius: 12px 12px 0 0 !important;
}

.sidebar .system-collapsible {
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 0 0 12px 12px !important;
}

.sidebar .sidebar-collapsible-summary {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 9px 0 26px !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.50) !important;
}

.sidebar .sidebar-collapsible-summary::before {
  left: 9px !important;
  font-size: 15px !important;
}

.sidebar .sidebar-collapsible[open] > .sidebar-collapsible-summary {
  min-height: 32px !important;
  background: rgba(248, 250, 252, 0.82) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.sidebar .sidebar-collapsible-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
}

.sidebar .system-collapsible .sidebar-collapsible-title {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  max-width: none !important;
}

.sidebar .sidebar-collapsible-count {
  flex: 0 0 auto !important;
  height: 20px !important;
  min-width: 22px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
}

.sidebar .system-collapsible .sidebar-collapsible-count {
  min-width: 34px !important;
  padding-inline: 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
}

.sidebar .sidebar-collapsible-content {
  gap: 4px !important;
  padding: 5px 8px 7px !important;
}

.sidebar .nav-menu-content {
  max-height: 270px !important;
}

.sidebar .nav-item {
  min-height: 31px !important;
  padding: 0 10px 0 22px !important;
  border-radius: 9px !important;
}

.sidebar .tag-list {
  max-height: 106px !important;
}

.sidebar .tag-chip {
  min-height: 24px !important;
  padding: 2px 9px !important;
  font-size: 11.5px !important;
}

.sidebar .system-utilization-content {
  gap: 7px !important;
  padding: 7px 10px 9px !important;
}

.sidebar .system-utilization-item {
  gap: 2px !important;
}

.sidebar .system-utilization-label {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
}

.sidebar .system-utilization-value {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

.sidebar .system-utilization-track,
.sidebar .system-utilization-panel #saveStatusBar .save-status-track {
  height: 2.5px !important;
}

.sidebar .system-utilization-panel #saveStatusBar.save-status-bar {
  margin: 1px 0 0 !important;
  padding: 7px 0 0 !important;
}

.sidebar .system-utilization-panel #saveStatusBar .save-status-row {
  min-height: 18px !important;
}


.item-row.document-status-missing,
.item-row.document-status-missing > span,
.item-row.document-status-missing strong,
.item-row.document-status-missing small {
  color: #d6b31f !important;
}

.item-row.document-status-broken,
.item-row.document-status-broken > span,
.item-row.document-status-broken strong,
.item-row.document-status-broken small {
  color: #f87171 !important;
}

@media (max-width: 1180px) {
  .sidebar .system-collapsible .sidebar-collapsible-title {
    max-width: 86px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

body.dark-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.midnight-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.deep-navy-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.charcoal-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-emerald-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-theme .sidebar .tag-collapsible,
body.midnight-theme .sidebar .tag-collapsible,
body.deep-navy-theme .sidebar .tag-collapsible,
body.charcoal-theme .sidebar .tag-collapsible,
body.dark-emerald-theme .sidebar .tag-collapsible,
body.dark-theme .sidebar .system-collapsible,
body.midnight-theme .sidebar .system-collapsible,
body.deep-navy-theme .sidebar .system-collapsible,
body.charcoal-theme .sidebar .system-collapsible,
body.dark-emerald-theme .sidebar .system-collapsible {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(15, 23, 42, 0.22) !important;
}


/* ─────────────────────────────────────────────────────────────
   Sidebar expanded dashboard/menu rows: compact connected list
   Keeps the accordion snapped even after clicking a dashboard item.
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-collapsible-content.nav-menu-content {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  max-height: 256px !important;
  overflow: auto !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

.sidebar .nav-menu-content .nav-item,
.sidebar .nav-menu-content .dashboard-nav-item,
.sidebar .nav-menu-content .dashboard-nav-item.active {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px 0 26px !important;
  margin: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

.sidebar .nav-menu-content .nav-item:last-child,
.sidebar .nav-menu-content .dashboard-nav-item:last-child {
  border-bottom: 0 !important;
}

.sidebar .nav-menu-content .nav-item:hover,
.sidebar .nav-menu-content .dashboard-nav-item:hover {
  background: rgba(248, 250, 252, 0.82) !important;
  color: var(--accent) !important;
  transform: none !important;
}

.sidebar .nav-menu-content .nav-item.active,
.sidebar .nav-menu-content .dashboard-nav-item.active,
.sidebar .menu-two .nav-menu-content .nav-item.active,
.sidebar .menu-two .nav-menu-content .dashboard-nav-item.active,
body[class$="-theme"] .sidebar .nav-menu-content .dashboard-nav-item.active {
  color: var(--accent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, #ffffff), rgba(255,255,255,0.42)) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.sidebar .nav-menu-content .nav-item.active::before,
.sidebar .nav-menu-content .dashboard-nav-item.active::before {
  display: none !important;
}

.sidebar .nav-menu-content .menu-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

.sidebar .nav-menu-content .menu-count {
  flex: 0 0 auto !important;
  min-width: 20px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.sidebar .nav-menu-content .dashboard-nav-item .nav-icon,
.sidebar .nav-menu-content .dashboard-nav-item.active .nav-icon,
body[class$="-theme"] .sidebar .nav-menu-content .dashboard-nav-item .nav-icon,
body[class$="-theme"] .sidebar .nav-menu-content .dashboard-nav-item.active .nav-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  box-shadow: none !important;
}

.sidebar .nav-menu-content .dashboard-nav-item.active .nav-icon,
body[class$="-theme"] .sidebar .nav-menu-content .dashboard-nav-item.active .nav-icon {
  color: #ffffff !important;
  background: var(--accent) !important;
}

.sidebar .sidebar-collapsible[open] > .sidebar-collapsible-summary {
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

.sidebar .nav-menu-group.sidebar-collapsible[open],
.sidebar .tag-collapsible[open],
.sidebar .system-collapsible[open] {
  background: rgba(255, 255, 255, 0.34) !important;
}

body.dark-theme .sidebar .sidebar-collapsible-content.nav-menu-content,
body.midnight-theme .sidebar .sidebar-collapsible-content.nav-menu-content,
body.deep-navy-theme .sidebar .sidebar-collapsible-content.nav-menu-content,
body.charcoal-theme .sidebar .sidebar-collapsible-content.nav-menu-content,
body.dark-emerald-theme .sidebar .sidebar-collapsible-content.nav-menu-content {
  background: rgba(15, 23, 42, 0.12) !important;
}

body.dark-theme .sidebar .nav-menu-content .nav-item,
body.midnight-theme .sidebar .nav-menu-content .nav-item,
body.deep-navy-theme .sidebar .nav-menu-content .nav-item,
body.charcoal-theme .sidebar .nav-menu-content .nav-item,
body.dark-emerald-theme .sidebar .nav-menu-content .nav-item {
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}


/* ─────────────────────────────────────────────────────────────
   Sidebar connected accordion borders
   Make Menu 1, Menu 2, Tags, and System Status read as one snapped stack.
   ───────────────────────────────────────────────────────────── */
.sidebar {
  gap: 0 !important;
}

.sidebar > .nav-section[aria-label="Collections"],
.sidebar > .tag-panel,
.sidebar > .system-utilization-panel,
.sidebar > #systemUtilizationPanel {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar > .nav-section[aria-label="Collections"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.sidebar > .tag-panel,
.sidebar > .system-utilization-panel,
.sidebar > #systemUtilizationPanel {
  margin-top: -1px !important;
}

.sidebar .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible + .nav-menu-group.sidebar-collapsible,
.sidebar .tag-collapsible,
.sidebar .system-collapsible {
  margin-top: -1px !important;
}

.sidebar .nav-menu-group.sidebar-collapsible,
.sidebar .tag-collapsible,
.sidebar .system-collapsible {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.40) !important;
  box-shadow: none !important;
}

.sidebar .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible:first-child {
  margin-top: 0 !important;
  border-radius: 14px 14px 0 0 !important;
}

.sidebar .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible:last-child:not(:only-child) {
  border-radius: 0 !important;
}

.sidebar .tag-collapsible {
  border-radius: 0 !important;
}

.sidebar .system-collapsible {
  border-radius: 0 0 14px 14px !important;
}

.sidebar .sidebar-collapsible-summary {
  height: 32px !important;
  min-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
}

.sidebar .sidebar-collapsible[open] > .sidebar-collapsible-summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

body.dark-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.midnight-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.deep-navy-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.charcoal-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-emerald-theme .sidebar .nav-menu-group.sidebar-collapsible,
body.dark-theme .sidebar .tag-collapsible,
body.midnight-theme .sidebar .tag-collapsible,
body.deep-navy-theme .sidebar .tag-collapsible,
body.charcoal-theme .sidebar .tag-collapsible,
body.dark-emerald-theme .sidebar .tag-collapsible,
body.dark-theme .sidebar .system-collapsible,
body.midnight-theme .sidebar .system-collapsible,
body.deep-navy-theme .sidebar .system-collapsible,
body.charcoal-theme .sidebar .system-collapsible,
body.dark-emerald-theme .sidebar .system-collapsible {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(15, 23, 42, 0.20) !important;
}

/* ─────────────────────────────────────────────────────────────
   Khmer safe sidebar rows
   Fixes Khmer text clipping caused by fixed 32px accordion rows.
   Keeps connected borders, but gives Khmer glyphs enough top/bottom air.
   ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-collapsible-summary {
  min-height: 42px !important;
  height: auto !important;
  padding: 5px 11px 5px 28px !important;
  align-items: center !important;
  overflow: visible !important;
}

.sidebar .sidebar-collapsible[open] > .sidebar-collapsible-summary {
  min-height: 42px !important;
}

.sidebar .sidebar-collapsible-summary::before {
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
}

.sidebar .sidebar-collapsible-title {
  display: block !important;
  padding: 1px 0 2px !important;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar .system-collapsible .sidebar-collapsible-title {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.055em !important;
}

.sidebar .sidebar-collapsible-count {
  height: 24px !important;
  min-width: 26px !important;
  line-height: 1 !important;
}

.sidebar .system-collapsible .sidebar-collapsible-count {
  min-width: 38px !important;
}

.sidebar .sidebar-collapsible-content {
  padding: 6px 8px 8px !important;
}

.sidebar .nav-item {
  min-height: 38px !important;
  height: auto !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  align-items: center !important;
}

.sidebar .nav-item .menu-text,
.sidebar .nav-item span:not(.folder-ui-icon):not(.nav-icon) {
  line-height: 1.55 !important;
}

.sidebar .tag-chip {
  min-height: 28px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   USER UPDATE: Edge-snap behavior for floating buttons
   Applies to:
   - existing right-side floating navigation/settings-style button
   - W floating settings button
   Features:
   - drag anywhere
   - snap/attach to screen edge when released near edge
   - zoom-stable stored position
   - double-click reset
   ========================================================= */

.floating-edge-snap-button {
  touch-action: none !important;
  user-select: none !important;
  cursor: grab !important;
  transition:
    left 160ms ease,
    top 160ms ease,
    width 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    border-radius 160ms ease !important;
}

.floating-edge-snap-button.is-positioned {
  right: auto !important;
}

.floating-edge-snap-button.is-dragging {
  cursor: grabbing !important;
  transform: scale(1.04) !important;
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--accent, #03a9f4) 48%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.floating-edge-snap-button.is-edge-ready {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #03a9f4) 22%, transparent),
    0 16px 36px color-mix(in srgb, var(--accent, #03a9f4) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

.floating-edge-snap-button.is-snapped-left {
  border-radius: 0 10px 10px 0 !important;
}

.floating-edge-snap-button.is-snapped-right {
  border-radius: 10px 0 0 10px !important;
}

.floating-edge-snap-button.is-snapped-top {
  border-radius: 0 0 10px 10px !important;
}

.floating-edge-snap-button.is-snapped-bottom {
  border-radius: 10px 10px 0 0 !important;
}

/* =========================================================
   USER UPDATE: Settings controls for floating buttons
   Hide/unhide W button and right floating button from Settings.
   ========================================================= */
.floating-button-hidden-by-setting {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =========================================================
   USER UPDATE: Floating action buttons
   D = Download       → drop/bounce animation
   C = Copy Cite      → quote/copy pulse animation
   P = Print          → paper/press animation
   All buttons support drag, edge-snap, zoom-stable position, and Settings visibility.
   ========================================================= */
.floating-action-button {
  position: fixed !important;
  right: 0 !important;
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px 0 0 8px !important;
  color: #ffffff !important;
  background: var(--accent, #03a9f4) !important;
  display: inline-grid !important;
  place-items: center !important;
  z-index: 10041 !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent, #03a9f4) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}


.floating-action-download {
  top: 210px !important;
}

.floating-action-copy-cite {
  top: 258px !important;
}

.floating-action-print {
  top: 306px !important;
}

.floating-action-button::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  opacity: 0.62;
  pointer-events: none;
}

.floating-action-button::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: floatingActionShine 3.3s ease-in-out infinite;
  pointer-events: none;
}

.floating-action-letter {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #ffffff !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
  will-change: transform, opacity, text-shadow, letter-spacing;
}

.floating-action-download .floating-action-letter {
  animation: floatingDownloadDrop 1.65s ease-in-out infinite;
}

.floating-action-copy-cite .floating-action-letter {
  animation: floatingCopyCitePulse 1.9s ease-in-out infinite;
}

.floating-action-print .floating-action-letter {
  animation: floatingPrintPress 1.75s ease-in-out infinite;
}


@keyframes floatingDownloadDrop {
  0%, 100% {
    transform: translateY(-1px);
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
  }
  45% {
    transform: translateY(4px) scaleY(0.92);
    text-shadow: 0 5px 10px rgba(255, 255, 255, 0.32);
  }
  68% {
    transform: translateY(-2px) scaleY(1.04);
  }
}

@keyframes floatingCopyCitePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.94;
  }
  45% {
    transform: scale(1.14);
    opacity: 1;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.72);
  }
  62% {
    transform: scale(0.96);
  }
}

@keyframes floatingPrintPress {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  35% {
    transform: translateY(2px) scaleY(0.88);
    text-shadow: 0 4px 8px rgba(255, 255, 255, 0.34);
  }
  65% {
    transform: translateY(-1px) scaleY(1.06);
  }
}

@keyframes floatingActionShine {
  0%, 60% {
    transform: translateX(-130%) skewX(-18deg);
  }
  80%, 100% {
    transform: translateX(130%) skewX(-18deg);
  }
}


body.app-is-locked .floating-action-button,
body:has(#appLockOverlay) .floating-action-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media print {
  .floating-action-button {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-action-letter,
  .floating-action-button::after {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Floating button grid restraint
   Prevents D/C/P/W/right floating buttons from overlapping after zoom.
   ========================================================= */
.floating-edge-snap-button {
  --floating-grid-step-x: 52px;
  --floating-grid-step-y: 48px;
}

.floating-edge-snap-button.is-grid-adjusting {
  transition:
    left 180ms ease,
    top 180ms ease,
    width 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    border-radius 160ms ease !important;
}


/* =========================================================
   USER UPDATE: Floating Documentation button
   Uses uploaded assets/icon-documentation.svg.
   Behaves like D/C/P/W: draggable, edge-snap, grid-restraint, hide/show.
   ========================================================= */
.floating-action-documentation {
  top: 402px !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.26), transparent 34%),
    var(--accent, #03a9f4) !important;
}

.floating-action-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(15, 23, 42, 0.22));
  animation: floatingDocumentationPagePulse 2.15s ease-in-out infinite;
}

@keyframes floatingDocumentationPagePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.94;
  }
  42% {
    transform: translateY(-2px) scale(1.08);
    opacity: 1;
  }
  66% {
    transform: translateY(1px) scale(0.97);
  }
}

.documentation-dialog {
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
}

.documentation-dialog::backdrop {
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
}

.documentation-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 78%, #e2e8f0);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent, #2563eb) 12%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.documentation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(248, 250, 252, 0.78);
}

.documentation-header h2 {
  margin: 3px 0 0;
  color: var(--ink, #1e2424);
  font-size: 21px;
  line-height: 1.35;
}

.documentation-content {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}

.documentation-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line, #d8e2ef) 72%, #edf2f7);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.documentation-card h3 {
  margin: 0;
  color: var(--accent-strong, var(--accent, #2563eb));
  font-size: 15px;
  line-height: 1.35;
}

.documentation-card p {
  margin: 0;
  color: var(--muted, #66706d);
  font-size: 13px;
  line-height: 1.55;
}

body.app-is-locked .floating-action-documentation,
body:has(#appLockOverlay) .floating-action-documentation {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media print {
  .floating-action-documentation,
  .documentation-dialog {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-action-icon {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Floating button group controls
   - Snap all buttons together
   - Move all buttons together
   - Lock movement while keeping click actions active
   ========================================================= */
.floating-button-group-controls {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent, #2563eb) 28%, var(--line, #d8e2ef));
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent, #2563eb) 6%, #ffffff),
      rgba(255, 255, 255, 0.78));
}

.floating-button-group-header {
  margin-bottom: 2px;
}

.floating-button-group-actions {
  justify-content: flex-start;
}

.floating-button-group-actions .secondary-action {
  min-height: 34px;
  padding-inline: 13px;
  border-radius: 12px;
  color: #ffffff;
  border-color: var(--accent, #2563eb);
  background: var(--accent, #2563eb);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}

.floating-button-group-actions .secondary-action:hover {
  background: var(--accent-strong, var(--accent, #2563eb));
}

.floating-buttons-move-together .floating-edge-snap-button {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent),
    0 8px 22px color-mix(in srgb, var(--accent, #03a9f4) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.floating-edge-snap-button.is-move-locked,
body.floating-buttons-locked .floating-edge-snap-button {
  cursor: pointer !important;
}

body.floating-buttons-locked .floating-edge-snap-button::before {
  border-style: dashed;
  opacity: 0.86;
}

body.floating-buttons-locked .floating-edge-snap-button:hover {
  transform: none !important;
}


/* USER UPDATE: Floating snap direction buttons */
.floating-button-group-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.floating-button-group-actions .secondary-action {
  white-space: nowrap;
}


/* =========================================================
   USER UPDATE: Move Download / Copy Cite / Print into More menu
   Keeps the top toolbar clean and makes More the action hub.
   ========================================================= */
.toolbar-primary-actions {
  display: none !important;
}

.toolbar-more-menu {
  position: relative;
}

.toolbar-more-summary {
  min-width: 132px;
  justify-content: center;
  gap: 10px;
}

.toolbar-more-panel {
  min-width: 260px;
}

.toolbar-more-action-section {
  display: grid !important;
  gap: 8px;
}

.toolbar-more-action-item {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 14px !important;
  border-radius: 13px !important;
  font-weight: 800;
  text-align: left;
}

.toolbar-more-action-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 9px;
  color: var(--accent-strong, var(--accent, #2563eb));
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, #ffffff);
  font-size: 15px;
  line-height: 1;
}

.toolbar-more-action-item:hover .toolbar-more-action-icon {
  color: #ffffff;
  background: var(--accent, #2563eb);
  transform: translateY(-1px);
}

.toolbar-more-action-section .settings-button,
.toolbar-more-action-section .reference-action-button,
.toolbar-more-action-section .logout-button {
  width: 100%;
  justify-content: flex-start;
}

.toolbar-more-action-section::before {
  content: "Quick actions";
  display: block;
  margin: 0 2px 2px;
  color: var(--muted, #66706d);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar-more-action-section .settings-button {
  margin-top: 4px;
}


/* =========================================================
   USER UPDATE: Floating Theme button
   Uses uploaded palette icon extracted into assets/icon-theme-palette.png.
   ========================================================= */
.floating-action-theme {
  top: 450px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.28), transparent 35%),
    var(--accent, #03a9f4) !important;
}

.floating-theme-icon {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.2));
  animation: floatingThemePaletteWiggle 2.2s ease-in-out infinite;
}

@keyframes floatingThemePaletteWiggle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-7deg) scale(1.06);
  }
  50% {
    transform: rotate(5deg) scale(1.02);
  }
  75% {
    transform: rotate(-3deg) scale(1.05);
  }
}

body.app-is-locked .floating-action-theme,
body:has(#appLockOverlay) .floating-action-theme {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media print {
  .floating-action-theme {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-theme-icon {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Premium animated floating Settings button
   Adapted from requested .floating-settings-btn code.
   Safe with drag, edge-snap, grid restraint, move together, and lock moving.
   ========================================================= */
.floating-settings-btn {
  position: fixed !important;
  right: 24px !important;
  top: 50% !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  cursor: grab !important;
  z-index: 10043 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ffffff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 30%),
    linear-gradient(135deg, #6366f1, #7c3aed) !important;

  box-shadow:
    0 14px 30px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;

  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  touch-action: none !important;
  user-select: none !important;

  transition:
    left 180ms ease,
    top 180ms ease,
    right 180ms ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-radius 160ms ease !important;
}

/* Default center-right placement only before user drags/snaps it. */
.floating-settings-btn:not(.is-positioned) {
  transform: translateY(-50%) !important;
}

.floating-settings-btn:hover:not(.is-dragging):not(.is-move-locked),
body:not(.floating-buttons-locked) .floating-settings-btn:hover:not(.is-dragging) {
  transform: translateY(-50%) scale(1.06) !important;
  box-shadow:
    0 20px 42px rgba(99, 102, 241, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* When positioned by drag/snap, do not keep translateY(-50%). */
.floating-settings-btn.is-positioned:hover:not(.is-dragging):not(.is-move-locked),
body:not(.floating-buttons-locked) .floating-settings-btn.is-positioned:hover:not(.is-dragging) {
  transform: scale(1.06) !important;
}

.floating-settings-btn.is-dragging {
  cursor: grabbing !important;
  transform: scale(1.04) !important;
}

.floating-settings-btn::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255,255,255,0.65),
    transparent,
    transparent
  );
  animation: settingsGlowSpin 2.6s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.floating-settings-btn::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(135deg, #6366f1, #7c3aed);
  z-index: 1;
  pointer-events: none;
}

.floating-settings-btn .settings-gear {
  position: relative;
  z-index: 2;
  width: 27px !important;
  height: 27px !important;
  color: #ffffff !important;
  animation: settingsGearSpin 2.8s linear infinite;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28));
  transform-origin: 50% 50%;
}

.floating-settings-btn .settings-gear path,
.floating-settings-btn .settings-gear circle {
  stroke: currentColor !important;
}

body.floating-buttons-locked .floating-settings-btn,
.floating-settings-btn.is-move-locked {
  cursor: pointer !important;
}

body.floating-buttons-locked .floating-settings-btn:hover,
.floating-settings-btn.is-move-locked:hover {
  transform: none !important;
}

body.floating-buttons-locked .floating-settings-btn:not(.is-positioned):hover,
.floating-settings-btn.is-move-locked:not(.is-positioned):hover {
  transform: translateY(-50%) !important;
}

.floating-settings-btn.is-snapped-left {
  border-radius: 0 16px 16px 0 !important;
}

.floating-settings-btn.is-snapped-right {
  border-radius: 16px 0 0 16px !important;
}

.floating-settings-btn.is-snapped-top {
  border-radius: 0 0 16px 16px !important;
}

.floating-settings-btn.is-snapped-bottom {
  border-radius: 16px 16px 0 0 !important;
}

@keyframes settingsGearSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes settingsGlowSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-settings-btn::before,
  .floating-settings-btn .settings-gear {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: floating Settings button uses uploaded GIF
   Replaces the inner SVG gear with assets/settings-gear-effect.gif
   while keeping the premium floating button shell and interactions.
   ========================================================= */
.floating-settings-btn .settings-gear {
  display: none !important;
}

.floating-settings-gif-wrap {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.floating-settings-gif {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center center;
  border-radius: 10px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.24));
}

.floating-settings-btn::before {
  animation-duration: 3.4s !important;
}

@media (prefers-reduced-motion: reduce) {
  .floating-settings-gif {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Settings floating button matches W floating button design
   Uses the same edge-tab shell style as the W button, with the gear GIF inside.
   ========================================================= */
.floating-settings-btn {
  right: 0 !important;
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px 0 0 8px !important;
  color: #ffffff !important;
  background: var(--accent, #03a9f4) !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent, #03a9f4) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  transform: none !important;
  cursor: grab !important;
}

.floating-settings-btn:hover:not(.is-dragging):not(.is-move-locked) {
  transform: none !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--accent, #03a9f4) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.floating-settings-btn.is-dragging {
  cursor: grabbing !important;
  transform: none !important;
}

.floating-settings-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  opacity: 0.62 !important;
  background: none !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.floating-settings-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  animation: floatingActionShine 3.3s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.floating-settings-gif-wrap {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.floating-settings-gif {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.floating-settings-gif-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.floating-settings-btn.is-snapped-left {
  border-radius: 0 8px 8px 0 !important;
}

.floating-settings-btn.is-snapped-right {
  border-radius: 8px 0 0 8px !important;
}

.floating-settings-btn.is-snapped-top {
  border-radius: 0 0 8px 8px !important;
}

.floating-settings-btn.is-snapped-bottom {
  border-radius: 8px 8px 0 0 !important;
}

body.floating-buttons-locked .floating-settings-btn,
.floating-settings-btn.is-move-locked {
  cursor: pointer !important;
}


/* =========================================================
   USER UPDATE: Download floating button uses uploaded GIF
   Applies assets/download-button-effect.gif as the main animated icon.
   ========================================================= */
.floating-action-download .floating-action-letter {
  display: none !important;
}

.floating-download-gif-wrap {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.floating-download-gif {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.floating-download-gif-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .floating-download-gif {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Print floating button uses uploaded GIF
   Applies assets/printer-button-effect.gif as the main animated icon.
   ========================================================= */
.floating-action-print .floating-action-letter {
  display: none !important;
}

.floating-print-gif-wrap {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.floating-print-gif {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.floating-print-gif-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .floating-print-gif {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Copy Cite floating button uses uploaded GIF
   Applies assets/copy-cite-button-effect.gif as the main animated icon.
   ========================================================= */
.floating-action-copy-cite .floating-action-letter {
  display: none !important;
}

.floating-copy-cite-icon-wrap,
.floating-copy-cite-gif-wrap {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.floating-copy-cite-icon,
.floating-copy-cite-gif {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.floating-copy-cite-icon-badge,
.floating-copy-cite-gif-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .floating-copy-cite-gif {
    animation: none !important;
  }
}


/* =========================================================
   USER UPDATE: Pin button changed from 1st icon to 2nd image icon
   Uses assets/pin-button-icon.png for detail pin button and row pin markers.
   ========================================================= */
.pin-button {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: #eaf7ff;
  color: #ed2a18;
}

.pin-button[aria-pressed="true"] {
  border-color: #50bceb;
  color: #ed2a18;
  background: #dff5ff;
}

.data-pin-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transform: none !important;
  border-radius: 5px;
  background-image: url("assets/pin-button-icon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.data-pin-label .data-pin-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border-radius: 4px;
}

.data-pin-icon::before,
.data-pin-icon::after {
  content: none !important;
  display: none !important;
}


/* ===== THREE FIXED CONTROL COLUMNS: SELECT | ADD/CLEAR/PIN | FAVORITE ===== */
.table-control-cell,
.data-grid-scroll > .table-header > .table-control-cell,
.data-grid-scroll > .column-filter-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > .table-control-cell,
.item-row > .table-control-cell,
.task-row > .table-control-cell,
.work-row > .table-control-cell,
.progress-row > .table-control-cell,
.inspector-row > .table-control-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  border-right: 1px solid #edf2f7 !important;
}

.table-header .table-control-cell,
.data-grid-scroll > .table-header > .table-control-cell {
  border-right-color: #dbe4f0 !important;
}

.table-control-col-select,
.select-cell.table-control-cell {
  grid-column: auto !important;
}

.table-control-col-action,
.row-pin-cell,
.table-action-cell.table-control-cell {
  grid-column: auto !important;
}

.table-control-col-favorite,
.favorite-cell {
  grid-column: auto !important;
}

.table-action-cell,
.table-header .table-action-cell,
.select-cell,
.row-pin-cell,
.favorite-cell {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
}

.table-add-button,
.table-clear-button,
.row-select-button,
.data-pin-label,
.star-label,
.control-placeholder,
.work-status-dot,
.progress-inline-number {
  grid-column: auto !important;
  justify-self: center !important;
  flex: 0 0 auto !important;
}

.table-add-button,
.table-clear-button,
.row-select-button {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.row-pin-cell .data-pin-label,
.favorite-cell .star-label {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

.row-pin-cell .data-pin-icon {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

.favorite-cell .star-label {
  color: #111827 !important;
  font-size: 15px !important;
}

.control-placeholder {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
}

.table-add-menu {
  left: 0 !important;
  top: 24px !important;
}

.data-grid-scroll > .table-header > .table-control-cell,
.data-grid-scroll > .column-filter-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > .table-control-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   USER UPDATE: Menu 1 row data design follows Menu 3
   Purpose: remove the different "white block / sticky first cell" look
   from Menu 1 while keeping the 3 compact control columns.

   Column layout stays:
   1) Header blank / Filter select all / Data select
   2) Header plus / Filter clear X / Data pin
   3) Header blank / Filter blank / Data favorite star
   ========================================================= */
.data-grid-scroll > .table-header > .table-control-cell,
.data-grid-scroll > .column-filter-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > .table-control-cell {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  inline-size: auto !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  flex: initial !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.data-grid-scroll > .table-header > .table-control-cell {
  min-height: 44px !important;
  border-right: 1px solid #dbe4f0 !important;
}

.data-grid-scroll > .column-filter-row > .table-control-cell {
  min-height: 46px !important;
  border-right: 1px solid #edf2f7 !important;
}

.data-grid-scroll > .item-list > .item-row > .table-control-cell {
  min-height: 44px !important;
  border-right: 1px solid #f0f4f8 !important;
}

/* Remove Menu 1's special sticky/box treatment so rows look like Menu 3 rows. */
.data-grid-scroll > .table-header > :first-child,
.data-grid-scroll > .column-filter-row > :first-child,
.data-grid-scroll > .item-list > .item-row > :first-child,
.data-grid-scroll > .item-list > .item-row.active > :first-child,
.data-grid-scroll > .item-list > .item-row.selected-for-download > :first-child,
.data-grid-scroll > .item-list > .item-row.selected > :first-child,
.data-grid-scroll > .item-list > .item-row.is-selected > :first-child {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Let the full row background show continuously across every cell. */
.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div,
.data-grid-scroll > .item-list > .item-row:hover > span,
.data-grid-scroll > .item-list > .item-row:hover > div,
.data-grid-scroll > .item-list > .item-row:nth-child(even) > span,
.data-grid-scroll > .item-list > .item-row:nth-child(even) > div,
.data-grid-scroll > .item-list > .item-row:nth-child(even):hover > span,
.data-grid-scroll > .item-list > .item-row:nth-child(even):hover > div,
.data-grid-scroll > .item-list > .item-row.active > span,
.data-grid-scroll > .item-list > .item-row.active > div,
.data-grid-scroll > .item-list > .item-row.selected-for-download > span,
.data-grid-scroll > .item-list > .item-row.selected-for-download > div,
.data-grid-scroll > .item-list > .item-row.selected > span,
.data-grid-scroll > .item-list > .item-row.selected > div,
.data-grid-scroll > .item-list > .item-row.is-selected > span,
.data-grid-scroll > .item-list > .item-row.is-selected > div {
  background: transparent !important;
}

/* Keep the three beginning columns compact and centered. */
.data-grid-scroll > .table-header > .table-control-col-select,
.data-grid-scroll > .table-header > .table-control-col-action,
.data-grid-scroll > .table-header > .table-control-col-favorite,
.data-grid-scroll > .column-filter-row > .table-control-col-select,
.data-grid-scroll > .column-filter-row > .table-control-col-action,
.data-grid-scroll > .column-filter-row > .table-control-col-favorite,
.data-grid-scroll > .item-list > .item-row > .table-control-col-select,
.data-grid-scroll > .item-list > .item-row > .table-control-col-action,
.data-grid-scroll > .item-list > .item-row > .table-control-col-favorite {
  box-sizing: border-box !important;
  justify-content: center !important;
  text-align: center !important;
}

.data-grid-scroll .table-control-cell .row-select-button,
.data-grid-scroll .table-control-cell .select-visible-button,
.data-grid-scroll .table-control-cell .table-add-button,
.data-grid-scroll .table-control-cell .table-clear-button,
.data-grid-scroll .table-control-cell .data-pin-label,
.data-grid-scroll .table-control-cell .star-label,
.data-grid-scroll .table-control-cell .control-placeholder {
  margin: 0 auto !important;
  justify-self: center !important;
  align-self: center !important;
}


/* =========================================================
   USER UPDATE: Menu 1 beginning-column spacing follows Menu 3
   The document table (Menu 1) now uses the same row breathing room
   as the generic Menu 3 table: row padding lives on the row, not as
   a large white block inside the first control cell.
   ========================================================= */
.data-grid-scroll > .table-header,
.data-grid-scroll > .column-filter-row,
.data-grid-scroll > .item-list > .item-row {
  column-gap: 8px !important;
  align-items: center !important;
}

.data-grid-scroll > .table-header {
  min-height: 40px !important;
  padding: 6px 10px !important;
}

.data-grid-scroll > .column-filter-row {
  top: 40px !important;
  min-height: 40px !important;
  padding: 6px 10px !important;
}

.data-grid-scroll > .item-list > .item-row {
  min-height: 40px !important;
  padding: 6px 10px !important;
}

/* Make the first 3 Menu 1 control cells use Menu 3's compact internal spacing. */
.data-grid-scroll > .table-header > .table-control-cell,
.data-grid-scroll > .column-filter-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > .table-control-cell {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-right: 1px solid #f0f4f8 !important;
  box-shadow: none !important;
}

.data-grid-scroll > .table-header > .table-control-cell {
  border-right-color: #dbe4f0 !important;
}

.data-grid-scroll > .column-filter-row > .table-control-cell {
  border-right-color: #edf2f7 !important;
}

/* Keep normal data cells balanced with the same row rhythm. */
.data-grid-scroll > .table-header > span:not(.table-control-cell),
.data-grid-scroll > .table-header > .table-header-cell:not(.table-control-cell),
.data-grid-scroll > .column-filter-row > span:not(.table-control-cell),
.data-grid-scroll > .column-filter-row > label,
.data-grid-scroll > .column-filter-row > div:not(.table-control-cell),
.data-grid-scroll > .item-list > .item-row > span:not(.table-control-cell),
.data-grid-scroll > .item-list > .item-row > div:not(.table-control-cell) {
  min-height: 24px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* Header/filter inputs keep professional height without making the control columns taller. */
.data-grid-scroll > .column-filter-row input,
.data-grid-scroll > .column-filter-row select {
  min-height: 30px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Buttons/circles are visually centered like Menu 3. */
.data-grid-scroll .table-control-cell .row-select-button,
.data-grid-scroll .table-control-cell .select-visible-button,
.data-grid-scroll .table-control-cell .table-add-button,
.data-grid-scroll .table-control-cell .table-clear-button,
.data-grid-scroll .table-control-cell .data-pin-label,
.data-grid-scroll .table-control-cell .star-label,
.data-grid-scroll .table-control-cell .control-placeholder {
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

/* shadcn/Radix-style circular checkbox skin for table row selection controls. */
.row-select-button,
.data-grid-scroll .table-control-cell .row-select-button,
.data-grid-scroll .table-control-cell .select-visible-button {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border: 1px solid var(--input, #d4d4d8) !important;
  border-radius: 9999px !important;
  background: var(--background, #ffffff) !important;
  color: transparent !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

.row-select-button::after,
.data-grid-scroll .table-control-cell .row-select-button::after,
.data-grid-scroll .table-control-cell .select-visible-button::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 4px !important;
  margin-top: -1px !important;
  border-left: 1.7px solid currentColor !important;
  border-bottom: 1.7px solid currentColor !important;
  opacity: 0 !important;
  transform: rotate(-45deg) scale(0.86) !important;
  transform-origin: center !important;
  transition: opacity 120ms ease, transform 120ms ease !important;
}

.row-select-button:hover,
.data-grid-scroll .table-control-cell .row-select-button:hover,
.data-grid-scroll .table-control-cell .select-visible-button:hover {
  border-color: var(--ring, #a1a1aa) !important;
  background: color-mix(in srgb, var(--accent, #f4f4f5) 55%, var(--background, #ffffff)) !important;
}

.row-select-button[aria-pressed="true"],
.row-select-button[aria-checked="true"],
.data-grid-scroll .table-control-cell .row-select-button[aria-pressed="true"],
.data-grid-scroll .table-control-cell .row-select-button[aria-checked="true"],
.data-grid-scroll .table-control-cell .select-visible-button[aria-pressed="true"],
.data-grid-scroll .table-control-cell .select-visible-button[aria-checked="true"] {
  border-color: var(--primary, #18181b) !important;
  background: var(--primary, #18181b) !important;
  color: var(--primary-foreground, #fafafa) !important;
}

.row-select-button[aria-pressed="true"]::after,
.row-select-button[aria-checked="true"]::after,
.data-grid-scroll .table-control-cell .row-select-button[aria-pressed="true"]::after,
.data-grid-scroll .table-control-cell .row-select-button[aria-checked="true"]::after,
.data-grid-scroll .table-control-cell .select-visible-button[aria-pressed="true"]::after,
.data-grid-scroll .table-control-cell .select-visible-button[aria-checked="true"]::after {
  opacity: 1 !important;
  transform: rotate(-45deg) scale(1) !important;
}

.row-select-button:focus-visible,
.data-grid-scroll .table-control-cell .row-select-button:focus-visible,
.data-grid-scroll .table-control-cell .select-visible-button:focus-visible {
  border-color: var(--ring, #a1a1aa) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring, #a1a1aa) 38%, transparent) !important;
}

.row-select-button:disabled,
.data-grid-scroll .table-control-cell .row-select-button:disabled,
.data-grid-scroll .table-control-cell .select-visible-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.library-panel .item-list > .item-row .select-cell.table-control-cell .row-select-button,
.item-list > .item-row .select-cell.table-control-cell .row-select-button,
.data-grid-scroll > .item-list > .item-row .row-select-button,
.data-grid-scroll > .item-list > .item-row > .table-control-cell .row-select-button {
  border: 1px solid var(--input, #d4d4d8) !important;
  background: var(--background, #ffffff) !important;
  color: transparent !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
}

.data-grid-scroll > .item-list > .item-row.is-selected > .table-control-cell .row-select-button,
.data-grid-scroll > .item-list > .item-row.selected > .table-control-cell .row-select-button,
.data-grid-scroll > .item-list > .item-row.active > .table-control-cell .row-select-button,
.data-grid-scroll > .item-list > .item-row.selected-for-download > .table-control-cell .row-select-button {
  border: 1px solid var(--input, #d4d4d8) !important;
  background: var(--background, #ffffff) !important;
  color: transparent !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
}

.library-panel .item-list > .item-row .select-cell.table-control-cell .row-select-button[aria-pressed="true"],
.library-panel .item-list > .item-row .select-cell.table-control-cell .row-select-button[aria-checked="true"],
.item-list > .item-row .select-cell.table-control-cell .row-select-button[aria-pressed="true"],
.item-list > .item-row .select-cell.table-control-cell .row-select-button[aria-checked="true"],
.data-grid-scroll > .item-list > .item-row .row-select-button[aria-pressed="true"],
.data-grid-scroll > .item-list > .item-row .row-select-button[aria-checked="true"],
.data-grid-scroll > .item-list > .item-row.is-selected > .table-control-cell .row-select-button[aria-pressed="true"],
.data-grid-scroll > .item-list > .item-row.is-selected > .table-control-cell .row-select-button[aria-checked="true"],
.data-grid-scroll > .item-list > .item-row.selected > .table-control-cell .row-select-button[aria-pressed="true"],
.data-grid-scroll > .item-list > .item-row.selected > .table-control-cell .row-select-button[aria-checked="true"],
.data-grid-scroll > .item-list > .item-row.active > .table-control-cell .row-select-button[aria-pressed="true"],
.data-grid-scroll > .item-list > .item-row.active > .table-control-cell .row-select-button[aria-checked="true"],
.data-grid-scroll > .item-list > .item-row.selected-for-download > .table-control-cell .row-select-button[aria-pressed="true"],
.data-grid-scroll > .item-list > .item-row.selected-for-download > .table-control-cell .row-select-button[aria-checked="true"] {
  border: 1px solid var(--primary, #18181b) !important;
  background: var(--primary, #18181b) !important;
  color: var(--primary-foreground, #fafafa) !important;
}


/* =========================================================
   USER FIX: Data Health widget zoom / resize stability
   Keeps the gauge text inside the ring and makes the legend
   respond to the widget width instead of the browser viewport.
   ========================================================= */
.data-health-sales-widget {
  container-type: inline-size;
  min-width: 0;
}

.data-health-sales-header {
  min-width: 0;
}

.data-health-sales-header h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(18px, 7cqw, 34px);
}

.data-health-sales-body {
  min-width: 0;
  overflow: hidden;
}

.data-health-sales-gauge {
  container-type: inline-size;
  width: clamp(170px, 58cqw, 430px);
  max-width: calc(100% - 16px);
}

.dashboard-widget-small.data-health-sales-widget .data-health-sales-gauge {
  width: clamp(150px, 64cqw, 330px);
}

.dashboard-widget-wide.data-health-sales-widget .data-health-sales-gauge,
.dashboard-widget-large.data-health-sales-widget .data-health-sales-gauge {
  width: clamp(210px, 38cqw, 500px);
}

.data-health-sales-center {
  inset: 20%;
  gap: clamp(2px, 1.4cqw, 7px);
  overflow: visible;
}

.data-health-sales-icon {
  width: clamp(30px, 19cqw, 68px);
  margin-bottom: clamp(1px, 2cqw, 8px);
}

.data-health-sales-center .data-health-sales-score,
.data-health-sales-center strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  color: #2f3c48;
  font-size: clamp(32px, 25cqw, 74px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.07em;
  white-space: nowrap;
}

.data-health-sales-score-percent {
  margin-left: 0.03em;
  font-size: 0.62em;
  letter-spacing: -0.04em;
}

.data-health-sales-center > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5c6670;
  font-size: clamp(15px, 10cqw, 34px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.data-health-sales-legend {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2.2cqw, 18px) clamp(12px, 4cqw, 28px);
  max-width: 100%;
  font-size: clamp(12px, 3.3cqw, 18px);
  line-height: 1.15;
}

.data-health-sales-legend span {
  min-width: 0;
  gap: clamp(7px, 1.6cqw, 12px);
}

.data-health-sales-legend i {
  width: clamp(10px, 3cqw, 18px);
  height: clamp(10px, 3cqw, 18px);
}

/* Menu 3 action groups: row-data actions stay separate from document-form actions. */
#placeholderForm > .form-actions.placeholder-form-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .row-data-actions {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

#placeholderForm > .form-actions.placeholder-form-actions .row-delete-action,
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action {
  min-height: 46px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #1f6f78 28%, var(--line, #d8e2ef));
  border-left: 4px solid #1f6f78;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fcfb, #eef7f6);
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-actions:not(:has(button:not([hidden]))) {
  display: none;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-action {
  min-width: 0 !important;
  min-height: 38px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-save-action {
  border-color: color-mix(in srgb, #188b5b 34%, #cbd5e1) !important;
  color: #0f5135 !important;
  background: #effaf5 !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-print-action {
  border-color: color-mix(in srgb, #8a5b16 34%, #cbd5e1) !important;
  color: #69420d !important;
  background: #fff8e8 !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-telegram-action {
  border-color: color-mix(in srgb, #2563eb 34%, #cbd5e1) !important;
  color: #1e3a8a !important;
  background: #eff6ff !important;
}

#placeholderForm > .form-actions.placeholder-form-actions .document-form-action:hover,
#placeholderForm > .form-actions.placeholder-form-actions .document-form-action:focus-visible {
  border-color: #1f6f78 !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.12) !important;
  outline: none !important;
}

@container (max-width: 420px) {
  .data-health-sales-widget {
    min-height: 390px;
  }

  .data-health-sales-header {
    min-height: 58px;
    padding: 18px 18px 0;
  }

  .data-health-sales-header h3 {
    font-size: clamp(18px, 8cqw, 26px);
  }

  .data-health-sales-body {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 6px 16px 24px;
  }

  .data-health-sales-gauge {
    width: clamp(150px, 70cqw, 260px);
  }

  .data-health-sales-legend {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    font-size: clamp(13px, 5cqw, 18px);
  }
}

@container (max-width: 280px) {
  .data-health-sales-widget {
    min-height: 360px;
  }

  .data-health-sales-header {
    padding: 16px 14px 0;
  }

  .data-health-sales-body {
    padding: 4px 12px 20px;
  }

  .data-health-sales-gauge {
    width: clamp(130px, 76cqw, 210px);
  }

  .data-health-sales-center {
    inset: 22%;
  }
}

/* =========================================================
   USER FIX: Sneat Growth widget spacing when zoomed out
   The full-width Growth card no longer leaves a small island
   of content in the middle of a very wide blank card.
   ========================================================= */
.sneat-growth-widget {
  container-type: inline-size !important;
  min-width: 0 !important;
}

.sneat-growth-body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Let the radial gauge scale safely by using one size variable. */
.sneat-growth-radial {
  --growth-ring-size: 230px;
  width: var(--growth-ring-size) !important;
  height: var(--growth-ring-size) !important;
}

.sneat-growth-segment {
  transform-origin: center calc(var(--growth-ring-size) / 2) !important;
  transform: translate(-50%, calc(var(--growth-ring-size) / -2)) rotate(var(--segment-angle)) !important;
}

/* Wide / large cards: use a balanced two-zone layout instead of huge empty spacing. */
.sneat-growth-widget.dashboard-widget-wide,
.sneat-growth-widget.dashboard-widget-large {
  min-height: clamp(340px, 28cqw, 460px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-body,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-body {
  min-height: clamp(340px, 28cqw, 460px) !important;
  max-width: min(980px, 100%) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, .9fr) minmax(260px, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "year year"
    "gauge caption"
    "gauge stats" !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: clamp(24px, 5cqw, 78px) !important;
  row-gap: clamp(8px, 1.4cqw, 18px) !important;
  padding: clamp(24px, 3.2cqw, 36px) clamp(28px, 4cqw, 46px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-year-control,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-year-control {
  grid-area: year !important;
  margin: 0 !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-radial,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-radial {
  grid-area: gauge !important;
  --growth-ring-size: clamp(210px, 22cqw, 280px);
  margin: 0 !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-center,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-center {
  margin-top: clamp(14px, 2.2cqw, 26px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-center strong,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-center strong {
  font-size: clamp(34px, 4.6cqw, 48px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-center span,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-center span {
  margin-top: clamp(8px, 1.2cqw, 14px) !important;
  font-size: clamp(16px, 2.1cqw, 22px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-caption,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-caption {
  grid-area: caption !important;
  align-self: end !important;
  width: min(100%, 430px) !important;
  margin: 0 !important;
  font-size: clamp(16px, 2.3cqw, 24px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-stats,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-stats {
  grid-area: stats !important;
  align-self: start !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: clamp(12px, 2cqw, 22px) 0 0 !important;
  justify-content: center !important;
  gap: clamp(18px, 3cqw, 34px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-icon,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-icon {
  width: clamp(40px, 4.5cqw, 54px) !important;
  height: clamp(40px, 4.5cqw, 54px) !important;
  font-size: clamp(22px, 3cqw, 31px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-stat small,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-stat small {
  font-size: clamp(14px, 1.9cqw, 20px) !important;
}

.sneat-growth-widget.dashboard-widget-wide .sneat-growth-stat strong,
.sneat-growth-widget.dashboard-widget-large .sneat-growth-stat strong {
  font-size: clamp(16px, 2.1cqw, 22px) !important;
}

/* Medium-width cards stay compact but avoid oversized gaps. */
@container (max-width: 680px) {
  .sneat-growth-widget.dashboard-widget-wide .sneat-growth-body,
  .sneat-growth-widget.dashboard-widget-large .sneat-growth-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 24px 18px 22px !important;
  }

  .sneat-growth-widget.dashboard-widget-wide .sneat-growth-year-control,
  .sneat-growth-widget.dashboard-widget-large .sneat-growth-year-control {
    margin: 0 0 18px !important;
  }

  .sneat-growth-widget.dashboard-widget-wide .sneat-growth-radial,
  .sneat-growth-widget.dashboard-widget-large .sneat-growth-radial {
    --growth-ring-size: clamp(180px, 52cqw, 230px);
    margin: 0 auto 8px !important;
  }

  .sneat-growth-widget.dashboard-widget-wide .sneat-growth-caption,
  .sneat-growth-widget.dashboard-widget-large .sneat-growth-caption {
    margin: 4px 0 22px !important;
    font-size: clamp(15px, 4cqw, 18px) !important;
  }

  .sneat-growth-widget.dashboard-widget-wide .sneat-growth-stats,
  .sneat-growth-widget.dashboard-widget-large .sneat-growth-stats {
    margin-top: auto !important;
    width: 100% !important;
    max-width: 300px !important;
    justify-content: space-between !important;
  }
}


/* =========================================================
   MENU 1 BODY ROW: FITTED MULTI-LINE DATA CELLS
   Long document values should wrap inside their row instead of
   being clipped into a single unreadable line.
   ========================================================= */
.data-grid-scroll > .item-list > .item-row.document-row-wrap {
  height: var(--document-row-height, 112px) !important;
  min-height: var(--document-row-height, 112px) !important;
  max-height: var(--document-row-height, 112px) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.data-grid-scroll > .item-list > .item-row.document-row-wrap > span,
.data-grid-scroll > .item-list > .item-row.document-row-wrap > div {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
  align-items: center !important;
  align-content: center !important;
}

.data-grid-scroll > .item-list > .item-row.document-row-wrap > .table-control-cell {
  min-height: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.data-grid-scroll > .item-list > .item-row.document-row-wrap .document-title-cell,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .item-title,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .item-title-line,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .item-title-line > span,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .legal-reference-cell,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .document-wrap-cell {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

.data-grid-scroll > .item-list > .item-row.document-row-wrap .item-title,
.data-grid-scroll > .item-list > .item-row.document-row-wrap .item-title-line {
  flex-direction: row !important;
  gap: 0 !important;
  width: 100% !important;
}


/* Resizable សម្គាល់ tag input field height */
.resizable-tag-field {
  position: relative;
  width: 100%;
  max-width: 100%;
  align-self: start;
}

.resizable-tag-field input {
  min-height: 32px;
  max-height: 180px;
  padding-right: 24px;
  padding-bottom: 8px;
}

.tag-field-resize-handle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  cursor: ns-resize;
  touch-action: none;
  opacity: 0.5;
  background:
    linear-gradient(0deg, transparent 0 28%, rgba(37, 99, 235, 0.58) 29% 39%, transparent 40% 58%, rgba(37, 99, 235, 0.38) 59% 69%, transparent 70%);
}

.resizable-tag-field:hover .tag-field-resize-handle,
.resizable-tag-field:focus-within .tag-field-resize-handle,
body.tag-field-resizing .tag-field-resize-handle {
  opacity: 1;
}

body.tag-field-resizing {
  cursor: ns-resize;
  user-select: none;
}

body.dark-theme .tag-field-resize-handle,
body.midnight-theme .tag-field-resize-handle,
body.deep-navy-theme .tag-field-resize-handle,
body.charcoal-theme .tag-field-resize-handle,
body.dark-emerald-theme .tag-field-resize-handle {
  background:
    linear-gradient(0deg, transparent 0 28%, rgba(125, 211, 252, 0.72) 29% 39%, transparent 40% 58%, rgba(125, 211, 252, 0.48) 59% 69%, transparent 70%);
}


/* Resizable right navigation/detail-panel wrapped text fields */
.detail-panel label.resizable-detail-field {
  position: relative;
  width: 100%;
  max-width: 100%;
  align-self: start;
}

.detail-panel input.right-detail-wrap-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.detail-panel label.resizable-detail-field > textarea,
.detail-panel textarea.right-detail-wrap-textarea {
  width: 100%;
  min-height: 38px;
  max-height: 260px;
  padding-right: 26px;
  padding-bottom: 8px;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  resize: none;
  font-family: inherit;
}

.detail-field-resize-handle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  cursor: ns-resize;
  touch-action: none;
  opacity: 0.45;
  z-index: 2;
  background:
    linear-gradient(0deg, transparent 0 28%, rgba(37, 99, 235, 0.58) 29% 39%, transparent 40% 58%, rgba(37, 99, 235, 0.38) 59% 69%, transparent 70%);
}

.detail-panel label.resizable-detail-field:hover .detail-field-resize-handle,
.detail-panel label.resizable-detail-field:focus-within .detail-field-resize-handle,
body.detail-field-resizing .detail-field-resize-handle {
  opacity: 1;
}

body.detail-field-resizing {
  cursor: ns-resize;
  user-select: none;
}

body.dark-theme .detail-field-resize-handle,
body.midnight-theme .detail-field-resize-handle,
body.deep-navy-theme .detail-field-resize-handle,
body.charcoal-theme .detail-field-resize-handle,
body.dark-emerald-theme .detail-field-resize-handle {
  background:
    linear-gradient(0deg, transparent 0 28%, rgba(125, 211, 252, 0.72) 29% 39%, transparent 40% 58%, rgba(125, 211, 252, 0.48) 59% 69%, transparent 70%);
}


/* =========================================================
   USER UPDATE: Zoom-safe floating buttons on CURRENT CODE
   - Shrinks floating buttons when browser/Electron zoom increases
   - Keeps snap/grid/lock positions inside the visible viewport
   ========================================================= */
:root {
  --floating-button-scale: 1;
  --floating-button-base-width: 42px;
  --floating-button-base-height: 40px;
  --floating-button-base-inner: 28px;
  --floating-button-base-badge: 12px;
}

.floating-action-button,
.floating-settings-btn {
  width: calc(var(--floating-button-base-width) * var(--floating-button-scale)) !important;
  height: calc(var(--floating-button-base-height) * var(--floating-button-scale)) !important;
  min-width: calc(var(--floating-button-base-width) * var(--floating-button-scale)) !important;
  max-width: calc(var(--floating-button-base-width) * var(--floating-button-scale)) !important;
  border-radius: calc(8px * var(--floating-button-scale)) 0 0 calc(8px * var(--floating-button-scale)) !important;
}

.floating-edge-snap-button.is-snapped-left,
.floating-settings-btn.is-snapped-left {
  border-radius: 0 calc(8px * var(--floating-button-scale)) calc(8px * var(--floating-button-scale)) 0 !important;
}

.floating-edge-snap-button.is-snapped-right,
.floating-settings-btn.is-snapped-right {
  border-radius: calc(8px * var(--floating-button-scale)) 0 0 calc(8px * var(--floating-button-scale)) !important;
}

.floating-edge-snap-button.is-snapped-top,
.floating-settings-btn.is-snapped-top {
  border-radius: 0 0 calc(8px * var(--floating-button-scale)) calc(8px * var(--floating-button-scale)) !important;
}

.floating-edge-snap-button.is-snapped-bottom,
.floating-settings-btn.is-snapped-bottom {
  border-radius: calc(8px * var(--floating-button-scale)) calc(8px * var(--floating-button-scale)) 0 0 !important;
}

.floating-download-gif-wrap,
.floating-copy-cite-icon-wrap,
.floating-copy-cite-gif-wrap,
.floating-print-gif-wrap,
.floating-settings-gif-wrap {
  width: calc(var(--floating-button-base-inner) * var(--floating-button-scale)) !important;
  height: calc(var(--floating-button-base-inner) * var(--floating-button-scale)) !important;
}

.floating-download-gif,
.floating-copy-cite-icon,
.floating-copy-cite-gif,
.floating-print-gif,
.floating-settings-gif {
  width: calc(var(--floating-button-base-inner) * var(--floating-button-scale)) !important;
  height: calc(var(--floating-button-base-inner) * var(--floating-button-scale)) !important;
  border-radius: calc(8px * var(--floating-button-scale)) !important;
}

.floating-download-gif-badge,
.floating-copy-cite-icon-badge,
.floating-copy-cite-gif-badge,
.floating-print-gif-badge,
.floating-settings-gif-badge {
  right: calc(-5px * var(--floating-button-scale)) !important;
  bottom: calc(-5px * var(--floating-button-scale)) !important;
  min-width: calc(var(--floating-button-base-badge) * var(--floating-button-scale)) !important;
  height: calc(var(--floating-button-base-badge) * var(--floating-button-scale)) !important;
  padding: 0 calc(3px * var(--floating-button-scale)) !important;
  font-size: calc(8px * var(--floating-button-scale)) !important;
}

.floating-action-icon,
.floating-theme-icon {
  width: calc(22px * var(--floating-button-scale)) !important;
  height: calc(22px * var(--floating-button-scale)) !important;
}

body.floating-buttons-zoom-shrink .floating-edge-snap-button {
  box-shadow:
    0 calc(6px * var(--floating-button-scale)) calc(18px * var(--floating-button-scale)) color-mix(in srgb, var(--accent, #03a9f4) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}


/* MENU 3: premium status pill style */
.task-status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 8px 10px;
}

.task-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 60px;
  padding: 10px 30px;
  border-radius: 18px;
  border: 1px solid rgba(126, 130, 244, 0.08);
  background: linear-gradient(180deg, #e8e6fb 0%, #dddaf6 100%);
  color: #666af6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}

.task-status-pill-pending,
.task-status-pill-ongoing,
.task-status-pill-completed,
.task-status-pill-default {
  color: #666af6;
  background: linear-gradient(180deg, #e8e6fb 0%, #dddaf6 100%);
}


/* MENU 4 progress bar column */
.progress-table-header > span,
.progress-filter-row > span,
.progress-row > span {
  overflow: visible;
}

.progress-row {
  min-height: 92px !important;
}

.progress-row > span {
  min-height: 72px;
}

.progress-completion-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 0 18px;
}

.progress-completion-track {
  position: relative;
  flex: 1 1 auto;
  max-width: 450px;
  min-width: 180px;
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceff4;
}

.progress-completion-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.progress-completion-cell.is-risk .progress-completion-fill {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}

.progress-completion-cell.is-warning .progress-completion-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #facc15 100%);
}

.progress-completion-cell.is-steady .progress-completion-fill {
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
}

.progress-completion-cell.is-healthy .progress-completion-fill {
  background: linear-gradient(90deg, #059669 0%, #22c55e 100%);
}

.progress-completion-percent {
  flex: 0 0 auto;
  min-width: 76px;
  color: #6b7280;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: right;
}

.progress-table-header > span:last-child {
  justify-content: center;
  text-align: center;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.06em;
}


/* USER UPDATE: custom theme fill color picker */
.theme-selector-wrap {
  position: relative;
}

.theme-custom-color-button {
  --custom-theme-color: var(--accent);
  position: relative;
  display: inline-grid;
  grid-template-columns: 18px 10px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 40px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--custom-theme-color);
  background: var(--panel);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}

.theme-custom-color-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.theme-custom-color-preview {
  display: inline-block;
  width: 9px;
  height: 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: var(--custom-theme-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.theme-custom-color-button:hover,
.theme-custom-color-button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.theme-custom-color-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

body.custom-primary-color-theme .primary-action,
body.custom-primary-color-theme .nav-icon,
body.custom-primary-color-theme .table-add-button,
body.custom-primary-color-theme .floating-action-button {
  background: var(--accent);
}

body.custom-primary-color-theme .primary-action:hover {
  background: var(--accent-strong);
}

/* Menu 3 configurable A4 document forms */
.menu3-document-form-settings {
  display: grid;
  gap: 12px;
}

.settings-help-text {
  margin: 0;
  color: #667085;
  line-height: 1.5;
}

.menu3-document-form-list {
  display: grid;
  gap: 14px;
}

.menu3-document-form-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #fff;
}

.menu3-document-form-card header,
.menu3-document-form-actions,
.menu3-document-form-header,
.menu3-document-form-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.menu3-document-form-card header span {
  padding: 3px 9px;
  border-radius: 999px;
  color: #1d4f7a;
  background: #e8f2fb;
  font-size: 12px;
  font-weight: 700;
}

.menu3-document-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu3-document-form-card textarea {
  min-height: 120px;
  resize: vertical;
  font-family: Consolas, "Khmer OS Siemreap", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.menu3-document-form-enabled {
  align-self: end;
  min-height: 40px;
}

.menu3-document-form-dialog {
  width: min(1180px, calc(100vw - 40px));
  max-width: none;
  height: min(940px, calc(100vh - 36px));
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f2f5f9;
  overflow: hidden;
}

.menu3-document-form-dialog::backdrop {
  background: rgba(15, 23, 42, 0.36);
}

.menu3-document-form-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.menu3-document-form-header {
  padding: 14px 18px;
  border-bottom: 1px solid #d8e2ef;
  background: #fff;
}

.menu3-document-form-header h2 {
  margin: 0;
  font-size: 20px;
}

.menu3-document-form-header-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.menu3-document-form-header-actions select {
  min-width: 220px;
}

.menu3-document-form-designer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.menu3-document-form-dialog .menu3-document-form-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px 14px;
  border-bottom: 1px solid #d8e2ef;
  background: #fff;
}

.menu3-document-form-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.menu3-document-form-control-wide {
  grid-column: span 2;
}

.menu3-document-form-control input,
.menu3-document-form-control select,
.menu3-reference-search {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
}

.menu3-document-form-control input,
.menu3-document-form-control select {
  padding: 6px 8px;
}

.menu3-document-form-color input[type="color"] {
  padding: 3px;
}

.menu3-document-form-reset-design {
  min-height: 36px;
  align-self: end;
}

.menu3-document-form-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-width: 0;
  min-height: 0;
}

.menu3-document-form-preview {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.menu3-document-form-reference-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-left: 1px solid #d8e2ef;
  background: #fff;
  overflow: hidden;
}

.menu3-document-form-reference-panel header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.menu3-document-form-reference-panel strong {
  display: block;
  color: #111827;
}

.menu3-document-form-reference-panel small {
  display: block;
  margin-top: 2px;
  color: #667085;
  line-height: 1.35;
}

.menu3-reference-search {
  padding: 7px 10px;
}

.menu3-reference-grid {
  min-height: 0;
  overflow: auto;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
}

.menu3-reference-grid table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.menu3-reference-grid th,
.menu3-reference-grid td {
  padding: 8px;
  border-bottom: 1px solid #e7edf5;
  text-align: left;
  vertical-align: top;
}

.menu3-reference-grid th {
  width: 42%;
  color: #111827;
  background: #f8fafc;
}

.menu3-reference-grid td:nth-child(2) {
  width: 40%;
  color: #475467;
  overflow-wrap: anywhere;
}

.menu3-reference-grid th span,
.menu3-reference-grid th small {
  display: block;
  overflow-wrap: anywhere;
}

.menu3-reference-grid th small {
  margin-top: 3px;
  color: #667085;
  font-weight: 600;
}

.menu3-reference-grid tr.is-selected th,
.menu3-reference-grid tr.is-selected td {
  background: #eef5ff;
}

.menu3-reference-grid-use {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #bcd3ff;
  border-radius: 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-weight: 700;
  cursor: pointer;
}

.menu3-reference-grid-empty {
  padding: 14px;
  color: #667085;
  font-size: 13px;
}

.specific-form-reference-select.is-active-reference {
  outline: 2px solid rgba(37, 99, 235, 0.34) !important;
  outline-offset: 1px !important;
}

.menu3-document-form-row-table {
  width: 100%;
  border-collapse: collapse;
}

.menu3-document-form-row-table th,
.menu3-document-form-row-table td {
  border: 1px solid #d7dee8;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.menu3-document-form-row-table th {
  width: 34%;
  background: #f8fafc;
}

@media (max-width: 900px) {
  .menu3-document-form-grid {
    grid-template-columns: 1fr;
  }

  .menu3-document-form-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .menu3-document-form-workspace {
    grid-template-columns: 1fr;
  }

  .menu3-document-form-reference-panel {
    max-height: 280px;
    border-top: 1px solid #d8e2ef;
    border-left: 0;
  }

  .menu3-document-form-control-wide {
    grid-column: span 1;
  }
}

/* Right detail-panel data row actions: English commands use a refined serif style. */
#itemForm > .form-actions,
#inspectorForm > .form-actions,
#placeholderForm > .form-actions.placeholder-form-actions .row-data-actions {
  gap: 14px !important;
}

#itemForm > .form-actions > #deleteButton,
#inspectorForm > .form-actions > #deleteInspectorButton,
#placeholderForm > .form-actions.placeholder-form-actions #deleteWorkItemButton,
#itemForm > .form-actions > .primary-action[type="submit"],
#inspectorForm > .form-actions > .primary-action[type="submit"],
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action {
  min-height: 64px !important;
  border-radius: 8px !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease !important;
}

#itemForm > .form-actions > #deleteButton,
#inspectorForm > .form-actions > #deleteInspectorButton,
#placeholderForm > .form-actions.placeholder-form-actions #deleteWorkItemButton {
  border: 1px solid color-mix(in srgb, #cbd5e1 82%, #1e3a5f) !important;
  color: #1f2937 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#itemForm > .form-actions > .primary-action[type="submit"],
#inspectorForm > .form-actions > .primary-action[type="submit"],
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action {
  border: 1px solid #2c3b52 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #34435a 0%, #243249 100%) !important;
  box-shadow:
    0 12px 28px rgba(31, 45, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#itemForm > .form-actions > #deleteButton:hover:not(:disabled),
#inspectorForm > .form-actions > #deleteInspectorButton:hover:not(:disabled),
#placeholderForm > .form-actions.placeholder-form-actions #deleteWorkItemButton:hover:not(:disabled),
#itemForm > .form-actions > .primary-action[type="submit"]:hover:not(:disabled),
#inspectorForm > .form-actions > .primary-action[type="submit"]:hover:not(:disabled),
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#itemForm > .form-actions > #deleteButton:disabled,
#inspectorForm > .form-actions > #deleteInspectorButton:disabled,
#placeholderForm > .form-actions.placeholder-form-actions #deleteWorkItemButton:disabled,
#itemForm > .form-actions > .primary-action[type="submit"]:disabled,
#inspectorForm > .form-actions > .primary-action[type="submit"]:disabled,
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action:disabled {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
  transform: none !important;
  box-shadow: none !important;
}

#itemForm > .form-actions > #deleteButton:focus-visible,
#inspectorForm > .form-actions > #deleteInspectorButton:focus-visible,
#placeholderForm > .form-actions.placeholder-form-actions #deleteWorkItemButton:focus-visible,
#itemForm > .form-actions > .primary-action[type="submit"]:focus-visible,
#inspectorForm > .form-actions > .primary-action[type="submit"]:focus-visible,
#placeholderForm > .form-actions.placeholder-form-actions .row-save-action:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.18),
    0 14px 30px rgba(15, 23, 42, 0.13) !important;
}

body.view-only-admin .detail-panel,
body.view-only-admin .resize-handle {
  display: none !important;
}

body.view-only-admin .content-grid:not(.dashboard-mode) {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.view-only-admin .table-add-button,
body.view-only-admin .table-add-menu,
body.view-only-admin #clearSearchButton,
body.view-only-admin #deleteButton,
body.view-only-admin #deleteInspectorButton,
body.view-only-admin #deleteWorkItemButton,
body.view-only-admin #detailImportExcelButton,
body.view-only-admin #inspectorImportExcelButton,
body.view-only-admin #placeholderImportExcelButton,
body.view-only-admin #chooseAttachmentButton,
body.view-only-admin #removeAttachmentButton,
body.view-only-admin #chooseInspectorAttachmentButton,
body.view-only-admin #removeInspectorAttachmentButton,
body.view-only-admin #chooseInspectorPhotoButton,
body.view-only-admin #removeInspectorPhotoButton,
body.view-only-admin #choosePlaceholderAttachmentButton,
body.view-only-admin #removePlaceholderAttachmentButton,
body.view-only-admin #taskSupportDocumentsButton,
body.view-only-admin #taskCheckProgressButton,
body.view-only-admin #taskSubActionsButton,
body.view-only-admin #taskSaveAssignmentLetterButton,
body.view-only-admin #taskPrintAssignmentLetterButton,
body.view-only-admin #taskSendToTelegramButton,
body.view-only-admin #starButton,
body.view-only-admin #inspectorStarButton,
body.view-only-admin #taskStarButton,
body.view-only-admin .pin-button,
body.view-only-admin .row-save-action,
body.view-only-admin .row-delete-action,
body.view-only-admin input[type="file"] {
  display: none !important;
}

/* Sidebar English/Latin text uses Times New Roman while Khmer falls back safely. */
.sidebar .nav-menu-content .menu-text,
.sidebar .nav-menu-content .dashboard-nav-item,
.sidebar .sidebar-collapsible-count,
.sidebar .system-collapsible .sidebar-collapsible-title,
.sidebar .system-collapsible .sidebar-collapsible-count,
.sidebar .system-utilization-label,
.sidebar .system-utilization-value,
.sidebar .save-status-text,
.sidebar .save-status-percent,
.sidebar .system-utilization-panel #saveStatusBar .save-status-text,
.sidebar .system-utilization-panel #saveStatusBar .save-status-percent {
  font-family: "Times New Roman", "Khmer OS Siemreap", "Noto Serif Khmer", serif !important;
  letter-spacing: 0 !important;
}

.sidebar .system-collapsible .sidebar-collapsible-title,
.sidebar .system-utilization-label,
.sidebar .save-status-text,
.sidebar .system-utilization-panel #saveStatusBar .save-status-text {
  text-transform: uppercase !important;
}

/* USER UPDATE: Sidebar borders must connect with each other as one stack. */
.sidebar > .nav-section[aria-label="Collections"],
.sidebar > .tag-panel,
.sidebar > .system-utilization-panel,
.sidebar > #systemUtilizationPanel {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidebar > .nav-section[aria-label="Collections"] {
  display: grid !important;
  gap: 0 !important;
}

.sidebar > .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible,
.sidebar > .tag-panel > .sidebar-collapsible.tag-collapsible,
.sidebar > .system-utilization-panel > .sidebar-collapsible.system-collapsible,
.sidebar > #systemUtilizationPanel > .sidebar-collapsible.system-collapsible {
  margin: 0 !important;
  border-radius: 0 !important;
}

.sidebar > .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible + .nav-menu-group.sidebar-collapsible,
.sidebar > .tag-panel,
.sidebar > .system-utilization-panel,
.sidebar > #systemUtilizationPanel {
  margin-top: -1px !important;
}

.sidebar > .nav-section[aria-label="Collections"] > .nav-menu-group.sidebar-collapsible:first-child {
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

.sidebar > .system-utilization-panel > .sidebar-collapsible.system-collapsible,
.sidebar > #systemUtilizationPanel > .sidebar-collapsible.system-collapsible {
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* MENU 4 professional visual refinement */
.library-panel.work-mode .progress-dashboard {
  border: 1px solid #d6dee9 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.library-panel.work-mode .progress-top-band {
  min-height: 50px !important;
  padding: 8px 12px !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #f7fafd 0%, #eef4fb 100%) !important;
  border-bottom: 1px solid #dbe4ef !important;
  color: #344054 !important;
  white-space: nowrap;
}

.library-panel.work-mode .progress-total-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #244466 0%, #1e3a5f 100%);
  color: #ffffff;
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif;
  font-size: 13px;
  font-weight: 700;
}

.library-panel.work-mode .progress-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 12px;
  border: 1px solid #d5deea;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
}

.library-panel.work-mode button.progress-kpi-chip {
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.library-panel.work-mode button.progress-kpi-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.library-panel.work-mode button.progress-kpi-chip:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.library-panel.work-mode .progress-kpi-chip strong {
  color: #0f172a;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.library-panel.work-mode .progress-kpi-chip small {
  color: #475569;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.library-panel.work-mode .progress-kpi-chip.is-pending strong { color: #dc2626; }
.library-panel.work-mode .progress-kpi-chip.is-ongoing strong { color: #2563eb; }
.library-panel.work-mode .progress-kpi-chip.is-completed strong { color: #16a34a; }
.library-panel.work-mode .progress-kpi-chip.is-hours strong { color: #0f766e; }
.library-panel.work-mode .progress-kpi-chip.is-days strong { color: #2563eb; }
.library-panel.work-mode .progress-kpi-chip.is-total strong { color: #0f172a; }

.library-panel.work-mode .progress-table-header {
  min-height: 46px !important;
  background: #f7fafd !important;
  border-bottom: 1px solid #dbe4ef !important;
}

.library-panel.work-mode .progress-table-header > span {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.library-panel.work-mode .progress-filter-row {
  background: #fcfdff !important;
  border-bottom: 1px solid #e5ebf3 !important;
}

.library-panel.work-mode .progress-filter-row input {
  min-height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #d5deea !important;
  background: #ffffff !important;
}

.library-panel.work-mode .progress-row {
  min-height: 50px !important;
  border-bottom: 1px solid #e9eef5 !important;
  background: #ffffff !important;
}

.library-panel.work-mode .progress-row:nth-child(even) {
  background: #fbfcff !important;
}

.library-panel.work-mode .progress-row.active {
  background: #edf5ff !important;
}

.library-panel.work-mode .progress-row > span {
  min-height: 38px !important;
  padding: 5px 10px !important;
}

.library-panel.work-mode .progress-row .progress-name-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.library-panel.work-mode .progress-row .progress-col-pending,
.library-panel.work-mode .progress-row .progress-col-ongoing,
.library-panel.work-mode .progress-row .progress-col-completed,
.library-panel.work-mode .progress-row .progress-col-workhours,
.library-panel.work-mode .progress-row .progress-col-days {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.library-panel.work-mode .progress-completion-cell {
  gap: 10px !important;
  padding: 0 14px !important;
  min-height: 38px !important;
}

.library-panel.work-mode .progress-completion-track {
  height: 16px !important;
  min-width: 180px !important;
  max-width: 360px !important;
  background: #e8edf4 !important;
}

.library-panel.work-mode .progress-completion-fill {
  background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%) !important;
}

.library-panel.work-mode .progress-completion-cell.is-risk .progress-completion-fill {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%) !important;
}

.library-panel.work-mode .progress-completion-cell.is-warning .progress-completion-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #facc15 100%) !important;
}

.library-panel.work-mode .progress-completion-cell.is-steady .progress-completion-fill {
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%) !important;
}

.library-panel.work-mode .progress-completion-cell.is-healthy .progress-completion-fill {
  background: linear-gradient(90deg, #059669 0%, #22c55e 100%) !important;
}

.library-panel.work-mode .progress-completion-percent {
  min-width: 60px !important;
  color: #334155 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.library-panel.work-mode .progress-completion-cell.is-risk .progress-completion-percent {
  color: #b91c1c !important;
}

.library-panel.work-mode .progress-completion-cell.is-warning .progress-completion-percent {
  color: #b45309 !important;
}

.library-panel.work-mode .progress-completion-cell.is-steady .progress-completion-percent {
  color: #1d4ed8 !important;
}

.library-panel.work-mode .progress-completion-cell.is-healthy .progress-completion-percent {
  color: #047857 !important;
}

.all-documents-dialog {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  height: min(760px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  margin: 0 !important;
  border: 0;
  border-radius: 28px;
  padding: 0;
  color: #172033;
  background: #f8fbff;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
}

.all-documents-dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(10px);
}

@media (max-width: 720px) {
  .all-documents-dialog {
    width: calc(100vw - 24px);
    height: min(760px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
  }
}

.all-documents-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.all-documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-bottom: 1px solid #d9e4f1;
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
}

.all-documents-header h2 {
  margin: 4px 0;
  font-size: 28px;
}

.all-documents-header p {
  margin: 0;
  color: #60718a;
}

.all-documents-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.all-documents-body {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 24px;
}

.all-documents-table-wrap {
  overflow: auto;
  border: 1px solid #d8e2ee;
  border-radius: 18px;
  background: #ffffff;
}

.all-documents-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.all-documents-table th,
.all-documents-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5edf5;
  vertical-align: middle;
  text-align: left;
}

.all-documents-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e8f2fb;
  color: #123b63;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.all-documents-table td:first-child strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-documents-table td:first-child span {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.all-documents-name-input {
  width: min(280px, 100%);
  min-height: 42px;
  border: 1px solid #cfdbea;
  border-radius: 12px;
  padding: 8px 12px;
  color: #172033;
  background: #ffffff;
}

.all-documents-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.all-documents-status.is-ready {
  color: #047857;
  background: #d1fae5;
}

.all-documents-status.is-missing {
  color: #b91c1c;
  background: #fee2e2;
}

.all-documents-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.all-documents-empty,
.all-documents-loading {
  border: 1px solid #d8e2ee;
  border-radius: 18px;
  padding: 28px;
  color: #475569;
  background: #ffffff;
}

.all-documents-empty strong,
.all-documents-loading {
  color: #172033;
}

.all-documents-empty.is-error {
  border-color: #fecaca;
  background: #fff7f7;
}

body.dark-theme .all-documents-dialog,
html.dark-theme .all-documents-dialog {
  color: #e5eef8;
  background: #111827;
}

body.dark-theme .all-documents-header,
html.dark-theme .all-documents-header {
  border-bottom-color: #253449;
  background: linear-gradient(135deg, #172033 0%, #132337 100%);
}

body.dark-theme .all-documents-header p,
html.dark-theme .all-documents-header p,
body.dark-theme .all-documents-table td:first-child span,
html.dark-theme .all-documents-table td:first-child span {
  color: #9fb0c7;
}

body.dark-theme .all-documents-table-wrap,
html.dark-theme .all-documents-table-wrap,
body.dark-theme .all-documents-empty,
html.dark-theme .all-documents-empty,
body.dark-theme .all-documents-loading,
html.dark-theme .all-documents-loading {
  border-color: #253449;
  background: #0f172a;
}

body.dark-theme .all-documents-table th,
html.dark-theme .all-documents-table th {
  color: #dbeafe;
  background: #1e293b;
}

body.dark-theme .all-documents-table th,
html.dark-theme .all-documents-table th,
body.dark-theme .all-documents-table td,
html.dark-theme .all-documents-table td {
  border-bottom-color: #253449;
}

body.dark-theme .all-documents-name-input,
html.dark-theme .all-documents-name-input {
  color: #e5eef8;
  border-color: #334155;
  background: #111827;
}


/* Final dashboard and overflow guard layers are loaded from index.html:
   - styles-part-10-dashboard-widget-refresh.css
   - styles-part-11-overflow-guards.css */
/* Global Search virtual menu */
.content-grid.dashboard-mode.global-search-mode .library-panel {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  border-right: 1px solid var(--line);
  border-radius: 22px;
  overflow: auto;
}

.content-grid.dashboard-mode.global-search-mode {
  grid-template-columns: minmax(0, 1fr) !important;
}

.global-search-shell {
  min-height: 100%;
  padding: 22px;
  display: grid;
  gap: 18px;
  color: var(--text, #172033);
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.9));
}

.global-search-hero,
.global-search-panel,
.global-search-kpi,
.global-search-insight-card,
.global-search-result-item {
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.global-search-hero {
  border-radius: 28px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.global-search-eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.global-search-hero h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.global-search-hero p {
  margin: 10px 0 0;
  max-width: 860px;
  color: #64748b;
  font-size: 1.02rem;
}

.global-search-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.global-search-hero-meta span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
  font-weight: 800;
}

.global-search-panel {
  border-radius: 24px;
  padding: 18px;
}

.global-search-panel h3 {
  margin: 0 0 14px;
  color: #172033;
  font-size: 1.35rem;
}

.global-search-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.global-search-main-input,
.global-search-filter {
  display: grid;
  gap: 7px;
}

.global-search-main-input span,
.global-search-filter span {
  color: #475569;
  font-size: 0.82rem;
  font-weight: 800;
}

.global-search-main-input input,
.global-search-filter input,
.global-search-filter select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(148, 163, 184, 0.48);
  border-radius: 15px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #172033;
  font: inherit;
  outline: none;
}

.global-search-main-input input:focus,
.global-search-filter input:focus,
.global-search-filter select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.global-search-main-row button,
.global-search-pager button,
.global-search-result-item > button,
.global-search-insight-head button,
.global-search-section-head > button,
.global-search-attention-item button,
.global-search-report-actions button,
.global-search-report-card .global-search-section-head button {
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  padding: 0 16px;
  background: #0f2d4f;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.global-search-pager button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.global-search-filter-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

.global-search-message {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  color: #0f2d4f;
  background: rgba(219, 234, 254, 0.75);
  font-weight: 700;
}

.global-search-message.warning {
  color: #92400e;
  background: rgba(254, 243, 199, 0.85);
}

.global-search-message.loading {
  color: #1d4ed8;
}

.global-search-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
}

.global-search-kpi {
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 8px;
}

.global-search-kpi span {
  color: #64748b;
  font-size: 0.83rem;
  font-weight: 800;
  text-transform: uppercase;
}

.global-search-kpi strong {
  color: #111827;
  font-size: 2rem;
  line-height: 1;
}

.global-search-kpi.tone-blue { border-left: 6px solid #2563eb; }
.global-search-kpi.tone-purple { border-left: 6px solid #7c3aed; }
.global-search-kpi.tone-orange { border-left: 6px solid #f97316; }
.global-search-kpi.tone-green { border-left: 6px solid #16a34a; }
.global-search-kpi.tone-navy { border-left: 6px solid #0f2d4f; }

.global-search-smart-grid {
  display: grid;
  gap: 16px;
}

.global-search-smart-summary {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 20px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.86));
}

.global-search-smart-summary strong,
.global-search-smart-list h4 {
  display: block;
  margin: 0 0 8px;
  color: #0f2d4f;
  font-size: 1rem;
  font-weight: 900;
}

.global-search-smart-summary p,
.global-search-smart-summary span,
.global-search-smart-list p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.global-search-smart-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.global-search-smart-card,
.global-search-smart-list {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.global-search-smart-card {
  padding: 14px;
  border-left: 5px solid #2563eb;
}

.global-search-smart-card span {
  display: block;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.global-search-smart-card strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 1.65rem;
  line-height: 1;
}

.global-search-smart-card.tone-green { border-left-color: #16a34a; }
.global-search-smart-card.tone-orange { border-left-color: #f97316; }
.global-search-smart-card.tone-red { border-left-color: #dc2626; }
.global-search-smart-card.tone-purple { border-left-color: #7c3aed; }
.global-search-smart-card.tone-navy { border-left-color: #0f2d4f; }

.global-search-smart-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.global-search-smart-columns.compact {
  align-items: stretch;
}

.global-search-smart-list {
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.global-search-attention-item {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-left: 5px solid #64748b;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: rgba(248, 250, 252, 0.9);
}

.global-search-attention-item strong {
  color: #172033;
  font-weight: 900;
}

.global-search-attention-item p {
  margin-top: 4px;
  font-size: 0.9rem;
}

.global-search-attention-item.severity-high { border-left-color: #dc2626; }
.global-search-attention-item.severity-medium { border-left-color: #f97316; }
.global-search-attention-item.severity-low { border-left-color: #2563eb; }

.global-search-smart-bar {
  display: grid;
  gap: 7px;
}

.global-search-smart-bar div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #475569;
  font-weight: 800;
}

.global-search-smart-bar i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.global-search-report-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
}

.global-search-report-card {
  width: min(880px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 26px;
  padding: 18px;
  display: grid;
  gap: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26);
}

.global-search-report-card textarea {
  width: 100%;
  min-height: 380px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 18px;
  padding: 14px;
  color: #172033;
  background: rgba(248, 250, 252, 0.92);
  font: 1rem/1.6 "Times New Roman", "Khmer OS Battambang", serif;
  resize: vertical;
}

.global-search-report-actions {
  display: flex;
  justify-content: flex-end;
}

.global-search-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.global-search-insight-card {
  border-radius: 22px;
  padding: 16px;
}

.global-search-insight-head,
.global-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.global-search-insight-head span {
  display: block;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.global-search-insight-head strong {
  font-size: 1.3rem;
}

.global-search-restricted,
.global-search-insight-empty,
.global-search-empty {
  padding: 14px;
  border-radius: 16px;
  color: #64748b;
  background: rgba(241, 245, 249, 0.88);
  font-weight: 700;
}

.global-search-restricted {
  margin-top: 12px;
  color: #92400e;
  background: rgba(254, 243, 199, 0.9);
}

.global-search-insight-metrics {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.global-search-insight-metrics span,
.global-search-profile-fields span,
.global-search-result-fields span {
  border-radius: 14px;
  padding: 10px;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
}

.global-search-insight-metrics b,
.global-search-profile-fields b,
.global-search-result-fields b {
  display: block;
  color: #0f172a;
  font-size: 1.05rem;
}

.global-search-profile-fields,
.global-search-result-fields {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.global-search-timeline {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.global-search-timeline button {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  cursor: pointer;
}

.global-search-result-list {
  display: grid;
  gap: 12px;
}

.global-search-result-item {
  border-radius: 20px;
  padding: 14px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.global-search-result-type {
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-weight: 900;
  text-transform: capitalize;
}

.global-search-result-main strong {
  color: #111827;
  font-size: 1.1rem;
}

.global-search-result-main p,
.global-search-section-head p {
  margin: 5px 0 0;
  color: #64748b;
}

.global-search-result-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.global-search-result-meta span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.8);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
}

.global-search-source-highlight {
  outline: 4px solid rgba(37, 99, 235, 0.35) !important;
  outline-offset: -4px;
  background: rgba(219, 234, 254, 0.9) !important;
}

body.dark-mode .global-search-shell {
  color: #e5edf7;
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.18), transparent 34%),
    linear-gradient(135deg, #0f172a, #111827 45%, #0b1220);
}

body.dark-mode .global-search-hero,
body.dark-mode .global-search-panel,
body.dark-mode .global-search-kpi,
body.dark-mode .global-search-insight-card,
body.dark-mode .global-search-result-item,
body.dark-mode .global-search-smart-card,
body.dark-mode .global-search-smart-list,
body.dark-mode .global-search-report-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

body.dark-mode .global-search-panel h3,
body.dark-mode .global-search-kpi strong,
body.dark-mode .global-search-smart-card strong,
body.dark-mode .global-search-smart-summary strong,
body.dark-mode .global-search-smart-list h4,
body.dark-mode .global-search-attention-item strong,
body.dark-mode .global-search-insight-metrics b,
body.dark-mode .global-search-profile-fields b,
body.dark-mode .global-search-result-fields b,
body.dark-mode .global-search-result-main strong {
  color: #f8fafc;
}

body.dark-mode .global-search-hero p,
body.dark-mode .global-search-result-main p,
body.dark-mode .global-search-section-head p,
body.dark-mode .global-search-smart-summary p,
body.dark-mode .global-search-smart-summary span,
body.dark-mode .global-search-smart-list p,
body.dark-mode .global-search-smart-card span,
body.dark-mode .global-search-smart-bar div,
body.dark-mode .global-search-main-input span,
body.dark-mode .global-search-filter span {
  color: #a8b7cc;
}

body.dark-mode .global-search-main-input input,
body.dark-mode .global-search-filter input,
body.dark-mode .global-search-filter select,
body.dark-mode .global-search-smart-summary,
body.dark-mode .global-search-attention-item,
body.dark-mode .global-search-report-card textarea,
body.dark-mode .global-search-timeline button,
body.dark-mode .global-search-insight-metrics span,
body.dark-mode .global-search-profile-fields span,
body.dark-mode .global-search-result-fields span {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
}

@media (max-width: 1200px) {
  .global-search-filter-grid,
  .global-search-kpi-grid,
  .global-search-smart-overview,
  .global-search-smart-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .global-search-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .global-search-shell {
    padding: 12px;
  }

  .global-search-hero,
  .global-search-main-row,
  .global-search-result-item {
    grid-template-columns: 1fr;
  }

  .global-search-hero {
    display: grid;
  }

  .global-search-filter-grid,
  .global-search-kpi-grid,
  .global-search-smart-overview,
  .global-search-smart-columns,
  .global-search-attention-item,
  .global-search-insight-metrics,
  .global-search-profile-fields,
  .global-search-result-fields {
    grid-template-columns: 1fr;
  }

  .global-search-report-modal {
    padding: 10px;
  }

  .global-search-report-card textarea {
    min-height: 280px;
  }
}

.ai-decision-shell {
  min-height: 100%;
  padding: 18px;
  color: #172033;
  background:
    radial-gradient(circle at 12% 2%, rgba(59, 130, 246, 0.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(20, 184, 166, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.74));
}

.ai-decision-hero,
.ai-decision-panel,
.ai-decision-score,
.ai-decision-summary,
.ai-decision-card,
.ai-decision-records article,
.ai-decision-history-list article {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.ai-decision-hero {
  border-radius: 26px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.ai-decision-eyebrow,
.ai-decision-section-head span,
.ai-decision-summary span,
.ai-decision-score span,
.ai-decision-card span {
  display: block;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-decision-hero h2 {
  margin: 5px 0 6px;
  color: #0f172a;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
}

.ai-decision-hero p,
.ai-decision-summary p,
.ai-decision-card p,
.ai-decision-list p,
.ai-decision-records p,
.ai-decision-history-list p,
.ai-decision-empty {
  color: #64748b;
}

.ai-decision-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.ai-decision-hero-meta span,
.ai-decision-history-list small {
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(219, 234, 254, 0.82);
  color: #1d4ed8;
  font-weight: 900;
}

.ai-decision-panel {
  margin-top: 16px;
  border-radius: 24px;
  padding: 18px;
}

.ai-decision-panel h3 {
  margin: 0 0 12px;
  color: #0f172a;
}

.ai-decision-question {
  display: grid;
  gap: 8px;
}

.ai-decision-question span,
.ai-decision-filter span {
  color: #334155;
  font-weight: 900;
}

.ai-decision-question textarea,
.ai-decision-filter input,
.ai-decision-filter select,
.ai-decision-memo {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  color: #172033;
  outline: none;
}

.ai-decision-question textarea {
  min-height: 110px;
  padding: 15px 16px;
  resize: vertical;
  font-size: 1rem;
}

.ai-decision-filter-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-decision-filter {
  display: grid;
  gap: 6px;
}

.ai-decision-filter input,
.ai-decision-filter select {
  min-height: 44px;
  padding: 0 12px;
}

.ai-decision-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-decision-actions button,
.ai-decision-apply,
.ai-decision-panel button,
.ai-decision-records button,
.ai-decision-list-item button {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

.ai-decision-actions button:first-child,
.ai-decision-apply {
  border-color: transparent;
  background: linear-gradient(135deg, #1d4ed8, #14b8a6);
  color: #fff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22);
}

.ai-decision-actions button:disabled,
.ai-decision-apply:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ai-decision-result-actions {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.ai-decision-result-actions button {
  min-width: 150px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

.ai-decision-result-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ai-decision-message.warning {
  margin-top: 12px;
  border-radius: 14px;
  padding: 12px;
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
  font-weight: 800;
}

.ai-decision-empty-state {
  text-align: center;
  padding: 34px;
}

.ai-decision-result-head {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}

.ai-decision-score,
.ai-decision-summary {
  border-radius: 24px;
  padding: 18px;
}

.ai-decision-score {
  display: grid;
  gap: 8px;
  align-content: center;
  position: relative;
  overflow: hidden;
}

.ai-decision-score strong {
  color: #0f172a;
  font-size: 3rem;
  line-height: 1;
}

.ai-decision-score b {
  color: #334155;
  text-transform: capitalize;
}

.ai-decision-score i {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  clip-path: inset(0 calc(100% - var(--score, 0%)) 0 0 round 999px);
}

.ai-decision-score.risk-high strong,
.ai-decision-history-list .risk-high {
  color: #dc2626;
}

.ai-decision-score.risk-critical strong,
.ai-decision-history-list .risk-critical {
  color: #7f1d1d;
}

.ai-decision-score.risk-medium strong,
.ai-decision-history-list .risk-medium {
  color: #d97706;
}

.ai-decision-score.risk-low strong,
.ai-decision-history-list .risk-low {
  color: #047857;
}

.ai-decision-summary h3 {
  margin: 8px 0;
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.35;
}

.ai-decision-success {
  border-radius: 999px;
  padding: 8px 12px;
  width: fit-content;
  background: rgba(220, 252, 231, 0.95);
  color: #047857 !important;
  font-weight: 900;
}

.ai-decision-impact-grid,
.ai-decision-columns {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ai-decision-card {
  border-radius: 22px;
  padding: 16px;
}

.ai-decision-card strong {
  display: block;
  margin: 5px 0;
  color: #0f172a;
  font-size: 1.4rem;
  text-transform: capitalize;
}

.ai-decision-card.tone-green span,
.ai-decision-card.tone-low span {
  color: #047857;
}

.ai-decision-card.tone-blue span {
  color: #1d4ed8;
}

.ai-decision-card.tone-orange span,
.ai-decision-card.tone-medium span {
  color: #d97706;
}

.ai-decision-card.tone-high span {
  color: #dc2626;
}

.ai-decision-card.tone-critical span,
.ai-decision-card.tone-purple span {
  color: #7c3aed;
}

.ai-decision-list {
  display: grid;
  gap: 10px;
}

.ai-decision-list > p,
.ai-decision-list-item {
  border-radius: 16px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.ai-decision-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ai-decision-list-item strong {
  color: #0f172a;
}

.ai-decision-memo {
  min-height: 240px;
  padding: 14px;
  resize: vertical;
  font-family: "Times New Roman", "Khmer OS Siemreap", serif;
  line-height: 1.55;
}

.ai-decision-records {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-decision-records article {
  border-radius: 18px;
  padding: 13px;
}

.ai-decision-records span {
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 900;
}

.ai-decision-records strong {
  display: block;
  margin: 6px 0;
  color: #0f172a;
}

.ai-decision-section-head,
.ai-decision-history-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-decision-history-list {
  display: grid;
  gap: 10px;
}

.ai-decision-history-list article {
  border-radius: 18px;
  padding: 13px;
}

.ai-decision-history-list strong {
  color: #0f172a;
}

.ai-decision-history-list b,
.ai-decision-history-list em {
  display: block;
  text-align: right;
  font-weight: 900;
}

.ai-decision-apply-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(16px);
}

.ai-decision-apply-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 28px;
  padding: 26px;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.24);
}

.ai-decision-apply-card > span {
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ai-decision-apply-card h3 {
  margin: 8px 0;
  font-size: 1.45rem;
}

.ai-decision-apply-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-size: 1.4rem;
}

.ai-decision-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ai-decision-preview-actions button {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

.ai-decision-preview-actions button:first-child {
  border-color: transparent;
  background: linear-gradient(135deg, #1d4ed8, #14b8a6);
  color: #fff;
}

body.dark-mode .ai-decision-shell {
  color: #e5edf7;
  background:
    radial-gradient(circle at 12% 2%, rgba(37, 99, 235, 0.18), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(20, 184, 166, 0.14), transparent 28%),
    linear-gradient(135deg, #0f172a, #111827 48%, #0b1220);
}

body.dark-mode .ai-decision-hero,
body.dark-mode .ai-decision-panel,
body.dark-mode .ai-decision-score,
body.dark-mode .ai-decision-summary,
body.dark-mode .ai-decision-card,
body.dark-mode .ai-decision-records article,
body.dark-mode .ai-decision-history-list article,
body.dark-mode .ai-decision-apply-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

body.dark-mode .ai-decision-hero h2,
body.dark-mode .ai-decision-panel h3,
body.dark-mode .ai-decision-summary h3,
body.dark-mode .ai-decision-score strong,
body.dark-mode .ai-decision-card strong,
body.dark-mode .ai-decision-list-item strong,
body.dark-mode .ai-decision-records strong,
body.dark-mode .ai-decision-history-list strong,
body.dark-mode .ai-decision-apply-card h3 {
  color: #f8fafc;
}

body.dark-mode .ai-decision-hero p,
body.dark-mode .ai-decision-summary p,
body.dark-mode .ai-decision-card p,
body.dark-mode .ai-decision-list p,
body.dark-mode .ai-decision-records p,
body.dark-mode .ai-decision-history-list p,
body.dark-mode .ai-decision-empty,
body.dark-mode .ai-decision-apply-card p {
  color: #a8b7cc;
}

body.dark-mode .ai-decision-question textarea,
body.dark-mode .ai-decision-filter input,
body.dark-mode .ai-decision-filter select,
body.dark-mode .ai-decision-memo,
body.dark-mode .ai-decision-list > p,
body.dark-mode .ai-decision-list-item,
body.dark-mode .ai-decision-actions button,
body.dark-mode .ai-decision-result-actions button,
body.dark-mode .ai-decision-panel button,
body.dark-mode .ai-decision-records button,
body.dark-mode .ai-decision-list-item button,
body.dark-mode .ai-decision-apply-close,
body.dark-mode .ai-decision-preview-actions button {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
}

@media (max-width: 1200px) {
  .ai-decision-filter-grid,
  .ai-decision-impact-grid,
  .ai-decision-columns,
  .ai-decision-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-decision-result-head {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .ai-decision-apply,
  .ai-decision-result-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ai-decision-shell {
    padding: 12px;
  }

  .ai-decision-hero,
  .ai-decision-result-head,
  .ai-decision-filter-grid,
  .ai-decision-impact-grid,
  .ai-decision-columns,
  .ai-decision-records,
  .ai-decision-list-item {
    grid-template-columns: 1fr;
  }

  .ai-decision-hero-meta {
    justify-content: flex-start;
  }
}

/* Calendar dashboard uses the same right detail drawer as inspector/profile menus. */
.content-grid.calendar-dashboard-mode:not(.dashboard-mode) .library-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

.detail-panel.calendar-detail-mode .calendar-right-panel {
  padding: 0;
}

.detail-panel.calendar-detail-mode .calendar-right-heading {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
}

.detail-panel.calendar-detail-mode .calendar-right-heading > div:first-child {
  min-width: 0;
}

.detail-panel.calendar-detail-mode .calendar-right-heading h2 {
  font-size: 1.22rem;
  line-height: 1.25;
}

.detail-panel.calendar-detail-mode .calendar-right-heading span {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
}

/* Reference navigation: in-app Back/Forward for source-row visits. */
.reference-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.reference-nav-controls[hidden] {
  display: none !important;
}

.toolbar-actions.toolbar-actions-executive {
  grid-template-columns: minmax(260px, 1fr) max-content max-content max-content max-content !important;
}

.reference-nav-controls {
  grid-column: 2 !important;
  justify-self: end !important;
}

.menu-package-controls {
  grid-column: 3 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: min(520px, 42vw) !important;
  height: 40px !important;
  padding: 4px 6px !important;
  border: 1px solid var(--executive-line, rgba(148, 163, 184, 0.42)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel, #ffffff) 92%, var(--accent, #2563eb) 4%) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

.menu-package-controls[hidden] {
  display: none !important;
}

.menu-package-duplicate-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 220px !important;
  color: var(--muted, #64748b) !important;
  font: 800 11px/1 var(--pd-english-ui-font, Arial, sans-serif) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.menu-package-duplicate-label select {
  width: min(150px, 14vw) !important;
  min-width: 96px !important;
  height: 30px !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid var(--executive-line, rgba(148, 163, 184, 0.42)) !important;
  border-radius: 10px !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #1e293b) !important;
  font: 800 12px/1 var(--pd-english-ui-font, Arial, sans-serif) !important;
}

.toolbar .menu-package-action {
  height: 30px !important;
  min-height: 30px !important;
  min-width: 74px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.license-status-toolbar-button {
  grid-column: 4 !important;
  justify-self: end !important;
}

.toolbar-more-menu {
  grid-column: 5 !important;
}

@media (max-width: 1280px) {
  .toolbar-actions.toolbar-actions-executive {
    grid-template-columns: minmax(220px, 1fr) max-content max-content max-content !important;
  }

  .menu-package-controls {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-width: min(520px, calc(100vw - 360px)) !important;
  }

  .reference-nav-controls {
    grid-column: 3 !important;
  }

  .license-status-toolbar-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .toolbar-more-menu {
    grid-column: 4 !important;
  }
}

/* =========================================================
   USER UPDATE: shadcn-style explicit toolbar search button group
   The field no longer performs live search while typing; the search
   icon is the visible commit action.
   ========================================================= */
.toolbar-search-group {
  max-width: min(560px, 42vw) !important;
}

.toolbar-search-group .toolbar-search-button-group {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 42px !important;
  min-width: 220px !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 1px solid var(--executive-line, rgba(148, 163, 184, 0.42)) !important;
  border-radius: 16px !important;
  background: var(--panel, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 18px rgba(15, 23, 42, 0.055) !important;
  overflow: hidden !important;
  clip-path: inset(0 round 16px) !important;
}

.toolbar-search-group .toolbar-search-button-group input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 16px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ink, #1f2937) !important;
  font: 600 14px/1.2 var(--pd-english-ui-font, "Inter", "Segoe UI", Arial, sans-serif) !important;
}

.toolbar-search-group .toolbar-search-button-group input::placeholder {
  color: color-mix(in srgb, var(--muted, #64748b) 76%, transparent) !important;
}

.toolbar-search-group .toolbar-search-button-group input::-webkit-search-cancel-button,
.toolbar-search-group .toolbar-search-button-group input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.toolbar-search-button {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 100% !important;
  border: 0 !important;
  border-left: 1px solid var(--executive-line, rgba(148, 163, 184, 0.42)) !important;
  border-radius: 0 !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #020617) !important;
  cursor: pointer !important;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease !important;
}

.toolbar-search-button:hover,
.toolbar-search-button:focus-visible,
.toolbar-search-button.has-unapplied-search {
  background: color-mix(in srgb, var(--accent, #2563eb) 9%, var(--panel, #ffffff)) !important;
  color: var(--accent, #2563eb) !important;
}

.toolbar-search-button:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 44%, transparent) !important;
}

.toolbar-search-button svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.toolbar-search-group .toolbar-search-button-group:focus-within {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 66%, var(--executive-line, rgba(148, 163, 184, 0.42))) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 13%, transparent),
    0 10px 24px rgba(15, 23, 42, 0.075) !important;
}

body.dark-theme .toolbar-search-group .toolbar-search-button-group,
body[data-theme="dark"] .toolbar-search-group .toolbar-search-button-group,
body.dark-theme .toolbar-search-button,
body[data-theme="dark"] .toolbar-search-button {
  border-color: rgba(96, 165, 250, 0.3) !important;
  background: color-mix(in srgb, var(--panel, #0f172a) 90%, #ffffff 4%) !important;
  color: var(--ink, #e5edf8) !important;
}

body.dark-theme .toolbar-search-button:hover,
body[data-theme="dark"] .toolbar-search-button:hover,
body.dark-theme .toolbar-search-button:focus-visible,
body[data-theme="dark"] .toolbar-search-button:focus-visible,
body.dark-theme .toolbar-search-button.has-unapplied-search,
body[data-theme="dark"] .toolbar-search-button.has-unapplied-search {
  background: color-mix(in srgb, var(--accent, #60a5fa) 18%, var(--panel, #0f172a)) !important;
  color: var(--accent, #60a5fa) !important;
}

@media (max-width: 720px) {
  .toolbar-search-group {
    max-width: 100% !important;
  }

  .toolbar-search-group .toolbar-search-button-group {
    min-width: 0 !important;
  }

  .toolbar-search-button {
    flex-basis: 46px !important;
    width: 46px !important;
    min-width: 46px !important;
  }
}

.reference-nav-button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
  color: #123258;
  font: 800 0.88rem/1 "Times New Roman", "Noto Serif Khmer", serif;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  white-space: nowrap;
}

.reference-nav-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.15);
}

.reference-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.reference-navigation-highlight {
  position: relative;
  outline: 3px solid rgba(37, 99, 235, 0.7) !important;
  outline-offset: -3px;
  box-shadow: inset 5px 0 0 #2563eb, 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

body.dark-theme .reference-nav-button,
body[data-theme="dark"] .reference-nav-button {
  border-color: rgba(96, 165, 250, 0.38);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92));
  color: #e5f1ff;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.34);
}

body.dark-theme .reference-nav-button:hover:not(:disabled),
body[data-theme="dark"] .reference-nav-button:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

@media (max-width: 1180px) {
  .reference-nav-button {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 0.8rem;
  }
}