/*!
* Planno Style v_dev
* Copyright 2023 Planno
*/
:root {
  --pl-yellow-color: #e6ae07;
  --pl-green-color: #198754;
  --pl-blue-color: #0020b3;
  --pl-yellow-rgb: 230, 174, 7;
  --pl-green-rgb: 25, 135, 84;
  --pl-blue-rgb: 0, 32, 179;
  --pl-dark-rgb: 52, 58, 64;
  --pl-light: #f2ede4;
  --pl-light-sec: #faf6ef;
  --pl-primary: #f19220;
  --pl-primary-rgb: 241, 146, 32;
  --pl-primary-soft: #f4b669;
  --pl-role-admin:      var(--pl-primary);
  --pl-role-admin-rgb:  var(--pl-primary-rgb);
  --pl-role-editor:     #0d6efd;
  --pl-role-editor-rgb: 13, 110, 253;
  --pl-role-auditor:     #8b5cf6;
  --pl-role-auditor-rgb: 139, 92, 246;
  --pl-role-viewer:      #adb5bd;
  --pl-role-viewer-rgb:  173, 181, 189;
  --pl-market:           #5b8db8;
  --pl-market-rgb:       91, 141, 184;
  --bs-body-font-size: 0.875rem !important;
  --bs-body-font-family: "Open Sans", var(--bs-font-sans-serif);
  --pl-nav-width: 180px;
  --pl-modal-width: 325px;
  --pl-query-width: 200px;
  --pl-streetview-width: 400px;
  --pl-streetview-height: calc(var(--pl-streetview-width) / 2);
  --pl-streetview-multiplier: 2;
  --pl-map-sub: 0px;
  --pl-map-width: calc(100vw - var(--pl-nav-width) - var(--pl-map-sub));
  --pl-save-width: 150px;
  --pl-sidebar-height: calc(100vh - 2rem);
  --pl-sidebar-height: calc(var(--vh, 1vh) * 100 - 2rem);
}
@media only screen and (max-width: 992px) {
  /* lg */
  :root {
    --pl-nav-width: 60px;
  }
}
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  overflow-y: hidden;
  /* display: flex; */
}
.gmnoprint,
.gm-style-cc {
  display: none !important;
}
input {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
textarea {
  resize: none;
}
hr {
  margin: 0.5rem 0 0.25rem 0;
}
span.area-units {
  margin: 0 !important;
}
.icon-info {
  box-sizing: content-box;
  font-size: 0.875rem;
  position: absolute;
  margin: 0rem 1rem 0.125rem 0.125rem;
  right: 0;
}
.text-my-primary {
  color: var(--pl-primary);
}
.icon-info:hover {
  cursor: pointer;
  color: var(--pl-primary);
}
.btn:not(.dropdown-toggle) {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
  color: #fff;
  font-weight: 500;
}
.btn:not(.dropdown-toggle, .btn-invert):hover,
.btn:not(.dropdown-toggle, .btn-invert):focus,
.btn:not(.dropdown-toggle, .btn-invert):active {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}
.btn:not(.dropdown-toggle, .btn-invert):focus,
.btn:not(.dropdown-toggle, .btn-invert):active {
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.5);
}
.btn.btn-light:not(.dropdown-toggle, .btn-invert) {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.btn.btn-invert {
  background-color: #e9ecef;
  border-color: transparent;
  color: var(--bs-gray-700);
}
.btn.btn-invert:hover {
  color: var(--pl-primary);
}
/* Grid Capacity's "see details" button — deliberately not .btn-invert:
   that's a quiet/secondary style, but this is the primary action on its
   row, so it uses the app's actual primary color, filled icon, larger. */
.btn.btn-grid-details {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
  font-size: 1rem;
}
.btn.btn-grid-details:hover {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
  color: #fff;
}
/* quiet/secondary button that still carries a white legacy SVG icon */
.btn.btn-soft {
  background-color: #e9ecef;
  border-color: transparent;
  color: var(--bs-gray-700);
}
.btn.btn-soft:hover,
.btn.btn-soft:active {
  background-color: #d5dae0;
  border-color: transparent;
  color: var(--bs-gray-900);
}
.btn.btn-soft img {
  /* white -> ~#595959, so the icon reads on the light background */
  filter: brightness(0) invert(0.35);
}
.btn.btn-soft:hover img,
.btn.btn-soft:active img {
  filter: brightness(0) invert(0.2);
}
/* The app's dropdown-menu/-item look (see .modal-planno equivalent, used by
   bootstrap-select) doesn't reach here -- the table modal's wrapper is
   .modal-table, not .modal-planno -- so without this the Export dropdown
   renders as raw, oversized Bootstrap defaults next to a compact toolbar. */
.modal-table .dropdown-menu {
  font-size: 0.75rem;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  padding: 0.25rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.modal-table .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  color: #212529;
}
.modal-table .dropdown-item:hover,
.modal-table .dropdown-item:focus {
  background-color: #e9ecef;
  color: var(--pl-primary);
}
.modal-table .dropdown-item img,
.modal-table .dropdown-item i {
  width: 15px;
  height: 15px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.btn.btn-light:not(.dropdown-toggle):hover,
.btn.btn-light:not(.dropdown-toggle):focus,
.btn.btn-light:not(.dropdown-toggle):active {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
  color: #fff;
}
.form-group .btn.dropdown-toggle {
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border: 1px solid #ced4da;
  margin-left: -1px;
}
.btn.btn-outline {
  background-color: transparent;
  border-color: white;
  border-width: 2px;
  color: white;
  font-weight: 500;
}
.btn.btn-outline:hover,
.btn.btn-outline:focus,
.btn.btn-outline:active {
  background-color: white;
  border-color: white;
  color: var(--bs-gray-dark);
}
.form-control:focus {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.5);
}
.form-check-input:focus {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
/* --- IMG SIZES -- */
.img-20 {
  height: 20px;
}
.img-30 {
  height: 30px;
}
.img-40 {
  height: 40px;
}
.img-50 {
  height: 50px;
}
.img-60 {
  height: 60px;
}
.img-70 {
  height: 70px;
}
/* --- NAV BAR --- */
.navcol {
  width: var(--pl-nav-width);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  padding: 0.5rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
.navcol::-webkit-scrollbar {
  display: none;
}
.navcol-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
}
.navcol-brand img {
  height: 24px;
}
.navcol-brand .min {
  display: none;
}
.navcol-menu {
  width: 100%;
}
.menu-title {
  width: 100%;
  height: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: center;
  color: white !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.12rem;
}
.menu-item {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
}
.menu-item.temp_high,
.menu-item:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.menu-item.disabled,
.menu-item.temp_disabled {
  opacity: 0.25;
  cursor: default !important;
}
.menu-item img {
  height: 18px;
}
.menu-item .menu-desc {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 500;
  padding-left: 1rem;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 20px;
  display: flex;
  align-items: center;
}
.menu-break {
  margin: 0.5rem 0;
  border-bottom: 1px solid var(--bs-gray);
}
.toolbox .menu-break {
  margin: 0.25rem 0;
}
.dialog-box .menu-break {
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0.125rem 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

@media only screen and (max-width: 992px) {
  /* lg */
  .menu-item .menu-desc,
  .menu-title .menu-hide {
    display: none;
  }
  .navcol-brand .max {
    display: none;
  }
  .navcol-brand .min {
    display: inline-block;
  }
}
/* --- LOGIN --- */
.slLogin,
.slWelcome {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
}
.slLogin button,
.slWelcome button {
  width: 100%;
}
.slLoginWrap,
.slWelcomeWrap {
  width: 350px;
}
.login-brand {
  text-align: center;
}
.login-brand img {
  height: 40px;
}
.auxbar {
  font-size: 0.75rem;
  color: var(--pl-primary);
  display: flex;
}
.auxbar div {
  width: 50%;
}
.auxbar label:hover,
.auxbar div:hover {
  cursor: pointer;
  text-decoration: underline;
}
.forgot {
  text-align: right;
}
.slInfo {
  color: var(--bs-danger);
}
/* --- GOOGLE MAPS -- */
.g_map {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: var(--pl-map-width);
  position: absolute;
  top: 0px;
  left: var(--pl-nav-width);
  /* z-index: -1; changed*/
  z-index: 1;
}
.admin_map {
  height: 100%;
  width: 100%;
}
/* .admin-body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: var(--pl-map-width);
  position: absolute;
  top: 0px;
  left: var(--pl-nav-width);
  z-index: -1;
  overflow-y: scroll;
  } */
/* ---  TABLES --- */
.modal-table,
.modal-analytics {
  padding: 0;
  border-radius: 0.375rem;
  margin: 0rem;
  max-width: calc(100vw);
}
.modal-table .table-wrap {
  max-height: 100%;
  overflow-y: auto;
}
.modal-table .modal-header,
.modal-analytics .modal-header {
  border: none;
}
.modal-table .modal-body {
  height: calc(100vh - 6rem);
  height: calc(calc(var(--vh, 1vh) * 100) - 6rem);
}
.modal-table thead,
.modal-table tfoot {
  position: sticky;
}
.modal-table thead {
  top: 0;
}
.modal-table tfoot {
  bottom: 0;
}
.modal-table th:after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
}
.modal-table th:after {
  bottom: 0;
  border-bottom: 2px solid currentColor;
}
.modal-table tbody {
  font-size: 0.75rem;
}
.modal-table tfoot {
  font-size: 0.75rem;
  font-weight: 500;
}
.modal-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
  max-width: 250px;
}
.modal-table td span {
  color: var(--bs-gray);
  cursor: pointer;
  margin: 0 !important;
  font-size: 0.625rem;
}
.modal-table td span:hover {
  text-decoration: underline;
  color: var(--bs-purple);
}
.modal-table th i {
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.5rem;
}
.modal-table th i:hover {
  cursor: pointer;
  color: var(--pl-primary) !important;
}
.modal-table th img {
  height: 12px;
  margin: 0 5px;
}
.modal-table td img {
  height: 15px;
  margin: 0 0.375rem;
}
.modal-table td.slLink:hover {
  color: var(--pl-primary) !important;
}
/* row-number gutter column (newTable) */
.modal-table .tbl-rownum {
  width: 1%;
  text-align: center;
  color: var(--bs-gray);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.modal-table th.tbl-rownum span {
  pointer-events: none;
}
/* only numbered (ticked) cells act as a carousel link; blank ones are inert */
.modal-table td.tbl-rownum:not(.slLink) {
  pointer-events: none;
}
/* Location Name with no name: reveal the action on hover instead of a bare "-" */
.modal-table td.rn-empty {
  position: relative;
}
.modal-table td.rn-empty::after {
  content: attr(data-hint);
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
  white-space: nowrap;
  color: var(--pl-primary);
  text-decoration: underline;
}
.modal-table td.rn-empty:hover {
  color: transparent !important; /* beat .modal-table td.slLink:hover */
}
.modal-table td.rn-empty:hover::after {
  display: flex;
}
.modal-table .pointer {
  cursor: pointer;
}
.modal-contact {
  z-index: 1000;
  color: black !important;
  position: absolute;
  padding: 0.75rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
.modal-contact .btn-close {
  z-index: 5000;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}
.modal-contact::-webkit-scrollbar {
  display: none;
}
.modal-contact .modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.contact-item {
  color: #000;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-item div {
  padding-left: 0.5rem;
}
.contact-name {
  font-weight: 500;
}
.contact-title {
  font-weight: 500;
}
.contact-tagline {
  font-weight: 300;
}
.contact-social {
  display: flex;
  gap: 0.5rem;
}
.contact-icon {
  position: absolute;
  left: -0.5rem;
}
.contact-progress {
  text-align: center !important;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
  font-size: 0.75rem;
}
.contact-info {
  display: flex;
  gap: 0.5rem;
}
.contact-info.valid i {
  color: var(--bs-teal);
}
.contact-info.possible i {
  color: var(--bs-orange);
}
.contact-info.invalid i {
  color: var(--bs-pink);
}
.contact-info span {
  font-size: 0.75rem;
  cursor: pointer;
}
.contact-info span:hover {
  text-decoration: underline;
}
.contact-info.alt i {
  color: var(--pl-primary-soft);
}
.contact-info.alt span:hover {
  text-decoration: auto;
  cursor: default;
}
.btn-contact {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  font-size: 1rem;
  color: var(--pl-primary-soft);
}
.btn-contact:hover {
  color: var(--pl-primary);
}
/* --- NEW PROFILE --- */

.modal-profile {
  background-color: #f5efe6 !important;
}
.modal-profile .btn-close {
  z-index: 5000;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}
.modal-profile .modal-body {
  color: var(--bs-body-color) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.modal-profile .profile-item {
  font-size: 0.75rem;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  margin: 0 !important;
}
.modal-profile .large {
  font-size: 1rem !important;
}
.modal-profile .profile-item .item-label {
  color: var(--bs-gray-dark);
  font-weight: 400;
}
.modal-profile .profile-item .item-desc {
  display: flex;
  flex-direction: column !important;
  flex: 1;
  min-width: 0;
  gap: 0rem;
  font-weight: 500;
}
.modal-profile .profile-item .item-desc .item-na {
  border-radius: 0.2rem;
  padding: 0.25rem 0.5rem;
  font-weight: 400;
  color: var(--bs-gray-dark);
  font-style: italic !important;
}
.modal-profile .profile-item .item-desc .item-list {
  border-radius: 0.2rem;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.modal-profile .profile-item .item-desc .item-list span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.modal-profile .profile-item .item-desc .item-list:hover {
  background-color: var(--pl-light-sec) !important;
}
.modal-profile .profile-item .item-desc .item-list i {
  padding-right: 0.5rem;
}
.modal-profile .profile-item .item-desc .item-list.valid i {
  color: var(--bs-teal);
}
.modal-profile .profile-item .item-desc .item-list.possible i {
  color: var(--bs-orange);
}
.modal-profile .profile-item .item-desc .item-list.invalid i {
  color: var(--bs-pink);
}

/* --- DIALOG ---  */
.prompt-full,
.table-full,
.spinner_div {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(var(--bs-dark-rgb), 0.7);
}
.prompt-full,
.table-full {
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prompt-box,
.prompt-lg-box,
.prompt-xl-box {
  border-radius: 0.375rem;
  max-height: var(--pl-sidebar-height);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrolling on .wrap */
}
.prompt-box {
  width: var(--pl-modal-width);
}
.prompt-lg-box {
  width: calc(var(--pl-modal-width) * 2);
}
.prompt-xl-box {
  width: calc(var(--pl-modal-width) * 2.75);
}
@media only screen and (max-width: 768px) {
  /* sm */
  .prompt-lg-box,
  .prompt-xl-box {
    width: calc(var(--pl-modal-width));
  }
  .modal-body.col-box {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .modal-body.col-box > div {
    width: 100% !important;
  }
}

.flex-even {
  flex: 1;
}

.minimizable .side-bar .modal-body.col-box {
  flex-direction: column !important;
}

.modal-body.col-box > div {
  width: 100% !important;
}

.modal-body.col-box {
  display: flex;
  gap: 1.5rem;
  flex-direction: row;
}
.modal-body.col-box .box-12,
.modal-body.col-box .box-6,
.modal-body.col-box .box-5,
.modal-body.col-box .box-4,
.modal-body.col-box .box-3,
.modal-body.col-box .box-lg,
.modal-body.col-box .box-sm {
  display: flex;
  flex-flow: column;
}
.modal-body.col-box .box-12 {
  width: 100%;
}
.modal-body.col-box .box-6 {
  width: calc(100% / 12 * 6);
}
.modal-body.col-box .box-5 {
  width: calc(100% / 12 * 5);
}
.modal-body.col-box .box-4 {
  width: calc(100% / 12 * 4);
}
.modal-body.col-box .box-3 {
  width: 25%;
}
.modal-body.col-box .box-lg {
  width: calc(100% / 10 * 4);
}
.modal-body.col-box .box-sm {
  width: calc(100% / 10 * 2);
}
.modal-body.col-box .col-row {
  display: flex;
  flex-flow: row;
  gap: 1rem;
}
.sl-legend-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--bs-dark) !important;
  border-bottom: 1px solid rgba(#ffffff, 0.25) !important;
}
.modal-body.slSearchBox {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.slSearchBox .search-prompt {
  display: flex;
  flex-direction: row;
  margin: 0 !important;
  gap: 0.75rem;
}
.prompt-query {
  width: var(--pl-query-width);
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
}
.prompt-item {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin: 0 !important;
}
.prompt-item:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.ux-alert-bar {
  height: 3px;
  border-radius: 0.375rem 0.375rem 0 0;
}
.ux-alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.25rem 1.25rem;
}
.ux-alert-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ux-alert-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ux-alert-title {
  color: var(--pl-primary-soft);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.ux-alert-body {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  padding-left: 1.5rem;
}
.ux-alert-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.625rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ux-alert-footer .btn {
  min-width: 5rem;
}
/* --- MODAL ---  */
.modal-planno {
  z-index: 1000;
  color: white !important;
  position: absolute;
  padding: 0.25rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
.modal-planno.bg-light {
  background-color: var(--pl-light) !important;
}
.modal-planno::-webkit-scrollbar {
  display: none;
}
.modal-planno.side-bar,
.modal-planno.search-box {
  width: var(--pl-modal-width);
  max-width: calc(100vw - 2rem);
  display: block;
  border-radius: 0.375rem;
  max-height: var(--pl-sidebar-height);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrolling on .wrap */
}
.modal-planno.side-bar,
.wrap-utils {
  right: 1rem;
  top: 1rem;
}
.modal-planno.toolbox {
  z-index: 999;
  top: 4.5rem;
  right: calc(var(--pl-modal-width) + 1rem);
  display: flex;
  border-radius: 0.375rem 0rem 0rem 0.375rem;
  max-height: calc(var(--pl-sidebar-height) - 4.5rem);
  flex-direction: column;
  overflow: hidden; /* Prevent scrolling on .wrap */

  transform: translateX(3rem) scaleX(0.85);
  transform-origin: right center;

  opacity: 0;
  pointer-events: none;

  transition:
    transform 0.5s ease,
    opacity 0.25s ease;
}
.toolbox.is-visible {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}
/* Stage 2: once the toolbox itself is hovered (only reachable after
   is-visible makes it interactive), reveal each icon's label. Widens the
   toolbox further left since it has no fixed width and is anchored by
   `right`, not `left`. */
.modal-planno.toolbox .loc-icon {
  /* keep every icon's position fixed at the left edge -- otherwise each row
     centers itself independently once the container stretches to fit the
     widest label, and icons appear to shift per row */
  justify-content: flex-start;
}
.modal-planno.toolbox .loc-icon span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 0;
  transition:
    max-width 0.5s ease,
    margin-left 0.5s ease,
    opacity 0.25s ease;
  font-size: 0.75rem;
  font-weight: 500;
}
.modal-planno.toolbox:hover .loc-icon span {
  max-width: 110px; /* fits the longest label, "Clear Company Details" */
  opacity: 1;
  margin-left: 0.75rem;
}
.wrap-utils {
  position: absolute;
  display: inline-flex;
  gap: 1rem;
}
.btn-notification {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  font-weight: 500;
  margin: 0.125rem;
  border-radius: 0.375rem;
  background-color: transparent;
}
.btn-notification:hover {
  color: #fff;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.btn-notification img {
  height: 1.125rem;
}
.btn-notification span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0; /* no gap initially */
  transition:
    max-width 0.3s ease,
    opacity 0.3s ease,
    margin-left 0.3s ease;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
}
.btn-notification:hover span {
  max-width: 200px; /* or whatever fits your content */
  opacity: 1;
  margin-left: 0.75rem; /* creates space only when needed */
}
.notification-center::before {
  content: "";
  position: absolute;
  top: 0.25rem; /* adjust vertically */
  left: 1.25rem; /* adjust horizontally to match the top of the img */
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--pl-primary);
  border-radius: 50%;
  border: 2px solid rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)); /* Optional: match background for clean edge */
  z-index: 1;
  display: block; /* by default hidden */
}
.notification-center:hover::before {
  border-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
}
/* To show the red dot, add this class dynamically via JS or HTML */
.notification-center.has-notification::before {
  display: block;
}

#nav_notification {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 6px;
  right: 21px;
  background-color: var(--pl-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  border-radius: 9px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.modal-planno.search-box {
  position: relative !important;
  transition: 0.5s;
  max-width: calc(var(--pl-map-width) - 2rem);
}
.modal-planno.side-bar.max-height {
  height: var(--pl-sidebar-height);
}
.modal-planno.notification-center {
  position: relative !important;
  border-radius: 0.375rem;
}
.side-bar .get-total {
  text-align: center;
}
.get-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.get-total {
  font-weight: 500;
}
.get-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  font-size: 0.75rem;
  font-weight: 500;
  width: 100%;
}
.get-list div {
  width: 100%;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
.get-list input {
  flex-shrink: 0;
  padding-left: 0.25rem;
}
label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.get-more {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--pl-primary);
  text-align: center;
}
.get-expand {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}
.get-expand:hover {
  cursor: pointer;
  text-decoration: underline;
}
.text-white {
  color: #fff !important;
}
.modal-body.col-box:has(.get-details) {
  flex-direction: column;
  overflow: hidden;
}
.modal-body.col-box:has(.get-details) > .col-12 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-body.col-box:has(.get-details) .get-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.get-details > div {
  margin: 1rem 0;
}
.get-details {
  flex-shrink: 0;
}
.get-consumption .btn,
.get-results .btn,
.get-details .btn,
.prompt-query .btn {
  width: 100%;
}
.get-consumption .get-annual,
.get-consumption .get-monthly {
  font-weight: 500;
}
.get-consumption .get-month {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  align-items: center;
}
.get-consumption .get-month > div:first-child {
  flex: 1;
}
.get-consumption .get-month > div:last-child {
  flex: 2;
}
.search-loading {
  align-items: center;
}
.search-info {
  font-size: 0.875rem;
  font-weight: 300;
  padding: 0.25rem;
  margin: 0 !important;
}
.search-query {
  font-style: italic !important;
  font-weight: 400;
}
.search-title {
  display: flex;
  padding: 0.25rem 0rem;
  font-size: 1rem;
  font-weight: 500;
}
.modal-body.slSearchResults .btn-close,
.modal-body.slSearchBox .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
.slSearchResults {
  margin-top: 0.5rem;
}
.search-result {
  border-top: 1px solid var(--bs-gray);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 !important;
}
.search-result:last-child {
  border-bottom: 1px solid var(--bs-gray);
}
.search-result.search-hover {
  background-color: var(--bs-gray-800);
  cursor: pointer;
}
.search-result .result-title {
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search-result.search-hover .result-title {
  text-decoration: underline;
}
.search-result .result-subtitle {
  font-size: 0.6875rem;
  color: var(--bs-gray-200);
  margin-top: -0.25rem;
}
.search-result .result-toolbox {
  display: flex;
  gap: 0.75rem !important;
  align-items: center;
}
.search-result .result-icon img {
  height: 1rem;
}
.search-result .result-buttom {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem !important;
}
.search-result .result-buttom:hover {
  border-color: rgba(var(--pl-primary-rgb), 1);
  background-color: rgba(var(--pl-primary-rgb), 1);
}
.search-result .result-buttom img {
  height: 0.75rem;
}
.search-result .result-buttom span {
  font-size: 0.75rem;
  font-weight: 400;
}

.notif-msg {
  border-top: 1px solid var(--bs-gray);
  padding: 0.5rem 0.5rem;
  display: flex;
  flex-direction: row;
  margin: 0 !important;
  gap: 0.75rem;
}
.notif-msg:first-child {
  border-top: none !important;
}
.notif-msg:last-child {
  border-bottom: none !important;
}
.notif-msg .msg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.notif-msg .msg-icon i {
  line-height: 1;
  font-size: inherit;
}
.notif-msg .msg-desc {
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1; /* grow to take remaining space */
  min-width: 0; /* allow ellipsis to work properly */
  overflow: hidden;
}

.notif-msg .msg-text {
  font-size: 0.75rem;
}
.notif-msg span {
  color: var(--pl-primary);
  font-style: italic;
  cursor: pointer;
}
.notif-msg span:hover {
  text-decoration: underline dotted white;
}
.notif-msg.msg-unread .msg-text {
  font-weight: 400 !important;
}
.notif-msg .msg-time {
  font-size: 0.625rem;
  font-weight: 300;
}
.notif-msg .msg-note {
  font-size: 0.625rem;
  color: var(--bs-gray-dark);
  cursor: pointer;
}
.notif-msg.msg-unread .msg-note {
  color: var(--pl-primary);
}
.notif-msg .msg-action {
  display: flex;
  flex-direction: column !important;
  gap: 0.75rem;
  align-items: center;
}
.notif-msg .msg-action button {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 400;
}

.btn.btn-fullwidth,
.full-width {
  width: 100%;
}
.btn {
  font-size: 0.75rem !important;
}
.btn.btn-cancel,
.btn.btn-dark {
  background-color: var(--bs-gray);
  border-color: var(--bs-gray);
}
.btn.btn-cancel:hover,
.btn.btn-dark:hover {
  background-color: var(--bs-gray-dark);
  border-color: var(--bs-gray-dark);
}
.btn.btn-sec {
  background-color: transparent;
  border-color: var(--pl-primary);
}
.btn.btn-sec:hover {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
}
.btn.btn-delete {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn.btn-delete:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.7);
  border-color: rgba(var(--bs-danger-rgb), 0.7);
}
.btn.btn-confirm {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}
.btn.btn-confirm:hover {
  background-color: rgba(var(--bs-success-rgb), 0.7);
  border-color: rgba(var(--bs-success-rgb), 0.7);
}
.btn.btn-tools,
.btn.btn-search-close {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.5;
  padding: 0;
  font-size: 1.125rem !important;
  line-height: 100%;
  border: none;
}
.btn.btn-tools img {
  height: 1rem;
}
.btn.btn-tools:hover,
.btn.btn-search-close:hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 1;
}
.btn.btn-tools:active,
.btn.btn-tools:focus,
.btn.btn-search-close:active,
.btn.btn-search-close:focus {
  box-shadow: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.delete i {
}
.slSmall {
  font-size: 0.75rem;
}
.slPrimaryColor {
  color: var(--pl-primary-soft) !important;
}
.slAct span:hover,
.slLink:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--pl-primary);
}
.modal-planno.streetview-box,
.modal-planno.chart-box {
  width: var(--pl-streetview-width);
  max-width: calc(100vw - 1rem);
  display: block;
  border-radius: 0.375rem;
  /*transition: 1s;*/
}
.modal-planno.streetview-box {
  right: 0.5rem;
  top: 0.5rem;
}
.modal-planno.chart-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-planno.chart-box .chart-window {
  position: relative;
  padding: 1rem;
}
.modal-planno.chart-box .chart-window.chart-window-report-users {
  display: flex;
  flex-direction: column;
}
.chart-usage-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: #52514e;
  flex: 0 0 auto;
}
.chart-usage-summary-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.chart-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.chart-usage-summary .chart-granularity {
  width: auto;
  flex: 0 0 auto;
}
.chart-usage-summary .btn-download {
  position: static;
}
.modal-planno.streetview-box .streetview-window,
.modal-planno.chart-box .chart-window {
  width: 100%;
  height: var(--pl-streetview-height);
  max-height: calc(100vh - 4.125rem);
  background-color: white;
  transition: 1s;
}
.modal-planno.streetview-box.full-window .streetview-window,
.modal-planno.chart-box.full-window .chart-window {
  height: calc(100vh - 1rem);
}
.modal-planno.streetview-box.full-window,
.modal-planno.chart-box.full-window {
  width: calc(100vw - 1rem);
}
.modal-planno.streetview-box.large-window .streetview-window {
  height: calc(100vh - 1rem);
}
.modal-planno.chart-box.large-window .chart-window {
  height: calc(var(--pl-streetview-height) * var(--pl-streetview-multiplier));
}
.modal-planno.streetview-box.large-window {
  width: calc((100vw - var(--pl-nav-width)) / 2 - 0.5rem);
}
.modal-planno.chart-box.large-window {
  width: calc(var(--pl-streetview-width) * var(--pl-streetview-multiplier));
}
.modal-planno.dialog-box {
  top: 1rem;
  padding: 0.125rem !important;
  transform: translate(
    calc(var(--pl-nav-width) + var(--pl-map-width) / 2 - 50%),
    0%
  );
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.75rem;
  cursor: default;
  border-radius: 0.375rem;
  max-width: calc(var(--pl-map-width) - 2rem);
}
.modal-planno.dialog-box.laydown {
  transform: translate(50%, 150%);
}
.modal-planno.dialog-box.action-panel {
  flex-direction: column;
  flex-wrap: nowrap;
  left: calc(var(--pl-nav-width) + 0.5rem);
  top: 1rem;
  transform: none;
  max-width: none;
  width: 8.5rem;
}
.action-panel > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0.125rem 0.375rem;
  overflow: hidden;
}
.action-panel > div.desc {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.action-panel > div.desc:empty {
  display: none;
}
.action-panel > div.menu-break {
  padding: 0;
}
.action-panel > .menu-break + .menu-break,
.action-panel > .menu-break:last-child {
  display: none;
}
.action-panel > div > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.dialog-box div {
  border-radius: 0.375rem;
  height: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  margin: 0.125rem;
}
.dialog-box div.desc {
  background-color: var(--bs-dark);
  color: var(--pl-primary-soft);
}
.dialog-box div.desc.limit {
  max-width: 200px;
}
.dialog-box div.limit {
  display: flex;
  align-items: center; /* vertical centering */
  overflow: hidden; /* ensure clipping */
}
.dialog-box div.limit span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* allow shrinking */
  min-width: 0; /* required for ellipsis in flex */
}
.dialog-box div.clickable:hover {
  color: #fff;
  background-color: var(--pl-primary);
  cursor: pointer;
}
.dialog-box div.save:hover {
  background-color: var(--bs-green);
}
.dialog-box div.delete:hover {
  background-color: var(--bs-red);
}
.dialog-box div.cancel:hover {
  background-color: var(--bs-gray);
}
.dialog-box div i {
  font-size: 0.875rem;
}
.dialog-box div img,
.modal-table div img,
.modal-analytics div img {
  height: 13px;
}
.dialog-box div span,
.modal-table div span,
.modal-analytics div span {
  margin-left: 0.5rem;
}
.dialog-box div.desc {
  margin: 0;
}
.dialog-box div.disabled {
  display: none;
}
.dialog-box div.inactive {
  opacity: 0.25;
}
.dialog-box div.input-group {
  display: inline-flex; /* Override Bootstrap's default flex behavior */
  width: fit-content !important;
  padding: 0;
}
.dialog-box div.input-group input {
  width: 2.5rem !important;
  min-width: auto; /* Avoids default min-width from Bootstrap */
  padding: 0rem 0.15rem;
  flex: none; /* Prevent growing to fill container */
}
.dialog-box div.input-group input[type="number"] {
  text-align: right;
}
@media only screen and (max-width: 992px) {
  /* lg */
  .dialog-box > div {
    flex: 1 0;
  }
  .dialog-box > div:first-child {
    flex: 0 1 100%;
  }
}
@media only screen and (max-width: 992px) {
  /* md */
  .dialog-box div span,
  .modal-table div span {
    display: none;
  }
}
@media only screen and (max-width: 576px) {
  /* sm */
  :root {
    --pl-modal-width: calc(100vw - 1rem);
    --pl-streetview-width: calc(100vw - 1rem);
  }
}
.modal-planno.fade {
  transition: transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal-planno.fade {
    transition: none;
  }
}
.no-transform-transition {
  transition: none !important;
}
.modal-header {
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--bs-gray);
}
.modal-sub-header {
  border-bottom: 1px solid var(--bs-gray);
}
.modal-header,
.modal-sub-header,
.modal-body,
.modal-foot {
  padding: 0.75rem;
}
.prompt-lg-box .modal-foot,
.prompt-box .modal-foot,
.prompt-xl-box .modal-foot {
  border-top: 1px solid var(--bs-gray);
}
.modal-body .title {
  font-size: small;
  color: var(--pl-primary);
}
.modal-body .desc,
.modal-body .desc a {
  font-size: small;
  color: white;
  text-decoration: none;
}
.modal-body .desc a:hover {
  text-decoration: underline;
}
.modal-planno .modal-body:not(.col-box) > div,
.modal-body.col-box > div > div {
  margin: 0.25rem 0;
}
.modal-planno .modal-body:not(.col-box) > div:last-child,
.modal-body.col-box > div > div:last-child {
  margin-top: 0.25rem;
  margin-bottom: 0rem;
}
.modal-planno .modal-body:not(.col-box) > div:first-child,
.modal-body.col-box > div > div:first-child {
  margin-top: 0rem;
  margin-bottom: 0.25rem;
}
.modal-planno .modal-body:not(.col-box) > div .form-check,
.modal-body.col-box > div > div .form-check {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500 !important;
  padding-left: 2rem;
  min-height: auto !important;
}
.modal-planno.getloc .modal-body {
  overflow-y: auto;
  /*max-height: calc(var(--pl-sidebar-height) - 6.25rem - 15px);*/
}
.modal-planno:not(.getloc) .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(var(--pl-sidebar-height) - 4rem);
}

