:root {
  --tech-navy-1000: #07111f;
  --tech-navy-950: #0a1628;
  --tech-navy-900: #0d1d33;
  --tech-navy-800: #122a46;
  --tech-cyan-700: #007f9f;
  --tech-cyan-600: #009fc7;
  --tech-cyan-500: #14b8d4;
  --tech-cyan-400: #34d3ee;
  --tech-cyan-300: #67e8f9;
  --tech-cyan-100: #cffafe;
  --tech-cyan-050: #ecfeff;
  --tech-surface: #f6f9fc;
  --tech-line: #d9e5ef;
  --tech-text: #172536;
  --tech-muted: #64748b;
}

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  background: var(--tech-surface);
  color: var(--tech-text);
}

/* Top bar: dark industrial-tech shell with a restrained cyan highlight. */
.app-navbar {
  min-height: 56px;
  background:
    linear-gradient(90deg, rgba(20,184,212,.12), transparent 22%),
    linear-gradient(90deg, var(--tech-navy-1000), var(--tech-navy-900));
  border-bottom: 1px solid rgba(52, 211, 238, .22);
  box-shadow: 0 4px 18px rgba(7, 17, 31, .18);
}

.app-navbar .navbar-brand {
  color: #f8fdff;
  font-weight: 700;
  letter-spacing: .045em;
}

.app-navbar .navbar-brand:hover { color: #fff; }

.brand-mark {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  background: var(--tech-cyan-400);
  box-shadow: 0 0 0 3px rgba(52,211,238,.10), 0 0 16px rgba(52,211,238,.48);
  transform: rotate(45deg);
}

/* Sidebar: deep navy, active page marked by cyan rather than a bright full fill. */
.sidebar {
  width: 220px;
  min-height: calc(100vh - 56px);
  background:
    linear-gradient(rgba(52,211,238,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,238,.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--tech-navy-950) 0%, var(--tech-navy-1000) 100%);
  background-size: 24px 24px, 24px 24px, auto;
  border-color: rgba(52,211,238,.14) !important;
  box-shadow: inset -1px 0 0 rgba(52,211,238,.08), 5px 0 20px rgba(7,17,31,.08);
}

.sidebar .nav-link {
  position: relative;
  color: #e6f0f8;
  font-weight: 500;
  padding: .64rem .78rem .64rem .95rem;
  border-radius: .42rem;
  margin-bottom: .22rem;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.sidebar .nav-link:hover {
  color: #f3fcff;
  background: rgba(52,211,238,.075);
  border-color: rgba(52,211,238,.12);
  transform: translateX(2px);
}

.sidebar .nav-link.active {
  color: #ecfeff;
  background: linear-gradient(90deg, rgba(20,184,212,.20), rgba(20,184,212,.055));
  border-color: rgba(52,211,238,.23);
  font-weight: 700;
  box-shadow: inset 0 0 18px rgba(20,184,212,.05);
}

.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tech-cyan-400);
  box-shadow: 0 0 10px rgba(52,211,238,.48);
}

.sidebar .nav-link.disabled {
  color: #8197aa;
  background: transparent;
  border-color: transparent;
  transform: none;
}

.sidebar hr {
  border-color: rgba(52,211,238,.14);
  opacity: 1;
}

.sidebar-section-label {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin: .1rem 0 .5rem;
  color: #a8bfd2;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sidebar-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tech-cyan-500);
  box-shadow: 0 0 8px rgba(20,184,212,.4);
}

/* Keep data-heavy ERP screens bright and readable. */
.app-main {
  background:
    radial-gradient(circle at 100% 0%, rgba(52,211,238,.055), transparent 300px),
    #f8fafc;
  min-width: 0;
}

