/* app/assets/stylesheets/application.css */
/* NOTE: Bootstrap is loaded via CDN in app/views/layouts/application.html.erb.
   A local `@import "bootstrap";` here resolved to /assets/bootstrap (404 on every page), so it was removed. */

/* Attribute Form Controls Styles */
.controls-radio-group {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: #f8f9fa;
}

.controls-radio-group .form-check {
  margin-bottom: 0.5rem;
}

.controls-radio-group .form-check:last-child {
  margin-bottom: 0;
}

.controls-radio-group .form-check-input:checked + .form-check-label {
  font-weight: 600;
  color: #0d6efd;
}

/* Modal form improvements */
#createAttributeModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

#createAttributeModal .form-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

#createAttributeModal .form-control,
#createAttributeModal .form-select {
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#createAttributeModal .form-control:focus,
#createAttributeModal .form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Permission loader - always hidden by default */
.permission-loader {
  display: none !important;
}

.permission-icon {
  display: inline-block !important;
}

/* Flash message positioning */
#flash {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
}

/* Add your custom CSS below */
body {
  font-family: Arial, sans-serif;
}
html, body { height: 100%; }

body.has-blur-bg {
  position: relative;           /* create stacking context */
  z-index: 0;
  background: none;             /* ensure no competing bg */
}

/* Optional: soft tint behind content (no background image — avoids broken asset requests) */
body.has-blur-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.25); /* or rgba(0,0,0,0.25) to darken */
  z-index: -1;
  pointer-events: none;
}


/* Organization Tree Page Specific Styles */
.org-tree-bg {
  background: #00000040  !important;
  min-height: 600px;
  padding: 40px 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.org-tree-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(1px);
  z-index: 0;
}

.org-tree-bg > * {
  position: relative;
  z-index: 1;
}

.org-tree-bg h2 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

.org-tree-bg h2 i {
  color: #f3ec13;
  text-shadow: 0 0 10px rgba(243, 236, 19, 0.6);
}

.org-tree-bg .btn {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #2c3e50;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.org-tree-bg .btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border-color: #fff;
} 

.modal-backdrop {
  z-index: 1040 !important;
}
.modal {
  z-index: 1050 !important;
}

/* Organization Tree Custom Styles */
.organization-tree {
  padding: 1rem 0;
}

.tree-node {
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.75rem;
}

.tree-node:hover {
  transform: translateX(2px);
}

.tree-node .card {
  transition: all 0.2s ease-in-out;
  margin-bottom: 0;
}

.tree-node .card-body {
  padding: 0.75rem 1rem;
}

.tree-node:hover .card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Optimize tree children spacing */
.tree-node .tree-children {
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.tree-icon {
  width: 24px;
  text-align: center;
}

.border-start {
  border-left: 2px solid #e9ecef !important;
}

/* Custom badge styles */
.badge {
  font-size: 0.75em;
  padding: 0.35em 0.65em;
}

/* Card hover effects */
.card {
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-1px);
}

/* Breadcrumb styling */
.breadcrumb {
  background-color: transparent;
  padding: 0.75rem 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #6c757d;
}

/* Statistics cards */
.card-body .row .col-6 {
  padding: 0.5rem;
}