.modal-planno .modal-body .barriers div {
  color: var(--pl-primary);
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
}
.modal-planno .modal-body .barriers div:hover {
  cursor: help;
  background-color: var(--bs-gray-dark);
}

.modal-planno .modal-body .barriers span {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.planno-scroll::-webkit-scrollbar,
.select-tags::-webkit-scrollbar,
.select-selector::-webkit-scrollbar,
.modal-planno .modal-body::-webkit-scrollbar,
.settings-v2-content::-webkit-scrollbar {
  width: 0.5em;
}
.planno-scroll::-webkit-scrollbar-track,
.select-tags::-webkit-scrollbar-track,
.select-selector::-webkit-scrollbar-track,
.modal-planno .modal-body::-webkit-scrollbar-track,
.settings-v2-content::-webkit-scrollbar-track {
  background: transparent;
}
.planno-scroll::-webkit-scrollbar-thumb,
.select-tags::-webkit-scrollbar-thumb,
.select-selector::-webkit-scrollbar-thumb,
.modal-planno .modal-body::-webkit-scrollbar-thumb,
.settings-v2-content::-webkit-scrollbar-thumb {
  background-color: var(--pl-primary-soft);
}
.planno-scroll::-webkit-scrollbar-thumb:hover,
.select-tags::-webkit-scrollbar-thumb:hover,
.select-selector::-webkit-scrollbar-thumb:hover,
.modal-planno .modal-body::-webkit-scrollbar-thumb:hover,
.settings-v2-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--pl-primary);
}