a { color: var(--tech-cyan-700); }
a:hover { color: #00627d; }

.btn-primary {
  background: linear-gradient(180deg, var(--tech-cyan-600), #0787aa);
  border-color: #0787aa;
  box-shadow: 0 2px 8px rgba(0,159,199,.16);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(180deg, #078fb4, #066f8c) !important;
  border-color: #066f8c !important;
}

.btn-outline-primary {
  color: var(--tech-cyan-700);
  border-color: #72cfe0;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--tech-cyan-700);
  border-color: var(--tech-cyan-700);
}

.btn-outline-light:hover {
  color: var(--tech-navy-950);
}

.card {
  border-color: var(--tech-line);
  box-shadow: 0 4px 16px rgba(15, 37, 61, .045);
}

.card-header {
  background: linear-gradient(180deg, #f8fdff, #eef8fb);
  color: #19344b;
  border-bottom-color: #d8eaf0;
  font-weight: 600;
}

table { font-size: .92rem; }

.master-table th,
.table thead th {
  white-space: nowrap;
  color: #173750;
  background: #eaf6fa;
  border-bottom-color: #c8e3eb;
}

.master-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.master-table td { min-width: 90px; }
.master-table .cell-address { min-width: 240px; max-width: 420px; }

.table-hover > tbody > tr:hover > * {
  background-color: rgba(20,184,212,.045);
}

.detail-grid span {
  display: block;
  color: var(--tech-muted);
  font-size: .82rem;
  margin-bottom: .2rem;
}

.detail-grid strong {
  display: block;
  font-weight: 600;
  word-break: break-word;
}

.nav-tabs {
  border-bottom-color: #cfdfe8;
}

.nav-tabs .nav-link {
  color: #477188;
  border: 0;
  border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: #93dbe8;
}

.nav-tabs .nav-link.active {
  color: #086b87;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--tech-cyan-500);
  font-weight: 700;
}

.form-control,
.form-select {
  border-color: #ccdbe5;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tech-cyan-500);
  box-shadow: 0 0 0 .22rem rgba(20,184,212,.12);
}

.badge.text-bg-primary,
.bg-primary {
  background-color: var(--tech-cyan-700) !important;
}

.pagination .page-link { color: var(--tech-cyan-700); }
.pagination .page-item.active .page-link {
  background-color: var(--tech-cyan-700);
  border-color: var(--tech-cyan-700);
}

.alert-info {
  color: #16465c;
  background-color: #ecfbff;
  border-color: #bdebf4;
}

@media (max-width: 900px) {
  .sidebar { width: 190px; }
}


/* v0.5.3 Quote / Negotiation workstation */
.quote-stat-card { color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.quote-stat-card:hover { transform: translateY(-2px); border-color: rgba(20,184,212,.42); box-shadow: 0 8px 24px rgba(8,94,120,.10); }
.quote-badge { border: 1px solid transparent; }
.quote-draft { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
.quote-negotiating { color: #854d0e; background: #fef9c3; border-color: #fde68a; }
.quote-done { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.quote-list-table { max-height: 62vh; }
.quote-work-table { max-height: 58vh; }
.quote-editor-card { position: sticky; top: 1rem; }
.quote-selected-line { background: #eef9fc; border: 1px solid #c7e8f0; }
.quote-money-card.emphasis { border-color: #7dd3e6; box-shadow: 0 6px 20px rgba(20,184,212,.10); }
.quote-flow { display: flex; align-items: center; padding: .8rem 1rem; background: #fff; border: 1px solid var(--tech-line); border-radius: .55rem; }
.quote-flow-step { display: flex; align-items: center; gap: .45rem; color: #7890a4; white-space: nowrap; }
.quote-flow-step span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #b9cbd7; background: #f8fafc; font-size: .8rem; }
.quote-flow-step.done { color: #086b87; }
.quote-flow-step.done span { color: #fff; border-color: var(--tech-cyan-600); background: var(--tech-cyan-600); box-shadow: 0 0 0 4px rgba(20,184,212,.08); }
.quote-flow-line { height: 1px; background: #ccdae3; flex: 1; margin: 0 .8rem; min-width: 24px; }
.quote-product-row.table-info > *,.quote-line.table-info > * { background-color: rgba(20,184,212,.10) !important; }
@media (max-width: 1199px) { .quote-editor-card { position: static; } }
@media (max-width: 700px) { .quote-flow { overflow-x: auto; } }

/* v0.5.4 Filing workstation */
.filing-drop-hint { border: 1px dashed #83c9d8; background: #f0fbfd; color: #42697a; border-radius: .6rem; padding: 1rem; }
.filing-status { display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.filing-waiting { color: #854d0e; background: #fef9c3; border-color: #fde68a; }
.filing-progress { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
.filing-done { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.engineering-preview { max-height: 520px; width: 100%; object-fit: contain; background: #fff; }
.process-row, .surface-row { padding: .55rem; border: 1px solid #e2edf3; border-radius: .5rem; background: #fbfdfe; }

/* v0.5.4c readability: make secondary text in ERP pages dark and high-contrast. */
.app-main {
  --bs-secondary-color: #111827;
  --bs-tertiary-color: #111827;
  --bs-secondary-color-rgb: 17, 24, 39;
}

.app-main .text-muted,
.app-main .text-secondary,
.app-main .text-body-secondary,
.app-main .form-text,
.app-main .detail-grid span,
.app-main small.text-muted,
.app-main p.text-muted,
.app-main div.text-muted,
.app-main span.text-muted,
.app-main label.text-muted {
  color: #111827 !important;
  opacity: 1 !important;
}

.app-main .nav-tabs .nav-link:not(.active) {
  color: #111827;
}

.app-main .form-control::placeholder,
.app-main textarea::placeholder,
.app-main input::placeholder {
  color: #1f2937;
  opacity: .88;
}

.app-main .table,
.app-main .table td,
.app-main .table tbody th,
.app-main .card-body,
.app-main .list-group-item,
.app-main .form-label,
.app-main label {
  color: #111827;
}

/* Disabled controls keep a visual disabled state but stay legible. */
.app-main .form-control:disabled,
.app-main .form-select:disabled,
.app-main .btn:disabled {
  color: #374151;
}

/* v0.6.1: collapsible navigation + searchable-select affordances */
.sidebar-toggle-btn {
  color: #eafcff;
  border: 1px solid rgba(103,232,249,.30);
  background: rgba(20,184,212,.08);
  min-width: 36px;
}
.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:focus {
  color: #fff;
  background: rgba(20,184,212,.20);
  border-color: rgba(103,232,249,.55);
}
.app-shell .sidebar { flex: 0 0 220px; transition: margin-left .18s ease, opacity .18s ease; }
.app-shell.sidebar-collapsed .sidebar {
  margin-left: -220px;
  opacity: 0;
  pointer-events: none;
}
.app-shell .app-main { transition: width .18s ease; }
.searchable-select-note { font-size: .82rem; color: #111 !important; }
.price-management-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.price-management-card:hover { transform: translateY(-2px); border-color: #72cfe0; box-shadow: 0 8px 24px rgba(15,37,61,.10); }
.process-pair { display: block; white-space: nowrap; line-height: 1.45; }
.process-pair .process-time { font-weight: 700; color: #075985; }
@media (max-width: 767.98px) {
  .app-shell .sidebar { position: fixed; z-index: 1040; top: 56px; bottom: 0; left: 0; }
  .app-shell.sidebar-collapsed .sidebar { margin-left: -220px; }
}

/* v0.6.8 Production progress board */
.progress-notice-box {
  min-width: 330px;
  padding: .65rem .85rem;
  border: 2px solid #dc2626;
  border-radius: .65rem;
  background: #fff1f2;
  color: #7f1d1d !important;
  box-shadow: 0 4px 14px rgba(185, 28, 28, .10);
}
.progress-stat-danger { border: 2px solid #ef4444 !important; background: #fff7f7; }
.progress-stat-danger .h4 { color: #b91c1c !important; }
.progress-table-wrap { max-height: 68vh; border: 1px solid #d9e5ec; border-radius: .55rem; }
.progress-table { min-width: 1780px; font-size: .9rem; }
.progress-table thead th { white-space: nowrap; z-index: 2; }
.progress-table td { min-width: 96px; }
.progress-table .progress-part-no { min-width: 260px; max-width: 360px; overflow-wrap: anywhere; }
.progress-table .progress-note-cell { min-width: 270px; }
.progress-current-stage {
  display: inline-block;
  padding: .22rem .45rem;
  border-radius: .35rem;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  color: #0c4a6e;
  font-weight: 800;
  white-space: nowrap;
}
.progress-row-danger > * {
  background: #fff1f2 !important;
  color: #7f1d1d !important;
  border-top-color: #fb7185 !important;
  border-bottom-color: #fb7185 !important;
}
.progress-row-danger > *:first-child { border-left: 4px solid #e11d48 !important; }
.progress-row-overdue > * {
  background: #fecaca !important;
  color: #7f1d1d !important;
  font-weight: 700;
  border-top-color: #dc2626 !important;
  border-bottom-color: #dc2626 !important;
}
.progress-row-overdue > *:first-child { border-left: 6px solid #991b1b !important; }
.progress-badge-overdue { background: #991b1b; color: #fff; border: 1px solid #7f1d1d; }
.progress-badge-due { background: #dc2626; color: #fff; border: 1px solid #b91c1c; }
.progress-legend { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

/* v0.6.8a Progress detail management */
.progress-clickable-row { cursor: pointer; }
.progress-card-link { font-weight: 800; text-decoration: none; }
.progress-card-link:hover { text-decoration: underline; }
.progress-due-card-overdue { border: 3px solid #991b1b !important; background: #fecaca !important; }
.progress-due-card-overdue .card-header { background: #991b1b !important; color: #fff !important; }
.progress-due-card-warning { border: 2px solid #dc2626 !important; background: #fff1f2 !important; }
.progress-due-card-warning .card-header { background: #dc2626 !important; color: #fff !important; }

/* v0.6.9 Factory-first dashboard */
.factory-dashboard { max-width: 1920px; margin: 0 auto; }
.factory-eyebrow { color: #087c98; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.factory-subtitle { color: #334155; }
.factory-notice-chip {
  display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .5rem; row-gap: .05rem;
  min-width: 245px; padding: .65rem .8rem; border-radius: .6rem; border: 1px solid #ef4444;
  background: #fff1f2; color: #7f1d1d;
}
.factory-notice-chip span { font-size: .78rem; font-weight: 700; }
.factory-notice-chip strong { font-size: 1.35rem; }
.factory-notice-chip small { grid-column: 1 / -1; font-size: .75rem; }
.factory-kpi-card {
  display: block; height: 100%; min-height: 104px; padding: .8rem .9rem; text-decoration: none;
  background: #fff; border: 1px solid var(--tech-line); border-radius: .65rem;
  box-shadow: 0 4px 14px rgba(15,37,61,.045); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.factory-kpi-card:hover { transform: translateY(-2px); border-color: #72cfe0; box-shadow: 0 8px 24px rgba(15,37,61,.09); }
.factory-kpi-card span { display: block; font-size: .82rem; font-weight: 800; color: #334155; }
.factory-kpi-card strong { display: block; margin: .08rem 0; color: #0f2a3d; font-size: 1.85rem; line-height: 1.1; }
.factory-kpi-card small { color: #475569; }
.factory-kpi-alert { border: 2px solid #ef4444; background: #fff7f7; }
.factory-kpi-alert strong { color: #b91c1c; }
.factory-kpi-overdue { border: 2px solid #991b1b; background: #fee2e2; }
.factory-kpi-overdue span, .factory-kpi-overdue strong { color: #7f1d1d; }
.factory-stage-card { border-color: #c7dfe9; }
.factory-stage-strip { display: grid; grid-template-columns: repeat(10, minmax(92px, 1fr)); gap: .45rem; overflow-x: auto; }
.factory-stage-pill {
  display: flex; align-items: center; justify-content: space-between; gap: .45rem; min-width: 100px;
  padding: .52rem .6rem; border-radius: .48rem; border: 1px solid #d8e5ec; background: #f8fafc;
}
.factory-stage-pill span { white-space: nowrap; font-size: .78rem; font-weight: 700; }
.factory-stage-pill strong { min-width: 24px; text-align: center; color: #475569; font-size: 1rem; }
.factory-stage-pill.has-work { border-color: #8fd7e5; background: #eefbfe; }
.factory-stage-pill.has-work strong { color: #087c98; }
.factory-progress-card { overflow: hidden; }
.factory-progress-card .card-header { padding: .8rem 1rem; }
.factory-section-kicker { color: #087c98; font-size: .68rem; font-weight: 800; letter-spacing: .11em; }
.factory-progress-caption { color: #334155; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: .8rem; }
.factory-progress-table-wrap { max-height: 58vh; }
.factory-progress-table { min-width: 1260px; font-size: .86rem; }
.factory-progress-table thead th { position: sticky; top: 0; z-index: 3; white-space: nowrap; }
.factory-progress-table td { vertical-align: middle; }
.factory-progress-row { cursor: pointer; }
.factory-part-cell { min-width: 210px; max-width: 320px; overflow-wrap: anywhere; font-weight: 700; }
.factory-note-cell { min-width: 235px; max-width: 340px; }
.factory-current-stage {
  display: inline-block; min-width: 72px; padding: .25rem .48rem; text-align: center; border-radius: .35rem;
  border: 1px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; font-weight: 800;
}
.factory-queue-card .list-group-item { border-color: #e2e8f0; }
.factory-queue-item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; text-decoration: none; padding: .75rem .9rem; }
.factory-queue-item span { min-width: 0; }
.factory-queue-item b, .factory-queue-item small { display: block; }
.factory-queue-item small { margin-top: .08rem; color: #475569; }
.factory-queue-item strong {
  display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 .45rem; border-radius: .45rem;
  background: #eaf6fa; color: #0c6b85; font-size: 1.12rem;
}
.factory-actions-card .btn { min-height: 42px; display: flex; align-items: center; }
.factory-secondary-links { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; color: #475569; font-size: .88rem; }
.factory-secondary-links a { padding: .18rem .45rem; border-radius: .35rem; text-decoration: none; background: #fff; border: 1px solid #dbe7ee; }
@media (max-width: 1399px) {
  .factory-stage-strip { grid-template-columns: repeat(5, minmax(105px, 1fr)); }
  .factory-progress-table-wrap { max-height: none; }
}
@media (max-width: 767.98px) {
  .factory-notice-chip { width: 100%; }
  .factory-stage-strip { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
  .factory-progress-table { min-width: 1120px; }
}

/* v0.7.0b: grouped accordion sidebar inspired by the Fuyou ERP navigation. */
.app-shell {
  --app-sidebar-width: 270px;
}

.app-shell .sidebar {
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  height: calc(100vh - 56px);
  min-height: calc(100vh - 56px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(72, 124, 181, .13), transparent 240px),
    linear-gradient(180deg, #102844 0%, #0a1d33 52%, #071524 100%);
  border-color: rgba(122, 170, 216, .14) !important;
  box-shadow: inset -1px 0 0 rgba(112, 170, 221, .09), 8px 0 24px rgba(7, 17, 31, .08);
  transition: margin-left .18s ease, opacity .18s ease;
}

.sidebar-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem .78rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 180, 226, .32) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 7px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(130, 180, 226, .28); border-radius: 999px; }

.sidebar-dashboard-link,
.sidebar-group-title,
.sidebar-child-link {
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-dashboard-link {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 52px;
  margin: 0 0 .5rem;
  padding: .72rem .82rem;
  color: #e7f0fb;
  border: 1px solid transparent;
  border-radius: .8rem;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: .01em;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.sidebar-dashboard-link:hover {
  color: #fff;
  background: rgba(57, 105, 156, .22);
  border-color: rgba(138, 190, 235, .12);
  transform: translateX(2px);
}
.sidebar-dashboard-link.active {
  color: #fff;
  background: linear-gradient(135deg, #2d61df, #2452cf);
  border-color: rgba(97, 154, 255, .58);
  box-shadow: 0 9px 24px rgba(20, 67, 169, .24), inset 0 1px 0 rgba(255,255,255,.08);
}

.sidebar-item-icon {
  flex: 0 0 30px;
  width: 30px;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  filter: saturate(.92);
}
.sidebar-item-text {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
}

.sidebar-group {
  margin: .34rem 0;
  border-radius: .85rem;
}
.sidebar-group-header {
  display: flex;
  align-items: stretch;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: .85rem;
  overflow: hidden;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sidebar-group:hover > .sidebar-group-header {
  background: rgba(45, 81, 120, .24);
  border-color: rgba(132, 184, 229, .10);
}
.sidebar-group.is-open > .sidebar-group-header,
.sidebar-group.is-active > .sidebar-group-header {
  background: linear-gradient(90deg, rgba(35, 72, 113, .92), rgba(29, 60, 98, .76));
  border-color: rgba(120, 175, 224, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.sidebar-group-title {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-width: 0;
  flex: 1;
  padding: .72rem .18rem .72rem .82rem;
  color: #e6eef8;
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: .01em;
}
.sidebar-group-title:hover { color: #fff; }
.sidebar-group-toggle {
  flex: 0 0 42px;
  width: 42px;
  border: 0;
  background: transparent;
  color: #8fc2ef;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.sidebar-group-toggle:hover,
.sidebar-group-toggle:focus-visible {
  color: #d8efff;
  background: rgba(84, 141, 194, .12);
  outline: none;
}
.sidebar-group-toggle span {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.sidebar-group.is-open .sidebar-group-toggle span { transform: rotate(180deg); }

.sidebar-group-panel {
  display: none;
  padding: .36rem 0 .28rem;
}
.sidebar-group.is-open > .sidebar-group-panel { display: block; }

.sidebar-child-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .74rem;
  min-height: 48px;
  margin: .12rem 0 .12rem 1.08rem;
  padding: .58rem .72rem;
  color: #dce8f5;
  border: 1px solid transparent;
  border-radius: .7rem;
  font-size: .96rem;
  font-weight: 660;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease, color .14s ease;
}
.sidebar-child-link:hover {
  color: #fff;
  background: rgba(51, 93, 137, .27);
  border-color: rgba(124, 178, 224, .11);
  transform: translateX(2px);
}
.sidebar-child-link.active {
  color: #fff;
  background: linear-gradient(135deg, #2c62e8, #2457dc);
  border-color: rgba(90, 145, 255, .72);
  box-shadow: 0 8px 22px rgba(19, 68, 178, .25), inset 0 1px 0 rgba(255,255,255,.10);
  font-weight: 800;
}
.sidebar-child-link.active::before {
  content: "";
  position: absolute;
  left: -1.08rem;
  top: 50%;
  width: .68rem;
  height: 2px;
  border-radius: 999px;
  background: #7eb7ff;
  transform: translateY(-50%);
  box-shadow: 0 0 7px rgba(126, 183, 255, .38);
}
.sidebar-child-icon {
  flex: 0 0 27px;
  width: 27px;
  display: inline-grid;
  place-items: center;
  font-size: 1.08rem;
  line-height: 1;
}

/* Keep the original whole-sidebar collapse behavior. */
.app-shell.sidebar-collapsed .sidebar {
  margin-left: calc(-1 * var(--app-sidebar-width));
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .app-shell { --app-sidebar-width: 240px; }
  .sidebar-child-link { margin-left: .72rem; }
  .sidebar-child-link.active::before { left: -.72rem; width: .42rem; }
}

@media (max-width: 767.98px) {
  .app-shell { --app-sidebar-width: 270px; }
  .app-shell .sidebar {
    position: fixed;
    z-index: 1040;
    top: 56px;
    bottom: 0;
    left: 0;
    height: auto;
    min-height: 0;
  }
}


/* LeDuo public Demo */
.demo-mode-banner {
  padding: .45rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  background: #fff3cd;
  border-bottom: 1px solid #ffe69c;
  color: #664d03;
}