.card-body .row .col-6 h4 {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Quick actions styling */
.btn-group .btn {
  border-radius: 0.375rem !important;
}

.btn-group .btn:not(:last-child) {
  margin-right: 0.25rem;
}

/* Modal improvements */
.modal-lg {
  max-width: 800px;
}

.modal-body {
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

/* Prevent modal blinking and improve stability */
.modal {
  z-index: 1050 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.modal-backdrop.show {
  opacity: 0.35 !important;
}

.modal-content {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 0.5rem;
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
  background-color: #f8f9fa;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Prevent hover effects on modal content */
.modal * {
  pointer-events: auto;
}

.modal-content:hover {
  transform: none !important;
}

/* Disable any transitions that might cause blinking */
.modal.fade .modal-dialog {
  transition: transform 0.15s ease-out;
}

.modal.show .modal-dialog {
  transform: none;
}

/* Form improvements */
.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Alert improvements */
.alert {
  border: none;
  border-radius: 0.5rem;
}

.alert-info {
  background-color: #e7f3ff;
  color: #0c5460;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .card-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
  
  .btn-group {
    width: 100%;
  }
  
  .btn-group .btn {
    flex: 1;
  }
}

/* Horizontal Mind Map Organization Tree Styles */
.org-horizontal-tree,
.org-horizontal-tree ul {
  padding-top: 40px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style: none;
  margin-bottom: 0;
}

.org-horizontal-tree li {
  text-align: center;
  position: relative;
  margin: 0 30px;
  padding: 0;
}

/* Enhanced spacing and layout */
.org-tree-bg .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.org-tree-bg .row {
  margin: 0;
}

.org-tree-bg .col {
  padding: 0;
}

/* Sidebar Navigation Styling */
.sidebar-nav .nav-item {
  margin-bottom: 0.25rem;
}

.sidebar-nav .nav-link {
  border-radius: 0.375rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-nav .nav-link.bg-primary.bg-opacity-10 {
  background-color: rgba(13, 110, 253, 0.15) !important;
  border-left: 3px solid #0d6efd;
}

.sidebar-nav .nav-link.bg-primary.bg-opacity-10:hover {
  background-color: rgba(13, 110, 253, 0.2) !important;
}

.sidebar-nav .nav-link i[style*="width: 20px"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav .collapse .nav-link {
  font-size: 0.9em;
}

.sidebar-nav .nav-link .flex-grow-1 {
  flex: 1 1 auto;
  min-width: 0;
}

/* Organization Tree Scrollable Container */
.organization-tree-scrollable {
  max-height: calc(100vh - 320px);
  min-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 20px;
  background-color: #fff;
  margin-top: 0;
}

/* Ensure card-body doesn't cause outer scroll */
.organization-trees-index .card-body {
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 1.25rem;
}

/* Optimize card spacing for organization trees */
.organization-trees-index .card {
  margin-bottom: 0;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.organization-trees-index .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.organization-trees-index .card-header {
  flex-shrink: 0;
}

.organization-trees-index .row.g-3 {
  flex-shrink: 0;
  margin-bottom: 1rem !important;
}

.organization-trees-index .alert {
  flex-shrink: 0;
  margin-bottom: 1rem !important;
}

/* Custom scrollbar for organization tree */
.organization-tree-scrollable::-webkit-scrollbar {
  width: 8px;
}

.organization-tree-scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.organization-tree-scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.organization-tree-scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Organization Tree Show Page - Scrollable Details Container */
.organization-trees-show .card {
  margin-bottom: 0;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.organization-trees-show .card-header {
  flex-shrink: 0;
}

.organization-trees-show .card-body.organization-tree-details-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  max-height: calc(100vh - 280px);
}

/* Custom scrollbar for organization tree show details */
.organization-tree-details-scrollable::-webkit-scrollbar {
  width: 8px;
}

.organization-tree-details-scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.organization-tree-details-scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.organization-tree-details-scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Optimize spacing in show page */
.organization-trees-show .row.g-2 {
  margin-bottom: 0;
}

.organization-trees-show .card.border-0 {
  margin-bottom: 0.5rem;
}

.organization-trees-show .card.border-0:last-child {
  margin-bottom: 0;
}

.organization-trees-show .card.border-0 .card-body {
  padding: 0.5rem 0.75rem;
}

/* Remove ALL bottom padding/margin from card-body and its children */
.organization-trees-show .card.border-0 .card-body > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"] > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"]:last-child p.text-muted {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"]:last-child p:last-child {
  margin-bottom: 0 !important;
}

/* Reduce spacing in detail cards */
.organization-trees-show .card-title {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.organization-trees-show .card.border-0 .row {
  margin-bottom: 0;
}

.organization-trees-show .card.border-0 p.mb-2 {
  margin-bottom: 0.25rem !important;
  line-height: 1.3;
}

.organization-trees-show .card.border-0 p.text-muted {
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

/* Ensure last text-muted in each column has no bottom margin */
.organization-trees-show .card.border-0 .row > [class*="col-"] p.text-muted:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .row > [class*="col-"]:last-child p.text-muted {
  margin-bottom: 0 !important;
}

/* Make cards fit content exactly */
.organization-trees-show .card.border-0 {
  margin-bottom: 0.5rem;
}

.organization-trees-show .card.border-0:last-child {
  margin-bottom: 0;
}

/* Compact child nodes grid */
.organization-trees-show .row.g-3 {
  margin-bottom: 0;
}

.organization-trees-show .row.g-3 > [class*="col-"] {
  margin-bottom: 0.5rem;
}

/* Optimize breadcrumb spacing */
.organization-trees-show .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

/* Better use of space in details cards */
.organization-trees-show .col-lg-8,
.organization-trees-show .col-lg-4 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Make cards fit content - no extra height */
.organization-trees-show .card.border-0 {
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.organization-trees-show .card.border-0 .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.organization-trees-show .card.border-0 .card-body > *:last-child {
  margin-bottom: 0 !important;
}

/* Compact layout - reduce gaps */
.organization-trees-show .row.g-2 {
  --bs-gutter-y: 0.5rem;
  --bs-gutter-x: 0.5rem;
}

/* Ensure no extra space in columns */
.organization-trees-show .col-lg-8 > .row,
.organization-trees-show .col-lg-4 > .row {
  margin-bottom: 0;
}

.organization-trees-show .col-lg-8 > .row > .col-12:last-child .card.border-0,
.organization-trees-show .col-lg-4 > .row > .col-12:last-child .card.border-0 {
  margin-bottom: 0;
}

/* Reduce white space in basic information */
.organization-trees-show .card.border-0 .row > [class*="col-"] {
  margin-bottom: 0.25rem;
}

.organization-trees-show .card.border-0 .row:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .row:last-child > [class*="col-"] {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .row:last-child > [class*="col-"] p {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .row:last-child > [class*="col-"] span {
  margin-bottom: 0 !important;
}

/* Remove bottom margin from last row in each card */
.organization-trees-show .card.border-0 .card-body .row:last-of-type {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-of-type > [class*="col-"] {
  margin-bottom: 0 !important;
}

/* Compact hierarchy and child nodes sections */
.organization-trees-show .row.g-3 {
  gap: 0.5rem !important;
}

/* Optimize child node cards */
.organization-trees-show .card.border .card-body {
  padding: 0.5rem 0.75rem;
}

.organization-trees-show .card.border {
  margin-bottom: 0.5rem;
}

/* Reduce margins in all sections */
.organization-trees-show .col-12 {
  margin-bottom: 0;
}

/* Compact text spacing */
.organization-trees-show h6.mb-1 {
  margin-bottom: 0.25rem !important;
}

.organization-trees-show .d-flex.gap-2 {
  gap: 0.5rem !important;
}

/* Reduce spacing in quick actions */
.organization-trees-show .d-grid.gap-2 {
  gap: 0.375rem !important;
  margin-bottom: 0 !important;
}

.organization-trees-show .d-grid.gap-2 > *:last-child {
  margin-bottom: 0 !important;
}

/* Make Quick Actions card compact */
.organization-trees-show .col-lg-4 .card.border-0:first-child .card-body {
  padding-bottom: 0.5rem;
}

.organization-trees-show .btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Make table more compact if present */
.organization-trees-show .table-responsive {
  margin-bottom: 0;
}

.organization-trees-show .table {
  margin-bottom: 0;
}

.organization-trees-show .table-sm {
  font-size: 0.875rem;
}

/* Reduce spacing in timestamps */
.organization-trees-show .small.text-muted {
  font-size: 0.85rem;
  margin-bottom: 0 !important;
}

.organization-trees-show .small.text-muted p {
  margin-bottom: 0.375rem;
  line-height: 1.3;
}

.organization-trees-show .small.text-muted p.mb-1 {
  margin-bottom: 0.5rem !important;
}

.organization-trees-show .small.text-muted p.mb-0 {
  margin-bottom: 0 !important;
}

.organization-trees-show .small.text-muted p:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .small.text-muted strong {
  display: block;
  margin-bottom: 0.125rem;
}

/* Make Timestamps card compact */
.organization-trees-show .col-lg-4 .card.border-0:last-child .card-body {
  padding-bottom: 0.5rem;
}

/* Make all sections more compact */
.organization-trees-show .col-md-8 > .row.g-2,
.organization-trees-show .col-md-4 > .row.g-2 {
  --bs-gutter-y: 0.5rem;
}

/* Remove extra bottom margin from last elements - ensure no bottom space */
.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"] p.text-muted:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"]:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"]:last-child p:last-child {
  margin-bottom: 0 !important;
}

.organization-trees-show .card.border-0 .card-body .row:last-child > [class*="col-"]:last-child span:last-child {
  margin-bottom: 0 !important;
}

/* Fixed Table Header and Footer Styling for Index Pages */
.table-fixed-wrapper {
  position: relative;
  max-height: calc(100vh - 350px);
  overflow: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.table-fixed-wrapper table {
  margin-bottom: 0;
}

.table-fixed-wrapper thead {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #f8f9fa;
}

.table-fixed-wrapper thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  white-space: nowrap;
}

.table-fixed-wrapper tbody {
  background-color: #fff;
}

.table-fixed-wrapper tfoot {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background-color: #f8f9fa;
}

.table-fixed-wrapper tfoot td,
.table-fixed-wrapper tfoot th {
  background-color: #f8f9fa;
  border-top: 2px solid #dee2e6;
  font-weight: 600;
}

/* Alternative approach for tables in card-body */
.card-body .table-responsive.table-fixed-wrapper {
  max-height: calc(100vh - 400px);
}

/* Ensure proper scrolling */
.table-fixed-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-fixed-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-fixed-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.table-fixed-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Constrain tree width and prevent sidebar interference */
.org-tree {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .org-tree {
    padding: 20px 10px;
  }
  
  .org-node {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  .org-tree-bg h2 {
    font-size: 1.8rem;
  }
}



.org-horizontal-tree li::before,
.org-horizontal-tree li::after,
.org-horizontal-tree ul::before {
  border-color: #fff;
  opacity: 0.8;
}

.org-horizontal-tree li:only-child::before,
.org-horizontal-tree li:only-child::after {
  display: none;
}

.org-horizontal-tree li:first-child::before,
.org-horizontal-tree li:last-child::after {
  border: none;
}

.org-horizontal-tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #fff;
  height: 40px;
  z-index: 1;
  transform: translateX(-50%);
}

/* .org-horizontal-tree > li > .org-node-wrapper::before {
  display: none;
} */

/*  sadfghjj  */

.org-tree {
  display: flex;
  justify-content: center;
  padding: 0px 0px;
  margin-top: 0px;
}

.org-node-wrapper {
  text-align: center;
  margin: 0 20px;
  position: relative;
  flex-shrink: 0;
}

.org-node {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(44, 62, 80, 0.95);
  color: #fff;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
  min-width: 80px;
  max-width: 120px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-node:hover {
  background: rgba(44, 62, 80, 1);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: #f3ec13;
  color: #f3ec13;
}

.org-children {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  position: relative;
  padding: 0 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.org-node-wrapper::after {
  content: '';
  position: absolute;
  top: 50px;
  left: 50%;
  width: 4px;
  height: 50px;
  background: linear-gradient(180deg, #f3ec13 0%, #ffd700 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(243, 236, 19, 0.8);
  border-radius: 2px;
}

.org-children > .org-node-wrapper {
  margin: 0 15px;
}

.org-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 4px;
  background: linear-gradient(90deg, #f3ec13 0%, #ffd700 50%, #f3ec13 100%);
  box-shadow: 0 0 8px rgba(243, 236, 19, 0.8);
  border-radius: 2px;
}

/* Collapsible Tree Styles - Tree-like Design */
.collapsible-tree {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 30px;
  margin: 0 auto;
  max-width: 700px;
  height: calc(100vh - 80px);
  min-height: 700px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
  position: relative;
  flex-grow: 1;
}

/* Hide scrollbar when not needed */
.collapsible-tree:not(:hover)::-webkit-scrollbar {
  width: 0px;
}

.collapsible-tree:hover::-webkit-scrollbar {
  width: 8px;
}

.collapsible-tree::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.collapsible-tree::-webkit-scrollbar-thumb {
  background: #8B4513;
  border-radius: 4px;
}

.collapsible-tree::-webkit-scrollbar-thumb:hover {
  background: #654321;
}

.tree-node-item {
  margin-bottom: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.tree-node-item:hover {
  background: rgba(34, 139, 34, 0.05);
  border-radius: 6px;
  padding: 2px;
  margin-left: -2px;
}

.tree-node-content {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.tree-node-content:hover {
  background: rgba(34, 139, 34, 0.08);
  border-radius: 6px;
}

.tree-toggle {
  min-width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: all 0.3s ease;
  background: #8B4513;
  border: 1px solid #654321;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  margin-right: 8px;
}

.tree-toggle:hover {
  background: #654321;
  border-color: #4a2c1a;
  transform: scale(1.1);
}

.tree-placeholder {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B4513;
  font-size: 0.7rem;
  font-weight: bold;
  margin-right: 8px;
}

.tree-node-info {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}

.tree-node-name {
  font-weight: 600;
  color: #228B22;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2px 4px;
  border-radius: 4px;
}

.tree-node-name:hover {
  color: #32CD32;
  text-decoration: underline;
  background: rgba(34, 139, 34, 0.1);
}

.tree-node-type {
  background: linear-gradient(135deg, #228B22 0%, #32CD32 100%);
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(34, 139, 34, 0.3);
}

.tree-children {
  margin-top: 8px;
  padding-left: 30px;
  border-left: 4px solid #8B4513;
  margin-left: 14px;
  position: relative;
}

.tree-children .tree-node-item {
  position: relative;
}

.tree-children .tree-node-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 18px;
  height: 4px;
  background: #8B4513;
  border-radius: 2px;
  z-index: 10;
}

.tree-children .tree-node-item::after {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid #8B4513;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
  z-index: 10;
}

/* Additional connecting lines for deeper levels */
.tree-children .tree-children {
  border-left: 4px solid #A0522D;
}

.tree-children .tree-children .tree-node-item::before {
  background: #A0522D;
}

.tree-children .tree-children .tree-node-item::after {
  border-left-color: #A0522D;
}

.tree-children .tree-children .tree-children {
  border-left: 4px solid #CD853F;
}

.tree-children .tree-children .tree-children .tree-node-item::before {
  background: #CD853F;
}

.tree-children .tree-children .tree-children .tree-node-item::after {
  border-left-color: #CD853F;
}

/* Nested levels get lighter colors */
.tree-children .tree-children .tree-node-name {
  color: #90EE90;
}

.tree-children .tree-children .tree-node-type {
  background: linear-gradient(135deg, #90EE90 0%, #98FB98 100%);
  color: #2F4F2F;
}

.tree-children .tree-children .tree-children .tree-node-name {
  color: #98FB98;
}

.tree-children .tree-children .tree-children .tree-node-type {
  background: linear-gradient(135deg, #98FB98 0%, #F0FFF0 100%);
  color: #2F4F2F;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .collapsible-tree {
    max-width: 95%;
    padding: 20px;
    margin: 15px auto;
  }
  
  .tree-node-content {
    padding: 4px 6px;
  }
  
  .tree-node-name {
    font-size: 0.9rem;
  }
  
  .tree-node-type {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  
  .tree-children {
    padding-left: 20px;
    margin-left: 10px;
  }
}

/* Tree container styling */
.org-tree-bg {
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
  min-height: 100vh;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

/* Header container styling */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 30px;
}

.header-title {
  color: #8B4513;
  text-align: center;
  margin: 0;
  font-weight: 700;
  font-size: 1.8rem;
  text-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
}

.header-title i {
  color: #D2691E;
  margin-right: 12px;
  font-size: 2rem;
}

/* Back to list link styling */
.org-tree-bg .btn-outline-secondary {
  display: none;
}

.org-tree-bg .back-link {
  color: #0066cc;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.org-tree-bg .back-link:hover {
  color: #0052a3;
  text-decoration: underline;
  transform: translateY(-50%) translateX(-2px);
}

/* Collapsible Tree Styles - Tree-like Design */
.collapsible-tree {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 30px;
  margin: 0 auto;
  max-width: 700px;
  height: calc(100vh - 80px);
  min-height: 700px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
  position: relative;
  flex-grow: 1;
}

/* Search functionality */
.search-container {
  max-width: 400px;
  margin: 0 auto 20px auto;
}

.search-results {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  position: relative;
}

.search-result-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(52, 152, 219, 0.05);
}

.search-result-link {
  color: #228B22;
  text-decoration: none;
  font-weight: 500;
}

.search-result-link:hover {
  color: #32CD32;
  text-decoration: underline;
}

.search-result-type {
  background: #f39c12;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
}

.no-results, .search-error {
  padding: 12px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

/* Loading states */
/* SDG tiles */
.sdg-square, .sdg-sprite {
  display: block;
  width: 100%;
  padding-top: 100%; /* square */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto; /* use sprite natural size */
  position: relative;
}

.sdg-square--inactive {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none;
}

/* SDG Popover theme */
.popover.sdg-popover {
  --bs-popover-bg: #000;
  --bs-popover-body-color: #fff;
  --bs-popover-border-color: rgba(255,255,255,0.2);
  --bs-popover-header-bg: #000;
  --bs-popover-header-color: #fff;
  color: #fff;
  background-color: #000;
  border-color: rgba(255,255,255,0.2);
}

.popover.sdg-popover .popover-body {
  color: #fff;
}

.popover.sdg-popover .popover-header {
  background-color: #000;
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.2);
}
.loading-placeholder {
  padding: 20px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

.tree-children-loading {
  border-left: 2px dashed #8B4513;
  opacity: 0.7;
}

.no-children {
  padding: 12px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
  font-size: 0.9rem;
}

.error-loading {
  padding: 12px;
  text-align: center;
  color: #dc3545;
  font-size: 0.9rem;
}

/* Performance optimizations */
.tree-node-item {
  contain: layout style;
}

.tree-children {
  contain: layout style;
}

/* Responsive search */
@media (max-width: 768px) {
  .search-container {
    max-width: 100%;
  }
  
  .search-results {
    max-height: 200px;
  }
}

/* Drag and Drop Styles */
.attribute-item {
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.attribute-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.attribute-item:active {
  cursor: grabbing;
}

.attribute-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

/* Template Selection Styles */
.template-checkbox {
  margin-right: 0.5rem;
}

.template-checkbox:checked + label {
  color: #0d6efd;
  font-weight: 600;
}

/* Modal Enhancements */
.modal-xl {
  max-width: 90%;
}

/* Attribute Preview Styles */
.attribute-preview {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.attribute-preview:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

/* Step Indicator Styles */
.step-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.step-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #dee2e6;
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #6c757d;
}

.step.active {
  border-color: #0d6efd;
  color: #0d6efd;
}

.step.completed {
  border-color: #198754;
  background: #198754;
  color: white;
}

/* Template Card Enhancements */
.template-card {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.template-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.1);
}

.template-card.selected {
  border-color: #0d6efd;
  background: rgba(13, 110, 253, 0.05);
}

/* Attribute Type Badges */
.attribute-type-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.attribute-type-badge.dynamic {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.attribute-type-badge.static {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Loading States */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0d6efd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success/Error States */
.success-fade {
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Responsive Enhancements */
@media (max-width: 768px) {
  .modal-xl {
    max-width: 95%;
  }
  
  .step-indicator {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .step-indicator::before {
    display: none;
  }
  
  .attribute-item {
    margin-bottom: 0.5rem;
  }
}

/* Custom Scrollbar for Attribute Containers */
#availableAttributes::-webkit-scrollbar,
#selectedAttributes::-webkit-scrollbar {
  width: 6px;
}

#availableAttributes::-webkit-scrollbar-track,
#selectedAttributes::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#availableAttributes::-webkit-scrollbar-thumb,
#selectedAttributes::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#availableAttributes::-webkit-scrollbar-thumb:hover,
#selectedAttributes::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ============================================
   Authentication Pages Styles
   ============================================ */

.auth-container {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.auth-container .row {
  height: 100%;
  margin: 0;
}

/* Left Side - News Section */
.auth-news-section {
  background: #E8F5E9;
  position: relative;
  overflow: hidden;
  padding: 60px 50px;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.auth-news-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

.auth-news-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.auth-brand-section {
  text-align: center;
}

.auth-brand-title {
  font-size: 3rem;
  font-weight: 700;
  color: #103D2E;
  margin-bottom: 0.5rem;
  text-shadow: none;
}

.auth-brand-subtitle {
  font-size: 1.1rem;
  color: #2E7D32;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.auth-news-header {
  border-bottom: 2px solid rgba(27, 94, 32, 0.2);
  padding-bottom: 1rem;
}

.auth-news-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #103D2E;
  margin: 0;
}

/* Horizontal Carousel Wrapper */
.auth-news-carousel-wrapper {
  position: relative;
  flex: 1;
  margin-top: 1rem;
  overflow: hidden;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.auth-news-carousel-container {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.auth-news-list {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 10px 60px;
  height: 100%;
  align-items: center;
  width: 100%;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.auth-news-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.auth-news-item {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(27, 94, 32, 0.2);
  flex: 0 0 320px;
  min-width: 320px;
  max-width: 320px;
  width: 320px;
  height: 320px;
  box-sizing: border-box;
  justify-content: space-between;
  flex-shrink: 0;
  scroll-snap-align: center;
}

.auth-news-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(27, 94, 32, 0.3);
}

/* Navigation Arrows */
.auth-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.auth-carousel-nav:hover {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
}

.auth-carousel-prev {
  left: 10px;
}

.auth-carousel-next {
  right: 10px;
}

/* Pagination Dots */
.auth-carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 1rem;
  z-index: 10;
  position: relative;
}

.auth-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(27, 94, 32, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.auth-carousel-dot:hover {
  background: rgba(27, 94, 32, 0.5);
  transform: scale(1.2);
}

.auth-carousel-dot.active {
  background: rgba(27, 94, 32, 0.8);
  width: 24px;
  border-radius: 5px;
}

/* Slide Counter */
.auth-carousel-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 10;
}

.auth-news-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: rgba(27, 94, 32, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.auth-news-content-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.auth-news-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #103D2E;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.auth-news-item-text {
  font-size: 0.9rem;
  color: #2E7D32;
  line-height: 1.6;
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.auth-news-date {
  font-size: 0.8rem;
  color: #4CAF50;
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
}

.auth-news-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(27, 94, 32, 0.2);
}

/* Right Side - Form Section */
.auth-form-section {
  background: #b6e7c7;
  padding: 40px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-form-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.auth-form-header {
  text-align: center;
}

.auth-form-title {
  font-size: 2rem;
  font-weight: 700;
  color: #103D2E;
  margin-bottom: 0.5rem;
}

.auth-form-subtitle {
  font-size: 1rem;
  color: rgba(16, 61, 46, 0.9);
  margin: 0;
}

.auth-form {
  margin-top: 2rem;
}

.auth-form-group {
  margin-bottom: 1.5rem;
}

.auth-form-label {
  font-weight: 600;
  color: #103D2E;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.95rem;
}

.auth-form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #103D2E;
  background-color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.auth-form-control:focus {
  color: #103D2E;
  background-color: #ffffff;
  border-color: #ffffff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}

.auth-form-control::placeholder {
  color: #81C784;
}

.auth-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 0.25rem;
  cursor: pointer;
}

.auth-checkbox-label {
  margin-left: 0.5rem;
  color: rgba(16, 61, 46, 0.9);
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}

.auth-forgot-link {
  color: #103D2E;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.auth-forgot-link:hover {
  color: rgba(16, 61, 46, 0.8);
  text-decoration: underline;
}

/* NOTE: the old white-button .auth-submit-btn rules were removed here. They were superseded by
   the gradient version further down, but their :hover set `background:#fff` — and since the
   `background` shorthand also clears background-image, hovering wiped the gradient and left
   white text on a white fill (the "Sign In button goes blank on hover" bug). Keep only the
   gradient definition + its filter-based hover. */
.auth-submit-btn{
  width:100%;padding:0.875rem 1.5rem;font-size:1rem;cursor:pointer;
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;margin-top:0.5rem;
}
.auth-submit-btn:hover{transform:translateY(-1px)}
.auth-submit-btn:active{transform:translateY(0)}

.auth-form-footer {
  margin-top: 2rem;
}

.auth-footer-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin: 0;
}

.auth-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.auth-link:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

/* Alert Styles for Auth Pages */
.auth-form .alert {
  border-radius: 8px;
  border: none;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.auth-form .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

.auth-form .alert-success {
  background-color: #d4edda;
  color: #155724;
}

/* Responsive Design */
@media (max-width: 991.98px) {
  .auth-news-section {
    display: none !important;
  }

  .auth-form-section {
    padding: 30px 20px;
  }

  .auth-form-container {
    max-width: 100%;
  }

  .auth-form-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 575.98px) {
  .auth-form-section {
    padding: 20px 15px;
  }

  .auth-form-title {
    font-size: 1.5rem;
  }

  .auth-form-subtitle {
    font-size: 0.9rem;
  }

  .auth-form-group {
    margin-bottom: 1.25rem;
  }

  .auth-form-control {
    padding: 0.65rem 0.875rem;
    font-size: 0.95rem;
  }
}

/* Animation for News Items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-news-item {
  animation: fadeInUp 0.5s ease-out;
}

.auth-news-item:nth-child(1) {
  animation-delay: 0.1s;
}

.auth-news-item:nth-child(2) {
  animation-delay: 0.2s;
}

.auth-news-item:nth-child(3) {
  animation-delay: 0.3s;
}

.auth-news-item:nth-child(4) {
  animation-delay: 0.4s;
}



/* ============================================================
   Resustain design system — tokens + rs- components
   (folded into application.css so it ships via the existing
    precompiled stylesheet; rs- prefix avoids Bootstrap clashes)
   ============================================================ */
/* =====================================================================
   Resustain design system — tokens + components.
   All component classes are `rs-` prefixed so they never collide with
   Bootstrap; only :root custom properties are global (additive).
   ===================================================================== */
:root{
  /* Position Green palette */
  --rs-evergreen:#103D2E; --rs-evergreen-700:#0B2E22; --rs-sidebar:#0C3025; --rs-sidebar-hi:#174836;
  --rs-sprout:#34C977; --rs-sprout-soft:#DCEEE2;
  --rs-rose:#F3C6D4; --rs-rose-ink:#8A3E55;
  --rs-ink:#112E26; --rs-muted:#5B6E63; --rs-faint:#8B9A8F;
  --rs-paper:#EAF3EC; --rs-surface:#FFFFFF; --rs-line:#DBE7DE; --rs-line-soft:#E8F0EA;
  --rs-ok:#2F8F5B; --rs-ok-bg:#E7F2EC; --rs-warn:#B5832B; --rs-warn-bg:#F7EFDD;
  --rs-crit:#BF5340; --rs-crit-bg:#F8E7E2; --rs-info:#3F6F8F; --rs-info-bg:#E6EEF3;
  --rs-slate:#647A88; --rs-slate-bg:#EBEFF1;
  --rs-sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --rs-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --rs-r:10px; --rs-r-sm:7px;
  --rs-shadow:0 1px 2px rgba(16,33,28,.04),0 4px 16px rgba(16,33,28,.05);
}

.rs-serif{font-family:var(--rs-serif)}
.rs-num{font-variant-numeric:tabular-nums}

/* ---------- App shell ---------- */
.rs-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--rs-paper);
  font-family:var(--rs-sans);color:var(--rs-ink);font-size:14px;line-height:1.5}
.rs-sidebar{background:var(--rs-sidebar);color:#D9E6DD;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden}
/* Only the nav scrolls: brand pinned on top, foot + powered-by pinned at the bottom.
   Chromium ignores ::-webkit-scrollbar styling whenever the standard scrollbar-* properties
   are set, so those are scoped to engines without the pseudo (i.e. Firefox). */
.rs-sidebar-scroll{flex:0 1 auto;min-height:0;overflow-y:auto}
@supports not selector(::-webkit-scrollbar){
  .rs-sidebar-scroll{scrollbar-width:thin;scrollbar-color:rgba(16,61,46,.35) transparent}
}
.rs-sidebar-scroll::-webkit-scrollbar{width:8px}
.rs-sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.rs-sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(16,61,46,.30);border-radius:4px}
.rs-sidebar-scroll::-webkit-scrollbar-thumb:hover{background:rgba(16,61,46,.50)}
.rs-sidebar .foot,.rs-sidebar .rs-powered{flex:none}
/* "powered by" credit ALWAYS pinned to the very bottom (Kevin 20260718). The divider above it is
   now clearly visible (see the .rs-powered border-top), so it reads as an anchored footer at the
   bottom rather than an orphaned badge. margin-top:auto pushes it down; nav flex:0 keeps nav at
   content height so the empty space sits between the nav and the bottom footer. */
.rs-sidebar .rs-powered{margin-top:auto}
/* Cap the per-client resustain-logo branding size (e.g. 200x100, injected inline by the helper) to
   a footer-appropriate size — the branding size still applies at its larger placements (sign-in,
   header). Sized so "Powered by resustAIn" reads clearly in the sidebar footer. Kevin 20260718. */
.rs-sidebar .rs-powered img{height:34px !important;width:auto !important;max-width:92% !important}
/* Client logo on a clean white card — rounded, padded, soft shadow, centered (Kevin 20260718). */
.rs-brand{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px 14px 10px;padding:12px 16px;background:#fff;border-radius:14px;
  box-shadow:0 2px 10px rgba(23,58,46,.10)}
.rs-brand .rs-client-logo{max-height:38px;width:auto;max-width:100%;object-fit:contain;display:block}
.rs-brand .wm{font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff}
.rs-brand .wm b{color:var(--rs-sprout)}
.rs-tenant{margin:0 14px 10px;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:var(--rs-r-sm);
  display:flex;align-items:center;gap:10px}
.rs-tenant .av{width:28px;height:28px;border-radius:6px;background:var(--rs-sprout);color:#06291B;
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.rs-tenant .t{font-size:12.5px;font-weight:600;color:#fff;line-height:1.2}
.rs-tenant .s{font-size:11px;color:#9DB6A6}
.rs-navgroup{padding:6px 14px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.rs-navgroup:last-of-type{border-bottom:0}
.rs-navgroup>.gl{display:flex;align-items:center;width:100%;background:none;border:0;color:#8FA997;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:10px 8px 6px;cursor:pointer}
.rs-navgroup>.gl .chev{margin-left:auto;transition:transform .18s}
.rs-navgroup.collapsed>.gl .chev{transform:rotate(-90deg)}
.rs-navgroup.collapsed .rs-items{display:none}
.rs-items{display:flex;flex-direction:column;gap:2px}
.rs-nav{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--rs-r-sm);
  color:#CFE0D5;font-size:13.5px;font-weight:500;position:relative;border:0;background:none;width:100%;text-align:left;text-decoration:none}
.rs-nav i{width:18px;text-align:center;flex:none;opacity:.9}
.rs-nav:hover{background:var(--rs-sidebar-hi);color:#fff}
.rs-nav.active{background:var(--rs-sidebar-hi);color:#fff;font-weight:600}
.rs-nav.active::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:3px;
  background:var(--rs-sprout);border-radius:0 3px 3px 0}
.rs-nav .badge{margin-left:auto;background:rgba(63,160,107,.25);color:#BFE6CE;font-size:11px;
  padding:1px 7px;border-radius:20px;font-weight:600}
.rs-subitems{display:flex;flex-direction:column;gap:1px;margin:2px 0 4px 29px;padding-left:10px;
  border-left:1px solid rgba(255,255,255,.12)}
/* Categories panel under Data Entry: header + search + a scroll list whose rows NEVER
   flex-shrink (a max-height on the flex column itself compressed every row to half height —
   the "garbled" sidebar). Only .rs-cat-list scrolls, with an always-visible thumb. */
.rs-cat-panel{background:rgba(255,255,255,.55);border:1px solid rgba(16,61,46,.10);
  border-radius:12px;padding:10px;margin-right:10px}
.rs-cat-head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#3c5d50;margin-bottom:6px}
.rs-cat-search{width:100%;border:1px solid rgba(16,61,46,.18);border-radius:8px;
  padding:5px 10px;font-size:12.5px;margin-bottom:8px;background:#fff;color:#173a2e}
.rs-cat-search:focus{outline:0;border-color:var(--rg-sprout,#3FBE81);
  box-shadow:0 0 0 3px rgba(63,190,129,.18)}
.rs-cat-list{max-height:38vh;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px}
.rs-cat-list .rs-subnav{flex:0 0 auto;color:#2c4a3d;font-size:13px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-cat-list .rs-subnav:hover{background:rgba(63,190,129,.15);color:#173a2e}
.rs-cat-list .rs-subnav.active{background:var(--rs-sidebar-hi,#174836);color:#fff;font-weight:600}
.rs-cat-list::-webkit-scrollbar{width:6px}
.rs-cat-list::-webkit-scrollbar-thumb{background:rgba(16,61,46,.30);border-radius:3px}
.rs-cat-list::-webkit-scrollbar-track{background:rgba(16,61,46,.06);border-radius:3px}
@supports not selector(::-webkit-scrollbar){
  .rs-cat-list{scrollbar-width:thin;scrollbar-color:rgba(16,61,46,.35) transparent}
}
.rs-subnav{display:block;padding:6px 8px;border-radius:6px;color:#A9C2B2;font-size:12.5px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-subnav:hover{background:var(--rs-sidebar-hi);color:#fff}
.rs-subnav.active{background:var(--rs-sidebar-hi);color:#fff;font-weight:600}
.rs-sidebar .foot{padding:14px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;color:#88A293;display:flex;align-items:center;gap:8px}

/* ---------- Top bar ---------- */
.rs-main{display:flex;flex-direction:column;min-width:0}
.rs-topbar{height:60px;background:var(--rs-evergreen);border-bottom:1px solid var(--rs-line);
  display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}
.rs-search{flex:1;max-width:440px;display:flex;align-items:center;gap:9px;background:var(--rs-paper);
  border:1px solid var(--rs-line);border-radius:var(--rs-r-sm);padding:8px 12px;color:var(--rs-muted)}
.rs-search input{border:0;background:none;outline:none;font-family:inherit;font-size:13.5px;color:var(--rs-ink);width:100%}
.rs-iconbtn{width:38px;height:38px;border-radius:var(--rs-r-sm);border:1px solid var(--rs-line);
  background:var(--rs-surface);display:grid;place-items:center;color:var(--rs-muted);position:relative;cursor:pointer}
.rs-iconbtn:hover{border-color:var(--rs-sprout);color:var(--rs-evergreen)}
.rs-userchip{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px;border-radius:30px;
  border:1px solid var(--rs-line);background:var(--rs-surface);cursor:pointer}
.rs-userchip .av{width:30px;height:30px;border-radius:50%;background:var(--rs-evergreen);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12px}
.rs-userchip .nm{font-size:13px;font-weight:600}.rs-userchip .rl{font-size:11px;color:var(--rs-muted)}

/* ---------- Content & page header ---------- */
.rs-content{padding:26px 30px 64px;max-width:1280px;width:100%;flex:1}
/* Footer is pinned to the viewport bottom in ONE fixed place on every page — it never moves
   with sidebar or page scrolling (Kevin, 20260717). Offset left by the sidebar column;
   .rs-content carries bottom padding so the last content is never hidden behind it. */
.rs-footer{position:fixed;bottom:0;left:260px;right:0;z-index:900;text-align:right;
  padding:10px 26px;color:var(--rs-faint);font-size:12px;
  background:var(--rs-paper,#f4f8f5);border-top:1px solid var(--rs-line,#e3ece6)}
@media (max-width:980px){.rs-footer{left:64px}}
.rs-crumb{font-size:12px;color:var(--rs-faint);margin-bottom:12px}
.rs-crumb b{color:var(--rs-muted);font-weight:500}
.rs-pagehead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.rs-eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rs-sprout);font-weight:700;margin-bottom:7px}
.rs-pagehead h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
.rs-pagehead .purpose{margin:8px 0 0;color:var(--rs-muted);max-width:62ch;font-size:14px}
.rs-pagehead .actions{margin-left:auto;display:flex;gap:10px;align-items:center}

.rs-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--rs-r-sm);font-weight:600;
  font-size:13.5px;padding:10px 16px;border:1px solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none}
.rs-btn.primary{background:var(--rs-evergreen);color:#fff}.rs-btn.primary:hover{background:var(--rs-evergreen-700)}
.rs-btn.ghost{background:var(--rs-surface);color:var(--rs-ink);border-color:var(--rs-line)}
.rs-btn.ghost:hover{border-color:var(--rs-sprout);color:var(--rs-evergreen)}
.rs-btn.subtle{background:var(--rs-sprout-soft);color:var(--rs-evergreen)}

/* expander */
.rs-learn{background:var(--rs-surface);border:1px solid var(--rs-line);border-radius:var(--rs-r);margin-bottom:22px;overflow:hidden}
.rs-learn>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:13px;font-weight:600;color:var(--rs-evergreen)}
.rs-learn>summary::-webkit-details-marker{display:none}
.rs-learn>summary .chev{margin-left:auto;transition:transform .18s;color:var(--rs-muted)}
.rs-learn[open]>summary .chev{transform:rotate(180deg)}
.rs-learn .body{padding:0 16px 16px 42px;color:var(--rs-muted);font-size:13.5px;max-width:80ch}

/* ---------- Cards & grid ---------- */
.rs-grid{display:grid;gap:18px}
.rs-card{background:var(--rs-surface);border:1px solid var(--rs-line);border-radius:var(--rs-r);box-shadow:var(--rs-shadow)}
.rs-panel .ph{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--rs-line-soft)}
.rs-panel .ph h3{margin:0;font-size:15px;font-weight:700}
.rs-panel .ph .sub{font-size:12px;color:var(--rs-muted);margin-top:2px}
.rs-kpi{padding:16px 17px}
.rs-kpi .lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--rs-muted);font-weight:600}
.rs-kpi .val{font-family:var(--rs-serif);font-size:33px;font-weight:600;letter-spacing:-.01em;margin:8px 0 2px}
.rs-kpi .val small{font-size:15px;color:var(--rs-faint);font-weight:400;font-family:var(--rs-sans)}
.rs-kpi .delta{font-size:12px;font-weight:600}.rs-kpi .delta.up{color:var(--rs-ok)}.rs-kpi .delta.down{color:var(--rs-crit)}

/* ---------- Table ---------- */
.rs-tbl-wrap{overflow-x:auto}
.rs-table{width:100%;border-collapse:collapse;font-size:13.5px}
.rs-table thead th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--rs-faint);
  font-weight:700;padding:11px 16px;border-bottom:1px solid var(--rs-line);white-space:nowrap;background:#FAFCFA}
.rs-table tbody td{padding:13px 16px;border-bottom:1px solid var(--rs-line-soft);vertical-align:middle}
.rs-table tbody tr:hover{background:#FAFCFA}
.rs-table tbody tr:last-child td{border-bottom:0}

/* status pills */
.rs-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px 3px 8px;border-radius:20px}
.rs-status .d{width:7px;height:7px;border-radius:50%}
.rs-status.ok{background:var(--rs-ok-bg);color:#1E6B41}.rs-status.ok .d{background:var(--rs-ok)}
.rs-status.warn{background:var(--rs-warn-bg);color:#8A6212}.rs-status.warn .d{background:var(--rs-warn)}
.rs-status.crit{background:var(--rs-crit-bg);color:#9A3B2B}.rs-status.crit .d{background:var(--rs-crit)}
.rs-status.draft{background:var(--rs-slate-bg);color:#48606C}.rs-status.draft .d{background:var(--rs-slate)}

/* empty state */
.rs-empty{padding:54px 24px;text-align:center}
.rs-empty .ill{width:64px;height:64px;border-radius:16px;background:var(--rs-sprout-soft);color:var(--rs-evergreen);
  display:grid;place-items:center;margin:0 auto 18px}
.rs-empty h3{margin:0 0 8px;font-size:18px;font-weight:700}
.rs-empty p{margin:0 auto 18px;color:var(--rs-muted);max-width:48ch}

/* progress bar */
.rs-bar{height:7px;border-radius:6px;background:var(--rs-line);overflow:hidden}
.rs-bar>i{display:block;height:100%;border-radius:6px;background:var(--rs-ok)}
.rs-bar.warn>i{background:var(--rs-warn)}.rs-bar.crit>i{background:var(--rs-crit)}

:where(.rs-shell) :focus-visible{outline:2px solid var(--rs-sprout);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rs-shell *{transition:none!important}}
@media (max-width:980px){.rs-shell{grid-template-columns:64px 1fr}
  .rs-brand .wm,.rs-tenant .t,.rs-tenant .s,.rs-navgroup .gl span,.rs-nav span,.rs-nav .badge,.rs-sidebar .foot span{display:none}
  /* Logo images have no icon-only equivalent (unlike text spans, which just collapse to
     nothing) — without this a full-size client/resustain logo overflows the 64px rail. */
  .rs-brand .rs-client-logo,.rs-powered{display:none}}

/* User-triggered collapse (topbar hamburger) → 64px icon-only rail. Everything textual/decorative
   is hidden with !important because the brand logo and powered-by carry INLINE display styles
   (from client_logo_tag / the sidebar markup) that a plain stylesheet rule can't override. */
.rs-shell{transition:grid-template-columns .2s ease}
.rs-shell.rs-collapsed{grid-template-columns:72px 1fr}
.rs-shell.rs-collapsed .rs-brand{padding:14px 0;justify-content:center;background:transparent;box-shadow:none;margin:6px 0}
.rs-shell.rs-collapsed .rs-brand .wm,
.rs-shell.rs-collapsed .rs-brand .rs-client-logo,
.rs-shell.rs-collapsed .rs-tenant,
.rs-shell.rs-collapsed .rs-navgroup > .gl span,
.rs-shell.rs-collapsed .rs-navgroup > .gl .chev,
.rs-shell.rs-collapsed .rs-navgroup > .gl .bi-lock-fill,
.rs-shell.rs-collapsed .rs-nav span,
.rs-shell.rs-collapsed .rs-nav .badge,
.rs-shell.rs-collapsed .rs-nav [data-bs-toggle="tooltip"],
.rs-shell.rs-collapsed .rs-subitems,
.rs-shell.rs-collapsed .rs-cat-panel,
.rs-shell.rs-collapsed .foot span,
.rs-shell.rs-collapsed .rs-powered{display:none !important}
/* Center the icons in the narrow rail */
.rs-shell.rs-collapsed .rs-navgroup{padding-left:8px;padding-right:8px}
.rs-shell.rs-collapsed .rs-nav{justify-content:center;padding-left:0;padding-right:0}
.rs-shell.rs-collapsed .rs-nav i{margin:0}
.rs-shell.rs-collapsed .rs-navgroup > .gl{justify-content:center;padding:8px 0}
.rs-shell.rs-collapsed .foot{justify-content:center}
.rs-collapse-btn{margin-right:auto}


/* ============================================================
   Resustain — profile dropdown + Bootstrap re-skin
   ============================================================ */

/* profile dropdown (top bar) */
.rs-usermenu{position:relative}
.rs-usermenu-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--rs-surface);
  border:1px solid var(--rs-line);border-radius:var(--rs-r);box-shadow:var(--rs-shadow);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s;z-index:50}
.rs-usermenu.open .rs-usermenu-panel{opacity:1;visibility:visible;transform:translateY(0)}
.rs-usermenu-panel .upanel-logo{padding:12px 10px;border-bottom:1px solid var(--rs-line-soft);margin-bottom:6px}
.rs-usermenu-panel .uhead{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;
  border-bottom:1px solid var(--rs-line-soft);margin-bottom:6px}
.rs-usermenu-panel .uhead .av{width:36px;height:36px;border-radius:50%;background:var(--rs-evergreen);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.rs-usermenu-panel .uhead .nm{font-size:13.5px;font-weight:600;color:var(--rs-ink)}
.rs-usermenu-panel .uhead .em{font-size:12px;color:var(--rs-muted);word-break:break-all}
.rs-usermenu-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--rs-r-sm);
  font-size:13.5px;font-weight:500;color:var(--rs-ink);text-decoration:none;width:100%;border:0;background:none;text-align:left}
.rs-usermenu-item:hover{background:var(--rs-paper)}
.rs-usermenu-item.logout{color:var(--rs-crit)}.rs-usermenu-item.logout:hover{background:var(--rs-crit-bg)}

/* Bootstrap re-skin: map default blue components to the evergreen theme, scoped to the app content */
.rs-content .btn-primary{--bs-btn-bg:var(--rs-evergreen);--bs-btn-border-color:var(--rs-evergreen);
  --bs-btn-hover-bg:var(--rs-evergreen-700);--bs-btn-hover-border-color:var(--rs-evergreen-700);
  --bs-btn-active-bg:var(--rs-evergreen-700);--bs-btn-active-border-color:var(--rs-evergreen-700);
  --bs-btn-disabled-bg:var(--rs-evergreen);--bs-btn-disabled-border-color:var(--rs-evergreen)}
.rs-content .btn-outline-primary{--bs-btn-color:var(--rs-evergreen);--bs-btn-border-color:var(--rs-evergreen);
  --bs-btn-hover-bg:var(--rs-evergreen);--bs-btn-hover-border-color:var(--rs-evergreen);
  --bs-btn-active-bg:var(--rs-evergreen);--bs-btn-active-border-color:var(--rs-evergreen)}
.rs-content .text-primary{color:var(--rs-evergreen)!important}
.rs-content .link-primary{color:var(--rs-evergreen)!important}
.rs-content .bg-primary,.rs-content .badge.bg-primary,.rs-content .text-bg-primary{background-color:var(--rs-evergreen)!important}
.rs-content .bg-primary.bg-opacity-10{background-color:var(--rs-sprout-soft)!important}
.rs-content a:not(.btn):not(.nav-link){color:var(--rs-evergreen)}
.rs-content .nav-tabs .nav-link.active{color:var(--rs-evergreen);border-bottom:2px solid var(--rs-evergreen)}
.rs-content .nav-pills .nav-link.active{background-color:var(--rs-evergreen)}
.rs-content .card{border-color:var(--rs-line);border-radius:var(--rs-r);box-shadow:var(--rs-shadow)}
.rs-content .card-header.bg-primary{background-color:var(--rs-evergreen)!important}
.rs-content .form-control:focus,.rs-content .form-select:focus{border-color:var(--rs-sprout);box-shadow:0 0 0 .2rem var(--rs-sprout-soft)}
.rs-content .form-check-input:checked{background-color:var(--rs-evergreen);border-color:var(--rs-evergreen)}
.rs-content .table>thead th{background:#FAFCFA;color:var(--rs-faint);text-transform:uppercase;font-size:11px;letter-spacing:.04em}

/* breadcrumb separators/links */
.rs-crumb .rs-crumb-sep{margin:0 7px;color:var(--rs-faint)}
.rs-crumb a{color:var(--rs-muted);text-decoration:none}
.rs-crumb a:hover{color:var(--rs-evergreen)}

/* ============================================================
   Light sidebar (Position Green style) — overrides the dark sidebar.
   Soft mint background with dark-green text/icons.
   ============================================================ */
.rs-sidebar{background:#CFE8D7;color:var(--rs-ink);border-right:1px solid #BFE0CB}
.rs-brand .wm{color:var(--rs-ink)}
.rs-tenant{background:rgba(255,255,255,.65);border:1px solid rgba(16,61,46,.08)}
.rs-tenant .t{color:var(--rs-ink)}
.rs-tenant .s{color:var(--rs-muted)}
.rs-tenant .av{background:var(--rs-evergreen);color:#fff}
.rs-navgroup{border-bottom-color:rgba(16,61,46,.1)}
.rs-navgroup>.gl{color:var(--rs-muted)}
.rs-nav{color:#214636}
.rs-nav i{opacity:.85}
.rs-nav:hover{background:rgba(255,255,255,.6);color:var(--rs-evergreen)}
.rs-nav.active{background:var(--rs-evergreen);color:#fff}
.rs-nav.active i{opacity:1}
.rs-nav.active::before{background:var(--rs-sprout)}
.rs-nav .badge{background:var(--rs-evergreen);color:#fff}
.rs-subitems{border-left:1px solid rgba(16,61,46,.15)}
.rs-subnav{color:var(--rs-muted)}
.rs-subnav:hover{background:rgba(255,255,255,.6);color:var(--rs-evergreen)}
.rs-subnav.active{background:var(--rs-evergreen);color:#fff}
.rs-sidebar .foot{border-top-color:rgba(16,61,46,.12);color:var(--rs-muted)}

/* ============================================================
   Dashboard — glassy, light  (scoped to .rs-dash, prefix rsd-)
   Reuses --rs-* tokens; adds E/S/G chart hues + glass surfaces.
   ============================================================ */
:root{
  --rs-e:#1A9E73; --rs-s:#2F7FD1; --rs-g:#E08B1E;
  --rs-glass:rgba(255,255,255,.62);
  --rs-glass-strong:rgba(255,255,255,.78);
  --rs-glass-brd:rgba(255,255,255,.72);
  --rs-glass-shadow:0 8px 30px rgba(16,61,46,.10),0 2px 6px rgba(16,61,46,.05);
}
.rs-dash{position:relative;display:flex;flex-direction:column;gap:18px}
.rs-dash::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40rem 28rem at 14% -4%, rgba(52,201,119,.16), transparent 60%),
    radial-gradient(34rem 24rem at 94% 4%, rgba(63,111,143,.13), transparent 58%),
    radial-gradient(42rem 30rem at 82% 104%, rgba(52,201,119,.10), transparent 60%);}
.rsd-glass{background:var(--rs-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--rs-glass-brd);
  box-shadow:var(--rs-glass-shadow);border-radius:16px}

/* page header */
.rsd-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.rsd-head h1{margin:0;font-size:26px;letter-spacing:-.02em;font-weight:800;color:var(--rs-ink)}
.rsd-head p{margin:3px 0 0;color:var(--rs-muted);font-size:13px}
.rsd-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.rsd-seg{display:flex;background:var(--rs-glass-strong);border:1px solid var(--rs-line);border-radius:11px;padding:3px}
.rsd-seg button{border:0;background:transparent;color:var(--rs-muted);font:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer}
.rsd-seg button.on{background:var(--rs-evergreen);color:#fff;box-shadow:0 3px 8px rgba(16,61,46,.22)}
.rsd-btn{border:0;border-radius:11px;padding:9px 15px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--rs-sprout),var(--rs-evergreen));color:#fff;box-shadow:0 6px 16px rgba(16,61,46,.2)}

/* grids */
.rsd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rsd-row2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.rsd-row3{display:grid;grid-template-columns:1fr 2fr;gap:16px}

/* card */
.rsd-card{border-radius:16px;padding:18px 20px}
.rsd-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rsd-card h3{margin:0;font-size:14px;font-weight:750;letter-spacing:-.01em;color:var(--rs-ink)}
.rsd-card .rsd-sub{color:var(--rs-muted);font-size:12px;margin:2px 0 0}

/* KPI tile */
.rsd-kpi{border-radius:16px;padding:16px 17px;display:flex;flex-direction:column;gap:9px}
.rsd-kpi .rsd-ktop{display:flex;align-items:center;justify-content:space-between}
.rsd-kpi .rsd-kic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.rsd-kpi .rsd-klab{font-size:12.5px;color:var(--rs-muted);font-weight:650}
.rsd-kpi .rsd-kval{font-size:29px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--rs-ink)}
.rsd-kpi .rsd-kval small{font-size:14px;font-weight:700;color:var(--rs-muted);margin-left:3px}
.rsd-kfoot{display:flex;align-items:center;gap:8px;font-size:12px}
.rsd-note{color:var(--rs-muted)}
.rsd-spark{width:100%;height:34px;display:block;overflow:visible}

/* chips */
.rsd-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11.5px;font-weight:700}
.rsd-chip.good{background:var(--rs-ok-bg);color:var(--rs-ok)}
.rsd-chip.bad{background:var(--rs-crit-bg);color:var(--rs-crit)}

/* pillar bars */
.rsd-barrow{display:flex;align-items:center;gap:12px;margin:12px 0}
.rsd-barrow .rsd-bl{width:110px;font-size:12.5px;font-weight:650;color:var(--rs-ink);display:flex;align-items:center;gap:7px}
.rsd-sw{width:9px;height:9px;border-radius:3px;flex:none}
.rsd-track{flex:1;height:12px;border-radius:8px;background:var(--rs-line-soft);overflow:hidden}
.rsd-fill{height:100%;border-radius:8px}
.rsd-barrow .rsd-bv{width:40px;text-align:right;font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--rs-ink)}
.rsd-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--rs-muted);margin-top:14px}
.rsd-legend span{display:inline-flex;align-items:center;gap:6px;font-weight:600}

/* disclosure progress */
.rsd-disc{display:flex;flex-direction:column;gap:14px}
.rsd-disc .rsd-d{display:flex;flex-direction:column;gap:6px}
.rsd-disc .rsd-dh{display:flex;justify-content:space-between;font-size:12.5px}
.rsd-disc .rsd-dn{font-weight:650;color:var(--rs-ink)}
.rsd-disc .rsd-dp{color:var(--rs-muted);font-variant-numeric:tabular-nums;font-weight:700}
.rsd-disc .rsd-dtrack{height:9px;border-radius:6px;background:var(--rs-line-soft);overflow:hidden}
.rsd-disc .rsd-dfill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--rs-sprout),var(--rs-evergreen))}

/* activity */
.rsd-act{display:flex;flex-direction:column}
.rsd-act .rsd-a{display:flex;gap:12px;padding:11px 4px;border-bottom:1px solid var(--rs-line-soft)}
.rsd-act .rsd-a:last-child{border-bottom:0}
.rsd-adot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.rsd-atxt{font-size:13px;line-height:1.35;color:var(--rs-ink)}
.rsd-ameta{font-size:11.5px;color:var(--rs-muted);margin-top:2px}
.rsd-stat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.rsd-stat.ok{background:var(--rs-ok-bg);color:var(--rs-ok)}
.rsd-stat.pend{background:var(--rs-warn-bg);color:var(--rs-warn)}
.rsd-stat.rev{background:var(--rs-info-bg);color:var(--rs-info)}

/* chart */
.rsd-chartwrap{position:relative}
.rsd-chartwrap svg .grid{stroke:rgba(16,61,46,.09);stroke-width:1}
.rsd-axo{fill:var(--rs-muted);font-size:10.5px;font-family:var(--rs-sans)}
.rsd-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);background:var(--rs-glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rs-line);border-radius:10px;padding:7px 11px;font-size:12px;box-shadow:var(--rs-glass-shadow);white-space:nowrap;transition:opacity .12s}
.rsd-tip .tv{font-weight:800;font-variant-numeric:tabular-nums;color:var(--rs-ink)}
.rsd-tip .tl{color:var(--rs-muted);font-size:11px}
.rsd-ch{stroke:var(--rs-sprout);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.rsd-hd{fill:var(--rs-sprout);stroke:#fff;stroke-width:2;opacity:0}
.rsd-dataview{margin-top:12px;font-size:12px}
.rsd-dataview summary{cursor:pointer;color:var(--rs-ok);font-weight:700;font-size:12px}
.rsd-dataview table{border-collapse:collapse;margin-top:8px;width:100%;font-variant-numeric:tabular-nums}
.rsd-dataview th,.rsd-dataview td{text-align:right;padding:4px 8px;border-bottom:1px solid var(--rs-line-soft);color:var(--rs-muted)}
.rsd-dataview th:first-child,.rsd-dataview td:first-child{text-align:left}
.rsd-samplenote{font-size:11.5px;color:var(--rs-faint);text-align:center;margin-top:4px}

@media (max-width:1080px){
  .rsd-kpis{grid-template-columns:repeat(2,1fr)}
  .rsd-row2,.rsd-row3{grid-template-columns:1fr}
}

/* ============================================================
   GLOBAL GLASS FINISH — applies the frosted look across every
   screen by restyling shared surfaces. Appended last so these
   win over the base rules. Reuses --rs-glass* tokens.
   ============================================================ */

/* 1. Ambient tinted backdrop so glass surfaces have something to blur */
.rs-shell{
  background:
    radial-gradient(46rem 32rem at 10% -6%, rgba(52,201,119,.16), transparent 60%),
    radial-gradient(40rem 30rem at 98% 0%, rgba(63,111,143,.13), transparent 58%),
    radial-gradient(48rem 34rem at 86% 104%, rgba(52,201,119,.10), transparent 62%),
    var(--rs-paper);
}
body.has-blur-bg::after{background:rgba(255,255,255,.08)}

/* 2. Cards / panels / bootstrap cards / expanders -> frosted glass */
.rs-card,
.rs-content .card,
.rs-learn{
  background:var(--rs-glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--rs-glass-brd);
  box-shadow:var(--rs-glass-shadow);
  border-radius:14px;
}

/* 3. Tables stay legible on glass (translucent header + hover) */
.rs-table thead th,
.rs-content .table>thead th{background:rgba(255,255,255,.42)}
.rs-table tbody tr:hover,
.rs-content .table>tbody tr:hover{background:rgba(255,255,255,.5)}

/* 4. Sidebar -> light glass */
.rs-sidebar{
  background:rgba(207,232,215,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border-right:1px solid var(--rs-glass-brd);
}
.rs-tenant{background:rgba(255,255,255,.5)}
.rs-sidebar .foot{border-top-color:rgba(16,61,46,.12)}

/* 5. Top bar -> light frosted glass (matches the sidebar; controls keep
   their own light fills + borders so they stay legible) */
.rs-topbar{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--rg-glass-brd);
}

/* 6. Ghost buttons + learn summary read as glass too */
.rs-btn.ghost{background:var(--rs-glass-strong);border-color:var(--rs-glass-brd)}

/* dashboard already ships its own blobs; drop them so the global backdrop is the single source */
.rs-dash::before{display:none}

/* ============================================================
   GLASSY AUTH (login / devise pages) — floating glass card on a
   light gradient; appended last so it overrides the base .auth-*.
   ============================================================ */
.auth-container{
  background:
    radial-gradient(46rem 34rem at 6% -2%, rgba(52,201,119,.22), transparent 60%),
    radial-gradient(40rem 30rem at 102% 8%, rgba(63,111,143,.16), transparent 58%),
    radial-gradient(48rem 34rem at 92% 104%, rgba(52,201,119,.14), transparent 60%),
    linear-gradient(150deg,#eef5f0,#e6eef4);
}
/* left news column: transparent so the gradient shows; frosted cards float on it */
.auth-news-section{background:transparent}
.auth-news-section::before{opacity:.12}
.auth-news-item{
  background:var(--rs-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--rs-glass-brd);
  box-shadow:var(--rs-glass-shadow);
  border-radius:16px;
}
/* right column: transparent; the form becomes a floating glass card */
.auth-form-section{background:transparent}
.auth-form-container{
  background:var(--rs-glass-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--rs-glass-brd);
  box-shadow:0 20px 60px rgba(16,61,46,.16);
  border-radius:22px;
  padding:38px 34px;
}
/* inputs stay crisp/legible on glass */
.auth-form-control{border:1px solid var(--rs-line);background:rgba(255,255,255,.9)}
.auth-form-control::placeholder{color:var(--rs-faint)}
.auth-form-control:focus{border-color:var(--rs-sprout);box-shadow:0 0 0 .2rem var(--rs-sprout-soft);background:#fff}
/* evergreen-gradient CTA (was flat white) */
.auth-submit-btn{
  background:linear-gradient(135deg,var(--rs-sprout),var(--rs-evergreen));
  color:#fff;border:0;border-radius:12px;font-weight:700;
  box-shadow:0 8px 20px rgba(16,61,46,.25);
}
.auth-submit-btn:hover{filter:brightness(1.06)}
.auth-forgot-link{color:var(--rs-evergreen);font-weight:600}
.auth-checkbox-label,.auth-form-subtitle{color:var(--rs-muted)}
/* help-icons in labels use Bootstrap .text-white -> invisible on light glass; darken them */
.auth-form-label .text-white{color:var(--rs-faint) !important}
.auth-news-footer .text-white-50{color:var(--rs-faint) !important}

/* ============================================================
   DIRECTION A — BOLD GLASS DESIGN SYSTEM  (ds-* components)
   Reusable page components; roll out page-by-page. Bolder than
   the earlier subtle pass: stronger backdrop, defined glass,
   layered depth, semantic palette, real tables.
   ============================================================ */
/* bolder ambient backdrop (supersedes the earlier subtle blobs) */
.rs-shell{
  background:
    radial-gradient(48rem 34rem at 8% -6%, rgba(22,168,106,.26), transparent 56%),
    radial-gradient(42rem 30rem at 100% 2%, rgba(47,127,209,.18), transparent 54%),
    radial-gradient(50rem 36rem at 88% 106%, rgba(22,168,106,.18), transparent 58%),
    linear-gradient(158deg,#e7f0ea,#e2ecf3) !important;
}
.ds{
  --a:#0f7a4f; --a2:#16a86a; --ink:#0f2a22; --ink2:#3f5b50; --muted:#728a7e;
  --ok:#12885a; --ok-bg:rgba(18,136,90,.14); --info:#2f7fd1; --info-bg:rgba(47,127,209,.14);
  --warn:#c47d10; --warn-bg:rgba(196,125,16,.16); --neu:#5b7183; --neu-bg:rgba(91,113,131,.14);
  --g:rgba(255,255,255,.6); --g2:rgba(255,255,255,.78); --gb:rgba(255,255,255,.78); --gb2:rgba(15,42,34,.08);
  --sh:0 10px 34px rgba(15,60,45,.12),0 2px 6px rgba(15,60,45,.06);
  display:flex; flex-direction:column; gap:18px; color:var(--ink); font-family:var(--rs-sans);
}
.ds-glass{background:var(--g);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--gb);box-shadow:var(--sh)}
/* header */
.ds-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ds-head h1{margin:0;font-size:27px;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.ds-head p{margin:4px 0 0;color:var(--ink2);font-size:13.5px}
.ds-head .sp{margin-left:auto;display:flex;gap:10px}
.ds-btn{border:0;border-radius:12px;padding:10px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.ds-btn.pri{background:linear-gradient(135deg,var(--a2),var(--a));color:#fff;box-shadow:0 8px 18px rgba(15,122,79,.28)}
.ds-btn.gho{background:var(--g2);border:1px solid var(--gb);color:var(--ink)}
/* KPI tiles */
.ds-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ds-tile{border-radius:18px;padding:18px 18px 16px;position:relative;overflow:hidden}
.ds-tile .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.ds-tile .lab{font-size:12.5px;color:var(--ink2);font-weight:650;display:flex;align-items:center;gap:8px}
.ds-tile .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-left:auto}
.ds-tile .num{font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;margin-top:12px}
.ds-tile .meta{font-size:11.5px;color:var(--muted);margin-top:7px}
/* panel + table */
.ds-panel{border-radius:18px;overflow:hidden}
.ds-ptop{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--gb2)}
.ds-ptop h3{margin:0;font-size:15px;font-weight:750}
.ds-cnt{font-size:11.5px;color:var(--muted);background:var(--g2);border:1px solid var(--gb2);border-radius:20px;padding:2px 9px;font-weight:600}
.ds-fbar{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.ds-inp{display:flex;align-items:center;gap:8px;background:var(--g2);border:1px solid var(--gb2);border-radius:10px;padding:8px 12px;color:var(--muted);font-size:12.5px}
.ds-inp input,.ds-inp select{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--ink)}
.ds-tblwrap{overflow-x:auto}
.ds-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ds-tbl thead th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:11px 16px;background:rgba(255,255,255,.42);white-space:nowrap}
.ds-tbl th.r,.ds-tbl td.r{text-align:right}
.ds-tbl tbody td{padding:13px 16px;border-top:1px solid var(--gb2);vertical-align:middle}
.ds-tbl tbody tr:hover{background:rgba(255,255,255,.5)}
.ds-name{font-weight:700;color:var(--ink)}
.ds-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.ds-chipn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);background:var(--g2);border:1px solid var(--gb2);padding:3px 9px;border-radius:20px}
.ds-mono{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600}
.ds-numc{font-variant-numeric:tabular-nums;font-weight:700}
.ds-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px}
.ds-pill .d{width:6px;height:6px;border-radius:50%}
.ds-pill.ok{background:var(--ok-bg);color:var(--ok)} .ds-pill.ok .d{background:var(--ok)}
.ds-pill.info{background:var(--info-bg);color:var(--info)} .ds-pill.info .d{background:var(--info)}
.ds-pill.warn{background:var(--warn-bg);color:var(--warn)} .ds-pill.warn .d{background:var(--warn)}
.ds-pill.mut{background:var(--neu-bg);color:var(--neu)} .ds-pill.mut .d{background:var(--neu)}
.ds-pill.crit{background:var(--crit-bg,#fbeae7);color:var(--crit,#bf5340)} .ds-pill.crit .d{background:var(--crit,#bf5340)}
.ds-owner{display:inline-flex;align-items:center;gap:8px}
.ds-oav{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a));color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700}
.ds-oav.un{background:rgba(91,113,131,.22);color:var(--neu)}
.ds-rowact{display:flex;gap:6px;justify-content:flex-end}
.ds-ract{border:1px solid var(--gb2);background:var(--g2);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--a);cursor:pointer;text-decoration:none}
.ds-rmore{width:32px;height:32px;border-radius:9px;border:1px solid var(--gb2);background:var(--g2);color:var(--muted);cursor:pointer}
.ds-pfoot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--gb2);font-size:12.5px;color:var(--muted)}
.ds-pag{display:flex;gap:6px}
.ds-pag a,.ds-pag span{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--gb2);background:var(--g2);display:grid;place-items:center;font-weight:700;color:var(--ink2);font-size:12.5px;text-decoration:none}
.ds-pag .on{background:var(--a);color:#fff;border-color:transparent}
/* empty state */
.ds-empty{text-align:center;padding:56px 20px}
.ds-empty .ei{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;background:var(--ok-bg);color:var(--a)}
.ds-empty h4{margin:0 0 6px;font-size:17px;font-weight:750;color:var(--ink)}
.ds-empty p{margin:0 auto 18px;color:var(--muted);max-width:44ch;font-size:13.5px}
@media(max-width:1000px){.ds-tiles{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   DASHBOARD REDESIGN — filters, quick actions, charts, insights
   ============================================================ */
.ds-dash-filters{padding:14px 18px}
.ds-dash-filter-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.ds-dash-filter{display:flex;flex-direction:column;gap:5px;min-width:150px;flex:1 1 150px}
.ds-dash-filter label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ds-dash-filter select{border:1px solid var(--gb2);background:var(--g2);border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;color:var(--ink)}
.ds-dash-filters .ds-btn{flex:0 0 auto;margin-bottom:1px}

.ds-dash-kpis .ds-tile .num{font-size:28px}
.ds-dash-kpis .ds-tile .num small{font-size:15px;font-weight:700;margin-left:2px;color:var(--muted)}

.ds-dash-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ds-dash-action{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--g2);
  border:1px solid var(--gb2);color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease}
.ds-dash-action:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,60,45,.1);color:var(--ink)}
.ds-dash-action .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ok-bg);color:var(--a);flex:0 0 auto}
@media(max-width:900px){.ds-dash-actions{grid-template-columns:repeat(2,1fr)}}

.ds-dash-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ds-dash-chart-card.span-2{grid-column:span 2}
.ds-dash-chart-card .ds-ptop{padding:14px 18px}
.ds-dash-chart-wrap{position:relative;height:260px;padding:6px 16px 16px}
.ds-dash-chart-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:12.5px}
@media(max-width:1100px){.ds-dash-charts{grid-template-columns:1fr}.ds-dash-chart-card.span-2{grid-column:span 1}}

.ds-dash-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ds-dash-insight-card{padding:16px 18px;border-top:1px solid var(--gb2)}
.ds-dash-insight-card:nth-child(-n+3){border-top:0}
.ds-dash-insight-card h5{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.ds-dash-insight-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;border-top:1px dashed var(--gb2)}
.ds-dash-insight-item:first-of-type{border-top:0}
.ds-dash-insight-item .n{font-weight:700;color:var(--ink)}
.ds-dash-insight-item .s{font-size:11.5px;color:var(--muted)}
.ds-dash-insight-item .c{font-variant-numeric:tabular-nums;font-weight:800;color:var(--a);background:var(--ok-bg);
  border-radius:20px;padding:2px 9px;font-size:11.5px;flex:0 0 auto}
.ds-dash-insight-empty{color:var(--muted);font-size:12.5px;padding:6px 0}
@media(max-width:1100px){.ds-dash-insights{grid-template-columns:1fr}.ds-dash-insight-card{border-top:1px solid var(--gb2) !important}}

/* Consumption-by-unit cards */
.ds-dash-consumption{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ds-dash-unit-card{padding:14px 16px;border-radius:14px;border:1px solid var(--gb2);background:var(--g2)}
.ds-dash-unit-card .u{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.ds-dash-unit-card .u .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ds-dash-unit-card .v{font-size:23px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:6px;line-height:1.1}
.ds-dash-unit-card .m{font-size:11.5px;color:var(--muted);margin-top:2px}

/* Recent entries feed */
.ds-dash-recent{padding:4px 18px 14px}
.ds-dash-recent-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed var(--gb2);font-size:13px}
.ds-dash-recent-item:first-of-type{border-top:0}
.ds-dash-recent-item .main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds-dash-recent-item .main .n{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-dash-recent-item .main .s{font-size:11.5px;color:var(--muted)}
.ds-dash-recent-item .val{font-variant-numeric:tabular-nums;font-weight:800;color:var(--a);background:var(--ok-bg);border-radius:20px;padding:3px 11px;font-size:12px;flex:0 0 auto}
.ds-dash-recent-item .when{font-size:11.5px;color:var(--muted);flex:0 0 auto;min-width:74px;text-align:right}

/* ---------- Indicators page — Direction A restyle (scoped, non-destructive) ---------- */
.ds-indicators .ds-toolbar{gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ds-indicators .ds-toolbar .btn{border-radius:11px !important;font-weight:650;font-size:13px;padding:9px 14px;border:1px solid var(--rs-line);background:var(--rs-glass-strong);color:var(--rs-muted);box-shadow:none}
.ds-indicators .ds-toolbar .btn i{opacity:.85}
.ds-indicators .ds-toolbar .btn:hover{border-color:var(--rs-sprout);color:var(--rs-evergreen)}
.ds-indicators .ds-toolbar .btn.btn-primary{background:var(--rs-sprout-soft);border-color:transparent;color:var(--rs-evergreen)}
.ds-indicators .ds-toolbar .btn.btn-success{background:linear-gradient(135deg,var(--rs-sprout),var(--rs-evergreen));border:0;color:#fff;box-shadow:0 6px 16px rgba(16,61,46,.22)}
/* filters — widen to kill label truncation + tidy controls */
.ds-indicators #search-filter-form .col-md-2{flex:1 1 190px;max-width:none}
.ds-indicators #search-filter-form .col-md-1{flex:0 0 auto}
.ds-indicators #search-filter-form .form-select,.ds-indicators #search-filter-form .form-control{border-radius:10px;border-color:var(--rs-line);font-size:13px}
/* table header + status/attribute badges -> soft semantic pills */
.ds-indicators .table thead th{background:rgba(255,255,255,.42);border-bottom:1px solid var(--rs-line)}
.ds-indicators tbody .badge{font-weight:700 !important;border-radius:20px !important;padding:4px 10px !important;font-size:11.5px !important}
.ds-indicators tbody .badge.bg-success{background:var(--rs-ok-bg) !important;color:var(--rs-ok) !important}
.ds-indicators tbody .badge.bg-secondary{background:var(--rs-slate-bg) !important;color:var(--rs-slate) !important}
.ds-indicators tbody .badge.bg-info{background:var(--rs-info-bg) !important;color:var(--rs-info) !important}
/* action icons -> uniform monochrome ghost (fixes multicolor clutter); inline display:none permission logic preserved */
.ds-indicators tbody .btn-group{display:inline-flex;gap:5px}
.ds-indicators tbody .btn-group .btn{border-radius:9px !important;border:1px solid var(--rs-line) !important;background:var(--rs-surface) !important;color:var(--rs-muted) !important;min-width:34px}
.ds-indicators tbody .btn-group .btn:hover{border-color:var(--rs-sprout) !important;color:var(--rs-evergreen) !important;background:var(--rs-sprout-soft) !important}
.ds-indicators tbody .btn-group .btn.btn-outline-danger:hover{border-color:var(--rs-crit) !important;color:var(--rs-crit) !important;background:var(--rs-crit-bg) !important}

/* ============================================================
   DIRECTION A — GLOBAL LIST/TABLE CONSISTENCY
   Brings every Bootstrap page in .rs-content into the same
   language (semantic pills, uniform actions, gradient CTAs).
   ============================================================ */
/* status badges -> semantic soft pills (consistent everywhere) */
.rs-content .badge{border-radius:20px;padding:4px 10px;font-weight:700}
.rs-content .badge.bg-success{background:var(--rs-ok-bg) !important;color:var(--rs-ok) !important}
.rs-content .badge.bg-secondary{background:var(--rs-slate-bg) !important;color:var(--rs-slate) !important}
.rs-content .badge.bg-info{background:var(--rs-info-bg) !important;color:var(--rs-info) !important}
.rs-content .badge.bg-warning{background:var(--rs-warn-bg) !important;color:var(--rs-warn) !important}
.rs-content .badge.bg-danger{background:var(--rs-crit-bg) !important;color:var(--rs-crit) !important}
.rs-content .badge.bg-primary{background:var(--rs-sprout-soft) !important;color:var(--rs-evergreen) !important}
/* primary/success CTAs -> evergreen gradient (consistent) */
.rs-content .btn-primary,.rs-content .btn-success{background:linear-gradient(135deg,var(--rs-sprout),var(--rs-evergreen)) !important;border:0 !important;box-shadow:0 6px 16px rgba(16,61,46,.2)}
.rs-content .btn-primary:hover,.rs-content .btn-success:hover{filter:brightness(1.05)}
/* in-table action button groups -> uniform monochrome ghost (delete stays red on hover) */
.rs-content table .btn-group{display:inline-flex;gap:5px}
.rs-content table .btn-group .btn{border-radius:9px !important;border:1px solid var(--rs-line) !important;background:var(--rs-surface) !important;color:var(--rs-muted) !important;box-shadow:none}
.rs-content table .btn-group .btn:hover{border-color:var(--rs-sprout) !important;color:var(--rs-evergreen) !important;background:var(--rs-sprout-soft) !important}
.rs-content table .btn-group .btn.btn-outline-danger:hover{border-color:var(--rs-crit) !important;color:var(--rs-crit) !important;background:var(--rs-crit-bg) !important}
/* consistent controls + page titles */
.rs-content .form-select,.rs-content .form-control{border-radius:10px}
.rs-content h3.text-primary,.rs-content h2.text-primary{color:var(--rs-ink) !important;font-weight:800;letter-spacing:-.01em}
.rs-content .card-header{background:rgba(255,255,255,.35);border-bottom:1px solid var(--rs-line-soft)}

/* ============================================================
   GLASS MODULE PAGES — canonical light-glass language (.rg-*)
   The ambient backdrop already lives on .rs-shell, so module
   surfaces only need to be translucent for it to show through.
   All classes are new + prefixed (rg-/rsdd-) so nothing existing
   is affected. Fonts inherit var(--rs-sans)/(--rs-serif) — unchanged.
   Roll out page-by-page by swapping opaque Bootstrap cards for these.
   ============================================================ */
/* Eco liquid-glass palette — light, nature-inspired (soft green / ocean / earth).
   Additive: new --rg-* vars, nothing existing reads them. */
:root{
  --rg-sprout:#3FBE81; --rg-mint:#8FE3B8; --rg-sage:#C4E4D0;
  --rg-ocean:#5FB2C9; --rg-ocean-deep:#3C93A6; --rg-sand:#E7DDC8; --rg-clay:#C7A784;
  --rg-ink:#173a2e; --rg-ink-soft:#3c5d50; --rg-muted:#6a8478; --rg-faint:#93a89b;
  /* very translucent frosted surfaces so background shows through (iOS-style) */
  --rg-glass:rgba(255,255,255,.40);          /* primary sheet */
  --rg-glass-2:rgba(255,255,255,.60);        /* content fill nested inside a sheet */
  --rg-glass-3:rgba(255,255,255,.30);        /* faint chips */
  --rg-glass-brd:rgba(255,255,255,.70);
  --rg-glass-hi:rgba(255,255,255,.95);       /* specular top highlight */
  --rg-glass-sh:0 14px 44px rgba(23,58,46,.13),0 2px 8px rgba(23,58,46,.06);
  --rg-blur:blur(22px) saturate(1.7);
  --rg-grad:linear-gradient(135deg,var(--rg-mint),var(--rg-sprout));  /* light accent */
}
.rg-page{display:flex;flex-direction:column;gap:18px}

/* the frosted surface every module panel is built on — one sheet, see-through */
.rg-glass{background:var(--rg-glass);-webkit-backdrop-filter:var(--rg-blur);
  backdrop-filter:var(--rg-blur);border:1px solid var(--rg-glass-brd);
  box-shadow:var(--rg-glass-sh);border-radius:20px;position:relative}
/* specular top-edge highlight (the iOS "lit rim") */
.rg-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--rg-glass-hi),transparent 42%);opacity:.5;mix-blend-mode:screen}
.rg-glass>*{position:relative}
.rg-glass-strong{background:var(--rg-glass-2)}
@media (prefers-reduced-transparency:reduce){
  .rg-glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .rg-glass::before{display:none}
}

/* ---------- page header (replaces dark bg-primary bars) ---------- */
.rg-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px}
.rg-head .rg-ic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-size:19px;color:var(--rg-ink);background:var(--rg-grad);
  box-shadow:0 6px 16px rgba(63,190,129,.28),inset 0 1px 0 var(--rg-glass-hi)}
.rg-head .rg-tt{min-width:0;display:flex;flex-direction:column;gap:3px}
.rg-head .rg-tt h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--rg-ink);
  display:flex;align-items:center;gap:9px;line-height:1.1}
.rg-head .rg-tt p{margin:0;font-size:12.5px;color:var(--rg-ink-soft);max-width:64ch}
.rg-head .rg-acts{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* header/toolbar action buttons */
.rg-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;
  font:inherit;font-size:12.5px;font-weight:650;text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--rg-glass-brd);background:var(--rg-glass-2);color:var(--rg-ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rg-btn:hover{border-color:var(--rg-sprout);color:var(--rg-ink);background:var(--rg-sage)}
.rg-btn i{opacity:.9}
.rg-btn.pri{background:var(--rg-grad);color:var(--rg-ink);border:1px solid transparent;
  box-shadow:0 6px 16px rgba(63,190,129,.3),inset 0 1px 0 var(--rg-glass-hi)}
.rg-btn.pri:hover{filter:brightness(1.04);color:var(--rg-ink)}

/* ---------- filter / tool bar ---------- */
.rg-tools{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:16px 20px}
.rg-field{display:flex;flex-direction:column;gap:6px;min-width:180px}
.rg-field.grow{flex:1 1 320px}
.rg-field>label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--rg-muted);display:flex;align-items:center;gap:6px}
.rg-search{display:flex;align-items:center;gap:8px;background:var(--rg-glass-2);
  border:1px solid var(--rg-glass-brd);border-radius:12px;padding:0 5px 0 13px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rg-search:focus-within{border-color:var(--rg-sprout);box-shadow:0 0 0 3px rgba(63,190,129,.16)}
.rg-search i.q{color:var(--rg-faint)}
.rg-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;
  font-size:13px;color:var(--rg-ink);padding:10px 0}
.rg-search input::placeholder{color:var(--rg-faint)}
.rg-search .rg-btn{padding:7px 13px}
.rg-search a.clr{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--rg-muted);text-decoration:none}
.rg-search a.clr:hover{background:var(--rs-crit-bg);color:var(--rs-crit)}

/* result note */
.rg-note{display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:13px;color:var(--rg-ocean-deep);
  background:rgba(95,178,201,.14);border:1px solid rgba(95,178,201,.28);border-radius:12px}

/* ---------- glass data table ---------- */
.rg-tablewrap{overflow-x:auto;border-radius:16px}
.rg-table{width:100%;border-collapse:collapse;font-size:13px}
.rg-table thead th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rg-muted);font-weight:800;padding:13px 16px;white-space:nowrap;
  background:rgba(255,255,255,.34);border-bottom:1px solid var(--rg-glass-brd)}
.rg-table tbody td{padding:13px 16px;border-top:1px solid rgba(23,58,46,.07);vertical-align:middle;color:var(--rg-ink-soft)}
.rg-table tbody tr:first-child td{border-top:0}
.rg-table tbody tr:hover{background:var(--rg-glass-3)}
.rg-table td strong,.rg-table .rg-cellname{color:var(--rg-ink);font-weight:700}
.rg-table .rg-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--rg-ink)}
.rg-actions{display:flex;gap:6px;align-items:center}

/* soft eco pills (status / category / labels) */
.rg-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.rg-pill.ok{background:rgba(63,190,129,.16);color:#1c7a4f}
.rg-pill.info{background:rgba(95,178,201,.18);color:var(--rg-ocean-deep)}
.rg-pill.warn{background:rgba(199,167,132,.26);color:#8a6635}
.rg-pill.mut{background:rgba(106,132,120,.16);color:var(--rg-muted)}
.rg-pill.sage{background:var(--rg-sage);color:var(--rg-ink)}

/* action buttons inside a glass table page — keeps Bootstrap markup +
   .permission-link JS intact (it only toggles inline display); appearance only */
.rg-tablepanel .btn.btn-sm{border-radius:10px;border:1px solid var(--rg-glass-brd) !important;
  background:var(--rg-glass-3) !important;color:var(--rg-muted) !important;box-shadow:none !important;
  width:34px;height:34px;display:inline-grid;place-items:center;padding:0}
.rg-tablepanel .btn.btn-sm:hover{border-color:var(--rg-sprout) !important;color:var(--rg-ink) !important;background:var(--rg-sage) !important}
.rg-tablepanel .btn.btn-outline-danger:hover{border-color:#d98b74 !important;color:#b5482f !important;background:var(--rs-crit-bg) !important}
.rg-tablepanel form.button_to{display:inline-block;margin:0}

/* ---------- glass modal + form (reusable across modules) ---------- */
.rg-modal{background:rgba(255,255,255,.74) !important;-webkit-backdrop-filter:blur(28px) saturate(1.7);
  backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--rg-glass-brd) !important;
  border-radius:22px !important;box-shadow:var(--rg-glass-sh) !important;overflow:hidden}
.rg-modal .modal-header{border-bottom:1px solid var(--rg-glass-brd);background:rgba(255,255,255,.3)}
.rg-modal .modal-title{color:var(--rg-ink);font-weight:800}
.rg-form{padding:20px 22px}
.rg-form .form-label{font-weight:650;color:var(--rg-ink);font-size:12.5px;margin-bottom:6px}
.rg-form .form-control,.rg-form .form-select,.rg-form textarea.form-control{
  background:var(--rg-glass-2);border:1px solid var(--rg-glass-brd);border-radius:11px;color:var(--rg-ink);
  font-size:13.5px;padding:10px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rg-form .form-control:focus,.rg-form .form-select:focus{border-color:var(--rg-sprout);
  box-shadow:0 0 0 3px rgba(63,190,129,.16);background:#fff}
.rg-form .form-control::placeholder{color:var(--rg-faint)}
.rg-form select[multiple]{padding:6px}
.rg-form select[multiple] option{padding:7px 10px;border-radius:8px;margin:1px 0;color:var(--rg-ink)}
.rg-form select[multiple] option:checked{background:var(--rg-sage) !important;color:var(--rg-ink);font-weight:700}
.rg-form .form-text,.rg-form small{color:var(--rg-muted)}
.rg-form .form-check-input{border-color:var(--rg-glass-brd)}
.rg-form .form-check-input:checked{background-color:var(--rg-sprout);border-color:var(--rg-sprout)}
.rg-form .form-check-label{color:var(--rg-ink-soft)}
.rg-form .alert-info{background:rgba(95,178,201,.14);border:1px solid rgba(95,178,201,.28);color:var(--rg-ink-soft);border-radius:12px}
.rg-form .alert-danger{background:var(--rs-crit-bg);border:1px solid rgba(191,83,64,.3);color:#9a3b2b;border-radius:12px}
.rg-form .modal-footer{border-top:1px solid var(--rg-glass-brd);padding:16px 0 0;margin-top:6px}
.rg-form .btn-secondary{background:var(--rg-glass-2) !important;border:1px solid var(--rg-glass-brd) !important;color:var(--rg-ink) !important;border-radius:11px;font-weight:650}
.rg-form .btn-secondary:hover{background:var(--rg-sage) !important}
.rg-form .btn-primary{background:var(--rg-grad) !important;border:0 !important;color:var(--rg-ink) !important;border-radius:11px;font-weight:700;box-shadow:0 6px 16px rgba(63,190,129,.3)}
.rg-form .btn-primary:hover{filter:brightness(1.04)}
.rg-note a{margin-left:auto}

/* ============================================================
   GLASS DROPDOWN — enhances a native <select> (glass-select
   controller). The real <select> stays in the DOM/form as the
   source of truth; this draws a glass button + glass panel so the
   OPEN option list is themed too (native panels are OS-drawn).
   Unscoped surface so it works wherever a select lives.
   ============================================================ */
.rsdd{position:relative;display:block}
.rsdd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rsdd-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--rg-glass-2);
  border:1px solid var(--rg-glass-brd);border-radius:12px;padding:10px 12px;font:inherit;font-size:13px;
  font-weight:600;color:var(--rg-ink);cursor:pointer;text-align:left;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rsdd-btn .cv{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsdd-btn .cx{flex:none;color:var(--rg-muted);transition:transform .18s;font-size:11px}
.rsdd-btn:hover{border-color:var(--rg-sprout)}
.rsdd.open .rsdd-btn{border-color:var(--rg-sprout);box-shadow:0 0 0 3px rgba(63,190,129,.18)}
.rsdd.open .rsdd-btn .cx{transform:rotate(180deg)}
/* panel is portalled to <body> and positioned by the controller (position:fixed),
   so it escapes every backdrop-filter stacking context / overflow clip on the page */
.rsdd-panel{position:fixed;z-index:2000;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  backdrop-filter:blur(26px) saturate(1.8);border:1px solid var(--rg-glass-brd);border-radius:14px;
  box-shadow:var(--rg-glass-sh);padding:5px;max-height:288px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s}
.rsdd-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.rsdd-opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:13px;
  font-weight:500;color:var(--rg-ink);cursor:pointer}
.rsdd-opt .ck{margin-left:auto;flex:none;color:var(--rg-sprout);opacity:0;font-size:12px}
.rsdd-opt:hover,.rsdd-opt.hi{background:var(--rg-sage);color:var(--rg-ink)}
.rsdd-opt.sel{font-weight:700;color:var(--rg-ink)}
.rsdd-opt.sel .ck{opacity:1}

/* ============================================================
   GLASS ORG TREE — clean hierarchy with connector rails (.rg-tree)
   ============================================================ */
/* node-type legend */
.rg-legend{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;padding:0 2px 15px;
  border-bottom:1px solid var(--rg-glass-brd);margin-bottom:16px}
.rg-legend .lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--rg-muted)}
.rg-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--rg-ink-soft)}
.rg-legend .dot{width:10px;height:10px;border-radius:3px;flex:none}

.rg-tree{display:flex;flex-direction:column;gap:11px}
.rg-tnode{position:relative}
.rg-tcard{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:15px;
  background:var(--rg-glass-2);border:1px solid var(--rg-glass-brd);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 3px 12px rgba(23,58,46,.06),inset 0 1px 0 var(--rg-glass-hi);
  transition:transform .12s ease,box-shadow .12s ease}
.rg-tcard:hover{transform:translateX(2px);box-shadow:0 12px 26px rgba(23,58,46,.11),inset 0 1px 0 var(--rg-glass-hi)}
.rg-tic{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:16px;
  background:var(--rg-sage);color:var(--rg-ink)}
.rg-tic.leaf{background:rgba(95,178,201,.20);color:var(--rg-ocean-deep)}
.rg-tmain{flex:1;min-width:0}
.rg-tname{font-size:14.5px;font-weight:750;color:var(--rg-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.rg-tname:hover{color:var(--rg-ocean-deep)}
.rg-tname .go{font-size:11px;color:var(--rg-faint);opacity:0;transition:opacity .12s}
.rg-tcard:hover .rg-tname .go{opacity:1}
.rg-tmeta{display:flex;align-items:center;gap:7px 15px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--rg-muted)}
.rg-tmeta .mi{display:inline-flex;align-items:center;gap:5px}
.rg-ttype{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--rg-sage);color:var(--rg-ink);text-transform:capitalize}
.rg-tdesc{margin:5px 0 0;font-size:12px;color:var(--rg-muted)}
.rg-tacts{display:flex;gap:6px;flex:none}
.rg-iconbtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;text-decoration:none;
  border:1px solid var(--rg-glass-brd);background:var(--rg-glass-3);color:var(--rg-muted);cursor:pointer}
.rg-iconbtn:hover{border-color:var(--rg-sprout);color:var(--rg-ink);background:var(--rg-sage)}
/* connector rails */
.rg-tchildren{position:relative;margin:11px 0 0 27px;padding-left:24px;display:flex;flex-direction:column;gap:11px;
  border-left:2px solid var(--rg-sage)}
.rg-tchildren>.rg-tnode::before{content:"";position:absolute;left:-24px;top:26px;width:20px;height:2px;background:var(--rg-sage)}
.rg-tchildren>.rg-tnode:last-child::after{content:"";position:absolute;left:-26px;top:27px;bottom:-11px;width:2px;background:linear-gradient(var(--rg-sage),transparent)}

/* empty state */
.rg-empty{text-align:center;padding:56px 24px}
.rg-empty .ei{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--rg-sage);color:var(--rg-ink);font-size:26px}
.rg-empty h3{margin:0 0 7px;font-size:18px;font-weight:750;color:var(--rg-ink)}
.rg-empty p{margin:0 auto 18px;color:var(--rg-muted);max-width:46ch;font-size:13.5px}

/* ============================================================
   ORG TREE STRUCTURE PAGE — iOS liquid-glass, light eco.
   Scoped to .org-tree-bg; later in the file + !important where the
   legacy nested rules out-specify us. Replaces brown/dark legacy.
   ============================================================ */
.org-tree-bg{background:transparent !important;min-height:auto;padding:2px 0 44px;display:block}
.org-tree-bg .container{max-width:940px}

/* header — one glass bar */
.org-tree-bg .header-container{display:flex;align-items:center;justify-content:flex-start;gap:16px;position:relative;
  background:var(--rg-glass);-webkit-backdrop-filter:var(--rg-blur);backdrop-filter:var(--rg-blur);
  border:1px solid var(--rg-glass-brd);border-radius:20px;box-shadow:var(--rg-glass-sh);padding:16px 22px;margin-bottom:20px}
.org-tree-bg .header-container::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--rg-glass-hi),transparent 44%);opacity:.5;mix-blend-mode:screen}
.org-tree-bg .back-link{position:static;transform:none;order:-1;color:var(--rg-ink);font-weight:650;font-size:13px;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;background:var(--rg-glass-2);
  border:1px solid var(--rg-glass-brd);border-radius:11px;padding:8px 13px;z-index:1}
.org-tree-bg .back-link::before{content:"\2190";font-weight:700}
.org-tree-bg .back-link:hover{transform:none;background:var(--rg-sage);color:var(--rg-ink);text-decoration:none}
.org-tree-bg .header-title{color:var(--rg-ink);text-shadow:none;text-align:left;margin:0;z-index:1;
  font-family:var(--rs-serif);font-size:1.55rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:11px}
.org-tree-bg .header-title i{color:var(--rg-sprout);font-size:1.5rem;margin:0}

/* search */
.org-tree-bg .search-container{max-width:none;margin:0 0 18px}
.org-tree-bg .search-container .input-group{max-width:460px;display:flex;align-items:center;overflow:visible;
  background:var(--rg-glass-2);border:1px solid var(--rg-glass-brd);border-radius:13px;padding:5px;gap:4px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.org-tree-bg .search-container .input-group:focus-within{border-color:var(--rg-sprout);box-shadow:0 0 0 3px rgba(63,190,129,.16)}
.org-tree-bg #tree-search{flex:1;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;
  color:var(--rg-ink);font-size:13.5px;padding:8px 12px;height:38px}
.org-tree-bg #tree-search::placeholder{color:var(--rg-faint)}
/* square button, icon perfectly centered (reset Bootstrap .btn padding/line-height) */
.org-tree-bg #search-btn{flex:0 0 auto;border:0 !important;background:var(--rg-grad) !important;color:var(--rg-ink) !important;
  border-radius:9px;width:38px;height:38px;padding:0 !important;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 var(--rg-glass-hi)}
.org-tree-bg #search-btn i{font-size:15px;line-height:1;display:block}
.org-tree-bg #search-btn:hover{filter:brightness(1.04)}

/* the ONE primary glass sheet (per iOS: don't stack panes) */
.org-tree-bg .collapsible-tree{background:var(--rg-glass) !important;-webkit-backdrop-filter:var(--rg-blur);
  backdrop-filter:var(--rg-blur);border:1px solid var(--rg-glass-brd) !important;border-radius:24px;
  box-shadow:var(--rg-glass-sh) !important;padding:24px 28px;max-width:none;height:auto;min-height:auto;position:relative}
.org-tree-bg .collapsible-tree::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--rg-glass-hi),transparent 26%);opacity:.45;mix-blend-mode:screen}
.org-tree-bg .collapsible-tree::-webkit-scrollbar-thumb{background:var(--rg-sage)}
.org-tree-bg .collapsible-tree::-webkit-scrollbar-thumb:hover{background:var(--rg-sprout)}

/* rows — light content fills inside the sheet.
   Kill the legacy per-level inline margin so indentation comes purely from
   the nested .tree-children rails (otherwise every level double-indents). */
.org-tree-bg .tree-node-item{margin-bottom:4px;margin-left:0 !important}
.org-tree-bg .tree-node-item:hover{background:transparent;padding:0}
.org-tree-bg .tree-node-content{padding:10px 14px;border-radius:13px;gap:0;align-items:center;
  background:var(--rg-glass-2);border:1px solid var(--rg-glass-brd);transition:transform .12s ease,box-shadow .12s ease}
.org-tree-bg .tree-node-content:hover{transform:translateX(2px);box-shadow:0 8px 18px rgba(23,58,46,.10)}
.org-tree-bg .tree-node-icon{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;font-size:13px;margin-right:10px;flex:none}

/* expand/collapse toggle — light glass, dark glyph */
.org-tree-bg .tree-toggle{background:var(--rg-glass-2);border:1px solid var(--rg-glass-brd);color:var(--rg-ink);
  min-width:24px;height:24px;border-radius:8px;font-size:.6rem;box-shadow:none;margin-right:9px}
.org-tree-bg .tree-toggle:hover{background:var(--rg-sage);border-color:var(--rg-sprout);color:var(--rg-ink);transform:none}
.org-tree-bg .tree-placeholder{color:var(--rg-sprout);font-size:.5rem;margin-right:9px}

/* node label — ALWAYS readable dark ink at every depth (!important beats the
   legacy .tree-children .tree-children rules that set light-green text) */
.org-tree-bg .tree-node-name{color:var(--rg-ink) !important;font-weight:700;font-size:.95rem;
  background:transparent !important;padding:2px 4px}
.org-tree-bg .tree-node-name:hover{color:var(--rg-ocean-deep) !important;text-decoration:none;background:transparent !important}
/* pill colour comes from the inline per-type style (org_type_palette); no !important
   here so that inline wins. box-shadow cleared to kill the legacy gradient shadow. */
.org-tree-bg .tree-node-type{background:var(--rg-sage);color:var(--rg-ink);box-shadow:none !important;
  border-radius:20px;padding:3px 10px;font-size:.64rem;font-weight:700;letter-spacing:.4px;text-transform:none}

/* connector rails — soft eco, hair-thin, aligned.
   Trunk = border-left on .tree-children; each child gets a short horizontal
   elbow at its ROW center (fixed top, not 50% of the whole subtree). */
.org-tree-bg .tree-children{border-left:2px solid var(--rg-sage) !important;
  padding-left:24px !important;margin-left:15px !important;margin-top:4px !important}
.org-tree-bg .tree-children .tree-node-item::before{content:"" !important;background:var(--rg-sage) !important;
  height:2px !important;width:16px !important;left:-16px !important;top:21px !important;border-radius:2px;transform:none !important}
.org-tree-bg .tree-children .tree-node-item::after{display:none !important}
.org-tree-bg .tree-children .tree-children{border-left-color:var(--rg-mint) !important}
.org-tree-bg .tree-children .tree-children .tree-node-item::before{background:var(--rg-mint) !important}
.org-tree-bg .tree-children .tree-children .tree-children{border-left-color:var(--rg-ocean) !important}
.org-tree-bg .tree-children .tree-children .tree-children .tree-node-item::before{background:var(--rg-ocean) !important}

/* search results dropdown */
.org-tree-bg .search-results{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  backdrop-filter:blur(22px) saturate(1.7);border:1px solid var(--rg-glass-brd);border-radius:14px;box-shadow:var(--rg-glass-sh)}
.org-tree-bg .search-result-item{border-bottom:1px solid rgba(23,58,46,.06)}
.org-tree-bg .search-result-item:hover{background:var(--rg-sage)}
.org-tree-bg .search-result-link{color:var(--rg-ink)}
.org-tree-bg .search-result-link:hover{color:var(--rg-ocean-deep);text-decoration:none}
.org-tree-bg .search-result-type{background:var(--rg-sage);color:var(--rg-ink)}
@media (prefers-reduced-transparency:reduce){
  .org-tree-bg .header-container,.org-tree-bg .collapsible-tree{background:#fff !important;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .org-tree-bg .header-container::before,.org-tree-bg .collapsible-tree::before{display:none}
}

/* ============================================================
   GLOBAL ECO-GLASS RE-SKIN
   Repoints the app-wide Bootstrap surface (.rs-content) from the
   old dark evergreen to the light --rg-* eco glass, so every page
   not yet hand-built with .rg-* components still lightens and stays
   consistent (shared tokens). Scoped to .rs-content; shell (sidebar/
   topbar) and the .ds/.rsd dashboards are untouched.
   ============================================================ */
/* cards -> frosted glass */
.rs-content .card{background:var(--rg-glass) !important;-webkit-backdrop-filter:var(--rg-blur);backdrop-filter:var(--rg-blur);
  border:1px solid var(--rg-glass-brd) !important;border-radius:18px !important;box-shadow:var(--rg-glass-sh) !important}
.rs-content .card-body{background:transparent}
/* dark header bars -> light glass with readable dark text */
.rs-content .card-header{background:rgba(255,255,255,.34) !important;border-bottom:1px solid var(--rg-glass-brd) !important;color:var(--rg-ink) !important}
.rs-content .card-header.bg-primary,.rs-content .card-header.bg-success,.rs-content .card-header.bg-dark,.rs-content .card-header.bg-secondary{background:rgba(255,255,255,.34) !important;color:var(--rg-ink) !important}
.rs-content .card-header.bg-primary *,.rs-content .card-header .text-white,.rs-content .card-header .text-white-50{color:var(--rg-ink) !important}
.rs-content .card-header .btn-light{background:var(--rg-grad) !important;border:0 !important;color:var(--rg-ink) !important}
.rs-content .card-header .btn-outline-light,.rs-content .card-header .btn-outline-secondary{border:1px solid var(--rg-glass-brd) !important;color:var(--rg-ink) !important;background:var(--rg-glass-2) !important}
/* primary / success CTAs -> eco mint gradient, dark text */
.rs-content .btn-primary,.rs-content .btn-success{background:var(--rg-grad) !important;border:0 !important;color:var(--rg-ink) !important;box-shadow:0 6px 16px rgba(63,190,129,.28)}
.rs-content .btn-primary:hover,.rs-content .btn-success:hover{filter:brightness(1.04);color:var(--rg-ink) !important}
/* secondary / dark / light -> glass ghost; info -> ocean; keep danger/warning semantic */
.rs-content .btn-secondary,.rs-content .btn-dark,.rs-content .btn-light{background:var(--rg-glass-2) !important;
  border:1px solid var(--rg-glass-brd) !important;color:var(--rg-ink) !important;box-shadow:none !important}
.rs-content .btn-secondary:hover,.rs-content .btn-dark:hover,.rs-content .btn-light:hover{background:var(--rg-sage) !important;color:var(--rg-ink) !important}
.rs-content .btn-info{background:rgba(95,178,201,.9) !important;border:0 !important;color:#08313c !important}
.rs-content .btn-info:hover{filter:brightness(1.04)}
.rs-content .btn-outline-secondary,.rs-content .btn-outline-dark{--bs-btn-color:var(--rg-ink);--bs-btn-border-color:var(--rg-glass-brd);
  --bs-btn-hover-bg:var(--rg-sage);--bs-btn-hover-color:var(--rg-ink);--bs-btn-hover-border-color:var(--rg-sprout)}
.rs-content .btn-outline-info{--bs-btn-color:var(--rg-ocean-deep);--bs-btn-border-color:var(--rg-glass-brd);
  --bs-btn-hover-bg:rgba(95,178,201,.18);--bs-btn-hover-color:var(--rg-ocean-deep);--bs-btn-hover-border-color:var(--rg-ocean)}
.rs-content .btn-outline-primary{--bs-btn-color:var(--rg-ocean-deep);--bs-btn-border-color:var(--rg-glass-brd);
  --bs-btn-hover-bg:var(--rg-sage);--bs-btn-hover-color:var(--rg-ink);--bs-btn-hover-border-color:var(--rg-sprout);
  --bs-btn-active-bg:var(--rg-sage);--bs-btn-active-color:var(--rg-ink)}
.rs-content .text-primary{color:var(--rg-ocean-deep) !important}
.rs-content a:not(.btn):not(.nav-link):not(.rg-btn):not(.rg-tname):not(.rg-cellname){color:var(--rg-ocean-deep)}
.rs-content .nav-tabs .nav-link.active{color:var(--rg-ink);border-bottom:2px solid var(--rg-sprout)}
.rs-content .nav-pills .nav-link.active{background-color:var(--rg-sprout) !important;color:var(--rg-ink)}
/* badges -> eco soft pills */
.rs-content .badge{border-radius:20px;padding:4px 10px;font-weight:700}
.rs-content .badge.bg-primary{background:var(--rg-sage) !important;color:var(--rg-ink) !important}
.rs-content .badge.bg-success{background:rgba(63,190,129,.16) !important;color:#1c7a4f !important}
.rs-content .badge.bg-info{background:rgba(95,178,201,.18) !important;color:var(--rg-ocean-deep) !important}
.rs-content .badge.bg-secondary{background:rgba(106,132,120,.16) !important;color:var(--rg-muted) !important}
.rs-content .badge.bg-warning{background:rgba(199,167,132,.26) !important;color:#8a6635 !important}
.rs-content .badge.bg-danger{background:var(--rs-crit-bg) !important;color:#9a3b2b !important}
/* tables -> glass */
.rs-content .table{--bs-table-bg:transparent;--bs-table-striped-bg:rgba(255,255,255,.20);color:var(--rg-ink-soft)}
.rs-content .table>thead th,.rs-content .table>thead td{background:rgba(255,255,255,.34) !important;color:var(--rg-muted) !important;
  text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;font-weight:800;border-bottom:1px solid var(--rg-glass-brd)}
.rs-content .table>tbody>tr:hover{background:var(--rg-glass-3)}
.rs-content .table td,.rs-content .table th{border-color:rgba(23,58,46,.07)}
/* form controls -> glass */
.rs-content .form-control,.rs-content .form-select{border-radius:10px;border:1px solid var(--rg-glass-brd);background:var(--rg-glass-2);color:var(--rg-ink)}
/* The `background:` shorthand above WIPED Bootstrap's built-in chevron SVG on .form-select, so
   native dropdowns rendered as plain bordered text with no affordance ("can't tell it's a dropdown").
   Re-add the caret + a firmer border so they clearly read as dropdowns. Kevin 20260718. */
.rs-content .form-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border-color:rgba(23,58,46,.28);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23173a2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:13px 11px;
  padding-right:2.25rem;
}
.rs-content .form-control:focus,.rs-content .form-select:focus{border-color:var(--rg-sprout);box-shadow:0 0 0 3px rgba(63,190,129,.16)}
.rs-content .form-check-input:checked{background-color:var(--rg-sprout);border-color:var(--rg-sprout)}
/* alerts -> soft eco */
.rs-content .alert-info{background:rgba(95,178,201,.14);border:1px solid rgba(95,178,201,.28);color:var(--rg-ink-soft)}
.rs-content .alert-success{background:rgba(63,190,129,.14);border:1px solid rgba(63,190,129,.28);color:#1c7a4f}

/* searchable-select (.ua-*) -> eco glass (was indigo). Used on User
   Association + reusable for any multi-select. */
.ua-dropdown-btn{border:1px solid var(--rg-glass-brd) !important;border-radius:11px !important;
  background:var(--rg-glass-2) !important;color:var(--rg-ink) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ua-dropdown-btn:hover:not([disabled]){border-color:var(--rg-sprout) !important}
.ua-dropdown-btn:focus-visible{border-color:var(--rg-sprout) !important;box-shadow:0 0 0 3px rgba(63,190,129,.18) !important}
.ua-placeholder{color:var(--rg-faint) !important}
.ua-count-badge{background:var(--rg-sage) !important;color:var(--rg-ink) !important;border:1px solid var(--rg-glass-brd) !important}
.ua-chip{background:var(--rg-sage) !important;color:var(--rg-ink) !important;border:1px solid var(--rg-glass-brd) !important}
.ua-chip-remove{color:var(--rg-ink-soft) !important}
.ua-chip-remove:hover{color:var(--rs-crit) !important}
.ua-dropdown-list{border:1px solid var(--rg-glass-brd) !important;border-radius:13px !important;
  background:rgba(255,255,255,.82) !important;-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:var(--rg-glass-sh) !important}
.ua-dropdown-item{color:var(--rg-ink) !important;border-radius:9px;margin:0 5px}
.ua-dropdown-item:hover{background:var(--rg-sage) !important}
.ua-item-selected{background:var(--rg-sage) !important}
.ua-search-row{background:transparent !important;border-bottom:1px solid var(--rg-glass-brd) !important}
.ua-search-input{border:1px solid var(--rg-glass-brd) !important;border-radius:9px !important;background:var(--rg-glass-2) !important;color:var(--rg-ink)}
.ua-search-input:focus{border-color:var(--rg-sprout) !important}
.ua-checkbox{border:2px solid var(--rg-glass-brd) !important}
.ua-checkbox-checked{background:var(--rg-sprout) !important;border-color:var(--rg-sprout) !important;color:var(--rg-ink) !important}
/* single-select rows: no checkbox, trailing check on the selected option */
.ua-dropdown-item.ua-single{justify-content:space-between}
.ua-single-check{color:var(--rg-sprout);font-weight:700;font-size:12px;flex:none}

/* ---------- glass modals app-wide (Bootstrap modals live at page level,
   not inside .rs-content, so these are unscoped) ---------- */
.modal-content{background:rgba(255,255,255,.82) !important;-webkit-backdrop-filter:blur(28px) saturate(1.7);
  backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--rg-glass-brd) !important;
  border-radius:20px !important;box-shadow:var(--rg-glass-sh) !important}
.modal-header{border-bottom:1px solid var(--rg-glass-brd) !important;background:rgba(255,255,255,.26)}
.modal-header .modal-title,.modal-title{color:var(--rg-ink);font-weight:800}
.modal-footer{border-top:1px solid var(--rg-glass-brd) !important}
.modal-content .form-label{color:var(--rg-ink);font-weight:650}
.modal-content .form-control,.modal-content .form-select,.modal-content textarea.form-control{
  background:var(--rg-glass-2) !important;border:1px solid var(--rg-glass-brd) !important;border-radius:11px !important;color:var(--rg-ink) !important}
.modal-content .form-control:focus,.modal-content .form-select:focus{border-color:var(--rg-sprout) !important;box-shadow:0 0 0 3px rgba(63,190,129,.16) !important}
.modal-content .form-check-input:checked{background-color:var(--rg-sprout) !important;border-color:var(--rg-sprout) !important}
.modal-content .btn-primary,.modal-content .btn-success{background:var(--rg-grad) !important;border:0 !important;color:var(--rg-ink) !important;box-shadow:0 6px 16px rgba(63,190,129,.28)}
.modal-content .btn-secondary,.modal-content .btn-light{background:var(--rg-glass-2) !important;border:1px solid var(--rg-glass-brd) !important;color:var(--rg-ink) !important}
.modal-content .btn-secondary:hover,.modal-content .btn-light:hover{background:var(--rg-sage) !important}

/* ---------- remaining common Bootstrap components -> eco (was blue/dark) ---------- */
/* pagination (was Bootstrap blue #0d6efd) */
.rs-content .page-link{color:var(--rg-ocean-deep);border-color:var(--rg-glass-brd);background:var(--rg-glass-2)}
.rs-content .page-link:hover{background:var(--rg-sage) !important;color:var(--rg-ink) !important}
.rs-content .page-item.active .page-link{background-color:var(--rg-sprout) !important;border-color:var(--rg-sprout) !important;color:var(--rg-ink) !important}
.rs-content .page-item.disabled .page-link{color:var(--rg-faint);background:var(--rg-glass-3)}
/* Bootstrap dropdown menus -> glass */
.rs-content .dropdown-menu,.dropdown-menu.show{background:rgba(255,255,255,.9) !important;-webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--rg-glass-brd) !important;border-radius:13px !important;box-shadow:var(--rg-glass-sh) !important}
.dropdown-menu .dropdown-item{color:var(--rg-ink)}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item.active{background:var(--rg-sage) !important;color:var(--rg-ink) !important}
/* progress bars + list-group active -> eco */
.rs-content .progress-bar{background-color:var(--rg-sprout)}
.rs-content .list-group-item.active{background:var(--rg-sprout) !important;border-color:var(--rg-sprout) !important;color:var(--rg-ink) !important}
.rs-content .nav-tabs .nav-link,.rs-content .nav-pills .nav-link{color:var(--rg-ink-soft)}
/* spinners -> eco */
.rs-content .spinner-border.text-primary,.rs-content .spinner-border{color:var(--rg-sprout) !important}
/* Bootstrap subtle bg variants (were light blue etc.) -> eco */
.rs-content .bg-primary-subtle{background-color:var(--rg-sage) !important}
.rs-content .bg-info-subtle{background-color:rgba(95,178,201,.18) !important}
.rs-content .bg-success-subtle{background-color:rgba(63,190,129,.16) !important}
.rs-content .bg-warning-subtle{background-color:rgba(199,167,132,.26) !important}
.rs-content .text-primary-emphasis{color:var(--rg-ink) !important}
.rs-content .link-primary{color:var(--rg-ocean-deep) !important}
/* dashboard CTAs (.ds/.rsd) were mid-dark green -> eco mint w/ dark text */
.ds-btn.pri,.rsd-btn{background:var(--rg-grad) !important;color:var(--rg-ink) !important;box-shadow:0 6px 16px rgba(63,190,129,.28) !important}
.ds-btn.pri:hover,.rsd-btn:hover{filter:brightness(1.04);color:var(--rg-ink) !important}
/* Tabulator pagination — default active page is red (#dd0000) -> eco */
.tabulator .tabulator-footer .tabulator-page{border-radius:8px;color:var(--rg-ink-soft)}
.tabulator .tabulator-footer .tabulator-page.active{color:var(--rg-ink) !important;background:var(--rg-sage) !important;border-color:var(--rg-sprout) !important}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover{background:var(--rg-sage) !important;color:var(--rg-ink) !important}

/* Help tooltips — retint from pure black to the platform's deep evergreen so they
   blend with the eco theme (BS5.3 drives both box + arrow from --bs-tooltip-bg). */
.tooltip{--bs-tooltip-bg:var(--rg-ink);--bs-tooltip-color:#fff;--bs-tooltip-opacity:1}
.tooltip .tooltip-inner{border-radius:10px;font-size:12px;line-height:1.45;padding:8px 12px;
  max-width:280px;text-align:left;box-shadow:var(--rg-glass-sh);border:1px solid rgba(255,255,255,.14)}

/* ============ Searchable select (chips + search + checkbox dropdown) ============ */
/* Progressive enhancement over a native <select>; the native element is hidden
   but stays in the DOM as the form source of truth. Ported from the legacy
   User Association screen. Drives searchable_select_controller.js. */
.ss-native-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0;pointer-events:none}

.ua-dropdown-wrap{position:relative;width:100%}
.ua-dropdown-btn{
  width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;
  background:#fff;font-size:14px;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color .15s;outline:none;color:#1a202c;
}
.ua-dropdown-btn:hover:not([disabled]){border-color:#6366f1}
.ua-dropdown-btn[disabled]{background:#f9fafb;cursor:not-allowed;opacity:.7}
.ua-dropdown-btn:focus-visible{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}

.ua-placeholder{color:#9ca3af}
.ua-count-badge{
  background:#eef2ff;color:#4338ca;font-size:12px;font-weight:600;
  padding:2px 8px;border-radius:20px;border:1px solid #c7d2fe;
}
.ua-chevron{font-size:10px;color:#9ca3af;transition:transform .2s;display:inline-block;margin-left:8px}
.ua-chevron-open{transform:rotate(180deg)}

.ua-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ua-chip{
  background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
}
.ua-chip-remove{cursor:pointer;font-size:11px;font-weight:700;color:#6366f1}
.ua-chip-remove:hover{color:#dc2626}

.ua-dropdown-list{
  position:absolute;top:calc(100% + 4px);left:0;width:100%;
  background:#fff;border:1px solid #d1d5db;border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);max-height:260px;overflow-y:auto;
  z-index:1050;padding:4px 0;
}
.ua-dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;font-size:14px;color:#1a202c;cursor:pointer;
}
.ua-dropdown-item:hover{background:#f9fafb}
.ua-item-selected{background:#f5f3ff}
.ua-empty{padding:10px 14px;font-size:13px;color:#9ca3af}

.ua-search-row{padding:6px 10px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff}
.ua-search-input{
  width:100%;border:1px solid #d1d5db;border-radius:4px;
  padding:5px 8px;font-size:13px;outline:none;
}
.ua-search-input:focus{border-color:#6366f1}

.ua-checkbox{
  width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;
  background:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;color:#fff;transition:all .15s;
}
.ua-checkbox-checked{background:#6366f1;border-color:#6366f1}

/* ============================================================
   Button visibility on light-glass surfaces (QA 20260716):
   flat/ghost buttons (btn-light, outline variants) blended into
   the mint/glass backgrounds — give them solid fills, real
   borders and a whisper of shadow so every action reads as a
   button at a glance.
   ============================================================ */
.rs-content .btn-light{
  --bs-btn-bg:#fff;--bs-btn-border-color:#c9d9cf;--bs-btn-color:#26433a;
  --bs-btn-hover-bg:#eef5f0;--bs-btn-hover-border-color:#a8c2b3;--bs-btn-hover-color:#16302a;
  box-shadow:0 1px 2px rgba(16,61,46,.10);
}
.rs-content .btn-outline-primary,
.rs-content .btn-outline-secondary,
.rs-content .btn-outline-success,
.rs-content .btn-outline-danger,
.rs-content .btn-outline-dark{
  background-color:#fff;
  box-shadow:0 1px 2px rgba(16,61,46,.08);
}
.rs-content .btn-outline-secondary{
  --bs-btn-color:#3c5248;--bs-btn-border-color:#9fb6aa;
  --bs-btn-hover-bg:#e7efe9;--bs-btn-hover-color:#26433a;--bs-btn-hover-border-color:#7e9c8d;
}

/* ============================================================
   Search inputs (QA 20260716): hard to spot on glass surfaces.
   White fill, stronger border, sprout focus ring, and an inline
   magnifier for standalone fields (input-groups already carry
   their own icon box, which gets matched styling via :has()).
   ============================================================ */
.rs-content input[type="search"],
.rs-content input[placeholder*="earch"]{
  background-color:#fff;
  border:1.5px solid #8fb3a2;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(16,61,46,.10);
}
.rs-content input[type="search"]:not(.input-group input),
.rs-content input[placeholder*="earch"]:not(.input-group input){
  padding-left:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%236a8478'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
}
.rs-content input[type="search"]:focus,
.rs-content input[placeholder*="earch"]:focus{
  border-color:var(--rg-sprout);
  box-shadow:0 0 0 3px rgba(63,190,129,.20);
  outline:0;
}
.rs-content .input-group:has(input[type="search"]) .input-group-text{
  background:#fff;border:1.5px solid #8fb3a2;border-right:0;color:#3c5d50;
  border-radius:10px 0 0 10px;
}
.rs-content .input-group:has(input[type="search"]) input[type="search"]{
  border-left:0;border-radius:0 10px 10px 0;box-shadow:none;
}

/* Mandatory-field UX shared by the entry grid and the classic record form (QA 20260717):
   centered blocking popup + red outline on empty required fields. Grid pages also define
   the popup classes in _grid_styles; these globals make the classic form self-sufficient. */
.de-required-backdrop{position:fixed;inset:0;background:rgba(33,37,41,.45);z-index:1990}
.de-required-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2000;
  background:#fff;border-radius:12px;padding:1.5rem 2rem;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.25);max-width:420px;width:calc(100% - 2rem)}
.de-field-required{border-color:#dc3545 !important;box-shadow:0 0 0 3px rgba(220,53,69,.18) !important}

/* ============================================================================
   Platform Guide (guided tour) — launched from the top-bar "?" icon.
   ============================================================================ */
/* Launcher popover */
.pg-panel{width:300px;max-width:calc(100vw - 16px);background:#fff;border:1px solid #e4ede7;border-radius:14px;
  box-shadow:0 18px 50px rgba(23,58,46,.20);z-index:20050;overflow:hidden;animation:pg-pop .14s ease}
@keyframes pg-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pg-panel-head{background:linear-gradient(135deg,#2E8B4E,#3FBE81);color:#fff;padding:14px 16px}
.pg-panel-title{font-weight:700;font-size:15px;display:flex;align-items:center}
.pg-panel-sub{font-size:12px;opacity:.9;margin-top:2px}
.pg-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:0;border-top:1px solid #eef2ef;
  padding:12px 16px;cursor:pointer;color:#17251d;transition:background .12s}
.pg-opt:first-of-type{border-top:0}
.pg-opt:hover{background:#f3f9f5}
.pg-opt i{font-size:18px;color:#2E8B4E;flex:none;width:20px;text-align:center}
.pg-opt span{display:flex;flex-direction:column;line-height:1.25}
.pg-opt strong{font-size:13.5px;font-weight:650}
.pg-opt small{font-size:11.5px;color:#6b8676}
.pg-opt-accent i{color:#2f7fd1}
.pg-opt-muted strong{color:#41564a}
.pg-opt-muted i{color:#8aa596}

/* Spotlight engine */
.pg-overlay{position:fixed;inset:0;z-index:20040;background:transparent;cursor:pointer}
.pg-highlight{position:fixed;z-index:20041;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(15,23,20,.58), 0 0 0 3px rgba(63,190,129,.95), 0 8px 28px rgba(0,0,0,.28);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease,opacity .2s ease}
.pg-tooltip{position:fixed;z-index:20042;width:326px;max-width:calc(100vw - 24px);background:#fff;border-radius:14px;
  box-shadow:0 20px 55px rgba(23,58,46,.30);padding:16px 18px;animation:pg-pop .16s ease}
.pg-tooltip.pg-tt-centered{width:400px}
.pg-tt-progress{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2E8B4E}
.pg-tt-title{font-size:16px;font-weight:700;color:#17251d;margin:6px 0 6px}
.pg-tt-body{font-size:13.5px;line-height:1.55;color:#41564a}
.pg-tt-body kbd{background:#eef2ef;border-radius:4px;padding:1px 5px;font-size:11px;color:#17251d}
.pg-tt-actions{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.pg-tt-nav{display:flex;gap:8px;margin-left:auto}
.pg-tt-skip{background:none;border:0;color:#8aa596;font-size:12.5px;cursor:pointer;padding:6px 2px}
.pg-tt-skip:hover{color:#41564a;text-decoration:underline}
.pg-btn{border:0;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer}
.pg-btn-primary{background:#2E8B4E;color:#fff}
.pg-btn-primary:hover{background:#276f40}
.pg-btn-ghost{background:#eef2ef;color:#17251d}
.pg-btn-ghost:hover{background:#e2ebe4}

/* Welcome + Help dialogs */
.pg-welcome-back{position:fixed;inset:0;z-index:20060;background:rgba(15,23,20,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pg-welcome{position:fixed;z-index:20061;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;max-width:calc(100vw - 24px);
  background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(23,58,46,.34);padding:26px 26px 22px;text-align:center;animation:pg-pop .18s ease}
.pg-welcome-ic{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;font-size:26px;color:#fff;
  background:linear-gradient(135deg,#2E8B4E,#5CB85C,#A9DB3B)}
.pg-welcome h5{font-weight:700;color:#17251d;margin:0 0 8px}
.pg-welcome p{font-size:14px;line-height:1.6;color:#41564a;margin:0 0 18px}
.pg-welcome-btns{display:flex;gap:10px;justify-content:center}
.pg-help{position:fixed;z-index:20061;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:calc(100vw - 24px);
  max-height:82vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(23,58,46,.34);animation:pg-pop .18s ease}
.pg-help-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #eef2ef;position:sticky;top:0;background:#fff}
.pg-help-head h5{margin:0;font-weight:700;color:#17251d}
.pg-help-x{background:none;border:0;font-size:24px;line-height:1;color:#8aa596;cursor:pointer}
.pg-help-list{padding:10px 22px}
.pg-faq{border-bottom:1px solid #eef2ef;padding:10px 0}
.pg-faq summary{cursor:pointer;font-weight:600;color:#17251d;font-size:14px;list-style:none}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::before{content:"\203A";display:inline-block;margin-right:8px;color:#2E8B4E;transition:transform .15s}
.pg-faq[open] summary::before{transform:rotate(90deg)}
.pg-faq>div{font-size:13.5px;line-height:1.6;color:#41564a;padding:8px 0 2px 18px}
.pg-help-foot{padding:16px 22px;border-top:1px solid #eef2ef;text-align:right}

/* Toast */
.pg-toast{position:fixed;z-index:20070;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#17251d;color:#fff;font-size:13px;padding:10px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:.3s}
.pg-toast-in{opacity:1;transform:translateX(-50%) translateY(0)}