/* SettingsV2 sidebar modal */
.settings-v2-modal {
  display: flex;
  flex-direction: column;
  height: var(--pl-sidebar-height);
}
.settings-v2-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.settings-v2-nav {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-right: 1px solid var(--bs-gray);
  padding: 0.375rem;
}
.settings-v2-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: white;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  border-radius: 0.375rem;
  cursor: pointer;
}
.settings-v2-nav-item i {
  font-size: 18px;
  width: 18px;
  flex-shrink: 0;
}
.settings-v2-nav-item span {
  padding-left: 1rem;
  line-height: 100%;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .settings-v2-nav {
    width: 48px;
  }
  .settings-v2-nav-item span {
    display: none;
  }
}
.settings-v2-nav-item:hover,
.settings-v2-nav-item.active {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity));
}
.settings-v2-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 1.5rem;
}
.settings-v2-section {
  display: none;
}
.settings-v2-section.active {
  display: block;
}

/* SettingsV2 — Profile section */
.sv2-profile-form {
  max-width: var(--pl-modal-width);
}
.sv2-profile-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.75rem;
}
.sv2-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}
.sv2-org-avatar {
  background-color: var(--pl-primary);
  color: white;
  font-size: 1.5rem;
}
.sv2-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  min-width: 0;
}
.sv2-profile-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sv2-name-input {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0;
  width: auto;
  min-width: 60px;
  max-width: 200px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sv2-name-input:not([readonly]) {
  border-bottom-color: var(--pl-primary);
  cursor: text;
  outline: none;
}
.sv2-name-input[readonly]:hover {
  border-bottom-color: var(--bs-gray-600);
}
.sv2-confirm-btn {
  background: none;
  border: none;
  padding: 0 3px;
  font-size: 0.85rem;
  color: var(--bs-gray-400);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.sv2-confirm-btn:hover {
  color: var(--pl-primary);
}
.sv2-unsaved .sv2-editable-input,
.sv2-unsaved .sv2-address-static,
.sv2-unsaved .sv2-country-static,
.sv2-unsaved .sv2-country-select {
  color: var(--bs-danger);
}
.sv2-field-label-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}
.sv2-field-label-row .sv2-field-label { margin-bottom: 0; }
.sv2-role-badge {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(var(--pl-primary-rgb), 0.2);
  color: var(--pl-primary);
  text-transform: capitalize;
  white-space: nowrap;
}
/* Field rows */
.sv2-field-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sv2-field-row:last-child {
  border-bottom: none;
}
.sv2-field-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-gray-500);
  margin-bottom: 0.3rem;
}
.sv2-field-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sv2-value-static {
  font-size: 0.875rem;
  color: white;
  flex: 1;
}
.sv2-field-lock {
  font-size: 0.7rem;
  color: var(--bs-gray-600);
}
.sv2-value-input {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: white;
  font-size: 0.875rem;
  padding: 0;
  flex: 1;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 0;
}
.sv2-value-input:not([readonly]) {
  border-bottom-color: var(--pl-primary);
  cursor: text;
  outline: none;
}
.sv2-field-editable .sv2-value-input[readonly]:hover {
  border-bottom-color: var(--bs-gray-600);
}
.sv2-country-select {
  background: var(--bs-dark);
  border: none;
  border-bottom: 1px solid var(--pl-primary);
  border-radius: 0;
  color: white;
  font-size: 0.78rem;
  padding: 0.1rem 0.25rem;
  flex: 1;
  min-width: 0;
  outline: none;
  scrollbar-color: var(--pl-primary) transparent;
  scrollbar-width: thin;
}
.sv2-country-select option {
  background-color: var(--bs-dark);
  color: white;
}
.sv2-address-value {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.sv2-address-static {
  cursor: pointer;
  font-size: 0.875rem;
  color: white;
  line-height: 1.5;
  white-space: pre-line;
}
.sv2-address-static:hover {
  color: white;
}
.sv2-address-actions {
  display: flex;
  gap: 0.25rem;
}
.sv2-address-input {
  width: 100%;
  resize: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--pl-primary);
  color: white;
  font-size: 0.875rem;
  font-family: inherit;
  padding: 0;
  outline: none;
}
.sv2-country-static {
  cursor: pointer;
}
.sv2-country-static:hover {
  color: var(--pl-primary-soft);
}
.sv2-field-action {
  font-size: 0.72rem;
  color: var(--pl-primary);
  padding: 2px 10px;
  background: rgba(var(--pl-primary-rgb), 0.1);
  border: 1px solid rgba(var(--pl-primary-rgb), 0.3);
  border-radius: 0.25rem;
  line-height: 1.6;
}
.sv2-field-action:hover {
  background: rgba(var(--pl-primary-rgb), 0.2);
  color: var(--pl-primary-soft);
}
.sv2-field-hint {
  display: block;
  font-size: 0.68rem;
  color: var(--bs-gray-600);
  margin-top: 0.25rem;
}
.sv2-pw-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.sv2-pw-input-wrap {
  position: relative;
}
.sv2-pw-input-wrap input {
  padding-right: 2.25rem;
}
.sv2-pw-input-wrap input.is-invalid {
  background-image: none;
}
.sv2-pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: var(--bs-gray-500);
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.sv2-pw-toggle:hover {
  color: var(--pl-primary);
}
.sv2-pw-error {
  font-size: 0.72rem;
  color: var(--bs-danger);
}
.sv2-editable-input {
  cursor: pointer;
}
.sv2-editable-input:not([readonly]) {
  cursor: text;
}

