/* New operational layout. Classic deliberately keeps the existing panel. */
@scope (html[data-sg-ref-dashboard="active"]) {
:root,
html[data-bs-theme] {
  --sg-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sg-canvas: #f4f6f8;
  --sg-surface: #ffffff;
  --sg-surface-subtle: #f8fafc;
  --sg-sidebar: #22242b;
  --sg-sidebar-hover: #2c2f38;
  --sg-sidebar-active: #34303e;
  --sg-ink: #182230;
  --sg-muted: #607084;
  --sg-border: #dfe5ec;
  --sg-accent: #c026d3;
  --sg-accent-hover: #a21caf;
  --sg-accent-blue: #2563eb;
  --sg-focus: rgba(192, 38, 211, 0.18);
  --bs-body-font-family: var(--sg-font-family);
  --bs-font-sans-serif: var(--sg-font-family);
  --bs-body-bg: var(--sg-canvas);
  --bs-body-color: var(--sg-ink);
  --bs-primary: var(--sg-accent);
  --bs-primary-rgb: 192, 38, 211;
  --bs-border-color: var(--sg-border);
  --bs-border-radius: 6px;
  --bs-border-radius-lg: 8px;
}

html,
body {
  background: var(--sg-canvas) !important;
  color: var(--sg-ink) !important;
  font-family: var(--sg-font-family) !important;
  min-width: 320px;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea,
.el-overlay,
.swal2-popup { font-family: var(--sg-font-family) !important; }

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

#kt_app_root, .d-flex.flex-column.flex-root, #kt_app_page, .app-page,
#kt_wrapper, #kt_content, .content, .post { background: var(--sg-canvas) !important; }

.container, .container-fluid, .container-xxl {
  max-width: 1600px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#kt_aside, .aside, #kt_app_sidebar, .app-sidebar {
  background: var(--sg-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.aside-logo, .app-sidebar-logo, .aside-footer, .app-sidebar-footer {
  background: var(--sg-sidebar) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.aside-menu .menu-section, .app-sidebar-menu .menu-section {
  color: #aab3c2 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 16px 18px 6px !important;
}

.aside-menu .menu-item .menu-link, .app-sidebar-menu .menu-item .menu-link {
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 6px !important;
  color: #c7ced9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 2px 10px !important;
  padding: 10px 12px !important;
  transform: none !important;
}

.aside-menu .menu-item .menu-link:hover, .app-sidebar-menu .menu-item .menu-link:hover {
  background: var(--sg-sidebar-hover) !important;
  color: #ffffff !important;
  transform: none !important;
}

.aside-menu .menu-item.here > .menu-link, .aside-menu .menu-item .menu-link.active,
.app-sidebar-menu .menu-item.here > .menu-link, .app-sidebar-menu .menu-item .menu-link.active {
  background: var(--sg-sidebar-active) !important;
  border-left-color: var(--sg-accent) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.aside-menu .menu-item.here > .menu-link::after, .aside-menu .menu-item .menu-link.active::after,
.app-sidebar-menu .menu-item.here > .menu-link::after, .app-sidebar-menu .menu-item .menu-link.active::after { display: none !important; }

.aside-menu .menu-icon i, .aside-menu .menu-icon .svg-icon,
.app-sidebar-menu .menu-icon i, .app-sidebar-menu .menu-icon .svg-icon { color: #b8c2d0 !important; }

.aside-menu .menu-item.here > .menu-link .menu-icon i, .aside-menu .menu-item .menu-link.active .menu-icon i,
.app-sidebar-menu .menu-item.here > .menu-link .menu-icon i, .app-sidebar-menu .menu-item .menu-link.active .menu-icon i { color: #ffffff !important; }

#kt_header, .header, #kt_app_header, .app-header {
  background: var(--sg-surface) !important;
  border-bottom: 1px solid var(--sg-border) !important;
  box-shadow: none !important;
  min-height: 64px !important;
  padding: 8px 24px !important;
}

.card, .sd-card, .cd-card, .rd-card, .el-card {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(24, 34, 48, 0.06) !important;
  margin-bottom: 20px !important;
  transform: none !important;
}

.card:hover, .el-card:hover {
  border-color: #cfd8e3 !important;
  box-shadow: 0 2px 8px rgba(24, 34, 48, 0.08) !important;
  transform: none !important;
}

.card-header, .sd-head, .cd-head, .rd-head {
  background: var(--sg-surface) !important;
  border-bottom: 1px solid var(--sg-border) !important;
  min-height: 56px !important;
  padding: 14px 18px !important;
}

.card-body { padding: 18px !important; }

.btn-primary, .btn-brand, .dp-btn-primary, .el-button--primary {
  background: var(--sg-accent) !important;
  border-color: var(--sg-accent) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 40px;
  padding: 8px 14px !important;
  transform: none !important;
}

.btn-primary:hover, .btn-brand:hover, .dp-btn-primary:hover, .el-button--primary:hover {
  background: var(--sg-accent-hover) !important;
  border-color: var(--sg-accent-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-light, .btn-secondary, .el-button:not(.el-button--primary) {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 6px !important;
  color: var(--sg-ink) !important;
  min-height: 40px;
}

.btn-light:hover, .btn-secondary:hover, .el-button:not(.el-button--primary):hover {
  background: var(--sg-surface-subtle) !important;
  border-color: #c8d2de !important;
  color: var(--sg-ink) !important;
}

.btn-icon, .header .btn-icon, .app-header .btn-icon { border-radius: 6px !important; box-shadow: none !important; }

.form-control, .form-select, .el-input__wrapper, .el-textarea__inner, .el-select__wrapper {
  background: #ffffff !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--sg-ink) !important;
  font-size: 14px !important;
  min-height: 40px;
}

.form-control:focus, .form-select:focus, .el-input.is-focus .el-input__wrapper,
.el-textarea__inner:focus, .el-select__wrapper.is-focused {
  border-color: var(--sg-accent) !important;
  box-shadow: 0 0 0 3px var(--sg-focus) !important;
  outline: 0 !important;
}

.form-label, .col-form-label {
  color: var(--sg-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.table, .el-table { --bs-table-bg: transparent; --bs-table-color: var(--sg-ink); color: var(--sg-ink) !important; }

.table thead th, .el-table th.el-table__cell, .el-table__header-wrapper th {
  background: var(--sg-surface-subtle) !important;
  color: var(--sg-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 11px 14px !important;
  text-transform: none !important;
}

.table tbody td, .el-table td.el-table__cell, .el-table__body td {
  border-bottom-color: var(--sg-border) !important;
  color: var(--sg-ink) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table-hover > tbody > tr:hover > *, .table tbody tr:hover td,
.el-table__body tr.hover-row > td.el-table__cell, .el-table__body tr:hover > td.el-table__cell {
  background: #faf5ff !important;
  box-shadow: none !important;
  color: var(--sg-ink) !important;
}

.badge { border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }

.modal-content, .el-dialog, .swal2-popup {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(24, 34, 48, 0.2) !important;
  overflow: visible !important;
}

.modal-header, .modal-footer { background: var(--sg-surface) !important; border-color: var(--sg-border) !important; padding: 16px 20px !important; }
.modal-body { padding: 20px !important; }
.modal-backdrop.show { backdrop-filter: none !important; opacity: 0.42 !important; }
.dropdown-menu, .el-popper, .swal2-container { border-radius: 6px !important; }

@media (max-width: 1200px) {
  .container, .container-fluid, .container-xxl { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 768px) {
  #kt_header, .header, #kt_app_header, .app-header { min-height: 56px !important; padding: 8px 16px !important; }
  .container, .container-fluid, .container-xxl { padding-left: 16px !important; padding-right: 16px !important; }
  .card-header, .card-body, .modal-header, .modal-body, .modal-footer { padding: 14px 16px !important; }
  .modal-dialog { margin: 12px !important; }
  .table-responsive { overflow-x: auto; }
}

/* Keep the New navigation readable and expanded as a full sidebar. */
#kt_aside, #kt_aside_toolbar, #kt_aside_menu, #kt_aside .aside-logo,
#kt_aside .aside-toolbar, #kt_aside .menu-content { background: #2d2e34 !important; }
#kt_aside .menu-title, #kt_aside .menu-link, #kt_aside .menu-section,
#kt_aside .menu-link .menu-icon, #kt_aside .menu-link i { color: #e4e7ec !important; opacity: 1 !important; }
#kt_aside .menu-section { color: #aeb5c0 !important; }
#kt_aside .menu-link:hover, #kt_aside .menu-link.active { background: #3d3e47 !important; color: #fff !important; }
#kt_aside .menu-link:hover *, #kt_aside .menu-link.active * { color: #fff !important; }
}