/* ── Team section ─────────────────────────────────────── */
.sv2-team-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.sv2-team-wrap {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Seat bar */
.sv2-team-header {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
@container (max-width: 260px) {
  .sv2-team-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .sv2-invite-btn { width: 100%; text-align: center; }
}
.sv2-seat-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sv2-seat-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}
.sv2-seat-badge {
  font-size: 0.68rem;
  background: rgba(var(--pl-primary-rgb), 0.15);
  color: var(--pl-primary);
  border-radius: 3px;
  padding: 0 0.35rem;
}
.sv2-seat-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.sv2-seat-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.sv2-invite-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Invite form */
.sv2-invite-form {
  border: 1px solid rgba(var(--pl-primary-rgb), 0.3);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: rgba(var(--pl-primary-rgb), 0.05);
}
.sv2-invite-fields {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.sv2-invite-input,
.sv2-invite-select {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 0.78rem;
  padding: 0.2rem 0.1rem;
  outline: none;
  min-width: 0;
}
.sv2-invite-input { flex: 1; }
.sv2-invite-input:focus,
.sv2-invite-select:focus { border-bottom-color: var(--pl-primary); }
.sv2-invite-select { width: 90px; cursor: pointer; }
.sv2-invite-select option { background: var(--bs-dark); }
@container (max-width: 260px) {
  .sv2-invite-input { flex: 1 1 100%; }
}
.sv2-invite-send,
.sv2-invite-cancel {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
}
.sv2-invite-send { color: var(--pl-primary); }
.sv2-invite-cancel { }
/* Group labels */
.sv2-team-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sv2-team-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  padding: 0.6rem 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sv2-team-group-toggle { cursor: pointer; user-select: none; }
.sv2-team-group-toggle:hover { color: rgba(255,255,255,0.6); }
.sv2-team-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.65rem;
  padding: 0 0.4rem;
  min-width: 1.2rem;
}
/* Member card */
.sv2-member-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.sv2-member-card:hover { background: rgba(255,255,255,0.04); }
.sv2-card-inactive { opacity: 0.45; }
.sv2-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sv2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sv2-card-name {
  font-size: 0.83rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv2-card-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
@container (max-width: 220px) {
  .sv2-card-top { flex-wrap: wrap; }
  .sv2-card-name { flex: 1 1 100%; white-space: normal; }
  .sv2-card-controls { flex: 1 1 100%; justify-content: flex-end; }
}
.sv2-card-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.sv2-card-status {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}
.sv2-card-email {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv2-card-email::before {
  content: "·";
  margin-right: 0.4rem;
  color: rgba(255,255,255,0.2);
}
/* Status dot */
.sv2-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.sv2-dot-active    { background: var(--bs-success); }
.sv2-dot-invited   { background: var(--bs-warning); }
.sv2-dot-suspended { background: var(--bs-secondary); }
.sv2-dot-deleted   { background: var(--bs-danger); }
/* Avatar role colors */
.sv2-avatar-admin   { background: var(--pl-role-admin); }
.sv2-avatar-editor  { background: var(--pl-role-editor); }
.sv2-avatar-viewer  { background: var(--pl-role-viewer); }
.sv2-avatar-auditor { background: var(--pl-role-auditor); }
.sv2-avatar-inactive { filter: grayscale(1); }
/* Role tag */
.sv2-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.sv2-role-admin   { background: rgba(var(--pl-role-admin-rgb),0.15);   color: var(--pl-role-admin); }
.sv2-role-editor  { background: rgba(var(--pl-role-editor-rgb),0.15);  color: var(--pl-role-editor); }
.sv2-role-viewer  { background: rgba(var(--pl-role-viewer-rgb),0.2);   color: var(--pl-role-viewer); }
.sv2-role-auditor { background: rgba(var(--pl-role-auditor-rgb),0.15); color: var(--pl-role-auditor); }
.sv2-role-muted   { background: rgba(255,255,255,0.06);           color: rgba(255,255,255,0.3); }
.sv2-you-badge {
  font-size: 0.62rem;
  opacity: 0.6;
  font-weight: 400;
}
/* Role selector dropdown */
.sv2-role-selector {
  position: relative;
  cursor: pointer;
}
.sv2-role-selector .sv2-role-tag:hover { opacity: 0.8; }
.sv2-role-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bs-dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  min-width: 100px;
  max-width: min(140px, 90vw);
  z-index: 50;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sv2-role-opt {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  transition: background 0.1s;
}
.sv2-role-opt:hover { background: rgba(255,255,255,0.08); color: white; }
.sv2-role-opt-active { color: var(--pl-primary); }
/* Action menu */
.sv2-card-menu { position: relative; }
.sv2-menu-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
}
.sv2-menu-btn:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}
.sv2-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bs-dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  min-width: 140px;
  max-width: min(180px, 92vw);
  z-index: 50;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sv2-action-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  transition: background 0.1s;
}
.sv2-action-item:hover { background: rgba(255,255,255,0.08); color: white; }
.sv2-action-danger { color: var(--bs-danger) !important; }
.sv2-action-danger:hover { background: rgba(var(--bs-danger-rgb),0.12) !important; }
/* Market chips */
.sv2-card-markets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.sv2-market-chip {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(var(--pl-market-rgb),0.12);
  color: var(--pl-market);
  cursor: default;
  transition: background 0.1s;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv2-market-chip:hover { background: rgba(var(--pl-market-rgb),0.25); }
.sv2-market-default {
  cursor: default;
  background: rgba(var(--bs-gray-500-rgb, 108,117,125),0.12);
  color: var(--bs-gray-500);
}
.sv2-market-default:hover { background: rgba(var(--bs-gray-500-rgb, 108,117,125),0.12); }
/* Restrictions */
.sv2-card-restrictions { margin-top: 0.3rem; }
.sv2-restrict-chip {
  background: rgba(var(--bs-danger-rgb),0.12);
  color: var(--bs-danger);
}
.sv2-restrict-chip:hover { background: rgba(var(--bs-danger-rgb),0.22); }
.sv2-restrict-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: white; cursor: pointer;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sv2-restrict-row:last-child { border-bottom: none; }
.sv2-restrict-row input { accent-color: var(--pl-primary); cursor: pointer; flex-shrink: 0; }
/* Subscription */
.sv2-sub-card { margin-top: 0.25rem; }
.sv2-sub-seats { margin-bottom: 0.4rem; }
.sv2-sub-seatbar {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.sv2-sub-seatbar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--pl-primary);
  transition: width 0.2s;
}
.sv2-sub-expired { color: var(--bs-danger); }
.sv2-sub-status-chip {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: capitalize;
  white-space: nowrap;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
}
.sv2-sub-status-active { background: rgba(var(--bs-success-rgb),0.15); color: var(--bs-success); }
.sv2-sub-status-trial { background: rgba(var(--pl-primary-rgb),0.15); color: var(--pl-primary); }
.sv2-sub-status-suspended,
.sv2-sub-status-cancelled,
.sv2-sub-status-expired { background: rgba(var(--bs-danger-rgb),0.15); color: var(--bs-danger); }
.sv2-sub-contact { margin-top: 1rem; }
/* Preferences */
.sv2-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.85); cursor: pointer;
}
.sv2-toggle input { accent-color: var(--pl-primary); cursor: pointer; flex-shrink: 0; }
.sv2-density-cols {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@container (max-width: 300px) {
  .sv2-density-cols { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 150px) {
  .sv2-density-cols { grid-template-columns: 1fr; }
}
.sv2-density-col { min-width: 0; }
.sv2-density-name {
  display: block;
  font-size: 0.72rem;
  color: var(--bs-gray-500);
  margin-bottom: 0.2rem;
}
.sv2-density-input { width: 100%; }
select.sl-readonly-density { pointer-events: none; }
.sv2-tags-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sv2-tag-chip {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}
.sv2-tag-chip-delete {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 0.4rem;
  font-size: 0.68rem;
  transition: color 0.15s;
}
.sv2-tag-chip:hover .sv2-tag-chip-delete { display: inline-flex; }
.sv2-tag-chip-delete:hover { color: var(--bs-danger); }
.sv2-tag-chip-add {
  background: none;
  border: 1px dashed rgba(255,255,255,0.2);
  padding: 0.15rem 0.5rem 0.15rem 0.65rem;
}
.sv2-tag-add-input {
  background: none;
  border: none;
  color: white;
  font-size: 0.78rem;
  padding: 0;
  min-width: 0;
}
.sv2-tag-add-input::placeholder { color: var(--bs-gray-600); }
.sv2-tag-chip-confirm {
  background: none; border: none; color: var(--bs-gray-500);
  cursor: pointer; padding: 0 0 0 0.35rem; display: flex; align-items: center;
  transition: color 0.15s;
}
.sv2-tag-chip-confirm:hover { color: var(--pl-primary); }
/* Custom Fields */
.sv2-cf-count-badge {
  display: inline-block;
  font-size: 0.68rem;
  background: rgba(var(--pl-primary-rgb), 0.15);
  color: var(--pl-primary);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  margin-top: 0.3rem;
}
.sv2-cf-beta-badge {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
}
.sv2-cf-list {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.sv2-cf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sv2-cf-row:last-child { border-bottom: none; }
.sv2-cf-row-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.sv2-cf-icon { color: rgba(255,255,255,0.5); font-size: 0.85rem; flex-shrink: 0; }
.sv2-cf-label {
  font-size: 0.82rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv2-cf-type-chip {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4.2rem;
  text-align: center;
}
.sv2-cf-row-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.sv2-cf-edit-btn {
  background: none; border: none; color: var(--bs-gray-500);
  cursor: pointer; padding: 0.1rem 0.25rem; transition: color 0.15s;
}
.sv2-cf-edit-btn:hover { color: var(--pl-primary); }
.sv2-cf-locked { color: var(--bs-gray-600); font-size: 0.78rem; }
@container (max-width: 220px) {
  .sv2-cf-row { flex-wrap: wrap; }
  .sv2-cf-row-main { flex: 1 1 100%; }
  .sv2-cf-row-controls { flex: 1 1 100%; justify-content: flex-end; }
}
.sv2-cf-add-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 6px;
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  margin-top: 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sv2-cf-add-btn:hover:not(:disabled) { color: var(--pl-primary); border-color: rgba(var(--pl-primary-rgb),0.4); }
.sv2-cf-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Solar Layout Defaults (Phase A.5) — mirrors .sv2-density-cols's responsive container-query
   grid; fields reuse the shared .sv2-field-editable/.sv2-value-input/.sv2-confirm-btn look. */
.sv2-solar-defaults-cols {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@container (max-width: 150px) {
  .sv2-solar-defaults-cols { grid-template-columns: 1fr; }
}
.sv2-solar-defaults-col { min-width: 0; }
.sv2-solar-defaults-name {
  display: block;
  font-size: 0.72rem;
  color: var(--bs-gray-500);
  margin-bottom: 0.2rem;
}
.sv2-solar-defaults-input { width: 100%; }
.sv2-solar-defaults-error { display: block; margin-top: 0.4rem; }
/* Custom Field modal */
.sv2-cf-modal { max-width: 380px; }
.sv2-cf-modal-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
}
.sv2-cf-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
.sv2-cf-checks { flex-direction: row; gap: 1.25rem; }
.sv2-cf-icon-picker {
  display: flex;
  gap: 0.4rem;
}
.sv2-cf-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sv2-cf-icon-btn:hover { color: white; border-color: rgba(255,255,255,0.3); }
.sv2-cf-icon-selected {
  background: rgba(var(--pl-primary-rgb), 0.18);
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.sv2-cf-options-list,
.sv2-cf-options-new {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sv2-cf-options-new { margin-top: 0.4rem; }
.sv2-cf-option-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sv2-cf-option-row .input-group { flex: 1; min-width: 0; }
.sv2-cf-opt-remove {
  background: none; border: none; color: var(--bs-gray-500);
  cursor: pointer; flex-shrink: 0; transition: color 0.15s;
}
.sv2-cf-opt-remove:hover { color: var(--bs-danger); }
.sv2-cf-add-option-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--pl-primary);
  font-size: 0.75rem;
  padding: 0;
  cursor: pointer;
}
/* Market tree modal */
.sv2-mkt-modal { max-width: 380px; }
.sv2-mkt-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sv2-mkt-toolbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem;
}
.sv2-mkt-action {
  font-size: 0.7rem; color: var(--bs-gray-500);
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.sv2-mkt-action:hover { color: var(--bs-gray-300); }
.sv2-mkt-sep { font-size: 0.65rem; color: var(--bs-gray-600); }
.sv2-mkt-tree {
  display: flex; flex-direction: column; gap: 0.1rem;
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--pl-primary) transparent;
}
.sv2-mkt-market-row { border-bottom: 1px solid rgba(255,255,255,0.06); }
.sv2-mkt-market-row:last-child { border-bottom: none; }
.sv2-mkt-market-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0;
}
.sv2-mkt-market-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: white; cursor: pointer; flex: 1;
}
.sv2-mkt-market-label input { accent-color: var(--pl-primary); cursor: pointer; flex-shrink: 0; }
.sv2-mkt-toggle {
  background: none; border: none; color: var(--bs-gray-500);
  font-size: 0.7rem; padding: 0.1rem 0.3rem; cursor: pointer; flex-shrink: 0;
}
.sv2-mkt-toggle:hover { color: white; }
.sv2-mkt-subrows { display: flex; flex-direction: column; gap: 0; padding: 0.1rem 0 0.4rem 1.4rem; }
.sv2-mkt-subrow {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; color: rgba(255,255,255,0.55); cursor: pointer;
  padding: 0.2rem 0;
}
.sv2-mkt-subrow input { accent-color: var(--pl-primary); cursor: pointer; flex-shrink: 0; }
.sv2-mkt-subrow:hover { color: rgba(255,255,255,0.85); }
.modal-header .btn-close,
.modal-footer .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
.wrap-admin {
  border-top: 1px solid var(--bs-gray);
}
.modal-toolbox,
.modal-toolbox-bottom {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}
.modal-toolbox {
  justify-content: space-evenly;
}
.modal-toolbox-bottom {
  justify-content: space-between;
  border-top: 1px solid var(--bs-gray);
  padding: 0.5rem 0.25rem 0.25rem 0.25rem;
}
.modal-planno .dropdown-item,
.modal-planno .dropdown-toggle,
.modal-planno .dropdown-menu,
.modal-planno .input-group-sm,
.modal-planno .input-group-text,
.modal-planno .form-control-sm,
.modal-planno .form-control,
.modal-planno .form-select,
.modal-planno .form-select-sm,
.modal-analytics .input-group-sm,
.modal-analytics .input-group-text,
.modal-analytics .form-control-sm,
.modal-analytics .form-control,
.modal-analytics .form-select,
.modal-analytics .form-select-sm,
.navcol-menu .form-select,
.navcol-menu .form-select-sm,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-item {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.modal-planno .dropdown-toggle,
.modal-planno .dropdown-menu,
.modal-planno .dropdown-item,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-item {
  color: #212529 !important;
}
.modal-planno .dropdown-menu,
.bootstrap-select > .dropdown-menu {
  background-color: #f9f9f9 !important;
  border: 1px solid #ddd;
  padding: 0;
  border-radius: 0;
}
.navcol-menu .form-select.high,
.navcol-menu .form-select-sm.high {
  color: var(--bs-red) !important;
}
.modal-planno .link {
  color: var(--pl-primary-soft) !important;
}
.modal-planno .link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--pl-primary) !important;
}
.modal-analytics .link {
  color: var(--pl-blue-color) !important;
}
.modal-analytics .link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--bs-danger) !important;
}
.modal-planno .hover-pointer:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--pl-primary-soft) !important;
}
.modal-planno .notes {
  padding-top: 0.25rem;
  padding-bottom: 0rem;
  padding-left: 0;
  /*padding-left: 0.25rem;*/
  padding-right: 0rem;
  margin-right: 2rem;
  font-size: 0.6875rem;
  color: var(--bs-gray-300);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.modal-planno .notes span.icon {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: 0.05rem;
  margin-right: 0.05rem;
}
.modal-planno .notes span.name {
  padding-left: 0.3rem;
}
.input-group.tags {
  position: relative;
}
.select-tags,
.select-selector {
  display: block;
  position: absolute;
  color: #000;
  background-color: #f9f9f9;
  max-height: calc(1.75rem * 6);
  border: 1px solid #ddd;
  z-index: 1000;
  overflow-y: auto;
  width: calc(100% - 1.85rem * 2);
  margin-left: 1.85rem;
}
.select-tags label,
.select-selector label {
  display: block;
  padding: 0.3125rem 0.75rem;
  cursor: pointer;
}
.select-tags label:hover,
.select-selector label:hover {
  background-color: #e2e2e2;
}
.select-tags input[type="checkbox"],
.select-selector input[type="checkbox"] {
  margin-right: 0.5rem;
}
.select-tags input[type="checkbox"]:checked + label,
.select-selector input[type="checkbox"]:checked + label {
  font-weight: bold;
}
.select-tags .add_tag,
.select-selector .add_tag {
  color: blue;
}
.select-tags .add_tag:hover,
.select-selector .add_tag:hover {
  text-decoration: underline;
}
.modal-planno .input-group-tag {
  overflow: hidden;
  min-height: 1.75rem;
}
.modal-planno .input-group-tag > span {
  background-color: var(--bs-gray);
  padding: 1px 0.25rem;
  color: #fff;
  border-radius: 0.2rem;
  cursor: default;
}
.modal-planno .form-control-sm {
  min-height: 1rem !important;
  padding: 0 0.25rem !important;
}
.modal-planno .pvgen-box {
  background-color: #e9ecef;
  flex: 1 1 auto;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  position: relative;
  max-height: 200px;
  height: 120px;
}
.modal-planno .pvgen-box canvas {
  height: calc(120px - 0.5rem);
  width: calc(100% - 0.5rem);
  margin: 0.25rem;
  letter-spacing: 1px;
  color: #212529;
}
.modal-planno .pvgen-box canvas:hover {
  cursor: zoom-in;
}
@media only screen and (max-width: 768px) {
  /* md */
  .modal-planno .dropdown-menu,
  .modal-planno .input-group-sm,
  .modal-planno .input-group-text,
  .modal-planno .form-control-sm,
  .modal-planno .form-control,
  .modal-planno .form-select,
  .modal-planno .form-select-sm,
  .modal-analytics .input-group-sm,
  .modal-analytics .input-group-text,
  .modal-analytics .form-control-sm,
  .modal-analytics .form-control,
  .modal-analytics .form-select,
  .modal-analytics .form-select-sm,
  .bootstrap-select .dropdown-menu {
    font-size: 1rem !important;
  }
}
.slWelcome .form-text,
.slLogin .form-text {
  font-size: 0.875rem;
}
.loc-icon {
  height: auto;
  padding: 0.625rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc-icon:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.loc-icon.delete:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.loc-icon.disabled {
  opacity: 0.25;
}
.loc-icon img {
  height: 18px;
}
.loc-icon i {
  font-size: 18px;
  line-height: 1; /* removes extra vertical space */
  width: 18px; /* optional: makes the box exactly 15px */
  height: 18px; /* optional: makes the box exactly 15px */
}
.modal-toolbox-wrap .loc-icon img {
  padding-left: 0.125rem;
}
.modal-toolbox-wrap .loc-icon,
.modal-toolbox-get .loc-icon {
  padding: 0.5rem;
}
.modal-toolbox-wrap .loc-icon span,
.modal-toolbox-get .loc-icon span,
.modal-toolbox-bottom .loc-icon span {
  font-size: 0.75rem;
  font-weight: 500;
  padding-left: 0.5rem;
}
.modal-toolbox-wrap .loc-icon.on span,
.modal-toolbox-get .loc-icon.on span,
.modal-toolbox-bottom .loc-icon.on span {
  color: var(--pl-primary);
}
.modal-toolbox-get .loc-icon {
  justify-content: center !important;
}
.max-60 {
  max-width: 60px;
}
.toolbox.sm-icon .loc-icon img,
.modal-toolbox-wrap.sm-icon .loc-icon img,
.modal-toolbox-get.sm-icon .loc-icon img,
.modal-toolbox-bottom.sm-icon .loc-icon img {
  height: 15px;
}
.modal-toolbox-bottom.sm-icon .loc-icon i,
.toolbox.sm-icon .loc-icon i {
  font-size: 15px;
  line-height: 1; /* removes extra vertical space */
  width: 15px; /* optional: makes the box exactly 15px */
  height: 15px; /* optional: makes the box exactly 15px */
}
.sl-hidden {
  display: none !important;
}
.sl_CopyToClipboard {
  cursor: pointer;
}
.prompt-query.prompt-light {
  background-color: var(--bs-light);
  font-weight: 500;
}
.company-details-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.3rem;
}
.company-social {
  display: flex;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.company-social a {
  font-size: 1.25rem !important;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #000;
  font-size: 0.75rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--bs-gray-300);
  min-height: 2.5rem;
  flex-shrink: 0;
}
.layer-item .titleTag {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* You may need to tweak this */
  cursor: pointer;
}
.layer-item .tag-buttons {
  display: flex;
  gap: 0.125rem;
}
.tag-box {
  background-color: #fff;
  margin: 0 !important;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid #ced4da;
  flex: 1 1 auto;
  position: relative;
}
.tag-box.box-max {
  max-height: 250px;
}
.tag-item {
  color: #000;
  font-size: 0.75rem;
  padding: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-addnew {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
}
.tag-addnew > button:hover {
  background-color: var(--bs-gray-500);
}
.tag-item div.clickable:hover {
  cursor: pointer;
}
.tag-item div.clickable:hover span:first-child {
  text-decoration: underline;
}
.tag-item span {
  padding-left: 0.5rem;
}
.tag-item span.titleTag {
  font-weight: 500;
}
.tag-item span.subtitleTag {
  font-size: 0.6875rem;
  font-weight: 300;
}
.tag-item:hover {
  cursor: default;
  background-color: var(--bs-gray-300);
}
.tag-item.highlt {
  background-color: var(--bs-gray-300);
  min-height: 2.5rem;
}
.tag-logo img {
  height: 1.125rem;
  transition: 0.25s ease;
  opacity: 0.65;
  cursor: pointer;
}
.tag-logo img:hover {
  opacity: 1;
}
.btn-tag {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-tag-show {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: default !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-tag.btn-full {
  font-size: 0.625rem;
  font-weight: 600;
  border-width: 2px;
}
.tag-addnew .btn-tag {
  background-color: var(--bs-gray-300);
  padding: 0.25rem 0.5rem;
}
.btn-tag:hover {
  background-color: var(--bs-gray-500);
  color: white !important;
}
.btn-tag.delete:hover {
  background-color: var(--bs-danger) !important;
  color: white !important;
}
.btn-tag.btn-full.delete {
  border-color: var(--bs-danger) !important;
}
.btn-tag.add {
  color: var(--bs-success) !important;
}
.btn-tag.btn-full.add {
  border-color: var(--bs-success) !important;
}
.btn-tag.add:hover {
  background-color: var(--bs-success) !important;
  color: white !important;
}
.btn-tag.replace:hover {
  background-color: var(--bs-warning) !important;
  color: white !important;
}
.btn-tag.icon-green {
  color: var(--pl-green-color) !important;
}
.btn-profile {
  display: inline-block;
  color: var(--bs-blue);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.btn-profile-simple {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0;
  font-size: 0.875rem;
  border-radius: 0;
}
.btn-star {
  color: var(--pl-primary);
}
.checked .btn-profile {
  color: var(--pl-gray);
  cursor: default;
}
.profile-id.checked {
  color: var(--bs-gray);
}
.profile-id.checked:hover {
  background-color: transparent;
}
/*  ####  SPINNER   ####*/
.spinner_div {
  /*  REMAINING SETTINGS OF SPINNER WITH .prompt-full  */
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  gap: 0.75rem;
  color: var(--bs-yellow);
}
.spinner_div .spinner_msg {
  font-size: 0.875rem !important;
  text-align: center;
}
.spinner {
  width: 3rem;
  height: 3rem;
}
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 3rem);
  color: white;
}
.spinner-search {
  color: white;
  opacity: 0.75;
  border-width: 0.15rem;
  width: 1.125rem;
  height: 1.125rem;
  text-align: center;
  vertical-align: middle;
}
/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: white;
  padding: 0.325rem 0.5rem;
  border-radius: 0.375rem;
  overflow-y: auto;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  min-width: 100px;
}
.popup-bubble div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.popup-title {
  font-size: 0.875rem;
  font-weight: 500;
}
.popup-desc {
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 0.325rem;
}
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 100%;
  bottom: 8px;
  left: 0;
}
/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
}
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}
/* ----------  MAIN TOOL BOX   --------  */
.tools {
  z-index: 500;
  position: absolute;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  background-color: transparent !important;
  bottom: 1rem;
  transform: translate(
    calc(var(--pl-nav-width) + var(--pl-map-width) / 2 - 50%),
    0%
  );
  border-radius: 0.375rem;
}
.tool-button {
  color: white !important;
  font-size: 0.625rem;
  font-weight: 600;
  min-width: 4rem;
  border-radius: 0.375rem;
  border: 1px solid #fff;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  padding: 0.5rem 0.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: none;
}
.tool-button:hover {
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.tool-button img {
  height: 1.25rem;
}
.tool-button span,
.tool-button:hover img {
  display: none;
}
.tool-button:hover span {
  display: flex;
}
.pac-container {
  z-index: 3000 !important; /* higher than .modal (1055) and .modal-backdrop (1050) */
}
.pac-item {
  font-size: 0.9rem;
}
.pac-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.pac-item-query {
  font-weight: 600;
}
/************************** ANALYTICS ***************************/
@media only screen and (min-width: 992px) {
  /* lg */
  .modal-analytics {
    max-width: 960px;
  }
}
.modal-analytics {
  padding: 0.25rem;
}
.modal-analytics .modal-body {
  max-height: calc(100vh - 5rem);
  max-height: calc(calc(var(--vh, 1vh) * 100) - 5rem);
  overflow-y: auto;
}
.modal-analytics canvas {
  height: 300px;
}
.modal-analytics .box {
  padding: 0.75rem;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2);
  min-height: 100%;
}
.modal-analytics .box div {
  position: relative;
}
.modal-analytics .box span {
  margin: 0;
  font-size: 0.75rem;
}
.modal-analytics .box > div:first-child {
  border-bottom: 1px solid var(--bs-gray);
}
.modal-analytics .box_title {
  font-size: 0.875rem !important;
  font-weight: 600;
}
.modal-analytics .box_desc {
  font-weight: 500;
  margin-left: 0.375rem !important;
}
.modal-analytics .box_val {
  margin-right: 0.375rem !important;
}
.btn-icon {
  position: absolute;
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.25em 0.25em;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.65;
}
.btn-icon:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.9;
}
.btn-icon:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
  opacity: 1;
}
.btn-download {
  position: absolute;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-box-arrow-down%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M3.5%2010a.5.5%200%200%201-.5-.5v-8a.5.5%200%200%201%20.5-.5h9a.5.5%200%200%201%20.5.5v8a.5.5%200%200%201-.5.5h-2a.5.5%200%200%200%200%201h2A1.5%201.5%200%200%200%2014%209.5v-8A1.5%201.5%200%200%200%2012.5%200h-9A1.5%201.5%200%200%200%202%201.5v8A1.5%201.5%200%200%200%203.5%2011h2a.5.5%200%200%200%200-1h-2z%22%2F%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%2015.854a.5.5%200%200%200%20.708%200l3-3a.5.5%200%200%200-.708-.708L8.5%2014.293V5.5a.5.5%200%200%200-1%200v8.793l-2.146-2.147a.5.5%200%200%200-.708.708l3%203z%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 0rem;
  top: 0rem;
}
.btn-toggle-consumption {
  position: relative;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-eye%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20d%3D%22M16%208s-3-5.5-8-5.5S0%208%200%208s3%205.5%208%205.5S16%208%2016%208M1.173%208a13%2013%200%200%201%201.66-2.043C4.12%204.668%205.88%203.5%208%203.5s3.879%201.168%205.168%202.457A13%2013%200%200%201%2014.828%208q-.086.13-.195.288c-.335.48-.83%201.12-1.465%201.755C11.879%2011.332%2010.119%2012.5%208%2012.5s-3.879-1.168-5.168-2.457A13%2013%200%200%201%201.172%208z%22%2F%3E%0A%3Cpath%20d%3D%22M8%205.5a2.5%202.5%200%201%200%200%205%202.5%202.5%200%200%200%200-5M4.5%208a3.5%203.5%200%201%201%207%200%203.5%203.5%200%200%201-7%200%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 2.5rem;
  top: 0rem;
}
.btn-toggle-consumption-off {
  position: relative;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-eye-slash%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20d%3D%22M13.359%2011.238C15.06%209.72%2016%208%2016%208s-3-5.5-8-5.5a7%207%200%200%200-2.79.588l.77.771A6%206%200%200%201%208%203.5c2.12%200%203.879%201.168%205.168%202.457A13%2013%200%200%201%2014.828%208q-.086.13-.195.288c-.335.48-.83%201.12-1.465%201.755q-.247.248-.517.486z%22%2F%3E%0A%3Cpath%20d%3D%22M11.297%209.176a3.5%203.5%200%200%200-4.474-4.474l.823.823a2.5%202.5%200%200%201%202.829%202.829zm-2.943%201.299.822.822a3.5%203.5%200%200%201-4.474-4.474l.823.823a2.5%202.5%200%200%200%202.829%202.829%22%2F%3E%0A%3Cpath%20d%3D%22M3.35%205.47q-.27.24-.518.487A13%2013%200%200%200%201.172%208l.195.288c.335.48.83%201.12%201.465%201.755C4.121%2011.332%205.881%2012.5%208%2012.5c.716%200%201.39-.133%202.02-.36l.77.772A7%207%200%200%201%208%2013.5C3%2013.5%200%208%200%208s.939-1.721%202.641-3.238l.708.709zm10.296%208.884-12-12%20.708-.708%2012%2012z%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 2.5rem;
  top: 0rem;
}
.box-btn-icon {
  position: absolute;
  right: 0rem;
  top: 0rem;
}
.btn-refresh {
  right: 0.25rem;
  top: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/%3E%3Cpath d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/%3E%3C/svg%3E')
    center center no-repeat;
  /*background: transparent url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"%3E%3Cpath d="M0 0h24v24H0V0z" fill="none"%2F%3E%3Cpath d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"%2F%3E%3C/svg%3E') center center no-repeat;*/
}
.btn-maximize {
  right: 0.25rem;
  top: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/%3E%3Cpath d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/%3E%3Cpath fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/%3E%3C/svg%3E')
    center center no-repeat;
}
.btn-csv {
  width: 0.75rem !important;
  height: 0.75rem !important;
  right: 0.75rem;
  top: 0.75rem;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20viewBox%3D%220%2096%20960%20960%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22M180%20975q-24%200-42-18t-18-42V342q0-12.75%208.675-21.375%208.676-8.625%2021.5-8.625%2012.825%200%2021.325%208.625T180%20342v573h444q12.75%200%2021.375%208.675%208.625%208.676%208.625%2021.5%200%2012.825-8.625%2021.325T624%20975H180Zm120-120q-24%200-42-18t-18-42V235q0-24%2018-42t42-18h440q24%200%2042%2018t18%2042v560q0%2024-18%2042t-42%2018H300Zm0-60h440V235H300v560Zm0%200V235v560Z%22%2F%3E%3C%2Fsvg%3E")
    center/contain no-repeat;
}
/************************** SLIDER ***************************/
.slider-box {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0;
  gap: 3rem;
}
/*.slider-box div {
  background-color: #fff;
  color: #212529;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.2rem;
  border: 1px solid #ced4da;
  padding: 0.25rem 0.5rem !important;
  min-height: 1rem!important;
  }*/
.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  -ms-touch-action: none;
  touch-action: none;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}
.ui-slider-horizontal {
  height: 0.5rem;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 1rem;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 1rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 1rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 1rem;
}
/* Component containers
  ----------------------------------*/
.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}
.ui-widget-content a {
  color: #333333;
}
.ui-widget-header {
  border: 1px solid var(--pl-primary-soft);
  background: var(--pl-primary-soft);
  color: #333333;
  font-weight: bold;
}
.ui-widget-header a {
  color: #333333;
}
/* Interaction states
  ----------------------------------*/
.ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  /* We use html here because we need a greater specificity to make sure disabled
  works properly when clicked or hovered */
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: var(--pl-primary);
  font-weight: normal;
  color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: var(--pl-primary);
  font-weight: normal;
  color: #cccccc;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}
.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--pl-primary-soft);
  background: var(--pl-primary-soft);
  font-weight: normal;
  color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}
/* Interaction Cues
  ----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}
.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  -ms-filter: "alpha(opacity=70)"; /* support: IE8 */
  font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  -ms-filter: "alpha(opacity=35)"; /* support: IE8 */
  background-image: none;
}
.ui-state-disabled .ui-icon {
  -ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
}
.hide {
  display: none !important;
}
.btn-expand {
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
.btn-close.btn-bar {
  margin: -0.5rem -0.5rem -0.5rem 0.5rem !important;
}
.btn-zoom {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  color: #000;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
.btn-zoom:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.btn-zoom:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
.btn-zoom:disabled,
.btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
.btn-zoom img {
  height: 18px;
  vertical-align: baseline;
}
.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-header .btn-expand.btn-plus {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23f19220" class="bi bi-plus" viewBox="0 0 16 16"%3E%3Cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/%3E%3C/svg%3E')
    center/2rem auto no-repeat;
}
.btn-expand.btn-sm-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cg%3E%3Cpath d="M-56,26.9h-32v18.3h32V26.9z M-59.4,41.7h-25.1V30.3h25.1V41.7z"/%3E%3C/g%3E%3C/svg%3E')
    center/1rem auto no-repeat;
}
.btn-expand.btn-lg-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cg%3E%3Cpath d="M-56,26.9h-32v18.3h32V26.9z M-59.4,41.7h-25.1V30.3h25.1V41.7z"/%3E%3C/g%3E%3C/svg%3E')
    center/1.5rem auto no-repeat;
}
.btn-expand.btn-full-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cpath d="M-88,20v10.7h3.6v-7.1h7.1V20H-88z M-84.4,41.3H-88V52h10.7v-3.6h-7.1V41.3z M-59.6,48.4h-7.1V52H-56V41.3h-3.6V48.4z M-56,20h-10.7v3.6h7.1v7.1h3.6V20z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-sidebar {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layout-sidebar-inset-reverse" viewBox="0 0 16 16"%3E%3Cpath d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"/%3E%3Cpath d="M13 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-window {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-window" viewBox="0 0 16 16"%3E%3Cpath d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/%3E%3Cpath d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1M2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-eye {
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E")
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-eye-slash {
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/%3E%3C/svg%3E")
    center/1.125rem auto no-repeat;
}
.btn-expand:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.btn-expand:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
.btn-expand:disabled,
.btn-expand.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
.btn-expand-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* updated changes fromnew files */
/* --- LOGIN --- */

.slLogin,
.slWelcome {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
}
.slLogin button,
.slWelcome button {
  width: 100%;
}
.slLoginWrap,
.slWelcomeWrap {
  width: 350px;
}
.login-brand {
  text-align: center;
}
.login-brand img {
  height: 40px;
}
.auxbar {
  font-size: 0.75rem;
  color: var(--pl-primary);
  display: flex;
}
.auxbar div {
  width: 100%;
}
.auxbar label:hover,
.auxbar div:hover {
  cursor: pointer;
  text-decoration: underline;
}
.forgot {
  text-align: right;
}
.slInfo {
  color: var(--bs-danger);
}

.alert-messages {
  text-align: center;
}

/* ------ */

/* OTP */
.center-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.otp-verification {
  text-align: center;
}

.otp-inputs {
  margin-bottom: 20px;
}

.otp-box {
  font-size: 20px;
  padding: 5px;
  margin: 0 5px;
  width: 40px;
  border: none;
  border-bottom: 2px solid #000;
  text-align: center;
  outline: none;
}

.otp-box:focus {
  border-bottom-color: #007bff;
}

.otp-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: 1px solid transparent;
  display: block; /* Changed to block to make it look like a button */
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
  margin: 20px auto; /* Center the button */
}

.timer-container {
  margin-top: 20px;
  text-align: center; /* Ensure the timer text is centered */
}

.resend-otp {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: 1px solid transparent;
  display: none; /* Keep it hidden initially */
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto; /* Center the button when displayed */
}
/*  */

.menu-desc a {
  color: inherit;
  text-decoration: none;
}

/* Hide the checkbox */
.hidden-checkbox {
  display: none;
}

/* Initially hide the possible emails */
.hidden {
  display: none;
}

/* Show the emails and hide the label when checkbox is checked */
.hidden-checkbox:checked ~ .hidden {
  display: block;
}

.hidden-checkbox:checked + label {
  display: none;
}

.possible-emails div {
  padding-left: 0 !important;
  padding-bottom: 4px;
}

.possible-phones div {
  padding-left: 0 !important;
  padding-bottom: 4px;
}

#pagination-container {
  position: fixed;
  bottom: 15px; /* REQUIRED */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  z-index: 99999; /* REQUIRED */
}

#log-table-container {
  max-height: 90vh;
  overflow-y: auto;
  padding-bottom: 40px;
}
.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s;
}
.online-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.375rem;
  vertical-align: middle;
}
.online-status-green {
  background-color: #0ca30c;
}
.online-status-amber {
  background-color: #fab219;
}
.online-status-red {
  background-color: #d03b3b;
}
#usersFilters .form-select,
#usersFilters .form-control,
#usersFilters .bootstrap-select {
  min-width: 100px;
}
#usersFilters .bootstrap-select .dropdown-menu {
  min-width: 220px;
}

#log-thead {
  position: static;
}
.pagination-btn {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #f8f9fa;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.pagination-btn:hover {
  background: #e9ecef;
}

.pagination-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Google Maps context menu */
.gmap-context {
  position: absolute;
  display: none;
  z-index: 99999;
  min-width: 190px;
  background-color: rgba(var(--bs-dark-rgb), 1) !important;
  border-radius: 0.375rem;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
  max-height: var(--pl-sidebar-height);
}

.gmap-context::-webkit-scrollbar {
  width: 0.5em;
}
.gmap-context::-webkit-scrollbar-track {
  background: transparent;
}
.gmap-context::-webkit-scrollbar-thumb {
  background-color: var(--pl-primary-soft);
}
.gmap-context::-webkit-scrollbar-thumb:hover {
  background-color: var(--pl-primary);
}

.gmap-context.info {
  border-radius: 0px;
}

/* menu items */
.gmap-context .item {
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: white !important;
  white-space: nowrap;
}

.gmap-context .item .title {
  font-weight: 400 !important;
  color: var(--pl-primary-soft) !important;
}
.gmap-context .item .desc {
}

/* hover */
.gmap-context .item:hover {
  background-color: rgba(var(--pl-dark-rgb), 1) !important;
}

/* separator */
.gmap-context .sep {
  margin: 0.375rem 0;
  border-bottom: 1px solid var(--bs-gray);
}

.column-item .drag-handle {
  cursor: move;
  opacity: 0.6;
}

.column-item.is-off {
  background-color: var(--bs-gray-300);
}

.column-item.is-off .drag-handle {
  background-color: var(--bs-gray-300);
}

.bootstrap-select > .dropdown-menu {
  min-width: 100% !important;
  max-width: 100% !important;
}
.bootstrap-select .dropdown-menu li a span.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- CUSTOM MARKET FIELD DEFINITIONS --- */

#market-fields .field-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  overflow: hidden;
}
#market-fields .field-card:hover {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 2px 8px rgba(var(--pl-primary-rgb), 0.1);
}
#market-fields .field-card.selected {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px rgba(var(--pl-primary-rgb), 0.15);
}
#market-fields .field-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
#market-fields .type-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
#market-fields .ti-text {
  background: #e8ebff;
  color: #0020b3;
}
#market-fields .ti-number {
  background: #d1f0e4;
  color: #198754;
}
#market-fields .ti-select {
  background: #fef5e7;
  color: #f19220;
}
#market-fields .ti-multiselect {
  background: #fdf6d3;
  color: #e6ae07;
}
#market-fields .ti-boolean {
  background: #f0e8ff;
  color: #6f42c1;
}
#market-fields .ti-date {
  background: #e8ebff;
  color: #0020b3;
}
#market-fields .field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#market-fields .field-key-tag {
  font-family: "Courier New", monospace;
  font-size: 10px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1px 5px;
  color: #6c757d;
}
#market-fields .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#market-fields .sd-active {
  background: #198754;
}
#market-fields .sd-inactive {
  background: #adb5bd;
}
#market-fields .card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
#market-fields .field-card:hover .card-actions,
#market-fields .field-card.selected .card-actions {
  opacity: 1;
}
#market-fields .options-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 14px 8px 60px;
  border-top: 1px solid #f1f3f5;
  background: #f8f9fa;
}
#market-fields .opt-chip {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dee2e6;
  color: #495057;
}
#market-fields .tab-pill {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #6c757d;
  transition: all 0.15s;
}
#market-fields .tab-pill:hover {
  border-color: var(--pl-primary-soft);
  color: var(--pl-primary);
}
#market-fields .tab-pill.active {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}
#market-fields .market-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  min-height: 38px;
  background: #fff;
  cursor: text;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
#market-fields .market-tags-wrap:focus-within {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
}
#market-fields .mtag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fef5e7;
  border: 1px solid rgba(var(--pl-primary-rgb), 0.3);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pl-primary);
}
#market-fields .mtag button {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
#market-fields .mtag button:hover {
  opacity: 1;
}
#market-fields .tag-inline-input {
  border: none;
  outline: none;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #212529;
  min-width: 80px;
  flex: 1;
  background: transparent;
}
#market-fields .opt-build-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #f1f3f5;
}
#market-fields .opt-build-row:last-child {
  border-bottom: none;
}
#market-fields .drag-handle {
  color: #ced4da;
  cursor: grab;
  font-size: 14px;
}
#market-fields .form-panel {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  position: sticky;
  top: 16px;
}
#market-fields .form-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
}
#market-fields .form-panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #343a40;
}
#market-fields .form-panel-body {
  padding: 16px;
}
#market-fields .form-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 8px;
}
#market-fields .form-panel-footer .btn {
  flex: 1;
}
#market-fields .form-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #adb5bd;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
#market-fields .form-section-label::before,
#market-fields .form-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e9ecef;
}
#market-fields .pl-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
#market-fields .pl-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
#market-fields .pl-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ced4da;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
#market-fields .pl-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#market-fields .pl-toggle input:checked + .pl-toggle-slider {
  background: var(--pl-primary);
}
#market-fields .pl-toggle input:checked + .pl-toggle-slider::before {
  transform: translateX(16px);
}
#market-fields .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background: #f8f9fa;
}
#market-fields .toggle-row-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #495057;
}
#market-fields .toggle-row-sub {
  font-size: 10px;
  color: #adb5bd;
}
#market-fields .badge-global {
  background: #d1f0e4;
  color: #146c43;
}
#market-fields .badge-market {
  background: #e8ebff;
  color: #0020b3;
}
#market-fields .badge-required {
  background: #f8d7da;
  color: #842029;
}
#market-fields .badge-inactive {
  background: #e9ecef;
  color: #6c757d;
}
#market-fields .empty-state {
  text-align: center;
  padding: 40px 0;
  color: #adb5bd;
}
#market-fields .empty-state i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}
#market-fields .empty-state p {
  font-size: 0.8125rem;
}
#market-fields .field-list-wrap {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 2px;
}
#market-fields .field-list-wrap::-webkit-scrollbar {
  width: 4px;
}
#market-fields .field-list-wrap::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 4px;
}

/* =========================
   PLANNO SVG SPINNER (ultra-smooth, no micro-settle)
   ========================= */
.planno-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --planno-spinner-color: currentColor;
  --planno-duration: 2.8s; /* slower + smoother */
}

.planno-spinner svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.planno-layer {
  fill: var(--planno-spinner-color);
}
.planno-layer--bottom {
  opacity: 0.8;
}
.planno-layer--mid {
  opacity: 0.6;
}
.planno-layer--top {
  opacity: 0.4;
}

/* Use linear overall, then control easing per segment in keyframes */
.planno-layer--bottom {
  animation: plannoBottom var(--planno-duration) linear infinite;
}
.planno-layer--mid {
  animation: plannoMid var(--planno-duration) linear infinite;
}
.planno-layer--top {
  animation: plannoTop var(--planno-duration) linear infinite;
}

/* Bottom */
@keyframes plannoBottom {
  0% {
    transform: translateY(0px);
  }

  /* up (more steps) */
  6% {
    transform: translateY(-0.8px);
  }
  12% {
    transform: translateY(-1.6px);
  }
  18% {
    transform: translateY(-2.6px);
  }
  24% {
    transform: translateY(-3.8px);
  }
  30% {
    transform: translateY(-5px);
  }
  34% {
    transform: translateY(-6px);
  } /* peak */

  /* down (more steps) */
  40% {
    transform: translateY(-5.2px);
  }
  46% {
    transform: translateY(-4.2px);
  }
  52% {
    transform: translateY(-3px);
  }
  58% {
    transform: translateY(-1.8px);
  }
  64% {
    transform: translateY(-0.8px);
  }
  70% {
    transform: translateY(0px);
  }

  /* rest */
  82% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Mid */
@keyframes plannoMid {
  0% {
    transform: translateY(0px);
  }

  6% {
    transform: translateY(-1.8px);
  }
  12% {
    transform: translateY(-3.8px);
  }
  18% {
    transform: translateY(-5.8px);
  }
  24% {
    transform: translateY(-7.8px);
  }
  30% {
    transform: translateY(-9.6px);
  }
  34% {
    transform: translateY(-11px);
  }

  40% {
    transform: translateY(-9.6px);
  }
  46% {
    transform: translateY(-7.8px);
  }
  52% {
    transform: translateY(-5.8px);
  }
  58% {
    transform: translateY(-3.6px);
  }
  64% {
    transform: translateY(-1.6px);
  }
  70% {
    transform: translateY(0px);
  }

  82% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Top */
@keyframes plannoTop {
  0% {
    transform: translateY(0px);
  }

  6% {
    transform: translateY(-2.6px);
  }
  12% {
    transform: translateY(-5.2px);
  }
  18% {
    transform: translateY(-7.8px);
  }
  24% {
    transform: translateY(-10.8px);
  }
  30% {
    transform: translateY(-13.8px);
  }
  34% {
    transform: translateY(-16px);
  }

  40% {
    transform: translateY(-13.8px);
  }
  46% {
    transform: translateY(-10.8px);
  }
  52% {
    transform: translateY(-7.8px);
  }
  58% {
    transform: translateY(-4.8px);
  }
  64% {
    transform: translateY(-2.2px);
  }
  70% {
    transform: translateY(0px);
  }

  82% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .planno-layer--bottom,
  .planno-layer--mid,
  .planno-layer--top {
    animation: none;
  }
}

/* --- SOLAR LAYOUT --- */
/* Moved here from a JS-injected <style> block (solar/templates.js's former
   ensureSolarLayoutStyle()) — this feature is no longer an exception to the rest of the app's
   convention of keeping all feature styling in this shared stylesheet. See
   docs/solar-layout-technical-decisions.md for why it was ever inline. */
.solar-layout-modal { width: calc(100vw - 2rem); height: var(--pl-sidebar-height); max-width: none; border-radius: 0.375rem; overflow: hidden; display: flex; flex-direction: column; }
.solar-layout-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.75rem; }
/* Overrides the .modal-planno .modal-body:not(.col-box) > div:first-child rule above, which
   gives any modal-body's first div child a 0.25rem bottom margin — correct for ordinary
   stacked-content modals, but here it silently added 4px on top of this element's own
   height:100%, overflowing modal-body's box by that margin and triggering an unwanted
   scrollbar. Matches that rule's own selector shape (plus this element's class) so it actually
   wins on specificity, not just source order — a plain .solar-layout-body { margin: 0 } rule is
   less specific than the shared rule and loses. */
.solar-layout-modal .modal-body:not(.col-box) > .solar-layout-body:first-child { margin: 0; }
.solar-layout-body { display: flex; height: 100%; gap:1rem}
.solar-layout-map-col { flex: 1 1 auto; position: relative; min-width: 0; }
.solar-layout-map { width: 100%; height: 100%; }
.solar-layout-panel { flex: 0 0 320px; padding: 0rem; display: flex; flex-direction: column; }
.solar-layout-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.75rem; }
.solar-layout-panel h6 { margin: 0 0 0.375rem; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-gray-500); }
.solar-layout-section { margin-bottom: 1.5rem; }
.solar-layout-mode-row { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.solar-layout-mode-btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(var(--pl-primary-rgb), 0.3); background: rgba(var(--pl-primary-rgb), 0.1); color: var(--pl-primary); border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.8rem; cursor: pointer; }
.solar-layout-mode-btn i { font-size: 0.9em; }
.solar-layout-mode-btn:hover { background: rgba(var(--pl-primary-rgb), 0.2); }
.solar-layout-mode-btn.sl-btn-success { border-color: rgba(var(--bs-success-rgb), 0.3); background: rgba(var(--bs-success-rgb), 0.1); color: var(--bs-success); }
.solar-layout-mode-btn.sl-btn-success:hover { background: rgba(var(--bs-success-rgb), 0.2); }
.solar-layout-mode-btn.sl-btn-gray { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--bs-gray-500); }
.solar-layout-mode-btn.sl-btn-gray:hover { background: rgba(255,255,255,0.12); color: #fff; }
#solar_layout_save_footprint { width: 100%; justify-content: center; margin-top: 0.5rem; }
.solar-layout-mode-btn.active { background: var(--pl-primary); color: #fff; border-color: transparent; }
.solar-layout-mode-btn:disabled { opacity: 0.4; cursor: default; }
.solar-layout-rotate-row { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; }
.solar-layout-rotate-input { width: 60px; font-size: 0.8rem; padding: 2px 4px; text-align: center; font-variant-numeric: tabular-nums; }
.solar-layout-active-mode-banner { display: none; align-items: center; gap: 0.75rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--bs-gray-300); border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.8rem; margin-bottom: 0.75rem; }
.solar-layout-active-mode-banner i { color: var(--pl-primary); }
.solar-layout-active-mode-banner.visible { display: flex; }
.solar-layout-hint { font-size: 0.75rem; color: var(--bs-gray-500); margin-top: 0.25rem; }
.solar-layout-text-link { font-size: 0.75rem; color: var(--pl-primary); margin-top: 0.375rem; cursor: pointer; text-decoration: none; }
.solar-layout-text-link:hover { color: #e0554e; text-decoration: underline; }

.solar-layout-setback-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; }
.solar-layout-setback-row label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.solar-layout-setback-custom { width: 60px; font-size: 0.8rem; padding: 2px 4px; }
.solar-layout-warning { display: none; align-items: center; gap: 0.375rem; background: #fdecea; border: 1px solid #e0554e; color: #a52a20; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.78rem; margin-top: 0.375rem; }
.solar-layout-warning.visible { display: flex; }

.solar-layout-draw-toolbar { display: flex; flex-direction: column; gap: 0.375rem; }
.solar-layout-draw-row { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.solar-layout-constraint-list { display: flex; flex-direction: column; gap: 0.375rem; }
.solar-layout-constraint-item { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.375rem; padding: 0.375rem; font-size: 0.78rem; cursor: pointer; }
.solar-layout-constraint-item.selected { border-color: var(--pl-primary); background: rgba(var(--pl-primary-rgb), 0.08); }
.solar-layout-constraint-item .sl-badge { display: inline-block; border-radius: 3px; padding: 1px 6px; font-size: 0.7rem; color: #fff; margin-right: 0.375rem; }
/* Ridge/exclusion colors below should match solar/constants.js's SOLAR_COLORS.ridge/exclusion
   exactly (also used on-screen and in KML export) — they're plain hardcoded hex here for now,
   not wired to that shared source, so they can drift if one is changed without the other. */
.solar-layout-constraint-item .sl-badge.ridge { background: #c0392b; }
.solar-layout-constraint-item .sl-badge.exclusion { background: #7f8c8d; }
.solar-layout-constraint-item input[type="number"] { width: 54px; font-size: 0.75rem; padding: 1px 3px; }
.solar-layout-constraint-empty { font-size: 0.75rem; color: var(--bs-gray-500); }
.solar-layout-constraint-delete { border: none; background: none; color: #a52a20; cursor: pointer; padding: 0 2px; }

.solar-layout-stepper { display: flex; align-items: center; gap: 0; padding: 8px 16px 0px 16px; font-size: 0.75rem; }
.solar-layout-step { display: flex; align-items: center; gap: 6px; opacity: 0.45; }
.solar-layout-step.active { opacity: 1; font-weight: 600; }
.solar-layout-step.done { opacity: 0.75; }
.solar-layout-step-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.12); font-size: 0.7rem; }
/* Fallback color below should match solar/constants.js's SOLAR_COLORS.footprint exactly (also
   used on-screen and in KML export) — see the ridge/exclusion note above; same caveat applies. */
.solar-layout-step.active .solar-layout-step-num { background: var(--pl-primary, #2a7de1); color: #fff; }
.solar-layout-step-sep { width: 24px; height: 1px; background: rgba(0,0,0,0.15); margin: 0 8px; }

.solar-layout-stage { display: none; }
.solar-layout-stage.active { display: block; }

.solar-layout-footprint-notice { display: none; align-items: flex-start; gap: 0.375rem; background: #eef4fc; border: 1px solid #a9c8ef; color: #1a4c8b; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.78rem; margin-bottom: 0.75rem; }
.solar-layout-footprint-notice.visible { display: flex; }
.solar-layout-footprint-notice span { flex: 1 1 auto; }
.solar-layout-footprint-notice-dismiss { border: none; background: none; cursor: pointer; opacity: 0.6; padding: 0; line-height: 1; }
.solar-layout-footprint-notice-dismiss:hover { opacity: 1; }

.solar-layout-stage-nav { flex: 0 0 auto; padding-top: 0.75rem; padding-bottom: 0.25rem; padding-right: 0.5rem; border-top: 1px solid var(--bs-gray); display: flex; justify-content: space-between; }

.solar-layout-vertex-angle-label { position: absolute; transform: translate(6px, -100%); background: rgba(255,255,255,0.85); color: #1a1a1a; font-size: 11px; font-weight: 600; line-height: 1; padding: 2px 4px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.25); white-space: nowrap; pointer-events: none; }

.solar-layout-results-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.solar-layout-results-table td { padding: 3px 0; }
.solar-layout-results-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.solar-layout-results-table tr.solar-layout-results-loss td { opacity: 0.65; font-size: 0.75rem; }
.solar-layout-results-table tr.solar-layout-results-total td { border-top: 1px solid rgba(255,255,255,0.08); font-weight: 600; padding-top: 0.375rem; }
.solar-layout-results-table tr.solar-layout-results-headline td { font-weight: 700; font-size: 0.95rem; padding-top: 0.75rem; }
.solar-layout-results-empty { font-size: 0.8rem; opacity: 0.6; }

.solar-layout-panel-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; font-size: 0.78rem; }
.solar-layout-panel-settings-grid label { display: flex; flex-direction: column; gap: 2px; }
.solar-layout-panel-settings-grid input, .solar-layout-panel-settings-grid select { font-size: 0.78rem; padding: 3px 4px; }
.solar-layout-panel-select-label,
.solar-layout-panel-full-row { grid-column: 1 / -1; }
#sl_selected_power_error:not(:empty) { color: #a52a20; }